@vc-shell/create-vc-app 2.0.10-pr245.4d2a6c5 → 2.0.10-pr246.5bab99b

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.10-pr246.5bab99b", V = {
   version: O
 };
 function h(e) {
@@ -149,16 +149,16 @@ async function Q(e, a) {
     o = o || d;
     const f = c.resolve(t, o);
     if (!G(e.type)) {
-      const b = P.map(($) => $.value).join(", ");
-      console.error(n.red(`Unknown project type: "${e.type}". Valid types: ${b}`)), process.exit(1);
+      const N = P.map((b) => b.value).join(", ");
+      console.error(n.red(`Unknown project type: "${e.type}". Valid types: ${N}`)), process.exit(1);
     }
     r.existsSync(f) && !I(f) && !e.overwrite && (console.error(n.red(`Target directory "${o}" is not empty. Use --overwrite to overwrite.`)), process.exit(1));
-    const u = p(), y = e.type, g = e["module-name"], N = y === "dynamic-module" ? g || S(u) : g || void 0;
+    const u = p(), y = e.type, g = e["module-name"], $ = y === "dynamic-module" ? g || S(u) : g || void 0;
     l = {
       projectName: h(u),
       packageName: e["package-name"] || (k(u) ? u : C(u)),
       projectType: y,
-      moduleName: N,
+      moduleName: $,
       basePath: e["base-path"] || _(`/apps/${h(u)}/`),
       tenantRoutes: e["tenant-routes"] || !1,
       aiAgent: e["ai-agent"] || !1,
@@ -210,7 +210,7 @@ async function Q(e, a) {
           }
         ],
         { onCancel: f }
-      ), y = o ? h(o) : u.projectName, g = u.projectType || "standalone", N = S(y), b = "/apps/" + h(y) + "/", $ = await A(
+      ), y = o ? h(o) : u.projectName, g = u.projectType || "standalone", $ = S(y), N = "/apps/" + h(y) + "/", b = await A(
         [
           {
             name: "includeModule",
@@ -222,14 +222,14 @@ async function Q(e, a) {
             name: "moduleName",
             type: (w, M) => g === "standalone" && !M.includeModule ? null : "text",
             message: n.reset("Module name:"),
-            initial: N,
+            initial: $,
             format: (w) => String(w).trim()
           },
           {
             name: "basePath",
             type: g === "dynamic-module" ? null : "text",
             message: n.reset("Base path:"),
-            initial: b,
+            initial: N,
             format: (w) => _(String(w).trim())
           },
           {
@@ -263,12 +263,12 @@ async function Q(e, a) {
         projectName: y,
         packageName: u.packageName || (k(y) ? y : C(y)),
         projectType: g,
-        moduleName: $.moduleName || ($.includeModule !== !1 ? N : void 0),
-        basePath: $.basePath || _(b),
-        tenantRoutes: $.tenantRoutes || !1,
-        aiAgent: $.aiAgent || !1,
-        dashboard: $.dashboard ?? !0,
-        mocks: $.mocks || !1
+        moduleName: b.moduleName || (b.includeModule !== !1 ? $ : void 0),
+        basePath: b.basePath || _(N),
+        tenantRoutes: b.tenantRoutes || !1,
+        aiAgent: b.aiAgent || !1,
+        dashboard: b.dashboard ?? !0,
+        mocks: b.mocks || !1
       };
     } catch (u) {
       console.log(u.message), process.exit(1);
@@ -356,7 +356,7 @@ async function ae(e, a) {
     type: "text",
     name: "moduleName",
     message: "Module name:",
-    validate: (b) => b.trim().length > 0 || "Module name is required"
+    validate: (N) => N.trim().length > 0 || "Module name is required"
   })).moduleName), m || (console.error(n.red("Module name is required.")), process.exit(1));
   const l = h(m), i = x(m), v = c.join(t, "src/modules"), f = c.join(v, l);
   r.existsSync(v) || r.mkdirSync(v, { recursive: !0 }), r.existsSync(f) && (console.error(n.red(`Error: Module "${l}" already exists at ${c.relative(t, f)}`)), process.exit(1));

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="{ currentPage, pages }"
+      :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="onPaginationClick"
     >
       <!-- 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, useTableQueryState, useFunctions, type IBladeToolbar } from "@vc-shell/framework";
 import { VcBlade, VcDataTable, VcColumn } from "@vc-shell/framework/ui";
-import { ref, onMounted } from "vue";
+import { computed, ref, watch } from "vue";
 import use<%- ModuleNamePascalCase %>List from "../composables/useList";
 import { useI18n } from "vue-i18n";
 
@@ -42,22 +44,57 @@ 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({
+  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;
+
+function load() {
+  return getItems({
+    sort: sortExpression.value,
+    keyword: searchValue.value || undefined,
+    skip: (currentPage.value - 1) * PAGE_SIZE,
+    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;
+};
+
+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 +109,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"
@@ -32,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"
     >
@@ -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 { computed, ref, watch } from "vue";
+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,22 +98,35 @@ 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({
+  initialField: "createdDate",
   initialDirection: "DESC",
 });
 
-const { getItems, removeItems, data, loading, totalCount, pages, currentPage, searchQuery } = useList({
+const { getItems, removeItems, data, loading, totalCount, pages } = useList({
   sort: sortExpression.value,
-  pageSize: 20,
+  pageSize: PAGE_SIZE,
 });
 
-const searchValue = ref();
+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[]);
 
+// 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) => {
@@ -121,47 +135,29 @@ watch(
   { immediate: true },
 );
 
-onMounted(async () => {
-  await getItems({
-    ...searchQuery.value,
+function load() {
+  return getItems({
     sort: sortExpression.value,
+    keyword: searchValue.value || undefined,
+    skip: (currentPage.value - 1) * PAGE_SIZE,
   });
-});
-
-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, () => (currentPage.value = 1));
+watch([sortExpression, searchValue, currentPage], debounce(load, 300));
 
-const clearSearch = async () => {
+const clearSearch = () => {
   searchValue.value = "";
-  await getItems({
-    ...searchQuery.value,
-    keyword: "",
-  });
 };
 
 const addItem = () => {
-  openBlade({
-    name: "SampleDetails",
-  });
+  openBlade({ name: "SampleDetails" });
 };
 
-const onPaginationClick = async (page: number) => {
-  await getItems({
-    ...searchQuery.value,
-    skip: (page - 1) * (searchQuery.value.take ?? 20),
-  });
+const onPaginationClick = (page: number) => {
+  currentPage.value = page;
 };
 
 const bladeToolbar = ref<IBladeToolbar[]>([
@@ -188,11 +184,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "2.0.10-pr245.4d2a6c5",
+  "version": "2.0.10-pr246.5bab99b",
   "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-pr245.4d2a6c5",
+    "@vc-shell/ts-config": "2.0.10-pr246.5bab99b",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",