rappel-ui 1.0.13 → 1.0.14

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

@@ -0,0 +1,98 @@
+import { ShallowRef, ComputedRef, Ref, StyleValue } from 'vue';
+import { Placement, OffsetOptions, ArrowOptions, ShiftOptions, FlipOptions, InlineOptions, HideOptions, Boundary, RootBoundary, ElementContext, VirtualElement } from '@floating-ui/vue';
+import { Theme, MaybeClass } from '@rappel-ui/types';
+export interface TooltipProps {
+    visible?: boolean;
+    content?: string;
+    isHtml?: boolean;
+    placement?: Placement;
+    delay?: number | string;
+    width?: number | string;
+    height?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    trigger?: Trigger;
+    disabled?: boolean;
+    showDelay?: number;
+    hideDelay?: number;
+    showArrow?: boolean;
+    floatingClass?: MaybeClass;
+    floatingStyle?: StyleValue;
+    theme?: Theme;
+    reverseTheme?: boolean;
+    offset?: number | OffsetOptions;
+    teleported?: boolean;
+    appendTo?: string | HTMLElement;
+    persistent?: boolean;
+    boundary?: Boundary | HTMLElement;
+    elementContext?: ElementContext;
+    altBoundary?: boolean;
+    rootBoundary?: RootBoundary;
+    transition?: string;
+    mode?: TransitionMode;
+    cssTransition?: boolean;
+    cssDuration?: number;
+    arrowSize?: number;
+    arrowOffset?: number;
+    arrowOptions?: ArrowOptions;
+    shiftOptions?: ShiftOptions;
+    flipOffset?: number;
+    flipOptions?: FlipOptions;
+    inlineOptions?: InlineOptions;
+    hideOptions?: HideOptions;
+    isExternal?: boolean;
+    externalRef?: HTMLElement;
+    isVirtual?: boolean;
+    virtualRef?: VirtualElement;
+}
+export interface TriggerOptions {
+    triggerRef: Ref<HTMLElement | null | undefined>;
+    isExternal?: boolean;
+    externalRef?: ComputedRef<HTMLElement | null | undefined>;
+    externalActiveRef: Ref<HTMLElement | null | undefined>;
+    trigger: string;
+    floatingRef: ShallowRef<HTMLElement | undefined>;
+    open: ShallowRef<boolean>;
+    showDelay?: number;
+    hideDelay?: number;
+    disabled?: ShallowRef<boolean | undefined> | ComputedRef<boolean | undefined>;
+}
+export type Trigger = 'hover' | 'click' | 'focus' | 'contextmenu';
+export type TransitionMode = 'in-out' | 'out-in' | 'default';
+export interface FloatingProps {
+    modelValue?: boolean;
+    style?: StyleValue;
+    arrowStyle?: Record<string, any>;
+    appendTo?: string | HTMLElement;
+    teleported?: boolean;
+    defer?: boolean;
+    content?: string;
+    placement?: string;
+    showArrow?: boolean;
+    width?: number | string;
+    height?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    floatingClass?: MaybeClass;
+    transition?: string;
+    mode?: TransitionMode;
+    cssTransition?: boolean;
+    cssDuration?: number;
+    appear?: boolean;
+    zIndex?: number;
+    theme?: Theme;
+    reverseTheme?: boolean;
+}
+export interface FloatingEmits {
+    beforeShow: [el: HTMLElement];
+    show: [el: HTMLElement];
+    beforeHide: [el: HTMLElement];
+    hide: [el: HTMLElement];
+    beforeEnter: [el: HTMLElement];
+    enter: [el: HTMLElement, done: () => void];
+    afterEnter: [el: HTMLElement];
+    beforeLeave: [el: HTMLElement];
+    leave: [el: HTMLElement, done: () => void];
+    afterLeave: [el: HTMLElement];
+}
+export type { Placement, OffsetOptions, ShiftOptions, FlipOptions, ArrowOptions, VirtualElement, ElementContext, Boundary, RootBoundary, InlineOptions, HideOptions };

package/es/components/tooltip/src/use-emit.d.ts

@@ -0,0 +1,14 @@
+import { EmitFn } from 'vue';
+import { FloatingEmits } from './types';
+export declare function useEmits(emits: EmitFn<FloatingEmits>): {
+    beforeShow: (el: any) => void;
+    show: (el: any) => void;
+    beforeHide: (el: any) => void;
+    hide: (el: any) => void;
+    beforeEnter: (el: any) => void;
+    beforeLeave: (el: any) => void;
+    enter: (el: any, done: any) => void;
+    leave: (el: any, done: any) => void;
+    afterEnter: (el: any) => void;
+    afterLeave: (el: any) => void;
+};

package/es/components/tooltip/src/use-emit.mjs

@@ -0,0 +1,17 @@
+//#region packages/components/tooltip/src/use-emit.ts
+function e(e) {
+	return {
+		beforeShow: (t) => e("beforeShow", t),
+		show: (t) => e("show", t),
+		beforeHide: (t) => e("beforeHide", t),
+		hide: (t) => e("hide", t),
+		beforeEnter: (t) => e("beforeEnter", t),
+		beforeLeave: (t) => e("beforeLeave", t),
+		enter: (t, n) => e("enter", t, n),
+		leave: (t, n) => e("leave", t, n),
+		afterEnter: (t) => e("afterEnter", t),
+		afterLeave: (t) => e("afterLeave", t)
+	};
+}
+//#endregion
+export { e as useEmits };

package/es/components/tooltip/src/use-tooltip.d.ts

@@ -0,0 +1,11 @@
+import { EffectScope } from 'vue';
+import { TriggerOptions } from './types';
+export declare function useTooltip({ triggerRef, isExternal, externalActiveRef, externalRef, trigger, floatingRef, open, showDelay, hideDelay, disabled }: TriggerOptions): {
+    start: () => void;
+    stop: () => void;
+    setup: () => {
+        scope: EffectScope;
+    };
+    delayHide: (cb: () => void) => void;
+    delayShow: () => void;
+};

package/es/components/tooltip/src/use-tooltip.mjs

@@ -0,0 +1,105 @@
+import { useDebounceFn as e } from "../../../node_modules/.pnpm/@vueuse_shared@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.mjs";
+import { onClickOutside as t, useElementHover as n, useEventListener as r } from "../../../node_modules/.pnpm/@vueuse_core@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
+import { effectScope as i, unref as a, watch as o } from "vue";
+//#region packages/components/tooltip/src/use-tooltip.ts
+function s({ triggerRef: s, isExternal: c, externalActiveRef: l, externalRef: u, trigger: d, floatingRef: f, open: p, showDelay: m = 0, hideDelay: h = 0, disabled: g }) {
+	let _ = [], v = e(() => {
+		p.value = !0;
+	}, c ? 0 : m), y = e((e) => {
+		p.value = !1, typeof e == "function" && e();
+	}, c ? 0 : h), b = () => {
+		if (s.value) switch (d) {
+			case "click": {
+				let e = r(s, "click", v), i = n(f, {
+					delayEnter: 0,
+					delayLeave: 0,
+					triggerOnRemoval: !0
+				}), a = t(s, () => {
+					!i.value && y();
+				});
+				_.push(e, a);
+				break;
+			}
+			case "hover": {
+				let e = {
+					delayEnter: c ? 0 : m,
+					delayLeave: c ? 0 : h,
+					triggerOnRemoval: !0
+				}, t = n(s, e);
+				c && p.value && (t.value = !0);
+				let r, { stop: i } = o(t, (e) => {
+					p.value = e || (r == null ? void 0 : r.value);
+				}), { stop: a } = o(f, (i) => {
+					if (!i) return;
+					r = n(f, e);
+					let { stop: a } = o(r, (e) => {
+						p.value = e || t.value;
+					});
+					_.push(a);
+				});
+				_.push(i, a);
+				break;
+			}
+			case "focus": {
+				let e = r(s, "focus", v), i = n(f, {
+					delayEnter: 0,
+					delayLeave: 0,
+					triggerOnRemoval: !0
+				}), a = r(s, "blur", () => !i.value && y()), o = t(s, () => !i.value && y());
+				_.push(e, a, o);
+				break;
+			}
+			case "contextmenu": {
+				let e = r(s, "contextmenu", (e) => {
+					e.preventDefault(), v();
+				}), i = n(f, {
+					delayEnter: 0,
+					delayLeave: 0,
+					triggerOnRemoval: !0
+				}), a = t(s, () => !i.value && y());
+				_.push(e, a);
+				break;
+			}
+		}
+	}, x = () => {
+		_.forEach((e) => e());
+	}, S = () => {
+		p.value = !1, x();
+	};
+	return c && o(() => u == null ? void 0 : u.value, (e) => {
+		if (!(["click", "contextmenu"].includes(d) && l.value === e)) {
+			if (!l.value || !p.value) {
+				l.value = e, v();
+				return;
+			}
+			y(() => {
+				l.value = e, v();
+			});
+		}
+	}), {
+		start: b,
+		stop: S,
+		setup: () => {
+			let e = i();
+			return e.run(() => {
+				if (p.value) {
+					x();
+					return;
+				}
+				if (a(g)) {
+					S();
+					return;
+				}
+				b(), o(() => a(g), (e) => {
+					e ? S() : b();
+				}), o(s, (e) => {
+					e && (x(), b());
+				});
+			}), { scope: e };
+		},
+		delayHide: y,
+		delayShow: v
+	};
+}
+//#endregion
+export { s as useTooltip };

package/es/composables/index.d.ts

@@ -0,0 +1,8 @@
+export * from './use-draggable';
+export * from './use-date-format';
+export * from './use-once-fn';
+export * from './use-time-nodes';
+export * from './use-waterfall-layout';
+export * from './use-namespace';
+export * from './use-z-index';
+export * from './use-theme';

package/es/composables/index.mjs

@@ -0,0 +1,9 @@
+import { useDraggable as e } from "./use-draggable/index.mjs";
+import { useDateFormat as t } from "./use-date-format/index.mjs";
+import { useOnceFn as n } from "./use-once-fn/index.mjs";
+import { useTimeNodes as r } from "./use-time-nodes/index.mjs";
+import { useWaterFallLayout as i } from "./use-waterfall-layout/index.mjs";
+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";
+export { t as useDateFormat, e as useDraggable, a as useNamespace, n as useOnceFn, s as useTheme, r as useTimeNodes, i as useWaterFallLayout, o as useZIndex };

package/es/composables/use-date-format/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ *时间格式化方法 YYYY-MM-DD HH:mm:ss
+ * @param {Date} date 日期实例对象
+ * @param {String} fmtStr 格式化字符串
+ * @returns {String} 格式化后的日期字符串
+ */
+export declare function useDateFormat(date: Date, fmtStr: string): string;

package/es/composables/use-date-format/index.mjs

@@ -0,0 +1,20 @@
+//#region packages/composables/use-date-format/index.ts
+function e(e, t) {
+	let n = e.getFullYear(), r = e.getMonth() + 1, i = e.getDate(), a = e.getHours(), o = e.getMinutes(), s = e.getSeconds(), c = {
+		YYYY: String(n),
+		YY: String(n).substring(2),
+		MM: String(r).padStart(2, "0"),
+		M: String(r),
+		DD: String(i).padStart(2, "0"),
+		D: String(i),
+		HH: String(a).padStart(2, "0"),
+		H: String(a),
+		mm: String(o).padStart(2, "0"),
+		m: String(o),
+		ss: String(s).padStart(2, "0"),
+		s: String(s)
+	};
+	return t.replace(/(YYYY|YY|MM|M|DD|D|HH|H|mm|m|ss|s)/g, (e) => c[e]);
+}
+//#endregion
+export { e as useDateFormat };

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

@@ -0,0 +1,10 @@
+export declare function useDraggable(el: HTMLElement, options?: {
+    preventDefault?: boolean;
+    customHandler?: HTMLElement | null;
+    autoTopHandler?: boolean;
+    topHandlerHeight?: number;
+    isAllHandler?: boolean;
+}): {
+    updatePos: () => void;
+    cleanup: () => void;
+};

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

@@ -0,0 +1,61 @@
+//#region packages/composables/use-draggable/index.ts
+function e(e, t) {
+	if (!e) return {
+		updatePos: () => {},
+		cleanup: () => {}
+	};
+	let n = Object.assign({}, {
+		preventDefault: !0,
+		customHandler: null,
+		autoTopHandler: !1,
+		topHandlerHeight: 20,
+		isAllHandler: !0
+	}, t || {}), r = n.customHandler ? n.customHandler : n.autoTopHandler ? (() => {
+		let t = document.createElement("div");
+		return t.style.cssText = `user-select:none;height: ${n.topHandlerHeight}px; z-index:3000;cursor: move; position: absolute; top: 0; left: 0;right:0;background-color: transparent;opacity: 1;`, t.classList.add("v-draggable-top-handler"), e.appendChild(t), t;
+	})() : e, i = !1, a = 0, o = 0, s = 0, c = 0, l = 0, u = 0, d = 0, f = 0, p = (e) => window.getComputedStyle(e).transform, m = (e) => {
+		let t = p(e);
+		if (t && t !== "none") {
+			let { e, f: n, m41: r, m42: i } = new DOMMatrix(t);
+			return {
+				x: e || r || 0,
+				y: n || i || 0
+			};
+		}
+		return {
+			x: 0,
+			y: 0
+		};
+	}, h = () => {
+		let t = e.getBoundingClientRect(), { x: n, y: r } = m(e);
+		s = n, c = r, l = -t.left + n, u = -t.top + r, d = window.innerWidth - t.right + n, f = window.innerHeight - t.bottom + r;
+	}, g = (e) => {
+		let t = e.target;
+		return !t || t.isContentEditable || t.closest("input, textarea, button, select, a,[contenteditable], [contenteditable=\"true\"]") || [
+			"TEXTAREA",
+			"INPUT",
+			"BUTTON",
+			"A",
+			"SELECT"
+		].includes(t == null ? void 0 : t.tagName) ? !1 : !!n.isAllHandler || t === r;
+	}, _ = (e) => {
+		g(e) && (i = !0, n.preventDefault && e.preventDefault(), h(), a = e.clientX - s, o = e.clientY - c, document.removeEventListener("pointermove", v), document.removeEventListener("pointerup", y), document.removeEventListener("pointercancel", y), document.addEventListener("pointermove", v), document.addEventListener("pointerup", y), document.addEventListener("pointercancel", y));
+	}, v = (t) => {
+		if (!i) return;
+		let n = t.clientX - a, r = t.clientY - o;
+		n = n < s ? Math.max(n, l) : Math.min(n, d), r = r < c ? Math.max(r, u) : Math.min(r, f), e.style.transform = `translate(${n}px, ${r}px)`, s = n, c = r;
+	}, y = () => {
+		i = !1, document.removeEventListener("pointermove", v), document.removeEventListener("pointerup", y), document.removeEventListener("pointercancel", y);
+	};
+	return h(), r.removeEventListener("pointerdown", _), r.addEventListener("pointerdown", _), window.removeEventListener("resize", h), window.addEventListener("resize", h), {
+		updatePos: h,
+		cleanup: e._cleanup = () => {
+			if (y(), r.removeEventListener("pointerdown", _), window.removeEventListener("resize", h), n.autoTopHandler && !n.customHandler) {
+				let t = e.querySelector(".v-draggable-top-handler");
+				t && t.remove();
+			}
+		}
+	};
+}
+//#endregion
+export { e as useDraggable };

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

@@ -0,0 +1,13 @@
+export declare function useNamespace(compName: string): {
+    libName: string;
+    prefix: string;
+    statePrefix: string;
+    n: (name?: string) => string;
+    ng: (groupName: string) => string;
+    nm: (modifier: string) => string;
+    ngm: (groupName: string, modifier: string) => string;
+    ns: (subName: string) => string;
+    ngs: (groupName: string, subName: string) => string;
+    cls: (name: string, groupName?: string, modifier?: string, subName?: string) => string;
+    is: (state: string, bool?: boolean | undefined) => string;
+};

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

@@ -0,0 +1,22 @@
+//#region packages/composables/use-namespace/index.ts
+function e(e) {
+	let t = (t, n, r, i) => {
+		let a = `re-${t || e}`;
+		return n && (a += `-${n}`), r && (a += `--${r}`), i && (a += `__${i}`), a.toLowerCase();
+	};
+	return {
+		libName: "rappel-ui",
+		prefix: "re",
+		statePrefix: "is",
+		n: (e = "") => t(e),
+		ng: (e) => t("", e),
+		nm: (e) => t("", "", e),
+		ngm: (e, n) => t("", e, n),
+		ns: (e) => t("", "", "", e),
+		ngs: (e, n) => t("", e, "", n),
+		cls: t,
+		is: (e, t = void 0) => t ? `is-${e}` : ""
+	};
+}
+//#endregion
+export { e as useNamespace };

package/es/composables/use-once-fn/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 防止接口重复请求的方法<需保证方法名全局唯一>
+ * @param {Function} funcName 方法名
+ * @param {...Array<any>} funcParams  方法参数（剩余参数）,原方法怎么传，这里就怎么传
+ * @description 适用于返回Promise的所有方法，支持多个方法
+ * @example
+ * 1、基本用法：
+ * import {getUserList} from "@/api/user"
+ * const res = await useOnceFn(getUserList, params, data)
+ *
+ * 2、多个方法
+ * import {getUserList} from "@/api/user"
+ * import {getOrgTree} from "@/api/org"
+ *
+ * const res1 = await useOnceFn(getUserList, params, data)
+ * const res2 = await useOnceFn(getOrgTree)
+ *
+ * 3、用于async方法
+ * async function demo(){...}
+ * const res = await useOnceFn(demo)
+ *
+ * @returns {Promise<any>}
+ */
+export declare function useOnceFn(funcName: (...args: any[]) => void, ...funcParams: any[]): Promise<any>;

package/es/composables/use-once-fn/index.mjs

@@ -0,0 +1,30 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/defineProperty.mjs";
+//#region packages/composables/use-once-fn/index.ts
+var t = class {
+	constructor() {
+		e(this, "res", void 0), e(this, "isFetching", void 0), e(this, "isSuccess", void 0), e(this, "queues", void 0), this.res = null, this.isFetching = !1, this.isSuccess = !1, this.queues = [];
+	}
+	useOnceFn(e, ...t) {
+		return new Promise((n) => {
+			if (this.isSuccess) {
+				n(this.res);
+				return;
+			}
+			this.queues.push(n), this.isFetching || (this.isFetching = !0, Promise.resolve(e(...t)).then((e) => {
+				this.res = e, this.loopQueues(), this.isSuccess = !0;
+			}));
+		});
+	}
+	loopQueues() {
+		for (; this.queues.length > 0;) {
+			let e = this.queues.shift();
+			e == null || e(this.res);
+		}
+	}
+}, n = {};
+function r(e, ...r) {
+	let i = e.toString().replace(/[^a-zA-Z]/g, "");
+	return n[i] || (n[i] = new t()), n[i].useOnceFn(e, ...r);
+}
+//#endregion
+export { r as useOnceFn };

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

@@ -0,0 +1,7 @@
+import { WritableComputedRef, ComputedRef } from 'vue';
+import { Theme } from '@rappel-ui/types';
+export declare function useTheme(theme?: Theme, reverseTheme?: boolean): {
+    isDark: WritableComputedRef<boolean>;
+    currentTheme: ComputedRef<Theme>;
+    toggle: () => void;
+};

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

@@ -0,0 +1,23 @@
+import { useNamespace as e } from "../use-namespace/index.mjs";
+import { useToggle as t } from "../../node_modules/.pnpm/@vueuse_shared@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/shared/dist/index.mjs";
+import { useDark as n } from "../../node_modules/.pnpm/@vueuse_core@14.0.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
+import "../index.mjs";
+import { computed as r } from "vue";
+//#region packages/composables/use-theme/index.ts
+var { libName: i } = e(""), a = n({
+	storageKey: `${i}-color-scheme`,
+	selector: "html",
+	attribute: "class",
+	valueDark: "dark",
+	valueLight: "light"
+});
+function o(e = "light", n = !1) {
+	let i = t(a);
+	return {
+		isDark: a,
+		currentTheme: r(() => n ? e === "dark" ? "light" : "dark" : e),
+		toggle: i
+	};
+}
+//#endregion
+export { o as useTheme };

package/es/composables/use-time-nodes/index.d.ts

@@ -0,0 +1,3 @@
+export declare function useTimeNodes(start?: string, end?: string, step?: string, fmt?: string): {
+    timeNodes: string[];
+};

package/es/composables/use-time-nodes/index.mjs

@@ -0,0 +1,25 @@
+import { useDateFormat as e } from "../use-date-format/index.mjs";
+import "../index.mjs";
+//#region packages/composables/use-time-nodes/index.ts
+function t(t = "00:00", n = "23:00", r = "02:00", i = "HH:mm") {
+	let a = (e) => {
+		let [t, n, r] = e.split(":").map(Number);
+		return [
+			t || 0,
+			n || 0,
+			r || 0
+		];
+	}, o = (e) => {
+		let [t, n, r] = a(e), i = /* @__PURE__ */ new Date();
+		return new Date(i.getFullYear(), i.getMonth() + 1, i.getDate(), t, n, r);
+	}, s = (t) => e(t, i), c = (e) => {
+		let [t, n, i] = a(r);
+		return new Date(e.getTime() + t * 36e5 + n * 6e4 + i * 1e3);
+	}, l = [], [u, d, f] = a(r);
+	if (u === 0 && d === 0 && f === 0) throw Error("时间步长不能为0");
+	let p = o(t), m = o(n);
+	for (; p <= m;) l.push(s(p)), p = c(p);
+	return { timeNodes: l };
+}
+//#endregion
+export { t as useTimeNodes };

package/es/composables/use-waterfall-layout/index.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+export declare function useWaterFallLayout(containerRef: Ref<HTMLElement | null>, itemSelector: string): {
+    init: (isRearrange?: boolean) => void;
+    column: Ref<number, number>;
+    rowSpacing: Ref<number, number>;
+    columnSpacing: Ref<number, number>;
+    oddColumnBgColor: Ref<string, string>;
+    evenColumnBgColor: Ref<string, string>;
+    getItems: (selector?: string) => any;
+};

package/es/composables/use-waterfall-layout/index.mjs

@@ -0,0 +1,46 @@
+import { nextTick as e, ref as t, watch as n } from "vue";
+//#region packages/composables/use-waterfall-layout/index.ts
+function r(r, i) {
+	let a = t(3), o = t(2), s = t(2), c = t("#F5F8F8"), l = t("#FFFFFF"), u = t("top 300ms ease-in-out, left 300ms ease-in-out"), d = t(0), f = t(0), p = t(0), m = (e) => document.querySelectorAll(e || i), h = () => {
+		r.value.style.position = "relative";
+	}, g = () => {
+		h(), d.value = r.value.clientWidth;
+	}, _ = () => {
+		p.value = (d.value - s.value * (a.value - 1)) / a.value;
+	}, v = (e) => {
+		let t = e % a.value;
+		return t === 0 ? 0 : t * (p.value + s.value);
+	}, y = (e) => {
+		let { style: t, offsetHeight: n } = e;
+		return parseFloat(t.top) + n + o.value;
+	}, b = (e, t) => e >= a.value ? y(t[e - a.value]) : 0, x = (e) => {
+		let t = y(e);
+		t > f.value && (f.value = t, r.value.style.height = `${t}px`);
+	}, S = t("is-dealed"), C = (e = !1) => {
+		let t = m(), n = m(`.${S.value}`), r = 0;
+		n.length > 0 && (r = n.length), e && (r = 0, f.value = 0);
+		for (let e = r; e < t.length; e++) t[e].style.position = "absolute", t[e].style.transition = u.value, t[e].style.width = `${p.value}px`, t[e].style.backgroundColor = w(e), t[e].style.left = `${v(e)}px`, t[e].style.top = `${b(e, t)}px`, t[e].classList.add(S.value), x(t[e]);
+	}, w = (e) => {
+		let t = e + 1;
+		return a.value % 2 == 0 ? t % 2 == 0 ? l.value : c.value : t % a.value !== 0 && t % a.value % 2 == 0 ? l.value : c.value;
+	}, T = (t = !1) => {
+		g(), _(), e(() => {
+			C(t);
+		});
+	};
+	return n(() => a.value, () => {
+		e(() => {
+			T(!0);
+		});
+	}), {
+		init: T,
+		column: a,
+		rowSpacing: o,
+		columnSpacing: s,
+		oddColumnBgColor: c,
+		evenColumnBgColor: l,
+		getItems: m
+	};
+}
+//#endregion
+export { r as useWaterFallLayout };

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

@@ -0,0 +1,11 @@
+/**
+ * global z-index increment
+ * @returns
+ */
+export declare function useZIndex(): {
+    zIndex: {
+        _i: number;
+        readonly value: number;
+    };
+    reset: (val: number) => void;
+};

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

@@ -0,0 +1,17 @@
+//#region packages/composables/use-z-index/index.ts
+var e = {
+	_i: 2e3,
+	get value() {
+		return this._i++;
+	}
+};
+function t() {
+	return {
+		zIndex: e,
+		reset: (t) => {
+			e._i = t;
+		}
+	};
+}
+//#endregion
+export { t as useZIndex };

package/es/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './svgLoading';

package/es/constants/svgLoading.d.ts

@@ -0,0 +1,2 @@
+declare const svgLoadingContent = "<svg viewBox=\"0 0 800 800\" xmlns=\"http://www.w3.org/2000/svg\">\n<style>\n    @keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin2 {\n  0% {\n    stroke-dasharray: 1, 800;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 200, 200;\n    stroke-dashoffset: 100px;\n  }\n  100% {\n    stroke-dasharray: 800, 1;\n    stroke-dashoffset: -800px;\n  }\n}\n\n.spin2 {\n  transform-origin: center;\n  animation: spin2 1.5s ease-in-out infinite,\n    spin 2s linear infinite;\n  animation-direction: alternate;\n}\n</style>\n  <circle class=\"spin2\" cx=\"400\" cy=\"400\" fill=\"none\"\n    r=\"200\" stroke-width=\"40\" stroke=\"#E387FF\"\n    stroke-dasharray=\"800 1400\"\n    stroke-linecap=\"round\"\n  />\n</svg>";
+export { svgLoadingContent };

package/es/constants/svgLoading.mjs

@@ -0,0 +1,4 @@
+//#region packages/constants/svgLoading.ts
+var e = "<svg viewBox=\"0 0 800 800\" xmlns=\"http://www.w3.org/2000/svg\">\n<style>\n    @keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin2 {\n  0% {\n    stroke-dasharray: 1, 800;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 200, 200;\n    stroke-dashoffset: 100px;\n  }\n  100% {\n    stroke-dasharray: 800, 1;\n    stroke-dashoffset: -800px;\n  }\n}\n\n.spin2 {\n  transform-origin: center;\n  animation: spin2 1.5s ease-in-out infinite,\n    spin 2s linear infinite;\n  animation-direction: alternate;\n}\n</style>\n  <circle class=\"spin2\" cx=\"400\" cy=\"400\" fill=\"none\"\n    r=\"200\" stroke-width=\"40\" stroke=\"#E387FF\"\n    stroke-dasharray=\"800 1400\"\n    stroke-linecap=\"round\"\n  />\n</svg>";
+//#endregion
+export { e as svgLoadingContent };

package/es/directives/index.d.ts

@@ -0,0 +1,3 @@
+export * from './vDraggable';
+export * from './vResizable';
+export * from './vSvgLoading';

package/es/directives/index.mjs

@@ -0,0 +1,4 @@
+import { vDraggable as e } from "./vDraggable.mjs";
+import { applyResizable as t, vResizable as n } from "./vResizable.mjs";
+import { vSvgLoading as r } from "./vSvgLoading.mjs";
+export { t as applyResizable, e as vDraggable, n as vResizable, r as vSvgLoading };

package/es/directives/vDraggable.d.ts

@@ -0,0 +1,2 @@
+import { Directive } from 'vue';
+export declare const vDraggable: Directive;