@serhiitupilow/nuxt-table 0.1.7 → 1.0.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@serhiitupilow/nuxt-table",
   "configKey": "nuxtTable",
-  "version": "0.1.7",
+  "version": "1.0.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/NuxtTable.vue

@@ -1,5 +1,11 @@
 <script setup>
-import { computed, getCurrentInstance, toRef } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeUpdate,
+  shallowRef,
+  toRef
+} from "vue";
 import { useNuxtTable } from "../composables/useNuxtTable";
 const props = defineProps({
   columns: { type: Array, required: true },
@@ -15,13 +21,17 @@ const props = defineProps({
 });
 const emit = defineEmits(["columnOrderChange", "manualSortChange", "manualFilterChange"]);
 const instance = getCurrentInstance();
+const vnodeProps = shallowRef(
+  instance?.vnode.props ?? null
+);
+onBeforeUpdate(() => {
+  vnodeProps.value = instance?.vnode.props ?? null;
+});
 const hasManualSortChangeListener = computed(() => {
-  const vnodeProps = instance?.vnode.props;
-  return Boolean(vnodeProps?.onManualSortChange);
+  return Boolean(vnodeProps.value?.onManualSortChange);
 });
 const hasManualFilterChangeListener = computed(() => {
-  const vnodeProps = instance?.vnode.props;
-  return Boolean(vnodeProps?.onManualFilterChange);
+  return Boolean(vnodeProps.value?.onManualFilterChange);
 });
 const defaultClassNames = {
   root: "nuxt-table",
@@ -80,15 +90,17 @@ const {
   storageKey: toRef(props, "storageKey"),
   rowKey: toRef(props, "rowKey"),
   enableColumnDnd: toRef(props, "enableColumnDnd"),
+  isManualSortMode: hasManualSortChangeListener,
+  isManualFilterMode: hasManualFilterChangeListener,
   onColumnOrderChange: (payload) => {
     emit("columnOrderChange", payload);
   },
-  onManualSortChange: hasManualSortChangeListener.value ? (payload) => {
+  onManualSortChange: (payload) => {
     emit("manualSortChange", payload);
-  } : void 0,
-  onManualFilterChange: hasManualFilterChangeListener.value ? (payload) => {
+  },
+  onManualFilterChange: (payload) => {
     emit("manualFilterChange", payload);
-  } : void 0
+  }
 });
 const displayedColumns = computed(() => {
   if (!props.enabledColumns) {
@@ -97,6 +109,12 @@ const displayedColumns = computed(() => {
   const enabledKeySet = new Set(props.enabledColumns);
   return orderedColumns.value.filter((column) => enabledKeySet.has(column.key));
 });
+const keyedRows = computed(() => {
+  return sortedRows.value.map((row, rowIndex) => ({
+    row,
+    key: resolveRowKey(row, rowIndex)
+  }));
+});
 </script>
 
 <template>
@@ -131,22 +149,22 @@ const displayedColumns = computed(() => {
         </thead>
         <tbody :class="mergedClassNames.tableBody">
           <tr
-            v-for="(row, rowIndex) in sortedRows"
-            :key="resolveRowKey(row, rowIndex)"
+            v-for="rowEntry in keyedRows"
+            :key="rowEntry.key"
             :class="mergedClassNames.bodyRow"
           >
             <NuxtTableBodyCell
               v-for="column in displayedColumns"
-              :key="`${resolveRowKey(row, rowIndex)}-${column.key}`"
-              :row="row"
-              :row-key="resolveRowKey(row, rowIndex)"
+              :key="`${rowEntry.key}-${column.key}`"
+              :row="rowEntry.row"
+              :row-key="rowEntry.key"
               :column="column"
-              :value="resolveDisplayValue(row, column)"
+              :value="resolveDisplayValue(rowEntry.row, column)"
               :column-style="getColumnStyle(column.key)"
               :class-names="mergedClassNames"
             />
           </tr>
-          <tr v-if="sortedRows.length === 0">
+          <tr v-if="keyedRows.length === 0">
             <td
               :colspan="Math.max(displayedColumns.length, 1)"
               :class="mergedClassNames.emptyCell"

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

@@ -17,13 +17,7 @@ export declare function useNuxtTable(options: UseNuxtTableOptions): {
     onHeaderDragLeave: (columnKey: string) => void;
     onHeaderDrop: (targetColumnKey: string) => Promise<void>;
     onHeaderDragEnd: () => void;
-    getColumnStyle: (columnKey: string) => {
-        width?: undefined;
-        minWidth?: undefined;
-    } | {
-        width: string;
-        minWidth: string;
-    };
+    getColumnStyle: (columnKey: string) => Record<string, string>;
     startColumnResize: (event: MouseEvent, columnKey: string) => void;
     setHeaderElement: (columnKey: string, element: Element | ComponentPublicInstance | null) => void;
     resolveDisplayValue: (row: TableRow, column: NuxtTableColumn) => any;

package/dist/runtime/composables/useNuxtTable.js

@@ -7,6 +7,7 @@ import {
   watch
 } from "vue";
 const MIN_COLUMN_WIDTH = 140;
+const EMPTY_STYLE = {};
 export function useNuxtTable(options) {
   const columnOrder = ref([]);
   const enabledColumnKeys = ref([]);
@@ -19,11 +20,20 @@ export function useNuxtTable(options) {
   const hasLoadedPersistence = ref(false);
   const headerElements = ref({});
   const columnWidths = ref({});
+  const resolverPathCache = /* @__PURE__ */ new Map();
   const activeResize = ref(null);
-  const isManualSortMode = computed(() => Boolean(options.onManualSortChange));
-  const isManualFilterMode = computed(
-    () => Boolean(options.onManualFilterChange)
-  );
+  const isManualSortMode = computed(() => {
+    if (options.isManualSortMode) {
+      return options.isManualSortMode.value;
+    }
+    return Boolean(options.onManualSortChange);
+  });
+  const isManualFilterMode = computed(() => {
+    if (options.isManualFilterMode) {
+      return options.isManualFilterMode.value;
+    }
+    return Boolean(options.onManualFilterChange);
+  });
   const availableColumnKeys = computed(
     () => options.columns.value.map((column) => column.key)
   );
@@ -34,30 +44,60 @@ export function useNuxtTable(options) {
     return columnOrder.value.map((columnKey) => columnsByKey.value.get(columnKey)).filter((column) => Boolean(column));
   });
   const visibleColumns = computed(() => {
+    const enabledKeySet = new Set(enabledColumnKeys.value);
     return orderedColumns.value.filter(
-      (column) => enabledColumnKeys.value.includes(column.key)
+      (column) => enabledKeySet.has(column.key)
     );
   });
+  const activeTextFilters = computed(() => {
+    if (isManualFilterMode.value) {
+      return [];
+    }
+    const nextFilters = [];
+    for (const column of orderedColumns.value) {
+      const filterValue = filters.value[column.key];
+      if (!isFilterActive(filterValue)) {
+        continue;
+      }
+      nextFilters.push({
+        key: column.key,
+        resolver: column.filterKey ?? column.key,
+        filterText: String(filterValue ?? "").toLowerCase()
+      });
+    }
+    return nextFilters;
+  });
   const filteredRows = computed(() => {
+    if (isManualFilterMode.value) {
+      return options.rows.value;
+    }
+    const activeFilters = activeTextFilters.value;
+    if (activeFilters.length === 0) {
+      return options.rows.value;
+    }
     return options.rows.value.filter((row) => {
-      return orderedColumns.value.every((column) => {
-        const filterValue = filters.value[column.key];
-        if (!isFilterActive(filterValue)) {
-          return true;
-        }
-        if (isManualFilterMode.value) {
-          return true;
-        }
-        const candidate = resolveColumnValue(
-          row,
-          column.filterKey ?? column.key
-        );
+      return activeFilters.every(({ resolver, filterText }) => {
+        const candidate = resolveColumnValue(row, resolver);
         const candidateText = String(candidate ?? "").toLowerCase();
-        const filterText = String(filterValue ?? "").toLowerCase();
         return candidateText.includes(filterText);
       });
     });
   });
+  const columnStylesByKey = computed(() => {
+    const styles = {};
+    for (const [columnKey, width] of Object.entries(columnWidths.value)) {
+      if (!width) {
+        continue;
+      }
+      const safeWidth = Math.max(MIN_COLUMN_WIDTH, width);
+      const widthPx = `${safeWidth}px`;
+      styles[columnKey] = {
+        width: widthPx,
+        minWidth: widthPx
+      };
+    }
+    return styles;
+  });
   const sortedRows = computed(() => {
     if (!sortState.value) {
       return filteredRows.value;
@@ -83,13 +123,9 @@ export function useNuxtTable(options) {
     loadPersistedState();
     hasLoadedPersistence.value = true;
   });
-  watch(
-    () => options.columns.value,
-    () => {
-      initializeColumnState();
-    },
-    { deep: true }
-  );
+  watch(availableColumnKeys, () => {
+    initializeColumnState();
+  });
   watch(
     [columnOrder, enabledColumnKeys, columnWidths],
     () => {
@@ -123,7 +159,8 @@ export function useNuxtTable(options) {
       const keptKeys = columnOrder.value.filter(
         (key) => currentKeySet.has(key)
       );
-      const newKeys = currentKeys.filter((key) => !keptKeys.includes(key));
+      const keptKeySet = new Set(keptKeys);
+      const newKeys = currentKeys.filter((key) => !keptKeySet.has(key));
       columnOrder.value = [...keptKeys, ...newKeys];
     }
     if (!enabledColumnKeys.value.length) {
@@ -133,8 +170,9 @@ export function useNuxtTable(options) {
       const keptEnabledKeys = enabledColumnKeys.value.filter(
         (key) => currentKeySet.has(key)
       );
+      const keptEnabledKeySet = new Set(keptEnabledKeys);
       const missingEnabledKeys = currentKeys.filter(
-        (key) => !keptEnabledKeys.includes(key)
+        (key) => !keptEnabledKeySet.has(key)
       );
       enabledColumnKeys.value = [...keptEnabledKeys, ...missingEnabledKeys];
     }
@@ -157,17 +195,19 @@ export function useNuxtTable(options) {
       return;
     }
     try {
+      const availableKeySet = new Set(availableColumnKeys.value);
       const persistedOrder = localStorage.getItem(buildStorageKey("order"));
       if (persistedOrder) {
         const parsedOrder = JSON.parse(persistedOrder);
         if (Array.isArray(parsedOrder)) {
           const validPersistedOrder = parsedOrder.filter(
             (key) => {
-              return typeof key === "string" && availableColumnKeys.value.includes(key);
+              return typeof key === "string" && availableKeySet.has(key);
             }
           );
+          const validPersistedOrderSet = new Set(validPersistedOrder);
           const missingKeys = availableColumnKeys.value.filter(
-            (key) => !validPersistedOrder.includes(key)
+            (key) => !validPersistedOrderSet.has(key)
           );
           columnOrder.value = [...validPersistedOrder, ...missingKeys];
         }
@@ -180,7 +220,7 @@ export function useNuxtTable(options) {
         if (Array.isArray(parsedEnabledColumns)) {
           enabledColumnKeys.value = parsedEnabledColumns.filter(
             (key) => {
-              return typeof key === "string" && availableColumnKeys.value.includes(key);
+              return typeof key === "string" && availableKeySet.has(key);
             }
           );
         }
@@ -273,7 +313,8 @@ export function useNuxtTable(options) {
     });
   }
   function toggleColumn(columnKey) {
-    if (enabledColumnKeys.value.includes(columnKey)) {
+    const enabledKeySet = new Set(enabledColumnKeys.value);
+    if (enabledKeySet.has(columnKey)) {
       if (enabledColumnKeys.value.length === 1) {
         return;
       }
@@ -349,15 +390,7 @@ export function useNuxtTable(options) {
     dragOverColumnKey.value = null;
   }
   function getColumnStyle(columnKey) {
-    const width = columnWidths.value[columnKey];
-    if (!width) {
-      return {};
-    }
-    const safeWidth = Math.max(MIN_COLUMN_WIDTH, width);
-    return {
-      width: `${safeWidth}px`,
-      minWidth: `${safeWidth}px`
-    };
+    return columnStylesByKey.value[columnKey] ?? EMPTY_STYLE;
   }
   function startColumnResize(event, columnKey) {
     if (!import.meta.client) {
@@ -381,10 +414,7 @@ export function useNuxtTable(options) {
       MIN_COLUMN_WIDTH,
       Math.round(activeResize.value.startWidth + delta)
     );
-    columnWidths.value = {
-      ...columnWidths.value,
-      [activeResize.value.columnKey]: nextWidth
-    };
+    columnWidths.value[activeResize.value.columnKey] = nextWidth;
   }
   function onColumnResizeEnd() {
     stopResizing();
@@ -453,7 +483,11 @@ export function useNuxtTable(options) {
     if (typeof resolver === "function") {
       return resolver(row);
     }
-    const pathParts = resolver.split(".");
+    const cachedPath = resolverPathCache.get(resolver);
+    const pathParts = cachedPath ?? resolver.split(".");
+    if (!cachedPath) {
+      resolverPathCache.set(resolver, pathParts);
+    }
     let currentValue = row;
     for (const pathPart of pathParts) {
       if (currentValue == null) {

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

@@ -68,6 +68,8 @@ export interface UseNuxtTableOptions {
     storageKey: Ref<string>;
     rowKey: Ref<string | ((row: TableRow, index: number) => string | number)>;
     enableColumnDnd: Ref<boolean>;
+    isManualSortMode?: Ref<boolean>;
+    isManualFilterMode?: Ref<boolean>;
     onColumnOrderChange?: (payload: NuxtTableColumnOrderChange) => void;
     onManualSortChange?: (payload: NuxtTableManualSortChange) => void;
     onManualFilterChange?: (payload: NuxtTableManualFilterChange) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serhiitupilow/nuxt-table",
-  "version": "0.1.7",
+  "version": "1.0.0",
   "description": "Nuxt module with a functional table component (sorting, filtering, column visibility, resize, optional DnD)",
   "type": "module",
   "license": "MIT",