x-prop-tree 0.8.32 → 0.8.34

package/dist/{i18n-en.fevhb1gv.js → i18n-en.l2rmrsld.js}

@@ -4,6 +4,10 @@ import { t as __exportAll } from "./rolldown-runtime.c6i0pdwe.js";
 var en_exports = /* @__PURE__ */ __exportAll({ default: () => en_default });
 var en_default = { "x-prop-tree": {
 	copy: "Copy",
+	dlg: { saveChange: {
+		title: "Save Changes",
+		text: "Do you want to save the changes?"
+	} },
 	json: "JSON",
 	jsonEditor: "JSON Editor",
 	noAdaptSlot: "No Adapt Slot",

package/dist/{i18n-zhHans.cro9uz6i.js → i18n-zhHans.mlbij4hp.js}

@@ -4,6 +4,10 @@ import { t as __exportAll } from "./rolldown-runtime.c6i0pdwe.js";
 var zhHans_exports = /* @__PURE__ */ __exportAll({ default: () => zhHans_default });
 var zhHans_default = { "x-prop-tree": {
 	copy: "拷贝",
+	dlg: { saveChange: {
+		title: "保存变化",
+		text: "你想要保存变化吗？"
+	} },
 	json: "JSON",
 	jsonEditor: "JSON编辑器",
 	noAdaptSlot: "没有适配插槽",

package/dist/index.d.ts

@@ -2,6 +2,12 @@
 export declare function loadLocaleMessagePropTree(locale: string): Promise<{
   'x-prop-tree': {
     copy: string;
+    dlg: {
+      saveChange: {
+        title: string;
+        text: string;
+      };
+    };
     json: string;
     jsonEditor: string;
     noAdaptSlot: string;

package/dist/index.js

@@ -1,7 +1,7 @@
 (function(){try{document.getElementById(`x-prop-tree`)?.remove();const e = document.createElement(`style`);e.setAttribute(`id`, `x-prop-tree`);const t = document.createTextNode(``);e.appendChild(t);document.head.appendChild(e);}catch(e){console.error('rolldown-plugin-inject-css', e);}})()
 import { n as isEqual, r as cloneDeep, t as omit } from "./vendor.mu9vrf3y.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeModels, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDirective, toDisplayString, unref, useId, useModel, useTemplateRef, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { eventBus, globalObjects, injectDark, injectLocale, openNumberDlg, openPromptDlg, useColor, useSystem, useViewStack } from "x-essential-lib";
+import { addView, delView, eventBus, globalObjects, hasView, injectDark, injectLocale, injectViews, openConfirmDlg, openNumberDlg, openPromptDlg, useColor, useSystem, useViewStack } from "x-essential-lib";
 import { getElement, getItems, getPropertyDefault, getPropertyDefaultArray, getTag, getTypes, isHexColor, isThemeColor, makeSlotId, parseNumberUnit, pkgs, rules, themeColors, unwrapSlotId } from "x-runtime-lib";
 import { getListEntry, setCollapse, tidyList } from "x-group-list";
 import { useI18n } from "vue-i18n";
@@ -1698,43 +1698,24 @@ var icon_default = index_vue_vue_type_script_setup_true_lang_default$11;
 //#region src/components/values/json/editor.vue?vue&type=script&setup=true&lang.ts
 var editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "editor",
-	props: {
-		"modelValue": {
-			type: String,
-			required: true
-		},
-		"modelModifiers": {},
-		"lock": {
-			type: Boolean,
-			required: true
-		},
-		"lockModifiers": {},
-		"scale": {
-			type: Number,
-			required: true
-		},
-		"scaleModifiers": {}
-	},
-	emits: [
-		"update:modelValue",
-		"update:lock",
-		"update:scale"
-	],
+	props: { json: {
+		type: String,
+		required: true
+	} },
 	setup(__props, { expose: __expose }) {
-		const json = useModel(__props, "modelValue");
-		const lock = useModel(__props, "lock");
-		const scale = useModel(__props, "scale");
 		const dark = injectDark();
 		const locale = injectLocale();
 		const version = injectVersion();
+		const lock = ref(false);
+		const scale = ref(1);
 		const target = useTemplateRef("target");
 		function onReady() {
-			const object = JSON.parse(json.value);
+			const object = JSON.parse(__props.json);
 			target.value?.load(object);
 		}
 		function save() {
 			const object = target.value.save();
-			json.value = JSON.stringify(object, null, 2);
+			return JSON.stringify(object, null, 2);
 		}
 		__expose({ save });
 		return (_ctx, _cache) => {
@@ -1793,10 +1774,9 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 		const { t } = useI18n();
 		const { sysBarAvail } = useSystem();
 		const { backgroundColor0, backgroundColor1, backgroundColor2 } = useColor();
+		const views = injectViews();
 		const json = useModel(__props, "modelValue");
 		const emit = __emit;
-		const lock = ref(false);
-		const scale = ref(1);
 		const contStyle = computed(() => {
 			let h = 48;
 			if (sysBarAvail.value) h += 24;
@@ -1806,13 +1786,46 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 				height: `calc(100% - ${h}px)`
 			};
 		});
-		const { open } = useViewStack(`propTreejsonEditorDlg${useId()}`);
-		onUnmounted(() => {
-			open.value = false;
-		});
 		const editor = useTemplateRef("editor");
+		const name = `propTreejsonEditorDlg${useId()}`;
+		const open = ref(false);
+		const view = computed({
+			get() {
+				return hasView(views, name);
+			},
+			set(val) {
+				if (val) addView(views, name);
+				else delView(views, name);
+			}
+		});
+		function onOpen() {
+			open.value = true;
+		}
+		async function onClose() {
+			try {
+				const newJson = editor.value.save();
+				if (isEqual(newJson, json.value)) return;
+				if (!await openConfirmDlg({
+					title: t("x-prop-tree.dlg.saveChange.title"),
+					text: t("x-prop-tree.dlg.saveChange.text")
+				})) return;
+				json.value = newJson;
+			} finally {
+				open.value = false;
+			}
+		}
+		onMounted(() => {
+			eventBus.on(name, onOpen);
+		});
+		onBeforeUnmount(() => {
+			eventBus.off(name, onOpen);
+		});
 		watch(open, (val) => {
-			if (!val) editor.value?.save();
+			view.value = val;
+		});
+		watch(view, async (val) => {
+			if (!val) await onClose();
+			open.value = val;
 		});
 		return (_ctx, _cache) => {
 			const _component_v_btn = resolveComponent("v-btn");
@@ -1820,14 +1833,14 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 			const _component_v_spacer = resolveComponent("v-spacer");
 			const _component_v_dialog = resolveComponent("v-dialog");
 			return openBlock(), createBlock(_component_v_dialog, {
-				modelValue: unref(open),
-				"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(open) ? open.value = $event : null),
+				modelValue: open.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => open.value = $event),
 				attach: "",
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "dialog-bottom-transition",
-				onKeydown: _cache[6] || (_cache[6] = withKeys(withModifiers(($event) => open.value = false, ["stop", "prevent"]), ["esc"]))
+				onKeydown: withKeys(withModifiers(onClose, ["stop", "prevent"]), ["esc"])
 			}, {
 				activator: withCtx(({ props: activatorProps }) => [createVNode(_component_v_btn, mergeProps(activatorProps, {
 					block: "",
@@ -1865,7 +1878,7 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 									density: "comfortable",
 									icon: "mdi-close",
 									variant: "text",
-									onClick: _cache[1] || (_cache[1] = ($event) => open.value = false)
+									onClick: onClose
 								}),
 								createElementVNode("span", _hoisted_1$10, toDisplayString(unref(t)("x-prop-tree.jsonEditor")), 1),
 								createVNode(_component_v_spacer)
@@ -1875,22 +1888,13 @@ var index_vue_vue_type_script_setup_true_lang_default$10 = /*@__PURE__*/ defineC
 						createElementVNode("div", { style: normalizeStyle(contStyle.value) }, [createVNode(editor_default, {
 							ref_key: "editor",
 							ref: editor,
-							modelValue: json.value,
-							"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => json.value = $event),
-							lock: lock.value,
-							"onUpdate:lock": _cache[3] || (_cache[3] = ($event) => lock.value = $event),
-							scale: scale.value,
-							"onUpdate:scale": _cache[4] || (_cache[4] = ($event) => scale.value = $event)
-						}, null, 8, [
-							"modelValue",
-							"lock",
-							"scale"
-						])], 4)
+							json: json.value
+						}, null, 8, ["json"])], 4)
 					]),
 					_: 1
 				}, 8, ["color"])]),
 				_: 1
-			}, 8, ["modelValue"]);
+			}, 8, ["modelValue", "onKeydown"]);
 		};
 	}
 });
@@ -3581,8 +3585,8 @@ const install = (app) => {
 //#endregion
 //#region src/i18n/index.ts
 async function loadLocaleMessagePropTree(locale) {
-	if (locale === "en") return (await import("./i18n-en.fevhb1gv.js").then((n) => n.t)).default;
-	else if (locale === "zhHans") return (await import("./i18n-zhHans.cro9uz6i.js").then((n) => n.t)).default;
+	if (locale === "en") return (await import("./i18n-en.l2rmrsld.js").then((n) => n.t)).default;
+	else if (locale === "zhHans") return (await import("./i18n-zhHans.mlbij4hp.js").then((n) => n.t)).default;
 	else throw new Error(`invalid locale=${locale}`);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-prop-tree",
-  "version": "0.8.32",
+  "version": "0.8.34",
   "files": [
     "dist"
   ],
@@ -43,11 +43,11 @@
     "vue": "^3.5.42",
     "vue-i18n": "^11.4.10",
     "vuetify": "^4.2.1",
-    "x-block-lib": "^0.11.10",
+    "x-block-lib": "^0.11.11",
     "x-error-lib": "^0.6.5",
     "x-essential-lib": "^0.10.40",
     "x-group-list": "^0.4.19",
-    "x-runtime-lib": "^0.10.4",
+    "x-runtime-lib": "^0.10.5",
     "x-state-lib": "^0.4.5"
   }
 }