@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/CalendarDate/composables/useCalendarDate.js

@@ -0,0 +1,181 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, getCurrentInstance as o, ref as s, toValue as c, useAttrs as l } from "vue";
+import { applyDateSelection as ee, cn as u, isDateDisabled as d, isDateInRangePreview as f, isDateRangeValue as p, isDateSelected as te, mergeBridgeUILayeredClasses as m, resolveCalendarDayInteractionState as h, resolveDatePickerMode as g, resolveStartOfWeek as _, splitComponentProps as v } from "@bridge-ui/core";
+import { get as y, isFunction as b, isNil as x, omit as S } from "es-toolkit/compat";
+import { colorProps as C, dayProps as ne, roundedProps as w } from "@bridge-ui/core/Tokens/Calendar";
+//#region src/Components/CalendarDate/composables/useCalendarDate.ts
+var T = [
+	"color",
+	"range",
+	"value",
+	"tokens",
+	"classes",
+	"maxDate",
+	"minDate",
+	"rounded",
+	"disabled",
+	"multiple",
+	"readOnly",
+	"timeZone",
+	"viewDate",
+	"customProps",
+	"previewDate",
+	"startOfWeek",
+	"defaultValue",
+	"disableDates",
+	"disableYears",
+	"hideWeekdays",
+	"disableMonths",
+	"hideOutsideDays"
+];
+function E(E, D, O) {
+	let k = l(), A = e(), re = t(), j = a(() => v({
+		bridgeKeys: T,
+		props: {
+			...k,
+			...c(E)
+		}
+	})), { merged: M } = r({
+		libDefaults: D,
+		props: () => j.value.componentProps
+	}), N = a(() => M.value.customProps), P = a(() => S(j.value.inheritedAttrs, [
+		"onChange",
+		"onViewDateChange",
+		"onPreviewDateChange"
+	])), F = i({
+		props: () => j.value.componentProps,
+		entry: a(() => {})
+	}), I = a(() => re(M.value.timeZone)), L = a(() => g({
+		range: M.value.range,
+		multiple: M.value.multiple
+	})), R = a(() => c(E)), z = a(() => !x(R.value.value)), B = a(() => !x(R.value.previewDate)), V = a(() => {
+		let e = o()?.vnode.props ?? {}, t = b(e.onViewDateChange) || b(e["onUpdate:viewDate"]);
+		return !x(R.value.viewDate) && t;
+	}), H = s(M.value.defaultValue ?? null), U = s(null), W = s(R.value.viewDate ?? M.value.viewDate ?? A.value.startOfMonth(A.value.now(I.value), I.value)), G = a(() => z.value ? R.value.value ?? null : H.value), K = a(() => B.value ? R.value.previewDate : U.value), q = a(() => V.value ? R.value.viewDate : W.value), J = a(() => _(M.value.startOfWeek)), Y = a(() => m(C, M.value.tokens?.color)), X = a(() => m(ne, M.value.tokens?.day)), ie = a(() => {
+		let e = m(w, M.value.tokens?.rounded);
+		return y(e, M.value.rounded);
+	}), ae = a(() => y(Y.value, M.value.color)), oe = a(() => {
+		let e = A.value.getWeekdayNames(I.value), t = J.value;
+		return Array.from({ length: 7 }, (n, r) => e[(t + r) % 7] ?? "");
+	}), se = a(() => {
+		let e = A.value.getCalendarDays(q.value, J.value, I.value), t = A.value.now(I.value);
+		return e.map((e) => {
+			let n = !!M.value.disabled || d(e, {
+				adapter: A.value,
+				context: I.value,
+				maxDate: M.value.maxDate,
+				minDate: M.value.minDate,
+				disableDates: M.value.disableDates,
+				disableYears: M.value.disableYears,
+				disableMonths: M.value.disableMonths
+			}), r = te({
+				date: e,
+				mode: L.value,
+				value: G.value,
+				adapter: A.value,
+				context: I.value
+			}), i = L.value === "range" && f({
+				date: e,
+				value: G.value,
+				adapter: A.value,
+				context: I.value,
+				previewDate: K.value
+			});
+			return {
+				date: e,
+				state: h({
+					disabled: n,
+					selected: r,
+					readOnly: M.value.readOnly
+				}),
+				preview: i,
+				selected: r,
+				disabled: n || !!M.value.readOnly,
+				label: String(A.value.getDate(e, I.value)),
+				today: A.value.isSameDay(e, t, I.value),
+				outside: !A.value.isSameMonth(e, q.value, I.value)
+			};
+		});
+	}), Z = (e) => {
+		if (M.value.disabled || M.value.readOnly || d(e, {
+			adapter: A.value,
+			context: I.value,
+			maxDate: M.value.maxDate,
+			minDate: M.value.minDate,
+			disableDates: M.value.disableDates,
+			disableYears: M.value.disableYears,
+			disableMonths: M.value.disableMonths
+		})) return;
+		let t = ee({
+			next: e,
+			mode: L.value,
+			value: G.value,
+			adapter: A.value,
+			context: I.value
+		});
+		z.value || (H.value = t), O("change", t), L.value === "range" && Q(null);
+	}, Q = (e) => {
+		B.value || (U.value = e), O("previewDateChange", e);
+	}, $ = a(() => {
+		if (L.value !== "range" || !p(G.value)) return !1;
+		let [e, t] = G.value;
+		return A.value.isSameDay(e, t, I.value);
+	});
+	return {
+		days: se,
+		mode: L,
+		value: G,
+		merged: M,
+		context: I,
+		rootBind: a(() => n(N.value?.root, P.value, u({
+			"flex flex-col": !0,
+			[F.value.root ?? ""]: !0
+		}))),
+		gridBind: a(() => n(N.value?.grid, {
+			role: "grid",
+			onMouseleave: () => {
+				$.value && Q(null);
+			}
+		}, u({
+			"grid grid-cols-7 gap-1": !0,
+			[F.value.grid ?? ""]: !0
+		}))),
+		weekdays: oe,
+		viewDate: q,
+		selectDay: Z,
+		getDayBind: (e) => {
+			let t = ae.value;
+			return n(N.value?.day, {
+				type: "button",
+				disabled: e.disabled,
+				"aria-pressed": e.selected,
+				onClick: () => Z(e.date),
+				"data-preview": e.preview ? "" : void 0,
+				"aria-current": e.today ? "date" : void 0,
+				onMouseenter: () => {
+					$.value && !e.disabled && Q(e.date);
+				}
+			}, u({
+				"relative flex h-8 w-full cursor-pointer items-center justify-center text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50": !0,
+				[ie.value ?? ""]: !0,
+				[t?.base ?? ""]: e.state === "base",
+				[t?.hover ?? ""]: e.state === "base",
+				[t?.selected ?? ""]: e.state === "selected",
+				[t?.disabled ?? ""]: e.state === "disabled",
+				[X.value.outside ?? ""]: e.outside && e.state !== "selected",
+				[X.value.today ?? ""]: e.today && e.state !== "selected" && e.state !== "disabled",
+				[F.value.day ?? ""]: !0
+			}));
+		},
+		previewDate: K,
+		hideWeekdays: a(() => !!M.value.hideWeekdays),
+		getWeekdayBind: (e) => n(N.value?.weekday, {}, u({
+			[X.value.weekday ?? ""]: !0,
+			[F.value.weekday ?? ""]: !0
+		})),
+		hideOutsideDays: a(() => !!M.value.hideOutsideDays)
+	};
+}
+//#endregion
+export { E as useCalendarDate };

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

@@ -0,0 +1,3 @@
+export type { CalendarDateClasses, CalendarDateColorOverrides, CalendarDateCustomProps, CalendarDateDayCell, CalendarDateEmits, CalendarDateOwnProps, CalendarDateProps, CalendarDateRoundedOverrides, CalendarDateSlots, CalendarDateTokens, } from './calendarDate.types';
+export { default as CalendarDate } from './CalendarDate.vue';
+export { useCalendarDate } from './composables/useCalendarDate';

package/dist/Components/CalendarDate/index.js

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

package/dist/Components/CalendarMonth/CalendarMonth.js

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

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

@@ -0,0 +1,8 @@
+import { CalendarMonthOwnProps } from './calendarMonth.types';
+declare const __VLS_export: import('vue').DefineComponent<CalendarMonthOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (month: number) => any;
+}, string, import('vue').PublicProps, Readonly<CalendarMonthOwnProps> & Readonly<{
+    onChange?: ((month: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/CalendarMonth/CalendarMonth.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { useCalendarMonth as e } from "./composables/useCalendarMonth.js";
+import { Fragment as t, createElementBlock as n, createElementVNode as r, defineComponent as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, openBlock as c, renderList as l, toDisplayString as u, unref as d } from "vue";
+//#region src/Components/CalendarMonth/CalendarMonth.vue?vue&type=script&setup=true&lang.ts
+var f = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	__name: "CalendarMonth",
+	props: {
+		classes: {},
+		color: {},
+		customProps: {},
+		disabled: { type: Boolean },
+		disableMonths: {},
+		maxDate: {},
+		minDate: {},
+		readOnly: { type: Boolean },
+		rounded: {},
+		timeZone: {},
+		tokens: {},
+		value: {},
+		year: {}
+	},
+	emits: ["change"],
+	setup(i, { emit: f }) {
+		let { months: p, rootBind: m, gridBind: h, getMonthBind: g } = e(i, {
+			rounded: "md",
+			color: "primary"
+		}, f);
+		return (e, i) => (c(), n("div", s(a(d(m))), [r("div", s(a(d(h))), [(c(!0), n(t, null, l(d(p), (e) => (c(), n("button", o({ key: e.month }, { ref_for: !0 }, d(g)(e)), u(e.label), 17))), 128))], 16)], 16));
+	}
+});
+//#endregion
+export { f as default };

package/dist/Components/CalendarMonth/calendarMonth.types.d.ts

@@ -0,0 +1,135 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from 'vue';
+import { CalendarColor, CalendarColorItem, CalendarRounded, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+export interface CalendarMonthColorOverrides {}
+export interface CalendarMonthRoundedOverrides {}
+export interface CalendarMonthClasses {
+    /**
+     * Classes for the months grid.
+     */
+    grid?: string;
+    /**
+     * Classes for each month button.
+     */
+    month?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+}
+export interface CalendarMonthCustomProps {
+    /**
+     * Props forwarded to the months grid.
+     *
+     * @default undefined
+     */
+    grid?: HTMLAttributes;
+    /**
+     * Props forwarded to each month button.
+     *
+     * @default undefined
+     */
+    month?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface CalendarMonthEmits {
+    /**
+     * Emitted when a month is selected (`0`–`11`).
+     */
+    change: [month: number];
+}
+export interface CalendarMonthTokens {
+    /**
+     * Color token map overrides.
+     */
+    color?: Record<string, Partial<CalendarColorItem>>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+}
+export interface CalendarMonthOwnProps {
+    /**
+     * Classes for calendar regions.
+     *
+     * @default undefined
+     */
+    classes?: CalendarMonthClasses;
+    /**
+     * Accent color for month tiles.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<CalendarColor, CalendarMonthColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: CalendarMonthCustomProps;
+    /**
+     * Disables the entire month grid.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Month indexes (`0`–`11`) that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableMonths?: number[];
+    /**
+     * Latest selectable date (bounds month availability for `year`).
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+    /**
+     * Earliest selectable date (bounds month availability for `year`).
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * Prevents selection while keeping tiles visible.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of month tiles.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<CalendarRounded, CalendarMonthRoundedOverrides>;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides.
+     *
+     * @default undefined
+     */
+    tokens?: CalendarMonthTokens;
+    /**
+     * Selected month (`0`–`11`).
+     *
+     * @default undefined
+     */
+    value?: number;
+    /**
+     * Year context for min/max month disabling.
+     *
+     * @default current year
+     */
+    year?: number;
+}
+export type CalendarMonthProps = MergeHtmlProps<CalendarMonthOwnProps, HTMLAttributes>;

package/dist/Components/CalendarMonth/composables/useCalendarMonth.d.ts

@@ -0,0 +1,29 @@
+import { MaybeRefOrGetter } from 'vue';
+import { resolveCalendarDayInteractionState, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { CalendarMonthOwnProps } from '../calendarMonth.types';
+type CalendarMonthLibDefaults = LibDefaultsShape<CalendarMonthOwnProps, "color" | "rounded">;
+type CalendarMonthMerged = MergeLibDefaults<CalendarMonthOwnProps, CalendarMonthLibDefaults>;
+export type CalendarMonthCell = {
+    disabled: boolean;
+    label: string;
+    month: number;
+    selected: boolean;
+    state: ReturnType<typeof resolveCalendarDayInteractionState>;
+};
+export declare function useCalendarMonth(props: MaybeRefOrGetter<CalendarMonthOwnProps>, libDefaults: CalendarMonthLibDefaults, emit: (event: "change", month: number) => void): {
+    year: import('vue').ComputedRef<number>;
+    merged: import('vue').ComputedRef<CalendarMonthMerged>;
+    months: import('vue').ComputedRef<CalendarMonthCell[]>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarMonthOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "disableMonths" | "maxDate" | "minDate" | "timeZone" | "year">>>>;
+    gridBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+    }>>;
+    selectMonth: (month: number) => void;
+    getMonthBind: (cell: CalendarMonthCell) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+        type: "button";
+        disabled: boolean;
+        "aria-pressed": boolean;
+        onClick: () => void;
+    }>;
+};
+export {};

package/dist/Components/CalendarMonth/composables/useCalendarMonth.js

@@ -0,0 +1,104 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, toValue as o, useAttrs as s } from "vue";
+import { cn as c, isMonthDisabled as l, mergeBridgeUILayeredClasses as u, resolveCalendarDayInteractionState as d, splitComponentProps as f } from "@bridge-ui/core";
+import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
+import { colorProps as g, roundedProps as _ } from "@bridge-ui/core/Tokens/Calendar";
+//#region src/Components/CalendarMonth/composables/useCalendarMonth.ts
+var v = [
+	"year",
+	"color",
+	"value",
+	"tokens",
+	"classes",
+	"maxDate",
+	"minDate",
+	"rounded",
+	"disabled",
+	"readOnly",
+	"timeZone",
+	"customProps",
+	"disableMonths"
+];
+function y(y, b, x) {
+	let S = s(), C = e(), w = t(), T = a(() => f({
+		bridgeKeys: v,
+		props: {
+			...S,
+			...o(y)
+		}
+	})), { merged: E } = r({
+		libDefaults: b,
+		props: () => T.value.componentProps
+	}), D = a(() => E.value.customProps), O = a(() => h(T.value.inheritedAttrs, ["onChange"])), k = i({
+		props: () => T.value.componentProps,
+		entry: a(() => {})
+	}), A = a(() => w(E.value.timeZone)), j = a(() => E.value.year ?? C.value.getYear(C.value.now(A.value), A.value)), M = a(() => u(g, E.value.tokens?.color)), N = a(() => {
+		let e = u(_, E.value.tokens?.rounded);
+		return p(e, E.value.rounded);
+	}), P = a(() => p(M.value, E.value.color)), F = a(() => C.value.getMonthNames(A.value).map((e, t) => {
+		let n = !!E.value.disabled || l({
+			month: t,
+			year: j.value,
+			adapter: C.value,
+			context: A.value,
+			maxDate: E.value.maxDate,
+			minDate: E.value.minDate,
+			disableMonths: E.value.disableMonths
+		}), r = !m(E.value.value) && E.value.value === t;
+		return {
+			label: e,
+			month: t,
+			state: d({
+				disabled: n,
+				selected: r,
+				readOnly: E.value.readOnly
+			}),
+			selected: r,
+			disabled: n || !!E.value.readOnly
+		};
+	})), I = (e) => {
+		E.value.disabled || E.value.readOnly || l({
+			month: e,
+			year: j.value,
+			adapter: C.value,
+			context: A.value,
+			maxDate: E.value.maxDate,
+			minDate: E.value.minDate,
+			disableMonths: E.value.disableMonths
+		}) || x("change", e);
+	};
+	return {
+		year: j,
+		merged: E,
+		months: F,
+		rootBind: a(() => n(D.value?.root, O.value, c({
+			"flex flex-col": !0,
+			[k.value.root ?? ""]: !0
+		}))),
+		gridBind: a(() => n(D.value?.grid, { role: "grid" }, c({
+			"grid grid-cols-3 gap-2": !0,
+			[k.value.grid ?? ""]: !0
+		}))),
+		selectMonth: I,
+		getMonthBind: (e) => {
+			let t = P.value;
+			return n(D.value?.month, {
+				type: "button",
+				disabled: e.disabled,
+				"aria-pressed": e.selected,
+				onClick: () => I(e.month)
+			}, c({
+				"cursor-pointer px-2 py-4 text-xs uppercase transition-all duration-150 ease-in-out outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed": !0,
+				[N.value ?? ""]: !0,
+				[t?.soft ?? ""]: e.state === "base",
+				[t?.hover ?? ""]: e.state === "base",
+				[t?.selected ?? ""]: e.state === "selected",
+				[t?.disabled ?? ""]: e.state === "disabled",
+				[k.value.month ?? ""]: !0
+			}));
+		}
+	};
+}
+//#endregion
+export { y as useCalendarMonth };

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

@@ -0,0 +1,3 @@
+export type { CalendarMonthClasses, CalendarMonthColorOverrides, CalendarMonthCustomProps, CalendarMonthEmits, CalendarMonthOwnProps, CalendarMonthProps, CalendarMonthRoundedOverrides, CalendarMonthTokens, } from './calendarMonth.types';
+export { default as CalendarMonth } from './CalendarMonth.vue';
+export { useCalendarMonth, type CalendarMonthCell, } from './composables/useCalendarMonth';

package/dist/Components/CalendarMonth/index.js

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

package/dist/Components/CalendarRange/CalendarRange.js

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

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

@@ -0,0 +1,19 @@
+import { CalendarRangeOwnProps, CalendarRangeSlots } from './calendarRange.types';
+type __VLS_Slots = CalendarRangeSlots;
+declare const __VLS_base: import('vue').DefineComponent<CalendarRangeOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: import('@bridge-ui/core').DateRangeValue | null) => any;
+    viewDateChange: (date: Date) => any;
+    previewDateChange: (date: Date | null) => any;
+}, string, import('vue').PublicProps, Readonly<CalendarRangeOwnProps> & Readonly<{
+    onChange?: ((value: import('@bridge-ui/core').DateRangeValue | null) => 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;
+    };
+};