rappel-ui 1.0.39 → 1.0.41

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

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,111 @@
-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, 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 { 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 u = a({
+var j = d({
 	__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(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(() => {
+			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 = () => {
+			let e = M.value;
+			return e ? e.scrollWidth > e.clientWidth : !1;
+		}, K = C(), q = () => {
+			var e, t;
+			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));
+		}, 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");
+			}
+			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 (!R.value && M.value && M.value.querySelectorAll("li[is-hidden=\"true\"]").forEach((e) => {
+					e.setAttribute("is-hidden", "false");
+				}), await m(), G()) {
+					W.value = !0, await m();
+					let e = q();
+					if (e === -1) return;
+					R.value ? J(P.value, e) : Y(K, e);
+				} else W.value = !1, I.value = [], F.value = [];
+			}
+		}, Z = O(X, 100), Q = () => {
+			let e = [];
+			if (B.value) {
+				let { width: t, stop: n } = k(M.value), { stop: r } = T(t, () => {
+					Z();
+				});
+				e.push(n, r);
+			}
+			return { cleanup: () => {
+				e.forEach((e) => e());
+			} };
+		}, $ = [], te = () => {
+			$.forEach((e) => e());
+		}, ne = async () => {
+			if (B.value) {
+				await X();
+				let { cleanup: e } = Q();
+				$.push(e);
+			}
+		};
+		return h(() => {
+			ne();
+		}), g(() => {
+			te();
+		}), j({
+			loopRef: M,
+			update: X
+		}), (e, t) => (_(), l("ul", {
+			ref_key: "loopRef",
+			ref: M
+		}, [b(e.$slots, "default", {}, () => [(_(!0), l(i, null, y(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,
-				item: a
-			}, null, 8, ["item"])) : (s(), r(e, o({
+				item: t,
+				"is-more": e.$attrs["is-more"]
+			}, null, 8, ["item", "is-more"])) : (_(), s(n, p({
 				key: 1,
 				ref_for: !0
-			}, a), null, 16))], 64);
-		}), 128))])]));
+			}, t, { "is-more": e.$attrs["is-more"] }), null, 16, ["is-more"]))], 64);
+		}), 128))]), W.value ? (_(), s(n, {
+			key: 0,
+			ref_key: "moreRef",
+			ref: N,
+			value: "more",
+			children: F.value,
+			"has-children": "",
+			"sub-icon": !1,
+			depth: -1,
+			"is-more": !0,
+			class: "is-more",
+			icon: S(U)
+		}, u({
+			icon: E(() => [b(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))]),
+			key: "0"
+		}]), 1032, ["children", "icon"])) : c("", !0)], 512));
 	}
 });
 //#endregion
-export { u as default };
+export { j 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;