itube-specs 0.0.195

package/README.md

@@ -0,0 +1,121 @@
+Порядок действий:  
+1) `npm login` = логинимся к npm (bitbucket);  
+2) `npm version patch` - патчит версию (можно и минорить или мажорить по ситуации);  
+3) `npm publish --access public` - публикуем версию (или сразу `npm run public` - обьединяет два действия);  
+4) ставим пакет в проекте;  
+5) проекте самом в `nuxt.config.ts` добавляем;  
+```bash
+    extends: [
+        process.env.LAYER_PATH || '@test/test'
+    ],
+```
+6) Если не первый раз то обновляем пакет `npm install @test/test@latest`, если пакет уже установлен можно в ручную поменять версию и `npm install` (если пакет недавно обновился, сразу npm install может не подхватить последнюю версию);  
+7) `npx nuxi prepare`  
+8) если есть проблемы с runtime запустить в пакете npm run dev он перегенерирует tsconfig и eslint.config.mjs   
+9) и запускаем либо `npm run dev`
+
+`nuxt.config.ts`
+
+```bash
+import { fileURLToPath } from 'node:url'
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  modules: ['@nuxt/eslint'],
+  eslint: {
+    config: {
+      // Use the generated ESLint config for lint root project as well
+      rootDir: fileURLToPath(new URL('..', import.meta.url))
+    }
+  },
+  components: {
+    dirs: [
+      {
+        path: './components',
+        pathPrefix: false
+      }
+    ]
+  }
+})
+```
+
+`package.json` - версии nuxt && vue должны быть идентичны проекту
+```bash
+{
+  "name": "@test/test", // свое
+  "type": "module",
+  "version": "0.0.1",
+  "main": "./nuxt.config.ts",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./nuxt.config.ts",
+      "default": "./nuxt.config.ts"
+    },
+    "./types": {
+      "types": "./types/index.d.ts",
+      "default": "./types/index.d.ts"
+    },
+    "./runtime": {
+      "import": "./runtime/index.ts",
+      "default": "./runtime/index.ts"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "components/",
+    "composables/",
+    "types/",
+    "nuxt.config.ts"
+  ],
+  "devDependencies": {
+    "@nuxt/eslint": "latest",
+    "@types/node": "^20.19.19",
+    "eslint": "^9.37.0",
+    "nuxt": "3.17.6",
+    "typescript": "^5.9.3",
+    "vue": "3.5.17"
+  }
+}
+```
+Импорт typescript типов осуществляется за счет этих опций 
+```
+"types": "./types/index.d.ts",
+"exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./nuxt.config.ts",
+      "default": "./nuxt.config.ts"
+    },
+    "./types": {
+      "types": "./types/index.d.ts",
+      "default": "./types/index.d.ts"
+    },
+    "./runtime": {
+      "import": "./runtime/index.ts",
+      "default": "./runtime/index.ts"
+    },
+    "./*": "./*"
+},
+```
+Где:
+- "types" указывает TypeScript, где лежит корневой файл с типами;  
+- "exports" сообщает Node и TS, какие модули доступны для импорта;  
+- "./types" позволяет писать коротко:  
+
+```
+import type { IUser } from '@test/test/types'
+```
+Типы не импортируются автоматически, каждый тип в свою очередь экспортируется в index.d.ts (обязательно указывать расширение при эскпорте d.ts) общий файл откуда уже и берутся все типы в проект.
+
+`tsconfig.json` 
+
+```bash
+{
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "types": ["node"]
+  }
+}
+```

package/components/cards/f-video-mini-card.vue

@@ -0,0 +1,49 @@
+<template>
+<component
+    class="f-video-mini-card"
+    :is="component"
+    :title="card.title"
+    :to="link ? generateLink(`/playlists/${prefix}/${card.id}`) : null"
+>
+  <div class="f-video-mini-card__img-wrapper">
+    <FImg
+        class="f-video-mini-card__img"
+        sizes="96px"
+        :src="card.thumbUrl"
+        width="96"
+        height="64"
+        :alt="card.title"
+    />
+    <FLabel
+        class="f-video-mini-card__duration"
+        theme="black"
+        :text="duration"
+    ></FLabel>
+  </div>
+  <p class="f-video-mini-card__description _truncate">{{ card.title }}</p>
+</component>
+</template>
+
+<script setup lang="ts">
+import type { IVideoCard } from '../../types';
+import { getDuration } from '../../runtime';
+
+const props = defineProps<{
+  card: IVideoCard
+  link?: boolean
+  prefix?: string
+}>()
+
+const duration = computed(() => {
+  return getDuration(props.card.duration)
+})
+
+const component = computed(() => {
+  if (props.link) {
+    return resolveComponent('NuxtLink');
+  }
+  return 'div';
+})
+
+const { generateLink } = useGenerateLink();
+</script>

package/components/grids/f-grid-categories.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="f-grid-categories">
+    <FCategoryCard
+        v-for="(item, index) in categories"
+        :card="item"
+        :key="item.guid"
+        :priority="priority && index === 0"
+    />
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ICategoryCard } from '../../types';
+
+defineProps<{
+  categories: Array<ICategoryCard>,
+  priority?: boolean
+}>()
+</script>

package/components/grids/f-grid-channels.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+      class="f-grid-channels"
+      id="anchor"
+  >
+    <FChannelCard
+        class="f-grid-channels__card"
+        v-for="(item, index) in items"
+        :card="item"
+        :key="item.guid"
+        :priority="priority && index === 0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IChannelCard } from '../../types';
+
+defineProps<{
+  items: IChannelCard[]
+  priority?: boolean
+}>()
+</script>

package/components/grids/f-grid-models.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+      class="f-grid-models"
+      :class="{'--footer': footer}"
+  >
+    <FModelCard
+        v-for="(item, index) in items"
+        :key="`model-card-${item.guid}`"
+        class="f-grid-models__item"
+        :card="item"
+        :loading="index > 5 ? 'lazy' : 'eager'"
+        :priority="priority && index === 0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IModelCard } from '../../types';
+
+defineProps<{
+  items: IModelCard[]
+  footer?: boolean
+  priority?: boolean
+}>()
+</script>

package/components/grids/f-grid-playlists.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="f-grid-playlists">
+    <FPlaylistCard
+        v-for="(item, index) in items"
+        :card="item"
+        :key="`user-playlist-${index}`"
+        :top-playlists="topPlaylists"
+        :priority="priority && index === 0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IPlaylistCard } from '../../types';
+
+defineProps<{
+  items: IPlaylistCard[]
+  topPlaylists?: boolean
+  priority?: boolean
+}>()
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <div
+      class="f-grid-videos"
+      :class="[
+          {'--first-hidden': hideFirstRow},
+      ]"
+  >
+    <FVideoCard
+        v-for="(item, index) in items"
+        class="f-grid-videos__card"
+        :card="item"
+        :priority="priority && index === 0"
+        :loading="index > 3 || related ? 'lazy' : 'eager'"
+        :key="`video-${item.guid}`"
+        :top-chips="topChips"
+        :playlist-id="playlistId"
+    />
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IVideoCard } from '../../types';
+
+defineProps<{
+  items: Array<IVideoCard>
+  hideFirstRow?: boolean
+  priority?: boolean
+  related?: boolean
+  playlistId?: string
+  topChips?: string[]
+}>()
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <nav class="f-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="f-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="f-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/f-chips-panel.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+      class="f-chips-panel"
+      ref="containerRef"
+      :class="[
+            { '--expand-show': isExpandOpened },
+            { '--alphabet': alphabet },
+            { '--mobile-expand': mobileExpand },
+        ]"
+  >
+    <div
+        class="f-chips-panel__wrapper"
+        :class="[{ '--more-show': isElementsOverflow }]"
+    >
+      <slot name="prepend"></slot>
+      <slot>
+        <FChips
+            v-for="item in itemsResult"
+            :item="item"
+            :key="item.title"
+            :alphabet="alphabet"
+            is-link
+            :mini="mini"
+        />
+      </slot>
+      <div
+          v-if="!hideMore"
+          v-show="isElementsOverflow"
+          class="f-chips-panel__more-wrapper"
+          :class="{'--small': mini}"
+      >
+        <FChips
+            class="f-chips-panel__button --more"
+            :item="{
+              title: moreButtonName,
+              icon: isExpandOpened ? 'minus' : 'plus',
+            }"
+            :mini="mini"
+            @click="onMoreClick"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IChipsItem } from '@arkadykid/test/types';
+
+const props = defineProps<{
+  items?: IChipsItem[];
+  alphabet?: boolean;
+  hideMore?: boolean;
+  mini?: boolean;
+  mobileExpand?: boolean;
+}>();
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  (eventName: 'more', eventValue: boolean): void
+}>()
+
+const containerRef = ref();
+
+const isExpandOpened = ref(false);
+
+const MAXIMUM_BUTTONS = 20; // вычислено на глаз, приблизительно
+
+const itemsResult = computed(() => {
+  return props.items?.slice(
+      0,
+      !props.alphabet && !isExpandOpened.value
+          ? MAXIMUM_BUTTONS
+          : 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(() => {
+  checkIsElementOverflow();
+});
+
+watch(() => useRoute().query, () => {
+  setTimeout(() => checkIsElementOverflow(), 100)
+})
+</script>

package/components/page-components/f-pagination.vue

@@ -0,0 +1,206 @@
+<template>
+  <nav
+      v-if="length > 1"
+      class="f-pagination"
+  >
+    <div class="f-pagination__items">
+
+      <template v-if="length <= 6">
+        <NuxtLink
+            class="f-pagination__item"
+            :class="[
+              number === activeNumber && 'f-pagination__item--active',
+              theme && `f-button --${theme}`
+            ]"
+            v-for="number in length"
+            :key="`pagination-${number}`"
+            :to="linkTo(number)"
+        >
+          {{ number }}
+        </NuxtLink>
+      </template>
+
+      <template v-else>
+        <NuxtLink
+            class="f-pagination__item"
+            :class="[
+              1 === activeNumber && 'f-pagination__item--active',
+              theme && `f-button --${theme}`
+            ]"
+            :to="linkTo(1)"
+        >1
+        </NuxtLink>
+        <span
+            v-if="activeNumber > 4"
+            class="f-pagination__item f-pagination__item--empty"
+            :class="[
+              theme && `f-button --${theme}`
+            ]"
+        >...</span>
+        <NuxtLink
+            v-else
+            class="f-pagination__item"
+            :class="[
+              2 === activeNumber && 'f-pagination__item--active',
+              theme && `f-button --${theme}`
+            ]"
+            :to="linkTo(2)"
+        >2
+        </NuxtLink>
+        <NuxtLink
+            v-for="number in activeNumbers"
+            :class="[
+              number === activeNumber && 'f-pagination__item--active',
+              theme && `f-button --${theme}`
+            ]"
+            class="f-pagination__item"
+            :key="`pagination-${number}`"
+            :to="linkTo(number)"
+        >
+          {{ number }}
+        </NuxtLink>
+        <span
+            v-if="activeNumber < length - 3"
+            class="f-pagination__item f-pagination__item--empty"
+            :class="[
+              theme && `f-button --${theme}`
+            ]"
+        >...</span>
+        <NuxtLink
+            v-else
+            class="f-pagination__item"
+            :class="[
+              length - 1 === activeNumber && 'f-pagination__item--active',
+              theme && `f-button --${theme}`
+            ]"
+            :to="linkTo(length - 1)"
+        >{{ length - 1 }}
+        </NuxtLink>
+        <NuxtLink
+            class="f-pagination__item"
+            :class="[
+              length === activeNumber && 'f-pagination__item--active',
+              theme && `f-button --${theme}`
+            ]"
+            :to="linkTo(length)"
+        >
+          {{ length }}
+        </NuxtLink>
+      </template>
+    </div>
+    <FLink
+        wide
+        class="f-pagination__prev"
+        :to="linkTo(previousValue)"
+        :class="{'--disabled': activeNumber <= 1}"
+    >
+      <FIcon
+          v-if="arrowIcon"
+          name="arrow-left"
+          size="24"
+      />
+      {{ t('previous' )}}
+    </FLink>
+    <FLink
+        wide
+        class="f-pagination__next"
+        :class="{'--disabled': activeNumber >= length}"
+        :to="linkTo(nextValue)"
+    >
+      {{ t('next') }}
+      <FIcon
+          v-if="arrowIcon"
+          name="arrow-right"
+          size="24"
+      />
+    </FLink>
+  </nav>
+</template>
+
+<script setup lang="ts">
+// не забыват проставлять key на компоненте для переинициализации и отслеживания props.total чтобы пересчитывалось правильное сео
+import type { ButtonThemes } from '../../types';
+
+const props = withDefaults(defineProps<{
+  prefix?: string
+  theme?: ButtonThemes
+  total: number
+  perPage?: number | string
+  limit?: number
+  arrowIcon?: boolean
+}>(), {
+  prefix: 'page',
+  perPage: 48,
+})
+
+const {t} = useI18n();
+const route = useRoute()
+
+const length = computed(() => {
+  return props.limit ? Math.min(props.total, props.limit) : props.total;
+})
+
+const activeNumber = computed(() => {
+  const n = Number(route.query[props.prefix]);
+  return !n || n < 1 ? 1 : n;
+})
+
+const previousValue = computed(() => {
+  return activeNumber.value > 1 ? activeNumber.value - 1 : activeNumber.value
+})
+
+const nextValue = computed(() => {
+  return activeNumber.value !== length.value ? activeNumber.value + 1 : activeNumber.value
+})
+
+const activeNumbers = computed(() => {
+  if (activeNumber.value < 5) {
+    return [3, 4, 5]
+  } else if (activeNumber.value > length.value - 3) {
+    return [length.value - 4, length.value - 3, length.value - 2]
+  }
+  return [activeNumber.value - 1, activeNumber.value, activeNumber.value + 1]
+})
+
+watchEffect(() => {
+  if (activeNumber.value > length.value && props.total > 0) {
+    navigateTo(linkTo(length.value));
+  }
+})
+
+function linkTo(value: string | number) {
+  const safeValue = Math.max(1, Number(value));
+
+  // Если это первая страница — ведём в корень без query
+  if (safeValue === 1) {
+    return {
+      path: route.path
+    }
+  }
+
+  return {
+    query: {
+      ...route.query,
+      [props.prefix]: safeValue
+    }
+  }
+}
+
+watch(() => route.query['page'], (value) => {
+  if (value) {
+    document.documentElement.querySelector('#anchor')?.scrollIntoView({ behavior: 'smooth' });
+  }
+})
+
+const i18n = useI18n();
+const localePath = useLocalePath();
+const siteUrl = useAppConfig().siteUrl as string;
+const { canonicalUrl, alternateLinks } = useSeoLinks(siteUrl, props.total === 1, i18n, localePath);
+
+useHead({
+  link: computed(() => [
+    { rel: 'canonical', href: canonicalUrl.value, key: `canonical-${route.path}` },
+    ...alternateLinks.value,
+  ]),
+});
+</script>