@una-ui/nuxt 0.26.0-beta.2 → 0.27.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.26.0-beta.2",
+  "version": "0.27.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.26.0-beta.2";
+const version = "0.27.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {

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

@@ -10,7 +10,6 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import type { Ref } from 'vue'
 import type { NTableProps } from '../../../types'
 
 import {
@@ -22,10 +21,10 @@ import {
   getSortedRowModel,
   useVueTable,
 } from '@tanstack/vue-table'
-import { computed, h } from 'vue'
 
-import { cn, pickProps, valueUpdater } from '../../../utils'
+import { computed, h } from 'vue'
 
+import { cn, valueUpdater } from '../../../utils'
 import Button from '../../elements/Button.vue'
 import Checkbox from '../../forms/Checkbox.vue'
 import Input from '../../forms/Input.vue'
@@ -105,13 +104,14 @@ const columnsWithMisc = computed(() => {
           cell: ({ row }: any) => h(Button, {
             size: 'xs',
             icon: true,
+            square: true,
+            btn: 'ghost-gray',
             label: 'i-radix-icons-chevron-down',
             onClick: () => {
               row.toggleExpanded()
               emit('expand', row)
             },
             una: {
-              btnDefaultVariant: 'btn-ghost-gray btn-square',
               btnIconLabel: cn(
                 'transform transition-transform duration-200',
                 row.getIsExpanded() ? '-rotate-180' : 'rotate-0',
@@ -128,64 +128,62 @@ const columnsWithMisc = computed(() => {
   return data
 })
 
-const table = computed(() => {
-  return useVueTable({
-    get data() {
-      return props.data ?? []
-    },
-    get columns() {
-      return columnsWithMisc.value ?? []
-    },
-    state: {
-      get sorting() { return sorting.value },
-      get columnFilters() { return columnFilters.value },
-      get globalFilter() { return globalFilter.value },
-      get rowSelection() { return rowSelection.value },
-      get columnVisibility() { return columnVisibility.value },
-      get pagination() { return pagination.value },
-      get columnOrder() { return columnOrder.value },
-      get columnPinning() { return columnPinning.value },
-      get expanded() { return expanded.value },
-      get grouping() { return grouping.value },
-    },
+const table = useVueTable({
+  get data() {
+    return props.data ?? []
+  },
+  get columns() {
+    return columnsWithMisc.value ?? []
+  },
+  state: {
+    get sorting() { return sorting.value },
+    get columnFilters() { return columnFilters.value },
+    get globalFilter() { return globalFilter.value },
+    get rowSelection() { return rowSelection.value },
+    get columnVisibility() { return columnVisibility.value },
+    get pagination() { return pagination.value },
+    get columnOrder() { return columnOrder.value },
+    get columnPinning() { return columnPinning.value },
+    get expanded() { return expanded.value },
+    get grouping() { return grouping.value },
+  },
 
-    enableMultiRowSelection: props.enableMultiRowSelection,
-    enableSubRowSelection: props.enableSubRowSelection,
-    autoResetAll: props.autoResetAll,
-    enableRowSelection: props.enableRowSelection,
-    enableColumnFilters: props.enableColumnFilters,
-    manualPagination: props.manualPagination,
-    manualSorting: props.manualSorting,
-    pageCount: props.pageCount,
-    rowCount: props.rowCount,
-    autoResetPageIndex: props.autoResetPageIndex,
-    enableSorting: props.enableSorting,
-    enableSortingRemoval: props.enableSortingRemoval,
-    enableMultiSort: props.enableMultiSort,
-    enableMultiRemove: props.enableMultiRemove,
-    maxMultiSortColCount: props.maxMultiSortColCount,
-    sortingFns: props.sortingFns,
-    isMultiSortEvent: props.isMultiSortEvent,
+  enableMultiRowSelection: props.enableMultiRowSelection,
+  enableSubRowSelection: props.enableSubRowSelection,
+  autoResetAll: props.autoResetAll,
+  enableRowSelection: props.enableRowSelection,
+  enableColumnFilters: props.enableColumnFilters,
+  manualPagination: props.manualPagination,
+  manualSorting: props.manualSorting,
+  pageCount: props.pageCount,
+  rowCount: props.rowCount,
+  autoResetPageIndex: props.autoResetPageIndex,
+  enableSorting: props.enableSorting,
+  enableSortingRemoval: props.enableSortingRemoval,
+  enableMultiSort: props.enableMultiSort,
+  enableMultiRemove: props.enableMultiRemove,
+  maxMultiSortColCount: props.maxMultiSortColCount,
+  sortingFns: props.sortingFns,
+  isMultiSortEvent: props.isMultiSortEvent,
 
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getRowId: (row: any) => props.rowId ? row[props.rowId] : row.id,
-    getExpandedRowModel: getExpandedRowModel(),
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getRowId: (row: any) => props.rowId ? row[props.rowId] : row.id,
+  getExpandedRowModel: getExpandedRowModel(),
 
-    onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
-    onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
-    onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
-    onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
-    onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilter),
-    onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, pagination),
-    onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrder),
-    onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinning),
-    onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
-    onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, grouping),
-  })
-}) as Ref<ReturnType<typeof useVueTable>>
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
+  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilter),
+  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, pagination),
+  onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrder),
+  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinning),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
+  onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, grouping),
+})
 
 function getHeaderColumnFiltersCount(headers: Header<unknown, unknown>[]): number {
   let count = 0
@@ -198,24 +196,25 @@ function getHeaderColumnFiltersCount(headers: Header<unknown, unknown>[]): numbe
 }
 
 defineExpose({
-  ...table.value,
+  ...table,
 })
 </script>
 
 <template>
   <TableRoot
-    v-bind="pickProps(props, ['class', 'una'])"
+    :class="props.class"
+    :una
   >
     <!-- header -->
     <TableHeader
-      :una="una"
+      :una
       v-bind="props._tableHeader"
     >
       <slot name="header" :table="table">
         <TableRow
           v-for="headerGroup in table.getHeaderGroups()"
           :key="headerGroup.id"
-          :una="una"
+          :una
           v-bind="props._tableRow"
         >
           <!-- headers -->
@@ -224,14 +223,14 @@ defineExpose({
             :key="header.id"
             :colspan="header.colSpan"
             :data-pinned="header.column.getIsPinned()"
-            :una="una"
+            :una
             v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
           >
             <Button
               v-if="header.column.columnDef.enableSorting || (header.column.columnDef.enableSorting !== false && enableSorting)"
               btn="ghost-gray"
               size="sm"
-              class="font-normal -ml-0.85em"
+              class="font-normal -ml-1em"
               :una="{
                 btnTrailing: 'text-sm',
               }"
@@ -254,22 +253,18 @@ defineExpose({
                 />
               </slot>
             </Button>
-            <component
-              :is="header.id === 'selection' ? 'div' : 'span'"
+
+            <slot
               v-else
-              class="text-sm text-muted"
+              :name="`${header.id}-header`"
+              :column="header.column"
             >
-              <slot
-                :name="`${header.id}-header`"
-                :column="header.column"
-              >
-                <FlexRender
-                  v-if="!header.isPlaceholder"
-                  :render="header.column.columnDef.header"
-                  :props="header.getContext()"
-                />
-              </slot>
-            </component>
+              <FlexRender
+                v-if="!header.isPlaceholder"
+                :render="header.column.columnDef.header"
+                :props="header.getContext()"
+              />
+            </slot>
           </TableHead>
         </TableRow>
 
@@ -281,13 +276,13 @@ defineExpose({
           <TableRow
             v-if="getHeaderColumnFiltersCount(headerGroup.headers) > 0 || enableColumnFilters"
             data-filter="true"
-            :una="una"
+            :una
             v-bind="props._tableRow"
           >
             <TableHead
               v-for="header in headerGroup.headers"
               :key="header.id"
-              :una="una"
+              :una
               :colspan="header.colSpan"
               :data-pinned="header.column.getIsPinned()"
               v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
@@ -298,7 +293,7 @@ defineExpose({
                 :column="header.column"
               >
                 <Input
-                  class="w-auto"
+                  class="w-auto text-sm text-base"
                   :model-value="header.column.getFilterValue() as string"
                   :placeholder="header.column.columnDef.header"
                   @update:model-value="header.column.setFilterValue($event)"
@@ -311,7 +306,7 @@ defineExpose({
 
       <TableLoading
         :enabled="props.loading"
-        :una="una"
+        :una
         v-bind="props._tableLoading"
       >
         <slot name="loading" />
@@ -320,7 +315,7 @@ defineExpose({
 
     <!-- body -->
     <TableBody
-      :una="una"
+      :una
       v-bind="props._tableBody"
     >
       <slot name="body" :table="table">
@@ -331,7 +326,7 @@ defineExpose({
           >
             <TableRow
               :data-state="row.getIsSelected() && 'selected'"
-              :una="una"
+              :una
               v-bind="props._tableRow"
             >
               <slot
@@ -343,7 +338,7 @@ defineExpose({
                   v-for="cell in row.getVisibleCells()"
                   :key="cell.id"
                   :data-pinned="cell.column.getIsPinned()"
-                  :una="una"
+                  :una
                   v-bind="{ ...props._tableCell, ...cell.column.columnDef.meta }"
                 >
                   <slot
@@ -362,12 +357,12 @@ defineExpose({
             <!-- expanded -->
             <TableRow
               v-if="row.getIsExpanded() && $slots.expanded"
-              :una="una"
+              :una
               v-bind="props._tableRow"
             >
               <TableCell
                 :colspan="row.getAllCells().length"
-                :una="una"
+                :una
                 v-bind="props._tableCell"
               >
                 <slot name="expanded" :row="row" />
@@ -379,7 +374,7 @@ defineExpose({
         <TableEmpty
           v-else
           :colspan="table.getAllLeafColumns().length"
-          :una="una"
+          :una
           v-bind="props._tableEmpty"
         >
           <slot name="empty" />
@@ -390,7 +385,7 @@ defineExpose({
     <!-- footer -->
     <TableFooter
       v-if="table.getFooterGroups().length > 0"
-      :una="una"
+      :una
       v-bind="props._tableFooter"
     >
       <slot name="footer" :table="table">
@@ -400,7 +395,7 @@ defineExpose({
         >
           <TableRow
             v-if="footerGroup.headers.length > 0"
-            :una="una"
+            :una
             v-bind="props._tableRow"
           >
             <template
@@ -410,7 +405,7 @@ defineExpose({
               <TableHead
                 v-if="header.column.columnDef.footer"
                 :colspan="header.colSpan"
-                :una="una"
+                :una
                 v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
               >
                 <slot :name="`${header.id}-footer`" :column="header.column">

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

@@ -6,6 +6,7 @@ import Progress from '../../elements/Progress.vue'
 import TableRow from './TableRow.vue'
 
 const props = withDefaults(defineProps<NTableLoadingProps>(), {
+  size: '2.5px',
 })
 
 const delegatedProps = computed(() => {
@@ -43,7 +44,12 @@ const delegatedProps = computed(() => {
       >
         <slot>
           <Progress
-            size="3px"
+            :size
+            v-bind="props._tableProgress"
+            :class="cn(
+              props._tableProgress?.class,
+              'bg-transparent',
+            )"
           />
         </slot>
       </div>

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

@@ -2,6 +2,10 @@
 import type { NTableRootProps } from '../../../types'
 import { cn } from '../../../utils'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<NTableRootProps>()
 </script>
 
@@ -10,6 +14,7 @@ const props = defineProps<NTableRootProps>()
     :class="cn('table-root-wrapper', props.una?.tableRootWrapper)"
   >
     <table
+      v-bind="$attrs"
       :class="cn(
         'table-root',
         props.una?.tableRoot,

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

@@ -23,6 +23,8 @@ const mergeVariants = computed(() => {
     'pagination-selected': props.paginationSelected,
     'pagination-unselected': props.paginationUnselected,
     'dropdown-menu': props.dropdownMenu,
+    'toggle-on': props.toggleOn,
+    'toggle-off': props.toggleOff,
   }
 })
 

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

@@ -10,6 +10,7 @@ import { cn } from '../../utils'
 const props = withDefaults(
   defineProps<NProgressProps>(),
   {
+    progress: 'primary',
   },
 )
 
@@ -30,6 +31,7 @@ const delegatedProps = computed(() => {
         props.class,
       )
     "
+    :progress
   >
     <slot>
       <ProgressIndicator

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { NToggleProps } from '../../types'
+import { Toggle, type ToggleEmits, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+import Button from './Button.vue'
+
+const props = withDefaults(defineProps<NToggleProps>(), {
+  icon: true,
+  square: true,
+  toggleOff: '~',
+  toggleOn: '~',
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, size, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    :class="cn(
+      'toggle',
+      props.class,
+    )"
+    v-bind="forwarded"
+    :toggle-off
+    :toggle-on
+    :as="Button"
+    :una="{
+      btnLoading: cn(
+        'text-1em',
+        props.una?.btnLoading,
+      ),
+      btnLeading: cn(
+        'text-1em',
+        props.una?.btnLeading,
+      ),
+      btnTrailing: cn(
+        'text-1em',
+        props.una?.btnTrailing,
+      ),
+      btnIconLabel: cn(
+        'text-1em',
+        props.una?.btnIconLabel,
+      ),
+      ...props.una,
+    }"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </Toggle>
+</template>

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

@@ -9,6 +9,8 @@ interface BaseExtensionProps {
     paginationSelected?: string;
     paginationUnselected?: string;
     dropdownMenu?: string;
+    toggleOn?: string;
+    toggleOff?: string;
 }
 export interface NButtonProps extends BaseExtensionProps {
     /**

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

@@ -29,6 +29,7 @@ export * from './slider.js';
 export * from './switch.js';
 export * from './table.js';
 export * from './tabs.js';
+export * from './toggle.js';
 export * from './tooltip.js';
 export interface Colors {
     [key: string]: string;

package/dist/runtime/types/index.js

@@ -29,4 +29,5 @@ export * from "./slider.js";
 export * from "./switch.js";
 export * from "./table.js";
 export * from "./tabs.js";
+export * from "./toggle.js";
 export * from "./tooltip.js";

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

@@ -1,5 +1,6 @@
 import type { ColumnDef, GroupColumnDef } from '@tanstack/vue-table';
 import type { HTMLAttributes } from 'vue';
+import type { NProgressProps } from './progress.js';
 export interface NTableProps<TData, TValue> extends NTableRootProps {
     /**
      * @see https://tanstack.com/table/latest/docs/guide/data
@@ -140,11 +141,13 @@ export interface NTableEmptyProps {
     una?: Pick<NTableUnaProps, 'tableEmpty' | 'tableRow' | 'tableCell'>;
 }
 export interface NTableLoadingProps {
+    size?: HTMLAttributes['class'];
     enabled?: boolean;
     class?: HTMLAttributes['class'];
     colspan?: number;
     _tableCell?: NTableCellProps;
     _tableRow?: NTableRowProps;
+    _tableProgress?: NProgressProps;
     una?: Pick<NTableUnaProps, 'tableLoading' | 'tableRow' | 'tableCell'>;
 }
 export interface NTableCaptionProps {

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

@@ -0,0 +1,22 @@
+import type { ToggleProps } from 'radix-vue';
+import type { NButtonProps } from './button.js';
+export interface NToggleProps extends ToggleProps, NButtonProps {
+    /**
+     * Allows you to add `UnaUI` badge preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/toggle.ts
+     * @example
+     * toggle-on="soft-accent"
+     */
+    toggleOn?: string;
+    /**
+     * Allows you to add `UnaUI` badge preset properties,
+     * Think of it as a shortcut for adding options or variants to the preset if available.
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/toggle.ts
+     * @example
+     * toggle-off="ghost-gray"
+     */
+    toggleOff?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.26.0-beta.2",
+  "version": "0.27.0-beta.1",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -28,28 +28,28 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@iconify-json/heroicons": "^1.2.0",
-    "@iconify-json/lucide": "^1.2.6",
+    "@iconify-json/lucide": "^1.2.7",
     "@iconify-json/radix-icons": "^1.2.0",
     "@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.63.1",
-    "@unocss/nuxt": "^0.63.1",
-    "@unocss/preset-attributify": "^0.63.1",
-    "@unocss/preset-icons": "^0.63.1",
+    "@unocss/core": "^0.63.3",
+    "@unocss/nuxt": "^0.63.3",
+    "@unocss/preset-attributify": "^0.63.3",
+    "@unocss/preset-icons": "^0.63.3",
     "@vueuse/core": "^11.1.0",
     "@vueuse/integrations": "^11.1.0",
     "@vueuse/nuxt": "^11.1.0",
     "clsx": "^2.1.1",
     "ohash": "^1.1.4",
     "radix-vue": "^1.9.6",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.3",
     "typescript": "^5.6.2",
-    "unocss": "^0.63.1",
+    "unocss": "^0.63.3",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/extractor-vue-script": "^0.26.0-beta.2",
-    "@una-ui/preset": "^0.26.0-beta.2"
+    "@una-ui/extractor-vue-script": "^0.27.0-beta.1",
+    "@una-ui/preset": "^0.27.0-beta.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",