@vc-shell/create-vc-app 1.1.88 → 1.1.90

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.1.90](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.89...v1.1.90) (2025-10-08)
+
+
+
+## [1.1.89](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.88...v1.1.89) (2025-10-08)
+
+
+
 ## [1.1.88](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.87...v1.1.88) (2025-10-07)
 
 

package/dist/index.js

@@ -6,7 +6,7 @@ import c from "node:path";
 import s from "node:fs";
 import { fileURLToPath as Oe } from "node:url";
 import { cwd as Me, exit as Ee, argv as Te } from "node:process";
-const Ue = "1.1.88", I = {
+const Ue = "1.1.90", I = {
   version: Ue
 };
 var Pe = typeof global == "object" && global && global.Object === Object && global, Le = typeof self == "object" && self && self.Object === Object && self, _e = Pe || Le || Function("return this")(), b = _e.Symbol, K = Object.prototype, ze = K.hasOwnProperty, De = K.toString, $ = b ? b.toStringTag : void 0;

package/dist/templates/base/_package.json

@@ -23,9 +23,9 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@vc-shell/api-client-generator": "^1.1.88",
-    "@vc-shell/release-config": "^1.1.87",
-    "@vc-shell/ts-config": "^1.1.87",
+    "@vc-shell/api-client-generator": "^1.1.90",
+    "@vc-shell/release-config": "^1.1.89",
+    "@vc-shell/ts-config": "^1.1.89",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
@@ -53,8 +53,8 @@
     "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^1.1.87",
-    "@vc-shell/framework": "^1.1.88",
+    "@vc-shell/config-generator": "^1.1.89",
+    "@vc-shell/framework": "^1.1.90",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",

package/dist/templates/modules/classic-module/composables/use{{ModuleNamePascalCase}}Details/index.ts

@@ -1,19 +1,24 @@
-import { computed, ref } from "vue";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-export default () => {
-  const item = ref({});
-
-  // Implement your own load function
-  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
-    item.value = {};
-  });
-
-  const loading = useLoading(itemLoading);
-
-  return {
-    item: computed(() => item.value),
-    loading: computed(() => loading.value),
-    getItem,
-  };
-};
+import { computed, ref } from "vue";
+import { useAsync, useLoading, useModificationTracker } from "@vc-shell/framework";
+
+export default () => {
+  const item = ref({});
+
+  const { isModified, currentValue, resetModificationState } = useModificationTracker(item);
+
+  // Implement your own load function
+  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
+    item.value = {};
+
+    resetModificationState();
+  });
+
+  const loading = useLoading(itemLoading);
+
+  return {
+    item: currentValue,
+    loading: computed(() => loading.value),
+    getItem,
+    isModified,
+  };
+};

package/dist/templates/modules/classic-module/composables/use{{ModuleNamePascalCase}}List/index.ts

@@ -6,6 +6,7 @@ interface SearchQuery {
   take?: number;
   skip?: number;
   sort?: string;
+  keyword?: string;
 }
 
 export default (options?: { pageSize?: number, sort?: string }) => {
@@ -26,7 +27,12 @@ export default (options?: { pageSize?: number, sort?: string }) => {
     };
   });
 
-  const loading = useLoading(itemLoading);
+  // Implement your own remove function
+  const { loading: removeLoading, action: removeItems } = useAsync<{ ids: string[] }>(async (payload) => {
+    return;
+  });
+
+  const loading = useLoading(itemLoading, removeLoading);
 
   return {
     data: computed(() => searchResult.value?.items),
@@ -35,6 +41,7 @@ export default (options?: { pageSize?: number, sort?: string }) => {
     pages: computed(() => Math.ceil((searchResult.value?.totalCount || 1) / pageSize)),
     currentPage: computed(() => Math.ceil((searchQuery.value?.skip || 0) / Math.max(1, pageSize) + 1)),
     getItems,
+    removeItems,
     searchQuery,
   };
 };

package/dist/templates/modules/classic-module/locales/en.json

@@ -1,28 +1,37 @@
-{
-  "{{ModuleNameUppercaseSnakeCase}}": {
-    "MENU": {
-      "TITLE": "{{ModuleNameSentenceCase}}"
-    },
-    "PAGES": {
-      "LIST": {
-        "TITLE": "{{ModuleNameSentenceCase}} list",
-        "TOOLBAR": {
-          "REFRESH": "Refresh"
-        },
-        "SEARCH": {
-          "PLACEHOLDER": "Search keywords"
-        },
-        "TABLE": {
-          "TOTALS": "Count:",
-          "HEADER": {}
-        }
-      },
-      "DETAILS": {
-        "TITLE": "{{ModuleNameSentenceCase}} details"
-      },
-      "ALERTS": {
-        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?"
-      }
-    }
-  }
-}
+{
+  "{{ModuleNameUppercaseSnakeCase}}": {
+    "MENU": {
+      "TITLE": "{{ModuleNameSentenceCase}}"
+    },
+    "PAGES": {
+      "LIST": {
+        "TITLE": "{{ModuleNameSentenceCase}} list",
+        "TOOLBAR": {
+          "REFRESH": "Refresh",
+          "ADD": "Add"
+        },
+        "SEARCH": {
+          "PLACEHOLDER": "Search keywords"
+        },
+        "TABLE": {
+          "TOTALS": "Count:",
+          "HEADER": {}
+        },
+        "EMPTY": {
+          "NO_ITEMS": "No items found",
+          "ADD": "Add items"
+        },
+        "NOT_FOUND": {
+          "EMPTY": "No items found",
+          "RESET": "Reset"
+        }
+      },
+      "DETAILS": {
+        "TITLE": "{{ModuleNameSentenceCase}} details"
+      },
+      "ALERTS": {
+        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?"
+      }
+    }
+  }
+}

package/dist/templates/modules/classic-module/pages/details.vue

@@ -19,10 +19,11 @@
 </template>
 
 <script lang="ts" setup>
-import { IBladeToolbar, IParentCallArgs } from "@vc-shell/framework";
+import { IBladeToolbar, IParentCallArgs, useBladeNavigation, usePopup, useBeforeUnload } from "@vc-shell/framework";
 import { use{{ModuleNamePascalCase}}Details } from "./../composables";
 import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { useForm } from "vee-validate";
 
 export interface Props {
   expanded?: boolean;
@@ -50,9 +51,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits<Emits>();
 
-const { loading, getItem } = use{{ModuleNamePascalCase}}Details();
+const { loading, getItem, isModified } = use{{ModuleNamePascalCase}}Details();
+const { onBeforeClose } = useBladeNavigation();
+const { showConfirmation } = usePopup();
 const { t } = useI18n({ useScope: "global" });
 
+const { meta } = useForm({
+  validateOnMount: false,
+});
+
+const isDisabled = computed(() => {
+  return !meta.value.dirty || !meta.value.valid;
+});
+
 const bladeToolbar = ref<IBladeToolbar[]>([]);
 const title = computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.DETAILS.TITLE"));
 
@@ -62,6 +73,14 @@ onMounted(async () => {
   }
 });
 
+onBeforeClose(async () => {
+  if (!isDisabled.value && isModified.value) {
+    return await showConfirmation(t("SAMPLE_APP.PAGES.ALERTS.CLOSE_CONFIRMATION"));
+  }
+});
+
+useBeforeUnload(computed(() => !isDisabled.value && isModified.value));
+
 defineExpose({
   title,
 });

package/dist/templates/modules/classic-module/pages/list.vue

@@ -1,6 +1,6 @@
 <template>
   <VcBlade
-    :title="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TITLE')"
+    :title="title"
     width="50%"
     :expanded="expanded"
     :closable="closable"
@@ -18,17 +18,24 @@
       :loading="loading"
       :columns="columns"
       :sort="sortExpression"
+      :current-page="currentPage"
+      :search-value="searchValue"
+      enable-item-actions
+      :item-action-builder="actionBuilder"
       :pages="pages"
+      :empty="empty"
+      :notfound="notfound"
       :total-count="totalCount"
-      :search-value="searchValue"
-      :current-page="currentPage"
+      :selected-item-id="selectedItemId"
       :search-placeholder="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.SEARCH.PLACEHOLDER')"
       :total-label="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TABLE.TOTALS')"
-      :selected-item-id="selectedItemId"
       state-key="{{ModuleNameUppercaseSnakeCase}}"
       :items="data"
       @item-click="onItemClick"
       @header-click="onHeaderClick"
+      @search:change="onSearchList"
+      @pagination-click="onPaginationClick"
+      @selection-changed="onSelectionChanged"
     >
     </VcTable>
   </VcBlade>
@@ -36,7 +43,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, markRaw, onMounted, watch } from "vue";
-import { IBladeToolbar, IParentCallArgs, ITableColumns, useBladeNavigation, useTableSort } from "@vc-shell/framework";
+import { IBladeToolbar, IParentCallArgs, ITableColumns, useBladeNavigation, useTableSort, IActionBuilderResult, useFunctions, usePopup } from "@vc-shell/framework";
 import { useI18n } from "vue-i18n";
 import { use{{ModuleNamePascalCase}}List } from "./../composables";
 import Details from "./details.vue";
@@ -75,19 +82,43 @@ defineEmits<Emits>();
 
 const { t } = useI18n({ useScope: "global" });
 const { openBlade } = useBladeNavigation();
-
+const { debounce } = useFunctions();
+const { showConfirmation } = usePopup();
 const { sortExpression, handleSortChange: tableSortHandler } = useTableSort({
   initialDirection: "DESC",
   initialProperty: "createdDate",
 });
 
-const { getItems, data, loading, totalCount, pages, currentPage, searchQuery } = use{{ModuleNamePascalCase}}List({
+const { getItems, data, loading, totalCount, pages, currentPage, searchQuery, removeItems } = use{{ModuleNamePascalCase}}List({
   sort: sortExpression.value,
   pageSize: 20,
 });
 
 const searchValue = ref();
 const selectedItemId = ref<string>();
+const selectedItemsIds = ref<string[]>([]);
+
+const empty = {
+  icon: "lucide-file",
+  text: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.EMPTY.NO_ITEMS")),
+  action: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.EMPTY.ADD")),
+  clickHandler: () => {
+    addItem();
+  },
+};
+
+const notfound = {
+  icon: "lucide-file",
+  text: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.NOT_FOUND.EMPTY")),
+  action: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.NOT_FOUND.RESET")),
+  clickHandler: async () => {
+    searchValue.value = "";
+    await getItems({
+      ...searchQuery.value,
+      keyword: "",
+    });
+  },
+};
 
 watch(
   () => props.param,
@@ -113,6 +144,14 @@ const bladeToolbar = ref<IBladeToolbar[]>([
       await reload();
     },
   },
+  {
+    id: "add",
+    icon: "material-add",
+    title: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TOOLBAR.ADD")),
+    clickHandler: () => {
+      addItem();
+    },
+  },
 ]);
 
 const columns = ref<ITableColumns[]>([
@@ -121,6 +160,14 @@ const columns = ref<ITableColumns[]>([
 
 const title = computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TITLE"));
 
+const onSearchList = debounce(async (keyword: string) => {
+  searchValue.value = keyword;
+  await getItems({
+    ...searchQuery.value,
+    keyword,
+  });
+}, 1000);
+
 const reload = async () => {
   await getItems({
     ...searchQuery.value,
@@ -129,6 +176,12 @@ const reload = async () => {
   });
 };
 
+const addItem = () => {
+  openBlade({
+    blade: markRaw(Details),
+  });
+};
+
 const onItemClick = (item: { id: string }) => {
   openBlade({
     blade: markRaw(Details),
@@ -146,6 +199,48 @@ const onHeaderClick = (item: ITableColumns) => {
   tableSortHandler(item.id);
 };
 
+const actionBuilder = (): IActionBuilderResult[] => {
+  const result: IActionBuilderResult[] = [];
+  result.push({
+    icon: "material-delete",
+    title: "Delete",
+    type: "danger",
+    async clickHandler(_item: { id: string }) {
+      if (_item.id && !selectedItemsIds.value.includes(_item.id)) {
+        selectedItemsIds.value.push(_item.id);
+      }
+      await remove(selectedItemsIds.value);
+      selectedItemsIds.value = [];
+    },
+  });
+
+  return result;
+};
+
+const onPaginationClick = async (page: number) => {
+  await getItems({
+    ...searchQuery.value,
+    skip: (page - 1) * (searchQuery.value.take ?? 20),
+  });
+};
+
+const onSelectionChanged = (items: Record<string, any>[]) => {
+  selectedItemsIds.value = items.flatMap((item) => (item.id ? [item.id] : []));
+};
+
+async function remove(ids: string[]) {
+  if (
+    await showConfirmation(
+      t(`{{ModuleNameUppercaseSnakeCase}}.PAGES.ALERTS.DELETE_SELECTED_CONFIRMATION.MESSAGE`, {
+        count: selectedItemsIds.value.length,
+      }),
+    )
+  ) {
+    await removeItems({ ids });
+    await reload();
+  }
+}
+
 watch(
   () => sortExpression.value,
   async (newVal) => {

package/dist/templates/sample/classic-module/locales/en.json

@@ -1,59 +1,67 @@
-{
-  "SAMPLE_APP": {
-    "MENU": {
-      "TITLE": "Sample"
-    },
-    "PAGES": {
-      "LIST": {
-        "TITLE": "Sample list",
-        "TOOLBAR": {
-          "REFRESH": "Refresh",
-          "REMOVE": "Remove"
-        },
-        "SEARCH": {
-          "PLACEHOLDER": "Search keywords"
-        },
-        "TABLE": {
-          "TOTALS": "Count:",
-          "HEADER": {
-            "IMAGE": "Img",
-            "PRODUCT_NAME": "Product name",
-            "DESCRIPTION": "Description",
-            "PRICE": "Price",
-            "SALE_PRICE": "Sale price",
-            "CURRENCY": "Currency"
-          },
-          "ACTIONS": {
-            "DELETE": "Delete"
-          }
-        }
-      },
-      "DETAILS": {
-        "TITLE": {
-          "DETAILS": " details",
-          "LOADING": "Loading..."
-        },
-        "TOOLBAR": {
-          "SAVE": "Save",
-          "DELETE": "Delete"
-        },
-        "FIELDS": {
-          "NAME": "Name",
-          "CONTENT": "Content",
-          "GUID": "GUID",
-          "DESCRIPTION": "Description",
-          "PRICE": "Price",
-          "SALE_PRICE": "Sale price"
-        }
-      },
-      "ALERTS": {
-        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?",
-        "DELETE": "Are you sure you want to delete this item?",
-        "DELETE_SELECTED_CONFIRMATION": {
-          "MESSAGE": "Are you sure you want to delete {count} selected items?",
-          "ALL": "all {totalCount}"
-        }
-      }
-    }
-  }
-}
+{
+  "SAMPLE_APP": {
+    "MENU": {
+      "TITLE": "Sample"
+    },
+    "PAGES": {
+      "LIST": {
+        "TITLE": "Sample list",
+        "TOOLBAR": {
+          "REFRESH": "Refresh",
+          "REMOVE": "Remove"
+        },
+        "SEARCH": {
+          "PLACEHOLDER": "Search keywords"
+        },
+        "TABLE": {
+          "TOTALS": "Count:",
+          "HEADER": {
+            "IMAGE": "Img",
+            "PRODUCT_NAME": "Product name",
+            "DESCRIPTION": "Description",
+            "PRICE": "Price",
+            "SALE_PRICE": "Sale price",
+            "CURRENCY": "Currency"
+          },
+          "ACTIONS": {
+            "DELETE": "Delete"
+          }
+        },
+        "EMPTY": {
+          "NO_ITEMS": "No items found",
+          "ADD": "Add item"
+        },
+        "NOT_FOUND": {
+          "EMPTY": "No items found",
+          "RESET": "Reset"
+        }
+      },
+      "DETAILS": {
+        "TITLE": {
+          "DETAILS": " details",
+          "LOADING": "Loading..."
+        },
+        "TOOLBAR": {
+          "SAVE": "Save",
+          "DELETE": "Delete"
+        },
+        "FIELDS": {
+          "NAME": "Name",
+          "CONTENT": "Content",
+          "GUID": "GUID",
+          "DESCRIPTION": "Description",
+          "PRICE": "Price",
+          "SALE_PRICE": "Sale price"
+        }
+      },
+      "ALERTS": {
+        "CLOSE_CONFIRMATION": "You have unsaved changes. Close anyway?",
+        "DELETE": "Are you sure you want to delete this item?",
+        "DELETE_SELECTED_CONFIRMATION": {
+          "MESSAGE": "Are you sure you want to delete {count} selected items?",
+          "ALL": "all {totalCount}"
+        }
+      }
+    }
+  }
+}

package/dist/templates/sample/classic-module/pages/details.vue

@@ -11,7 +11,7 @@
     @collapse="$emit('collapse:blade')"
   >
     <VcContainer class="tw-p-2">
-      <VcForm>
+      <VcForm class="tw-space-y-4">
         <Field
           v-slot="{ errorMessage, handleChange, errors }"
           name="name"
@@ -25,15 +25,11 @@
             required
             :error="!!errors.length"
             :error-message="errorMessage"
-            class="tw-mb-4"
             @update:model-value="handleChange"
           ></VcInput>
         </Field>
-        <VcCard
-          header="Content"
-          class="tw-mb-4"
-        >
-          <div class="tw-p-4">
+        <VcCard header="Content">
+          <div class="tw-p-4 tw-space-y-4">
             <Field
               v-slot="{ errorMessage, handleChange, errors }"
               name="guid"
@@ -50,7 +46,6 @@
                 required
                 :error="!!errors.length"
                 :error-message="errorMessage"
-                class="tw-mb-4"
                 @update:model-value="handleChange"
               ></VcInput>
             </Field>
@@ -137,11 +132,10 @@
 <script lang="ts" setup>
 import { IBladeToolbar, IParentCallArgs, useBeforeUnload, useBladeNavigation, usePopup } from "@vc-shell/framework";
 import { useDetails } from "./../composables";
-import { computed, onMounted, ref, unref, watch } from "vue";
-import { Field, useForm, useIsFormDirty, useIsFormValid } from "vee-validate";
+import { computed, onMounted, ref } from "vue";
+import { Field, useForm } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import * as _ from "lodash-es";
-import { MockedItem } from "../sample-data";
 
 export interface Props {
   expanded?: boolean;
@@ -210,7 +204,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     icon: "material-delete",
     title: "Delete",
     async clickHandler() {
-      if (await showConfirmation(computed(() => t(`SAMPLE_APP.PAGES.ALERTS.DELETE`)))) {
+      if (await showConfirmation(t(`SAMPLE_APP.PAGES.ALERTS.DELETE`))) {
         if (props.param) {
           await removeItem({ id: props.param });
           emit("parent:call", {

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

@@ -1,6 +1,6 @@
 <template>
   <VcBlade
-    :title="$t('SAMPLE_APP.PAGES.LIST.TITLE')"
+    :title="title"
     width="50%"
     :expanded="expanded"
     :closable="closable"
@@ -22,16 +22,20 @@
       :total-count="totalCount"
       :search-value="searchValue"
       :current-page="currentPage"
+      enable-item-actions
+      :item-action-builder="actionBuilder"
+      :empty="empty"
+      :notfound="notfound"
       :search-placeholder="$t('SAMPLE_APP.PAGES.LIST.SEARCH.PLACEHOLDER')"
       :total-label="$t('SAMPLE_APP.PAGES.LIST.TABLE.TOTALS')"
       :selected-item-id="selectedItemId"
       state-key="SAMPLE_APP"
-      :items="data"
-      :item-action-builder="actionBuilder"
-      enable-item-actions
+      :items="data ?? []"
       @item-click="onItemClick"
       @header-click="onHeaderClick"
       @selection-changed="onSelectionChanged"
+      @search:change="onSearchList"
+      @pagination-click="onPaginationClick"
     >
     </VcTable>
   </VcBlade>
@@ -47,6 +51,7 @@ import {
   useBladeNavigation,
   usePopup,
   useTableSort,
+  useFunctions,
 } from "@vc-shell/framework";
 import { useI18n } from "vue-i18n";
 import { useList } from "./../composables";
@@ -88,6 +93,7 @@ defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
 const { openBlade } = useBladeNavigation();
 const { showConfirmation } = usePopup();
+const { debounce } = useFunctions();
 
 const { sortExpression, handleSortChange: tableSortHandler } = useTableSort({
   initialDirection: "DESC",
@@ -103,10 +109,32 @@ const searchValue = ref();
 const selectedItemId = ref<string>();
 const selectedIds = ref<string[]>([]);
 
+const empty = {
+  icon: "lucide-file",
+  text: computed(() => t("SAMPLE_APP.PAGES.LIST.EMPTY.NO_ITEMS")),
+  action: computed(() => t("SAMPLE_APP.PAGES.LIST.EMPTY.ADD")),
+  clickHandler: () => {
+    addItem();
+  },
+};
+
+const notfound = {
+  icon: "lucide-file",
+  text: computed(() => t("SAMPLE_APP.PAGES.LIST.NOT_FOUND.EMPTY")),
+  action: computed(() => t("SAMPLE_APP.PAGES.LIST.NOT_FOUND.RESET")),
+  clickHandler: async () => {
+    searchValue.value = "";
+    await getItems({
+      ...searchQuery.value,
+      keyword: "",
+    });
+  },
+};
+
 watch(
   () => props.param,
   (newVal) => {
-      selectedItemId.value = newVal;
+    selectedItemId.value = newVal;
   },
   { immediate: true },
 );
@@ -118,6 +146,27 @@ onMounted(async () => {
   });
 });
 
+const onSearchList = debounce(async (keyword: string) => {
+  searchValue.value = keyword;
+  await getItems({
+    ...searchQuery.value,
+    keyword,
+  });
+}, 1000);
+
+const addItem = () => {
+  openBlade({
+    blade: markRaw(Details),
+  });
+};
+
+const onPaginationClick = async (page: number) => {
+  await getItems({
+    ...searchQuery.value,
+    skip: (page - 1) * (searchQuery.value.take ?? 20),
+  });
+};
+
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "refresh",
@@ -171,7 +220,7 @@ const columns = ref<ITableColumns[]>([
   },
 ]);
 
-const title = computed(() => t("SAMPLE_APP.PAGES.LIST.HEADER.TITLE"));
+const title = computed(() => t("SAMPLE_APP.PAGES.LIST.TITLE"));
 
 const reload = async () => {
   await getItems({
@@ -208,12 +257,12 @@ const actionBuilder = (): IActionBuilderResult[] => {
     icon: "material-delete",
     title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.ACTIONS.DELETE")),
     type: "danger",
-    clickHandler(item: MockedItem) {
-      if (item.id) {
-        if (!selectedIds.value.includes(item.id)) {
-          selectedIds.value.push(item.id);
+    async clickHandler(_item: MockedItem) {
+      if (_item.id) {
+        if (!selectedIds.value.includes(_item.id)) {
+          selectedIds.value.push(_item.id);
         }
-        remove(selectedIds.value);
+        await remove(selectedIds.value);
         selectedIds.value = [];
       }
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "1.1.88",
+  "version": "1.1.90",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -9,11 +9,12 @@
   ],
   "scripts": {
     "build": "vite build && yarn postbuild",
+    "type-check": "vue-tsc --noEmit",
     "postbuild": "shx cp -R src/templates dist/"
   },
   "devDependencies": {
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "^1.1.88",
+    "@vc-shell/ts-config": "^1.1.90",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",