@vc-shell/create-vc-app 2.0.3-pr227.0c4f2c3 → 2.0.3-pr229.a4f7eec

package/dist/templates/module/composables/useDetails.ts.ejs

@@ -1,9 +1,8 @@
 import { ref } from "vue";
-import { useAsync, useLoading, useModificationTracker } from "@vc-shell/framework";
+import { useAsync, useLoading } from "@vc-shell/framework";
 
 export default function use<%- ModuleNamePascalCase %>Details() {
   const item = ref<Record<string, any>>({});
-  const { isModified, resetModificationState } = useModificationTracker(item);
 
   const { loading: itemLoading, action: fetchItem } = useAsync(async (id?: string) => {
     // TODO: Replace with real API call
@@ -35,7 +34,5 @@ export default function use<%- ModuleNamePascalCase %>Details() {
     loading,
     getItem,
     saveItem,
-    isModified,
-    resetModificationState,
   };
 }

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

@@ -19,17 +19,8 @@
 </template>
 
 <script setup lang="ts">
-import {
-  VcBlade,
-  VcContainer,
-  VcForm,
-  VcInput,
-  useBlade,
-  useModificationTracker,
-  usePopup,
-  useBeforeUnload,
-  type IBladeToolbar,
-} from "@vc-shell/framework";
+import { useBlade, useBladeForm, type IBladeToolbar } from "@vc-shell/framework";
+import { VcBlade, VcContainer, VcForm, VcInput } from "@vc-shell/framework/ui";
 import { ref, computed, onMounted } from "vue";
 import use<%- ModuleNamePascalCase %>Details from "../composables/useDetails";
 import { useI18n } from "vue-i18n";
@@ -40,11 +31,14 @@ defineBlade({
 });
 
 const { t } = useI18n({ useScope: "global" });
-const { param, closeSelf, callParent, onBeforeClose } = useBlade();
+const { param, callParent } = useBlade();
 
-const { showConfirmation } = usePopup();
+const { item, loading, getItem, saveItem } = use<%- ModuleNamePascalCase %>Details();
 
-const { item, loading, getItem, saveItem, isModified, resetModificationState } = use<%- ModuleNamePascalCase %>Details();
+const form = useBladeForm({
+  data: item,
+  closeConfirmMessage: computed(() => t("<%- ModuleNameScreamingSnake %>.ALERTS.CLOSE_CONFIRMATION")),
+});
 
 const title = computed(() => {
   return param.value
@@ -57,10 +51,10 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     id: "save",
     title: t("<%- ModuleNameScreamingSnake %>.PAGES.DETAILS.TOOLBAR.SAVE"),
     icon: "lucide-save",
-    disabled: computed(() => !isModified.value),
+    disabled: computed(() => !form.canSave.value),
     async clickHandler() {
       await saveItem();
-      resetModificationState();
+      form.setBaseline();
       callParent("reload");
     },
   },
@@ -69,15 +63,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
 onMounted(async () => {
   if (param.value) {
     await getItem(param.value);
+    form.setBaseline();
   }
 });
-
-onBeforeClose(async () => {
-  if (isModified.value) {
-    return !(await showConfirmation(t("<%- ModuleNameScreamingSnake %>.ALERTS.CLOSE_CONFIRMATION")));
-  }
-  return false;
-});
-
-useBeforeUnload(computed(() => isModified.value));
 </script>

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

@@ -23,14 +23,9 @@
 </template>
 
 <script setup lang="ts">
-import {
-  VcBlade,
-  VcDataTable,
-  VcColumn,
-  useBlade,
-  type IBladeToolbar,
-} from "@vc-shell/framework";
-import { ref } from "vue";
+import { useBlade, type IBladeToolbar } from "@vc-shell/framework";
+import { VcBlade, VcDataTable, VcColumn } from "@vc-shell/framework/ui";
+import { ref, onMounted } from "vue";
 import use<%- ModuleNamePascalCase %>List from "../composables/useList";
 import { useI18n } from "vue-i18n";
 
@@ -76,13 +71,16 @@ function openDetails(item?: { id?: string }) {
   openBlade({
     name: "<%- ModuleNamePascalCase %>Details",
     param: item?.id,
-    onClose() {
-      getItems();
+    async onClose() {
+      await getItems();
     },
   });
 }
 
-getItems();
+onMounted(async () => {
+  await getItems();
+})
+
 
 exposeToChildren({ reload: getItems });
 </script>

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

@@ -1,5 +1,5 @@
 import { Ref, computed, ref } from "vue";
-import { useAsync, useLoading, useModificationTracker } from "@vc-shell/framework";
+import { useAsync, useLoading } from "@vc-shell/framework";
 import {
   MockedItem,
   addNewMockItem,
@@ -12,8 +12,6 @@ import {
 export default () => {
   const item = ref({}) as Ref<MockedItem>;
 
-  const { isModified, currentValue, resetModificationState } = useModificationTracker(item);
-
   const { loading: itemLoading, action: getItem } = useAsync<{ id: string }>(async (payload) => {
     item.value = await loadMockItem(payload);
   });
@@ -21,14 +19,12 @@ export default () => {
   const { loading: saveLoading, action: saveItem } = useAsync<MockedItem, MockedItem | void>(async (payload) => {
     if (payload) {
       if (payload.id) {
-      const _res = await updateMockItem(payload)
-
-      resetModificationState(_res);
-      return _res;
+        const _res = await updateMockItem(payload);
+        item.value = _res;
+        return _res;
       } else {
         const _res = await addNewMockItem(payload);
-
-        resetModificationState(_res);
+        item.value = _res;
         return _res;
       }
     }
@@ -43,10 +39,9 @@ export default () => {
   const loading = useLoading(itemLoading, saveLoading, removeLoading);
 
   return {
-    item: currentValue,
+    item,
     loading: computed(() => loading.value),
     currencyOptions: computed(() => currencyOptions),
-    isModified,
     getItem,
     saveItem,
     removeItem,

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

@@ -125,30 +125,37 @@
 </template>
 
 <script lang="ts" setup>
-import { IBladeToolbar, useBlade, useBeforeUnload, usePopup } from "@vc-shell/framework";
+import { IBladeToolbar, useBlade, useBladeForm, usePopup } from "@vc-shell/framework";
+import {
+  VcBlade,
+  VcCard,
+  VcCol,
+  VcContainer,
+  VcForm,
+  VcInput,
+  VcInputCurrency,
+  VcRow,
+  VcTextarea,
+} from "@vc-shell/framework/ui";
 import { useDetails } from "./../composables";
 import { computed, onMounted, ref } from "vue";
-import { Field, useForm } from "vee-validate";
+import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
-import * as _ from "lodash-es";
 
 defineBlade({
   name: "SampleDetails",
   url: "/sample-details",
 });
 
-const { param, closeSelf, callParent, onBeforeClose } = useBlade();
+const { param, closeSelf, callParent } = useBlade();
 
-const { loading, getItem, saveItem, removeItem, item, currencyOptions, isModified } = useDetails();
+const { loading, getItem, saveItem, removeItem, item, currencyOptions } = useDetails();
 const { showConfirmation } = usePopup();
 const { t } = useI18n({ useScope: "global" });
 
-const { meta } = useForm({
-  validateOnMount: false,
-});
-
-const isDisabled = computed(() => {
-  return !meta.value.dirty || !meta.value.valid;
+const form = useBladeForm({
+  data: item,
+  closeConfirmMessage: computed(() => t("SAMPLE_APP.PAGES.ALERTS.CLOSE_CONFIRMATION")),
 });
 
 const title = computed(() => {
@@ -166,11 +173,11 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     title: "Save",
     async clickHandler() {
       await saveItem(item.value);
-
+      form.setBaseline();
       callParent("reload");
       closeSelf();
     },
-    disabled: computed(() => !(isModified.value && !isDisabled.value)),
+    disabled: computed(() => !form.canSave.value),
   },
   {
     id: "delete",
@@ -192,20 +199,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
 onMounted(async () => {
   if (param.value) {
     await getItem({ id: param.value });
+    form.setBaseline();
   }
 });
-
-onBeforeClose(async () => {
-  if (!isDisabled.value && isModified.value) {
-    return !(await showConfirmation(t("SAMPLE_APP.PAGES.ALERTS.CLOSE_CONFIRMATION")));
-  }
-  return false;
-});
-
-
-
-
-
-
-useBeforeUnload(computed(() => !isDisabled.value && isModified.value));
 </script>

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

@@ -5,7 +5,6 @@
     :toolbar-items="bladeToolbar"
   >
     <!-- Blade contents -->
-    <!-- @vue-generic {MockedItem} -->
     <VcDataTable
       v-model:search-value="searchValue"
       v-model:active-item-id="selectedItemId"
@@ -75,16 +74,9 @@
 
 <script lang="ts" setup>
 import { computed, ref, onMounted, watch } from "vue";
-import {
-  IBladeToolbar,
-  useBlade,
-  usePopup,
-  useTableSort,
-  useFunctions,
-  VcColumn,
-  VcDataTable,
-} from "@vc-shell/framework";
+import { IBladeToolbar, useBlade, usePopup, useTableSort, useFunctions } from "@vc-shell/framework";
 import type { TableAction } from "@vc-shell/framework";
+import { VcColumn, VcDataTable, VcBlade } from "@vc-shell/framework/ui";
 import { useI18n } from "vue-i18n";
 import { useList } from "./../composables";
 import { MockedItem } from "./../composables/useList";

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

@@ -10,11 +10,6 @@
     <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>
 

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

@@ -8,8 +8,7 @@
       "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"
+        "DESCRIPTION": "Welcome to your VC Shell app! Get oriented by exploring the dashboard and personalizing your settings to match your preferences."
       }
     }
   }

package/dist/templates/standalone/src/pages/App.vue.ejs

@@ -10,8 +10,8 @@
 
 <script lang="ts" setup>
 import { useUser, useBroadcastFilter } from "@vc-shell/framework";
+import { VcApp } from "@vc-shell/framework/ui";
 import { onMounted, ref } from "vue";
-// eslint-disable-next-line import/no-unresolved
 import logoImage from "/assets/logo.svg";
 
 const isReady = ref(false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "2.0.3-pr227.0c4f2c3",
+  "version": "2.0.3-pr229.a4f7eec",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@types/ejs": "^3.1.5",
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "2.0.3-pr227.0c4f2c3",
+    "@vc-shell/ts-config": "2.0.3-pr229.a4f7eec",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",