@kernel4632/kima 0.0.0-stage → 0.6.0

package/dist/vue/components/form-completion/form.ce.js

@@ -0,0 +1,248 @@
+import { useNativeSlots as e } from "../../utils/native-slots.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import { collapseTransition as n } from "../../utils/motion.js";
+/* empty css                                                        */
+import { Transition as r, computed as i, createElementBlock as a, createElementVNode as o, createVNode as s, mergeProps as c, onBeforeUnmount as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, vShow as h, withCtx as g, withDirectives as _, withModifiers as v } from "vue";
+// src/components/form-completion/form.ce.vue
+var y = [
+	"aria-busy",
+	"data-dirty",
+	"data-submitted",
+	"novalidate"
+], b = ["disabled"], x = ["inert", "aria-hidden"], S = {
+	class: "kima-form__error",
+	role: "alert"
+}, C = /*#__PURE__*/ t({
+	__name: "form.ce",
+	props: {
+		disabled: Boolean,
+		loading: Boolean,
+		novalidate: Boolean,
+		handleSubmit: Function,
+		submitHandler: Function,
+		rules: {
+			type: Object,
+			default: () => ({})
+		},
+		context: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: [
+		"submit",
+		"success",
+		"error",
+		"invalid",
+		"reset",
+		"state-change",
+		"validate"
+	],
+	setup(t, { expose: C, emit: w }) {
+		let T = t, E = w, D = d(null);
+		e(D);
+		let O = d(!1), k = d(""), A = d(""), j = d(!1), M = d([]), N = d([]), P = d([]), F = d({}), I = d(!1), L = i(() => T.loading || O.value || I.value), R = 0, z = !1, B = /* @__PURE__ */ new Map(), V = /* @__PURE__ */ new Set();
+		function H() {
+			return [...D.value?.elements || []].filter((e) => e.willValidate);
+		}
+		function U() {
+			return Object.fromEntries(H().filter((e) => e.name).map((e) => [e.name, e.value]));
+		}
+		function W() {
+			return {
+				pending: L.value,
+				validating: I.value,
+				submitted: j.value,
+				dirty: [...M.value],
+				touched: [...N.value],
+				invalid: [...P.value],
+				errors: { ...F.value },
+				error: k.value
+			};
+		}
+		function G() {
+			E("state-change", W());
+		}
+		function K() {
+			P.value = [...new Set(H().filter((e) => !e.validity.valid).map((e) => e.name || e.getAttribute("aria-label") || "unnamed"))];
+		}
+		function q(e) {
+			let t = T.rules?.[e];
+			return typeof t == "function" ? { validator: t } : t || {};
+		}
+		function J(e) {
+			return e === !0 || e == null || e === "" ? "" : e === !1 ? "输入无效" : String(e);
+		}
+		function Y(e) {
+			return H().filter((t) => t.name === e);
+		}
+		function X(e, t) {
+			for (let n of Y(e)) n.setCustomValidity(t || ""), t ? n.setAttribute("aria-invalid", "true") : n.dataset.kimaRuleInvalid && n.removeAttribute("aria-invalid"), n.dataset.kimaRuleInvalid = t ? "true" : "";
+			for (let n of D.value?.querySelectorAll(".kima-field") || []) n.querySelector(`[name="${CSS.escape(e)}"]`) && (t ? n.setAttribute("data-kima-validation-error", t) : n.removeAttribute("data-kima-validation-error"));
+		}
+		async function Z(e, t = U()[e], n = "change") {
+			let r = q(e), i = typeof r == "function" ? r : r.validator || r.sync || r.async;
+			if (typeof i != "function") return "";
+			let a = B.get(e);
+			a && V.delete(`${e}:${a}`);
+			let o = (a || 0) + 1;
+			B.set(e, o);
+			let s = `${e}:${o}`;
+			V.add(s), I.value = !0, G();
+			try {
+				let a = {
+					name: e,
+					model: U(),
+					context: T.context,
+					source: n,
+					form: D.value
+				}, s;
+				if (typeof r.sync == "function" && (s = r.sync(t, a)), J(s) || (typeof r.async == "function" ? s = await r.async(t, a) : (typeof r.validator == "function" || typeof r == "function") && (s = await i(t, a))), B.get(e) !== o) return null;
+				let c = J(s);
+				return F.value = {
+					...F.value,
+					[e]: c
+				}, X(e, c), E("validate", {
+					name: e,
+					value: t,
+					valid: !c,
+					message: c
+				}), c;
+			} catch (n) {
+				if (B.get(e) !== o) return null;
+				let r = n?.message || String(n);
+				return F.value = {
+					...F.value,
+					[e]: r
+				}, X(e, r), E("validate", {
+					name: e,
+					value: t,
+					valid: !1,
+					message: r
+				}), r;
+			} finally {
+				V.delete(s), I.value = V.size > 0, G();
+			}
+		}
+		async function Q(e = "submit") {
+			let t = Object.keys(T.rules || {});
+			try {
+				let n = await Promise.all(t.map((t) => Z(t, U()[t], e))), r = Object.fromEntries(t.map((e, t) => [e, n[t] || ""]).filter(([, e]) => e));
+				return F.value = {
+					...F.value,
+					...r
+				}, Object.keys(r).length === 0;
+			} finally {
+				e === "submit" && (V.clear(), I.value = !1, G());
+			}
+		}
+		function $(e, t) {
+			let n = t === "dirty" ? M : N, r = e.target.name;
+			r && !n.value.includes(r) && (n.value = [...n.value, r]), r && t === "dirty" && Z(r, e.target.value, t), K(), G();
+		}
+		function ee(e) {
+			e.target?.willValidate && (K(), j.value = !0, E("invalid", {
+				control: e.target,
+				message: e.target.validationMessage,
+				field: e.target.closest(".kima-field")
+			}), G());
+		}
+		async function te(e) {
+			if (z) return;
+			if (O.value || T.loading || T.disabled) {
+				e.preventDefault();
+				return;
+			}
+			let t = !!(T.handleSubmit || T.submitHandler), n = Object.keys(T.rules || {}).length > 0;
+			if ((t || n) && e.preventDefault(), j.value = !0, K(), !t && !n) {
+				E("submit", e), G();
+				return;
+			}
+			if (!await Q("submit") || !T.novalidate && !D.value.checkValidity()) {
+				e.preventDefault(), K(), D.value.reportValidity();
+				return;
+			}
+			let r = {
+				form: D.value,
+				event: e,
+				submitter: e.submitter,
+				data: new FormData(D.value, e.submitter || void 0),
+				model: U(),
+				errors: { ...F.value },
+				context: T.context
+			};
+			if (E("submit", e, r), !t) {
+				G(), z = !0;
+				try {
+					D.value.requestSubmit(e.submitter || void 0);
+				} finally {
+					z = !1;
+				}
+				return;
+			}
+			e.preventDefault(), O.value = !0, k.value = "";
+			let i = ++R;
+			G();
+			try {
+				let t = T.handleSubmit ? await T.handleSubmit(r) : await T.submitHandler(e, r);
+				i === R && E("success", t);
+			} catch (e) {
+				i === R && (k.value = e?.message || String(e), A.value = k.value, E("error", e));
+			} finally {
+				i === R && (O.value = !1, G());
+			}
+		}
+		function ne(e) {
+			E("reset", e), queueMicrotask(() => {
+				!e.defaultPrevented && D.value && (R += 1, O.value = !1, I.value = !1, k.value = "", j.value = !1, M.value = [], N.value = [], P.value = [], F.value = {}, B.clear(), V.clear(), G());
+			});
+		}
+		return l(() => {
+			R += 1;
+		}), C({
+			form: D,
+			requestSubmit: () => D.value?.requestSubmit(),
+			reset: () => D.value?.reset(),
+			checkValidity: () => D.value?.checkValidity() && Object.values(F.value).every((e) => !e),
+			validate: Q,
+			validateField: Z,
+			getState: W
+		}), (e, i) => (u(), a("form", {
+			ref_key: "root",
+			ref: D,
+			class: "kima-form",
+			"aria-busy": L.value || void 0,
+			"data-dirty": !!M.value.length,
+			"data-submitted": j.value,
+			novalidate: t.novalidate,
+			onSubmit: v(te, ["stop"]),
+			onReset: v(ne, ["stop"]),
+			onInvalidCapture: ee,
+			onInputCapture: i[0] ||= (e) => $(e, "dirty"),
+			onChangeCapture: i[1] ||= (e) => $(e, "dirty"),
+			onFocusoutCapture: i[2] ||= (e) => $(e, "touched")
+		}, [
+			o("fieldset", {
+				class: "kima-form__fields",
+				disabled: t.disabled
+			}, [f(e.$slots, "default", {
+				pending: L.value,
+				error: k.value,
+				state: W()
+			}, void 0, !0)], 8, b),
+			s(r, c({ css: !1 }, m(n)), {
+				default: g(() => [_(o("div", {
+					inert: !k.value,
+					"aria-hidden": !k.value || void 0
+				}, [o("p", S, p(A.value), 1)], 8, x), [[h, k.value]])]),
+				_: 1
+			}, 16),
+			f(e.$slots, "status", {
+				pending: L.value,
+				error: k.value,
+				state: W()
+			}, void 0, !0)
+		], 40, y));
+	}
+}, [["__scopeId", "data-v-f8f70e6f"]]);
+export { C as default };

package/dist/vue/components/form-completion/json-input.ce.js

@@ -0,0 +1,114 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "../core/button.ce.js";
+import { useInputAttrs as n, useInputState as r } from "../../utils/input-state.js";
+import { useContentMotion as i } from "../../utils/content-motion.js";
+/* empty css                                                              */
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, toDisplayString as _, unref as v, watch as y, withCtx as b, withModifiers as x } from "vue";
+// src/components/form-completion/json-input.ce.vue
+var S = [
+	"value",
+	"name",
+	"aria-label",
+	"rows",
+	"required",
+	"disabled",
+	"readonly"
+], C = {
+	key: 0,
+	role: "alert"
+}, w = {
+	key: 1,
+	role: "status"
+}, T = /*#__PURE__*/ e({
+	__name: "json-input.ce",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		name: String,
+		label: {
+			type: String,
+			default: "JSON"
+		},
+		required: Boolean,
+		disabled: Boolean,
+		readonly: Boolean,
+		rows: {
+			type: Number,
+			default: 8
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"parse"
+	],
+	setup(e, { expose: T, emit: E }) {
+		let D = e, O = E, k = g(null), A = g(null), { attrs: j, controlAttrs: M } = n(), { local: N, update: P } = r(D, O, k, (e) => String(e ?? "")), F = o(() => {
+			try {
+				return {
+					value: JSON.parse(N.value),
+					error: null
+				};
+			} catch (e) {
+				let t = /position\s+(\d+)/i.exec(e.message);
+				return {
+					value: void 0,
+					error: {
+						message: e.message,
+						position: t ? Number(t[1]) : null
+					}
+				};
+			}
+		});
+		y(F, (e) => {
+			A.value?.setCustomValidity(e.error?.message || ""), O("parse", e);
+		}, { immediate: !0 });
+		function I() {
+			F.value.error || P(JSON.stringify(F.value.value, null, 2));
+		}
+		T({
+			format: I,
+			parse: () => F.value
+		});
+		let L = g(null);
+		return i(L, () => !!F.value.error), (n, r) => (h(), c("div", {
+			ref_key: "root",
+			ref: k,
+			class: p(["kima-json-input", v(j).class]),
+			style: m(v(j).style)
+		}, [
+			l("textarea", f({
+				ref_key: "area",
+				ref: A
+			}, v(M), {
+				class: "kima-json-input__control",
+				value: v(N),
+				name: e.name,
+				"aria-label": v(M)["aria-label"] || e.label,
+				rows: e.rows,
+				required: e.required,
+				disabled: e.disabled,
+				readonly: e.readonly,
+				spellcheck: "false",
+				onInput: r[0] ||= x((e) => v(P)(e.target.value, !1), ["stop"]),
+				onChange: r[1] ||= x((e) => O("change", v(N)), ["stop"])
+			}), null, 16, S),
+			l("div", {
+				ref_key: "message",
+				ref: L,
+				class: "kima-json-input__message"
+			}, [F.value.error ? (h(), c("p", C, [u(_(F.value.error.message), 1), F.value.error.position === null ? s("", !0) : (h(), c(a, { key: 0 }, [u(" · 位置 " + _(F.value.error.position), 1)], 64))])) : (h(), c("p", w, "JSON 有效"))], 512),
+			d(t, {
+				variant: "tonal",
+				disabled: e.disabled || e.readonly || !!F.value.error,
+				onClick: I
+			}, {
+				default: b(() => [...r[2] ||= [u("格式化", -1)]]),
+				_: 1
+			}, 8, ["disabled"])
+		], 6));
+	}
+}, [["__scopeId", "data-v-15a17728"]]);
+export { T as default };

package/dist/vue/components/form-completion/masked-input.ce.js

@@ -0,0 +1,88 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import { useInputAttrs as t, useInputState as n } from "../../utils/input-state.js";
+/* empty css                                                                */
+import { createElementBlock as r, createElementVNode as i, mergeProps as a, normalizeClass as o, normalizeStyle as s, openBlock as c, ref as l, unref as u, withModifiers as d } from "vue";
+// src/components/form-completion/masked-input.ce.vue
+var f = [
+	"value",
+	"name",
+	"aria-label",
+	"placeholder",
+	"required",
+	"disabled",
+	"readonly"
+], p = /*#__PURE__*/ e({
+	__name: "masked-input.ce",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		mask: {
+			type: String,
+			default: ""
+		},
+		name: String,
+		label: String,
+		placeholder: String,
+		required: Boolean,
+		disabled: Boolean,
+		readonly: Boolean
+	},
+	emits: ["update:modelValue", "change"],
+	setup(e, { emit: p }) {
+		let m = e, h = p, g = l(null), _ = l(null), { attrs: v, controlAttrs: y } = t(), { local: b, update: x } = n(m, h, g, (e) => String(e || ""));
+		function S(e, t) {
+			return e === "#" ? /\d/.test(t) : e === "A" ? /[a-z]/i.test(t) : e === "*" ? /[a-z0-9]/i.test(t) : t === e;
+		}
+		function C(e, t) {
+			if (!m.mask) {
+				x(e, !1);
+				return;
+			}
+			let n = "", r = 0, i = 0, a = m.mask;
+			for (; i < a.length && r < e.length;) {
+				let t = a[i], o = e[r++];
+				t === "#" || t === "A" || t === "*" ? S(t, o) && (n += o, i++) : o === t ? (n += t, i++) : (n += t, i++, r--);
+			}
+			x(n, !1), requestAnimationFrame(() => {
+				let e = Math.min(n.length, t);
+				_.value?.setSelectionRange(e, e);
+			});
+		}
+		function w(e) {
+			C(e.target.value, e.target.selectionStart || 0);
+		}
+		function T() {
+			let e = !m.mask || b.value.length === m.mask.length;
+			_.value?.setCustomValidity(e ? "" : "请完成掩码输入");
+		}
+		return (t, n) => (c(), r("div", {
+			ref_key: "root",
+			ref: g,
+			class: o(["kima-masked-input", u(v).class]),
+			style: s(u(v).style)
+		}, [i("input", a({
+			ref_key: "input",
+			ref: _
+		}, u(y), {
+			class: "kima-masked-input__control",
+			value: u(b),
+			name: e.name,
+			"aria-label": u(y)["aria-label"] || e.label,
+			placeholder: e.placeholder || e.mask,
+			required: e.required,
+			disabled: e.disabled,
+			readonly: e.readonly,
+			onInput: n[0] ||= d((e) => {
+				T();
+			}, ["stop"]),
+			onPaste: () => {},
+			onCompositionend: w,
+			onChange: n[1] ||= d((e) => {
+				T(), h("change", u(b));
+			}, ["stop"])
+		}), null, 16, f)], 6));
+	}
+}, [["__scopeId", "data-v-f96e752a"]]);
+export { p as default };

package/dist/vue/components/form-completion/period-picker.ce.js

@@ -0,0 +1,147 @@
+import { useRipple as e } from "../../utils/ripple.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import { useInputState as n } from "../../utils/input-state.js";
+/* empty css                                                                 */
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, openBlock as c, ref as l, toDisplayString as u, unref as d, watch as f, watchEffect as p, withModifiers as m } from "vue";
+// src/components/form-completion/period-picker.ce.vue
+var h = ["aria-label"], g = [
+	"type",
+	"aria-label",
+	"name",
+	"value",
+	"min",
+	"max",
+	"minlength",
+	"maxlength",
+	"required",
+	"disabled"
+], _ = [
+	"type",
+	"aria-label",
+	"name",
+	"value",
+	"min",
+	"max",
+	"minlength",
+	"maxlength",
+	"required",
+	"disabled"
+], v = [
+	"type",
+	"aria-label",
+	"name",
+	"value",
+	"min",
+	"max",
+	"minlength",
+	"maxlength",
+	"required",
+	"disabled"
+], y = {
+	key: 2,
+	role: "alert"
+}, b = /*#__PURE__*/ t({
+	__name: "period-picker.ce",
+	props: {
+		modelValue: {
+			type: [String, Array],
+			default: null
+		},
+		mode: {
+			type: String,
+			default: "month"
+		},
+		range: Boolean,
+		name: String,
+		startName: String,
+		endName: String,
+		label: {
+			type: String,
+			default: "期间"
+		},
+		required: Boolean,
+		disabled: Boolean,
+		min: String,
+		max: String
+	},
+	emits: ["update:modelValue", "change"],
+	setup(t, { emit: b }) {
+		let x = t, S = b, C = l(null), w = l([]), T = i(() => x.mode === "year" ? /^\d{4}$/ : /^\d{4}-(0[1-9]|1[0-2])$/);
+		function E(e) {
+			return x.range ? [D(e?.[0]) ? e[0] : null, D(e?.[1]) ? e[1] : null] : D(e) ? e : null;
+		}
+		function D(e) {
+			return typeof e == "string" && T.value.test(e) ? e : null;
+		}
+		let { local: O, update: k } = n(x, S, C, E);
+		e(C), f(() => [x.mode, x.range], () => k(x.range ? [null, null] : null, !1));
+		let A = i(() => x.mode === "year" ? "number" : "month"), j = i(() => [x.startName || (x.name ? `${x.name}[start]` : void 0), x.endName || (x.name ? `${x.name}[end]` : void 0)]), M = i(() => x.range && O.value[0] && O.value[1] && O.value[0] > O.value[1] ? "结束期间不能早于开始期间" : "");
+		p(() => {
+			for (let e of w.value) e?.setCustomValidity(M.value);
+		}, { flush: "post" });
+		function N(e, t) {
+			if (!x.range) k(D(t));
+			else {
+				let n = [...O.value];
+				n[e] = D(t), k(n);
+			}
+		}
+		return i(() => x.mode === "year" ? Number(String(x.min || "0001").slice(0, 4)) : void 0), i(() => x.mode === "year" ? Number(String(x.max || "9999").slice(0, 4)) : void 0), (e, n) => (c(), o("div", {
+			ref_key: "root",
+			ref: C,
+			class: "kima-period-picker",
+			role: "group",
+			"aria-label": t.label
+		}, [t.range ? (c(), o(r, { key: 0 }, [
+			s("input", {
+				ref: (e) => w.value[0] = e,
+				class: "kima-period-picker__input",
+				type: A.value,
+				"aria-label": `${t.label}开始`,
+				name: d(O)[0] ? j.value[0] : void 0,
+				value: d(O)[0] || "",
+				min: t.min,
+				max: d(O)[1] || t.max,
+				minlength: t.mode === "year" ? 4 : void 0,
+				maxlength: t.mode === "year" ? 4 : void 0,
+				required: t.required,
+				disabled: t.disabled,
+				onInput: n[0] ||= m((e) => N(0, e.target.value), ["stop"]),
+				onChange: n[1] ||= m(() => {}, ["stop"])
+			}, null, 40, g),
+			n[6] ||= s("span", { "aria-hidden": "true" }, "→", -1),
+			s("input", {
+				ref: (e) => w.value[1] = e,
+				class: "kima-period-picker__input",
+				type: A.value,
+				"aria-label": `${t.label}结束`,
+				name: d(O)[1] ? j.value[1] : void 0,
+				value: d(O)[1] || "",
+				min: d(O)[0] || t.min,
+				max: t.max,
+				minlength: t.mode === "year" ? 4 : void 0,
+				maxlength: t.mode === "year" ? 4 : void 0,
+				required: t.required,
+				disabled: t.disabled,
+				onInput: n[2] ||= m((e) => N(1, e.target.value), ["stop"]),
+				onChange: n[3] ||= m(() => {}, ["stop"])
+			}, null, 40, _)
+		], 64)) : (c(), o("input", {
+			key: 1,
+			class: "kima-period-picker__input",
+			type: A.value,
+			"aria-label": t.label,
+			name: d(O) ? t.name : void 0,
+			value: d(O) || "",
+			min: t.min,
+			max: t.max,
+			minlength: t.mode === "year" ? 4 : void 0,
+			maxlength: t.mode === "year" ? 4 : void 0,
+			required: t.required,
+			disabled: t.disabled,
+			onInput: n[4] ||= m((e) => N(0, e.target.value), ["stop"]),
+			onChange: n[5] ||= m(() => {}, ["stop"])
+		}, null, 40, v)), M.value ? (c(), o("p", y, u(M.value), 1)) : a("", !0)], 8, h));
+	}
+}, [["__scopeId", "data-v-28cc9011"]]);
+export { b as default };