rappel-ui 1.0.40 → 1.0.42

package/es/components/menu/src/menu-item.vue_vue_type_script_setup_true_lang.mjs

@@ -6,11 +6,11 @@ import "../../../composables/index.mjs";
 import { ReTooltip as te } from "../../tooltip/index.mjs";
 import { _menuProvideKey as n } from "./constants.mjs";
 import r from "./loop.mjs";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as ne, defineComponent as u, inject as d, normalizeClass as f, normalizeStyle as p, onMounted as re, openBlock as m, ref as ie, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useAttrs as ae, useSlots as oe, useTemplateRef as se, withCtx as y } from "vue";
-import { computedAsync as b } from "@vueuse/core";
-import { ArrowDownward as x, getAsyncIcon as S } from "@rappel-ui/svg-icons";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as ne, defineComponent as u, inject as re, normalizeClass as d, normalizeStyle as f, onMounted as ie, openBlock as p, ref as ae, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useAttrs as oe, useSlots as se, useTemplateRef as ce, withCtx as v } from "vue";
+import { computedAsync as y } from "@vueuse/core";
+import { ArrowDownward as b, getAsyncIcon as x } from "@rappel-ui/svg-icons";
 //#region packages/components/menu/src/menu-item.vue?vue&type=script&setup=true&lang.ts
-var ce = ["depth"], C = u({
+var le = ["depth"], S = u({
 	name: "ReMenuItem",
 	__name: "menu-item",
 	props: {
@@ -28,16 +28,16 @@ var ce = ["depth"], C = u({
 		icon: { default: "" },
 		subIcon: {
 			type: [String, Boolean],
-			default: () => x
+			default: () => b
 		},
 		depth: { default: () => void 0 }
 	},
-	setup(u, { expose: x }) {
-		let { n: C, nm: w, ns: T, is: E, has: le } = t("menu"), D = i(() => {
+	setup(u, { expose: b }) {
+		let { n: S, nm: C, ns: w, is: T, has: ue } = t("menu"), E = i(() => {
 			var e, t;
 			return (e = u.hasChildren) == null ? ((t = u.children) == null ? void 0 : t.length) > 0 : e;
-		}), O = i(() => !(D.value && !u.disabled)), k = ae(), A = ie(!1), { currentItem: ue, theme: j, collapse: de, cssDuration: M, depth: fe, offset: pe, submenuOffset: me, closeOnSelect: N, direction: P, selectedKey: F, labelPadding: I, trigger: L, topSubMenusKeys: R, submenuClosers: z, select: B, showArrow: V, placement: H, registerDescendant: U } = d(n), he = (e) => {
-			e !== u.value || D.value || u.disabled || B(u.value, {
+		}), D = i(() => !(E.value && !u.disabled)), O = oe(), k = ae(!1), { currentItem: de, theme: A, collapse: fe, cssDuration: j, depth: pe, offset: me, submenuOffset: he, closeOnSelect: M, direction: N, selectedKey: P, labelPadding: F, trigger: I, topSubMenusKeys: L, submenuClosers: R, select: z, showArrow: B, placement: V, registerDescendant: H } = re(n), ge = (e) => {
+			e !== u.value || E.value || u.disabled || z(u.value, {
 				label: u.label,
 				disabled: u.disabled,
 				value: u.value,
@@ -47,8 +47,8 @@ var ce = ["depth"], C = u({
 				subIcon: u.subIcon,
 				depth: X.value
 			}, !1);
-		}, ge = (e) => {
-			e.stopPropagation(), !(D.value || u.disabled || X.value === -1) && (B(u.value, {
+		}, _e = (e) => {
+			e.stopPropagation(), !(E.value || u.disabled || X.value === -1) && (z(u.value, {
 				label: u.label,
 				disabled: u.disabled,
 				value: u.value,
@@ -57,49 +57,49 @@ var ce = ["depth"], C = u({
 				icon: u.icon,
 				subIcon: u.subIcon,
 				depth: X.value
-			}), N != null && N.value && (z == null || z.forEach((e) => {
+			}), M != null && M.value && (R == null || R.forEach((e) => {
 				var t;
 				return e == null || (t = e.close) == null ? void 0 : t.call(e);
 			})));
-		}, W = b(async () => await S(u.icon)), G = b(async () => await S(u.subIcon || "")), _e = i(() => {
+		}, U = y(async () => await x(u.icon)), W = y(async () => await x(u.subIcon || "")), ve = i(() => {
 			var e;
-			return ((e = ue.value) == null ? void 0 : e.value) === u.value;
-		}), { currentTheme: K } = ee(j.value, O.value), q = i(() => [
-			C(),
-			w("tooltip"),
-			E(K.value, !!K.value)
-		]), ve = i(() => X.value === 0 && !k["is-more"] || X.value === -1 ? pe.value : me.value), J = i(() => X.value === 0 && !k["is-more"] || X.value === -1), ye = oe(), be = i(() => !ye["item-submenu"] && !D.value ? "hover" : L.value), Y = i(() => ({ "--menu-transition-duration": `${M.value}ms` })), xe = i(() => [{ padding: `0 ${e(I.value)}` }]), Se = i(() => [
-			T("item"),
-			E("disabled", u.disabled),
-			le("children", D.value),
-			E("selected", _e.value)
+			return ((e = de.value) == null ? void 0 : e.value) === u.value;
+		}), { currentTheme: G } = ee(A.value, D.value), K = i(() => [
+			S(),
+			C("tooltip"),
+			T(G.value, !!G.value)
+		]), ye = i(() => X.value === 0 && !(O != null && O["is-more"]) || X.value === -1 ? me.value : he.value), q = i(() => X.value === 0 && !(O != null && O["is-more"]) || X.value === -1), J = se(), be = i(() => !(J != null && J["item-submenu"]) && !E.value ? "hover" : I.value), Y = i(() => ({ "--menu-transition-duration": `${j.value}ms` })), xe = i(() => [{ padding: `0 ${e(F.value)}` }]), Se = i(() => [
+			w("item"),
+			T("disabled", u.disabled),
+			ue("children", E.value),
+			T("selected", ve.value)
 		]), X = i(() => {
 			var e;
-			return (e = u.depth) == null ? fe.value : e;
-		}), Z = i(typeof H == "function" ? () => H(P.value, X.value, D.value) : () => P.value === "vertical" ? X.value === 0 ? "right" : "right-start" : X.value === -1 ? "bottom-end" : X.value === 0 && !k["is-more"] ? "bottom" : "right-start"), Ce = i(() => P.value === "vertical" ? !de.value || !D.value && X.value !== 0 || D.value && X.value !== 0 && u.disabled : u.disabled || !D.value), Q = i(typeof V == "function" ? () => V(X.value) : () => X.value === 0 && !k["is-more"]);
-		if (N.value && !u.disabled) {
+			return (e = u.depth) == null ? pe.value : e;
+		}), Z = i(typeof V == "function" ? () => V(N.value, X.value, E.value) : () => N.value === "vertical" ? X.value === 0 ? "right" : "right-start" : X.value === -1 ? "bottom-end" : X.value === 0 && !(O != null && O["is-more"]) ? "bottom" : "right-start"), Ce = i(() => N.value === "vertical" ? !fe.value || !E.value && X.value !== 0 || E.value && X.value !== 0 && u.disabled : u.disabled || !E.value), Q = i(typeof B == "function" ? () => B(X.value) : () => X.value === 0 && !(O != null && O["is-more"]));
+		if (M.value && !u.disabled) {
 			let e = {
 				value: u.value,
 				close: () => {
-					A.value = !1;
+					k.value = !1;
 				}
 			};
-			z.some((e) => e.value === u.value) || z.push(e);
+			R.some((e) => e.value === u.value) || R.push(e);
 		}
 		let we = () => {
-			if (X.value === 0 && D.value) {
+			if (X.value === 0 && E.value) {
 				var e;
-				(e = R.value) == null || e.push(u.value);
+				(e = L.value) == null || e.push(u.value);
 			}
-		}, $ = se("itemRef");
-		return re(() => {
-			U == null || U(u.value), we(), he(F == null ? void 0 : F.value);
-		}), x({
+		}, $ = ce("itemRef");
+		return ie(() => {
+			H == null || H(u.value), we(), ge(P == null ? void 0 : P.value);
+		}), b({
 			itemRef: $,
-			hasChild: D,
+			hasChild: E,
 			showArrow: Q,
 			placement: Z,
-			visible: A,
+			visible: k,
 			value: u.value,
 			label: u.label,
 			disabled: u.disabled,
@@ -107,46 +107,46 @@ var ce = ["depth"], C = u({
 			subIcon: u.subIcon,
 			depth: X.value,
 			children: u.children
-		}), (e, t) => (m(), s("li", {
+		}), (e, t) => (p(), s("li", {
 			ref_key: "itemRef",
 			ref: $,
-			class: f(Se.value),
+			class: d(Se.value),
 			depth: X.value,
-			onClick: ge
-		}, [ne(v(te), {
-			visible: A.value,
-			"onUpdate:visible": t[0] || (t[0] = (e) => A.value = e),
-			"floating-class": [D.value && !u.disabled ? v(w)("tooltip") : v(w)("cover"), v(E)("disabled", u.disabled)],
+			onClick: _e
+		}, [ne(_(te), {
+			visible: k.value,
+			"onUpdate:visible": t[0] || (t[0] = (e) => k.value = e),
+			"floating-class": [E.value && !u.disabled ? _(C)("tooltip") : _(C)("cover"), _(T)("disabled", u.disabled)],
 			disabled: Ce.value,
-			teleported: J.value,
+			teleported: q.value,
 			placement: Z.value,
 			"show-arrow": Q.value,
-			theme: v(j),
-			"reverse-theme": O.value,
-			"css-duration": v(M),
+			theme: _(A),
+			"reverse-theme": D.value,
+			"css-duration": _(j),
 			transform: !1,
-			offset: ve.value,
+			offset: ye.value,
 			transition: "menu",
 			trigger: be.value
 		}, {
-			content: y(() => {
+			content: v(() => {
 				var t;
-				return [(t = e.$slots) != null && t["item-submenu"] && !u.disabled ? (m(), a(r, {
+				return [(t = e.$slots) != null && t["item-submenu"] && !u.disabled ? (p(), a(r, {
 					key: 0,
-					class: f(q.value),
+					class: d(K.value),
 					"is-more": e.$attrs["is-more"],
-					style: p(Y.value)
+					style: f(Y.value)
 				}, {
-					default: y(() => [h(e.$slots, "item-submenu")]),
+					default: v(() => [m(e.$slots, "item-submenu")]),
 					_: 3
 				}, 8, [
 					"class",
 					"is-more",
 					"style"
-				])) : D.value && !u.disabled ? (m(), a(r, {
+				])) : E.value && !u.disabled ? (p(), a(r, {
 					key: 1,
-					class: f(q.value),
-					style: p(Y.value),
+					class: d(K.value),
+					style: f(Y.value),
 					"is-more": e.$attrs["is-more"],
 					options: u.children
 				}, null, 8, [
@@ -154,35 +154,35 @@ var ce = ["depth"], C = u({
 					"style",
 					"is-more",
 					"options"
-				])) : h(e.$slots, "default", {}, () => [l(_(u.label), 1)], void 0, 2)];
+				])) : m(e.$slots, "default", {}, () => [l(g(u.label), 1)], void 0, 2)];
 			}),
-			default: y(() => [c("div", {
-				class: f([v(T)("label-wrap")]),
-				style: p(xe.value),
+			default: v(() => [c("div", {
+				class: d([_(w)("label-wrap")]),
+				style: f(xe.value),
 				tabindex: "0"
 			}, [
-				h(e.$slots, "icon", {}, () => [u.icon ? (m(), s("div", {
+				m(e.$slots, "icon", {}, () => [u.icon ? (p(), s("div", {
 					key: 0,
-					class: f([v(T)("icon")])
-				}, [typeof v(W) == "string" ? (m(), s("i", {
+					class: d([_(w)("icon")])
+				}, [typeof _(U) == "string" ? (p(), s("i", {
 					key: 0,
-					class: f([v(W)]),
+					class: d([_(U)]),
 					"aria-hidden": "true"
-				}, null, 2)) : (m(), a(g(v(W)), {
+				}, null, 2)) : (p(), a(h(_(U)), {
 					key: 1,
 					"aria-hidden": "true"
 				}))], 2)) : o("", !0)]),
-				c("div", { class: f([v(T)("label")]) }, [h(e.$slots, "default", {}, () => [l(_(u.label), 1)])], 2),
-				h(e.$slots, "sub-icon", {}, () => [u.subIcon && D.value ? (m(), s("div", {
+				c("div", { class: d([_(w)("label")]) }, [m(e.$slots, "default", {}, () => [l(g(u.label), 1)])], 2),
+				m(e.$slots, "sub-icon", {}, () => [u.subIcon && E.value ? (p(), s("div", {
 					key: 0,
-					class: f([v(T)("subicon")])
-				}, [typeof v(G) == "string" ? (m(), s("i", {
+					class: d([_(w)("subicon")])
+				}, [typeof _(W) == "string" ? (p(), s("i", {
 					key: 0,
-					class: f([v(G), v(C)("svg-icon")]),
+					class: d([_(W), _(S)("svg-icon")]),
 					"aria-hidden": "true"
-				}, null, 2)) : (m(), a(g(v(G)), {
+				}, null, 2)) : (p(), a(h(_(W)), {
 					key: 1,
-					class: f([v(C)("svg-icon")]),
+					class: d([_(S)("svg-icon")]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"]))], 2)) : o("", !0)])
 			], 6)]),
@@ -199,8 +199,8 @@ var ce = ["depth"], C = u({
 			"css-duration",
 			"offset",
 			"trigger"
-		]), h(e.$slots, "submenu")], 10, ce));
+		]), m(e.$slots, "submenu")], 10, le));
 	}
 });
 //#endregion
-export { C as default };
+export { S as default };

package/es/composables/index.d.ts

@@ -7,3 +7,4 @@ export * from './use-namespace';
 export * from './use-z-index';
 export * from './use-theme';
 export * from './use-slot-nodes';
+export * from './use-resizable';

package/es/composables/index.mjs

@@ -7,4 +7,5 @@ import { useNamespace as a } from "./use-namespace/index.mjs";
 import { useZIndex as o } from "./use-z-index/index.mjs";
 import { useTheme as s } from "./use-theme/index.mjs";
 import { useSlotFirstNode as c, useSlotNodes as l } from "./use-slot-nodes/index.mjs";
-export { t as useDateFormat, e as useDraggable, a as useNamespace, n as useOnceFn, c as useSlotFirstNode, l as useSlotNodes, s as useTheme, r as useTimeNodes, i as useWaterFallLayout, o as useZIndex };
+import { useResizable as u } from "./use-resizable/index.mjs";
+export { t as useDateFormat, e as useDraggable, a as useNamespace, n as useOnceFn, u as useResizable, c as useSlotFirstNode, l as useSlotNodes, s as useTheme, r as useTimeNodes, i as useWaterFallLayout, o as useZIndex };

package/es/composables/use-resizable/index.d.ts

@@ -0,0 +1,4 @@
+import { ResizeOptions } from '../../directives';
+export declare function useResizable(el: HTMLElement, options?: ResizeOptions): {
+    destroy: () => void;
+};

package/es/composables/use-resizable/index.mjs

@@ -0,0 +1,8 @@
+import { applyResizable as e } from "../../directives/vResizable.mjs";
+import "../../directives/index.mjs";
+//#region packages/composables/use-resizable/index.ts
+function t(t, n) {
+	return e(t, n);
+}
+//#endregion
+export { t as useResizable };

package/es/directives/vResizable.d.ts

@@ -1,14 +1,42 @@
 import { DirectiveBinding } from 'vue';
-interface ResizeOptions {
+type Side = 'left' | 'right' | 'top' | 'bottom' | 'bottom-right';
+export interface ResizeOptions {
     minWidth?: number;
     minHeight?: number;
     maxWidth?: number;
     maxHeight?: number;
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+    bottomRight: boolean;
+    handleSize: number;
+    showHandlers: boolean;
+}
+export interface ResizeState {
+    side?: Side;
+    startX: number;
+    startY: number;
+    startW: number;
+    startH: number;
+    startL: number;
+    startT: number;
+    minW: number;
+    minH: number;
+    maxW?: number;
+    maxH?: number;
+    pointerId?: number;
+    handlers: HTMLElement[];
+    onMove?: (e: PointerEvent) => void;
+    onUp?: (e: PointerEvent) => void;
+    ro?: ResizeObserver;
 }
 /** main directive */
 declare const vResizable: {
     mounted(el: HTMLElement, binding: DirectiveBinding): void;
     beforeUnmount(el: HTMLElement): void;
 };
-declare function applyResizable(el: HTMLElement, options?: ResizeOptions): () => void;
+declare function applyResizable(el: HTMLElement, options?: ResizeOptions): {
+    destroy: () => void;
+};
 export { vResizable, applyResizable };

package/es/directives/vResizable.mjs

@@ -1,10 +1,10 @@
 //#region packages/directives/vResizable.ts
-var e = "v-resizable-handle", t = "v-resizable-handle-style";
-function n() {
-	if (document.getElementById(t)) return;
-	let n = document.createElement("style");
-	n.id = t, n.textContent = `
-.${e} {
+var e = 4, t = "v-resizable-handle", n = "v-resizable-handle-style";
+function r() {
+	if (document.getElementById(n)) return;
+	let e = document.createElement("style");
+	e.id = n, e.textContent = `
+.${t} {
   position: absolute;
   background: transparent;
   z-index: 9999;
@@ -12,111 +12,145 @@ function n() {
   touch-action: none;
   opacity: 0;
 }
-.${e}::after {
+.${t}::after {
   content: '';
   display:block;
   width:100%;
   height:100%;
   border-radius:2px;
-  background: rgba(0,0,0,0.12);
+  background-color:rgb(168, 149, 255);
 }
-.${e}.hr { cursor: ew-resize; }
-.${e}.vr { cursor: ns-resize; }
-.${e}.corner { cursor: nwse-resize; }
-`, document.head.appendChild(n);
+.${t}.is-visible:hover{
+  opacity: 1;
 }
-function r(e, t, n) {
-	let r = 0, i = 0;
-	switch (e) {
+.${t}.hr { cursor: ew-resize; }
+.${t}.vr { cursor: ns-resize; }
+.${t}.corner { cursor: nwse-resize; }
+`, document.head.appendChild(e);
+}
+function i(t, n, r) {
+	let i = 0, a = 0;
+	switch (t) {
 		case "hr":
-			r = 4, i = n.height - 8;
+			i = e, a = r.height - e * 2;
 			break;
 		case "vr":
-			r = n.width - 8, i = 4;
+			i = r.width - e * 2, a = e;
 			break;
-		case "corner": r = 8, i = 8;
+		case "corner": i = e * 2, a = e * 2;
 	}
-	return t.style.width = `${r}px`, t.style.height = `${i}px`, t;
+	return n.style.width = `${i}px`, n.style.height = `${a}px`, n;
 }
-function i(t, n) {
-	let i = document.createElement("div"), a = n.getBoundingClientRect();
-	return i.className = `${e} ${t}`, r(t, i, a);
+function a(e, n, r) {
+	let a = document.createElement("div"), o = n.getBoundingClientRect();
+	return a.className = `${t} ${e}`, r.showHandlers && a.classList.add("is-visible"), i(e, a, o);
 }
-function a(e, t, n) {
-	switch (t) {
+function o(t, n, r) {
+	let a = e / 2;
+	switch (n) {
 		case "left":
-			e.style.left = "-2px", e.style.top = "4px", r("hr", e, n);
+			t.style.left = `${-a}px`, t.style.top = `${e}px`, i("hr", t, r);
 			break;
 		case "right":
-			e.style.left = `${n.width - 2}px`, e.style.top = "4px", r("hr", e, n);
+			t.style.left = `${r.width - a}px`, t.style.top = `${e}px`, i("hr", t, r);
 			break;
 		case "top":
-			e.style.left = "4px", e.style.top = "-2px", r("vr", e, n);
+			t.style.left = `${e}px`, t.style.top = `${-a}px`, i("vr", t, r);
 			break;
 		case "bottom":
-			e.style.left = "4px", e.style.top = `${n.height - 2}px`, r("vr", e, n);
+			t.style.left = `${e}px`, t.style.top = `${r.height - a}px`, i("vr", t, r);
 			break;
-		case "bottom-right": e.style.left = `${n.width - 2}px`, e.style.top = `${n.height - 2}px`;
+		case "bottom-right": t.style.left = `${r.width - a}px`, t.style.top = `${r.height - a}px`;
 	}
 }
-function o(e, t) {
-	var r, o;
-	n(), getComputedStyle(e).position === "static" && (e.style.position = "relative"), e.style.boxSizing = e.style.boxSizing || "border-box";
-	let s = {
+function s(t, n) {
+	var i, s, c;
+	let l = Object.assign({}, {
+		left: !0,
+		right: !0,
+		top: !0,
+		bottom: !0,
+		bottomRight: !0,
+		handleSize: 4,
+		showHandlers: !1
+	}, n);
+	r(), e = (i = l == null ? void 0 : l.handleSize) == null ? e : i;
+	let { width: u } = t.getBoundingClientRect();
+	getComputedStyle(t).position === "static" && (t.style.position = "relative"), t.style.boxSizing = t.style.boxSizing || "border-box", l != null && l.maxWidth && u > l.maxWidth && (t.style.width = `${l.maxWidth}px`);
+	let d = {
 		startX: 0,
 		startY: 0,
 		startW: 0,
 		startH: 0,
 		startL: 0,
 		startT: 0,
-		minW: (r = t == null ? void 0 : t.minWidth) == null ? 40 : r,
-		minH: (o = t == null ? void 0 : t.minHeight) == null ? 24 : o,
-		maxW: t == null ? void 0 : t.maxWidth,
-		maxH: t == null ? void 0 : t.maxHeight,
+		minW: (s = l == null ? void 0 : l.minWidth) == null ? 0 : s,
+		minH: (c = l == null ? void 0 : l.minHeight) == null ? 0 : c,
+		maxW: l == null ? void 0 : l.maxWidth,
+		maxH: l == null ? void 0 : l.maxHeight,
 		handlers: []
-	}, c = i("hr", e), l = i("hr", e), u = i("vr", e), d = i("vr", e), f = i("corner", e);
-	c.dataset.side = "left", l.dataset.side = "right", u.dataset.side = "top", d.dataset.side = "bottom", f.dataset.side = "bottom-right", e.appendChild(c), e.appendChild(l), e.appendChild(u), e.appendChild(d), e.appendChild(f), s.handlers.push(c, l, u, d, f);
-	let p = (t) => {
+	};
+	if (l != null && l.left) {
+		let e = a("hr", t, l);
+		e.dataset.side = "left", t.appendChild(e), d.handlers.push(e);
+	}
+	if (l != null && l.right) {
+		let e = a("hr", t, l);
+		e.dataset.side = "right", t.appendChild(e), d.handlers.push(e);
+	}
+	if (l != null && l.top) {
+		let e = a("vr", t, l);
+		e.dataset.side = "top", t.appendChild(e), d.handlers.push(e);
+	}
+	if (l != null && l.bottom) {
+		let e = a("vr", t, l);
+		e.dataset.side = "bottom", t.appendChild(e), d.handlers.push(e);
+	}
+	if (l != null && l.bottomRight) {
+		let e = a("corner", t, l);
+		e.dataset.side = "bottom-right", t.appendChild(e), d.handlers.push(e);
+	}
+	let f = (e) => {
 		var n, r, i;
-		let a = t.target;
+		let a = e.target;
 		if (!a || !((n = a.dataset) != null && n.side)) return;
 		let o = a.dataset.side;
-		(r = (i = t.target).setPointerCapture) == null || r.call(i, t.pointerId), s.side = o, s.pointerId = t.pointerId;
-		let c = e.getBoundingClientRect();
-		s.startX = t.clientX, s.startY = t.clientY, s.startW = c.width, s.startH = c.height;
-		let l = getComputedStyle(e), u = parseFloat(l.left || "0"), d = parseFloat(l.top || "0");
-		s.startL = u, s.startT = d, s.onMove = (t) => m(t, e, s), s.onUp = (t) => h(t, e, s), window.addEventListener("pointermove", s.onMove), window.addEventListener("pointerup", s.onUp), window.addEventListener("pointercancel", s.onUp), t.preventDefault();
-	}, m = (e, t, n) => {
+		(r = (i = e.target).setPointerCapture) == null || r.call(i, e.pointerId), d.side = o, d.pointerId = e.pointerId;
+		let s = t.getBoundingClientRect();
+		d.startX = e.clientX, d.startY = e.clientY, d.startW = s.width, d.startH = s.height;
+		let c = getComputedStyle(t), l = parseFloat(c.left || "0"), u = parseFloat(c.top || "0");
+		d.startL = l, d.startT = u, d.onMove = (e) => p(e, t, d), d.onUp = (e) => m(e, t, d), window.addEventListener("pointermove", d.onMove), window.addEventListener("pointerup", d.onUp), window.addEventListener("pointercancel", d.onUp), e.preventDefault();
+	}, p = (e, t, n) => {
 		if (n.side === void 0) return;
-		let r = e.clientX - n.startX, i = e.clientY - n.startY, o = n.startW, s = n.startH, c = n.startL, l = n.startT;
-		n.side === "right" ? (o = Math.max(n.minW, n.startW + r), n.maxW && (o = Math.min(o, n.maxW))) : n.side === "left" ? (o = Math.max(n.minW, n.startW - r), n.maxW && (o = Math.min(o, n.maxW)), c = n.startL + (n.startW - o)) : n.side === "bottom" ? (s = Math.max(n.minH, n.startH + i), n.maxH && (s = Math.min(s, n.maxH))) : n.side === "top" ? (s = Math.max(n.minH, n.startH - i), n.maxH && (s = Math.min(s, n.maxH)), l = n.startT + (n.startH - s)) : n.side === "bottom-right" && (o = Math.max(n.minW, n.startW + r), s = Math.max(n.minH, n.startH + i), n.maxW && (o = Math.min(o, n.maxW)), n.maxH && (s = Math.min(s, n.maxH))), t.style.width = `${o}px`, t.style.height = `${s}px`;
+		let r = e.clientX - n.startX, i = e.clientY - n.startY, a = n.startW, s = n.startH, c = n.startL, l = n.startT;
+		n.side === "right" ? (a = Math.max(n.minW, n.startW + r), n.maxW && (a = Math.min(a, n.maxW))) : n.side === "left" ? (a = Math.max(n.minW, n.startW - r), n.maxW && (a = Math.min(a, n.maxW)), c = n.startL + (n.startW - a)) : n.side === "bottom" ? (s = Math.max(n.minH, n.startH + i), n.maxH && (s = Math.min(s, n.maxH))) : n.side === "top" ? (s = Math.max(n.minH, n.startH - i), n.maxH && (s = Math.min(s, n.maxH)), l = n.startT + (n.startH - s)) : n.side === "bottom-right" && (a = Math.max(n.minW, n.startW + r), s = Math.max(n.minH, n.startH + i), n.maxW && (a = Math.min(a, n.maxW)), n.maxH && (s = Math.min(s, n.maxH))), t.style.width = `${a}px`, t.style.height = `${s}px`;
 		let u = getComputedStyle(t).position;
 		(u === "absolute" || u === "relative" || u === "fixed") && (t.style.left = `${c}px`, t.style.top = `${l}px`);
 		let d = t.getBoundingClientRect();
 		n.handlers.forEach((e) => {
 			let t = e.dataset.side;
-			a(e, t, d);
+			o(e, t, d);
 		}), e.preventDefault();
-	}, h = (e, t, n) => {
+	}, m = (e, t, n) => {
 		n.onMove && (window.removeEventListener("pointermove", n.onMove), window.removeEventListener("pointerup", n.onUp), window.removeEventListener("pointercancel", n.onUp)), n.side = void 0, n.pointerId = void 0;
-	}, g = () => {
-		let t = e.getBoundingClientRect();
-		s.handlers.forEach((e) => {
-			let n = e.dataset.side;
-			e.style.position = "absolute", e.style.boxSizing = "content-box", a(e, n, t);
+	}, h = () => {
+		let e = t.getBoundingClientRect();
+		d.handlers.forEach((t) => {
+			let n = t.dataset.side;
+			t.style.position = "absolute", t.style.boxSizing = "content-box", o(t, n, e);
 		});
 	};
-	s.handlers.forEach((e) => e.addEventListener("pointerdown", p));
-	let _ = new ResizeObserver(g);
-	return _.observe(e), s.ro = _, g(), { destroy: () => {
-		s.handlers.forEach((t) => {
-			t.removeEventListener("pointerdown", p), t.parentElement === e && e.removeChild(t);
-		}), s.onMove && (window.removeEventListener("pointermove", s.onMove), window.removeEventListener("pointerup", s.onUp), window.removeEventListener("pointercancel", s.onUp)), s.ro && s.ro.disconnect();
+	d.handlers.forEach((e) => e.addEventListener("pointerdown", f));
+	let g = new ResizeObserver(h);
+	return g.observe(t), d.ro = g, h(), { destroy: () => {
+		d.handlers.forEach((e) => {
+			e.removeEventListener("pointerdown", f), e.parentElement === t && t.removeChild(e);
+		}), d.onMove && (window.removeEventListener("pointermove", d.onMove), window.removeEventListener("pointerup", d.onUp), window.removeEventListener("pointercancel", d.onUp)), d.ro && d.ro.disconnect();
 	} };
 }
-var s = {
+var c = {
 	mounted(e, t) {
-		let n = t.value, { destroy: r } = o(e, n);
+		let n = t.value, { destroy: r } = s(e, n);
 		e.__v_resizable_cleanup = r;
 	},
 	beforeUnmount(e) {
@@ -124,9 +158,8 @@ var s = {
 		t && (t(), delete e.__v_resizable_cleanup);
 	}
 };
-function c(e, t) {
-	let { destroy: n } = o(e, t);
-	return n;
+function l(e, t) {
+	return s(e, t);
 }
 //#endregion
-export { c as applyResizable, s as vResizable };
+export { l as applyResizable, c as vResizable };

package/es/index.d.ts

@@ -2148,6 +2148,67 @@ declare const _default: {
     useMenuEmits(emits: EmitFn<components.MenuEmits>): {
         select: (value: any, item: components.MenuOption) => void;
     };
+    ReEllipsisMenu: {
+        new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<components.EllipsisMenuProps> & Readonly<{
+            onUpdated?: ((args_0: {
+                showMore: boolean;
+                moreSlots: VNode[];
+                splitIndex: number;
+            }) => any) | undefined;
+        }>, {
+            wrapper: Readonly< ShallowRef<HTMLElement | null>>;
+            moreRef: Readonly< ShallowRef<HTMLElement | null>>;
+            update: () => Promise<void>;
+        }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+            updated: (args_0: {
+                showMore: boolean;
+                moreSlots: VNode[];
+                splitIndex: number;
+            }) => any;
+        }, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<components.EllipsisMenuProps> & Readonly<{
+            onUpdated?: ((args_0: {
+                showMore: boolean;
+                moreSlots: VNode[];
+                splitIndex: number;
+            }) => any) | undefined;
+        }>, {
+            wrapper: Readonly< ShallowRef<HTMLElement | null>>;
+            moreRef: Readonly< ShallowRef<HTMLElement | null>>;
+            update: () => Promise<void>;
+        }, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & ComponentOptionsBase<Readonly<components.EllipsisMenuProps> & Readonly<{
+        onUpdated?: ((args_0: {
+            showMore: boolean;
+            moreSlots: VNode[];
+            splitIndex: number;
+        }) => any) | undefined;
+    }>, {
+        wrapper: Readonly< ShallowRef<HTMLElement | null>>;
+        moreRef: Readonly< ShallowRef<HTMLElement | null>>;
+        update: () => Promise<void>;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+        updated: (args_0: {
+            showMore: boolean;
+            moreSlots: VNode[];
+            splitIndex: number;
+        }) => any;
+    }, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        } & {
+            icon?: (props: {}) => any;
+        };
+    });
     install: (app: App) => void;
     version: string;
 };