@bridge-ui/vue 0.0.0

package/dist/Components/Select/composables/useSelect.js

@@ -0,0 +1,305 @@
+import { hasNamedSlot as e } from "../../../Utils/slotOrProp.js";
+import { mergePartBind as t, resolveFieldAdornmentIconSize as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as ee } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as te, useFormField as ne } from "../../FormField/composables/useFormField.js";
+import { useListboxNavigation as re } from "../../Listbox/composables/useListboxNavigation.js";
+import { computed as i, nextTick as a, onBeforeUnmount as ie, onMounted as ae, ref as o, useAttrs as oe, useId as se, useSlots as ce, watch as s } from "vue";
+import { get as c, isNil as le, omit as ue } from "es-toolkit/compat";
+import { adjustAutosizeTextareaHeight as de, cn as l, createSelectAsyncSearch as fe, mergeBridgeUILayeredClasses as u, normalizeSelectOptions as d, resolveSelectAsyncDebounce as pe, resolveSelectAsyncOptions as me, selectValuesEqual as f, splitComponentProps as p } from "@bridge-ui/core";
+import { ChevronsUpDown as he } from "lucide-vue-next";
+import { colorProps as ge, invalidatedProps as _e } from "@bridge-ui/core/Components/Listbox";
+//#region src/Components/Select/composables/useSelect.ts
+var ve = [
+	"classes",
+	"loading",
+	"options",
+	"multiple",
+	"asyncData",
+	"clearable",
+	"maxHeight",
+	"searchable",
+	"flipOptions",
+	"optionLabel",
+	"optionValue",
+	"placeholder",
+	"defaultValue",
+	"emptyMessage",
+	"disableMaxHeight",
+	"hideEmptyMessage",
+	"minItemsForSearch",
+	"optionDescription"
+];
+function m(m, h, g, _, v) {
+	let ye = oe(), y = ce(), b = se(), x = o(!1), S = o(""), C = o(-1), w = o(null), T = o(!1), E = o([]), D = null, O = o([]), k = i(() => p({
+		bridgeKeys: ve,
+		props: {
+			...ye,
+			...m
+		}
+	})), A = i(() => k.value.componentProps), j = i(() => ({ classes: A.value.classes })), { components: M, entry: be } = r({
+		componentName: "Select",
+		props: () => j.value
+	}), N = ee({
+		entry: be,
+		props: () => j.value
+	}), P = i(() => !!A.value.multiple), F = i(() => ({
+		optionLabel: A.value.optionLabel ?? "label",
+		optionValue: A.value.optionValue ?? "value",
+		optionDescription: A.value.optionDescription ?? "description"
+	})), I = i(() => v.value.length > 0 ? v.value : d(A.value.options, F.value)), L = i(() => {
+		let e = E.value.length > 0 ? E.value : I.value;
+		return A.value.flipOptions ? [...e].reverse() : e;
+	}), R = i(() => {
+		let e = h.value;
+		return P.value ? Array.isArray(e) ? e : [] : !le(e) && e !== "" ? [e] : [];
+	}), z = i(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of [...L.value, ...O.value]) e.set(t.value, t);
+		return R.value.map((t) => e.get(t) ?? {
+			value: t,
+			label: String(t)
+		});
+	}), B = i(() => R.value.length > 0), xe = i(() => A.value.clearable !== !1), V = i(() => !!A.value.asyncData), H = i(() => {
+		if (V.value || A.value.searchable) return !0;
+		let e = A.value.minItemsForSearch ?? 11;
+		return I.value.length >= e;
+	}), U = i(() => x.value && H.value), Se = i(() => !!A.value.loading || T.value), W = i(() => {
+		if (!U.value || !S.value.trim()) return L.value;
+		let e = S.value.trim().toLowerCase();
+		return L.value.filter((t) => t.label.toLowerCase().includes(e));
+	}), G = re(() => W.value, C, b), Ce = i(() => m.readonly || m.disabled ? !0 : !U.value), we = i(() => U.value || P.value ? S.value : z.value[0]?.label ?? ""), Te = (e) => {
+		w.value = e instanceof HTMLElement ? e : null;
+	};
+	function Ee(e) {
+		e.preventDefault();
+	}
+	function De(e) {
+		if (m.disabled || m.readonly) return;
+		let t = e.target;
+		if (!t.closest("[data-select-clear]") && !(t.closest(".wrapper-start-slot") || t.closest(".wrapper-end-slot"))) {
+			if (!x.value) {
+				Z();
+				return;
+			}
+			U.value || (Q(), g.value?.focus({ preventScroll: !0 }));
+		}
+	}
+	let Oe = i(() => {
+		let n = p({
+			bridgeKeys: te,
+			props: ue(k.value.inheritedAttrs, ["class"])
+		}).componentProps, r = n.endIcon ?? (e(y, "end") ? void 0 : he);
+		return {
+			...n,
+			endIcon: r,
+			classes: N.value,
+			customProps: {
+				...n.customProps,
+				container: t(n.customProps?.container, {}, {
+					ref: Te,
+					onClick: De,
+					class: l({ "cursor-pointer": !m.disabled && !m.readonly && !U.value })
+				})
+			}
+		};
+	}), K = ne(() => Oe.value, {
+		size: "md",
+		rounded: "md",
+		color: "primary",
+		variant: "outline",
+		withErrorIcon: !0
+	}, {
+		likeInput: () => P.value,
+		control: () => P.value ? "textarea" : "input"
+	}), q = (e) => {
+		!e || !P.value || de(e);
+	};
+	function J(e) {
+		return R.value.some((t) => f(t, e));
+	}
+	function Y(e) {
+		h.value = e;
+	}
+	function X(e) {
+		if (P.value) {
+			let t = Array.isArray(e) ? e : [];
+			_("update:modelValue", t), _("change", t);
+			return;
+		}
+		let t = e ?? "";
+		_("update:modelValue", t), _("change", t);
+	}
+	function Z() {
+		m.disabled || m.readonly || x.value || (x.value = !0, S.value = "", G.highlightCurrentSelection(J), _("open"), V.value && A.value.asyncData && D?.searchImmediate(""));
+	}
+	function Q() {
+		D?.cancel(), x.value && (x.value = !1, S.value = "", C.value = -1, _("close"));
+	}
+	function ke(e) {
+		if (!e.disabled) {
+			if (P.value) {
+				let t = [...R.value], n = t.findIndex((t) => f(t, e.value));
+				n >= 0 ? (t.splice(n, 1), _("deselect", e)) : (t.push(e.value), _("select", e)), Y(t), X(t), S.value = "", C.value = -1, a(() => {
+					q(g.value), g.value?.focus({ preventScroll: !0 });
+				});
+				return;
+			}
+			Y(e.value), X(e.value), _("select", e), Q();
+		}
+	}
+	function Ae(e) {
+		e?.preventDefault(), e?.stopPropagation(), P.value ? (Y([]), X([])) : (Y(null), X(null)), _("clear"), Q();
+	}
+	function je(e, t) {
+		if (t.preventDefault(), t.stopPropagation(), !P.value) return;
+		let n = R.value.filter((t) => !f(t, e.value));
+		Y(n), X(n), _("deselect", e), a(() => q(g.value));
+	}
+	function Me() {
+		let e = G.getHighlightedOption();
+		e && ke(e);
+	}
+	function Ne(e) {
+		S.value = e.target.value, _("search", S.value), x.value || Z(), G.resetHighlight(), V.value && D?.searchDebounced(S.value);
+	}
+	function Pe(e) {
+		if (!(m.disabled || m.readonly)) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), x.value ? G.moveHighlight(1) : Z();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), x.value ? G.moveHighlight(-1) : Z();
+				break;
+			case "Enter":
+				e.preventDefault(), x.value ? Me() : Z();
+				break;
+			case "Escape":
+				e.preventDefault(), Q();
+				break;
+			case "Home":
+				x.value && (e.preventDefault(), G.highlightFirst());
+				break;
+			case "End":
+				x.value && (e.preventDefault(), G.highlightLast());
+				break;
+			case "Backspace":
+				if (P.value && !S.value && z.value.length > 0) {
+					e.preventDefault();
+					let t = z.value.at(-1);
+					t && je(t, e);
+				}
+				break;
+			case "Tab":
+				Q();
+				break;
+			default: break;
+		}
+	}
+	async function Fe(e) {
+		let t = A.value.asyncData;
+		if (t) {
+			T.value = !0;
+			try {
+				let { options: n, resolvedSelected: r } = await me(t, e, R.value, (e) => d(e, F.value));
+				r.length > 0 && (O.value = r), E.value = n;
+			} finally {
+				T.value = !1;
+			}
+		}
+	}
+	async function Ie() {
+		let e = A.value.asyncData;
+		!e?.resolve || R.value.length === 0 || (O.value = d(await e.resolve(R.value), F.value));
+	}
+	let $ = i(() => {
+		let e = c(u(ge, c(M.value, [
+			"Listbox",
+			"customProps",
+			"color"
+		])), K.merged.value.color ?? "primary");
+		return K.invalidated.value ? u(_e, c(M.value, [
+			"Listbox",
+			"customProps",
+			"invalidated"
+		])) : e;
+	}), Le = i(() => $.value?.value), Re = i(() => {
+		let e = !m.disabled && !m.readonly && !U.value, n = !m.disabled && !m.readonly && U.value && H.value, r = B.value && !P.value && !U.value;
+		return t({
+			role: "combobox",
+			value: we.value,
+			"aria-controls": b,
+			"aria-expanded": x.value,
+			readonly: Ce.value,
+			onKeydown: Pe,
+			placeholder: A.value.placeholder,
+			"aria-autocomplete": H.value ? "list" : void 0,
+			"aria-activedescendant": x.value ? G.activeDescendantId.value : void 0,
+			...P.value ? {
+				rows: 1,
+				onInput: (e) => {
+					Ne(e), q(e.target);
+				}
+			} : { onInput: Ne }
+		}, K.inputBind.value, l({
+			"cursor-text": n,
+			"cursor-pointer": e,
+			"resize-none overflow-hidden": P.value,
+			[l(Le.value, N.value.value) ?? ""]: r
+		}));
+	});
+	s(() => [
+		x.value,
+		P.value,
+		g.value
+	], () => {
+		q(g.value);
+	}, { immediate: !0 }), s(() => h.value, () => {
+		Ie();
+	}, { immediate: !0 }), s(() => A.value.asyncData, (e) => {
+		if (D?.cancel(), E.value = [], Ie(), !e) {
+			D = null;
+			return;
+		}
+		D = fe((e) => void Fe(e), pe(e));
+	}, { immediate: !0 }), ie(() => {
+		D?.cancel();
+	}), ae(() => {
+		q(g.value);
+	});
+	let ze = i(() => n(K.merged.value.size));
+	return {
+		open: x,
+		slots: y,
+		hasValue: B,
+		multiple: P,
+		listboxId: b,
+		formField: K,
+		isLoading: Se,
+		clearable: xe,
+		clearBind: i(() => t({}, {}, {
+			tabindex: 0,
+			role: "button",
+			"data-select-clear": !0,
+			onMousedown: Ee,
+			class: l({
+				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
+				[$.value?.clear ?? ""]: !0,
+				[N.value.clear ?? ""]: !0
+			})
+		})),
+		isSelected: J,
+		clearValue: Ae,
+		removeChip: je,
+		triggerBind: Re,
+		selectOption: ke,
+		containerRef: w,
+		clearIconSize: ze,
+		visibleOptions: W,
+		isSearchActive: U,
+		selectedOptions: z,
+		highlightedIndex: C,
+		emptyMessage: i(() => A.value.emptyMessage ?? "No options"),
+		hideEmptyMessage: i(() => A.value.hideEmptyMessage === !0)
+	};
+}
+//#endregion
+export { m as useSelect };

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

@@ -0,0 +1,4 @@
+export { useSelect } from './composables/useSelect';
+export type { SelectAsyncData, SelectClasses, SelectEmits, SelectModel, SelectOption as SelectOptionData, SelectOptionProps, SelectProps, SelectSlots, SelectValue, } from './select.types';
+export { default as Select } from './Select.vue';
+export { default as SelectOption } from './SelectOption.vue';

package/dist/Components/Select/index.js

@@ -0,0 +1,4 @@
+import { useSelect as e } from "./composables/useSelect.js";
+import t from "./Select.js";
+import n from "./SelectOption.js";
+export { t as Select, n as SelectOption, e as useSelect };

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

@@ -0,0 +1,231 @@
+import { InputHTMLAttributes, Slot, TextareaHTMLAttributes } from 'vue';
+import { MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectValue } from '@bridge-ui/core';
+import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+export type { SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectOptionLike, SelectValue, } from '@bridge-ui/core';
+export interface SelectClasses extends FormFieldClasses {
+    /**
+     * The classes to apply to selected chips (multiple mode).
+     */
+    chip?: string;
+    /**
+     * The classes to apply to clear icons (rest + hover).
+     */
+    clear?: string;
+    /**
+     * The classes to apply to the dropdown content.
+     */
+    content?: string;
+    /**
+     * The classes to apply to the option item.
+     */
+    item?: string;
+    /**
+     * The classes to apply to the selected value text in the trigger (single mode).
+     */
+    value?: string;
+}
+export interface SelectCustomProps extends FormFieldCustomProps {}
+export interface SelectEmits {
+    /**
+     * Emitted when the selection changes.
+     */
+    change: [value: SelectModel];
+    /**
+     * Emitted when the value is cleared.
+     */
+    clear: [];
+    /**
+     * Emitted when the menu closes.
+     */
+    close: [];
+    /**
+     * Emitted when an option is deselected (multiple mode).
+     */
+    deselect: [option: SelectOption];
+    /**
+     * Emitted when the menu opens.
+     */
+    open: [];
+    /**
+     * Emitted when the search query changes.
+     */
+    search: [query: string];
+    /**
+     * Emitted when an option is selected.
+     */
+    select: [option: SelectOption];
+    /**
+     * Emitted when `v-model` should update.
+     */
+    "update:modelValue": [value: SelectModel];
+}
+export interface SelectOptionProps {
+    /**
+     * Secondary line below the label.
+     */
+    description?: string;
+    /**
+     * Whether the option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The label of the option.
+     */
+    label: string;
+    /**
+     * The value of the option.
+     */
+    value: SelectValue;
+}
+export interface SelectOwnProps extends Omit<FormFieldOwnProps, "field"> {
+    /**
+     * Remote data source. Implies `searchable`.
+     */
+    asyncData?: SelectAsyncData;
+    /**
+     * Whether the value can be cleared.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Initial value when uncontrolled.
+     */
+    defaultValue?: SelectModel;
+    /**
+     * When true, the dropdown options list is not height-limited.
+     * Forwarded to the internal `Listbox`.
+     *
+     * @default false
+     */
+    disableMaxHeight?: boolean;
+    /**
+     * Message when the filtered list is empty.
+     *
+     * @default "No options"
+     */
+    emptyMessage?: string;
+    /**
+     * Inverts the visual order of options.
+     *
+     * @default false
+     */
+    flipOptions?: boolean;
+    /**
+     * Hides the empty-state message.
+     *
+     * @default false
+     */
+    hideEmptyMessage?: boolean;
+    /**
+     * External or async loading state.
+     */
+    loading?: boolean;
+    /**
+     * Tailwind max-height class for the dropdown options area.
+     * Forwarded to the internal `Listbox`.
+     *
+     * @default "max-h-60"
+     */
+    maxHeight?: string;
+    /**
+     * Minimum option count before search UI is enabled.
+     *
+     * @default 11
+     */
+    minItemsForSearch?: number;
+    /**
+     * Whether multiple values can be selected.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Key used to read the description from option objects.
+     *
+     * @default "description"
+     */
+    optionDescription?: string;
+    /**
+     * Key used to read the label from option objects.
+     *
+     * @default "label"
+     */
+    optionLabel?: string;
+    /**
+     * The list of options to display.
+     */
+    options?: SelectOptionInput[];
+    /**
+     * Key used to read the value from option objects.
+     *
+     * @default "value"
+     */
+    optionValue?: string;
+    /**
+     * Placeholder shown when no value is selected.
+     */
+    placeholder?: string;
+    /**
+     * Whether options can be filtered via the trigger input.
+     *
+     * @default false
+     */
+    searchable?: boolean;
+}
+export interface SelectSlots extends FormFieldSlots {
+    /**
+     * Content below the trigger, above the option list.
+     */
+    afterOptions?: Slot;
+    /**
+     * Content above the option list.
+     */
+    beforeOptions?: Slot;
+    /**
+     * Custom chip content (multiple mode).
+     */
+    chip?: Slot<{
+        option: SelectOption;
+    }>;
+    /**
+     * Custom empty-state content.
+     */
+    empty?: Slot;
+    /**
+     * Custom loading content.
+     */
+    loading?: Slot;
+    /**
+     * Custom option item content.
+     */
+    option?: Slot<{
+        option: SelectOption;
+        selected: boolean;
+    }>;
+}
+export type SelectSingleProps = MergeHtmlProps<SelectOwnProps, InputHTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component.
+     */
+    modelValue?: null | SelectValue;
+    /**
+     * Whether multiple values can be selected.
+     *
+     * @default false
+     */
+    multiple: false;
+};
+export type SelectMultipleProps = MergeHtmlProps<SelectOwnProps, TextareaHTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component.
+     */
+    modelValue?: null | SelectValue[];
+    /**
+     * Whether multiple values can be selected.
+     *
+     * @default true
+     */
+    multiple: true;
+};
+export type SelectProps = SelectSingleProps | SelectMultipleProps;

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

@@ -0,0 +1,7 @@
+import { InjectionKey } from 'vue';
+import { SelectOption } from './select.types';
+export type SelectOptionRegistration = {
+    register: (option: SelectOption) => void;
+    unregister: (value: SelectOption["value"]) => void;
+};
+export declare const SELECT_OPTION_KEY: InjectionKey<SelectOptionRegistration>;

package/dist/Components/Select/selectInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/Select/selectInjectionKey.ts
+var e = Symbol("SelectOption");
+//#endregion
+export { e as SELECT_OPTION_KEY };

package/dist/Components/Snackbar/Snackbar.js

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

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

@@ -0,0 +1,32 @@
+import { SnackbarOwnProps, SnackbarSlots } from './snackbar.types';
+type __VLS_Slots = SnackbarSlots;
+type __VLS_Props = SnackbarOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    close: () => any;
+    "show-change": (show: boolean) => any;
+    "leave-complete": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onShow-change"?: ((show: boolean) => any) | undefined;
+    "onLeave-complete"?: (() => any) | undefined;
+}>, {
+    teleportTo: false | string;
+    closeButton: boolean;
+    duration: false | number;
+    position: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').SnackbarPosition, import('./snackbar.types').SnackbarPositionOverrides>;
+    progressbar: 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;
+    };
+};