@vc-shell/create-vc-app 2.0.11 → 2.1.0-pr249.229549

package/dist/index.js

@@ -7,7 +7,7 @@ import { fileURLToPath as F } from "node:url";
 import A from "prompts";
 import r from "node:fs";
 import E from "ejs";
-const O = "2.0.11", V = {
+const O = "2.1.0-pr249.0229549", V = {
   version: O
 };
 function h(e) {

package/dist/templates/dynamic-module/_package.json.ejs

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
-    "@vc-shell/ts-config": "^2.0.11",
+    "@vc-shell/ts-config": "^2.1.0",
     "cross-env": "^7.0.3",
     "sass": "^1.87.0",
     "typescript": "^5.8.3",
@@ -18,8 +18,8 @@
     "vue-tsc": "^3.2.5"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^2.0.11",
-    "@vc-shell/framework": "^2.0.11",
+    "@vc-shell/config-generator": "^2.1.0",
+    "@vc-shell/framework": "^2.1.0",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   }

package/dist/templates/module/pages/list.vue.ejs

@@ -11,11 +11,11 @@
       v-model:sort-order="sortOrder"
       :items="data"
       :total-count="totalCount"
-      :pagination="{ currentPage, pages }"
+      :pagination="pagination"
       :searchable="true"
       :state-key="'<%- ModuleNameScreamingSnake %>'"
       @row-click="onRowClick"
-      @pagination-click="onPaginationClick"
+      @pagination-click="pagination.goToPage"
     >
       <!-- Add your columns here -->
       <VcColumn id="name" :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.NAME')" sortable />
@@ -25,9 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { useBlade, useDataTableSort, useTableQueryState, useFunctions, type IBladeToolbar } from "@vc-shell/framework";
+import { useBlade, useDataTableSort, useTableSearch, useDataTablePagination, useFunctions, type IBladeToolbar } from "@vc-shell/framework";
 import { VcBlade, VcDataTable, VcColumn } from "@vc-shell/framework/ui";
-import { computed, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import use<%- ModuleNamePascalCase %>List from "../composables/useList";
 import { useI18n } from "vue-i18n";
 
@@ -49,43 +49,29 @@ const { debounce } = useFunctions();
 const PAGE_SIZE = 20;
 
 const { sortField, sortOrder, sortExpression } = useDataTableSort({
+  stateKey: "<%- ModuleNameScreamingSnake %>",
   initialField: "createdDate",
   initialDirection: "DESC",
 });
 
 const { data, loading, totalCount, getItems } = use<%- ModuleNamePascalCase %>List();
 
-const searchValue = ref<string>();
-const currentPage = ref(1);
-const pages = computed(() => Math.ceil(totalCount.value / PAGE_SIZE) || 0);
-
-// Restore sort/search/page from the URL, then load once below.
-const restored = useTableQueryState("<%- ModuleNameScreamingSnake %>").read();
-if (restored.sort) {
-  const [field, direction] = restored.sort.split(":");
-  sortField.value = field;
-  sortOrder.value = direction === "DESC" ? -1 : 1;
-}
-if (restored.search) searchValue.value = restored.search;
-if (restored.page) currentPage.value = restored.page;
+const { searchValue } = useTableSearch({ stateKey: "<%- ModuleNameScreamingSnake %>" });
+const pagination = useDataTablePagination({ stateKey: "<%- ModuleNameScreamingSnake %>", pageSize: PAGE_SIZE, totalCount });
 
 function load() {
   return getItems({
     sort: sortExpression.value,
     keyword: searchValue.value || undefined,
-    skip: (currentPage.value - 1) * PAGE_SIZE,
+    skip: pagination.skip,
     take: PAGE_SIZE,
   });
 }
 
 // One loader for sort/search/page. Debounced so typing doesn't fetch per keystroke.
 load();
-watch(searchValue, () => (currentPage.value = 1));
-watch([sortExpression, searchValue, currentPage], debounce(load, 300));
-
-const onPaginationClick = (page: number) => {
-  currentPage.value = page;
-};
+watch(searchValue, () => pagination.setPage(1));
+watch([sortExpression, searchValue, () => pagination.skip], debounce(load, 300));
 
 const reload = () => load();
 

package/dist/templates/sample-module/pages/list.vue

@@ -16,7 +16,7 @@
       selection-mode="multiple"
       :items="data ?? []"
       :row-actions="actionBuilder"
-      :pagination="{ currentPage, pages }"
+      :pagination="pagination"
       :searchable="true"
       :search-placeholder="$t('SAMPLE_APP.PAGES.LIST.SEARCH.PLACEHOLDER')"
       :empty-state="{
@@ -35,7 +35,7 @@
       :total-count="totalCount"
       state-key="SAMPLE_APP"
       @row-click="onItemClick"
-      @pagination-click="onPaginationClick"
+      @pagination-click="pagination.goToPage"
     >
       <VcColumn
         id="imgSrc"
@@ -74,8 +74,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
-import { IBladeToolbar, useBlade, usePopup, useDataTableSort, useTableQueryState, useFunctions } from "@vc-shell/framework";
+import { ref, watch, computed } from "vue";
+import { IBladeToolbar, useBlade, usePopup, useDataTableSort, useTableSearch, useDataTablePagination, useFunctions } from "@vc-shell/framework";
 import type { TableAction } from "@vc-shell/framework";
 import { VcColumn, VcDataTable, VcBlade } from "@vc-shell/framework/ui";
 import { useI18n } from "vue-i18n";
@@ -101,32 +101,23 @@ const { debounce } = useFunctions();
 const PAGE_SIZE = 20;
 
 const { sortField, sortOrder, sortExpression } = useDataTableSort({
+  stateKey: "SAMPLE_APP",
   initialField: "createdDate",
   initialDirection: "DESC",
 });
 
-const { getItems, removeItems, data, loading, totalCount, pages } = useList({
+const { getItems, removeItems, data, loading, totalCount } = useList({
   sort: sortExpression.value,
   pageSize: PAGE_SIZE,
 });
 
-const searchValue = ref<string>();
-const currentPage = ref(1);
+const { searchValue } = useTableSearch({ stateKey: "SAMPLE_APP" });
+const pagination = useDataTablePagination({ stateKey: "SAMPLE_APP", pageSize: PAGE_SIZE, totalCount });
 const selectedItemId = ref<string>();
 const selectedItems = ref<MockedItem[]>([]);
 
 const selectedIds = computed(() => selectedItems.value.map((item) => item.id).filter(Boolean) as string[]);
 
-// Restore sort/search/page from the URL, then load once below.
-const restored = useTableQueryState("SAMPLE_APP").read();
-if (restored.sort) {
-  const [field, direction] = restored.sort.split(":");
-  sortField.value = field;
-  sortOrder.value = direction === "DESC" ? -1 : 1;
-}
-if (restored.search) searchValue.value = restored.search;
-if (restored.page) currentPage.value = restored.page;
-
 watch(
   param,
   (newVal) => {
@@ -139,14 +130,14 @@ function load() {
   return getItems({
     sort: sortExpression.value,
     keyword: searchValue.value || undefined,
-    skip: (currentPage.value - 1) * PAGE_SIZE,
+    skip: pagination.skip,
   });
 }
 
 // One loader for sort/search/page. Debounced so typing doesn't fetch per keystroke.
 load();
-watch(searchValue, () => (currentPage.value = 1));
-watch([sortExpression, searchValue, currentPage], debounce(load, 300));
+watch(searchValue, () => pagination.setPage(1));
+watch([sortExpression, searchValue, () => pagination.skip], debounce(load, 300));
 
 const clearSearch = () => {
   searchValue.value = "";
@@ -156,10 +147,6 @@ const addItem = () => {
   openBlade({ name: "SampleDetails" });
 };
 
-const onPaginationClick = (page: number) => {
-  currentPage.value = page;
-};
-
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "refresh",

package/dist/templates/standalone/_package.json.ejs

@@ -22,8 +22,8 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "@vc-shell/api-client-generator": "^2.0.11",
-    "@vc-shell/ts-config": "^2.0.11",
+    "@vc-shell/api-client-generator": "^2.1.0",
+    "@vc-shell/ts-config": "^2.1.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
@@ -51,8 +51,8 @@
     "vue-tsc": "^3.2.5"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^2.0.11",
-    "@vc-shell/framework": "^2.0.11",
+    "@vc-shell/config-generator": "^2.1.0",
+    "@vc-shell/framework": "^2.1.0",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "vee-validate": "^4.12.4",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "2.0.11",
+  "version": "2.1.0-pr249.0229549",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "2.0.11",
+    "@vc-shell/ts-config": "2.1.0-pr249.0229549",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",