@vc-shell/create-vc-app 2.0.0-alpha.11 → 2.0.0-alpha.13

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [2.0.0-alpha.13](https://github.com/VirtoCommerce/vc-shell/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2026-03-20)
+
+**Note:** Version bump only for package @vc-shell/create-vc-app
+
+# [2.0.0-alpha.12](https://github.com/VirtoCommerce/vc-shell/compare/v2.0.0-alpha.11...v2.0.0-alpha.12) (2026-03-19)
+
+
+### Features
+
+* **create-vc-app:** update blade templates to use useBlade() without boilerplate ([5d1f148](https://github.com/VirtoCommerce/vc-shell/commit/5d1f148720f15512e2db0768d320a70ba417dc3e))
 # [2.0.0-alpha.11](https://github.com/VirtoCommerce/vc-shell/compare/v2.0.0-alpha.10...v2.0.0-alpha.11) (2026-03-13)
 
 **Note:** Version bump only for package @vc-shell/create-vc-app

package/dist/index.js

@@ -7,7 +7,7 @@ import { fileURLToPath as B } from "node:url";
 import A from "prompts";
 import r from "node:fs";
 import T from "ejs";
-const F = "2.0.0-alpha.11", O = {
+const F = "2.0.0-alpha.13", O = {
   version: F
 };
 function f(e) {

package/dist/templates/dynamic-module/_package.json.ejs

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
-    "@vc-shell/ts-config": "^2.0.0-alpha.11",
+    "@vc-shell/ts-config": "^2.0.0-alpha.13",
     "cross-env": "^7.0.3",
     "sass": "^1.87.0",
     "typescript": "^5.8.3",
@@ -18,8 +18,8 @@
     "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^2.0.0-alpha.11",
-    "@vc-shell/framework": "^2.0.0-alpha.11",
+    "@vc-shell/config-generator": "^2.0.0-alpha.13",
+    "@vc-shell/framework": "^2.0.0-alpha.13",
     "vue": "^3.5.13",
     "vue-router": "^4.2.5"
   }

package/dist/templates/host-app/_package.json.ejs

@@ -22,8 +22,8 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@vc-shell/api-client-generator": "^2.0.0-alpha.11",
-    "@vc-shell/ts-config": "^2.0.0-alpha.11",
+    "@vc-shell/api-client-generator": "^2.0.0-alpha.13",
+    "@vc-shell/ts-config": "^2.0.0-alpha.13",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
@@ -51,8 +51,8 @@
     "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^2.0.0-alpha.11",
-    "@vc-shell/framework": "^2.0.0-alpha.11",
+    "@vc-shell/config-generator": "^2.0.0-alpha.13",
+    "@vc-shell/framework": "^2.0.0-alpha.13",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",

package/dist/templates/module/pages/details.vue.ejs

@@ -1,111 +1,85 @@
-<template>
-  <VcBlade
-    :title="title"
-    :toolbar-items="bladeToolbar"
-    :loading="loading"
-    :expanded="expanded"
-    :closable="closable"
-    width="70%"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <VcContainer>
-      <VcForm>
-        <!-- Add your form fields here -->
-        <VcInput
-          v-model="item.name"
-          :label="'Name'"
-          required
-        />
-      </VcForm>
-    </VcContainer>
-  </VcBlade>
-</template>
-
-<script setup lang="ts">
-import {
-  VcBlade,
-  VcContainer,
-  VcForm,
-  VcInput,
-  useBladeNavigation,
-  useModificationTracker,
-  usePopup,
-  useBeforeUnload,
-  type IBladeToolbar,
-  type IParentCallArgs,
-} from "@vc-shell/framework";
-import { ref, computed, onMounted } from "vue";
-import use<%- ModuleNamePascalCase %>Details from "../composables/useDetails";
-
-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: "/<%- ModuleName %>-details",
-  name: "<%- ModuleNamePascalCase %>Details",
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-  param: undefined,
-});
-
-const emit = defineEmits<Emits>();
-
-const { onBeforeClose } = useBladeNavigation();
-const { showConfirmation } = usePopup();
-
-const { item, loading, getItem, saveItem } = use<%- ModuleNamePascalCase %>Details();
-const { isModified, resetModificationState } = useModificationTracker(item);
-
-const title = computed(() => {
-  return props.param
-    ? String(item.value?.name || "<%- ModuleNameSentenceCase %> Details")
-    : "New <%- ModuleNameSentenceCase %>";
-});
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "save",
-    title: "Save",
-    icon: "lucide-save",
-    disabled: computed(() => !isModified.value),
-    async clickHandler() {
-      await saveItem();
-      resetModificationState();
-      emit("parent:call", { method: "reload" });
-    },
-  },
-]);
-
-onMounted(async () => {
-  if (props.param) {
-    await getItem(props.param);
-  }
-});
-
-onBeforeClose(async () => {
-  if (isModified.value) {
-    return await showConfirmation("You have unsaved changes. Are you sure you want to close?");
-  }
-});
-
-useBeforeUnload(computed(() => isModified.value));
-
-defineExpose({
-  title,
-});
-</script>
+<template>
+  <VcBlade
+    :title="title"
+    :toolbar-items="bladeToolbar"
+    :loading="loading"
+    width="70%"
+  >
+    <VcContainer>
+      <VcForm>
+        <!-- Add your form fields here -->
+        <VcInput
+          v-model="item.name"
+          :label="'Name'"
+          required
+        />
+      </VcForm>
+    </VcContainer>
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import {
+  VcBlade,
+  VcContainer,
+  VcForm,
+  VcInput,
+  useBlade,
+  useModificationTracker,
+  usePopup,
+  useBeforeUnload,
+  type IBladeToolbar,
+} from "@vc-shell/framework";
+import { ref, computed, onMounted } from "vue";
+import use<%- ModuleNamePascalCase %>Details from "../composables/useDetails";
+
+defineOptions({
+  url: "/<%- ModuleName %>-details",
+  name: "<%- ModuleNamePascalCase %>Details",
+});
+
+const { param, closeSelf, callParent, onBeforeClose } = useBlade();
+
+const { showConfirmation } = usePopup();
+
+const { item, loading, getItem, saveItem } = use<%- ModuleNamePascalCase %>Details();
+const { isModified, resetModificationState } = useModificationTracker(item);
+
+const title = computed(() => {
+  return param.value
+    ? String(item.value?.name || "<%- ModuleNameSentenceCase %> Details")
+    : "New <%- ModuleNameSentenceCase %>";
+});
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "save",
+    title: "Save",
+    icon: "lucide-save",
+    disabled: computed(() => !isModified.value),
+    async clickHandler() {
+      await saveItem();
+      resetModificationState();
+      callParent("reload");
+    },
+  },
+]);
+
+onMounted(async () => {
+  if (param.value) {
+    await getItem(param.value);
+  }
+});
+
+onBeforeClose(async () => {
+  if (isModified.value) {
+    return await showConfirmation("You have unsaved changes. Are you sure you want to close?");
+  }
+});
+
+useBeforeUnload(computed(() => isModified.value));
+
+defineExpose({
+  title,
+});
+</script>

package/dist/templates/module/pages/list.vue.ejs

@@ -1,117 +1,90 @@
-<template>
-  <VcBlade
-    :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.TITLE')"
-    :toolbar-items="bladeToolbar"
-    :loading="loading"
-    :expanded="expanded"
-    :closable="closable"
-    width="50%"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
-  >
-    <VcDataTable
-      :items="data"
-      :total-count="totalCount"
-      :current-page="currentPage"
-      :search-value="searchQuery"
-      :state-key="'<%- ModuleNameScreamingSnake %>'"
-      @search:change="(val: string) => { searchQuery = val; getItems(); }"
-      @item-click="openDetails"
-      @pagination-click="(page: number) => { currentPage = page; getItems(); }"
-    >
-      <!-- Add your columns here -->
-      <VcColumn id="name" :header="'Name'" sortable />
-      <VcColumn id="createdDate" :header="'Created'" type="datetime" sortable />
-    </VcDataTable>
-  </VcBlade>
-</template>
-
-<script setup lang="ts">
-import {
-  VcBlade,
-  VcDataTable,
-  VcColumn,
-  useBladeNavigation,
-  type IBladeToolbar,
-  type IParentCallArgs,
-} from "@vc-shell/framework";
-import { ref, computed, markRaw } from "vue";
-import use<%- ModuleNamePascalCase %>List from "../composables/useList";
-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: "close:blade"): void;
-}
-
-defineOptions({
-  url: "/<%- ModuleName %>",
-  name: "<%- ModuleNamePascalCase %>List",
-  isWorkspace: true,
-  menuItem: {
-    title: "<%- ModuleNameScreamingSnake %>.MENU.TITLE",
-    icon: "lucide-box",
-    priority: 10,
-  },
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-});
-
-defineEmits<Emits>();
-
-const { openBlade } = useBladeNavigation();
-
-const {
-  data,
-  loading,
-  totalCount,
-  currentPage,
-  searchQuery,
-  getItems,
-} = use<%- ModuleNamePascalCase %>List();
-
-const bladeToolbar = ref<IBladeToolbar[]>([
-  {
-    id: "refresh",
-    title: "Refresh",
-    icon: "lucide-refresh-cw",
-    clickHandler: () => getItems(),
-  },
-  {
-    id: "add",
-    title: "Add",
-    icon: "lucide-plus",
-    clickHandler: () => openDetails(),
-  },
-]);
-
-function openDetails(item?: { id?: string }) {
-  openBlade({
-    blade: markRaw(Details),
-    param: item?.id,
-    onClose() {
-      getItems();
-    },
-  });
-}
-
-getItems();
-
-defineExpose({
-  title: computed(() => "<%- ModuleNameSentenceCase %>"),
-  reload: getItems,
-});
-</script>
+<template>
+  <VcBlade
+    :title="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.TITLE')"
+    :toolbar-items="bladeToolbar"
+    :loading="loading"
+    width="50%"
+  >
+    <VcDataTable
+      :items="data"
+      :total-count="totalCount"
+      :current-page="currentPage"
+      :search-value="searchQuery"
+      :state-key="'<%- ModuleNameScreamingSnake %>'"
+      @search:change="(val: string) => { searchQuery = val; getItems(); }"
+      @item-click="openDetails"
+      @pagination-click="(page: number) => { currentPage = page; getItems(); }"
+    >
+      <!-- Add your columns here -->
+      <VcColumn id="name" :header="'Name'" sortable />
+      <VcColumn id="createdDate" :header="'Created'" type="datetime" sortable />
+    </VcDataTable>
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import {
+  VcBlade,
+  VcDataTable,
+  VcColumn,
+  useBlade,
+  type IBladeToolbar,
+} from "@vc-shell/framework";
+import { ref, computed, markRaw } from "vue";
+import use<%- ModuleNamePascalCase %>List from "../composables/useList";
+import Details from "./details.vue";
+
+defineOptions({
+  url: "/<%- ModuleName %>",
+  name: "<%- ModuleNamePascalCase %>List",
+  isWorkspace: true,
+  menuItem: {
+    title: "<%- ModuleNameScreamingSnake %>.MENU.TITLE",
+    icon: "lucide-box",
+    priority: 10,
+  },
+});
+
+const { openBlade } = useBlade();
+
+const {
+  data,
+  loading,
+  totalCount,
+  currentPage,
+  searchQuery,
+  getItems,
+} = use<%- ModuleNamePascalCase %>List();
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: "Refresh",
+    icon: "lucide-refresh-cw",
+    clickHandler: () => getItems(),
+  },
+  {
+    id: "add",
+    title: "Add",
+    icon: "lucide-plus",
+    clickHandler: () => openDetails(),
+  },
+]);
+
+function openDetails(item?: { id?: string }) {
+  openBlade({
+    blade: markRaw(Details),
+    param: item?.id,
+    onClose() {
+      getItems();
+    },
+  });
+}
+
+getItems();
+
+defineExpose({
+  title: computed(() => "<%- ModuleNameSentenceCase %>"),
+  reload: getItems,
+});
+</script>

package/dist/templates/sample-module/pages/details.vue

@@ -2,13 +2,8 @@
   <VcBlade
     :loading="loading"
     :title="title"
-    :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 class="tw-space-y-4">
@@ -130,42 +125,22 @@
 </template>
 
 <script lang="ts" setup>
-import { IBladeToolbar, IParentCallArgs, useBeforeUnload, useBladeNavigation, usePopup } from "@vc-shell/framework";
+import { IBladeToolbar, useBlade, useBeforeUnload, usePopup } from "@vc-shell/framework";
 import { useDetails } from "./../composables";
 import { computed, onMounted, ref } from "vue";
 import { Field, useForm } from "vee-validate";
 import { useI18n } from "vue-i18n";
 import * as _ from "lodash-es";
 
-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: "/sample-details",
   name: "SampleDetails",
 });
 
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-  param: undefined,
-});
-
-const emit = defineEmits<Emits>();
+const { param, closeSelf, callParent, onBeforeClose } = useBlade();
 
 const { loading, getItem, saveItem, removeItem, item, currencyOptions, isModified } = useDetails();
 const { showConfirmation } = usePopup();
-const { onBeforeClose } = useBladeNavigation();
 const { t } = useI18n({ useScope: "global" });
 
 const { meta } = useForm({
@@ -177,7 +152,7 @@ const isDisabled = computed(() => {
 });
 
 const title = computed(() => {
-  return props.param
+  return param.value
     ? item.value?.name
       ? item.value?.name + t("SAMPLE_APP.PAGES.DETAILS.TITLE.DETAILS")
       : t("SAMPLE_APP.PAGES.DETAILS.TITLE.LOADING")
@@ -192,10 +167,8 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     async clickHandler() {
       await saveItem(item.value);
 
-      emit("parent:call", {
-        method: "reload",
-      });
-      emit("close:blade");
+      callParent("reload");
+      closeSelf();
     },
     disabled: computed(() => !(isModified.value && !isDisabled.value)),
   },
@@ -205,13 +178,11 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     title: "Delete",
     async clickHandler() {
       if (await showConfirmation(t(`SAMPLE_APP.PAGES.ALERTS.DELETE`))) {
-        if (props.param) {
-          await removeItem({ id: props.param });
-          emit("parent:call", {
-            method: "reload",
-          });
+        if (param.value) {
+          await removeItem({ id: param.value });
+          callParent("reload");
 
-          emit("close:blade");
+          closeSelf();
         }
       }
     },
@@ -219,8 +190,8 @@ const bladeToolbar = ref<IBladeToolbar[]>([
 ]);
 
 onMounted(async () => {
-  if (props.param) {
-    await getItem({ id: props.param });
+  if (param.value) {
+    await getItem({ id: param.value });
   }
 });
 
@@ -232,7 +203,5 @@ onBeforeClose(async () => {
 
 useBeforeUnload(computed(() => !isDisabled.value && isModified.value));
 
-defineExpose({
-  title,
-});
+
 </script>

package/dist/templates/sample-module/pages/list.vue

@@ -2,17 +2,11 @@
   <VcBlade
     :title="title"
     width="50%"
-    :expanded="expanded"
-    :closable="closable"
     :toolbar-items="bladeToolbar"
-    @close="$emit('close:blade')"
-    @expand="$emit('expand:blade')"
-    @collapse="$emit('collapse:blade')"
   >
     <!-- Blade contents -->
     <!-- @vue-generic {MockedItem} -->
     <VcTable
-      :expanded="expanded"
       class="tw-grow tw-basis-0"
       multiselect
       :loading="loading"
@@ -46,9 +40,8 @@ import { computed, ref, markRaw, onMounted, watch } from "vue";
 import {
   IActionBuilderResult,
   IBladeToolbar,
-  IParentCallArgs,
   ITableColumns,
-  useBladeNavigation,
+  useBlade,
   usePopup,
   useTableSort,
   useFunctions,
@@ -58,20 +51,6 @@ import { useList } from "./../composables";
 import Details from "./details.vue";
 import { MockedItem } from "./../composables/useList";
 
-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: "close:blade"): void;
-}
-
 defineOptions({
   url: "/sample-list",
   name: "SampleList",
@@ -83,15 +62,8 @@ defineOptions({
   },
 });
 
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  closable: true,
-});
-
-defineEmits<Emits>();
-
 const { t } = useI18n({ useScope: "global" });
-const { openBlade } = useBladeNavigation();
+const { param, openBlade, exposeToChildren } = useBlade();
 const { showConfirmation } = usePopup();
 const { debounce } = useFunctions();
 
@@ -132,7 +104,7 @@ const notfound = {
 };
 
 watch(
-  () => props.param,
+  param,
   (newVal) => {
     selectedItemId.value = newVal;
   },
@@ -293,8 +265,5 @@ watch(
   },
 );
 
-defineExpose({
-  title,
-  reload,
-});
+exposeToChildren({ reload });
 </script>

package/dist/templates/standalone/_package.json.ejs

@@ -22,8 +22,8 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
-    "@vc-shell/api-client-generator": "^2.0.0-alpha.11",
-    "@vc-shell/ts-config": "^2.0.0-alpha.11",
+    "@vc-shell/api-client-generator": "^2.0.0-alpha.13",
+    "@vc-shell/ts-config": "^2.0.0-alpha.13",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
@@ -51,8 +51,8 @@
     "vue-tsc": "^2.2.10"
   },
   "dependencies": {
-    "@vc-shell/config-generator": "^2.0.0-alpha.11",
-    "@vc-shell/framework": "^2.0.0-alpha.11",
+    "@vc-shell/config-generator": "^2.0.0-alpha.13",
+    "@vc-shell/framework": "^2.0.0-alpha.13",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",

package/package.json

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