rappel-ui 1.0.41 → 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,7 +3,7 @@ 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, 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 v, renderList as y, renderSlot as b, resolveDynamicComponent as ee, shallowRef as x, unref as S, useSlots as C, useTemplateRef as w, watch as T, withCtx as E } from "vue";
+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
@@ -11,7 +11,7 @@ var j = d({
 	__name: "loop",
 	props: { options: { default: () => void 0 } },
 	setup(d, { expose: j }) {
-		let M = w("loopRef"), N = w("moreRef"), P = x([]), F = x([]), I = v([]), { depth: L, hasOptions: R, direction: z, ellipsis: B, ellipsisIcon: V } = f(t), H = o(() => {
+		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 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 = () => {
@@ -22,7 +22,10 @@ var j = d({
 			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));
+			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) => {
@@ -35,7 +38,7 @@ var j = d({
 			I.value = c.slice(n).map((e) => a(e, { "is-more": !0 }));
 		}, X = async () => {
 			var e;
-			if (P.value = [...(e = d.options) == null ? [] : e], L.value === 0 && z.value !== "vertical" && B.value) {
+			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 m(), G()) {
@@ -48,7 +51,7 @@ var j = d({
 		}, Z = O(X, 100), Q = () => {
 			let e = [];
 			if (B.value) {
-				let { width: t, stop: n } = k(M.value), { stop: r } = T(t, () => {
+				let { width: t, stop: n } = k(M), { stop: r } = T(t, () => {
 					Z();
 				});
 				e.push(n, r);
@@ -61,8 +64,8 @@ var j = d({
 		}, ne = async () => {
 			if (B.value) {
 				await X();
-				let { cleanup: e } = Q();
-				$.push(e);
+				let { cleanup: e } = Q(), { stop: t } = T(() => K == null ? void 0 : K.default, Z);
+				$.push(e, t);
 			}
 		};
 		return h(() => {
@@ -75,7 +78,7 @@ var j = d({
 		}), (e, t) => (_(), l("ul", {
 			ref_key: "loopRef",
 			ref: M
-		}, [b(e.$slots, "default", {}, () => [(_(!0), l(i, null, y(H.value, (t) => {
+		}, [y(e.$slots, "default", {}, () => [(_(!0), l(i, null, v(H.value, (t) => {
 			var a;
 			return _(), l(i, { key: typeof t.value == "boolean" ? t.label : t.value }, [t != null && (a = t.children) != null && a.length ? (_(), s(r, {
 				key: 0,
@@ -98,11 +101,11 @@ var j = d({
 			class: "is-more",
 			icon: S(U)
 		}, u({
-			icon: E(() => [b(e.$slots, "ellipsis-icon")]),
+			icon: E(() => [y(e.$slots, "ellipsis-icon")]),
 			_: 2
 		}, [S(R) ? void 0 : {
 			name: "item-submenu",
-			fn: E(() => [(_(!0), l(i, null, y(I.value, (e) => (_(), s(ee(e), { key: e.key }))), 128))]),
+			fn: E(() => [(_(!0), l(i, null, v(I.value, (e) => (_(), s(b(e), { key: e.key }))), 128))]),
 			key: "0"
 		}]), 1032, ["children", "icon"])) : c("", !0)], 512));
 	}

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 };