feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

src/runtime/components/navigation/CommandPalette.vue

@@ -7,24 +7,22 @@
     :nullable="nullable"
     @update:model-value="onSelect"
   >
-    <div :class="$ui.commandPalette.wrapper">
-      <div v-show="searchable" class="relative flex items-center">
-        <Icon v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
+    <div :class="ui.wrapper">
+      <div v-if="searchable" :class="ui.input.wrapper">
+        <Icon v-if="icon" :name="icon" :class="ui.input.icon" aria-hidden="true" />
         <ComboboxInput
           ref="comboboxInput"
           :value="query"
-          :class="$ui.commandPalette.input.base"
-          :placeholder="inputPlaceholder"
+          :class="[ui.input.base, icon && ui.input.spacing]"
+          :placeholder="placeholder"
           autocomplete="off"
           @change="query = $event.target.value"
         />
 
         <Button
-          v-if="inputCloseIcon"
-          :icon="inputCloseIcon"
-          :class="$ui.commandPalette.input.close.base"
-          :size="$ui.commandPalette.input.close.size"
-          :variant="$ui.commandPalette.input.close.variant"
+          v-if="close"
+          v-bind="close"
+          :class="ui.input.close"
           aria-label="Close"
           @click="onClear"
         />
@@ -36,7 +34,7 @@
         hold
         as="div"
         aria-label="Commands"
-        class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2"
+        :class="ui.container"
       >
         <CommandPaletteGroup
           v-for="group of groups"
@@ -45,6 +43,8 @@
           :group="group"
           :group-attribute="groupAttribute"
           :command-attribute="commandAttribute"
+          :selected-icon="selectedIcon"
+          :ui="ui"
         >
           <template v-for="(_, name) in $slots" #[name]="slotData">
             <slot :name="name" v-bind="slotData" />
@@ -52,18 +52,18 @@
         </CommandPaletteGroup>
       </ComboboxOptions>
 
-      <div v-else-if="placeholder" class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
-        <Icon v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
-        <p class="text-sm text-center u-text-gray-900">
-          {{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
+      <div v-else-if="empty" :class="ui.empty.wrapper">
+        <Icon v-if="empty.icon" :name="empty.icon" :class="ui.empty.icon" aria-hidden="true" />
+        <p :class="query ? ui.empty.queryLabel : ui.empty.label">
+          {{ query ? empty.queryLabel : empty.label }}
         </p>
       </div>
     </div>
   </Combobox>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
+<script lang="ts">
+import { ref, computed, watch, onMounted, defineComponent } from 'vue'
 import { Combobox, ComboboxInput, ComboboxOptions } from '@headlessui/vue'
 import type { ComputedRef, PropType, ComponentPublicInstance } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
@@ -74,196 +74,228 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import type { Group, Command } from '../../types/command-palette'
 import Icon from '../elements/Icon.vue'
 import Button from '../elements/Button.vue'
+import type { Button as ButtonType } from '../../types/button'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
-import $ui from '#build/ui'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Object, Array],
-    default: null
-  },
-  by: {
-    type: String,
-    default: 'id'
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  nullable: {
-    type: Boolean,
-    default: false
-  },
-  searchable: {
-    type: Boolean,
-    default: true
-  },
-  groups: {
-    type: Array as PropType<Group[]>,
-    default: () => []
-  },
-  inputIcon: {
-    type: String,
-    default: () => $ui.commandPalette.input.icon.name
-  },
-  inputCloseIcon: {
-    type: String,
-    default: () => $ui.commandPalette.input.close.icon.name
-  },
-  inputPlaceholder: {
-    type: String,
-    default: 'Search...'
-  },
-  emptyIcon: {
-    type: String,
-    default: () => $ui.commandPalette.empty.icon.name
-  },
-  groupAttribute: {
-    type: String,
-    default: 'label'
-  },
-  commandAttribute: {
-    type: String,
-    default: 'label'
-  },
-  options: {
-    type: Object as PropType<Partial<UseFuseOptions<Command>>>,
-    default: () => ({})
-  },
-  autoselect: {
-    type: Boolean,
-    default: true
-  },
-  autoclear: {
-    type: Boolean,
-    default: true
-  },
-  placeholder: {
-    type: Boolean,
-    default: true
-  },
-  debounce: {
-    type: Number,
-    default: 200
-  }
-})
+// const appConfig = useAppConfig()
 
-const emit = defineEmits(['update:modelValue', 'close'])
-
-const query = ref('')
-const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
-const comboboxApi = ref(null)
-
-onMounted(() => {
-  if (props.autoselect) {
-    activateFirstOption()
-  }
-})
-
-onMounted(() => {
-  setTimeout(() => {
-    // @ts-expect-error internals
-    const popoverProvides = comboboxInput.value?.$.provides
-    if (!popoverProvides) {
-      return
+export default defineComponent({
+  components: {
+    Combobox,
+    ComboboxInput,
+    ComboboxOptions,
+    Icon,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Button,
+    CommandPaletteGroup
+  },
+  props: {
+    modelValue: {
+      type: [String, Number, Object, Array],
+      default: null
+    },
+    by: {
+      type: String,
+      default: 'id'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    nullable: {
+      type: Boolean,
+      default: false
+    },
+    searchable: {
+      type: Boolean,
+      default: true
+    },
+    groups: {
+      type: Array as PropType<Group[]>,
+      default: () => []
+    },
+    icon: {
+      type: String,
+      default: () => appConfig.ui.commandPalette.default.icon
+    },
+    selectedIcon: {
+      type: String,
+      default: () => appConfig.ui.commandPalette.default.selectedIcon
+    },
+    close: {
+      type: Object as PropType<Partial<ButtonType>>,
+      default: () => appConfig.ui.commandPalette.default.close
+    },
+    empty: {
+      type: Object as PropType<{ icon: string, label: string, queryLabel: string }>,
+      default: () => appConfig.ui.commandPalette.default.empty
+    },
+    placeholder: {
+      type: String,
+      default: 'Search...'
+    },
+    groupAttribute: {
+      type: String,
+      default: 'label'
+    },
+    commandAttribute: {
+      type: String,
+      default: 'label'
+    },
+    autoselect: {
+      type: Boolean,
+      default: true
+    },
+    autoclear: {
+      type: Boolean,
+      default: true
+    },
+    debounce: {
+      type: Number,
+      default: 200
+    },
+    fuse: {
+      type: Object as PropType<Partial<UseFuseOptions<Command>>>,
+      default: () => ({})
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
+      default: () => appConfig.ui.commandPalette
     }
-    const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
-    comboboxApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
-  }, 200)
-})
-
-const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => defu({}, props.options, {
-  fuseOptions: {
-    keys: [props.commandAttribute]
   },
-  resultLimit: 12,
-  matchAllWhenSearchEmpty: true
-}))
+  emits: ['update:modelValue', 'close'],
+  setup (props, { emit, expose }) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
 
-const commands = computed(() => props.groups.filter(group => !group.search).reduce((acc, group) => {
-  return acc.concat(group.commands.map(command => ({ ...command, group: group.key })))
-}, [] as Command[]))
+    const ui = computed<Partial<typeof appConfig.ui.commandPalette>>(() => defu({}, props.ui, appConfig.ui.commandPalette))
 
-const searchResults = ref<{ [key: string]: any }>({})
+    const query = ref('')
+    const comboboxInput = ref<ComponentPublicInstance<HTMLInputElement>>()
+    const comboboxApi = ref(null)
 
-const { results } = useFuse(query, commands, options)
-
-const groups = computed(() => ([
-  ...map(groupBy(results.value, command => command.item.group), (results, key) => {
-    const commands = results.map((result) => {
-      const { item, ...data } = result
-
-      return {
-        ...item,
-        ...data
+    onMounted(() => {
+      if (props.autoselect) {
+        activateFirstOption()
       }
     })
 
+    onMounted(() => {
+      setTimeout(() => {
+        // @ts-expect-error internals
+        const popoverProvides = comboboxInput.value?.$.provides
+        if (!popoverProvides) {
+          return
+        }
+        const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
+        comboboxApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
+      }, 200)
+    })
+
+    const options: ComputedRef<Partial<UseFuseOptions<Command>>> = computed(() => defu({}, props.fuse, {
+      fuseOptions: {
+        keys: [props.commandAttribute]
+      },
+      resultLimit: 12,
+      matchAllWhenSearchEmpty: true
+    }))
+
+    const commands = computed(() => props.groups.filter(group => !group.search).reduce((acc, group) => {
+      return acc.concat(group.commands.map(command => ({ ...command, group: group.key })))
+    }, [] as Command[]))
+
+    const searchResults = ref<{ [key: string]: any }>({})
+
+    const { results } = useFuse(query, commands, options)
+
+    const groups = computed(() => ([
+      ...map(groupBy(results.value, command => command.item.group), (results, key) => {
+        const commands = results.map((result) => {
+          const { item, ...data } = result
+
+          return {
+            ...item,
+            ...data
+          }
+        })
+
+        return {
+          ...props.groups.find(group => group.key === key),
+          commands: commands.slice(0, options.value.resultLimit)
+        } as Group
+      }),
+      ...props.groups.filter(group => !!group.search).map(group => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter(group => group.commands.length)
+    ]))
+
+    const debouncedSearch = useDebounceFn(async () => {
+      const searchableGroups = props.groups.filter(group => !!group.search)
+
+      await Promise.all(searchableGroups.map(async (group) => {
+        searchResults.value[group.key] = await group.search(query.value)
+      }))
+    }, props.debounce)
+
+    watch(query, () => {
+      debouncedSearch()
+
+      // Select first item on search changes
+      setTimeout(() => {
+        // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
+        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
+      }, 0)
+    })
+
+    // Methods
+
+    function activateFirstOption () {
+      // hack combobox by using keyboard event
+      // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
+      setTimeout(() => {
+        comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+      }, 0)
+    }
+
+    function onSelect (option: Command | Command[]) {
+      emit('update:modelValue', option, { query: query.value })
+
+      // Clear input after selection
+      if (props.autoclear) {
+        setTimeout(() => {
+          query.value = ''
+        }, 0)
+      }
+    }
+
+    function onClear () {
+      if (query.value) {
+        query.value = ''
+      } else {
+        emit('close')
+      }
+    }
+
+    expose({
+      query,
+      updateQuery: (q: string) => {
+        query.value = q
+      },
+      comboboxApi,
+      results
+    })
+
     return {
-      ...props.groups.find(group => group.key === key),
-      commands: commands.slice(0, options.value.resultLimit)
-    } as Group
-  }),
-  ...props.groups.filter(group => !!group.search).map(group => ({ ...group, commands: (searchResults.value[group.key] || []).slice(0, options.value.resultLimit) })).filter(group => group.commands.length)
-]))
-
-const debouncedSearch = useDebounceFn(async () => {
-  const searchableGroups = props.groups.filter(group => !!group.search)
-
-  await Promise.all(searchableGroups.map(async (group) => {
-    searchResults.value[group.key] = await group.search(query.value)
-  }))
-}, props.debounce)
-
-watch(query, () => {
-  debouncedSearch()
-
-  // Select first item on search changes
-  setTimeout(() => {
-    // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804
-    comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageUp' }))
-  }, 0)
-})
-
-// Methods
-
-function activateFirstOption () {
-  // hack combobox by using keyboard event
-  // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L769
-  setTimeout(() => {
-    comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-  }, 0)
-}
-
-function onSelect (option: Command | Command[]) {
-  emit('update:modelValue', option, { query: query.value })
-
-  // Clear input after selection
-  if (props.autoclear) {
-    setTimeout(() => {
-      query.value = ''
-    }, 0)
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      // eslint-disable-next-line vue/no-dupe-keys
+      groups,
+      query,
+      onSelect,
+      onClear
+    }
   }
-}
-
-function onClear () {
-  if (query.value) {
-    query.value = ''
-  } else {
-    emit('close')
-  }
-}
-
-defineExpose({
-  query,
-  updateQuery: (q: string) => {
-    query.value = q
-  },
-  comboboxApi,
-  results
 })
 </script>
-
-<script lang="ts">
-export default { name: 'UCommandPalette' }
-</script>

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="p-2" role="option">
-    <h2 v-if="label" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
+  <div :class="ui.group.wrapper" role="option">
+    <h2 v-if="label" :class="ui.group.label">
       {{ label }}
     </h2>
 
-    <div class="text-sm u-text-gray-700" role="listbox" :aria-label="group[groupAttribute]">
+    <div :class="ui.group.container" role="listbox" :aria-label="group[groupAttribute]">
       <ComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"
@@ -13,41 +13,41 @@
         :disabled="command.disabled"
         as="template"
       >
-        <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
-          <div class="flex items-center gap-2 min-w-0">
+        <div :class="[ui.group.command.base, active ? ui.group.command.active : ui.group.command.inactive, command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
+          <div :class="ui.group.command.container">
             <slot :name="`${group.key}-icon`" :group="group" :command="command">
-              <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
+              <Icon v-if="command.icon" :name="command.icon" :class="[ui.group.command.icon.base, active ? ui.group.command.icon.active : ui.group.command.icon.inactive, command.iconClass]" aria-hidden="true" />
               <Avatar
                 v-else-if="command.avatar"
-                v-bind="{ size: 'xxxs', ...command.avatar }"
-                class="flex-shrink-0"
+                v-bind="{ size: ui.group.command.avatar.size, ...command.avatar }"
+                :class="ui.group.command.avatar.base"
                 aria-hidden="true"
               />
-              <span v-else-if="command.chip" class="flex-shrink-0 w-2 h-2 mx-1 rounded-full" :style="{ background: `#${command.chip}` }" />
+              <span v-else-if="command.chip" :class="ui.group.command.chip.base" :style="{ background: `#${command.chip}` }" />
             </slot>
 
-            <div class="flex items-center gap-1.5 min-w-0" :class="{ 'opacity-50': command.disabled }">
+            <div :class="[ui.group.command.label, command.disabled && ui.group.command.disabled]">
               <slot :name="`${group.key}-command`" :group="group" :command="command">
-                <span v-if="command.prefix" class="flex-shrink-0" :class="command.prefixClass || 'u-text-gray-400'">{{ command.prefix }}</span>
+                <span v-if="command.prefix" class="flex-shrink-0" :class="command.prefixClass || ui.group.command.prefix">{{ command.prefix }}</span>
 
                 <span class="truncate" :class="{ 'flex-none': command.suffix || command.matches?.length }">{{ command[commandAttribute] }}</span>
 
                 <!-- eslint-disable-next-line vue/no-v-html -->
-                <span v-if="command.matches?.length" class="truncate" :class="command.suffixClass || 'u-text-gray-400'" v-html="highlight(command[commandAttribute], command.matches[0])" />
-                <span v-else-if="command.suffix" class="truncate" :class="command.suffixClass || 'u-text-gray-400'">{{ command.suffix }}</span>
+                <span v-if="command.matches?.length" class="truncate" :class="command.suffixClass || ui.group.command.suffix" v-html="highlight(command[commandAttribute], command.matches[0])" />
+                <span v-else-if="command.suffix" class="truncate" :class="command.suffixClass || ui.group.command.suffix">{{ command.suffix }}</span>
               </slot>
             </div>
           </div>
 
-          <Icon v-if="selected" :name="$ui.commandPalette.option.selected.icon.name" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
+          <Icon v-if="selected" :name="selectedIcon" :class="ui.group.command.selected.icon" aria-hidden="true" />
           <slot v-else-if="active && (group.active || $slots[`${group.key}-active`])" :name="`${group.key}-active`" :group="group" :command="command">
-            <span v-if="group.active" class="flex-shrink-0 u-text-gray-500">{{ group.active }}</span>
+            <span v-if="group.active" :class="ui.group.active">{{ group.active }}</span>
           </slot>
           <slot v-else :name="`${group.key}-inactive`" :group="group" :command="command">
-            <span v-if="command.shortcuts?.length" :class="$ui.commandPalette.option.shortcuts">
+            <span v-if="command.shortcuts?.length" :class="ui.group.command.shortcuts">
               <kbd v-for="shortcut of command.shortcuts" :key="shortcut" class="font-sans">{{ shortcut }}</kbd>
             </span>
-            <span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span>
+            <span v-else-if="!command.disabled && group.inactive" :class="ui.group.inactive">{{ group.inactive }}</span>
           </slot>
         </div>
       </ComboboxOption>
@@ -55,73 +55,94 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ComboboxOption } from '@headlessui/vue'
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { ComboboxOption } from '@headlessui/vue'
 import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
 import type { Group } from '../../types/command-palette'
-import $ui from '#build/ui'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-const props = defineProps({
-  group: {
-    type: Object as PropType<Group>,
-    required: true
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  components: {
+    ComboboxOption,
+    Icon,
+    Avatar
   },
-  query: {
-    type: String,
-    default: ''
+  props: {
+    group: {
+      type: Object as PropType<Group>,
+      required: true
+    },
+    query: {
+      type: String,
+      default: ''
+    },
+    groupAttribute: {
+      type: String,
+      required: true
+    },
+    commandAttribute: {
+      type: String,
+      required: true
+    },
+    selectedIcon: {
+      type: String,
+      required: true
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.commandPalette>>,
+      default: () => appConfig.ui.commandPalette
+    }
   },
-  groupAttribute: {
-    type: String,
-    required: true
-  },
-  commandAttribute: {
-    type: String,
-    required: true
+  setup (props) {
+    const label = computed(() => {
+      const label = props.group[props.groupAttribute]
+
+      return typeof label === 'function' ? label(props.query) : label
+    })
+
+    function highlight (text: string, { indices, value }: { indices: number[][], value:string }): string {
+      if (text === value) {
+        return ''
+      }
+
+      let content = ''
+      let nextUnhighlightedIndiceStartingIndex = 0
+
+      indices.forEach((indice) => {
+        const lastIndiceNextIndex = indice[1] + 1
+        const isMatched = (lastIndiceNextIndex - indice[0]) >= props.query.length
+
+        content += [
+          value.substring(nextUnhighlightedIndiceStartingIndex, indice[0]),
+          isMatched && '<mark>',
+          value.substring(indice[0], lastIndiceNextIndex),
+          isMatched && '</mark>'
+        ].filter(Boolean).join('')
+
+        nextUnhighlightedIndiceStartingIndex = lastIndiceNextIndex
+      })
+
+      content += value.substring(nextUnhighlightedIndiceStartingIndex)
+
+      const index = content.indexOf('<mark>')
+      if (index > 60) {
+        content = `...${content.substring(index - 60)}`
+      }
+
+      return content
+    }
+
+    return {
+      label,
+      highlight
+    }
   }
 })
-
-const label = computed(() => {
-  const label = props.group[props.groupAttribute]
-
-  return typeof label === 'function' ? label(props.query) : label
-})
-
-function highlight (text: string, { indices, value }: { indices: number[][], value:string }): string {
-  if (text === value) {
-    return ''
-  }
-
-  let content = ''
-  let nextUnhighlightedIndiceStartingIndex = 0
-
-  indices.forEach((indice) => {
-    const lastIndiceNextIndex = indice[1] + 1
-    const isMatched = (lastIndiceNextIndex - indice[0]) >= props.query.length
-
-    content += [
-      value.substring(nextUnhighlightedIndiceStartingIndex, indice[0]),
-      isMatched && '<mark>',
-      value.substring(indice[0], lastIndiceNextIndex),
-      isMatched && '</mark>'
-    ].filter(Boolean).join('')
-
-    nextUnhighlightedIndiceStartingIndex = lastIndiceNextIndex
-  })
-
-  content += value.substring(nextUnhighlightedIndiceStartingIndex)
-
-  const index = content.indexOf('<mark>')
-  if (index > 60) {
-    content = `...${content.substring(index - 60)}`
-  }
-
-  return content
-}
-</script>
-
-<script lang="ts">
-export default { name: 'UCommandPaletteGroup' }
 </script>

src/runtime/components/navigation/Pills.vue

@@ -1,49 +0,0 @@
-<template>
-  <nav :class="wrapperClass">
-    <Link
-      v-for="(link, index) of links"
-      :key="index"
-      :to="link.to"
-      :exact="link.exact"
-      :class="baseClass"
-      :active-class="activeClass"
-      :inactive-class="inactiveClass"
-    >
-      {{ link.label }}
-    </Link>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { RouteLocationNormalized } from 'vue-router'
-import Link from '../elements/Link.vue'
-import $ui from '#build/ui'
-
-defineProps({
-  links: {
-    type: Array as PropType<{ to: RouteLocationNormalized, exact: boolean, label: string }[]>,
-    required: true
-  },
-  wrapperClass: {
-    type: String,
-    default: () => $ui.pills.wrapper
-  },
-  baseClass: {
-    type: String,
-    default: () => $ui.pills.base
-  },
-  activeClass: {
-    type: String,
-    default: () => $ui.pills.active
-  },
-  inactiveClass: {
-    type: String,
-    default: () => $ui.pills.inactive
-  }
-})
-</script>
-
-<script lang="ts">
-export default { name: 'UPills' }
-</script>

src/runtime/components/navigation/Tabs.vue

@@ -1,49 +0,0 @@
-<template>
-  <nav :class="wrapperClass">
-    <Link
-      v-for="(link, index) of links"
-      :key="index"
-      :to="link.to"
-      :exact="link.exact"
-      :class="baseClass"
-      :active-class="activeClass"
-      :inactive-class="inactiveClass"
-    >
-      {{ link.label }}
-    </Link>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import type { PropType } from 'vue'
-import type { RouteLocationNormalized } from 'vue-router'
-import Link from '../elements/Link.vue'
-import $ui from '#build/ui'
-
-defineProps({
-  links: {
-    type: Array as PropType<{ to: RouteLocationNormalized, exact: boolean, label: string }[]>,
-    required: true
-  },
-  wrapperClass: {
-    type: String,
-    default: () => $ui.tabs.wrapper
-  },
-  baseClass: {
-    type: String,
-    default: () => $ui.tabs.base
-  },
-  activeClass: {
-    type: String,
-    default: () => $ui.tabs.active
-  },
-  inactiveClass: {
-    type: String,
-    default: () => $ui.tabs.inactive
-  }
-})
-</script>
-
-<script lang="ts">
-export default { name: 'UTabs' }
-</script>

src/runtime/components/navigation/VerticalNavigation.vue

@@ -1,54 +1,67 @@
 <template>
-  <nav :class="wrapperClass">
-    <Link
+  <nav :class="ui.wrapper">
+    <LinkCustom
       v-for="(link, index) of links"
       v-slot="{ isActive }"
       :key="index"
       v-bind="link"
-      :class="[baseClass, spacingClass].join(' ')"
-      :active-class="activeClass"
-      :inactive-class="inactiveClass"
+      :class="[ui.base, ui.spacing]"
+      :active-class="ui.active"
+      :inactive-class="ui.inactive"
       @click="link.click && link.click()"
       @keyup.enter="$event.target.blur()"
     >
       <slot name="avatar" :link="link">
         <Avatar
           v-if="link.avatar"
-          v-bind="{ size: 'xs', ...link.avatar }"
-          :class="[avatarBaseClass, link.label && avatarSpacingClass]"
+          v-bind="{ size: ui.avatar.size, ...link.avatar }"
+          :class="[ui.avatar.base]"
         />
       </slot>
       <slot name="icon" :link="link" :is-active="isActive">
         <Icon
           v-if="link.icon"
           :name="link.icon"
-          :class="[iconBaseClass, link.label && iconSpacingClass, isActive ? iconActiveClass : iconInactiveClass, link.iconClass]"
+          :class="[ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive, link.iconClass]"
         />
       </slot>
       <slot :link="link">
         <span v-if="link.label" class="truncate">{{ link.label }}</span>
       </slot>
       <slot name="badge" :link="link" :is-active="isActive">
-        <span v-if="link.badge" :class="[badgeBaseClass, isActive ? badgeActiveClass : badgeInactiveClass]">
+        <span v-if="link.badge" :class="[ui.badge.baseClass, isActive ? ui.badge.active : ui.badge.inactive]">
           {{ link.badge }}
         </span>
       </slot>
-    </Link>
+    </LinkCustom>
   </nav>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
+import { defu } from 'defu'
 import Icon from '../elements/Icon.vue'
-import Link from '../elements/Link.vue'
 import Avatar from '../elements/Avatar.vue'
+import LinkCustom from '../elements/LinkCustom.vue'
 import type { Avatar as AvatarType } from '../../types/avatar'
-import $ui from '#build/ui'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-defineProps({
-  links: {
-    type: Array as PropType<{
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  components: {
+    Icon,
+    Avatar,
+    LinkCustom
+  },
+  props: {
+    links: {
+      type: Array as PropType<{
       to?: RouteLocationNormalized | string
       exact?: boolean
       label: string
@@ -58,67 +71,23 @@ defineProps({
       click?: Function
       badge?: string
     }[]>,
-    required: true
+      default: () => []
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.verticalNavigation>>,
+      default: () => appConfig.ui.verticalNavigation
+    }
   },
-  wrapperClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.wrapper
-  },
-  baseClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.base
-  },
-  spacingClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.spacing
-  },
-  activeClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.active
-  },
-  inactiveClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.inactive
-  },
-  iconBaseClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.icon.base
-  },
-  iconSpacingClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.icon.spacing
-  },
-  iconActiveClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.icon.active
-  },
-  iconInactiveClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.icon.inactive
-  },
-  avatarBaseClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.avatar.base
-  },
-  avatarSpacingClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.avatar.spacing
-  },
-  badgeBaseClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.badge.base
-  },
-  badgeActiveClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.badge.active
-  },
-  badgeInactiveClass: {
-    type: String,
-    default: () => $ui.verticalNavigation.badge.inactive
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.verticalNavigation>>(() => defu({}, props.ui, appConfig.ui.verticalNavigation))
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui
+    }
   }
 })
 </script>
-
-<script lang="ts">
-export default { name: 'UVerticalNavigation' }
-</script>