@una-ui/nuxt 0.53.0 → 0.54.0

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

@@ -1,4 +1,20 @@
-<script setup>
+<script setup lang="ts" generic="TData, TValue">
+import type {
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ExpandedState,
+  GroupingState,
+  Header,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  SortingState,
+  Table,
+  VisibilityState,
+} from '@tanstack/vue-table'
+import type { NTableProps } from '../../../types'
+
 import {
   FlexRender,
   getCoreRowModel,
@@ -6,190 +22,146 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  useVueTable
-} from "@tanstack/vue-table";
-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";
-import ScrollArea from "../../scroll-area/ScrollArea.vue";
-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 TableLoading from "./TableLoading.vue";
-import TableRow from "./TableRow.vue";
-const props = defineProps({
-  class: { type: null, required: false },
-  state: { type: Object, required: false },
-  onStateChange: { type: Function, required: false },
-  renderFallbackValue: { type: null, required: false },
-  data: { type: Array, required: true },
-  columns: { type: Array, required: true },
-  rowId: { type: String, required: false },
-  autoResetAll: { type: Boolean, required: false },
-  enableRowSelection: { type: Boolean, required: false },
-  enableMultiRowSelection: { type: Boolean, required: false, default: true },
-  enableSubRowSelection: { type: Boolean, required: false },
-  enableColumnFilters: { type: Boolean, required: false },
-  manualFiltering: { type: Boolean, required: false },
-  enableSorting: { type: Boolean, required: false },
-  enableMultiSort: { type: Boolean, required: false },
-  enableMultiRemove: { type: Boolean, required: false },
-  enableSortingRemoval: { type: Boolean, required: false, default: true },
-  manualSorting: { type: Boolean, required: false },
-  maxMultiSortColCount: { type: Number, required: false },
-  manualPagination: { type: Boolean, required: false },
-  pageCount: { type: Number, required: false },
-  rowCount: { type: Number, required: false },
-  autoResetPageIndex: { type: Boolean, required: false },
-  sortingFns: { type: Object, required: false },
-  sortDescFirst: { type: Boolean, required: false },
-  isMultiSortEvent: { type: Function, required: false },
-  _tableHead: { type: Object, required: false },
-  _tableHeader: { type: Object, required: false },
-  _tableFooter: { type: Object, required: false },
-  _tableBody: { type: Object, required: false },
-  _tableCaption: { type: Object, required: false },
-  _tableRow: { type: [Object, Function], required: false },
-  _tableCell: { type: Object, required: false },
-  _tableEmpty: { type: Object, required: false },
-  _tableLoading: { type: Object, required: false },
-  _scrollArea: { type: Object, required: false },
-  loading: { type: Boolean, required: false },
-  una: { type: Object, required: false },
-  _features: { type: Array, required: false },
-  debugAll: { type: Boolean, required: false },
-  debugCells: { type: Boolean, required: false },
-  debugColumns: { type: Boolean, required: false },
-  debugHeaders: { type: Boolean, required: false },
-  debugRows: { type: Boolean, required: false },
-  debugTable: { type: Boolean, required: false },
-  defaultColumn: { type: Object, required: false },
-  getRowId: { type: Function, required: false },
-  getSubRows: { type: Function, required: false },
-  initialState: { type: Object, required: false },
-  mergeOptions: { type: Function, required: false },
-  meta: { type: Object, required: false }
-});
-const emit = defineEmits(["select", "selectAll", "expand", "row"]);
-const slots = defineSlots();
-const rowSelection = defineModel("rowSelection", { type: Object });
-const sorting = defineModel("sorting", { type: Array });
-const columnVisibility = defineModel("columnVisibility", { type: Object });
-const columnFilters = defineModel("columnFilters", { type: Array });
-const globalFilter = defineModel("globalFilter", { type: String });
-const columnOrder = defineModel("columnOrder", { type: Array });
-const columnPinning = defineModel("columnPinning", { type: Object });
-const expanded = defineModel("expanded", { type: [Boolean, Object] });
-const grouping = defineModel("grouping", { type: Array });
-const pagination = defineModel("pagination", { type: Object, ...{
+  useVueTable,
+} from '@tanstack/vue-table'
+
+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'
+import ScrollArea from '../../scroll-area/ScrollArea.vue'
+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 TableLoading from './TableLoading.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps <NTableProps<TData, TValue>>(), {
+  enableMultiRowSelection: true,
+  enableSortingRemoval: true,
+})
+
+const emit = defineEmits<{
+  select: [row: TData]
+  selectAll: [rows: TData[]]
+  expand: [row: TData]
+  row: [event: Event, row: TData]
+}>()
+
+const slots = defineSlots()
+
+const rowSelection = defineModel<RowSelectionState>('rowSelection')
+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
-  })
-} });
+    pageSize: 10,
+  }),
+})
+
 const columnsWithMisc = computed(() => {
-  let data = [];
-  data = props.enableRowSelection ? [
-    {
-      accessorKey: "selection",
-      header: props.enableMultiRowSelection ? ({ table: table2 }) => h(Checkbox, {
-        "modelValue": table2.getIsAllPageRowsSelected() || table2.getIsSomePageRowsSelected() && "indeterminate",
-        "onUpdate:modelValue": (value) => {
-          table2.toggleAllPageRowsSelected(!!value);
-          emit("selectAll", table2.getRowModel().rows.map((row) => row.original));
-        },
-        "areaLabel": "Select all rows",
-        "onClick": (event) => {
-          event.stopPropagation();
-        }
-      }) : "",
-      cell: ({ row }) => h(Checkbox, {
-        "modelValue": row.getIsSelected() ?? false,
-        "onUpdate:modelValue": (value) => {
-          row.toggleSelected(!!value);
-          emit("select", row.original);
+  let data = []
+
+  // add selection column
+  data = props.enableRowSelection
+    ? [
+        {
+          accessorKey: 'selection',
+          header: props.enableMultiRowSelection
+            ? ({ table }: { table: Table<TData> }) => h(Checkbox, {
+                'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+                'onUpdate:modelValue': (value: boolean | 'indeterminate' | null) => {
+                  table.toggleAllPageRowsSelected(!!value)
+                  emit('selectAll', table.getRowModel().rows.map(row => row.original))
+                },
+                'areaLabel': 'Select all rows',
+                'onClick': (event: Event) => {
+                  event.stopPropagation()
+                },
+              })
+            : '',
+          cell: ({ row }: { row: Row<TData> }) => h(Checkbox, {
+            'modelValue': row.getIsSelected() ?? false,
+            'onUpdate:modelValue': (value: boolean | 'indeterminate' | null) => {
+              row.toggleSelected(!!value)
+              emit('select', row.original)
+            },
+            'areaLabel': 'Select row',
+            'onClick': (event: Event) => {
+              event.stopPropagation()
+            },
+          }),
+          enableSorting: false,
         },
-        "areaLabel": "Select row",
-        "onClick": (event) => {
-          event.stopPropagation();
-        }
-      }),
-      enableSorting: false
-    },
-    ...props.columns
-  ] : props.columns;
-  data = slots.expanded ? [
-    {
-      accessorKey: "expanded",
-      header: "",
-      cell: ({ row }) => h(Button, {
-        size: "xs",
-        icon: true,
-        square: true,
-        btn: "ghost-gray",
-        label: "i-radix-icons-chevron-down",
-        onClick: () => {
-          row.toggleExpanded();
-          emit("expand", row);
+        ...props.columns,
+      ]
+    : props.columns
+
+  // add expanded column
+  data = slots.expanded
+    ? [
+        {
+          accessorKey: 'expanded',
+          header: '',
+          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: {
+              btnIconLabel: cn(
+                'transform transition-transform duration-200',
+                row.getIsExpanded() ? '-rotate-180' : 'rotate-0',
+              ),
+            },
+          }),
+          enableSorting: false,
+          enableHiding: false,
         },
-        una: {
-          btnIconLabel: cn(
-            "transform transition-transform duration-200",
-            row.getIsExpanded() ? "-rotate-180" : "rotate-0"
-          )
-        }
-      }),
-      enableSorting: false,
-      enableHiding: false
-    },
-    ...data
-  ] : data;
-  return data;
-});
+        ...data,
+      ]
+    : data
+
+  return data
+})
+
 const table = useVueTable({
   get data() {
-    return props.data ?? [];
+    return props.data ?? []
   },
   get columns() {
-    return columnsWithMisc.value ?? [];
+    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;
-    }
+    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,
@@ -208,40 +180,46 @@ const table = useVueTable({
   maxMultiSortColCount: props.maxMultiSortColCount,
   sortingFns: props.sortingFns,
   isMultiSortEvent: props.isMultiSortEvent,
+
   getCoreRowModel: getCoreRowModel(),
   getSortedRowModel: getSortedRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
-  getRowId: (row) => props.rowId ? row[props.rowId] : row.id,
+  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)
-});
-function getHeaderColumnFiltersCount(headers) {
-  let count = 0;
+
+  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
   headers.forEach((header) => {
     if (header.column.columnDef.enableColumnFilter)
-      count++;
-  });
-  return count;
+      count++
+  })
+
+  return count
 }
-function getRowAttrs(data) {
-  if (typeof props._tableRow === "function") {
-    return props._tableRow(data);
+
+function getRowAttrs(data?: TData) {
+  if (typeof props._tableRow === 'function') {
+    return props._tableRow(data)
   }
-  return props._tableRow;
+  return props._tableRow
 }
+
 defineExpose({
-  ...table
-});
+  ...table,
+})
 </script>
 
 <template>
@@ -256,10 +234,10 @@ defineExpose({
       <table
         v-bind="$attrs"
         :class="cn(
-  'table',
-  props.una?.table,
-  props.class
-)"
+          'table',
+          props.una?.table,
+          props.class,
+        )"
       >
         <!-- header -->
         <TableHeader
@@ -283,14 +261,16 @@ defineExpose({
                 v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
               >
                 <Button
-                  v-if="header.column.columnDef.enableSorting || header.column.columnDef.enableSorting !== false && enableSorting"
+                  v-if="header.column.columnDef.enableSorting || (header.column.columnDef.enableSorting !== false && enableSorting)"
                   btn="ghost-gray"
                   size="sm"
                   class="font-normal -ml-1em"
                   :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'"
+                    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.getToggleSortingHandler()?.($event)"
                 >
                   <slot
@@ -340,13 +320,13 @@ defineExpose({
                   v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
                 >
                   <slot
-                    v-if="header.id !== 'selection' && (header.column.columnDef.enableColumnFilter !== false && enableColumnFilters || header.column.columnDef.enableColumnFilter)"
+                    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()"
+                      :model-value="header.column.getFilterValue() as string"
                       :placeholder="header.column.columnDef.header"
                       @update:model-value="header.column.setFilterValue($event)"
                     />

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

@@ -1,23 +1,23 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "tbody" }
-});
-const rootProps = reactiveOmit(props, ["una", "class"]);
+<script setup lang="ts">
+import type { NTableBodyProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<NTableBodyProps>(), {
+  as: 'tbody',
+})
+
+const rootProps = reactiveOmit(props, ['una', 'class'])
 </script>
 
 <template>
   <Primitive
     :class="cn(
-  'table-body',
-  props?.una?.tableBody,
-  props.class
-)"
+      'table-body',
+      props?.una?.tableBody,
+      props.class,
+    )"
     v-bind="{ ...rootProps, ...$attrs }"
   >
     <slot />

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

@@ -1,24 +1,24 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "caption" }
-});
-const rootProps = reactiveOmit(props, ["una", "class"]);
+<script setup lang="ts">
+import type { NTableCaptionProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<NTableCaptionProps>(), {
+  as: 'caption',
+})
+
+const rootProps = reactiveOmit(props, ['una', 'class'])
 </script>
 
 <template>
   <Primitive
     :class="cn(
-  'table-caption',
-  props?.una?.tableCaption,
-  props.class
-)"
-    v-bind="{ ...rootProps, ...$attrs }"
+      'table-caption',
+      props?.una?.tableCaption,
+      props.class,
+    )"
+    v-bind="{ ...rootProps, ...$attrs } "
   >
     <slot />
   </Primitive>

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

@@ -1,28 +1,27 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  dataPinned: { type: [String, Boolean], required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "td" }
-});
-const rootProps = reactiveOmit(props, ["una", "class"]);
+<script setup lang="ts">
+import type { NTableCellProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<NTableCellProps>(), {
+  as: 'td',
+})
+
+const rootProps = reactiveOmit(props, ['una', 'class'])
 </script>
 
 <template>
   <Primitive
     :class="
-  cn(
-    'table-cell',
-    props?.una?.tableCell,
-    props.class,
-    { 'table-cell-pinned': dataPinned },
-    dataPinned === 'left' ? 'table-cell-pinned-left' : 'table-cell-pinned-right'
-  )
-"
+      cn(
+        'table-cell',
+        props?.una?.tableCell,
+        props.class,
+        { 'table-cell-pinned': dataPinned },
+        dataPinned === 'left' ? 'table-cell-pinned-left' : 'table-cell-pinned-right',
+      )
+    "
     v-bind="{ ...rootProps, ...$attrs }"
   >
     <slot />