@una-ui/nuxt 0.27.1-beta.1 → 0.29.0-beta.1

package/dist/module.json

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

package/dist/module.mjs

@@ -7,7 +7,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "0.27.1-beta.1";
+const version = "0.29.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -71,6 +71,13 @@ const module = defineNuxtModule({
       watch: nuxt.options.dev,
       priority: 10
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/elements", "collapsible"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components/elements", "tooltip"),
       prefix: options.prefix,

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

@@ -52,6 +52,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     :type="to ? null : type"
     :class="cn(
       (square === '' || square === true) && 'btn-square',
+      block && 'btn-block',
       !rounded && 'btn-default-radius',
       !hasVariant && !isBaseVariant ? una?.btnDefaultVariant : null,
       reverse && 'btn-reverse',

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

@@ -14,8 +14,9 @@ const props = defineProps<NSkeletonProps>()
         props.una?.skeleton,
       )
     "
-    :skeleton="props.skeleton"
-    :size="props.size"
+    :skeleton
+    :size
+    :rounded
   >
     <slot />
   </div>

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

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<NToggleProps>(), {
 const emits = defineEmits<ToggleEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, size, ...delegated } = props
+  const { class: _, ...delegated } = props
 
   return delegated
 })

package/dist/runtime/components/elements/avatar/Avatar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { NAvatarProps } from '../../../types'
+import { AvatarRoot } from 'radix-vue'
+import { cn } from '../../../utils'
+import AvatarFallback from './AvatarFallback.vue'
+import AvatarImage from './AvatarImage.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NAvatarProps>(), {
+  as: 'span',
+  size: 'md',
+  rounded: 'full',
+  square: '2.5em',
+  avatar: 'soft',
+})
+</script>
+
+<template>
+  <AvatarRoot
+    as-child
+  >
+    <component
+      :is="as"
+      :class="cn(
+        'avatar',
+        una?.avatarRoot,
+        props.class,
+      )"
+      :size
+      :rounded
+      :square
+      :avatar
+      v-bind="{ ..._avatarRoot, ...$attrs }"
+    >
+      <slot :props>
+        <AvatarImage
+          v-if="src"
+          :src
+          :una
+          v-bind="_avatarImage"
+        />
+      </slot>
+
+      <AvatarFallback
+        :avatar
+        :label="label || alt?.split(' ').map(word => word[0]).join('').slice(0, 2)"
+        :icon
+        v-bind="_avatarFallback"
+        :una
+      >
+        <slot name="fallback" />
+      </AvatarFallback>
+    </component>
+  </AvatarRoot>
+</template>

package/dist/runtime/components/elements/avatar/AvatarFallback.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { NAvatarAvatarFallbackProps } from '../../../types'
+import { AvatarFallback } from 'radix-vue'
+import { cn } from '../../../utils'
+import Icon from '../Icon.vue'
+
+const props = withDefaults(defineProps<NAvatarAvatarFallbackProps>(), {
+  as: 'span',
+})
+</script>
+
+<template>
+  <AvatarFallback
+    as-child
+  >
+    <component
+      :is="as"
+      v-bind="props"
+      :class="cn(
+        'avatar-fallback',
+        una?.avatarFallback,
+        props.class,
+      )"
+    >
+      <slot>
+        <span
+          v-if="label && !icon"
+          :class="cn(
+            'avatar-label',
+            una?.avatarLabel,
+          )"
+        >
+          {{ label }}
+        </span>
+        <Icon
+          v-else-if="icon"
+          :class="cn(
+            'avatar-icon',
+            una?.avatarIcon,
+          )"
+          :name="label"
+        />
+      </slot>
+    </component>
+  </AvatarFallback>
+</template>

package/dist/runtime/components/elements/avatar/AvatarImage.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NAvatarImageProps } from '../../../types'
+import { AvatarImage } from 'radix-vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<NAvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage
+    v-bind="props"
+    :src="src!"
+    :class="cn(
+      'avatar-image',
+      una?.avatarImage,
+      props.class,
+    )"
+  />
+</template>

package/dist/runtime/components/elements/collapsible/Collapsible.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits } from 'radix-vue'
+import type { NCollapsibleProps } from '../../../types'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+import CollapsibleContent from './CollapsibleContent.vue'
+import CollapsibleTrigger from './CollapsibleTrigger.vue'
+
+const props = defineProps<NCollapsibleProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open>
+      <CollapsibleTrigger>
+        <slot name="trigger" :open />
+      </CollapsibleTrigger>
+
+      <CollapsibleContent
+        v-bind="_collapsibleContent"
+      >
+        <slot name="content" />
+      </CollapsibleContent>
+    </slot>
+  </CollapsibleRoot>
+</template>

package/dist/runtime/components/elements/collapsible/CollapsibleContent.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NCollapsibleContentProps } from '../../../types'
+import { CollapsibleContent } from 'radix-vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent
+    v-bind="props"
+    :class="cn(
+      'collapsible-content',
+      props.class,
+    )"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

package/dist/runtime/components/elements/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>

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

@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogDescription
     v-bind="forwardedProps"
     :class="cn(
-      'dialog-description',
+      'dialog-description 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%',
       props.una?.dialogDescription,
       props.class,
     )"

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

@@ -9,6 +9,7 @@ const props = defineProps<NDialogOverlayProps>()
 <template>
   <DialogOverlay
     :class="cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       !props.scrollable ? 'dialog-overlay' : 'dialog-scroll-overlay',
       props.una?.dialogOverlay,
       props.class,

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DropdownMenuContentEmits, DropdownMenuRootEmits } from 'radix-vue'
 import type { NDropdownMenuProps } from '../../../types'
-import { createReusableTemplate } from '@vueuse/core'
+import { createReusableTemplate, reactivePick } from '@vueuse/core'
 import { DropdownMenuPortal, useForwardPropsEmits } from 'radix-vue'
-import { omitProps, pickProps } from '../../../utils'
+import { omitProps } from '../../../utils'
 import DropdownMenuContent from './DropdownMenuContent.vue'
 import DropdownMenuGroup from './DropdownMenuGroup.vue'
 import DropdownMenuItem from './DropdownMenuItem.vue'
@@ -24,88 +24,86 @@ const [DefineMenuSub, ReuseMenuSub] = createReusableTemplate<NDropdownMenuProps>
 
 <template>
   <DropdownMenuRoot
-    v-bind="pickProps(forwarded, ['defaultOpen', 'open', 'modal', 'dir'])"
+    v-bind="reactivePick(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>
+    <DropdownMenuTrigger
+      v-bind="omitProps({ ...forwarded, ...forwarded._dropdownMenuTrigger }, [
+        'dropdownMenuItem',
+        'items',
+        'menuLabel',
+        '_dropdownMenuItem',
+        '_dropdownMenuContent',
+        '_dropdownMenuLabel',
+        '_dropdownMenuSeparator',
+        '_dropdownMenuGroup',
+        '_dropdownMenuTrigger',
+        '_dropdownMenuSubTrigger',
+        '_dropdownMenuSubContent',
+      ])"
+    >
+      <slot />
+    </DropdownMenuTrigger>
 
-      <DropdownMenuContent
-        v-bind="forwarded._dropdownMenuContent"
-      >
-        <slot name="content">
-          <template
-            v-if="menuLabel || $slots['menu-label']"
+    <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"
           >
-            <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="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"
+        <slot name="items" :items>
+          <DropdownMenuGroup
+            :una="forwarded.una?.dropdownMenuGroup"
+            v-bind="forwarded._dropdownMenuGroup"
+          >
+            <template
+              v-for="item in items"
+              :key="item.label"
             >
-              <template
-                v-for="item in items"
-                :key="item.label"
+              <slot
+                v-if="!item.items && item.label"
+                :name="`item-${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 }"
+                <DropdownMenuItem
+                  :size
+                  :inset
+                  :dropdown-menu-item
+                  :una="forwarded.una?.dropdownMenuItem"
+                  v-bind="{ ...item, ...forwarded._dropdownMenuItem, ...item._dropdownMenuItem }"
                 />
+              </slot>
 
-                <ReuseMenuSub
-                  v-else
-                  v-bind="item"
-                />
-              </template>
-            </DropdownMenuGroup>
-          </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>
-      </DropdownMenuContent>
-    </slot>
+      </slot>
+    </DropdownMenuContent>
   </DropdownMenuRoot>
 
   <DefineMenuSub

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

@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <DropdownMenuContent
       v-bind="forwarded"
       :class="cn(
-        'dropdown-menu-content',
+        'dropdown-menu-content  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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
         props.una?.dropdownMenuContent,
       )"

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

@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuSubContent
     v-bind="forwarded"
     :class="cn(
-      'dropdown-menu-sub-content',
+      'dropdown-menu-sub-content 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       props.class,
       forwarded.una?.dropdownMenuSubContent,
     )"

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

@@ -25,25 +25,23 @@ const forwardedProps = useForwardProps(delegatedProps)
   <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>
+    <slot>
+      <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="dropdown-menu-sub-trigger-trailing-icon"
+      />
+    </slot>
   </dropdownmenusubtrigger>
 </template>

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

@@ -13,23 +13,21 @@ const forwardedProps = useForwardProps(props)
   <DropdownMenuTrigger
     as-child
   >
-    <Button
-      v-bind="forwardedProps"
-      :id="randomId('dropdown-menu-trigger')"
-      :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>
+    <slot>
+      <Button
+        v-bind="forwardedProps"
+        :id="randomId('dropdown-menu-trigger')"
+        :class="cn(
+          'dropdown-menu-trigger',
+          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),
+          ...props.una,
+        }"
+      />
+    </slot>
   </DropdownMenuTrigger>
 </template>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { TooltipRootEmits } from 'radix-vue'
 import type { NTooltipProps } from '../../../types'
+import { reactivePick } from '@vueuse/core'
 import { useForwardPropsEmits } from 'radix-vue'
-
 import TooltipContent from './TooltipContent.vue'
 import TooltipProvider from './TooltipProvider.vue'
 import TooltipRoot from './TooltipRoot.vue'
@@ -14,17 +14,24 @@ defineOptions({
 
 const props = defineProps<NTooltipProps>()
 const emits = defineEmits<TooltipRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
+const rootProps = reactivePick(props, [
+  'defaultOpen',
+  'delayDuration',
+  'disableClosingTrigger',
+  'disabled',
+  'disableHoverableContent',
+  'ignoreNonKeyboardFocus',
+  'open',
+])
+const forwarded = useForwardPropsEmits(rootProps, emits)
 </script>
 
 <template>
   <TooltipProvider
     v-bind="_tooltipProvider"
-    :disabled
   >
     <TooltipRoot
-      v-bind="_tooltipRoot"
+      v-bind="forwarded"
     >
       <TooltipTrigger
         as-child
@@ -35,11 +42,11 @@ const forwarded = useForwardPropsEmits(props, emits)
 
       <TooltipContent
         v-if="$slots.content || content"
-        v-bind="forwarded._tooltipContent"
+        v-bind="_tooltipContent"
         :size
         :tooltip
         :disabled
-        :una="forwarded.una?.tooltipContent"
+        :una="una?.tooltipContent"
       >
         <slot name="content">
           {{ content }}

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits } from 'radix-vue'
 import type { NCheckboxProps } from '../../types'
+import { reactivePick } from '@vueuse/core'
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed } from 'vue'
 import { cn, randomId } from '../../utils'
@@ -12,11 +13,16 @@ const props = withDefaults(defineProps<NCheckboxProps>(), {
 })
 const emits = defineEmits<CheckboxRootEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactivePick(props, [
+  'checked',
+  'defaultChecked',
+  'disabled',
+  'id',
+  'name',
+  'required',
+  'value',
+  'size',
+])
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
@@ -25,13 +31,11 @@ const id = computed(() => props.id ?? randomId('checkbox'))
 
 <template>
   <div
-    checkbox="wrapper"
-    :class="[
+    :class="cn(
+      'checkbox-wrapper flex',
       una?.checkboxWrapper,
-      {
-        'checkbox-reverse': reverse,
-      },
-    ]"
+      reverse && 'checkbox-reverse',
+    )"
   >
     <CheckboxRoot
       v-bind="forwarded"