@vc-shell/create-vc-app 1.1.0-alpha.8 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [1.1.0](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.0-alpha.2...v1.1.0) (2025-04-29)
+
+
+### Features
+
+* first release ([6685f10](https://github.com/VirtoCommerce/vc-shell/commit/6685f10f98982038206a55b637dc14628a341088))
+* redesign alpha4 wip ([ac48f52](https://github.com/VirtoCommerce/vc-shell/commit/ac48f526f61e85518a238e1e6b49047ff3fcc786))
+* redesign alpha5 ([ac430b8](https://github.com/VirtoCommerce/vc-shell/commit/ac430b80f684d3b920c35778a83c33ec387b2484))
+
+
+
+# [1.1.0-alpha.11](https://github.com/VirtoCommerce/vc-shell/compare/v1.1.0-alpha.2...v1.1.0-alpha.11) (2025-04-29)
+
+
+### Features
+
+* first release ([6685f10](https://github.com/VirtoCommerce/vc-shell/commit/6685f10f98982038206a55b637dc14628a341088))
+* redesign alpha4 wip ([ac48f52](https://github.com/VirtoCommerce/vc-shell/commit/ac48f526f61e85518a238e1e6b49047ff3fcc786))
+* redesign alpha5 ([ac430b8](https://github.com/VirtoCommerce/vc-shell/commit/ac430b80f684d3b920c35778a83c33ec387b2484))
+
+
+
 ## [v1.1.0-alpha.2](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.340...vv1.1.0-alpha.2) (2025-02-25)
 
 

package/dist/index.js

@@ -6,7 +6,7 @@ import i from "node:path";
 import s from "node:fs";
 import { fileURLToPath as Re } from "node:url";
 import { cwd as je, argv as Ae, exit as we } from "node:process";
-const ke = "1.1.0-alpha.8", Oe = {
+const ke = "1.1.0", Oe = {
   version: ke
 };
 var Ne = typeof global == "object" && global && global.Object === Object && global, Me = typeof self == "object" && self && self.Object === Object && self, Te = Ne || Me || Function("return this")(), p = Te.Symbol, H = Object.prototype, Ue = H.hasOwnProperty, Ee = H.toString, y = p ? p.toStringTag : void 0;

package/dist/templates/base/_package.json

@@ -23,10 +23,10 @@
     "@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.0-alpha.8",
-    "@vc-shell/release-config": "^1.1.0-alpha.8",
-    "@vc-shell/ts-config": "^1.1.0-alpha.8",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@vc-shell/api-client-generator": "^1.1.0",
+    "@vc-shell/release-config": "^1.1.0",
+    "@vc-shell/ts-config": "^1.1.0",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "autoprefixer": "^10.4.16",
@@ -42,26 +42,25 @@
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
-    "sass": "^1.69.6",
+    "sass": "^1.87.0",
     "tailwindcss": "^3.4.0",
     "tsx": "^4.7.1",
-    "typescript": "~5.3.3",
-    "vite": "5.3.6",
-    "vite-plugin-checker": "^0.6.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
+    "vite-plugin-checker": "^0.9.1",
     "vite-plugin-mkcert": "^1.17.1",
     "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.3",
-    "@vc-shell/config-generator": "^1.1.0-alpha.8",
-    "@vc-shell/framework": "^1.1.0-alpha.8",
+    "@vc-shell/config-generator": "^1.1.0",
+    "@vc-shell/framework": "^1.1.0",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",
     "moment": "^2.30.1",
     "vee-validate": "^4.12.4",
-    "vue": "^3.4.19",
+    "vue": "^3.5.13",
     "vue-router": "^4.2.5"
   },
   "lint-staged": {

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

@@ -6,13 +6,17 @@ import { RouterView } from "vue-router";
 import {{ModuleNamePascalCase}} from "./modules/{{ModuleName}}";
 
 // Load required CSS
-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();
+
+
+  try {
+    await loadUser();
+  } catch (e) {
+    console.log(e);
+  }
 
   const { currentLocale, setLocale } = useLanguages();
 

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

@@ -34,5 +34,5 @@ console.debug(`Initializing App`);
 </script>
 
 <style lang="scss">
-@import "./../styles/index.scss";
+@use "./../styles/index.scss";
 </style>

package/dist/templates/base/src/styles/custom.scss

@@ -1,2 +1,116 @@
-/* Custom styles.
-*/
+/* Custom styles.
+*/
+
+/* Apply color scheme example
+You also need to register color theme in startApp() using the 'register(['my-theme'])' method of the useTheme composable. */
+/* html.my-theme {
+  // Primary
+  --primary-50: #1F2D3A;
+  --primary-100: #2B3D4A;
+  --primary-200: #3A4E5D;
+  --primary-300: #4A5F70;
+  --primary-400: #5B6F82;
+  --primary-500: #6C7F94;
+  --primary-600: #7A8F9E;
+  --primary-700: #8A9FA8;
+  --primary-800: #9AAEB2;
+  --primary-900: #AABFC0;
+  --primary-950: #BCCDD0;
+
+  // Secondary
+  --secondary-50: #1F2D3A;
+  --secondary-100: #2B3D4A;
+  --secondary-200: #3A4E5D;
+  --secondary-300: #4A5F70;
+  --secondary-400: #5B6F82;
+  --secondary-500: #6C7F94;
+  --secondary-600: #7A8F9E;
+  --secondary-700: #8A9FA8;
+  --secondary-800: #9AAEB2;
+  --secondary-900: #AABFC0;
+  --secondary-950: #BCCDD0;
+
+  // Accent
+  --accent-50: #1F2D3A;
+  --accent-100: #2B3D4A;
+  --accent-200: #3A4E5D;
+  --accent-300: #4A5F70;
+  --accent-400: #5B6F82;
+  --accent-500: #6C7F94;
+  --accent-600: #7A8F9E;
+  --accent-700: #8A9FA8;
+  --accent-800: #9AAEB2;
+  --accent-900: #AABFC0;
+  --accent-950: #BCCDD0;
+
+  // Neutrals
+  --neutrals-50: #2E2E2E;
+  --neutrals-100: #3D3D3D;
+  --neutrals-200: #4D4D4D;
+  --neutrals-300: #6D6D6D;
+  --neutrals-400: #8A8A8A;
+  --neutrals-500: #B3B3B3;
+  --neutrals-600: #D4D4D4;
+  --neutrals-700: #E4E4E4;
+  --neutrals-800: #F4F4F4;
+  --neutrals-900: #FAFAFA;
+  --neutrals-950: #FFFFFF;
+
+  // Additional
+  --additional-50: #2E2E2E;
+  --additional-950: #FFFFFF;
+
+  // States
+
+  // Warning
+  --warning-50: #3A2D00;
+  --warning-100: #5A4D00;
+  --warning-200: #7A6D00;
+  --warning-300: #9A8D00;
+  --warning-400: #B9AB00;
+  --warning-500: #D8C600;
+  --warning-600: #D8D100;
+  --warning-700: #B8A800;
+  --warning-800: #9A8B00;
+  --warning-900: #7A6E00;
+  --warning-950: #5A5000;
+
+  // Danger
+  --danger-50: #3F0D0D;
+  --danger-100: #5E1E1E;
+  --danger-200: #7E2F2F;
+  --danger-300: #9E3F3F;
+  --danger-400: #BF4F4F;
+  --danger-500: #DF5F5F;
+  --danger-600: #DF4D4D;
+  --danger-700: #BF3D3D;
+  --danger-800: #9E2D2D;
+  --danger-900: #7E1D1D;
+  --danger-950: #5E0D0D;
+
+  // Success
+  --success-50: #1D3A1D;
+  --success-100: #2D5A2D;
+  --success-200: #3A7A3A;
+  --success-300: #4A9A4A;
+  --success-400: #5AB05A;
+  --success-500: #6AC56A;
+  --success-600: #5A9A5A;
+  --success-700: #4A7F4A;
+  --success-800: #3A664A;
+  --success-900: #1D4C1D;
+  --success-950: #0A3A0A;
+
+  // Info
+  --info-50: #1F2D3A;
+  --info-100: #2B3D4A;
+  --info-200: #3A4E5D;
+  --info-300: #4A5F70;
+  --info-400: #5B6F82;
+  --info-500: #6C7F94;
+  --info-600: #7A8F9E;
+  --info-700: #8A9FA8;
+  --info-800: #9AAEB2;
+  --info-900: #AABFC0;
+  --info-950: #BCCDD0;
+} */

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

@@ -1,9 +1,8 @@
-@tailwind components;
+@use 'custom';
 
-@import 'base';
+@tailwind base;
 
-@import 'colors';
+@tailwind components;
 
-@import 'custom';
 
 @tailwind utilities;

package/dist/templates/base/tsconfig.json

@@ -1,16 +1,16 @@
-{
-  "extends": "@vc-shell/ts-config/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "outDir": "dist",
-    "rootDir": "src",
-    "types": [
-      "vite/client",
-      ]
-  },
-  "include": [
-    "./src/**/*.ts",
-    "./src/**/*.vue",
-    "./src/**/*.json"
-  ]
-}
+{
+  "extends": "@vc-shell/ts-config/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "rootDir": "src",
+    "types": [
+      "vite/client",
+      ]
+  },
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.vue",
+    "./src/**/*.json"
+  ]
+}

package/dist/templates/base/vite.config.mts

@@ -1,5 +1,5 @@
-import { getApplicationConfiguration } from "@vc-shell/config-generator";
-
-export default getApplicationConfiguration({
-  // Add you extra Vite configuration here
-});
+import { getApplicationConfiguration } from "@vc-shell/config-generator";
+
+export default getApplicationConfiguration({
+  // Add you extra Vite configuration here
+});

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

@@ -1,162 +1,162 @@
-<template>
-  <VcBlade
-    :title="$t('{{ModuleNameUppercaseSnakeCase}}.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"
-      class="tw-grow tw-basis-0"
-      multiselect
-      :loading="loading"
-      :columns="columns"
-      :sort="sort"
-      :pages="pages"
-      :total-count="totalCount"
-      :search-value="searchValue"
-      :current-page="currentPage"
-      :search-placeholder="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.SEARCH.PLACEHOLDER')"
-      :total-label="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TABLE.TOTALS')"
-      :selected-item-id="selectedItemId"
-      state-key="{{ModuleNameUppercaseSnakeCase}}"
-      :items="data"
-      @item-click="onItemClick"
-      @header-click="onHeaderClick"
-    >
-    </VcTable>
-  </VcBlade>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, markRaw, onMounted, watch } from "vue";
-import { IBladeEvent, IBladeToolbar, IParentCallArgs, ITableColumns, useBladeNavigation } 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: "open:blade", blade: IBladeEvent): void;
-  (event: "close:blade"): void;
-}
-
-defineOptions({
-  url: "/{{ModuleName}}",
-  name: "{{ModuleNamePascalCase}}List",
-  isWorkspace: true,
-  menuItem: {
-    title: "{{ModuleNameUppercaseSnakeCase}}.MENU.TITLE",
-    icon: "fas fa-file-alt",
-    priority: 1,
-  },
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-});
-
-defineEmits<Emits>();
-
-const { t } = useI18n({ useScope: "global" });
-const { openBlade } = useBladeNavigation();
-const { getItems, data, loading, totalCount, pages, currentPage } = use{{ModuleNamePascalCase}}List();
-
-const sort = ref("createdDate:DESC");
-const searchValue = ref();
-const selectedItemId = ref<string>();
-
-watch(
-  () => props.param,
-  (newVal) => {
-      selectedItemId.value = newVal;
-  },
-  { immediate: true },
-);
-
-onMounted(async () => {
-  await getItems();
-});
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "refresh",
-    title: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TOOLBAR.REFRESH")),
-    icon: "fas fa-sync-alt",
-    async clickHandler() {
-      await reload();
-    },
-  },
-]);
-
-const columns = ref<ITableColumns[]>([
-  // You can add columns here
-]);
-
-const title = computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TITLE"));
-
-const reload = async () => {
-  await getItems();
-};
-
-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) => {
-  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]}`;
-    }
-  }
-};
-
-defineExpose({
-  title,
-});
-</script>
+<template>
+  <VcBlade
+    :title="$t('{{ModuleNameUppercaseSnakeCase}}.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"
+      class="tw-grow tw-basis-0"
+      multiselect
+      :loading="loading"
+      :columns="columns"
+      :sort="sort"
+      :pages="pages"
+      :total-count="totalCount"
+      :search-value="searchValue"
+      :current-page="currentPage"
+      :search-placeholder="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.SEARCH.PLACEHOLDER')"
+      :total-label="$t('{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TABLE.TOTALS')"
+      :selected-item-id="selectedItemId"
+      state-key="{{ModuleNameUppercaseSnakeCase}}"
+      :items="data"
+      @item-click="onItemClick"
+      @header-click="onHeaderClick"
+    >
+    </VcTable>
+  </VcBlade>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, markRaw, onMounted, watch } from "vue";
+import { IBladeEvent, IBladeToolbar, IParentCallArgs, ITableColumns, useBladeNavigation } 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: "open:blade", blade: IBladeEvent): 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 { getItems, data, loading, totalCount, pages, currentPage } = use{{ModuleNamePascalCase}}List();
+
+const sort = ref("createdDate:DESC");
+const searchValue = ref();
+const selectedItemId = ref<string>();
+
+watch(
+  () => props.param,
+  (newVal) => {
+      selectedItemId.value = newVal;
+  },
+  { immediate: true },
+);
+
+onMounted(async () => {
+  await getItems();
+});
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TOOLBAR.REFRESH")),
+    icon: "material-refresh",
+    async clickHandler() {
+      await reload();
+    },
+  },
+]);
+
+const columns = ref<ITableColumns[]>([
+  // You can add columns here
+]);
+
+const title = computed(() => t("{{ModuleNameUppercaseSnakeCase}}.PAGES.LIST.TITLE"));
+
+const reload = async () => {
+  await getItems();
+};
+
+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) => {
+  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]}`;
+    }
+  }
+};
+
+defineExpose({
+  title,
+});
+</script>