@vc-shell/create-vc-app 2.0.0-alpha.3 → 2.0.0-alpha.31

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

@@ -1,117 +1,88 @@
-<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="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.NAME')" sortable />
+      <VcColumn id="createdDate" :header="$t('<%- ModuleNameScreamingSnake %>.PAGES.LIST.COLUMNS.CREATED_DATE')" type="datetime" sortable />
+    </VcDataTable>
+  </VcBlade>
+</template>
+
+<script setup lang="ts">
+import {
+  VcBlade,
+  VcDataTable,
+  VcColumn,
+  useBlade,
+  type IBladeToolbar,
+} from "@vc-shell/framework";
+import { ref } from "vue";
+import use<%- ModuleNamePascalCase %>List from "../composables/useList";
+import { useI18n } from "vue-i18n";
+
+defineBlade({
+  url: "/<%- ModuleName %>",
+  name: "<%- ModuleNamePascalCase %>List",
+  isWorkspace: true,
+  menuItem: {
+    title: "<%- ModuleNameScreamingSnake %>.MENU.TITLE",
+    icon: "lucide-box",
+    priority: 10,
+  },
+});
+
+const { t } = useI18n({ useScope: "global" });
+const { openBlade, exposeToChildren } = useBlade();
+
+const {
+  data,
+  loading,
+  totalCount,
+  currentPage,
+  searchQuery,
+  getItems,
+} = use<%- ModuleNamePascalCase %>List();
+
+const bladeToolbar = ref<IBladeToolbar[]>([
+  {
+    id: "refresh",
+    title: t("<%- ModuleNameScreamingSnake %>.PAGES.LIST.TOOLBAR.REFRESH"),
+    icon: "lucide-refresh-cw",
+    clickHandler: () => getItems(),
+  },
+  {
+    id: "add",
+    title: t("<%- ModuleNameScreamingSnake %>.PAGES.LIST.TOOLBAR.ADD"),
+    icon: "lucide-plus",
+    clickHandler: () => openDetails(),
+  },
+]);
+
+function openDetails(item?: { id?: string }) {
+  openBlade({
+    name: "<%- ModuleNamePascalCase %>Details",
+    param: item?.id,
+    onClose() {
+      getItems();
+    },
+  });
+}
+
+getItems();
+
+exposeToChildren({ reload: getItems });
+</script>

package/dist/templates/sample-module/index.ts

@@ -1,8 +1,11 @@
-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";
+import * as blades from "./pages";
+import * as locales from "./locales";
+import { defineAppModule } from "@vc-shell/framework";
+
+export default defineAppModule({
+  blades,
+  locales,
+});
+
+export * from "./pages";
+export * from "./composables";

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",
+defineBlade({
   name: "SampleDetails",
+  url: "/sample-details",
 });
 
-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,20 +190,22 @@ const bladeToolbar = ref<IBladeToolbar[]>([
 ]);
 
 onMounted(async () => {
-  if (props.param) {
-    await getItem({ id: props.param });
+  if (param.value) {
+    await getItem({ id: param.value });
   }
 });
 
 onBeforeClose(async () => {
   if (!isDisabled.value && isModified.value) {
-    return await showConfirmation(t("SAMPLE_APP.PAGES.ALERTS.CLOSE_CONFIRMATION"));
+    return !(await showConfirmation(t("SAMPLE_APP.PAGES.ALERTS.CLOSE_CONFIRMATION")));
   }
+  return false;
 });
 
-useBeforeUnload(computed(() => !isDisabled.value && isModified.value));
 
-defineExpose({
-  title,
-});
+
+
+
+
+useBeforeUnload(computed(() => !isDisabled.value && isModified.value));
 </script>