v-nuxt-ui 0.1.0

package/dist/runtime/composables/table/useTableOpr.d.ts

@@ -0,0 +1,8 @@
+import type { SelectOption, WhereQueryOpr, WhereQueryType } from '#v/types';
+export declare const useTableOpr: () => {
+    getOprListByType: (type: WhereQueryType) => WhereQueryOpr[];
+    getDefaultOprByType: (type: WhereQueryType | undefined) => WhereQueryOpr;
+    getOprNameMapByType: (type: WhereQueryType) => Map<WhereQueryOpr, string>;
+    getOprNameOptionsByType: (type: WhereQueryType) => SelectOption[];
+    getOprNameByTypeAndOpr: (type: WhereQueryType, opr: WhereQueryOpr) => string;
+};

package/dist/runtime/composables/table/useTableOpr.js

@@ -0,0 +1,91 @@
+import { createSharedComposable } from "@vueuse/core";
+const _useTableOpr = () => {
+  const oprMap = /* @__PURE__ */ new Map([
+    ["input", ["eq", "ne", "like", "not_like", "start_like", "end_like", "is_empty", "is_not_empty"]],
+    ["input-number", ["eq", "ne", "gt", "gte", "lt", "lte"]],
+    ["select", ["in", "not_in"]],
+    ["async-select", ["in", "not_in"]],
+    ["date-picker", ["range_gte_lte", "lt", "lte", "gt", "gte", "is_null", "is_not_null"]]
+  ]);
+  const getOprListByType = (type) => {
+    return oprMap.get(type) || [];
+  };
+  const defaultOprMap = /* @__PURE__ */ new Map([
+    ["input", "like"],
+    ["input-number", "eq"],
+    ["select", "in"],
+    ["async-select", "in"],
+    ["date-picker", "range_gte_lte"]
+  ]);
+  const getDefaultOprByType = (type) => {
+    return type ? defaultOprMap.get(type) || "eq" : "eq";
+  };
+  const inputNameMap = /* @__PURE__ */ new Map([
+    ["eq", "\u7B49\u4E8E"],
+    ["ne", "\u4E0D\u7B49\u4E8E"],
+    ["like", "\u5305\u542B"],
+    ["not_like", "\u4E0D\u5305\u542B"],
+    ["start_like", "\u4EE5...\u5F00\u59CB"],
+    ["end_like", "\u4EE5...\u7ED3\u675F"],
+    ["is_empty", "\u4E3A\u7A7A"],
+    ["is_not_empty", "\u4E0D\u4E3A\u7A7A"],
+    ["text_arr_str_like", "\u5305\u542B"]
+    // 这个操作符是为了支持text-arr-input类型的输入，表示输入的多个值中包含任意一个即可
+  ]);
+  const inputNumberNameMap = /* @__PURE__ */ new Map([
+    ["eq", "="],
+    ["ne", "\u2260"],
+    ["gt", ">"],
+    ["gte", "\u2265"],
+    ["lt", "<"],
+    ["lte", "\u2264"]
+  ]);
+  const selectNameMap = /* @__PURE__ */ new Map([
+    ["in", "\u5305\u542B"],
+    ["not_in", "\u4E0D\u5305\u542B"]
+  ]);
+  const datePickerNameMap = /* @__PURE__ */ new Map([
+    ["range_gte_lte", "\u8303\u56F4"],
+    ["lt", "\u65E9\u4E8E"],
+    ["lte", "\u65E9\u4E8E\u7B49\u4E8E"],
+    ["gt", "\u665A\u4E8E"],
+    ["gte", "\u665A\u4E8E\u7B49\u4E8E"],
+    ["is_null", "\u4E3A\u7A7A"],
+    ["is_not_null", "\u4E0D\u4E3A\u7A7A"]
+  ]);
+  const getOprNameMapByType = (type) => {
+    switch (type) {
+      case "input":
+        return inputNameMap;
+      case "input-number":
+        return inputNumberNameMap;
+      case "select":
+      case "async-select":
+        return selectNameMap;
+      case "date-picker":
+        return datePickerNameMap;
+      default:
+        return /* @__PURE__ */ new Map();
+    }
+  };
+  const getOprNameOptionsByType = (type) => {
+    const nameMap = getOprNameMapByType(type);
+    const oprList = getOprListByType(type);
+    return oprList.map((opr) => ({
+      label: nameMap.get(opr) ?? opr ?? "\u672A\u77E5\u64CD\u4F5C\u7B26",
+      value: opr
+    }));
+  };
+  const getOprNameByTypeAndOpr = (type, opr) => {
+    const nameMap = getOprNameMapByType(type);
+    return nameMap.get(opr) || "\u672A\u77E5\u64CD\u4F5C\u7B26";
+  };
+  return {
+    getOprListByType,
+    getDefaultOprByType,
+    getOprNameMapByType,
+    getOprNameOptionsByType,
+    getOprNameByTypeAndOpr
+  };
+};
+export const useTableOpr = createSharedComposable(_useTableOpr);

package/dist/runtime/composables/table/useTablePagination.d.ts

@@ -0,0 +1,7 @@
+import { type Ref } from 'vue';
+import type { DropdownMenuItem } from '@nuxt/ui';
+import type { Pagination } from '#v/types';
+export declare function useTablePagination(localStgSettings: Ref<LocalStorage.TableSettings<any>>): {
+    pagination: Ref<Pagination, Pagination>;
+    pageSizeDropdownMenuItems: import("vue").ComputedRef<DropdownMenuItem[]>;
+};

package/dist/runtime/composables/table/useTablePagination.js

@@ -0,0 +1,29 @@
+import { computed, ref } from "vue";
+const defaultPageSize = 10;
+const pageSizeOptions = [5, 10, 20, 50, 100];
+export function useTablePagination(localStgSettings) {
+  const pageSize = computed({
+    get: () => localStgSettings.value.pageSize ?? defaultPageSize,
+    set: (pageSize2) => localStgSettings.value = { ...localStgSettings.value, pageSize: pageSize2 }
+  });
+  const pagination = ref({
+    pageNum: 1,
+    pageSize: pageSize.value
+  });
+  const pageSizeDropdownMenuItems = computed(
+    () => pageSizeOptions.map((size) => ({
+      label: `${size} / \u9875`,
+      value: size,
+      type: "checkbox",
+      checked: pagination.value.pageSize === size,
+      onSelect: () => {
+        pagination.value.pageSize = size;
+        pageSize.value = size;
+      }
+    }))
+  );
+  return {
+    pagination,
+    pageSizeDropdownMenuItems
+  };
+}

package/dist/runtime/composables/table/useTableQuery.d.ts

@@ -0,0 +1,23 @@
+import type { OrderQueryOption, WhereQueryOption, VColumn, OrderQuery, WhereQuery, WhereQueryItem, WhereQueryItemGroup } from '#v/types';
+export declare function useTableQuery<T>(props: {
+    name: string;
+    bizColumns: VColumn<T>[];
+    extraWhereQueryOptions?: WhereQueryOption<T>[];
+    extraWhereQueryInitValues?: Partial<WhereQuery<T>>;
+    extraOrderQueryOptions?: OrderQueryOption<T>[];
+}): {
+    whereQueryOptions: import("vue").ComputedRef<WhereQueryOption<T>[]>;
+    whereQueryInitValues: import("vue").ComputedRef<WhereQuery<T>>;
+    orderQueryOptions: import("vue").ComputedRef<OrderQueryOption<T>[]>;
+    orderQueryInitValues: import("vue").ComputedRef<OrderQuery<T>>;
+    initStorageColumns: import("vue").ComputedRef<LocalStorage.Column[]>;
+    localStgSettings: import("@vueuse/core").RemovableRef<LocalStorage.TableSettings<T>>;
+    whereQuery: import("vue").WritableComputedRef<WhereQuery<T> | undefined, WhereQuery<T> | undefined>;
+    whereQueryOpen: import("vue").WritableComputedRef<boolean, boolean>;
+    orderQuery: import("vue").WritableComputedRef<OrderQuery<T>, OrderQuery<T>>;
+    isWhereQueryValueEmpty: import("vue").ComputedRef<boolean>;
+    pruneWhereQuery: (query: WhereQuery<T> | undefined) => {
+        items: WhereQueryItem<T>[];
+        groups: WhereQueryItemGroup<T>[];
+    } | undefined;
+};

package/dist/runtime/composables/table/useTableQuery.js

@@ -0,0 +1,131 @@
+import { computed } from "vue";
+import { useLocalStorage } from "@vueuse/core";
+import { noValueOprList } from "#v/types";
+import { defu } from "defu";
+import { useTableOpr } from "./useTableOpr.js";
+import { cloneJson } from "#v/utils";
+export function useTableQuery(props) {
+  const { name, bizColumns, extraWhereQueryOptions, extraWhereQueryInitValues, extraOrderQueryOptions } = props;
+  const whereQueryOptions = computed(() => {
+    const options = bizColumns.filter((col) => col.filterOption).map((col) => ({
+      field: col.accessorKey,
+      label: col.header,
+      ...col.filterOption
+    }));
+    extraWhereQueryOptions?.forEach((option) => {
+      options.unshift(option);
+    });
+    return options;
+  });
+  const whereQueryInitValues = computed(() => {
+    const initValues = {
+      items: whereQueryOptions.value.filter((option) => option.initValues !== void 0 && option.initValues !== null || option.initHide === false).map((option) => ({
+        field: option.field,
+        opr: option.defaultOpr ?? useTableOpr().getDefaultOprByType(option.type),
+        value: option.initValues ?? null,
+        custom: option.custom
+      }))
+    };
+    return defu(initValues, extraWhereQueryInitValues ?? {});
+  });
+  const orderQueryOptions = computed(() => {
+    const options = bizColumns.filter((col) => col.sortOption).map((col) => ({
+      field: col["accessorKey"],
+      label: col.header,
+      defaultOpr: col.sortOption === true ? null : col.sortOption?.defaultOpr
+    }));
+    extraOrderQueryOptions?.forEach((option) => {
+      options.push(option);
+    });
+    return options;
+  });
+  const orderQueryInitValues = computed(() => {
+    return orderQueryOptions.value.filter((option) => option.defaultOpr).map((option) => ({ field: option.field, order: option.defaultOpr ?? "desc" }));
+  });
+  const initStorageColumns = computed(
+    () => bizColumns.map((col) => ({
+      accessorKey: col["accessorKey"],
+      fixed: "unfixed",
+      checked: !col.initHide
+    }))
+  );
+  const localStgSettings = useLocalStorage(`${name}-table-settings`, {
+    columns: initStorageColumns.value,
+    pageSize: 10,
+    whereQuery: whereQueryInitValues.value,
+    orderQuery: orderQueryInitValues.value
+  });
+  const whereQuery = computed({
+    get: () => localStgSettings.value.whereQuery ?? whereQueryInitValues.value,
+    set: (query) => localStgSettings.value = { ...localStgSettings.value, whereQuery: query }
+  });
+  const whereQueryOpen = computed({
+    get: () => localStgSettings.value.whereQueryOpen ?? false,
+    set: (open) => localStgSettings.value = { ...localStgSettings.value, whereQueryOpen: open }
+  });
+  const orderQuery = computed({
+    get: () => localStgSettings.value.orderQuery ?? [],
+    set: (query) => localStgSettings.value = { ...localStgSettings.value, orderQuery: query }
+  });
+  const checkIfWhereQueryItemsValueEmpty = (items) => {
+    const itemsWithOprNoValues = items.filter((item) => noValueOprList.includes(item.opr));
+    if (itemsWithOprNoValues.length > 0) {
+      return false;
+    }
+    return !items.filter((item) => !noValueOprList.includes(item.opr)).some((item) => item.value !== null && item.value !== void 0 && item.value !== "");
+  };
+  const checkIfWhereQueryGroupsValueEmpty = (groups) => {
+    for (const group of groups) {
+      if (!checkIfWhereQueryItemsValueEmpty(group.items ?? [])) {
+        return false;
+      }
+      if (!checkIfWhereQueryGroupsValueEmpty(group.groups ?? [])) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const isWhereQueryValueEmpty = computed(() => {
+    return checkIfWhereQueryItemsValueEmpty(
+      whereQuery.value?.items?.filter(
+        (query) => whereQueryOptions.value.find((option) => option.field === query.field)
+      ) ?? []
+    ) && checkIfWhereQueryGroupsValueEmpty(whereQuery.value?.groups ?? []);
+  });
+  const pruneWhereQuery = (query) => {
+    if (!query) return void 0;
+    const clonedQuery = cloneJson(query);
+    const prunedItems = clonedQuery.items?.filter((item) => {
+      if (noValueOprList.includes(item.opr)) {
+        return true;
+      } else {
+        return item.value !== null && item.value !== void 0 && item.value !== "";
+      }
+    }).map((item) => {
+      const newItem = { ...item };
+      delete newItem.extraData;
+      return newItem;
+    });
+    const prunedGroups = clonedQuery.groups?.map(
+      (group) => pruneWhereQuery({ items: group.items, groups: group.groups })
+    ).filter(Boolean);
+    return {
+      ...clonedQuery,
+      items: prunedItems,
+      groups: prunedGroups
+    };
+  };
+  return {
+    whereQueryOptions,
+    whereQueryInitValues,
+    orderQueryOptions,
+    orderQueryInitValues,
+    initStorageColumns,
+    localStgSettings,
+    whereQuery,
+    whereQueryOpen,
+    orderQuery,
+    isWhereQueryValueEmpty,
+    pruneWhereQuery
+  };
+}

package/dist/runtime/composables/table/useTableRowActions.d.ts

@@ -0,0 +1,18 @@
+import type { VColumn } from '#v/types';
+import type { DropdownMenuItem, TableRow } from '@nuxt/ui';
+export declare function useTableRowActions<T>(props: {
+    rowKey: keyof T;
+    disableRowActions?: boolean;
+    disableRowUpdate?: boolean;
+    disableRowCopy?: boolean;
+    disableRowDeletion?: boolean;
+    onEditRowFromModal?: (...args: any[]) => any;
+    extraRowActions?: any[];
+    useApiGroup?: (...args: any[]) => any;
+    customRowCopyFn?: (...args: any[]) => any;
+    fetchList: () => Promise<void>;
+}): {
+    getRowActions: (row: TableRow<T>) => DropdownMenuItem[];
+    generateActionColumn: () => VColumn<T>;
+    actionLoadingRowIdxSet: import("vue").Ref<Set<number> & Omit<Set<number>, keyof Set<any>>, Set<number> | (Set<number> & Omit<Set<number>, keyof Set<any>>)>;
+};

package/dist/runtime/composables/table/useTableRowActions.js

@@ -0,0 +1,154 @@
+import { ref, h } from "vue";
+import { useOverlay } from "@nuxt/ui/composables";
+import DeleteModal from "#v/components/DeleteModal.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UButton from "@nuxt/ui/components/Button.vue";
+export function useTableRowActions(props) {
+  const {
+    rowKey,
+    disableRowActions: _disableRowActions,
+    disableRowUpdate,
+    disableRowCopy,
+    disableRowDeletion,
+    onEditRowFromModal,
+    extraRowActions,
+    useApiGroup,
+    customRowCopyFn,
+    fetchList
+  } = props;
+  const overlay = useOverlay();
+  const deleteModal = overlay.create(DeleteModal);
+  const apiGroup = useApiGroup?.();
+  const actionLoadingRowIdxSet = ref(/* @__PURE__ */ new Set());
+  function getRowActions(row) {
+    const actionItems = [];
+    if (!disableRowUpdate && onEditRowFromModal) {
+      actionItems.push({
+        label: "\u7F16\u8F91",
+        icon: "i-lucide-clipboard-pen-line",
+        onClick: async () => {
+          const result = await onEditRowFromModal(row.original);
+          if (result) {
+            await fetchList();
+          }
+        }
+      });
+    }
+    if (!disableRowCopy && onEditRowFromModal) {
+      const copyFn = customRowCopyFn ?? apiGroup?.copy;
+      actionItems.push({
+        label: "\u590D\u5236",
+        icon: "i-lucide-clipboard-plus",
+        onClick: async () => {
+          const result = await onEditRowFromModal(copyFn(row.original));
+          if (result) {
+            await fetchList();
+          }
+        }
+      });
+    }
+    extraRowActions?.forEach((action) => {
+      actionItems.push({
+        label: action.label,
+        icon: action.icon,
+        type: action.type,
+        color: action.color,
+        onClick: async () => {
+          if (action.fn) {
+            action.fn(row.original);
+            if (action.refetchAfterFn) {
+              await fetchList();
+            }
+          }
+          if (action.asyncFn) {
+            actionLoadingRowIdxSet.value.add(row.index);
+            try {
+              await action.asyncFn(row.original);
+            } finally {
+              actionLoadingRowIdxSet.value.delete(row.index);
+            }
+          }
+          if (action.fnWithModal) {
+            const result = await action.fnWithModal(row.original);
+            if (result) {
+              await fetchList();
+            }
+          }
+        }
+      });
+    });
+    if (!disableRowDeletion) {
+      if (actionItems.length > 0) {
+        actionItems.push({ type: "separator" });
+      }
+      actionItems.push({
+        label: "\u5220\u9664",
+        icon: "i-lucide-trash-2",
+        color: "error",
+        onSelect: async () => {
+          const result = await deleteModal.open({
+            ids: [row.original[rowKey]],
+            onDelete: (ids) => apiGroup?.batchDelete({ ids })
+          }).result;
+          if (result) {
+            await fetchList();
+          }
+        }
+      });
+    }
+    actionItems.unshift({
+      type: "label",
+      label: "\u64CD\u4F5C"
+    });
+    return actionItems;
+  }
+  function generateActionColumn() {
+    return {
+      id: "actions",
+      accessorKey: "actions",
+      header: "\u64CD\u4F5C",
+      meta: {
+        class: {
+          th: "w-15 min-w-15 px-4"
+        }
+      },
+      cell: ({ row }) => {
+        return h(
+          "div",
+          { class: "text-center" },
+          h(
+            UDropdownMenu,
+            {
+              content: {
+                align: "end"
+              },
+              items: getRowActions(row)
+            },
+            {
+              "default": () => h(UButton, {
+                icon: "i-lucide-ellipsis",
+                color: "neutral",
+                variant: "ghost",
+                size: "sm",
+                loading: actionLoadingRowIdxSet.value.has(row.index),
+                class: "ml-auto"
+              }),
+              "item": () => null,
+              "item-leading": () => null,
+              "item-label": () => null,
+              "item-description": () => null,
+              "item-trailing": () => null,
+              "content-top": () => null,
+              "content-bottom": () => null
+            }
+          )
+        );
+      }
+    };
+  }
+  return {
+    getRowActions,
+    generateActionColumn,
+    actionLoadingRowIdxSet
+  };
+}

package/dist/runtime/composables/table/useTableRowSelection.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from 'vue';
+export declare function useTableRowSelection<T>(data: Ref<T[]>, rowKey: keyof T): {
+    rowSelection: Ref<Record<number, boolean> | undefined, Record<number, boolean> | undefined>;
+    selectedIds: Ref<number[], number[]>;
+    clearRowSelection: () => void;
+};

package/dist/runtime/composables/table/useTableRowSelection.js

@@ -0,0 +1,26 @@
+import { ref, watch } from "vue";
+export function useTableRowSelection(data, rowKey) {
+  const rowSelection = ref();
+  const selectedIds = ref([]);
+  watch(
+    rowSelection,
+    (newRowSelection) => {
+      if (!newRowSelection) {
+        selectedIds.value = [];
+        return;
+      }
+      const filteredRowSelection = Object.entries(newRowSelection).filter(([_, selected]) => selected);
+      selectedIds.value = filteredRowSelection.map(([idx]) => data.value[Number(idx)]?.[rowKey]);
+    },
+    { deep: true }
+  );
+  const clearRowSelection = () => {
+    rowSelection.value = {};
+    selectedIds.value = [];
+  };
+  return {
+    rowSelection,
+    selectedIds,
+    clearRowSelection
+  };
+}

package/dist/runtime/composables/table/useTableView.js

@@ -0,0 +1,150 @@
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, useTemplateRef } from "vue";
+import { useTable } from "./useTable.js";
+const PINNED_SHADOW_CLASSES = {
+  left: {
+    base: "[&_th[data-pinned=left]]:after:absolute [&_th[data-pinned=left]]:after:top-0 [&_th[data-pinned=left]]:after:right-0 [&_th[data-pinned=left]]:after:bottom-0 [&_th[data-pinned=left]]:after:w-[30px] [&_th[data-pinned=left]]:after:translate-x-full [&_th[data-pinned=left]]:after:transition-opacity [&_th[data-pinned=left]]:after:duration-300 [&_th[data-pinned=left]]:after:pointer-events-none [&_th[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_rgba(0,0,0,0.15)] [&_td[data-pinned=left]]:after:absolute [&_td[data-pinned=left]]:after:top-0 [&_td[data-pinned=left]]:after:right-0 [&_td[data-pinned=left]]:after:bottom-0 [&_td[data-pinned=left]]:after:w-[30px] [&_td[data-pinned=left]]:after:translate-x-full [&_td[data-pinned=left]]:after:transition-opacity [&_td[data-pinned=left]]:after:duration-200 [&_td[data-pinned=left]]:after:pointer-events-none [&_td[data-pinned=left]]:after:shadow-[inset_10px_0_8px_-8px_rgba(0,0,0,0.15)]",
+    show: "[&_th[data-pinned=left]]:after:opacity-100 [&_td[data-pinned=left]]:after:opacity-100",
+    hide: "[&_th[data-pinned=left]]:after:opacity-0 [&_td[data-pinned=left]]:after:opacity-0"
+  },
+  right: {
+    base: "[&_th[data-pinned=right]]:before:absolute [&_th[data-pinned=right]]:before:top-0 [&_th[data-pinned=right]]:before:left-0 [&_th[data-pinned=right]]:before:bottom-0 [&_th[data-pinned=right]]:before:w-[30px] [&_th[data-pinned=right]]:before:-translate-x-full [&_th[data-pinned=right]]:before:transition-opacity [&_th[data-pinned=right]]:before:duration-300 [&_th[data-pinned=right]]:before:pointer-events-none [&_th[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_rgba(0,0,0,0.15)] [&_td[data-pinned=right]]:before:absolute [&_td[data-pinned=right]]:before:top-0 [&_td[data-pinned=right]]:before:left-0 [&_td[data-pinned=right]]:before:bottom-0 [&_td[data-pinned=right]]:before:w-[30px] [&_td[data-pinned=right]]:before:-translate-x-full [&_td[data-pinned=right]]:before:transition-opacity [&_td[data-pinned=right]]:before:duration-200 [&_td[data-pinned=right]]:before:pointer-events-none [&_td[data-pinned=right]]:before:shadow-[inset_-10px_0_8px_-8px_rgba(0,0,0,0.15)]",
+    show: "[&_th[data-pinned=right]]:before:opacity-100 [&_td[data-pinned=right]]:before:opacity-100",
+    hide: "[&_th[data-pinned=right]]:before:opacity-0 [&_td[data-pinned=right]]:before:opacity-0"
+  }
+};
+const EXPANDED_STICKY_CLASS = "[&_tr[data-expanded=true]]:sticky [&_tr[data-expanded=true]]:top-[calc(var(--ui-table-header-height)+1px)] [&_tr[data-expanded=true]]:z-1 [&_tr[data-expanded=true]]:bg-default";
+export function useProTableView(props) {
+  const {
+    data,
+    createRow,
+    updateRow,
+    deleteRow,
+    stats,
+    fetchList,
+    rowSelection,
+    onUpdateRowSelection,
+    tblProps,
+    tblWhereQueryProps,
+    tblHeaderProps,
+    tblPaginationProps,
+    tblContextMenuItems
+  } = useTable(props);
+  const thClass = computed(() => {
+    const classList = [];
+    if (!props.singleRow) {
+      classList.push("[&:has([role=checkbox])]:pe-2");
+    }
+    if (!props.singleColumn) {
+      classList.push("border-b");
+    }
+    return classList.join(" ");
+  });
+  const tdClass = computed(() => {
+    const classList = [];
+    if (!props.singleRow) {
+      classList.push("border-l first:border-l-0 [&:has([role=checkbox])]:pe-2");
+    }
+    if (!props.singleColumn) {
+      classList.push("group-has-[td:not(:empty)]:border-b");
+      if (props.hideLastRowBorder) {
+        classList.push("[tr:last-child_td]:border-b-0");
+      }
+    }
+    return classList.join(" ");
+  });
+  const tableWidth = ref(0);
+  const tableDiv = useTemplateRef("table");
+  let resizeObserver = null;
+  let scrollContainer = null;
+  const showLeftPinnedShadow = ref(false);
+  const showRightPinnedShadow = ref(false);
+  const hasVerticalOverflow = ref(false);
+  const pinnedShadowClasses = computed(() => [
+    PINNED_SHADOW_CLASSES.left.base,
+    PINNED_SHADOW_CLASSES.right.base,
+    showLeftPinnedShadow.value ? PINNED_SHADOW_CLASSES.left.show : PINNED_SHADOW_CLASSES.left.hide,
+    showRightPinnedShadow.value ? PINNED_SHADOW_CLASSES.right.show : PINNED_SHADOW_CLASSES.right.hide
+  ]);
+  const HIDE_LAST_ROW_BORDER_CLASS = "[&_tbody_tr:last-child_td]:border-b-0";
+  const tblClasses = computed(() => [pinnedShadowClasses.value, EXPANDED_STICKY_CLASS, hasVerticalOverflow.value && HIDE_LAST_ROW_BORDER_CLASS]);
+  const tblUi = computed(() => ({ root: "relative overflow-clip", th: thClass.value, td: tdClass.value }));
+  function updateTableWidth() {
+    if (tableDiv.value) {
+      tableWidth.value = tableDiv.value.offsetWidth;
+    }
+  }
+  function checkShadowVisibility() {
+    if (!scrollContainer) return;
+    const { scrollLeft, scrollWidth, clientWidth, scrollHeight, clientHeight } = scrollContainer;
+    showLeftPinnedShadow.value = scrollLeft > 0;
+    showRightPinnedShadow.value = scrollLeft + clientWidth < scrollWidth - 1;
+    hasVerticalOverflow.value = scrollHeight > clientHeight + 1;
+  }
+  function handleScroll(e) {
+    const target = e.target;
+    const { scrollLeft, scrollWidth, clientWidth } = target;
+    showLeftPinnedShadow.value = scrollLeft > 0;
+    showRightPinnedShadow.value = scrollLeft + clientWidth < scrollWidth - 1;
+  }
+  onMounted(() => {
+    nextTick(() => {
+      if (!tableDiv.value) return;
+      const selectors = ["[data-reka-scroll-area-viewport]", ".overflow-x-auto", "[data-scroll-container]", ".overflow-auto", 'div[style*="overflow"]'];
+      for (const selector of selectors) {
+        scrollContainer = tableDiv.value.querySelector(selector);
+        if (scrollContainer) break;
+      }
+      if (scrollContainer) {
+        scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+      }
+      if (tableDiv.value) {
+        resizeObserver = new ResizeObserver(() => {
+          updateTableWidth();
+          nextTick(() => checkShadowVisibility());
+        });
+        resizeObserver.observe(tableDiv.value);
+        updateTableWidth();
+        checkShadowVisibility();
+      }
+    });
+  });
+  watch(data, () => {
+    nextTick(() => checkShadowVisibility());
+  }, { flush: "post" });
+  onUnmounted(() => {
+    if (resizeObserver && tableDiv.value) {
+      resizeObserver.unobserve(tableDiv.value);
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (scrollContainer) {
+      scrollContainer.removeEventListener("scroll", handleScroll);
+      scrollContainer = null;
+    }
+  });
+  return {
+    // data
+    data,
+    createRow,
+    updateRow,
+    deleteRow,
+    stats,
+    // crud
+    fetchList,
+    // row selection
+    rowSelection,
+    onUpdateRowSelection,
+    // props for sub-components
+    tblProps,
+    tblWhereQueryProps,
+    tblHeaderProps,
+    tblPaginationProps,
+    // context menu
+    tblContextMenuItems,
+    // view
+    tableWidth,
+    updateTableWidth,
+    tblClasses,
+    tblUi
+  };
+}

package/dist/runtime/composables/useApp.d.ts

@@ -0,0 +1,22 @@
+import { type CustomAppConfig, type I18nLocale } from '#v/types';
+export declare const defaultAppSettings: CustomAppConfig;
+export declare const useApp: () => {
+    themeSettingsVisible: import("vue").Ref<boolean, boolean>;
+    changelogVisible: import("vue").Ref<boolean, boolean>;
+    appConfig: import("@vueuse/core").RemovableRef<CustomAppConfig>;
+    resetAppConfig: () => CustomAppConfig;
+    updatePrimaryColor: (color: string) => void;
+    updateBlackAsPrimary: (value: boolean) => void;
+    updateNeutralColor: (color: string) => void;
+    updateRadius: (radius: number) => void;
+    updateLocale: (locale: I18nLocale) => void;
+    keepalive: import("vue").WritableComputedRef<boolean, boolean>;
+    setKeepalive: (value: boolean) => boolean;
+    isMobile: import("vue").ComputedRef<boolean>;
+    isSmallerThanMd: import("vue").ComputedRef<boolean>;
+    redirectConfirm: import("vue").Ref<boolean, boolean>;
+    redirectConfirmTitle: import("vue").Ref<string, string>;
+    redirectConfirmMsg: import("vue").Ref<string, string>;
+    askRedirectConfirmBeforeLeave: (title: string, msg: string) => void;
+    clearRedirectConfirm: () => void;
+};