@vc-shell/create-vc-app 2.0.10-pr242.2e7f6b3 → 2.0.10-pr242.bfb451e

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

@@ -14,7 +14,6 @@
       :pagination="{ currentPage, pages }"
       :searchable="true"
       :state-key="'<%- ModuleNameScreamingSnake %>'"
-      @search="onSearch"
       @row-click="onRowClick"
       @pagination-click="onPaginationClick"
     >
@@ -26,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { useBlade, useDataTableSort, useTableQueryState, type IBladeToolbar } from "@vc-shell/framework";
+import { useBlade, useDataTableSort, useTableQueryState, useFunctions, type IBladeToolbar } from "@vc-shell/framework";
 import { VcBlade, VcDataTable, VcColumn } from "@vc-shell/framework/ui";
 import { computed, ref, watch } from "vue";
 import use<%- ModuleNamePascalCase %>List from "../composables/useList";
@@ -45,6 +44,7 @@ defineBlade({
 
 const { t } = useI18n({ useScope: "global" });
 const { openBlade, exposeToChildren } = useBlade();
+const { debounce } = useFunctions();
 
 const PAGE_SIZE = 20;
 
@@ -55,59 +55,39 @@ const { sortField, sortOrder, sortExpression } = useDataTableSort({
 
 const { data, loading, totalCount, getItems } = use<%- ModuleNamePascalCase %>List();
 
-const searchValue = ref<string>(); // live search box (v-model)
-const appliedKeyword = ref<string>(); // applied filter — drives the loader
+const searchValue = ref<string>();
 const currentPage = ref(1);
-
 const pages = computed(() => Math.ceil(totalCount.value / PAGE_SIZE) || 0);
 
-// Pull-restore: read the URL-persisted view state and seed our refs synchronously,
-// BEFORE the loader watch below — so a reload costs exactly one request.
+// 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 !== undefined) {
-  searchValue.value = restored.search;
-  appliedKeyword.value = restored.search;
-}
-if (restored.page) {
-  currentPage.value = restored.page;
-}
+if (restored.search) searchValue.value = restored.search;
+if (restored.page) currentPage.value = restored.page;
 
-// Single loader — the ONLY trigger that calls the API. Vue batches synchronous
-// changes to several criteria into one flush → one request, even on restore.
-watch(
-  () => ({
+function load() {
+  return getItems({
     sort: sortExpression.value,
-    keyword: appliedKeyword.value || undefined,
+    keyword: searchValue.value || undefined,
     skip: (currentPage.value - 1) * PAGE_SIZE,
     take: PAGE_SIZE,
-  }),
-  (query) => getItems(query),
-  { immediate: true },
-);
-
-// Handlers only update state — they never load. VcDataTable debounces @search, so
-// reacting to appliedKeyword coalesces fast typing into a single request.
-const onSearch = (keyword: string) => {
-  appliedKeyword.value = keyword;
-  currentPage.value = 1;
-};
+  });
+}
+
+// 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;
 };
 
-const reload = () =>
-  getItems({
-    sort: sortExpression.value,
-    keyword: appliedKeyword.value || undefined,
-    skip: (currentPage.value - 1) * PAGE_SIZE,
-    take: PAGE_SIZE,
-  });
+const reload = () => load();
 
 const bladeToolbar = ref<IBladeToolbar[]>([
   {

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

@@ -34,7 +34,6 @@
       :total-label="$t('SAMPLE_APP.PAGES.LIST.TABLE.TOTALS')"
       :total-count="totalCount"
       state-key="SAMPLE_APP"
-      @search="onSearchList"
       @row-click="onItemClick"
       @pagination-click="onPaginationClick"
     >
@@ -76,7 +75,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
-import { IBladeToolbar, useBlade, usePopup, useDataTableSort, useTableQueryState } from "@vc-shell/framework";
+import { IBladeToolbar, useBlade, usePopup, useDataTableSort, useTableQueryState, 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";
@@ -97,6 +96,7 @@ defineBlade({
 const { t } = useI18n({ useScope: "global" });
 const { param, openBlade, exposeToChildren } = useBlade();
 const { showConfirmation } = usePopup();
+const { debounce } = useFunctions();
 
 const PAGE_SIZE = 20;
 
@@ -110,30 +110,22 @@ const { getItems, removeItems, data, loading, totalCount, pages } = useList({
   pageSize: PAGE_SIZE,
 });
 
-const searchValue = ref<string>(); // live search box (v-model)
-const appliedKeyword = ref<string>(); // applied filter — drives the loader
+const searchValue = ref<string>();
 const currentPage = ref(1);
 const selectedItemId = ref<string>();
 const selectedItems = ref<MockedItem[]>([]);
 
 const selectedIds = computed(() => selectedItems.value.map((item) => item.id).filter(Boolean) as string[]);
 
-// Pull-restore: read the URL-persisted view state and seed our refs synchronously,
-// BEFORE the loader watch below — so a page reload costs exactly one request with
-// the full criteria, instead of several uncoordinated loads.
+// 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 !== undefined) {
-  searchValue.value = restored.search;
-  appliedKeyword.value = restored.search;
-}
-if (restored.page) {
-  currentPage.value = restored.page;
-}
+if (restored.search) searchValue.value = restored.search;
+if (restored.page) currentPage.value = restored.page;
 
 watch(
   param,
@@ -143,36 +135,25 @@ watch(
   { immediate: true },
 );
 
-// Single loader — the ONLY place that calls the API. Vue batches synchronous changes
-// to several criteria into one flush, so sort + search + page changing together still
-// yields one request.
-watch(
-  () => ({
+function load() {
+  return getItems({
     sort: sortExpression.value,
-    keyword: appliedKeyword.value || undefined,
+    keyword: searchValue.value || undefined,
     skip: (currentPage.value - 1) * PAGE_SIZE,
-  }),
-  (query) => getItems(query),
-  { immediate: true },
-);
+  });
+}
 
-// Handlers only update state — they never load. VcDataTable debounces @search, so
-// reacting to appliedKeyword coalesces fast typing into a single request.
-const onSearchList = (keyword: string) => {
-  appliedKeyword.value = keyword;
-  currentPage.value = 1;
-};
+// 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 clearSearch = () => {
   searchValue.value = "";
-  appliedKeyword.value = "";
-  currentPage.value = 1;
 };
 
 const addItem = () => {
-  openBlade({
-    name: "SampleDetails",
-  });
+  openBlade({ name: "SampleDetails" });
 };
 
 const onPaginationClick = (page: number) => {
@@ -203,13 +184,7 @@ const title = computed(() => t("SAMPLE_APP.PAGES.LIST.TITLE"));
 
 const reload = async () => {
   selectedItems.value = [];
-  // Explicit user refresh — the criteria are unchanged, so the loader watch would
-  // not fire; reload calls the API directly with the current combined criteria.
-  await getItems({
-    sort: sortExpression.value,
-    keyword: appliedKeyword.value || undefined,
-    skip: (currentPage.value - 1) * PAGE_SIZE,
-  });
+  await load();
 };
 
 const onItemClick = (event: { data: MockedItem; index: number; originalEvent: Event }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "2.0.10-pr242.2e7f6b3",
+  "version": "2.0.10-pr242.bfb451e",
   "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.10-pr242.2e7f6b3",
+    "@vc-shell/ts-config": "2.0.10-pr242.bfb451e",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",