@kernel4632/kima 0.0.0-stage → 0.6.0

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

@@ -0,0 +1,286 @@
+import { useRipple as e } from "../../utils/ripple.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import { useInputAttrs as n, useInputState as r } from "../../utils/input-state.js";
+/* empty css                                                                */
+import { computed as i, createElementBlock as a, createElementVNode as o, mergeProps as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, toDisplayString as f, unref as p, watch as m, withModifiers as h } from "vue";
+// src/components/form-completion/color-picker.ce.vue
+var g = { class: "kima-color-picker__editor" }, _ = [
+	"tabindex",
+	"aria-disabled",
+	"aria-readonly",
+	"aria-label",
+	"aria-valuetext"
+], v = [
+	"tabindex",
+	"aria-disabled",
+	"aria-readonly",
+	"aria-valuenow"
+], y = [
+	"tabindex",
+	"aria-disabled",
+	"aria-readonly",
+	"aria-valuenow"
+], b = { class: "kima-color-picker__inputs" }, x = [
+	"value",
+	"aria-label",
+	"disabled"
+], S = [
+	"value",
+	"name",
+	"aria-label",
+	"disabled",
+	"readonly",
+	"required"
+], C = /*#__PURE__*/ t(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "color-picker.ce",
+	props: {
+		modelValue: {
+			type: String,
+			default: "#61afef"
+		},
+		label: {
+			type: String,
+			default: "颜色"
+		},
+		name: String,
+		disabled: Boolean,
+		readonly: Boolean,
+		required: Boolean
+	},
+	emits: ["update:modelValue", "change"],
+	setup(t, { emit: C }) {
+		let w = t, T = C, E = d(null), D = d(null), O = d(null), { attrs: k, controlAttrs: A } = n();
+		function j(e, t = 0, n = 1) {
+			return Math.max(t, Math.min(n, e));
+		}
+		function M(e) {
+			let t = String(e || "").replace("#", "");
+			return t.length === 3 && (t = [...t].map((e) => e + e).join("")), /^(?:[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t) ? {
+				r: parseInt(t.slice(0, 2), 16),
+				g: parseInt(t.slice(2, 4), 16),
+				b: parseInt(t.slice(4, 6), 16),
+				a: t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1
+			} : null;
+		}
+		function N({ r: e, g: t, b: n, a: r = 1 }) {
+			e /= 255, t /= 255, n /= 255;
+			let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = 0;
+			return a && (o = i === e ? (t - n) / a % 6 : i === t ? (n - e) / a + 2 : (e - t) / a + 4, o *= 60, o < 0 && (o += 360)), {
+				h: o,
+				s: i ? a / i : 0,
+				v: i,
+				a: r
+			};
+		}
+		function P({ h: e, s: t, v: n, a: r = 1 }) {
+			let i = n * t, a = i * (1 - Math.abs(e / 60 % 2 - 1)), o = n - i, s = 0, c = 0, l = 0;
+			return e < 60 ? [s, c, l] = [
+				i,
+				a,
+				0
+			] : e < 120 ? [s, c, l] = [
+				a,
+				i,
+				0
+			] : e < 180 ? [s, c, l] = [
+				0,
+				i,
+				a
+			] : e < 240 ? [s, c, l] = [
+				0,
+				a,
+				i
+			] : e < 300 ? [s, c, l] = [
+				a,
+				0,
+				i
+			] : [s, c, l] = [
+				i,
+				0,
+				a
+			], {
+				r: Math.round((s + o) * 255),
+				g: Math.round((c + o) * 255),
+				b: Math.round((l + o) * 255),
+				a: r
+			};
+		}
+		function F(e, t = !1) {
+			return `#${[
+				e.r,
+				e.g,
+				e.b
+			].map((e) => Math.round(e).toString(16).padStart(2, "0")).join("")}${t ? Math.round(j(e.a) * 255).toString(16).padStart(2, "0") : ""}`;
+		}
+		let I = d(N(M(w.modelValue) || {
+			r: 97,
+			g: 175,
+			b: 239,
+			a: 1
+		})), L = d(F(P(I.value), I.value.a < 1)), { local: R, update: z } = r(w, T, E, (e) => M(e) ? F(M(e), M(e).a < 1) : "#61afef", B);
+		e(E);
+		function B(e) {
+			let t = M(e);
+			t && (I.value = N(t), L.value = F(t, t.a < 1), D.value?.setCustomValidity(""), O.value && (O.value.value = F(t).slice(0, 7)));
+		}
+		m(R, B);
+		function V(e, t = !0) {
+			if (w.disabled || w.readonly) return;
+			let n = M(e);
+			if (!n) {
+				D.value?.setCustomValidity("请输入六位 HEX 颜色");
+				return;
+			}
+			D.value?.setCustomValidity("");
+			let r = F(n, n.a < 1);
+			L.value = r, z(r, t);
+		}
+		function H(e, t = !0) {
+			if (w.disabled || w.readonly) return;
+			I.value = {
+				...I.value,
+				...e
+			};
+			let n = F(P(I.value), I.value.a < 1);
+			L.value = n, z(n, t);
+		}
+		function U(e) {
+			let t = e.currentTarget.getBoundingClientRect();
+			H({
+				s: j((e.clientX - t.left) / t.width),
+				v: j(1 - (e.clientY - t.top) / t.height)
+			}, !1);
+		}
+		function W(e) {
+			let t = e.currentTarget.getBoundingClientRect();
+			H({ h: j((e.clientY - t.top) / t.height, 0, 1) * 360 }, !1);
+		}
+		function G(e) {
+			let t = e.currentTarget.getBoundingClientRect();
+			H({ a: j((e.clientX - t.left) / t.width) }, !1);
+		}
+		function K(e, t, n) {
+			let r = e.key;
+			if (w.disabled || w.readonly || ![
+				"ArrowLeft",
+				"ArrowRight",
+				"ArrowUp",
+				"ArrowDown",
+				"Home",
+				"End"
+			].includes(r)) return;
+			e.preventDefault();
+			let i = r === "ArrowRight" || r === "ArrowUp" ? 1 : -1;
+			H({ [t]: r === "Home" ? 0 : r === "End" ? t === "h" ? 359 : 1 : j(I.value[t] + i * n, 0, t === "h" ? 359 : 1) });
+		}
+		function q(e) {
+			if (w.disabled || w.readonly || ![
+				"ArrowLeft",
+				"ArrowRight",
+				"ArrowUp",
+				"ArrowDown"
+			].includes(e.key)) return;
+			e.preventDefault();
+			let t = ["ArrowLeft", "ArrowRight"].includes(e.key) ? "s" : "v", n = ["ArrowRight", "ArrowUp"].includes(e.key) ? 1 : -1;
+			H({ [t]: j(I.value[t] + n * .01) });
+		}
+		function J(e, t) {
+			w.disabled || w.readonly || (e.currentTarget.setPointerCapture(e.pointerId), t(e));
+		}
+		function Y(e) {
+			let t = M(e.target.value);
+			t && V(F(t), !0);
+		}
+		let X = i(() => P(I.value)), Z = i(() => {
+			let { r: e, g: t, b: n } = X.value;
+			e /= 255, t /= 255, n /= 255;
+			let r = Math.max(e, t, n), i = Math.min(e, t, n), a = (r + i) / 2, o = r - i, s = o ? o / (1 - Math.abs(2 * a - 1)) : 0, c = 0;
+			return o && (c = r === e ? 60 * ((t - n) / o % 6) : r === t ? 60 * ((n - e) / o + 2) : 60 * ((e - t) / o + 4), c < 0 && (c += 360)), {
+				h: Math.round(c),
+				s: Math.round(s * 100),
+				l: Math.round(a * 100)
+			};
+		});
+		return (e, n) => (u(), a("div", {
+			ref_key: "root",
+			ref: E,
+			class: c(["kima-color-picker", p(k).class]),
+			style: l(p(k).style)
+		}, [
+			o("div", g, [o("div", {
+				class: "kima-color-picker__area",
+				role: "slider",
+				tabindex: t.disabled ? -1 : 0,
+				"aria-disabled": t.disabled,
+				"aria-readonly": t.readonly,
+				"aria-label": `${t.label}饱和度和明度`,
+				"aria-valuetext": `S ${Math.round(I.value.s * 100)}%, V ${Math.round(I.value.v * 100)}%`,
+				style: l({ background: `linear-gradient(to top,var(--kima-color-picker-black),var(--kima-color-transparent)),linear-gradient(to right,var(--kima-color-picker-white),hsl(${I.value.h} 100% 50%))` }),
+				onPointerdown: n[0] ||= (e) => J(e, U),
+				onPointermove: n[1] ||= (e) => e.buttons && U(e),
+				onKeydown: q
+			}, [o("span", { style: l({
+				left: `${I.value.s * 100}%`,
+				top: `${(1 - I.value.v) * 100}%`
+			}) }, null, 4)], 44, _), o("div", {
+				class: "kima-color-picker__hue",
+				role: "slider",
+				tabindex: t.disabled ? -1 : 0,
+				"aria-disabled": t.disabled,
+				"aria-readonly": t.readonly,
+				"aria-label": "色相",
+				"aria-valuemin": 0,
+				"aria-valuemax": 359,
+				"aria-valuenow": I.value.h,
+				onPointerdown: n[2] ||= (e) => J(e, W),
+				onPointermove: n[3] ||= (e) => e.buttons && W(e),
+				onKeydown: n[4] ||= (e) => K(e, "h", 1)
+			}, [o("span", { style: l({ top: `${I.value.h / 360 * 100}%` }) }, null, 4)], 40, v)]),
+			o("div", {
+				class: "kima-color-picker__alpha",
+				role: "slider",
+				tabindex: t.disabled ? -1 : 0,
+				"aria-disabled": t.disabled,
+				"aria-readonly": t.readonly,
+				"aria-label": "透明度",
+				"aria-valuemin": "0",
+				"aria-valuemax": "1",
+				"aria-valuenow": I.value.a,
+				style: l({ "--kima-alpha-color": `rgb(${X.value.r} ${X.value.g} ${X.value.b})` }),
+				onPointerdown: n[5] ||= (e) => J(e, G),
+				onPointermove: n[6] ||= (e) => e.buttons && G(e),
+				onKeydown: n[7] ||= (e) => K(e, "a", .01)
+			}, [o("span", { style: l({ left: `clamp(10px, ${I.value.a * 100}%, calc(100% - 10px))` }) }, null, 4)], 44, y),
+			o("div", b, [o("input", {
+				ref_key: "nativeColor",
+				ref: O,
+				class: "kima-color-picker__native",
+				type: "color",
+				value: F(X.value).slice(0, 7),
+				"aria-label": `${t.label}颜色选择器`,
+				disabled: t.disabled || t.readonly,
+				onInput: Y
+			}, null, 40, x), o("input", s({
+				ref_key: "hex",
+				ref: D
+			}, p(A), {
+				class: "kima-color-picker__hex",
+				type: "text",
+				value: L.value,
+				name: t.name,
+				"aria-label": p(A)["aria-label"] || t.label,
+				disabled: t.disabled,
+				readonly: t.readonly,
+				required: t.required,
+				pattern: "#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?",
+				maxlength: "9",
+				onInput: n[8] ||= h((e) => {
+					L.value = e.target.value, V(L.value, !1);
+				}, ["stop"]),
+				onChange: n[9] ||= h((e) => V(L.value, !0), ["stop"])
+			}), null, 16, S)]),
+			o("output", null, "RGB " + f(X.value.r) + ", " + f(X.value.g) + ", " + f(X.value.b) + " · HSL " + f(Z.value.h) + "°, " + f(Z.value.s) + "%, " + f(Z.value.l) + "%", 1)
+		], 6));
+	}
+}), [["__scopeId", "data-v-04812c30"]]);
+export { C as default };

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

@@ -0,0 +1,131 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import { normalizeDate as t } from "../../utils/local-date.js";
+/* empty css                                                              */
+import { Fragment as n, computed as r, createElementBlock as i, createElementVNode as a, nextTick as o, onBeforeUnmount as s, onMounted as c, openBlock as l, ref as u, renderList as d, watch as f } from "vue";
+// src/components/form-completion/date-field.ce.vue
+var p = ["aria-label", "aria-disabled"], m = [
+	"value",
+	"placeholder",
+	"aria-label",
+	"maxlength",
+	"disabled",
+	"readonly",
+	"onInput",
+	"onKeydown",
+	"onCompositionend"
+], h = [
+	"name",
+	"required",
+	"disabled",
+	"value",
+	"aria-label"
+], g = /*#__PURE__*/ e({
+	__name: "date-field.ce",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		name: String,
+		label: {
+			type: String,
+			default: "日期"
+		},
+		required: Boolean,
+		disabled: Boolean,
+		readonly: Boolean,
+		min: String,
+		max: String
+	},
+	emits: ["update:modelValue", "change"],
+	setup(e, { emit: g }) {
+		let _ = e, v = g, y = u([
+			"",
+			"",
+			""
+		]), b = u([]), x = u(null), S = u(!1);
+		function C(e) {
+			let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
+			return t ? t.slice(1) : [
+				"",
+				"",
+				""
+			];
+		}
+		function w() {
+			return y.value.every(Boolean);
+		}
+		function T(e) {
+			return !!(t(e) && (!_.min || e >= _.min) && (!_.max || e <= _.max));
+		}
+		function E() {
+			let e = y.value.some(Boolean);
+			x.value?.setCustomValidity(!e && !_.required || S.value ? "" : "请输入完整且在范围内的日期");
+		}
+		function D(e, n = !1) {
+			let r = t(e);
+			S.value = !!(r && (!_.min || r >= _.min) && (!_.max || r <= _.max)), S.value ? (y.value = C(r), v("update:modelValue", r), n && v("change", r)) : (v("update:modelValue", ""), n && v("change", "")), E();
+		}
+		f(() => _.modelValue, (e) => {
+			y.value = C(e), S.value = T(e), E();
+		}, { immediate: !0 });
+		function O(e, t) {
+			let n = e === 0 ? 4 : 2, r = e === 0 ? 9999 : e === 1 ? 12 : 31, i = t.target.value.replace(/\D/g, "").slice(0, n);
+			y.value[e] = i, t.target.value = i, i.length === n && Number(i) >= 1 && Number(i) <= r ? (e < 2 && o(() => b.value[e + 1]?.focus()), w() ? D(y.value.join("-"), !0) : (S.value = !1, E())) : (S.value = !1, E(), v("update:modelValue", ""));
+		}
+		function k(e, t) {
+			if (!(_.disabled || _.readonly || t.isComposing)) {
+				if (t.key === "ArrowUp" || t.key === "ArrowDown") {
+					t.preventDefault();
+					let n = b.value[e];
+					n.value = String(Math.max(1, Math.min(e === 0 ? 9999 : e === 1 ? 12 : 31, Number(n.value || 0) + (t.key === "ArrowUp" ? 1 : -1)))).padStart(e ? 2 : 4, "0"), O(e, { target: n });
+				} else t.key === "ArrowLeft" && t.target.selectionStart === 0 ? b.value[e - 1]?.focus() : t.key === "ArrowRight" && t.target.selectionStart === t.target.value.length && b.value[e + 1]?.focus();
+			}
+		}
+		let A, j, M;
+		function N(e) {
+			e.target === A && queueMicrotask(() => {
+				e.defaultPrevented || (y.value = C(M), S.value = T(M), E(), v("update:modelValue", M));
+			});
+		}
+		c(() => {
+			M = _.modelValue, A = x.value?.form, j = x.value?.ownerDocument, E(), j?.addEventListener("reset", N, !0);
+		}), s(() => j?.removeEventListener("reset", N, !0));
+		let P = r(() => y.value);
+		return (t, r) => (l(), i("div", {
+			class: "kima-date-field",
+			role: "group",
+			"aria-label": e.label,
+			"aria-disabled": e.disabled || void 0
+		}, [(l(!0), i(n, null, d(P.value, (t, n) => (l(), i("input", {
+			key: n,
+			ref_for: !0,
+			ref: (e) => b.value[n] = e,
+			class: "kima-date-field__segment",
+			type: "text",
+			value: t,
+			placeholder: n === 0 ? "YYYY" : n === 1 ? "MM" : "DD",
+			"aria-label": `${e.label} ${n === 0 ? "年" : n === 1 ? "月" : "日"}`,
+			inputmode: "numeric",
+			maxlength: n === 0 ? 4 : 2,
+			disabled: e.disabled,
+			readonly: e.readonly,
+			onInput: (e) => O(n, e),
+			onKeydown: (e) => k(n, e),
+			onCompositionend: (e) => O(n, e)
+		}, null, 40, m))), 128)), a("input", {
+			ref_key: "hidden",
+			ref: x,
+			class: "kima-date-field__native",
+			type: "text",
+			name: e.name,
+			required: e.required,
+			disabled: e.disabled,
+			value: S.value ? y.value.join("-") : "",
+			"aria-label": e.label,
+			tabindex: "-1",
+			"aria-hidden": "true"
+		}, null, 8, h)], 8, p));
+	}
+}, [["__scopeId", "data-v-7c8a7c79"]]);
+export { g as default };

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

@@ -0,0 +1,158 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "../core/button.ce.js";
+import { presenceTransition as n } from "../../utils/motion.js";
+/* empty css                                                                 */
+import { Fragment as r, TransitionGroup as i, computed as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, mergeProps as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+// src/components/form-completion/dynamic-input.ce.vue
+var v = ["aria-label"], y = { class: "kima-dynamic-input__actions" }, b = /*#__PURE__*/ e({
+	__name: "dynamic-input.ce",
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		create: {
+			type: Function,
+			default: () => ({})
+		},
+		disabled: Boolean,
+		min: {
+			type: Number,
+			default: 0
+		},
+		max: {
+			type: Number,
+			default: Infinity
+		},
+		label: {
+			type: String,
+			default: "字段列表"
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"add",
+		"remove",
+		"move"
+	],
+	setup(e, { expose: b, emit: x }) {
+		let S = e, C = x, w = 0, T = /* @__PURE__ */ new WeakMap();
+		function E(e) {
+			return !e || typeof e != "object" ? `row-${++w}` : (T.has(e) || T.set(e, e.id || `row-${++w}`), T.get(e));
+		}
+		let D = f(S.modelValue.map((e) => ({ ...e }))), O = a(() => S.disabled || D.value.length >= S.max);
+		function k(e, t, n) {
+			D.value = e, C("update:modelValue", e.map((e) => ({ ...e }))), C("change", e.map((e) => ({ ...e }))), t && C(t, n);
+		}
+		function A() {
+			if (O.value) return;
+			let e = {
+				...S.create(),
+				id: `row-${++w}`
+			};
+			k([...D.value, e], "add", {
+				row: e,
+				index: D.value.length
+			});
+		}
+		function j(e) {
+			if (S.disabled || D.value.length <= S.min) return;
+			let t = D.value[e];
+			k(D.value.filter((t, n) => n !== e), "remove", {
+				row: t,
+				index: e
+			});
+		}
+		function M(e, t) {
+			let n = e + t;
+			if (S.disabled || n < 0 || n >= D.value.length) return;
+			let r = [...D.value];
+			[r[e], r[n]] = [r[n], r[e]], k(r, "move", {
+				row: r[n],
+				from: e,
+				to: n
+			});
+		}
+		function N(e, t) {
+			let n = [...D.value];
+			n[e] = t, k(n);
+		}
+		function P() {
+			return D.value.every((e) => e && e.valid !== !1);
+		}
+		return b({
+			add: A,
+			remove: j,
+			move: M,
+			validate: P,
+			rows: D
+		}), (a, f) => (d(), o("div", {
+			class: "kima-dynamic-input",
+			role: "group",
+			"aria-label": e.label
+		}, [l(i, u({
+			tag: "div",
+			name: "kima-list"
+		}, g(n), { class: "kima-dynamic-input__rows" }), {
+			default: _(() => [(d(!0), o(r, null, p(D.value, (n, r) => (d(), o("div", {
+				key: E(n),
+				class: "kima-dynamic-input__row"
+			}, [m(a.$slots, "default", {
+				row: n,
+				index: r,
+				id: E(n),
+				update: (e) => N(r, e)
+			}, () => [s("output", null, h(JSON.stringify(n)), 1)], !0), s("div", y, [
+				l(t, {
+					variant: "text",
+					disabled: e.disabled || r === 0,
+					"aria-label": `${e.label}上移第${r + 1}项`,
+					onClick: (e) => M(r, -1)
+				}, {
+					default: _(() => [...f[0] ||= [c("上移", -1)]]),
+					_: 1
+				}, 8, [
+					"disabled",
+					"aria-label",
+					"onClick"
+				]),
+				l(t, {
+					variant: "text",
+					disabled: e.disabled || r === D.value.length - 1,
+					"aria-label": `${e.label}下移第${r + 1}项`,
+					onClick: (e) => M(r, 1)
+				}, {
+					default: _(() => [...f[1] ||= [c("下移", -1)]]),
+					_: 1
+				}, 8, [
+					"disabled",
+					"aria-label",
+					"onClick"
+				]),
+				l(t, {
+					variant: "text",
+					disabled: e.disabled || D.value.length <= e.min,
+					"aria-label": `移除第${r + 1}项`,
+					onClick: (e) => j(r)
+				}, {
+					default: _(() => [...f[2] ||= [c("移除", -1)]]),
+					_: 1
+				}, 8, [
+					"disabled",
+					"aria-label",
+					"onClick"
+				])
+			])]))), 128))]),
+			_: 3
+		}, 16), l(t, {
+			variant: "tonal",
+			disabled: O.value,
+			onClick: A
+		}, {
+			default: _(() => [...f[3] ||= [c("添加字段", -1)]]),
+			_: 1
+		}, 8, ["disabled"])], 8, v));
+	}
+}, [["__scopeId", "data-v-97d6f5bf"]]);
+export { b as default };