rappel-ui 1.0.40 → 1.0.42

package/es/components/ellipsis-menu/index.d.ts

@@ -0,0 +1,65 @@
+import { CreateComponentPublicInstanceWithMixins, VNode, ShallowRef, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
+import { EllipsisMenuProps } from './index.ts';
+export * from './src/types.ts';
+export declare const ReEllipsisMenu: {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< 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< 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< 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;
+    };
+});
+export default ReEllipsisMenu;

package/es/components/ellipsis-menu/index.mjs

@@ -0,0 +1,7 @@
+import { withInstall as e } from "../../utils/vue/index.mjs";
+import "../../utils/index.mjs";
+import t from "./src/ellipsis-menu.mjs";
+//#region packages/components/ellipsis-menu/index.ts
+var n = e(t);
+//#endregion
+export { n as ReEllipsisMenu, n as default };

package/es/components/ellipsis-menu/src/ellipsis-menu.mjs

@@ -0,0 +1,5 @@
+import e from "./ellipsis-menu.vue_vue_type_script_setup_true_lang.mjs";
+//#region packages/components/ellipsis-menu/src/ellipsis-menu.vue
+var t = e;
+//#endregion
+export { t as default };

package/es/components/ellipsis-menu/src/ellipsis-menu.vue.d.ts

@@ -0,0 +1,33 @@
+import { VNode, DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { EllipsisMenuProps } from './types';
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    icon?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: DefineComponent<EllipsisMenuProps, {
+    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, PublicProps, Readonly<EllipsisMenuProps> & Readonly<{
+    onUpdated?: ((args_0: {
+        showMore: boolean;
+        moreSlots: VNode[];
+        splitIndex: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,133 @@
+import { useNamespace as e } from "../../../composables/use-namespace/index.mjs";
+import { useSlotNodes as t } from "../../../composables/use-slot-nodes/index.mjs";
+import "../../../composables/index.mjs";
+import { ReDropdown as n, ReDropdownItem as r, ReDropdownMenu as i } from "../../dropdown/index.mjs";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, nextTick as p, normalizeClass as m, onMounted as h, onUnmounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, unref as S, useSlots as C, useTemplateRef as w, watch as T, withCtx as E } from "vue";
+import { useDebounceFn as D, useElementSize as O } from "@vueuse/core";
+import { MoreDotCircleHorizontal as k } from "@rappel-ui/svg-icons";
+//#region packages/components/ellipsis-menu/src/ellipsis-menu.vue?vue&type=script&setup=true&lang.ts
+var A = f({
+	__name: "ellipsis-menu",
+	props: {
+		icon: { default: () => k },
+		trigger: { default: "hover" },
+		placement: { default: "bottom-end" },
+		debounce: { default: 150 },
+		showArrow: {
+			type: Boolean,
+			default: !0
+		},
+		offset: { default: 10 },
+		gap: { default: 0 },
+		floatingClass: {}
+	},
+	emits: ["updated"],
+	setup(f, { expose: k, emit: A }) {
+		var j;
+		let M = A, { n: N, ns: P, nm: F } = e("ellipsis-menu"), I = w("wrapper"), L = w("moreRef"), R = v([]), z = v(!1), B = o(() => [N()]), V = o(() => [F("dropdown"), f.floatingClass]), H = C(), U = () => {
+			let e = I.value;
+			return e ? e.scrollWidth > e.clientWidth : !1;
+		}, W = () => {
+			let e = L.value, t = I.value;
+			if (!e || !t) return -1;
+			let n = t.offsetWidth, r = Array.from(t.children), i = e.offsetWidth;
+			return r.findIndex((e) => {
+				let t = getComputedStyle(e);
+				return i += e.offsetWidth + f.gap + parseFloat(t.marginLeft) + parseFloat(t.marginRight), i - f.gap > n;
+			});
+		}, G = (e, n) => {
+			var r;
+			let i = t(e), a = i == null ? [] : i, o = (r = a == null ? void 0 : a.length) == null ? 0 : r;
+			for (let e = n; e < o; e++) {
+				var s;
+				(s = I.value) == null || s.children[e].setAttribute("is-hidden", "true");
+			}
+			R.value = a.slice(n);
+		}, K = async () => {
+			if (z.value = !1, I.value) {
+				if (I.value.querySelectorAll("[is-hidden=\"true\"]").forEach((e) => {
+					e.removeAttribute("is-hidden");
+				}), await p(), U()) {
+					z.value = !0, await p();
+					let e = W();
+					if (e === -1) return;
+					G(H, e), M("updated", {
+						showMore: z.value,
+						moreSlots: R.value,
+						splitIndex: e
+					});
+				} else z.value = !1, R.value = [], M("updated", {
+					showMore: z.value,
+					moreSlots: R.value,
+					splitIndex: -1
+				});
+			}
+		}, q = D(K, (j = f.debounce) == null ? 0 : j), J = () => {
+			let e = [], { width: t, stop: n } = O(I), { stop: r } = T(t, q);
+			return e.push(n, r), { cleanup: () => {
+				e.forEach((e) => e());
+			} };
+		}, Y = [], X = () => {
+			Y.forEach((e) => e());
+		}, Z = async () => {
+			await K();
+			let { cleanup: e } = J(), { stop: t } = T(() => H == null ? void 0 : H.default, q);
+			Y.push(e, t);
+		};
+		return h(() => {
+			Z();
+		}), g(() => {
+			X();
+		}), k({
+			wrapper: I,
+			moreRef: L,
+			update: K
+		}), (e, t) => (_(), l("div", {
+			ref_key: "wrapper",
+			ref: I,
+			class: m(B.value)
+		}, [b(e.$slots, "default"), z.value ? (_(), s(S(n), {
+			key: 0,
+			trigger: f.trigger,
+			placement: f.placement,
+			"show-arrow": f.showArrow,
+			offset: f.offset,
+			"floating-class": V.value
+		}, {
+			menu: E(() => [d(S(i), null, {
+				default: E(() => [(_(!0), l(a, null, y(R.value, (e) => {
+					var t, n;
+					return _(), s(S(r), {
+						key: e == null || (t = e.props) == null ? void 0 : t.value,
+						value: e == null || (n = e.props) == null ? void 0 : n.value
+					}, {
+						default: E(() => [(_(), s(x(e), { key: e.key }))]),
+						_: 2
+					}, 1032, ["value"]);
+				}), 128))]),
+				_: 1
+			})]),
+			default: E(() => [u("span", {
+				ref_key: "moreRef",
+				ref: L,
+				class: m([S(P)("icon")])
+			}, [b(e.$slots, "icon", {}, () => [f.icon ? (_(), l(a, { key: 0 }, [typeof f.icon == "string" ? (_(), l("i", {
+				key: 0,
+				class: m([f.icon]),
+				"aria-hidden": "true"
+			}, null, 2)) : (_(), s(x(f.icon), {
+				key: 1,
+				"aria-hidden": "true"
+			}))], 64)) : c("", !0)])], 2)]),
+			_: 3
+		}, 8, [
+			"trigger",
+			"placement",
+			"show-arrow",
+			"offset",
+			"floating-class"
+		])) : c("", !0)], 2));
+	}
+});
+//#endregion
+export { A as default };

package/es/components/ellipsis-menu/src/types.d.ts

@@ -0,0 +1,13 @@
+import { Component } from 'vue';
+import { MaybeClass } from '../../../types';
+import { Placement, Trigger } from '../../tooltip';
+export interface EllipsisMenuProps {
+    icon?: string | Component;
+    trigger?: Trigger;
+    placement?: Placement;
+    debounce?: number;
+    showArrow?: boolean;
+    offset?: number;
+    gap?: number;
+    floatingClass?: MaybeClass;
+}

package/es/components/ellipsis-menu/style/css.mjs

@@ -0,0 +1,2 @@
+import '../../../../theme-chalk/base.css'
+import '../../../../theme-chalk/re-ellipsis-menu.css'

package/es/components/ellipsis-menu/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../../../theme-chalk/src/base.scss'
+import '../../../../theme-chalk/src/ellipsis-menu.scss'

package/es/components/index.d.ts

@@ -13,3 +13,4 @@ export * from './popconfirm';
 export * from './message';
 export * from './dropdown';
 export * from './menu';
+export * from './ellipsis-menu';

package/es/components/index.mjs

@@ -21,14 +21,16 @@ import { useDropdownEmits as C } from "./dropdown/src/use-dropdown-emit.mjs";
 import { ReDropdown as w, ReDropdownItem as T, ReDropdownMenu as E, ReDropdownSubmenu as D } from "./dropdown/index.mjs";
 import { useMenuEmits as O } from "./menu/src/use-menu-emit.mjs";
 import { ReMenu as k, ReMenuItem as A, ReSubmenu as j } from "./menu/index.mjs";
+import { ReEllipsisMenu as M } from "./ellipsis-menu/index.mjs";
 //#region packages/components/index.ts
-var M = e({
+var N = e({
 	ReButton: () => a,
 	ReButtonGroup: () => o,
 	ReDropdown: () => w,
 	ReDropdownItem: () => T,
 	ReDropdownMenu: () => E,
 	ReDropdownSubmenu: () => D,
+	ReEllipsisMenu: () => M,
 	ReFilterPanel: () => f,
 	ReInput: () => s,
 	ReMenu: () => k,
@@ -56,4 +58,4 @@ var M = e({
 	useTransitionEmits: () => m
 });
 //#endregion
-export { a as ReButton, o as ReButtonGroup, w as ReDropdown, T as ReDropdownItem, E as ReDropdownMenu, D as ReDropdownSubmenu, f as ReFilterPanel, s as ReInput, k as ReMenu, A as ReMenuItem, S as ReMessage, d as ReNeutralColor, b as RePopconfirm, y as RePopover, l as RePrimaryColor, u as ReSecondaryColor, j as ReSubmenu, p as ReSvgIcon, c as ReTabs, _ as ReTooltip, h as ReTransition, t as _buttonGroupProvideKey, n as buttonNativeTypes, r as buttonSizes, i as buttonTypes, M as components_exports, x as createMessage, C as useDropdownEmits, O as useMenuEmits, v as usePopoverEmits, g as useTooltipEmits, m as useTransitionEmits };
+export { a as ReButton, o as ReButtonGroup, w as ReDropdown, T as ReDropdownItem, E as ReDropdownMenu, D as ReDropdownSubmenu, M as ReEllipsisMenu, f as ReFilterPanel, s as ReInput, k as ReMenu, A as ReMenuItem, S as ReMessage, d as ReNeutralColor, b as RePopconfirm, y as RePopover, l as RePrimaryColor, u as ReSecondaryColor, j as ReSubmenu, p as ReSvgIcon, c as ReTabs, _ as ReTooltip, h as ReTransition, t as _buttonGroupProvideKey, n as buttonNativeTypes, r as buttonSizes, i as buttonTypes, N as components_exports, x as createMessage, C as useDropdownEmits, O as useMenuEmits, v as usePopoverEmits, g as useTooltipEmits, m as useTransitionEmits };

package/es/components/menu/src/loop.vue_vue_type_script_setup_true_lang.mjs

@@ -3,115 +3,112 @@ import "../../../composables/index.mjs";
 import { _menuProvideKey as t } from "./constants.mjs";
 import n from "./menu-item.mjs";
 import r from "./submenu.mjs";
-import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createSlots as l, defineComponent as u, inject as d, mergeProps as f, nextTick as p, onMounted as m, onUnmounted as h, openBlock as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, shallowRef as b, unref as x, useSlots as S, useTemplateRef as C, watch as w, withCtx as T } from "vue";
-import { computedAsync as E, useDebounceFn as D, useElementSize as O } from "@vueuse/core";
-import { getAsyncIcon as k } from "@rappel-ui/svg-icons";
+import { Fragment as i, cloneVNode as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createSlots as u, defineComponent as d, inject as f, mergeProps as p, nextTick as m, onMounted as h, onUnmounted as g, openBlock as _, ref as ee, renderList as v, renderSlot as y, resolveDynamicComponent as b, shallowRef as x, unref as S, useSlots as C, useTemplateRef as w, watch as T, withCtx as E } from "vue";
+import { computedAsync as D, useDebounceFn as O, useElementSize as k } from "@vueuse/core";
+import { getAsyncIcon as A } from "@rappel-ui/svg-icons";
 //#region packages/components/menu/src/loop.vue?vue&type=script&setup=true&lang.ts
-var A = u({
+var j = d({
 	__name: "loop",
 	props: { options: { default: () => void 0 } },
-	setup(u, { expose: A }) {
-		let j = C("loopRef"), M = C("moreRef"), N = b([]), P = b([]), F = b([]), { depth: I, hasOptions: L, direction: R, ellipsis: z, ellipsisIcon: B } = d(t), V = a(() => {
+	setup(d, { expose: j }) {
+		let M = w("loopRef"), N = w("moreRef"), P = x([]), F = x([]), I = ee([]), { depth: L, hasOptions: R, direction: z, ellipsis: B, ellipsisIcon: V } = f(t), H = o(() => {
 			var e;
-			return R.value === "horizontal" && z != null && z.value ? N.value : (e = u.options) == null ? [] : e;
-		}), H = E(async () => await k(B == null ? void 0 : B.value) || ""), U = b(!1), W = () => {
-			let e = j.value;
+			return z.value === "horizontal" && B != null && B.value ? P.value : (e = d.options) == null ? [] : e;
+		}), U = D(async () => await A(V == null ? void 0 : V.value) || ""), W = x(!1), G = () => {
+			let e = M.value;
 			return e ? e.scrollWidth > e.clientWidth : !1;
-		}, G = S(), K = () => {
+		}, K = C(), q = () => {
 			var e, t;
-			let n = (e = (t = M.value) == null ? void 0 : t.itemRef) == null ? M.value : e, r = j.value;
+			let n = (e = (t = N.value) == null ? void 0 : t.itemRef) == null ? N.value : e, r = M.value;
 			if (!n || !r) return -1;
 			let i = r.offsetWidth, a = Array.from(r.children), o = n.offsetWidth;
-			return a.findIndex((e) => (o += e.offsetWidth, o > i));
-		}, q = (e, t) => {
-			P.value = e.splice(t, e.length - t);
-		}, J = (t, n) => {
-			var r, i, a;
-			let o = e(t), s = (r = o == null || (i = o[0]) == null ? void 0 : i.children) == null ? [] : r, c = (a = s == null ? void 0 : s.length) == null ? 0 : a;
-			for (let e = n; e < c; e++) {
-				var l;
-				(l = j.value) == null || l.children[e].setAttribute("is-hidden", "true");
+			return a.findIndex((e) => {
+				let t = getComputedStyle(e);
+				return o += e.offsetWidth + parseFloat(t.marginLeft) + parseFloat(t.marginRight), o > i;
+			});
+		}, J = (e, t) => {
+			F.value = e.splice(t, e.length - t);
+		}, Y = (t, n) => {
+			var r, i, o;
+			let s = e(t), c = (r = s == null || (i = s[0]) == null ? void 0 : i.children) == null ? [] : r, l = (o = c == null ? void 0 : c.length) == null ? 0 : o;
+			for (let e = n; e < l; e++) {
+				var u;
+				(u = M.value) == null || u.children[e].setAttribute("is-hidden", "true");
 			}
-			F.value = s.splice(n, s.length - n).map((e) => ({
-				...e,
-				props: {
-					...e.props,
-					"is-more": !0
-				}
-			}));
-		}, Y = async () => {
+			I.value = c.slice(n).map((e) => a(e, { "is-more": !0 }));
+		}, X = async () => {
 			var e;
-			if (N.value = [...(e = u.options) == null ? [] : e], I.value === 0 && R.value !== "vertical" && z.value) {
-				if (!L.value && j.value && j.value.querySelectorAll("li[is-hidden=\"true\"]").forEach((e) => {
+			if (W.value = !1, P.value = [...(e = d.options) == null ? [] : e], L.value === 0 && z.value !== "vertical" && B.value) {
+				if (!R.value && M.value && M.value.querySelectorAll("li[is-hidden=\"true\"]").forEach((e) => {
 					e.setAttribute("is-hidden", "false");
-				}), await p(), W()) {
-					U.value = !0, await p();
-					let e = K();
+				}), await m(), G()) {
+					W.value = !0, await m();
+					let e = q();
 					if (e === -1) return;
-					L.value ? q(N.value, e) : J(G, e);
-				} else U.value = !1, F.value = [], P.value = [];
+					R.value ? J(P.value, e) : Y(K, e);
+				} else W.value = !1, I.value = [], F.value = [];
 			}
-		}, X = D(Y, 100), Z = () => {
+		}, Z = O(X, 100), Q = () => {
 			let e = [];
-			if (z.value) {
-				let { width: t, stop: n } = O(j.value), { stop: r } = w(t, () => {
-					X();
+			if (B.value) {
+				let { width: t, stop: n } = k(M), { stop: r } = T(t, () => {
+					Z();
 				});
 				e.push(n, r);
 			}
 			return { cleanup: () => {
 				e.forEach((e) => e());
 			} };
-		}, Q = [], $ = () => {
-			Q.forEach((e) => e());
-		}, ee = async () => {
-			if (z.value) {
-				await Y();
-				let { cleanup: e } = Z();
-				Q.push(e);
+		}, $ = [], te = () => {
+			$.forEach((e) => e());
+		}, ne = async () => {
+			if (B.value) {
+				await X();
+				let { cleanup: e } = Q(), { stop: t } = T(() => K == null ? void 0 : K.default, Z);
+				$.push(e, t);
 			}
 		};
-		return m(() => {
-			ee();
-		}), h(() => {
-			$();
-		}), A({
-			loopRef: j,
-			update: Y
-		}), (e, t) => (g(), c("ul", {
+		return h(() => {
+			ne();
+		}), g(() => {
+			te();
+		}), j({
+			loopRef: M,
+			update: X
+		}), (e, t) => (_(), l("ul", {
 			ref_key: "loopRef",
-			ref: j
-		}, [v(e.$slots, "default", {}, () => [(g(!0), c(i, null, _(V.value, (t) => {
+			ref: M
+		}, [y(e.$slots, "default", {}, () => [(_(!0), l(i, null, v(H.value, (t) => {
 			var a;
-			return g(), c(i, { key: typeof t.value == "boolean" ? t.label : t.value }, [t != null && (a = t.children) != null && a.length ? (g(), o(r, {
+			return _(), l(i, { key: typeof t.value == "boolean" ? t.label : t.value }, [t != null && (a = t.children) != null && a.length ? (_(), s(r, {
 				key: 0,
 				item: t,
 				"is-more": e.$attrs["is-more"]
-			}, null, 8, ["item", "is-more"])) : (g(), o(n, f({
+			}, null, 8, ["item", "is-more"])) : (_(), s(n, p({
 				key: 1,
 				ref_for: !0
 			}, t, { "is-more": e.$attrs["is-more"] }), null, 16, ["is-more"]))], 64);
-		}), 128))]), U.value ? (g(), o(n, {
+		}), 128))]), W.value ? (_(), s(n, {
 			key: 0,
 			ref_key: "moreRef",
-			ref: M,
+			ref: N,
 			value: "more",
-			children: P.value,
+			children: F.value,
 			"has-children": "",
 			"sub-icon": !1,
 			depth: -1,
 			"is-more": !0,
 			class: "is-more",
-			icon: x(H)
-		}, l({
-			icon: T(() => [v(e.$slots, "ellipsis-icon")]),
+			icon: S(U)
+		}, u({
+			icon: E(() => [y(e.$slots, "ellipsis-icon")]),
 			_: 2
-		}, [x(L) ? void 0 : {
+		}, [S(R) ? void 0 : {
 			name: "item-submenu",
-			fn: T(() => [(g(), o(y(() => F.value)))]),
+			fn: E(() => [(_(!0), l(i, null, v(I.value, (e) => (_(), s(b(e), { key: e.key }))), 128))]),
 			key: "0"
-		}]), 1032, ["children", "icon"])) : s("", !0)], 512));
+		}]), 1032, ["children", "icon"])) : c("", !0)], 512));
 	}
 });
 //#endregion
-export { A as default };
+export { j as default };