@shwfed/nuxt 0.11.25 → 0.11.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json
CHANGED
|
@@ -148,7 +148,8 @@ function translate(column) {
|
|
|
148
148
|
}
|
|
149
149
|
const columns = computed(() => currentConfig.value?.columns.map((column) => translate(column)) ?? []);
|
|
150
150
|
const data = computed(() => props.data);
|
|
151
|
-
const
|
|
151
|
+
const isPaginationEnabled = computed(() => currentConfig.value?.props?.initialState?.pagination?.pageSize !== void 0);
|
|
152
|
+
const isManualPagination = computed(() => isPaginationEnabled.value && props.rowCount !== void 0);
|
|
152
153
|
const totalItems = computed(() => props.rowCount ?? data.value.length);
|
|
153
154
|
const paginationLeft = computed(() => currentConfig.value?.paginationLeft ?? "");
|
|
154
155
|
const paginationRight = computed(() => currentConfig.value?.paginationRight ?? "");
|
|
@@ -190,6 +191,9 @@ function handlePaginationPageSizeChange(value) {
|
|
|
190
191
|
tableApi.setPageSize(nextPageSize);
|
|
191
192
|
}
|
|
192
193
|
function syncPaginationPageSize() {
|
|
194
|
+
if (!isPaginationEnabled.value) {
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
193
197
|
const nextPageSize = resolvePaginationPageSize(
|
|
194
198
|
tableApi.getState().pagination.pageSize,
|
|
195
199
|
resolvedPaginationPageSizes.value
|
|
@@ -283,7 +287,7 @@ const baseTableOptions = {
|
|
|
283
287
|
return isManualPagination.value;
|
|
284
288
|
},
|
|
285
289
|
get rowCount() {
|
|
286
|
-
return props.rowCount;
|
|
290
|
+
return isPaginationEnabled.value ? props.rowCount : void 0;
|
|
287
291
|
},
|
|
288
292
|
get getRowId() {
|
|
289
293
|
return currentConfig.value?.getRowId ? getRowId : void 0;
|
|
@@ -358,9 +362,11 @@ watch(currentConfig, (config) => {
|
|
|
358
362
|
syncPaginationPageSize();
|
|
359
363
|
}, { immediate: true });
|
|
360
364
|
defineExpose(tableApi);
|
|
365
|
+
const rows = computed(() => isPaginationEnabled.value ? tableApi.getRowModel().rows : tableApi.getPrePaginationRowModel().rows);
|
|
366
|
+
const maxPage = computed(() => isPaginationEnabled.value ? Math.max(tableApi.getPageCount(), 1) : 1);
|
|
361
367
|
const rowVirtualizer = useVirtualizer(
|
|
362
368
|
computed(() => ({
|
|
363
|
-
count:
|
|
369
|
+
count: rows.value.length,
|
|
364
370
|
estimateSize: () => 35,
|
|
365
371
|
getScrollElement: () => containerRef.value,
|
|
366
372
|
overscan: 30
|
|
@@ -373,8 +379,6 @@ function measureRow(el) {
|
|
|
373
379
|
return;
|
|
374
380
|
rowVirtualizer.value.measureElement(el);
|
|
375
381
|
}
|
|
376
|
-
const rows = computed(() => tableApi.getRowModel().rows);
|
|
377
|
-
const maxPage = computed(() => Math.max(tableApi.getPageCount(), 1));
|
|
378
382
|
function isStyleRecord(x) {
|
|
379
383
|
return typeof x === "object" && x !== null && !Array.isArray(x);
|
|
380
384
|
}
|
|
@@ -842,7 +846,7 @@ export {
|
|
|
842
846
|
</template>
|
|
843
847
|
</i18n-t>
|
|
844
848
|
<label
|
|
845
|
-
v-if="resolvedPaginationPageSizes"
|
|
849
|
+
v-if="isPaginationEnabled && resolvedPaginationPageSizes"
|
|
846
850
|
data-slot="table-pagination-page-size"
|
|
847
851
|
class="items-center gap-2 text-xs text-zinc-500 hidden @lg:flex"
|
|
848
852
|
>
|
|
@@ -862,103 +866,105 @@ export {
|
|
|
862
866
|
</NativeSelectOption>
|
|
863
867
|
</NativeSelect>
|
|
864
868
|
</label>
|
|
865
|
-
<
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
<Pagination.List
|
|
873
|
-
v-slot="{ items }"
|
|
874
|
-
class="flex items-center gap-1"
|
|
869
|
+
<template v-if="isPaginationEnabled">
|
|
870
|
+
<Pagination.Root
|
|
871
|
+
show-edges
|
|
872
|
+
:total="totalItems"
|
|
873
|
+
:items-per-page="tableApi.getState().pagination.pageSize"
|
|
874
|
+
:page="tableApi.getState().pagination.pageIndex + 1"
|
|
875
|
+
@update:page="(page2) => tableApi.setPageIndex(page2 - 1)"
|
|
875
876
|
>
|
|
876
|
-
<Pagination.
|
|
877
|
-
|
|
877
|
+
<Pagination.List
|
|
878
|
+
v-slot="{ items }"
|
|
879
|
+
class="flex items-center gap-1"
|
|
880
|
+
>
|
|
881
|
+
<Pagination.First
|
|
882
|
+
:class="[
|
|
878
883
|
'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
|
|
879
884
|
'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
|
|
880
885
|
]"
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
886
|
+
>
|
|
887
|
+
<Icon
|
|
888
|
+
icon="radix-icons:double-arrow-left"
|
|
889
|
+
class="w-4 h-4"
|
|
890
|
+
/>
|
|
891
|
+
</Pagination.First>
|
|
892
|
+
<Pagination.Prev
|
|
893
|
+
:class="[
|
|
889
894
|
'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
|
|
890
895
|
'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
|
|
891
896
|
]"
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
897
|
+
>
|
|
898
|
+
<Icon
|
|
899
|
+
icon="radix-icons:chevron-left"
|
|
900
|
+
class="w-4 h-4"
|
|
901
|
+
/>
|
|
902
|
+
</Pagination.Prev>
|
|
898
903
|
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
904
|
+
<template
|
|
905
|
+
v-for="(page, pageItemIndex) in items"
|
|
906
|
+
:key="page.type === 'page' ? `${page.type}-${page.value}` : `${page.type}-${pageItemIndex}`"
|
|
907
|
+
>
|
|
908
|
+
<Pagination.ListItem
|
|
909
|
+
v-if="page.type === 'page'"
|
|
910
|
+
:class="[
|
|
906
911
|
'w-7 h-7 items-center justify-center rounded text-xs bg-transparent',
|
|
907
912
|
'data-selected:text-(--primary) hover:bg-zinc-100 transition cursor-pointer',
|
|
908
913
|
page.value - 1 === tableApi.getState().pagination.pageIndex ? '' : 'hidden @md:flex'
|
|
909
914
|
]"
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
915
|
+
:value="page.value"
|
|
916
|
+
>
|
|
917
|
+
{{ page.value }}
|
|
918
|
+
</Pagination.ListItem>
|
|
919
|
+
<Pagination.Ellipsis
|
|
920
|
+
v-else
|
|
921
|
+
class="w-7 h-7 items-center justify-center text-zinc-400 hidden @md:flex"
|
|
922
|
+
>
|
|
923
|
+
…
|
|
924
|
+
</Pagination.Ellipsis>
|
|
925
|
+
</template>
|
|
921
926
|
|
|
922
|
-
|
|
923
|
-
|
|
927
|
+
<Pagination.Next
|
|
928
|
+
:class="[
|
|
924
929
|
'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
|
|
925
930
|
'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
|
|
926
931
|
]"
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
932
|
+
>
|
|
933
|
+
<Icon
|
|
934
|
+
icon="radix-icons:chevron-right"
|
|
935
|
+
class="w-4 h-4"
|
|
936
|
+
/>
|
|
937
|
+
</Pagination.Next>
|
|
938
|
+
<Pagination.Last
|
|
939
|
+
:class="[
|
|
935
940
|
'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
|
|
936
941
|
'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
|
|
937
942
|
]"
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
943
|
+
>
|
|
944
|
+
<Icon
|
|
945
|
+
icon="radix-icons:double-arrow-right"
|
|
946
|
+
class="w-4 h-4"
|
|
947
|
+
/>
|
|
948
|
+
</Pagination.Last>
|
|
949
|
+
</Pagination.List>
|
|
950
|
+
</Pagination.Root>
|
|
951
|
+
<i18n-t
|
|
952
|
+
keypath="goto"
|
|
953
|
+
tag="div"
|
|
954
|
+
class="text-xs items-center gap-2 hidden @lg:flex"
|
|
955
|
+
>
|
|
956
|
+
<template #page>
|
|
957
|
+
<NumberField
|
|
958
|
+
:model-value="tableApi.getState().pagination.pageIndex + 1"
|
|
959
|
+
:min="1"
|
|
960
|
+
:max="maxPage"
|
|
961
|
+
@update:model-value="(value) => tableApi.setPageIndex(value - 1)"
|
|
962
|
+
>
|
|
963
|
+
<NumberFieldInput class="h-6 w-16 text-xs" />
|
|
964
|
+
</NumberField>
|
|
965
|
+
</template>
|
|
966
|
+
</i18n-t>
|
|
967
|
+
</template>
|
|
962
968
|
</div>
|
|
963
969
|
<div
|
|
964
970
|
:class="[
|
|
@@ -577,6 +577,7 @@ function initializeInitialStateGroups(config) {
|
|
|
577
577
|
}
|
|
578
578
|
function resetDraftState(config) {
|
|
579
579
|
const nextPaginationPageSizes = getInitialPaginationPageSizes(config);
|
|
580
|
+
const initialPageSize = getInitialPageSize(config);
|
|
580
581
|
draftBaseConfig.value = config;
|
|
581
582
|
draftColumnTree.value = buildTableConfiguratorColumnTree(config.columns);
|
|
582
583
|
draftGetRowId.value = config.getRowId;
|
|
@@ -586,7 +587,7 @@ function resetDraftState(config) {
|
|
|
586
587
|
draftCellStyles.value = config.cellStyles;
|
|
587
588
|
draftPaginationLeft.value = config.paginationLeft;
|
|
588
589
|
draftPaginationRight.value = config.paginationRight;
|
|
589
|
-
draftPageSize.value = resolvePaginationPageSize(
|
|
590
|
+
draftPageSize.value = initialPageSize === void 0 ? void 0 : resolvePaginationPageSize(initialPageSize, nextPaginationPageSizes);
|
|
590
591
|
draftPaginationPageSizes.value = createPaginationPageSizeItems(nextPaginationPageSizes);
|
|
591
592
|
initializeInitialStateGroups(config);
|
|
592
593
|
syncDraftColumnTreeRootOrder();
|
|
@@ -1238,9 +1239,12 @@ function buildNextPaginationPageSizes() {
|
|
|
1238
1239
|
}
|
|
1239
1240
|
function buildNextPaginationState() {
|
|
1240
1241
|
const currentPagination = draftBaseConfig.value.props?.initialState?.pagination;
|
|
1242
|
+
if (draftPageSize.value === void 0) {
|
|
1243
|
+
return void 0;
|
|
1244
|
+
}
|
|
1241
1245
|
const nextPaginationPageSizes = buildNextPaginationPageSizes();
|
|
1242
1246
|
const nextPageSize = resolvePaginationPageSize(draftPageSize.value, nextPaginationPageSizes);
|
|
1243
|
-
if (
|
|
1247
|
+
if (nextPageSize === void 0) {
|
|
1244
1248
|
return void 0;
|
|
1245
1249
|
}
|
|
1246
1250
|
return {
|
|
@@ -1249,6 +1253,27 @@ function buildNextPaginationState() {
|
|
|
1249
1253
|
};
|
|
1250
1254
|
}
|
|
1251
1255
|
function buildDraftConfig() {
|
|
1256
|
+
const baseInitialState = draftBaseConfig.value.props?.initialState;
|
|
1257
|
+
const nextPaginationState = buildNextPaginationState();
|
|
1258
|
+
const nextInitialState = {
|
|
1259
|
+
columnPinning: {
|
|
1260
|
+
...baseInitialState?.columnPinning,
|
|
1261
|
+
left: buildInitialStateLeafColumnIds(leftPinnedRootItemIds.value),
|
|
1262
|
+
right: buildInitialStateLeafColumnIds(rightPinnedRootItemIds.value)
|
|
1263
|
+
},
|
|
1264
|
+
columnOrder: buildInitialStateLeafColumnIds(centerRootItemIds.value),
|
|
1265
|
+
...baseInitialState?.columnVisibility ? { columnVisibility: baseInitialState.columnVisibility } : {},
|
|
1266
|
+
...baseInitialState?.rowPinning ? { rowPinning: baseInitialState.rowPinning } : {},
|
|
1267
|
+
...baseInitialState?.columnFilters ? { columnFilters: baseInitialState.columnFilters } : {},
|
|
1268
|
+
...baseInitialState?.globalFilter !== void 0 ? { globalFilter: baseInitialState.globalFilter } : {},
|
|
1269
|
+
...baseInitialState?.sorting ? { sorting: baseInitialState.sorting } : {},
|
|
1270
|
+
...baseInitialState?.expanded !== void 0 ? { expanded: baseInitialState.expanded } : {},
|
|
1271
|
+
...baseInitialState?.grouping ? { grouping: baseInitialState.grouping } : {},
|
|
1272
|
+
...baseInitialState?.columnSizing ? { columnSizing: baseInitialState.columnSizing } : {},
|
|
1273
|
+
...baseInitialState?.columnSizingInfo ? { columnSizingInfo: baseInitialState.columnSizingInfo } : {},
|
|
1274
|
+
...baseInitialState?.rowSelection ? { rowSelection: baseInitialState.rowSelection } : {},
|
|
1275
|
+
...nextPaginationState ? { pagination: nextPaginationState } : {}
|
|
1276
|
+
};
|
|
1252
1277
|
return TableConfigC.safeParse({
|
|
1253
1278
|
...draftBaseConfig.value,
|
|
1254
1279
|
getRowId: draftGetRowId.value,
|
|
@@ -1262,16 +1287,7 @@ function buildDraftConfig() {
|
|
|
1262
1287
|
columns: materializeTableConfiguratorColumnTree(draftColumnTree.value).map(normalizeColumn),
|
|
1263
1288
|
props: {
|
|
1264
1289
|
...draftBaseConfig.value.props,
|
|
1265
|
-
initialState:
|
|
1266
|
-
...draftBaseConfig.value.props?.initialState,
|
|
1267
|
-
columnPinning: {
|
|
1268
|
-
...draftBaseConfig.value.props?.initialState?.columnPinning,
|
|
1269
|
-
left: buildInitialStateLeafColumnIds(leftPinnedRootItemIds.value),
|
|
1270
|
-
right: buildInitialStateLeafColumnIds(rightPinnedRootItemIds.value)
|
|
1271
|
-
},
|
|
1272
|
-
columnOrder: buildInitialStateLeafColumnIds(centerRootItemIds.value),
|
|
1273
|
-
pagination: buildNextPaginationState()
|
|
1274
|
-
}
|
|
1290
|
+
initialState: nextInitialState
|
|
1275
1291
|
}
|
|
1276
1292
|
});
|
|
1277
1293
|
}
|