@shwfed/nuxt 0.11.25 → 0.11.27

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.11.25",
+  "version": "0.11.27",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -148,7 +148,8 @@ function translate(column) {
 }
 const columns = computed(() => currentConfig.value?.columns.map((column) => translate(column)) ?? []);
 const data = computed(() => props.data);
-const isManualPagination = computed(() => props.rowCount !== void 0);
+const isPaginationEnabled = computed(() => currentConfig.value?.props?.initialState?.pagination?.pageSize !== void 0);
+const isManualPagination = computed(() => isPaginationEnabled.value && props.rowCount !== void 0);
 const totalItems = computed(() => props.rowCount ?? data.value.length);
 const paginationLeft = computed(() => currentConfig.value?.paginationLeft ?? "");
 const paginationRight = computed(() => currentConfig.value?.paginationRight ?? "");
@@ -190,6 +191,9 @@ function handlePaginationPageSizeChange(value) {
   tableApi.setPageSize(nextPageSize);
 }
 function syncPaginationPageSize() {
+  if (!isPaginationEnabled.value) {
+    return;
+  }
   const nextPageSize = resolvePaginationPageSize(
     tableApi.getState().pagination.pageSize,
     resolvedPaginationPageSizes.value
@@ -283,7 +287,7 @@ const baseTableOptions = {
     return isManualPagination.value;
   },
   get rowCount() {
-    return props.rowCount;
+    return isPaginationEnabled.value ? props.rowCount : void 0;
   },
   get getRowId() {
     return currentConfig.value?.getRowId ? getRowId : void 0;
@@ -358,9 +362,11 @@ watch(currentConfig, (config) => {
   syncPaginationPageSize();
 }, { immediate: true });
 defineExpose(tableApi);
+const rows = computed(() => isPaginationEnabled.value ? tableApi.getRowModel().rows : tableApi.getPrePaginationRowModel().rows);
+const maxPage = computed(() => isPaginationEnabled.value ? Math.max(tableApi.getPageCount(), 1) : 1);
 const rowVirtualizer = useVirtualizer(
   computed(() => ({
-    count: tableApi.getRowModel().rows.length,
+    count: rows.value.length,
     estimateSize: () => 35,
     getScrollElement: () => containerRef.value,
     overscan: 30
@@ -373,8 +379,6 @@ function measureRow(el) {
     return;
   rowVirtualizer.value.measureElement(el);
 }
-const rows = computed(() => tableApi.getRowModel().rows);
-const maxPage = computed(() => Math.max(tableApi.getPageCount(), 1));
 function isStyleRecord(x) {
   return typeof x === "object" && x !== null && !Array.isArray(x);
 }
@@ -818,7 +822,10 @@ export {
           </div>
         </div>
 
-        <div class="flex items-center justify-between w-full py-2 gap-2 text-sm text-zinc-600 @container">
+        <div
+          v-if="isPaginationEnabled"
+          class="flex items-center justify-between w-full py-2 gap-2 text-sm text-zinc-600 @container"
+        >
           <div
             :class="[
   'relative p-1 flex-1 prose prose-zinc text-xs invisible @lg:visible'
@@ -842,7 +849,7 @@ export {
               </template>
             </i18n-t>
             <label
-              v-if="resolvedPaginationPageSizes"
+              v-if="isPaginationEnabled && resolvedPaginationPageSizes"
               data-slot="table-pagination-page-size"
               class="items-center gap-2 text-xs text-zinc-500 hidden @lg:flex"
             >
@@ -862,103 +869,105 @@ export {
                 </NativeSelectOption>
               </NativeSelect>
             </label>
-            <Pagination.Root
-              show-edges
-              :total="totalItems"
-              :items-per-page="tableApi.getState().pagination.pageSize"
-              :page="tableApi.getState().pagination.pageIndex + 1"
-              @update:page="(page2) => tableApi.setPageIndex(page2 - 1)"
-            >
-              <Pagination.List
-                v-slot="{ items }"
-                class="flex items-center gap-1"
+            <template v-if="isPaginationEnabled">
+              <Pagination.Root
+                show-edges
+                :total="totalItems"
+                :items-per-page="tableApi.getState().pagination.pageSize"
+                :page="tableApi.getState().pagination.pageIndex + 1"
+                @update:page="(page2) => tableApi.setPageIndex(page2 - 1)"
               >
-                <Pagination.First
-                  :class="[
+                <Pagination.List
+                  v-slot="{ items }"
+                  class="flex items-center gap-1"
+                >
+                  <Pagination.First
+                    :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
   'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
-                >
-                  <Icon
-                    icon="radix-icons:double-arrow-left"
-                    class="w-4 h-4"
-                  />
-                </Pagination.First>
-                <Pagination.Prev
-                  :class="[
+                  >
+                    <Icon
+                      icon="radix-icons:double-arrow-left"
+                      class="w-4 h-4"
+                    />
+                  </Pagination.First>
+                  <Pagination.Prev
+                    :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
   'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
-                >
-                  <Icon
-                    icon="radix-icons:chevron-left"
-                    class="w-4 h-4"
-                  />
-                </Pagination.Prev>
+                  >
+                    <Icon
+                      icon="radix-icons:chevron-left"
+                      class="w-4 h-4"
+                    />
+                  </Pagination.Prev>
 
-                <template
-                  v-for="(page, index) in items"
-                  :key="page.type === 'page' ? `${page.type}-${page.value}` : `${page.type}-${index}`"
-                >
-                  <Pagination.ListItem
-                    v-if="page.type === 'page'"
-                    :class="[
+                  <template
+                    v-for="(page, pageItemIndex) in items"
+                    :key="page.type === 'page' ? `${page.type}-${page.value}` : `${page.type}-${pageItemIndex}`"
+                  >
+                    <Pagination.ListItem
+                      v-if="page.type === 'page'"
+                      :class="[
   'w-7 h-7 items-center justify-center rounded text-xs bg-transparent',
   'data-selected:text-(--primary) hover:bg-zinc-100 transition cursor-pointer',
   page.value - 1 === tableApi.getState().pagination.pageIndex ? '' : 'hidden @md:flex'
 ]"
-                    :value="page.value"
-                  >
-                    {{ page.value }}
-                  </Pagination.ListItem>
-                  <Pagination.Ellipsis
-                    v-else
-                    class="w-7 h-7 items-center justify-center text-zinc-400 hidden @md:flex"
-                  >
-                    &#8230;
-                  </Pagination.Ellipsis>
-                </template>
+                      :value="page.value"
+                    >
+                      {{ page.value }}
+                    </Pagination.ListItem>
+                    <Pagination.Ellipsis
+                      v-else
+                      class="w-7 h-7 items-center justify-center text-zinc-400 hidden @md:flex"
+                    >
+                      &#8230;
+                    </Pagination.Ellipsis>
+                  </template>
 
-                <Pagination.Next
-                  :class="[
+                  <Pagination.Next
+                    :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
   'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
-                >
-                  <Icon
-                    icon="radix-icons:chevron-right"
-                    class="w-4 h-4"
-                  />
-                </Pagination.Next>
-                <Pagination.Last
-                  :class="[
+                  >
+                    <Icon
+                      icon="radix-icons:chevron-right"
+                      class="w-4 h-4"
+                    />
+                  </Pagination.Next>
+                  <Pagination.Last
+                    :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
   'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
-                >
-                  <Icon
-                    icon="radix-icons:double-arrow-right"
-                    class="w-4 h-4"
-                  />
-                </Pagination.Last>
-              </Pagination.List>
-            </Pagination.Root>
-            <i18n-t
-              keypath="goto"
-              tag="div"
-              class="text-xs items-center gap-2 hidden @lg:flex"
-            >
-              <template #page>
-                <NumberField
-                  :model-value="tableApi.getState().pagination.pageIndex + 1"
-                  :min="1"
-                  :max="maxPage"
-                  @update:model-value="(value) => tableApi.setPageIndex(value - 1)"
-                >
-                  <NumberFieldInput class="h-6 w-16 text-xs" />
-                </NumberField>
-              </template>
-            </i18n-t>
+                  >
+                    <Icon
+                      icon="radix-icons:double-arrow-right"
+                      class="w-4 h-4"
+                    />
+                  </Pagination.Last>
+                </Pagination.List>
+              </Pagination.Root>
+              <i18n-t
+                keypath="goto"
+                tag="div"
+                class="text-xs items-center gap-2 hidden @lg:flex"
+              >
+                <template #page>
+                  <NumberField
+                    :model-value="tableApi.getState().pagination.pageIndex + 1"
+                    :min="1"
+                    :max="maxPage"
+                    @update:model-value="(value) => tableApi.setPageIndex(value - 1)"
+                  >
+                    <NumberFieldInput class="h-6 w-16 text-xs" />
+                  </NumberField>
+                </template>
+              </i18n-t>
+            </template>
           </div>
           <div
             :class="[

package/dist/runtime/components/ui/table-configurator/TableConfiguratorDialog.vue

@@ -577,6 +577,7 @@ function initializeInitialStateGroups(config) {
 }
 function resetDraftState(config) {
   const nextPaginationPageSizes = getInitialPaginationPageSizes(config);
+  const initialPageSize = getInitialPageSize(config);
   draftBaseConfig.value = config;
   draftColumnTree.value = buildTableConfiguratorColumnTree(config.columns);
   draftGetRowId.value = config.getRowId;
@@ -586,7 +587,7 @@ function resetDraftState(config) {
   draftCellStyles.value = config.cellStyles;
   draftPaginationLeft.value = config.paginationLeft;
   draftPaginationRight.value = config.paginationRight;
-  draftPageSize.value = resolvePaginationPageSize(getInitialPageSize(config), nextPaginationPageSizes);
+  draftPageSize.value = initialPageSize === void 0 ? void 0 : resolvePaginationPageSize(initialPageSize, nextPaginationPageSizes);
   draftPaginationPageSizes.value = createPaginationPageSizeItems(nextPaginationPageSizes);
   initializeInitialStateGroups(config);
   syncDraftColumnTreeRootOrder();
@@ -1238,9 +1239,12 @@ function buildNextPaginationPageSizes() {
 }
 function buildNextPaginationState() {
   const currentPagination = draftBaseConfig.value.props?.initialState?.pagination;
+  if (draftPageSize.value === void 0) {
+    return void 0;
+  }
   const nextPaginationPageSizes = buildNextPaginationPageSizes();
   const nextPageSize = resolvePaginationPageSize(draftPageSize.value, nextPaginationPageSizes);
-  if (!currentPagination && nextPageSize === void 0) {
+  if (nextPageSize === void 0) {
     return void 0;
   }
   return {
@@ -1249,6 +1253,27 @@ function buildNextPaginationState() {
   };
 }
 function buildDraftConfig() {
+  const baseInitialState = draftBaseConfig.value.props?.initialState;
+  const nextPaginationState = buildNextPaginationState();
+  const nextInitialState = {
+    columnPinning: {
+      ...baseInitialState?.columnPinning,
+      left: buildInitialStateLeafColumnIds(leftPinnedRootItemIds.value),
+      right: buildInitialStateLeafColumnIds(rightPinnedRootItemIds.value)
+    },
+    columnOrder: buildInitialStateLeafColumnIds(centerRootItemIds.value),
+    ...baseInitialState?.columnVisibility ? { columnVisibility: baseInitialState.columnVisibility } : {},
+    ...baseInitialState?.rowPinning ? { rowPinning: baseInitialState.rowPinning } : {},
+    ...baseInitialState?.columnFilters ? { columnFilters: baseInitialState.columnFilters } : {},
+    ...baseInitialState?.globalFilter !== void 0 ? { globalFilter: baseInitialState.globalFilter } : {},
+    ...baseInitialState?.sorting ? { sorting: baseInitialState.sorting } : {},
+    ...baseInitialState?.expanded !== void 0 ? { expanded: baseInitialState.expanded } : {},
+    ...baseInitialState?.grouping ? { grouping: baseInitialState.grouping } : {},
+    ...baseInitialState?.columnSizing ? { columnSizing: baseInitialState.columnSizing } : {},
+    ...baseInitialState?.columnSizingInfo ? { columnSizingInfo: baseInitialState.columnSizingInfo } : {},
+    ...baseInitialState?.rowSelection ? { rowSelection: baseInitialState.rowSelection } : {},
+    ...nextPaginationState ? { pagination: nextPaginationState } : {}
+  };
   return TableConfigC.safeParse({
     ...draftBaseConfig.value,
     getRowId: draftGetRowId.value,
@@ -1262,16 +1287,7 @@ function buildDraftConfig() {
     columns: materializeTableConfiguratorColumnTree(draftColumnTree.value).map(normalizeColumn),
     props: {
       ...draftBaseConfig.value.props,
-      initialState: {
-        ...draftBaseConfig.value.props?.initialState,
-        columnPinning: {
-          ...draftBaseConfig.value.props?.initialState?.columnPinning,
-          left: buildInitialStateLeafColumnIds(leftPinnedRootItemIds.value),
-          right: buildInitialStateLeafColumnIds(rightPinnedRootItemIds.value)
-        },
-        columnOrder: buildInitialStateLeafColumnIds(centerRootItemIds.value),
-        pagination: buildNextPaginationState()
-      }
+      initialState: nextInitialState
     }
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.11.25",
+  "version": "0.11.27",
   "description": "",
   "license": "MIT",
   "type": "module",