itube-specs 0.0.324 → 0.0.326

package/components/ui/s-chips.vue

@@ -21,7 +21,7 @@
     />
     {{ name }}
     <SIcon
-        v-if="(isActive && !withoutClose && item.value !== 'reset' && !mini) || withClose"
+        v-if="(isActive && !mini && item.resetPath) || withClose"
         class="s-chips__close"
         name="close"
         size="16"
@@ -34,83 +34,90 @@ import type { IChipsItem } from '../../types';
 import { convertString } from '../../runtime';
 
 const props = defineProps<{
-  item: IChipsItem
-  allLink?: boolean
-  alphabet?: boolean
-  active?: boolean
-  withoutClose?: boolean
-  withClose?: boolean
-  isLink?: boolean
-  mini?: boolean
-  bright?: boolean
-  notCapitalize?: boolean
-}>()
+  item: IChipsItem;
+  allLink?: boolean;
+  alphabet?: boolean;
+  active?: boolean;
+  withClose?: boolean;
+  isLink?: boolean;
+  mini?: boolean;
+  bright?: boolean;
+  notCapitalize?: boolean;
+}>();
 
 const emit = defineEmits<{
-  (eventName: 'click'): void
-}>()
+  (eventName: 'click'): void;
+}>();
 
-const route = useRoute()
+const route = useRoute();
 
-const { generateLink } = useGenerateLink();
-
-const isActive = computed(() => {
-  if (props.active || props.item.value === 'reset' && !route.params.slug) {
-    return true
-  }
-  return ((convertString().fromSlug(String(route.params.slug))).toLowerCase() === props.item.title.toLowerCase()) && route.path.includes(props.item.prefix || '');
-})
 const component = computed(() => {
   if (props.isLink) {
-    return resolveComponent('NuxtLink')
+    return resolveComponent('NuxtLink');
   }
-  return 'button'
-})
+  return 'button';
+});
+
+const { generateLink } = useGenerateLink();
 
-const link = computed(() => {
+const targetPath = computed(() => {
   if (props.item.value === 'reset') {
-    // клик по popular
-    return `/${props.item.prefix}`
+    return props.item.resetPath ? `/${props.item.resetPath}` : '/';
   }
-  if (props.allLink) {
-    // временно пока не перешли на value
-    return `/${props.item.value}`
+
+  if (props.allLink && props.item.value) {
+    return `/${props.item.value}`;
   }
+
   if (props.item.value && props.item.prefix) {
-    if (route.params.slug === props.item.title) {
-      // возврат, при активном состоянии
-      return props.alphabet ? `/${props.item.prefix}` : '/';
-    }
-    if (props.alphabet) {
-      return `/${props.item.prefix}/letter/${convertString().toSlug(props.item.title)}`;
-    }
-    return `/${props.item.prefix}/${convertString().toSlug(String(props.item.value))}`;
+    return `${props.item.prefix}/${convertString().toSlug(String(props.item.value))}`;
   }
-  return ''
-})
 
-const href = computed(() => {
-  if (props.isLink) {
-    if (convertString().fromSlug(String(route.params.slug)).toLowerCase() === props.item.title.toLowerCase() && route.path.includes(props.item?.prefix || '')) {
-      return generateLink(props.item?.prefix || '')
-    } else if ((props.item.value && props.item.prefix) || props.allLink) {
-      return generateLink(link.value)
-    }
-    return generateLink(`/${props.item?.prefix}/${link.value}`)
+  if (props.item.value === '' && props.item.prefix) {
+    return `${props.item.prefix}`;
+  }
+
+  return '';
+});
+
+const isActive = computed(() => {
+  if (props.active) {
+    return true;
+  }
+  if (!props.isLink || !targetPath.value) {
+    return false;
   }
-  return null
-})
+
+  const current = route.path.replace(/^\/|\/$/g, '');
+  const target = targetPath.value.replace(/^\/|\/$/g, '');
+
+  return current === target;
+});
+
+const href = computed<string | undefined>(() => {
+  if (!props.isLink) return undefined;
+
+  if (isActive.value && props.item.resetPath) {
+    return generateLink(props.item.resetPath ? `/${props.item.resetPath}` : '/');
+  }
+
+  if (targetPath.value) {
+    return generateLink(targetPath.value);
+  }
+
+  return undefined;
+});
 
 function onButtonClick() {
   if (!props.isLink) {
-    emit('click')
+    emit('click');
   }
 }
 
 const name = computed(() => {
   if (props.item?.title.toLowerCase() === 'post') {
-    return '#'
+    return '#';
   }
-  return props.item.title
-})
+  return props.item.title;
+});
 </script>

package/package.json

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

package/runtime/index.ts

@@ -39,6 +39,8 @@ export * from './utils/converters/convert-model-card-to-chips';
 export * from './utils/converters/group-categories-by-first-letter';
 export * from './utils/converters/group-objects-by-first-letter';
 export * from './utils/converters/convert-snake-keys-to-camel';
+export * from './utils/converters/convert-query-categories';
+export * from './utils/converters/convert-string-array-to-chips';
 export * from './utils/server/abort-controller';
 export * from './utils/server/api-helper';
 export * from './utils/server/parse-api-error';

package/runtime/utils/converters/convert-query-categories.ts

@@ -0,0 +1,8 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+/**
+   * конвертирует список категорий из фильтра страниц с видео роликами из query в одну строку, все слова с заглавной буквы
+ */
+export function convertQueryCategories(route: RouteLocationNormalizedLoaded)  {
+    const MAX_CATEGORIES = 3;
+    return String(route.query[ 'categories' ])?.split(',').map(item => item.split('_')[ 1 ]).map(item => item?.charAt(0).toUpperCase() + item?.slice(1)).slice(0, MAX_CATEGORIES).join(', ');
+}

package/runtime/utils/converters/convert-string-array-to-chips.ts

@@ -0,0 +1,10 @@
+import type { IChipsItem } from '../../../types';
+
+export function convertStringArrayToChips(array: string[], prefix: string, resetPath: string): IChipsItem[] {
+    return array.map((item) => ({
+        title: item,
+        value: item,
+        prefix: prefix,
+        resetPath: resetPath,
+    }));
+}

package/composables/use-convert-query-categories.ts

@@ -1,7 +0,0 @@
-/**
-   * конвертирует список категорий из фильтра страниц с видео роликами из query в одну строку, все слова с заглавной буквы
- */
-export function useConvertQueryCategories()  {
-    const MAX_CATEGORIES = 3;
-    return String(useRoute().query[ 'categories' ])?.split(',').map(item => item.split('_')[ 1 ]).map(item => item?.charAt(0).toUpperCase() + item?.slice(1)).slice(0, MAX_CATEGORIES).join(', ');
-}