nicklabs-ui 1.0.80 → 1.0.82

package/dist/index.mjs

@@ -1,21 +1,21 @@
 import { Fragment as e, Teleport as t, Transition as n, TransitionGroup as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createStaticVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeProps as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, onUnmounted as b, openBlock as x, reactive as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useCssVars as O, vModelText as k, watch as A, withCtx as j, withDirectives as M, withModifiers as N } from "vue";
 //#region src/composables/sharedRouter.ts
 var P = null;
-function ee(e) {
+function F(e) {
 	P = e;
 }
-function F() {
+function I() {
 	return P;
 }
 //#endregion
 //#region src/components/NButton.vue?vue&type=script&setup=true&lang.ts
-var I = ["type", "disabled"], L = {
+var ee = ["type", "disabled"], te = {
 	key: 0,
 	class: "spinner",
 	viewBox: "0 0 24 24",
 	fill: "none",
 	xmlns: "http://www.w3.org/2000/svg"
-}, te = /* @__PURE__ */ p({
+}, L = /* @__PURE__ */ p({
 	__name: "NButton",
 	props: {
 		variant: { default: "none" },
@@ -63,7 +63,7 @@ var I = ["type", "disabled"], L = {
 			]),
 			type: e.type,
 			disabled: e.disabled || e.loading
-		}, [e.loading ? (x(), s("svg", L, [...n[0] ||= [c("circle", {
+		}, [e.loading ? (x(), s("svg", te, [...n[0] ||= [c("circle", {
 			cx: "12",
 			cy: "12",
 			r: "10",
@@ -72,13 +72,13 @@ var I = ["type", "disabled"], L = {
 			"stroke-linecap": "round",
 			"stroke-dasharray": "32",
 			"stroke-dashoffset": "12"
-		}, null, -1)]])) : o("", !0), T(t.$slots, "default", {}, void 0, !0)], 10, I));
+		}, null, -1)]])) : o("", !0), T(t.$slots, "default", {}, void 0, !0)], 10, ee));
 	}
 }), R = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, z = /* @__PURE__ */ R(te, [["__scopeId", "data-v-285afe14"]]), B = (e) => e.meta?.breadcrumb ?? "", V = C((e) => e);
+}, z = /* @__PURE__ */ R(L, [["__scopeId", "data-v-285afe14"]]), B = (e) => e.meta?.breadcrumb ?? "", V = C((e) => e);
 function H() {
 	function e(e) {
 		B = e;
@@ -87,7 +87,7 @@ function H() {
 		V.value = e;
 	}
 	let n = i(() => {
-		let e = F();
+		let e = I();
 		if (!e) return [];
 		let t = e.currentRoute.value.matched, n = [];
 		return t.forEach((e, r) => {
@@ -101,7 +101,7 @@ function H() {
 		}), n;
 	});
 	function r(e) {
-		F()?.push(e);
+		I()?.push(e);
 	}
 	function a() {
 		V.value = (e) => e;
@@ -132,7 +132,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 }), [["__scopeId", "data-v-46f3b63f"]]), G = {
 	key: 0,
 	class: "label"
-}, ie = ["disabled"], ae = [
+}, K = ["disabled"], ie = [
 	"type",
 	"placeholder",
 	"disabled",
@@ -140,10 +140,10 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 	"value",
 	"maxlength",
 	"autocomplete"
-], oe = ["disabled"], se = {
+], q = ["disabled"], ae = {
 	key: 2,
 	class: "actions"
-}, ce = {
+}, oe = {
 	key: 0,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "16",
@@ -154,7 +154,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 	"stroke-width": "2",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, le = {
+}, se = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "16",
@@ -165,7 +165,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 	"stroke-width": "2",
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
-}, ue = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, ce = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NInput",
 	props: {
 		modelValue: { default: "" },
@@ -292,7 +292,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				"stroke-width": "2",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [c("path", { d: "M5 12h14" })], -1)]], 8, ie)) : o("", !0),
+			}, [c("path", { d: "M5 12h14" })], -1)]], 8, K)) : o("", !0),
 			c("input", {
 				type: u.value,
 				placeholder: e.placeholder,
@@ -307,7 +307,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				onChange: i[1] ||= (e) => n("change", e),
 				onKeydown: h,
 				onCompositionend: _
-			}, null, 40, ae),
+			}, null, 40, ie),
 			a.value ? (x(), s("button", {
 				key: 1,
 				class: "tool-button",
@@ -324,18 +324,18 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				"stroke-width": "2",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [c("path", { d: "M5 12h14" }), c("path", { d: "M12 5v14" })], -1)]], 8, oe)) : o("", !0),
-			a.value ? o("", !0) : (x(), s("div", se, [r.value && !e.disabled ? (x(), s("button", {
+			}, [c("path", { d: "M5 12h14" }), c("path", { d: "M12 5v14" })], -1)]], 8, q)) : o("", !0),
+			a.value ? o("", !0) : (x(), s("div", ae, [r.value && !e.disabled ? (x(), s("button", {
 				key: 0,
 				type: "button",
 				onClick: T,
 				"aria-label": "Toggle password visibility"
-			}, [l.value ? (x(), s("svg", le, [...i[5] ||= [
+			}, [l.value ? (x(), s("svg", se, [...i[5] ||= [
 				c("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, null, -1),
 				c("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, null, -1),
 				c("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, null, -1),
 				c("path", { d: "m2 2 20 20" }, null, -1)
-			]])) : (x(), s("svg", ce, [...i[4] ||= [c("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, null, -1), c("circle", {
+			]])) : (x(), s("svg", oe, [...i[4] ||= [c("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, null, -1), c("circle", {
 				cx: "12",
 				cy: "12",
 				r: "3"
@@ -357,7 +357,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 			}, [c("path", { d: "M18 6 6 18" }), c("path", { d: "m6 6 12 12" })], -1)]])) : o("", !0)]))
 		], 2)], 2));
 	}
-}), [["__scopeId", "data-v-91e7a17e"]]), de = { class: "textarea" }, fe = ["textContent"], pe = [
+}), [["__scopeId", "data-v-91e7a17e"]]), le = { class: "textarea" }, ue = ["textContent"], de = [
 	"rows",
 	"placeholder",
 	"disabled",
@@ -366,10 +366,10 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 	"maxlength",
 	"autocomplete",
 	"wrap"
-], me = {
+], fe = {
 	key: 1,
 	class: "char-count"
-}, he = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, pe = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NTextarea",
 	props: {
 		modelValue: { default: "" },
@@ -419,12 +419,12 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 		};
 		return y(() => {
 			e.autofocus && r.value?.focus();
-		}), (t, i) => (x(), s("div", de, [
+		}), (t, i) => (x(), s("div", le, [
 			e.title ? (x(), s("label", {
 				key: 0,
 				class: "label",
 				textContent: E(e.title)
-			}, null, 8, fe)) : o("", !0),
+			}, null, 8, ue)) : o("", !0),
 			c("textarea", {
 				ref_key: "textareaRef",
 				ref: r,
@@ -443,17 +443,17 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				onChange: i[2] ||= (e) => n("change", e),
 				onKeydown: i[3] ||= (e) => n("keydown", e),
 				onPaste: i[4] ||= (e) => n("paste", e)
-			}, null, 40, pe),
-			e.showCount ? (x(), s("div", me, E(u.value), 1)) : o("", !0)
+			}, null, 40, de),
+			e.showCount ? (x(), s("div", fe, E(u.value), 1)) : o("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-03ad19c3"]]), ge = {
+}), [["__scopeId", "data-v-03ad19c3"]]), me = {
 	key: 0,
 	class: "label"
-}, _e = ["onClick"], ve = ["checked", "disabled"], ye = { class: "text" }, be = ["checked", "disabled"], K = {
+}, he = ["onClick"], ge = ["checked", "disabled"], _e = { class: "text" }, ve = ["checked", "disabled"], J = {
 	key: 0,
 	class: "text"
-}, xe = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, ye = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NCheckbox",
 	props: {
 		modelValue: { default: !1 },
@@ -517,7 +517,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 		};
 		return y(() => {
 			t.autofocus || a.value?.focus();
-		}), (n, r) => (x(), s("div", { class: g(["checkbox", { inline: t.inline }]) }, [t.title ? (x(), s("h3", ge, E(t.title), 1)) : o("", !0), c("div", { class: g(["group", [t.direction]]) }, [l.value ? (x(), s("label", {
+		}), (n, r) => (x(), s("div", { class: g(["checkbox", { inline: t.inline }]) }, [t.title ? (x(), s("h3", me, E(t.title), 1)) : o("", !0), c("div", { class: g(["group", [t.direction]]) }, [l.value ? (x(), s("label", {
 			key: 1,
 			class: "item",
 			onClick: r[0] ||= N((e) => h(), ["prevent"])
@@ -526,7 +526,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				type: "checkbox",
 				checked: !!t.modelValue,
 				disabled: t.disabled
-			}, null, 8, be),
+			}, null, 8, ve),
 			r[2] ||= c("span", { class: "icon" }, [c("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				width: "24",
@@ -538,7 +538,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
 			}, [c("path", { d: "M20 6 9 17l-5-5" })])], -1),
-			n.$slots.default || t.label ? (x(), s("span", K, [T(n.$slots, "default", {}, () => [d(E(t.label), 1)], !0)])) : o("", !0)
+			n.$slots.default || t.label ? (x(), s("span", J, [T(n.$slots, "default", {}, () => [d(E(t.label), 1)], !0)])) : o("", !0)
 		])) : (x(!0), s(e, { key: 0 }, w(t.options, (e, n) => (x(), s("label", {
 			key: `${t.formatLabel(e)}${n}`,
 			class: "item",
@@ -548,7 +548,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				type: "checkbox",
 				checked: m(t.formatValue(e)),
 				disabled: t.disabled
-			}, null, 8, ve),
+			}, null, 8, ge),
 			c("span", { class: g(["icon", { radio: !t.multiple }]) }, [...r[1] ||= [c("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
 				width: "24",
@@ -560,13 +560,13 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
 			}, [c("path", { d: "M20 6 9 17l-5-5" })], -1)]], 2),
-			c("span", ye, E(t.formatLabel(e)), 1)
-		], 8, _e))), 128))], 2)], 2));
+			c("span", _e, E(t.formatLabel(e)), 1)
+		], 8, he))), 128))], 2)], 2));
 	}
-}), [["__scopeId", "data-v-1f6a325a"]]), Se = { class: "select" }, q = {
+}), [["__scopeId", "data-v-1f6a325a"]]), be = { class: "select" }, Y = {
 	key: 0,
 	class: "label"
-}, J = { class: "select-chips-container" }, Y = ["textContent"], X = ["onClick"], Z = {
+}, X = { class: "select-chips-container" }, xe = ["textContent"], Se = ["onClick"], Z = {
 	key: 0,
 	class: "search-box"
 }, Ce = { class: "options" }, we = ["onClick"], Te = {
@@ -664,7 +664,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 			let e = Object.keys(p.value), n = e.length;
 			return n === 0 ? "" : t.multiple ? `已選 ${n} 項` : t.formatLabel(p.value[e[0]]) ?? "";
 		});
-		return (n, r) => (x(), s("div", Se, [t.title ? (x(), s("label", q, E(t.title), 1)) : o("", !0), c("div", {
+		return (n, r) => (x(), s("div", be, [t.title ? (x(), s("label", Y, E(t.title), 1)) : o("", !0), c("div", {
 			ref_key: "selectGroupRef",
 			ref: d,
 			class: g(["group", {
@@ -675,11 +675,11 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 			class: g(["trigger", { disabled: t.disabled }]),
 			onClick: _
 		}, [
-			c("div", J, [!m.value || !t.multiple || t.multiple && t.multipleDisplay === "count" ? (x(), s("span", {
+			c("div", X, [!m.value || !t.multiple || t.multiple && t.multipleDisplay === "count" ? (x(), s("span", {
 				key: 0,
 				class: g(["trigger-text", { placeholder: !m.value }]),
 				textContent: E(m.value ? j.value : t.placeholder)
-			}, null, 10, Y)) : o("", !0), t.multiple && t.multipleDisplay === "tags" ? (x(!0), s(e, { key: 1 }, w(p.value, (e, n) => (x(), s("div", {
+			}, null, 10, xe)) : o("", !0), t.multiple && t.multipleDisplay === "tags" ? (x(!0), s(e, { key: 1 }, w(p.value, (e, n) => (x(), s("div", {
 				key: `${t.formatLabel(e)}${n}`,
 				class: "select-chip"
 			}, [c("span", null, E(t.formatLabel(e)), 1), c("span", {
@@ -695,7 +695,7 @@ var U = { class: "breadcrumbs" }, W = ["onClick"], ne = {
 				"stroke-width": "2",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			}, [c("path", { d: "M18 6 6 18" }), c("path", { d: "m6 6 12 12" })], -1)]], 8, X)]))), 128)) : o("", !0)]),
+			}, [c("path", { d: "M18 6 6 18" }), c("path", { d: "m6 6 12 12" })], -1)]], 8, Se)]))), 128)) : o("", !0)]),
 			t.clearable && m.value && !t.disabled ? (x(), s("button", {
 				key: 0,
 				class: "clear-btn",
@@ -1899,7 +1899,7 @@ var an = { class: "hero-section-container" }, on = { class: "hero-section" }, sn
 			}, l({ _: 2 }, [
 				e.batchDeletable ? {
 					name: "batch",
-					fn: j(() => [f(xe, {
+					fn: j(() => [f(ye, {
 						"model-value": m.value,
 						"onUpdate:modelValue": r[4] ||= () => g()
 					}, null, 8, ["model-value"])]),
@@ -1907,7 +1907,7 @@ var an = { class: "hero-section-container" }, on = { class: "hero-section" }, sn
 				} : void 0,
 				t.$slots.item ? {
 					name: "item",
-					fn: j(({ item: n, column: r, index: i }) => [e.batchDeletable ? (x(), s("td", ir, [f(xe, {
+					fn: j(({ item: n, column: r, index: i }) => [e.batchDeletable ? (x(), s("td", ir, [f(ye, {
 						onClick: N((e) => h(n), ["stop"]),
 						"model-value": p(n.id)
 					}, null, 8, ["onClick", "model-value"])])) : o("", !0), T(t.$slots, "item", {
@@ -2324,8 +2324,8 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 			"四",
 			"五",
 			"六"
-		], P = /* @__PURE__ */ new Date(), ee = P.getFullYear(), F = P.getMonth(), I = P.getDate();
-		function L(e, t) {
+		], P = /* @__PURE__ */ new Date(), F = P.getFullYear(), I = P.getMonth(), ee = P.getDate();
+		function te(e, t) {
 			let n = new Date(e, t, 1).getDay(), r = new Date(e, t + 1, 0).getDate(), i = new Date(e, t, 0).getDate(), a = [];
 			for (let r = n - 1; r >= 0; r--) {
 				let n = t === 0 ? 11 : t - 1, o = t === 0 ? e - 1 : e;
@@ -2351,30 +2351,30 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 			});
 			return a;
 		}
-		function te(e, t) {
+		function L(e, t) {
 			return e.year === t.year ? e.month === t.month ? e.day - t.day : e.month - t.month : e.year - t.year;
 		}
 		function R(e) {
 			return String(e).padStart(2, "0");
 		}
-		let B = C("date"), V = C(/* @__PURE__ */ new Date()), H = C(null), U = C(0), W = C(0), ne = null, re = null, G = i(() => V.value.getFullYear()), ie = i(() => V.value.getMonth()), ae = C(Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 12) * 12), oe = i(() => {
+		let B = C("date"), V = C(/* @__PURE__ */ new Date()), H = C(null), U = C(0), W = C(0), ne = null, re = null, G = i(() => V.value.getFullYear()), K = i(() => V.value.getMonth()), ie = C(Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 12) * 12), q = i(() => {
 			let e = [];
-			for (let t = 0; t < 12; t++) e.push(ae.value + t);
+			for (let t = 0; t < 12; t++) e.push(ie.value + t);
 			return e;
 		});
 		A(G, (e) => {
-			ae.value = Math.floor(e / 12) * 12;
+			ie.value = Math.floor(e / 12) * 12;
 		}, { immediate: !0 }), A(() => t.modelValue, (e) => {
 			if (!e) return;
 			let t = p(String(e));
 			t && (V.value = new Date(t.year, t.month, 1));
 		}, { immediate: !0 });
-		let se = i(() => L(G.value, ie.value)), ce = i(() => {
+		let ae = i(() => te(G.value, K.value)), oe = i(() => {
 			if (!t.modelValue) return "";
 			let e = p(String(t.modelValue));
 			return e ? u(e.year, e.month, e.day, e.hour, e.min) : "";
-		}), le = i(() => t.range ? t.start && t.end ? `${t.start} → ${t.end}` : t.start ? `${t.start} → ...` : "" : ce.value);
-		function ue() {
+		}), se = i(() => t.range ? t.start && t.end ? `${t.start} → ${t.end}` : t.start ? `${t.start} → ...` : "" : oe.value);
+		function ce() {
 			let e = p(String(t.modelValue));
 			e ? (V.value = new Date(e.year, e.month, 1), U.value = e.hour, W.value = e.min, H.value = _.value ? {
 				year: e.year,
@@ -2383,55 +2383,55 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 				isCurrentMonth: !0
 			} : null) : (U.value = 0, W.value = 0, H.value = null), B.value = "date";
 		}
-		function de(e) {
+		function le(e) {
 			if (!t.modelValue) return !1;
 			let n = p(String(t.modelValue));
 			return n ? n.year === e.year && n.month === e.month && n.day === e.day : !1;
 		}
-		function fe(e) {
-			return ee === e.year && F === e.month && I === e.day;
+		function ue(e) {
+			return F === e.year && I === e.month && ee === e.day;
 		}
-		function pe(e) {
-			return _.value ? H.value !== null && H.value.year === e.year && H.value.month === e.month && H.value.day === e.day : de(e);
+		function de(e) {
+			return _.value ? H.value !== null && H.value.year === e.year && H.value.month === e.month && H.value.day === e.day : le(e);
 		}
-		function me(e) {
+		function fe(e) {
 			let t = u(e.year, e.month, e.day, U.value, W.value);
 			l("update:modelValue", t), l("change", t);
 		}
-		function he(e) {
-			if (_.value) H.value = { ...e }, V.value = new Date(e.year, e.month, 1), me(e);
+		function pe(e) {
+			if (_.value) H.value = { ...e }, V.value = new Date(e.year, e.month, 1), fe(e);
 			else {
 				let t = u(e.year, e.month, e.day, 0, 0);
 				l("update:modelValue", t), l("change", t), Be();
 			}
 		}
-		function ge(e) {
-			V.value = new Date(e, ie.value, 1), B.value = "date";
+		function me(e) {
+			V.value = new Date(e, K.value, 1), B.value = "date";
 		}
-		function _e(e) {
-			V.value = new Date(G.value, ie.value + e, 1);
+		function he(e) {
+			V.value = new Date(G.value, K.value + e, 1);
 		}
-		function ve(e) {
-			B.value === "year" ? ae.value += e * 12 : V.value = new Date(G.value + e, ie.value, 1);
+		function ge(e) {
+			B.value === "year" ? ie.value += e * 12 : V.value = new Date(G.value + e, K.value, 1);
 		}
-		function ye(e, t) {
-			e === "H" ? U.value = Math.max(0, Math.min(23, U.value + t)) : W.value = Math.max(0, Math.min(59, W.value + t)), H.value && me(H.value);
+		function _e(e, t) {
+			e === "H" ? U.value = Math.max(0, Math.min(23, U.value + t)) : W.value = Math.max(0, Math.min(59, W.value + t)), H.value && fe(H.value);
 		}
-		function be(e, t) {
-			ye(e, t), ne = setTimeout(() => {
-				re = setInterval(() => ye(e, t), 100);
+		function ve(e, t) {
+			_e(e, t), ne = setTimeout(() => {
+				re = setInterval(() => _e(e, t), 100);
 			}, 300);
 		}
-		function K() {
+		function J() {
 			ne &&= (clearTimeout(ne), null), re &&= (clearInterval(re), null);
 		}
-		function xe(e, t) {
+		function ye(e, t) {
 			let n = parseInt(e.target.value);
-			t === "H" ? U.value = n : W.value = n, H.value && me(H.value);
+			t === "H" ? U.value = n : W.value = n, H.value && fe(H.value);
 		}
-		let Se = C(ee), q = C(F), J = C(null), Y = C(null), X = C(null), Z = C(null), Ce = i(() => !!Y.value && !!X.value), we = i(() => q.value === 11 ? Se.value + 1 : Se.value), Te = i(() => q.value === 11 ? 0 : q.value + 1), Ee = i(() => L(Se.value, q.value)), De = i(() => L(we.value, Te.value)), Oe = i(() => [{
-			year: Se.value,
-			month: q.value,
+		let be = C(F), Y = C(I), X = C(null), xe = C(null), Se = C(null), Z = C(null), Ce = i(() => !!xe.value && !!Se.value), we = i(() => Y.value === 11 ? be.value + 1 : be.value), Te = i(() => Y.value === 11 ? 0 : Y.value + 1), Ee = i(() => te(be.value, Y.value)), De = i(() => te(we.value, Te.value)), Oe = i(() => [{
+			year: be.value,
+			month: Y.value,
 			days: Ee.value,
 			isLeft: !0
 		}, {
@@ -2449,49 +2449,49 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 				isCurrentMonth: !0
 			} : null;
 		}
-		let Ae = i(() => J.value && Z.value ? te(J.value, Z.value) <= 0 ? J.value : Z.value : Y.value ?? ke(t.start)), je = i(() => J.value && Z.value ? te(J.value, Z.value) <= 0 ? Z.value : J.value : X.value ?? ke(t.end)), Me = i(() => {
-			if (J.value) {
-				let e = J.value;
+		let Ae = i(() => X.value && Z.value ? L(X.value, Z.value) <= 0 ? X.value : Z.value : xe.value ?? ke(t.start)), je = i(() => X.value && Z.value ? L(X.value, Z.value) <= 0 ? Z.value : X.value : Se.value ?? ke(t.end)), Me = i(() => {
+			if (X.value) {
+				let e = X.value;
 				return `${e.year}-${R(e.month + 1)}-${R(e.day)}`;
 			}
-			if (Y.value) {
-				let e = Y.value;
+			if (xe.value) {
+				let e = xe.value;
 				return `${e.year}-${R(e.month + 1)}-${R(e.day)}`;
 			}
 			return t.start;
 		}), Ne = i(() => {
-			if (J.value) return "";
-			if (X.value) {
-				let e = X.value;
+			if (X.value) return "";
+			if (Se.value) {
+				let e = Se.value;
 				return `${e.year}-${R(e.month + 1)}-${R(e.day)}`;
 			}
 			return t.end;
 		});
 		function Pe() {
 			let e = p(t.start) ?? {
-				year: ee,
-				month: F,
+				year: F,
+				month: I,
 				day: 1,
 				hour: 0,
 				min: 0
 			};
-			Se.value = e.year, q.value = e.month, Y.value = ke(t.start), X.value = ke(t.end), J.value = null, Z.value = null;
+			be.value = e.year, Y.value = e.month, xe.value = ke(t.start), Se.value = ke(t.end), X.value = null, Z.value = null;
 		}
 		function Q() {
-			q.value === 0 ? (Se.value--, q.value = 11) : q.value--;
+			Y.value === 0 ? (be.value--, Y.value = 11) : Y.value--;
 		}
 		function Fe() {
-			q.value === 11 ? (Se.value++, q.value = 0) : q.value++;
+			Y.value === 11 ? (be.value++, Y.value = 0) : Y.value++;
 		}
 		function Ie(e) {
-			if (!J.value) J.value = { ...e }, Y.value = null, X.value = null;
+			if (!X.value) X.value = { ...e }, xe.value = null, Se.value = null;
 			else {
-				let t = J.value, [n, r] = te(t, e) <= 0 ? [t, e] : [e, t];
-				Y.value = n, X.value = r, J.value = null, Z.value = null;
+				let t = X.value, [n, r] = L(t, e) <= 0 ? [t, e] : [e, t];
+				xe.value = n, Se.value = r, X.value = null, Z.value = null;
 			}
 		}
 		function Le(e) {
-			let t = e.year === ee && e.month === F && e.day === I, n = J.value && e.year === J.value.year && e.month === J.value.month && e.day === J.value.day, r = Ae.value, i = je.value, a = r && e.year === r.year && e.month === r.month && e.day === r.day, o = i && e.year === i.year && e.month === i.month && e.day === i.day, s = r && i && te(e, r) > 0 && te(e, i) < 0;
+			let t = e.year === F && e.month === I && e.day === ee, n = X.value && e.year === X.value.year && e.month === X.value.month && e.day === X.value.day, r = Ae.value, i = je.value, a = r && e.year === r.year && e.month === r.month && e.day === r.day, o = i && e.year === i.year && e.month === i.month && e.day === i.day, s = r && i && L(e, r) > 0 && L(e, i) < 0;
 			return {
 				"is-other-month": !e.isCurrentMonth,
 				"is-today": t && !a && !o,
@@ -2502,15 +2502,15 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 			};
 		}
 		function Re() {
-			if (!Y.value || !X.value) return;
-			let e = Y.value, t = X.value, n = `${e.year}-${R(e.month + 1)}-${R(e.day)}`, r = `${t.year}-${R(t.month + 1)}-${R(t.day)}`;
+			if (!xe.value || !Se.value) return;
+			let e = xe.value, t = Se.value, n = `${e.year}-${R(e.month + 1)}-${R(e.day)}`, r = `${t.year}-${R(t.month + 1)}-${R(t.day)}`;
 			l("update:start", n), l("update:end", r), l("change", n, r), Be();
 		}
 		function ze() {
-			t.disabled || (b.value || (t.range ? Pe() : ue()), b.value = !b.value);
+			t.disabled || (b.value || (t.range ? Pe() : ce()), b.value = !b.value);
 		}
 		function Be() {
-			b.value = !1, J.value = null, Z.value = null;
+			b.value = !1, X.value = null, Z.value = null;
 		}
 		function Ve() {
 			B.value = B.value === "date" ? "year" : "date";
@@ -2522,11 +2522,11 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 		y(() => {
 			document.addEventListener("mousedown", He), window.addEventListener("resize", O);
 		}), v(() => {
-			document.removeEventListener("mousedown", He), window.removeEventListener("resize", O), D && clearTimeout(D), K();
+			document.removeEventListener("mousedown", He), window.removeEventListener("resize", O), D && clearTimeout(D), J();
 		});
 		let Ue = (e) => {
 			if (e.stopPropagation(), t.range) {
-				Y.value = null, X.value = null, J.value = null, Z.value = null, l("update:start", ""), l("update:end", ""), l("change", "", ""), l("clear");
+				xe.value = null, Se.value = null, X.value = null, Z.value = null, l("update:start", ""), l("update:end", ""), l("change", "", ""), l("clear");
 				return;
 			}
 			l("update:modelValue", ""), l("change", ""), l("clear");
@@ -2543,7 +2543,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 			}]) }, [c("div", {
 				class: "picker-trigger",
 				onClick: ze
-			}, [c("span", { class: g(["text", { placeholder: !le.value }]) }, E(le.value || t.placeholder), 3), t.clearable && le.value ? (x(), a(z, {
+			}, [c("span", { class: g(["text", { placeholder: !se.value }]) }, E(se.value || t.placeholder), 3), t.clearable && se.value ? (x(), a(z, {
 				key: 0,
 				variant: "none",
 				square: "",
@@ -2569,7 +2569,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						c("div", jr, [f(z, {
 							variant: "ghost",
 							square: "",
-							onClick: i[0] ||= (e) => ve(-1)
+							onClick: i[0] ||= (e) => ge(-1)
 						}, {
 							default: j(() => [...i[21] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2587,7 +2587,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							key: 0,
 							variant: "ghost",
 							square: "",
-							onClick: i[1] ||= (e) => _e(-1)
+							onClick: i[1] ||= (e) => he(-1)
 						}, {
 							default: j(() => [...i[22] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2605,12 +2605,12 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						c("div", {
 							class: "header-title",
 							onClick: Ve
-						}, [B.value === "date" ? (x(), s(e, { key: 0 }, [d(E(k[ie.value]) + " " + E(G.value), 1)], 64)) : (x(), s(e, { key: 1 }, [d(E(oe.value[0]) + " - " + E(oe.value[oe.value.length - 1]), 1)], 64))]),
+						}, [B.value === "date" ? (x(), s(e, { key: 0 }, [d(E(k[K.value]) + " " + E(G.value), 1)], 64)) : (x(), s(e, { key: 1 }, [d(E(q.value[0]) + " - " + E(q.value[q.value.length - 1]), 1)], 64))]),
 						c("div", Mr, [B.value === "date" ? (x(), a(z, {
 							key: 0,
 							variant: "ghost",
 							square: "",
-							onClick: i[2] ||= (e) => _e(1)
+							onClick: i[2] ||= (e) => he(1)
 						}, {
 							default: j(() => [...i[23] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2627,7 +2627,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						})) : o("", !0), f(z, {
 							variant: "ghost",
 							square: "",
-							onClick: i[3] ||= (e) => ve(1)
+							onClick: i[3] ||= (e) => ge(1)
 						}, {
 							default: j(() => [...i[24] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2646,13 +2646,13 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 					c("div", Nr, [B.value === "date" ? (x(), s(e, { key: 0 }, [c("div", Pr, [(x(), s(e, null, w(M, (e) => c("span", {
 						key: e,
 						class: "weekday"
-					}, E(e), 1)), 64))]), c("div", Fr, [(x(!0), s(e, null, w(se.value, (e, t) => (x(), a(z, {
+					}, E(e), 1)), 64))]), c("div", Fr, [(x(!0), s(e, null, w(ae.value, (e, t) => (x(), a(z, {
 						key: t,
-						variant: pe(e) ? "solid" : fe(e) ? "mute" : "ghost",
-						intent: pe(e) || fe(e) ? "primary" : "none",
+						variant: de(e) ? "solid" : ue(e) ? "mute" : "ghost",
+						intent: de(e) || ue(e) ? "primary" : "none",
 						class: g(["day-cell", { "is-not-current": !e.isCurrentMonth }]),
 						padding: "0",
-						onClick: (t) => he(e)
+						onClick: (t) => pe(e)
 					}, {
 						default: j(() => [d(E(e.day), 1)]),
 						_: 2
@@ -2661,12 +2661,12 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						"intent",
 						"class",
 						"onClick"
-					]))), 128))])], 64)) : (x(), s("div", Ir, [(x(!0), s(e, null, w(oe.value, (e) => (x(), a(z, {
+					]))), 128))])], 64)) : (x(), s("div", Ir, [(x(!0), s(e, null, w(q.value, (e) => (x(), a(z, {
 						key: e,
 						variant: e === G.value ? "solid" : "ghost",
 						intent: e === G.value ? "primary" : "none",
 						class: "year-cell",
-						onClick: (t) => ge(e)
+						onClick: (t) => me(e)
 					}, {
 						default: j(() => [d(E(e), 1)]),
 						_: 2
@@ -2682,9 +2682,9 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[4] ||= N((e) => be("H", -1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[4] ||= N((e) => ve("H", -1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[25] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2705,16 +2705,16 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							min: "0",
 							max: "23",
 							value: U.value,
-							onInput: i[5] ||= (e) => xe(e, "H")
+							onInput: i[5] ||= (e) => ye(e, "H")
 						}, null, 40, Br),
 						f(z, {
 							variant: "ghost",
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[6] ||= N((e) => be("H", 1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[6] ||= N((e) => ve("H", 1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[26] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2737,9 +2737,9 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[7] ||= N((e) => be("m", -1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[7] ||= N((e) => ve("m", -1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[28] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2760,16 +2760,16 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							min: "0",
 							max: "59",
 							value: W.value,
-							onInput: i[8] ||= (e) => xe(e, "m")
+							onInput: i[8] ||= (e) => ye(e, "m")
 						}, null, 40, Ur),
 						f(z, {
 							variant: "ghost",
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[9] ||= N((e) => be("m", 1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[9] ||= N((e) => ve("m", 1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[29] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2800,7 +2800,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						c("div", qr, [f(z, {
 							variant: "ghost",
 							square: "",
-							onClick: i[10] ||= (e) => ve(-1)
+							onClick: i[10] ||= (e) => ge(-1)
 						}, {
 							default: j(() => [...i[31] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2818,7 +2818,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							key: 0,
 							variant: "ghost",
 							square: "",
-							onClick: i[11] ||= (e) => _e(-1)
+							onClick: i[11] ||= (e) => he(-1)
 						}, {
 							default: j(() => [...i[32] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2836,12 +2836,12 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						c("div", {
 							class: "header-title",
 							onClick: Ve
-						}, [B.value === "date" ? (x(), s(e, { key: 0 }, [d(E(k[ie.value]) + " " + E(G.value), 1)], 64)) : (x(), s(e, { key: 1 }, [d(E(oe.value[0]) + " - " + E(oe.value[oe.value.length - 1]), 1)], 64))]),
+						}, [B.value === "date" ? (x(), s(e, { key: 0 }, [d(E(k[K.value]) + " " + E(G.value), 1)], 64)) : (x(), s(e, { key: 1 }, [d(E(q.value[0]) + " - " + E(q.value[q.value.length - 1]), 1)], 64))]),
 						c("div", Jr, [B.value === "date" ? (x(), a(z, {
 							key: 0,
 							variant: "ghost",
 							square: "",
-							onClick: i[12] ||= (e) => _e(1)
+							onClick: i[12] ||= (e) => he(1)
 						}, {
 							default: j(() => [...i[33] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2858,7 +2858,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						})) : o("", !0), f(z, {
 							variant: "ghost",
 							square: "",
-							onClick: i[13] ||= (e) => ve(1)
+							onClick: i[13] ||= (e) => ge(1)
 						}, {
 							default: j(() => [...i[34] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2877,13 +2877,13 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 					c("div", Yr, [B.value === "date" ? (x(), s(e, { key: 0 }, [c("div", Xr, [(x(), s(e, null, w(M, (e) => c("span", {
 						key: e,
 						class: "weekday"
-					}, E(e), 1)), 64))]), c("div", Zr, [(x(!0), s(e, null, w(se.value, (e, t) => (x(), a(z, {
+					}, E(e), 1)), 64))]), c("div", Zr, [(x(!0), s(e, null, w(ae.value, (e, t) => (x(), a(z, {
 						key: t,
-						variant: pe(e) ? "solid" : fe(e) ? "mute" : "ghost",
-						intent: pe(e) || fe(e) ? "primary" : "none",
+						variant: de(e) ? "solid" : ue(e) ? "mute" : "ghost",
+						intent: de(e) || ue(e) ? "primary" : "none",
 						class: g(["day-cell", { "is-not-current": !e.isCurrentMonth }]),
 						padding: "0",
-						onClick: (t) => he(e)
+						onClick: (t) => pe(e)
 					}, {
 						default: j(() => [d(E(e.day), 1)]),
 						_: 2
@@ -2892,12 +2892,12 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 						"intent",
 						"class",
 						"onClick"
-					]))), 128))])], 64)) : (x(), s("div", Qr, [(x(!0), s(e, null, w(oe.value, (e) => (x(), a(z, {
+					]))), 128))])], 64)) : (x(), s("div", Qr, [(x(!0), s(e, null, w(q.value, (e) => (x(), a(z, {
 						key: e,
 						variant: e === G.value ? "solid" : "ghost",
 						intent: e === G.value ? "primary" : "none",
 						class: "year-cell",
-						onClick: (t) => ge(e)
+						onClick: (t) => me(e)
 					}, {
 						default: j(() => [d(E(e), 1)]),
 						_: 2
@@ -2913,9 +2913,9 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[14] ||= N((e) => be("H", -1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[14] ||= N((e) => ve("H", -1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[35] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2936,16 +2936,16 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							min: "0",
 							max: "23",
 							value: U.value,
-							onInput: i[15] ||= (e) => xe(e, "H")
+							onInput: i[15] ||= (e) => ye(e, "H")
 						}, null, 40, ni),
 						f(z, {
 							variant: "ghost",
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[16] ||= N((e) => be("H", 1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[16] ||= N((e) => ve("H", 1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[36] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2968,9 +2968,9 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[17] ||= N((e) => be("m", -1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[17] ||= N((e) => ve("m", -1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[38] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -2991,16 +2991,16 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							min: "0",
 							max: "59",
 							value: W.value,
-							onInput: i[18] ||= (e) => xe(e, "m")
+							onInput: i[18] ||= (e) => ye(e, "m")
 						}, null, 40, ai),
 						f(z, {
 							variant: "ghost",
 							square: "",
 							size: "sm",
 							class: "time-step",
-							onMousedown: i[19] ||= N((e) => be("m", 1), ["prevent"]),
-							onMouseup: K,
-							onMouseleave: K
+							onMousedown: i[19] ||= N((e) => ve("m", 1), ["prevent"]),
+							onMouseup: J,
+							onMouseleave: J
 						}, {
 							default: j(() => [...i[39] ||= [c("svg", {
 								xmlns: "http://www.w3.org/2000/svg",
@@ -3124,7 +3124,7 @@ var ur = { class: "icon-wrap" }, dr = ["innerHTML"], fr = {
 							}, [c("path", { d: "m15 18-6-6 6-6" })], -1)]]),
 							_: 1
 						})]),
-						c("div", Ti, E(k[q.value]) + " " + E(Se.value), 1),
+						c("div", Ti, E(k[Y.value]) + " " + E(be.value), 1),
 						c("div", Ei, [f(z, {
 							variant: "ghost",
 							square: "",
@@ -3426,13 +3426,20 @@ var ea = {
 }, ta = ["textContent"], na = {
 	key: 1,
 	class: "count-chip"
-}, ra = { class: "grid" }, ia = ["textContent"], aa = ["textContent"], oa = ["onClick"], sa = ["src"], ca = {
+}, ra = { class: "grid" }, ia = {
+	key: 0,
+	class: "icon",
+	"aria-hidden": "true"
+}, aa = ["textContent"], oa = ["textContent"], sa = ["onClick"], ca = ["src"], la = {
 	key: 1,
 	class: "placeholder-label"
-}, la = { class: "duration" }, ua = { class: "card-body" }, da = ["title"], fa = { class: "file-meta" }, pa = { class: "card-actions" }, ma = ["onClick"], ha = ["disabled", "onClick"], ga = { class: "vi-modal-card" }, _a = { class: "vi-modal-media" }, va = ["src"], ya = {
+}, ua = { class: "duration" }, da = { class: "card-body" }, fa = ["title"], pa = { class: "file-meta" }, ma = { key: 0 }, ha = {
+	key: 1,
+	class: "dot-separator"
+}, ga = { key: 2 }, _a = { class: "card-actions" }, va = ["onClick"], ya = ["disabled", "onClick"], ba = { class: "vi-modal-card" }, xa = { class: "vi-modal-media" }, Sa = ["src"], Ca = {
 	key: 1,
 	class: "vi-modal-placeholder"
-}, ba = { class: "vi-modal-bar" }, xa = { class: "vi-modal-info" }, Sa = { class: "modal-name" }, Ca = { class: "modal-meta" }, wa = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, wa = { class: "vi-modal-bar" }, Ta = { class: "vi-modal-info" }, Ea = { class: "modal-name" }, Da = { class: "modal-meta" }, Oa = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NVideoSelect",
 	props: {
 		modelValue: { default: () => [] },
@@ -3446,6 +3453,10 @@ var ea = {
 			type: Boolean,
 			default: !1
 		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
 		title: { default: "" },
 		showCount: {
 			type: Boolean,
@@ -3466,20 +3477,32 @@ var ea = {
 		"error"
 	],
 	setup(r, { emit: l }) {
-		let p = l, h = C(!1), _ = C(null), [y, b, S] = $i(), { confirm: T } = Rt(), O = i(() => r.modelValue.length), k = (e) => e == null ? "—" : e < 1024 ? e + " B" : e < 1048576 ? (e / 1024).toFixed(0) + " KB" : e < 1073741824 ? (e / 1048576).toFixed(1) + " MB" : (e / 1073741824).toFixed(2) + " GB", M = (e) => {
+		let u = l, p = C(!1), h = C(null), [_, y, b] = $i(), { confirm: S } = Rt(), T = i(() => r.modelValue.length), O = (e) => e == null ? "—" : e < 1024 ? e + " B" : e < 1048576 ? (e / 1024).toFixed(0) + " KB" : e < 1073741824 ? (e / 1048576).toFixed(1) + " MB" : (e / 1073741824).toFixed(2) + " GB", k = (e) => {
 			if (e == null || isNaN(e)) return "0:00";
 			let t = Math.round(e), n = Math.floor(t / 60), r = t % 60;
 			return n + ":" + (r < 10 ? "0" : "") + r;
-		}, P = (e) => e.width && e.height ? e.width + "×" + e.height : "—", ee = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : "v" + Math.random().toString(36).slice(2, 9), F = (e) => {
+		}, M = (e) => e.width && e.height ? e.width + "×" + e.height : "—", P = (e) => {
+			if (e.name) return e.name;
+			try {
+				let t = new URL(e.url, window.location.href).pathname;
+				return decodeURIComponent(t.split("/").filter(Boolean).pop() ?? "影片");
+			} catch {
+				return "影片";
+			}
+		}, F = (e) => {
+			e?.startsWith("blob:") && URL.revokeObjectURL(e);
+		}, I = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : "v" + Math.random().toString(36).slice(2, 9), ee = (e) => {
 			let t = r.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
 			if (t.length === 0) return e.type.startsWith("video/");
 			let n = e.type.toLowerCase(), i = e.name.toLowerCase();
 			return t.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? n.startsWith(e.slice(0, -1)) : n === e);
-		}, I = (e) => {
+		}, te = (e) => {
 			if (!e.url) return;
 			let t = document.createElement("video");
 			t.preload = "metadata";
 			let n = () => {
+				t.removeEventListener("loadedmetadata", i), t.removeEventListener("error", n), t.removeAttribute("src"), t.load();
+			}, i = () => {
 				if (r.modelValue.some((t) => t.id === e.id)) {
 					let n = r.modelValue.map((n) => n.id === e.id ? {
 						...n,
@@ -3487,38 +3510,44 @@ var ea = {
 						width: t.videoWidth,
 						height: t.videoHeight
 					} : n);
-					p("update:modelValue", n), p("change", n);
+					u("update:modelValue", n), u("change", n);
 				}
-				t.removeEventListener("loadedmetadata", n), t.removeAttribute("src"), t.load();
+				n();
 			};
-			t.addEventListener("loadedmetadata", n), t.src = e.url;
-		}, L = (e) => {
-			if (r.disabled) return;
+			t.addEventListener("loadedmetadata", i), t.addEventListener("error", n), t.src = e.url;
+		}, L = /* @__PURE__ */ new Set();
+		A(() => r.modelValue, (e) => {
+			e.forEach((e) => {
+				!e.url || L.has(e.id) || (L.add(e.id), (e.duration == null || e.width == null) && te(e));
+			});
+		}, { immediate: !0 });
+		let R = (e) => {
+			if (r.disabled || r.readonly) return;
 			let t = [], n = !1;
 			if (Array.prototype.forEach.call(e, (e) => {
-				if (!F(e)) {
-					p("error", {
+				if (!ee(e)) {
+					u("error", {
 						type: "type",
 						file: e
 					});
 					return;
 				}
 				if (r.maxSize > 0 && e.size > r.maxSize * 1024 * 1024) {
-					p("error", {
+					u("error", {
 						type: "size",
 						file: e
 					});
 					return;
 				}
 				if (!r.multiple && r.modelValue.length + t.length >= 1) {
-					n ||= (p("error", {
+					n ||= (u("error", {
 						type: "count",
 						file: e
 					}), !0);
 					return;
 				}
 				t.push({
-					id: ee(),
+					id: I(),
 					file: e,
 					name: e.name,
 					size: e.size,
@@ -3529,89 +3558,109 @@ var ea = {
 				});
 			}), t.length === 0) return;
 			let i = [...r.modelValue, ...t];
-			p("update:modelValue", i), p("change", i), p("add", t), t.forEach(I);
-		}, te = async () => {
-			if (!r.disabled) if (r.multiple) {
+			u("update:modelValue", i), u("change", i), u("add", t), t.forEach((e) => {
+				L.add(e.id), te(e);
+			});
+		}, z = async () => {
+			if (!(r.disabled || r.readonly)) if (r.multiple) {
 				let e = await $.input.custom(r.accept, !0);
 				if (e.length === 0) return;
-				L(e.map((e) => e.file));
+				R(e.map((e) => e.file));
 			} else {
 				let e = await $.input.custom(r.accept, !1);
 				if (!e) return;
-				L([e.file]);
+				R([e.file]);
 			}
-		}, R = async (e) => {
-			if (r.disabled) return;
+		}, B = async (e) => {
+			if (r.disabled || r.readonly) return;
 			let t = r.modelValue.find((t) => t.id === e);
-			if (!t || !await T(`確定要移除「${t.name}」嗎？`, {
+			if (!t || !await S(`確定要移除「${P(t)}」嗎？`, {
 				title: "移除影片",
 				status: "danger",
 				confirmText: "移除",
 				cancelText: "取消"
 			})) return;
-			t.url && URL.revokeObjectURL(t.url);
+			F(t.url);
 			let n = r.modelValue.filter((t) => t.id !== e);
-			p("update:modelValue", n), p("change", n), p("remove", t);
-		}, z = (e) => {
-			_.value = e, b();
-		}, B = () => {
-			S();
-		}, V = i(() => {
-			let e = _.value;
+			u("update:modelValue", n), u("change", n), u("remove", t);
+		}, V = (e) => {
+			h.value = e, y();
+		}, H = () => {
+			b();
+		}, U = i(() => {
+			let e = h.value;
 			return e ? [
-				k(e.size),
-				P(e),
-				M(e.duration)
-			].join(" · ") : "";
-		}), H = (e) => {
-			e.key === "Escape" && B();
-		}, U = "";
-		A(y, (e) => {
-			e ? (U = document.body.style.overflow, document.body.style.overflow = "hidden", document.addEventListener("keydown", H)) : (document.body.style.overflow = U, document.removeEventListener("keydown", H));
+				e.size == null ? null : O(e.size),
+				e.width && e.height ? M(e) : null,
+				k(e.duration)
+			].filter(Boolean).join(" · ") : "";
+		}), W = (e) => {
+			e.key === "Escape" && H();
+		}, ne = "";
+		A(_, (e) => {
+			e ? (ne = document.body.style.overflow, document.body.style.overflow = "hidden", document.addEventListener("keydown", W)) : (document.body.style.overflow = ne, document.removeEventListener("keydown", W));
 		}), v(() => {
-			document.body.style.overflow = U, document.removeEventListener("keydown", H), r.autoRevoke && r.modelValue.forEach((e) => {
-				e.url && URL.revokeObjectURL(e.url);
-			});
+			document.body.style.overflow = ne, document.removeEventListener("keydown", W), r.autoRevoke && r.modelValue.forEach((e) => F(e.url));
 		});
-		let W = {
-			onClick: te,
+		let re = {
+			onClick: z,
 			onDragenter: (e) => {
-				r.disabled || (e.preventDefault(), h.value = !0);
+				r.disabled || r.readonly || (e.preventDefault(), p.value = !0);
 			},
 			onDragover: (e) => e.preventDefault(),
 			onDragleave: (e) => {
-				e.preventDefault(), h.value = !1;
+				e.preventDefault(), p.value = !1;
 			},
 			onDrop: (e) => {
-				r.disabled || (e.preventDefault(), h.value = !1, e.dataTransfer?.files?.length && L(e.dataTransfer.files));
+				r.disabled || r.readonly || (e.preventDefault(), p.value = !1, e.dataTransfer?.files?.length && R(e.dataTransfer.files));
 			}
 		};
-		return (i, l) => (x(), s("div", { class: g(["video-input", { "is-disabled": r.disabled }]) }, [
+		return (i, l) => (x(), s("div", { class: g(["video-input", {
+			"is-disabled": r.disabled,
+			"is-readonly": r.readonly
+		}]) }, [
 			r.title || r.showCount ? (x(), s("div", ea, [r.title ? (x(), s("span", {
 				key: 0,
 				class: "title",
 				textContent: E(r.title)
-			}, null, 8, ta)) : o("", !0), r.showCount ? (x(), s("span", na, E(O.value) + " 支", 1)) : o("", !0)])) : o("", !0),
-			c("div", ra, [O.value === 0 ? (x(), s("div", m({
+			}, null, 8, ta)) : o("", !0), r.showCount ? (x(), s("span", na, E(T.value) + " 支", 1)) : o("", !0)])) : o("", !0),
+			c("div", ra, [T.value === 0 ? (x(), s("div", m({
 				key: 0,
-				class: ["empty", { "is-drag": h.value }]
-			}, W), [
-				l[0] ||= u("<span class=\"icon\" aria-hidden=\"true\" data-v-8ea5b0a2><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-v-8ea5b0a2><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" data-v-8ea5b0a2></path><path d=\"M7 9l5-5 5 5\" data-v-8ea5b0a2></path><path d=\"M12 4v12\" data-v-8ea5b0a2></path></svg></span>", 1),
-				c("h3", { textContent: E(r.emptyTitle) }, null, 8, ia),
-				c("p", { textContent: E(r.emptyHint) }, null, 8, aa)
+				class: ["empty", {
+					"is-drag": p.value,
+					"is-static": r.readonly
+				}]
+			}, r.readonly ? {} : re), [
+				r.readonly ? o("", !0) : (x(), s("span", ia, [...l[0] ||= [c("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "1.7",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, [
+					c("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+					c("path", { d: "M7 9l5-5 5 5" }),
+					c("path", { d: "M12 4v12" })
+				], -1)]])),
+				c("h3", { textContent: E(r.readonly ? "目前沒有影片" : r.emptyTitle) }, null, 8, aa),
+				r.readonly ? o("", !0) : (x(), s("p", {
+					key: 1,
+					textContent: E(r.emptyHint)
+				}, null, 8, oa))
 			], 16)) : (x(), s(e, { key: 1 }, [(x(!0), s(e, null, w(r.modelValue, (e) => (x(), s("div", {
 				key: e.id,
 				class: "card"
 			}, [c("div", {
 				class: g(["thumb", { placeholder: !e.url }]),
-				onClick: (t) => z(e)
+				onClick: (t) => V(e)
 			}, [
 				e.url ? (x(), s("video", {
 					key: 0,
 					src: e.url + "#t=0.5",
 					muted: "",
 					preload: "metadata"
-				}, null, 8, sa)) : (x(), s("div", ca, "縮圖預覽")),
+				}, null, 8, ca)) : (x(), s("div", la, "縮圖預覽")),
 				l[1] ||= c("div", {
 					class: "play",
 					"aria-hidden": "true"
@@ -3619,21 +3668,21 @@ var ea = {
 					viewBox: "0 0 24 24",
 					fill: "currentColor"
 				}, [c("path", { d: "M8 5v14l11-7z" })])], -1),
-				c("div", la, E(M(e.duration)), 1)
-			], 10, oa), c("div", ua, [
+				c("div", ua, E(k(e.duration)), 1)
+			], 10, sa), c("div", da, [
 				c("div", {
 					class: "file-name",
-					title: e.name
-				}, E(e.name), 9, da),
-				c("div", fa, [
-					c("span", null, E(k(e.size)), 1),
-					l[2] ||= c("span", { class: "dot-separator" }, null, -1),
-					c("span", null, E(P(e)), 1)
+					title: P(e)
+				}, E(P(e)), 9, fa),
+				c("div", pa, [
+					e.size == null ? o("", !0) : (x(), s("span", ma, E(O(e.size)), 1)),
+					e.size != null && e.width && e.height ? (x(), s("span", ha)) : o("", !0),
+					e.width && e.height ? (x(), s("span", ga, E(M(e)), 1)) : o("", !0)
 				]),
-				c("div", pa, [c("button", {
+				c("div", _a, [c("button", {
 					class: "action preview",
-					onClick: (t) => z(e)
-				}, [...l[3] ||= [c("svg", {
+					onClick: (t) => V(e)
+				}, [...l[2] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -3644,23 +3693,24 @@ var ea = {
 					cx: "12",
 					cy: "12",
 					r: "3"
-				})], -1), d(" 預覽 ", -1)]], 8, ma), c("button", {
+				})], -1), d(" 預覽 ", -1)]], 8, va), r.readonly ? o("", !0) : (x(), s("button", {
+					key: 0,
 					class: "action delete",
 					"aria-label": "刪除",
 					disabled: r.disabled,
-					onClick: N((t) => R(e.id), ["stop"])
-				}, [...l[4] ||= [c("svg", {
+					onClick: N((t) => B(e.id), ["stop"])
+				}, [...l[3] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [c("path", { d: "M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }), c("path", { d: "M10 11v6M14 11v6" })], -1)]], 8, ha)])
-			])]))), 128)), r.multiple ? (x(), s("div", m({
+				}, [c("path", { d: "M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }), c("path", { d: "M10 11v6M14 11v6" })], -1)]], 8, ya))])
+			])]))), 128)), r.multiple && !r.readonly ? (x(), s("div", m({
 				key: 0,
-				class: ["add-card", { "is-drag": h.value }]
-			}, W), [...l[5] ||= [
+				class: ["add-card", { "is-drag": p.value }]
+			}, re), [...l[4] ||= [
 				c("span", {
 					class: "plus",
 					"aria-hidden": "true"
@@ -3676,23 +3726,23 @@ var ea = {
 				c("span", { class: "hint" }, "點擊或拖放檔案 · MP4 / MOV / WebM", -1)
 			]], 16)) : o("", !0)], 64))]),
 			(x(), a(t, { to: "body" }, [f(n, { name: "vi-modal" }, {
-				default: j(() => [D(y) ? (x(), s("div", {
+				default: j(() => [D(_) ? (x(), s("div", {
 					key: 0,
 					class: "vi-modal",
-					onClick: N(B, ["self"])
-				}, [c("div", ga, [c("div", _a, [_.value?.url ? (x(), s("video", {
+					onClick: N(H, ["self"])
+				}, [c("div", ba, [c("div", xa, [h.value?.url ? (x(), s("video", {
 					key: 0,
-					src: _.value.url,
+					src: h.value.url,
 					controls: "",
 					autoplay: "",
 					playsinline: "",
 					controlslist: "nofullscreen nodownload noremoteplayback noplaybackrate",
 					disablepictureinpicture: ""
-				}, null, 8, va)) : (x(), s("div", ya, " 示範影片 · 上傳真實檔案即可在此播放 "))]), c("div", ba, [c("div", xa, [c("div", Sa, E(_.value?.name), 1), c("div", Ca, E(V.value), 1)]), c("button", {
+				}, null, 8, Sa)) : (x(), s("div", Ca, " 示範影片 · 上傳真實檔案即可在此播放 "))]), c("div", wa, [c("div", Ta, [c("div", Ea, E(h.value ? P(h.value) : ""), 1), c("div", Da, E(U.value), 1)]), c("button", {
 					class: "vi-modal-close",
 					"aria-label": "關閉",
-					onClick: B
-				}, [...l[6] ||= [c("svg", {
+					onClick: H
+				}, [...l[5] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -3704,19 +3754,26 @@ var ea = {
 			})]))
 		], 2));
 	}
-}), [["__scopeId", "data-v-8ea5b0a2"]]), Ta = {
+}), [["__scopeId", "data-v-414cc3f4"]]), ka = {
 	key: 0,
 	class: "head"
-}, Ea = ["textContent"], Da = {
+}, Aa = ["textContent"], ja = {
 	key: 1,
 	class: "count-chip"
-}, Oa = { class: "grid" }, ka = ["textContent"], Aa = ["textContent"], ja = ["onClick"], Ma = ["src", "alt"], Na = {
+}, Ma = { class: "grid" }, Na = {
+	key: 0,
+	class: "icon",
+	"aria-hidden": "true"
+}, Pa = ["textContent"], Fa = ["textContent"], Ia = ["onClick"], La = ["src", "alt"], Ra = {
 	key: 1,
 	class: "placeholder-label"
-}, Pa = { class: "card-body" }, Fa = ["title"], Ia = { class: "file-meta" }, La = { class: "card-actions" }, Ra = ["onClick"], za = ["disabled", "onClick"], Ba = { class: "ii-modal-card" }, Va = { class: "ii-modal-media" }, Ha = ["src", "alt"], Ua = {
+}, za = { class: "card-body" }, Ba = ["title"], Va = { class: "file-meta" }, Ha = { key: 0 }, Ua = {
+	key: 1,
+	class: "dot-separator"
+}, Wa = { key: 2 }, Ga = { class: "card-actions" }, Ka = ["onClick"], qa = ["disabled", "onClick"], Ja = { class: "ii-modal-card" }, Ya = { class: "ii-modal-media" }, Xa = ["src", "alt"], Za = {
 	key: 1,
 	class: "ii-modal-ph"
-}, Wa = { class: "ii-modal-bar" }, Ga = { class: "ii-modal-info" }, Ka = { class: "modal-name" }, qa = { class: "modal-meta" }, Ja = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, Qa = { class: "ii-modal-bar" }, $a = { class: "ii-modal-info" }, eo = { class: "modal-name" }, to = { class: "modal-meta" }, no = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NImageSelect",
 	props: {
 		modelValue: { default: () => [] },
@@ -3730,6 +3787,10 @@ var ea = {
 			type: Boolean,
 			default: !1
 		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
 		title: { default: "" },
 		showCount: {
 			type: Boolean,
@@ -3750,52 +3811,70 @@ var ea = {
 		"error"
 	],
 	setup(r, { emit: l }) {
-		let p = l, h = C(!1), _ = C(null), [y, b, S] = $i(), { confirm: T } = Rt(), O = i(() => r.modelValue.length), k = (e) => e == null ? "—" : e < 1024 ? e + " B" : e < 1048576 ? (e / 1024).toFixed(0) + " KB" : e < 1073741824 ? (e / 1048576).toFixed(1) + " MB" : (e / 1073741824).toFixed(2) + " GB", M = (e) => e.width && e.height ? e.width + "×" + e.height : "—", P = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : "i" + Math.random().toString(36).slice(2, 9), ee = (e) => {
+		let u = l, p = C(!1), h = C(null), [_, y, b] = $i(), { confirm: S } = Rt(), T = i(() => r.modelValue.length), O = (e) => e == null ? "—" : e < 1024 ? e + " B" : e < 1048576 ? (e / 1024).toFixed(0) + " KB" : e < 1073741824 ? (e / 1048576).toFixed(1) + " MB" : (e / 1073741824).toFixed(2) + " GB", k = (e) => e.width && e.height ? e.width + "×" + e.height : "—", M = (e) => {
+			if (e.name) return e.name;
+			try {
+				let t = new URL(e.url, window.location.href).pathname;
+				return decodeURIComponent(t.split("/").filter(Boolean).pop() ?? "圖片");
+			} catch {
+				return "圖片";
+			}
+		}, P = (e) => {
+			e?.startsWith("blob:") && URL.revokeObjectURL(e);
+		}, F = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : "i" + Math.random().toString(36).slice(2, 9), I = (e) => {
 			let t = r.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
 			if (t.length === 0) return e.type.startsWith("image/");
 			let n = e.type.toLowerCase(), i = e.name.toLowerCase();
 			return t.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? n.startsWith(e.slice(0, -1)) : n === e);
-		}, F = (e) => {
+		}, ee = (e) => {
 			if (!e.url) return;
 			let t = new Image(), n = () => {
+				t.removeEventListener("load", i), t.removeEventListener("error", n), t.removeAttribute("src");
+			}, i = () => {
 				if (r.modelValue.some((t) => t.id === e.id)) {
 					let n = r.modelValue.map((n) => n.id === e.id ? {
 						...n,
 						width: t.naturalWidth,
 						height: t.naturalHeight
 					} : n);
-					p("update:modelValue", n), p("change", n);
+					u("update:modelValue", n), u("change", n);
 				}
-				t.removeEventListener("load", n), t.removeAttribute("src");
+				n();
 			};
-			t.addEventListener("load", n), t.src = e.url;
-		}, I = (e) => {
-			if (r.disabled) return;
+			t.addEventListener("load", i), t.addEventListener("error", n), t.src = e.url;
+		}, te = /* @__PURE__ */ new Set();
+		A(() => r.modelValue, (e) => {
+			e.forEach((e) => {
+				!e.url || te.has(e.id) || (te.add(e.id), (e.width == null || e.height == null) && ee(e));
+			});
+		}, { immediate: !0 });
+		let L = (e) => {
+			if (r.disabled || r.readonly) return;
 			let t = [], n = !1;
 			if (Array.prototype.forEach.call(e, (e) => {
-				if (!ee(e)) {
-					p("error", {
+				if (!I(e)) {
+					u("error", {
 						type: "type",
 						file: e
 					});
 					return;
 				}
 				if (r.maxSize > 0 && e.size > r.maxSize * 1024 * 1024) {
-					p("error", {
+					u("error", {
 						type: "size",
 						file: e
 					});
 					return;
 				}
 				if (!r.multiple && r.modelValue.length + t.length >= 1) {
-					n ||= (p("error", {
+					n ||= (u("error", {
 						type: "count",
 						file: e
 					}), !0);
 					return;
 				}
 				t.push({
-					id: P(),
+					id: F(),
 					file: e,
 					name: e.name,
 					size: e.size,
@@ -3805,84 +3884,114 @@ var ea = {
 				});
 			}), t.length === 0) return;
 			let i = [...r.modelValue, ...t];
-			p("update:modelValue", i), p("change", i), p("add", t), t.forEach(F);
-		}, L = async () => {
-			if (!r.disabled) if (r.multiple) {
+			u("update:modelValue", i), u("change", i), u("add", t), t.forEach((e) => {
+				te.add(e.id), ee(e);
+			});
+		}, R = async () => {
+			if (!(r.disabled || r.readonly)) if (r.multiple) {
 				let e = await $.input.custom(r.accept, !0);
 				if (e.length === 0) return;
-				I(e.map((e) => e.file));
+				L(e.map((e) => e.file));
 			} else {
 				let e = await $.input.custom(r.accept, !1);
 				if (!e) return;
-				I([e.file]);
+				L([e.file]);
 			}
-		}, te = async (e) => {
-			if (r.disabled) return;
+		}, z = async (e) => {
+			if (r.disabled || r.readonly) return;
 			let t = r.modelValue.find((t) => t.id === e);
-			if (!t || !await T(`確定要移除「${t.name}」嗎？`, {
+			if (!t || !await S(`確定要移除「${M(t)}」嗎？`, {
 				title: "移除圖片",
 				status: "danger",
 				confirmText: "移除",
 				cancelText: "取消"
 			})) return;
-			t.url && URL.revokeObjectURL(t.url);
+			P(t.url);
 			let n = r.modelValue.filter((t) => t.id !== e);
-			p("update:modelValue", n), p("change", n), p("remove", t);
-		}, R = (e) => {
-			_.value = e, b();
-		}, z = () => {
-			S();
-		}, B = i(() => {
-			let e = _.value;
-			return e ? [k(e.size), M(e)].join(" · ") : "";
-		}), V = (e) => {
-			e.key === "Escape" && z();
-		}, H = "";
-		A(y, (e) => {
-			e ? (H = document.body.style.overflow, document.body.style.overflow = "hidden", document.addEventListener("keydown", V)) : (document.body.style.overflow = H, document.removeEventListener("keydown", V));
+			u("update:modelValue", n), u("change", n), u("remove", t);
+		}, B = (e) => {
+			h.value = e, y();
+		}, V = () => {
+			b();
+		}, H = i(() => {
+			let e = h.value;
+			return e ? [e.size == null ? null : O(e.size), e.width && e.height ? k(e) : null].filter(Boolean).join(" · ") : "";
+		}), U = (e) => {
+			e.key === "Escape" && V();
+		}, W = "";
+		A(_, (e) => {
+			e ? (W = document.body.style.overflow, document.body.style.overflow = "hidden", document.addEventListener("keydown", U)) : (document.body.style.overflow = W, document.removeEventListener("keydown", U));
 		}), v(() => {
-			document.body.style.overflow = H, document.removeEventListener("keydown", V), r.autoRevoke && r.modelValue.forEach((e) => {
-				e.url && URL.revokeObjectURL(e.url);
-			});
+			document.body.style.overflow = W, document.removeEventListener("keydown", U), r.autoRevoke && r.modelValue.forEach((e) => P(e.url));
 		});
-		let U = {
-			onClick: L,
+		let ne = {
+			onClick: R,
 			onDragenter: (e) => {
-				r.disabled || (e.preventDefault(), h.value = !0);
+				r.disabled || r.readonly || (e.preventDefault(), p.value = !0);
 			},
 			onDragover: (e) => e.preventDefault(),
 			onDragleave: (e) => {
-				e.preventDefault(), h.value = !1;
+				e.preventDefault(), p.value = !1;
 			},
 			onDrop: (e) => {
-				r.disabled || (e.preventDefault(), h.value = !1, e.dataTransfer?.files?.length && I(e.dataTransfer.files));
+				r.disabled || r.readonly || (e.preventDefault(), p.value = !1, e.dataTransfer?.files?.length && L(e.dataTransfer.files));
 			}
 		};
-		return (i, l) => (x(), s("div", { class: g(["image-input", { "is-disabled": r.disabled }]) }, [
-			r.title || r.showCount ? (x(), s("div", Ta, [r.title ? (x(), s("span", {
+		return (i, l) => (x(), s("div", { class: g(["image-input", {
+			"is-disabled": r.disabled,
+			"is-readonly": r.readonly
+		}]) }, [
+			r.title || r.showCount ? (x(), s("div", ka, [r.title ? (x(), s("span", {
 				key: 0,
 				class: "title",
 				textContent: E(r.title)
-			}, null, 8, Ea)) : o("", !0), r.showCount ? (x(), s("span", Da, E(O.value) + " 張", 1)) : o("", !0)])) : o("", !0),
-			c("div", Oa, [O.value === 0 ? (x(), s("div", m({
+			}, null, 8, Aa)) : o("", !0), r.showCount ? (x(), s("span", ja, E(T.value) + " 張", 1)) : o("", !0)])) : o("", !0),
+			c("div", Ma, [T.value === 0 ? (x(), s("div", m({
 				key: 0,
-				class: ["empty", { "is-drag": h.value }]
-			}, U), [
-				l[0] ||= u("<span class=\"icon\" aria-hidden=\"true\" data-v-c05e4edc><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-v-c05e4edc><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" data-v-c05e4edc></rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" data-v-c05e4edc></circle><path d=\"M21 15l-5-5L5 21\" data-v-c05e4edc></path></svg></span>", 1),
-				c("h3", { textContent: E(r.emptyTitle) }, null, 8, ka),
-				c("p", { textContent: E(r.emptyHint) }, null, 8, Aa)
+				class: ["empty", {
+					"is-drag": p.value,
+					"is-static": r.readonly
+				}]
+			}, r.readonly ? {} : ne), [
+				r.readonly ? o("", !0) : (x(), s("span", Na, [...l[0] ||= [c("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, [
+					c("rect", {
+						x: "3",
+						y: "3",
+						width: "18",
+						height: "18",
+						rx: "2"
+					}),
+					c("circle", {
+						cx: "8.5",
+						cy: "8.5",
+						r: "1.5"
+					}),
+					c("path", { d: "M21 15l-5-5L5 21" })
+				], -1)]])),
+				c("h3", { textContent: E(r.readonly ? "目前沒有圖片" : r.emptyTitle) }, null, 8, Pa),
+				r.readonly ? o("", !0) : (x(), s("p", {
+					key: 1,
+					textContent: E(r.emptyHint)
+				}, null, 8, Fa))
 			], 16)) : (x(), s(e, { key: 1 }, [(x(!0), s(e, null, w(r.modelValue, (e) => (x(), s("div", {
 				key: e.id,
 				class: "card"
 			}, [c("div", {
 				class: g(["thumb", { placeholder: !e.url }]),
-				onClick: (t) => R(e)
+				onClick: (t) => B(e)
 			}, [e.url ? (x(), s("img", {
 				key: 0,
 				src: e.url,
-				alt: e.name,
+				alt: M(e),
 				loading: "lazy"
-			}, null, 8, Ma)) : (x(), s("div", Na, "縮圖預覽")), l[1] ||= c("div", {
+			}, null, 8, La)) : (x(), s("div", Ra, "縮圖預覽")), l[1] ||= c("div", {
 				class: "zoom",
 				"aria-hidden": "true"
 			}, [c("svg", {
@@ -3896,20 +4005,20 @@ var ea = {
 				cx: "11",
 				cy: "11",
 				r: "7"
-			}), c("path", { d: "m21 21-4.3-4.3M11 8v6M8 11h6" })])], -1)], 10, ja), c("div", Pa, [
+			}), c("path", { d: "m21 21-4.3-4.3M11 8v6M8 11h6" })])], -1)], 10, Ia), c("div", za, [
 				c("div", {
 					class: "file-name",
-					title: e.name
-				}, E(e.name), 9, Fa),
-				c("div", Ia, [
-					c("span", null, E(k(e.size)), 1),
-					l[2] ||= c("span", { class: "dot-separator" }, null, -1),
-					c("span", null, E(M(e)), 1)
+					title: M(e)
+				}, E(M(e)), 9, Ba),
+				c("div", Va, [
+					e.size == null ? o("", !0) : (x(), s("span", Ha, E(O(e.size)), 1)),
+					e.size != null && e.width && e.height ? (x(), s("span", Ua)) : o("", !0),
+					e.width && e.height ? (x(), s("span", Wa, E(k(e)), 1)) : o("", !0)
 				]),
-				c("div", La, [c("button", {
+				c("div", Ga, [c("button", {
 					class: "action preview",
-					onClick: (t) => R(e)
-				}, [...l[3] ||= [c("svg", {
+					onClick: (t) => B(e)
+				}, [...l[2] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -3920,23 +4029,24 @@ var ea = {
 					cx: "12",
 					cy: "12",
 					r: "3"
-				})], -1), d(" 預覽 ", -1)]], 8, Ra), c("button", {
+				})], -1), d(" 預覽 ", -1)]], 8, Ka), r.readonly ? o("", !0) : (x(), s("button", {
+					key: 0,
 					class: "action delete",
 					"aria-label": "刪除",
 					disabled: r.disabled,
-					onClick: N((t) => te(e.id), ["stop"])
-				}, [...l[4] ||= [c("svg", {
+					onClick: N((t) => z(e.id), ["stop"])
+				}, [...l[3] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
 					"stroke-width": "2",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [c("path", { d: "M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }), c("path", { d: "M10 11v6M14 11v6" })], -1)]], 8, za)])
-			])]))), 128)), r.multiple ? (x(), s("div", m({
+				}, [c("path", { d: "M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }), c("path", { d: "M10 11v6M14 11v6" })], -1)]], 8, qa))])
+			])]))), 128)), r.multiple && !r.readonly ? (x(), s("div", m({
 				key: 0,
-				class: ["add-card", { "is-drag": h.value }]
-			}, U), [...l[5] ||= [
+				class: ["add-card", { "is-drag": p.value }]
+			}, ne), [...l[4] ||= [
 				c("span", {
 					class: "plus",
 					"aria-hidden": "true"
@@ -3952,19 +4062,19 @@ var ea = {
 				c("span", { class: "hint" }, "點擊或拖放檔案 · JPG / PNG / WebP / GIF", -1)
 			]], 16)) : o("", !0)], 64))]),
 			(x(), a(t, { to: "body" }, [f(n, { name: "ii-modal" }, {
-				default: j(() => [D(y) ? (x(), s("div", {
+				default: j(() => [D(_) ? (x(), s("div", {
 					key: 0,
 					class: "ii-modal",
-					onClick: N(z, ["self"])
-				}, [c("div", Ba, [c("div", Va, [_.value?.url ? (x(), s("img", {
+					onClick: N(V, ["self"])
+				}, [c("div", Ja, [c("div", Ya, [h.value?.url ? (x(), s("img", {
 					key: 0,
-					src: _.value.url,
-					alt: _.value.name
-				}, null, 8, Ha)) : (x(), s("div", Ua, " 示範圖片 · 上傳真實檔案即可在此檢視 "))]), c("div", Wa, [c("div", Ga, [c("div", Ka, E(_.value?.name), 1), c("div", qa, E(B.value), 1)]), c("button", {
+					src: h.value.url,
+					alt: h.value ? M(h.value) : ""
+				}, null, 8, Xa)) : (x(), s("div", Za, " 示範圖片 · 上傳真實檔案即可在此檢視 "))]), c("div", Qa, [c("div", $a, [c("div", eo, E(h.value ? M(h.value) : ""), 1), c("div", to, E(H.value), 1)]), c("button", {
 					class: "ii-modal-close",
 					"aria-label": "關閉",
-					onClick: z
-				}, [...l[6] ||= [c("svg", {
+					onClick: V
+				}, [...l[5] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -3976,32 +4086,40 @@ var ea = {
 			})]))
 		], 2));
 	}
-}), [["__scopeId", "data-v-c05e4edc"]]), Ya = {
+}), [["__scopeId", "data-v-0531aeda"]]), ro = {
 	key: 0,
 	class: "head"
-}, Xa = ["textContent"], Za = {
+}, io = ["textContent"], ao = {
 	key: 1,
 	class: "count-chip"
-}, Qa = ["textContent"], $a = ["textContent"], eo = {
+}, oo = {
+	key: 0,
+	class: "icon",
+	"aria-hidden": "true"
+}, so = ["textContent"], co = ["textContent"], lo = {
 	key: 2,
 	class: "list"
-}, to = [
+}, uo = [
 	"src",
+	"onLoadedmetadata",
 	"onTimeupdate",
 	"onEnded"
-], no = [
+], fo = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], ro = {
+], po = {
 	key: 0,
 	viewBox: "0 0 24 24",
 	fill: "currentColor"
-}, io = {
+}, mo = {
 	key: 1,
 	viewBox: "0 0 24 24",
 	fill: "currentColor"
-}, ao = { class: "meta" }, oo = ["title"], so = { class: "sub" }, co = ["onMousedown", "onTouchstart"], lo = { class: "time" }, uo = ["disabled", "onClick"], fo = { class: "meta" }, po = { class: "name" }, mo = 256, ho = 5, go = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, ho = { class: "meta" }, go = ["title"], _o = { class: "sub" }, vo = ["onMousedown", "onTouchstart"], yo = {
+	key: 1,
+	class: "track"
+}, bo = { class: "time" }, xo = ["disabled", "onClick"], So = { class: "meta" }, Co = { class: "name" }, wo = 256, To = 5, Eo = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NAudioSelect",
 	props: {
 		modelValue: { default: () => [] },
@@ -4015,6 +4133,10 @@ var ea = {
 			type: Boolean,
 			default: !1
 		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
 		title: { default: "" },
 		showCount: {
 			type: Boolean,
@@ -4035,81 +4157,110 @@ var ea = {
 		"error"
 	],
 	setup(t, { emit: n }) {
-		let r = n, { confirm: a } = Rt(), l = C(!1), d = C([]), f = C(null), p = S({}), h = S({}), y = S({}), b = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map(), D = (e, t) => {
-			t ? b.set(e, t) : b.delete(e);
-		}, O = i(() => t.modelValue.length), k = (e) => e == null ? "—" : e < 1024 ? e + " B" : e < 1048576 ? (e / 1024).toFixed(0) + " KB" : e < 1073741824 ? (e / 1048576).toFixed(1) + " MB" : (e / 1073741824).toFixed(2) + " GB", A = (e) => {
+		let r = /* @__PURE__ */ new Map(), a = (e, t, n) => {
+			let i = r.get(e);
+			if (i) return i.refCount += 1, i;
+			let a = {
+				peaks: t,
+				duration: n,
+				refCount: 1
+			};
+			return r.set(e, a), a;
+		}, l = (e, t) => {
+			if (!e) return;
+			let n = r.get(e);
+			n && (--n.refCount, t && n.refCount <= 0 && r.delete(e));
+		}, f = n, { confirm: p } = Rt(), h = C(!1), y = C([]), b = C(null), T = S({}), D = S({}), O = S({}), k = /* @__PURE__ */ new Set(), j = /* @__PURE__ */ new Map(), M = (e, t, n) => {
+			a(e, t, n), j.set(e, (j.get(e) ?? 0) + 1);
+		}, P = (e, t) => {
+			if (!e) return;
+			let n = j.get(e) ?? 0;
+			n <= 0 || (n === 1 ? j.delete(e) : j.set(e, n - 1), l(e, t));
+		}, F = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map(), ee = (e, t) => {
+			t ? F.set(e, t) : F.delete(e);
+		}, te = i(() => t.modelValue.length), L = (e) => e == null ? "—" : e < 1024 ? e + " B" : e < 1048576 ? (e / 1024).toFixed(0) + " KB" : e < 1073741824 ? (e / 1048576).toFixed(1) + " MB" : (e / 1073741824).toFixed(2) + " GB", R = (e) => {
 			if (e == null || isNaN(e)) return "0:00";
 			let t = Math.floor(e), n = Math.floor(t / 60), r = t % 60;
 			return n + ":" + (r < 10 ? "0" : "") + r;
-		}, j = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : "a" + Math.random().toString(36).slice(2, 9), M = (e) => {
+		}, z = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : "a" + Math.random().toString(36).slice(2, 9), B = (e) => {
+			if (e.name) return e.name;
+			try {
+				let t = new URL(e.url, window.location.href).pathname;
+				return decodeURIComponent(t.split("/").filter(Boolean).pop() ?? "音訊");
+			} catch {
+				return "音訊";
+			}
+		}, V = (e) => {
+			e?.startsWith("blob:") && URL.revokeObjectURL(e);
+		}, H = (e) => {
 			let n = t.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
 			if (n.length === 0) return e.type.startsWith("audio/");
 			let r = e.type.toLowerCase(), i = e.name.toLowerCase();
 			return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r === e);
-		}, P = null, ee = () => (P ||= new (window.AudioContext || window.webkitAudioContext)(), P), F = async (e) => {
-			let t = await e.arrayBuffer(), n = await ee().decodeAudioData(t.slice(0)), r = n.getChannelData(0), i = Math.floor(r.length / mo) || 1, a = Array(mo), o = 0;
-			for (let e = 0; e < mo; e++) {
-				let t = 0, n = e * i, s = Math.min(r.length, n + i);
-				for (let e = n; e < s; e++) {
-					let n = Math.abs(r[e]);
-					n > t && (t = n);
+		}, U = null, W = () => (U ||= new (window.AudioContext || window.webkitAudioContext)(), U), ne = async (e) => {
+			let t = await W().decodeAudioData(e.slice(0)), n = t.getChannelData(0), r = Math.floor(n.length / wo) || 1, i = Array(wo), a = 0;
+			for (let e = 0; e < wo; e++) {
+				let t = 0, o = e * r, s = Math.min(n.length, o + r);
+				for (let e = o; e < s; e++) {
+					let r = Math.abs(n[e]);
+					r > t && (t = r);
 				}
-				a[e] = t, t > o && (o = t);
+				i[e] = t, t > a && (a = t);
 			}
-			let s = o > 0 ? 1 / o : 1;
-			for (let e = 0; e < mo; e++) a[e] = Math.max(.06, a[e] * s);
+			let o = a > 0 ? 1 / a : 1;
+			for (let e = 0; e < wo; e++) i[e] = Math.max(.06, i[e] * o);
 			return {
-				peaks: a,
-				duration: n.duration
+				peaks: i,
+				duration: t.duration
 			};
-		}, I = (e) => {
-			let t = T.get(e), n = p[e];
+		}, re = (e) => e.arrayBuffer().then((e) => ne(e)), G = (e) => {
+			let t = I.get(e), n = T[e];
 			if (!t || !n) return;
 			let r = t.clientWidth;
 			if (r <= 0) {
-				requestAnimationFrame(() => I(e));
+				requestAnimationFrame(() => G(e));
 				return;
 			}
-			let i = Math.max(8, Math.min(n.length, Math.floor((r + 2) / ho)));
-			if (h[e] && h[e].length === i) return;
+			let i = Math.max(8, Math.min(n.length, Math.floor((r + 2) / To)));
+			if (D[e] && D[e].length === i) return;
 			let a = Array(i);
 			for (let e = 0; e < i; e++) {
 				let t = Math.floor(e * n.length / i), r = Math.max(t + 1, Math.floor((e + 1) * n.length / i)), o = 0;
 				for (let e = t; e < r; e++) n[e] > o && (o = n[e]);
 				a[e] = o;
 			}
-			h[e] = a;
-		}, L = typeof ResizeObserver < "u" ? new ResizeObserver((e) => {
+			D[e] = a;
+		}, K = typeof ResizeObserver < "u" ? new ResizeObserver((e) => {
 			e.forEach((e) => {
 				let t = e.target.dataset.waveId;
-				t && I(t);
+				t && G(t);
 			});
-		}) : null, te = (e, t) => {
-			let n = T.get(e);
-			if (n && L && L.unobserve(n), t) {
+		}) : null, ie = (e, t) => {
+			let n = I.get(e);
+			if (n && K && K.unobserve(n), t) {
 				let n = t;
-				n.dataset.waveId = e, T.set(e, n), L ? L.observe(n) : I(e);
-			} else T.delete(e);
-		}, R = (e) => {
-			if (t.disabled) return;
-			let n = [], i = !1;
+				n.dataset.waveId = e, I.set(e, n), K ? K.observe(n) : G(e);
+			} else I.delete(e);
+		}, q = (e) => {
+			if (t.disabled || t.readonly) return;
+			let n = [], r = !1;
 			Array.prototype.forEach.call(e, (e) => {
-				if (!M(e)) {
-					r("error", {
+				if (!H(e)) {
+					f("error", {
 						type: "type",
 						file: e
 					});
 					return;
 				}
 				if (t.maxSize > 0 && e.size > t.maxSize * 1024 * 1024) {
-					r("error", {
+					f("error", {
 						type: "size",
 						file: e
 					});
 					return;
 				}
-				if (!t.multiple && t.modelValue.length + n.length + d.value.length >= 1) {
-					i ||= (r("error", {
+				if (!t.multiple && t.modelValue.length + n.length + y.value.length >= 1) {
+					r ||= (f("error", {
 						type: "count",
 						file: e
 					}), !0);
@@ -4117,139 +4268,196 @@ var ea = {
 				}
 				n.push(e);
 			}), n.length !== 0 && n.forEach((e) => {
-				let n = "p" + j();
-				d.value.push({
+				let n = "p" + z();
+				y.value.push({
 					tag: n,
 					name: e.name
-				}), F(e).then(({ peaks: n, duration: i }) => {
-					let a = {
-						id: j(),
+				}), re(e).then(({ peaks: n, duration: r }) => {
+					let i = {
+						id: z(),
 						file: e,
 						name: e.name,
 						size: e.size,
-						duration: i,
+						duration: r,
 						url: URL.createObjectURL(e)
 					};
-					p[a.id] = n, y[a.id] = 0;
-					let o = [...t.modelValue, a];
-					r("update:modelValue", o), r("change", o), r("add", [a]);
+					T[i.id] = n, O[i.id] = 0, k.add(i.id), M(i.url, n, r);
+					let a = [...t.modelValue, i];
+					f("update:modelValue", a), f("change", a), f("add", [i]);
 				}).catch(() => {
-					r("error", {
+					f("error", {
 						type: "type",
 						file: e
 					});
 				}).finally(() => {
-					d.value = d.value.filter((e) => e.tag !== n);
+					y.value = y.value.filter((e) => e.tag !== n);
 				});
 			});
-		}, z = async () => {
-			if (!t.disabled) if (t.multiple) {
+		}, ae = async () => {
+			if (!(t.disabled || t.readonly)) if (t.multiple) {
 				let e = await $.input.custom(t.accept, !0);
 				if (e.length === 0) return;
-				R(e.map((e) => e.file));
+				q(e.map((e) => e.file));
 			} else {
 				let e = await $.input.custom(t.accept, !1);
 				if (!e) return;
-				R([e.file]);
+				q([e.file]);
 			}
-		}, B = async (e) => {
-			if (t.disabled) return;
+		}, oe = async (e) => {
+			if (t.disabled || t.readonly) return;
 			let n = t.modelValue.find((t) => t.id === e);
-			if (!n || !await a(`確定要移除「${n.name}」嗎？`, {
+			if (!n || !await p(`確定要移除「${B(n)}」嗎？`, {
 				title: "移除音訊",
 				status: "danger",
 				confirmText: "移除",
 				cancelText: "取消"
 			})) return;
-			f.value === e && V(), n.url && URL.revokeObjectURL(n.url), delete p[e], delete h[e], delete y[e];
-			let i = t.modelValue.filter((t) => t.id !== e);
-			r("update:modelValue", i), r("change", i), r("remove", n);
-		}, V = () => {
-			let e = f.value;
-			e && b.get(e)?.pause(), f.value = null;
-		}, H = (e) => {
-			let n = b.get(e);
+			b.value === e && se(), V(n.url), P(n.url, !0), delete T[e], delete D[e], delete O[e], k.delete(e);
+			let r = t.modelValue.filter((t) => t.id !== e);
+			f("update:modelValue", r), f("change", r), f("remove", n);
+		}, se = () => {
+			let e = b.value;
+			e && F.get(e)?.pause(), b.value = null;
+		}, ce = (e) => {
+			let n = F.get(e);
 			if (!n) return;
-			if (f.value === e) {
-				n.pause(), f.value = null;
+			if (b.value === e) {
+				n.pause(), b.value = null;
 				return;
 			}
-			f.value && b.get(f.value)?.pause();
+			b.value && F.get(b.value)?.pause();
 			let r = t.modelValue.find((t) => t.id === e);
-			(n.ended || r?.duration && n.currentTime >= r.duration) && (n.currentTime = 0), f.value = e, n.play();
-		}, U = (e, t) => {
-			y[e] = t.target.currentTime;
-		}, W = (e) => {
-			f.value === e && (f.value = null), y[e] = 0;
-		}, ne = (e, t) => {
-			let n = b.get(e), r = T.get(e);
+			(n.ended || r?.duration && n.currentTime >= r.duration) && (n.currentTime = 0), b.value = e, n.play();
+		}, le = (e, t) => {
+			O[e] = t.target.currentTime;
+		}, ue = (e) => {
+			b.value === e && (b.value = null), O[e] = 0;
+		}, de = (e, t) => {
+			let n = F.get(e), r = I.get(e);
 			if (!n || !r || !n.duration || isNaN(n.duration)) return;
 			let i = r.getBoundingClientRect();
-			n.currentTime = Math.min(Math.max((t - i.left) / i.width, 0), 1) * n.duration, y[e] = n.currentTime;
-		}, re = (e, n) => {
+			n.currentTime = Math.min(Math.max((t - i.left) / i.width, 0), 1) * n.duration, O[e] = n.currentTime;
+		}, fe = (e, n) => {
 			if (t.disabled) return;
-			n.preventDefault(), ne(e, ("touches" in n ? n.touches[0] : n).clientX);
+			n.preventDefault(), de(e, ("touches" in n ? n.touches[0] : n).clientX);
 			let r = (t) => {
-				ne(e, ("touches" in t ? t.touches[0] : t).clientX);
+				de(e, ("touches" in t ? t.touches[0] : t).clientX);
 			}, i = () => {
 				window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", i), window.removeEventListener("touchmove", r), window.removeEventListener("touchend", i);
 			};
 			window.addEventListener("mousemove", r), window.addEventListener("mouseup", i), window.addEventListener("touchmove", r, { passive: !1 }), window.addEventListener("touchend", i);
-		}, G = (e, t) => {
+		}, pe = (e, t) => {
 			if (!e.duration || isNaN(e.duration)) return !1;
-			let n = h[e.id]?.length || 0;
+			let n = D[e.id]?.length || 0;
 			if (n === 0) return !1;
-			let r = (y[e.id] || 0) / e.duration;
+			let r = (O[e.id] || 0) / e.duration;
 			return (t + .5) / n <= r;
+		}, me = (e) => !e.duration || isNaN(e.duration) ? 0 : Math.min(1, (O[e.id] || 0) / e.duration), he = (e, n) => {
+			let r = t.modelValue.find((t) => t.id === e);
+			if (!r || r.duration != null) return;
+			let i = t.modelValue.map((t) => t.id === e ? {
+				...t,
+				duration: n
+			} : t);
+			f("update:modelValue", i), f("change", i);
+		}, ge = (e, n, r) => {
+			t.modelValue.some((t) => t.id === e) && (T[e] = n, G(e), he(e, r));
+		}, _e = async (e) => {
+			O[e.id] ?? (O[e.id] = 0);
+			let t = r.get(e.url);
+			if (t) {
+				M(e.url, t.peaks, t.duration), ge(e.id, t.peaks, t.duration);
+				return;
+			}
+			try {
+				let { peaks: t, duration: n } = await ne(await (await fetch(e.url)).arrayBuffer());
+				M(e.url, t, n), ge(e.id, t, n);
+			} catch {}
+		}, ve = (e, t) => {
+			let n = t.target.duration;
+			!isNaN(n) && isFinite(n) && he(e, n);
 		};
-		v(() => {
-			t.autoRevoke && t.modelValue.forEach((e) => {
-				e.url && URL.revokeObjectURL(e.url);
-			}), L?.disconnect(), P &&= (P.close(), null);
+		A(() => t.modelValue, (e) => {
+			e.forEach((e) => {
+				!e.url || k.has(e.id) || (k.add(e.id), T[e.id] || _e(e));
+			});
+		}, { immediate: !0 }), v(() => {
+			t.autoRevoke && t.modelValue.forEach((e) => V(e.url)), j.forEach((e, t) => {
+				for (let n = 0; n < e; n++) l(t, !1);
+			}), j.clear(), K?.disconnect(), U &&= (U.close(), null);
 		});
-		let ie = {
-			onClick: z,
+		let J = {
+			onClick: ae,
 			onDragenter: (e) => {
-				t.disabled || (e.preventDefault(), l.value = !0);
+				t.disabled || t.readonly || (e.preventDefault(), h.value = !0);
 			},
 			onDragover: (e) => e.preventDefault(),
 			onDragleave: (e) => {
-				e.preventDefault(), l.value = !1;
+				e.preventDefault(), h.value = !1;
 			},
 			onDrop: (e) => {
-				t.disabled || (e.preventDefault(), l.value = !1, e.dataTransfer?.files?.length && R(e.dataTransfer.files));
+				t.disabled || t.readonly || (e.preventDefault(), h.value = !1, e.dataTransfer?.files?.length && q(e.dataTransfer.files));
 			}
 		};
-		return (n, r) => (x(), s("div", { class: g(["audio-input", { "is-disabled": t.disabled }]) }, [t.title || t.showCount ? (x(), s("div", Ya, [t.title ? (x(), s("span", {
+		return (n, r) => (x(), s("div", { class: g(["audio-input", {
+			"is-disabled": t.disabled,
+			"is-readonly": t.readonly
+		}]) }, [t.title || t.showCount ? (x(), s("div", ro, [t.title ? (x(), s("span", {
 			key: 0,
 			class: "title",
 			textContent: E(t.title)
-		}, null, 8, Xa)) : o("", !0), t.showCount ? (x(), s("span", Za, E(O.value) + " 首", 1)) : o("", !0)])) : o("", !0), O.value === 0 && d.value.length === 0 ? (x(), s("div", m({
+		}, null, 8, io)) : o("", !0), t.showCount ? (x(), s("span", ao, E(te.value) + " 首", 1)) : o("", !0)])) : o("", !0), te.value === 0 && y.value.length === 0 ? (x(), s("div", m({
 			key: 1,
-			class: ["empty", { "is-drag": l.value }]
-		}, ie), [
-			r[0] ||= u("<span class=\"icon\" aria-hidden=\"true\" data-v-ef784628><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" data-v-ef784628><path d=\"M9 18V5l12-2v13\" data-v-ef784628></path><circle cx=\"6\" cy=\"18\" r=\"3\" data-v-ef784628></circle><circle cx=\"18\" cy=\"16\" r=\"3\" data-v-ef784628></circle></svg></span>", 1),
-			c("h3", { textContent: E(t.emptyTitle) }, null, 8, Qa),
-			c("p", { textContent: E(t.emptyHint) }, null, 8, $a)
-		], 16)) : (x(), s("div", eo, [
+			class: ["empty", {
+				"is-drag": h.value,
+				"is-static": t.readonly
+			}]
+		}, t.readonly ? {} : J), [
+			t.readonly ? o("", !0) : (x(), s("span", oo, [...r[0] ||= [c("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.7",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}, [
+				c("path", { d: "M9 18V5l12-2v13" }),
+				c("circle", {
+					cx: "6",
+					cy: "18",
+					r: "3"
+				}),
+				c("circle", {
+					cx: "18",
+					cy: "16",
+					r: "3"
+				})
+			], -1)]])),
+			c("h3", { textContent: E(t.readonly ? "目前沒有音訊" : t.emptyTitle) }, null, 8, so),
+			t.readonly ? o("", !0) : (x(), s("p", {
+				key: 1,
+				textContent: E(t.emptyHint)
+			}, null, 8, co))
+		], 16)) : (x(), s("div", lo, [
 			(x(!0), s(e, null, w(t.modelValue, (n) => (x(), s("div", {
 				key: n.id,
-				class: g(["row", { "is-playing": f.value === n.id }])
+				class: g(["row", { "is-playing": b.value === n.id }])
 			}, [
 				c("audio", {
 					ref_for: !0,
-					ref: (e) => D(n.id, e),
+					ref: (e) => ee(n.id, e),
 					src: n.url,
 					preload: "metadata",
-					onTimeupdate: (e) => U(n.id, e),
-					onEnded: (e) => W(n.id)
-				}, null, 40, to),
+					onLoadedmetadata: (e) => ve(n.id, e),
+					onTimeupdate: (e) => le(n.id, e),
+					onEnded: (e) => ue(n.id)
+				}, null, 40, uo),
 				c("button", {
 					class: "play-btn",
-					"aria-label": f.value === n.id ? "暫停" : "播放",
+					"aria-label": b.value === n.id ? "暫停" : "播放",
 					disabled: !n.url,
-					onClick: (e) => H(n.id)
-				}, [f.value === n.id ? (x(), s("svg", ro, [...r[1] ||= [c("rect", {
+					onClick: (e) => ce(n.id)
+				}, [b.value === n.id ? (x(), s("svg", po, [...r[1] ||= [c("rect", {
 					x: "6",
 					y: "5",
 					width: "4",
@@ -4261,28 +4469,32 @@ var ea = {
 					width: "4",
 					height: "14",
 					rx: "1"
-				}, null, -1)]])) : (x(), s("svg", io, [...r[2] ||= [c("path", { d: "M8 5v14l11-7z" }, null, -1)]]))], 8, no),
-				c("div", ao, [c("div", {
+				}, null, -1)]])) : (x(), s("svg", mo, [...r[2] ||= [c("path", { d: "M8 5v14l11-7z" }, null, -1)]]))], 8, fo),
+				c("div", ho, [c("div", {
 					class: "name",
-					title: n.name
-				}, E(n.name), 9, oo), c("div", so, E(k(n.size)) + " · " + E(A(n.duration)), 1)]),
+					title: B(n)
+				}, E(B(n)), 9, go), c("div", _o, [n.size == null ? o("", !0) : (x(), s(e, { key: 0 }, [d(E(L(n.size)) + " · ", 1)], 64)), d(" " + E(R(n.duration)), 1)])]),
 				c("div", {
-					class: "wave",
+					class: g(["wave", { "is-track": !D[n.id]?.length }]),
 					ref_for: !0,
-					ref: (e) => te(n.id, e),
-					onMousedown: (e) => re(n.id, e),
-					onTouchstart: (e) => re(n.id, e)
-				}, [(x(!0), s(e, null, w(h[n.id] || [], (e, t) => (x(), s("span", {
+					ref: (e) => ie(n.id, e),
+					onMousedown: (e) => fe(n.id, e),
+					onTouchstart: (e) => fe(n.id, e)
+				}, [D[n.id]?.length ? (x(!0), s(e, { key: 0 }, w(D[n.id], (e, t) => (x(), s("span", {
 					key: t,
-					class: g(["bar", { "is-played": G(n, t) }]),
+					class: g(["bar", { "is-played": pe(n, t) }]),
 					style: _({ height: Math.max(2, Math.round(e * 34)) + "px" })
-				}, null, 6))), 128))], 40, co),
-				c("div", lo, E(A(y[n.id] || 0)) + " / " + E(A(n.duration)), 1),
-				c("button", {
+				}, null, 6))), 128)) : (x(), s("div", yo, [c("div", {
+					class: "track-fill",
+					style: _({ width: me(n) * 100 + "%" })
+				}, null, 4)]))], 42, vo),
+				c("div", bo, E(R(O[n.id] || 0)) + " / " + E(R(n.duration)), 1),
+				t.readonly ? o("", !0) : (x(), s("button", {
+					key: 0,
 					class: "del-btn",
 					"aria-label": "刪除",
 					disabled: t.disabled,
-					onClick: N((e) => B(n.id), ["stop"])
+					onClick: N((e) => oe(n.id), ["stop"])
 				}, [...r[3] ||= [c("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
@@ -4290,9 +4502,9 @@ var ea = {
 					"stroke-width": "1.8",
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round"
-				}, [c("path", { d: "M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" })], -1)]], 8, uo)
+				}, [c("path", { d: "M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" })], -1)]], 8, xo))
 			], 2))), 128)),
-			(x(!0), s(e, null, w(d.value, (e) => (x(), s("div", {
+			(x(!0), s(e, null, w(y.value, (e) => (x(), s("div", {
 				key: e.tag,
 				class: "row is-pending"
 			}, [r[5] ||= c("span", {
@@ -4304,20 +4516,20 @@ var ea = {
 				stroke: "currentColor",
 				"stroke-width": "2",
 				"stroke-linecap": "round"
-			}, [c("path", { d: "M12 3a9 9 0 1 0 9 9" })])], -1), c("div", fo, [c("div", po, E(e.name), 1), r[4] ||= c("div", { class: "sub" }, "解析波形中…", -1)])]))), 128)),
-			t.multiple ? (x(), s("div", m({
+			}, [c("path", { d: "M12 3a9 9 0 1 0 9 9" })])], -1), c("div", So, [c("div", Co, E(e.name), 1), r[4] ||= c("div", { class: "sub" }, "解析波形中…", -1)])]))), 128)),
+			t.multiple && !t.readonly ? (x(), s("div", m({
 				key: 0,
-				class: ["add", { "is-drag": l.value }]
-			}, ie), [...r[6] ||= [u("<span class=\"plus\" aria-hidden=\"true\" data-v-ef784628><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" data-v-ef784628><path d=\"M12 5v14M5 12h14\" data-v-ef784628></path></svg></span><div class=\"add-text\" data-v-ef784628><div class=\"t\" data-v-ef784628>新增音訊</div><div class=\"d\" data-v-ef784628>點擊或拖放檔案 · MP3 / WAV / OGG / M4A</div></div>", 2)]], 16)) : o("", !0)
+				class: ["add", { "is-drag": h.value }]
+			}, J), [...r[6] ||= [u("<span class=\"plus\" aria-hidden=\"true\" data-v-a06aebbd><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" data-v-a06aebbd><path d=\"M12 5v14M5 12h14\" data-v-a06aebbd></path></svg></span><div class=\"add-text\" data-v-a06aebbd><div class=\"t\" data-v-a06aebbd>新增音訊</div><div class=\"d\" data-v-a06aebbd>點擊或拖放檔案 · MP3 / WAV / OGG / M4A</div></div>", 2)]], 16)) : o("", !0)
 		]))], 2));
 	}
-}), [["__scopeId", "data-v-ef784628"]]), _o = { class: "header" }, vo = { class: "brand-logo" }, yo = { class: "logo-text" }, bo = { class: "logo-icon" }, xo = { class: "nav" }, So = ["onClick"], Co = ["innerHTML"], wo = { class: "nav-list" }, To = ["href", "onClick"], Eo = ["innerHTML"], Do = { class: "nav-text" }, Oo = ["href", "onClick"], ko = { class: "title no-children" }, Ao = ["innerHTML"], jo = { class: "user-capsule" }, Mo = { class: "user-avatar" }, No = ["src"], Po = {
+}), [["__scopeId", "data-v-a06aebbd"]]), Do = { class: "header" }, Oo = { class: "brand-logo" }, ko = { class: "logo-text" }, Ao = { class: "logo-icon" }, jo = { class: "nav" }, Mo = ["onClick"], No = ["innerHTML"], Po = { class: "nav-list" }, Fo = ["href", "onClick"], Io = ["innerHTML"], Lo = { class: "nav-text" }, Ro = ["href", "onClick"], zo = { class: "title no-children" }, Bo = ["innerHTML"], Vo = { class: "user-capsule" }, Ho = { class: "user-avatar" }, Uo = ["src"], Wo = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "36",
 	height: "36",
 	viewBox: "0 0 36 36"
-}, Fo = { class: "user-info" }, Io = { class: "user-name-row" }, Lo = { class: "user-name" }, Ro = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, Go = { class: "user-info" }, Ko = { class: "user-name-row" }, qo = { class: "user-name" }, Jo = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NSidebar",
 	props: {
 		title: { default: "" },
@@ -4370,8 +4582,8 @@ var ea = {
 				class: "content",
 				onMouseenter: v[2] ||= (e) => p.value = !0
 			}, [
-				T(r.$slots, "header", {}, () => [c("div", _o, [c("div", vo, [c("span", yo, E(n.title), 1), c("span", bo, E(n.title.substring(0, 1).toUpperCase()), 1)])])], !0),
-				c("div", xo, [(x(!0), s(e, null, w(n.menus, (t) => (x(), s(e, null, [t.children?.length ? (x(), s("div", {
+				T(r.$slots, "header", {}, () => [c("div", Do, [c("div", Oo, [c("span", ko, E(n.title), 1), c("span", Ao, E(n.title.substring(0, 1).toUpperCase()), 1)])])], !0),
+				c("div", jo, [(x(!0), s(e, null, w(n.menus, (t) => (x(), s(e, null, [t.children?.length ? (x(), s("div", {
 					key: 0,
 					class: g(["menu", {
 						open: D(i)(t.title),
@@ -4380,7 +4592,7 @@ var ea = {
 				}, [c("div", {
 					class: "title",
 					onClick: (e) => D(o)(t.title)
-				}, [c("div", null, [c("div", { innerHTML: t.icon }, null, 8, Co), c("span", null, E(t.title), 1)]), v[6] ||= c("svg", {
+				}, [c("div", null, [c("div", { innerHTML: t.icon }, null, 8, No), c("span", null, E(t.title), 1)]), v[6] ||= c("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
 					width: "14",
 					height: "14",
@@ -4391,23 +4603,23 @@ var ea = {
 					"stroke-linecap": "round",
 					"stroke-linejoin": "round",
 					class: "icon"
-				}, [c("path", { d: "m9 18 6-6-6-6" })], -1)], 8, So), c("div", wo, [c("div", null, [(x(!0), s(e, null, w(t.children, (e) => (x(), s("a", {
+				}, [c("path", { d: "m9 18 6-6-6-6" })], -1)], 8, Mo), c("div", Po, [c("div", null, [(x(!0), s(e, null, w(t.children, (e) => (x(), s("a", {
 					href: e.route,
 					onClick: N((t) => h(e), ["prevent"])
-				}, [c("div", { class: g(["nav-item", { active: D(d)(e, n.currentPath) }]) }, [c("div", { innerHTML: e.icon }, null, 8, Eo), c("span", Do, E(e.title), 1)], 2)], 8, To))), 256))])])], 2)) : (x(), s("div", {
+				}, [c("div", { class: g(["nav-item", { active: D(d)(e, n.currentPath) }]) }, [c("div", { innerHTML: e.icon }, null, 8, Io), c("span", Lo, E(e.title), 1)], 2)], 8, Fo))), 256))])])], 2)) : (x(), s("div", {
 					key: 1,
 					class: g(["menu", { active: t.route === n.currentPath }])
 				}, [c("a", {
 					href: t.route,
 					onClick: N((e) => _(t), ["prevent"])
-				}, [c("div", ko, [c("div", null, [c("div", { innerHTML: t.icon }, null, 8, Ao), c("span", null, E(t.title), 1)])])], 8, Oo)], 2))], 64))), 256))]),
-				c("div", jo, [T(r.$slots, "user", {}, () => [
-					c("div", Mo, [n.userAvatarUrl ? (x(), s("img", {
+				}, [c("div", zo, [c("div", null, [c("div", { innerHTML: t.icon }, null, 8, Bo), c("span", null, E(t.title), 1)])])], 8, Ro)], 2))], 64))), 256))]),
+				c("div", Vo, [T(r.$slots, "user", {}, () => [
+					c("div", Ho, [n.userAvatarUrl ? (x(), s("img", {
 						key: 0,
 						src: n.userAvatarUrl,
 						alt: "User Avatar"
-					}, null, 8, No)) : (x(), s("svg", Po, [...v[7] ||= [u("<defs data-v-2c73c218><clipPath id=\"avatarClip\" data-v-2c73c218><circle cx=\"18\" cy=\"18\" r=\"18\" data-v-2c73c218></circle></clipPath></defs><circle cx=\"18\" cy=\"18\" r=\"18\" fill=\"#dbeafe\" data-v-2c73c218></circle><g clip-path=\"url(#avatarClip)\" data-v-2c73c218><circle cx=\"18\" cy=\"14\" r=\"6\" fill=\"#2563eb\" data-v-2c73c218></circle><path d=\"M6,34 Q6,24 18,24 Q30,24 30,34\" fill=\"#2563eb\" data-v-2c73c218></path></g>", 3)]]))]),
-					c("div", Fo, [c("div", Io, [c("span", Lo, E(n.userName), 1)])]),
+					}, null, 8, Uo)) : (x(), s("svg", Wo, [...v[7] ||= [u("<defs data-v-2c73c218><clipPath id=\"avatarClip\" data-v-2c73c218><circle cx=\"18\" cy=\"18\" r=\"18\" data-v-2c73c218></circle></clipPath></defs><circle cx=\"18\" cy=\"18\" r=\"18\" fill=\"#dbeafe\" data-v-2c73c218></circle><g clip-path=\"url(#avatarClip)\" data-v-2c73c218><circle cx=\"18\" cy=\"14\" r=\"6\" fill=\"#2563eb\" data-v-2c73c218></circle><path d=\"M6,34 Q6,24 18,24 Q30,24 30,34\" fill=\"#2563eb\" data-v-2c73c218></path></g>", 3)]]))]),
+					c("div", Go, [c("div", Ko, [c("span", qo, E(n.userName), 1)])]),
 					f(z, {
 						class: "logout-btn",
 						intent: "error",
@@ -4446,7 +4658,7 @@ var ea = {
 			}, null, 2)]))
 		], 34));
 	}
-}), [["__scopeId", "data-v-2c73c218"]]), zo = { class: "layout" }, Bo = { class: "main-content" }, Vo = { class: "copyright" }, Ho = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}), [["__scopeId", "data-v-2c73c218"]]), Yo = { class: "layout" }, Xo = { class: "main-content" }, Zo = { class: "copyright" }, Qo = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NLayout",
 	props: {
 		title: { default: "NICKLABS" },
@@ -4462,7 +4674,7 @@ var ea = {
 	emits: ["logout", "navigate"],
 	setup(e, { emit: t }) {
 		let n = rn(), r = t;
-		return (t, i) => (x(), s("div", zo, [e.isShowSidebar ? (x(), a(Ro, {
+		return (t, i) => (x(), s("div", Yo, [e.isShowSidebar ? (x(), a(Jo, {
 			key: 0,
 			title: e.title,
 			userName: e.userName,
@@ -4478,18 +4690,18 @@ var ea = {
 			"isOpen",
 			"menus",
 			"currentPath"
-		])) : o("", !0), c("main", Bo, [T(t.$slots, "default", {}, void 0, !0), c("div", Vo, E(e.copyright), 1)])]));
+		])) : o("", !0), c("main", Xo, [T(t.$slots, "default", {}, void 0, !0), c("div", Zo, E(e.copyright), 1)])]));
 	}
-}), [["__scopeId", "data-v-41b1eb44"]]), Uo = { class: "topbar" }, Wo = { class: "topbar-left" }, Go = { class: "topbar-right" }, Ko = {
+}), [["__scopeId", "data-v-41b1eb44"]]), $o = { class: "topbar" }, es = { class: "topbar-left" }, ts = { class: "topbar-right" }, ns = {
 	key: 0,
 	class: "pill"
-}, qo = {
+}, rs = {
 	key: 0,
 	class: "name"
-}, Jo = {
+}, is = {
 	key: 1,
 	class: "separator"
-}, Yo = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, as = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NNavigation",
 	props: {
 		isShowSidebar: {
@@ -4514,7 +4726,7 @@ var ea = {
 		let n = t, r = () => {
 			document.fullscreenElement ? document.exitFullscreen?.() : document.documentElement.requestFullscreen();
 		};
-		return (t, i) => (x(), s("header", Uo, [c("div", Wo, [e.isShowSidebar ? (x(), a(z, {
+		return (t, i) => (x(), s("header", $o, [c("div", es, [e.isShowSidebar ? (x(), a(z, {
 			key: 0,
 			onClick: i[0] ||= (e) => n("toggleSidebar"),
 			padding: "8px"
@@ -4557,9 +4769,9 @@ var ea = {
 				c("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
 			], -1)]]),
 			_: 1
-		})) : o("", !0)]), c("div", Go, [e.isShowUser || e.isShowLogoutButton ? (x(), s("div", Ko, [
-			e.isShowUser ? (x(), s("span", qo, "Nick")) : o("", !0),
-			e.isShowUser && e.isShowLogoutButton ? (x(), s("div", Jo)) : o("", !0),
+		})) : o("", !0)]), c("div", ts, [e.isShowUser || e.isShowLogoutButton ? (x(), s("div", ns, [
+			e.isShowUser ? (x(), s("span", rs, "Nick")) : o("", !0),
+			e.isShowUser && e.isShowLogoutButton ? (x(), s("div", is)) : o("", !0),
 			e.isShowLogoutButton ? (x(), a(z, {
 				key: 2,
 				variant: "mute",
@@ -4585,10 +4797,10 @@ var ea = {
 			})) : o("", !0)
 		])) : o("", !0)])]));
 	}
-}), [["__scopeId", "data-v-f38a4beb"]]), Xo = { class: "brand" }, Zo = ["src", "alt"], Qo = {
+}), [["__scopeId", "data-v-f38a4beb"]]), os = { class: "brand" }, ss = ["src", "alt"], cs = {
 	key: 1,
 	class: "icon"
-}, $o = { key: 2 }, es = { key: 3 }, ts = /* @__PURE__ */ R(/* @__PURE__ */ p({
+}, ls = { key: 2 }, us = { key: 3 }, ds = /* @__PURE__ */ R(/* @__PURE__ */ p({
 	__name: "NLoginLayout",
 	props: {
 		backgroundImage: { default: "" },
@@ -4606,15 +4818,15 @@ var ea = {
 			radius: "xl",
 			class: "card"
 		}, {
-			default: j(() => [c("div", Xo, [
+			default: j(() => [c("div", os, [
 				t.value ? (x(), s("img", {
 					key: 0,
 					class: "logo-img",
 					src: e.logo,
 					alt: e.title
-				}, null, 8, Zo)) : (x(), s("div", Qo, E(e.logo), 1)),
-				e.title ? (x(), s("h1", $o, E(e.title), 1)) : o("", !0),
-				e.description ? (x(), s("p", es, E(e.description), 1)) : o("", !0)
+				}, null, 8, ss)) : (x(), s("div", cs, E(e.logo), 1)),
+				e.title ? (x(), s("h1", ls, E(e.title), 1)) : o("", !0),
+				e.description ? (x(), s("p", us, E(e.description), 1)) : o("", !0)
 			]), T(n.$slots, "default", {}, void 0, !0)]),
 			_: 3
 		})], 4));
@@ -4622,19 +4834,19 @@ var ea = {
 }), [["__scopeId", "data-v-f0866bc5"]]);
 //#endregion
 //#region src/composables/useRouteModal.ts
-function ns(e) {
+function fs(e) {
 	let t = i(() => {
-		let t = F();
+		let t = I();
 		return t ? t.currentRoute.value.matched.some((t) => t.name === e.routeName) : !1;
-	}), n = i(() => F()?.currentRoute.value.params ?? {});
+	}), n = i(() => I()?.currentRoute.value.params ?? {});
 	function r(t = {}) {
-		F()?.push({
+		I()?.push({
 			name: e.routeName,
 			params: t
 		});
 	}
 	function a() {
-		let t = F();
+		let t = I();
 		t && (window.history.state?.back ? t.back() : e.parentRouteName ? t.push({ name: e.parentRouteName }) : t.back());
 	}
 	return {
@@ -4646,12 +4858,12 @@ function ns(e) {
 }
 //#endregion
 //#region src/index.ts
-var rs = {
+var ps = {
 	NButton: z,
 	NBreadcrumb: re,
-	NInput: ue,
-	NTextarea: he,
-	NCheckbox: xe,
+	NInput: ce,
+	NTextarea: pe,
+	NCheckbox: ye,
 	NSelect: Oe,
 	NFileSelect: $t,
 	NForm: xn,
@@ -4668,18 +4880,18 @@ var rs = {
 	NDrawer: Ui,
 	NAlert: Qi,
 	NTable: nr,
-	NVideoSelect: wa,
-	NImageSelect: Ja,
-	NAudioSelect: go,
-	NLayout: Ho,
-	NNavigation: Yo,
-	NSidebar: Ro,
+	NVideoSelect: Oa,
+	NImageSelect: no,
+	NAudioSelect: Eo,
+	NLayout: Qo,
+	NNavigation: as,
+	NSidebar: Jo,
 	NCard: Sn,
-	NLoginLayout: ts
-}, is = { install(e, t = {}) {
-	Object.entries(rs).forEach(([t, n]) => {
+	NLoginLayout: ds
+}, ms = { install(e, t = {}) {
+	Object.entries(ps).forEach(([t, n]) => {
 		e.component(t, n);
-	}), t.router && ee(t.router);
+	}), t.router && F(t.router);
 } };
 //#endregion
-export { Qi as NAlert, go as NAudioSelect, z as NButton, Sn as NCard, xe as NCheckbox, wr as NCode, Mi as NDatePicker, Ui as NDrawer, Mn as NEmpty, $t as NFileSelect, xn as NForm, Ja as NImageSelect, ue as NInput, Ho as NLayout, or as NList, Un as NLoading, ts as NLoginLayout, Ri as NModal, Yo as NNavigation, Oe as NSelect, Ro as NSidebar, Er as NSwitch, nr as NTable, Dr as NTag, he as NTextarea, hr as NToast, Ni as NTooltip, wa as NVideoSelect, is as NickLabsUI, Rt as useAlert, H as useBreadcrumb, $i as useDisclosure, ns as useRouteModal, rn as useSidebarManager, lr as useToast };
+export { Qi as NAlert, Eo as NAudioSelect, z as NButton, Sn as NCard, ye as NCheckbox, wr as NCode, Mi as NDatePicker, Ui as NDrawer, Mn as NEmpty, $t as NFileSelect, xn as NForm, no as NImageSelect, ce as NInput, Qo as NLayout, or as NList, Un as NLoading, ds as NLoginLayout, Ri as NModal, as as NNavigation, Oe as NSelect, Jo as NSidebar, Er as NSwitch, nr as NTable, Dr as NTag, pe as NTextarea, hr as NToast, Ni as NTooltip, Oa as NVideoSelect, ms as NickLabsUI, Rt as useAlert, H as useBreadcrumb, $i as useDisclosure, fs as useRouteModal, rn as useSidebarManager, lr as useToast };