@una-ui/nuxt 0.23.0-beta.1 → 0.25.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.23.0-beta.1",
+  "version": "0.25.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.23.0-beta.1";
+const version = "0.25.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/data/table/Table.vue

@@ -225,7 +225,7 @@ defineExpose({
             :colspan="header.colSpan"
             :data-pinned="header.column.getIsPinned()"
             :una="una"
-            v-bind="props._tableHead"
+            v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
           >
             <Button
               v-if="header.column.columnDef.enableSorting || (header.column.columnDef.enableSorting !== false && enableSorting)"
@@ -290,7 +290,7 @@ defineExpose({
               :una="una"
               :colspan="header.colSpan"
               :data-pinned="header.column.getIsPinned()"
-              v-bind="props._tableHead"
+              v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
             >
               <slot
                 v-if="header.id !== 'selection' && ((header.column.columnDef.enableColumnFilter !== false && enableColumnFilters) || header.column.columnDef.enableColumnFilter)"
@@ -344,7 +344,7 @@ defineExpose({
                   :key="cell.id"
                   :data-pinned="cell.column.getIsPinned()"
                   :una="una"
-                  v-bind="props._tableCell"
+                  v-bind="{ ...props._tableCell, ...cell.column.columnDef.meta }"
                 >
                   <slot
                     :name="`${cell.column.id}-cell`"
@@ -411,7 +411,7 @@ defineExpose({
                 v-if="header.column.columnDef.footer"
                 :colspan="header.colSpan"
                 :una="una"
-                v-bind="props._tableHead"
+                v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
               >
                 <slot :name="`${header.id}-footer`" :column="header.column">
                   <FlexRender

package/dist/runtime/components/data/table/TableBody.vue

@@ -9,8 +9,8 @@ const props = defineProps<NTableBodyProps>()
   <tbody
     :class="cn(
       'table-body',
-      props.class,
       props?.una?.tableBody,
+      props.class,
     )"
     v-bind="$attrs"
   >

package/dist/runtime/components/data/table/TableCaption.vue

@@ -9,8 +9,8 @@ const props = defineProps<NTableCaptionProps>()
   <caption
     :class="cn(
       'table-caption',
-      props.class,
       props?.una?.tableCaption,
+      props.class,
     )"
     v-bind="$attrs"
   >

package/dist/runtime/components/data/table/TableCell.vue

@@ -10,10 +10,10 @@ const props = defineProps<NTableCellProps>()
     :class="
       cn(
         'table-cell',
+        props?.una?.tableCell,
+        props.class,
         { 'table-cell-pinned': dataPinned },
         dataPinned === 'left' ? 'table-cell-pinned-left' : 'table-cell-pinned-right',
-        props.class,
-        props?.una?.tableCell,
       )
     "
     v-bind="$attrs"

package/dist/runtime/components/data/table/TableEmpty.vue

@@ -20,6 +20,7 @@ const delegatedProps = computed(() => {
   <TableRow
     :class="cn(
       'table-empty-row',
+      props.una?.tableRow,
     )"
     v-bind="delegatedProps._tableRow"
   >
@@ -27,6 +28,7 @@ const delegatedProps = computed(() => {
       :class="
         cn(
           'table-empty-cell',
+          props.una?.tableCell,
         )
       "
       :colspan="props.colspan"
@@ -35,6 +37,7 @@ const delegatedProps = computed(() => {
       <div
         :class="cn(
           'table-empty',
+          props.una?.tableEmpty,
           props.class,
         )"
         v-bind="omitProps(delegatedProps, ['_tableRow', '_tableCell', 'colspan'])"

package/dist/runtime/components/data/table/TableFooter.vue

@@ -9,8 +9,8 @@ const props = defineProps<NTableFooterProps>()
   <tfoot
     :class="cn(
       'table-footer',
-      props.class,
       props.una?.tableFooter,
+      props.class,
     )"
   >
     <slot />

package/dist/runtime/components/data/table/TableHead.vue

@@ -9,6 +9,7 @@ const props = defineProps<NTableHeadProps>()
   <th
     :class="cn(
       'table-head',
+      props.una?.tableHead,
       props.class,
       { 'table-head-pinned': props.dataPinned },
       props.dataPinned === 'left' ? 'table-head-pinned-left' : 'table-head-pinned-right',

package/dist/runtime/components/data/table/TableHeader.vue

@@ -9,8 +9,8 @@ const props = defineProps<NTableHeaderProps>()
   <thead
     :class="cn(
       'table-header',
-      props.class,
       props?.una?.tableHeader,
+      props.class,
     )"
     v-bind="$attrs"
   >

package/dist/runtime/components/data/table/TableLoading.vue

@@ -19,6 +19,7 @@ const delegatedProps = computed(() => {
   <TableRow
     :class="cn(
       'table-loading-row',
+      props.una?.tableRow,
     )"
     data-loading="true"
     v-bind="delegatedProps._tableRow"
@@ -27,6 +28,7 @@ const delegatedProps = computed(() => {
       :class="
         cn(
           'table-loading-cell',
+          props.una?.tableCell,
         )
       "
       :colspan="0"
@@ -34,7 +36,10 @@ const delegatedProps = computed(() => {
     >
       <div
         v-if="enabled"
-        class="table-loading"
+        :class="cn(
+          'table-loading',
+          props.una?.tableLoading,
+        )"
       >
         <slot>
           <Progress

package/dist/runtime/components/data/table/TableRoot.vue

@@ -12,8 +12,8 @@ const props = defineProps<NTableRootProps>()
     <table
       :class="cn(
         'table-root',
-        props.class,
         props.una?.tableRoot,
+        props.class,
       )"
     >
       <slot />

package/dist/runtime/components/data/table/TableRow.vue

@@ -9,8 +9,8 @@ const props = defineProps<NTableRowProps>()
   <tr
     :class="cn(
       'table-row',
-      props.class,
       props.una?.tableRow,
+      props.class,
     )"
     v-bind="$attrs"
   >

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

@@ -122,8 +122,8 @@ const isBaseVariant = computed(() => props.btn?.includes('~'))
               { 'accordion-button-padding': !unstyle },
               una?.accordionButton,
             ]"
-            accordion="button"
             :una="{
+              btn: 'h-auto accordion-button',
               btnLabel: 'accordion-label',
             }"
           >

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

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<NAvatarGroupProps>(), {
 <template>
   <div
     avatar-group
-    v-bind="$attrs"
+    v-bind="{ ...$attrs, size }"
     :class="una?.avatarGroup"
   >
     <NAvatarGroupDefaultSlot

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

@@ -1,117 +1,74 @@
 <script setup lang="ts">
 import type { NSwitchProps } from '../../types'
-import { Switch } from '@headlessui/vue'
-import { useVModel } from '@vueuse/core'
-import { computed } from 'vue'
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '../../utils'
 import NIcon from '../elements/Icon.vue'
 
-defineOptions({
-  inheritAttrs: false,
+const props = withDefaults(defineProps<NSwitchProps>(), {
+  size: 'md',
+  switchChecked: 'primary',
+  switchUnchecked: 'gray',
 })
 
-const props = defineProps<NSwitchProps>()
+const emit = defineEmits<SwitchRootEmits>()
 
-const emit = defineEmits<{ (...args: any): void }>()
-
-const on = useVModel(props, 'modelValue', emit, { passive: true })
-
-const _switch = computed(() => props.switch)
-
-const outsetClassVariants = computed(() => {
-  const switchWrapper = {
-    false: 'switch-inset',
-    true: 'switch-outset',
-  }
-
-  const switchTrack = {
-    false: 'switch-track-inset',
-    true: 'switch-track-outset',
-  }
-
-  const switchThumb = {
-    false: 'left-0.125em',
-    true: 'left-0 border-base border',
-  }
-
-  return {
-    switchWrapper: switchWrapper[!props.outset ? 'false' : 'true'],
-    switchTrack: switchTrack[!props.outset ? 'false' : 'true'],
-    switchThumb: switchThumb[!props.outset ? 'false' : 'true'],
-  }
-})
-
-const onClassVariants = computed(() => {
-  const switchTrack = {
-    true: `${props.una?.switchTrackOn ?? ''} switch-track-on`,
-    false: `${props.una?.switchTrackOff ?? ''} switch-track-off`,
-  }
-
-  const switchThumb = {
-    true: `${props.una?.switchThumbOn ?? ''} switch-thumb-on`,
-    false: `${props.una?.switchThumbOff ?? ''} switch-thumb-off`,
-  }
-
-  const switchIcon = {
-    true: `${props.onIcon ?? ''} switch-icon-on`,
-    false: `${props.offIcon ?? ''} switch-icon-off`,
-  }
-
-  return {
-    switchTrack: switchTrack[on.value ? 'true' : 'false'],
-    switchThumb: switchThumb[on.value ? 'true' : 'false'],
-    switchIcon: switchIcon[on.value ? 'true' : 'false'],
-  }
-})
+const forwarded = useForwardPropsEmits(props, emit)
 </script>
 
 <template>
-  <Switch
-    v-model="on"
-    class="switch"
-    :class="[
-      { 'switch-disabled': disabled || loading },
-      outsetClassVariants?.switchWrapper,
-    ]"
-    :switch="_switch"
-    v-bind="$attrs"
-    :disabled="disabled"
+  <SwitchRoot
+    v-slot="{ checked }"
+    v-bind="forwarded"
+    :class="cn(
+      'peer switch',
+      una?.switch,
+      checked
+        ? una?.switchChecked
+        : una?.switchUnchecked,
+    )"
+    :disabled="disabled || loading"
+    :switch-unchecked
+    :switch-checked
+    :size
   >
-    <span class="sr-only">Track</span>
-    <span
-      aria-hidden="true"
-      switch="track"
-      :class="[
-        una?.switchTrack,
-        onClassVariants?.switchTrack,
-        outsetClassVariants?.switchTrack,
-      ]"
-    />
-
-    <span class="sr-only">Thumb</span>
-    <span
-      aria-hidden="true"
-      switch="thumb"
-      :class="[
+    <SwitchThumb
+      :class="cn(
+        'switch-thumb',
         una?.switchThumb,
-        onClassVariants?.switchThumb,
-        outsetClassVariants?.switchThumb,
-      ]"
+        checked
+          ? 'switch-thumb-checked'
+          : 'switch-thumb-unchecked',
+        checked
+          ? una?.switchThumbChecked
+          : una?.switchThumbUnchecked,
+      )"
     >
-      <span class="sr-only">Icon</span>
-      <slot v-if="!loading" name="icon" :on="on">
+      <slot v-if="!loading" name="icon" :checked>
         <NIcon
-          switch="icon-base"
-          :name="onClassVariants?.switchIcon"
-          :class="una?.switchIconBase"
+          :name="(checked ? checkedIcon : uncheckedIcon) || icon"
+          :class="cn(
+            'switch-icon',
+            una?.switchIcon,
+            checked
+              ? ['switch-icon-checked', una?.switchIconChecked]
+              : ['switch-icon-unchecked', una?.switchIconUnchecked],
+          )"
         />
       </slot>
-      <slot v-else name="loading-icon" :on="on">
+      <slot v-else name="loading-icon" :checked>
         <NIcon
-          switch="loading"
-          :class="una?.switchLoading"
-          :name="una?.switchloadingicon ?? 'switch-loading-icon'"
+          :class="cn(
+            'switch-icon switch-loading-icon',
+            una?.switchLoading,
+          )"
+          :name="una?.switchLoadingIconName || 'switch-loading-icon-name'"
         />
       </slot>
-    </span>
-  </Switch>
+    </SwitchThumb>
+  </SwitchRoot>
 </template>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbEllipsis.vue

@@ -5,6 +5,7 @@ import { cn } from '../../../utils'
 const props = withDefaults(defineProps<NBreadcrumbEllipsisProps>(), {
   icon: 'breadcrumb-ellipsis-icon',
   size: 'sm',
+  square: 9,
 })
 </script>
 

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

@@ -1,69 +1,77 @@
-export interface NSwitchProps {
+import type { SwitchRootProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+export interface NSwitchProps extends SwitchRootProps {
     /**
-     * Value of the switch.
+     * Add a loading indicator to the switch.
+     * This will also disable the switch.
      *
-     * @default null
+     * @default false
      */
-    modelValue?: boolean;
+    loading?: boolean;
     /**
-     * Disable the switch from being clicked.
+     * Allows you to display an icon. Equivalent of setting both `onIcon` and `offIcon`.
      *
-     * @default false
+     * @example
+     * icon="i-heroicons-question-20-solid"
      */
-    disabled?: boolean;
+    icon?: HTMLAttributes['class'];
     /**
-     * Add a loading indicator to the switch.
-     * This will also disable the switch.
+     * Allows you to display an icon when the switch is on.
+     * Accepts icon name and utility classes
      *
-     * @default false
+     * @example
+     * on-icon="i-heroicons-check-20-solid text-white"
      */
-    loading?: boolean;
+    checkedIcon?: HTMLAttributes['class'];
     /**
-     * Display the slider thumb outside of the track.
+     * Allows you to display an icon when the switch is off.
+     * Accepts icon name and utility classes
      *
-     * @default false
+     * @example
+     * off-icon="i-heroicons-x-mark-20-solid text-white"
      */
-    outset?: boolean;
+    uncheckedIcon?: HTMLAttributes['class'];
     /**
-     * Allows you to add `UnaUI` switch preset properties,
-     * Think of it as a shortcut for adding options or variants to the preset if available.
+     * Allows you to change the size of the input.
+     *
+     * @default md
      *
      * @example
-     * switch="xl green focus"
+     * size="sm" | size="2cm" | size="2rem" | size="2px"
      */
-    switch?: string;
+    size?: HTMLAttributes['class'];
     /**
-     * Allows you to display an icon when the switch is on.
-     * Accepts icon name and utility classes
+     * Allows you to add `UnaUI` switch preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
      *
      * @example
-     * icon="i-heroicons-check-20-solid text-white"
+     * switch-checked="green"
      */
-    onIcon?: string;
+    switchChecked?: HTMLAttributes['class'];
     /**
-     * Allows you to display an icon when the switch is off.
-     * Accepts icon name and utility classes
+     * Allows you to add `UnaUI` switch preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
      *
      * @example
-     * icon="i-heroicons-x-mark-20-solid text-white"
+     * switch-unchecked="gray"
      */
-    offIcon?: string;
+    switchUnchecked?: HTMLAttributes['class'];
     /**
      * `UnaUI` preset configuration
      *
      * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/switch.ts
      */
     una?: {
-        switchThumb?: string;
-        switchThumbOn?: string;
-        switchThumbOff?: string;
-        switchTrack?: string;
-        switchTrackOn?: string;
-        switchTrackOff?: string;
-        switchIconBase?: string;
-        switchIconOn?: string;
-        switchIconOff?: string;
-        switchLoading?: string;
-        switchloadingicon?: string;
+        switch?: HTMLAttributes['class'];
+        switchChecked?: HTMLAttributes['class'];
+        switchUnchecked?: HTMLAttributes['class'];
+        switchThumb?: HTMLAttributes['class'];
+        switchThumbChecked?: HTMLAttributes['class'];
+        switchThumbUnchecked?: HTMLAttributes['class'];
+        switchIcon?: HTMLAttributes['class'];
+        switchIconChecked?: HTMLAttributes['class'];
+        switchIconUnchecked?: HTMLAttributes['class'];
+        switchLoading?: HTMLAttributes['class'];
+        switchLoadingIconName?: HTMLAttributes['class'];
     };
 }

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

@@ -137,7 +137,7 @@ export interface NTableEmptyProps {
     colspan?: number;
     _tableCell?: NTableCellProps;
     _tableRow?: NTableRowProps;
-    una?: Pick<NTableUnaProps, 'tableEmpty'>;
+    una?: Pick<NTableUnaProps, 'tableEmpty' | 'tableRow' | 'tableCell'>;
 }
 export interface NTableLoadingProps {
     enabled?: boolean;
@@ -145,7 +145,7 @@ export interface NTableLoadingProps {
     colspan?: number;
     _tableCell?: NTableCellProps;
     _tableRow?: NTableRowProps;
-    una?: Pick<NTableUnaProps, 'tableLoading'>;
+    una?: Pick<NTableUnaProps, 'tableLoading' | 'tableRow' | 'tableCell'>;
 }
 export interface NTableCaptionProps {
     class?: HTMLAttributes['class'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.23.0-beta.1",
+  "version": "0.25.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -26,35 +26,35 @@
     "dist"
   ],
   "dependencies": {
-    "@headlessui/vue": "^1.7.22",
+    "@headlessui/vue": "^1.7.23",
     "@iconify-json/heroicons": "^1.2.0",
-    "@iconify-json/lucide": "^1.2.2",
+    "@iconify-json/lucide": "^1.2.6",
     "@iconify-json/radix-icons": "^1.2.0",
-    "@iconify-json/tabler": "^1.2.0",
-    "@nuxt/kit": "^3.13.1",
-    "@nuxtjs/color-mode": "^3.4.4",
+    "@iconify-json/tabler": "^1.2.4",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxtjs/color-mode": "^3.5.1",
     "@tanstack/vue-table": "^8.20.5",
-    "@unocss/core": "^0.62.4",
-    "@unocss/nuxt": "^0.62.4",
-    "@unocss/preset-attributify": "^0.62.4",
-    "@unocss/preset-icons": "^0.62.4",
-    "@vueuse/core": "^10.11.1",
-    "@vueuse/integrations": "^10.11.1",
-    "@vueuse/nuxt": "^10.11.1",
+    "@unocss/core": "^0.63.1",
+    "@unocss/nuxt": "^0.63.1",
+    "@unocss/preset-attributify": "^0.63.1",
+    "@unocss/preset-icons": "^0.63.1",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/integrations": "^11.1.0",
+    "@vueuse/nuxt": "^11.1.0",
     "clsx": "^2.1.1",
-    "ohash": "^1.1.3",
-    "radix-vue": "^1.9.5",
+    "ohash": "^1.1.4",
+    "radix-vue": "^1.9.6",
     "tailwind-merge": "^2.5.2",
-    "typescript": "^5.5.4",
-    "unocss": "^0.62.4",
+    "typescript": "^5.6.2",
+    "unocss": "^0.63.1",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/extractor-vue-script": "^0.23.0-beta.1",
-    "@una-ui/preset": "^0.23.0-beta.1"
+    "@una-ui/extractor-vue-script": "^0.25.0-beta.1",
+    "@una-ui/preset": "^0.25.0-beta.1"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/schema": "^3.13.1",
-    "nuxt": "^3.13.1"
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.13.2",
+    "nuxt": "^3.13.2"
   },
   "publishConfig": {
     "access": "public"