@web-utils/component 5.0.0-beta01 → 5.0.0-beta03

package/chunks/ElementDialog.DWhAJsUn.mjs

@@ -0,0 +1,520 @@
+import "./chunk.A6TnG60p.mjs";
+import { a as e } from "./use-empty-values.CxYKjLV9.mjs";
+import { r as t } from "./event.ZRs4J5TN.mjs";
+import { d as n, m as r, o as i, p as a, t as o } from "./install.BJl2MN77.mjs";
+import { D as s, F as c, M as l, O as u, S as d, j as f, n as p } from "./style.CraPDfJA.mjs";
+import { n as m, t as h } from "./teleport.87mkIv8m.mjs";
+import { t as g } from "./use-deprecated.vx6LTDA_.mjs";
+import { i as _, n as v, r as y, t as b } from "./overlay.Rhu_rfhx.mjs";
+import { n as x } from "./use-locale.CBoQRFjH.mjs";
+import { r as S, t as C } from "./focus-trap.CuUc8N2C.mjs";
+import { t as w } from "./use-id.CyzdvfQn.mjs";
+import { t as T } from "./icon.niAg1zTC.mjs";
+import { a as E, t as D } from "./icon.AJYLfX1m.mjs";
+import { r as O } from "./use-global-config.Dkt91Ob3.mjs";
+import { Transition as ee, computed as k, createBlock as A, createCommentVNode as j, createElementBlock as M, createElementVNode as N, createSlots as P, createVNode as F, defineComponent as I, getCurrentInstance as L, inject as R, mergeModels as z, mergeProps as B, nextTick as te, normalizeClass as V, normalizeStyle as H, onMounted as ne, openBlock as U, provide as W, ref as G, renderSlot as K, resolveDynamicComponent as q, toDisplayString as J, unref as Y, useModel as re, useSlots as ie, useTemplateRef as ae, vShow as oe, watch as X, withCtx as Z, withDirectives as se, withModifiers as Q } from "vue";
+//#region node_modules/.pnpm/element-plus@2.13.6_typescr_b86181ecd25892dfea09546870d44c51/node_modules/element-plus/es/components/dialog/src/dialog-content.mjs
+var $ = f({
+	center: Boolean,
+	alignCenter: {
+		type: Boolean,
+		default: void 0
+	},
+	closeIcon: { type: E },
+	draggable: {
+		type: Boolean,
+		default: void 0
+	},
+	overflow: {
+		type: Boolean,
+		default: void 0
+	},
+	fullscreen: Boolean,
+	headerClass: String,
+	bodyClass: String,
+	footerClass: String,
+	showClose: {
+		type: Boolean,
+		default: !0
+	},
+	title: {
+		type: String,
+		default: ""
+	},
+	ariaLevel: {
+		type: String,
+		default: "2"
+	}
+}), ce = { close: () => !0 }, le = {
+	alignCenter: void 0,
+	draggable: void 0,
+	overflow: void 0,
+	showClose: !0,
+	title: "",
+	ariaLevel: "2"
+}, ue = f({
+	...$,
+	appendToBody: Boolean,
+	appendTo: {
+		type: m.to.type,
+		default: "body"
+	},
+	beforeClose: { type: l(Function) },
+	destroyOnClose: Boolean,
+	closeOnClickModal: {
+		type: Boolean,
+		default: !0
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		default: !0
+	},
+	lockScroll: {
+		type: Boolean,
+		default: !0
+	},
+	modal: {
+		type: Boolean,
+		default: !0
+	},
+	modalPenetrable: Boolean,
+	openDelay: {
+		type: Number,
+		default: 0
+	},
+	closeDelay: {
+		type: Number,
+		default: 0
+	},
+	top: { type: String },
+	modelValue: Boolean,
+	modalClass: String,
+	headerClass: String,
+	bodyClass: String,
+	footerClass: String,
+	width: { type: [String, Number] },
+	zIndex: { type: Number },
+	trapFocus: Boolean,
+	headerAriaLevel: {
+		type: String,
+		default: "2"
+	},
+	transition: {
+		type: l([String, Object]),
+		default: void 0
+	}
+}), de = {
+	open: () => !0,
+	opened: () => !0,
+	close: () => !0,
+	closed: () => !0,
+	[t]: (e) => c(e),
+	openAutoFocus: () => !0,
+	closeAutoFocus: () => !0
+};
+({ ...le });
+//#endregion
+//#region node_modules/.pnpm/element-plus@2.13.6_typescr_b86181ecd25892dfea09546870d44c51/node_modules/element-plus/es/components/dialog/src/constants.mjs
+var fe = Symbol("dialogInjectionKey"), pe = "dialog-fade", me = "ElDialog", he = (i, o) => {
+	let c = L().emit, { nextZIndex: l } = e(), f = "", m = w(), h = w(), g = G(!1), _ = G(!1), v = G(!1), b = G(i.zIndex ?? l()), x = G(!1), S, C, T = O(), E = k(() => {
+		var e;
+		return ((e = T.value) == null ? void 0 : e.namespace) ?? "el";
+	}), D = k(() => {
+		var e;
+		return (e = T.value) == null ? void 0 : e.dialog;
+	}), ee = k(() => {
+		let e = {}, t = `--${E.value}-dialog`;
+		if (!i.fullscreen) {
+			i.top && (e[`${t}-margin-top`] = i.top);
+			let n = p(i.width);
+			n && (e[`${t}-width`] = n);
+		}
+		return e;
+	}), A = k(() => {
+		var e;
+		return (i.draggable ?? ((e = D.value) == null ? void 0 : e.draggable) ?? !1) && !i.fullscreen;
+	}), j = k(() => {
+		var e;
+		return i.alignCenter ?? ((e = D.value) == null ? void 0 : e.alignCenter) ?? !1;
+	}), M = k(() => {
+		var e;
+		return i.overflow ?? ((e = D.value) == null ? void 0 : e.overflow) ?? !1;
+	}), N = k(() => j.value ? { display: "flex" } : {}), P = k(() => {
+		var e;
+		let t = i.transition ?? ((e = D.value) == null ? void 0 : e.transition) ?? "dialog-fade", o = {
+			name: t,
+			onAfterEnter: F,
+			onBeforeLeave: R,
+			onAfterLeave: I
+		};
+		if (r(t)) {
+			let e = { ...t }, r = (e, t) => (r) => {
+				n(e) ? e.forEach((e) => {
+					a(e) && e(r);
+				}) : a(e) && e(r), t();
+			};
+			return e.onAfterEnter = r(e.onAfterEnter, F), e.onBeforeLeave = r(e.onBeforeLeave, R), e.onAfterLeave = r(e.onAfterLeave, I), e.name || (e.name = pe, u(me, `transition.name is missing when using object syntax, fallback to '${pe}'`)), e;
+		}
+		return o;
+	});
+	function F() {
+		c("opened");
+	}
+	function I() {
+		c("closed"), c(t, !1), i.destroyOnClose && (v.value = !1), x.value = !1;
+	}
+	function R() {
+		x.value = !0, c("close");
+	}
+	function z() {
+		C == null || C(), S == null || S(), i.openDelay && i.openDelay > 0 ? {stop: S} = s(() => U(), i.openDelay) : U();
+	}
+	function B() {
+		S == null || S(), C == null || C(), i.closeDelay && i.closeDelay > 0 ? {stop: C} = s(() => W(), i.closeDelay) : W();
+	}
+	function V() {
+		function e(e) {
+			e || (_.value = !0, g.value = !1);
+		}
+		i.beforeClose ? i.beforeClose(e) : B();
+	}
+	function H() {
+		i.closeOnClickModal && V();
+	}
+	function U() {
+		d && (g.value = !0);
+	}
+	function W() {
+		g.value = !1;
+	}
+	function K() {
+		c("openAutoFocus");
+	}
+	function q() {
+		c("closeAutoFocus");
+	}
+	function J(e) {
+		var t;
+		((t = e.detail) == null ? void 0 : t.focusReason) === "pointer" && e.preventDefault();
+	}
+	i.lockScroll && y(g);
+	function Y() {
+		i.closeOnPressEscape && V();
+	}
+	return X(() => i.zIndex, () => {
+		b.value = i.zIndex ?? l();
+	}), X(() => i.modelValue, (e) => {
+		e ? (_.value = !1, x.value = !1, z(), v.value = !0, b.value = i.zIndex ?? l(), te(() => {
+			c("open"), o.value && (o.value.parentElement.scrollTop = 0, o.value.parentElement.scrollLeft = 0, o.value.scrollTop = 0);
+		})) : g.value && B();
+	}), X(() => i.fullscreen, (e) => {
+		o.value && (e ? (f = o.value.style.transform, o.value.style.transform = "") : o.value.style.transform = f);
+	}), ne(() => {
+		i.modelValue && (g.value = !0, v.value = !0, z());
+	}), {
+		afterEnter: F,
+		afterLeave: I,
+		beforeLeave: R,
+		handleClose: V,
+		onModalClick: H,
+		close: B,
+		doClose: W,
+		onOpenAutoFocus: K,
+		onCloseAutoFocus: q,
+		onCloseRequested: Y,
+		onFocusoutPrevented: J,
+		titleId: m,
+		bodyId: h,
+		closed: _,
+		style: ee,
+		overlayDialogStyle: N,
+		rendered: v,
+		visible: g,
+		zIndex: b,
+		transitionConfig: P,
+		_draggable: A,
+		_alignCenter: j,
+		_overflow: M,
+		closing: x
+	};
+}, ge = (...e) => (t) => {
+	e.forEach((e) => {
+		e.value = t;
+	});
+}, _e = ["aria-level"], ve = ["aria-label"], ye = ["id"], be = /* @__PURE__ */ I({
+	name: "ElDialogContent",
+	__name: "dialog-content",
+	props: $,
+	emits: ce,
+	setup(e, { expose: t }) {
+		let { t: n } = x(), { Close: r } = D, i = e, { dialogRef: a, headerRef: o, bodyId: s, ns: c, style: l } = R(fe), { focusTrapRef: u } = R(S), d = ge(u, a), f = k(() => !!i.draggable), { resetPosition: p, updatePosition: m, isDragging: h } = _(a, o, f, k(() => !!i.overflow)), g = k(() => [
+			c.b(),
+			c.is("fullscreen", i.fullscreen),
+			c.is("draggable", f.value),
+			c.is("dragging", h.value),
+			c.is("align-center", !!i.alignCenter),
+			{ [c.m("center")]: i.center }
+		]);
+		return t({
+			resetPosition: p,
+			updatePosition: m
+		}), (t, i) => (U(), M("div", {
+			ref: Y(d),
+			class: V(g.value),
+			style: H(Y(l)),
+			tabindex: "-1"
+		}, [
+			N("header", {
+				ref_key: "headerRef",
+				ref: o,
+				class: V([
+					Y(c).e("header"),
+					e.headerClass,
+					{ "show-close": e.showClose }
+				])
+			}, [K(t.$slots, "header", {}, () => [N("span", {
+				role: "heading",
+				"aria-level": e.ariaLevel,
+				class: V(Y(c).e("title"))
+			}, J(e.title), 11, _e)]), e.showClose ? (U(), M("button", {
+				key: 0,
+				"aria-label": Y(n)("el.dialog.close"),
+				class: V(Y(c).e("headerbtn")),
+				type: "button",
+				onClick: i[0] || (i[0] = (e) => t.$emit("close"))
+			}, [F(Y(T), { class: V(Y(c).e("close")) }, {
+				default: Z(() => [(U(), A(q(e.closeIcon || Y(r))))]),
+				_: 1
+			}, 8, ["class"])], 10, ve)) : j("v-if", !0)], 2),
+			N("div", {
+				id: Y(s),
+				class: V([Y(c).e("body"), e.bodyClass])
+			}, [K(t.$slots, "default")], 10, ye),
+			t.$slots.footer ? (U(), M("footer", {
+				key: 0,
+				class: V([Y(c).e("footer"), e.footerClass])
+			}, [K(t.$slots, "footer")], 2)) : j("v-if", !0)
+		], 6));
+	}
+}), xe = [
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby"
+], Se = o(/* @__PURE__ */ I({
+	name: "ElDialog",
+	inheritAttrs: !1,
+	__name: "dialog",
+	props: ue,
+	emits: de,
+	setup(e, { expose: t }) {
+		let n = e, r = ie();
+		g({
+			scope: "el-dialog",
+			from: "the title slot",
+			replacement: "the header slot",
+			version: "3.0.0",
+			ref: "https://element-plus.org/en-US/component/dialog.html#slots"
+		}, k(() => !!r.title));
+		let a = i("dialog"), o = G(), s = G(), c = G(), { visible: l, titleId: u, bodyId: d, style: f, overlayDialogStyle: p, rendered: m, transitionConfig: _, zIndex: y, _draggable: x, _alignCenter: S, _overflow: w, handleClose: T, onModalClick: E, onOpenAutoFocus: D, onCloseAutoFocus: O, onCloseRequested: M, onFocusoutPrevented: I, closing: L } = he(n, o);
+		W(fe, {
+			dialogRef: o,
+			headerRef: s,
+			bodyId: d,
+			ns: a,
+			rendered: m,
+			style: f
+		});
+		let R = v(E), z = k(() => n.modalPenetrable && !n.modal && !n.fullscreen);
+		return t({
+			visible: l,
+			dialogContentRef: c,
+			resetPosition: () => {
+				var e;
+				(e = c.value) == null || e.resetPosition();
+			},
+			handleClose: T
+		}), (t, n) => (U(), A(Y(h), {
+			to: e.appendTo,
+			disabled: e.appendTo === "body" ? !e.appendToBody : !1
+		}, {
+			default: Z(() => [F(ee, B(Y(_), { persisted: "" }), {
+				default: Z(() => [se(F(Y(b), {
+					"custom-mask-event": "",
+					mask: e.modal,
+					"overlay-class": [
+						e.modalClass ?? "",
+						`${Y(a).namespace.value}-modal-dialog`,
+						Y(a).is("penetrable", z.value)
+					],
+					"z-index": Y(y)
+				}, {
+					default: Z(() => [N("div", {
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-label": e.title || void 0,
+						"aria-labelledby": e.title ? void 0 : Y(u),
+						"aria-describedby": Y(d),
+						class: V([`${Y(a).namespace.value}-overlay-dialog`, Y(a).is("closing", Y(L))]),
+						style: H(Y(p)),
+						onClick: n[0] || (n[0] = (...e) => Y(R).onClick && Y(R).onClick(...e)),
+						onMousedown: n[1] || (n[1] = (...e) => Y(R).onMousedown && Y(R).onMousedown(...e)),
+						onMouseup: n[2] || (n[2] = (...e) => Y(R).onMouseup && Y(R).onMouseup(...e))
+					}, [F(Y(C), {
+						loop: "",
+						trapped: Y(l),
+						"focus-start-el": "container",
+						onFocusAfterTrapped: Y(D),
+						onFocusAfterReleased: Y(O),
+						onFocusoutPrevented: Y(I),
+						onReleaseRequested: Y(M)
+					}, {
+						default: Z(() => [Y(m) ? (U(), A(be, B({
+							key: 0,
+							ref_key: "dialogContentRef",
+							ref: c
+						}, t.$attrs, {
+							center: e.center,
+							"align-center": Y(S),
+							"close-icon": e.closeIcon,
+							draggable: Y(x),
+							overflow: Y(w),
+							fullscreen: e.fullscreen,
+							"header-class": e.headerClass,
+							"body-class": e.bodyClass,
+							"footer-class": e.footerClass,
+							"show-close": e.showClose,
+							title: e.title,
+							"aria-level": e.headerAriaLevel,
+							onClose: Y(T)
+						}), P({
+							header: Z(() => [t.$slots.title ? K(t.$slots, "title", { key: 1 }) : K(t.$slots, "header", {
+								key: 0,
+								close: Y(T),
+								titleId: Y(u),
+								titleClass: Y(a).e("title")
+							})]),
+							default: Z(() => [K(t.$slots, "default")]),
+							_: 2
+						}, [t.$slots.footer ? {
+							name: "footer",
+							fn: Z(() => [K(t.$slots, "footer")]),
+							key: "0"
+						} : void 0]), 1040, [
+							"center",
+							"align-center",
+							"close-icon",
+							"draggable",
+							"overflow",
+							"fullscreen",
+							"header-class",
+							"body-class",
+							"footer-class",
+							"show-close",
+							"title",
+							"aria-level",
+							"onClose"
+						])) : j("v-if", !0)]),
+						_: 3
+					}, 8, [
+						"trapped",
+						"onFocusAfterTrapped",
+						"onFocusAfterReleased",
+						"onFocusoutPrevented",
+						"onReleaseRequested"
+					])], 46, xe)]),
+					_: 3
+				}, 8, [
+					"mask",
+					"overlay-class",
+					"z-index"
+				]), [[oe, Y(l)]])]),
+				_: 3
+			}, 16)]),
+			_: 3
+		}, 8, ["to", "disabled"]));
+	}
+})), Ce = { class: "dialog-title" }, we = { class: "dialog-header-buttons" }, Te = /* @__PURE__ */ Object.assign({ name: "ElementDialog" }, {
+	__name: "ElementDialog",
+	props: /* @__PURE__ */ z({
+		height: String,
+		width: String,
+		title: String,
+		embed: Boolean,
+		showClose: Boolean,
+		overflow: Boolean,
+		closeOnClickModal: Boolean,
+		destroyOnClose: Boolean,
+		draggable: {
+			type: Boolean,
+			default: !0
+		},
+		showFullscreen: Boolean,
+		showFullScreen: Boolean,
+		alignCenter: Boolean,
+		appendToBody: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: { type: Boolean },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ z(["toggle-fullscreen"], ["update:modelValue"]),
+	setup(e, { expose: t, emit: n }) {
+		let r = re(e, "modelValue"), i = e, a = n, o = ae("dialog"), s = G(!1), c = () => {
+			s.value = !s.value, a("toggle-fullscreen", s.value);
+		}, l = k(() => s.value ? "100%" : i.height), u = L(), d = () => {
+			i.embed ? u.parent.emit("update:visible") : o.value.handleClose();
+		};
+		return t({
+			close: d,
+			hide: d
+		}), (t, n) => (U(), A(Y(Se), {
+			ref: "dialog",
+			modelValue: r.value,
+			"onUpdate:modelValue": n[0] || (n[0] = (e) => r.value = e),
+			"append-to-body": e.appendToBody,
+			fullscreen: s.value,
+			"show-close": e.showClose,
+			"destroy-on-close": e.destroyOnClose,
+			draggable: e.draggable,
+			overflow: e.overflow,
+			"align-center": e.alignCenter,
+			style: H({ "--dialog-body-height": l.value }),
+			width: e.width,
+			"close-on-click-modal": e.closeOnClickModal
+		}, P({
+			header: Z(() => [N("div", Ce, J(e.title), 1), N("div", we, [e.showFullscreen || e.showFullScreen ? (U(), M("i", {
+				key: 0,
+				class: V(["dialog-header-button", {
+					"fy-icon-maximum1": !s.value,
+					"fy-icon-restore": s.value
+				}]),
+				onClick: Q(c, ["stop"])
+			}, null, 2)) : j("v-if", !0), N("i", {
+				class: "dialog-header-button fy-icon-close",
+				onClick: Q(d, ["stop"])
+			})])]),
+			default: Z(() => [K(t.$slots, "default")]),
+			_: 2
+		}, [t.$slots.footer ? {
+			name: "footer",
+			fn: Z(() => [K(t.$slots, "footer", { close: d })]),
+			key: "0"
+		} : void 0]), 1032, [
+			"modelValue",
+			"append-to-body",
+			"fullscreen",
+			"show-close",
+			"destroy-on-close",
+			"draggable",
+			"overflow",
+			"align-center",
+			"style",
+			"width",
+			"close-on-click-modal"
+		]));
+	}
+});
+//#endregion
+export { Te as t };