itube-specs 0.0.211 → 0.0.213

package/README.md

@@ -1,121 +1,13 @@
-Порядок действий:  
-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" позволяет писать коротко:  
+Пакет является nuxt layer проектов itube;
+Как работать:  
+1) коммитим, потом `npm run patch` - патчит версию;     
+2) `npm i itube-specs` ставим пакет в проекте;  
+3) Если не первый раз то обновляем пакет `npm install @test/test@latest` или `npm run spec`;  
+4) npx nuxi prepare` при необходимости (могут не подсасаться композиблы или компоненты в автоимпорте);  
+5) если есть проблемы с runtime запустить в пакете npm run dev он перегенерирует tsconfig и eslint.config.mjs;  
 
 ```
 import type { IUser } from '@test/test/types'
 ```
-Типы не импортируются автоматически, каждый тип в свою очередь экспортируется в index.d.ts (обязательно указывать расширение при эскпорте d.ts) общий файл откуда уже и берутся все типы в проект.
-
-`tsconfig.json` 
-
-```bash
-{
-  "extends": "./.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "types": ["node"]
-  }
-}
-```
+Types не импортируются автоматически, каждый тип в свою очередь экспортируется в index.d.ts (обязательно указывать расширение при эскпорте d.ts) общий файл откуда уже и берутся все типы в проект.  
+Все что кроме nuxt сущностей (composables, components) устанавливается прописывается вручную.  

package/components/page-components/{f-filter-button.vue → s-filter-button.vue}

@@ -1,6 +1,6 @@
 <template>
   <FButton
-      class="f-filter-button"
+      class="s-filter-button"
       :size="size"
       :theme="theme"
       aria-label="Filter"
@@ -12,7 +12,7 @@
     >{{ buttonName }}
       </span>
     <FIcon
-        class="f-filter-button__icon _to-sm"
+        class="s-filter-button__icon _to-sm"
         name="chevron-down"
         size="16"
         :class="{'--open': modelValue}"

package/components/page-components/{f-filter-chips.vue → s-filter-chips.vue}

@@ -2,9 +2,9 @@
   <FChipsPanel v-if="items.length > 0">
     <FChips
         v-for="(item, index) in items"
-        class="f-filter-chips"
+        class="s-filter-chips"
         with-close
-        :index="`f-filter-page-chips${index}`"
+        :index="`s-filter-page-chips${index}`"
         bright
         :item="item"
         @click="onChipsClick(item)"

package/components/page-components/{f-filter-page.vue → s-filter-page.vue}

@@ -1,24 +1,24 @@
 <template>
-  <div class="f-filter-page">
-    <div class="f-filter-page__items-wrapper">
+  <div class="s-filter-page">
+    <div class="s-filter-page__items-wrapper">
       <details
           v-for="(group, index) in groups"
           :key="`filter-group-${index}`"
-          class="f-filter-page__group"
+          class="s-filter-page__group"
           :open="index === 0 || activeGroup === index + 1"
       >
         <summary
             v-if="filters.length > 0"
-            class="f-filter-page__group-title"
+            class="s-filter-page__group-title"
         >
           {{ group?.title }}
           <FIcon
-              class="f-filter-page__group-title-icon"
+              class="s-filter-page__group-title-icon"
               size="32"
               name="chevron-down"
           />
         </summary>
-        <div class="f-filter-page__items">
+        <div class="s-filter-page__items">
           <template v-for="(item, subIndex) in filters">
             <ClientOnly>
               <FSlider
@@ -53,15 +53,15 @@
         </div>
       </details>
     </div>
-    <div class="f-filter-page__footer _from-sm">
-      <p class="f-filter-page__footer-results">
+    <div class="s-filter-page__footer _from-sm">
+      <p class="s-filter-page__footer-results">
         <FIcon name="filter" size="24"/>
-        <span class="f-filter-page__footer-text">{{ `${count} ${t('results_found')}` }}</span>
+        <span class="s-filter-page__footer-text">{{ `${count} ${t('results_found')}` }}</span>
       </p>
-      <div class="f-filter-page__footer-buttons">
+      <div class="s-filter-page__footer-buttons">
         <FButton
             wide
-            class="f-filter-page__reset"
+            class="s-filter-page__reset"
             :disabled="!isFiltered"
             @click="onResetClick"
             theme="secondary"

package/components/page-components/{f-filter-popup.vue → s-filter-popup.vue}

@@ -8,7 +8,7 @@
     <template #title>{{ filterTitle }}</template>
 
     <template #fixedContent>
-      <div class="f-filter-popup__main-filters">
+      <div class="s-filter-popup__main-filters">
         <FSelect
             name="duration"
             v-model="durationValue"
@@ -26,7 +26,7 @@
       </div>
     </template>
 
-    <div class="f-filter-popup__filters">
+    <div class="s-filter-popup__filters">
       <template
           v-for="(item, index) in scheme"
           :key="`scheme-${index}`"
@@ -48,7 +48,7 @@
     </div>
 
     <template #footer>
-      <div class="f-filter-popup__buttons">
+      <div class="s-filter-popup__buttons">
         <FButton
             theme="secondary"
             wide

package/components/page-components/{f-filter.vue → s-filter.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div class="f-filter">
+  <div class="s-filter">
     <FFilterButton
         :count="filterCount"
         v-model="filterOpen"

package/components/page-components/{f-model-filters.vue → s-model-filters.vue}

@@ -1,7 +1,7 @@
 <template>
   <FFilterModelChips :filters="data.filters"/>
   <FFilterPage
-      class="f-model-filters__filters _from-sm"
+      class="s-model-filters__filters _from-sm"
       :filters="data.filters"
       :count="data.total"
       :class="{'_loading': status === 'pending'}"
@@ -11,20 +11,20 @@
         v-if="model"
         v-model="model"
         sheet
-        class="f-model-filters__popup"
+        class="s-model-filters__popup"
     >
       <template #title>{{ popupTitle }}</template>
       <FFilterPage
-          class="f-model-filters__filters _to-sm"
+          class="s-model-filters__filters _to-sm"
           :filters="data.filters"
           :count="data.total"
           :class="{'_loading': status === 'pending'}"
       />
       <template #footer>
-        <div class="f-model-filters__footer-buttons _to-sm">
+        <div class="s-model-filters__footer-buttons _to-sm">
           <FButton
               wide
-              class="f-model-filters__reset"
+              class="s-model-filters__reset"
               :disabled="!isFiltered"
               @click="onResetClick"
               theme="secondary"

package/components/page-components/{f-report.vue → s-report.vue}

@@ -9,7 +9,7 @@
           class="f-report__popup-wrapper"
           :class="{'_loading': loading}"
       >
-        <FVideoMiniCard
+        <SVideoMiniCard
             class="f-report__video-card"
             :card="reportedVideoCard"
         />

package/components/page-components/{f-share.vue → s-share.vue}

@@ -7,7 +7,7 @@
     >
       <template #title>{{ $t('share') }}</template>
       <div class="f-share__popup-wrapper">
-        <FVideoMiniCard
+        <SVideoMiniCard
             v-if="sharedVideoCard && Object.keys(sharedVideoCard).length"
             class="f-share__video-card"
             :card="sharedVideoCard"

package/components/ui/{f-checkbox.vue → s-checkbox.vue}

@@ -1,8 +1,8 @@
 <template>
   <label
-      class="f-checkbox"
+      class="s-checkbox"
       :class="[
-          {'f-checkbox--disabled': disabled},
+          {'s-checkbox--disabled': disabled},
           {'f-checkbox--error': error},
       ]"
   >

package/components/ui/{f-chips.vue → s-chips.vue}

@@ -1,7 +1,7 @@
 <template>
   <component
       :is="component"
-      class="f-chips"
+      class="s-chips"
       :class="{
         '--active': isActive,
         '--alphabet': alphabet,
@@ -22,7 +22,7 @@
     {{ name }}
     <FIcon
         v-if="(isActive && !withoutClose && item.value !== 'reset' && !mini) || withClose"
-        class="f-chips__close"
+        class="s-chips__close"
         name="close"
         size="16"
     />

package/components/ui/{f-count.vue → s-count.vue}

@@ -1,6 +1,6 @@
 <template>
   <span
-      class="f-count"
+      class="s-count"
   ><slot></slot>
   </span>
 </template>

package/components/ui/{f-country.vue → s-country.vue}

@@ -1,6 +1,6 @@
 <template>
 <FImg
-    class="f-country"
+    class="s-country"
     :sizes="sizes"
     :width="width"
     :height="height"

package/components/ui/{f-dropdown.vue → s-dropdown.vue}

@@ -1,7 +1,7 @@
 <template>
   <div
       ref="dropdownRef"
-      class="f-dropdown"
+      class="s-dropdown"
       :style="`--max-height: ${getMaxHeight}`"
       :class="[
           {'--top': top},
@@ -14,35 +14,35 @@
       @mouseover="mouseHandler(true)"
   >
     <div
-        class="f-dropdown__trigger"
+        class="s-dropdown__trigger"
         @click="openDropdown"
     >
       <slot name="trigger"></slot>
     </div>
-    <transition name="f-dropdown" mode="out-in">
+    <transition name="s-dropdown" mode="out-in">
       <dialog
           v-if="useVIf ? open && $slots.items : true"
           :style="!useVIf ? { display: (open && $slots.items) ? '' : 'none' } : {}"
           ref="menuRef"
-          class="f-dropdown__menu"
+          class="s-dropdown__menu"
           :class="{'--open': open}"
           @click="close"
       >
         <button
-            class="f-dropdown__sheet-close _to-sm"
+            class="s-dropdown__sheet-close _to-sm"
             type="button"
             @click="close"
         ></button>
         <button
-            class="f-dropdown__crest _to-sm"
+            class="s-dropdown__crest _to-sm"
             type="button"
             @click="close"
         >
           <FIcon name="close" size="16"/>
         </button>
         <slot name="header"></slot>
-        <div class="f-dropdown__menu-items" v-if="$slots.items">
-          <slot name="items" v-bind="'f-dropdown__item'"></slot>
+        <div class="s-dropdown__menu-items" v-if="$slots.items">
+          <slot name="items" v-bind="'s-dropdown__item'"></slot>
         </div>
       </dialog>
     </transition>

package/components/ui/{f-icon.vue → s-icon.vue}

@@ -1,6 +1,6 @@
 <template>
   <Icon
-      class="f-icon"
+      class="s-icon"
       :name="`${prefix}:${name}`"
       :size="size"
   />

package/components/ui/{f-input.vue → s-input.vue}

@@ -1,11 +1,11 @@
 <template>
   <div
-      class="f-input"
+      class="s-input"
       :class="[
-          {'f-input--filled': isFilled || isAutoFilled},
-          {'f-input--focused': isFocused},
-          {'f-input--disabled': disabled},
-          {'f-input--error': error},
+          {'s-input--filled': isFilled || isAutoFilled},
+          {'s-input--focused': isFocused},
+          {'s-input--disabled': disabled},
+          {'s-input--error': error},
           {'f-input--textarea': isTextArea},
           {'f-input--icon': isPassword || icon},
           `f-input--${size}`,

package/components/ui/{f-label.vue → s-label.vue}

@@ -1,6 +1,6 @@
 <template>
 <span
-    class="f-label"
+    class="s-label"
     :class="`--${theme}`"
     :data-text="text"
 >

package/components/ui/{f-link.vue → s-link.vue}

@@ -1,7 +1,7 @@
 <!--Если в кнопке иконка, обязательно ее вставлять не в дефолтный слот-->
 <template>
   <NuxtLink
-      class="f-button"
+      class="s-button"
       :class="[
         `--${theme}`,
         `--${size}`,

package/components/ui/{f-model-tag.vue → s-model-tag.vue}

@@ -1,10 +1,10 @@
 <template>
 <NuxtLink
-    class="f-model-tag"
+    class="s-model-tag"
     :to="generateLink(`/models/${convertString().toSlug(card.title)}`)"
 >
   <FImg
-      class="f-model-tag__img"
+      class="s-model-tag__img"
       sizes="20px sm:24px"
       :src="card.primaryImageUrl || placeholder"
       width="20"

package/components/ui/{f-notification.vue → s-notification.vue}

@@ -1,35 +1,35 @@
 <template>
   <dialog
       ref="notification"
-      class="f-notification"
+      class="s-notification"
       :class="{'--popup': popup}"
       @click="closeByBackdropClick"
       @cancel="close"
   >
-    <div class="f-notification__wrapper">
-      <header class="f-notification__header">
+    <div class="s-notification__wrapper">
+      <header class="s-notification__header">
         <p
             v-if="$slots.title"
-            class="f-notification__title"
+            class="s-notification__title"
         >
           <slot name="title"></slot>
         </p>
         <button
-            class="f-notification__close"
+            class="s-notification__close"
             type="button"
             title="close"
             aria-label="close"
             @click="close"
         >
-          <FIcon class="f-notification__close-icon" name="close" size="16"/>
+          <FIcon class="s-notification__close-icon" name="close" size="16"/>
         </button>
       </header>
-      <div class="f-notification__content">
+      <div class="s-notification__content">
         <slot></slot>
       </div>
       <div
           v-if="$slots.footer"
-          class="f-notification__footer"
+          class="s-notification__footer"
       >
         <slot name="footer"></slot>
       </div>

package/components/ui/{f-popup.vue → s-popup.vue}

@@ -1,7 +1,7 @@
 <template>
 <dialog
     ref="popupRef"
-    class="f-popup"
+    class="s-popup"
     :class="[
         {'--sheet': sheet},
         {'--transparent-backdrop': transparentBackdrop},
@@ -10,13 +10,13 @@
     @click="closeByBackdropClick"
     @cancel="close"
 >
-  <div class="f-popup__wrapper">
+  <div class="s-popup__wrapper">
     <div
         v-if="sheet"
-        class="f-popup__sheet"
+        class="s-popup__sheet"
     >
       <button
-          class="f-popup__sheet-handler"
+          class="s-popup__sheet-handler"
           type="button"
           @click="close"
       ></button>
@@ -24,17 +24,17 @@
 
     <aside
         v-if="$slots.aside && !isMobile(breakpoints).value"
-        class="f-popup__aside"
+        class="s-popup__aside"
     >
       <slot name="aside"></slot>
     </aside>
 
     <header
-        class="f-popup__header"
+        class="s-popup__header"
     >
       <button
           v-if="back"
-          class="f-popup__back"
+          class="s-popup__back"
           type="button"
           @click="$emit('back')"
       >
@@ -42,12 +42,12 @@
       </button>
       <div
           v-if="$slots.title"
-          class="f-popup__title"
+          class="s-popup__title"
       >
         <slot name="title"></slot>
       </div>
       <button
-          class="f-popup__close"
+          class="s-popup__close"
           type="button"
           @click="close"
       >
@@ -56,19 +56,19 @@
     </header>
     <div
         v-if="$slots.fixedContent"
-        class="f-popup__subheader"
+        class="s-popup__subheader"
     >
       <slot name="fixedContent"></slot>
     </div>
     <div
         v-if="$slots.default"
-        class="f-popup__content"
+        class="s-popup__content"
     >
       <slot></slot>
     </div>
     <div
         v-if="$slots.footer"
-        class="f-popup__footer"
+        class="s-popup__footer"
     >
       <slot name="footer"></slot>
     </div>

package/components/ui/{f-radio.vue → s-radio.vue}

@@ -1,13 +1,13 @@
 <template>
   <label
-      class="f-radio"
+      class="s-radio"
       :class="[
-          {'f-radio--disabled': disabled},
-          {'f-radio--error': error},
+          {'s-radio--disabled': disabled},
+          {'s-radio--error': error},
       ]"
   >
     <input
-        class="f-radio__input _visually-hidden"
+        class="s-radio__input _visually-hidden"
         type="radio"
         :name="name"
         :checked="isChecked"
@@ -15,7 +15,7 @@
         @change="onChange"
         v-bind="$attrs"
     >
-    <span class="f-radio__check" />
+    <span class="s-radio__check" />
     <span class="f-radio__label">
       <slot>{{ label }}</slot>
     </span>

package/components/ui/{f-select.vue → s-select.vue}

@@ -1,6 +1,6 @@
 <template>
   <label
-      class="f-select"
+      class="s-select"
       aria-label="select"
       :class="[
           {
@@ -10,19 +10,19 @@
           `--${size}`,
           ]"
   >
-    <span class="f-select__label" v-if="label">
+    <span class="s-select__label" v-if="label">
       {{ label }}
-      <FCount class="f-select__count" v-if="count">{{ count }}</FCount>
+      <FCount class="s-select__count" v-if="count">{{ count }}</FCount>
     </span>
-    <span class="f-select__wrapper">
+    <span class="s-select__wrapper">
       <FIcon
           v-if="icon"
           :name="icon"
           size="24"
-          class="f-select__pre-icon"
+          class="s-select__pre-icon"
       />
       <select
-          class="f-select__button"
+          class="s-select__button"
           :class="{'--icon': icon}"
           :name="name"
           @change="onChange"
@@ -30,7 +30,7 @@
       >
         <option
             v-if="placeholder"
-            class="f-select__option"
+            class="s-select__option"
             value=""
             selected
             disabled
@@ -38,13 +38,13 @@
         <option
             v-for="(item, index) in items"
             :value="item.value"
-            class="f-select__option"
-            :key="`f-select-${name}-${index}`"
+            class="s-select__option"
+            :key="`s-select-${name}-${index}`"
             :selected="item.value === modelValue && item.value !== placeholder"
         >{{ capitalize(item.title as string || item.name as string) }}</option>
       </select>
       <FIcon
-          class="f-select__icon"
+          class="s-select__icon"
           name="dropdown"
           size="24"
       />

package/components/ui/{f-slider.vue → s-slider.vue}

@@ -1,20 +1,20 @@
 <template>
   <div
-      class="f-slider"
+      class="s-slider"
       :class="{'--active': active}"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
   >
-    <div class="f-slider__header">
-      <span class="f-slider__label">
+    <div class="s-slider__header">
+      <span class="s-slider__label">
         {{ title }}
       </span>
-      <p class="f-slider__subtitle">
+      <p class="s-slider__subtitle">
         {{ t('between') }}:&nbsp;
-        <span class="f-slider__range">{{ (between && between[0]) || $attrs.min }}&#8209;{{ (between && between[1]) || $attrs.max}}</span>
+        <span class="s-slider__range">{{ (between && between[0]) || $attrs.min }}&#8209;{{ (between && between[1]) || $attrs.max}}</span>
       </p>
     </div>
-    <div class="f-slider__wrapper">
+    <div class="s-slider__wrapper">
       <Slider
         v-model="model"
         v-bind="$attrs"

package/components/ui/{f-snackbar.vue → s-snackbar.vue}

@@ -1,9 +1,9 @@
 <template>
   <div
-      class="f-snackbar"
+      class="s-snackbar"
       :class="`--${snackbarTheme}`"
   >
-    <FIcon class="f-snackbar__icon" :name="snackbarIcon" size="24"/>
+    <FIcon class="s-snackbar__icon" :name="snackbarIcon" size="24"/>
     {{
       te(`snackbar.${convertSnackKey}`)
           ? t(`snackbar.${convertSnackKey}`)

package/components/ui/{f-timestamp.vue → s-timestamp.vue}

@@ -1,12 +1,12 @@
 <template>
 <button
-    class="f-timestamp"
+    class="s-timestamp"
     type="button"
     @click="onButtonClick"
 >
-  <span class="f-timestamp__preview-wrapper">
+  <span class="s-timestamp__preview-wrapper">
       <span
-          class="f-timestamp__preview"
+          class="s-timestamp__preview"
           :style="styles"
       />
   </span>
@@ -14,7 +14,7 @@
   <slot/>
 
   <FIcon
-      class="f-timestamp__icon"
+      class="s-timestamp__icon"
       name="forward-step"
       size="16"
   />

package/components/ui/{f-toggle.vue → s-toggle.vue}

@@ -1,20 +1,20 @@
 <template>
   <label
-      class="f-toggle"
+      class="s-toggle"
       aria-label="Toggle"
       :class="[
-          {'f-toggle--checked': modelValue},
-          {'f-toggle--disabled': disabled}
+          {'s-toggle--checked': modelValue},
+          {'s-toggle--disabled': disabled}
           ]"
   >
     <input
-        class="f-toggle__input _visually-hidden"
+        class="s-toggle__input _visually-hidden"
         type="checkbox"
         :checked="modelValue"
         :value="modelValue"
         @change="$emit('update:modelValue', $event.target?.checked)"
     />
-    <span v-if="$slots.default" class="f-toggle__text">
+    <span v-if="$slots.default" class="s-toggle__text">
       <slot></slot>
       {{ modelValue}}
     </span>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.211",
+  "version": "0.0.213",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {