@bridge-ui/vue 0.0.0

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

@@ -0,0 +1,191 @@
+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 re, useAttrs as a, watch as o } from "vue";
+import { get as s } from "es-toolkit/compat";
+import { LAYER_STACK_BASE_Z_INDEX as c, acquireLayerStackOrder as ie, cn as l, countModalTransitionLayers as u, createFocusTrap as d, getLayerStackEntry as f, getModalOverlayTransitionClass as p, getModalPanelTransitionClass as m, hasModalTransition as h, mergeBridgeUILayeredClasses as g, pushLayerStack as ae, resolveEffectiveModalTransition as _, splitComponentProps as oe, subscribeLayerStack as se } from "@bridge-ui/core";
+import { isModalBackdropClick as ce } from "@bridge-ui/core/Utils";
+import { alignProps as v, blurProps as y, sizeProps as b } from "@bridge-ui/core/Components/Modal";
+//#region src/Components/Modal/composables/useModal.ts
+var le = [
+	"blur",
+	"size",
+	"align",
+	"scroll",
+	"classes",
+	"stackId",
+	"autoFocus",
+	"persistent",
+	"teleportTo",
+	"transition",
+	"customProps",
+	"keepMounted",
+	"hideBackdrop",
+	"closeOnEscape",
+	"closeOnOverlay",
+	"disableScrollLock",
+	"disableEnforceFocus",
+	"disableRestoreFocus"
+];
+function x(x, ue, S = {}) {
+	let de = a(), C = i(!1), w = i(!1), T = i(""), E = i(null), D = 0, O = null, k = null, A = null, j = null, M = i(c), N = i("closed"), P = n(() => re(S.show ?? !1));
+	function F(e) {
+		e || S.onClose?.(), S.show && (S.show.value = e), S.onShowChange?.(e);
+	}
+	let I = n(() => oe({
+		bridgeKeys: le,
+		props: {
+			...de,
+			...x
+		}
+	})), { merged: L, entry: R } = ee({
+		libDefaults: ue,
+		componentName: "Modal",
+		props: () => I.value.componentProps
+	}), z = n(() => L.value.customProps), B = te({
+		entry: R,
+		props: () => I.value.componentProps
+	}), V = n(() => _(L.value.transition ?? "none")), H = n(() => h(V.value)), U = n(() => L.value.scroll ?? "body"), W = n(() => L.value.keepMounted && !w.value), fe = n(() => s(g(v, R.value?.customProps?.align), L.value.align)), pe = n(() => s(g(y, R.value?.customProps?.blur), L.value.blur)), me = n(() => s(g(b, R.value?.customProps?.size), L.value.size)), he = n(() => p(V.value)), ge = n(() => m(V.value)), G = n(() => !L.value.persistent), _e = n(() => I.value.inheritedAttrs), ve = n(() => e(z.value?.root, _e.value, {
+		onTransitionend: we,
+		style: { zIndex: M.value },
+		"aria-hidden": W.value ? !0 : void 0,
+		class: l({
+			"fixed inset-0": !0,
+			"overflow-y-auto": U.value === "body",
+			"overflow-hidden": U.value === "paper",
+			"invisible pointer-events-none": W.value,
+			[s(B.value, "root") ?? ""]: !0
+		})
+	})), ye = n(() => e(z.value?.overlay, { onClick: Z }, {
+		"data-modal-part": "overlay",
+		"data-state": N.value,
+		class: l({
+			"fixed inset-0 bg-black/50": !0,
+			[pe.value ?? ""]: !0,
+			[he.value]: H.value,
+			[s(B.value, "overlay") ?? ""]: !0
+		})
+	})), 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, {
+		role: "dialog",
+		"aria-modal": !0
+	}, {
+		"data-modal-part": "panel",
+		"data-state": N.value,
+		class: l({
+			"relative w-full": !0,
+			[me.value ?? ""]: !0,
+			"max-h-[calc(100dvh-2rem)] overflow-y-auto": U.value === "paper",
+			[ge.value]: H.value,
+			[s(B.value, "panel") ?? ""]: !0
+		})
+	}));
+	function K() {
+		k?.release(), k = null;
+	}
+	function q() {
+		if (!w.value || N.value !== "open" || !E.value) {
+			K();
+			return;
+		}
+		K(), k = d({
+			container: E.value,
+			disableAutoFocus: !L.value.autoFocus,
+			disableEnforceFocus: L.value.disableEnforceFocus,
+			disableRestoreFocus: L.value.disableRestoreFocus
+		});
+	}
+	function Se(e) {
+		E.value = t(e), q();
+	}
+	function J() {
+		D = 0, w.value = !1, K(), P.value ? F(!1) : S.onShowChange?.(!1), N.value = "closed", L.value.keepMounted || (C.value = !1);
+	}
+	function Y() {
+		if (A?.releaseScrollLock(), !H.value) {
+			J();
+			return;
+		}
+		N.value = "closed", D = u(V.value, { hideBackdrop: L.value.hideBackdrop }), D === 0 && J();
+	}
+	function Ce() {
+		if (!H.value) {
+			N.value = "open";
+			return;
+		}
+		N.value = "closed", r(() => {
+			requestAnimationFrame(() => {
+				N.value = "open";
+			});
+		});
+	}
+	function we(e) {
+		if (!C.value || N.value !== "closed") return;
+		let t = e.target;
+		t?.dataset.modalPart !== "overlay" && t?.dataset.modalPart !== "panel" || e.propertyName === "none" || e.elapsedTime === 0 || (--D, D <= 0 && J());
+	}
+	function X() {
+		if (G.value) {
+			if (!H.value) {
+				F(!1);
+				return;
+			}
+			C.value && Y();
+		}
+	}
+	function Z() {
+		L.value.closeOnOverlay === !1 || !G.value || X();
+	}
+	function Q(e) {
+		ce(e) && Z();
+	}
+	function Te() {
+		!P.value || L.value.closeOnEscape === !1 || !G.value || X();
+	}
+	o(P, (e) => {
+		if (e) {
+			C.value = !0, w.value = !0, Ce();
+			return;
+		}
+		C.value && Y();
+	}, { immediate: !0 }), o([
+		w,
+		N,
+		() => L.value.autoFocus,
+		() => L.value.disableEnforceFocus,
+		() => L.value.disableRestoreFocus
+	], () => {
+		r(() => {
+			q();
+		});
+	});
+	function $() {
+		let e = f(T.value);
+		e && (M.value = e.zIndex);
+	}
+	return o(w, (e) => {
+		e ? (O = ie(), A = ae({
+			order: O,
+			id: S.stackId,
+			onEscape: Te,
+			lockScroll: L.value.disableScrollLock !== !0
+		}), T.value = A.id, M.value = A.zIndex, $(), j = se($)) : (j?.(), j = null, A?.release(), A = null, O = null, T.value = "", M.value = c);
+	}, { immediate: !0 }), ne(() => {
+		j?.(), j = null, K(), A?.release(), A = null;
+	}), {
+		merged: L,
+		mounted: C,
+		rootBind: ve,
+		panelBind: xe,
+		overlayBind: ye,
+		wrapperBind: be,
+		setPanelRef: Se,
+		layerStackId: T,
+		handleOverlayClick: Z,
+		handleWrapperClick: Q
+	};
+}
+//#endregion
+export { x as useModal };

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

@@ -0,0 +1,4 @@
+export { useModal } from './composables/useModal';
+export type { ModalOptions } from './composables/useModal';
+export type { ModalAlignOverrides, ModalBlurOverrides, ModalClasses, ModalCustomProps, ModalEmits, ModalOwnProps, ModalProps, ModalSizeOverrides, ModalSlots, } from './modal.types';
+export { default as Modal } from './Modal.vue';

package/dist/Components/Modal/index.js

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

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

@@ -0,0 +1,177 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { MergeHtmlProps, MergeProps, ModalAlign, ModalBlur, ModalScroll, ModalSize, ModalTransition } from '@bridge-ui/core';
+export interface ModalBlurOverrides {}
+export interface ModalSizeOverrides {}
+export interface ModalAlignOverrides {}
+export interface ModalScrollOverrides {}
+export interface ModalTransitionOverrides {}
+export interface ModalClasses {
+    /**
+     * 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 centering wrapper.
+     */
+    wrapper?: string;
+}
+export interface ModalCustomProps {
+    /**
+     * 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 centering wrapper.
+     */
+    wrapper?: HTMLAttributes;
+}
+export interface ModalEmits {
+    /**
+     * Emitted when the user dismisses the modal (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];
+}
+/**
+ * Modal shell (overlay, portal, backdrop). Put `Card` or any content in the default slot.
+ * Visibility is controlled with `v-model` (not listed here — `defineModel` handles it).
+ */
+export interface ModalOwnProps {
+    /**
+     * Panel position from the `sm` breakpoint up (`{row}-{column}` grid).
+     * Mobile always uses bottom sheet (`bottom-center`).
+     *
+     * @default "middle-center"
+     */
+    align?: MergeProps<ModalAlign, ModalAlignOverrides>;
+    /**
+     * When true, focuses the first focusable element inside the dialog on open.
+     *
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Backdrop blur on the overlay.
+     *
+     * @default "none"
+     */
+    blur?: MergeProps<ModalBlur, ModalBlurOverrides>;
+    /**
+     * The classes to apply to the modal.
+     *
+     * @default undefined
+     */
+    classes?: ModalClasses;
+    /**
+     * Whether the modal closes on escape key press.
+     *
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the modal closes on overlay click.
+     *
+     * @default true
+     */
+    closeOnOverlay?: boolean;
+    /**
+     * Props forwarded to each modal part.
+     *
+     * @default undefined
+     */
+    customProps?: ModalCustomProps;
+    /**
+     * When true, focus is not trapped inside the modal 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 modal is open.
+     *
+     * @default false
+     */
+    disableScrollLock?: boolean;
+    /**
+     * When true, the backdrop overlay is not rendered.
+     *
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /**
+     * When true, the modal stays mounted in the DOM after closing (hidden).
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * When true, escape and overlay clicks do not close the modal.
+     *
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Where scroll happens: the page (`body`) or the dialog panel (`paper`).
+     *
+     * @default "body"
+     */
+    scroll?: MergeProps<ModalScroll, ModalScrollOverrides>;
+    /**
+     * Max width of the dialog from the `sm` breakpoint up (`sm:max-w-*`).
+     *
+     * @default "md"
+     */
+    size?: MergeProps<ModalSize, ModalSizeOverrides>;
+    /**
+     * Stack id assigned when the modal opens. Set by BridgeModalHost; do not set in app code.
+     *
+     * @internal
+     */
+    stackId?: string;
+    /**
+     * Where to teleport the modal. Pass `false` to render in place.
+     *
+     * @default "body"
+     */
+    teleportTo?: false | string;
+    /**
+     * Enter/leave animation for overlay and panel.
+     *
+     * @default "fade"
+     */
+    transition?: MergeProps<ModalTransition, ModalTransitionOverrides>;
+}
+export interface ModalSlots {
+    /**
+     * Modal content (e.g. a `Card` component).
+     */
+    default?: Slot<undefined>;
+}
+export type ModalProps = MergeHtmlProps<ModalOwnProps, HTMLAttributes>;

package/dist/Components/NumberField/NumberField.js

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

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

@@ -0,0 +1,24 @@
+import { NumberFieldOwnProps, NumberFieldSlots } from './numberField.types';
+type __VLS_Slots = NumberFieldSlots;
+type __VLS_Props = NumberFieldOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: null | number | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: unknown[]) => any;
+    change: (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+    onChange?: ((value: number) => any) | undefined;
+}>, {
+    step: number;
+}, {}, {}, {}, 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/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { useHoldRepeat as e } from "../../Utils/useHoldRepeat.js";
+import { resolveFieldAdornmentIconSize as t } from "../../Utils/index.js";
+import n from "../Icon/Icon.js";
+import r from "../FormField/FormField.js";
+import { useNumberField as i } from "./composables/useNumberField.js";
+import { computed as a, createBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, isRef as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, unref as h, useModel as g, vModelDynamic as _, withCtx as v, withDirectives as y } from "vue";
+import { cn as b } from "@bridge-ui/core";
+import { ChevronDown as x, ChevronUp as S } from "lucide-vue-next";
+//#region src/Components/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, w = ["disabled"], T = ["disabled"], E = /* @__PURE__ */ l({
+	inheritAttrs: !1,
+	__name: "NumberField",
+	props: /* @__PURE__ */ d({
+		classes: {},
+		max: {},
+		min: {},
+		step: { default: 1 },
+		color: {},
+		controlId: {},
+		corner: {},
+		customProps: {},
+		description: {},
+		disabled: { type: Boolean },
+		end: {},
+		error: { type: Boolean },
+		errorIcon: {},
+		errorMessage: {},
+		label: {},
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		rounded: {},
+		size: {},
+		slots: {},
+		start: {},
+		variant: {},
+		withErrorIcon: { type: Boolean },
+		withoutErrorMessage: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ d(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(l, { emit: d }) {
+		let E = d, D = g(l, "modelValue"), O = l, { decrement: k, formField: A, increment: j, inputBind: M, stringModel: N, mergedClasses: P } = i(O, D, { onChange: (e) => E("change", e) }), F = e(() => j(), () => ({ disabled: O.disabled })), I = e(() => k(), () => ({ disabled: O.disabled })), L = a(() => t(O.size));
+		return (e, t) => (m(), o(h(r), { field: h(A) }, {
+			end: v(() => [s("div", C, [s("button", {
+				type: "button",
+				disabled: O.disabled,
+				"aria-label": "Increment value",
+				onClick: t[1] ||= (...e) => h(F).onPressClick && h(F).onPressClick(...e),
+				onPointerup: t[2] ||= (...e) => h(F).onPressPointerUp && h(F).onPressPointerUp(...e),
+				onPointerdown: t[3] ||= (...e) => h(F).onPressPointerDown && h(F).onPressPointerDown(...e),
+				onLostpointercapture: t[4] ||= (...e) => h(F).onPressLostPointerCapture && h(F).onPressLostPointerCapture(...e),
+				class: p(h(b)({
+					"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
+					[h(P).increment ?? ""]: !0
+				}))
+			}, [c(h(n), {
+				icon: h(S),
+				size: L.value
+			}, null, 8, ["icon", "size"])], 42, w), s("button", {
+				type: "button",
+				disabled: O.disabled,
+				"aria-label": "Decrement value",
+				onClick: t[5] ||= (...e) => h(I).onPressClick && h(I).onPressClick(...e),
+				onPointerup: t[6] ||= (...e) => h(I).onPressPointerUp && h(I).onPressPointerUp(...e),
+				onPointerdown: t[7] ||= (...e) => h(I).onPressPointerDown && h(I).onPressPointerDown(...e),
+				onLostpointercapture: t[8] ||= (...e) => h(I).onPressLostPointerCapture && h(I).onPressLostPointerCapture(...e),
+				class: p(h(b)({
+					"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
+					[h(P).decrement ?? ""]: !0
+				}))
+			}, [c(h(n), {
+				icon: h(x),
+				size: L.value
+			}, null, 8, ["icon", "size"])], 42, T)])]),
+			default: v(() => [y(s("input", f({ "onUpdate:modelValue": t[0] ||= (e) => u(N) ? N.value = e : null }, h(M)), null, 16), [[_, h(N)]])]),
+			_: 1
+		}, 8, ["field"]));
+	}
+});
+//#endregion
+export { E as default };