@una-ui/nuxt 0.51.5 → 0.52.0

package/dist/runtime/components/combobox/ComboboxTrigger.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { NComboboxTriggerProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxTrigger, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn, randomId } from '../../utils'
+import Button from '../elements/Button.vue'
+import Icon from '../elements/Icon.vue'
+
+const props = withDefaults(defineProps<NComboboxTriggerProps>(), {
+  btn: 'solid-white',
+})
+
+const forwardedProps = useForwardProps(reactiveOmit(props, 'class', 'status', 'una', 'btn'))
+
+const statusClassVariants = computed(() => {
+  const btn = {
+    info: 'btn-outline-info',
+    success: 'btn-outline-success',
+    warning: 'btn-outline-warning',
+    error: 'btn-outline-error',
+    default: undefined,
+  }
+
+  const icon = {
+    info: props.una?.comboboxTriggerInfoIcon ?? 'combobox-trigger-info-icon',
+    success: props.una?.comboboxTriggerSuccessIcon ?? 'combobox-trigger-success-icon',
+    warning: props.una?.comboboxTriggerWarningIcon ?? 'combobox-trigger-warning-icon',
+    error: props.una?.comboboxTriggerErrorIcon ?? 'combobox-trigger-error-icon',
+    default: props?.trailing ?? 'combobox-trigger-trailing-icon',
+  }
+
+  return {
+    btn: btn[props.status ?? 'default'],
+    icon: icon[props.status ?? 'default'],
+  }
+})
+
+const id = computed(() => props.id ?? randomId('combobox-trigger'))
+const status = computed(() => props.status ?? 'default')
+</script>
+
+<template>
+  <ComboboxTrigger
+    v-bind="forwardedProps"
+    as-child
+  >
+    <slot name="root">
+      <Button
+        :id
+        :btn="statusClassVariants.btn ? undefined : props.btn"
+        :data-status="status"
+        data-slot="combobox-trigger"
+        :class="cn(
+          'combobox-trigger',
+          props.class,
+        )"
+        tabindex="0"
+        :una="{
+          ...props.una,
+          btn: props.una?.comboboxTrigger,
+          btnLeading: cn(
+            'combobox-trigger-leading',
+            props.una?.btnLeading,
+            props.una?.comboboxTriggerLeading,
+          ),
+          btnDefaultVariant: statusClassVariants.btn,
+        }"
+      >
+        <template v-for="(_, name) in $slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+
+        <template #trailing>
+          <Icon
+            :data-status="status"
+            :name="statusClassVariants.icon"
+            :class="cn(
+              'combobox-trigger-trailing',
+              props.una?.btnTrailing,
+            )"
+          />
+        </template>
+      </Button>
+    </slot>
+  </ComboboxTrigger>
+</template>

package/dist/runtime/components/combobox/ComboboxViewport.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NComboboxViewportProps } from '../../types'
+import { ComboboxViewport, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+
+const props = defineProps<NComboboxViewportProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxViewport
+    data-slot="combobox-viewport"
+    v-bind="forwarded"
+    :class="cn(
+      'combobox-viewport',
+      props.una?.comboboxViewport,
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxViewport>
+</template>

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -80,9 +80,6 @@ declare global {
     type __VLS_PickFunctionalComponentCtx<T, 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>>;
-    type __VLS_OmitStringIndex<T> = {
-        [K in keyof T as string extends K ? never : K]: T[K];
-    };
     type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>;
     function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [
         item: T extends number ? number : T extends string ? string : T extends any[] ? T[number] : T extends Iterable<infer T1> ? T1 : any,
@@ -126,6 +123,6 @@ declare global {
     };
     function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
     function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T & Record<string, unknown>) => void;
-    function __VLS_asFunctionalSlot<S>(slot: S): (props: NonNullable<S> extends (props: infer P) => any ? P : {}) => void;
+    function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>;
     function __VLS_tryAsConstant<const T>(t: T): T;
 }

package/dist/runtime/components/elements/dialog/DialogContent.vue

@@ -50,6 +50,7 @@ const contentEvents = computed(() => {
     <DialogContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48%',
         'dialog-content',
         props.una?.dialogContent,
         props.class,
@@ -62,7 +63,6 @@ const contentEvents = computed(() => {
         v-if="showClose"
         v-bind="_dialogClose"
         class="dialog-close"
-        :una
       />
     </DialogContent>
   </DialogPortal>

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

@@ -54,7 +54,7 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
           <DropdownMenuLabel
             :size
             :inset
-            :una="forwarded.una?.dropdownMenuLabel"
+            :una
             v-bind="forwarded._dropdownMenuLabel"
           >
             <slot name="menu-label">
@@ -62,14 +62,14 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
             </slot>
           </DropdownMenuLabel>
           <DropdownMenuSeparator
-            :una="forwarded.una?.dropdownMenuSeparator"
+            :una
             v-bind="forwarded._dropdownMenuSeparator"
           />
         </template>
 
         <slot name="group" :items>
           <DropdownMenuGroup
-            :una="forwarded.una?.dropdownMenuGroup"
+            :una
             v-bind="forwarded._dropdownMenuGroup"
           >
             <slot name="items" :items>
@@ -85,7 +85,7 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
                     :size
                     :inset
                     :dropdown-menu-item
-                    :una="forwarded.una?.dropdownMenuItem"
+                    :una
                     :_dropdown-menu-shortcut
                     v-bind="{ ...item, ...forwarded._dropdownMenuItem, ...item._dropdownMenuItem }"
                   />
@@ -93,7 +93,7 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
 
                 <DropdownMenuSeparator
                   v-else-if="!item.label && !item.items"
-                  :una="forwarded.una?.dropdownMenuSeparator"
+                  :una
                   v-bind="{ ...forwarded._dropdownMenuSeparator, ...item._dropdownMenuSeparator }"
                 />
 
@@ -119,26 +119,26 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
       <DropdownMenuLabel
         :size
         :inset
-        :una="forwarded.una?.dropdownMenuLabel"
+        :una
         v-bind="{ ...forwarded._dropdownMenuLabel, ...subProps._dropdownMenuLabel }"
       >
         {{ subProps.menuLabel }}
       </DropdownMenuLabel>
       <DropdownMenuSeparator
-        :una="forwarded.una?.dropdownMenuSeparator"
+        :una
         v-bind="{ ...forwarded._dropdownMenuSeparator, ...subProps._dropdownMenuSeparator }"
       />
     </template>
 
     <DropdownMenuGroup
-      :una="forwarded.una?.dropdownMenuGroup"
+      :una
       v-bind="{ ...forwarded._dropdownMenuGroup, ...subProps._dropdownMenuGroup }"
     >
       <DropdownMenuSub>
         <DropdownMenuSubTrigger
           :size
           :inset
-          :una="forwarded.una?.dropdownMenuSubTrigger"
+          :una
           :dropdown-menu-item
           v-bind="omitProps({
             ...subProps,
@@ -152,7 +152,7 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
         <DropdownMenuPortal>
           <DropdownMenuSubContent
             v-bind="subProps._dropdownMenuSubContent"
-            :una="forwarded.una?.dropdownMenuSubContent"
+            :una
           >
             <template
               v-for="subItem in subProps.items"
@@ -164,7 +164,7 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
                 :inset
                 :dropdown-menu-item
                 :_dropdown-menu-shortcut
-                :una="forwarded.una?.dropdownMenuItem"
+                :una
                 v-bind="{ ...subItem, ...forwarded._dropdownMenuItem, ...subItem._dropdownMenuItem }"
               >
                 {{ subItem.label }}
@@ -172,7 +172,7 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
 
               <DropdownMenuSeparator
                 v-else-if="!subItem.label && !subItem.items"
-                :una="forwarded.una?.dropdownMenuSeparator"
+                :una
                 v-bind="{ ...forwarded._dropdownMenuSeparator, ...subItem._dropdownMenuSeparator }"
               />
 

package/dist/runtime/components/elements/tooltip/Tooltip.vue

@@ -46,7 +46,7 @@ const forwarded = useForwardPropsEmits(rootProps, emits)
         :size
         :tooltip
         :disabled
-        :una="una?.tooltipContent"
+        :una
       >
         <slot name="content">
           {{ content }}

package/dist/runtime/components/forms/Checkbox.vue

@@ -8,6 +8,10 @@ import { cn, randomId } from '../../utils'
 import Icon from '../elements/Icon.vue'
 import Label from '../elements/Label.vue'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<NCheckboxProps>(), {
   forceMount: true,
 })
@@ -36,7 +40,7 @@ const id = computed(() => props.id ?? randomId('checkbox'))
     )"
   >
     <CheckboxRoot
-      v-bind="forwarded"
+      v-bind="{ ...forwarded, ...$attrs }"
       :id="id"
       :class="
         cn(

package/dist/runtime/components/forms/Input.vue

@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<NInputProps>(), {
   size: 'md',
   type: 'text',
   resize: 'none',
-  rows: 3,
+  rows: 0,
 })
 
 const emit = defineEmits(['leading', 'trailing', 'update:modelValue'])
@@ -126,6 +126,7 @@ defineExpose({
       'input-wrapper',
       una?.inputWrapper,
     )"
+    v-bind="_inputWrapper"
   >
     <div
       v-if="isLeading"

package/dist/runtime/components/forms/form/FormField.vue

@@ -38,6 +38,7 @@ const statusClassVariants = computed(() => {
       :class="cn(
         props.class,
       )"
+      :una
     >
       <slot name="top">
         <div

package/dist/runtime/components/forms/select/Select.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { AcceptableValue, SelectRootEmits } from 'reka-ui'
 import type { NSelectProps, SelectGroup as SelectGroupType } from '../../../types'
+import { computed } from 'vue'
 </script>
 
 <script setup lang="ts" generic="T extends AcceptableValue">
@@ -20,6 +21,12 @@ const props = withDefaults(defineProps<NSelectProps<T>>(), {
 
 const emits = defineEmits<SelectRootEmits<T>>()
 
+// Check if items are grouped
+const hasGroups = computed(() => {
+  return Array.isArray(props.items) && props.items.length > 0
+    && typeof props.items[0] === 'object' && 'items' in (props.items[0] as any)
+})
+
 const forwarded = useForwardPropsEmits(props, emits)
 
 function formatSelectedValue(value: unknown) {
@@ -69,8 +76,8 @@ function isItemSelected(item: unknown, modelValue: unknown) {
     )"
     v-bind="forwarded"
   >
-    <slot name="root" :model-value :open>
-      <slot name="trigger-wrapper">
+    <slot :model-value :open>
+      <slot name="trigger-root" :model-value :open>
         <SelectTrigger
           :id
           :size
@@ -105,7 +112,7 @@ function isItemSelected(item: unknown, modelValue: unknown) {
         :una
       >
         <slot name="content" :items="items">
-          <template v-if="!group">
+          <template v-if="!hasGroups">
             <SelectLabel
               v-if="label"
               v-bind="_selectLabel"
@@ -131,11 +138,14 @@ function isItemSelected(item: unknown, modelValue: unknown) {
                 <slot name="item" :item="item">
                   {{ props.itemKey && item ? (item as any)[props.itemKey] : item }}
                 </slot>
+                <template #indicator>
+                  <slot name="indicator" :item="item" />
+                </template>
               </SelectItem>
             </template>
           </template>
 
-          <template v-if="group">
+          <template v-if="hasGroups">
             <SelectGroup
               v-for="(group, i) in items as SelectGroupType<T>[]"
               :key="i"
@@ -143,7 +153,7 @@ function isItemSelected(item: unknown, modelValue: unknown) {
               :una
             >
               <SelectSeparator
-                v-if="i > 0"
+                v-if="i > 0 && props.groupSeparator"
                 v-bind="props._selectSeparator"
                 :una
               />
@@ -175,6 +185,9 @@ function isItemSelected(item: unknown, modelValue: unknown) {
                     <slot name="item" :item="item">
                       {{ props.itemKey ? (item as any)[props.itemKey] : item }}
                     </slot>
+                    <template #indicator>
+                      <slot name="indicator" :item="item" />
+                    </template>
                   </SelectItem>
                 </template>
               </slot>

package/dist/runtime/components/forms/select/SelectItem.vue

@@ -39,7 +39,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       :una
       v-bind="props._selectItemIndicator"
     >
-      <slot name="item-indicator" />
+      <slot name="indicator" />
     </SelectItemIndicator>
 
     <SelectItemText

package/dist/runtime/components/forms/select/SelectTrigger.vue

@@ -7,9 +7,11 @@ import { cn, randomId } from '../../../utils'
 import Button from '../../elements/Button.vue'
 import Icon from '../../elements/Icon.vue'
 
-const props = defineProps<NSelectTriggerProps>()
+const props = withDefaults(defineProps<NSelectTriggerProps>(), {
+  select: 'solid-white',
+})
 
-const forwardedProps = useForwardProps(reactiveOmit(props, 'class', 'status', 'una'))
+const forwardedProps = useForwardProps(reactiveOmit(props, 'class', 'status', 'una', 'select'))
 
 const statusClassVariants = computed(() => {
   const btn = {
@@ -17,7 +19,7 @@ const statusClassVariants = computed(() => {
     success: 'btn-outline-success',
     warning: 'btn-outline-warning',
     error: 'btn-outline-error',
-    default: props.select ? `select-${props.select}` : 'select-default-variant',
+    default: '',
   }
 
   const icon = {
@@ -45,6 +47,7 @@ const status = computed(() => props.status ?? 'default')
     <Button
       v-bind="forwardedProps"
       :id
+      :select="statusClassVariants.btn ? undefined : props.select"
       :data-status="status"
       :class="cn(
         'select-trigger justify-between font-normal',

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -98,7 +98,7 @@ function shuffleTheme(): void {
 
         <Separator />
 
-        <div class="space-y-3">
+        <div class="space-y-2">
           <Label for="color" class="text-xs"> Primary Color</Label>
           <div class="grid grid-cols-7 gap-3">
             <button
@@ -119,7 +119,7 @@ function shuffleTheme(): void {
 
         <Separator />
 
-        <div class="space-y-3">
+        <div class="space-y-2">
           <Label for="color" class="text-xs"> Gray Color </Label>
           <div class="grid grid-cols-7 gap-3">
             <button
@@ -140,7 +140,7 @@ function shuffleTheme(): void {
 
         <Separator />
 
-        <div class="space-y-3">
+        <div class="space-y-1">
           <Label for="radius" class="text-xs"> Radius </Label>
           <div class="grid grid-cols-5 gap-2 py-1.5">
             <Button
@@ -162,7 +162,7 @@ function shuffleTheme(): void {
 
         <Separator />
 
-        <div class="space-y-3">
+        <div class="space-y-1">
           <Label for="theme" class="text-xs">Mode</Label>
 
           <div class="flex justify-around py-1.5 space-x-2">
@@ -202,12 +202,14 @@ function shuffleTheme(): void {
 
         <div class="flex space-x-3">
           <Button
+            size="xs"
             btn="solid-gray block"
             label="Reset"
             leading="i-radix-icons-reload"
             @click="reset"
           />
           <Button
+            size="xs"
             btn="solid block"
             class="transition"
             label="Shuffle"

package/dist/runtime/components/navigation-menu/NavigationMenuContentItem.vue

@@ -14,6 +14,7 @@ const forwarded = useForwardPropsEmits(props, emits)
 <template>
   <NavigationMenuLink
     v-bind="forwarded"
+    :una
     :class="cn(
       'navigation-menu-content-item',
       props.una?.navigationMenuContentItem,

package/dist/runtime/components/slots/FormFieldDefault.d.ts

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
     };
     modelValue: {
-        type: (NumberConstructor | BooleanConstructor | StringConstructor)[];
+        type: any;
         required: false;
     };
     id: {
@@ -38,7 +38,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
     };
     modelValue: {
-        type: (NumberConstructor | BooleanConstructor | StringConstructor)[];
+        type: any;
         required: false;
     };
     id: {
@@ -59,6 +59,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    modelValue: any;
     'aria-invalid': boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/slots/FormFieldDefault.js

@@ -11,7 +11,7 @@ export default defineComponent({
       required: false
     },
     "modelValue": {
-      type: [String, Number, Boolean],
+      type: [String, Number, Boolean, Object, Array, null, void 0],
       required: false
     },
     "id": {
@@ -42,14 +42,6 @@ export default defineComponent({
           emit("blur", event);
           node.props?.onBlur?.(event);
         },
-        "onInput": (event) => {
-          emit("input", event);
-          node.props?.onInput?.(event);
-        },
-        "onChange": (event) => {
-          emit("change", event);
-          node.props?.onChange?.(event);
-        },
         "onUpdate:modelValue": (value) => {
           emit("update:modelValue", value);
           node.props?.["onUpdate:modelValue"]?.(value);

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

@@ -36,7 +36,7 @@ export interface NAvatarRootProps extends AvatarRootProps, BaseProps {
      * avatar="solid-green"
      */
     avatar?: HTMLAttributes['class'];
-    una?: NAvatarUnaProps['avatarRoot'];
+    una?: Pick<NAvatarUnaProps, 'avatarRoot'>;
 }
 export interface NAvatarAvatarFallbackProps extends AvatarFallbackProps, BaseProps {
     /**
@@ -52,12 +52,12 @@ export interface NAvatarAvatarFallbackProps extends AvatarFallbackProps, BasePro
      * label="i-lucide-user"
      */
     icon?: boolean;
-    una?: NAvatarUnaProps['avatarFallback'];
+    una?: Pick<NAvatarUnaProps, 'avatarFallback' | 'avatarLabel' | 'avatarIcon'>;
 }
 export interface NAvatarImageProps extends Omit<AvatarImageProps, 'src'>, BaseProps {
     src?: string;
     alt?: string;
-    una?: NAvatarUnaProps['avatarImage'];
+    una?: Pick<NAvatarUnaProps, 'avatarImage'>;
 }
 export interface NAvatarUnaProps {
     avatarRoot?: HTMLAttributes['class'];