@vc-shell/create-vc-app 1.1.99-alpha.1 → 1.2.0

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

@@ -0,0 +1,300 @@
+<template>
+  <VcBlade
+    :title="title"
+    width="50%"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbar-items="bladeToolbar"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <!-- Blade contents -->
+    <!-- @vue-generic {MockedItem} -->
+    <VcTable
+      :expanded="expanded"
+      class="tw-grow tw-basis-0"
+      multiselect
+      :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"
+      :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-click="onItemClick"
+      @header-click="onHeaderClick"
+      @selection-changed="onSelectionChanged"
+      @search:change="onSearchList"
+      @pagination-click="onPaginationClick"
+    >
+    </VcTable>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, markRaw, onMounted, watch } from "vue";
+import {
+  IActionBuilderResult,
+  IBladeToolbar,
+  IParentCallArgs,
+  ITableColumns,
+  useBladeNavigation,
+  usePopup,
+  useTableSort,
+  useFunctions,
+} from "@vc-shell/framework";
+import { useI18n } from "vue-i18n";
+import { useList } from "./../composables";
+import Details from "./details.vue";
+import { MockedItem } from "./../composables/useList";
+
+export interface Props {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: Record<string, unknown>;
+}
+
+export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
+  (event: "collapse:blade"): void;
+  (event: "expand:blade"): void;
+  (event: "close:blade"): void;
+}
+
+defineOptions({
+  url: "/sample-list",
+  name: "SampleList",
+  isWorkspace: true,
+  menuItem: {
+    title: "SAMPLE_APP.MENU.TITLE",
+    icon: "lucide-file",
+    priority: 1,
+  },
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+});
+
+defineEmits<Emits>();
+
+const { t } = useI18n({ useScope: "global" });
+const { openBlade } = useBladeNavigation();
+const { showConfirmation } = usePopup();
+const { debounce } = useFunctions();
+
+const { sortExpression, handleSortChange: tableSortHandler } = useTableSort({
+  initialDirection: "DESC",
+  initialProperty: "createdDate",
+});
+
+const { getItems, removeItems, data, loading, totalCount, pages, currentPage, searchQuery } = useList({
+  sort: sortExpression.value,
+  pageSize: 20,
+});
+
+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;
+  },
+  { immediate: true },
+);
+
+onMounted(async () => {
+  await getItems({
+    ...searchQuery.value,
+    sort: sortExpression.value,
+  });
+});
+
+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",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TOOLBAR.REFRESH")),
+    icon: "material-refresh",
+    async clickHandler() {
+      await reload();
+    },
+  },
+  {
+    id: "remove",
+    icon: "material-delete",
+    title: computed(() => t("SAMPLE_APP.PAGES.LIST.TOOLBAR.REMOVE")),
+    async clickHandler() {
+      await remove(selectedIds.value);
+    },
+    disabled: computed(() => selectedIds.value.length === 0),
+  },
+]);
+
+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 () => {
+  await getItems({
+    ...searchQuery.value,
+    skip: (currentPage.value - 1) * (searchQuery.value.take ?? 10),
+    sort: sortExpression.value,
+  });
+};
+
+const onItemClick = (item: { id: string }) => {
+  openBlade({
+    blade: markRaw(Details),
+    param: item.id,
+    onOpen() {
+      selectedItemId.value = item.id;
+    },
+    onClose() {
+      selectedItemId.value = undefined;
+    },
+  });
+};
+
+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: "material-delete",
+    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);
+        }
+        await remove(selectedIds.value);
+        selectedIds.value = [];
+      }
+    },
+  });
+
+  return result;
+};
+
+async function remove(ids: string[]) {
+  if (
+    await showConfirmation(
+      t(`SAMPLE_APP.PAGES.ALERTS.DELETE_SELECTED_CONFIRMATION.MESSAGE`, {
+        count: selectedIds.value.length,
+      }),
+    )
+  ) {
+    await removeItems({ ids });
+    await reload();
+  }
+}
+
+watch(
+  () => sortExpression.value,
+  async (newVal) => {
+    await getItems({
+      sort: newVal,
+    });
+  },
+);
+
+defineExpose({
+  title,
+  reload,
+});
+</script>

package/dist/templates/sample/overrides/main.ts

@@ -0,0 +1,52 @@
+import VirtoShellFramework, { notification, useUser, useLanguages } from "@vc-shell/framework";
+import { createApp } from "vue";
+import { router } from "./router";
+import * as locales from "./locales";
+import { RouterView } from "vue-router";
+import {{ModuleNamePascalCase}} from "./modules/{{ModuleName}}";
+import SampleModule from "./modules/sample";
+import { bootstrap } from "./bootstrap";
+
+// Load required CSS
+import "@vc-shell/framework/dist/index.css";
+
+async function startApp() {
+  const { loadUser } = useUser();
+  await loadUser();
+
+  const { currentLocale, setLocale } = useLanguages();
+
+  const app = createApp(RouterView)
+    .use(VirtoShellFramework, {
+      router,
+      i18n: {
+        locale: import.meta.env.APP_I18N_LOCALE,
+        fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
+      },
+    })
+    // {{ModuleNamePascalCase}} module initialization
+    .use({{ModuleNamePascalCase}}, { router })
+    // Sample module initialization
+    .use(SampleModule, { router })
+    .use(router);
+
+  bootstrap(app);
+
+  Object.entries(locales).forEach(([key, message]) => {
+    app.config.globalProperties.$mergeLocaleMessage(key, message);
+  });
+
+  setLocale(currentLocale.value);
+
+  app.config.errorHandler = (err) => {
+    notification.error((err as Error).toString(), {
+      timeout: 5000,
+    });
+  };
+
+  await router.isReady();
+
+  app.mount("#app");
+}
+
+startApp();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "1.1.99-alpha.1",
+  "version": "1.2.0",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -13,29 +13,24 @@
     "postbuild": "shx cp -R src/templates dist/"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.12",
-    "@types/pluralize": "^0.0.33",
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "1.1.99-alpha.1",
+    "@vc-shell/ts-config": "1.2.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.3",
-    "vite-plugin-dts": "^3.6.4"
+    "typescript": "^5.8.3"
   },
   "dependencies": {
     "chalk": "^2.4.2",
-    "lodash-es": "^4.17.21",
     "mri": "^1.2.0",
-    "pluralize": "^8.0.0",
-    "prettier": "^3.4.2",
     "prompts": "^2.4.2",
-    "tslib": "^2.5.3"
+    "tslib": "^2.5.3",
+    "vite": "^6.3.3",
+    "vite-plugin-dts": "^3.6.4"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "104a5b740c2b93da7702cd073a2d39d17977c83e"
+  "gitHead": "b2d01aef92535f1a9b6af0d621a43f920d541ba8"
 }

package/dist/cli/argv.d.ts

@@ -1,4 +0,0 @@
-import { CLIArgs } from './types.js';
-
-export declare function parseArgs(rawArgv?: string[]): CLIArgs;
-//# sourceMappingURL=argv.d.ts.map

package/dist/cli/argv.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"argv.d.ts","sourceRoot":"","sources":["../../src/cli/argv.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,wBAAgB,SAAS,CAAC,OAAO,GAAE,MAAM,EAAyB,GAAG,OAAO,CAmB3E"}

package/dist/cli/constants.d.ts

@@ -1,4 +0,0 @@
-export declare const renameFiles: Record<string, string | undefined>;
-export declare const SUPPORTED_TEMPLATE_EXTENSIONS: string[];
-export declare const MIN_NODE_VERSION = "18.0.0";
-//# sourceMappingURL=constants.d.ts.map

package/dist/cli/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/cli/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAiB1D,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAAyC,CAAC;AAEpF,eAAO,MAAM,gBAAgB,WAAW,CAAC"}

package/dist/cli/errors.d.ts

@@ -1,12 +0,0 @@
-export declare class CLIError extends Error {
-    readonly exitCode: number;
-    constructor(message: string, exitCode?: number);
-}
-export declare class ValidationError extends CLIError {
-    readonly issues: string[];
-    constructor(issues: string[]);
-}
-export declare class UserCancelledError extends CLIError {
-    constructor();
-}
-//# sourceMappingURL=errors.d.ts.map

package/dist/cli/errors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../src/cli/errors.ts"],"names":[],"mappings":"AAAA,qBAAa,QAAS,SAAQ,KAAK;IACjC,SAAgB,QAAQ,EAAE,MAAM,CAAC;gBAErB,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAI;CAK1C;AAED,qBAAa,eAAgB,SAAQ,QAAQ;IAC3C,SAAgB,MAAM,EAAE,MAAM,EAAE,CAAC;gBAErB,MAAM,EAAE,MAAM,EAAE;CAK7B;AAED,qBAAa,kBAAmB,SAAQ,QAAQ;;CAK/C"}

package/dist/cli/help.d.ts

@@ -1,3 +0,0 @@
-export declare function showHelp(): void;
-export declare function showVersion(): void;
-//# sourceMappingURL=help.d.ts.map

package/dist/cli/help.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"help.d.ts","sourceRoot":"","sources":["../../src/cli/help.ts"],"names":[],"mappings":"AAGA,wBAAgB,QAAQ,IAAI,IAAI,CAgE/B;AAED,wBAAgB,WAAW,IAAI,IAAI,CAElC"}

package/dist/cli/run.d.ts

@@ -1,2 +0,0 @@
-export declare function runCLI(rawArgv: string[]): Promise<number>;
-//# sourceMappingURL=run.d.ts.map

package/dist/cli/run.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../src/cli/run.ts"],"names":[],"mappings":"AAaA,wBAAsB,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CA8B/D"}

package/dist/cli/runtime.d.ts

@@ -1,7 +0,0 @@
-export interface NodeCompatibility {
-    compatible: boolean;
-    currentVersion: string;
-    minVersion: string;
-}
-export declare function checkNodeVersion(): NodeCompatibility;
-//# sourceMappingURL=runtime.d.ts.map

package/dist/cli/runtime.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/cli/runtime.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,IAAI,iBAAiB,CAUpD"}

package/dist/cli/types.d.ts

@@ -1,30 +0,0 @@
-export interface CLIArgs {
-    _: string[];
-    name?: string;
-    "app-name"?: string;
-    "package-name"?: string;
-    "module-name"?: string;
-    "base-path"?: string;
-    overwrite?: boolean;
-    help?: boolean;
-    h?: boolean;
-    version?: boolean;
-    v?: boolean;
-    type?: "grid" | "details";
-    module?: string;
-    composable?: boolean;
-    locales?: boolean;
-    widget?: boolean;
-    "is-workspace"?: boolean;
-    path?: string;
-    "form-fields"?: string;
-    "skip-form-editor"?: boolean;
-    "skip-module-gen"?: boolean;
-}
-export interface CreateAppConfig {
-    appName: string;
-    packageName: string;
-    basePath: string;
-    moduleName?: string;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/cli/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/cli/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,CAAC,EAAE,MAAM,EAAE,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,CAAC,EAAE,OAAO,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,CAAC,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/cli/utils.d.ts

@@ -1,4 +0,0 @@
-export declare function isValidName(appName: string): boolean;
-export declare function toValidName(appName: string): string;
-export declare function toValidBasePath(basePath: string): string;
-//# sourceMappingURL=utils.d.ts.map

package/dist/cli/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/cli/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAOnD;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAOxD"}

package/dist/cli/validation.d.ts

@@ -1,5 +0,0 @@
-import { CLIArgs } from './types.js';
-
-export declare function validateBasePath(basePath: string): boolean;
-export declare function validateArgs(args: CLIArgs): string[];
-//# sourceMappingURL=validation.d.ts.map

package/dist/cli/validation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/cli/validation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAE1D;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,CAYpD"}

package/dist/commands/generate-blade.d.ts

@@ -1,16 +0,0 @@
-interface BladeGeneratorArgs {
-    name?: string;
-    type?: "grid" | "details";
-    module?: string;
-    composable?: boolean;
-    locales?: boolean;
-    widget?: boolean;
-    isWorkspace?: boolean;
-    path?: string;
-    formFields?: string;
-    skipFormEditor?: boolean;
-    _skipActionPrompt?: boolean;
-}
-export declare function generateBlade(args?: BladeGeneratorArgs): Promise<void>;
-export {};
-//# sourceMappingURL=generate-blade.d.ts.map

package/dist/commands/generate-blade.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-blade.d.ts","sourceRoot":"","sources":["../../src/commands/generate-blade.ts"],"names":[],"mappings":"AA8BA,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAiBD,wBAAsB,aAAa,CAAC,IAAI,GAAE,kBAAuB,iBAmFhE"}