@kernel4632/kima 0.0.0-stage → 0.6.0

package/dist/vue/components/core/date-picker.ce.js

@@ -0,0 +1,433 @@
+import { useRipple as e } from "../../utils/ripple.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import n from "./icon.ce.js";
+/* empty css                                                               */
+import { Fragment as r, Transition as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, getCurrentInstance as ee, mergeProps as te, nextTick as u, normalizeClass as d, onBeforeUnmount as ne, onMounted as re, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, useAttrs as ie, useHost as ae, useId as oe, watch as _, withCtx as v, withModifiers as y } from "vue";
+import { ArrowLeft01Icon as se, ArrowRight01Icon as ce, Calendar01Icon as le, Cancel01Icon as ue } from "@hugeicons/core-free-icons";
+// src/components/core/date-picker.ce.vue
+var de = ["aria-disabled"], fe = [
+	"aria-expanded",
+	"aria-label",
+	"aria-required",
+	"disabled"
+], pe = [
+	"aria-label",
+	"title",
+	"disabled"
+], me = [
+	"name",
+	"value",
+	"required",
+	"disabled"
+], he = { class: "kima-date-picker__head" }, ge = [
+	"aria-label",
+	"title",
+	"disabled"
+], _e = [
+	"aria-label",
+	"title",
+	"disabled"
+], ve = {
+	class: "kima-date-picker__row",
+	role: "row"
+}, ye = ["aria-selected"], be = [
+	"id",
+	"data-date",
+	"aria-label",
+	"aria-current",
+	"disabled",
+	"tabindex",
+	"onClick"
+], b = /*#__PURE__*/ t(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "date-picker.ce",
+	props: {
+		modelValue: {
+			type: String,
+			default: null
+		},
+		min: {
+			type: String,
+			default: null
+		},
+		max: {
+			type: String,
+			default: null
+		},
+		open: Boolean,
+		label: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: "Select date"
+		},
+		name: String,
+		disabled: Boolean,
+		required: Boolean,
+		clearable: Boolean,
+		firstDay: {
+			type: Number,
+			default: 1
+		},
+		locale: {
+			type: String,
+			default: "en-GB"
+		},
+		weekdays: {
+			type: Array,
+			default: null
+		},
+		previousMonthLabel: {
+			type: String,
+			default: "Previous month"
+		},
+		nextMonthLabel: {
+			type: String,
+			default: "Next month"
+		},
+		clearLabel: {
+			type: String,
+			default: "Clear date"
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:open"
+	],
+	setup(t, { emit: b }) {
+		let x = ie(), xe = ee()?.ce ? ae() : null, S = t, C = b, w = p(null), T = p(null), E = p(null), D = p(null);
+		e(D);
+		let O = p(S.modelValue), k = p(!1), A = p((/* @__PURE__ */ new Date()).getFullYear()), j = p((/* @__PURE__ */ new Date()).getMonth()), M = p(""), N = p(""), P, F, I = `kima-date-picker-${oe()}`, Se = `${I}-trigger`, L = `${I}-grid`, R = `${I}-title`;
+		function z(e) {
+			return String(e).padStart(2, "0");
+		}
+		function B(e, t, n) {
+			return `${e}-${z(t + 1)}-${z(n)}`;
+		}
+		function V(e) {
+			let [t, n, r] = e.split("-").map(Number);
+			return {
+				year: t,
+				monthIndex: n - 1,
+				day: r
+			};
+		}
+		function H(e) {
+			let { year: t, monthIndex: n, day: r } = V(e);
+			return new Date(t, n, r);
+		}
+		function U() {
+			let e = /* @__PURE__ */ new Date();
+			return B(e.getFullYear(), e.getMonth(), e.getDate());
+		}
+		function W(e, t) {
+			let n = H(e);
+			return n.setDate(n.getDate() + t), B(n.getFullYear(), n.getMonth(), n.getDate());
+		}
+		function G(e, t) {
+			return new Date(e, t + 1, 0).getDate();
+		}
+		function Ce(e, t) {
+			let n = new Date(e, t, 1);
+			return B(n.getFullYear(), n.getMonth(), 1);
+		}
+		function we(e, t) {
+			let n = new Date(e, t + 1, 0);
+			return B(n.getFullYear(), n.getMonth(), n.getDate());
+		}
+		function K(e) {
+			return S.min && e < S.min ? S.min : S.max && e > S.max ? S.max : e;
+		}
+		function q(e) {
+			try {
+				return new Intl.DateTimeFormat(S.locale || "en-GB", e);
+			} catch {
+				return new Intl.DateTimeFormat("en-GB", e);
+			}
+		}
+		let Te = a(() => q({
+			year: "numeric",
+			month: "long"
+		})), Ee = a(() => q({ weekday: "short" })), J = a(() => q({
+			year: "numeric",
+			month: "long",
+			day: "numeric"
+		})), De = a(() => O.value ? J.value.format(H(O.value)) : S.placeholder), Y = a(() => Te.value.format(new Date(A.value, j.value, 1))), Oe = a(() => {
+			if (S.weekdays?.length === 7) return S.weekdays;
+			let e = [];
+			for (let t = 0; t < 7; t += 1) e.push(Ee.value.format(new Date(2024, 0, 7 + t)));
+			let t = S.firstDay === 0 ? 0 : 1;
+			return e.slice(t).concat(e.slice(0, t));
+		}), ke = a(() => {
+			let e = (new Date(A.value, j.value, 1).getDay() - (S.firstDay === 0 ? 0 : 1) + 7) % 7, t = [];
+			for (let n = 0; n < 42; n += 1) {
+				let r = new Date(A.value, j.value, 1 - e + n), i = B(r.getFullYear(), r.getMonth(), r.getDate());
+				t.push({
+					iso: i,
+					day: r.getDate(),
+					outside: r.getMonth() !== j.value,
+					disabled: S.min && i < S.min || S.max && i > S.max,
+					label: J.value.format(r)
+				});
+			}
+			return t;
+		}), Ae = a(() => Array.from({ length: 6 }, (e, t) => ke.value.slice(t * 7, t * 7 + 7))), je = a(() => !S.min || we(A.value, j.value - 1) >= S.min), Me = a(() => !S.max || Ce(A.value, j.value + 1) <= S.max);
+		function X(e) {
+			if (S.disabled) return;
+			N.value = U(), M.value = K(O.value || N.value);
+			let t = V(M.value);
+			A.value = t.year, j.value = t.monthIndex, k.value = !0, e && C("update:open", !0), u(Q);
+		}
+		function Z(e, t) {
+			k.value && (k.value = !1, e && C("update:open", !1), t && u(() => T.value?.focus()));
+		}
+		function Ne() {
+			k.value ? Z(!0, !0) : X(!0);
+		}
+		function Pe(e) {
+			e.inert = !1, e.removeAttribute("aria-hidden"), e.id = L, e.querySelectorAll("[data-date]").forEach((e) => {
+				e.id = `${L}-day-${e.dataset.date}`;
+			});
+		}
+		function Fe(e) {
+			e.inert = !0, e.setAttribute("aria-hidden", "true"), e.removeAttribute("id"), e.querySelectorAll("[id]").forEach((e) => e.removeAttribute("id"));
+		}
+		function Q() {
+			k.value && M.value && w.value?.querySelector(`#${L}-day-${M.value}`)?.focus();
+		}
+		function Ie(e) {
+			S.disabled || e === O.value || (O.value = e, C("update:modelValue", e), C("change", e));
+		}
+		function Le(e) {
+			e.disabled || (M.value = e.iso, Ie(e.iso), Z(!0, !0));
+		}
+		function Re() {
+			Ie(null), Z(!0, !0);
+		}
+		function ze(e) {
+			queueMicrotask(() => {
+				if (e.defaultPrevented) return;
+				let t = O.value !== F;
+				O.value = F, E.value && (E.value.value = F || ""), M.value = K(F || U()), t && C("update:modelValue", O.value);
+			});
+		}
+		function Be(e) {
+			e.preventDefault(), u(() => T.value?.focus());
+		}
+		function Ve(e) {
+			let t = K(e), n = V(t);
+			M.value = t, A.value = n.year, j.value = n.monthIndex, u(Q);
+		}
+		function He(e) {
+			let t = new Date(A.value, j.value + e, 1), n = t.getFullYear(), r = t.getMonth();
+			A.value = n, j.value = r;
+			let i = V(M.value);
+			Ve(K(B(n, r, Math.min(i.day, G(n, r)))));
+		}
+		function Ue(e) {
+			!S.disabled && [
+				"ArrowDown",
+				"ArrowUp",
+				"PageUp",
+				"PageDown"
+			].includes(e.key) && (e.preventDefault(), X(!0));
+		}
+		function We(e) {
+			if (e.isComposing) return;
+			if (e.key === "Escape") {
+				e.preventDefault(), Z(!0, !0);
+				return;
+			}
+			if (!e.target.closest(".kima-date-picker__day")) return;
+			let t = {
+				ArrowLeft: -1,
+				ArrowRight: 1,
+				ArrowUp: -7,
+				ArrowDown: 7
+			}, n = null;
+			if (e.key in t) n = W(M.value, t[e.key]);
+			else if (e.key === "PageUp" || e.key === "PageDown") {
+				let t = e.key === "PageUp" ? -1 : 1, r = new Date(A.value, j.value + t, 1), i = r.getFullYear(), a = r.getMonth(), o = V(M.value);
+				n = B(i, a, Math.min(o.day, G(i, a)));
+			} else if (e.key === "Home" || e.key === "End") {
+				let t = (H(M.value).getDay() - (S.firstDay === 0 ? 0 : 1) + 7) % 7;
+				n = e.key === "Home" ? W(M.value, -t) : W(M.value, 6 - t);
+			}
+			n && (e.preventDefault(), Ve(n));
+		}
+		function $(e) {
+			k.value && !e.composedPath().includes(w.value) && Z(!1, !1);
+		}
+		return _(() => S.modelValue, (e) => {
+			O.value = e;
+		}), _(() => S.open, (e) => {
+			e ? X(!1) : Z(!1, !1);
+		}, { immediate: !0 }), _(() => S.disabled, (e) => {
+			e && Z(!1, !1);
+		}), re(() => {
+			F = S.modelValue, N.value = U(), P = w.value.ownerDocument, P.addEventListener("pointerdown", $), P.addEventListener("focusin", $), E.value.form?.addEventListener("reset", ze);
+		}), ne(() => {
+			P.removeEventListener("pointerdown", $), P.removeEventListener("focusin", $);
+		}), (e, a) => (f(), s("div", te({
+			ref_key: "root",
+			ref: w
+		}, {
+			...g(x),
+			id: g(xe) ? void 0 : g(x).id
+		}, { class: ["kima-date-picker", {
+			"kima-date-picker--open": k.value,
+			"kima-date-picker--disabled": t.disabled
+		}] }), [
+			c("div", {
+				ref_key: "control",
+				ref: D,
+				class: "kima-date-picker__control",
+				"aria-disabled": t.disabled || void 0
+			}, [c("button", {
+				id: Se,
+				ref_key: "trigger",
+				ref: T,
+				class: "kima-date-picker__trigger",
+				type: "button",
+				role: "combobox",
+				"aria-haspopup": "grid",
+				"aria-expanded": k.value,
+				"aria-controls": L,
+				"aria-label": g(x)["aria-label"] || g(x).ariaLabel || t.label || t.placeholder,
+				"aria-required": t.required || void 0,
+				disabled: t.disabled,
+				onClick: Ne,
+				onKeydown: Ue
+			}, [c("span", { class: d(["kima-date-picker__trigger-label", { "kima-date-picker__trigger-label--placeholder": !O.value }]) }, h(De.value), 3), l(n, {
+				class: "kima-date-picker__icon",
+				icon: g(le),
+				size: 20,
+				"aria-hidden": "true"
+			}, null, 8, ["icon"])], 40, fe), l(i, { name: "kima-fade" }, {
+				default: v(() => [t.clearable && O.value ? (f(), s("button", {
+					key: 0,
+					class: "kima-date-picker__clear",
+					type: "button",
+					"aria-label": t.clearLabel,
+					title: t.clearLabel,
+					disabled: t.disabled,
+					onClick: y(Re, ["stop"])
+				}, [l(n, {
+					icon: g(ue),
+					size: 18,
+					"aria-hidden": "true"
+				}, null, 8, ["icon"])], 8, pe)) : o("", !0)]),
+				_: 1
+			})], 8, de),
+			c("input", {
+				ref_key: "nativeInput",
+				ref: E,
+				class: "kima-date-picker__native",
+				type: "text",
+				name: t.name,
+				value: O.value || "",
+				required: t.required,
+				disabled: t.disabled,
+				tabindex: "-1",
+				"aria-hidden": "true",
+				onInput: a[0] ||= y(() => {}, ["stop"]),
+				onChange: a[1] ||= y(() => {}, ["stop"]),
+				onInvalid: Be
+			}, null, 40, me),
+			l(i, {
+				name: "kima-popup",
+				onBeforeEnter: a[4] ||= (e) => {
+					e.inert = !1, e.removeAttribute("aria-hidden");
+				},
+				onBeforeLeave: a[5] ||= (e) => {
+					e.inert = !0, e.setAttribute("aria-hidden", "true");
+				}
+			}, {
+				default: v(() => [k.value ? (f(), s("div", {
+					key: 0,
+					class: "kima-date-picker__popup",
+					onKeydown: We
+				}, [c("div", he, [
+					c("button", {
+						class: "kima-date-picker__nav",
+						type: "button",
+						"aria-label": t.previousMonthLabel,
+						title: t.previousMonthLabel,
+						disabled: t.disabled || !je.value,
+						onClick: a[2] ||= (e) => He(-1)
+					}, [l(n, {
+						icon: g(se),
+						size: 18,
+						"aria-hidden": "true"
+					}, null, 8, ["icon"])], 8, ge),
+					c("span", {
+						id: R,
+						class: "kima-date-picker__month"
+					}, [l(i, {
+						name: "kima-fade",
+						mode: "out-in"
+					}, {
+						default: v(() => [(f(), s("span", { key: Y.value }, h(Y.value), 1))]),
+						_: 1
+					})]),
+					c("button", {
+						class: "kima-date-picker__nav",
+						type: "button",
+						"aria-label": t.nextMonthLabel,
+						title: t.nextMonthLabel,
+						disabled: t.disabled || !Me.value,
+						onClick: a[3] ||= (e) => He(1)
+					}, [l(n, {
+						icon: g(ce),
+						size: 18,
+						"aria-hidden": "true"
+					}, null, 8, ["icon"])], 8, _e)
+				]), l(i, {
+					name: "kima-fade",
+					onBeforeEnter: Pe,
+					onBeforeLeave: Fe
+				}, {
+					default: v(() => [(f(), s("div", {
+						id: L,
+						key: `${A.value}-${j.value}`,
+						class: "kima-date-picker__grid",
+						role: "grid",
+						"aria-labelledby": R
+					}, [c("div", ve, [(f(!0), s(r, null, m(Oe.value, (e, t) => (f(), s("span", {
+						key: t,
+						class: "kima-date-picker__weekday",
+						role: "columnheader"
+					}, h(e), 1))), 128))]), (f(!0), s(r, null, m(Ae.value, (e, t) => (f(), s("div", {
+						key: t,
+						class: "kima-date-picker__row",
+						role: "row"
+					}, [(f(!0), s(r, null, m(e, (e) => (f(), s("div", {
+						key: e.iso,
+						class: "kima-date-picker__cell",
+						role: "gridcell",
+						"aria-selected": e.iso === O.value
+					}, [c("button", {
+						id: `${L}-day-${e.iso}`,
+						"data-date": e.iso,
+						class: d(["kima-date-picker__day", {
+							"kima-date-picker__day--outside": e.outside,
+							"kima-date-picker__day--today": e.iso === N.value,
+							"kima-date-picker__day--selected": e.iso === O.value
+						}]),
+						type: "button",
+						"aria-label": e.label,
+						"aria-current": e.iso === N.value ? "date" : void 0,
+						disabled: e.disabled,
+						tabindex: e.iso === M.value ? 0 : -1,
+						onClick: (t) => Le(e)
+					}, h(e.day), 11, be)], 8, ye))), 128))]))), 128))]))]),
+					_: 1
+				})], 32)) : o("", !0)]),
+				_: 1
+			})
+		], 16));
+	}
+}), [["__scopeId", "data-v-f55122f3"]]);
+export { b as default };

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

@@ -0,0 +1,118 @@
+import { useNativeSlots as e } from "../../utils/native-slots.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import n from "./button.ce.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, toDisplayString as g, unref as _, useAttrs as v, useId as y, watch as b, withCtx as x, withModifiers as S } from "vue";
+import { Cancel01Icon as C } from "@hugeicons/core-free-icons";
+// src/components/core/dialog.ce.vue
+var w = ["aria-labelledby", "aria-describedby"], T = { class: "kima-dialog__positioner" }, E = {
+	key: 0,
+	class: "kima-dialog__header"
+}, D = { class: "kima-dialog__heading" }, O = {
+	key: 1,
+	class: "kima-dialog__header-slot"
+}, k = {
+	key: 2,
+	class: "kima-dialog__body"
+}, A = {
+	key: 3,
+	class: "kima-dialog__footer"
+}, j = /*#__PURE__*/ t(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "dialog.ce",
+	props: {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		description: {
+			type: String,
+			default: ""
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnBackdrop: {
+			type: Boolean,
+			default: !0
+		},
+		size: {
+			type: String,
+			default: "medium"
+		}
+	},
+	emits: ["update:open", "close"],
+	setup(t, { emit: j }) {
+		let M = t, N = j, P = v(), F = m(null), { hasNativeSlot: I, isCustomElement: L } = e(F), R = i(() => L ? {
+			...P,
+			id: void 0
+		} : P), z = m(M.open), B = i(() => [
+			"small",
+			"medium",
+			"large"
+		].includes(M.size) ? M.size : "medium"), V = y(), H = `kima-dialog-title-${V}`, U = `kima-dialog-description-${V}`;
+		function W(e = "close") {
+			z.value && (z.value = !1, F.value?.open && F.value.close(), N("update:open", !1), N("close", e));
+		}
+		function G() {
+			F.value && (z.value && !F.value.open ? F.value.showModal() : !z.value && F.value.open && F.value.close());
+		}
+		function K(e) {
+			e.preventDefault(), M.closeOnEscape && W("escape");
+		}
+		function q() {
+			F.value && !F.value.open && W("native");
+		}
+		function J(e) {
+			if (e.key !== "Tab" || !F.value) return;
+			let t = [...F.value.querySelectorAll("button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])")];
+			if (!t.length) return;
+			let n = t[0], r = t[t.length - 1];
+			e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
+		}
+		return b(() => M.open, (e) => {
+			z.value = e;
+		}), b(z, G, { flush: "post" }), f(G), d(() => {
+			F.value?.open && F.value.close();
+		}), (e, i) => (p(), o("dialog", l({
+			ref_key: "dialog",
+			ref: F
+		}, R.value, {
+			title: void 0,
+			class: "kima-dialog",
+			"aria-labelledby": _(P).title ? H : _(P)["aria-labelledby"],
+			"aria-describedby": [_(P)["aria-describedby"], t.description ? U : void 0].filter(Boolean).join(" ") || void 0,
+			onCancel: S(K, ["stop"]),
+			onClose: S(q, ["stop"]),
+			onKeydown: J,
+			onClick: i[1] ||= S((e) => t.closeOnBackdrop && W("backdrop"), ["self"])
+		}), [s("div", T, [s("section", { class: u(["kima-dialog__panel", `kima-dialog__panel--${B.value}`]) }, [
+			_(P).title || e.$slots.header || _(I)("header") ? (p(), o("header", E, [s("div", D, [_(P).title ? (p(), o("h2", {
+				key: 0,
+				id: H,
+				class: "kima-dialog__title"
+			}, g(_(P).title), 1)) : a("", !0), e.$slots.header || _(I)("header") ? (p(), o("div", O, [h(e.$slots, "header", {}, void 0, !0)])) : a("", !0)]), c(n, {
+				variant: "text",
+				class: "kima-dialog__close",
+				"aria-label": "关闭对话框",
+				onClick: i[0] ||= (e) => W("button")
+			}, {
+				default: x(() => [c(r, {
+					icon: _(C),
+					size: 20,
+					color: "currentColor"
+				}, null, 8, ["icon"])]),
+				_: 1
+			})])) : a("", !0),
+			t.description ? (p(), o("p", {
+				key: 1,
+				id: U,
+				class: "kima-dialog__description"
+			}, g(t.description), 1)) : a("", !0),
+			e.$slots.default || _(I)("default") ? (p(), o("div", k, [h(e.$slots, "default", {}, void 0, !0)])) : a("", !0),
+			e.$slots.footer || _(I)("footer") ? (p(), o("footer", A, [h(e.$slots, "footer", {}, void 0, !0)])) : a("", !0)
+		], 2)])], 16, w));
+	}
+}), [["__scopeId", "data-v-1932cdee"]]);
+export { j as default };

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

@@ -0,0 +1,49 @@
+import { useNativeSlots as e } from "../../utils/native-slots.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+/* empty css                                                           */
+import { Comment as n, Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, mergeProps as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useAttrs as m, useSlots as h } from "vue";
+// src/components/core/divider.ce.vue
+var g = ["aria-orientation"], _ = {
+	key: 0,
+	class: "kima-divider__label"
+}, v = {
+	key: 1,
+	class: "kima-divider__line",
+	"aria-hidden": "true"
+}, y = /*#__PURE__*/ t(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "divider.ce",
+	props: {
+		vertical: Boolean,
+		inset: Boolean,
+		label: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(t) {
+		let y = t, b = h(), x = m(), S = d(null), { hasNativeSlot: C, isCustomElement: w } = e(S), T = i(() => w ? {
+			...x,
+			id: void 0
+		} : x), E = i(() => b.default?.().some((e) => e.type === n ? !1 : typeof e.children != "string" || e.children.trim().length > 0) || C("default")), D = i(() => !!y.label.trim() || E.value);
+		return (e, n) => (u(), o("div", l({
+			ref_key: "root",
+			ref: S
+		}, T.value, {
+			class: ["kima-divider", {
+				"kima-divider--vertical": t.vertical,
+				"kima-divider--inset": t.inset,
+				"kima-divider--labeled": D.value
+			}],
+			role: "separator",
+			"aria-orientation": t.vertical ? "vertical" : void 0
+		}), [
+			n[0] ||= s("span", {
+				class: "kima-divider__line",
+				"aria-hidden": "true"
+			}, null, -1),
+			D.value ? (u(), o("span", _, [E.value ? f(e.$slots, "default", {}, void 0, !0, 0) : (u(), o(r, { key: 1 }, [c(p(t.label), 1)], 64))])) : a("", !0),
+			D.value ? (u(), o("span", v)) : a("", !0)
+		], 16, g));
+	}
+}), [["__scopeId", "data-v-5402a5d3"]]);
+export { y as default };