nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/table/components/layout/{TableFooter.d.vue.ts → table-footer.d.vue.ts}

@@ -1,30 +1,34 @@
-import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+import type { DataListControlSize, DataListPaginationProps, DataListPaginationUi } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
+    compact?: boolean;
     ui?: DataListPaginationUi;
+    props?: DataListPaginationProps;
 };
 declare var __VLS_1: {
     selected: number;
     total: number;
+    from: number;
+    to: number;
 }, __VLS_3: {
     pageSize: number;
     options: number[];
     setPageSize: (nextPageSize: number) => void;
-}, __VLS_16: {
+}, __VLS_12: {
     current: number;
     total: number;
-}, __VLS_18: {
+}, __VLS_14: {
     state: {
-        mode: "none" | "offset" | "cursor";
-        pageIndex: number;
-        pageSize: number;
-        pageCount: number;
-        loadedCount: number;
-        totalCount: number | null;
         hasNextPage: boolean;
         hasPreviousPage: boolean;
         isLoadingMore: boolean;
         loadMoreError: unknown;
+        loadedCount: number;
+        mode: "none" | "offset" | "cursor";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number | null;
     };
     setPage: (page: number) => void;
     next: () => void;
@@ -35,11 +39,13 @@ type __VLS_Slots = {} & {
 } & {
     'page-size'?: (props: typeof __VLS_3) => any;
 } & {
-    'page-count'?: (props: typeof __VLS_16) => any;
+    'page-count'?: (props: typeof __VLS_12) => any;
 } & {
-    navigation?: (props: typeof __VLS_18) => any;
+    navigation?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    compact: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/layout/table-footer.vue

@@ -0,0 +1,280 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UPagination from "@nuxt/ui/components/Pagination.vue";
+import USelect from "@nuxt/ui/components/Select.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListBreakpoint } from "../../composables/use-data-list-breakpoint";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import {
+  mergeDataListProps,
+  mergeDataListUiClass,
+  resolveDataListControlGeometry
+} from "../../utils";
+const props = defineProps({
+  size: { type: String, required: false },
+  compact: { type: Boolean, required: false, default: void 0 },
+  ui: { type: Object, required: false },
+  props: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const { isMobile } = useDataListBreakpoint();
+const compact = computed(() => props.compact ?? isMobile.value);
+const dataListUi = useDataListUi();
+const { locale, t } = useUiToolsLocale();
+const controlSize = computed(
+  () => props.size ?? dataListUi.ui.value.pagination?.size ?? dataListUi.controlSize.value
+);
+const geometry = computed(() => resolveDataListControlGeometry(controlSize.value));
+const ui = computed(() => ({
+  ...dataListUi.ui.value.pagination?.ui,
+  ...props.ui
+}));
+const controlProps = computed(
+  () => mergeDataListProps(dataListUi.ui.value.pagination?.props, props.props)
+);
+const paginationProps = computed(
+  () => mergeDataListProps(
+    {
+      activeColor: "neutral",
+      activeVariant: "solid",
+      color: "neutral",
+      showControls: true,
+      showEdges: true,
+      siblingCount: 1,
+      size: controlSize.value,
+      variant: "ghost"
+    },
+    controlProps.value.pagination
+  )
+);
+const pageSizeProps = computed(
+  () => mergeDataListProps({ color: "neutral", size: controlSize.value, variant: "none" }, controlProps.value.pageSize)
+);
+const total = computed(() => internals.pagination.rowCount.value ?? 0);
+const booting = computed(
+  () => internals.queryContent.status.value.isBooting || internals.queryContent.status.value.isPending && internals.queryContent.data.value.rows.length === 0
+);
+const from = computed(
+  () => total.value === 0 ? 0 : (internals.pagination.currentPage.value - 1) * internals.pagination.pageSize.value + 1
+);
+const to = computed(
+  () => Math.min(
+    total.value,
+    internals.pagination.currentPage.value * internals.pagination.pageSize.value
+  )
+);
+const summary = computed(
+  () => total.value === 0 ? t("table.footer.rangeEmpty") : t("table.footer.range", {
+    from: formatCount(from.value),
+    to: formatCount(to.value),
+    total: formatCount(total.value)
+  })
+);
+const pageSizeItems = computed(
+  () => internals.pagination.pageSizeOptions.value.map((size) => ({
+    label: formatCount(size),
+    value: size
+  }))
+);
+const page = computed({
+  get: () => internals.pagination.currentPage.value,
+  set: (value) => internals.pagination.setPage(value)
+});
+const paginationControls = computed(() => {
+  const pagination = internals.schema.value.pagination;
+  if (!pagination || pagination.mode === "cursor") {
+    return { showPageSizePicker: true, showPagesCount: true, showPagesList: true };
+  }
+  return {
+    showPageSizePicker: pagination.showPageSizePicker ?? true,
+    showPagesCount: pagination.showPagesCount ?? true,
+    showPagesList: pagination.showPagesList ?? true
+  };
+});
+const showFooter = computed(
+  () => internals.pagination.mode.value === "offset" && (paginationControls.value.showPageSizePicker || paginationControls.value.showPagesCount || paginationControls.value.showPagesList)
+);
+function formatCount(value) {
+  return new Intl.NumberFormat(locale.value.code).format(value);
+}
+</script>
+
+<template>
+  <footer
+    v-if="showFooter"
+    :class="
+  mergeDataListUiClass(
+    `nut-dl-footer flex flex-wrap items-center gap-x-3 gap-y-2 text-muted ${geometry.footer}`,
+    void 0,
+    ui.root
+  )
+"
+  >
+    <div
+      :class="
+  mergeDataListUiClass(
+    `nut-dl-footer__lead flex min-w-0 flex-wrap items-center ${geometry.toolbarGap}`,
+    void 0,
+    ui.inner
+  )
+"
+    >
+      <slot
+        v-if="paginationControls.showPagesCount"
+        name="selected-count"
+        :selected="internals.selection.selectedCount.value"
+        :total="total"
+        :from="from"
+        :to="to"
+      >
+        <span
+          v-if="booting"
+          class="nut-dl-skeleton nut-dl-footer__range-skeleton inline-block h-3 w-24 rounded"
+          aria-hidden="true"
+        />
+        <span
+          v-else
+          :class="mergeDataListUiClass('nut-dl-footer__range tabular-nums', void 0, ui.summary)"
+          role="status"
+        >
+          {{ summary }}
+        </span>
+      </slot>
+
+      <slot
+        v-if="paginationControls.showPageSizePicker && !compact && !booting"
+        name="page-size"
+        :page-size="internals.pagination.pageSize.value"
+        :options="internals.pagination.pageSizeOptions.value"
+        :set-page-size="internals.pagination.setPageSize"
+      >
+        <label
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-footer__size inline-flex h-7 items-center gap-1 rounded-md pl-2.5 ring ring-inset ring-default',
+    void 0,
+    ui.pageSize
+  )
+"
+        >
+          <span class="nut-dl-footer__size-label whitespace-nowrap">{{
+            t("table.footer.perPage")
+          }}</span>
+          <USelect
+            v-bind="pageSizeProps"
+            :model-value="internals.pagination.pageSize.value"
+            :items="pageSizeItems"
+            :aria-label="t('table.footer.perPage')"
+            :ui="{
+  base: mergeDataListUiClass(
+    'nut-dl-footer__select h-7 bg-transparent pl-1 pr-6 text-highlighted font-medium ring-0 shadow-none focus-visible:ring-0',
+    void 0,
+    ui.button
+  ),
+  content: 'w-auto min-w-[6rem]',
+  item: 'pr-8',
+  trailing: 'pe-1.5',
+  trailingIcon: 'size-3.5 text-dimmed'
+}"
+            @update:model-value="internals.pagination.setPageSize(Number($event))"
+          />
+        </label>
+      </slot>
+    </div>
+
+    <div
+      v-if="paginationControls.showPagesList"
+      :class="
+  mergeDataListUiClass(
+    `nut-dl-footer__pages ml-auto flex items-center ${geometry.toolbarGap}`,
+    void 0,
+    ui.pages
+  )
+"
+    >
+      <slot
+        name="page-count"
+        :current="internals.pagination.currentPage.value"
+        :total="internals.pagination.totalPages.value"
+      />
+
+      <slot
+        name="navigation"
+        :state="internals.pagination.state.value"
+        :set-page="internals.pagination.setPage"
+        :next="internals.pagination.next"
+        :previous="internals.pagination.previous"
+      >
+        <div
+          v-if="compact && total > 0 && !booting"
+          :class="
+  mergeDataListUiClass(
+    'nut-dl-pager nut-dl-pager--compact flex items-center gap-1.5',
+    void 0,
+    ui.controls
+  )
+"
+        >
+          <UButton
+            color="neutral"
+            variant="outline"
+            :size="controlSize"
+            icon="i-lucide-chevron-left"
+            square
+            :aria-label="t('table.footer.previousPage')"
+            :disabled="!internals.pagination.canPreviousPage.value"
+            :ui="{ base: mergeDataListUiClass('nut-dl-pager__btn', void 0, ui.button) }"
+            @click="internals.pagination.previous()"
+          />
+          <span
+            class="nut-dl-pager__of min-w-11 text-center text-[12.5px] font-semibold tabular-nums text-highlighted"
+          >
+            {{
+              t("table.footer.pageOf", {
+  current: formatCount(internals.pagination.currentPage.value),
+  total: formatCount(internals.pagination.totalPages.value)
+})
+            }}
+          </span>
+          <UButton
+            color="neutral"
+            variant="outline"
+            :size="controlSize"
+            icon="i-lucide-chevron-right"
+            square
+            :aria-label="t('table.footer.nextPage')"
+            :disabled="!internals.pagination.canNextPage.value"
+            :ui="{ base: mergeDataListUiClass('nut-dl-pager__btn', void 0, ui.button) }"
+            @click="internals.pagination.next()"
+          />
+        </div>
+        <UPagination
+          v-else-if="internals.pagination.totalPages.value > 0 && total > 0 && !booting"
+          v-bind="paginationProps"
+          v-model:page="page"
+          :total="total"
+          :items-per-page="internals.pagination.pageSize.value"
+          :ui="{
+  root: mergeDataListUiClass('nut-dl-pager', void 0, ui.controls),
+  list: 'gap-0.5',
+  item: mergeDataListUiClass('nut-dl-pager__btn tabular-nums', void 0, ui.button),
+  first: mergeDataListUiClass(
+    `nut-dl-pager__btn ${controlProps.firstLast === false ? 'hidden' : ''}`,
+    void 0,
+    ui.button
+  ),
+  prev: mergeDataListUiClass('nut-dl-pager__btn', void 0, ui.button),
+  next: mergeDataListUiClass('nut-dl-pager__btn', void 0, ui.button),
+  last: mergeDataListUiClass(
+    `nut-dl-pager__btn ${controlProps.firstLast === false ? 'hidden' : ''}`,
+    void 0,
+    ui.button
+  )
+}"
+        />
+      </slot>
+    </div>
+  </footer>
+</template>

package/dist/runtime/table/components/layout/{TableFooter.vue.d.ts → table-footer.vue.d.ts}

@@ -1,30 +1,34 @@
-import type { DataListControlSize, DataListPaginationUi } from '../../types/index.js';
+import type { DataListControlSize, DataListPaginationProps, DataListPaginationUi } from '../../types/index.js';
 type __VLS_Props = {
     size?: DataListControlSize;
+    compact?: boolean;
     ui?: DataListPaginationUi;
+    props?: DataListPaginationProps;
 };
 declare var __VLS_1: {
     selected: number;
     total: number;
+    from: number;
+    to: number;
 }, __VLS_3: {
     pageSize: number;
     options: number[];
     setPageSize: (nextPageSize: number) => void;
-}, __VLS_16: {
+}, __VLS_12: {
     current: number;
     total: number;
-}, __VLS_18: {
+}, __VLS_14: {
     state: {
-        mode: "none" | "offset" | "cursor";
-        pageIndex: number;
-        pageSize: number;
-        pageCount: number;
-        loadedCount: number;
-        totalCount: number | null;
         hasNextPage: boolean;
         hasPreviousPage: boolean;
         isLoadingMore: boolean;
         loadMoreError: unknown;
+        loadedCount: number;
+        mode: "none" | "offset" | "cursor";
+        pageCount: number;
+        pageIndex: number;
+        pageSize: number;
+        totalCount: number | null;
     };
     setPage: (page: number) => void;
     next: () => void;
@@ -35,11 +39,13 @@ type __VLS_Slots = {} & {
 } & {
     'page-size'?: (props: typeof __VLS_3) => any;
 } & {
-    'page-count'?: (props: typeof __VLS_16) => any;
+    'page-count'?: (props: typeof __VLS_12) => any;
 } & {
-    navigation?: (props: typeof __VLS_18) => any;
+    navigation?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    compact: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/table/components/layout/{TableHeader.vue → table-header.vue}

@@ -3,11 +3,12 @@ import UButton from "@nuxt/ui/components/Button.vue";
 import UFieldGroup from "@nuxt/ui/components/FieldGroup.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
-import ColumnPanel from "../drawers/ColumnPanel.vue";
-import FilterPanel from "../filters/panel/FilterPanel.vue";
-import TableFiltersBar from "../filters/tags/FilterTagsBar.vue";
-import SearchQueryInput from "../utils/SearchQueryInput.vue";
+import ColumnPanel from "../drawers/column-panel.vue";
+import FilterPanel from "../filters/panel/filter-panel.vue";
+import TableFiltersBar from "../filters/tags/filter-tags-bar.vue";
+import SearchQueryInput from "../utils/search-query-input.vue";
 defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
@@ -18,6 +19,7 @@ defineProps({
 const searchQuery = defineModel("searchQuery", { type: String, ...{ required: true } });
 const tableLayout = defineModel("tableLayout", { type: String, ...{ required: true } });
 const internals = useTableInternals();
+const dataListUi = useDataListUi();
 const { t } = useUiToolsLocale();
 const refreshLoading = computed(
   () => internals.queryContent.status.value.isFetching || internals.queryContent.status.value.isRefreshing || internals.queryContent.status.value.isRevalidating
@@ -47,6 +49,7 @@ function refreshData() {
           v-model="searchQuery"
           :loading="searchLoading"
           :placeholder="searchPlaceholder"
+          :size="dataListUi.controlSize.value"
         />
 
         <TableFiltersBar />
@@ -62,7 +65,7 @@ function refreshData() {
         <UButton
           color="neutral"
           variant="outline"
-          size="md"
+          :size="dataListUi.controlSize.value"
           icon="i-lucide-refresh-cw"
           :loading="refreshLoading"
           :aria-label="t('table.header.refreshData')"
@@ -70,11 +73,11 @@ function refreshData() {
           @click="refreshData"
         />
 
-        <UFieldGroup v-if="gridEnabled" size="md" class="shrink-0">
+        <UFieldGroup v-if="gridEnabled" :size="dataListUi.controlSize.value" class="shrink-0">
           <UButton
             color="neutral"
             :variant="tableLayout === 'table' ? 'subtle' : 'outline'"
-            size="md"
+            :size="dataListUi.controlSize.value"
             icon="i-lucide-table-properties"
             :aria-label="t('table.header.tableView')"
             :title="t('table.header.tableView')"
@@ -83,7 +86,7 @@ function refreshData() {
           <UButton
             color="neutral"
             :variant="tableLayout === 'grid' ? 'subtle' : 'outline'"
-            size="md"
+            :size="dataListUi.controlSize.value"
             icon="i-lucide-layout-grid"
             :aria-label="t('table.header.gridView')"
             :title="t('table.header.gridView')"

package/dist/runtime/table/components/table/{TableCellEllipsis.js → table-cell-ellipsis.js}

@@ -4,17 +4,17 @@ import { computed, defineComponent, onBeforeUnmount, ref } from "vue";
 export default defineComponent({
   name: "TableCellEllipsis",
   props: {
-    title: {
-      type: String,
-      default: null
-    },
     disabled: {
-      type: Boolean,
-      default: false
+      default: false,
+      type: Boolean
+    },
+    title: {
+      default: null,
+      type: String
     },
     wrapperClass: {
-      type: String,
-      default: ""
+      default: "",
+      type: String
     }
   },
   setup(props, { slots }) {
@@ -33,10 +33,10 @@ export default defineComponent({
       isOverflowing.value = element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1;
     }
     function startObserver() {
-      if (resizeObserver || typeof ResizeObserver === "undefined" || !contentRef.value) {
+      if (resizeObserver || !("ResizeObserver" in globalThis) || !contentRef.value) {
         return;
       }
-      resizeObserver = new ResizeObserver(() => {
+      resizeObserver = new globalThis.ResizeObserver(() => {
         measureOverflow();
       });
       resizeObserver.observe(contentRef.value);
@@ -61,7 +61,7 @@ export default defineComponent({
         text: props.title ?? void 0,
         disabled: !tooltipEnabled.value,
         "delay-duration": 120,
-        content: { side: "top", align: "start" },
+        content: { align: "start", side: "top" },
         children: /* @__PURE__ */ jsx(
           "div",
           {

package/dist/runtime/table/components/table/table-cell.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionalComponent, VNodeChild } from 'vue';
+import type { GenericObject } from '../../types/index.js';
+interface TableCellProps {
+    index: number;
+    render: (params: {
+        row: GenericObject;
+        index: number;
+    }) => VNodeChild;
+    row: GenericObject;
+}
+declare const TableCell: FunctionalComponent<TableCellProps>;
+export default TableCell;

package/dist/runtime/table/components/table/table-cell.js

@@ -0,0 +1,4 @@
+const TableCell = (props) => props.render({ index: props.index, row: props.row });
+TableCell.props = ["index", "render", "row"];
+TableCell.displayName = "DataListTableCell";
+export default TableCell;

package/dist/runtime/table/components/table/table-column-header.d.vue.ts

@@ -0,0 +1,25 @@
+import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
+type __VLS_Props = {
+    label: string;
+    icon?: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    sortState?: 'asc' | 'desc' | null;
+    pinned?: boolean;
+    items: DropdownMenuItem[][];
+    resizable?: boolean;
+    resizing?: boolean;
+    resetSize?: () => void;
+    resize?: (event: Event) => void;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-column-header.vue

@@ -0,0 +1,80 @@
+<script setup>
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+const props = defineProps({
+  label: { type: String, required: true },
+  icon: { type: String, required: false },
+  align: { type: String, required: false },
+  sortable: { type: Boolean, required: false },
+  sortState: { type: [String, null], required: false },
+  pinned: { type: Boolean, required: false },
+  items: { type: Array, required: true },
+  resizable: { type: Boolean, required: false },
+  resizing: { type: Boolean, required: false },
+  resetSize: { type: Function, required: false },
+  resize: { type: Function, required: false }
+});
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const dataListUi = useDataListUi();
+function reset(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  props.resetSize?.();
+}
+function startResize(event) {
+  event.stopPropagation();
+  props.resize?.(event);
+}
+</script>
+
+<template>
+  <div class="nut-dl-thc group/th relative flex h-full w-full min-w-0 items-stretch">
+    <UDropdownMenu
+      v-model:open="open"
+      :size="dataListUi.controlSize.value"
+      :items="items"
+      :content="{ align: align === 'right' ? 'end' : 'start', side: 'bottom', sideOffset: 6 }"
+      :modal="false"
+      :ui="{ content: 'nut-dl-colmenu min-w-52 p-1.5' }"
+    >
+      <button
+        type="button"
+        class="nut-dl-th__btn flex h-full w-full min-w-0 items-center gap-1 bg-transparent text-left transition-colors duration-100 outline-none hover:text-highlighted focus-visible:text-highlighted"
+        :class="[
+  align === 'right' ? 'flex-row-reverse text-right' : align === 'center' ? 'justify-center text-center' : '',
+  open ? 'nut-dl-th__btn--open text-highlighted' : '',
+  sortState ? 'nut-dl-th__btn--sorted text-highlighted' : ''
+]"
+      >
+        <UIcon v-if="icon" :name="icon" class="size-3.5 shrink-0 text-muted" />
+        <span class="nut-dl-th__label min-w-0 truncate">{{ label }}</span>
+        <UIcon
+          v-if="sortable"
+          class="nut-dl-th__sort size-3 shrink-0 transition-opacity duration-100 [&_svg]:stroke-[2.2]"
+          :class="
+  sortState ? 'text-primary opacity-100' : 'text-dimmed opacity-55 group-hover/th:opacity-90'
+"
+          :name="
+  sortState === 'asc' ? 'i-lucide-arrow-up' : sortState === 'desc' ? 'i-lucide-arrow-down' : 'i-lucide-chevrons-up-down'
+"
+        />
+      </button>
+    </UDropdownMenu>
+    <span
+      v-if="resizable"
+      class="nut-dl-rz absolute top-0 right-0 bottom-0 z-[5] w-[7px] cursor-col-resize touch-none select-none"
+      :class="{ 'nut-dl-rz--active': resizing }"
+      role="separator"
+      aria-orientation="vertical"
+      @click.stop
+      @dblclick="reset"
+      @mousedown="startResize"
+      @touchstart.passive="startResize"
+    />
+  </div>
+</template>
+
+<style>
+.nut-dl-colmenu{min-width:13.5rem}.nut-dl-colmenu .nut-dl-colmenu__title{color:var(--ui-text-dimmed);font-size:11px;font-weight:600;letter-spacing:.06em;padding:.35rem .5rem .25rem;text-transform:uppercase}.nut-dl-colmenu .nut-dl-colmenu__item--active{color:var(--ui-text-highlighted);font-weight:600}.nut-dl-colmenu .nut-dl-colmenu__item--active:after{background:var(--ui-primary);border-radius:999px;content:"";flex:none;height:7px;margin-left:auto;width:7px}
+</style>

package/dist/runtime/table/components/table/table-column-header.vue.d.ts

@@ -0,0 +1,25 @@
+import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
+type __VLS_Props = {
+    label: string;
+    icon?: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    sortState?: 'asc' | 'desc' | null;
+    pinned?: boolean;
+    items: DropdownMenuItem[][];
+    resizable?: boolean;
+    resizing?: boolean;
+    resetSize?: () => void;
+    resize?: (event: Event) => void;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;