@web-utils/form-ui 1.0.0-beta1 → 1.0.0-beta100

package/chunks/BxJpkb47.mjs

@@ -0,0 +1,380 @@
+import { t as e } from "./B1MSrc6f.mjs";
+import { createElementBlock as t, createElementVNode as n, normalizeClass as r, openBlock as i } from "vue";
+import "../keyboard/style.css";
+//#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();
+	} },
+	async mounted() {
+		await this.$nextTick(), 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/C-vVy7vH2.mjs

@@ -0,0 +1,96 @@
+import { columnSizeContextKey as e, setColumnSizeContextKey as t } from "../constants/index.mjs";
+import n from "../form-cell/index.mjs";
+import { ElTooltip as r } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import { Comment as i, Fragment as a, Text as o, createVNode as s, inject as c, isVNode as l } from "vue";
+import { camelize as u, isDef as d, isString as f } from "@web-utils/core";
+import "element-plus/es/components/tooltip/style/css";
+import "../form-row/style.css";
+//#region src/components/red-form/FormRow.vue?vue&type=script&lang.jsx
+function p(e) {
+	return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !l(e);
+}
+var m = (e) => {
+	let t = Object.keys({});
+	for (let n in e) t[u(n)] = e[n];
+	return t;
+}, h = (e, { columnSize: t }) => {
+	if (!e || !e.length) return null;
+	e = e.filter((e) => e.type !== i);
+	let n = [], c = e.length === 1;
+	for (let i = 0; i < e.length; i++) {
+		let v = e[i], { name: y } = v.type;
+		if (v.type === o) n.push({
+			tag: y,
+			type: "text",
+			content: v,
+			colspan: c ? t : 0
+		});
+		else if (v.type === a) n.push(...h(v.children, { columnSize: t }));
+		else if (f(v.type) && v.type === "td") n.push({
+			tag: v.type,
+			type: "td",
+			content: v
+		});
+		else if (y === "FormCell") n.push({
+			tag: y,
+			type: "FormCell",
+			content: v
+		});
+		else if (typeof v.type == "object") {
+			var l, u;
+			let { label: e, hideLabel: i, labelColspan: a, inputColspan: o, labelRowspan: f, inputRowspan: h, tipsAfterLabel: b, tips: x } = m(v.props);
+			if (!d(i)) {
+				var p, g, _;
+				let t = (p = v.children) == null ? void 0 : p.tips, i = t || x ? s(r, {
+					effect: "light",
+					content: x,
+					offset: 4
+				}, {
+					default: () => s("i", { class: "el-icon-info form-item-input-info" }, null),
+					content: t || null
+				}) : null;
+				n.push({
+					tag: y,
+					type: "label",
+					colspan: a,
+					rowspan: f,
+					content: [((g = v.children) == null || (_ = g.label) == null ? void 0 : _.call(g)) || e, b === "" ? i : null]
+				});
+			}
+			let S;
+			S = c && d(i) ? t : d(o) ? o : c ? t - 1 : 0, n.push({
+				tag: y,
+				type: "input",
+				colspan: S,
+				rowspan: h,
+				content: [v, (l = v.children) == null || (u = l.below) == null ? void 0 : u.call(l)]
+			});
+		} else console.error("未知节点");
+	}
+	return n;
+}, g = {
+	name: "FormRow",
+	props: {
+		isLabel: Boolean,
+		alignCenter: Boolean
+	},
+	setup(r, { slots: i }) {
+		let a = c(t, null), o = c(e, null);
+		return () => {
+			var e;
+			let t = (e = i.default) == null ? void 0 : e.call(i), c = [];
+			return c.push(...h(t, { columnSize: (o == null ? void 0 : o.value) ?? 0 })), ((o == null ? void 0 : o.value) ?? 0) < c.length && (a == null || a(c.length)), s("tr", null, [c.map(({ tag: e, type: t, colspan: i, rowspan: a, content: o }) => e === "td" || t === "FormCell" ? o : t === "text" ? s(n, {
+				isLabel: r.isLabel,
+				alignCenter: r.alignCenter,
+				colspan: i
+			}, p(o) ? o : { default: () => [o] }) : s("td", {
+				class: t,
+				colspan: i,
+				rowspan: a
+			}, [o]))]);
+		};
+	}
+};
+//#endregion
+export { g as t };