@v1nt1248/3nclient-lib 0.3.27 → 0.3.29

package/dist/chunks/ui3n-notification-DlDM-u-R.js

@@ -1,276 +0,0 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useCssModule as h, useCssVars as g, watch as _, withDirectives as v, withKeys as y } from "vue";
-//#region src/directives/ui3n-ripple.ts
-var b = {}, x = "";
-function S({ el: e, duration: t }) {
-	let n = document.createElement("div"), r = Math.max(e.clientWidth, e.clientHeight), i = r / 2;
-	n.style.width = n.style.height = `${r}px`, n.style.left = `${Math.round(e.clientWidth / 2 - i)}px`, n.style.top = `${Math.round(e.clientHeight / 2 - i)}px`, n.classList.add("ui3n-ripple"), x && n.style.setProperty("--ui3n-ripple-bg-color", x), t && n.style.setProperty("--ui3n-ripple-duration", `${t}ms`);
-	let a = e.getElementsByClassName("ui3n-ripple")[0];
-	a && a.remove(), e.appendChild(n);
-}
-function C({ eventName: e, el: t, duration: n }) {
-	["click", "keydown"].includes(e) && (b[e] = new AbortController(), t.addEventListener(e, function() {
-		S({
-			el: t,
-			duration: n
-		});
-	}, { signal: b[e].signal }));
-}
-var w = {
-	mounted(e, t) {
-		let { color: n, duration: r, eventsTriggers: i = [], disabled: a = !1 } = t.value || {};
-		x = n || "", !a && ((!i.length || i.length && i.includes("click")) && C({
-			eventName: "click",
-			el: e,
-			duration: r
-		}), i.length && i.includes("enter") && C({
-			eventName: "keydown",
-			el: e,
-			duration: r
-		}));
-	},
-	beforeUnmount() {
-		Object.keys(b).forEach((e) => {
-			b[e].abort();
-		});
-	}
-}, T = ["data-icon", "title"], E = /* @__PURE__ */ o({
-	__name: "ui3n-icon",
-	props: {
-		icon: {},
-		title: { default: "" },
-		size: {},
-		width: {},
-		height: {},
-		color: { default: "var(--color-icon-control-primary-default)" },
-		horizontalFlip: { type: Boolean },
-		verticalFlip: { type: Boolean },
-		rotate: { default: 0 }
-	},
-	emits: ["click"],
-	setup(t, { emit: n }) {
-		g((e) => ({
-			v170e4988: e.color,
-			v4efed7e4: d.value,
-			v33baaab5: f.value
-		}));
-		let i = t, a = n, o = e(() => i.size || i.width || 16), l = e(() => i.size || i.height || 16), d = e(() => `${o.value}px`), f = e(() => `${l.value}px`), p = e(() => {
-			let e = {}, t = [];
-			return i.horizontalFlip && t.push("rotateY(180deg)"), i.verticalFlip && t.push("rotateX(180deg)"), i.rotate && t.push(`rotate(${i.rotate}deg)`), t.length && (e.transform = t.join(" ")), e;
-		});
-		function m(e) {
-			a("click", e);
-		}
-		return (e, n) => (u(), r("div", {
-			class: s(e.$style.ui3nIcon),
-			"data-icon": t.icon,
-			title: t.title,
-			style: c(p.value),
-			onClick: m
-		}, null, 14, T));
-	}
-}), D = { ui3nIcon: "_ui3nIcon_zqqfa_1" }, O = (e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-}, k = /* @__PURE__ */ O(E, [["__cssModules", { $style: D }]]), A = {
-	small: 12,
-	regular: 16,
-	large: 24
-}, j = ["disabled"], M = /* @__PURE__ */ O(/* @__PURE__ */ o({
-	__name: "ui3n-button",
-	props: {
-		type: { default: "primary" },
-		size: { default: "regular" },
-		square: { type: Boolean },
-		block: { type: Boolean },
-		textColor: {},
-		color: {},
-		elevation: { type: Boolean },
-		icon: {},
-		iconSize: {},
-		iconColor: {},
-		iconPosition: { default: "right" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: [
-		"init",
-		"click",
-		"enter",
-		"focus",
-		"blur"
-	],
-	setup(i, { emit: a }) {
-		let o = w, c = i, p = a, g = h(), b = d(null), x = e(() => {
-			let e = [
-				g.ui3nButton,
-				g[c.size],
-				g[c.type]
-			];
-			return c.block && c.type !== "icon" && e.push(g.block), c.square && e.push(g.square), c.icon && e.push(g[`withIcon-${c.iconPosition}`]), c.elevation && e.push(g.elevation), e;
-		}), S = e(() => c.iconSize ? c.iconSize : A[c.size]), C = e(() => c.iconColor ? c.iconColor : "inherit");
-		async function T(e, t) {
-			["init", "enter"].includes(e) ? p(e, b.value) : p(e, t);
-		}
-		return _([() => c.color, () => c.textColor], (e, t) => {
-			if (!b.value) return;
-			let [n, r] = t, [i, a] = e;
-			(c.type === "custom" || c.type === "icon") && i !== n && b.value.style.setProperty("--ui3n-button-bg-color", i ?? "var(--color-bg-button-primary-default)"), (c.type === "custom" || c.type === "icon") && a !== r && b.value.style.setProperty("--ui3n-button-text-color", a ?? "var(--color-text-button-primary-default)");
-		}), l(() => {
-			b.value && ((c.type === "custom" || c.type === "icon") && c.color && b.value.style.setProperty("--ui3n-button-bg-color", c.color), c.type === "custom" && c.textColor && b.value.style.setProperty("--ui3n-button-text-color", c.textColor), T("init"));
-		}), (e, a) => v((u(), r("button", {
-			ref_key: "buttonEl",
-			ref: b,
-			class: s(x.value),
-			type: "button",
-			disabled: i.disabled,
-			onClick: a[0] ||= (e) => T("click", e),
-			onFocusin: a[1] ||= (e) => T("focus", e),
-			onFocusout: a[2] ||= (e) => T("blur", e),
-			onKeydown: a[3] ||= y((e) => T("enter"), ["enter"])
-		}, [i.icon ? (u(), t(k, {
-			key: 0,
-			class: s(e.$style.buttonIcon),
-			icon: i.icon,
-			size: S.value,
-			color: C.value
-		}, null, 8, [
-			"class",
-			"icon",
-			"size",
-			"color"
-		])) : n("", !0), i.type === "icon" ? n("", !0) : (u(), r("span", {
-			key: 1,
-			class: s(e.$style.text)
-		}, [f(e.$slots, "default")], 2))], 42, j)), [[m(o)]]);
-	}
-}), [["__cssModules", { $style: {
-	ui3nButton: "_ui3nButton_ih1y4_3",
-	"withIcon-left": "_withIcon-left_ih1y4_31",
-	"withIcon-right": "_withIcon-right_ih1y4_34",
-	square: "_square_ih1y4_37",
-	regular: "_regular_ih1y4_44",
-	small: "_small_ih1y4_51",
-	large: "_large_ih1y4_58",
-	block: "_block_ih1y4_65",
-	primary: "_primary_ih1y4_69",
-	elevation: "_elevation_ih1y4_92",
-	text: "_text_ih1y4_97",
-	secondary: "_secondary_ih1y4_129",
-	tertiary: "_tertiary_ih1y4_183",
-	outline: "_outline_ih1y4_238",
-	icon: "_icon_ih1y4_266",
-	custom: "_custom_ih1y4_286",
-	buttonIcon: "_buttonIcon_ih1y4_315"
-} }]]), N = ["id"], P = /* @__PURE__ */ O(/* @__PURE__ */ o({
-	__name: "ui3n-notification",
-	props: {
-		id: {},
-		type: { default: "info" },
-		content: {},
-		position: { default: "center" },
-		duration: { default: 0 },
-		withIcon: {
-			type: Boolean,
-			default: !0
-		},
-		teleport: {},
-		onOpen: {
-			type: Function,
-			default: () => void 0
-		},
-		onClose: {
-			type: Function,
-			default: () => void 0
-		}
-	},
-	setup(o) {
-		let c = o, d = {
-			success: {
-				color: "var(--success-content-default)",
-				icon: "round-check-circle",
-				iconColor: "var(--success-fill-default)",
-				iconRotate: 0
-			},
-			warning: {
-				color: "var(--warning-content-default)",
-				icon: "round-warning",
-				iconColor: "var(--warning-fill-default)",
-				iconRotate: 0
-			},
-			info: {
-				color: "var(--info-content-default)",
-				icon: "round-info",
-				iconColor: "var(--info-fill-default)",
-				iconRotate: 180
-			},
-			error: {
-				color: "var(--error-content-default)",
-				icon: "round-info",
-				iconColor: "var(--error-fill-default)",
-				iconRotate: 180
-			}
-		}, f = h(), m = e(() => {
-			let e = [
-				f.ui3nNotification,
-				f[`${c.type}Type`],
-				f[`${c.position}Position`]
-			];
-			return c.withIcon && e.push(f.withIcon), e;
-		});
-		function g() {
-			c.onClose();
-		}
-		return l(() => {
-			c.duration > 500 && setTimeout(() => {
-				c.onClose();
-			}, c.duration);
-		}), (e, c) => (u(), r("div", {
-			id: o.id,
-			class: s(m.value)
-		}, [
-			o.withIcon ? (u(), r("div", {
-				key: 0,
-				class: s(e.$style.ui3nNotificationIcon)
-			}, [a(k, {
-				icon: d[o.type].icon,
-				width: "16",
-				height: "16",
-				rotate: d[o.type].iconRotate,
-				color: d[o.type].iconColor
-			}, null, 8, [
-				"icon",
-				"rotate",
-				"color"
-			])], 2)) : n("", !0),
-			i("div", { class: s(e.$style.ui3nNotificationContent) }, p(o.content), 3),
-			o.duration ? n("", !0) : (u(), t(M, {
-				key: 1,
-				type: "icon",
-				size: "small",
-				color: "transparent",
-				icon: "round-close",
-				"icon-color": d[o.type].color,
-				class: s(e.$style.closeBtn),
-				onClick: g
-			}, null, 8, ["icon-color", "class"]))
-		], 10, N));
-	}
-}), [["__cssModules", { $style: {
-	ui3nNotification: "_ui3nNotification_1tbbz_1",
-	withIcon: "_withIcon_1tbbz_16",
-	ui3nNotificationIcon: "_ui3nNotificationIcon_1tbbz_20",
-	ui3nNotificationContent: "_ui3nNotificationContent_1tbbz_32",
-	closeBtn: "_closeBtn_1tbbz_40",
-	infoType: "_infoType_1tbbz_47",
-	successType: "_successType_1tbbz_57",
-	warningType: "_warningType_1tbbz_67",
-	errorType: "_errorType_1tbbz_77",
-	leftPosition: "_leftPosition_1tbbz_87",
-	centerPosition: "_centerPosition_1tbbz_92",
-	rightPosition: "_rightPosition_1tbbz_97"
-} }]]);
-//#endregion
-export { w as a, O as i, M as n, k as r, P as t };