@vc-shell/create-vc-app 1.0.188 → 1.0.190

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

@@ -1,6 +1,11 @@
 import { computed, ref, Ref } from "vue";
-import { DynamicBladeList, ListBaseBladeScope, useBladeNavigation, useListFactory } from "@vc-shell/framework";
-import { loadMockItemsList } from "../../../mocks";
+import {
+  DynamicBladeList,
+  ListBaseBladeScope,
+  useBladeNavigation,
+  useListFactory,
+  type TOpenBladeArgs,
+} from "@vc-shell/framework";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface DynamicItemsScope extends ListBaseBladeScope {}
@@ -12,28 +17,28 @@ export default (args: {
 }) => {
   const factory = useListFactory({
     load: async () => {
-      return await loadMockItemsList();
+      return {
+        totalCount: 0,
+        results: [],
+      };
     },
     remove: () => {
       throw new Error("Function not implemented.");
-    }
+    },
   });
 
   const { load, remove, items, pagination, loading, query } = factory();
   const { openBlade, resolveBladeByName } = useBladeNavigation();
 
-  async function openDetailsBlade(data?: Omit<Parameters<typeof openBlade>["0"], "blade">) {
+  async function openDetailsBlade(data?: TOpenBladeArgs) {
     await openBlade({
-      blade: resolveBladeByName("DynamicItem"),
+      blade: resolveBladeByName("{{ModuleNamePascalCase}}Details"),
       ...data,
     });
   }
 
   const scope = ref<DynamicItemsScope>({
     openDetailsBlade,
-    deleteItem: () => {
-      alert("Delete item");
-    },
   });
 
   return {

package/dist/templates/modules/dynamic-module/index.ts

@@ -1,9 +1,8 @@
 import * as schema from "./pages";
 import * as locales from "./locales";
 import * as composables from "./composables";
-import * as components from "./components";
 import { createDynamicAppModule } from "@vc-shell/framework";
 
-export default createDynamicAppModule({ schema, locales, composables, moduleComponents: components });
+export default createDynamicAppModule({ schema, locales, composables });
 
-export { schema, composables, locales, components };
+export { schema, composables, locales };

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

@@ -1,26 +1,19 @@
 {
-  "DYNAMICMODULE": {
+  "{{ModuleNameUppercaseSnakeCase}}": {
     "MENU": {
-      "TITLE": "Dynamic Module"
+      "TITLE": "{{ModuleNameSentenceCase}}"
     },
     "PAGES": {
       "LIST": {
-        "TITLE": "Module blade",
         "TOOLBAR": {
-          "REFRESH": "Refresh",
-          "ADD": "Add",
-          "DELETE": "Delete selected"
+          "REFRESH": "Refresh"
         },
         "SEARCH": {
           "PLACEHOLDER": "Search keywords"
         },
         "TABLE": {
           "TOTALS": "Count:",
-          "HEADER": {
-            "PRODUCT_IMAGE": "Pic",
-            "PRODUCT_NAME": "Name",
-            "CREATED_DATE": "Created"
-          },
+          "HEADER": {},
           "EMPTY": {
             "TITLE": "There are no content yet",
             "ACTION": "Add content"
@@ -28,15 +21,8 @@
           "NOT_FOUND": {
             "TITLE": "No content found.",
             "ACTION": "Reset search"
-          },
-          "ACTIONS": {
-            "UNPUBLISH": "Unpublish",
-            "PUBLISH": "Publish"
           }
         },
-        "MOBILE": {
-          "CREATED": "Created"
-        },
         "EMPTY": {
           "NO_ITEMS": "There are no items yet"
         }

package/dist/templates/modules/dynamic-module/pages/details.ts

@@ -2,37 +2,18 @@ import { DynamicDetailsSchema } from "@vc-shell/framework";
 
 export const details: DynamicDetailsSchema = {
   settings: {
-    url: "/dynamic-module-details",
-    id: "DynamicItem",
-    localizationPrefix: "DynamicModule",
-    composable: "useDetails",
+    url: "/{{ModuleName}}-details",
+    id: "{{ModuleNamePascalCase}}Details",
+    localizationPrefix: "{{ModuleNameUppercaseSnakeCase}}",
+    composable: "use{{ModuleNamePascalCase}}Details",
     component: "DynamicBladeForm",
-    toolbar: [
-      {
-        id: "refresh",
-        icon: "fas fa-sync-alt",
-        title: "Refresh",
-        method: "refresh",
-      },
-    ],
   },
   content: [
     {
       id: "dynamicItemForm",
       component: "vc-form",
       children: [
-        {
-          id: "itemName",
-          component: "vc-input",
-          label: "Name",
-          property: "name",
-        },
-        {
-          id: "itemCreatedDate",
-          component: "vc-input",
-          label: "Created date",
-          property: "createdDate",
-        },
+        // You can add fields here
       ],
     },
   ],

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

@@ -1,4 +1,4 @@
-import { grid as itemsList } from "./list";
-import { details as itemDetails } from "./details";
+import { grid as {{ModuleNameExports}}List } from "./list";
+import { details as {{ModuleNameExports}}Details } from "./details";
 
-export { itemsList, itemDetails };
+export { {{ModuleNameExports}}List, {{ModuleNameExports}}Details };

package/dist/templates/modules/dynamic-module/pages/list.ts

@@ -2,12 +2,12 @@ import { DynamicGridSchema } from "@vc-shell/framework";
 
 export const grid: DynamicGridSchema = {
   settings: {
-    url: "/dynamic-module-list",
-    id: "DynamicItems",
-    titleTemplate: "Dynamic module blade",
-    localizationPrefix: "DynamicModule",
+    url: "/{{ModuleName}}",
+    id: "{{ModuleNamePascalCase}}List",
+    titleTemplate: "{{ModuleNameSentenceCase}} list",
+    localizationPrefix: "{{ModuleNameUppercaseSnakeCase}}",
     isWorkspace: true,
-    composable: "useList",
+    composable: "use{{ModuleNamePascalCase}}List",
     component: "DynamicBladeList",
     toolbar: [
       {
@@ -18,47 +18,17 @@ export const grid: DynamicGridSchema = {
       },
     ],
     menuItem: {
-      title: 'DYNAMICMODULE.MENU.TITLE',
+      title: "{{ModuleNameUppercaseSnakeCase}}.MENU.TITLE",
       icon: "fas fa-file-alt",
       priority: 1,
-    }
+    },
   },
   content: [
     {
       id: "itemsGrid",
       component: "vc-table",
-      actions: [
-        {
-          id: "deleteAction",
-          icon: "fas fa-trash",
-          title: "Delete",
-          type: "danger",
-          position: "left",
-          method: "deleteItem",
-        },
-      ],
-      mobileTemplate: {
-        component: "DynamicItemsMobileGridView",
-      },
-      multiselect: true,
       columns: [
-        {
-          id: "imgSrc",
-          title: "Pic",
-          type: "image",
-          alwaysVisible: true,
-        },
-        {
-          id: "name",
-          title: "Name",
-          alwaysVisible: true,
-        },
-        {
-          id: "createdDate",
-          title: "Created date",
-          sortable: true,
-          type: "date-ago",
-        },
+        // You can add columns here
       ],
     },
   ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "1.0.188",
+  "version": "1.0.190",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "^1.0.188",
+    "@vc-shell/ts-config": "^1.0.190",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",

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

@@ -1,15 +0,0 @@
-import { useMenuService } from "@vc-shell/framework";
-import { App } from "vue";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function bootstrap(app: App) {
-  const { addMenuItem } = useMenuService();
-
-  // Add Dashboard to main menu item
-  addMenuItem({
-    title: "SHELL.MENU.DASHBOARD",
-    icon: "fas fa-home",
-    priority: 0,
-    url: "/",
-  });
-}

package/dist/templates/base/src/composables/useLogin/index.ts

@@ -1,17 +0,0 @@
-interface IUseLogin {
-  forgotPassword: (args: { loginOrEmail: string }) => void;
-}
-
-export default (): IUseLogin => {
-  /**
-   * @description Forgot password functionality
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async function forgotPassword(args: { loginOrEmail: string }) {
-    console.log("Forgot password click");
-  }
-
-  return {
-    forgotPassword,
-  };
-};

package/dist/templates/base/src/modules/mocks.ts

@@ -1,50 +0,0 @@
-/* eslint-disable import/no-unresolved */
-import img1 from "/assets/1.jpeg";
-import img2 from "/assets/2.jpg";
-import img3 from "/assets/3.jpg";
-
-export interface MockedItem {
-  imgSrc: string;
-  name: string;
-  createdDate: Date;
-  id: string;
-}
-
-const mockedItems: MockedItem[] = [
-  {
-    imgSrc: img1,
-    name: "Item 1",
-    createdDate: new Date(),
-    id: "item-id-1",
-  },
-  {
-    imgSrc: img2,
-    name: "Item 2",
-    createdDate: new Date(),
-    id: "item-id-2",
-  },
-  {
-    imgSrc: img3,
-    name: "Item 3",
-    createdDate: new Date(),
-    id: "item-id-3",
-  },
-];
-
-export function loadMockItemsList() {
-  return new Promise((resolve: (value: MockedItem[]) => void) => {
-    setTimeout(() => resolve(mockedItems), 1000);
-  }).then((res) => {
-    return { results: res, totalCount: res.length };
-  });
-}
-
-export 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);
-  });
-}

package/dist/templates/base/src/pages/Dashboard.vue

@@ -1,38 +0,0 @@
-<template>
-  <VcContainer class="dashboard tw-w-full tw-h-full tw-box-border">
-    <div
-      v-if="$isDesktop.value"
-      class="dashboard-header"
-    >
-      {{ $t("SHELL.DASHBOARD.TITLE") }}
-    </div>
-  </VcContainer>
-</template>
-
-<script lang="ts" setup>
-import { notification, useErrorHandler } from "@vc-shell/framework";
-import { watch } from "vue";
-
-const { error, reset } = useErrorHandler(true);
-
-watch(error, (newVal) => {
-  if (newVal) {
-    notification.error(newVal, {
-      timeout: 5000,
-      onOpen() {
-        reset();
-      },
-    });
-  }
-});
-</script>
-
-<style lang="scss">
-.dashboard {
-  --card-header-background: transparent;
-
-  &-header {
-    @apply tw-text-[25px] tw-text-[#333333] tw-my-3 tw-px-2;
-  }
-}
-</style>

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

@@ -1 +0,0 @@
-export {};

package/dist/templates/modules/dynamic-module/components/DynamicItemsMobileGridView.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-py-3 tw-px-4">
-    <div class="tw-w-full tw-flex tw-justify-evenly tw-mb-2">
-      <VcImage
-        class="tw-shrink-0"
-        aspect="1x1"
-        size="s"
-        :bordered="true"
-        :src="context.item.imgSrc"
-      ></VcImage>
-      <div class="tw-grow tw-basis-0 tw-ml-3">
-        <div class="tw-font-bold tw-text-lg">
-          {{ context.item.name }}
-        </div>
-      </div>
-    </div>
-    <div class="tw-truncate tw-grow-[2] tw-basis-0">
-      <VcHint>{{ $t("DYNAMICMODULE.PAGES.LIST.MOBILE.CREATED") }}</VcHint>
-      <div class="tw-truncate tw-mt-1">
-        {{ context.item.createdDate }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-export interface Props {
-  context: {
-    item: {
-      imgSrc: string;
-      name: string;
-      createdDate: Date;
-      id: string;
-    };
-  };
-}
-
-defineProps<Props>();
-</script>

package/dist/templates/modules/dynamic-module/components/index.ts

@@ -1,3 +0,0 @@
-import DynamicItemsMobileGridView from "./DynamicItemsMobileGridView.vue";
-
-export { DynamicItemsMobileGridView };

package/dist/templates/variants/both/src/main.ts

@@ -1,56 +0,0 @@
-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 ClassicModule from "./modules/classic-module";
-import DynamicModule from "./modules/dynamic-module";
-import { bootstrap } from "./bootstrap";
-
-// Load required CSS
-import "./styles/index.scss";
-import "@fortawesome/fontawesome-free/css/all.min.css";
-import "roboto-fontface/css/roboto/roboto-fontface.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,
-      platformUrl: import.meta.env.APP_PLATFORM_URL,
-      i18n: {
-        locale: import.meta.env.APP_I18N_LOCALE,
-        fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
-      },
-    })
-    // Classic module based on composables, pages and components
-    .use(ClassicModule, { router })
-    // Dynamic module based on page schemas
-    .use(DynamicModule, { 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/dist/templates/variants/classic/src/main.ts

@@ -1,53 +0,0 @@
-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 ClassicModule from "./modules/classic-module";
-import { bootstrap } from "./bootstrap";
-
-// Load required CSS
-import "./styles/index.scss";
-import "@fortawesome/fontawesome-free/css/all.min.css";
-import "roboto-fontface/css/roboto/roboto-fontface.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,
-      platformUrl: import.meta.env.APP_PLATFORM_URL,
-      i18n: {
-        locale: import.meta.env.APP_I18N_LOCALE,
-        fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
-      },
-    })
-    // Classic module based on composables, pages and components
-    .use(ClassicModule, { 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();