@bridge-ui/vue 0.0.1-beta.7 → 0.0.1

package/dist/Components/Drawer/composables/useDrawer.js

@@ -0,0 +1,208 @@
+import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as te } from "../../../Utils/index.js";
+import { computed as n, nextTick as r, onBeforeUnmount as ne, ref as i, toValue as a, useAttrs as o, watch as s } from "vue";
+import { get as c } from "es-toolkit/compat";
+import { DRAWER_LEAVE_FALLBACK_MS as re, LAYER_STACK_BASE_Z_INDEX as l, acquireLayerStackOrder as ie, cn as u, countDrawerTransitionLayers as d, createFocusTrap as ae, getDrawerOverlayTransitionClass as oe, getDrawerPanelTransitionClass as se, getLayerStackEntry as ce, hasDrawerTransition as le, mergeBridgeUILayeredClasses as f, pushLayerStack as p, resolveEffectiveDrawerTransition as m, splitComponentProps as h, subscribeLayerStack as g } from "@bridge-ui/core";
+import { isModalBackdropClick as ue } from "@bridge-ui/core/Utils";
+import { blurProps as de, placementPanelProps as fe, placementProps as pe, sizeProps as me } from "@bridge-ui/core/Components/Drawer";
+//#region src/Components/Drawer/composables/useDrawer.ts
+var he = [
+	"blur",
+	"size",
+	"scroll",
+	"classes",
+	"stackId",
+	"ariaLabel",
+	"autoFocus",
+	"placement",
+	"persistent",
+	"teleportTo",
+	"transition",
+	"customProps",
+	"keepMounted",
+	"hideBackdrop",
+	"closeOnEscape",
+	"ariaLabelledBy",
+	"closeOnOverlay",
+	"disableScrollLock",
+	"disableEnforceFocus",
+	"disableRestoreFocus"
+];
+function _(_, ge, v = {}) {
+	let _e = o(), y = i(!1), b = i(!1), x = i(""), S = 0, C = null, w = null, T = i(null), E = null, D = i(l), O = null, k = i("closed"), A = null, j = n(() => a(v.show ?? !1));
+	function M(e) {
+		e || v.onClose?.(), v.show && (v.show.value = e), v.onShowChange?.(e);
+	}
+	let N = n(() => h({
+		bridgeKeys: he,
+		props: {
+			..._e,
+			..._
+		}
+	})), { merged: P, entry: F } = ee({
+		libDefaults: ge,
+		componentName: "Drawer",
+		props: () => N.value.componentProps
+	}), I = n(() => P.value.customProps), L = te({
+		entry: F,
+		props: () => N.value.componentProps
+	}), R = n(() => m(P.value.transition ?? "none")), z = n(() => le(R.value)), B = n(() => P.value.scroll ?? "paper"), V = n(() => P.value.keepMounted && !y.value), H = n(() => P.value.placement ?? "left"), U = n(() => H.value === "left" || H.value === "right" ? "horizontal" : "vertical"), ve = n(() => c(f(pe, F.value?.customProps?.placement), H.value)), ye = n(() => c(fe, H.value)), be = n(() => c(f(de, F.value?.customProps?.blur), P.value.blur)), xe = n(() => c(f(me, F.value?.customProps?.size), [P.value.size, U.value])), Se = n(() => oe(R.value)), Ce = n(() => se(R.value, H.value)), W = n(() => !P.value.persistent), we = n(() => N.value.inheritedAttrs), Te = n(() => e(I.value?.root, we.value, {
+		onTransitionend: je,
+		style: { zIndex: D.value },
+		"aria-hidden": V.value ? !0 : void 0,
+		class: u({
+			"fixed inset-0": !0,
+			"overflow-y-auto": B.value === "body",
+			"overflow-hidden": B.value === "paper",
+			"invisible pointer-events-none": V.value,
+			[c(L.value, "root") ?? ""]: !0
+		})
+	})), Ee = n(() => e(I.value?.overlay, { onClick: Z }, {
+		"data-drawer-part": "overlay",
+		"data-state": k.value,
+		class: u({
+			"fixed inset-0 bg-black/50": !0,
+			[be.value ?? ""]: !0,
+			[Se.value]: z.value,
+			[c(L.value, "overlay") ?? ""]: !0
+		})
+	})), De = n(() => e(I.value?.wrapper, { onClick: Q }, u({
+		"flex min-h-full w-full transform": !0,
+		[ve.value ?? ""]: !0,
+		[c(L.value, "wrapper") ?? ""]: !0
+	}))), Oe = n(() => e(I.value?.panel, {
+		role: "dialog",
+		"aria-modal": !0,
+		"aria-label": P.value.ariaLabel,
+		"aria-labelledby": P.value.ariaLabelledBy
+	}, {
+		"data-drawer-part": "panel",
+		"data-state": k.value,
+		class: u({
+			"relative rounded-none": !0,
+			[ye.value ?? ""]: !0,
+			[xe.value ?? ""]: !0,
+			"overflow-y-auto": B.value === "paper",
+			[Ce.value]: z.value,
+			[c(L.value, "panel") ?? ""]: !0
+		})
+	}));
+	function G() {
+		w?.release(), w = null;
+	}
+	function K() {
+		if (!y.value || k.value !== "open" || !T.value) {
+			G();
+			return;
+		}
+		G(), w = ae({
+			container: T.value,
+			disableAutoFocus: !P.value.autoFocus,
+			disableEnforceFocus: P.value.disableEnforceFocus,
+			disableRestoreFocus: P.value.disableRestoreFocus
+		});
+	}
+	function ke(e) {
+		T.value = t(e), K();
+	}
+	function q() {
+		A !== null && (clearTimeout(A), A = null);
+	}
+	function J() {
+		q(), S = 0, y.value = !1, G(), j.value ? M(!1) : v.onShowChange?.(!1), k.value = "closed", P.value.keepMounted || (b.value = !1);
+	}
+	function Y() {
+		if (E?.releaseScrollLock(), !z.value) {
+			J();
+			return;
+		}
+		if (k.value = "closed", S = d(R.value, { hideBackdrop: P.value.hideBackdrop }), S === 0) {
+			J();
+			return;
+		}
+		q(), A = setTimeout(() => {
+			A = null, S > 0 && J();
+		}, re);
+	}
+	function Ae() {
+		if (!z.value) {
+			k.value = "open";
+			return;
+		}
+		k.value = "closed", r(() => {
+			requestAnimationFrame(() => {
+				k.value = "open";
+			});
+		});
+	}
+	function je(e) {
+		if (!b.value || k.value !== "closed") return;
+		let t = e.target;
+		t?.dataset.drawerPart !== "overlay" && t?.dataset.drawerPart !== "panel" || e.propertyName === "none" || e.elapsedTime === 0 || (--S, S <= 0 && J());
+	}
+	function X() {
+		if (W.value) {
+			if (!z.value) {
+				M(!1);
+				return;
+			}
+			b.value && Y();
+		}
+	}
+	function Z() {
+		P.value.closeOnOverlay === !1 || !W.value || X();
+	}
+	function Q(e) {
+		ue(e) && Z();
+	}
+	function Me() {
+		!j.value || P.value.closeOnEscape === !1 || !W.value || X();
+	}
+	s(j, (e) => {
+		if (e) {
+			b.value = !0, y.value = !0, Ae();
+			return;
+		}
+		b.value && Y();
+	}, { immediate: !0 }), s([
+		y,
+		k,
+		() => P.value.autoFocus,
+		() => P.value.disableEnforceFocus,
+		() => P.value.disableRestoreFocus
+	], () => {
+		r(() => {
+			K();
+		});
+	});
+	function $() {
+		let e = ce(x.value);
+		e && (D.value = e.zIndex);
+	}
+	return s(y, (e) => {
+		if (e) {
+			C === null && (C = ie()), E = p({
+				order: C,
+				id: v.stackId,
+				onEscape: Me,
+				lockScroll: P.value.disableScrollLock !== !0
+			}), x.value = E.id, D.value = E.zIndex, $(), O = g($);
+			return;
+		}
+		O?.(), O = null, E?.release(), E = null, x.value = "", D.value = l, b.value || (C = null);
+	}, { immediate: !0 }), ne(() => {
+		q(), O?.(), O = null, G(), E?.release(), E = null, C = null;
+	}), {
+		merged: P,
+		mounted: b,
+		rootBind: Te,
+		panelBind: Oe,
+		overlayBind: Ee,
+		wrapperBind: De,
+		setPanelRef: ke,
+		layerStackId: x,
+		handleOverlayClick: Z,
+		handleWrapperClick: Q
+	};
+}
+//#endregion
+export { _ as useDrawer };

package/dist/Components/Drawer/drawer.types.d.ts

@@ -0,0 +1,188 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { DrawerBlur, DrawerPlacement, DrawerScroll, DrawerSize, DrawerTransition, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+export interface DrawerBlurOverrides {}
+export interface DrawerSizeOverrides {}
+export interface DrawerScrollOverrides {}
+export interface DrawerPlacementOverrides {}
+export interface DrawerTransitionOverrides {}
+export interface DrawerClasses {
+    /**
+     * The classes to apply to the overlay.
+     */
+    overlay?: string;
+    /**
+     * The classes to apply to the dialog panel.
+     */
+    panel?: string;
+    /**
+     * The classes to apply to the root portal container.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the placement wrapper.
+     */
+    wrapper?: string;
+}
+export interface DrawerCustomProps {
+    /**
+     * Props forwarded to the overlay.
+     */
+    overlay?: HTMLAttributes;
+    /**
+     * Props forwarded to the dialog panel.
+     */
+    panel?: HTMLAttributes;
+    /**
+     * Props forwarded to the root portal container.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the placement wrapper.
+     */
+    wrapper?: HTMLAttributes;
+}
+export interface DrawerEmits {
+    /**
+     * Emitted when the user dismisses the drawer (overlay or Escape).
+     * Not emitted when the parent sets `v-model` to `false` directly.
+     */
+    close: [];
+    /**
+     * Emitted when `show` should change (controlled state).
+     * Listen with `@show-change` / `v-on:show-change`.
+     */
+    "show-change": [show: boolean];
+}
+/**
+ * Drawer shell (overlay, portal, backdrop). Put any content in the default slot.
+ * Visibility is controlled with `v-model` (not listed here — `defineModel` handles it).
+ */
+export interface DrawerOwnProps {
+    /**
+     * Accessible name for the dialog panel (`aria-label`).
+     *
+     * @default undefined
+     */
+    ariaLabel?: string;
+    /**
+     * Id of the element that labels the dialog (`aria-labelledby`). Prefer over `ariaLabel` when a visible title exists.
+     *
+     * @default undefined
+     */
+    ariaLabelledBy?: string;
+    /**
+     * When true, focuses the first focusable element inside the drawer on open.
+     *
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Backdrop blur on the overlay.
+     *
+     * @default "none"
+     */
+    blur?: MergeProps<DrawerBlur, DrawerBlurOverrides>;
+    /**
+     * The classes to apply to the drawer.
+     *
+     * @default undefined
+     */
+    classes?: DrawerClasses;
+    /**
+     * Whether the drawer closes on escape key press.
+     *
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the drawer closes on overlay click.
+     *
+     * @default true
+     */
+    closeOnOverlay?: boolean;
+    /**
+     * Props forwarded to each drawer part.
+     *
+     * @default undefined
+     */
+    customProps?: DrawerCustomProps;
+    /**
+     * When true, focus is not trapped inside the drawer while open.
+     *
+     * @default false
+     */
+    disableEnforceFocus?: boolean;
+    /**
+     * When true, focus is not restored to the previously focused element on close.
+     *
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * When true, body scroll is not locked while the drawer is open.
+     *
+     * @default false
+     */
+    disableScrollLock?: boolean;
+    /**
+     * When true, the backdrop overlay is not rendered.
+     *
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /**
+     * When true, the drawer stays mounted in the DOM after closing (hidden).
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * When true, escape and overlay clicks do not close the drawer.
+     *
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Edge the panel docks to.
+     *
+     * @default "left"
+     */
+    placement?: MergeProps<DrawerPlacement, DrawerPlacementOverrides>;
+    /**
+     * Where scroll happens: the page (`body`) or the drawer panel (`paper`).
+     *
+     * @default "paper"
+     */
+    scroll?: MergeProps<DrawerScroll, DrawerScrollOverrides>;
+    /**
+     * Panel size along the placement axis (width for `left`/`right`, height for `top`/`bottom`).
+     *
+     * @default "md"
+     */
+    size?: MergeProps<DrawerSize, DrawerSizeOverrides>;
+    /**
+     * Stack id assigned when the drawer opens. Set by BridgeDrawerHost; do not set in app code.
+     *
+     * @internal
+     */
+    stackId?: string;
+    /**
+     * Where to teleport the drawer. Pass `false` to render in place.
+     *
+     * @default "body"
+     */
+    teleportTo?: false | string;
+    /**
+     * Enter/leave animation for overlay and panel.
+     *
+     * @default "slide"
+     */
+    transition?: MergeProps<DrawerTransition, DrawerTransitionOverrides>;
+}
+export interface DrawerSlots {
+    /**
+     * Drawer content.
+     */
+    default?: Slot<undefined>;
+}
+export type DrawerProps = MergeHtmlProps<DrawerOwnProps, HTMLAttributes>;

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

@@ -0,0 +1,4 @@
+export { useDrawer } from './composables/useDrawer';
+export type { DrawerOptions } from './composables/useDrawer';
+export type { DrawerBlurOverrides, DrawerClasses, DrawerCustomProps, DrawerEmits, DrawerOwnProps, DrawerPlacementOverrides, DrawerProps, DrawerScrollOverrides, DrawerSizeOverrides, DrawerSlots, DrawerTransitionOverrides, } from './drawer.types';
+export { default as Drawer } from './Drawer.vue';

package/dist/Components/Drawer/index.js

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

package/dist/Components/FormControl/formControl.types.d.ts

@@ -173,26 +173,26 @@ export interface FormControlSlots {
     /**
      * The form control (checkbox, radio, switch, …).
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Helper text below the control row (hidden when invalid).
      */
-    description?: Slot;
+    description?: Slot<undefined>;
     /**
      * Inline-end label after the main label.
      */
-    endLabel?: Slot;
+    endLabel?: Slot<undefined>;
     /**
      * Custom error message content.
      */
-    errorMessage?: Slot;
+    errorMessage?: Slot<undefined>;
     /**
      * Main label next to the control.
      */
-    mainLabel?: Slot;
+    mainLabel?: Slot<undefined>;
     /**
      * Inline-start label before the control.
      */
-    startLabel?: Slot;
+    startLabel?: Slot<undefined>;
 }
 export type FormControlProps = MergeHtmlProps<FormControlOwnProps, HTMLAttributes>;

package/dist/Components/FormField/formField.types.d.ts

@@ -263,32 +263,32 @@ export interface FormFieldSlots {
     /**
      * Slot at the inline end of the header row (secondary label).
      */
-    corner?: Slot;
+    corner?: Slot<undefined>;
     /**
      * The form control (input, textarea, select trigger, etc.).
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Helper text below the control (hidden when the field is invalid).
      */
-    description?: Slot;
+    description?: Slot<undefined>;
     /**
      * Inline-end slot for custom content (e.g. a `Button`). Prefer the `end` prop
      * for plain suffix text.
      */
-    end?: Slot;
+    end?: Slot<undefined>;
     /**
      * Custom error message content.
      */
-    errorMessage?: Slot;
+    errorMessage?: Slot<undefined>;
     /**
      * Slot at the inline start of the header row (primary label).
      */
-    label?: Slot;
+    label?: Slot<undefined>;
     /**
      * Inline-start slot for custom content (e.g. a `Button`). Prefer the `start`
      * prop for plain prefix text.
      */
-    start?: Slot;
+    start?: Slot<undefined>;
 }
 export type FormFieldProps = MergeHtmlProps<FormFieldOwnProps, HTMLAttributes>;

package/dist/Components/Label/label.types.d.ts

@@ -47,6 +47,6 @@ export interface LabelSlots {
     /**
      * Label content.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
 }
 export type LabelProps = MergeHtmlProps<LabelOwnProps, HTMLAttributes>;

package/dist/Components/Link/link.types.d.ts

@@ -100,14 +100,14 @@ export interface LinkSlots {
     /**
      * Content after the label (inline end).
      */
-    append?: Slot;
+    append?: Slot<undefined>;
     /**
      * The link label.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Content before the label (inline start).
      */
-    prepend?: Slot;
+    prepend?: Slot<undefined>;
 }
 export type LinkProps = MergeHtmlProps<LinkOwnProps, AnchorHTMLAttributes>;

package/dist/Components/List/list.types.d.ts

@@ -13,7 +13,7 @@ export interface ListCustomProps {
     root?: HTMLAttributes;
 }
 /**
- * Vertical list container (MUI `List`-like). Use with `ListItem` and `ListSection`.
+ * Vertical list container. Use with `ListItem` and `ListSection`.
  */
 export interface ListOwnProps {
     /**

package/dist/Components/ListItem/listItem.types.d.ts

@@ -71,7 +71,7 @@ export interface ListItemCustomProps {
     start?: HTMLAttributes;
 }
 /**
- * List row (MUI `ListItem` / `ListItemButton`-like).
+ * List row.
  */
 export interface ListItemOwnProps {
     /**

package/dist/Components/ListSection/listSection.types.d.ts

@@ -22,7 +22,7 @@ export interface ListSectionCustomProps {
 }
 export type ListSectionLabel = VNode | string | VNode[] | undefined;
 /**
- * Section heading inside a `List` (MUI `ListSubheader`-like).
+ * Section heading inside a `List`.
  */
 export interface ListSectionOwnProps {
     /**

package/dist/Components/Listbox/listbox.types.d.ts

@@ -182,25 +182,25 @@ export interface ListboxSlots {
     /**
      * Content below the list.
      */
-    afterOptions?: Slot;
+    afterOptions?: Slot<undefined>;
     /**
      * Content above the list.
      */
-    beforeOptions?: Slot;
+    beforeOptions?: Slot<undefined>;
     /**
      * Composed list content (`ListSection` / `ListItem`). When set, replaces the
      * mapped `options` / `entries` render inside the list.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Custom empty-state content.
      */
-    empty?: Slot;
+    empty?: Slot<undefined>;
     /**
      * Custom loading content. Replaces the default `loadingMessage` when set.
      * The progress bar still renders above this content.
      */
-    loading?: Slot;
+    loading?: Slot<undefined>;
     /**
      * Custom option item content.
      */

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

@@ -54,13 +54,13 @@ export interface MenuEmits {
     close: [];
 }
 /**
- * Anchored menu panel (MUI `Menu`-like). Visibility is controlled with `v-model`
- * (not listed here — `defineModel` handles it). Anchor with `anchorEl` (MUI style)
+ * Anchored menu panel. Visibility is controlled with `v-model`
+ * (not listed here — `defineModel` handles it). Anchor with `anchorEl`
  * 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
+     * Element that anchors the menu panel. 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).

package/dist/Components/Modal/composables/useModal.js

@@ -65,7 +65,6 @@ function x(x, ue, S = {}) {
 		})
 	})), be = n(() => e(z.value?.wrapper, { onClick: Q }, l({
 		"flex min-h-full w-full transform p-4": !0,
-		"items-end justify-center": !0,
 		[fe.value ?? ""]: !0,
 		[s(B.value, "wrapper") ?? ""]: !0
 	}))), xe = n(() => e(z.value?.panel, {

package/dist/Components/Modal/modal.types.d.ts

@@ -59,8 +59,9 @@ export interface ModalEmits {
  */
 export interface ModalOwnProps {
     /**
-     * Panel position from the `sm` breakpoint up (`{row}-{column}` grid).
-     * Mobile always uses bottom sheet (`bottom-center`).
+     * Panel position on all breakpoints (`{row}-{column}` grid).
+     * Use `useBreakpoint` if you need a different align per viewport
+     * (e.g. bottom sheet on mobile, centered on desktop).
      *
      * @default "middle-center"
      */

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

@@ -6,19 +6,19 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
     search: (query: string) => any;
     select: (option: import('@bridge-ui/core').ListboxOption) => any;
     "update:modelValue": (...args: unknown[]) => any;
-    clear: () => any;
     change: (value: import('@bridge-ui/core').SelectModel) => any;
     close: () => any;
     open: () => any;
     deselect: (option: import('@bridge-ui/core').ListboxOption) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
-    onClear?: (() => any) | undefined;
     onChange?: ((value: import('@bridge-ui/core').SelectModel) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;

package/dist/Components/Select/select.types.d.ts

@@ -199,11 +199,11 @@ export interface SelectSlots extends FormFieldSlots {
     /**
      * Content below the trigger, above the option list.
      */
-    afterOptions?: Slot;
+    afterOptions?: Slot<undefined>;
     /**
      * Content above the option list.
      */
-    beforeOptions?: Slot;
+    beforeOptions?: Slot<undefined>;
     /**
      * Custom chip content (multiple mode).
      */
@@ -215,15 +215,15 @@ export interface SelectSlots extends FormFieldSlots {
      * When set (and not using declarative `SelectOption` children), replaces
      * mapped `options` inside the listbox.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Custom empty-state content.
      */
-    empty?: Slot;
+    empty?: Slot<undefined>;
     /**
      * Custom loading content.
      */
-    loading?: Slot;
+    loading?: Slot<undefined>;
     /**
      * Custom option item content when rendering from the `options` prop.
      */

package/dist/Components/Snackbar/composables/useSnackbar.js

@@ -108,7 +108,7 @@ function h(h, _e, g = {}) {
 			return;
 		}
 		S.value = !1, Q(n);
-	}, { immediate: !0 }), o([G, W], ([e]) => {
+	}, { immediate: !0 }), o([W, G], ([e]) => {
 		if (!e) {
 			T.value = !1, b.value = 1;
 			return;