@bridge-ui/vue 0.1.0 → 0.2.0

package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,149 @@
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
+import i from "../FormField/FormField.js";
+import a from "../FieldOverlay/FieldOverlay.js";
+import { useColorField as o } from "./composables/useColorField.js";
+import s from "../ColorPicker/ColorPicker.js";
+import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as ee, withCtx as E, withKeys as D, withModifiers as O } from "vue";
+import { isUndefined as k } from "es-toolkit/compat";
+//#region src/Components/ColorField/ColorField.vue?vue&type=script&setup=true&lang.ts
+var A = { class: "flex min-w-0 flex-1 items-center gap-2" }, j = ["aria-label"], M = /*@__PURE__*/ h({
+	inheritAttrs: !1,
+	__name: "ColorField",
+	props: /*@__PURE__*/ _({
+		alpha: { type: Boolean },
+		classes: {},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		customProps: {},
+		defaultValue: {},
+		editable: { type: Boolean },
+		fill: {
+			type: Boolean,
+			default: void 0
+		},
+		format: {},
+		overlay: {},
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
+		showSwatch: {
+			type: Boolean,
+			default: !0
+		},
+		swatches: {},
+		color: {},
+		controlId: {},
+		corner: {},
+		description: {},
+		disabled: { type: Boolean },
+		end: {},
+		endIcon: {},
+		error: { type: Boolean },
+		errorIcon: {},
+		errorMessage: {},
+		hideErrorMessage: { type: Boolean },
+		label: {},
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		rounded: {},
+		showErrorIcon: {
+			type: Boolean,
+			default: !0
+		},
+		size: {},
+		slots: {},
+		start: {},
+		startIcon: {},
+		variant: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _([
+		"apply",
+		"cancel",
+		"change",
+		"clear",
+		"close",
+		"open"
+	], ["update:modelValue"]),
+	setup(h, { emit: _ }) {
+		let M = ee(h, "modelValue"), N = h, P = _, F = e(), I = S(N.defaultValue ?? null), L = l({
+			set: (e) => {
+				M.value = e, I.value = e;
+			},
+			get: () => k(M.value) ? I.value : M.value
+		}), { open: R, fill: z, format: B, overlay: V, colorOnly: H, formField: U, inputBind: W, clearBind: G, swatchBind: K, clearValue: q, modelValue: J, showFooter: Y, showSwatch: X, pickerClass: Z, clearIconSize: Q, showClearIcon: $, swatchFillBind: te, handleOpenChange: ne, handlePickerChange: re, handlePickerCancel: ie, overlayCustomProps: ae, colorPickerCustomProps: oe } = o(N, L, P);
+		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
+			default: E(() => [f("div", A, [
+				T(X) ? (x(), d("span", b(v({ key: 0 }, T(K))), [f("span", b(g(T(te))), null, 16)], 16)) : u("", !0),
+				f("input", b(g(T(W))), null, 16),
+				T($) ? (x(), d("span", v({ key: 1 }, T(G), {
+					onClick: o[0] ||= (...e) => T(q) && T(q)(...e),
+					"aria-label": T(F)("Clear"),
+					onKeydown: [o[1] ||= D(O((...e) => T(q) && T(q)(...e), ["prevent"]), ["enter"]), o[2] ||= D(O((...e) => T(q) && T(q)(...e), ["prevent"]), ["space"])]
+				}), [m(T(n), v({
+					icon: "clear",
+					size: T(Q)
+				}, N.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)
+			])]),
+			_: 2
+		}, [C(T(t)(T(r), e.$slots), (t) => ({
+			name: t,
+			fn: E((n) => [w(e.$slots, t, b(g(n || {})))])
+		}))]), 1032, ["field"]), m(T(a), {
+			overlay: T(V),
+			"model-value": T(R),
+			"custom-props": T(ae),
+			"onUpdate:modelValue": T(ne)
+		}, {
+			default: E(() => [m(T(s), {
+				fill: T(z),
+				format: T(B),
+				value: T(J),
+				class: y(T(Z)),
+				alpha: T(H).alpha,
+				"show-footer": T(Y),
+				"read-only": N.readonly,
+				swatches: T(H).swatches,
+				onChange: T(re),
+				onCancel: T(ie),
+				"custom-props": T(oe),
+				disabled: T(U).isDisabled.value,
+				rounded: T(U).merged.value.rounded
+			}, p({ _: 2 }, [e.$slots.footer ? {
+				name: "footer",
+				fn: E((t) => [w(e.$slots, "footer", b(g(t)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"fill",
+				"format",
+				"value",
+				"class",
+				"alpha",
+				"show-footer",
+				"read-only",
+				"swatches",
+				"onChange",
+				"onCancel",
+				"custom-props",
+				"disabled",
+				"rounded"
+			])]),
+			_: 3
+		}, 8, [
+			"overlay",
+			"model-value",
+			"custom-props",
+			"onUpdate:modelValue"
+		])], 64));
+	}
+});
+//#endregion
+export { M as default };

package/dist/Components/ColorField/colorField.types.d.ts

@@ -0,0 +1,179 @@
+import { HTMLAttributes, InputHTMLAttributes, Slot } from 'vue';
+import { ColorFormat, FieldOverlayFooterSlotProps, FieldOverlayMode } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
+import { ColorPickerCustomProps } from '../ColorPicker/colorPicker.types';
+import { DrawerOwnProps } from '../Drawer/drawer.types';
+import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+import { IconProps } from '../Icon';
+import { MenuOwnProps } from '../Menu/menu.types';
+import { ModalOwnProps } from '../Modal/modal.types';
+export interface ColorFieldClasses extends FormFieldClasses {
+    /**
+     * Classes merged onto the clear control.
+     */
+    clear?: string;
+    /**
+     * Classes merged onto the start color swatch.
+     */
+    swatch?: string;
+}
+export interface ColorFieldCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to the clear `Icon` (`icon` is set by `ColorField`).
+     *
+     * @default undefined
+     */
+    clearIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the nested `ColorPicker`.
+     *
+     * @default undefined
+     */
+    colorPicker?: ColorPickerCustomProps;
+    /**
+     * Props forwarded to the nested `Drawer` when overlay resolves to drawer.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<DrawerOwnProps>;
+    /**
+     * Props forwarded to the floating `Menu` when overlay resolves to menu.
+     *
+     * @default undefined
+     */
+    menu?: Partial<MenuOwnProps>;
+    /**
+     * Props forwarded to the nested `Modal` when overlay resolves to modal.
+     *
+     * @default undefined
+     */
+    modal?: Partial<ModalOwnProps>;
+    /**
+     * Props forwarded to the start color swatch.
+     *
+     * @default undefined
+     */
+    swatch?: HTMLAttributes;
+}
+export interface ColorFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
+    /**
+     * Emitted when the selected color changes.
+     */
+    change: [value: null | string];
+    /**
+     * Emitted when the value is cleared.
+     */
+    clear: [];
+    /**
+     * Emitted when the menu closes.
+     */
+    close: [];
+    /**
+     * Emitted when the menu opens.
+     */
+    open: [];
+}
+export interface ColorFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "classes" | "customProps"> {
+    /**
+     * Shows the alpha slider in the nested picker. When unset, follows `format`.
+     *
+     * @default false (`true` for alpha formats when unset)
+     */
+    alpha?: boolean;
+    /**
+     * Classes for field / input regions.
+     *
+     * @default undefined
+     */
+    classes?: ColorFieldClasses;
+    /**
+     * Whether the value can be cleared.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: ColorFieldCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | string;
+    /**
+     * Unlocks the input for typing. Typed text is parsed and committed on blur
+     * or Enter. When unset, the input is read-only.
+     *
+     * @default false
+     */
+    editable?: boolean;
+    /**
+     * When `true`, the picker fills the overlay width.
+     * When `false`, it stays at its minimum width.
+     * Unset: `true` for `drawer`, `false` for `menu` and `modal`.
+     *
+     * @default undefined
+     */
+    fill?: boolean;
+    /**
+     * Serialized output format.
+     *
+     * @default "hex"
+     */
+    format?: ColorFormat;
+    /**
+     * Which overlay shell opens the picker. `auto` uses `menu` on desktop and
+     * `drawer` (bottom) on mobile.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
+    /**
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true` for dialog
+     * shells (`modal` / `drawer`).
+     *
+     * @default false (`true` for `modal` / `drawer` when unset)
+     */
+    showFooter?: boolean;
+    /**
+     * Shows the selected color swatch at the start of the field.
+     *
+     * @default true
+     */
+    showSwatch?: boolean;
+    /**
+     * Preset colors forwarded to the nested picker.
+     *
+     * @default undefined
+     */
+    swatches?: string[];
+}
+export interface ColorFieldSlots extends FormFieldSlots {
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
+}
+export type ColorFieldProps = MergeHtmlProps<ColorFieldOwnProps, InputHTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     *
+     * @default undefined
+     */
+    modelValue?: null | string;
+};