@bridge-ui/vue 0.0.0

package/dist/Components/Menu/composables/useMenu.js

@@ -0,0 +1,217 @@
+import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as ee } from "../../../Utils/index.js";
+import { computed as r, nextTick as i, onBeforeUnmount as te, ref as a, toValue as o, useAttrs as ne, useId as re, watch as s } from "vue";
+import { get as c, omit as l } from "es-toolkit/compat";
+import { LAYER_STACK_BASE_Z_INDEX as u, acquireLayerStackOrder as ie, claimOpenMenu as d, cn as f, createFocusable as p, createPositionable as m, getLayerStackEntry as ae, mergeBridgeUILayeredClasses as h, pushLayerStack as g, splitComponentProps as _, subscribeLayerStack as v } from "@bridge-ui/core";
+import { roundedProps as oe, shadowProps as se } from "@bridge-ui/core/Components/Menu";
+//#region src/Components/Menu/composables/useMenu.ts
+var ce = [
+	"offset",
+	"shadow",
+	"classes",
+	"rounded",
+	"strategy",
+	"placement",
+	"persistent",
+	"teleportTo",
+	"customProps",
+	"keepMounted",
+	"closeOnEscape",
+	"closeOnClickAway",
+	"disableAutoFocus",
+	"disableScrollLock"
+];
+function y(y, le, b = {}) {
+	let ue = ne(), x = re(), S = a(!1), C = a(""), w = a(null), T = a(null), E = null, D = null, O = null, k = null, A = null, j = null, M = !1, N = a(u), P = r(() => o(b.show ?? !1));
+	function F(e) {
+		e || b.onClose?.(), b.show && (b.show.value = e), b.onShowChange?.(e);
+	}
+	let I = r(() => _({
+		bridgeKeys: ce,
+		props: {
+			...ue,
+			...y
+		}
+	})), { merged: L, entry: R } = n({
+		libDefaults: le,
+		componentName: "Menu",
+		props: () => I.value.componentProps
+	}), z = r(() => L.value.customProps), B = ee({
+		entry: R,
+		props: () => I.value.componentProps
+	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => c(h(oe, R.value?.customProps?.rounded), L.value.rounded)), fe = r(() => c(h(se, R.value?.customProps?.shadow), L.value.shadow)), U = r(() => !L.value.persistent), pe = r(() => l(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
+	function W() {
+		return y.anchorEl ?? w.value;
+	}
+	function G() {
+		W()?.focus({ preventScroll: !0 });
+	}
+	function K(e) {
+		return W()?.contains(e) ?? !1;
+	}
+	function me(e) {
+		return !(e instanceof Element) || K(e) || T.value?.contains(e) ? !1 : !!e.closest("[aria-haspopup=\"menu\"], button, [role=\"button\"]");
+	}
+	function q() {
+		!U.value || !P.value || F(!1);
+	}
+	function he() {
+		L.value.persistent && P.value || F(!P.value);
+	}
+	function J(e) {
+		e.key !== "ArrowDown" && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), P.value || F(!0));
+	}
+	function ge(e) {
+		let t = T.value;
+		if (!t) return;
+		let n = p(t);
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault(), q(), G();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), n.next()?.focus({ preventScroll: !0 });
+				break;
+			case "ArrowUp":
+				e.preventDefault(), n.previous()?.focus({ preventScroll: !0 });
+				break;
+			case "Home":
+				e.preventDefault(), n.focusFirst();
+				break;
+			case "End":
+				e.preventDefault(), n.focusLast();
+				break;
+		}
+	}
+	function Y() {
+		M = !1, k?.destroy(), k = null;
+	}
+	function X() {
+		Y();
+		let e = W(), t = T.value;
+		!P.value || !e || !t || (k = m({
+			floating: t,
+			reference: e,
+			offset: L.value.offset,
+			strategy: L.value.strategy,
+			placement: L.value.placement,
+			onReferenceHidden: () => {
+				!M || !U.value || !P.value || q();
+			}
+		}), k.start(), i(() => {
+			M = !0;
+		}));
+	}
+	function Z() {
+		!P.value || L.value.disableAutoFocus || !T.value || p(T.value).focusFirst();
+	}
+	function _e() {
+		if (A?.(), !P.value) {
+			A = null;
+			return;
+		}
+		function e(e) {
+			let t = e.target;
+			K(t) || T.value?.contains(t) || L.value.closeOnClickAway === !1 || !U.value || me(t) || q();
+		}
+		document.addEventListener("pointerdown", e, !0), A = () => {
+			document.removeEventListener("pointerdown", e, !0);
+		};
+	}
+	function ve(e) {
+		let n = t(e);
+		w.value !== n && (w.value = n, n && i(() => {
+			X();
+		}));
+	}
+	function ye(e) {
+		let n = t(e);
+		T.value !== n && (T.value = n, n && i(() => {
+			X(), Z();
+		}));
+	}
+	function be() {
+		!P.value || L.value.closeOnEscape === !1 || !U.value || (q(), G());
+	}
+	function Q() {
+		let e = ae(C.value);
+		e && (N.value = e.zIndex);
+	}
+	function $() {
+		j?.(), j = null, A?.(), A = null, O?.(), O = null, D?.release(), D = null, E = null, C.value = "", N.value = u, Y();
+	}
+	let xe = r(() => e(z.value?.root, pe.value, { class: f({
+		"relative inline-block text-left": !0,
+		[c(B.value, "root") ?? ""]: !0
+	}) })), Se = r(() => e(z.value?.trigger, {}, {
+		tabindex: 0,
+		role: "button",
+		"aria-expanded": P.value,
+		onKeydown: J,
+		"aria-haspopup": "menu",
+		onClickCapture: he,
+		"aria-controls": P.value ? x : void 0,
+		class: f({
+			"inline-block w-fit max-w-full cursor-pointer outline-hidden": !0,
+			[c(B.value, "trigger") ?? ""]: !0
+		})
+	})), Ce = r(() => e(z.value?.content, {}, {
+		id: x,
+		role: "menu",
+		onKeydown: ge,
+		style: { zIndex: N.value },
+		"aria-hidden": V.value ? !0 : void 0,
+		class: f({
+			"bg-white ring-1 ring-black/5 outline-hidden overflow-hidden min-w-32 w-max max-w-[calc(100vw-16px)]": !0,
+			"invisible pointer-events-none": V.value,
+			[de.value ?? ""]: !0,
+			[fe.value ?? ""]: !0,
+			[c(B.value, "content") ?? ""]: !0
+		})
+	}));
+	return s(P, (e) => {
+		if (e) {
+			S.value = !0, i(() => {
+				P.value && (j = d({
+					id: x,
+					requestClose: q
+				}));
+			}), E = ie(), D = g({
+				order: E,
+				onEscape: be,
+				lockScroll: L.value.disableScrollLock !== !0
+			}), C.value = D.id, N.value = D.zIndex, Q(), O = v(Q), i(() => {
+				X(), Z(), _e();
+			});
+			return;
+		}
+		$(), L.value.keepMounted || (S.value = !1);
+	}, { immediate: !0 }), s([
+		P,
+		() => y.anchorEl,
+		() => L.value.offset,
+		() => L.value.strategy,
+		() => L.value.placement
+	], () => {
+		i(() => {
+			X();
+		});
+	}), s([P, () => L.value.disableAutoFocus], () => {
+		i(() => {
+			Z();
+		});
+	}), te(() => {
+		$();
+	}), {
+		merged: L,
+		menuId: x,
+		mounted: S,
+		rootBind: xe,
+		isPortaled: H,
+		triggerBind: Se,
+		contentBind: Ce,
+		setTriggerRef: ve,
+		setContentRef: ye
+	};
+}
+//#endregion
+export { y as useMenu };

package/dist/Components/Menu/index.d.ts

@@ -0,0 +1,4 @@
+export { useMenu } from './composables/useMenu';
+export type { MenuOptions } from './composables/useMenu';
+export type { MenuClasses, MenuCustomProps, MenuEmits, MenuOwnProps, MenuProps, MenuRoundedOverrides, MenuShadowOverrides, MenuSlots, } from './menu.types';
+export { default as Menu } from './Menu.vue';

package/dist/Components/Menu/index.js

@@ -0,0 +1,3 @@
+import { useMenu as e } from "./composables/useMenu.js";
+import t from "./Menu.js";
+export { t as Menu, e as useMenu };

package/dist/Components/Menu/menu.types.d.ts

@@ -0,0 +1,172 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { MenuRounded, MenuShadow, MergeHtmlProps, MergeProps, PositionPlacement, PositionStrategy } from '@bridge-ui/core';
+export interface MenuShadowOverrides {}
+export interface MenuRoundedOverrides {}
+export interface MenuClasses {
+    /**
+     * The classes to apply to the content.
+     */
+    content?: string;
+    /**
+     * The classes to apply to the group.
+     */
+    group?: string;
+    /**
+     * The classes to apply to the item.
+     */
+    item?: string;
+    /**
+     * The classes to apply to the label.
+     */
+    label?: string;
+    /**
+     * The classes to apply to the root.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the separator.
+     */
+    separator?: string;
+    /**
+     * The classes to apply to the trigger.
+     */
+    trigger?: string;
+}
+export interface MenuCustomProps {
+    /**
+     * Props forwarded to the floating menu panel.
+     */
+    content?: HTMLAttributes;
+    /**
+     * Props forwarded to the root wrapper (contains the trigger).
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the trigger wrapper.
+     */
+    trigger?: HTMLAttributes;
+}
+export interface MenuEmits {
+    /**
+     * Emitted when the user dismisses the menu (Escape or click-away).
+     * Not emitted when the parent sets `v-model` to `false` directly.
+     */
+    close: [];
+}
+/**
+ * Anchored menu panel (MUI `Menu`-like). Visibility is controlled with `v-model`
+ * (not listed here — `defineModel` handles it). Anchor with `anchorEl` (MUI style)
+ * or put the opener in the `trigger` slot; menu items go in the default slot.
+ */
+export interface MenuOwnProps {
+    /**
+     * Element that anchors the menu panel (MUI `anchorEl`). When set, it is used
+     * for positioning and click-away instead of the `trigger` slot wrapper.
+     * Prefer this when the opener lives outside the `Menu` or is controlled manually.
+     * Not merged into Bridge defaults (DOM nodes must not be deep-merged).
+     *
+     * @default undefined
+     */
+    anchorEl?: null | HTMLElement;
+    /**
+     * The classes to apply to the menu.
+     *
+     * @default undefined
+     */
+    classes?: MenuClasses;
+    /**
+     * Whether the menu closes when clicking outside the trigger and panel.
+     *
+     * @default true
+     */
+    closeOnClickAway?: boolean;
+    /**
+     * Whether the menu closes on escape key press.
+     *
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Props forwarded to each menu part.
+     *
+     * @default undefined
+     */
+    customProps?: MenuCustomProps;
+    /**
+     * When true, the menu does not auto-focus the first focusable item on open.
+     *
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * When true, body scroll is not locked while the menu is open.
+     *
+     * @default true
+     */
+    disableScrollLock?: boolean;
+    /**
+     * When true, the menu stays mounted in the DOM after closing (hidden).
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Gap between the trigger and the menu panel (px).
+     *
+     * @default 4
+     */
+    offset?: number;
+    /**
+     * Called when `show` should change (controlled state without `v-model`).
+     *
+     * @default undefined
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * When true, escape and click-away do not close the menu.
+     *
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Preferred placement of the menu relative to the anchor (Floating UI).
+     *
+     * @default "bottom-start"
+     */
+    placement?: PositionPlacement;
+    /**
+     * The roundedness of the menu panel.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<MenuRounded, MenuRoundedOverrides>;
+    /**
+     * The shadow to apply to the menu panel.
+     *
+     * @default "md"
+     */
+    shadow?: MergeProps<MenuShadow, MenuShadowOverrides>;
+    /**
+     * CSS position strategy for the floating panel.
+     *
+     * @default "fixed"
+     */
+    strategy?: PositionStrategy;
+    /**
+     * Where to portal the menu panel. Pass `false` to render in place.
+     *
+     * @default "body"
+     */
+    teleportTo?: false | string;
+}
+export interface MenuSlots {
+    /**
+     * The menu items content.
+     */
+    default?: Slot<undefined>;
+    /**
+     * The trigger element that opens the menu.
+     */
+    trigger?: Slot<undefined>;
+}
+export type MenuProps = MergeHtmlProps<MenuOwnProps, HTMLAttributes>;

package/dist/Components/Modal/Modal.js

@@ -0,0 +1,5 @@
+import e from "./Modal.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Modal/Modal.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/Modal/Modal.vue.d.ts

@@ -0,0 +1,38 @@
+import { ModalOwnProps, ModalSlots } from './modal.types';
+type __VLS_Slots = ModalSlots;
+type __VLS_Props = ModalOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    stackId: import('vue').ComputedRef<string>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    close: () => any;
+    "show-change": (show: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onShow-change"?: ((show: boolean) => any) | undefined;
+}>, {
+    closeOnEscape: boolean;
+    disableScrollLock: boolean;
+    keepMounted: boolean;
+    persistent: boolean;
+    teleportTo: false | string;
+    scroll: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ModalScroll, import('./modal.types').ModalScrollOverrides>;
+    autoFocus: boolean;
+    closeOnOverlay: boolean;
+    disableEnforceFocus: boolean;
+    disableRestoreFocus: boolean;
+    hideBackdrop: boolean;
+}, {}, {}, {}, string, import('vue').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/dist/Components/Modal/Modal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,94 @@
+import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
+import { useModal as t } from "./composables/useModal.js";
+import { Teleport as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, unref as h, useModel as g, useSlots as _ } from "vue";
+//#region src/Components/Modal/Modal.vue?vue&type=script&setup=true&lang.ts
+var v = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "Modal",
+	props: /* @__PURE__ */ u({
+		align: {},
+		autoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		blur: {},
+		classes: {},
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnOverlay: {
+			type: Boolean,
+			default: !0
+		},
+		customProps: {},
+		disableEnforceFocus: {
+			type: Boolean,
+			default: !1
+		},
+		disableRestoreFocus: {
+			type: Boolean,
+			default: !1
+		},
+		disableScrollLock: {
+			type: Boolean,
+			default: !1
+		},
+		hideBackdrop: {
+			type: Boolean,
+			default: !1
+		},
+		keepMounted: {
+			type: Boolean,
+			default: !1
+		},
+		persistent: {
+			type: Boolean,
+			default: !1
+		},
+		scroll: { default: "body" },
+		size: {},
+		stackId: {},
+		teleportTo: {
+			type: [Boolean, String],
+			default: "body"
+		},
+		transition: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ u(["close", "show-change"], ["update:modelValue"]),
+	setup(c, { expose: u, emit: v }) {
+		let y = _(), b = v, x = c, { merged: S, mounted: C, rootBind: w, panelBind: T, overlayBind: E, wrapperBind: D, setPanelRef: O, layerStackId: k } = t(x, {
+			size: "md",
+			blur: "none",
+			scroll: "body",
+			autoFocus: !1,
+			teleportTo: "body",
+			transition: "fade",
+			closeOnEscape: !0,
+			closeOnOverlay: !0,
+			align: "middle-center"
+		}, {
+			show: g(c, "modelValue"),
+			stackId: x.stackId,
+			onClose: () => b("close"),
+			onShowChange: (e) => b("show-change", e)
+		});
+		u({ stackId: r(() => x.stackId ?? k.value) });
+		let A = r(() => S.value.teleportTo === !1), j = r(() => S.value.teleportTo === !1 ? "body" : S.value.teleportTo), M = r(() => x.hideBackdrop !== !0 && S.value.hideBackdrop !== !0);
+		return (t, r) => (p(), i(n, {
+			to: j.value,
+			disabled: A.value
+		}, [h(C) ? (p(), o("div", f(d({ key: 0 }, h(w))), [M.value ? (p(), o("div", d({
+			key: 0,
+			"aria-hidden": "true"
+		}, h(E)), null, 16)) : a("", !0), s("div", f(l(h(D))), [s("div", d({ ref: h(O) }, h(T)), [(p(), i(m(h(e)(h(y), "default"))))], 16)], 16)], 16)) : a("", !0)], 8, ["to", "disabled"]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/Components/Modal/composables/useModal.d.ts

@@ -0,0 +1,61 @@
+import { ComponentPublicInstance, Ref } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { ModalOwnProps, ModalProps } from '../modal.types';
+type ModalLibDefaults = LibDefaultsShape<ModalOwnProps, "blur" | "size" | "align" | "scroll" | "autoFocus" | "teleportTo" | "transition" | "closeOnEscape" | "closeOnOverlay">;
+type ModalMerged = MergeLibDefaults<ModalOwnProps, ModalLibDefaults>;
+export type ModalOptions = {
+    /**
+     * Called when the modal requests to close.
+     * Sugar for `onShowChange(false)`.
+     */
+    onClose?: () => void;
+    /**
+     * Called when `show` should change (controlled state).
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * Whether the modal is visible (`defineModel()` / `v-model`).
+     *
+     * @default false
+     */
+    show?: Ref<boolean>;
+    /**
+     * Pre-assigned stack id (BridgeModalHost). When omitted, the stack generates a UUID.
+     */
+    stackId?: string;
+};
+export declare function useModal(props: ModalOwnProps, libDefaults: ModalLibDefaults, options?: ModalOptions): {
+    merged: import('vue').ComputedRef<ModalMerged>;
+    mounted: Ref<boolean, boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        onTransitionend: (event: TransitionEvent) => void;
+        style: {
+            zIndex: number;
+        };
+        "aria-hidden": boolean | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "align" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "teleportTo" | "blur" | "scroll" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition">>>;
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        "data-modal-part": string;
+        "data-state": "open" | "closed";
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+        "aria-modal": boolean;
+    }>>;
+    overlayBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        "data-modal-part": string;
+        "data-state": "open" | "closed";
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {
+        onClick: () => void;
+    }>>;
+    wrapperBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        onClick: (event: MouseEvent) => void;
+    }>>;
+    setPanelRef: (element: null | Element | ComponentPublicInstance) => void;
+    layerStackId: Ref<string, string>;
+    handleOverlayClick: () => void;
+    handleWrapperClick: (event: MouseEvent) => void;
+};
+export {};