@una-ui/nuxt 0.13.0-beta.2 → 0.14.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.13.0-beta.2",
+  "version": "0.14.0-beta.1",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -7,7 +7,7 @@ import '@una-ui/preset/prefixes';
 import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.13.0-beta.2";
+const version = "0.14.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -38,55 +38,71 @@ const module = defineNuxtModule({
       path: resolve(runtimeDir, "components", "elements"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components/elements", "tabs"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components/elements", "card"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
+    });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/elements", "dropdown-menu"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "forms"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components/forms", "select"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "misc"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "navigation"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components/data", "table"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     addComponentsDir({
       path: resolve(runtimeDir, "components/navigation", "breadcrumb"),
       prefix: options.prefix,
       global: options.global,
-      watch: nuxt.options.dev
+      watch: nuxt.options.dev,
+      priority: 10
     });
     if (options.themeable) {
       addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
@@ -95,12 +111,16 @@ const module = defineNuxtModule({
     if (!options.dev)
       nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
     addImportsDir(resolve(runtimeDir, "utils", "cn"));
-    await installModule("radix-vue/nuxt");
     await installModule("@unocss/nuxt");
     await installModule("@nuxtjs/color-mode", {
       classSuffix: ""
     });
     await installModule("@vueuse/nuxt");
+    await installModule("radix-vue/nuxt", {
+      prefix: options.prefix,
+      priority: 100
+      // Set to the lowest priority
+    });
     addImportsDir(resolve(runtimeDir, "composables"));
   }
 });

package/dist/runtime/components/elements/Button.vue

@@ -19,6 +19,7 @@ const mergeVariants = computed(() => {
     'btn': props.btn,
     'breadcrumb-active': props.breadcrumbActive,
     'breadcrumb-inactive': props.breadcrumbInactive,
+    'dropdown-menu': props.dropdownMenu,
   }
 })
 
@@ -53,8 +54,8 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     )"
     :disabled="to ? null : disabled || loading"
     :aria-label="icon ? label : null"
-    v-bind="mergeVariants"
     :size="size"
+    v-bind="mergeVariants"
   >
     <DefineTemplate v-if="loading">
       <slot name="loading">

package/dist/runtime/components/elements/Separator.vue

@@ -6,10 +6,6 @@ import type { NSeparatorProps } from '../../types'
 
 const props = withDefaults(defineProps<NSeparatorProps>(), {
   orientation: 'horizontal',
-  label: '',
-  una: () => ({
-    separatorDefaultVariant: 'separator-default-variant',
-  }),
 })
 
 const delegatedProps = computed(() => {
@@ -25,10 +21,10 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'separator',
-        props.una?.separatorDefaultVariant,
+        props.una?.separatorDefaultVariant || 'separator-default-variant',
+        props.class,
         props.una?.separator,
         props.orientation === 'vertical' ? 'separator-vertical' : 'separator-horizontal',
-        props.class,
       )
     "
   >

package/dist/runtime/components/elements/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuRootEmits } from 'radix-vue'
+import { DropdownMenuPortal, useForwardPropsEmits } from 'radix-vue'
+import { createReusableTemplate } from '@vueuse/core'
+import { omitProps, pickProps } from '../../../utils'
+import type { NDropdownMenuProps } from '../../../types'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+import DropdownMenuRoot from './DropdownMenuRoot.vue'
+import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
+import DropdownMenuLabel from './DropdownMenuLabel.vue'
+import DropdownMenuSeparator from './DropdownMenuSeparator.vue'
+import DropdownMenuItem from './DropdownMenuItem.vue'
+import DropdownMenuGroup from './DropdownMenuGroup.vue'
+import DropdownMenuSub from './DropdownMenuSub.vue'
+import DropdownMenuSubTrigger from './DropdownMenuSubTrigger.vue'
+import DropdownMenuSubContent from './DropdownMenuSubContent.vue'
+
+const props = defineProps<NDropdownMenuProps>()
+const emits = defineEmits<DropdownMenuRootEmits & DropdownMenuContentEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+
+const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>()
+</script>
+
+<template>
+  <DropdownMenuRoot
+    v-bind="pickProps(forwarded, ['defaultOpen', 'open', 'modal', 'dir'])"
+  >
+    <slot>
+      <slot name="trigger">
+        <DropdownMenuTrigger
+          v-bind="omitProps({ ...forwarded, ...forwarded._dropdownMenuTrigger }, [
+            'dropdownMenuItem',
+            'items',
+            'menuLabel',
+
+            '_dropdownMenuItem',
+            '_dropdownMenuContent',
+            '_dropdownMenuLabel',
+            '_dropdownMenuSeparator',
+            '_dropdownMenuGroup',
+            '_dropdownMenuSubTrigger',
+            '_dropdownMenuSubContent',
+          ])"
+        />
+      </slot>
+
+      <DropdownMenuContent
+        v-bind="forwarded._dropdownMenuContent"
+      >
+        <slot name="content">
+          <template
+            v-if="menuLabel || $slots['menu-label']"
+          >
+            <DropdownMenuLabel
+              :size
+              :inset
+              :una="forwarded.una?.dropdownMenuLabel"
+              v-bind="forwarded._dropdownMenuLabel"
+            >
+              <slot name="menu-label">
+                {{ menuLabel }}
+              </slot>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator
+              :una="forwarded.una?.dropdownMenuSeparator"
+              v-bind="forwarded._dropdownMenuSeparator"
+            />
+          </template>
+
+          <slot name="items" :items>
+            <DropdownMenuGroup
+              :una="forwarded.una?.dropdownMenuGroup"
+              v-bind="forwarded._dropdownMenuGroup"
+            >
+              <template
+                v-for="item in items"
+                :key="item.label"
+              >
+                <slot
+                  v-if="!item.items && item.label"
+                  :name="`item-${item.label}`"
+                >
+                  <DropdownMenuItem
+                    :size
+                    :inset
+                    :dropdown-menu-item
+                    :una="forwarded.una?.dropdownMenuItem"
+                    v-bind="{ ...item, ...forwarded._dropdownMenuItem, ...item._dropdownMenuItem }"
+                  />
+                </slot>
+
+                <DropdownMenuSeparator
+                  v-else-if="!item.label && !item.items"
+                  :una="forwarded.una?.dropdownMenuSeparator"
+                  v-bind="{ ...forwarded._dropdownMenuSeparator, ...item._dropdownMenuSeparator }"
+                />
+
+                <ReuseMenuSub
+                  v-else
+                  v-bind="item"
+                />
+              </template>
+            </DropdownMenuGroup>
+          </slot>
+        </slot>
+      </DropdownMenuContent>
+    </slot>
+  </DropdownMenuRoot>
+
+  <DefineMenuSub
+    v-slot="subProps"
+  >
+    <!-- <template
+      v-if="subProps.menuLabel"
+    >
+      <DropdownMenuLabel
+        :size
+        :inset
+        :una="forwarded.una?.dropdownMenuLabel"
+        v-bind="{ ...forwarded._dropdownMenuLabel, ...subProps._dropdownMenuLabel }"
+      >
+        {{ subProps.menuLabel }}
+      </DropdownMenuLabel>
+      <DropdownMenuSeparator
+        :una="forwarded.una?.dropdownMenuSeparator"
+        v-bind="{ ...forwarded._dropdownMenuSeparator, ...subProps._dropdownMenuSeparator }"
+      />
+    </template> -->
+
+    <!-- <DropdownMenuGroup
+      :una="forwarded.una?.dropdownMenuGroup"
+      v-bind="{ ...forwarded._dropdownMenuGroup, ...subProps._dropdownMenuGroup }"
+    > -->
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger
+        :size
+        :inset
+        :una="forwarded.una?.dropdownMenuSubTrigger"
+        :dropdown-menu-item
+        v-bind="omitProps({
+          ...subProps,
+          ...forwarded._dropdownMenuSubTrigger,
+          ...subProps._dropdownMenuSubTrigger,
+        }, ['$slots'])"
+      >
+        <slot name="sub-trigger" :label="subProps.label" />
+      </DropdownMenuSubTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent
+          v-bind="subProps._dropdownMenuSubContent"
+          :una="forwarded.una?.dropdownMenuSubContent"
+        >
+          <template
+            v-for="subItem in subProps.items"
+            :key="subItem.label"
+          >
+            <DropdownMenuItem
+              v-if="!subItem.items && subItem.label"
+              :size
+              :inset
+              :dropdown-menu-item
+              :una="forwarded.una?.dropdownMenuItem"
+              v-bind="{ ...subItem, ...forwarded._dropdownMenuItem, ...subItem._dropdownMenuItem }"
+            >
+              {{ subItem.label }}
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator
+              v-else-if="!subItem.label && !subItem.items"
+              :una="forwarded.una?.dropdownMenuSeparator"
+              v-bind="{ ...forwarded._dropdownMenuSeparator, ...subItem._dropdownMenuSeparator }"
+            />
+
+            <ReuseMenuSub
+              v-else
+              v-bind="subItem"
+            />
+          </template>
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+    <!-- </DropdownMenuGroup> -->
+  </DefineMenuSub>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import type { NDropdownMenuContentProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = withDefaults(
+  defineProps<NDropdownMenuContentProps>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'dropdown-menu-content',
+        props.class,
+        props.una?.dropdownMenuContent,
+      )"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { DropdownMenuGroup } from 'radix-vue'
+import type { NDropdownMenuGroupProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NDropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup
+    v-bind="props"
+    :class="cn(
+      'dropdown-menu-group',
+      props.una?.dropdownMenuGroup,
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuGroup>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DropdownMenuItem, useForwardProps } from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NDropdownMenuItemProps } from '../../../types'
+import Button from '../Button.vue'
+import DropdownMenuShortcut from './DropdownMenuShortcut.vue'
+
+const props = withDefaults(defineProps<NDropdownMenuItemProps>(), {
+  dropdownMenuItem: '~',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div>
+    <DropdownMenuItem
+      as-child
+    >
+      <Button
+        v-bind="forwardedProps"
+        :dropdown-menu-item
+        :class="cn(
+          'dropdown-menu-item-base w-full justify-start font-normal rounded-sm px-2',
+          forwardedProps.inset && !(forwardedProps.leading || $slots.leading) && 'pl-8',
+          props.class,
+        )"
+        btn="~"
+        :una="{
+          btnLeading: cn('dropdown-menu-item-leading', forwardedProps.una?.btnLeading),
+          btnTrailing: cn('dropdown-menu-item-trailing', forwardedProps.una?.btnTrailing),
+          ...forwardedProps.una,
+        }"
+      >
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+
+        <template
+          v-if="forwardedProps.shortcut"
+          #trailing
+        >
+          <DropdownMenuShortcut>
+            {{ forwardedProps.shortcut }}
+          </DropdownMenuShortcut>
+        </template>
+      </Button>
+    </DropdownMenuItem>
+  </div>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NDropdownMenuLabelProps } from '../../../types'
+
+const props = withDefaults(defineProps<NDropdownMenuLabelProps>(), {
+  size: 'sm',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn(
+      'dropdown-menu-label',
+      forwardedProps.inset && 'pl-8',
+      props.class,
+      props.una?.dropdownMenuLabel,
+    )"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuRoot.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootEmits, useForwardPropsEmits } from 'radix-vue'
+import type { NDropdownMenuRootProps } from '../../../types'
+
+const props = defineProps<NDropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  DropdownMenuSeparator,
+} from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NDropdownMenuSeparatorProps } from '../../../types'
+import Separator from '../Separator.vue'
+
+const props = defineProps<NDropdownMenuSeparatorProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    as-child
+  >
+    <div class="dropdown-menu-separator-root">
+      <Separator
+        v-bind="delegatedProps"
+        :class="cn(
+          'dropdown-menu-separator my-1',
+          props.class,
+          props.una?.dropdownMenuSeparator,
+        )"
+      />
+    </div>
+  </DropdownMenuSeparator>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NDropdownMenuShortcutProps } from '../../../types/dropdown-menu'
+
+const props = withDefaults(defineProps<NDropdownMenuShortcutProps>(), {
+  size: 'sm',
+})
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'dropdown-menu-shortcut',
+      props.class,
+      props.una?.dropdownMenuShortcut,
+    )"
+  >
+    <slot>
+      {{ props.value }}
+    </slot>
+  </span>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+import type {
+  DropdownMenuSubEmits,
+  DropdownMenuSubProps,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuSub>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NDropdownMenuSubContentProps } from '../../../types'
+
+const props = defineProps<NDropdownMenuSubContentProps>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn(
+      'dropdown-menu-sub-content',
+      props.class,
+      forwarded.una?.dropdownMenuSubContent,
+    )"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  DropdownMenuSubTrigger,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '../../../utils'
+import Button from '../Button.vue'
+import type { NDropdownMenuSubTriggerProps } from '../../../types'
+
+const props = withDefaults(defineProps<NDropdownMenuSubTriggerProps>(), {
+  dropdownMenuItem: '~',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    as-child
+  >
+    <Button
+      v-bind="forwardedProps"
+      :dropdown-menu-item
+      :class="cn(
+        'dropdown-menu-sub-trigger w-full justify-start font-normal rounded-sm px-2',
+        forwardedProps.inset && !(forwardedProps.leading || $slots.leading) && 'pl-8',
+        props.class,
+      )"
+      btn="~"
+      :una="{
+        btnLeading: cn('dropdown-menu-sub-trigger-leading', forwardedProps.una?.btnLeading),
+        btnTrailing: cn('dropdown-menu-sub-trigger-trailing', forwardedProps.una?.btnTrailing),
+        ...forwardedProps.una,
+      }"
+      trailing="i-radix-icons-chevron-right"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </Button>
+  </dropdownmenusubtrigger>
+</template>

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, useForwardProps } from 'radix-vue'
+import Button from '../Button.vue'
+import { cn } from '../../../utils'
+import type { NDropdownMenuTriggerProps } from '../../../types'
+
+const props = withDefaults(defineProps<NDropdownMenuTriggerProps>(), {
+})
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    as-child
+  >
+    <Button
+      v-bind="forwardedProps"
+      :class="cn(
+        'dropdown-menu-trigger justify-start font-normal',
+        props.class,
+      )"
+      :una="{
+        btnDefaultVariant: 'dropdown-menu-default-variant',
+        btnLeading: cn('dropdown-menu-trigger-leading', forwardedProps.una?.btnLeading),
+        btnTrailing: cn('dropdown-menu-trigger-trailing', forwardedProps.una?.btnTrailing),
+        ...forwardedProps.una,
+      }"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </Button>
+  </DropdownMenuTrigger>
+</template>

package/dist/runtime/types/button.d.ts

@@ -3,6 +3,7 @@ interface Extensions {
     class?: HTMLAttributes['class'];
     breadcrumbActive?: string;
     breadcrumbInactive?: string;
+    dropdownMenu?: string;
 }
 export interface NButtonProps extends Extensions {
     /**

package/dist/runtime/types/dropdown-menu.d.ts

@@ -0,0 +1,154 @@
+import type { HTMLAttributes } from 'vue';
+import type { DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuRootProps, DropdownMenuSeparatorProps, DropdownMenuSubContentProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps } from 'radix-vue';
+import type { NButtonProps } from './button.js';
+import type { NSeparatorProps } from './separator.js';
+/**
+ * Base extensions for dropdown menu components.
+ */
+interface BaseExtensions {
+    /** CSS class for the component */
+    class?: HTMLAttributes['class'];
+    /** Size of the component */
+    size?: HTMLAttributes['class'];
+}
+/**
+ * Props for the NDropdownMenu component.
+ */
+export interface NDropdownMenuProps extends Omit<NDropdownMenuRootProps, 'class' | 'size'>, Omit<NDropdownMenuTriggerProps, 'una'>, Pick<NDropdownMenuItemProps, 'shortcut' | 'dropdownMenuItem'> {
+    /** Label for the menu */
+    menuLabel?: string;
+    /** Items in the dropdown menu */
+    items?: NDropdownMenuProps[];
+    /** Whether the menu is inset */
+    inset?: boolean;
+    /** Props for the dropdown menu root */
+    _dropdownMenuRoot?: Partial<NDropdownMenuRootProps>;
+    /** Props for the dropdown menu item */
+    _dropdownMenuItem?: Partial<NDropdownMenuItemProps>;
+    /** Props for the dropdown menu trigger */
+    _dropdownMenuTrigger?: Partial<NDropdownMenuTriggerProps>;
+    /** Props for the dropdown menu content */
+    _dropdownMenuContent?: Partial<NDropdownMenuContentProps>;
+    /** Props for the dropdown menu sub-content */
+    _dropdownMenuSubContent?: Partial<NDropdownMenuSubContentProps>;
+    /** Props for the dropdown menu label */
+    _dropdownMenuLabel?: Partial<NDropdownMenuLabelProps>;
+    /** Props for the dropdown menu separator */
+    _dropdownMenuSeparator?: Partial<NDropdownMenuSeparatorProps>;
+    /** Props for the dropdown menu group */
+    _dropdownMenuGroup?: Partial<NDropdownMenuGroupProps>;
+    /** Props for the dropdown menu sub-trigger */
+    _dropdownMenuSubTrigger?: Partial<NDropdownMenuSubTriggerProps>;
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps & NButtonProps['una'];
+}
+/**
+ * Props for the NDropdownMenuRoot component.
+ */
+export interface NDropdownMenuRootProps extends BaseExtensions, DropdownMenuRootProps {
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuRoot'];
+}
+/**
+ * Props for the NDropdownMenuTrigger component.
+ */
+export interface NDropdownMenuTriggerProps extends NButtonProps, DropdownMenuTriggerProps {
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuTrigger'] & NButtonProps['una'];
+}
+/**
+ * Props for the NDropdownMenuContent component.
+ */
+export interface NDropdownMenuContentProps extends BaseExtensions, DropdownMenuContentProps {
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuContent'];
+}
+/**
+ * Props for the NDropdownMenuLabel component.
+ */
+export interface NDropdownMenuLabelProps extends BaseExtensions, DropdownMenuLabelProps {
+    /** Whether the label is inset */
+    inset?: boolean;
+    /** Size of the label */
+    size?: HTMLAttributes['class'];
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuLabel'];
+}
+/**
+ * Props for the NDropdownMenuSeparator component.
+ */
+export interface NDropdownMenuSeparatorProps extends DropdownMenuSeparatorProps, NSeparatorProps {
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuSeparator'] & NSeparatorProps['una'];
+}
+/**
+ * Props for the NDropdownMenuGroup component.
+ */
+export interface NDropdownMenuGroupProps extends BaseExtensions, DropdownMenuGroupProps {
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuGroup'];
+}
+/**
+ * Props for the NDropdownMenuSubContent component.
+ */
+export interface NDropdownMenuSubContentProps extends BaseExtensions, DropdownMenuSubContentProps {
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuSubContent'];
+}
+/**
+ * Props for the NDropdownMenuItem component.
+ */
+export interface NDropdownMenuItemProps extends NButtonProps {
+    /** Dropdown menu item */
+    dropdownMenuItem?: HTMLAttributes['class'];
+    /** Whether the item is inset */
+    inset?: boolean;
+    /** Shortcut key for the item */
+    shortcut?: string;
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuItem'] & NButtonProps['una'];
+}
+/**
+ * Props for the NDropdownMenuSubTrigger component.
+ */
+export interface NDropdownMenuSubTriggerProps extends NButtonProps, DropdownMenuSubTriggerProps {
+    /** Dropdown menu item */
+    dropdownMenuItem?: HTMLAttributes['class'];
+    /** Whether the sub-trigger is inset */
+    inset?: boolean;
+}
+/**
+ * Props for the NDropdownMenuShortcut component.
+ */
+export interface NDropdownMenuShortcutProps extends BaseExtensions {
+    /** Shortcut key for the item */
+    value?: string;
+    /** Additional properties for the una component */
+    una?: NDropdownMenuUnaProps['dropdownMenuShortcut'];
+}
+/**
+ * Props for the NDropdownMenuUna component.
+ */
+interface NDropdownMenuUnaProps {
+    /** CSS class for the dropdown menu content */
+    dropdownMenuContent?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu sub-content */
+    dropdownMenuSubContent?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu sub-trigger */
+    dropdownMenuSubTrigger?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu trigger */
+    dropdownMenuTrigger?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu label */
+    dropdownMenuLabel?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu separator */
+    dropdownMenuSeparator?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu group */
+    dropdownMenuGroup?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu item */
+    dropdownMenuItem?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu root */
+    dropdownMenuRoot?: HTMLAttributes['class'];
+    /** CSS class for the dropdown menu shortcut */
+    dropdownMenuShortcut?: HTMLAttributes['class'];
+}
+export {};

package/dist/runtime/types/index.d.ts

@@ -24,6 +24,7 @@ export * from './separator.js';
 export * from './card.js';
 export * from './breadcrumb.js';
 export * from './table.js';
+export * from './dropdown-menu.js';
 export interface Colors {
     [key: string]: string;
 }

package/dist/runtime/types/index.js

@@ -24,3 +24,4 @@ export * from "./separator.js";
 export * from "./card.js";
 export * from "./breadcrumb.js";
 export * from "./table.js";
+export * from "./dropdown-menu.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.13.0-beta.2",
+  "version": "0.14.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "typescript": "^5.5.4",
     "unocss": "^0.62.2",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/extractor-vue-script": "^0.13.0-beta.2",
-    "@una-ui/preset": "^0.13.0-beta.2"
+    "@una-ui/extractor-vue-script": "^0.14.0-beta.1",
+    "@una-ui/preset": "^0.14.0-beta.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.1",

package/playground/.nuxt/components.d.ts

@@ -6,7 +6,7 @@ interface _GlobalComponents {
     'Breadcrumb': typeof import("../components/Breadcrumb.vue")['default']
     'Card': typeof import("../components/Card.vue")['default']
     'ColorMode': typeof import("../components/ColorMode.vue")['default']
-    'Dropdown': typeof import("../components/Dropdown.vue")['default']
+    'Dropdown': typeof import("../components/DropdownMenu.vue")['default']
     'Extractor': typeof import("../components/Extractor.vue")['default']
     'Form': typeof import("../components/Form.vue")['default']
     'Progress': typeof import("../components/Progress.vue")['default']
@@ -425,7 +425,7 @@ interface _GlobalComponents {
     'LazyBreadcrumb': typeof import("../components/Breadcrumb.vue")['default']
     'LazyCard': typeof import("../components/Card.vue")['default']
     'LazyColorMode': typeof import("../components/ColorMode.vue")['default']
-    'LazyDropdown': typeof import("../components/Dropdown.vue")['default']
+    'LazyDropdown': typeof import("../components/DropdownMenu.vue")['default']
     'LazyExtractor': typeof import("../components/Extractor.vue")['default']
     'LazyForm': typeof import("../components/Form.vue")['default']
     'LazyProgress': typeof import("../components/Progress.vue")['default']
@@ -858,7 +858,7 @@ export const Accordion: typeof import("../components/Accordion.vue")['default']
 export const Breadcrumb: typeof import("../components/Breadcrumb.vue")['default']
 export const Card: typeof import("../components/Card.vue")['default']
 export const ColorMode: typeof import("../components/ColorMode.vue")['default']
-export const Dropdown: typeof import("../components/Dropdown.vue")['default']
+export const Dropdown: typeof import("../components/DropdownMenu.vue")['default']
 export const Extractor: typeof import("../components/Extractor.vue")['default']
 export const Form: typeof import("../components/Form.vue")['default']
 export const Progress: typeof import("../components/Progress.vue")['default']
@@ -1277,7 +1277,7 @@ export const LazyAccordion: typeof import("../components/Accordion.vue")['defaul
 export const LazyBreadcrumb: typeof import("../components/Breadcrumb.vue")['default']
 export const LazyCard: typeof import("../components/Card.vue")['default']
 export const LazyColorMode: typeof import("../components/ColorMode.vue")['default']
-export const LazyDropdown: typeof import("../components/Dropdown.vue")['default']
+export const LazyDropdown: typeof import("../components/DropdownMenu.vue")['default']
 export const LazyExtractor: typeof import("../components/Extractor.vue")['default']
 export const LazyForm: typeof import("../components/Form.vue")['default']
 export const LazyProgress: typeof import("../components/Progress.vue")['default']

package/playground/node_modules/.vue-global-types/vue_3.4_false.d.ts

@@ -0,0 +1,112 @@
+// @ts-nocheck
+export {};
+declare module 'vue' {
+	export interface GlobalComponents { }
+}
+declare global {
+
+const __VLS_intrinsicElements: __VLS_IntrinsicElements;
+const __VLS_directiveBindingRestFields = { instance: null, oldValue: null, modifiers: null as any, dir: null as any };
+
+type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
+type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
+type __VLS_GlobalComponents = (import('vue').GlobalComponents) & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'>;
+type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
+type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
+type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
+type __VLS_WithComponent<N0 extends string, LocalComponents, N1 extends string, N2 extends string, N3 extends string> =
+	N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N1] } :
+	N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N2] } :
+	N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : { [K in N0]: LocalComponents[N3] } :
+	N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N1] } :
+	N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N2] } :
+	N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : { [K in N0]: __VLS_GlobalComponents[N3] } :
+	{ [K in N0]: unknown }
+type __VLS_FunctionalComponentProps<T, K> =
+	'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: { props?: infer P } } ? NonNullable<P> : never
+	: T extends (props: infer P, ...args: any) => any ? P :
+	{};
+type __VLS_IsFunction<T, K> = K extends keyof T
+	? __VLS_IsAny<T[K]> extends false
+	? unknown extends T[K]
+	? false
+	: true
+	: false
+	: false;
+// fix https://github.com/vuejs/language-tools/issues/926
+type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
+type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R
+	? U extends T
+	? never
+	: __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R)
+	: never;
+type __VLS_OverloadUnion<T> = Exclude<
+	__VLS_OverloadUnionInner<(() => never) & T>,
+	T extends () => never ? never : () => never
+>;
+type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F
+	? F extends (event: infer E, ...args: infer A) => any
+	? { [K in E & string]: (...args: A) => void; }
+	: never
+	: never;
+type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<
+	__VLS_UnionToIntersection<
+		__VLS_ConstructorOverloads<T> & {
+			[K in keyof T]: T[K] extends any[] ? { (...args: T[K]): void } : never
+		}
+	>
+>;
+type __VLS_PrettifyGlobal<T> = { [K in keyof T]: T[K]; } & {};
+
+function __VLS_getVForSourceType(source: number): [number, number, number][];
+function __VLS_getVForSourceType(source: string): [string, number, number][];
+function __VLS_getVForSourceType<T extends any[]>(source: T): [
+	item: T[number],
+	key: number,
+	index: number,
+][];
+function __VLS_getVForSourceType<T extends { [Symbol.iterator](): Iterator<any> }>(source: T): [
+	item: T extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never, 
+	key: number,
+	index: undefined,
+][];
+// #3845
+function __VLS_getVForSourceType<T extends number | { [Symbol.iterator](): Iterator<any> }>(source: T): [
+	item: number | (Exclude<T, number> extends { [Symbol.iterator](): Iterator<infer T1> } ? T1 : never), 
+	key: number,
+	index: undefined,
+][];
+function __VLS_getVForSourceType<T>(source: T): [
+	item: T[keyof T],
+	key: keyof T,
+	index: number,
+][];
+// @ts-ignore
+function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
+// @ts-ignore
+function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
+function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any
+	? T | __VLS_unknownDirective
+	: NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
+function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
+function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
+function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
+function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K):
+	T extends new (...args: any) => any
+	? (props: (K extends { $props: infer Props } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & { __ctx?: {
+		attrs?: any,
+		slots?: K extends { $slots: infer Slots } ? Slots : any,
+		emit?: K extends { $emit: infer Emit } ? Emit : any
+	} & { props?: (K extends { $props: infer Props } ? Props : any) & Record<string, unknown>; expose?(exposed: K): void; } }
+	: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
+	: T extends (...args: any) => any ? T
+	: (_: {} & Record<string, unknown>, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {} & Record<string, unknown> } };
+function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void;
+function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
+function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<
+	'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
+	, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
+>>;
+function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
+function __VLS_tryAsConstant<const T>(t: T): T;
+}