rappel-ui 1.0.38 → 1.0.40

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

@@ -24,7 +24,10 @@ var E = ["depth"], D = p({
 			default: () => void 0
 		},
 		icon: { default: "" },
-		subIcon: { default: () => w },
+		subIcon: {
+			type: [String, Boolean],
+			default: () => w
+		},
 		depth: { default: () => void 0 }
 	},
 	setup(p) {
@@ -37,12 +40,9 @@ var E = ["depth"], D = p({
 			k("children", A.value)
 		]), M = o(() => {
 			var e;
-			return (e = p.depth) == null ? F.value : e;
-		}), N = o(() => !A.value || p.disabled), P = m(r, null), F = o(() => P == null ? void 0 : P.depth.value), I = o(() => P.theme.value), L = o(() => P.reverseTheme.value), R = o(() => {
-			var e;
-			return P == null || (e = P.submenuOffset) == null ? void 0 : e.value;
-		}), z = (e) => {
-			e.stopPropagation(), !(A.value || p.disabled) && (P == null || P.select(p.value, {
+			return (e = p.depth) == null ? P.value : e;
+		}), N = o(() => !A.value || p.disabled), { depth: P, theme: F, reverseTheme: I, submenuOffset: L, select: R } = m(r), z = (e) => {
+			e.stopPropagation(), !(A.value || p.disabled) && R(p.value, {
 				label: p.label,
 				disabled: p.disabled,
 				value: p.value,
@@ -51,12 +51,12 @@ var E = ["depth"], D = p({
 				icon: p.icon,
 				subIcon: p.subIcon,
 				depth: M.value
-			}));
-		}, B = C(async () => await T(p.icon)), V = C(async () => await T(p.subIcon)), H = x("tooltipRef"), U = o(() => {
+			});
+		}, B = C(async () => await T(p.icon)), V = C(async () => await T(p.subIcon || "")), H = x("tooltipRef"), U = o(() => {
 			var e;
 			let t = (e = H.value) == null ? void 0 : e.floatingPlacement;
 			return [{ "transform-origin": i[t] }];
-		}), { currentTheme: W } = t(I.value, L.value);
+		}), { currentTheme: W } = t(F.value, I.value);
 		return (e, t) => (g(), l("li", {
 			class: h(j.value),
 			depth: M.value,
@@ -72,9 +72,9 @@ var E = ["depth"], D = p({
 			"show-arrow": !1,
 			transform: !1,
 			transition: "dropdown",
-			offset: R.value,
-			theme: I.value,
-			"reverse-theme": L.value
+			offset: b(L),
+			theme: b(F),
+			"reverse-theme": b(I)
 		}, {
 			content: S(() => {
 				var t;
@@ -91,29 +91,29 @@ var E = ["depth"], D = p({
 				}, null, 8, ["class", "options"])) : _(e.$slots, "default", {}, () => [d(y(p.label), 1)], void 0, 2)];
 			}),
 			default: S(() => [u("div", { class: h([b(D)("label-wrap")]) }, [
-				p.icon ? (g(), l("div", {
+				_(e.$slots, "icon", {}, () => [p.icon ? (g(), l("div", {
 					key: 0,
 					class: h([b(D)("icon")])
-				}, [_(e.$slots, "icon", {}, () => [typeof b(B) == "string" ? (g(), l("i", {
+				}, [typeof b(B) == "string" ? (g(), l("i", {
 					key: 0,
 					class: h([b(B)]),
 					"aria-hidden": "true"
 				}, null, 2)) : (g(), s(v(b(B)), {
 					key: 1,
 					"aria-hidden": "true"
-				}))])], 2)) : c("", !0),
+				}))], 2)) : c("", !0)]),
 				u("div", { class: h([b(D)("label")]) }, [_(e.$slots, "default", {}, () => [d(y(p.label), 1)])], 2),
-				p.subIcon && A.value ? (g(), l("div", {
-					key: 1,
+				_(e.$slots, "sub-icon", {}, () => [p.subIcon && A.value ? (g(), l("div", {
+					key: 0,
 					class: h([b(D)("subicon")])
-				}, [_(e.$slots, "sub-icon", {}, () => [typeof b(V) == "string" ? (g(), l("i", {
+				}, [typeof b(V) == "string" ? (g(), l("i", {
 					key: 0,
 					class: h([b(V)]),
 					"aria-hidden": "true"
 				}, null, 2)) : (g(), s(v(b(V)), {
 					key: 1,
 					"aria-hidden": "true"
-				}))])], 2)) : c("", !0)
+				}))], 2)) : c("", !0)])
 			], 2)]),
 			_: 3
 		}, 8, [

package/es/components/dropdown/src/dropdown.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { normalizeOptions as e } from "../../../utils/util.mjs";
 import "../../../utils/index.mjs";
 import { useNamespace as t } from "../../../composables/use-namespace/index.mjs";
-import { useSlotFirstNode as n } from "../../../composables/use-slot-node/index.mjs";
+import { useSlotFirstNode as n } from "../../../composables/use-slot-nodes/index.mjs";
 import "../../../composables/index.mjs";
 import { ReTooltip as r } from "../../tooltip/index.mjs";
 import { _dropdownProvideKey as i, originsMap as a } from "./constants.mjs";
@@ -91,7 +91,10 @@ var C = d({
 			default: !0
 		},
 		cssDuration: { default: 300 },
-		appear: { type: Boolean },
+		appear: {
+			type: Boolean,
+			default: !0
+		},
 		arrowSize: { default: 8 },
 		arrowOffset: { default: 4 },
 		arrowOptions: { default: () => void 0 },
@@ -181,6 +184,7 @@ var C = d({
 			"hide-delay": d.hideDelay,
 			transition: d.transition,
 			"css-duration": d.cssDuration,
+			appear: d.appear,
 			"css-transition": d.cssTransition,
 			transform: !1,
 			"show-arrow": d.showArrow,
@@ -217,7 +221,7 @@ var C = d({
 			}, null, 8, ["options"])) : u("", !0)])]),
 			default: S(() => [(p(), l(_(L.value)))]),
 			_: 3
-		}, 8, "visible.width.height.max-width.max-height.floating-class.floating-style.disabled.theme.placement.trigger.reverse-theme.show-delay.hide-delay.transition.css-duration.css-transition.show-arrow.offset.teleported.append-to.persistent.boundary.element-context.alt-boundary.root-boundary.arrow-size.arrow-offset.flip-offset.arrow-options.flip-options.inline-options.is-external.external-ref.is-virtual.virtual-ref.onBeforeEnter.onEnter.onAfterEnter.onBeforeLeave.onLeave.onAfterLeave.onEnterCancelled.onLeaveCancelled".split(".")));
+		}, 8, "visible.width.height.max-width.max-height.floating-class.floating-style.disabled.theme.placement.trigger.reverse-theme.show-delay.hide-delay.transition.css-duration.appear.css-transition.show-arrow.offset.teleported.append-to.persistent.boundary.element-context.alt-boundary.root-boundary.arrow-size.arrow-offset.flip-offset.arrow-options.flip-options.inline-options.is-external.external-ref.is-virtual.virtual-ref.onBeforeEnter.onEnter.onAfterEnter.onBeforeLeave.onLeave.onAfterLeave.onEnterCancelled.onLeaveCancelled".split(".")));
 	}
 });
 //#endregion

package/es/components/dropdown/src/types.d.ts

@@ -19,17 +19,17 @@ export interface DropdownOption {
     children?: DropdownOption[];
     hasChildren?: boolean;
     icon?: string | Component;
-    subIcon?: string | Component;
+    subIcon?: string | Component | false;
     depth?: number;
 }
 export interface DropdownProvides {
     select: (value: any, item: DropdownOption) => void;
     depth: Ref<number>;
-    hasOptions?: ComputedRef<boolean>;
-    cssDuration?: ComputedRef<number>;
-    theme?: ComputedRef<Theme>;
-    reverseTheme?: ComputedRef<boolean>;
-    submenuOffset?: ComputedRef<OffsetOptions>;
+    hasOptions: ComputedRef<boolean>;
+    cssDuration: ComputedRef<number>;
+    theme: ComputedRef<Theme>;
+    reverseTheme: ComputedRef<boolean>;
+    submenuOffset: ComputedRef<OffsetOptions>;
 }
 export interface DropdownSubmenuProps {
     item?: DropdownOption;

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

@@ -1,5 +1,6 @@
-import { CreateComponentPublicInstanceWithMixins, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps } from 'vue';
+import { CreateComponentPublicInstanceWithMixins, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, ShallowRef, ComputedRef, Ref, Component } from 'vue';
 import { MenuProps, MenuOption, SubmenuProps } from './index.ts';
+import { Placement } from '@floating-ui/vue';
 export * from './src/types.ts';
 export * from './src/use-menu-emit.ts';
 export declare const ReMenu: {
@@ -33,6 +34,8 @@ export declare const ReMenu: {
 }, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         default?: (props: {}) => any;
+    } & {
+        'ellipsis-icon'?: (props: {}) => any;
     };
 });
 export declare const ReSubmenu: {
@@ -57,18 +60,57 @@ export declare const ReSubmenu: {
     };
 });
 export declare const ReMenuItem: {
-    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< MenuOption> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< MenuOption> & Readonly<{}>, {
+        itemRef: Readonly< ShallowRef<HTMLLIElement | null, HTMLLIElement | null>>;
+        hasChild: ComputedRef<boolean>;
+        showArrow: ComputedRef<boolean>;
+        placement: ComputedRef<Placement>;
+        visible: Ref<boolean, boolean>;
+        value: any;
+        label: string | undefined;
+        disabled: boolean | undefined;
+        icon: string | Component;
+        subIcon: string | false | Component | undefined;
+        depth: number;
+        children: MenuOption[];
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly< MenuOption> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    }, Readonly< MenuOption> & Readonly<{}>, {
+        itemRef: Readonly< ShallowRef<HTMLLIElement | null, HTMLLIElement | null>>;
+        hasChild: ComputedRef<boolean>;
+        showArrow: ComputedRef<boolean>;
+        placement: ComputedRef<Placement>;
+        visible: Ref<boolean, boolean>;
+        value: any;
+        label: string | undefined;
+        disabled: boolean | undefined;
+        icon: string | Component;
+        subIcon: string | false | Component | undefined;
+        depth: number;
+        children: MenuOption[];
+    }, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & ComponentOptionsBase<Readonly< MenuOption> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+} & ComponentOptionsBase<Readonly< MenuOption> & Readonly<{}>, {
+    itemRef: Readonly< ShallowRef<HTMLLIElement | null, HTMLLIElement | null>>;
+    hasChild: ComputedRef<boolean>;
+    showArrow: ComputedRef<boolean>;
+    placement: ComputedRef<Placement>;
+    visible: Ref<boolean, boolean>;
+    value: any;
+    label: string | undefined;
+    disabled: boolean | undefined;
+    icon: string | Component;
+    subIcon: string | false | Component | undefined;
+    depth: number;
+    children: MenuOption[];
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: {
         icon?: (props: {}) => any;
     } & {

package/es/components/menu/src/loop.vue.d.ts

@@ -1,13 +1,18 @@
 import { MenuOption } from './types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { DefineComponent, ShallowRef, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     options?: MenuOption[];
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    'ellipsis-icon'?: (props: typeof __VLS_28) => any;
 };
-declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: DefineComponent<__VLS_Props, {
+    loopRef: Readonly< ShallowRef<HTMLUListElement | null>>;
+    update: () => Promise<void>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,22 +1,117 @@
-import e from "./menu-item.mjs";
-import t from "./submenu.mjs";
-import { Fragment as n, createBlock as r, createElementBlock as i, defineComponent as a, mergeProps as o, openBlock as s, renderList as c, renderSlot as l } from "vue";
+import { useSlotNodes as e } from "../../../composables/use-slot-nodes/index.mjs";
+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";
 //#region packages/components/menu/src/loop.vue?vue&type=script&setup=true&lang.ts
-var u = a({
+var A = u({
 	__name: "loop",
 	props: { options: { default: () => void 0 } },
-	setup(a) {
-		return (u, d) => (s(), i("ul", null, [l(u.$slots, "default", {}, () => [(s(!0), i(n, null, c(a.options, (a) => {
-			var c;
-			return s(), i(n, { key: typeof a.value == "boolean" ? a.label : a.value }, [a != null && (c = a.children) != null && c.length ? (s(), r(t, {
+	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(() => {
+			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 e ? e.scrollWidth > e.clientWidth : !1;
+		}, G = S(), K = () => {
+			var e, t;
+			let n = (e = (t = M.value) == null ? void 0 : t.itemRef) == null ? M.value : e, r = j.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");
+			}
+			F.value = s.splice(n, s.length - n).map((e) => ({
+				...e,
+				props: {
+					...e.props,
+					"is-more": !0
+				}
+			}));
+		}, Y = 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) => {
+					e.setAttribute("is-hidden", "false");
+				}), await p(), W()) {
+					U.value = !0, await p();
+					let e = K();
+					if (e === -1) return;
+					L.value ? q(N.value, e) : J(G, e);
+				} else U.value = !1, F.value = [], P.value = [];
+			}
+		}, X = D(Y, 100), Z = () => {
+			let e = [];
+			if (z.value) {
+				let { width: t, stop: n } = O(j.value), { stop: r } = w(t, () => {
+					X();
+				});
+				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);
+			}
+		};
+		return m(() => {
+			ee();
+		}), h(() => {
+			$();
+		}), A({
+			loopRef: j,
+			update: Y
+		}), (e, t) => (g(), c("ul", {
+			ref_key: "loopRef",
+			ref: j
+		}, [v(e.$slots, "default", {}, () => [(g(!0), c(i, null, _(V.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, {
 				key: 0,
-				item: a
-			}, null, 8, ["item"])) : (s(), r(e, o({
+				item: t,
+				"is-more": e.$attrs["is-more"]
+			}, null, 8, ["item", "is-more"])) : (g(), o(n, f({
 				key: 1,
 				ref_for: !0
-			}, a), null, 16))], 64);
-		}), 128))])]));
+			}, t, { "is-more": e.$attrs["is-more"] }), null, 16, ["is-more"]))], 64);
+		}), 128))]), U.value ? (g(), o(n, {
+			key: 0,
+			ref_key: "moreRef",
+			ref: M,
+			value: "more",
+			children: P.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")]),
+			_: 2
+		}, [x(L) ? void 0 : {
+			name: "item-submenu",
+			fn: T(() => [(g(), o(y(() => F.value)))]),
+			key: "0"
+		}]), 1032, ["children", "icon"])) : s("", !0)], 512));
 	}
 });
 //#endregion
-export { u as default };
+export { A as default };

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

@@ -1,5 +1,6 @@
 import { MenuOption } from './types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { DefineComponent, ShallowRef, ComputedRef, Ref, Component, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { Placement } from '@floating-ui/vue';
 declare var __VLS_7: {}, __VLS_14: {}, __VLS_16: {}, __VLS_30: {}, __VLS_37: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_7) => any;
@@ -14,7 +15,20 @@ type __VLS_Slots = {} & {
 } & {
     submenu?: (props: typeof __VLS_39) => any;
 };
-declare const __VLS_base: DefineComponent<MenuOption, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<MenuOption> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: DefineComponent<MenuOption, {
+    itemRef: Readonly< ShallowRef<HTMLLIElement | null, HTMLLIElement | null>>;
+    hasChild: ComputedRef<boolean>;
+    showArrow: ComputedRef<boolean>;
+    placement: ComputedRef<Placement>;
+    visible: Ref<boolean, boolean>;
+    value: any;
+    label: string | undefined;
+    disabled: boolean | undefined;
+    icon: string | Component;
+    subIcon: string | false | Component | undefined;
+    depth: number;
+    children: MenuOption[];
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<MenuOption> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;