feat: BaseListItemLinkg + improved style

histoire-dev · Feb 4, 2022 · af395e9 · af395e9
1 parent 8b4784c
commit af395e9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/packages/histoire/src/client/app/components/StoryListItem.vue b/packages/histoire/src/client/app/components/StoryListItem.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue'
 import { Story } from '../types'
+import BaseListItemLink from './base/BaseListItemLink.vue'
 
 defineProps({
   story: {
@@ -12,15 +13,13 @@ defineProps({
 
 <template>
   <div>
-    <RouterLink
+    <BaseListItemLink
       :to="{
         name: 'story',
         params: {
           storyId: story.id,
         },
       }"
-      class="htw-p-2 htw-flex htw-space-x-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
-      active-class="htw-bg-primary-500 dark:htw-bg-primary-600 htw-text-white htw-font-bold"
     >
       <span>
         {{ story.title }}
@@ -29,6 +28,6 @@ defineProps({
       <span class="htw-opacity-40 htw-text-sm">
         {{ story.variants.length }}
       </span>
-    </RouterLink>
+    </BaseListItemLink>
   </div>
 </template>
diff --git a/packages/histoire/src/client/app/components/StoryVariantItem.vue b/packages/histoire/src/client/app/components/StoryVariantItem.vue
@@ -2,6 +2,7 @@
 import { PropType, toRefs } from 'vue'
 import { useCurrentVariantRoute } from '../composable/variant'
 import { Variant } from '../types'
+import BaseListItemLink from './base/BaseListItemLink.vue'
 
 const props = defineProps({
   variant: {
@@ -16,12 +17,10 @@ const { isActive, targetRoute } = useCurrentVariantRoute(variant)
 
 <template>
   <div>
-    <RouterLink
+    <BaseListItemLink
       :to="targetRoute"
-      class="htw-p-2 htw-flex htw-space-x-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
-      active-class="htw-bg-primary-500 dark:htw-bg-primary-600 htw-text-white htw-font-bold"
     >
       {{ variant.title }}
-    </RouterLink>
+    </BaseListItemLink>
   </div>
 </template>
diff --git a/packages/histoire/src/client/app/components/base/BaseListItemLink.vue b/packages/histoire/src/client/app/components/base/BaseListItemLink.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+})
+</script>
+
+<template>
+  <RouterLink
+    v-bind="$attrs"
+    class="htw-px-4 htw-py-2 htw-flex htw-space-x-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900"
+    active-class="htw-bg-primary-500 hover:htw-bg-primary-600 dark:hover:htw-bg-primary-400 htw-text-white htw-font-bold"
+  >
+    <slot />
+  </RouterLink>
+</template>