itube-specs 0.0.760 → 0.0.762

package/components/grids/s-grid-videos.vue

@@ -1,68 +0,0 @@
-<template>
-  <div
-      class="s-grid-videos"
-      :class="[
-          {'--first-hidden': hideFirstRow},
-      ]"
-  >
-    <slot name="grid-start"/>
-    <SVideoCard
-        v-for="(item, index) in eagerItems"
-        :key="`video-${item.guid}`"
-        class="s-grid-videos__card"
-        :card="item"
-        :priority="priority && index < eagerCount"
-        :loading="!related ? 'eager' : 'lazy'"
-        :top-chips="topChips"
-        :playlist-id="playlistId"
-        :playlist="playlist"
-    />
-    <slot/>
-    <LazySVideoCard
-        v-for="item in idleItems"
-        :key="`video-idle-${item.guid}`"
-        class="s-grid-videos__card"
-        :card="item"
-        loading="lazy"
-        :top-chips="topChips"
-        :playlist-id="playlistId"
-        :playlist="playlist"
-        hydrate-on-idle
-    />
-    <LazySVideoCard
-        v-for="item in lazyItems"
-        :key="`video-lazy-${item.guid}`"
-        class="s-grid-videos__card"
-        :card="item"
-        loading="lazy"
-        :top-chips="topChips"
-        :playlist-id="playlistId"
-        :playlist="playlist"
-        hydrate-on-visible
-    />
-    <slot name="grid-end"/>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IVideoCard } from '../../types';
-
-const IDLE_COUNT = 4;
-
-const props = defineProps<{
-  items: Array<IVideoCard>
-  hideFirstRow?: boolean
-  priority?: boolean
-  related?: boolean
-  playlist?: boolean
-  playlistId?: string
-  topChips?: string[]
-}>();
-
-const isMobile = useState<boolean>('isMobile');
-const eagerCount = computed(() => isMobile.value ? 4 : 12);
-
-const eagerItems = computed(() => props.items.slice(0, eagerCount.value));
-const idleItems = computed(() => props.items.slice(eagerCount.value, eagerCount.value + IDLE_COUNT));
-const lazyItems = computed(() => props.items.slice(eagerCount.value + IDLE_COUNT));
-</script>

package/components/page-components/s-breadcrumbs.vue

@@ -1,44 +0,0 @@
-<template>
-  <nav class="s-breadcrumbs" aria-label="Breadcrumb" role="navigation" itemscope itemtype="https://schema.org/BreadcrumbList">
-    <ol>
-      <li
-        v-for="(item, index) in resultItems"
-        :key="`breadcrumb-${index}`"
-        itemscope
-        itemprop="itemListElement"
-        itemtype="https://schema.org/ListItem"
-      >
-        <NuxtLink
-          :to="generateLink(item.to || '/')"
-          class="s-breadcrumbs__item"
-          itemprop="item"
-        >
-          <span itemprop="name" v-html="item.name" />
-        </NuxtLink>
-        <meta itemprop="position" :content="String(index + 1)" >
-      </li>
-      <li
-        itemscope
-        itemprop="itemListElement"
-        itemtype="https://schema.org/ListItem"
-      >
-        <span class="s-breadcrumbs__item" aria-current="page" itemprop="name" v-html="items[items.length - 1].name" />
-        <meta itemprop="position" :content="String(items.length)" >
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { IBreadcrumbItem } from '../../types';
-
-const props = defineProps<{
-  items: IBreadcrumbItem[]
-}>()
-
-const { generateLink } = useGenerateLink();
-
-const resultItems = computed(() => {
-  return props.items.slice(0, props.items.length - 1)
-})
-</script>

package/components/page-components/s-expand-row.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-      ref="containerRef"
-      class="s-expand-row"
-      :class="[
-            { '--expand-show': isExpandOpened },
-            { '--alphabet': alphabet },
-            { '--mobile-expand': mobileExpand },
-        ]"
-  >
-    <div
-        class="s-expand-row__wrapper"
-        :class="[{ '--more-show': isElementsOverflow }]"
-    >
-      <slot name="prepend">
-        <span v-if="preText" class="s-expand-row__pre-text">{{ preText }}</span>
-      </slot>
-      <slot>
-        <SChips
-            v-for="item in itemsResult"
-            :key="item.title"
-            :item="item"
-            :alphabet="alphabet"
-            is-link
-            :mini="mini"
-        />
-      </slot>
-      <div
-          v-if="!hideMore"
-          v-show="isElementsOverflow"
-          class="s-expand-row__more-wrapper"
-          :class="{'--small': mini}"
-      >
-        <SChips
-            class="s-expand-row__button --more"
-            :item="{
-              title: moreButtonName,
-              icon: isExpandOpened ? 'minus' : 'plus',
-            }"
-            :mini="mini"
-            @click="onMoreClick"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IChipsItem } from '../../types';
-
-const props = withDefaults(
-    defineProps<{
-      items?: IChipsItem[];
-      alphabet?: boolean;
-      hideMore?: boolean;
-      mini?: boolean;
-      mobileExpand?: boolean;
-      maximumButtons?: number;
-      preText?: string;
-    }>(), {
-      maximumButtons: 20, // вычислено на глаз, приблизительно
-    }
-);
-
-const { t } = useI18n()
-
-const emit = defineEmits<{
-  (eventName: 'more', eventValue: boolean): void
-}>()
-
-const containerRef = ref();
-
-const isExpandOpened = ref(false);
-
-const itemsResult = computed(() => {
-  return props.items?.slice(
-      0,
-      !props.alphabet && !isExpandOpened.value
-          ? props.maximumButtons
-          : props.items.length,
-  );
-});
-
-const moreButtonName = computed(() => isExpandOpened.value ? t('less') : t('more'));
-
-const isElementsOverflow = ref(false);
-
-function checkIsElementOverflow() {
-  isElementsOverflow.value = !!(
-      containerRef.value &&
-      containerRef.value.scrollHeight > containerRef.value.clientHeight
-  );
-}
-
-function onMoreClick() {
-  isExpandOpened.value = !isExpandOpened.value
-  emit('more', isExpandOpened.value)
-}
-
-onMounted(() => {
-  requestAnimationFrame(() => checkIsElementOverflow());
-});
-
-let checkTimer: ReturnType<typeof setTimeout> | null = null;
-
-watch(() => useRoute().query, () => {
-  checkTimer = setTimeout(() => checkIsElementOverflow(), 100);
-});
-
-onBeforeUnmount(() => {
-  if (checkTimer) clearTimeout(checkTimer);
-});
-</script>

package/components/page-components/s-filter-button.vue

@@ -1,41 +0,0 @@
-<template>
-  <SButton
-      class="s-filter-button"
-      :size="size"
-      :theme="theme"
-      aria-label="Filter"
-      :title="t('filter')"
-      @click="emit('update:modelValue', true)"
-  >
-    <SIcon name="adjustments-horizontal" size="16"/>
-    <span class="_from-sm"
-    >{{ t('filter') }}
-      </span>
-    <span
-        v-if="count > 0"
-        class="s-filter-button__count"
-    >{{ mobileCount }}</span>
-  </SButton>
-</template>
-
-<script setup lang="ts">
-import type { ButtonSizes, ButtonThemes } from '../../types';
-
-const props = defineProps<{
-  count: number
-  modelValue: boolean
-  size?: ButtonSizes
-  theme?: ButtonThemes
-}>()
-
-const emit = defineEmits<{
-  (eventName: 'update:modelValue', value: boolean): void
-}>()
-
-const { t } = useI18n()
-
-const mobileCount = computed(() => props.count > 9 ? '9+' : props.count);
-</script>
-
-<style scoped lang="scss">
-</style>

package/components/page-components/s-filter-chips.vue

@@ -1,34 +0,0 @@
-<template>
-  <SExpandRow v-if="items.length > 0">
-    <template #prepend>
-      <slot/>
-    </template>
-    <SChips
-        v-for="(item, index) in items"
-        class="s-filter-chips"
-        with-close
-        :index="`s-filter-page-chips${index}`"
-        :item="item"
-        @click="onChipsClick(item)"
-    />
-  </SExpandRow>
-</template>
-
-<script setup lang="ts">
-import type { IChipsItem } from '../../types';
-
-defineProps<{
-  items: IChipsItem[]
-}>();
-
-const emit = defineEmits<{
-  (eventName: 'click', eventValue: IChipsItem): void
-}>()
-
-function onChipsClick(item: IChipsItem) {
-  emit('click', item)
-}
-</script>
-
-<style scoped lang="scss">
-</style>

package/components/page-components/s-filter-page.vue

@@ -1,178 +0,0 @@
-<template>
-  <div class="s-filter-page">
-    <div class="s-filter-page__items-wrapper">
-      <h2
-          v-if="title"
-          class="s-filter-page__title"
-      >{{ title }}
-      </h2>
-      <div
-          v-for="(group, index) in groups"
-          :key="`filter-group-${index}`"
-          class="s-filter-page__group"
-          :class="{'--short': group.name === 'tags'}"
-      >
-        <div
-            v-if="filters.length > 0"
-            class="s-filter-page__group-header"
-        >
-          <span class="s-filter-page__group-title">
-            {{ group?.title }}
-          </span>
-          <SSegmentedControl
-              v-if="group?.name === 'physical'"
-              :items="unitItems"
-              :model-value="units"
-              small
-              @update:model-value="units = $event"
-          />
-        </div>
-        <div
-            v-if="getGroupSliders(group?.name).length > 1"
-            class="s-filter-page__sliders"
-            :style="{ '--slider-count': getGroupSliders(group?.name).length }"
-        >
-          <SFilterSlider
-              v-for="(item, subIndex) in getGroupSliders(group?.name)"
-              :key="`slider-${subIndex}`"
-              :item="item"
-              :group-name="item.group.name"
-              :index="subIndex"
-          />
-        </div>
-        <div class="s-filter-page__items">
-          <template v-for="(item, subIndex) in filters">
-            <SFilterSlider
-                v-if="(item.kind === 'range') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name) && getGroupSliders(group?.name).length === 1"
-                class="s-filter-page__slider"
-                :item="item"
-                :group-name="item.group.name"
-                :index="subIndex"
-            />
-            <SSelect
-                v-if="(item.kind === 'select') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name)"
-                class="s-filter-page__select"
-                :key="`model-filter-select-${subIndex}`"
-                :name="item.name"
-                :model-value="getValue(item.name)"
-                :items="selectItems(item)"
-                size="s"
-                :active="isActiveSelect(item.name)"
-                :label="item.title"
-                @update:model-value="val => updateFilter(item.name, val)"
-            />
-            <SSegmentedControl
-                v-if="(item.kind === 'radio') && (item.group.name === group?.name)"
-                class="s-filter-page__radio"
-                :items="getRadioItems(item.options)"
-                :title="item.title"
-                :model-value="getValue(item.name)"
-                @update:model-value="val => updateFilter(item.name, val)"
-            />
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IModelFilter, IModelFilterOptions } from '../../types';
-
-import { useRoute, useRouter } from 'vue-router';
-
-const props = defineProps<{
-  filters: IModelFilter[]
-  count: number
-  title?: string
-}>();
-
-const route = useRoute();
-const router = useRouter();
-
-const { t } = useI18n();
-
-const { units, hiddenByUnits } = useUnits();
-
-watch(units, () => {
-  const query = { ...route.query };
-  const unitFields = ['height_cm', 'height_in', 'weight_kg', 'weight_lb'];
-  for (const field of unitFields) {
-    delete query[`filter_${field}_from`];
-    delete query[`filter_${field}_to`];
-  }
-  router.replace({ query });
-});
-
-const unitItems = computed(() => [
-  { name: 'imperial', title: t('units_imperial'), quantity: 0 },
-  { name: 'metric', title: t('units_metric'), quantity: 0 },
-]);
-
-const groups = computed(() => {
-  const uniqueNames = [...new Set(props.filters.map(item => item.group.title))];
-  return uniqueNames.map(name => {
-    return props.filters.find(filter => filter.group.title === name)?.group;
-  }).sort((a, b) => a?.order - b?.order)
-});
-
-function getGroupSliders(groupName: string) {
-  return props.filters.filter(
-    (item) => item.kind === 'range' && item.group.name === groupName && !hiddenByUnits.value.has(item.name)
-  );
-}
-
-function selectItems(item: IModelFilter) {
-  return [
-    ...item.options.map(item => ({
-      value: item.name,
-      title: `${item.title} (${item.quantity})`,
-    }))
-  ]
-}
-
-function updateFilter(name: string, val: any) {
-  const query = { ...route.query };
-
-  if (!val || val === 'all') {
-    delete query[ `filter_${name}` ];
-  } else {
-    query[ `filter_${name}` ] = val;
-  }
-
-  router.replace({ query });
-}
-
-function isActiveSelect(name: string) {
-  const baseName = name.replace(/_(from|to)$/, '');
-  return Object.keys(route.query).some(key => key.startsWith(`filter_${baseName}`));
-}
-
-function getValue(name: string) {
-  const value = route.query[ `filter_${name}` ];
-  if (value) {
-    return value;
-  }
-  const filter = props.filters.find(f => f.name === name);
-  if (filter && filter.options.length > 0) {
-    return filter.options[ 0 ].name;
-  }
-  return null;
-}
-
-function getRadioItems(items: IModelFilterOptions[]) {
-  const filteredItems = items.filter((item) => item.name !== 'unspecified');
-  const order = ['all', 'yes'];
-  return filteredItems.sort((a, b) => {
-    const aIndex = order.indexOf(a.name);
-    const bIndex = order.indexOf(b.name);
-    if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
-    if (aIndex !== -1) return -1;
-    if (bIndex !== -1) return 1;
-    return 0;
-  });
-}
-</script>
-
-<style scoped lang="scss">
-</style>

package/components/page-components/s-filter-popup.vue

@@ -1,155 +0,0 @@
-<template>
-  <SPopup
-      v-if="model"
-      v-model="model"
-      drawer
-      class="s-filter-popup"
-  >
-    <template #title>
-      <div class="s-filter-popup__title-wrapper">
-        {{ title ?? t('filter') }}
-        <span
-            v-if="activeCount"
-            class="s-filter-popup__active"
-        >{{ activeCount }} active</span>
-      </div>
-    </template>
-
-    <div
-        class="s-filter-popup__content"
-        :class="{ '_loading': loading }"
-    >
-      <div
-          v-if="activeChips && activeChips.length > 0"
-          class="s-filter-popup__active-filters"
-      >
-        <span class="s-filter-popup__active-filters-title">{{ t('filter_popup.active_title') }}</span>
-        <div class="s-filter-popup__active-chips">
-          <SChips
-              v-for="(chip, index) in activeChips"
-              :key="`s-filter-popup-active-${index}`"
-              class="s-filter-popup__chips"
-              with-close
-              :index="`s-filter-popup-chips-${index}`"
-              :item="chip"
-              @click="$emit('chip-click', chip)"
-          />
-        </div>
-      </div>
-
-      <div
-          v-if="quick && quick.length > 0"
-          class="s-filter-popup__quick"
-      >
-        <span class="s-filter-popup__quick-title">{{ t('filter_popup.quick_title') }}</span>
-        <div class="s-filter-popup__grid">
-          <template v-for="(item, index) in quick" :key="`quick-${index}`">
-            <slot
-                name="quick-field"
-                :item="item"
-                :index="index"
-            >
-              <SSelect
-                  class="s-filter-popup__select"
-                  :name="(item as any).name"
-                  :model-value="(item as any).value"
-                  :items="(item as any).items"
-                  size="s"
-                  :is-first-placeholder="modelsPage"
-                  :active="(item as any).active"
-                  :label="(item as any).label ?? (item as any).title"
-                  :label-icon="(item as any).icon ? { icon: (item as any).icon, prefix: (item as any).iconPrefix ?? (modelsPage ? 'models' : 'categories') } : undefined"
-                  :placeholder="(item as any).placeholder"
-                  @update:model-value="val => $emit('field-update', { name: (item as any).name, value: val })"
-              />
-            </slot>
-          </template>
-        </div>
-      </div>
-
-      <details
-          v-for="(group, groupIndex) in groups"
-          :key="`group-${groupIndex}`"
-          class="s-filter-popup__group"
-      >
-        <summary class="s-filter-popup__summary">
-          <SIcon
-              name="angle-right"
-              size="16"
-              class="s-filter-popup__summary-arrow"
-          />
-          <span class="s-filter-popup__summary-title">{{ group.title }}</span>
-          <span class="s-filter-popup__summary-count">{{ t('filter_popup.fields', { count: group.count ?? group.fields.length }) }}</span>
-          <span
-              v-if="group.description"
-              class="s-filter-popup__summary-description"
-          >{{ group.description }}</span>
-        </summary>
-        <div class="s-filter-popup__group-content">
-          <template
-              v-for="(field, fieldIndex) in group.fields"
-              :key="`field-${groupIndex}-${fieldIndex}`"
-          >
-            <slot
-                name="field"
-                :field="field"
-                :group="group"
-                :index="fieldIndex"
-            >
-              <SSelect
-                  class="s-filter-popup__select"
-                  :name="(field as any).name"
-                  :model-value="(field as any).value"
-                  :items="(field as any).items"
-                  size="s"
-                  :active="(field as any).active"
-                  :label="(field as any).label ?? (field as any).title"
-                  :label-icon="(field as any).icon ? { icon: (field as any).icon, prefix: (field as any).iconPrefix ?? (modelsPage ? 'models' : 'categories') } : undefined"
-                  :placeholder="(field as any).placeholder"
-                  @update:model-value="val => $emit('field-update', { name: (field as any).name, value: val })"
-              />
-            </slot>
-          </template>
-        </div>
-      </details>
-    </div>
-
-    <template #footer>
-      <slot name="footer"/>
-    </template>
-  </SPopup>
-</template>
-
-<script setup lang="ts" generic="TField">
-import type { IChipsItem } from '../../types';
-
-export interface FilterGroup<T> {
-  key: string
-  title: string
-  description?: string
-  count?: number
-  fields: T[]
-}
-
-defineProps<{
-  title?: string
-  activeCount?: number
-  activeChips?: IChipsItem[]
-  quick?: TField[]
-  groups?: FilterGroup<TField>[]
-  loading?: boolean
-  modelsPage?: boolean
-}>();
-
-defineEmits<{
-  (e: 'chip-click', item: IChipsItem): void
-  (e: 'field-update', payload: { name: string, value: any }): void
-}>();
-
-const model = defineModel<boolean>();
-
-const { t } = useI18n();
-</script>
-
-<style scoped lang="scss">
-</style>