@poppy-ui/vue 0.5.6 → 0.5.7-beta.0

package/dist/public-D8Z0iHnm.js

@@ -0,0 +1,563 @@
+import { n as e } from "./symbol-Dy7mXgB5.js";
+import { n as t } from "./use-component-config-DfXvZ0-o.js";
+import { n } from "./build-class.util-Cp-ZBFgO.js";
+import { t as r } from "./is-true-B9ixxcRp.js";
+import { t as i } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { t as a } from "./ClassWrapper-DdnnHfAj.js";
+import { Fragment as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, inject as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, onMounted as x, onUnmounted as S, openBlock as C, provide as w, ref as T, renderList as E, renderSlot as D, resolveComponent as O, resolveDynamicComponent as k, shallowRef as A, toDisplayString as j, unref as M, useModel as N, useSlots as P, useTemplateRef as ee, watch as te, withCtx as F } from "vue";
+import { RouterLink as I } from "vue-router";
+import { ChevronDownIcon as ne, PlusIcon as re } from "@lucide/vue";
+//#region src/components/display/accordion/accordion.context.ts
+var L = Symbol("accordion"), ie = { class: "flex flex-col gap-2" }, R = /* @__PURE__ */ h({
+	__name: "Accordion",
+	props: /*@__PURE__*/ _({
+		multiple: { type: Boolean },
+		defaultOpen: {},
+		modelValue: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _([
+		"change",
+		"open",
+		"close",
+		"toggle"
+	], ["update:modelValue"]),
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = N(e, "modelValue"), a = n, o = A(r.defaultOpen ?? (r.multiple ? [] : null)), s = c(() => i.value === void 0 ? o.value : i.value);
+		function l(e) {
+			o.value = e, i.value = e, a("change", e);
+		}
+		function u(e) {
+			if (r.multiple) {
+				let t = s.value ?? [], n = !t.includes(e), r = n ? [...t, e] : t.filter((t) => t !== e);
+				l(r), a("toggle", r, n), a(n ? "open" : "close", r);
+				return;
+			}
+			let t = s.value !== e;
+			l(t ? e : null), a("toggle", t ? e : null, t), a(t ? "open" : "close", e);
+		}
+		function f(e) {
+			return r.multiple ? (s.value ?? []).includes(e) : s.value === e;
+		}
+		function p(e) {
+			f(e) || u(e);
+		}
+		function m(e) {
+			f(e) && u(e);
+		}
+		function h(e) {
+			r.multiple && (l(e), a("open", e));
+		}
+		function g() {
+			let e = r.multiple ? [] : null;
+			l(e), a("close", e);
+		}
+		return w(L, {
+			multiple: r.multiple ?? !1,
+			modelValue: s,
+			toggle: u,
+			isOpen: f
+		}), t({
+			open: p,
+			close: m,
+			toggle: u,
+			isOpen: f,
+			openAll: h,
+			closeAll: g
+		}), (e, t) => (C(), d("div", ie, [D(e.$slots, "default")]));
+	}
+}), z = e("accordionItem"), B = { class: "rounded-box border border-base-content/10 overflow-hidden" }, V = { class: "flex-1 min-w-0" }, H = {
+	key: 0,
+	class: "px-4 py-3 bg-base-100"
+}, U = /*#__PURE__*/ i(/* @__PURE__ */ h({
+	__name: "AccordionItem",
+	props: {
+		name: {},
+		icon: {}
+	},
+	emits: [
+		"open",
+		"close",
+		"toggle"
+	],
+	setup(e, { expose: n, emit: r }) {
+		let i = e, a = t(z, i, { icon: "arrow" }), o = r, p = g(L, null), h = c(() => p?.isOpen(i.name) ?? !1);
+		function _() {
+			p?.toggle(i.name);
+			let e = !h.value;
+			o("toggle", e), o(e ? "open" : "close");
+		}
+		function v() {
+			h.value || _();
+		}
+		function b() {
+			h.value && _();
+		}
+		function x(e) {
+			requestAnimationFrame(e);
+		}
+		return n({
+			open: v,
+			close: b,
+			toggle: _,
+			isOpen: h
+		}), (e, t) => (C(), d("div", B, [f("div", {
+			class: "flex items-center justify-between gap-3 px-4 py-3 cursor-pointer select-none bg-base-200 hover:bg-base-300 transition-colors",
+			onClick: _
+		}, [f("div", V, [D(e.$slots, "title", { isOpen: h.value }, void 0, !0)]), D(e.$slots, "icon", { isOpen: h.value }, () => [M(a).icon === "plus" ? (C(), l(M(re), {
+			key: 0,
+			class: y(["size-4 opacity-50 transition-transform shrink-0", h.value && "rotate-45"])
+		}, null, 8, ["class"])) : (C(), l(M(ne), {
+			key: 1,
+			class: y(["size-4 opacity-50 transition-transform shrink-0", h.value && "rotate-180"])
+		}, null, 8, ["class"]))], !0)]), m(s, {
+			name: "accordion",
+			onEnter: t[0] ||= (e) => {
+				e.style.maxHeight = e.scrollHeight + "px";
+			},
+			onAfterEnter: t[1] ||= (e) => {
+				e.style.maxHeight = "none";
+			},
+			onLeave: t[2] ||= (e) => {
+				e.style.maxHeight = e.scrollHeight + "px", x(() => e.style.maxHeight = "0");
+			}
+		}, {
+			default: F(() => [h.value ? (C(), d("div", H, [D(e.$slots, "default", { isOpen: h.value }, void 0, !0)])) : u("", !0)]),
+			_: 3
+		})]));
+	}
+}), [["__scopeId", "data-v-b846d115"]]), W = e("avatar"), G = {
+	key: 0,
+	class: "avatar-group -space-x-6"
+}, K = {
+	xs: "w-8",
+	sm: "w-16",
+	md: "w-20",
+	lg: "w-24",
+	xl: "w-32"
+}, q = {
+	online: "avatar-online",
+	offline: "avatar-offline"
+}, J = /* @__PURE__ */ h({
+	__name: "Avatar",
+	props: {
+		group: { type: [Boolean, String] },
+		placeholder: { type: [Boolean, String] },
+		size: {},
+		shape: {},
+		presence: {}
+	},
+	setup(e) {
+		let i = t(W, e, { shape: "rounded-full" });
+		return (t, a) => M(r)(e.group) ? (C(), d("div", G, [D(t.$slots, "default")])) : (C(), d("div", {
+			key: 1,
+			class: y(["avatar", [M(n)(q, M(i).presence), M(r)(e.placeholder) && "avatar-placeholder"]])
+		}, [f("div", { class: y([M(n)(K, M(i).size), M(i).shape]) }, [D(t.$slots, "default")], 2)], 2));
+	}
+}), Y = e("badge"), ae = {
+	neutral: "badge-neutral",
+	primary: "badge-primary",
+	secondary: "badge-secondary",
+	accent: "badge-accent",
+	info: "badge-info",
+	success: "badge-success",
+	warning: "badge-warning",
+	error: "badge-error"
+}, oe = {
+	outline: "badge-outline",
+	soft: "badge-soft",
+	dash: "badge-dash"
+}, se = {
+	xs: "badge-xs",
+	sm: "badge-sm",
+	md: "badge-md",
+	lg: "badge-lg",
+	xl: "badge-xl"
+}, ce = /* @__PURE__ */ h({
+	__name: "Badge",
+	props: {
+		color: {},
+		variant: {},
+		size: {}
+	},
+	setup(e) {
+		let r = t(Y, e, {});
+		return (e, t) => (C(), d("span", { class: y(["badge", [
+			M(n)(ae, M(r).color),
+			M(n)(oe, M(r).variant),
+			M(n)(se, M(r).size)
+		]]) }, [D(e.$slots, "default")], 2));
+	}
+}), le = e("card"), ue = {
+	border: "card-border",
+	dash: "card-dash"
+}, de = {
+	xs: "card-xs",
+	sm: "card-sm",
+	md: "card-md",
+	lg: "card-lg",
+	xl: "card-xl"
+}, fe = /* @__PURE__ */ h({
+	__name: "Card",
+	props: {
+		side: { type: [Boolean, String] },
+		imageFull: { type: [Boolean, String] },
+		variant: {},
+		size: {}
+	},
+	setup(e) {
+		let i = t(le, e, {});
+		return (e, t) => (C(), d("div", { class: y(["card bg-base-100", [
+			M(n)(ue, M(i).variant),
+			M(n)(de, M(i).size),
+			M(r)(M(i).side) && "card-side",
+			M(r)(M(i).imageFull) && "image-full"
+		]]) }, [D(e.$slots, "default")], 2));
+	}
+}), pe = e("cardActions"), me = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end"
+}, he = /* @__PURE__ */ h({
+	__name: "CardActions",
+	props: { align: {} },
+	setup(e) {
+		let r = t(pe, e, { align: "start" });
+		return (e, t) => (C(), d("div", { class: y(["card-actions", M(n)(me, M(r).align)]) }, [D(e.$slots, "default")], 2));
+	}
+}), ge = {}, _e = { class: "card-body" };
+function ve(e, t) {
+	return C(), d("div", _e, [D(e.$slots, "default")]);
+}
+var ye = /*#__PURE__*/ i(ge, [["render", ve]]), be = {}, xe = { class: "card-title" };
+function Se(e, t) {
+	return C(), d("h2", xe, [D(e.$slots, "default")]);
+}
+var Ce = /*#__PURE__*/ i(be, [["render", Se]]), we = e("carousel"), Te = {
+	key: 0,
+	class: "carousel-indicators absolute bottom-4 left-4 flex gap-2"
+}, Ee = ["onClick"], De = {
+	horizontal: "",
+	vertical: "carousel-vertical"
+}, Oe = {
+	start: "carousel-start",
+	center: "carousel-center",
+	end: "carousel-end"
+}, ke = /* @__PURE__ */ h({
+	__name: "Carousel",
+	props: {
+		initialIndex: {},
+		direction: {},
+		snap: {},
+		indicators: { type: [Boolean, String] },
+		controls: { type: [Boolean, String] },
+		autoplay: { type: [Boolean, String] },
+		interval: {}
+	},
+	setup(e) {
+		let i = e, s = t(we, i, {
+			direction: "horizontal",
+			snap: "start",
+			indicators: !1,
+			controls: !1,
+			autoplay: !1,
+			interval: 3e3,
+			initialIndex: 0
+		}), l = ee("carouselRef"), p = A(i.initialIndex ?? 0), h = null, g = c(() => s.value.direction === "vertical");
+		function _() {
+			return l.value ? l.value.querySelectorAll(".carousel-item").length : 0;
+		}
+		function v() {
+			return l.value ? Array.from(l.value.querySelectorAll(".carousel-item")) : [];
+		}
+		function b(e) {
+			let t = v();
+			!t.length || e < 0 || e >= t.length || (t[e].scrollIntoView({
+				behavior: "smooth",
+				block: g.value ? "nearest" : void 0,
+				inline: g.value ? void 0 : "nearest"
+			}), p.value = e);
+		}
+		function w(e) {
+			let t = _();
+			if (t === 0) return;
+			let n = e % t;
+			b(n < 0 ? t + n : n);
+		}
+		function T() {
+			w(p.value + 1);
+		}
+		function k() {
+			w(p.value - 1);
+		}
+		function j() {
+			h && clearInterval(h), r(s.value.autoplay) && _() > 1 && (h = setInterval(T, s.value.interval));
+		}
+		function N() {
+			h &&= (clearInterval(h), null);
+		}
+		let P = c(() => _());
+		return x(() => {
+			j();
+		}), S(() => {
+			N();
+		}), (e, t) => {
+			let i = O("ChevronLeftIcon"), c = O("ChevronRightIcon");
+			return C(), d(o, null, [f("div", {
+				ref_key: "carouselRef",
+				ref: l,
+				class: y(["carousel w-full", [M(n)(De, M(s).direction), M(n)(Oe, M(s).snap)]]),
+				onMouseenter: N,
+				onMouseleave: j
+			}, [m(a, { class: "carousel-item w-full" }, {
+				default: F(() => [D(e.$slots, "default")]),
+				_: 3
+			}), M(r)(M(s).indicators) && P.value > 1 ? (C(), d("div", Te, [(C(!0), d(o, null, E(P.value, (e, t) => (C(), d("button", {
+				key: t,
+				class: y(["carousel-indicator btn btn-xs btn-circle", { "btn-active": p.value === t }]),
+				onClick: (e) => w(t)
+			}, null, 10, Ee))), 128))])) : u("", !0)], 34), M(r)(M(s).controls) && P.value > 1 ? (C(), d(o, { key: 0 }, [f("button", {
+				class: "carousel-control carousel-prev absolute left-4 top-1/2 -translate-y-1/2 btn btn-circle",
+				onClick: k
+			}, [D(e.$slots, "prev-icon", {}, () => [m(i, { class: "size-6" })])]), f("button", {
+				class: "carousel-control carousel-next absolute right-4 top-1/2 -translate-y-1/2 btn btn-circle",
+				onClick: T
+			}, [D(e.$slots, "next-icon", {}, () => [m(c, { class: "size-6" })])])], 64)) : u("", !0)], 64);
+		};
+	}
+}), Ae = e("chat"), je = {
+	key: 0,
+	class: "chat-image"
+}, Me = {
+	key: 1,
+	class: "chat-header"
+}, Ne = {
+	key: 2,
+	class: "chat-footer"
+}, Pe = {
+	key: 3,
+	class: "chat-meta"
+}, Fe = {
+	neutral: "chat-bubble-neutral",
+	primary: "chat-bubble-primary",
+	secondary: "chat-bubble-secondary",
+	accent: "chat-bubble-accent",
+	info: "chat-bubble-info",
+	success: "chat-bubble-success",
+	warning: "chat-bubble-warning",
+	error: "chat-bubble-error"
+}, Ie = /* @__PURE__ */ h({
+	__name: "Chat",
+	props: {
+		side: {},
+		color: {}
+	},
+	setup(e) {
+		let r = t(Ae, e, { side: "start" });
+		return (e, t) => (C(), d("div", { class: y(["chat", M(r).side === "end" ? "chat-end" : "chat-start"]) }, [
+			e.$slots.image ? (C(), d("div", je, [D(e.$slots, "image")])) : u("", !0),
+			e.$slots.header ? (C(), d("div", Me, [D(e.$slots, "header")])) : u("", !0),
+			f("div", { class: y(["chat-bubble", M(n)(Fe, M(r).color)]) }, [D(e.$slots, "default")], 2),
+			e.$slots.footer ? (C(), d("div", Ne, [D(e.$slots, "footer")])) : u("", !0),
+			e.$slots.meta ? (C(), d("div", Pe, [D(e.$slots, "meta")])) : u("", !0)
+		], 2));
+	}
+}), Le = { class: "countdown font-mono text-2xl" }, Re = ["aria-label"], ze = ["aria-label"], Be = ["aria-label"];
+function Ve(e) {
+	if (e instanceof Date) return e.getTime();
+	if (typeof e == "string" || typeof e == "number") return new Date(e).getTime();
+	if (typeof e == "object" && e) {
+		if ("epochMilliseconds" in e || "epochMilliseconds" in e && "timeZoneId" in e) return e.epochMilliseconds;
+		if ("toZonedDateTime" in e) return e.toZonedDateTime(typeof Temporal < "u" ? Temporal.Now.timeZoneId() : "UTC").epochMilliseconds;
+	}
+	return NaN;
+}
+function X(e) {
+	let t = Math.max(0, e - Date.now());
+	return {
+		days: Math.floor(t / 1e3 / 60 / 60 / 24),
+		hours: Math.floor(t / 1e3 / 60 / 60) % 24,
+		minutes: Math.floor(t / 1e3 / 60) % 60,
+		seconds: Math.floor(t / 1e3) % 60,
+		done: t === 0
+	};
+}
+//#endregion
+//#region src/components/display/countdown/Countdown.vue
+var He = /* @__PURE__ */ h({
+	__name: "Countdown",
+	props: {
+		to: {},
+		digits: {}
+	},
+	emits: ["end"],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = c(() => r.digits ?? 2), a = n, o = c(() => Ve(r.to)), s = T(X(o.value)), l;
+		function u() {
+			l !== void 0 && (clearInterval(l), l = void 0);
+		}
+		function d() {
+			u(), l = setInterval(() => {
+				s.value = X(o.value), s.value.done && (u(), a("end"));
+			}, 500);
+		}
+		return te(o, () => {
+			s.value = X(o.value), d();
+		}, { immediate: !0 }), S(u), t({ delta: s }), (e, t) => D(e.$slots, "default", {
+			days: s.value.days,
+			hours: s.value.hours,
+			minutes: s.value.minutes,
+			seconds: s.value.seconds,
+			done: s.value.done,
+			digits: i.value
+		}, () => [f("span", Le, [
+			f("span", {
+				style: b({
+					"--value": s.value.hours,
+					"--digits": i.value
+				}),
+				"aria-label": String(s.value.hours)
+			}, j(s.value.hours), 13, Re),
+			t[0] ||= p(" : ", -1),
+			f("span", {
+				style: b({
+					"--value": s.value.minutes,
+					"--digits": i.value
+				}),
+				"aria-label": String(s.value.minutes)
+			}, j(s.value.minutes), 13, ze),
+			t[1] ||= p(" : ", -1),
+			f("span", {
+				style: b({
+					"--value": s.value.seconds,
+					"--digits": i.value
+				}),
+				"aria-label": String(s.value.seconds)
+			}, j(s.value.seconds), 13, Be)
+		])]);
+	}
+}), Ue = {}, We = {
+	class: "diff",
+	tabindex: "0"
+}, Ge = {
+	class: "diff-item-1",
+	role: "img",
+	tabindex: "0"
+}, Ke = {
+	class: "diff-item-2",
+	role: "img"
+};
+function qe(e, t) {
+	return C(), d("figure", We, [
+		f("div", Ge, [D(e.$slots, "item-1")]),
+		f("div", Ke, [D(e.$slots, "item-2")]),
+		t[0] ||= f("div", { class: "diff-resizer" }, null, -1)
+	]);
+}
+var Je = /*#__PURE__*/ i(Ue, [["render", qe]]), Ye = /* @__PURE__ */ h({
+	__name: "Hover3d",
+	props: { to: {} },
+	setup(e) {
+		let t = e, n = c(() => t.to ? t.to === "#" ? "a" : I : "div"), r = c(() => n.value === "a" ? { href: t.to } : n.value === "div" ? {} : { to: t.to });
+		return (e, t) => (C(), l(k(n.value), v({ class: "hover-3d" }, r.value), {
+			default: F(() => [D(e.$slots, "default"), (C(), d(o, null, E(8, (e) => f("div", { key: e })), 64))]),
+			_: 3
+		}, 16));
+	}
+}), Xe = {}, Ze = { class: "hover-gallery" };
+function Qe(e, t) {
+	return C(), d("figure", Ze, [D(e.$slots, "default")]);
+}
+var $e = /*#__PURE__*/ i(Xe, [["render", Qe]]), et = e("kbd"), tt = {
+	xs: "kbd-xs",
+	sm: "kbd-sm",
+	md: "kbd-md",
+	lg: "kbd-lg",
+	xl: "kbd-xl"
+}, nt = /* @__PURE__ */ h({
+	__name: "Kbd",
+	props: { size: {} },
+	setup(e) {
+		let r = t(et, e, { size: "md" });
+		return (e, t) => (C(), d("kbd", { class: y(["kbd", M(n)(tt, M(r).size)]) }, [D(e.$slots, "default")], 2));
+	}
+}), rt = { class: "list bg-base-100 rounded-box" }, Z = {
+	key: 0,
+	class: "p-4 pb-2 text-xs opacity-60 tracking-wide"
+}, it = /* @__PURE__ */ h({
+	__name: "List",
+	props: { title: {} },
+	setup(e) {
+		return (t, n) => (C(), d("ul", rt, [e.title || t.$slots.title ? (C(), d("li", Z, [D(t.$slots, "title", {}, () => [p(j(e.title), 1)])])) : u("", !0), D(t.$slots, "default")]));
+	}
+}), at = {
+	key: 0,
+	class: "list-col-grow"
+}, ot = { class: "text-xs uppercase font-semibold opacity-60" }, st = {
+	key: 2,
+	class: "list-col-wrap text-xs opacity-60"
+}, ct = /* @__PURE__ */ h({
+	__name: "ListItem",
+	props: {
+		to: {},
+		title: {},
+		description: {}
+	},
+	setup(e) {
+		let t = e, n = c(() => t.to ? t.to === "#" ? "a" : I : "li"), r = c(() => n.value === "a" ? { href: t.to } : n.value === "li" ? {} : { to: t.to }), i = P(), a = c(() => !!t.title || !!t.description || !!i.title || !!i.description);
+		return (t, i) => (C(), l(k(n.value), v({ class: "list-row" }, r.value), {
+			default: F(() => [
+				D(t.$slots, "prefix"),
+				a.value ? (C(), d("div", at, [D(t.$slots, "title", {}, () => [f("div", null, j(e.title), 1)]), D(t.$slots, "description", {}, () => [f("div", ot, j(e.description), 1)])])) : D(t.$slots, "default", { key: 1 }),
+				t.$slots.details ? (C(), d("div", st, [D(t.$slots, "details")])) : u("", !0),
+				D(t.$slots, "actions")
+			]),
+			_: 3
+		}, 16));
+	}
+}), lt = e("status"), ut = ["aria-label"], dt = ["aria-label"], Q = {
+	neutral: "status-neutral",
+	primary: "status-primary",
+	secondary: "status-secondary",
+	accent: "status-accent",
+	info: "status-info",
+	success: "status-success",
+	warning: "status-warning",
+	error: "status-error"
+}, $ = {
+	xs: "status-xs",
+	sm: "status-sm",
+	md: "status-md",
+	lg: "status-lg",
+	xl: "status-xl"
+}, ft = /* @__PURE__ */ h({
+	__name: "Status",
+	props: {
+		label: {},
+		color: {},
+		size: {},
+		animation: {}
+	},
+	setup(e) {
+		let r = t(lt, e, { size: "md" });
+		return (t, i) => M(r).animation === "ping" ? (C(), d("div", {
+			key: 0,
+			class: "inline-grid *:[grid-area:1/1]",
+			"aria-label": e.label
+		}, [f("div", { class: y(["status animate-ping", [M(n)(Q, M(r).color), M(n)($, M(r).size)]]) }, null, 2), f("div", { class: y(["status", [M(n)(Q, M(r).color), M(n)($, M(r).size)]]) }, null, 2)], 8, ut)) : (C(), d("div", {
+			key: 1,
+			class: y(["status", [
+				M(n)(Q, M(r).color),
+				M(n)($, M(r).size),
+				M(r).animation === "bounce" && "animate-bounce"
+			]]),
+			"aria-label": e.label
+		}, null, 10, dt));
+	}
+});
+//#endregion
+export { U as _, $e as a, He as c, Ce as d, ye as f, J as g, ce as h, nt as i, Ie as l, fe as m, ct as n, Ye as o, he as p, it as r, Je as s, ft as t, ke as u, R as v };
+
+//# sourceMappingURL=public-D8Z0iHnm.js.map