@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts

@@ -0,0 +1,218 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DateRangeValue, DisableDatesInput, MergeHtmlProps, MergeProps, StartOfWeek } from '@bridge-ui/core';
+import { ButtonProps } from '../Button/button.types';
+import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
+import { CalendarRangeOrientation } from '../CalendarRange';
+export interface DateRangePickerColorOverrides {}
+export interface DateRangePickerRoundedOverrides {}
+export interface DateRangePickerClasses {
+    /**
+     * Classes for the footer.
+     */
+    footer?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+}
+export interface DateRangePickerCustomProps {
+    /**
+     * Props forwarded to the Apply button.
+     *
+     * @default undefined
+     */
+    applyButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the Cancel button.
+     *
+     * @default undefined
+     */
+    cancelButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the footer.
+     *
+     * @default undefined
+     */
+    footer?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface DateRangePickerEmits {
+    /**
+     * Emitted when Cancel is pressed.
+     */
+    cancel: [];
+    /**
+     * Emitted when Apply is pressed (`showFooter`) or when the value commits.
+     */
+    change: [value: null | DateRangeValue];
+}
+export interface DateRangePickerOwnProps {
+    /**
+     * Classes for picker regions.
+     *
+     * @default undefined
+     */
+    classes?: DateRangePickerClasses;
+    /**
+     * Accent color.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<CalendarColor, DateRangePickerColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: DateRangePickerCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | DateRangeValue;
+    /**
+     * Disables the picker.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Dates that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableDates?: DisableDatesInput;
+    /**
+     * Month indexes that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableMonths?: number[];
+    /**
+     * Years that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableYears?: number[];
+    /**
+     * Hides month navigation / panel.
+     *
+     * @default false
+     */
+    hideMonths?: boolean;
+    /**
+     * Hides days that fall outside the displayed month.
+     *
+     * @default false
+     */
+    hideOutsideDays?: boolean;
+    /**
+     * Hides weekday labels.
+     *
+     * @default false
+     */
+    hideWeekdays?: boolean;
+    /**
+     * Hides year navigation / panel.
+     *
+     * @default false
+     */
+    hideYears?: boolean;
+    /**
+     * Latest selectable date.
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+    /**
+     * Earliest selectable date.
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * Dual calendar arrangement forwarded to `CalendarRange`.
+     *
+     * @default "horizontal"
+     */
+    orientation?: CalendarRangeOrientation;
+    /**
+     * Prevents selection.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of calendar tiles and chrome.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<CalendarRounded, DateRangePickerRoundedOverrides>;
+    /**
+     * Shows Cancel / Apply footer. Selection is draft until Apply.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
+    /**
+     * First day of the week.
+     *
+     * @default 0
+     */
+    startOfWeek?: number | StartOfWeek;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides.
+     *
+     * @default undefined
+     */
+    tokens?: DateRangePickerTokens;
+    /**
+     * Controlled value.
+     *
+     * @default undefined
+     */
+    value?: null | DateRangeValue;
+}
+export interface DateRangePickerSlots {
+    /**
+     * Custom content inside each day button on the nested calendars.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+}
+export interface DateRangePickerTokens {
+    /**
+     * Nested calendar token overrides.
+     */
+    calendar?: {
+        color?: Record<string, Partial<CalendarColorItem>>;
+        day?: Partial<CalendarDay>;
+        rounded?: Record<string, string>;
+    };
+    /**
+     * Color token map overrides.
+     */
+    color?: Record<string, Partial<CalendarColorItem>>;
+    /**
+     * Day chrome overrides.
+     */
+    day?: Partial<CalendarDay>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+}
+export type DateRangePickerProps = MergeHtmlProps<DateRangePickerOwnProps, HTMLAttributes>;

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

@@ -0,0 +1,3 @@
+export { useDateRangePicker } from './composables/useDateRangePicker';
+export type { DateRangePickerClasses, DateRangePickerColorOverrides, DateRangePickerCustomProps, DateRangePickerEmits, DateRangePickerOwnProps, DateRangePickerProps, DateRangePickerRoundedOverrides, DateRangePickerSlots, DateRangePickerTokens, } from './dateRangePicker.types';
+export { default as DateRangePicker } from './DateRangePicker.vue';

package/dist/Components/DateRangePicker/index.js

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

package/dist/Components/DateTimeField/DateTimeField.js

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

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

@@ -0,0 +1,31 @@
+import { DateTimeFieldOwnProps, DateTimeFieldSlots } from './dateTimeField.types';
+type __VLS_Slots = DateTimeFieldSlots;
+type __VLS_Props = DateTimeFieldOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: Date | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    change: (value: Date | null) => any;
+    close: () => any;
+    open: () => any;
+    "update:modelValue": (value: Date | null | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onChange?: ((value: Date | null) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Date | null | undefined) => any) | undefined;
+}>, {
+    showErrorIcon: boolean;
+    clearable: 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;
+    };
+};

package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,146 @@
+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 ee from "../FieldOverlay/FieldOverlay.js";
+import { useDateTimeField as a } from "./composables/useDateTimeField.js";
+import o from "../DateTimePicker/DateTimePicker.js";
+import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
+import { isUndefined as M } from "es-toolkit/compat";
+//#region src/Components/DateTimeField/DateTimeField.vue?vue&type=script&setup=true&lang.ts
+var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ h({
+	inheritAttrs: !1,
+	__name: "DateTimeField",
+	props: /*@__PURE__*/ v({
+		ampm: { type: Boolean },
+		classes: {},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		customProps: {},
+		defaultValue: {},
+		defaultView: {},
+		disableDates: {},
+		disableMonths: {},
+		disableTimes: {},
+		disableYears: {},
+		hideMonths: { type: Boolean },
+		hideOutsideDays: { type: Boolean },
+		hideWeekdays: { type: Boolean },
+		hideYears: { type: Boolean },
+		interval: {},
+		maxDate: {},
+		maxTime: {},
+		minDate: {},
+		minTime: {},
+		overlay: {},
+		showFooter: { type: Boolean },
+		showSeconds: { type: Boolean },
+		startOfWeek: {},
+		timeZone: {},
+		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__*/ v([
+		"change",
+		"clear",
+		"close",
+		"open"
+	], ["update:modelValue"]),
+	setup(h, { emit: v }) {
+		let F = O(h, "modelValue"), I = h, L = v, R = e(), z = C(I.defaultValue ?? null), B = c({
+			set: (e) => {
+				F.value = e, z.value = e;
+			},
+			get: () => M(F.value) ? z.value : F.value
+		}), { open: V, overlay: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimePickerCustomProps: ie } = a(I, B, L);
+		return (e, a) => (S(), u(s, null, [m(D(i), { field: D(U) }, f({
+			default: k(() => [d("div", N, [d("input", x(g(D(W))), null, 16), D(Q) ? (S(), u("span", y({ key: 0 }, D(G), {
+				onClick: a[0] ||= (...e) => D(K) && D(K)(...e),
+				"aria-label": D(R)("Clear"),
+				onKeydown: [a[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), a[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
+			}), [m(D(n), y({
+				icon: "clear",
+				size: D(Z)
+			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : l("", !0)])]),
+			_: 2
+		}, [w(D(t)(D(r), e.$slots), (t) => ({
+			name: t,
+			fn: k((n) => [T(e.$slots, t, x(g(n || {})))])
+		}))]), 1032, ["field"]), m(D(ee), {
+			modelValue: D(V),
+			"onUpdate:modelValue": [a[3] ||= (e) => _(V) ? V.value = e : null, D($)],
+			overlay: D(H),
+			"custom-props": D(re)
+		}, {
+			default: k(() => [m(D(o), {
+				value: D(q),
+				class: b(D(Y)),
+				ampm: D(X).ampm,
+				"show-footer": D(J),
+				"read-only": I.readonly,
+				"max-date": D(X).maxDate,
+				"min-date": D(X).minDate,
+				"max-time": D(X).maxTime,
+				"min-time": D(X).minTime,
+				onChange: D(te),
+				onCancel: D(ne),
+				interval: D(X).interval,
+				"time-zone": D(X).timeZone,
+				"hide-years": D(X).hideYears,
+				color: D(U).merged.value.color,
+				"hide-months": D(X).hideMonths,
+				disabled: D(U).isDisabled.value,
+				"show-seconds": D(X).showSeconds,
+				"default-view": D(X).defaultView,
+				"start-of-week": D(X).startOfWeek,
+				"custom-props": D(ie),
+				rounded: D(U).merged.value.rounded,
+				"disable-dates": D(X).disableDates,
+				"hide-weekdays": D(X).hideWeekdays,
+				"disable-times": D(X).disableTimes,
+				"disable-years": D(X).disableYears,
+				"disable-months": D(X).disableMonths,
+				"hide-outside-days": D(X).hideOutsideDays
+			}, {
+				day: k((t) => [T(e.$slots, "day", x(g(t)), () => [p(E(t.label), 1)])]),
+				_: 3
+			}, 8, /* @__PURE__ */ "value.class.ampm.show-footer.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.default-view.start-of-week.custom-props.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.hide-outside-days".split("."))]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"overlay",
+			"custom-props",
+			"onUpdate:modelValue"
+		])], 64));
+	}
+});
+//#endregion
+export { F as default };