fix(app): fix Link component

Author: Selemondev

packages/nuxtlabs-ui-vue/src/App.vue

@@ -25,25 +25,6 @@ const items = [
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
-
-      <template #account="{ item }">
-        <div class="text-left">
-          <p>
-            Signed in as
-          </p>
-          <p class="truncate font-medium text-gray-900 dark:text-white">
-            {{ item.label }}
-          </p>
-        </div>
-      </template>
-
-      <template #item="{ item }">
-        <span class="truncate">{{ item.label }}</span>
-
-        <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
-      </template>
-    </UDropdown>
+    <UButton label="button" to="/about" />
   </div>
 </template>

packages/nuxtlabs-ui-vue/src/Types/enums/Components.ts

@@ -5,6 +5,7 @@ export enum Components {
   UAvatarGroup = 'UAvatarGroup',
   UBadge = 'UBadge',
   UButton = 'UButton',
+  ULink = 'ULink',
   UButtonGroup = 'UButtonGroup',
   UDropdown = 'UDropdown',
   UIcon = 'UIcon',

packages/nuxtlabs-ui-vue/src/components/elements/Button/UButton.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, defineComponent, useSlots } from 'vue'
+import { computed, defineComponent, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
 import type { RouteLocationRaw } from 'vue-router'
@@ -108,20 +108,7 @@ const variant = computed(() => {
   )
 })
 
-const buttonIs = computed(() => {
-  if (props.to)
-    return 'RouterLink'
-
-  return 'button'
-})
-
-const buttonProps = computed(() => {
-  if (props.to)
-    return { to: props.to, target: props.target }
-
-  else
-    return { disabled: props.disabled || props.loading, type: props.type }
-})
+const bind = Object.assign({}, useAttrs(), props.to ? { href: props.to } : {})
 
 const isLeading = computed(() => {
   return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
@@ -186,7 +173,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <component :is="buttonIs" :class="buttonClass" :aria-label="ariaLabel" v-bind="buttonProps">
+  <component :is="props.to ? 'a' : 'button'" :class="buttonClass" :aria-label="ariaLabel" v-bind="bind">
     <slot name="leading" :disabled="disabled" :loading="loading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
     </slot>

packages/nuxtlabs-ui-vue/src/components/elements/Dropdown/UDropdown.vue

@@ -158,6 +158,7 @@ export default defineComponent({
           <div v-for="(subItems, index) of props.items" :key="index" :class="variant.padding">
             <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
               <ULink
+                to=""
                 v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])"
                 :class="[nuxtLabsTheme.UDropdown.base.item.base, nuxtLabsTheme.UDropdown.base.item.padding, nuxtLabsTheme.UDropdown.base.item.size, nuxtLabsTheme.UDropdown.base.item.rounded, active ? nuxtLabsTheme.UDropdown.base.item.active : nuxtLabsTheme.UDropdown.base.item.inactive, itemDisabled && nuxtLabsTheme.UDropdown.base.item.disabled]"
                 @click="item.click"

packages/nuxtlabs-ui-vue/src/components/index.ts

@@ -8,3 +8,4 @@ export { default as UButtonGroup } from './elements/Button/UButtonGroup.vue'
 export { default as UDropdown } from './elements/Dropdown/UDropdown.vue'
 export { default as UIcon } from './elements/Icon/UIcon.vue'
 export { default as UKbd } from './elements/Kbd/UKbd.vue'
+export { default as ULink } from './elements/Link/ULink.vue'