phecda-vue 1.2.10 → 1.3.1

package/dist/index.d.ts

@@ -48,9 +48,7 @@ declare function usePatch<T extends new (...args: any) => any>(Model: T, Data: _
 declare function useR<T extends new (...args: any) => any>(Model: T): UnwrapNestedRefs<InstanceType<T>>;
 declare function useV<T extends new (...args: any) => any>(Model: T): PublicOnly<ReplaceInstanceValues<InstanceType<T>>>;
 declare function useEvent<Key extends keyof PhecdaEvents>(eventName: Key, cb: Handler<PhecdaEvents[Key]>): () => void;
-declare function initalize<M extends new (...args: any) => any>(Model: M): InstanceType<M> | void;
-declare function clearStorage<M extends new (...args: any) => any>(Model: M, isForceUpdate?: boolean): void;
-declare function deleteStorage(tag: string): void;
+declare function initialize<M extends new (...args: any) => any>(Model: M): InstanceType<M> | void;
 
 declare const EXPRESS_RE: RegExp;
 declare const FN_RE: RegExp;
@@ -99,7 +97,7 @@ declare const getAntDRules: typeof getNaiveUIRules;
 declare function getNutUIRules<M, O extends object>(Model: M, options?: O): any;
 declare const getVantRules: typeof getNutUIRules;
 
-declare const createModal: <T>(wrapComp: Component<T>, props?: Partial<T>, modelKey?: string) => <P>(comp: Component<P>, props?: P) => void;
+declare const createLayer: <T>(wrapComp: Component<T>, props?: Partial<T>, modelKey?: string) => <P>(comp: Component<P>, props?: P) => void;
 
 declare function createTable<P extends {
     $props: any;
@@ -129,4 +127,4 @@ declare class PV {
     off<Key extends keyof PhecdaEvents>(type: Key, handler?: (arg: PhecdaEvents[Key]) => void): void;
 }
 
-export { EXPRESS_RE, FN_RE, GetDevUIRules, PV, PhecdaEmitter, PublicOnly, ReplaceInstanceValues, SchemaToObj, clearStorage, createFilter, createForm, createFormData, createModal, createPhecda, createPipe, createTable, deleteStorage, emitter, getActivePhecda, getAntDRules, getElementPlusRules, getNaiveUIRules, getNutUIRules, getReactiveMap, getVantRules, initalize, phecdaSymbol, setActivePhecda, useEvent, useO, usePatch, useR, useV };
+export { EXPRESS_RE, FN_RE, GetDevUIRules, PV, PhecdaEmitter, PublicOnly, ReplaceInstanceValues, SchemaToObj, createFilter, createForm, createFormData, createLayer, createPhecda, createPipe, createTable, emitter, getActivePhecda, getAntDRules, getElementPlusRules, getNaiveUIRules, getNutUIRules, getReactiveMap, getVantRules, initialize, phecdaSymbol, setActivePhecda, useEvent, useO, usePatch, useR, useV };

package/dist/index.js

@@ -32,15 +32,13 @@ __export(src_exports, {
   FN_RE: () => FN_RE,
   GetDevUIRules: () => GetDevUIRules,
   PV: () => PV,
-  clearStorage: () => clearStorage,
   createFilter: () => createFilter,
   createForm: () => createForm,
   createFormData: () => createFormData,
-  createModal: () => createModal,
+  createLayer: () => createLayer,
   createPhecda: () => createPhecda,
   createPipe: () => createPipe,
   createTable: () => createTable,
-  deleteStorage: () => deleteStorage,
   emitter: () => emitter,
   getActivePhecda: () => getActivePhecda,
   getAntDRules: () => getAntDRules,
@@ -49,7 +47,7 @@ __export(src_exports, {
   getNutUIRules: () => getNutUIRules,
   getReactiveMap: () => getReactiveMap,
   getVantRules: () => getVantRules,
-  initalize: () => initalize,
+  initialize: () => initialize,
   phecdaSymbol: () => phecdaSymbol,
   setActivePhecda: () => setActivePhecda,
   useEvent: () => useEvent,
@@ -91,26 +89,49 @@ function createPhecda(symbol) {
         };
       }
       let eventRecord = [];
-      (0, import_phecda_core.injectProperty)("watcher", ({ eventName, instance, key, options }) => {
-        const fn = typeof instance[key] === "function" ? instance[key].bind(instance) : (v) => instance[key] = v;
-        if (options?.once) {
-          const handler = /* @__PURE__ */ __name((...args) => {
-            fn(...args);
-            emitter.off(eventName, handler);
-          }, "handler");
-          emitter.on(eventName, handler);
-          eventRecord.push([
-            eventName,
-            handler
-          ]);
-        } else {
-          eventRecord.push([
-            eventName,
-            fn
-          ]);
-          emitter.on(eventName, fn);
-        }
-      });
+      if (!(0, import_phecda_core.getProperty)("watcher")) {
+        (0, import_phecda_core.injectProperty)("watcher", ({ eventName, instance, key, options }) => {
+          const fn = typeof instance[key] === "function" ? instance[key].bind(instance) : (v) => instance[key] = v;
+          if (options?.once) {
+            const handler = /* @__PURE__ */ __name((...args) => {
+              fn(...args);
+              emitter.off(eventName, handler);
+            }, "handler");
+            emitter.on(eventName, handler);
+            eventRecord.push([
+              eventName,
+              handler
+            ]);
+          } else {
+            eventRecord.push([
+              eventName,
+              fn
+            ]);
+            emitter.on(eventName, fn);
+          }
+        });
+      }
+      if (!(0, import_phecda_core.getProperty)("storage")) {
+        (0, import_phecda_core.injectProperty)("storage", ({ tag, key, instance }) => {
+          if (!tag)
+            return;
+          const initstr = localStorage.getItem(tag);
+          if (initstr) {
+            const data = JSON.parse(initstr);
+            if (key) {
+              instance[key] = data;
+            } else {
+              for (const i in data) {
+                if (i)
+                  instance[i] = data[i];
+              }
+            }
+          }
+          globalThis.addEventListener("beforeunload", () => {
+            localStorage.setItem(tag, JSON.stringify(key ? instance[key] : instance));
+          });
+        });
+      }
       const originUnmount = app.unmount.bind(app);
       app.unmount = () => {
         eventRecord.forEach(([eventName, handler]) => emitter.off(eventName, handler));
@@ -314,23 +335,14 @@ function useEvent(eventName, cb) {
   return () => emitter.off(eventName, cb);
 }
 __name(useEvent, "useEvent");
-function initalize(Model) {
+function initialize(Model) {
   const instance = useO(Model);
   if (instance) {
     Object.assign(instance, new Model());
     return instance;
   }
 }
-__name(initalize, "initalize");
-function clearStorage(Model, isForceUpdate = true) {
-  localStorage.removeItem(`_phecda_${useO(Model)._symbol}`);
-  isForceUpdate && initalize(Model);
-}
-__name(clearStorage, "clearStorage");
-function deleteStorage(tag) {
-  localStorage.removeItem(`_phecda_${tag}`);
-}
-__name(deleteStorage, "deleteStorage");
+__name(initialize, "initialize");
 
 // src/filter.ts
 var import_vue4 = require("vue");
@@ -435,8 +447,11 @@ function createForm(compSet, form, formItem, options = {}) {
   __name(generateChildVNode, "generateChildVNode");
   function generateVNode(props) {
     const { property } = props;
-    return (0, import_vue5.h)(compSet[props.config[property]._component], {
-      ...props.config[property],
+    const item = props.config[property];
+    return (0, import_vue5.h)(compSet[item._component], {
+      ...item,
+      onVnodeMounted: (vnode) => item._mount?.(vnode),
+      onVnodeUnmounted: (vnode) => item._unmount?.(vnode),
       [`${modelKey}`]: props.data[property],
       [`onUpdate:${modelKey}`]: (v) => {
         if (onUpdate)
@@ -647,13 +662,13 @@ function getNutUIRules(Model, options = {}) {
 __name(getNutUIRules, "getNutUIRules");
 var getVantRules = getNutUIRules;
 
-// src/components/createModal.ts
+// src/components/createLayer.ts
 var import_vue7 = require("vue");
-var createModal = /* @__PURE__ */ __name(function(modalWrapper, props = {}, modelKey = "modelValue") {
+var createLayer = /* @__PURE__ */ __name(function(modalWrapper, props = {}, modelKey = "modelValue") {
   let isMounted = false;
-  const isShow = (0, import_vue7.ref)(true);
+  const isShow = (0, import_vue7.shallowRef)(true);
   const content = (0, import_vue7.shallowRef)();
-  const propsRef = (0, import_vue7.ref)({});
+  const propsRef = (0, import_vue7.shallowRef)({});
   const wrapper = (0, import_vue7.defineComponent)({
     setup() {
       return () => (0, import_vue7.h)(modalWrapper, {
@@ -679,7 +694,7 @@ var createModal = /* @__PURE__ */ __name(function(modalWrapper, props = {}, mode
       isShow.value = true;
     }
   };
-}, "createModal");
+}, "createLayer");
 
 // src/components/createTable.ts
 var import_vue8 = require("vue");
@@ -782,15 +797,13 @@ __name(PV, "PV");
   FN_RE,
   GetDevUIRules,
   PV,
-  clearStorage,
   createFilter,
   createForm,
   createFormData,
-  createModal,
+  createLayer,
   createPhecda,
   createPipe,
   createTable,
-  deleteStorage,
   emitter,
   getActivePhecda,
   getAntDRules,
@@ -799,7 +812,7 @@ __name(PV, "PV");
   getNutUIRules,
   getReactiveMap,
   getVantRules,
-  initalize,
+  initialize,
   phecdaSymbol,
   setActivePhecda,
   useEvent,

package/dist/index.mjs

@@ -7,7 +7,7 @@ var emitter = mitt();
 
 // src/vue/phecda.ts
 import { markRaw } from "vue";
-import { getTag, injectProperty } from "phecda-core";
+import { getProperty, getTag, injectProperty } from "phecda-core";
 var phecdaSymbol = Symbol("phecda");
 function createPhecda(symbol) {
   const phecda = markRaw({
@@ -32,26 +32,49 @@ function createPhecda(symbol) {
         };
       }
       let eventRecord = [];
-      injectProperty("watcher", ({ eventName, instance, key, options }) => {
-        const fn = typeof instance[key] === "function" ? instance[key].bind(instance) : (v) => instance[key] = v;
-        if (options?.once) {
-          const handler = /* @__PURE__ */ __name((...args) => {
-            fn(...args);
-            emitter.off(eventName, handler);
-          }, "handler");
-          emitter.on(eventName, handler);
-          eventRecord.push([
-            eventName,
-            handler
-          ]);
-        } else {
-          eventRecord.push([
-            eventName,
-            fn
-          ]);
-          emitter.on(eventName, fn);
-        }
-      });
+      if (!getProperty("watcher")) {
+        injectProperty("watcher", ({ eventName, instance, key, options }) => {
+          const fn = typeof instance[key] === "function" ? instance[key].bind(instance) : (v) => instance[key] = v;
+          if (options?.once) {
+            const handler = /* @__PURE__ */ __name((...args) => {
+              fn(...args);
+              emitter.off(eventName, handler);
+            }, "handler");
+            emitter.on(eventName, handler);
+            eventRecord.push([
+              eventName,
+              handler
+            ]);
+          } else {
+            eventRecord.push([
+              eventName,
+              fn
+            ]);
+            emitter.on(eventName, fn);
+          }
+        });
+      }
+      if (!getProperty("storage")) {
+        injectProperty("storage", ({ tag, key, instance }) => {
+          if (!tag)
+            return;
+          const initstr = localStorage.getItem(tag);
+          if (initstr) {
+            const data = JSON.parse(initstr);
+            if (key) {
+              instance[key] = data;
+            } else {
+              for (const i in data) {
+                if (i)
+                  instance[i] = data[i];
+              }
+            }
+          }
+          globalThis.addEventListener("beforeunload", () => {
+            localStorage.setItem(tag, JSON.stringify(key ? instance[key] : instance));
+          });
+        });
+      }
       const originUnmount = app.unmount.bind(app);
       app.unmount = () => {
         eventRecord.forEach(([eventName, handler]) => emitter.off(eventName, handler));
@@ -255,23 +278,14 @@ function useEvent(eventName, cb) {
   return () => emitter.off(eventName, cb);
 }
 __name(useEvent, "useEvent");
-function initalize(Model) {
+function initialize(Model) {
   const instance = useO(Model);
   if (instance) {
     Object.assign(instance, new Model());
     return instance;
   }
 }
-__name(initalize, "initalize");
-function clearStorage(Model, isForceUpdate = true) {
-  localStorage.removeItem(`_phecda_${useO(Model)._symbol}`);
-  isForceUpdate && initalize(Model);
-}
-__name(clearStorage, "clearStorage");
-function deleteStorage(tag) {
-  localStorage.removeItem(`_phecda_${tag}`);
-}
-__name(deleteStorage, "deleteStorage");
+__name(initialize, "initialize");
 
 // src/filter.ts
 import { effectScope as effectScope2, reactive as reactive2, ref } from "vue";
@@ -376,8 +390,11 @@ function createForm(compSet, form, formItem, options = {}) {
   __name(generateChildVNode, "generateChildVNode");
   function generateVNode(props) {
     const { property } = props;
-    return h(compSet[props.config[property]._component], {
-      ...props.config[property],
+    const item = props.config[property];
+    return h(compSet[item._component], {
+      ...item,
+      onVnodeMounted: (vnode) => item._mount?.(vnode),
+      onVnodeUnmounted: (vnode) => item._unmount?.(vnode),
       [`${modelKey}`]: props.data[property],
       [`onUpdate:${modelKey}`]: (v) => {
         if (onUpdate)
@@ -588,13 +605,13 @@ function getNutUIRules(Model, options = {}) {
 __name(getNutUIRules, "getNutUIRules");
 var getVantRules = getNutUIRules;
 
-// src/components/createModal.ts
-import { defineComponent as defineComponent2, h as h2, ref as ref3, render, shallowRef } from "vue";
-var createModal = /* @__PURE__ */ __name(function(modalWrapper, props = {}, modelKey = "modelValue") {
+// src/components/createLayer.ts
+import { defineComponent as defineComponent2, h as h2, render, shallowRef } from "vue";
+var createLayer = /* @__PURE__ */ __name(function(modalWrapper, props = {}, modelKey = "modelValue") {
   let isMounted = false;
-  const isShow = ref3(true);
+  const isShow = shallowRef(true);
   const content = shallowRef();
-  const propsRef = ref3({});
+  const propsRef = shallowRef({});
   const wrapper = defineComponent2({
     setup() {
       return () => h2(modalWrapper, {
@@ -620,10 +637,10 @@ var createModal = /* @__PURE__ */ __name(function(modalWrapper, props = {}, mode
       isShow.value = true;
     }
   };
-}, "createModal");
+}, "createLayer");
 
 // src/components/createTable.ts
-import { defineComponent as defineComponent3, h as h3, onMounted as onMounted2, ref as ref4 } from "vue";
+import { defineComponent as defineComponent3, h as h3, onMounted as onMounted2, ref as ref3 } from "vue";
 function createTable(compSet, table, tableColumn, data) {
   const TableColumn = defineComponent3({
     name: "PhecdaTableColumn",
@@ -657,7 +674,7 @@ function createTable(compSet, table, tableColumn, data) {
       }
     },
     setup(props, ctx) {
-      const dom = ref4();
+      const dom = ref3();
       onMounted2(() => {
         ctx.expose({
           ...dom.value
@@ -722,15 +739,13 @@ export {
   FN_RE,
   GetDevUIRules,
   PV,
-  clearStorage,
   createFilter,
   createForm,
   createFormData,
-  createModal,
+  createLayer,
   createPhecda,
   createPipe,
   createTable,
-  deleteStorage,
   emitter,
   getActivePhecda,
   getAntDRules,
@@ -739,7 +754,7 @@ export {
   getNutUIRules,
   getReactiveMap,
   getVantRules,
-  initalize,
+  initialize,
   phecdaSymbol,
   setActivePhecda,
   useEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phecda-vue",
-  "version": "1.2.10",
+  "version": "1.3.1",
   "description": "provide store/form/table with phecda function to vue",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
   "dependencies": {
     "mitt": "^3.0.0",
     "vue": "^3.2.45",
-    "phecda-core": "1.1.1"
+    "phecda-core": "1.2.0"
   },
   "devDependencies": {
     "tsup": "^6.5.0"