@vc-shell/create-vc-app 1.1.58 → 1.1.60

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.1.60](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.59...v1.1.60) (2025-07-17)
+
+
+### Features
+
+* **create-vc-ap):** updated sample and base layout ([9ec1677](https://github.com/VirtoCommerce/vc-shell/commit/9ec1677dc52eb99b0238f9e466904185bbfc2acb))
+* **create-vc-app:** implement initial dashboard setup with welcome widget and routing ([d924e71](https://github.com/VirtoCommerce/vc-shell/commit/d924e715467f766b88bd746ac31a7a2b4dec168f))
+
+
+
+## [1.1.59](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.58...v1.1.59) (2025-07-11)
+
+
+
 ## [1.1.58](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.57...v1.1.58) (2025-07-10)
 
 

package/dist/index.js

@@ -6,7 +6,7 @@ import c from "node:path";
 import s from "node:fs";
 import { fileURLToPath as Oe } from "node:url";
 import { cwd as Me, exit as Ee, argv as Te } from "node:process";
-const Ue = "1.1.58", I = {
+const Ue = "1.1.60", I = {
   version: Ue
 };
 var Pe = typeof global == "object" && global && global.Object === Object && global, Le = typeof self == "object" && self && self.Object === Object && self, _e = Pe || Le || Function("return this")(), b = _e.Symbol, K = Object.prototype, ze = K.hasOwnProperty, De = K.toString, $ = b ? b.toStringTag : void 0;

package/dist/templates/base/_package.json

@@ -23,9 +23,9 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
-    "@vc-shell/api-client-generator": "^1.1.58",
-    "@vc-shell/release-config": "^1.1.58",
-    "@vc-shell/ts-config": "^1.1.58",
+    "@vc-shell/api-client-generator": "^1.1.60",
+    "@vc-shell/release-config": "^1.1.60",
+    "@vc-shell/ts-config": "^1.1.60",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -53,8 +53,8 @@
     "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^1.1.58",
-    "@vc-shell/framework": "^1.1.58",
+    "@vc-shell/config-generator": "^1.1.60",
+    "@vc-shell/framework": "^1.1.60",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",

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

@@ -0,0 +1,23 @@
+import { addMenuItem, registerDashboardWidget } from "@vc-shell/framework";
+import { App, markRaw } from "vue";
+import Welcome from "./components/dashboard-widgets/Welcome.vue";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function bootstrap(app: App) {
+  // Add Dashboard to main menu item
+  addMenuItem({
+    title: "SHELL.MENU.DASHBOARD",
+    icon: "lucide-home",
+    priority: 0,
+    url: "/",
+  });
+
+  // Register Dashboard Welcome Widget
+  registerDashboardWidget({
+    id: "welcome-widget",
+    name: "Welcome",
+    component: markRaw(Welcome),
+    size: { width: 6, height: 6 },
+    position: { x: 0, y: 0 },
+  });
+}

package/dist/templates/base/src/components/dashboard-widgets/Welcome.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="dashboard-widget-welcome">
+    <div class="dashboard-widget-welcome__welcome-image">
+      <img
+        :src="Welcome"
+        alt="Welcome"
+      />
+    </div>
+    <h1 class="dashboard-widget-welcome__welcome-title">{{ $t("SHELL.DASHBOARD.WELCOME.TITLE") }}</h1>
+    <p class="dashboard-widget-welcome__welcome-description">
+      {{ $t("SHELL.DASHBOARD.WELCOME.DESCRIPTION") }}
+    </p>
+    <VcButton
+      variant="secondary"
+      size="base"
+      >{{ $t("SHELL.DASHBOARD.WELCOME.GET_STARTED") }}</VcButton
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+// eslint-disable-next-line import/no-unresolved
+import Welcome from "/assets/welcome.png";
+</script>
+
+<style lang="scss">
+:root {
+  --dashboard-widget-welcome-background: linear-gradient(128deg, #e187f3 -18.35%, #45a5f5 96.57%);
+  --dashboard-widget-welcome-title-color: var(--additional-50);
+  --dashboard-widget-welcome-description-color: var(--additional-50);
+  --dashboard-widget-welcome-button-color: var(--additional-50);
+  --dashboard-widget-welcome-button-background: var(--additional-50);
+}
+
+.dashboard-widget-welcome {
+  background: var(--dashboard-widget-welcome-background);
+  @apply tw-h-full tw-p-6 tw-text-center tw-text-[color:var(--dashboard-widget-welcome-title-color)] tw-gap-6 tw-flex tw-flex-col tw-items-center;
+
+  &__welcome-image {
+    @apply tw-flex tw-justify-center tw-max-w-[80%] tw-h-[40%];
+  }
+
+  &__welcome-title {
+    @apply tw-text-2xl tw-font-semibold;
+  }
+
+  &__welcome-description {
+    @apply tw-whitespace-break-spaces tw-text-s tw-max-w-[90%] tw-mx-auto tw-leading-5 tw-font-semibold;
+  }
+}
+</style>

package/dist/templates/base/src/locales/en.json

@@ -1,3 +1,13 @@
-{
-  "language_name": "English"
-}
+{
+  "language_name": "English",
+  "SHELL": {
+    "DASHBOARD": {
+      "TITLE": "Dashboard",
+      "WELCOME": {
+        "TITLE": "Welcome",
+        "DESCRIPTION": "Welcome to Vendor portal! We're so excited to have you on board. \n To get started, we recommend exploring the dashboard and personalizing your settings to match your preferences.",
+        "GET_STARTED": "Get started"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+<template>
+  <DraggableDashboard />
+</template>
+
+<script lang="ts" setup>
+import { DraggableDashboard } from "@vc-shell/framework";
+</script>

package/dist/templates/base/src/router/routes.ts

@@ -1,78 +1,80 @@
-import { RouteRecordRaw } from "vue-router";
-import App from "../pages/App.vue";
-import { Invite, Login, ResetPassword, useBladeNavigation, ChangePasswordPage } from "@vc-shell/framework";
-// 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";
-
-export const routes: RouteRecordRaw[] = [
-  {
-    path: "/",
-    component: App,
-    name: "App",
-    meta: {
-      root: true,
-    },
-    children: [],
-    redirect: (to) => {
-      if (to.name === "App") {
-        return { path: "/{{ModuleName}}", params: to.params };
-      }
-      return to.path;
-    },
-  },
-  {
-    name: "Login",
-    path: "/login",
-    component: Login,
-    props: () => ({
-      logo: whiteLogoImage,
-      background: bgImage,
-      title: "{{AppNameSentenceCase}}",
-    }),
-  },
-  {
-    name: "Invite",
-    path: "/invite",
-    component: Invite,
-    props: (route) => ({
-      userId: route.query.userId,
-      token: route.query.token,
-      userName: route.query.userName,
-      logo: whiteLogoImage,
-      background: bgImage,
-    }),
-  },
-  {
-    name: "ResetPassword",
-    path: "/resetpassword",
-    component: ResetPassword,
-    props: (route) => ({
-      userId: route.query.userId,
-      token: route.query.token,
-      userName: route.query.userName,
-      logo: whiteLogoImage,
-      background: bgImage,
-    }),
-  },
-  {
-    name: "ChangePassword",
-    path: "/changepassword",
-    component: ChangePasswordPage,
-    meta: {
-      forced: true,
-    },
-    props: (route) => ({
-      background: bgImage,
-    }),
-  },
-  {
-    path: "/:pathMatch(.*)*",
-    component: App,
-    beforeEnter: async (to) => {
-      const { routeResolver } = useBladeNavigation();
-      return routeResolver(to);
-    },
-  },
-];
+import { RouteRecordRaw } from "vue-router";
+import App from "../pages/App.vue";
+import Dashboard from "../pages/Dashboard.vue";
+import { Invite, Login, ResetPassword, useBladeNavigation, ChangePasswordPage } from "@vc-shell/framework";
+// 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";
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    component: App,
+    name: "App",
+    meta: {
+      root: true,
+    },
+    children: [
+      {
+        name: "Dashboard",
+        path: "",
+        alias: `/`,
+        component: Dashboard,
+      },
+    ],
+  },
+  {
+    name: "Login",
+    path: "/login",
+    component: Login,
+    props: () => ({
+      logo: whiteLogoImage,
+      background: bgImage,
+      title: "{{AppNameSentenceCase}}",
+    }),
+  },
+  {
+    name: "Invite",
+    path: "/invite",
+    component: Invite,
+    props: (route) => ({
+      userId: route.query.userId,
+      token: route.query.token,
+      userName: route.query.userName,
+      logo: whiteLogoImage,
+      background: bgImage,
+    }),
+  },
+  {
+    name: "ResetPassword",
+    path: "/resetpassword",
+    component: ResetPassword,
+    props: (route) => ({
+      userId: route.query.userId,
+      token: route.query.token,
+      userName: route.query.userName,
+      logo: whiteLogoImage,
+      background: bgImage,
+    }),
+  },
+  {
+    name: "ChangePassword",
+    path: "/changepassword",
+    component: ChangePasswordPage,
+    meta: {
+      forced: true,
+    },
+    props: (route) => ({
+      background: bgImage,
+    }),
+  },
+  {
+    path: "/:pathMatch(.*)*",
+    component: App,
+    beforeEnter: async (to) => {
+      const { routeResolver } = useBladeNavigation();
+      return routeResolver(to);
+    },
+  },
+];

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

@@ -1,86 +1,89 @@
-interface MockedItem {
-  imgSrc: string;
-  name: string;
-  id: string;
-  description: string;
-  price: number;
-  salePrice: number;
-  guid: string;
-  currency: string;
-}
-
-interface MockedQuery {
-  keyword?: 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 };
+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/modules/classic-module/composables/use{{ModuleNamePascalCase}}List/index.ts

@@ -1,23 +1,40 @@
-import { computed, ref } from "vue";
-import { useAsync, useLoading } from "@vc-shell/framework";
-
-export default () => {
-  const data = ref([]);
-  const dataRes = ref();
-
-  // Implement your own load function
-  const { loading: itemLoading, action: getItems } = useAsync(async (payload) => {
-    data.value = [];
-  });
-
-  const loading = useLoading(itemLoading);
-
-  return {
-    data: computed(() => data.value),
-    loading: computed(() => loading.value),
-    totalCount: computed(() => dataRes.value?.totalCount),
-    pages: computed(() => Math.ceil(dataRes.value?.totalCount / 20)),
-    currentPage: 0 / Math.max(1, 20) + 1,
-    getItems,
-  };
-};
+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;
+}
+
+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: [],
+    };
+  });
+
+  const loading = useLoading(itemLoading);
+
+  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,
+    searchQuery,
+  };
+};