@vc-shell/create-vc-app 1.0.88

package/dist/template/base/src/router/index.ts.ejs

@@ -0,0 +1,134 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+<% if(commonPages === true || bladeModuleStarter === true) { -%>
+import { inject } from "vue";
+<% } -%>
+import {
+  usePermissions,
+  useUser,
+  BladePageComponent,
+  notification,
+  useBladeNavigation,
+  <% if(commonPages === true) { -%>
+  Login,
+  ResetPassword,
+  Invite,
+  <% } -%>} from "@vc-shell/framework";
+  import { useCookies } from "@vueuse/integrations/useCookies";
+
+/**
+ * Pages
+ */
+<% if(dashboard === true) { -%>
+import Dashboard from "../pages/Dashboard.vue";
+<% } -%>
+import App from "./../pages/App.vue";
+
+// eslint-disable-next-line import/no-unresolved
+import whiteLogoImage from "/assets/logo-white.svg";
+// eslint-disable-next-line import/no-unresolved
+import bgImage from "/assets/background.jpg";
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    component: App,
+    name: "App",
+    meta: {
+      root: true,
+    },
+    children: [
+    <% if(dashboard === true) { -%>
+      {
+        name: "Dashboard",
+        path: "",
+        alias: "/",
+        component: Dashboard,
+      },
+    <% } -%>
+    ],
+  },
+  <% if(commonPages === true) { -%>
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
+    props: () => ({
+      logo: whiteLogoImage,
+      background: bgImage,
+      title: "<%= appName %>",
+    }),
+  },
+  {
+    name: "invite",
+    path: "/invite",
+    component: Invite,
+    props: (route) => ({
+      userId: route.query.userId,
+      token: route.query.token,
+      userName: route.query.userName,
+    }),
+  },
+  {
+    name: "resetpassword",
+    path: "/resetpassword",
+    component: ResetPassword,
+    props: (route) => ({
+      userId: route.query.userId,
+      token: route.query.token,
+      userName: route.query.userName,
+    }),
+  },
+  <% } -%>
+  {
+    path: "/:pathMatch(.*)*",
+    component: App,
+    beforeEnter: (to) => {
+      const { resolveUnknownRoutes } = useBladeNavigation();
+
+      return resolveUnknownRoutes(to);
+    },
+  },
+];
+
+export const router = createRouter({
+  history: createWebHashHistory(import.meta.env.APP_BASE_PATH as string),
+  routes,
+});
+
+<% if(commonPages === true || bladeModuleStarter === true) { -%>
+router.beforeEach(async (to, from) => {
+  const { fetchUserPermissions, checkPermission } = usePermissions();
+  const { resolveBlades } = useBladeNavigation();
+  const { isAuthenticated } = useUser();
+  const pages = inject<BladePageComponent[]>("pages");
+  const resolvedBladeUrl = resolveBlades(to);
+
+  <% if(commonPages === true) { -%>
+  if (to.name !== "Login" && to.name !== "ResetPassword" && to.name !== "Invite") {
+    try {
+      // Fetch permissions if not any
+      await fetchUserPermissions();
+
+      const component = pages.find((blade) => blade?.url === to.path);
+
+      const hasAccess = checkPermission(component?.permissions);
+
+      if (!(await isAuthenticated()) && to.name !== "Login") {
+        return { name: "Login" };
+      } else if (hasAccess && to.name !== "Login") {
+        return resolvedBladeUrl ? resolvedBladeUrl : true;
+      } else if (!hasAccess) {
+        notification.error("Access restricted", {
+          timeout: 3000,
+        });
+        return from.path;
+      }
+    } catch (e) {
+      return { name: "Login" };
+    }
+  } else return true;
+  <% } else {-%>
+    return resolvedBladeUrl ? resolvedBladeUrl : true;
+  <% } -%>
+});
+<% } -%>

package/dist/template/base/src/shims-vue.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+import { CoreBladeAdditionalSettings } from "@vc-shell/framework";
+import { Ref } from "vue";
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    $hasAccess: (permissions: string | string[]) => boolean;
+    $isPhone: Ref<boolean>;
+    $isTablet: Ref<boolean>;
+    $isMobile: Ref<boolean>;
+    $isDesktop: Ref<boolean>;
+    $isTouch: boolean;
+  }
+
+  interface ComponentOptionsBase extends CoreBladeAdditionalSettings {}
+}
+
+export {};

package/dist/template/base/src/styles/index.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/template/base/src/types/index.ts

@@ -0,0 +1,43 @@
+import { ComputedRef } from "vue";
+import { PushNotification } from "@vc-shell/framework";
+
+enum UserPermissions {
+  SellerUsersManage = "seller:users:manage",
+  SellerDetailsEdit = "seller:details:edit",
+  SellerProductsSearchFromAllSellers = "seller:products:search_from_all_sellers",
+  ManageSellerFulfillmentCenters = "seller:fulfillment_centers:manage",
+  ManageSellerReviews = "seller:reviews:manage",
+  SellerImportProfilesEdit = "seller:import_profiles:edit",
+}
+
+interface IShippingInfo {
+  label: string;
+  name?: string;
+  address?: string;
+  phone?: string;
+  email?: string;
+}
+
+interface INotificationActions {
+  name: string | ComputedRef<string>;
+  clickHandler(): void;
+  outline: boolean;
+  variant: "primary" | "secondary" | "special" | "danger" | "widget" | "onlytext" | undefined;
+  isVisible?: boolean | ComputedRef<boolean>;
+  disabled?: boolean | ComputedRef<boolean>;
+}
+
+interface IProductPushNotification extends PushNotification {
+  profileName?: string;
+  newStatus?: string;
+  productId?: string;
+  productName?: string;
+}
+
+interface INewOrderPushNotification extends PushNotification {
+  orderId?: string;
+}
+
+export type { IShippingInfo, INotificationActions, IProductPushNotification, INewOrderPushNotification };
+
+export { UserPermissions };

package/dist/template/base/tailwind.config.js

@@ -0,0 +1,7 @@
+const defaultConfig = require('@vc-shell/framework/tailwind.config')
+
+module.exports = {
+    prefix: 'tw-',
+    content: ["../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+    theme: defaultConfig.theme,
+};

package/dist/template/base/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "target": "esnext",
+    "jsx": "preserve",
+    "isolatedModules": true,
+    "useDefineForClassFields": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": false,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "types": [
+      "vite/client",
+      ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/dist/template/base/vite.config.ts.ejs

@@ -0,0 +1,47 @@
+import { getApplicationConfiguration } from "@vc-shell/config-generator";
+import { VitePWA } from "vite-plugin-pwa";
+import { splitVendorChunkPlugin } from "vite";
+
+const mode = process.env.APP_ENV as string;
+
+export default getApplicationConfiguration({
+  plugins: [
+    VitePWA({
+      includeAssets: ["favicon.ico", "apple-touch-icon.png"],
+      manifest: {
+        name: "<%= appName %>",
+        theme_color: "#319ED4",
+        display: "fullscreen",
+        start_url: "/index.html",
+        icons: [
+          {
+            src: "./img/icons/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "./img/icons/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "./img/icons/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "maskable",
+          },
+          {
+            src: "./img/icons/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+      },
+    }),
+    splitVendorChunkPlugin(),
+  ],
+  optimizeDeps: {
+    include: mode === "development" ? ["ace-builds", "client-oauth2", "quill-delta", "quill", "url-pattern"] : [],
+  },
+});

package/dist/template/code/blade/src/modules/default/components/index.ts

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

package/dist/template/code/blade/src/modules/default/composables/index.ts

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

package/dist/template/code/blade/src/modules/default/composables/useDefault/index.ts

@@ -0,0 +1,9 @@
+import { ref } from "vue";
+
+export default () => {
+  const data = ref();
+
+  return {
+    data,
+  };
+};

package/dist/template/code/blade/src/modules/default/index.ts

@@ -0,0 +1,9 @@
+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";
+//export * from "./components";

package/dist/template/code/blade/src/modules/default/locales/en.json.ejs

@@ -0,0 +1,40 @@
+{
+  "<%= bladeModuleName.toUpperCase() %>": {
+    "MENU": {
+      "TITLE": "<%= bladeModuleName %>"
+    },
+    "PAGES": {
+      "LIST": {
+        "TITLE": "<%= bladeModuleName %> blade",
+        "TOOLBAR": {
+          "REFRESH": "Refresh",
+          "ADD": "Add",
+          "DELETE": "Delete selected"
+        },
+        "SEARCH": {
+          "PLACEHOLDER": "Search keywords"
+        },
+        "TABLE": {
+          "TOTALS": "Count:",
+          "HEADER": {
+            "PRODUCT_IMAGE": "Pic",
+            "PRODUCT_NAME": "Name",
+            "CREATED_DATE": "Created"
+          },
+          "EMPTY": {
+            "TITLE": "There are no content yet",
+            "ACTION": "Add content"
+          },
+          "NOT_FOUND": {
+            "TITLE": "No content found.",
+            "ACTION": "Reset search"
+          },
+          "ACTIONS": {
+            "UNPUBLISH": "Unpublish",
+            "PUBLISH": "Publish"
+          }
+        }
+      }
+    }
+  }
+}

package/dist/template/code/blade/src/modules/default/locales/index.ts

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

package/dist/template/code/blade/src/modules/default/pages/default-list.vue.ejs

@@ -0,0 +1,197 @@
+<template>
+  <VcBlade
+    :title="$t('<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TITLE')"
+    width="50%"
+    :expanded="expanded"
+    :closable="closable"
+    :toolbar-items="bladeToolbar"
+    @close="$emit('close:blade')"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
+  >
+    <!-- Blade contents -->
+    <VcTable
+      :expanded="expanded"
+      :empty="empty"
+      :notfound="notfound"
+      class="tw-grow tw-basis-0"
+      :multiselect="true"
+      :columns="columns"
+      :item-action-builder="actionBuilder"
+      :sort="sort"
+      :search-value="searchValue"
+      :search-placeholder="$t('<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.SEARCH.PLACEHOLDER')"
+      :total-label="$t('<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.TOTALS')"
+      :selected-item-id="selectedItemId"
+      state-key="<%= bladeModuleName.toLowerCase() %>"
+      @item-click="onItemClick"
+      @header-click="onHeaderClick"
+    >
+    </VcTable>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, reactive, ref, markRaw } from "vue";
+import {
+  IBladeEvent,
+  IBladeToolbar,
+  IParentCallArgs,
+  useFunctions,
+  IActionBuilderResult,
+  ITableColumns,
+} 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";
+
+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: "open:blade", blade: IBladeEvent);
+  (event: "close:blade"): void;
+}
+
+defineOptions({
+  url: "/<%= bladeModuleName.toLowerCase() %>",
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  expanded: true,
+  closable: true,
+});
+
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n({ useScope: "global" });
+const { debounce } = useFunctions();
+
+const sort = ref("createdDate:DESC");
+const searchValue = ref();
+const selectedItemId = ref<string>();
+const isDesktop = inject("isDesktop");
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TOOLBAR.REFRESH")),
+    icon: "fas fa-sync-alt",
+    // async clickHandler() {},
+  },
+]);
+
+const tableColumns = ref<ITableColumns[]>([
+  {
+    id: "imgSrc",
+    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.HEADER.PRODUCT_IMAGE")),
+    width: 60,
+    alwaysVisible: true,
+    type: "image",
+  },
+  {
+    id: "name",
+    field: "name",
+    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TABLE.HEADER.PRODUCT_NAME")),
+    sortable: true,
+    alwaysVisible: true,
+  },
+  {
+    id: "createdDate",
+    title: computed(() => t("<%= bladeModuleName.toUpperCase() %>.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")),
+  // 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")),
+  clickHandler: async () => {
+    searchValue.value = "";
+  },
+});
+
+const columns = computed(() => {
+  if (props.expanded) {
+    return tableColumns.value;
+  } else {
+    return tableColumns.value.filter((item) => item.alwaysVisible === true);
+  }
+});
+
+const title = computed(() => t("<%= bladeModuleName.toUpperCase() %>.PAGES.LIST.TITLE"));
+
+const onItemClick = (item: { id: string }) => {
+  // openBlade({
+  //   blade: markRaw(),
+  //   param: item.id,
+  // onOpen() {},
+  // onClose() {},
+  // });
+};
+
+const onHeaderClick = (item: ITableColumns) => {
+  const sortOptions = ["DESC", "ASC", ""];
+
+  if (item.sortable) {
+    if (sort.value.split(":")[0] === item.id) {
+      const index = sortOptions.findIndex((x) => {
+        const sorting = sort.value.split(":")[1];
+        if (sorting) {
+          return x === sorting;
+        } else {
+          return x === "";
+        }
+      });
+
+      if (index !== -1) {
+        const newSort = sortOptions[(index + 1) % sortOptions.length];
+
+        if (newSort === "") {
+          sort.value = `${item.id}`;
+        } else {
+          sort.value = `${item.id}:${newSort}`;
+        }
+      }
+    } else {
+      sort.value = `${item.id}:${sortOptions[0]}`;
+    }
+  }
+};
+
+const actionBuilder = (item: { status: string }): IActionBuilderResult[] => {
+  const result = [];
+
+  result.push({
+    icon: "fas fa-trash",
+    title: "Delete",
+    variant: "danger",
+    leftActions: true,
+    // clickHandler() {},
+  });
+
+  return result;
+};
+
+defineExpose({
+  title,
+});
+</script>

package/dist/template/code/blade/src/modules/default/pages/index.ts

@@ -0,0 +1 @@
+export { default as DefaultList } from "./default-list.vue";

package/dist/template/code/commonPages/src/composables/index.ts

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

package/dist/template/code/commonPages/src/composables/useLogin/index.ts

@@ -0,0 +1,16 @@
+interface IUseLogin {
+  forgotPassword: (args: { loginOrEmail: string }) => void;
+}
+
+export default (): IUseLogin => {
+  /**
+   * @description Forgot password functionality
+   */
+  async function forgotPassword(args: { loginOrEmail: string }) {
+    console.log("Forgot password click");
+  }
+
+  return {
+    forgotPassword,
+  };
+};

package/dist/template/code/dashboard/src/pages/Dashboard.vue

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