@kernel4632/kima 0.0.0-stage → 0.6.0

package/dist/vue/components/data/image-preview.ce.js

@@ -0,0 +1,226 @@
+import { useNativeSlots as e } from "../../utils/native-slots.js";
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+import { presenceTransition as n } from "../../utils/motion.js";
+import r from "../core/icon-button.ce.js";
+import i from "../display/image.ce.js";
+/* empty css                                                                 */
+import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, getCurrentInstance as p, mergeProps as m, nextTick as h, normalizeStyle as g, onBeforeUnmount as _, openBlock as v, ref as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, useHost as w, watch as T, withCtx as E, withModifiers as ee } from "vue";
+import { ArrowLeft01Icon as te, ArrowRight01Icon as ne, Cancel01Icon as re, Refresh01Icon as ie, RotateRight01Icon as ae, ZoomInAreaIcon as oe, ZoomOutAreaIcon as se } from "@hugeicons/core-free-icons";
+// src/components/data/image-preview.ce.vue
+var ce = ["aria-label"], le = ["aria-label"], ue = { class: "kima-image-preview__toolbar" }, de = {
+	class: "kima-image-preview__count",
+	"aria-live": "polite"
+}, fe = { class: "kima-image-preview__actions" }, pe = { class: "kima-image-preview__stage" }, me = ["src", "alt"], D = {
+	key: 0,
+	class: "kima-image-preview__caption"
+}, O = "button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])", k = /*#__PURE__*/ t(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "image-preview.ce",
+	props: {
+		src: {
+			type: String,
+			default: ""
+		},
+		alt: {
+			type: String,
+			default: ""
+		},
+		items: {
+			type: Array,
+			default: () => []
+		},
+		open: Boolean,
+		index: {
+			type: Number,
+			default: 0
+		},
+		caption: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: [
+		"update:open",
+		"update:index",
+		"change",
+		"close"
+	],
+	setup(t, { emit: k }) {
+		let A = t, j = k, M = C(), N = p()?.ce ? w() : null, P = y(null), F = y(null), I = y(null), L = y(null);
+		e(P);
+		let R = y(A.open), z = null, B = null, V = y(Math.max(0, A.index)), H = y(1), U = y(0), W = s(() => A.items.length ? A.items : [{
+			src: A.src,
+			alt: A.alt,
+			caption: A.caption
+		}]), G = s(() => W.value[Math.min(V.value, Math.max(0, W.value.length - 1))] || {}), he = s(() => typeof G.value == "string" ? G.value : G.value.src || ""), K = s(() => typeof G.value == "string" ? "" : G.value.alt || A.alt), q = s(() => typeof G.value == "string" ? "" : G.value.caption || ""), ge = s(() => N ? {
+			...M,
+			id: void 0
+		} : M);
+		T(() => A.open, (e) => {
+			e && !R.value && J(), R.value = e, e && Y();
+		}), T(() => A.index, (e) => {
+			V.value = Math.max(0, Math.min(Number(e) || 0, W.value.length - 1));
+		}), T(R, (e) => {
+			e && (J(), Y());
+		});
+		function J() {
+			z = document.activeElement instanceof HTMLElement ? document.activeElement : L.value;
+		}
+		function Y() {
+			h(() => {
+				R.value && F.value?.focus();
+			});
+		}
+		function _e() {
+			let e = P.value?.ownerDocument?.body;
+			if (e && !B) {
+				B = [...e.children].filter((e) => e !== I.value).map((e) => ({
+					element: e,
+					inert: e.inert
+				}));
+				for (let { element: e } of B) e.inert = !0;
+			}
+		}
+		function X() {
+			if (B) {
+				for (let { element: e, inert: t } of B) e.isConnected && (e.inert = t);
+				B = null;
+			}
+		}
+		function ve(e) {
+			I.value = e, e.inert = !1, e.removeAttribute("aria-hidden");
+			let t = e.querySelector("[role=\"dialog\"]");
+			t && (t.inert = !1, t.removeAttribute("aria-hidden")), _e(), Y();
+		}
+		function Z(e) {
+			e.inert = !0, e.setAttribute("aria-hidden", "true");
+			let t = e.querySelector("[role=\"dialog\"]");
+			t && (t.inert = !0, t.setAttribute("aria-hidden", "true"));
+		}
+		function ye() {
+			R.value || (X(), z?.focus?.({ preventScroll: !0 }), z = null);
+		}
+		function Q(e = "button") {
+			R.value = !1, j("update:open", !1), j("close", e);
+		}
+		function $(e) {
+			W.value.length && (V.value = (e + W.value.length) % W.value.length, H.value = 1, U.value = 0, j("update:index", V.value), j("change", V.value, G.value));
+		}
+		function be() {
+			H.value = 1, U.value = 0;
+		}
+		function xe(e) {
+			if (R.value) {
+				if (e.key === "Escape") e.preventDefault(), Q("escape");
+				else if (e.key === "Tab") {
+					let t = [...F.value.querySelectorAll(O)].filter((e) => !e.closest("[inert]"));
+					if (!t.length) return;
+					let n = t.indexOf(document.activeElement), r = e.shiftKey ? n <= 0 ? t.length - 1 : n - 1 : n < 0 || n === t.length - 1 ? 0 : n + 1;
+					(n < 0 || n === 0 || n === t.length - 1) && e.preventDefault(), t[r].focus();
+				} else e.key === "ArrowRight" && W.value.length > 1 ? (e.preventDefault(), $(V.value + 1)) : e.key === "ArrowLeft" && W.value.length > 1 ? (e.preventDefault(), $(V.value - 1)) : e.key === "Home" && W.value.length > 1 ? (e.preventDefault(), $(0)) : e.key === "End" && W.value.length > 1 && (e.preventDefault(), $(W.value.length - 1));
+			}
+		}
+		return _(() => {
+			X(), R.value || z?.focus?.({ preventScroll: !0 }), z = null;
+		}), (e, s) => (v(), u("span", m({
+			ref_key: "root",
+			ref: P
+		}, ge.value, { class: "kima-image-preview" }), [d("button", {
+			ref_key: "trigger",
+			ref: L,
+			class: "kima-image-preview__trigger",
+			type: "button",
+			"aria-label": `预览${t.alt || "图片"}`,
+			onClick: s[0] ||= (e) => {
+				R.value = !0, j("update:open", !0);
+			}
+		}, [f(i, {
+			src: t.src,
+			alt: t.alt,
+			caption: t.caption
+		}, {
+			caption: E(() => [b(e.$slots, "caption", {}, void 0, !0)]),
+			_: 3
+		}, 8, [
+			"src",
+			"alt",
+			"caption"
+		])], 8, ce), (v(), c(a, { to: "body" }, [f(o, m({ name: "kima-popup" }, S(n), {
+			onBeforeEnter: ve,
+			onBeforeLeave: Z,
+			onAfterLeave: ye
+		}), {
+			default: E(() => [R.value ? (v(), u("div", {
+				key: 0,
+				ref_key: "overlay",
+				ref: I,
+				class: "kima-image-preview__overlay",
+				role: "presentation",
+				onClick: s[7] ||= ee((e) => Q("backdrop"), ["self"])
+			}, [d("div", {
+				ref_key: "dialog",
+				ref: F,
+				class: "kima-image-preview__dialog",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": K.value || "图片预览",
+				tabindex: "-1",
+				onKeydown: xe
+			}, [
+				d("header", ue, [d("span", de, x(W.value.length > 1 ? `${V.value + 1} / ${W.value.length}` : ""), 1), d("div", fe, [
+					f(r, {
+						icon: S(se),
+						label: "缩小",
+						disabled: H.value <= .5,
+						onClick: s[1] ||= (e) => H.value = Math.max(.5, H.value - .25)
+					}, null, 8, ["icon", "disabled"]),
+					f(r, {
+						icon: S(oe),
+						label: "放大",
+						disabled: H.value >= 3,
+						onClick: s[2] ||= (e) => H.value = Math.min(3, H.value + .25)
+					}, null, 8, ["icon", "disabled"]),
+					f(r, {
+						icon: S(ae),
+						label: "旋转",
+						onClick: s[3] ||= (e) => U.value = (U.value + 90) % 360
+					}, null, 8, ["icon"]),
+					f(r, {
+						icon: S(ie),
+						label: "重置视图",
+						onClick: be
+					}, null, 8, ["icon"]),
+					f(r, {
+						icon: S(re),
+						label: "关闭预览",
+						onClick: s[4] ||= (e) => Q()
+					}, null, 8, ["icon"])
+				])]),
+				d("div", pe, [
+					W.value.length > 1 ? (v(), c(r, {
+						key: 0,
+						class: "kima-image-preview__prev",
+						icon: S(te),
+						label: "上一张",
+						onClick: s[5] ||= (e) => $(V.value - 1)
+					}, null, 8, ["icon"])) : l("", !0),
+					d("img", {
+						class: "kima-image-preview__image",
+						src: he.value,
+						alt: K.value,
+						style: g({ transform: `scale(${H.value}) rotate(${U.value}deg)` })
+					}, null, 12, me),
+					W.value.length > 1 ? (v(), c(r, {
+						key: 1,
+						class: "kima-image-preview__next",
+						icon: S(ne),
+						label: "下一张",
+						onClick: s[6] ||= (e) => $(V.value + 1)
+					}, null, 8, ["icon"])) : l("", !0)
+				]),
+				q.value ? (v(), u("p", D, x(q.value), 1)) : l("", !0)
+			], 40, le)], 512)) : l("", !0)]),
+			_: 1
+		}, 16)]))], 16));
+	}
+}), [["__scopeId", "data-v-17e80131"]]);
+export { k as default };

package/dist/vue/components/data/infinite-scroll.ce.js

@@ -0,0 +1,126 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "../core/button.ce.js";
+import { presenceTransition as n } from "../../utils/motion.js";
+import r from "../display/spinner.ce.js";
+/* empty css                                                                   */
+import { Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, getCurrentInstance as f, mergeProps as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, useHost as S, watch as C, withCtx as w } from "vue";
+// src/components/data/infinite-scroll.ce.vue
+var T = ["aria-busy"], E = {
+	key: "error",
+	class: "kima-infinite-scroll__error",
+	role: "alert"
+}, D = { key: 0 }, O = {
+	key: "finished",
+	class: "kima-infinite-scroll__finished"
+}, k = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "infinite-scroll.ce",
+	props: {
+		disabled: Boolean,
+		finished: Boolean,
+		observe: {
+			type: Boolean,
+			default: !0
+		},
+		threshold: {
+			type: Number,
+			default: 160
+		},
+		loadMore: {
+			type: Function,
+			default: null
+		},
+		loadingLabel: {
+			type: String,
+			default: "正在加载更多"
+		},
+		finishLabel: {
+			type: String,
+			default: "没有更多内容"
+		},
+		errorLabel: {
+			type: String,
+			default: "加载失败"
+		},
+		retryLabel: {
+			type: String,
+			default: "重试加载"
+		},
+		buttonLabel: {
+			type: String,
+			default: "加载更多"
+		}
+	},
+	emits: [
+		"load",
+		"error",
+		"finish"
+	],
+	setup(e, { emit: k }) {
+		let A = e, j = k, M = x(), N = f()?.ce ? S() : null, P = _(null), F = _(null), I = _(!1), L = _(null), R = _(A.finished), z, B = a(() => typeof A.loadMore == "function"), V = a(() => N ? {
+			...M,
+			id: void 0
+		} : M);
+		async function H() {
+			if (!(I.value || A.disabled || R.value || !B.value)) {
+				I.value = !0, L.value = null, j("load");
+				try {
+					await A.loadMore() === !1 && (R.value = !0, j("finish"));
+				} catch (e) {
+					L.value = e instanceof Error ? e.message : String(e || A.errorLabel), j("error", e);
+				} finally {
+					I.value = !1;
+				}
+			}
+		}
+		function U() {
+			H();
+		}
+		function W() {
+			z?.disconnect();
+			let e = P.value?.ownerDocument?.defaultView;
+			A.observe && e?.IntersectionObserver && F.value && (z = new e.IntersectionObserver((e) => {
+				e.some((e) => e.isIntersecting) && H();
+			}, {
+				root: P.value,
+				rootMargin: `${Math.max(0, Number(A.threshold) || 0)}px`
+			}), z.observe(F.value));
+		}
+		return C(() => A.finished, (e) => {
+			R.value = e;
+		}), C(() => [A.observe, A.loadMore], W), h(W), m(() => z?.disconnect()), (a, f) => (g(), c("div", p({
+			ref_key: "root",
+			ref: P
+		}, V.value, {
+			class: "kima-infinite-scroll",
+			role: "region",
+			"aria-busy": I.value || void 0
+		}), [v(a.$slots, "default", {}, void 0, !0), l("div", {
+			ref_key: "sentinel",
+			ref: F,
+			class: "kima-infinite-scroll__status",
+			"aria-live": "polite"
+		}, [d(i, p({ name: "kima-fade" }, b(n)), {
+			default: w(() => [I.value ? (g(), o(r, {
+				key: "loading",
+				label: e.loadingLabel
+			}, null, 8, ["label"])) : L.value ? (g(), c("p", E, [u(y(e.errorLabel), 1), L.value === e.errorLabel ? s("", !0) : (g(), c("span", D, "：" + y(L.value), 1))])) : R.value ? (g(), c("p", O, y(e.finishLabel), 1)) : (g(), o(t, {
+				key: "idle",
+				variant: "tonal",
+				disabled: e.disabled || !B.value,
+				onClick: H
+			}, {
+				default: w(() => [u(y(e.buttonLabel), 1)]),
+				_: 1
+			}, 8, ["disabled"]))]),
+			_: 1
+		}, 16), L.value ? (g(), o(t, {
+			key: 0,
+			variant: "text",
+			onClick: U
+		}, {
+			default: w(() => [u(y(e.retryLabel), 1)]),
+			_: 1
+		})) : s("", !0)], 512)], 16, T));
+	}
+}), [["__scopeId", "data-v-5f784d27"]]);
+export { k as default };

package/dist/vue/components/data/long-text.ce.js

@@ -0,0 +1,70 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "../core/button.ce.js";
+import { useContentMotion as n } from "../../utils/content-motion.js";
+/* empty css                                                             */
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, getCurrentInstance 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 _, toDisplayString as v, unref as y, useAttrs as b, useHost as x, watch as S, withCtx as C } from "vue";
+var w = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "long-text.ce",
+	props: {
+		text: {
+			type: String,
+			default: ""
+		},
+		lines: {
+			type: Number,
+			default: 3
+		},
+		expanded: Boolean,
+		expandLabel: {
+			type: String,
+			default: "展开全文"
+		},
+		collapseLabel: {
+			type: String,
+			default: "收起全文"
+		}
+	},
+	emits: [
+		"update:expanded",
+		"expand",
+		"collapse"
+	],
+	setup(e, { emit: w }) {
+		let T = e, E = w, D = b(), O = l()?.ce ? x() : null, k = _(null), A = _(null), j = _(T.expanded);
+		n(A, () => j.value), S(() => T.expanded, (e) => {
+			j.value = e;
+		});
+		let M = _(!1), N, P = r(() => Math.max(1, Math.floor(Number(T.lines) || 1))), F = r(() => O ? {
+			...D,
+			id: void 0
+		} : D);
+		function I() {
+			if (!A.value) return;
+			let e = getComputedStyle(A.value), t = parseFloat(e.lineHeight) || parseFloat(e.fontSize) * 1.5;
+			M.value = A.value.scrollHeight > t * P.value + 1;
+		}
+		function L() {
+			j.value = !j.value, E("update:expanded", j.value), E(j.value ? "expand" : "collapse"), d(I);
+		}
+		return S([() => T.text, () => T.lines], () => d(I)), h(() => {
+			I(), typeof ResizeObserver < "u" && (N = new ResizeObserver(I), N.observe(A.value));
+		}), m(() => N?.disconnect()), (n, r) => (g(), o("div", u({
+			ref_key: "root",
+			ref: k
+		}, F.value, { class: "kima-long-text" }), [s("p", {
+			ref_key: "content",
+			ref: A,
+			class: f(["kima-long-text__content", { "kima-long-text__content--clamped": !j.value }]),
+			style: p({ "--kima-long-text-lines": P.value })
+		}, v(e.text || (y(O) ? y(O).textContent : "")), 7), M.value || j.value ? (g(), i(t, {
+			key: 0,
+			variant: "text",
+			"aria-expanded": j.value,
+			onClick: L
+		}, {
+			default: C(() => [c(v(j.value ? e.collapseLabel : e.expandLabel), 1)]),
+			_: 1
+		}, 8, ["aria-expanded"])) : a("", !0)], 16));
+	}
+}), [["__scopeId", "data-v-6bad870b"]]);
+export { w as default };

package/dist/vue/components/data/relative-time.ce.js

@@ -0,0 +1,77 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+/* empty css                                                                 */
+import { computed as t, createElementBlock as n, mergeProps as r, onBeforeUnmount as i, onMounted as a, openBlock as o, ref as s, toDisplayString as c, unref as l, useAttrs as u } from "vue";
+// src/components/data/relative-time.ce.vue
+var d = ["datetime"], f = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "relative-time.ce",
+	props: {
+		date: {
+			type: [
+				String,
+				Number,
+				Date
+			],
+			default: null
+		},
+		time: {
+			type: [
+				String,
+				Number,
+				Date
+			],
+			default: null
+		},
+		locale: {
+			type: [String, Array],
+			default: void 0
+		},
+		updateInterval: {
+			type: Number,
+			default: 6e4
+		},
+		numeric: {
+			type: String,
+			default: "always"
+		},
+		addSuffix: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let f = e, p = u(), m = s(Date.now()), h, g = t(() => f.time ?? f.date), _ = t(() => {
+			let e = g.value instanceof Date ? g.value.getTime() : new Date(g.value).getTime();
+			return Number.isFinite(e) ? e : NaN;
+		}), v = t(() => {
+			if (!Number.isFinite(_.value)) return "无效时间";
+			let e = Math.round((_.value - m.value) / 1e3), t = Math.abs(e), [n, r] = [
+				[31536e3, "year"],
+				[2592e3, "month"],
+				[604800, "week"],
+				[86400, "day"],
+				[3600, "hour"],
+				[60, "minute"],
+				[1, "second"]
+			].find(([e]) => t >= e) || [1, "second"], i = Math.round(e / n);
+			try {
+				return new Intl.RelativeTimeFormat(f.locale, {
+					numeric: f.numeric,
+					style: "long"
+				}).format(i, r);
+			} catch {
+				return `${i} ${r}${Math.abs(i) === 1 ? "" : "s"}${f.addSuffix, ""}`;
+			}
+		}), y = t(() => Number.isFinite(_.value) ? new Date(_.value).toISOString() : void 0);
+		return a(() => {
+			m.value = Date.now();
+			let e = Number(f.updateInterval);
+			e > 0 && Number.isFinite(e) && (h = setInterval(() => {
+				m.value = Date.now();
+			}, e));
+		}), i(() => clearInterval(h)), (e, t) => (o(), n("time", r(l(p), {
+			class: "kima-relative-time",
+			datetime: y.value
+		}), c(v.value), 17, d));
+	}
+}), [["__scopeId", "data-v-903b71ea"]]);
+export { f as default };

package/dist/vue/components/data/ring-progress.ce.js

@@ -0,0 +1,87 @@
+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, openBlock as c, toDisplayString as l, unref as u, useAttrs as d } from "vue";
+// src/components/data/ring-progress.ce.vue
+var f = [
+	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-busy"
+], p = {
+	class: "kima-ring-progress__svg",
+	viewBox: "0 0 100 100",
+	"aria-hidden": "true"
+}, m = ["r", "stroke-width"], h = [
+	"r",
+	"stroke-width",
+	"stroke-dasharray",
+	"stroke-dashoffset"
+], g = {
+	key: 0,
+	class: "kima-ring-progress__label"
+}, _ = {
+	key: 1,
+	class: "kima-ring-progress__label",
+	role: "status"
+}, v = /*#__PURE__*/ e(/* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+	__name: "ring-progress.ce",
+	props: {
+		value: {
+			type: Number,
+			default: 0
+		},
+		max: {
+			type: Number,
+			default: 100
+		},
+		size: {
+			type: [Number, String],
+			default: 96
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 8
+		},
+		indeterminate: Boolean,
+		label: {
+			type: String,
+			default: "进度"
+		},
+		showValue: Boolean
+	},
+	setup(e) {
+		let v = e, y = d(), b = !!a()?.ce, x = t(() => b ? {
+			...y,
+			id: void 0
+		} : y), S = t(() => Number.isFinite(v.max) && v.max > 0 ? v.max : 100), C = t(() => Number.isFinite(v.value) ? Math.max(0, Math.min(S.value, v.value)) : 0), w = t(() => C.value / S.value), T = t(() => Math.max(32, Number(v.size) || 96)), E = t(() => Math.max(2, Number(v.strokeWidth) || 8)), D = t(() => (T.value - E.value) / 2), O = t(() => 2 * Math.PI * D.value), k = t(() => O.value * (1 - w.value));
+		return (t, a) => (c(), r("div", o(x.value, {
+			class: "kima-ring-progress",
+			style: {
+				width: `${T.value}px`,
+				height: `${T.value}px`
+			},
+			role: "progressbar",
+			"aria-label": u(y)["aria-label"] || e.label,
+			"aria-valuemin": e.indeterminate ? void 0 : 0,
+			"aria-valuemax": e.indeterminate ? void 0 : S.value,
+			"aria-valuenow": e.indeterminate ? void 0 : C.value,
+			"aria-busy": e.indeterminate || void 0
+		}), [(c(), r("svg", p, [i("circle", {
+			class: "kima-ring-progress__track",
+			cx: "50",
+			cy: "50",
+			r: D.value,
+			"stroke-width": E.value
+		}, null, 8, m), i("circle", {
+			class: s(["kima-ring-progress__value", { "kima-ring-progress__value--indeterminate": e.indeterminate }]),
+			cx: "50",
+			cy: "50",
+			r: D.value,
+			"stroke-width": E.value,
+			"stroke-dasharray": O.value,
+			"stroke-dashoffset": e.indeterminate ? O.value * .7 : k.value
+		}, null, 10, h)])), e.showValue && !e.indeterminate ? (c(), r("span", g, l(Math.round(w.value * 100)) + "%", 1)) : e.indeterminate ? (c(), r("span", _, "加载中")) : n("", !0)], 16, f));
+	}
+}), [["__scopeId", "data-v-15220fc3"]]);
+export { v as default };