@vc-shell/create-vc-app 2.0.10-pr247.f47cc74 → 2.0.11-pr247.04b969c

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.10", V = {
+const O = "2.0.11-pr247.04b969c", 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.10",
+    "@vc-shell/ts-config": "^2.0.11",
     "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.10",
-    "@vc-shell/framework": "^2.0.10",
+    "@vc-shell/config-generator": "^2.0.11",
+    "@vc-shell/framework": "^2.0.11",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   }

package/dist/templates/module/composables/useList.ts.ejs

@@ -1,43 +1,42 @@
-import { ref, type Ref } from "vue";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function use<%- ModuleNamePascalCase %>List() {
-  const data: Ref<Record<string, any>[]> = ref([]);
-  const totalCount = ref(0);
-  const currentPage = ref(1);
-  const searchQuery = ref("");
-
-  const { loading: itemsLoading, action: fetchItems } = useAsync(async () => {
-    // TODO: Replace with real API call
-    // const result = await apiClient.search({
-    //   keyword: searchQuery.value,
-    //   skip: (currentPage.value - 1) * 20,
-    //   take: 20,
-    // });
-    // data.value = result.results ?? [];
-    // totalCount.value = result.totalCount ?? 0;
-  });
-
-  const { loading: deleteLoading, action: removeItems } = useAsync(async (ids?: string[]) => {
-    // TODO: Replace with real API call
-    // await Promise.all((ids ?? []).map((id) => apiClient.delete(id)));
-    // await fetchItems();
-  });
-
-  const loading = useLoading(itemsLoading, deleteLoading);
-
-  async function getItems() {
-    await fetchItems();
-  }
-
-  return {
-    data,
-    loading,
-    totalCount,
-    currentPage,
-    searchQuery,
-    getItems,
-    removeItems,
-  };
-}
+import { ref, type Ref } from "vue";
+import { useAsync, useLoading } from "@vc-shell/framework";
+
+export interface <%- ModuleNamePascalCase %>ListQuery {
+  keyword?: string;
+  sort?: string;
+  skip?: number;
+  take?: number;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function use<%- ModuleNamePascalCase %>List() {
+  const data: Ref<Record<string, any>[]> = ref([]);
+  const totalCount = ref(0);
+
+  const { loading: itemsLoading, action: getItems } = useAsync<<%- ModuleNamePascalCase %>ListQuery>(async (query) => {
+    // TODO: Replace with real API call
+    // const result = await apiClient.search({
+    //   keyword: query?.keyword,
+    //   sort: query?.sort,
+    //   skip: query?.skip ?? 0,
+    //   take: query?.take ?? 20,
+    // });
+    // data.value = result.results ?? [];
+    // totalCount.value = result.totalCount ?? 0;
+  });
+
+  const { loading: deleteLoading, action: removeItems } = useAsync(async (ids?: string[]) => {
+    // TODO: Replace with real API call
+    // await Promise.all((ids ?? []).map((id) => apiClient.delete(id)));
+  });
+
+  const loading = useLoading(itemsLoading, deleteLoading);
+
+  return {
+    data,
+    loading,
+    totalCount,
+    getItems,
+    removeItems,
+  };
+}

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

@@ -6,26 +6,28 @@
     width="50%"
   >
     <VcDataTable
+      v-model:search-value="searchValue"
+      v-model:sort-field="sortField"
+      v-model:sort-order="sortOrder"
       :items="data"
       :total-count="totalCount"
-      :current-page="currentPage"
-      :search-value="searchQuery"
+      :pagination="pagination"
+      :searchable="true"
       :state-key="'<%- ModuleNameScreamingSnake %>'"
-      @search:change="(val: string) => { searchQuery = val; getItems(); }"
-      @item-click="openDetails"
-      @pagination-click="(page: number) => { currentPage = page; getItems(); }"
+      @row-click="onRowClick"
+      @pagination-click="pagination.goToPage"
     >
       <!-- Add your columns here -->
-      <VcColumn id="name" :header="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.NAME')" sortable />
-      <VcColumn id="createdDate" :header="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.CREATED_DATE')" type="datetime" sortable />
+      <VcColumn id="name" :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.NAME')" sortable />
+      <VcColumn id="createdDate" :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.CREATED_DATE')" type="datetime" sortable />
     </VcDataTable>
   </VcBlade>
 </template>
 
 <script setup lang="ts">
-import { useBlade, 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 { ref, onMounted } from "vue";
+import { ref, watch } from "vue";
 import use<%- ModuleNamePascalCase %>List from "../composables/useList";
 import { useI18n } from "vue-i18n";
 
@@ -42,22 +44,43 @@ defineBlade({
 
 const { t } = useI18n({ useScope: "global" });
 const { openBlade, exposeToChildren } = useBlade();
+const { debounce } = useFunctions();
 
-const {
-  data,
-  loading,
-  totalCount,
-  currentPage,
-  searchQuery,
-  getItems,
-} = use<%- ModuleNamePascalCase %>List();
+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 } = useTableSearch({ stateKey: "<%- ModuleNameScreamingSnake %>" });
+const pagination = useDataTablePagination({ stateKey: "<%- ModuleNameScreamingSnake %>", pageSize: PAGE_SIZE, totalCount });
+
+function load() {
+  return getItems({
+    sort: sortExpression.value,
+    keyword: searchValue.value || undefined,
+    skip: pagination.skip,
+    take: PAGE_SIZE,
+  });
+}
+
+// One loader for sort/search/page. Debounced so typing doesn't fetch per keystroke.
+load();
+watch(searchValue, () => pagination.setPage(1));
+watch([sortExpression, searchValue, () => pagination.skip], debounce(load, 300));
+
+const reload = () => load();
 
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "refresh",
     title: t("<%- ModuleNameScreamingSnake %>.PAGES.LIST.TOOLBAR.REFRESH"),
     icon: "lucide-refresh-cw",
-    clickHandler: () => getItems(),
+    clickHandler: () => reload(),
   },
   {
     id: "add",
@@ -72,15 +95,14 @@ function openDetails(item?: { id?: string }) {
     name: "<%- ModuleNamePascalCase %>Details",
     param: item?.id,
     async onClose() {
-      await getItems();
+      await reload();
     },
   });
 }
 
-onMounted(async () => {
-  await getItems();
-})
-
+function onRowClick(event: { data: { id?: string } }) {
+  openDetails(event.data);
+}
 
-exposeToChildren({ reload: getItems });
+exposeToChildren({ reload });
 </script>

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

@@ -7,6 +7,8 @@
     <!-- Blade contents -->
     <VcDataTable
       v-model:search-value="searchValue"
+      v-model:sort-field="sortField"
+      v-model:sort-order="sortOrder"
       v-model:active-item-id="selectedItemId"
       v-model:selection="selectedItems"
       :loading="loading"
@@ -14,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="{
@@ -32,9 +34,8 @@
       :total-label="$t('SAMPLE_APP.PAGES.LIST.TABLE.TOTALS')"
       :total-count="totalCount"
       state-key="SAMPLE_APP"
-      @search="onSearchList"
       @row-click="onItemClick"
-      @pagination-click="onPaginationClick"
+      @pagination-click="pagination.goToPage"
     >
       <VcColumn
         id="imgSrc"
@@ -73,8 +74,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, onMounted, watch } from "vue";
-import { IBladeToolbar, useBlade, usePopup, useTableSort, 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";
@@ -97,17 +98,21 @@ const { param, openBlade, exposeToChildren } = useBlade();
 const { showConfirmation } = usePopup();
 const { debounce } = useFunctions();
 
-const { sortExpression } = useTableSort({
-  initialProperty: "createdDate",
+const PAGE_SIZE = 20;
+
+const { sortField, sortOrder, sortExpression } = useDataTableSort({
+  stateKey: "SAMPLE_APP",
+  initialField: "createdDate",
   initialDirection: "DESC",
 });
 
-const { getItems, removeItems, data, loading, totalCount, pages, currentPage, searchQuery } = useList({
+const { getItems, removeItems, data, loading, totalCount } = useList({
   sort: sortExpression.value,
-  pageSize: 20,
+  pageSize: PAGE_SIZE,
 });
 
-const searchValue = ref();
+const { searchValue } = useTableSearch({ stateKey: "SAMPLE_APP" });
+const pagination = useDataTablePagination({ stateKey: "SAMPLE_APP", pageSize: PAGE_SIZE, totalCount });
 const selectedItemId = ref<string>();
 const selectedItems = ref<MockedItem[]>([]);
 
@@ -121,47 +126,25 @@ watch(
   { immediate: true },
 );
 
-onMounted(async () => {
-  await getItems({
-    ...searchQuery.value,
+function load() {
+  return getItems({
     sort: sortExpression.value,
+    keyword: searchValue.value || undefined,
+    skip: pagination.skip,
   });
-});
-
-watch(sortExpression, async (value) => {
-  await getItems({
-    ...searchQuery.value,
-    sort: value,
-  });
-});
+}
 
-const onSearchList = debounce(async (keyword: string) => {
-  searchValue.value = keyword;
-  await getItems({
-    ...searchQuery.value,
-    keyword,
-  });
-}, 1000);
+// One loader for sort/search/page. Debounced so typing doesn't fetch per keystroke.
+load();
+watch(searchValue, () => pagination.setPage(1));
+watch([sortExpression, searchValue, () => pagination.skip], debounce(load, 300));
 
-const clearSearch = async () => {
+const clearSearch = () => {
   searchValue.value = "";
-  await getItems({
-    ...searchQuery.value,
-    keyword: "",
-  });
 };
 
 const addItem = () => {
-  openBlade({
-    name: "SampleDetails",
-  });
-};
-
-const onPaginationClick = async (page: number) => {
-  await getItems({
-    ...searchQuery.value,
-    skip: (page - 1) * (searchQuery.value.take ?? 20),
-  });
+  openBlade({ name: "SampleDetails" });
 };
 
 const bladeToolbar = ref<IBladeToolbar[]>([
@@ -188,11 +171,7 @@ const title = computed(() => t("SAMPLE_APP.PAGES.LIST.TITLE"));
 
 const reload = async () => {
   selectedItems.value = [];
-  await getItems({
-    ...searchQuery.value,
-    skip: (currentPage.value - 1) * (searchQuery.value.take ?? 10),
-    sort: sortExpression.value,
-  });
+  await load();
 };
 
 const onItemClick = (event: { data: MockedItem; index: number; originalEvent: Event }) => {

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.10",
-    "@vc-shell/ts-config": "^2.0.10",
+    "@vc-shell/api-client-generator": "^2.0.11",
+    "@vc-shell/ts-config": "^2.0.11",
     "@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.10",
-    "@vc-shell/framework": "^2.0.10",
+    "@vc-shell/config-generator": "^2.0.11",
+    "@vc-shell/framework": "^2.0.11",
     "@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.10-pr247.f47cc74",
+  "version": "2.0.11-pr247.04b969c",
   "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-pr247.f47cc74",
+    "@vc-shell/ts-config": "2.0.11-pr247.04b969c",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",