@kernel4632/kima 0.0.0-stage → 0.6.0

package/dist/vue/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,7 @@
+// \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+export { e as default };

package/dist/vue/components/advanced-input/calendar.ce.js

@@ -0,0 +1,216 @@
+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";
+import { civilDate as r, dateKey as i, formatDate as a, monthKey as o, normalizeDate as s, parseDate as c, shiftDay as l, shiftMonth as u, todayKey as d } from "../../utils/local-date.js";
+import { useContentMotion as f } from "../../utils/content-motion.js";
+/* empty css                                                            */
+import { Fragment as p, computed as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, nextTick as v, normalizeClass as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useId as T, watch as E, watchEffect as D, withModifiers as O } from "vue";
+// src/components/advanced-input/calendar.ce.vue
+var ee = ["aria-label"], te = { class: "kima-calendar__head" }, ne = ["disabled"], re = ["disabled"], k = {
+	role: "row",
+	class: "kima-calendar__row"
+}, A = ["aria-selected"], j = [
+	"data-date",
+	"aria-label",
+	"aria-current",
+	"disabled",
+	"tabindex",
+	"onFocus",
+	"onClick",
+	"onKeydown"
+], M = [
+	"name",
+	"value",
+	"required",
+	"disabled"
+], N = /*#__PURE__*/ t({
+	__name: "calendar.ce",
+	props: {
+		modelValue: {
+			type: String,
+			default: null
+		},
+		viewDate: String,
+		min: String,
+		max: String,
+		disabledDates: {
+			type: Array,
+			default: () => []
+		},
+		firstDay: {
+			type: Number,
+			default: 1
+		},
+		locale: {
+			type: String,
+			default: "zh-CN"
+		},
+		label: {
+			type: String,
+			default: "日历"
+		},
+		name: String,
+		required: Boolean,
+		disabled: Boolean,
+		rangeStart: String,
+		rangeEnd: String,
+		hideNavigation: Boolean,
+		rangeMode: Boolean
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:viewDate"
+	],
+	setup(t, { expose: N, emit: P }) {
+		let F = t, I = P, L = x(null), R = x(null), z = x(null), { local: B, update: V } = n(F, I, L, s);
+		e(L);
+		let H = `kima-calendar-${T()}`, U = x(d()), W = x(o(s(F.viewDate) || B.value || U.value)), G = x(B.value || U.value), K = m(() => (Math.floor(F.firstDay) % 7 + 7) % 7);
+		function q(e) {
+			return F.disabled || !!(s(F.min) && e < F.min || s(F.max) && e > F.max || F.disabledDates.includes(e));
+		}
+		let J = m(() => {
+			let e = (c(W.value).getDay() - K.value + 7) % 7;
+			return Array.from({ length: 42 }, (t, n) => {
+				let r = l(W.value, n - e);
+				return {
+					value: r,
+					day: Number(r.slice(-2)),
+					outside: r.slice(0, 7) !== W.value.slice(0, 7),
+					disabled: q(r)
+				};
+			});
+		}), ie = m(() => Array.from({ length: 6 }, (e, t) => J.value.slice(t * 7, t * 7 + 7)));
+		f(z, () => W.value);
+		let ae = m(() => a(W.value, F.locale, {
+			month: "long",
+			year: "numeric"
+		})), oe = m(() => Array.from({ length: 7 }, (e, t) => a(i(r(2023, 0, 1 + K.value + t)), F.locale, { weekday: "short" }))), Y = m(() => J.value.find((e) => e.value === G.value && !e.disabled)?.value || J.value.find((e) => !e.outside && !e.disabled)?.value || J.value.find((e) => !e.disabled)?.value);
+		E(() => F.viewDate, (e) => {
+			s(e) && (W.value = o(e));
+		}), E(() => F.modelValue, (e) => {
+			s(e) && (G.value = e, F.viewDate || (W.value = o(e)));
+		}), D(() => {
+			R.value?.setCustomValidity(B.value && q(B.value) ? "日期不可用" : "");
+		}, { flush: "post" });
+		function X(e) {
+			W.value = o(e), I("update:viewDate", W.value);
+		}
+		function Z(e) {
+			let t = u(W.value, e), n = l(u(t, 1), -1);
+			return !(F.min && n < F.min || F.max && t > F.max);
+		}
+		function Q(e) {
+			!F.disabled && Z(e) && X(u(W.value, e));
+		}
+		async function $(e, t = 1) {
+			F.min && e < F.min && (e = F.min), F.max && e > F.max && (e = F.max);
+			for (let n = 0; n < 3660 && q(e); n += 1) {
+				let n = l(e, t);
+				if (F.min && n < F.min || F.max && n > F.max) return;
+				e = n;
+			}
+			q(e) || (G.value = e, e.slice(0, 7) !== W.value.slice(0, 7) && X(e), await v(), L.value?.querySelector(`[data-date="${e}"]`)?.focus());
+		}
+		function se(e, t) {
+			if (e.isComposing) return;
+			let n = {
+				ArrowLeft: -1,
+				ArrowRight: 1,
+				ArrowUp: -7,
+				ArrowDown: 7
+			}, r;
+			if (e.key in n) r = l(t.value, n[e.key]);
+			else if (["PageUp", "PageDown"].includes(e.key)) r = u(t.value, (e.key === "PageUp" ? -1 : 1) * (e.shiftKey ? 12 : 1));
+			else if (["Home", "End"].includes(e.key)) {
+				let n = (c(t.value).getDay() - K.value + 7) % 7;
+				r = l(t.value, e.key === "Home" ? -n : 6 - n);
+			}
+			r && (e.preventDefault(), $(r, r < t.value ? -1 : 1));
+		}
+		function ce(e) {
+			e.disabled || (G.value = e.value, V(e.value));
+		}
+		return N({
+			focus: () => $(Y.value || W.value),
+			navigate: Q
+		}), (e, n) => (b(), g("section", {
+			ref_key: "root",
+			ref: L,
+			class: "kima-calendar",
+			"aria-label": t.label
+		}, [
+			_("header", te, [
+				t.hideNavigation ? h("", !0) : (b(), g("button", {
+					key: 0,
+					class: "kima-calendar__nav",
+					type: "button",
+					"aria-label": "上一月",
+					disabled: t.disabled || !Z(-1),
+					onClick: n[0] ||= (e) => Q(-1)
+				}, "‹", 8, ne)),
+				_("h2", {
+					id: H,
+					"aria-live": "polite"
+				}, C(ae.value), 1),
+				t.hideNavigation ? h("", !0) : (b(), g("button", {
+					key: 1,
+					class: "kima-calendar__nav",
+					type: "button",
+					"aria-label": "下一月",
+					disabled: t.disabled || !Z(1),
+					onClick: n[1] ||= (e) => Q(1)
+				}, "›", 8, re))
+			]),
+			_("div", {
+				ref_key: "grid",
+				ref: z,
+				role: "grid",
+				"aria-labelledby": H,
+				class: "kima-calendar__grid"
+			}, [_("div", k, [(b(!0), g(p, null, S(oe.value, (e, t) => (b(), g("span", {
+				key: t,
+				role: "columnheader"
+			}, C(e), 1))), 128))]), (b(!0), g(p, null, S(ie.value, (e, n) => (b(), g("div", {
+				key: n,
+				role: "row",
+				class: "kima-calendar__row"
+			}, [(b(!0), g(p, null, S(e, (e) => (b(), g("div", {
+				key: e.value,
+				role: "gridcell",
+				"aria-selected": !t.rangeMode && e.value === w(B) || e.value === t.rangeStart || e.value === t.rangeEnd || !!(t.rangeStart && t.rangeEnd && e.value >= t.rangeStart && e.value <= t.rangeEnd)
+			}, [_("button", {
+				type: "button",
+				"data-date": e.value,
+				"aria-label": w(a)(e.value, t.locale, { dateStyle: "full" }),
+				"aria-current": e.value === U.value ? "date" : void 0,
+				disabled: e.disabled,
+				tabindex: e.value === Y.value ? 0 : -1,
+				class: y(["kima-calendar__day", {
+					"is-outside": e.outside,
+					"is-today": e.value === U.value,
+					"is-selected": !t.rangeMode && e.value === w(B) || e.value === t.rangeStart || e.value === t.rangeEnd,
+					"is-range": t.rangeStart && t.rangeEnd && e.value >= t.rangeStart && e.value <= t.rangeEnd
+				}]),
+				onFocus: (t) => G.value = e.value,
+				onClick: (t) => ce(e),
+				onKeydown: (t) => se(t, e)
+			}, C(e.day), 43, j)], 8, A))), 128))]))), 128))], 512),
+			_("input", {
+				ref_key: "native",
+				ref: R,
+				class: "kima-calendar__native",
+				type: "text",
+				name: t.name,
+				value: w(B) || "",
+				required: t.required,
+				disabled: t.disabled,
+				tabindex: "-1",
+				"aria-hidden": "true",
+				onInput: n[2] ||= O(() => {}, ["stop"]),
+				onInvalid: n[3] ||= O((e) => $(Y.value || W.value), ["prevent"])
+			}, null, 40, M)
+		], 8, ee));
+	}
+}, [["__scopeId", "data-v-43a5d854"]]);
+export { N as default };

package/dist/vue/components/advanced-input/date-range-picker.ce.js

@@ -0,0 +1,224 @@
+import { useRipple as e } from "../../utils/ripple.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import n from "../core/button.ce.js";
+import { useInputState as r } from "../../utils/input-state.js";
+import { monthKey as i, normalizeDate as a, shiftDay as o, shiftMonth as s, todayKey as c } from "../../utils/local-date.js";
+import l from "./calendar.ce.js";
+/* empty css                                                                     */
+import { computed as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, openBlock as g, ref as _, toDisplayString as v, unref as y, watchEffect as b, withCtx as x, withModifiers as S } from "vue";
+// src/components/advanced-input/date-range-picker.ce.vue
+var C = ["aria-disabled"], w = { class: "kima-date-range-picker__fields" }, T = [
+	"aria-label",
+	"name",
+	"value",
+	"min",
+	"max",
+	"required",
+	"disabled"
+], E = [
+	"aria-label",
+	"name",
+	"value",
+	"min",
+	"max",
+	"required",
+	"disabled"
+], D = { class: "kima-date-range-picker__navigation" }, O = { class: "kima-date-range-picker__months" }, k = {
+	key: 0,
+	role: "alert"
+}, A = {
+	class: "kima-date-range-picker__status",
+	role: "status"
+}, j = /*#__PURE__*/ t({
+	__name: "date-range-picker.ce",
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => [null, null]
+		},
+		name: String,
+		startName: String,
+		endName: String,
+		startLabel: {
+			type: String,
+			default: "开始日期"
+		},
+		endLabel: {
+			type: String,
+			default: "结束日期"
+		},
+		min: String,
+		max: String,
+		disabledDates: {
+			type: Array,
+			default: () => []
+		},
+		required: Boolean,
+		disabled: Boolean,
+		locale: {
+			type: String,
+			default: "zh-CN"
+		},
+		firstDay: {
+			type: Number,
+			default: 1
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(t, { emit: j }) {
+		let M = t, N = j, P = _(null), F = _(null), I = _(null);
+		function L(e) {
+			return [a(e?.[0]), a(e?.[1])];
+		}
+		let { local: R, update: z } = r(M, N, P, L);
+		e(P);
+		let B = _(i(R.value[0] || c())), V = u(() => s(B.value, 1)), H = u(() => [M.startName || (M.name ? `${M.name}[start]` : void 0), M.endName || (M.name ? `${M.name}[end]` : void 0)]), U = u(() => {
+			let [e, t] = R.value;
+			return e && t && t < e ? "结束日期不能早于开始日期" : e && t && M.disabledDates.some((n) => n >= e && n <= t) ? "范围包含不可用日期" : e && M.disabledDates.includes(e) || t && M.disabledDates.includes(t) ? "日期不可用" : "";
+		});
+		b(() => {
+			F.value?.setCustomValidity(U.value), I.value?.setCustomValidity(U.value);
+		}, { flush: "post" });
+		function W(e) {
+			if (!a(e)) return;
+			let [t, n] = R.value;
+			z(!t || n ? [e, null] : e < t ? [e, t] : [t, e]);
+		}
+		function G(e, t) {
+			let n = [...R.value];
+			n[e] = a(t), z(n), e === 0 && n[0] && (B.value = i(n[0]));
+		}
+		function K(e) {
+			let t = s(B.value, e), n = o(s(t, 2), -1);
+			return !(M.min && n < M.min || M.max && t > M.max);
+		}
+		function q(e) {
+			K(e) && (B.value = s(B.value, e));
+		}
+		function J(e) {
+			B.value = s(e, -1);
+		}
+		return (e, r) => (g(), f("div", {
+			ref_key: "root",
+			ref: P,
+			class: "kima-date-range-picker",
+			role: "group",
+			"aria-label": "日期范围",
+			"aria-disabled": t.disabled || void 0
+		}, [
+			p("div", w, [
+				p("input", {
+					ref_key: "startInput",
+					ref: F,
+					class: "kima-date-range-picker__input",
+					type: "date",
+					"aria-label": t.startLabel,
+					name: y(R)[0] ? H.value[0] : void 0,
+					value: y(R)[0] || "",
+					min: t.min,
+					max: t.max,
+					required: t.required,
+					disabled: t.disabled,
+					onInput: r[0] ||= S((e) => G(0, e.target.value), ["stop"]),
+					onChange: r[1] ||= S(() => {}, ["stop"])
+				}, null, 40, T),
+				r[8] ||= p("span", { "aria-hidden": "true" }, "→", -1),
+				p("input", {
+					ref_key: "endInput",
+					ref: I,
+					class: "kima-date-range-picker__input",
+					type: "date",
+					"aria-label": t.endLabel,
+					name: y(R)[1] ? H.value[1] : void 0,
+					value: y(R)[1] || "",
+					min: y(R)[0] || t.min,
+					max: t.max,
+					required: t.required,
+					disabled: t.disabled,
+					onInput: r[2] ||= S((e) => G(1, e.target.value), ["stop"]),
+					onChange: r[3] ||= S(() => {}, ["stop"])
+				}, null, 40, E)
+			]),
+			p("div", D, [
+				h(n, {
+					variant: "text",
+					disabled: t.disabled || !K(-1),
+					onClick: r[4] ||= (e) => q(-1)
+				}, {
+					default: x(() => [...r[9] ||= [m("上一月", -1)]]),
+					_: 1
+				}, 8, ["disabled"]),
+				h(n, {
+					variant: "text",
+					disabled: t.disabled || !K(1),
+					onClick: r[5] ||= (e) => q(1)
+				}, {
+					default: x(() => [...r[10] ||= [m("下一月", -1)]]),
+					_: 1
+				}, 8, ["disabled"]),
+				h(n, {
+					variant: "text",
+					disabled: t.disabled || !y(R).some(Boolean),
+					onClick: r[6] ||= (e) => y(z)([null, null])
+				}, {
+					default: x(() => [...r[11] ||= [m("清空范围", -1)]]),
+					_: 1
+				}, 8, ["disabled"])
+			]),
+			p("div", O, [h(l, {
+				"view-date": B.value,
+				"model-value": null,
+				"range-start": y(R)[0],
+				"range-end": y(R)[1],
+				min: t.min,
+				max: t.max,
+				"disabled-dates": t.disabledDates,
+				disabled: t.disabled,
+				"first-day": t.firstDay,
+				locale: t.locale,
+				"range-mode": "",
+				"hide-navigation": "",
+				"onUpdate:modelValue": W,
+				"onUpdate:viewDate": r[7] ||= (e) => B.value = e
+			}, null, 8, [
+				"view-date",
+				"range-start",
+				"range-end",
+				"min",
+				"max",
+				"disabled-dates",
+				"disabled",
+				"first-day",
+				"locale"
+			]), h(l, {
+				"view-date": V.value,
+				"model-value": null,
+				"range-start": y(R)[0],
+				"range-end": y(R)[1],
+				min: t.min,
+				max: t.max,
+				"disabled-dates": t.disabledDates,
+				disabled: t.disabled,
+				"first-day": t.firstDay,
+				locale: t.locale,
+				"range-mode": "",
+				"hide-navigation": "",
+				"onUpdate:modelValue": W,
+				"onUpdate:viewDate": J
+			}, null, 8, [
+				"view-date",
+				"range-start",
+				"range-end",
+				"min",
+				"max",
+				"disabled-dates",
+				"disabled",
+				"first-day",
+				"locale"
+			])]),
+			U.value ? (g(), f("p", k, v(U.value), 1)) : d("", !0),
+			p("span", A, v(y(R)[0] && !y(R)[1] ? "请选择结束日期" : ""), 1)
+		], 8, C));
+	}
+}, [["__scopeId", "data-v-8bcd6e19"]]);
+export { j as default };

package/dist/vue/components/advanced-input/editable.ce.js

@@ -0,0 +1,160 @@
+import { useRipple as e } from "../../utils/ripple.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import n from "../core/button.ce.js";
+import { presenceTransition as r } from "../../utils/motion.js";
+import { useInputState as i } from "../../utils/input-state.js";
+/* empty css                                                            */
+import { Transition as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, mergeProps as f, nextTick as p, onBeforeUnmount as m, openBlock as h, ref as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, vShow as b, watch as x, withCtx as S, withDirectives as C } from "vue";
+// src/components/advanced-input/editable.ce.vue
+var w = ["aria-busy"], T = [
+	"disabled",
+	"aria-readonly",
+	"aria-label",
+	"inert"
+], E = ["inert", "aria-hidden"], D = { class: "kima-editable__actions" }, O = {
+	key: 0,
+	role: "alert"
+}, k = [
+	"name",
+	"value",
+	"disabled"
+], A = /*#__PURE__*/ t({
+	__name: "editable.ce",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		name: String,
+		label: {
+			type: String,
+			default: "编辑内容"
+		},
+		placeholder: String,
+		multiline: Boolean,
+		disabled: Boolean,
+		readonly: Boolean,
+		required: Boolean,
+		saveHandler: Function
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"save",
+		"cancel",
+		"error",
+		"update:editing"
+	],
+	setup(t, { expose: A, emit: j }) {
+		let M = t, N = j, P = g(null), F = g(null), I = g(null), L = g(!1), R = g(M.modelValue), z = g(!1), B = g(""), V = 0, { local: H, update: U } = i(M, N, P, (e) => String(e || ""), (e) => {
+			V += 1, z.value = !1, L.value = !1, R.value = e, B.value = "";
+		});
+		e(P), x(() => M.modelValue, (e) => {
+			L.value || (R.value = e || "");
+		});
+		async function W() {
+			M.disabled || M.readonly || z.value || (R.value = H.value, B.value = "", L.value = !0, N("update:editing", !0), await p(), L.value && (I.value?.focus(), I.value?.select?.()));
+		}
+		async function G() {
+			await p(), L.value || F.value?.focus();
+		}
+		async function K() {
+			if (z.value || M.disabled || M.readonly || !I.value?.reportValidity()) return;
+			let e = ++V, t = R.value;
+			z.value = !0, B.value = "";
+			try {
+				if (M.saveHandler && await M.saveHandler(t), e !== V) return;
+				U(t), N("save", t), L.value = !1, N("update:editing", !1), G();
+			} catch (t) {
+				if (e !== V) return;
+				B.value = t?.message || String(t), N("error", t), await p(), I.value?.focus();
+			} finally {
+				e === V && (z.value = !1);
+			}
+		}
+		function q() {
+			z.value || (V += 1, R.value = H.value, B.value = "", L.value = !1, N("cancel"), N("update:editing", !1), G());
+		}
+		function J(e) {
+			e.isComposing || e.keyCode === 229 || (e.key === "Escape" ? (e.preventDefault(), q()) : e.key === "Enter" && (!M.multiline || e.ctrlKey || e.metaKey) && (e.preventDefault(), K()));
+		}
+		return m(() => {
+			V += 1;
+		}), A({
+			edit: W,
+			save: K,
+			cancel: q,
+			focus: () => F.value?.focus()
+		}), (e, i) => (h(), c("div", {
+			ref_key: "root",
+			ref: P,
+			class: "kima-editable",
+			"aria-busy": z.value || void 0
+		}, [
+			d(a, f({ name: "kima-fade" }, y(r)), {
+				default: S(() => [C(l("button", {
+					ref_key: "display",
+					ref: F,
+					class: "kima-editable__display",
+					type: "button",
+					disabled: t.disabled,
+					"aria-readonly": t.readonly || void 0,
+					"aria-label": `${t.label}: ${y(H) || t.placeholder || ""}`,
+					inert: L.value,
+					onClick: W
+				}, v(y(H) || t.placeholder || "编辑"), 9, T), [[b, !L.value]])]),
+				_: 1
+			}, 16),
+			d(a, f({ name: "kima-content" }, y(r)), {
+				default: S(() => [C(l("div", {
+					class: "kima-editable__editor",
+					inert: !L.value,
+					"aria-hidden": !L.value || void 0
+				}, [
+					(h(), o(_(t.multiline ? "textarea" : "input"), {
+						ref_key: "editor",
+						ref: I,
+						value: R.value,
+						class: "kima-editable__input",
+						"aria-label": t.label,
+						required: t.required,
+						readonly: z.value,
+						disabled: t.disabled,
+						onInput: i[0] ||= (e) => R.value = e.target.value,
+						onKeydown: J
+					}, null, 40, [
+						"value",
+						"aria-label",
+						"required",
+						"readonly",
+						"disabled"
+					])),
+					l("div", D, [d(n, {
+						loading: z.value,
+						disabled: t.disabled,
+						onClick: K
+					}, {
+						default: S(() => [...i[1] ||= [u("保存", -1)]]),
+						_: 1
+					}, 8, ["loading", "disabled"]), d(n, {
+						variant: "text",
+						disabled: z.value || t.disabled,
+						onClick: q
+					}, {
+						default: S(() => [...i[2] ||= [u("取消", -1)]]),
+						_: 1
+					}, 8, ["disabled"])]),
+					B.value ? (h(), c("p", O, v(B.value), 1)) : s("", !0)
+				], 8, E), [[b, L.value]])]),
+				_: 1
+			}, 16),
+			l("input", {
+				type: "hidden",
+				name: t.name,
+				value: y(H),
+				disabled: t.disabled
+			}, null, 8, k)
+		], 8, w));
+	}
+}, [["__scopeId", "data-v-91cd5b33"]]);
+export { A as default };