@vc-shell/create-vc-app 1.1.98-rc.5 → 1.1.99-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "1.1.98-rc.5",
+  "version": "1.1.99-alpha.0",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -13,24 +13,29 @@
     "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.98-rc.5",
+    "@vc-shell/ts-config": "1.1.99-alpha.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
+    "vite-plugin-dts": "^3.6.4"
   },
   "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",
-    "vite": "^6.3.3",
-    "vite-plugin-dts": "^3.6.4"
+    "tslib": "^2.5.3"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "cdcb73b66d7fb58b876c9f497d8c7800a361d6b0"
+  "gitHead": "e0fca3bda346af415671814616883476f0d3f97c"
 }

package/dist/templates/mocks/sample-data/constants.ts

@@ -1,89 +0,0 @@
-interface MockedItem {
-  imgSrc: string;
-  name: string;
-  id: string;
-  description: string;
-  price: number;
-  salePrice: number;
-  guid: string;
-  currency: string;
-}
-
-interface MockedQuery {
-  keyword?: string;
-  take?: number;
-  skip?: number;
-  sort?: string;
-}
-
-const mockedItems: MockedItem[] = [
-  {
-    id: "beb211ea-1379-5a79-832c-9577ad387feb",
-    name: "Product 1",
-    imgSrc: "https://via.placeholder.com/150",
-    description: "Product 1 description",
-    price: 100,
-    salePrice: 90,
-    guid: "a1e26bcd-2704-5a3f-b97c-3e32e3d77a38",
-    currency: "USD",
-  },
-  {
-    id: "44b96758-792a-5449-b649-f2a0cd614c4b",
-    name: "Product 2",
-    imgSrc: "https://via.placeholder.com/150",
-    description: "Product 2 description",
-    price: 200,
-    salePrice: 90,
-    guid: "0ab995c0-3798-5011-a4ae-498e4c683cfd",
-    currency: "USD",
-  },
-  {
-    id: "605b2bfb-ba13-5687-91d5-0261b4b60524",
-    name: "Product 3",
-    imgSrc: "https://via.placeholder.com/150",
-    description: "Product 3 description",
-    price: 300,
-    salePrice: 90,
-    guid: "8a9b6954-7bf7-58b2-a146-c68e06fa7bb4",
-    currency: "USD",
-  },
-  {
-    id: "5ca8185c-0c28-59bf-ab40-991f134e6db3",
-    name: "Product 4",
-    imgSrc: "https://via.placeholder.com/150",
-    description: "Product 4 description",
-    price: 400,
-    salePrice: 90,
-    guid: "261364c5-f976-5c86-a92c-b0f0ea14efc7",
-    currency: "USD",
-  },
-  {
-    id: "077930cb-0874-5f85-9a5b-daafdd0bf860",
-    name: "Product 5",
-    imgSrc: "https://via.placeholder.com/150",
-    description: "Product 5 description",
-    price: 500,
-    salePrice: 90,
-    guid: "74d302ef-31e6-5432-91f1-d92c87ee2d2a",
-    currency: "USD",
-  },
-];
-
-const currencyOptions = [
-  {
-    value: "USD",
-    label: "USD",
-  },
-  {
-    value: "EUR",
-    label: "EUR",
-  },
-  {
-    value: "GBP",
-    label: "GBP",
-  },
-];
-
-export { mockedItems, currencyOptions };
-
-export type { MockedItem, MockedQuery };

package/dist/templates/mocks/sample-data/index.ts

@@ -1,2 +0,0 @@
-export * from './constants'
-export * from './methods'

package/dist/templates/mocks/sample-data/methods.ts

@@ -1,65 +0,0 @@
-import { type MockedItem, type MockedQuery, mockedItems } from ".";
-
-export function loadMockItemsList(query: MockedQuery) {
-  return new Promise((resolve: (value: MockedItem[]) => void) => {
-    setTimeout(() => resolve(mockedItems), 1000);
-  }).then((res) => {
-    res = res.filter((x) => {
-      if (query.keyword) {
-        return x.name.toLowerCase().includes(query.keyword.toLowerCase());
-      }
-      return true;
-    });
-
-    return { results: res, totalCount: res.length };
-  });
-}
-
-export async function loadMockItem(args?: { id: string }) {
-  return new Promise((resolve: (value: MockedItem) => void) => {
-    setTimeout(() => {
-      const findMockedItem = mockedItems.find((x) => x.id === args?.id);
-
-      if (findMockedItem) resolve({ ...findMockedItem });
-    }, 1000);
-  });
-}
-
-export async function removeMockItem(args: { id: string }) {
-  new Promise((resolve: (value: boolean) => void) => {
-    setTimeout(() => {
-      const index = mockedItems.findIndex((x) => x.id === args.id);
-
-      if (index > -1) {
-        mockedItems.splice(index, 1);
-        resolve(true);
-      } else {
-        resolve(false);
-      }
-    }, 1000);
-  });
-}
-
-export async function addNewMockItem(args: MockedItem) {
-  return new Promise((resolve: (value: MockedItem) => void) => {
-    setTimeout(() => {
-      mockedItems.push(args);
-      resolve(args);
-    }, 1000);
-  });
-}
-
-export async function updateMockItem(args: MockedItem) {
-  return new Promise((resolve: (value: MockedItem) => void) => {
-    setTimeout(() => {
-      const index = mockedItems.findIndex((x) => x.id === args.id);
-
-      if (index > -1) {
-        mockedItems[index] = args;
-        resolve(args);
-      } else {
-        resolve(args);
-      }
-    }, 1000);
-  });
-}

package/dist/templates/modules/classic-module/composables/index.ts

@@ -1,2 +0,0 @@
-export { default as use{{ModuleNamePascalCase}}List } from "./use{{ModuleNamePascalCase}}List";
-export { default as use{{ModuleNamePascalCase}}Details } from "./use{{ModuleNamePascalCase}}Details";

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

@@ -1,24 +0,0 @@
-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

@@ -1,47 +0,0 @@
-import { computed, ref } from "vue";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-// Replace with the actual search query interface from the API client
-interface SearchQuery {
-  take?: number;
-  skip?: number;
-  sort?: string;
-  keyword?: string;
-}
-
-export default (options?: { pageSize?: number, sort?: string }) => {
-  const pageSize = options?.pageSize || 20;
-  const searchResult = ref();
-  const searchQuery = ref<SearchQuery>({
-    take: pageSize,
-    skip: 0,
-    sort: options?.sort || "createdDate:DESC",
-  });
-
-  // Implement your own load function
-  const { loading: itemLoading, action: getItems } = useAsync<SearchQuery>(async (payload) => {
-    searchQuery.value = { ...searchQuery.value, ...payload };
-    searchResult.value = {
-      totalCount: 0,
-      items: [],
-    };
-  });
-
-  // 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),
-    loading: computed(() => loading.value),
-    totalCount: computed(() => searchResult.value?.totalCount || 0),
-    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/index.ts

@@ -1,8 +0,0 @@
-import * as pages from "./pages";
-import * as locales from "./locales";
-import { createAppModule } from "@vc-shell/framework";
-
-export default createAppModule(pages, locales);
-
-export * from "./pages";
-export * from "./composables";

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

@@ -1,37 +0,0 @@
-{
-  "{{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/locales/index.ts

@@ -1,2 +0,0 @@
-import * as en from "./en.json";
-export { en };

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

@@ -1,87 +0,0 @@
-<template>
-  <VcBlade
-    v-loading="loading"
-    :title="title"
-    :expanded="expanded"
-    :closable="closable"
-    width="70%"
-    :toolbar-items="bladeToolbar"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <VcContainer class="tw-p-2">
-      <VcForm>
-        <!-- You can add form fields here -->
-      </VcForm>
-    </VcContainer>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-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;
-  closable?: boolean;
-  param?: string;
-}
-
-export interface Emits {
-  (event: "parent:call", args: IParentCallArgs): void;
-  (event: "collapse:blade"): void;
-  (event: "expand:blade"): void;
-  (event: "close:blade"): void;
-}
-
-defineOptions({
-  url: "/{{ModuleName}}-details",
-  name: "{{ModuleNamePascalCase}}Details",
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-  param: undefined,
-});
-
-defineEmits<Emits>();
-
-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"));
-
-onMounted(async () => {
-  if (props.param) {
-    await getItem({ id: props.param });
-  }
-});
-
-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,
-});
-</script>

package/dist/templates/modules/classic-module/pages/index.ts

@@ -1,2 +0,0 @@
-export { default as List } from "./list.vue";
-export {default as Details } from './details.vue'

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

@@ -1,257 +0,0 @@
-<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 {never} -->
-    <VcTable
-      :expanded="expanded"
-      class="tw-grow tw-basis-0"
-      multiselect
-      :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"
-      :selected-item-id="selectedItemId"
-      :search-placeholder="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.SEARCH.PLACEHOLDER')"
-      :total-label="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TABLE.TOTALS')"
-      state-key="{{ModuleNameUppercaseSnakeCase}}"
-      :items="data"
-      @item-click="onItemClick"
-      @header-click="onHeaderClick"
-      @search:change="onSearchList"
-      @pagination-click="onPaginationClick"
-      @selection-changed="onSelectionChanged"
-    >
-    </VcTable>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, markRaw, onMounted, watch } from "vue";
-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";
-
-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: "/{{ModuleName}}",
-  name: "{{ModuleNamePascalCase}}List",
-  isWorkspace: true,
-  menuItem: {
-    title: "{{ModuleNameUppercaseSnakeCase}}.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 { debounce } = useFunctions();
-const { showConfirmation } = usePopup();
-const { sortExpression, handleSortChange: tableSortHandler } = useTableSort({
-  initialDirection: "DESC",
-  initialProperty: "createdDate",
-});
-
-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,
-  (newVal) => {
-      selectedItemId.value = newVal;
-  },
-  { immediate: true },
-);
-
-onMounted(async () => {
-  await getItems({
-    ...searchQuery.value,
-    sort: sortExpression.value,
-  });
-});
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "refresh",
-    title: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TOOLBAR.REFRESH")),
-    icon: "material-refresh",
-    async clickHandler() {
-      await reload();
-    },
-  },
-  {
-    id: "add",
-    icon: "material-add",
-    title: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TOOLBAR.ADD")),
-    clickHandler: () => {
-      addItem();
-    },
-  },
-]);
-
-const columns = ref<ITableColumns[]>([
-  // You can add columns here
-]);
-
-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,
-    skip: (currentPage.value - 1) * (searchQuery.value.take ?? 10),
-    sort: sortExpression.value,
-  });
-};
-
-const addItem = () => {
-  openBlade({
-    blade: markRaw(Details),
-  });
-};
-
-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 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) => {
-    await getItems({
-      sort: newVal,
-    });
-  },
-);
-
-defineExpose({
-  title,
-  reload,
-});
-</script>

package/dist/templates/sample/classic-module/composables/index.ts

@@ -1,2 +0,0 @@
-export { default as useList } from "./useList";
-export { default as useDetails } from "./useDetails";