@una-ui/nuxt 0.11.0-beta.1 → 0.12.0-beta.2

package/README.md

@@ -14,6 +14,14 @@
 
 Visit https://www.unaui.com for full documentation.
 
+## 🌠 Star History
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=una-ui/una-ui&type=Date&theme=dark" />
+  <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=una-ui/una-ui&type=Date" />
+  <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=una-ui/una-ui&type=Date" />
+</picture>
+
 ## 🌻 Sponsors
 
 <p align="center">

package/dist/module.json

@@ -1,12 +1,12 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.11.0-beta.1",
+  "version": "0.12.0-beta.2",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
   "builder": {
-    "@nuxt/module-builder": "0.8.1",
+    "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.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.11.0-beta.1";
+const version = "0.12.0-beta.2";
 
 const module = defineNuxtModule({
   meta: {
@@ -76,6 +76,12 @@ const module = defineNuxtModule({
       global: options.global,
       watch: nuxt.options.dev
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/data", "table"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
     if (options.themeable) {
       addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
       addPlugin(resolve(runtimeDir, "plugins", "theme.server"));

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

@@ -0,0 +1,430 @@
+<script setup lang="ts" generic="TData, TValue">
+import type { Ref } from 'vue'
+import { computed, h } from 'vue'
+import type {
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ExpandedState,
+  GroupingState,
+  Header,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+} from '@tanstack/vue-table'
+
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+
+import { cn, pickProps, valueUpdater } from '../../../utils'
+
+import Checkbox from '../../forms/Checkbox.vue'
+import Button from '../../elements/Button.vue'
+import Input from '../../forms/Input.vue'
+import type { NTableProps } from '../../../types'
+import TableBody from './TableBody.vue'
+import TableCell from './TableCell.vue'
+import TableEmpty from './TableEmpty.vue'
+import TableFooter from './TableFooter.vue'
+import TableHead from './TableHead.vue'
+import TableHeader from './TableHeader.vue'
+import TableRoot from './TableRoot.vue'
+import TableRow from './TableRow.vue'
+import TableLoading from './TableLoading.vue'
+
+const props = withDefaults(defineProps <NTableProps<TData, TValue>>(), {
+  enableMultiRowSelection: true,
+})
+
+const emit = defineEmits(['select', 'selectAll', 'expand'])
+
+const slots = defineSlots()
+
+const rowSelection = defineModel<Record<string, boolean>>('modelValue')
+const sorting = defineModel<SortingState>('sorting')
+const columnVisibility = defineModel<VisibilityState>('columnVisibility')
+const columnFilters = defineModel<ColumnFiltersState>('columnFilters')
+const globalFilter = defineModel<string>('globalFilter')
+const columnOrder = defineModel<ColumnOrderState>('columnOrder')
+const columnPinning = defineModel<ColumnPinningState>('columnPinning')
+const expanded = defineModel<ExpandedState>('expanded')
+const grouping = defineModel<GroupingState>('grouping')
+const pagination = defineModel<PaginationState>('pagination', {
+  default: () => ({
+    pageIndex: 0,
+    pageSize: 10,
+  }),
+})
+
+const columnsWithMisc = computed(() => {
+  let data = []
+
+  // add selection column
+  data = props.enableRowSelection
+    ? [
+        {
+          accessorKey: 'selection',
+          header: props.enableMultiRowSelection
+            ? ({ table }: any) => h(Checkbox, {
+                'modelValue': table.getIsAllPageRowsSelected() ?? false,
+                'onUpdate:modelValue': (value: boolean) => {
+                  table.toggleAllPageRowsSelected(!!value)
+                  emit('selectAll', table.getRowModel().rows)
+                },
+                'areaLabel': 'Select all rows',
+              })
+            : '',
+          cell: ({ row }: any) => h(Checkbox, {
+            'modelValue': row.getIsSelected() ?? false,
+            'onUpdate:modelValue': (value: boolean) => {
+              row.toggleSelected(!!value)
+              emit('select', row)
+            },
+            'areaLabel': 'Select row',
+          }),
+          enableSorting: false,
+          enableHiding: false,
+        },
+        ...props.columns,
+      ]
+    : props.columns
+
+  // add expanded column
+  data = slots.expanded
+    ? [
+        {
+          accessorKey: 'expanded',
+          header: '',
+          cell: ({ row }: any) => h(Button, {
+            size: 'xs',
+            icon: true,
+            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',
+              ),
+            },
+          }),
+          enableSorting: false,
+          enableHiding: false,
+        },
+        ...data,
+      ]
+    : data
+
+  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 },
+    },
+
+    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(),
+
+    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>>
+
+function getHeaderColumnFiltersCount(headers: Header<unknown, unknown>[]) {
+  let count = 0
+  headers.forEach((header) => {
+    if (header.column.columnDef.enableColumnFilter)
+      count++
+  })
+
+  return count
+}
+
+defineExpose({
+  ...table.value,
+})
+</script>
+
+<template>
+  <TableRoot
+    v-bind="pickProps(props, ['class', 'una'])"
+  >
+    <!-- header -->
+    <TableHeader
+      :una="una"
+      v-bind="props._tableHeader"
+    >
+      <slot name="header" :table="table">
+        <TableRow
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+          :una="una"
+          v-bind="props._tableRow"
+        >
+          <!-- headers -->
+          <TableHead
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :colspan="header.colSpan"
+            :data-pinned="header.column.getIsPinned()"
+            :una="una"
+            v-bind="props._tableHead"
+          >
+            <Button
+              v-if="header.column.columnDef.enableSorting || (header.column.columnDef.enableSorting !== false && enableSorting)"
+              btn="ghost-gray"
+              size="sm"
+              class="font-normal -ml-0.85em"
+              :una="{
+                btnTrailing: 'text-sm',
+              }"
+              :trailing="header.column.getIsSorted() === 'asc'
+                ? 'i-lucide-arrow-up-wide-narrow' : header.column.getIsSorted() === 'desc'
+                  ? 'i-lucide-arrow-down-narrow-wide' : 'i-lucide-arrow-up-down'"
+              @click="header.column.toggleSorting(
+                header.column.getIsSorted() === 'asc' ? undefined : header.column.getIsSorted() !== 'desc',
+                enableMultiSort,
+              )"
+            >
+              <slot
+                :name="`${header.id}-header`"
+                :column="header.column"
+              >
+                <FlexRender
+                  v-if="!header.isPlaceholder"
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
+                />
+              </slot>
+            </Button>
+            <component
+              :is="header.id === 'selection' ? 'div' : 'span'"
+              v-else
+              class="text-sm text-muted"
+            >
+              <slot
+                :name="`${header.id}-header`"
+                :column="header.column"
+              >
+                <FlexRender
+                  v-if="!header.isPlaceholder"
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
+                />
+              </slot>
+            </component>
+          </TableHead>
+        </TableRow>
+
+        <!-- column filters -->
+        <template
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+        >
+          <TableRow
+            v-if="getHeaderColumnFiltersCount(headerGroup.headers) > 0 || enableColumnFilters"
+            data-filter="true"
+            :una="una"
+            v-bind="props._tableRow"
+          >
+            <TableHead
+              v-for="header in headerGroup.headers"
+              :key="header.id"
+              :una="una"
+              :colspan="header.colSpan"
+              :data-pinned="header.column.getIsPinned()"
+              v-bind="props._tableHead"
+            >
+              <slot
+                v-if="header.id !== 'selection' && ((header.column.columnDef.enableColumnFilter !== false && enableColumnFilters) || header.column.columnDef.enableColumnFilter)"
+                :name="`${header.id}-filter`"
+                :column="header.column"
+              >
+                <Input
+                  class="w-auto"
+                  :model-value="header.column.getFilterValue() as string"
+                  :placeholder="header.column.columnDef.header"
+                  @update:model-value="header.column.setFilterValue($event)"
+                />
+              </slot>
+            </TableHead>
+          </TableRow>
+        </template>
+      </slot>
+
+      <TableLoading
+        :enabled="props.loading"
+        :una="una"
+        v-bind="props._tableLoading"
+      >
+        <slot name="loading" />
+      </TableLoading>
+    </TableHeader>
+
+    <!-- body -->
+    <TableBody
+      :una="una"
+      v-bind="props._tableBody"
+    >
+      <slot name="body" :table="table">
+        <template v-if="table.getRowModel().rows?.length">
+          <template
+            v-for="row in table.getRowModel().rows"
+            :key="row.id"
+          >
+            <TableRow
+              :data-state="row.getIsSelected() && 'selected'"
+              :una="una"
+              v-bind="props._tableRow"
+            >
+              <slot
+                name="row"
+                :row="row"
+              >
+                <!-- rows -->
+                <TableCell
+                  v-for="cell in row.getVisibleCells()"
+                  :key="cell.id"
+                  :data-pinned="cell.column.getIsPinned()"
+                  :una="una"
+                  v-bind="props._tableCell"
+                >
+                  <slot
+                    :name="`${cell.column.id}-cell`"
+                    :cell="cell"
+                  >
+                    <FlexRender
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                  </slot>
+                </TableCell>
+              </slot>
+            </TableRow>
+
+            <!-- expanded -->
+            <TableRow
+              v-if="row.getIsExpanded() && $slots.expanded"
+              :una="una"
+              v-bind="props._tableRow"
+            >
+              <TableCell
+                :colspan="row.getAllCells().length"
+                :una="una"
+                v-bind="props._tableCell"
+              >
+                <slot name="expanded" :row="row" />
+              </TableCell>
+            </TableRow>
+          </template>
+        </template>
+
+        <TableEmpty
+          v-else
+          :colspan="table.getAllLeafColumns().length"
+          :una="una"
+          v-bind="props._tableEmpty"
+        >
+          <slot name="empty" />
+        </TableEmpty>
+      </slot>
+    </TableBody>
+
+    <!-- footer -->
+    <TableFooter
+      v-if="table.getFooterGroups().length > 0"
+      :una="una"
+      v-bind="props._tableFooter"
+    >
+      <slot name="footer" :table="table">
+        <template
+          v-for="footerGroup in table.getFooterGroups()"
+          :key="footerGroup.id"
+        >
+          <TableRow
+            v-if="footerGroup.headers.length > 0"
+            :una="una"
+            v-bind="props._tableRow"
+          >
+            <template
+              v-for="header in footerGroup.headers"
+              :key="header.id"
+            >
+              <TableHead
+                v-if="header.column.columnDef.footer"
+                :colspan="header.colSpan"
+                :una="una"
+                v-bind="props._tableHead"
+              >
+                <slot :name="`${header.id}-footer`" :column="header.column">
+                  <FlexRender
+                    v-if="!header.isPlaceholder"
+                    :render="header.column.columnDef.footer"
+                    :props="header.getContext()"
+                  />
+                </slot>
+              </TableHead>
+            </template>
+          </TableRow>
+        </template>
+      </slot>
+    </TableFooter>
+  </TableRoot>
+</template>.

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NTableBodyProps } from '../../../types'
+
+const props = defineProps<NTableBodyProps>()
+</script>
+
+<template>
+  <tbody
+    :class="cn(
+      'table-body',
+      props.class,
+      props?.una?.tableBody,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </tbody>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NTableCaptionProps } from '../../../types'
+
+const props = defineProps<NTableCaptionProps>()
+</script>
+
+<template>
+  <caption
+    :class="cn(
+      'table-caption',
+      props.class,
+      props?.una?.tableCaption,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </caption>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NTableCellProps } from '../../../types'
+
+const props = defineProps<NTableCellProps>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'table-cell',
+        { 'table-cell-pinned': dataPinned },
+        dataPinned === 'left' ? 'table-cell-pinned-left' : 'table-cell-pinned-right',
+        props.class,
+        props?.una?.tableCell,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </td>
+</template>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn, omitProps } from '../../../utils'
+import type { NTableEmptyProps } from '../../../types'
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+
+const props = withDefaults(defineProps<NTableEmptyProps>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow
+    :class="cn(
+      'table-empty-row',
+    )"
+    v-bind="delegatedProps._tableRow"
+  >
+    <TableCell
+      :class="
+        cn(
+          'table-empty-cell',
+        )
+      "
+      :colspan="props.colspan"
+      v-bind="delegatedProps._tableCell"
+    >
+      <div
+        :class="cn(
+          'table-empty',
+          props.class,
+        )"
+        v-bind="omitProps(delegatedProps, ['_tableRow', '_tableCell', 'colspan'])"
+      >
+        <slot>
+          <div class="grid place-items-center gap-4">
+            <NIcon
+              name="i-tabler-database-x"
+              size="2xl"
+            />
+
+            <span>
+              No results.
+            </span>
+          </div>
+        </slot>
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { NTableFooterProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NTableFooterProps>()
+</script>
+
+<template>
+  <tfoot
+    :class="cn(
+      'table-footer',
+      props.class,
+      props.una?.tableFooter,
+    )"
+  >
+    <slot />
+  </tfoot>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NTableHeadProps } from '../../../types'
+
+const props = defineProps<NTableHeadProps>()
+</script>
+
+<template>
+  <th
+    :class="cn(
+      'table-head',
+      props.class,
+      { 'table-head-pinned': props.dataPinned },
+      props.dataPinned === 'left' ? 'table-head-pinned-left' : 'table-head-pinned-right',
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </th>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NTableHeaderProps } from '../../../types'
+
+const props = defineProps<NTableHeaderProps>()
+</script>
+
+<template>
+  <thead
+    :class="cn(
+      'table-header',
+      props.class,
+      props?.una?.tableHeader,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </thead>
+</template>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import type { NTableLoadingProps } from '../../../types'
+import Progress from '../../elements/Progress.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<NTableLoadingProps>(), {
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow
+    :class="cn(
+      'table-loading-row',
+    )"
+    data-loading="true"
+    v-bind="delegatedProps._tableRow"
+  >
+    <td
+      :class="
+        cn(
+          'table-loading-cell',
+        )
+      "
+      :colspan="0"
+      v-bind="delegatedProps._tableCell"
+    >
+      <div
+        v-if="enabled"
+        class="table-loading"
+      >
+        <slot>
+          <Progress
+            size="3px"
+          />
+        </slot>
+      </div>
+    </td>
+  </TableRow>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NTableRootProps } from '../../../types'
+
+const props = defineProps<NTableRootProps>()
+</script>
+
+<template>
+  <div
+    :class="cn('table-root-wrapper', props.una?.tableRootWrapper)"
+  >
+    <table
+      :class="cn(
+        'table-root',
+        props.class,
+        props.una?.tableRoot,
+      )"
+    >
+      <slot />
+    </table>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../../utils'
+import type { NTableRowProps } from '../../../types'
+
+const props = defineProps<NTableRowProps>()
+</script>
+
+<template>
+  <tr
+    :class="cn(
+      'table-row',
+      props.class,
+      props.una?.tableRow,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </tr>
+</template>

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

@@ -103,19 +103,19 @@ const isBaseVariant = computed(() => props.btn?.includes('~'))
       v-slot="{ open, close }"
       as="div"
       accordion="item"
-      :default-open="item.defaultOpen ?? defaultOpen"
+      :default-open="item.defaultOpen || defaultOpen"
       :class="una?.accordionItem"
     >
       <DisclosureButton
         :ref="() => (buttonRefs[i] = close)"
         as="template"
-        :disabled="item.disabled ?? disabled"
+        :disabled="item.disabled || disabled"
         @click="closeOthers(i)"
       >
         <slot name="label" :item="item" :index="i" :open="open" :close="close">
           <NButton
             v-bind="mergedProps(item)"
-            :btn="`~ block ${btn ?? ''}`"
+            :btn="`~ block ${btn || ''}`"
             :class="[
               { 'accordion-button-default-variant': !hasVariant && !isBaseVariant },
               { 'accordion-button-padding': !unstyle },
@@ -132,7 +132,7 @@ const isBaseVariant = computed(() => props.btn?.includes('~'))
                 v-if="leading || item.leading"
                 accordion="leading"
                 :class="una?.accordionLeading"
-                :name="item.leading ?? leading ?? ''"
+                :name="item.leading || leading || ''"
                 aria-hidden="true"
               />
             </template>
@@ -143,8 +143,8 @@ const isBaseVariant = computed(() => props.btn?.includes('~'))
                 accordion="trailing"
                 :class="[
                   trailingClose || (!trailingClose && open)
-                    ? una?.accordionTrailingClose ?? 'accordion-trailing-close'
-                    : una?.accordionTrailingOpen ?? 'accordion-trailing-open',
+                    ? una?.accordionTrailingClose || 'accordion-trailing-close'
+                    : una?.accordionTrailingOpen || 'accordion-trailing-open',
                   una?.accordionTrailing,
                 ]"
               >
@@ -165,14 +165,14 @@ const isBaseVariant = computed(() => props.btn?.includes('~'))
       </DisclosureButton>
 
       <Transition
-        :enter-active-class="una?.accordionLeaveActive ?? 'accordion-leave-active'"
-        :leave-active-class="una?.accordionEnterActive ?? 'accordion-enter-active'"
+        :enter-active-class="una?.accordionLeaveActive || 'accordion-leave-active'"
+        :leave-active-class="una?.accordionEnterActive || 'accordion-enter-active'"
         @enter="onEnter"
         @after-enter="onAfterEnter"
         @before-leave="onBeforeLeave"
         @leave="onLeave"
       >
-        <DisclosurePanel v-if="!item.mounted ?? !mounted">
+        <DisclosurePanel v-if="!item.mounted || !mounted">
           <ReuseTemplate
             v-bind="{
               item,

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

@@ -10,7 +10,6 @@ import type { NProgressProps } from '../../types'
 const props = withDefaults(
   defineProps<NProgressProps>(),
   {
-    modelValue: 0,
   },
 )
 
@@ -34,12 +33,33 @@ const delegatedProps = computed(() => {
   >
     <slot>
       <ProgressIndicator
+        v-if="props.modelValue !== undefined || props.modelValue === null"
         :class="cn(
           'progress-indicator',
           props.una?.progressIndicator,
         )"
         :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
       />
+      <template
+        v-else
+      >
+        <ProgressIndicator
+          :class="cn(
+            'progress increase progress-indeterminate',
+            props.una?.progressIndicator,
+          )"
+        />
+        <ProgressIndicator
+          :class="cn(
+            'progress decrease progress-indeterminate',
+            props.una?.progressIndicator,
+          )"
+        />
+      </template>
     </slot>
   </ProgressRoot>
 </template>
+
+<style scoped>
+.increase.progress-indeterminate{animation:progress-increase 2s ease-in-out infinite}.decrease.progress-indeterminate{animation:progress-indeterminate-decrease 2s ease-in-out .9s infinite}@keyframes progress-decrease{0%{left:-90%;width:90%}to{left:110%;width:10%}}@keyframes progress-increase{0%{left:-5%;width:5%}to{left:130%;width:150%}}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { computed, watch } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { computed } from 'vue'
 import NIcon from '../elements/Icon.vue'
 import { randomId } from '../../utils'
 import type { NCheckboxProps } from '../../types/checkbox'
@@ -14,11 +14,9 @@ const props = withDefaults(
   {
     modelValue: false,
     disabled: false,
-    una: () => ({
-      checkboxIcon: 'checkbox-icon',
-    }),
   },
 )
+
 const emit = defineEmits<{ (...args: any): void }>()
 
 const slots = defineSlots<{
@@ -27,13 +25,17 @@ const slots = defineSlots<{
 }>()
 
 const id = computed(() => props.id ?? randomId('checkbox'))
-
 const checked = useVModel(props, 'modelValue', emit, { passive: true })
+
+watch(checked, (value) => {
+  emit('onUpdate', value)
+})
 </script>
 
 <template>
   <label
     checkbox="wrapper"
+    role="checkbox"
     :for="props.for ?? id"
     :class="[
       una?.checkboxWrapper,
@@ -47,13 +49,15 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
   >
     <input
       :id="id"
-      v-model="checked"
+      :value="checked"
+      :checked="!!checked"
       type="checkbox"
       class="peer"
       checkbox="input"
       :disabled="disabled"
       :name="name"
       @keypress.enter="checked = !checked"
+      @click="checked = !checked"
     >
     <span
       :checkbox="checkbox"
@@ -64,10 +68,8 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
       <slot name="icon">
         <NIcon
           checkbox="icon-base icon-checked"
-          :name="una.checkboxIcon!"
-          :class="[
-            una.checkboxIconBase,
-          ]"
+          :name="una?.checkboxIcon ?? 'checkbox-icon'"
+          :class="una?.checkboxIconBase"
         />
       </slot>
     </span>

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

@@ -22,6 +22,7 @@ export * from './tabs.js';
 export * from './select.js';
 export * from './separator.js';
 export * from './card.js';
+export * from './table.js';
 export interface Colors {
     [key: string]: string;
 }

package/dist/runtime/types/index.js

@@ -22,3 +22,4 @@ export * from "./tabs.js";
 export * from "./select.js";
 export * from "./separator.js";
 export * from "./card.js";
+export * from "./table.js";

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

@@ -0,0 +1,167 @@
+import type { HTMLAttributes } from 'vue';
+import type { ColumnDef, GroupColumnDef } from '@tanstack/vue-table';
+export interface NTableProps<TData, TValue> extends NTableRootProps {
+    /**
+     * @see https://tanstack.com/table/latest/docs/guide/data
+     */
+    data: TData[];
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/core/column
+     */
+    columns: ColumnDef<TData, TValue>[] | GroupColumnDef<TData, TValue>[];
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/core/table#getrowid
+     */
+    rowId?: string;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/core/table#autoresetall
+     */
+    autoResetAll?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/row-selection#enablerowselection
+     */
+    enableRowSelection?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/row-selection#enablemultirowselection
+     */
+    enableMultiRowSelection?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/row-selection#enablesubrowselection
+     */
+    enableSubRowSelection?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/column-filtering#enablecolumnfilters
+     */
+    enableColumnFilters?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#enablesorting
+     */
+    enableSorting?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#enablemultisort
+     */
+    enableMultiSort?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#enablemultiremove
+     */
+    enableMultiRemove?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#enablesortingremoval
+     */
+    enableSortingRemoval?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#manualsorting
+     */
+    manualSorting?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#maxmultisortcolcount
+     */
+    maxMultiSortColCount?: number;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/pagination#manualpagination
+     */
+    manualPagination?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/pagination#pagecount
+     */
+    pageCount?: number;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/pagination#rowcount
+     */
+    rowCount?: number;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/pagination#autoresetpageindex
+     */
+    autoResetPageIndex?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#sortingfns
+     */
+    sortingFns?: Record<string, (a: any, b: any) => number>;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#sortdescfirst-1
+     */
+    sortDescFirst?: boolean;
+    /**
+     * @see https://tanstack.com/table/latest/docs/api/features/sorting#ismultisortevent
+     */
+    isMultiSortEvent?: (e: unknown) => boolean;
+    _tableHead?: NTableHeadProps;
+    _tableHeader?: NTableHeaderProps;
+    _tableFooter?: NTableFooterProps;
+    _tableBody?: NTableBodyProps;
+    _tableCaption?: NTableCaptionProps;
+    _tableRow?: NTableRowProps;
+    _tableCell?: NTableCellProps;
+    _tableEmpty?: NTableEmptyProps;
+    _tableLoading?: NTableLoadingProps;
+    loading?: boolean;
+    /**
+     * `UnaUI` preset configuration
+     *
+     * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/table.ts
+     */
+    una?: NTableUnaProps;
+}
+export interface NTableRootProps {
+    class?: HTMLAttributes['class'];
+    una?: Pick<NTableUnaProps, 'tableRoot' | 'tableRootWrapper'>;
+}
+export interface NTableBodyProps {
+    class?: HTMLAttributes['class'];
+    una?: Pick<NTableUnaProps, 'tableBody'>;
+}
+export interface NTableHeadProps {
+    class?: HTMLAttributes['class'];
+    dataPinned?: 'left' | 'right' | false;
+    una?: Pick<NTableUnaProps, 'tableHead'>;
+}
+export interface NTableHeaderProps {
+    class?: HTMLAttributes['class'];
+    una?: Pick<NTableUnaProps, 'tableHeader'>;
+}
+export interface NTableFooterProps {
+    class?: HTMLAttributes['class'];
+    una?: Pick<NTableUnaProps, 'tableFooter'>;
+}
+export interface NTableRowProps {
+    class?: HTMLAttributes['class'];
+    una?: Pick<NTableUnaProps, 'tableRow'>;
+}
+export interface NTableCellProps {
+    class?: HTMLAttributes['class'];
+    dataPinned?: 'left' | 'right' | false;
+    una?: Pick<NTableUnaProps, 'tableCell'>;
+}
+export interface NTableEmptyProps {
+    class?: HTMLAttributes['class'];
+    colspan?: number;
+    _tableCell?: NTableCellProps;
+    _tableRow?: NTableRowProps;
+    una?: Pick<NTableUnaProps, 'tableEmpty'>;
+}
+export interface NTableLoadingProps {
+    enabled?: boolean;
+    class?: HTMLAttributes['class'];
+    colspan?: number;
+    _tableCell?: NTableCellProps;
+    _tableRow?: NTableRowProps;
+    una?: Pick<NTableUnaProps, 'tableLoading'>;
+}
+export interface NTableCaptionProps {
+    class?: HTMLAttributes['class'];
+    una?: Pick<NTableUnaProps, 'tableCaption'>;
+}
+interface NTableUnaProps {
+    tableRoot?: HTMLAttributes['class'];
+    tableRootWrapper?: HTMLAttributes['class'];
+    tableBody?: HTMLAttributes['class'];
+    tableHead?: HTMLAttributes['class'];
+    tableHeader?: HTMLAttributes['class'];
+    tableFooter?: HTMLAttributes['class'];
+    tableRow?: HTMLAttributes['class'];
+    tableCell?: HTMLAttributes['class'];
+    tableCaption?: HTMLAttributes['class'];
+    tableEmpty?: HTMLAttributes['class'];
+    tableLoading?: HTMLAttributes['class'];
+}
+export {};

package/dist/runtime/utils/cn.d.ts

@@ -1,2 +1,5 @@
 import { type ClassValue } from 'clsx';
+import type { Updater } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
 export declare function cn(...inputs: ClassValue[]): string;
+export declare function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref): void;

package/dist/runtime/utils/cn.js

@@ -3,3 +3,6 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+export function valueUpdater(updaterOrValue, ref) {
+  ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "type": "module",
-  "version": "0.11.0-beta.1",
+  "version": "0.12.0-beta.2",
   "description": "Nuxt module for @una-ui",
   "author": "Phojie Rengel <phojrengel@gmail.com>",
   "license": "MIT",
@@ -34,6 +34,7 @@
     "@iconify-json/tabler": "^1.1.120",
     "@nuxt/kit": "^3.12.4",
     "@nuxtjs/color-mode": "^3.4.2",
+    "@tanstack/vue-table": "^8.20.4",
     "@unocss/core": "^0.61.9",
     "@unocss/nuxt": "^0.61.9",
     "@unocss/preset-attributify": "^0.61.9",
@@ -47,8 +48,8 @@
     "tailwind-merge": "^2.5.1",
     "unocss": "^0.61.9",
     "unocss-preset-animations": "^1.1.0",
-    "@una-ui/extractor-vue-script": "^0.11.0-beta.1",
-    "@una-ui/preset": "^0.11.0-beta.1"
+    "@una-ui/extractor-vue-script": "^0.12.0-beta.2",
+    "@una-ui/preset": "^0.12.0-beta.2"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.1",

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

@@ -30,6 +30,7 @@ interface _GlobalComponents {
     'NSeparator': typeof import("../../src/runtime/components/elements/Separator.vue")['default']
     'NSkeleton': typeof import("../../src/runtime/components/elements/Skeleton.vue")['default']
     'NCard': typeof import("../../src/runtime/components/elements/card/Card.vue")['default']
+    'NCardAbout': typeof import("../../src/runtime/components/elements/card/CardAbout.vue")['default']
     'NCardContent': typeof import("../../src/runtime/components/elements/card/CardContent.vue")['default']
     'NCardDescription': typeof import("../../src/runtime/components/elements/card/CardDescription.vue")['default']
     'NCardFooter': typeof import("../../src/runtime/components/elements/card/CardFooter.vue")['default']
@@ -412,6 +413,7 @@ interface _GlobalComponents {
     'LazyNSeparator': typeof import("../../src/runtime/components/elements/Separator.vue")['default']
     'LazyNSkeleton': typeof import("../../src/runtime/components/elements/Skeleton.vue")['default']
     'LazyNCard': typeof import("../../src/runtime/components/elements/card/Card.vue")['default']
+    'LazyNCardAbout': typeof import("../../src/runtime/components/elements/card/CardAbout.vue")['default']
     'LazyNCardContent': typeof import("../../src/runtime/components/elements/card/CardContent.vue")['default']
     'LazyNCardDescription': typeof import("../../src/runtime/components/elements/card/CardDescription.vue")['default']
     'LazyNCardFooter': typeof import("../../src/runtime/components/elements/card/CardFooter.vue")['default']
@@ -808,6 +810,7 @@ export const NProgress: typeof import("../../src/runtime/components/elements/Pro
 export const NSeparator: typeof import("../../src/runtime/components/elements/Separator.vue")['default']
 export const NSkeleton: typeof import("../../src/runtime/components/elements/Skeleton.vue")['default']
 export const NCard: typeof import("../../src/runtime/components/elements/card/Card.vue")['default']
+export const NCardAbout: typeof import("../../src/runtime/components/elements/card/CardAbout.vue")['default']
 export const NCardContent: typeof import("../../src/runtime/components/elements/card/CardContent.vue")['default']
 export const NCardDescription: typeof import("../../src/runtime/components/elements/card/CardDescription.vue")['default']
 export const NCardFooter: typeof import("../../src/runtime/components/elements/card/CardFooter.vue")['default']
@@ -1190,6 +1193,7 @@ export const LazyNProgress: typeof import("../../src/runtime/components/elements
 export const LazyNSeparator: typeof import("../../src/runtime/components/elements/Separator.vue")['default']
 export const LazyNSkeleton: typeof import("../../src/runtime/components/elements/Skeleton.vue")['default']
 export const LazyNCard: typeof import("../../src/runtime/components/elements/card/Card.vue")['default']
+export const LazyNCardAbout: typeof import("../../src/runtime/components/elements/card/CardAbout.vue")['default']
 export const LazyNCardContent: typeof import("../../src/runtime/components/elements/card/CardContent.vue")['default']
 export const LazyNCardDescription: typeof import("../../src/runtime/components/elements/card/CardDescription.vue")['default']
 export const LazyNCardFooter: typeof import("../../src/runtime/components/elements/card/CardFooter.vue")['default']