@kernel4632/kima 0.0.0-stage → 0.6.1

package/dist/vue/components/core/slider.ce.js

@@ -0,0 +1,116 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+/* empty css                                                          */
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, getCurrentInstance as a, mergeProps as o, normalizeClass as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, toDisplayString as f, useAttrs as p, watch as m, withModifiers as h } from "vue";
+// src/components/core/slider.ce.vue
+var g = {
+	key: 0,
+	class: "kima-slider__header"
+}, _ = { class: "kima-slider__value" }, v = [
+	"value",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"required",
+	"name",
+	"aria-label"
+], y = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "slider.ce",
+	props: {
+		modelValue: {
+			type: Number,
+			default: 0
+		},
+		min: {
+			type: Number,
+			default: 0
+		},
+		max: {
+			type: Number,
+			default: 100
+		},
+		step: {
+			type: Number,
+			default: 1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		showValue: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(e, { emit: y }) {
+		let b = e, x = y, S = p(), C = !!a()?.ce, w = t(() => C ? {
+			...S,
+			id: void 0
+		} : S), T = d(null), E, D, O = t(() => Number.isFinite(b.min) ? b.min : 0), k = t(() => Number.isFinite(b.max) ? Math.max(O.value, b.max) : O.value + 100);
+		function A(e) {
+			let t = Number(e);
+			return Number.isFinite(t) ? Math.max(O.value, Math.min(k.value, t)) : O.value;
+		}
+		let j = d(A(b.modelValue));
+		m([
+			() => b.modelValue,
+			() => b.min,
+			() => b.max
+		], () => {
+			j.value = A(b.modelValue);
+		});
+		let M = t(() => {
+			let e = k.value - O.value;
+			if (e <= 0) return "0%";
+			let t = (j.value - O.value) / e;
+			return `${Math.max(0, Math.min(1, t)) * 100}%`;
+		});
+		function N(e) {
+			j.value = A(e.target.value), x("update:modelValue", j.value);
+		}
+		function P(e) {
+			j.value = A(e.target.value), x("change", j.value);
+		}
+		function F(e) {
+			e.target === T.value.form && queueMicrotask(() => {
+				if (e.defaultPrevented || !T.value) return;
+				let t = A(E), n = j.value !== t;
+				j.value = t, T.value.value = String(t), n && x("update:modelValue", t);
+			});
+		}
+		return l(() => {
+			j.value = A(T.value.valueAsNumber), E = j.value, T.value.defaultValue = String(E), D = T.value.ownerDocument, D.addEventListener("reset", F, !0);
+		}), c(() => D.removeEventListener("reset", F, !0)), (t, a) => (u(), r("label", { class: s(["kima-slider", { "kima-slider--disabled": e.disabled }]) }, [e.showValue ? (u(), r("span", g, [i("output", _, f(j.value), 1)])) : n("", !0), i("input", o({
+			ref_key: "input",
+			ref: T
+		}, w.value, {
+			class: "kima-slider__input",
+			type: "range",
+			value: j.value,
+			min: O.value,
+			max: k.value,
+			step: e.step,
+			disabled: e.disabled,
+			required: e.required,
+			name: e.name,
+			"aria-label": e.label || void 0,
+			style: { "--kima-slider-fill": M.value },
+			onInput: h(N, ["stop"]),
+			onChange: h(P, ["stop"])
+		}), null, 16, v)], 2));
+	}
+}), [["__scopeId", "data-v-746583af"]]);
+export { y as default };

package/dist/vue/components/core/switch.ce.js

@@ -0,0 +1,100 @@
+import { useNativeSlots as e } from "../../utils/native-slots.js";
+import { useRipple as t } from "../../utils/ripple.js";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+import r from "./icon.ce.js";
+/* empty css                                                          */
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, mergeProps as l, normalizeClass as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, unref as g, useAttrs as _, watch as v, withModifiers as y } from "vue";
+import { Tick02Icon as b } from "@hugeicons/core-free-icons";
+// src/components/core/switch.ce.vue
+var x = [
+	"checked",
+	"disabled",
+	"required",
+	"name",
+	"value"
+], S = { class: "kima-switch__track" }, C = { class: "kima-switch__thumb" }, w = {
+	key: 0,
+	class: "kima-switch__label"
+}, T = /*#__PURE__*/ n(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "switch.ce",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: "on"
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(n, { emit: T }) {
+		let E = n, D = T, O = _(), k = m(null), A = m(null), j = m(null), { hasNativeSlot: M, isCustomElement: N } = e(k), P = i(() => N ? {
+			...O,
+			id: void 0
+		} : O), F = m(E.modelValue || O.checked === "" || O.checked === !0), I, L;
+		t(A), v(() => E.modelValue, (e) => {
+			F.value = e;
+		});
+		function R(e) {
+			F.value = e.target.checked, D("update:modelValue", F.value), D("change", F.value);
+		}
+		function z(e) {
+			e.target === j.value.form && queueMicrotask(() => {
+				if (e.defaultPrevented || !j.value) return;
+				let t = F.value !== I;
+				F.value = I, j.value.checked = I, t && D("update:modelValue", I);
+			});
+		}
+		return f(() => {
+			I = F.value, j.value.defaultChecked = I, L = j.value.ownerDocument, L.addEventListener("reset", z, !0);
+		}), d(() => L.removeEventListener("reset", z, !0)), (e, t) => (p(), o("label", {
+			ref_key: "root",
+			ref: k,
+			class: u(["kima-switch", {
+				"kima-switch--checked": F.value,
+				"kima-switch--disabled": n.disabled
+			}])
+		}, [
+			s("input", l({
+				ref_key: "input",
+				ref: j
+			}, P.value, {
+				class: "kima-switch__input",
+				type: "checkbox",
+				role: "switch",
+				checked: F.value,
+				disabled: n.disabled,
+				required: n.required,
+				name: n.name,
+				value: n.value,
+				onInput: t[0] ||= y(() => {}, ["stop"]),
+				onChange: y(R, ["stop"])
+			}), null, 16, x),
+			s("span", {
+				ref_key: "control",
+				ref: A,
+				class: "kima-switch__control",
+				"aria-hidden": "true"
+			}, [s("span", S, [s("span", C, [c(r, {
+				class: "kima-switch__check",
+				icon: g(b),
+				size: 16
+			}, null, 8, ["icon"])])])], 512),
+			e.$slots.default || g(M)("default") ? (p(), o("span", w, [h(e.$slots, "default", {}, void 0, !0)])) : a("", !0)
+		], 2));
+	}
+}), [["__scopeId", "data-v-2bcc172e"]]);
+export { T as default };

package/dist/vue/components/core/tabs.ce.js

@@ -0,0 +1,193 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import { presenceTransition as t } from "../../utils/motion.js";
+import { useContentMotion as n } from "../../utils/content-motion.js";
+/* empty css                                                        */
+import { Fragment as r, Transition as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, mergeProps as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, shallowRef as b, toDisplayString as x, unref as S, useId as C, vShow as w, watch as T, withCtx as E, withDirectives as D } from "vue";
+// src/components/core/tabs.ce.vue
+var O = ["aria-orientation"], k = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"aria-disabled",
+	"disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], A = [
+	"id",
+	"aria-labelledby",
+	"inert",
+	"aria-hidden",
+	"tabindex"
+], j = /*#__PURE__*/ e({
+	__name: "tabs.ce",
+	props: {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object,
+				Array
+			],
+			default: null
+		},
+		items: {
+			type: Array,
+			default: () => []
+		},
+		orientation: {
+			type: String,
+			default: "horizontal"
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(e, { emit: j }) {
+		let M = e, N = j, P = _([]), F = _(null), I = _(null), L = _({ opacity: 0 }), R = _(!1), z, B;
+		function V() {
+			let e = P.value[G.value];
+			if (!F.value || !e) {
+				L.value = { opacity: 0 };
+				return;
+			}
+			let t = W.value === "vertical";
+			L.value = {
+				opacity: 1,
+				width: t ? "var(--kima-tabs-indicator-height)" : `${Math.min(40, e.offsetWidth)}px`,
+				height: t ? "24px" : "var(--kima-tabs-indicator-height)",
+				transform: t ? `translate(${e.offsetLeft + e.offsetWidth}px, ${e.offsetTop + e.offsetHeight / 2}px) translate(-100%, -50%)` : `translate(${e.offsetLeft + e.offsetWidth / 2}px, ${e.offsetTop + e.offsetHeight}px) translate(-50%, -100%)`
+			};
+			for (let e of P.value) e && z?.observe(e);
+		}
+		h(() => {
+			let e = F.value.ownerDocument.defaultView;
+			e.ResizeObserver && (z = new e.ResizeObserver(V), z.observe(F.value)), V(), B = e.requestAnimationFrame(() => {
+				R.value = !0;
+			});
+		}), m(() => {
+			z?.disconnect(), F.value?.ownerDocument.defaultView.cancelAnimationFrame(B);
+		});
+		let H = b(M.modelValue), U = `kima-tabs-${C()}`, W = a(() => M.orientation === "vertical" ? "vertical" : "horizontal"), G = a(() => {
+			let e = M.items.findIndex((e) => Object.is(K(e), H.value) && !J(e));
+			return e >= 0 ? e : M.items.findIndex((e) => !J(e));
+		});
+		n(I, () => G.value, { opacity: !1 });
+		function K(e) {
+			return e && typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "value") ? e.value : e;
+		}
+		function q(e) {
+			return String(e && typeof e == "object" ? e.label ?? e.text ?? e.title ?? e.value ?? "" : e ?? "");
+		}
+		function J(e) {
+			return !!(e && typeof e == "object" && e.disabled);
+		}
+		function Y(e) {
+			if (J(e)) return;
+			let t = K(e);
+			Object.is(t, H.value) || (H.value = t, N("update:modelValue", t), N("change", t));
+		}
+		function X(e, t) {
+			let n = M.items.length;
+			if (!n) return -1;
+			let r = e;
+			for (let e = 0; e < n; e += 1) {
+				if (r >= 0 && r < n && !J(M.items[r])) return r;
+				r = (r + t + n) % n;
+			}
+			return -1;
+		}
+		function Z(e) {
+			if (e < 0) return;
+			let t = M.items[e];
+			d(() => P.value[e]?.focus()), Y(t);
+		}
+		function Q(e, t) {
+			if (t.isComposing) return;
+			let n = W.value === "horizontal", r = n ? t.key === "ArrowRight" : t.key === "ArrowDown", i = n ? t.key === "ArrowLeft" : t.key === "ArrowUp";
+			if (t.key === "Home") {
+				t.preventDefault(), Z(X(0, 1));
+				return;
+			}
+			if (t.key === "End") {
+				t.preventDefault(), Z(X(M.items.length - 1, -1));
+				return;
+			}
+			if (t.key === "Enter" || t.key === " ") {
+				t.preventDefault(), Y(M.items[e]);
+				return;
+			}
+			if (!r && !i) return;
+			t.preventDefault();
+			let a = r ? 1 : -1;
+			Z(X((e + a + M.items.length) % M.items.length, a));
+		}
+		return T(() => M.modelValue, (e) => {
+			H.value = e;
+		}), T(() => [
+			G.value,
+			W.value,
+			M.items
+		], () => d(V), {
+			deep: !0,
+			flush: "post"
+		}), (n, a) => (g(), s("div", { class: f(["kima-tabs", `kima-tabs--${W.value}`]) }, [c("div", {
+			ref_key: "tabList",
+			ref: F,
+			class: "kima-tabs__list",
+			role: "tablist",
+			"aria-orientation": W.value
+		}, [c("span", {
+			class: f(["kima-tabs__marker", { "kima-tabs__marker--ready": R.value }]),
+			style: p(L.value),
+			"aria-hidden": "true"
+		}, null, 6), (g(!0), s(r, null, v(e.items, (e, t) => (g(), s("button", {
+			id: `${U}-tab-${t}`,
+			key: K(e) ?? t,
+			ref_for: !0,
+			ref: (e) => {
+				P.value[t] = e;
+			},
+			class: "kima-tabs__tab",
+			type: "button",
+			role: "tab",
+			"aria-selected": t === G.value,
+			"aria-controls": `${U}-panel-${t}`,
+			"aria-disabled": J(e) || void 0,
+			disabled: J(e),
+			tabindex: t === G.value ? 0 : -1,
+			onClick: (t) => Y(e),
+			onKeydown: (e) => Q(t, e)
+		}, [y(n.$slots, "tab", {
+			item: e,
+			index: t,
+			selected: t === G.value
+		}, () => [l(x(q(e)), 1)], !0)], 40, k))), 128))], 8, O), c("div", {
+			ref_key: "panels",
+			ref: I,
+			class: "kima-tabs__panels"
+		}, [(g(!0), s(r, null, v(e.items, (e, r) => (g(), o(i, u({
+			key: K(e) ?? r,
+			name: "kima-content"
+		}, { ref_for: !0 }, S(t)), {
+			default: E(() => [D(c("section", {
+				id: `${U}-panel-${r}`,
+				class: "kima-tabs__panel",
+				role: "tabpanel",
+				"aria-labelledby": `${U}-tab-${r}`,
+				inert: r !== G.value,
+				"aria-hidden": r !== G.value || void 0,
+				tabindex: r === G.value ? 0 : -1
+			}, [y(n.$slots, "panel", {
+				item: e,
+				index: r,
+				value: K(e)
+			}, () => [y(n.$slots, "default", {
+				item: e,
+				index: r,
+				value: K(e)
+			}, void 0, !0)], !0)], 8, A), [[w, r === G.value]])]),
+			_: 2
+		}, 1040))), 128))], 512)], 2));
+	}
+}, [["__scopeId", "data-v-9535a533"]]);
+export { j as default };

package/dist/vue/components/core/text-field.ce.js

@@ -0,0 +1,194 @@
+import { useRipple as e } from "../../utils/ripple.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import n from "./icon.ce.js";
+import { collapseTransition as r, presenceTransition as i } from "../../utils/motion.js";
+/* empty css                                                              */
+import { Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, isRef as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, openBlock as y, ref as b, toDisplayString as x, unref as S, useAttrs as C, useId as w, vShow as T, watch as E, withCtx as D, withDirectives as O, withModifiers as k } from "vue";
+import { Cancel01Icon as A, ViewIcon as ee, ViewOffIcon as te } from "@hugeicons/core-free-icons";
+// src/components/core/text-field.ce.vue
+var ne = ["aria-disabled"], re = [
+	"name",
+	"type",
+	"value",
+	"required",
+	"disabled",
+	"readonly",
+	"placeholder",
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required"
+], ie = {
+	key: 0,
+	class: "kima-text-field__actions"
+}, ae = ["aria-label", "disabled"], oe = ["disabled"], se = ["disabled"], j = ["inert", "aria-hidden"], M = ["id", "role"], N = /*#__PURE__*/ t(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "text-field.ce",
+	props: {
+		label: {
+			type: String,
+			default: ""
+		},
+		hint: {
+			type: String,
+			default: ""
+		},
+		error: {
+			type: String,
+			default: ""
+		},
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		type: {
+			type: String,
+			default: "text"
+		},
+		name: String,
+		required: Boolean,
+		disabled: Boolean,
+		readonly: Boolean,
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		clearable: Boolean
+	},
+	emits: ["update:modelValue", "change"],
+	setup(t, { expose: N, emit: P }) {
+		let F = t, I = P, L = C(), R = w(), z = b(null), B = b(null);
+		e(B);
+		let V = b(!1), H = b(F.modelValue), U = !1, W, G, K = `kima-text-field-${R}-hint`, q = `kima-text-field-${R}-error`, J = o(() => F.error.length > 0), Y = o(() => F.clearable && H.value.length > 0 && !F.readonly), ce = o(() => F.type === "password" && V.value ? "text" : F.type);
+		function le() {
+			let e = [];
+			return F.error ? e.push(q) : F.hint && e.push(K), L["aria-describedby"] && e.push(L["aria-describedby"]), e.length > 0 ? e.join(" ") : void 0;
+		}
+		function ue() {
+			return L["aria-label"] || L.ariaLabel || F.label || F.placeholder || void 0;
+		}
+		function de() {
+			let e = { ...L };
+			return delete e.id, delete e.class, delete e.style, delete e["aria-describedby"], delete e["aria-label"], delete e.ariaLabel, e;
+		}
+		E(() => F.modelValue, (e) => {
+			e !== H.value && (H.value = e);
+		});
+		function X(e) {
+			U || e.isComposing || e.target.value === H.value || (H.value = e.target.value, I("update:modelValue", H.value));
+		}
+		function Z() {
+			I("change", H.value);
+		}
+		function Q() {
+			F.disabled || F.readonly || !H.value || (H.value = "", I("update:modelValue", H.value), I("change", H.value), m(() => z.value?.focus()));
+		}
+		function fe() {
+			z.value?.focus();
+		}
+		N({ focus: fe });
+		function $(e) {
+			e.target === z.value.form && queueMicrotask(() => {
+				if (e.defaultPrevented || !z.value) return;
+				U = !1;
+				let t = H.value !== W;
+				H.value = W, z.value.value = W, t && I("update:modelValue", W);
+			});
+		}
+		return v(() => {
+			W = H.value, z.value.defaultValue = W, G = z.value.ownerDocument, G.addEventListener("reset", $, !0);
+		}), _(() => G.removeEventListener("reset", $, !0)), (e, o) => (y(), l("div", {
+			class: h(["kima-text-field", [{
+				"kima-text-field--error": J.value,
+				"kima-text-field--disabled": t.disabled,
+				"kima-text-field--readonly": t.readonly
+			}, S(L).class]]),
+			style: g(S(L).style)
+		}, [u("div", {
+			ref_key: "control",
+			ref: B,
+			class: "kima-text-field__control",
+			"aria-disabled": t.disabled || void 0
+		}, [u("input", p({
+			ref_key: "input",
+			ref: z
+		}, de(), {
+			name: t.name,
+			type: ce.value,
+			value: H.value,
+			required: t.required,
+			disabled: t.disabled,
+			readonly: t.readonly,
+			placeholder: t.placeholder,
+			"aria-label": ue(),
+			"aria-describedby": le(),
+			"aria-invalid": J.value || void 0,
+			"aria-required": t.required || void 0,
+			onInput: k(X, ["stop"]),
+			onCompositionstart: o[0] ||= (e) => f(U) ? U.value = !0 : U = !0,
+			onCompositionend: o[1] ||= (e) => {
+				f(U) ? U.value = !1 : U = !1, X(e);
+			},
+			onChange: k(Z, ["stop"])
+		}), null, 16, re), t.type === "password" ? (y(), l("div", ie, [u("button", {
+			class: "kima-text-field__action",
+			type: "button",
+			"aria-label": V.value ? "隐藏密码" : "显示密码",
+			disabled: t.disabled,
+			onClick: o[2] ||= (e) => V.value = !V.value
+		}, [d(n, {
+			icon: V.value ? S(te) : S(ee),
+			size: 18,
+			color: "currentColor"
+		}, null, 8, ["icon"])], 8, ae), d(a, p({ name: "kima-fade" }, S(i)), {
+			default: D(() => [Y.value ? (y(), l("button", {
+				key: 0,
+				class: "kima-text-field__action",
+				type: "button",
+				"aria-label": "清除内容",
+				disabled: t.disabled,
+				onClick: Q
+			}, [d(n, {
+				icon: S(A),
+				size: 18,
+				color: "currentColor"
+			}, null, 8, ["icon"])], 8, oe)) : c("", !0)]),
+			_: 1
+		}, 16)])) : (y(), s(a, p({
+			key: 1,
+			name: "kima-fade"
+		}, S(i)), {
+			default: D(() => [Y.value ? (y(), l("button", {
+				key: 0,
+				class: "kima-text-field__action kima-text-field__action--clear",
+				type: "button",
+				"aria-label": "清除内容",
+				disabled: t.disabled,
+				onClick: Q
+			}, [d(n, {
+				icon: S(A),
+				size: 18,
+				color: "currentColor"
+			}, null, 8, ["icon"])], 8, se)) : c("", !0)]),
+			_: 1
+		}, 16))], 8, ne), d(a, p({ css: !1 }, {
+			...S(r),
+			...S(i)
+		}), {
+			default: D(() => [O(u("div", {
+				class: "kima-text-field__message-wrap",
+				inert: !(t.error || t.hint),
+				"aria-hidden": !(t.error || t.hint) || void 0
+			}, [d(a, p({ name: "kima-fade" }, S(i)), {
+				default: D(() => [t.error || t.hint ? (y(), l("p", {
+					key: `${t.error ? "error" : "hint"}:${t.error || t.hint}`,
+					class: h(["kima-text-field__message", { "kima-text-field__message--error": !!t.error }]),
+					id: t.error ? q : K,
+					role: t.error ? "alert" : void 0
+				}, x(t.error || t.hint), 11, M)) : c("", !0)]),
+				_: 1
+			}, 16)], 8, j), [[T, t.error || t.hint]])]),
+			_: 1
+		}, 16)], 6));
+	}
+}), [["__scopeId", "data-v-7334ab60"]]);
+export { N as default };