feat(links): adds custom links to list & broaden conditions

Author: dvcol

package.json

@@ -96,7 +96,7 @@
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-vitest": "^0.4.0",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-vue": "^9.29.0",
     "eslint-plugin-vuejs-accessibility": "^2.2.0",
     "eslint-plugin-yml": "^1.0.0",
     "esno": "^4.0.0",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NIcon, NTag } from 'naive-ui';
-import { type PropType, toRefs } from 'vue';
+import { computed, type PropType, toRefs } from 'vue';
 
 import type { TagLink } from '~/models/tag.model';
 
@@ -9,9 +9,20 @@ const props = defineProps({
     type: Object as PropType<TagLink>,
     required: true,
   },
+  short: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+const { tag, short } = toRefs(props);
+
+const label = computed(() => {
+  if (short.value) return tag?.value?.short || tag?.value?.label;
+  return tag?.value?.label;
 });
 
-const { tag } = toRefs(props);
+const iconOnly = computed(() => tag?.value?.iconOnly && tag?.value?.icon);
 
 const emit = defineEmits<{
   (e: 'onClick', href?: string): void;
@@ -35,13 +46,21 @@ const onClick = (e: MouseEvent) => {
   >
     <NTag
       class="tag"
-      :class="{ meta: tag?.meta, link: !!tag?.url }"
+      :class="{
+        meta: tag?.meta,
+        link: !!tag?.url,
+        icon: tag?.icon,
+        only: iconOnly,
+        square: !tag?.round,
+      }"
       size="small"
       v-bind="tag"
     >
-      <span class="label">{{ tag?.label }}</span>
+      <span v-if="!iconOnly" class="label">{{ label }}</span>
       <template v-if="tag?.icon" #icon>
-        <NIcon class="icon" :component="tag.icon" v-bind="tag.iconProps" />
+        <NIcon class="icon" v-bind="tag.iconProps">
+          <component :is="tag.icon" v-bind="tag.iconImgProps" />
+        </NIcon>
       </template>
     </NTag>
   </a>
@@ -54,6 +73,14 @@ const onClick = (e: MouseEvent) => {
   .tag {
     width: fit-content;
     border: 1px solid transparent;
+
+    &.only {
+      padding: 0.1rem;
+    }
+
+    &.icon.square {
+      padding-left: 0.25rem;
+    }
   }
 
   &:focus-visible {

src/components/common/buttons/TagLink.vue

@@ -19,6 +19,7 @@ import TagLink from '~/components/common/buttons/TagLink.vue';
 import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
 import IconGrid from '~/components/icons/IconGrid.vue';
 import IconPlayFilled from '~/components/icons/IconPlayFilled.vue';
+import { getCustomLinkIcon } from '~/models/link.model';
 import { type ListScrollItem, type ShowProgress } from '~/models/list-scroll.model';
 
 import { ProgressType } from '~/models/progress-type.model';
@@ -98,9 +99,17 @@ const date = computed(() => {
 const tags = computed(
   () =>
     item.value.tags?.map(tag => {
-      if (!tag.i18n) return tag;
-      if (typeof tag.i18n === 'boolean') return { ...tag, label: i18n(tag.label) };
-      return { ...tag, label: i18n(tag.label, ...tag.i18n) };
+      const _tag = { ...tag };
+
+      if (tag.i18n && typeof tag.i18n === 'boolean') _tag.label = i18n(tag.label);
+      else if (tag.i18n) _tag.label = i18n(tag.label, ...tag.i18n);
+
+      if (!tag.icon && tag.iconType) {
+        const { icon, iconProps } = getCustomLinkIcon(tag.iconType);
+        _tag.icon = icon;
+        _tag.iconProps = iconProps;
+      }
+      return _tag;
     }),
 );
 
@@ -300,6 +309,7 @@ const onTagClick = (url?: string) => {
         "
         size="medium"
         class="tags"
+        :class="{ 'show-progress': showProgress }"
       >
         <template v-if="loading && showTagLoader">
           <NSkeleton text style="width: 120px; height: 18px; border-radius: 2px" />
@@ -311,7 +321,7 @@ const onTagClick = (url?: string) => {
               text
               style="width: 120px; height: 18px; border-radius: 2px"
             />
-            <TagLink :tag="tag" @on-click="onTagClick" />
+            <TagLink :tag="tag" short @on-click="onTagClick" />
           </template>
         </template>
 
@@ -440,7 +450,13 @@ const onTagClick = (url?: string) => {
 
   .tags {
     gap: 0.5rem !important;
+    max-height: 3.325rem;
     margin-top: 0.3rem;
+    overflow: scroll;
+
+    &.show-progress {
+      max-height: 1.5rem;
+    }
   }
 
   .panel-progress {