@vc-shell/create-vc-app 2.0.0-alpha.15 → 2.0.0-alpha.17

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

@@ -6,54 +6,92 @@
   >
     <!-- Blade contents -->
     <!-- @vue-generic {MockedItem} -->
-    <VcTable
-      class="tw-grow tw-basis-0"
-      multiselect
+    <VcDataTable
+      v-model:search-value="searchValue"
+      v-model:active-item-id="selectedItemId"
+      v-model:selection="selectedItems"
       :loading="loading"
-      :columns="columns"
-      :sort="sortExpression"
-      :pages="pages"
-      :total-count="totalCount"
-      :search-value="searchValue"
-      :current-page="currentPage"
-      enable-item-actions
-      :item-action-builder="actionBuilder"
-      :empty="empty"
-      :notfound="notfound"
+      class="tw-grow tw-basis-0"
+      selection-mode="multiple"
+      :items="data ?? []"
+      :row-actions="actionBuilder"
+      :pagination="{ currentPage, pages }"
+      :searchable="true"
       :search-placeholder="$t('SAMPLE_APP.PAGES.LIST.SEARCH.PLACEHOLDER')"
+      :empty-state="{
+        icon: 'lucide-file',
+        title: $t('SAMPLE_APP.PAGES.LIST.EMPTY.NO_ITEMS'),
+        actionLabel: $t('SAMPLE_APP.PAGES.LIST.EMPTY.ADD'),
+        actionHandler: addItem,
+      }"
+      :not-found-state="{
+        icon: 'lucide-file',
+        title: $t('SAMPLE_APP.PAGES.LIST.NOT_FOUND.EMPTY'),
+        actionLabel: $t('SAMPLE_APP.PAGES.LIST.NOT_FOUND.RESET'),
+        actionHandler: clearSearch,
+      }"
       :total-label="$t('SAMPLE_APP.PAGES.LIST.TABLE.TOTALS')"
-      :selected-item-id="selectedItemId"
+      :total-count="totalCount"
       state-key="SAMPLE_APP"
-      :items="data ?? []"
-      @item-click="onItemClick"
-      @header-click="onHeaderClick"
-      @selection-changed="onSelectionChanged"
-      @search:change="onSearchList"
+      @search="onSearchList"
+      @row-click="onItemClick"
       @pagination-click="onPaginationClick"
     >
-    </VcTable>
+      <VcColumn
+        id="imgSrc"
+        :title="$t('SAMPLE_APP.PAGES.LIST.TABLE.HEADER.IMAGE')"
+        type="image"
+        width="70px"
+      />
+      <VcColumn
+        id="name"
+        :title="$t('SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME')"
+        :sortable="true"
+        :always-visible="true"
+      />
+      <VcColumn
+        id="description"
+        :title="$t('SAMPLE_APP.PAGES.LIST.TABLE.HEADER.DESCRIPTION')"
+      />
+      <VcColumn
+        id="price"
+        :title="$t('SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRICE')"
+        type="money"
+        :sortable="true"
+        :always-visible="true"
+      />
+      <VcColumn
+        id="salePrice"
+        :title="$t('SAMPLE_APP.PAGES.LIST.TABLE.HEADER.SALE_PRICE')"
+        type="money"
+      />
+      <VcColumn
+        id="currency.name"
+        :title="$t('SAMPLE_APP.PAGES.LIST.TABLE.HEADER.CURRENCY')"
+      />
+    </VcDataTable>
   </VcBlade>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, markRaw, onMounted, watch } from "vue";
+import { computed, ref, onMounted, watch } from "vue";
 import {
-  IActionBuilderResult,
   IBladeToolbar,
-  ITableColumns,
   useBlade,
   usePopup,
   useTableSort,
   useFunctions,
+  VcColumn,
+  VcDataTable,
 } from "@vc-shell/framework";
+import type { TableAction } from "@vc-shell/framework";
 import { useI18n } from "vue-i18n";
 import { useList } from "./../composables";
-import Details from "./details.vue";
 import { MockedItem } from "./../composables/useList";
 
-defineOptions({
-  url: "/sample-list",
+defineBlade({
   name: "SampleList",
+  url: "/sample-list",
   isWorkspace: true,
   menuItem: {
     title: "SAMPLE_APP.MENU.TITLE",
@@ -67,9 +105,9 @@ const { param, openBlade, exposeToChildren } = useBlade();
 const { showConfirmation } = usePopup();
 const { debounce } = useFunctions();
 
-const { sortExpression, handleSortChange: tableSortHandler } = useTableSort({
-  initialDirection: "DESC",
+const { sortExpression } = useTableSort({
   initialProperty: "createdDate",
+  initialDirection: "DESC",
 });
 
 const { getItems, removeItems, data, loading, totalCount, pages, currentPage, searchQuery } = useList({
@@ -79,29 +117,9 @@ const { getItems, removeItems, data, loading, totalCount, pages, currentPage, se
 
 const searchValue = ref();
 const selectedItemId = ref<string>();
-const selectedIds = ref<string[]>([]);
+const selectedItems = ref<MockedItem[]>([]);
 
-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: "",
-    });
-  },
-};
+const selectedIds = computed(() => selectedItems.value.map((item) => item.id).filter(Boolean) as string[]);
 
 watch(
   param,
@@ -118,6 +136,13 @@ onMounted(async () => {
   });
 });
 
+watch(sortExpression, async (value) => {
+  await getItems({
+    ...searchQuery.value,
+    sort: value,
+  });
+});
+
 const onSearchList = debounce(async (keyword: string) => {
   searchValue.value = keyword;
   await getItems({
@@ -126,9 +151,17 @@ const onSearchList = debounce(async (keyword: string) => {
   });
 }, 1000);
 
+const clearSearch = async () => {
+  searchValue.value = "";
+  await getItems({
+    ...searchQuery.value,
+    keyword: "",
+  });
+};
+
 const addItem = () => {
   openBlade({
-    blade: markRaw(Details),
+    name: "SampleDetails",
   });
 };
 
@@ -159,42 +192,10 @@ const bladeToolbar = ref<IBladeToolbar[]>([
   },
 ]);
 
-const columns = ref<ITableColumns[]>([
-  {
-    id: "imgSrc",
-    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.IMAGE")),
-    type: "image",
-    width: "70px",
-  },
-  {
-    id: "name",
-    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME")),
-    alwaysVisible: true,
-  },
-  {
-    id: "description",
-    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.DESCRIPTION")),
-  },
-  {
-    id: "price",
-    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.PRICE")),
-    type: "money",
-    alwaysVisible: true,
-  },
-  {
-    id: "salePrice",
-    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.SALE_PRICE")),
-    type: "money",
-  },
-  {
-    id: "currency.name",
-    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.HEADER.CURRENCY")),
-  },
-]);
-
 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),
@@ -202,9 +203,10 @@ const reload = async () => {
   });
 };
 
-const onItemClick = (item: { id: string }) => {
+const onItemClick = (event: { data: MockedItem; index: number; originalEvent: Event }) => {
+  const item = event.data;
   openBlade({
-    blade: markRaw(Details),
+    name: "SampleDetails",
     param: item.id,
     onOpen() {
       selectedItemId.value = item.id;
@@ -215,32 +217,23 @@ const onItemClick = (item: { id: string }) => {
   });
 };
 
-const onHeaderClick = (item: ITableColumns) => {
-  tableSortHandler(item.id);
-};
-
-const onSelectionChanged = (items: MockedItem[]) => {
-  selectedIds.value = items.map((item) => item.id!);
-};
-
-const actionBuilder = (): IActionBuilderResult[] => {
-  const result: IActionBuilderResult[] = [];
-  result.push({
-    icon: "lucide-trash-2",
-    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.ACTIONS.DELETE")),
-    type: "danger",
-    async clickHandler(_item: MockedItem) {
-      if (_item.id) {
-        if (!selectedIds.value.includes(_item.id)) {
-          selectedIds.value.push(_item.id);
+const actionBuilder = (item: MockedItem): TableAction[] => {
+  return [
+    {
+      icon: "lucide-trash-2",
+      title: computed(() => t("SAMPLE_APP.PAGES.LIST.TABLE.ACTIONS.DELETE")),
+      type: "danger",
+      async clickHandler() {
+        if (item.id) {
+          if (!selectedIds.value.includes(item.id)) {
+            selectedItems.value = [...selectedItems.value, item];
+          }
+          await remove(selectedIds.value);
+          selectedItems.value = [];
         }
-        await remove(selectedIds.value);
-        selectedIds.value = [];
-      }
+      },
     },
-  });
-
-  return result;
+  ];
 };
 
 async function remove(ids: string[]) {
@@ -256,14 +249,5 @@ async function remove(ids: string[]) {
   }
 }
 
-watch(
-  () => sortExpression.value,
-  async (newVal) => {
-    await getItems({
-      sort: newVal,
-    });
-  },
-);
-
 exposeToChildren({ reload });
 </script>

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

@@ -22,8 +22,8 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@vc-shell/api-client-generator": "^2.0.0-alpha.15",
-    "@vc-shell/ts-config": "^2.0.0-alpha.15",
+    "@vc-shell/api-client-generator": "^2.0.0-alpha.17",
+    "@vc-shell/ts-config": "^2.0.0-alpha.17",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
@@ -48,18 +48,16 @@
     "vite-plugin-checker": "^0.9.1",
     "vite-plugin-mkcert": "^1.17.1",
     "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.2.5"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^2.0.0-alpha.15",
-    "@vc-shell/framework": "^2.0.0-alpha.15",
+    "@vc-shell/config-generator": "^2.0.0-alpha.17",
+    "@vc-shell/framework": "^2.0.0-alpha.17",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
-    "cross-spawn": "^7.0.3",
-    "moment": "^2.30.1",
     "vee-validate": "^4.12.4",
-    "vue": "^3.5.13",
-    "vue-router": "^4.2.5"
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.3"
   },
   "lint-staged": {
     "*.{js,ts,html,css}": "prettier --write '**/*.{ts,vue}'",

package/dist/templates/standalone/src/bootstrap.ts.ejs

@@ -1,13 +1,13 @@
 import { App } from "vue";
-import { addMenuItem<% if (dashboard) { %>, registerDashboardWidget<% } %> } from "@vc-shell/framework";
-<% if (dashboard) { %>
+<% if (dashboard) { -%>
+import { addMenuItem, registerDashboardWidget } from "@vc-shell/framework";
 import { markRaw } from "vue";
 import Welcome from "./components/dashboard-widgets/Welcome.vue";
-<% } %>
+<% } -%>
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function bootstrap(app: App) {
-<% if (dashboard) { %>
+<% if (dashboard) { -%>
   addMenuItem({
     title: "SHELL.MENU.DASHBOARD",
     icon: "lucide-home",
@@ -22,5 +22,5 @@ export function bootstrap(app: App) {
     size: { width: 6, height: 6 },
     position: { x: 0, y: 0 },
   });
-<% } %>
+<% } -%>
 }

package/dist/templates/standalone/src/main.ts.ejs

@@ -3,10 +3,12 @@ import { createApp } from "vue";
 import { router } from "./router";
 import * as locales from "./locales";
 import { RouterView } from "vue-router";
+<% if (hasModule) { -%>
 import <%- ModuleNamePascalCase %> from "./modules/<%- ModuleName %>";
-<% if (mocks) { %>
+<% } -%>
+<% if (mocks) { -%>
 import Sample from "./modules/sample";
-<% } %>
+<% } -%>
 import { bootstrap } from "./bootstrap";
 
 import "@vc-shell/framework/dist/index.css";
@@ -20,28 +22,32 @@ async function startApp() {
     console.log(e);
   }
 
-  const app = createApp(RouterView)
-    .use(VirtoShellFramework, {
-      router,
-      i18n: {
-        locale: import.meta.env.APP_I18N_LOCALE,
-        fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
-      },
-<% if (aiAgent) { %>
-      aiAgent: {
-        config: {
-          url: import.meta.env.APP_AI_AGENT_URL,
-        },
+  const { currentLocale, setLocale } = useLanguages();
+
+  const app = createApp(RouterView);
+
+  app.use(VirtoShellFramework, {
+    router,
+    i18n: {
+      locale: import.meta.env.APP_I18N_LOCALE,
+      fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
+    },
+<% if (aiAgent) { -%>
+    aiAgent: {
+      config: {
+        url: import.meta.env.APP_AI_AGENT_URL,
       },
-<% } %>
-    })
-    .use(<%- ModuleNamePascalCase %>, { router })
-<% if (mocks) { %>
-    .use(Sample, { router })
-<% } %>
-    .use(router);
+    },
+<% } -%>
+  });
 
-  const { currentLocale, setLocale } = app.runWithContext(() => useLanguages());
+<% if (hasModule) { -%>
+  app.use(<%- ModuleNamePascalCase %>);
+<% } -%>
+<% if (mocks) { -%>
+  app.use(Sample);
+<% } -%>
+  app.use(router);
 
   bootstrap(app);
 
@@ -51,7 +57,7 @@ async function startApp() {
 
   setLocale(currentLocale.value);
 
-  app.config.errorHandler = (err) => {
+  app.config.errorHandler = (err: unknown) => {
     notification.error((err as Error).toString(), {
       timeout: 5000,
     });

package/dist/templates/standalone/tsconfig.json

@@ -6,6 +6,7 @@
     "rootDir": "src",
     "types": [
       "vite/client",
+      "@vc-shell/framework/globals"
       ]
   },
   "include": [

package/dist/types.d.ts

@@ -1,9 +1,9 @@
-export type ProjectType = "standalone" | "dynamic-module" | "host-app";
+export type ProjectType = "standalone" | "dynamic-module";
 export interface ProjectOptions {
     projectName: string;
     packageName: string;
     projectType: ProjectType;
-    moduleName: string;
+    moduleName?: string;
     basePath: string;
     tenantRoutes: boolean;
     aiAgent: boolean;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,gBAAgB,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,cAAc,CAAC;IACxB,cAAc,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnG,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAC7F"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,cAAc,CAAC;IACxB,cAAc,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnG,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAC7F"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "2.0.0-alpha.15",
+  "version": "2.0.0-alpha.17",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -9,13 +9,14 @@
   ],
   "scripts": {
     "build": "vite build && yarn postbuild",
+    "test": "vitest run --config vitest.config.ts",
     "type-check": "vue-tsc --noEmit",
     "postbuild": "shx cp -R src/templates dist/"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "2.0.0-alpha.15",
+    "@vc-shell/ts-config": "2.0.0-alpha.17",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",

package/dist/templates/host-app/src/shims-vue.d.ts

@@ -1,27 +0,0 @@
-/* eslint-disable */
-
-import { CoreBladeAdditionalSettings } from "@vc-shell/framework";
-import type { Ref } from "vue";
-import type { Composer } from "vue-i18n";
-
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
-
-declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties extends _ComponentCustomProperties {
-    $mergeLocaleMessage: Composer<{}, {}, {}, string, never, string>["mergeLocaleMessage"];
-    $hasAccess: (permissions: string | string[] | undefined) => boolean;
-    $isPhone: Ref<boolean>;
-    $isTablet: Ref<boolean>;
-    $isMobile: Ref<boolean>;
-    $isDesktop: Ref<boolean>;
-    $isTouch: boolean;
-  }
-
-  interface ComponentOptionsBase extends CoreBladeAdditionalSettings {}
-}
-
-export {};

package/dist/templates/host-app/src/vue-i18n.d.ts

@@ -1,10 +0,0 @@
-import type { ComponentCustomProperties } from '@vue/runtime-core';
-
-declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties {
-    $t: (key: string, ...args: any[]) => string;
-    $d: (key: string, ...args: any[]) => string;
-    $tm: (key: string, ...args: any[]) => string;
-    $rt: (key: string, ...args: any[]) => string;
-  }
-}

package/dist/templates/standalone/src/shims-vue.d.ts

@@ -1,27 +0,0 @@
-/* eslint-disable */
-
-import { CoreBladeAdditionalSettings } from "@vc-shell/framework";
-import type { Ref } from "vue";
-import type { Composer } from "vue-i18n";
-
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
-
-declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties extends _ComponentCustomProperties {
-    $mergeLocaleMessage: Composer<{}, {}, {}, string, never, string>["mergeLocaleMessage"];
-    $hasAccess: (permissions: string | string[] | undefined) => boolean;
-    $isPhone: Ref<boolean>;
-    $isTablet: Ref<boolean>;
-    $isMobile: Ref<boolean>;
-    $isDesktop: Ref<boolean>;
-    $isTouch: boolean;
-  }
-
-  interface ComponentOptionsBase extends CoreBladeAdditionalSettings {}
-}
-
-export {};

package/dist/templates/standalone/src/vue-i18n.d.ts

@@ -1,10 +0,0 @@
-import type { ComponentCustomProperties } from '@vue/runtime-core';
-
-declare module "@vue/runtime-core" {
-  interface ComponentCustomProperties {
-    $t: (key: string, ...args: any[]) => string;
-    $d: (key: string, ...args: any[]) => string;
-    $tm: (key: string, ...args: any[]) => string;
-    $rt: (key: string, ...args: any[]) => string;
-  }
-}