nuxt-ui-tools 0.1.3 → 1.0.0

package/dist/runtime/table/utils/columns/menu.js

@@ -3,67 +3,59 @@ import { findSchemaColumn } from "./schema.js";
 export function createColumnMenuItems(options) {
   const { t } = useUiToolsLocale();
   const column = options.orderedColumns.find((entry) => entry.id === options.columnId);
-  const schemaColumn = findSchemaColumn({ schema: options.schema, columnId: options.columnId });
+  const sortableKey = column?.sortableKey;
+  const schemaColumn = findSchemaColumn({ columnId: options.columnId, schema: options.schema });
   const sortState = options.getSortState({ columnId: options.columnId });
   const pinnedState = options.getPinnedState({ columnId: options.columnId });
-  return [
-    column?.sortableKey ? [
-      {
-        label: t("table.columnsMenu.sortAsc"),
-        icon: sortState === "asc" ? "i-lucide-check" : "i-lucide-chevron-up",
-        color: "neutral",
-        onSelect: () => options.setSorting({
-          key: column.sortableKey,
-          dir: "asc"
-        })
-      },
-      {
-        label: t("table.columnsMenu.sortDesc"),
-        icon: sortState === "desc" ? "i-lucide-check" : "i-lucide-chevron-down",
-        color: "neutral",
-        onSelect: () => options.setSorting({
-          key: column.sortableKey,
-          dir: "desc"
-        })
-      },
-      ...sortState ? [
-        {
-          label: t("table.columnsMenu.clearSort"),
-          icon: "i-lucide-x",
-          color: "neutral",
-          onSelect: () => options.setSorting(null)
-        }
-      ] : []
-    ] : [],
-    [
-      {
-        label: t("table.columnsMenu.pinToLeft"),
-        icon: pinnedState === "left" ? "i-lucide-check" : "i-lucide-pin",
-        color: "neutral",
-        onSelect: () => options.setPinning({ columnId: options.columnId, pinned: "left" })
-      },
-      {
-        label: t("table.columnsMenu.pinToRight"),
-        icon: pinnedState === "right" ? "i-lucide-check" : "i-lucide-pin",
-        color: "neutral",
-        onSelect: () => options.setPinning({ columnId: options.columnId, pinned: "right" })
-      },
-      ...pinnedState ? [
-        {
-          label: t("table.columnsMenu.unpinColumn"),
-          icon: "i-lucide-pin-off",
-          onSelect: () => options.setPinning({ columnId: options.columnId })
-        }
-      ] : []
-    ],
-    schemaColumn?.required ? [] : [
-      {
-        label: t("table.columnsMenu.hideColumn"),
-        icon: "i-lucide-eye-off",
-        onSelect: () => options.setVisibility({ columnId: options.columnId, visible: false })
-      }
-    ]
-  ].filter((group) => group.length > 0);
+  const activeClass = "nut-dl-colmenu__item--active";
+  const sortGroup = sortableKey ? [
+    {
+      class: sortState === "asc" ? activeClass : void 0,
+      icon: "i-lucide-arrow-up",
+      label: t("table.columnsMenu.sortAsc"),
+      onSelect: () => options.setSorting({ dir: "asc", key: sortableKey })
+    },
+    {
+      class: sortState === "desc" ? activeClass : void 0,
+      icon: "i-lucide-arrow-down",
+      label: t("table.columnsMenu.sortDesc"),
+      onSelect: () => options.setSorting({ dir: "desc", key: sortableKey })
+    },
+    {
+      disabled: !sortState,
+      icon: "i-lucide-arrow-up-down",
+      label: t("table.columnsMenu.clearSort"),
+      onSelect: () => options.setSorting(null)
+    }
+  ] : [];
+  const pinGroup = pinnedState ? [
+    {
+      icon: "i-lucide-pin-off",
+      label: t("table.columnsMenu.unpinColumn"),
+      onSelect: () => options.setPinning({ columnId: options.columnId })
+    }
+  ] : [
+    {
+      icon: "i-lucide-pin",
+      label: t("table.columnsMenu.pinToLeft"),
+      onSelect: () => options.setPinning({ columnId: options.columnId, pinned: "left" })
+    },
+    {
+      icon: "i-lucide-pin",
+      label: t("table.columnsMenu.pinToRight"),
+      onSelect: () => options.setPinning({ columnId: options.columnId, pinned: "right" })
+    }
+  ];
+  const hideGroup = [
+    {
+      disabled: Boolean(schemaColumn?.required),
+      icon: "i-lucide-eye-off",
+      label: t("table.columnsMenu.hideColumn"),
+      onSelect: () => options.setVisibility({ columnId: options.columnId, visible: false })
+    }
+  ];
+  const titleGroup = options.label ? [{ class: "nut-dl-colmenu__title", label: options.label, type: "label" }] : [];
+  return [titleGroup, sortGroup, pinGroup, hideGroup].filter((group) => group.length > 0);
 }
 export function getColumnHeaderIcon(options) {
   const sortState = options.getSortState({ columnId: options.columnId });

package/dist/runtime/table/utils/columns/render.d.ts

@@ -2,40 +2,40 @@
 import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue';
 import type { VNodeChild } from 'vue';
 import type { GenericObject } from '../../types/index.js';
-import { type SchemaTableColumn, type TableColumnRenderParams, type TableRuntimeColumn, type UseTableColumnsParams } from './types.js';
+import type { SchemaTableColumn, TableColumnRenderParams, TableRuntimeColumn, UseTableColumnsParams } from './types.js';
 export declare function createSelectionColumn(options: {
     params: UseTableColumnsParams;
 }): {
-    id: string;
-    header: () => import("vue/jsx-runtime").JSX.Element;
     cell: ({ row }: {
         row: {
             id: string;
         };
     }) => import("vue/jsx-runtime").JSX.Element;
-    size: number;
-    enableSorting: boolean;
     enableHiding: boolean;
     enablePinning: boolean;
     enableResizing: boolean;
+    enableSorting: boolean;
+    header: () => import("vue/jsx-runtime").JSX.Element;
+    id: string;
     meta: {
         class: {
-            th: string;
             td: string;
+            th: string;
         };
         style: {
-            th: () => {
-                width: string;
-                minWidth: string;
-                maxWidth: string;
-            };
             td: () => {
-                width: string;
+                maxWidth: string;
                 minWidth: string;
+                width: string;
+            };
+            th: () => {
                 maxWidth: string;
+                minWidth: string;
+                width: string;
             };
         };
     };
+    size: number;
 };
 export declare function createDataColumns(options: {
     params: UseTableColumnsParams;
@@ -50,40 +50,49 @@ export declare function createDataColumns(options: {
         columnId: string;
     }) => 'asc' | 'desc' | null;
 }): ({
-    id: string;
-    header: () => null;
     cell: ({ row }: {
         row: {
             original: GenericObject;
             index: number;
         };
     }) => import("vue/jsx-runtime").JSX.Element;
-    size: number;
-    enableSorting: boolean;
     enableHiding: boolean;
     enablePinning: boolean;
     enableResizing: boolean;
+    enableSorting: boolean;
+    header: () => null;
+    id: string;
     meta: {
         class: {
-            th: string;
             td: string;
+            th: string;
         };
         style: {
-            th: () => {
-                width: string;
-                minWidth: string;
-                maxWidth: string;
-            };
             td: () => {
-                width: string;
+                maxWidth: string;
                 minWidth: string;
+                width: string;
+            };
+            th: () => {
                 maxWidth: string;
+                minWidth: string;
+                width: string;
             };
         };
     };
+    size: number;
 } | {
-    id: string;
     accessorFn: ((row: GenericObject) => unknown) | undefined;
+    cell: ({ row }: {
+        row: {
+            original: GenericObject;
+            index: number;
+        };
+    }) => import("vue/jsx-runtime").JSX.Element;
+    enableHiding: boolean;
+    enablePinning: boolean;
+    enableResizing: boolean;
+    enableSorting: boolean;
     header: ({ column: tableColumn, header, }: {
         column: {
             getCanHide?: () => boolean;
@@ -94,45 +103,36 @@ export declare function createDataColumns(options: {
             getResizeHandler?: () => (event: Event) => void;
         };
     }) => import("vue/jsx-runtime").JSX.Element;
-    cell: ({ row }: {
-        row: {
-            original: GenericObject;
-            index: number;
-        };
-    }) => import("vue/jsx-runtime").JSX.Element;
-    enableSorting: boolean;
-    enableHiding: boolean;
-    enablePinning: boolean;
-    enableResizing: boolean;
-    size: number | undefined;
-    minSize: number;
+    id: string;
     maxSize: number | undefined;
     meta: {
         class: {
-            th: string;
             td: string;
+            th: string;
         };
         style: {
-            th: ({ column: headerColumn }: {
+            td: ({ column: cellColumn }: {
                 column: {
                     getSize: () => number;
                 };
             }) => {
-                width: string;
-                minWidth: string;
                 maxWidth: string;
+                minWidth: string;
+                width: string;
             };
-            td: ({ column: cellColumn }: {
+            th: ({ column: headerColumn }: {
                 column: {
                     getSize: () => number;
                 };
             }) => {
-                width: string;
-                minWidth: string;
                 maxWidth: string;
+                minWidth: string;
+                width: string;
             };
         };
     };
+    minSize: number;
+    size: number | undefined;
 })[];
 export declare function renderColumnCell(options: TableColumnRenderParams): import("vue/jsx-runtime").JSX.Element;
 export declare function wrapEllipsisContent(options: {
@@ -149,3 +149,38 @@ export declare function getColumnCellClass(options: {
 export declare function normalizeColumnSize(options: {
     size?: number | string;
 }): number | undefined;
+export declare function createRowActionsColumn(options: {
+    params: UseTableColumnsParams;
+}): {
+    cell: ({ row }: {
+        row: {
+            original: GenericObject;
+            index: number;
+        };
+    }) => import("vue/jsx-runtime").JSX.Element;
+    enableHiding: boolean;
+    enablePinning: boolean;
+    enableResizing: boolean;
+    enableSorting: boolean;
+    header: () => null;
+    id: string;
+    meta: {
+        class: {
+            td: string;
+            th: string;
+        };
+        style: {
+            td: () => {
+                maxWidth: string;
+                minWidth: string;
+                width: string;
+            };
+            th: () => {
+                maxWidth: string;
+                minWidth: string;
+                width: string;
+            };
+        };
+    };
+    size: number;
+};