@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/Radio/Radio.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,14 @@
-import e from "../FormControl/FormControl.js";
-import { useRadio as t } from "./composables/useRadio.js";
-import { computed as n, createBlock as r, createElementVNode as i, defineComponent as a, guardReactiveProps as o, mergeModels as s, mergeProps as c, normalizeProps as l, openBlock as u, ref as d, unref as f, useAttrs as p, useModel as m, withCtx as h } from "vue";
-import { isNil as g } from "es-toolkit/compat";
+import { presentSlotNames as e } from "../../Utils/slotOrProp.js";
+import { FORM_CONTROL_CHROME_SLOT_NAMES as t } from "../FormControl/formControl.types.js";
+import n from "../FormControl/FormControl.js";
+import { useRadio as r } from "./composables/useRadio.js";
+import { computed as i, createBlock as a, createElementVNode as o, createSlots as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, ref as m, renderList as h, renderSlot as g, unref as _, useAttrs as v, useModel as y, withCtx as b } from "vue";
+import { isNil as x } from "es-toolkit/compat";
 //#region src/Components/Radio/Radio.vue?vue&type=script&setup=true&lang.ts
-var _ = ["for"], v = ["checked"], y = /* @__PURE__ */ a({
+var S = ["for"], C = ["checked"], w = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "Radio",
-	props: /* @__PURE__ */ s({
+	props: /*@__PURE__*/ u({
 		classes: {},
 		color: {},
 		customProps: {},
@@ -31,26 +33,29 @@ var _ = ["for"], v = ["checked"], y = /* @__PURE__ */ a({
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(a) {
-		let s = p(), y = a, b = m(a, "modelValue"), x = d(!!y.defaultChecked), { merged: S, dotBind: C, fieldBind: w, inputBind: T, isChecked: E, formControl: D, controlBind: O } = t(() => ({
-			...s,
-			...y
+	setup(c) {
+		let u = v(), w = c, T = y(c, "modelValue"), E = m(!!w.defaultChecked), D = i(() => x(T.value) && E.value ? w.value : T.value), { merged: O, dotBind: k, fieldBind: A, inputBind: j, isChecked: M, formControl: N, controlBind: P } = r(() => ({
+			...u,
+			...w
 		}), {
 			size: "md",
 			rounded: "full",
 			color: "primary"
-		}, n(() => g(b.value) && x.value ? y.value : b.value));
-		function k() {
-			x.value = !0, g(S.value.value) || (b.value = S.value.value);
+		}, D);
+		function F() {
+			E.value = !0, x(O.value.value) || (T.value = O.value.value);
 		}
-		return (t, n) => (u(), r(f(e), { field: f(D) }, {
-			default: h(() => [i("label", c(f(w), { for: f(D).controlId.value }), [i("input", c(f(T), {
-				checked: f(E),
-				onChange: k
-			}), null, 16, v), i("span", l(o(f(O))), [i("span", l(o(f(C))), null, 16)], 16)], 16, _)]),
-			_: 1
-		}, 8, ["field"]));
+		return (r, i) => (p(), a(_(n), { field: _(N) }, s({
+			default: b(() => [o("label", d(_(A), { for: _(N).controlId.value }), [o("input", d(_(j), {
+				checked: _(M),
+				onChange: F
+			}), null, 16, C), o("span", f(l(_(P))), [o("span", f(l(_(k))), null, 16)], 16)], 16, S)]),
+			_: 2
+		}, [h(_(e)(_(t), r.$slots), (e) => ({
+			name: e,
+			fn: b((t) => [g(r.$slots, e, f(l(t || {})))])
+		}))]), 1032, ["field"]));
 	}
 });
 //#endregion
-export { y as default };
+export { w as default };

package/dist/Components/Radio/composables/useRadio.js

@@ -36,7 +36,16 @@ function _(_, v, y) {
 	}), T = i(() => C.value.customProps), E = n({
 		entry: w,
 		props: () => S.value.componentProps
-	}), D = i(() => a(y) === C.value.value), O = i(() => u(c(f, w.value?.tokens?.color), C.value.color ?? "primary")), k = i(() => c(p, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => u(c(h, w.value?.tokens?.size), C.value.size ?? "sm")), M = i(() => u(c(m, w.value?.tokens?.rounded), C.value.rounded ?? "full")), N = i(() => e({
+	}), D = i(() => a(y) === C.value.value), O = i(() => {
+		let e = c(f, w.value?.tokens?.color);
+		return u(e, C.value.color ?? "primary");
+	}), k = i(() => c(p, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => {
+		let e = c(h, w.value?.tokens?.size);
+		return u(e, C.value.size ?? "sm");
+	}), M = i(() => {
+		let e = c(m, w.value?.tokens?.rounded);
+		return u(e, C.value.rounded ?? "full");
+	}), N = i(() => e({
 		...T.value?.input,
 		...x.controlBind.value,
 		type: "radio",

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

@@ -9,6 +9,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     clear: () => any;
     search: (query: string) => any;
     select: (option: import('@bridge-ui/core').ListboxOption) => any;
+    cancel: () => any;
     change: (value: import('@bridge-ui/core').SelectModel) => any;
     close: () => any;
     deselect: (option: import('@bridge-ui/core').ListboxOption) => any;
@@ -18,6 +19,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onClear?: (() => any) | undefined;
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: import('@bridge-ui/core').SelectModel) => any) | undefined;
     onClose?: (() => any) | undefined;
     onDeselect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;

package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,30 +1,31 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
-import { hasNamedSlot as t, resolveNamedSlot as n } from "../../Utils/slotOrProp.js";
+import { hasNamedSlot as t, presentSlotNames as n } from "../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as ee } from "../../Utils/index.js";
 import r from "../Icon/Icon.js";
 import i from "../Chip/Chip.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as te } from "../FormField/formField.types.js";
 import a from "../FormField/FormField.js";
-import te from "../Listbox/Listbox.js";
+import ne from "../Listbox/Listbox.js";
 import { useSelect as o } from "./composables/useSelect.js";
 import { SELECT_OPTION_KEY as s } from "./selectInjectionKey.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as ne, createTextVNode as re, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef as _, mergeModels as v, mergeProps as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ie, renderSlot as w, resolveDynamicComponent as T, toDisplayString as ae, unref as E, useModel as D, useTemplateRef as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
-import { cn as M } from "@bridge-ui/core";
-import { isUndefined as N } from "es-toolkit/compat";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as oe, withCtx as O, withKeys as k, withModifiers as A } from "vue";
+import { cn as j } from "@bridge-ui/core";
+import { isUndefined as M } from "es-toolkit/compat";
 //#region src/Components/Select/Select.vue?vue&type=script&setup=true&lang.ts
-var P = {
+var N = {
 	key: 0,
 	class: "flex min-w-0 flex-1 flex-wrap items-center gap-0.5"
-}, F = {
+}, P = {
 	key: 1,
 	class: "flex min-w-0 flex-1 items-center gap-1"
-}, I = ["aria-label"], L = {
+}, F = ["aria-label"], I = {
 	key: 0,
 	hidden: "",
 	"aria-hidden": "true"
-}, R = /* @__PURE__ */ h({
+}, L = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "Select",
-	props: /* @__PURE__ */ v({
+	props: /*@__PURE__*/ y({
 		asyncData: {},
 		clearable: {
 			type: Boolean,
@@ -45,11 +46,13 @@ var P = {
 		optionLabel: {},
 		options: {},
 		optionValue: {},
+		overlay: {},
 		placeholder: {},
 		searchable: {
 			type: Boolean,
 			default: !1
 		},
+		showFooter: { type: Boolean },
 		classes: {},
 		color: {},
 		controlId: {},
@@ -79,7 +82,8 @@ var P = {
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ v([
+	emits: /*@__PURE__*/ y([
+		"cancel",
 		"change",
 		"clear",
 		"close",
@@ -89,14 +93,14 @@ var P = {
 		"select",
 		"update:modelValue"
 	], ["update:modelValue"]),
-	setup(h, { emit: v }) {
-		let R = D(h, "modelValue"), z = h, B = v, V = e(), H = C(z.defaultValue), oe = l({
+	setup(g, { emit: y }) {
+		let L = ae(g, "modelValue"), R = g, z = y, B = e(), V = w(R.defaultValue), H = l({
 			set: (e) => {
-				R.value = e, H.value = e;
+				L.value = e, V.value = e;
 			},
-			get: () => N(R.value) ? H.value : R.value
-		}), U = O("trigger"), W = C([]);
-		S(s, {
+			get: () => M(L.value) ? V.value : L.value
+		}), U = oe("trigger"), W = w([]);
+		C(s, {
 			unregister(e) {
 				W.value = W.value.filter((t) => String(t.value) !== String(e));
 			},
@@ -104,90 +108,97 @@ var P = {
 				W.value.some((t) => String(t.value) === String(e.value)) || (W.value = [...W.value, e]);
 			}
 		});
-		let { open: G, slots: K, hasValue: q, multiple: se, formField: J, clearable: ce, clearBind: Y, clearValue: X, removeChip: le, triggerBind: Z, selectOption: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, selectedOptions: me, hasComposedList: $, handleRegisteredOptionsChange: he } = o(z, oe, U, B, W);
-		return (e, o) => (x(), f(c, null, [
-			m(E(a), { field: E(J) }, {
-				default: k(() => [E(se) ? (x(), f("div", P, [(x(!0), f(c, null, ie(E(me), (t) => (x(), u(E(i), y({
+		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: se, triggerBind: Z, handleApply: ce, selectOption: le, handleCancel: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, showClearIcon: me, selectedOptions: he, hasComposedList: $, handleRegisteredOptionsChange: ge } = o(R, H, U, z, W);
+		return (e, o) => (S(), f(c, null, [
+			h(D(a), { field: D(J) }, m({
+				default: O(() => [D(q) ? (S(), f("div", N, [(S(!0), f(c, null, T(D(he), (t) => (S(), u(D(i), b({
 					dismissible: "",
 					key: String(t.value),
-					size: E(J).merged.value.size,
-					disabled: E(J).isDisabled.value,
+					size: D(J).merged.value.size,
+					disabled: D(J).isDisabled.value,
 					"clear-label": `Remove ${t.label}`,
-					onDismiss: (e) => E(le)(t, e)
-				}, { ref_for: !0 }, E(ee)(z.customProps?.chip, {
-					customProps: { clear: E(Y) },
-					classes: { root: E(M)({
-						"bg-white ring-1 ring-inset ring-gray-200 dark:bg-gray-700 dark:ring-gray-600": !0,
-						[E(pe).chip ?? ""]: !0
+					onDismiss: (e) => D(se)(t, e)
+				}, { ref_for: !0 }, D(ee)(R.customProps?.chip, {
+					customProps: { clear: D(Y) },
+					classes: { root: D(j)({
+						"bg-white ring-1 ring-inset ring-dark-200 dark:bg-dark-700 dark:ring-dark-600": !0,
+						[D(pe).chip ?? ""]: !0
 					}) }
 				})), {
-					default: k(() => [w(e.$slots, "chip", { option: t }, () => [re(ae(t.label), 1)])]),
+					default: O(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
 					_: 2
 				}, 1040, [
 					"size",
 					"disabled",
 					"clear-label",
 					"onDismiss"
-				]))), 128)), p("textarea", y({ ref: "trigger" }, E(Z)), null, 16)])) : (x(), f("div", F, [p("input", y({
+				]))), 128)), p("textarea", b({ ref: "trigger" }, D(Z)), null, 16)])) : (S(), f("div", P, [p("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, E(Z)), null, 16), E(ce) && E(q) && !E(J).isDisabled.value ? (x(), f("span", y({ key: 0 }, E(Y), {
-					onClick: o[0] ||= (...e) => E(X) && E(X)(...e),
-					onKeydown: [o[1] ||= A(j((...e) => E(X) && E(X)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => E(X) && E(X)(...e), ["prevent"]), ["space"])],
-					"aria-label": E(V)("Clear selection")
-				}), [m(E(r), y({
+				}, D(Z)), null, 16), D(me) ? (S(), f("span", b({ key: 0 }, D(Y), {
+					onClick: o[0] ||= (...e) => D(X) && D(X)(...e),
+					onKeydown: [o[1] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), o[2] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
+					"aria-label": D(B)("Clear selection")
+				}), [h(D(r), b({
 					icon: "clear",
-					size: E(fe)
-				}, z.customProps?.clearIcon), null, 16, ["size"])], 16, I)) : d("", !0)]))]),
-				_: 3
-			}, 8, ["field"]),
-			m(E(te), y({
-				modelValue: E(G),
-				"onUpdate:modelValue": o[3] ||= (e) => _(G) ? G.value = e : null
-			}, E(de), {
-				"anchor-el": E(Q),
-				onSelect: E(ue),
-				onRegisteredOptionsChange: E(he)
-			}), ne({ _: 2 }, [
-				E($) ? {
+					size: D(fe)
+				}, R.customProps?.clearIcon), null, 16, ["size"])], 16, F)) : d("", !0)]))]),
+				_: 2
+			}, [T(D(n)(D(te), e.$slots), (t) => ({
+				name: t,
+				fn: O((n) => [E(e.$slots, t, x(_(n || {})))])
+			}))]), 1032, ["field"]),
+			h(D(ne), b({
+				modelValue: D(G),
+				"onUpdate:modelValue": o[3] ||= (e) => v(G) ? G.value = e : null
+			}, D(de), {
+				onApply: D(ce),
+				"anchor-el": D(Q),
+				onCancel: D(ue),
+				onSelect: D(le),
+				onRegisteredOptionsChange: D(ge)
+			}), m({ _: 2 }, [
+				D($) ? {
 					name: "default",
-					fn: k(() => [w(e.$slots, "default")]),
+					fn: O(() => [E(e.$slots, "default")]),
 					key: "0"
 				} : void 0,
-				E(t)(E(K), "beforeOptions") ? {
+				D(t)(D(K), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "beforeOptions"))))]),
+					fn: O(() => [E(e.$slots, "beforeOptions")]),
 					key: "1"
 				} : void 0,
-				E(t)(E(K), "loading") ? {
+				D(t)(D(K), "loading") ? {
 					name: "loading",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "loading"))))]),
+					fn: O(() => [E(e.$slots, "loading")]),
 					key: "2"
 				} : void 0,
-				E(t)(E(K), "option") ? {
+				D(t)(D(K), "option") ? {
 					name: "option",
-					fn: k((t) => [w(e.$slots, "option", b(g(t)))]),
+					fn: O((t) => [E(e.$slots, "option", x(_(t)))]),
 					key: "3"
 				} : void 0,
-				E(t)(E(K), "empty") ? {
+				D(t)(D(K), "empty") ? {
 					name: "empty",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "empty"))))]),
+					fn: O(() => [E(e.$slots, "empty")]),
 					key: "4"
 				} : void 0,
-				E(t)(E(K), "afterOptions") ? {
+				D(t)(D(K), "afterOptions") ? {
 					name: "afterOptions",
-					fn: k(() => [(x(), u(T(E(n)(E(K), "afterOptions"))))]),
+					fn: O(() => [E(e.$slots, "afterOptions")]),
 					key: "5"
 				} : void 0
 			]), 1040, [
 				"modelValue",
+				"onApply",
 				"anchor-el",
+				"onCancel",
 				"onSelect",
 				"onRegisteredOptionsChange"
 			]),
-			E($) ? d("", !0) : (x(), f("div", L, [w(e.$slots, "default")]))
+			D($) ? d("", !0) : (S(), f("div", I, [E(e.$slots, "default")]))
 		], 64));
 	}
 });
 //#endregion
-export { R as default };
+export { L as default };

package/dist/Components/Select/SelectOption.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { createElementBlock as t, defineComponent as n, inject as r, onBeforeUnm
 var s = {
 	hidden: "",
 	"aria-hidden": "true"
-}, c = /* @__PURE__ */ n({
+}, c = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	name: "SelectOption",
 	__name: "SelectOption",

package/dist/Components/Select/composables/useSelect.d.ts

@@ -721,7 +721,9 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
     }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>>;
+    handleApply: () => void;
     selectOption: (option: SelectOption) => void;
+    handleCancel: () => void;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     listboxProps: import('vue').ComputedRef<{
         anchorEl?: null | HTMLElement;
@@ -744,13 +746,16 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         maxHeight: string;
         multiple: boolean;
         options: import('@bridge-ui/core').ListboxOption[];
+        overlay: import('@bridge-ui/core').FieldOverlayMode;
         placement?: import('@floating-ui/utils').Placement;
         rounded: "2xl" | "lg" | "md" | "sm" | "xl" | "xs" | "none" | "3xl" | "4xl" | "full";
         showCheckmark?: boolean;
+        showFooter: boolean;
         size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
     }>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
     mergedClasses: import('vue').ComputedRef<Partial<SelectClasses>>;
+    showClearIcon: import('vue').ComputedRef<boolean>;
     visibleOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     isSearchActive: import('vue').ComputedRef<boolean>;
     selectedOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;