@web-utils/component 4.0.16 → 5.0.0-beta01

package/chunks/Keyboard.ItiRy7Gb.mjs

@@ -0,0 +1,379 @@
+import { t as e } from "./_plugin-vue_export-helper.7vrlOII_.mjs";
+import { createElementBlock as t, createElementVNode as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/components/keyboard/index.js
+var a = class {
+	constructor(e) {
+		if (typeof e != "object") {
+			console.error("aKeyboard: The obj parameter needs to be an object <In \"new aKeyboard()\">");
+			return;
+		}
+		this.obj = e;
+		let t = document.querySelector(e.el), n = "";
+		if (typeof e.style == "object") for (let t in e.style) n += `${t}: ${e.style[t]};`;
+		let r = `<div class="akeyboard-keyboard${e.fixedBottomCenter ? " akeyboard-keyboard-fixedBottomCenter" : ""}" style="${n}">`, i = [];
+		for (let e = 1; e < 10; e++) i.push(e.toString());
+		i.push("0");
+		let a = e.keys || [
+			["`"].concat(i, [
+				"-",
+				"=",
+				"Delete"
+			]),
+			[
+				"Tab",
+				"q",
+				"w",
+				"e",
+				"r",
+				"t",
+				"y",
+				"u",
+				"i",
+				"o",
+				"p",
+				"[",
+				"]",
+				"\\"
+			],
+			[
+				"Caps",
+				"a",
+				"s",
+				"d",
+				"f",
+				"g",
+				"h",
+				"j",
+				"k",
+				"l",
+				";",
+				"'",
+				"Enter"
+			],
+			[
+				"Shift",
+				"z",
+				"x",
+				"c",
+				"v",
+				"b",
+				"n",
+				"m",
+				",",
+				".",
+				"/",
+				"Shift"
+			],
+			["Space"]
+		], o, s = [], c = [];
+		for (let e = 0; e < a.length; e++) {
+			s.push([]), c.push([]), o = a[e];
+			for (let t = 0; t < o.length; t++) {
+				if (o[t].length === 1) {
+					switch (c[e].push(o[t].toUpperCase()), o[t]) {
+						case "`":
+							s[e].push("~");
+							continue;
+						case "1":
+							s[e].push("!");
+							continue;
+						case "2":
+							s[e].push("@");
+							continue;
+						case "3":
+							s[e].push("#");
+							continue;
+						case "4":
+							s[e].push("$");
+							continue;
+						case "5":
+							s[e].push("%");
+							continue;
+						case "6":
+							s[e].push("^");
+							continue;
+						case "7":
+							s[e].push("&");
+							continue;
+						case "8":
+							s[e].push("*");
+							continue;
+						case "9":
+							s[e].push("(");
+							continue;
+						case "0":
+							s[e].push(")");
+							continue;
+						case "-":
+							s[e].push("_");
+							continue;
+						case "=":
+							s[e].push("+");
+							continue;
+						case "[":
+							s[e].push("{");
+							continue;
+						case "]":
+							s[e].push("}");
+							continue;
+						case "\\":
+							s[e].push("|");
+							continue;
+						case ";":
+							s[e].push(":");
+							continue;
+						case "'":
+							s[e].push("\"");
+							continue;
+						case ",":
+							s[e].push("<");
+							continue;
+						case ".":
+							s[e].push(">");
+							continue;
+						case "/":
+							s[e].push("?");
+							continue;
+					}
+					s[e].push(o[t].toUpperCase());
+					continue;
+				}
+				s[e].push(o[t]), c[e].push(o[t]);
+			}
+		}
+		for (let e = 0; e < a.length; e++) {
+			o = a[e], r += "<div class=\"akeyboard-keyboard-innerKeys\">";
+			for (let e = 0; e < o.length; e++) r += `<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-${o[e]}">${o[e]}</div>`;
+			r += "</div>";
+		}
+		r += "</div>", t.innerHTML = r;
+		let l = !1;
+		a.forEach((e) => {
+			e.includes("Shift") && (l = !0);
+		}), l && document.querySelectorAll(`${e.el} .akeyboard-keyboard-keys-Shift`).forEach((t) => {
+			t.onclick = function() {
+				if (!this.isShift) {
+					let n = document.querySelector(`${e.el} .akeyboard-keyboard-keys-Caps`);
+					if (n && n.isCaps) return;
+					t.isShift = !0, t.innerHTML = "SHIFT", this.classList.add("keyboard-keyboard-keys-focus");
+					let r = document.querySelectorAll(`${e.el} .akeyboard-keyboard-innerKeys`), i;
+					for (let e = 0; e < r.length; e++) {
+						i = r[e];
+						for (let t = 0; t < i.childNodes.length; t++) s[e][t] !== "Shift" && (i.childNodes[t].innerHTML = s[e][t]);
+					}
+					return;
+				}
+				t.isShift = !1, t.innerHTML = "Shift", this.classList.remove("keyboard-keyboard-keys-focus");
+				let n = document.querySelectorAll(`${e.el} .akeyboard-keyboard-innerKeys`), r;
+				for (let e = 0; e < n.length; e++) {
+					r = n[e];
+					for (let t = 0; t < r.childNodes.length; t++) r.childNodes[t].innerHTML = a[e][t];
+				}
+			};
+		});
+		let u = !1;
+		a.forEach((e) => {
+			e.includes("Caps") && (u = !0);
+		}), u && document.querySelectorAll(`${e.el} .akeyboard-keyboard-keys-Caps`).forEach((t) => {
+			t.onclick = function() {
+				if (!this.isCaps) {
+					let t = document.querySelector(`${e.el} .akeyboard-keyboard-keys-Shift`);
+					if (t && t.isShift) return;
+					this.isCaps = !0, this.classList.add("keyboard-keyboard-keys-focus");
+					let n = document.querySelectorAll(`${e.el} .akeyboard-keyboard-innerKeys`), r;
+					for (let e = 0; e < n.length; e++) {
+						r = n[e];
+						for (let t = 0; t < r.childNodes.length; t++) r.childNodes[t].innerHTML = c[e][t];
+					}
+					return;
+				}
+				this.isCaps = !1, this.classList.remove("keyboard-keyboard-keys-focus");
+				let t = document.querySelectorAll(`${e.el} .akeyboard-keyboard-innerKeys`), n;
+				for (let e = 0; e < t.length; e++) {
+					n = t[e];
+					for (let t = 0; t < n.childNodes.length; t++) n.childNodes[t].innerHTML = a[e][t];
+				}
+			};
+		});
+	}
+	inputOn(e, t, n, r) {
+		if (typeof e != "string") {
+			console.error("aKeyboard: The inputEle parameter needs to be a string <In \"aKeyboard.inputOn()\">");
+			return;
+		}
+		if (typeof t != "string") {
+			console.error("aKeyboard: The type parameter needs to be a string <In \"aKeyboard.inputOn()\">");
+			return;
+		}
+		let i = document.querySelector(e), a = document.querySelectorAll(`${this.obj.el} .akeyboard-keyboard-keys`);
+		for (let e = 0; e < a.length; e++) if (!["Shift", "Caps"].includes(a[e].innerHTML)) {
+			if (a[e].innerHTML === "Delete") {
+				a[e].onclick = function() {
+					i[t] = i[t].substr(0, i[t].length - 1), n("Delete", i[t]);
+				};
+				continue;
+			}
+			if (a[e].innerHTML === "Tab") {
+				a[e].onclick = function() {
+					i[t] += "  ", n("Tab", i[t]);
+				};
+				continue;
+			}
+			if (a[e].innerHTML === "Enter") {
+				a[e].onclick = function() {
+					i[t] += "\n", n("Enter", i[t]);
+				};
+				continue;
+			}
+			if (a[e].innerHTML === "Space") {
+				a[e].onclick = function() {
+					i[t] += " ", n("Space", i[t]);
+				};
+				continue;
+			}
+			r && typeof r == "object" && Object.keys(r).length > 0 && r[a[e].innerHTML] ? a[e].onclick = r[a[e].innerHTML] : a[e].onclick = function() {
+				i[t] += this.innerText, n(this.innerText, i[t]);
+			};
+		}
+	}
+	onclick(e, t) {
+		if (typeof e != "string") {
+			console.error("aKeyboard: The btn parameter needs to be a string <In \"aKeyboard.onclick()\">");
+			return;
+		}
+		if (typeof t != "function") {
+			console.error("aKeyboard: The fn parameter needs to be a function <In \"aKeyboard.onclick()\">");
+			return;
+		}
+		let n = document.querySelector(`${this.obj.el} .akeyboard-keyboard-keys-${e}`);
+		n ? n.onclick = t : console.error(`Can not find key: ${e}`);
+	}
+}, o = class {
+	constructor(e) {
+		if (typeof e != "object") {
+			console.error("aKeyboard: The obj parameter needs to be an object <In \"new aKeyboard()\">");
+			return;
+		}
+		this.obj = e;
+		let t = document.querySelector(e.el), n = "";
+		if (typeof e.style == "object") for (let t in e.style) n += `${t}: ${e.style[t]};`;
+		let r = `<div class="akeyboard-numberKeyboard${e.fixedBottomCenter ? " akeyboard-keyboard-fixedBottomCenter" : ""}" style="${n}">`;
+		r += "<div class=\"akeyboard-keyboard-innerKeys\">";
+		for (let e = 1; e < 10; e++) r += `<div class="akeyboard-keyboard-keys akeyboard-keyboard-keys-${e}">${e}</div>`, e % 3 == 0 && (r += "</div><div class=\"akeyboard-keyboard-innerKeys\">");
+		r += "<div class=\"akeyboard-keyboard-keys akeyboard-keyboard-keys-0\">0</div><div class=\"akeyboard-keyboard-keys akeyboard-keyboard-keys-Delete\">Delete</div></div><div class=\"akeyboard-keyboard-innerKeys\"><div class=\"akeyboard-keyboard-keys akeyboard-numberKeyboard-keys-Enter\">Enter</div></div>", r += "</div>", t.innerHTML = r;
+	}
+	inputOn(e, t, n, r) {
+		if (typeof e != "string") {
+			console.error("aKeyboard: The inputEle parameter needs to be a string <In \"aKeyboard.inputOn()\">");
+			return;
+		}
+		if (typeof t != "string") {
+			console.error("aKeyboard: The type parameter needs to be a string <In \"aKeyboard.inputOn()\">");
+			return;
+		}
+		let i = document.querySelector(e), a = document.querySelectorAll(`${this.obj.el} .akeyboard-keyboard-keys`);
+		for (let e = 0; e < a.length; e++) {
+			if (a[e].innerHTML === "Delete") {
+				a[e].onclick = function() {
+					i[t] = i[t].substr(0, i[t].length - 1), n("Delete", i[t]);
+				};
+				continue;
+			}
+			if (a[e].innerHTML === "Enter") {
+				a[e].onclick = function() {
+					i[t] += "\n", n("Enter", i[t]);
+				};
+				continue;
+			}
+			r && typeof r == "object" && Object.keys(r).length > 0 && r[a[e].innerHTML] ? a[e].onclick = r[a[e].innerHTML] : a[e].onclick = function() {
+				i[t] += this.innerText, n(this.innerText, i[t]);
+			};
+		}
+	}
+	onclick(e, t) {
+		if (typeof e != "string") {
+			console.error("aKeyboard: The btn parameter needs to be a string <In \"aKeyboard.onclick()\">");
+			return;
+		}
+		if (typeof t != "function") {
+			console.error("aKeyboard: The fn parameter needs to be a function <In \"aKeyboard.onclick()\">");
+			return;
+		}
+		let n = document.querySelector(`${this.obj.el} .akeyboard-keyboard-keys-${e}`);
+		n ? n.onclick = t : console.error(`Can not find key: ${e}`);
+	}
+}, s = {
+	name: "Keyboard",
+	props: {
+		ele: {
+			type: String,
+			required: !0
+		},
+		keys: Array,
+		theme: {
+			type: String,
+			default: "default",
+			validator: (e) => [
+				"default",
+				"dark",
+				"green",
+				"classic"
+			].includes(e)
+		},
+		type: {
+			type: String,
+			default: "default",
+			validator: (e) => [
+				"default",
+				"number",
+				"mobile"
+			].includes(e)
+		},
+		fixedBottomCenter: {
+			type: Boolean,
+			default: !1
+		},
+		rebind: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["click"],
+	data() {
+		return { customClick: {} };
+	},
+	computed: { className() {
+		return `avue-keyboard--${this.theme}`;
+	} },
+	watch: { ele() {
+		this.init();
+	} },
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			if (!this.ele) return;
+			let e, t = {
+				el: "#keyboard",
+				style: {},
+				keys: this.keys,
+				fixedBottomCenter: this.fixedBottomCenter
+			};
+			this.type === "default" ? e = new a(t) : this.type === "number" && (e = new o(t));
+			let n = this.ele.indexOf("#") === 0 ? this.ele.substring(1) : this.ele;
+			e.inputOn(`#${n}`, "value", (e, t) => {
+				this.$emit("click", e, t);
+			}, this.rebind ? this.customClick : null), this.keyboard = e;
+		},
+		bindClick(e, t) {
+			this.keyboard.onclick(e, t), this.customClick[e] = t;
+		}
+	}
+};
+function c(e, a, o, s, c, l) {
+	return i(), t("div", { class: r(["avue-keyboard", l.className]) }, [...a[0] || (a[0] = [n("div", { id: "keyboard" }, null, -1)])], 2);
+}
+var l = /* @__PURE__ */ e(s, [["render", c]]);
+//#endregion
+export { l as t };

package/chunks/MonacoEditor.Bd5Kui-Y.mjs

@@ -0,0 +1,301 @@
+import { NOOP as e } from "@web-utils/core";
+import * as t from "monaco-editor/esm/vs/editor/editor.api";
+//#region src/components/monaco-editor/json-beautifier.js
+var n = /[\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, r = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/, i, a, o = {
+	"\b": "\\b",
+	"	": "\\t",
+	"\n": "\\n",
+	"\f": "\\f",
+	"\r": "\\r",
+	"\"": "\\\"",
+	"'": "\\'",
+	"\\": "\\\\"
+}, s;
+function c(e, t = {}) {
+	let n = t.space || 2, r = t.dropQuotesOnKeys !== !1, i = t.dropQuotesOnNumbers || !1, a = t.inlineShortArrays || !1, o = t.inlineShortArraysDepth || 1, s = t.quoteType || "single", c = t.minify || !1;
+	i && l(e);
+	let u = f(e, null, c ? void 0 : n, r, s);
+	if (a && !c) {
+		let e = d(u);
+		if (o > 1) for (let t = 1; t < o && (u = e, e = d(u), e !== u); t++);
+		u = e;
+	}
+	return u;
+}
+function l(e) {
+	if (!u(e)) return;
+	let t = Object.keys(e);
+	t && t.forEach(function(t) {
+		let n = e[t];
+		if (typeof n == "string") {
+			let r = n - 0;
+			e[t] = isNaN(r) ? n : r;
+		} else (u(n) || Array.isArray(n)) && l(n);
+	});
+}
+function u(e) {
+	return e && typeof e == "object";
+}
+function d(e, t) {
+	if (t || (t = 80), typeof t != "number" || t < 20) throw Error(`Invalid width '${t}'. Expecting number equal or larger than 20.`);
+	let n = e.split("\n"), r = 0, i = null, a = [];
+	for (; r < n.length;) {
+		let e = !!n[r].match(/\[/), o = !!n[r].match(/\],?/);
+		if (e && !o) a = [n[r]], i = r;
+		else if (o && !e && i) {
+			a.push((n[r] || "").trim());
+			let e = a.join(" ");
+			e.length < t && (n.splice(i, r - i + 1, e), r = i), i = null, a = [];
+		} else i && a.push((n[r] || "").trim());
+		r += 1;
+	}
+	return n.join("\n");
+}
+function f(e, t, n, r, o) {
+	let c;
+	if (i = "", a = "", typeof n == "number") for (c = 0; c < n; c += 1) a += " ";
+	else typeof n == "string" && (a = n);
+	if (s = t, t && typeof t != "function" && (typeof t != "object" || typeof t.length != "number")) throw Error("JSON.stringify");
+	return p("", { "": e }, r, o);
+}
+function p(e, t, n, r) {
+	let o, c, l, u, d = i, f, g = t[e];
+	switch (g && typeof g == "object" && typeof g.toJSON == "function" && (g = g.toJSON(e)), typeof s == "function" && (g = s.call(t, e, g)), typeof g) {
+		case "function": return g;
+		case "string": return m(g, r);
+		case "number": return isFinite(g) ? String(g) : "null";
+		case "boolean":
+		case "null": return String(g);
+		case "object":
+			if (!g) return "null";
+			if (i += a, f = [], Object.prototype.toString.apply(g) === "[object Array]") {
+				for (u = g.length, o = 0; o < u; o += 1) f[o] = p(o, g, n, r) || "null";
+				return l = f.length === 0 ? "[]" : i ? `[\n${i}${f.join(`,\n${i}`)}\n${d}]` : `[${f.join(",")}]`, i = d, l;
+			}
+			if (s && typeof s == "object") for (u = s.length, o = 0; o < u; o += 1) typeof s[o] == "string" && (c = s[o], l = p(c, g, n, r), l && f.push((n ? h(c, r) : m(c, r)) + (i ? ": " : ":") + l));
+			else for (c in g) Object.prototype.hasOwnProperty.call(g, c) && (l = p(c, g, n, r), l && f.push((n ? h(c, r) : m(c, r)) + (i ? ": " : ":") + l));
+			return l = f.length === 0 ? "{}" : i ? `{\n${i}${f.join(`,\n${i}`)}\n${d}}` : `{${f.join(",")}}`, i = d, l;
+	}
+}
+function m(e, t) {
+	n.lastIndex = 0;
+	let r = "\"";
+	return t === "single" && (r = "'"), n.test(e) ? r + e.replace(n, function(e) {
+		let t = o[e];
+		return typeof t == "string" ? t : `\\u${`0000${e.charCodeAt(0).toString(16)}`.slice(-4)}`;
+	}) + r : r + e + r;
+}
+function h(e, t) {
+	return r.test(e) ? e : m(e, t);
+}
+//#endregion
+//#region src/components/monaco-editor/MonacoEditor.vue
+var g = {
+	name: "MonacoEditor",
+	props: {
+		diffEditor: {
+			type: Boolean,
+			default: !1
+		},
+		width: {
+			type: [String, Number],
+			default: "100%"
+		},
+		height: {
+			type: [String, Number],
+			default: "100%"
+		},
+		original: String,
+		modelValue: [String, Object],
+		language: {
+			type: String,
+			default: "javascript"
+		},
+		theme: {
+			type: String,
+			default: "vs"
+		},
+		readOnly: {
+			type: Boolean,
+			default: !1
+		},
+		options: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		editorMounted: {
+			type: Function,
+			default: e
+		},
+		editorBeforeMount: {
+			type: Function,
+			default: e
+		},
+		keyIndex: { type: String }
+	},
+	emits: ["change", "update:modelValue"],
+	data() {
+		return { fullscreen: !1 };
+	},
+	computed: { style() {
+		return this.fullscreen ? {} : {
+			width: /^\d+$/.test(this.width) ? `${this.width}px` : this.width,
+			height: /^\d+$/.test(this.height) ? `${this.height}px` : this.height,
+			position: "relative"
+		};
+	} },
+	watch: {
+		options: {
+			deep: !0,
+			handler(e) {
+				var t;
+				(t = this.editor) == null || t.updateOptions(e);
+			}
+		},
+		keyIndex() {
+			let e = this.modelValue;
+			typeof e == "object" && (e = c(e)), this.editor && e !== this._getValue() && this._setValue(e);
+		},
+		language() {
+			if (this.editor) if (this.diffEditor) {
+				let { original: e, modified: n } = this.editor.getModel();
+				t.editor.setModelLanguage(e, this.language), t.editor.setModelLanguage(n, this.language);
+			} else t.editor.setModelLanguage(this.editor.getModel(), this.language);
+		},
+		theme() {
+			this.editor && t.editor.setTheme(this.theme);
+		},
+		style() {
+			this.$nextTick(() => {
+				var e;
+				(e = this.editor) == null || e.layout();
+			});
+		},
+		modelValue(e) {
+			this.editor && e !== this._getValue() && this._setValue(e);
+		}
+	},
+	mounted() {
+		this.initMonaco(), window.addEventListener("resize", this.onResize);
+	},
+	beforeUnmount() {
+		var e;
+		window.removeEventListener("resize", this.onResize), (e = this.editor) == null || e.dispose();
+	},
+	methods: {
+		initMonaco() {
+			let { modelValue: e, language: n, theme: r, readOnly: i, options: a } = this;
+			Object.assign(a, this._editorBeforeMount()), this.editor = t.editor[this.diffEditor ? "createDiffEditor" : "create"](this.$el, {
+				value: typeof e == "string" ? e : c(e),
+				language: n,
+				theme: r,
+				readOnly: i,
+				...a
+			}), this.diffEditor && this._setModel(this.modelValue, this.original), this._editorMounted(this.editor), this.editor.addAction({
+				id: "f1",
+				label: "full screen",
+				keybindings: [t.KeyCode.F1],
+				run: (e) => {
+					this.toggleFullScreen();
+				}
+			}), this.editor.addAction({
+				id: "escape",
+				label: "exit full screen",
+				keybindings: [t.KeyCode.Escape],
+				run: (e) => {
+					this.fullscreen = !1;
+				}
+			});
+		},
+		toggleFullScreen() {
+			this.fullscreen = !this.fullscreen;
+		},
+		async onResize() {
+			await this.$nextTick();
+			let e = this.$el;
+			this.editor.layout({
+				width: e.clientWidth,
+				height: e.clientHeight
+			});
+		},
+		_handleFullScreen() {
+			this.isMaximum ? this.minEditor() : this.maxEditor();
+		},
+		maxEditor() {
+			this.isMaximum = !0;
+			let e = this.$el;
+			this.originSize = {
+				width: e.clientWidth,
+				height: e.clientHeight
+			}, e.classList.add("editor-fullscreen"), this.editor.layout({
+				height: document.body.clientHeight,
+				width: document.body.clientWidth
+			}), document.addEventListener("keyup", this.handleEsc);
+		},
+		handleEsc(e) {
+			e.keyCode === 27 && this.minEditor();
+		},
+		minEditor() {
+			this.isMaximum = !1, this.$el.classList.remove("editor-fullscreen"), this.editor.layout({
+				height: this.originSize.height,
+				width: this.originSize.width
+			}), document.removeEventListener("keyup", this.handleEsc);
+		},
+		_getEditor() {
+			return this.editor ? this.diffEditor ? this.editor.modifiedEditor : this.editor : null;
+		},
+		_setModel(e, n) {
+			let { language: r } = this, i = t.editor.createModel(n, r), a = t.editor.createModel(e, r);
+			this.editor.setModel({
+				original: i,
+				modified: a
+			});
+		},
+		_setValue(e) {
+			let t = this._getEditor();
+			if (t) return t.setValue(e);
+		},
+		_getValue() {
+			let e = this._getEditor();
+			return e ? e.getValue() : "";
+		},
+		_editorBeforeMount() {
+			return this.editorBeforeMount(t) || {};
+		},
+		_editorMounted(e) {
+			this.editorMounted(e, t), this.diffEditor ? e.onDidUpdateDiff((e) => {
+				let t = this._getValue();
+				this._emitChange(t, e);
+			}) : e.onDidChangeModelContent((e) => {
+				let t = this._getValue();
+				this._emitChange(t, e);
+			});
+		},
+		_emitChange(e, t) {
+			this.$emit("change", e, t), this.$emit("update:modelValue", e);
+		}
+	},
+	render(e) {
+		let t = this.options.fullScreen;
+		return e("div", {
+			class: ["monaco_editor_container", this.fullscreen ? "fullscreen" : ""],
+			style: this.style
+		}, [t ? e("i", {
+			class: "el-icon-full-screen",
+			style: {
+				width: "1.2em",
+				height: "1.2em",
+				position: "absolute",
+				left: "0px",
+				top: "0px",
+				zIndex: "1",
+				cursor: "pointer"
+			},
+			on: { click: this._handleFullScreen }
+		}) : ""]);
+	}
+};
+//#endregion
+export { c as n, g as t };