@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/Components/Calendar/composables/useCalendar.js

@@ -0,0 +1,173 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { useResolveMessage as n } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
+import { computed as o, getCurrentInstance as s, ref as c, toValue as l, useAttrs as u } from "vue";
+import { cn as d, isDateRangeValue as f, mergeBridgeUILayeredClasses as ee, resolveDatePickerMode as te, splitComponentProps as ne } from "@bridge-ui/core";
+import { get as re, isArray as p, isFunction as m, isNil as h, omit as g } from "es-toolkit/compat";
+import { roundedProps as _ } from "@bridge-ui/core/Tokens/Calendar";
+//#region src/Components/Calendar/composables/useCalendar.ts
+var v = /* @__PURE__ */ "view.color.range.value.tokens.classes.maxDate.minDate.rounded.disabled.multiple.readOnly.timeZone.viewDate.hideYears.hideMonths.customProps.defaultView.previewDate.startOfWeek.defaultValue.disableDates.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+function y(e, t, n) {
+	return h(e) ? t.now(n) : f(e) ? e[0] : p(e) ? e[0] ?? t.now(n) : e;
+}
+function b(f, p, b) {
+	let x = u(), S = e(), C = n(), w = t(), T = o(() => ne({
+		bridgeKeys: v,
+		props: {
+			...x,
+			...l(f)
+		}
+	})), { merged: E } = i({
+		libDefaults: p,
+		props: () => T.value.componentProps
+	}), D = o(() => E.value.customProps), O = o(() => g(T.value.inheritedAttrs, [
+		"onChange",
+		"onViewChange",
+		"onViewDateChange",
+		"onPreviewDateChange"
+	])), k = a({
+		props: () => T.value.componentProps,
+		entry: o(() => {})
+	}), A = o(() => w(E.value.timeZone)), j = o(() => te({
+		range: E.value.range,
+		multiple: E.value.multiple
+	})), M = o(() => l(f)), N = o(() => !h(M.value.value)), P = o(() => {
+		let e = s()?.vnode.props ?? {}, t = m(e.onViewChange) || m(e["onUpdate:view"]);
+		return !h(M.value.view) && t;
+	}), F = o(() => {
+		let e = s()?.vnode.props ?? {}, t = m(e.onViewDateChange) || m(e["onUpdate:viewDate"]);
+		return !h(M.value.viewDate) && t;
+	}), I = c(E.value.defaultValue ?? null), L = c(M.value.view ?? E.value.defaultView ?? "date"), R = c(S.value.startOfMonth(h(M.value.viewDate) ? y(M.value.value ?? E.value.defaultValue ?? null, S.value, A.value) : M.value.viewDate, A.value)), z = c(null), B = o(() => N.value ? M.value.value ?? null : I.value), V = o(() => {
+		let e = P.value ? M.value.view ?? "date" : L.value;
+		return e === "year" && E.value.hideYears || e === "month" && E.value.hideMonths ? "date" : e;
+	}), H = o(() => F.value ? M.value.viewDate : R.value), U = o(() => String(S.value.getYear(H.value, A.value))), W = o(() => S.value.getMonthNames(A.value)[S.value.getMonth(H.value, A.value)] ?? ""), G = o(() => S.value.getYear(H.value, A.value)), K = o(() => S.value.getMonth(H.value, A.value)), q = o(() => h(z.value) ? Math.max(1, G.value - 7) : z.value), J = o(() => {
+		let e = ee(_, E.value.tokens?.rounded);
+		return re(e, E.value.rounded);
+	}), Y = (e) => {
+		P.value || (L.value = e), b("viewChange", e);
+	}, X = () => {
+		z.value = Math.max(1, G.value - 7), Y("year");
+	}, Z = (e) => {
+		let t = S.value.startOfMonth(e, A.value);
+		F.value || (R.value = t), b("viewDateChange", t);
+	}, ie = (e) => {
+		N.value || (I.value = e), b("change", e);
+	}, ae = () => {
+		if (V.value === "year") {
+			z.value = Math.max(1, q.value - 15);
+			return;
+		}
+		Z(S.value.addMonths(H.value, -1, A.value));
+	}, oe = () => {
+		if (V.value === "year") {
+			z.value = q.value + 15;
+			return;
+		}
+		Z(S.value.addMonths(H.value, 1, A.value));
+	}, se = () => {
+		let e = S.value.startOfMonth(S.value.now(A.value), A.value);
+		z.value = null, Z(e), Y("date");
+	}, ce = (e) => {
+		z.value = null, Z(S.value.setYear(H.value, e, A.value)), Y(E.value.hideMonths ? "date" : "month");
+	}, le = (e) => {
+		Z(S.value.setMonth(H.value, e, A.value)), Y("date");
+	}, ue = o(() => ({
+		color: E.value.color,
+		tokens: E.value.tokens,
+		rounded: E.value.rounded,
+		maxDate: E.value.maxDate,
+		minDate: E.value.minDate,
+		disabled: E.value.disabled,
+		readOnly: E.value.readOnly,
+		timeZone: E.value.timeZone
+	})), de = o(() => r(D.value?.root, O.value, d({
+		"flex w-full min-w-72 flex-col overflow-hidden": !0,
+		[k.value.root ?? ""]: !0
+	}))), fe = o(() => r(D.value?.header, {}, d({
+		"flex items-center justify-between p-2.5": !0,
+		[k.value.header ?? ""]: !0
+	}))), pe = o(() => r(D.value?.body, {}, d({
+		"flex flex-col p-2.5": !0,
+		[k.value.body ?? ""]: !0
+	}))), Q = o(() => r(D.value?.selector, {
+		type: "button",
+		disabled: E.value.disabled
+	}, d({
+		"inline-flex cursor-pointer items-center gap-x-2 px-1.5 py-1 text-sm font-medium text-dark-600 hover:bg-dark-100 focus:outline-none disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
+		[J.value ?? ""]: !0,
+		[k.value.selector ?? ""]: !0
+	}))), $ = o(() => r(D.value?.navButton, {
+		type: "button",
+		disabled: E.value.disabled
+	}, d({
+		"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center text-dark-600 hover:bg-dark-100 disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
+		[J.value ?? ""]: !0,
+		[k.value.navButton ?? ""]: !0
+	}))), me = o(() => V.value === "year" ? C("Previous years") : C("Previous month")), he = o(() => V.value === "year" ? C("Next years") : C("Next month")), ge = o(() => r(D.value?.previousButton, {
+		...$.value,
+		onClick: ae,
+		type: "button",
+		disabled: E.value.disabled,
+		"aria-label": me.value
+	}, d({ [k.value.navButton ?? ""]: !0 }))), _e = o(() => r(D.value?.nextButton, {
+		...$.value,
+		onClick: oe,
+		type: "button",
+		disabled: E.value.disabled,
+		"aria-label": he.value
+	}, d({ [k.value.navButton ?? ""]: !0 }))), ve = o(() => r(D.value?.todayButton, {
+		onClick: se,
+		type: "button",
+		disabled: E.value.disabled,
+		"aria-label": C("Today")
+	}, d({
+		"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center hover:bg-dark-100 disabled:cursor-not-allowed dark:hover:bg-dark-800": !0,
+		[J.value ?? ""]: !0,
+		[k.value.navButton ?? ""]: !0
+	}))), ye = o(() => r(D.value?.selector, void 0, {
+		...Q.value,
+		onClick: X,
+		type: "button",
+		"aria-label": C("Select year"),
+		disabled: E.value.disabled || E.value.hideYears
+	})), be = o(() => r(D.value?.selector, void 0, {
+		...Q.value,
+		type: "button",
+		onClick: () => Y("month"),
+		"aria-label": C("Select month"),
+		disabled: E.value.disabled || E.value.hideMonths
+	})), xe = o(() => !E.value.hideYears), Se = o(() => !E.value.hideMonths);
+	return {
+		view: V,
+		mode: j,
+		value: B,
+		merged: E,
+		shared: ue,
+		context: A,
+		showNav: o(() => !0),
+		rootBind: de,
+		viewDate: H,
+		viewYear: G,
+		bodyBind: pe,
+		viewMonth: K,
+		yearLabel: U,
+		monthLabel: W,
+		headerBind: fe,
+		setViewDate: Z,
+		navIconBind: o(() => D.value?.navIcon),
+		handleChange: ie,
+		yearPageSize: 15,
+		nextButtonBind: _e,
+		todayButtonBind: ve,
+		yearSelectorBind: ye,
+		handleYearSelect: ce,
+		showYearSelector: xe,
+		monthSelectorBind: be,
+		handleMonthSelect: le,
+		showMonthSelector: Se,
+		previousButtonBind: ge,
+		yearPageStart: q
+	};
+}
+//#endregion
+export { b as useCalendar };

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

@@ -0,0 +1,3 @@
+export type { CalendarClasses, CalendarColorOverrides, CalendarCustomProps, CalendarEmits, CalendarOwnProps, CalendarProps, CalendarRoundedOverrides, CalendarSlots, CalendarTokens, CalendarView, } from './calendar.types';
+export { default as Calendar } from './Calendar.vue';
+export { useCalendar } from './composables/useCalendar';

package/dist/Components/Calendar/index.js

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

package/dist/Components/CalendarDate/CalendarDate.js

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

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

@@ -0,0 +1,19 @@
+import { CalendarDateOwnProps, CalendarDateSlots } from './calendarDate.types';
+type __VLS_Slots = CalendarDateSlots;
+declare const __VLS_base: import('vue').DefineComponent<CalendarDateOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: import('@bridge-ui/core').DatePickerModel) => any;
+    viewDateChange: (date: Date) => any;
+    previewDateChange: (date: Date | null) => any;
+}, string, import('vue').PublicProps, Readonly<CalendarDateOwnProps> & Readonly<{
+    onChange?: ((value: import('@bridge-ui/core').DatePickerModel) => any) | undefined;
+    onViewDateChange?: ((date: Date) => any) | undefined;
+    onPreviewDateChange?: ((date: Date | null) => any) | undefined;
+}>, {}, {}, {}, {}, 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/CalendarDate/CalendarDate.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,56 @@
+import { useCalendarDate as e } from "./composables/useCalendarDate.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, guardReactiveProps as s, mergeProps as c, normalizeProps as l, openBlock as u, renderList as d, renderSlot as f, toDisplayString as p, unref as m } from "vue";
+//#region src/Components/CalendarDate/CalendarDate.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "h-8 w-full"
+}, g = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "CalendarDate",
+	props: {
+		classes: {},
+		color: {},
+		customProps: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		disableDates: {},
+		disableMonths: {},
+		disableYears: {},
+		hideOutsideDays: { type: Boolean },
+		hideWeekdays: { type: Boolean },
+		maxDate: {},
+		minDate: {},
+		multiple: { type: Boolean },
+		previewDate: {},
+		range: { type: Boolean },
+		readOnly: { type: Boolean },
+		rounded: {},
+		startOfWeek: {},
+		timeZone: {},
+		tokens: {},
+		value: {},
+		viewDate: {}
+	},
+	emits: [
+		"change",
+		"previewDateChange",
+		"viewDateChange"
+	],
+	setup(o, { emit: g }) {
+		let { days: _, rootBind: v, gridBind: y, weekdays: b, getDayBind: x, hideWeekdays: S, getWeekdayBind: C, hideOutsideDays: w } = e(o, {
+			rounded: "sm",
+			startOfWeek: 0,
+			color: "primary"
+		}, g);
+		function T(e) {
+			return `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`;
+		}
+		return (e, o) => (u(), r("div", l(s(m(v))), [i("div", l(s(m(y))), [m(S) ? n("", !0) : (u(!0), r(t, { key: 0 }, d(m(b), (e, t) => (u(), r("span", c({ key: `${e}-${t}` }, { ref_for: !0 }, m(C)(e)), p(e), 17))), 128)), (u(!0), r(t, null, d(m(_), (n) => (u(), r(t, { key: `${T(n.date)}-${n.label}` }, [m(w) && n.outside ? (u(), r("span", h)) : (u(), r("button", c({
+			key: 1,
+			ref_for: !0
+		}, m(x)(n)), [f(e.$slots, "day", c({ ref_for: !0 }, n), () => [a(p(n.label), 1)])], 16))], 64))), 128))], 16)], 16));
+	}
+});
+//#endregion
+export { g as default };

package/dist/Components/CalendarDate/calendarDate.types.d.ts

@@ -0,0 +1,257 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarDayInteractionState, CalendarRounded, DatePickerModel, DisableDatesInput, MergeHtmlProps, MergeProps, StartOfWeek } from '@bridge-ui/core';
+export interface CalendarDateColorOverrides {}
+export interface CalendarDateRoundedOverrides {}
+export interface CalendarDateClasses {
+    /**
+     * Classes for each day button.
+     */
+    day?: string;
+    /**
+     * Classes for the days grid.
+     */
+    grid?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+    /**
+     * Classes for each weekday label.
+     */
+    weekday?: string;
+}
+export interface CalendarDateCustomProps {
+    /**
+     * Props forwarded to each day button.
+     *
+     * @default undefined
+     */
+    day?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the days grid.
+     *
+     * @default undefined
+     */
+    grid?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to each weekday label.
+     *
+     * @default undefined
+     */
+    weekday?: HTMLAttributes;
+}
+/**
+ * Context passed to the `day` slot for each calendar cell.
+ */
+export interface CalendarDateDayCell {
+    /**
+     * Calendar date for this cell.
+     */
+    date: Date;
+    /**
+     * Whether the cell cannot be selected.
+     */
+    disabled: boolean;
+    /**
+     * Visible day-of-month label.
+     */
+    label: string;
+    /**
+     * Whether the cell is outside the displayed month.
+     */
+    outside: boolean;
+    /**
+     * Whether the cell is in an incomplete range preview.
+     */
+    preview: boolean;
+    /**
+     * Whether the cell is part of the selection model.
+     */
+    selected: boolean;
+    /**
+     * Resolved interactive visual state.
+     */
+    state: CalendarDayInteractionState;
+    /**
+     * Whether the cell is today.
+     */
+    today: boolean;
+}
+export interface CalendarDateEmits {
+    /**
+     * Emitted when the selection model changes.
+     */
+    change: [value: DatePickerModel];
+    /**
+     * Emitted when the range-preview hover date changes.
+     */
+    previewDateChange: [date: Date | null];
+    /**
+     * Emitted when the displayed month should change.
+     */
+    viewDateChange: [date: Date];
+}
+export interface CalendarDateSlots {
+    /**
+     * Custom content inside each day button. The button chrome stays managed.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+}
+export interface CalendarDateTokens {
+    /**
+     * Color token map overrides (`base` / `hover` / `selected` / `disabled`).
+     */
+    color?: Record<string, Partial<CalendarColorItem>>;
+    /**
+     * Day chrome overrides (`outside` / `today` / `weekday`).
+     */
+    day?: Partial<CalendarDay>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+}
+export interface CalendarDateOwnProps {
+    /**
+     * Classes for calendar regions.
+     *
+     * @default undefined
+     */
+    classes?: CalendarDateClasses;
+    /**
+     * Accent color for day tiles.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<CalendarColor, CalendarDateColorOverrides>;
+    /**
+     * Extra props for internal parts (`root`, `grid`, `day`, `weekday`).
+     *
+     * @default undefined
+     */
+    customProps?: CalendarDateCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: DatePickerModel;
+    /**
+     * Disables the entire calendar (no selection).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Dates that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableDates?: DisableDatesInput;
+    /**
+     * Month indexes (`0`–`11`) that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableMonths?: number[];
+    /**
+     * Years that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableYears?: number[];
+    /**
+     * Hides days that fall outside the displayed month.
+     *
+     * @default false
+     */
+    hideOutsideDays?: boolean;
+    /**
+     * Hides the weekday header row.
+     *
+     * @default false
+     */
+    hideWeekdays?: boolean;
+    /**
+     * Latest selectable date (inclusive).
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+    /**
+     * Earliest selectable date (inclusive).
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * Allows selecting multiple dates.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Hovered date used for incomplete-range preview.
+     *
+     * @default undefined
+     */
+    previewDate?: Date | null;
+    /**
+     * Selects a start/end range instead of a single date.
+     * Wins over `multiple` when both are set.
+     *
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * Prevents selection while keeping tiles visible (uses disabled styles).
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of day tiles.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<CalendarRounded, CalendarDateRoundedOverrides>;
+    /**
+     * First day of the week (`0` = Sunday … `6` = Saturday).
+     *
+     * @default 0
+     */
+    startOfWeek?: number | StartOfWeek;
+    /**
+     * IANA time zone (falls back to Bridge `global.timeZone`).
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides (usually passed from `DatePicker` / `DateField` registry).
+     *
+     * @default undefined
+     */
+    tokens?: CalendarDateTokens;
+    /**
+     * Controlled selection model.
+     *
+     * @default undefined
+     */
+    value?: DatePickerModel;
+    /**
+     * Month currently displayed in the grid.
+     *
+     * @default start of month for `value` / today
+     */
+    viewDate?: Date;
+}
+export type CalendarDateProps = MergeHtmlProps<CalendarDateOwnProps, HTMLAttributes>;

package/dist/Components/CalendarDate/composables/useCalendarDate.d.ts

@@ -0,0 +1,39 @@
+import { MaybeRefOrGetter } from 'vue';
+import { DateAdapterContext, DatePickerModel, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { CalendarDateDayCell, CalendarDateEmits, CalendarDateOwnProps } from '../calendarDate.types';
+type CalendarDateLibDefaults = LibDefaultsShape<CalendarDateOwnProps, "color" | "rounded" | "startOfWeek">;
+type CalendarDateMerged = MergeLibDefaults<CalendarDateOwnProps, CalendarDateLibDefaults>;
+export declare function useCalendarDate(props: MaybeRefOrGetter<CalendarDateOwnProps>, libDefaults: CalendarDateLibDefaults, emit: {
+    (event: "viewDateChange", date: Date): void;
+    (event: "change", value: DatePickerModel): void;
+    (event: "previewDateChange", date: Date | null): void;
+}): {
+    days: import('vue').ComputedRef<CalendarDateDayCell[]>;
+    mode: import('vue').ComputedRef<import('@bridge-ui/core').DatePickerMode>;
+    value: import('vue').ComputedRef<DatePickerModel>;
+    merged: import('vue').ComputedRef<CalendarDateMerged>;
+    context: import('vue').ComputedRef<DateAdapterContext>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarDateOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "previewDate" | "startOfWeek" | "timeZone" | "viewDate">>>>;
+    gridBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+        onMouseleave: () => void;
+    }>>;
+    weekdays: import('vue').ComputedRef<string[]>;
+    viewDate: import('vue').ComputedRef<Date>;
+    selectDay: (date: Date) => void;
+    getDayBind: (cell: CalendarDateDayCell) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+        type: "button";
+        disabled: boolean;
+        "aria-pressed": boolean;
+        onClick: () => void;
+        "data-preview": string | undefined;
+        "aria-current": "date" | undefined;
+        onMouseenter: () => void;
+    }>;
+    previewDate: import('vue').ComputedRef<Date | null | undefined>;
+    hideWeekdays: import('vue').ComputedRef<boolean>;
+    getWeekdayBind: (_label: string) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>;
+    hideOutsideDays: import('vue').ComputedRef<boolean>;
+};
+export type UseCalendarDateEmit = CalendarDateEmits;
+export {};