npm - @vc-shell/create-vc-app - Versions diffs - 1.0.113 → 1.0.115 - Mend

@vc-shell/create-vc-app 1.0.113 → 1.0.115

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/dist/{template/base/index.html.ejs → templates/base/index.html} RENAMED Viewed

@@ -11,7 +11,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
     <meta name="theme-color" content="#ffffff">
-  <title><%= appName %></title>
+  <title>App</title>
 </head>
 <body>

package/dist/{template/base/package.json.ejs → templates/base/package.json} RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "<%= appName %>",
+  "name": "app-boilerplate",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -24,7 +24,7 @@
     "@types/lodash-es": "^4.17.7",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
-    "@vc-shell/api-client-generator": "^1.0.88",
+    "@vc-shell/api-client-generator": "*",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
@@ -55,18 +55,18 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "@vc-shell/config-generator": "^1.0.88",
-    "@vc-shell/framework": "^1.0.88",
+    "@vc-shell/config-generator": "*",
+    "@vc-shell/framework": "*",
     "@vueuse/core": "^10.1.2",
     "@vueuse/integrations": "^10.1.2",
     "moment": "^2.29.4",
     "roboto-fontface": "^0.10.0",
     "vee-validate": "^4.9.4",
     "vue": "^3.3.7",
-    "vue-router": "^4.2.7",
-    "yarn": "^1.22.19"
+    "vue-router": "^4.2.5"
   },
   "lint-staged": {
     "*.{js,ts,vue}": "eslint --fix"
-  }
+  },
+  "packageManager": "yarn@3.6.4"
 }

package/dist/templates/base/public/assets/1.jpeg ADDED Viewed

Binary file

package/dist/templates/base/public/assets/2.jpg ADDED Viewed

Binary file

package/dist/templates/base/public/assets/3.jpg ADDED Viewed

Binary file

package/dist/{template/code/commonPages → templates/base}/src/composables/useLogin/index.ts RENAMED Viewed

@@ -6,6 +6,7 @@ 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");
   }

package/dist/{template/base/src/router/index.ts.ejs → templates/base/src/router/index.ts} RENAMED Viewed

@@ -1,26 +1,22 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-<% if(commonPages === true || bladeModuleStarter === true) { -%>
 import { inject } from "vue";
 import { useLogin } from "../composables";
-<% } -%>
 import {
   usePermissions,
   useUser,
   BladePageComponent,
   notification,
   useBladeNavigation,
-  <% if(commonPages === true) { -%>
   Login,
   ResetPassword,
   Invite,
-  <% } -%>} from "@vc-shell/framework";
+} from "@vc-shell/framework";
 /**
  * Pages
  */
-<% if(dashboard === true) { -%>
 import Dashboard from "../pages/Dashboard.vue";
-<% } -%>
+// eslint-disable-next-line import/no-unresolved
 import App from "./../pages/App.vue";
 // eslint-disable-next-line import/no-unresolved
@@ -37,17 +33,14 @@ const routes: RouteRecordRaw[] = [
       root: true,
     },
     children: [
-    <% if(dashboard === true) { -%>
       {
         name: "Dashboard",
         path: "",
         alias: "/",
         component: Dashboard,
       },
-    <% } -%>
     ],
   },
-  <% if(commonPages === true) { -%>
   {
     path: "/login",
     name: "Login",
@@ -56,7 +49,7 @@ const routes: RouteRecordRaw[] = [
       composable: useLogin,
       logo: whiteLogoImage,
       background: bgImage,
-      title: "<%= appName %>",
+      title: "application",
     }),
   },
   {
@@ -79,7 +72,6 @@ const routes: RouteRecordRaw[] = [
       userName: route.query.userName,
     }),
   },
-  <% } -%>
   {
     path: "/:pathMatch(.*)*",
     component: App,
@@ -96,14 +88,12 @@ export const router = createRouter({
   routes,
 });
-<% if(commonPages === true || bladeModuleStarter === true) { -%>
 router.beforeEach(async (to, from) => {
   const { hasAccess } = usePermissions();
   const { resolveBlades } = useBladeNavigation();
   const { isAuthenticated } = useUser();
   const pages = inject<BladePageComponent[]>("pages");
-  <% if(commonPages === true) { -%>
   if (to.name !== "Login" && to.name !== "ResetPassword" && to.name !== "Invite") {
     try {
       const component = pages.find((blade) => blade?.url === to.path);
@@ -115,7 +105,7 @@ router.beforeEach(async (to, from) => {
       } else if (_hasAccess && to.name !== "Login") {
         const resolvedBladeUrl = resolveBlades(to);
         return resolvedBladeUrl ? resolvedBladeUrl : true;
-      } else if (!hasAccess) {
+      } else if (!_hasAccess) {
         notification.error("Access restricted", {
           timeout: 3000,
         });
@@ -125,8 +115,4 @@ router.beforeEach(async (to, from) => {
       return { name: "Login" };
     }
   } else return true;
-  <% } else {-%>
-    return resolvedBladeUrl ? resolvedBladeUrl : true;
-  <% } -%>
 });
-<% } -%>

package/dist/{template → templates}/base/tsconfig.json RENAMED Viewed

@@ -17,7 +17,7 @@
     "useDefineForClassFields": true,
     "outDir": "dist",
     "rootDir": "src",
-    "strict": false,
     "lib": [
       "esnext",
       "dom"

package/dist/{template/base/vite.config.ts.ejs → templates/base/vite.config.ts} RENAMED Viewed

@@ -9,7 +9,7 @@ export default getApplicationConfiguration({
     VitePWA({
       includeAssets: ["favicon.ico", "apple-touch-icon.png"],
       manifest: {
-        name: "<%= appName %>",
+        name: "App",
         theme_color: "#319ED4",
         display: "fullscreen",
         start_url: "/index.html",
@@ -42,6 +42,9 @@ export default getApplicationConfiguration({
     splitVendorChunkPlugin(),
   ],
   optimizeDeps: {
-    include: mode === "development" ? ["ace-builds", "client-oauth2", "quill-delta", "quill", "url-pattern", "vee-validate"] : [],
+    include:
+      mode === "development"
+        ? ["ace-builds", "client-oauth2", "quill-delta", "quill", "url-pattern", "vee-validate"]
+        : [],
   },
 });

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

@@ -0,0 +1,45 @@
+import VirtoShellFramework, { notification, useUser } 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";
+// 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 app = createApp(RouterView)
+    .use(VirtoShellFramework)
+    // Classic module based on composables, pages and components
+    .use(ClassicModule, { router })
+    // Dynamic module based on page schemas
+    .use(DynamicModule, { router })
+    .use(router);
+  Object.entries(locales).forEach(([key, message]) => {
+    app.config.globalProperties.$mergeLocaleMessage(key, message);
+  });
+  app.provide("platformUrl", import.meta.env.APP_PLATFORM_URL);
+  app.config.errorHandler = (err) => {
+    notification.error(err.toString(), {
+      timeout: 5000,
+    });
+  };
+  await router.isReady();
+  app.mount("#app");
+}
+startApp();

package/dist/templates/variants/both/src/modules/classic-module/composables/index.ts ADDED Viewed

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

package/dist/templates/variants/both/src/modules/classic-module/composables/useDetails/index.ts ADDED Viewed

@@ -0,0 +1,52 @@
+/* eslint-disable import/no-unresolved */
+import { computed, ref } from "vue";
+import img1 from "/assets/1.jpeg";
+import img2 from "/assets/2.jpg";
+import img3 from "/assets/3.jpg";
+import { useAsync, useLoading } from "@vc-shell/framework";
+export default () => {
+  const item = ref({
+    imgSrc: undefined,
+    name: undefined,
+    createdDate: undefined,
+    id: undefined,
+  });
+  // Example mocked method for 'fetching' list data
+  const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
+    item.value = await new Promise((resolve) => {
+      setTimeout(() => {
+        const findMockedItem = [
+          {
+            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",
+          },
+        ].find((x) => x.id === payload.id);
+        resolve(findMockedItem);
+      }, 1000);
+    });
+  });
+  const loading = useLoading(itemLoading);
+  return {
+    item: computed(() => item.value),
+    loading: computed(() => loading.value),
+    getItem,
+  };
+};

package/dist/templates/variants/both/src/modules/classic-module/composables/useList/index.ts ADDED Viewed

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-unresolved */
+import { computed, ref } from "vue";
+import img1 from "/assets/1.jpeg";
+import img2 from "/assets/2.jpg";
+import img3 from "/assets/3.jpg";
+import { useAsync, useLoading } from "@vc-shell/framework";
+export default () => {
+  const data = ref([]);
+  // Example mocked method for 'fetching' list data
+  const { loading: itemLoading, action: getItems } = useAsync(async (payload) => {
+    data.value = await new Promise((resolve) => {
+      setTimeout(
+        () =>
+          resolve([
+            {
+              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",
+            },
+          ]),
+        1000
+      );
+    });
+  });
+  const loading = useLoading(itemLoading);
+  return {
+    data: computed(() => data.value),
+    loading: computed(() => loading.value),
+    totalCount: computed(() => data.value.length),
+    pages: computed(() => Math.ceil(data.value.length / 20)),
+    currentPage: 0 / Math.max(1, 20) + 1,
+    getItems,
+  };
+};

package/dist/{template/code/blade/src/modules/default/locales/en.json.ejs → templates/variants/both/src/modules/classic-module/locales/en.json} RENAMED Viewed

@@ -1,11 +1,11 @@
 {
-  "<%= bladeModuleName.toUpperCase() %>": {
+  "MODULE": {
     "MENU": {
-      "TITLE": "<%= bladeModuleName %>"
+      "TITLE": "Classic Module"
     },
     "PAGES": {
       "LIST": {
-        "TITLE": "<%= bladeModuleName %> blade",
+        "TITLE": "Module blade",
         "TOOLBAR": {
           "REFRESH": "Refresh",
           "ADD": "Add",
@@ -33,6 +33,9 @@
             "UNPUBLISH": "Unpublish",
             "PUBLISH": "Publish"
           }
+        },
+        "MOBILE": {
+          "CREATED": "Created"
         }
       }
     }

package/dist/templates/variants/both/src/modules/classic-module/pages/details.vue ADDED Viewed

@@ -0,0 +1,83 @@
+<template>
+  <VcBlade
+    v-loading="loading"
+    :title="item.name"
+    :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>
+        <VcInput
+          :model-value="item.name"
+          label="Name"
+          class="tw-mb-4"
+        ></VcInput>
+        <VcInput
+          :model-value="item.createdDate"
+          label="Date"
+          type="datetime-local"
+        ></VcInput>
+      </VcForm>
+    </VcContainer>
+  </VcBlade>
+</template>
+<script lang="ts" setup>
+import { IBladeToolbar, IParentCallArgs } from "@vc-shell/framework";
+import { useDetails } from "./../composables";
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+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: "/classic-module-details",
+});
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+  param: undefined,
+});
+const emit = defineEmits<Emits>();
+const { t } = useI18n({ useScope: "global" });
+const { item, loading, getItem } = useDetails();
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: computed(() => t("MODULE.PAGES.LIST.TOOLBAR.REFRESH")),
+    icon: "fas fa-sync-alt",
+    async clickHandler() {
+      await getItem({ id: props.param });
+    },
+  },
+]);
+onMounted(async () => {
+  if (props.param) {
+    await getItem({ id: props.param });
+  }
+});
+</script>
+<style lang="scss" scoped></style>

package/dist/templates/variants/both/src/modules/classic-module/pages/index.ts ADDED Viewed

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

package/dist/{template/code/blade/src/modules/default/pages/default-list.vue.ejs → templates/variants/both/src/modules/classic-module/pages/list.vue} RENAMED Viewed

@@ -1,6 +1,6 @@
 <template>
   <VcBlade
-    :title="$t('<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TITLE')"
+    :title="$t('MODULE.PAGES.LIST.TITLE')"
     width="50%"
     :expanded="expanded"
     :closable="closable"
@@ -16,35 +16,65 @@
       :notfound="notfound"
       class="tw-grow tw-basis-0"
       :multiselect="true"
+      :loading="loading"
       :columns="columns"
       :item-action-builder="actionBuilder"
       :sort="sort"
+      :pages="pages"
+      :total-count="totalCount"
       :search-value="searchValue"
-      :search-placeholder="$t('<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.SEARCH.PLACEHOLDER')"
-      :total-label="$t('<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.TOTALS')"
+      :current-page="currentPage"
+      :search-placeholder="$t('MODULE.PAGES.LIST.SEARCH.PLACEHOLDER')"
+      :total-label="$t('MODULE.PAGES.LIST.TABLE.TOTALS')"
       :selected-item-id="selectedItemId"
-      state-key="<%= bladeModuleName.toLowerCase() %>"
+      state-key="module"
+      :items="data"
       @item-click="onItemClick"
       @header-click="onHeaderClick"
     >
+      <template #mobile-item="itemData">
+        <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="itemData.item.imgSrc"
+            ></VcImage>
+            <div class="tw-grow tw-basis-0 tw-ml-3">
+              <div class="tw-font-bold tw-text-lg">
+                {{ itemData.item.name }}
+              </div>
+            </div>
+          </div>
+          <div class="tw-truncate tw-grow-[2] tw-basis-0">
+            <VcHint>{{ $t("MODULE.PAGES.LIST.MOBILE.CREATED") }}</VcHint>
+            <div class="tw-truncate tw-mt-1">
+              {{ itemData.item.createdDate }}
+            </div>
+          </div>
+        </div>
+      </template>
     </VcTable>
   </VcBlade>
 </template>
 <script lang="ts" setup>
-import { computed, inject, reactive, ref, markRaw } from "vue";
+import { computed, inject, reactive, ref, markRaw, onMounted, watch } from "vue";
 import {
   IBladeEvent,
   IBladeToolbar,
   IParentCallArgs,
-  useFunctions,
   IActionBuilderResult,
   ITableColumns,
+  useBladeNavigation,
 } from "@vc-shell/framework";
-import moment from "moment";
 // eslint-disable-next-line import/no-unresolved
 import emptyImage from "/assets/empty.png";
 import { useI18n } from "vue-i18n";
+import { useList } from "./../composables";
+import Details from "./details.vue";
 export interface Props {
   expanded?: boolean;
@@ -62,37 +92,64 @@ export interface Emits {
 }
 defineOptions({
-  url: "/<%= bladeModuleName.toLowerCase() %>",
-})
+  url: "/classic-module-list",
+});
 const props = withDefaults(defineProps<Props>(), {
   expanded: true,
   closable: true,
 });
-const emit = defineEmits<Emits>();
+defineEmits<Emits>();
 const { t } = useI18n({ useScope: "global" });
-const { debounce } = useFunctions();
+const { openBlade } = useBladeNavigation();
+const { getItems, data, loading, totalCount, pages, currentPage } = useList();
 const sort = ref("createdDate:DESC");
 const searchValue = ref();
 const selectedItemId = ref<string>();
-const isDesktop = inject("isDesktop");
+watch(
+  () => props.param,
+  (newVal) => {
+    if (newVal) {
+      selectedItemId.value = newVal;
+      openBlade({
+        blade: markRaw(Details),
+        param: newVal,
+        onOpen() {
+          selectedItemId.value = newVal;
+        },
+        onClose() {
+          selectedItemId.value = undefined;
+        },
+      });
+    }
+  },
+  { immediate: true }
+);
+onMounted(async () => {
+  await getItems();
+});
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "refresh",
-    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TOOLBAR.REFRESH")),
+    title: computed(() => t("MODULE.PAGES.LIST.TOOLBAR.REFRESH")),
     icon: "fas fa-sync-alt",
-    // async clickHandler() {},
+    async clickHandler() {
+      await reload();
+    },
   },
 ]);
 const tableColumns = ref<ITableColumns[]>([
   {
     id: "imgSrc",
-    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.HEADER.PRODUCT_IMAGE")),
+    title: computed(() => t("MODULE.PAGES.LIST.TABLE.HEADER.PRODUCT_IMAGE")),
     width: 60,
     alwaysVisible: true,
     type: "image",
@@ -100,30 +157,28 @@ const tableColumns = ref<ITableColumns[]>([
   {
     id: "name",
     field: "name",
-    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME")),
-    sortable: true,
+    title: computed(() => t("MODULE.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME")),
     alwaysVisible: true,
   },
   {
     id: "createdDate",
-    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.HEADER.CREATED_DATE")),
+    title: computed(() => t("MODULE.PAGES.LIST.TABLE.HEADER.CREATED_DATE")),
     width: 140,
-    sortable: true,
     type: "date-ago",
   },
 ]);
 const empty = reactive({
   image: emptyImage,
-  text: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.EMPTY.TITLE")),
-  action: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.EMPTY.ACTION")),
+  text: computed(() => t("MODULE.PAGES.LIST.TABLE.EMPTY.TITLE")),
+  action: computed(() => t("MODULE.PAGES.LIST.TABLE.EMPTY.ACTION")),
   // clickHandler: () => {},
 });
 const notfound = reactive({
   image: emptyImage,
-  text: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.NOT_FOUND.TITLE")),
-  action: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.NOT_FOUND.ACTION")),
+  text: computed(() => t("MODULE.PAGES.LIST.TABLE.NOT_FOUND.TITLE")),
+  action: computed(() => t("MODULE.PAGES.LIST.TABLE.NOT_FOUND.ACTION")),
   clickHandler: async () => {
     searchValue.value = "";
   },
@@ -137,15 +192,23 @@ const columns = computed(() => {
   }
 });
-const title = computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TITLE"));
+const title = computed(() => t("MODULE.PAGES.LIST.TITLE"));
+const reload = async () => {
+  await getItems();
+};
 const onItemClick = (item: { id: string }) => {
-  // openBlade({
-  //   blade: markRaw(),
-  //   param: item.id,
-  // onOpen() {},
-  // onClose() {},
-  // });
+  openBlade({
+    blade: markRaw(Details),
+    param: item.id,
+    onOpen() {
+      selectedItemId.value = item.id;
+    },
+    onClose() {
+      selectedItemId.value = undefined;
+    },
+  });
 };
 const onHeaderClick = (item: ITableColumns) => {