@vc-shell/create-vc-app 1.1.99-alpha.1 → 1.2.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.99-alpha.1",
-    "@vc-shell/release-config": "^1.1.99-alpha.1",
-    "@vc-shell/ts-config": "^1.1.99-alpha.1",
+    "@vc-shell/api-client-generator": "^1.2.0",
+    "@vc-shell/release-config": "^1.2.0",
+    "@vc-shell/ts-config": "^1.2.0",
     "@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.99-alpha.1",
-    "@vc-shell/framework": "^1.1.99-alpha.1",
+    "@vc-shell/config-generator": "^1.2.0",
+    "@vc-shell/framework": "^1.2.0",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",

package/dist/templates/base/src/main.ts

@@ -3,6 +3,7 @@ import { createApp } from "vue";
 import { router } from "./router";
 import * as locales from "./locales";
 import { RouterView } from "vue-router";
+import {{ModuleNamePascalCase}} from "./modules/{{ModuleName}}";
 import { bootstrap } from "./bootstrap";
 
 // Load required CSS
@@ -11,6 +12,7 @@ import "@vc-shell/framework/dist/index.css";
 async function startApp() {
   const { loadUser } = useUser();
 
+
   try {
     await loadUser();
   } catch (e) {
@@ -27,6 +29,8 @@ async function startApp() {
         fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
       },
     })
+    // {{ModuleNamePascalCase}} module initialization
+    .use({{ModuleNamePascalCase}}, { router })
     .use(router);
 
   bootstrap(app);

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+{
+  "{{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

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

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

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

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

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

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

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