feat: module improvements

src/runtime/components/navigation/Pills.vue

@@ -0,0 +1,64 @@
+<template>
+  <nav class="flex items-center space-x-1.5">
+    <div v-for="(link, index) of links" :key="index">
+      <Button
+        :size="size"
+        :to="link.to"
+        :label="link.label"
+        :icon="link.icon"
+        :variant="isActive(link) ? activeVariant : variant"
+        :custom-class="isActive(link) ? activeClass : ''"
+        @click="click(link)"
+      />
+    </div>
+  </nav>
+</template>
+
+<script>
+import Button from '../elements/Button'
+
+export default {
+  components: {
+    Button
+  },
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    size: {
+      type: String,
+      default: 'md'
+    },
+    variant: {
+      type: String,
+      default: 'gray-hover'
+    },
+    activeVariant: {
+      type: String,
+      default: 'gray'
+    },
+    activeClass: {
+      type: String,
+      default: 'u-text-gray-700 hover:u-text-gray-700 focus:u-text-gray-700'
+    }
+  },
+  computed: {
+    options () {
+      return this.links.map(link => ({ value: link.to, text: link.label }))
+    }
+  },
+  methods: {
+    click (link) {
+      this.$emit('input', link)
+    },
+    isActive (link) {
+      if (link.exact === false) {
+        return !!this.$route.path.startsWith(link.to)
+      } else {
+        return this.$route.path === link.to
+      }
+    }
+  }
+}
+</script>

src/runtime/components/navigation/Tabs.vue

@@ -0,0 +1,39 @@
+<template>
+  <nav class="flex items-center gap-6">
+    <Link
+      v-for="(link, index) of links"
+      :key="index"
+      :to="link.to"
+      :exact="link.exact"
+      class="pt-2 pb-3 text-sm font-medium border-b-2 whitespace-nowrap"
+      :active-class="activeClass"
+      :inactive-class="inactiveClass"
+    >
+      {{ link.label }}
+    </Link>
+  </nav>
+</template>
+
+<script>
+import Link from '../elements/Link'
+
+export default {
+  components: {
+    Link
+  },
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    activeClass: {
+      type: String,
+      default: 'u-border-black u-text-black hover:text-black dark:hover:text-white hover:border-black dark:hover:border-white'
+    },
+    inactiveClass: {
+      type: String,
+      default: 'border-transparent u-text-gray-500 hover:u-text-gray-700 hover:u-border-gray-300'
+    }
+  }
+}
+</script>

src/runtime/components/navigation/VerticalNavigation.vue

@@ -0,0 +1,86 @@
+<template>
+  <nav class="space-y-1">
+    <Link
+      v-for="(link, index) of links"
+      v-slot="{ isActive }"
+      :key="index"
+      v-bind="link"
+      :class="baseClass"
+      :active-class="activeClass"
+      :inactive-class="inactiveClass"
+      @click="link.click && link.click()"
+      @keyup.enter="$event.target.blur()"
+    >
+      <slot name="icon" :link="link">
+        <Icon
+          v-if="link.icon"
+          :name="link.icon"
+          :class="[iconBaseClass, isActive ? iconActiveClass : iconInactiveClass]"
+        />
+      </slot>
+      <slot :link="link">
+        <span class="truncate">{{ link.label }}</span>
+      </slot>
+      <slot name="badge" :link="link">
+        <span v-if="link.badge" :class="[badgeBaseClass, isActive ? badgeActiveClass : badgeInactiveClass]">
+          {{ link.badge }}
+        </span>
+      </slot>
+    </Link>
+  </nav>
+</template>
+
+<script>
+import Icon from '../elements/Icon'
+import Link from '../elements/Link'
+import $ui from '#build/ui'
+
+export default {
+  components: {
+    Icon,
+    Link
+  },
+  props: {
+    links: {
+      type: Array,
+      required: true
+    },
+    baseClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.base
+    },
+    activeClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.active
+    },
+    inactiveClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.inactive
+    },
+    iconBaseClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.icon.base
+    },
+    iconActiveClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.icon.active
+    },
+    iconInactiveClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.icon.inactive
+    },
+    badgeBaseClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.badge.base
+    },
+    badgeActiveClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.badge.active
+    },
+    badgeInactiveClass: {
+      type: String,
+      default: () => $ui.verticalNavigation.badge.inactive
+    }
+  }
+}
+</script>