@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,187 @@
+import e from "../Icon/Icon.js";
+import t from "../CalendarDate/CalendarDate.js";
+import ee from "../CalendarMonth/CalendarMonth.js";
+import te from "../CalendarYear/CalendarYear.js";
+import { useCalendarRange as n } from "./composables/useCalendarRange.js";
+import { createBlock as ne, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, renderSlot as m, toDisplayString as h, toValue as re, unref as g, withCtx as _ } from "vue";
+import { cn as ie } from "@bridge-ui/core";
+import { isString as v } from "es-toolkit/compat";
+//#region src/Components/CalendarRange/CalendarRange.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "flex min-w-0 flex-1 items-center justify-start" }, b = { class: "flex min-w-0 flex-1 items-center justify-end" }, x = { class: "flex shrink-0 items-center" }, S = { class: "flex w-full min-w-0 items-stretch" }, C = { class: "flex w-full min-w-0 items-stretch" }, w = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "CalendarRange",
+	props: {
+		classes: {},
+		color: {},
+		customProps: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		disableDates: {},
+		disableMonths: {},
+		disableYears: {},
+		hideMonths: { type: Boolean },
+		hideOutsideDays: { type: Boolean },
+		hideWeekdays: { type: Boolean },
+		hideYears: { type: Boolean },
+		maxDate: {},
+		minDate: {},
+		orientation: {},
+		previewDate: {},
+		readOnly: { type: Boolean },
+		rounded: {},
+		startOfWeek: {},
+		timeZone: {},
+		tokens: {},
+		value: {},
+		viewDate: {}
+	},
+	emits: [
+		"change",
+		"previewDateChange",
+		"viewDateChange"
+	],
+	setup(c, { emit: w }) {
+		let { view: T, value: E, shared: D, merged: O, endBind: ae, rootBind: k, bodyBind: A, viewDate: j, viewYear: M, startBind: N, yearLabel: P, monthLabel: F, headerBind: I, monthsBind: L, panelsBind: R, isVertical: z, endViewDate: B, previewDate: V, navIconBind: H, monthTarget: U, handleChange: W, yearPageSize: oe, endMonthLabel: G, yearPageStart: K, endHeaderBind: q, nextButtonBind: se, pickerFillBind: J, monthPanelYear: ce, todayButtonBind: le, monthPanelValue: ue, yearSelectorBind: de, handleYearSelect: fe, showYearSelector: pe, monthSelectorBind: me, handleMonthSelect: he, showMonthSelector: Y, previousButtonBind: ge, endMonthSelectorBind: X, handleEndViewDateChange: _e, handlePreviewDateChange: Z, handleStartViewDateChange: Q } = n(c, {
+			rounded: "md",
+			startOfWeek: 0,
+			color: "primary",
+			orientation: "horizontal"
+		}, w);
+		function $(e) {
+			let t = re(H)?.class;
+			return ie({
+				"size-3 transition-all duration-200 ease-in-out": !0,
+				[v(t) ? t : ""]: !0,
+				"rotate-180": e
+			});
+		}
+		return (n, c) => (p(), i("div", f(l(g(k))), [a("div", f(l(g(I))), [
+			a("div", y, [g(pe) ? (p(), i("button", f(u({ key: 0 }, g(de))), [a("span", null, h(g(P)), 1), s(g(e), u({
+				size: "2xs",
+				icon: "chevronDown"
+			}, g(H), { class: $(g(T) === "year") }), null, 16, ["class"])], 16)) : r("", !0)]),
+			a("div", f(l(g(L))), [g(Y) ? (p(), i("button", f(u({ key: 0 }, g(me))), [a("span", null, h(g(F)), 1), s(g(e), u({
+				size: "2xs",
+				icon: "chevronDown"
+			}, g(H), { class: $(g(T) === "month" && g(U) === "start") }), null, 16, ["class"])], 16)) : r("", !0), g(Y) && !g(z) ? (p(), i("button", f(u({ key: 1 }, g(X))), [a("span", null, h(g(G)), 1), s(g(e), u({
+				size: "2xs",
+				icon: "chevronDown"
+			}, g(H), { class: $(g(T) === "month" && g(U) === "end") }), null, 16, ["class"])], 16)) : r("", !0)], 16),
+			a("div", b, [a("div", x, [
+				a("button", f(l(g(ge))), [s(g(e), u({
+					size: "sm",
+					icon: "chevronLeft"
+				}, g(H)), null, 16)], 16),
+				a("button", f(l(g(le))), [...c[0] ||= [a("span", { class: "size-2 rounded-full bg-slate-600 dark:bg-slate-300" }, null, -1)]], 16),
+				a("button", f(l(g(se))), [s(g(e), u({
+					size: "sm",
+					icon: "chevronRight"
+				}, g(H)), null, 16)], 16)
+			])])
+		], 16), a("div", f(l(g(A))), [g(T) === "date" ? (p(), i("div", f(u({ key: 0 }, g(R))), [a("div", S, [a("div", f(l(g(N))), [s(t, u(g(D), {
+			range: "",
+			value: g(E),
+			"view-date": g(j),
+			onChange: g(W),
+			"preview-date": g(V),
+			"start-of-week": g(O).startOfWeek,
+			"disable-dates": g(O).disableDates,
+			"disable-years": g(O).disableYears,
+			"hide-weekdays": g(O).hideWeekdays,
+			"disable-months": g(O).disableMonths,
+			"hide-outside-days": g(O).hideOutsideDays,
+			onViewDateChange: g(Q),
+			onPreviewDateChange: g(Z)
+		}), {
+			day: _((e) => [m(n.$slots, "day", f(l(e)), () => [o(h(e.label), 1)])]),
+			_: 3
+		}, 16, [
+			"value",
+			"view-date",
+			"onChange",
+			"preview-date",
+			"start-of-week",
+			"disable-dates",
+			"disable-years",
+			"hide-weekdays",
+			"disable-months",
+			"hide-outside-days",
+			"onViewDateChange",
+			"onPreviewDateChange"
+		])], 16), m(n.$slots, "startAside")]), a("div", C, [a("div", f(l(g(ae))), [g(z) && g(Y) ? (p(), i("div", f(u({ key: 0 }, g(q))), [a("button", f(l(g(X))), [a("span", null, h(g(G)), 1), s(g(e), u({
+			size: "2xs",
+			icon: "chevronDown"
+		}, g(H), { class: $(!1) }), null, 16, ["class"])], 16)], 16)) : r("", !0), s(t, u(g(D), {
+			range: "",
+			value: g(E),
+			"view-date": g(B),
+			onChange: g(W),
+			"preview-date": g(V),
+			"start-of-week": g(O).startOfWeek,
+			"disable-dates": g(O).disableDates,
+			"disable-years": g(O).disableYears,
+			"hide-weekdays": g(O).hideWeekdays,
+			"disable-months": g(O).disableMonths,
+			"hide-outside-days": g(O).hideOutsideDays,
+			onViewDateChange: g(_e),
+			onPreviewDateChange: g(Z)
+		}), {
+			day: _((e) => [m(n.$slots, "day", f(l(e)), () => [o(h(e.label), 1)])]),
+			_: 3
+		}, 16, [
+			"value",
+			"view-date",
+			"onChange",
+			"preview-date",
+			"start-of-week",
+			"disable-dates",
+			"disable-years",
+			"hide-weekdays",
+			"disable-months",
+			"hide-outside-days",
+			"onViewDateChange",
+			"onPreviewDateChange"
+		])], 16), m(n.$slots, "endAside")])], 16)) : g(T) === "month" ? (p(), i("div", {
+			key: 1,
+			class: d(g(J))
+		}, [(p(), ne(ee, u(g(D), {
+			key: g(U),
+			year: g(ce),
+			value: g(ue),
+			onChange: g(he),
+			"disable-months": g(O).disableMonths,
+			classes: {
+				root: "h-full",
+				grid: "h-full auto-rows-fr",
+				month: "min-h-16"
+			}
+		}), null, 16, [
+			"year",
+			"value",
+			"onChange",
+			"disable-months"
+		]))], 2)) : g(T) === "year" ? (p(), i("div", {
+			key: 2,
+			class: d(g(J))
+		}, [s(te, u(g(D), {
+			value: g(M),
+			"page-size": g(oe),
+			"start-year": g(K),
+			onChange: g(fe),
+			"disable-years": g(O).disableYears,
+			classes: {
+				root: "h-full",
+				grid: "h-full auto-rows-fr",
+				year: "min-h-16"
+			}
+		}), null, 16, [
+			"value",
+			"page-size",
+			"start-year",
+			"onChange",
+			"disable-years"
+		])], 2)) : r("", !0)], 16)], 16));
+	}
+});
+//#endregion
+export { w as default };

package/dist/Components/CalendarRange/calendarRange.types.d.ts

@@ -0,0 +1,333 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DateRangeValue, DisableDatesInput, MergeHtmlProps, MergeProps, StartOfWeek } from '@bridge-ui/core';
+import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
+import { IconProps } from '../Icon/icon.types';
+export interface CalendarRangeColorOverrides {}
+export interface CalendarRangeRoundedOverrides {}
+export type CalendarRangeView = "date" | "year" | "month";
+/**
+ * Dual calendar arrangement for date range panels.
+ */
+export type CalendarRangeOrientation = "vertical" | "horizontal";
+export interface CalendarRangeClasses {
+    /**
+     * Classes for the date / month / year body.
+     */
+    body?: string;
+    /**
+     * Classes for the end (right / bottom) date panel wrapper.
+     */
+    end?: string;
+    /**
+     * Classes for the end-month header (vertical orientation).
+     */
+    endHeader?: string;
+    /**
+     * Classes for the shared header.
+     */
+    header?: string;
+    /**
+     * Classes for the centered month selectors group.
+     */
+    months?: string;
+    /**
+     * Classes for navigation icon buttons.
+     */
+    navButton?: string;
+    /**
+     * Classes for the dual date panels row / column.
+     */
+    panels?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+    /**
+     * Classes for month / year selector buttons.
+     */
+    selector?: string;
+    /**
+     * Classes for the start (left / top) date panel wrapper.
+     */
+    start?: string;
+}
+export interface CalendarRangeCustomProps {
+    /**
+     * Props forwarded to the body.
+     *
+     * @default undefined
+     */
+    body?: HTMLAttributes;
+    /**
+     * Props forwarded to the end (right / bottom) panel wrapper.
+     *
+     * @default undefined
+     */
+    end?: HTMLAttributes;
+    /**
+     * Props forwarded to the end-month header (vertical orientation).
+     *
+     * @default undefined
+     */
+    endHeader?: HTMLAttributes;
+    /**
+     * Props forwarded to the header.
+     *
+     * @default undefined
+     */
+    header?: HTMLAttributes;
+    /**
+     * Props forwarded to the centered month selectors group.
+     *
+     * @default undefined
+     */
+    months?: HTMLAttributes;
+    /**
+     * Props forwarded to navigation icon buttons.
+     *
+     * @default undefined
+     */
+    navButton?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to nav `Icon`s.
+     *
+     * @default undefined
+     */
+    navIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the next control.
+     *
+     * @default undefined
+     */
+    nextButton?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the dual date panels row.
+     *
+     * @default undefined
+     */
+    panels?: HTMLAttributes;
+    /**
+     * Props forwarded to the previous control.
+     *
+     * @default undefined
+     */
+    previousButton?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to month / year selector buttons.
+     *
+     * @default undefined
+     */
+    selector?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the start (left / top) panel wrapper.
+     *
+     * @default undefined
+     */
+    start?: HTMLAttributes;
+    /**
+     * Props forwarded to the today control.
+     *
+     * @default undefined
+     */
+    todayButton?: ButtonHTMLAttributes;
+}
+export interface CalendarRangeEmits {
+    /**
+     * Emitted when the range selection changes.
+     */
+    change: [value: null | DateRangeValue];
+    /**
+     * Emitted when the range preview hover date changes.
+     */
+    previewDateChange: [date: Date | null];
+    /**
+     * Emitted when the start (left) displayed month changes.
+     */
+    viewDateChange: [date: Date];
+}
+export interface CalendarRangeTokens {
+    /**
+     * 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 interface CalendarRangeOwnProps {
+    /**
+     * Classes for calendar range regions.
+     *
+     * @default undefined
+     */
+    classes?: CalendarRangeClasses;
+    /**
+     * Accent color for tiles.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<CalendarColor, CalendarRangeColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: CalendarRangeCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | DateRangeValue;
+    /**
+     * Disables the calendar range.
+     *
+     * @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 the shared month selector and month panel.
+     *
+     * @default false
+     */
+    hideMonths?: boolean;
+    /**
+     * Hides days that fall outside the displayed month.
+     *
+     * @default false
+     */
+    hideOutsideDays?: boolean;
+    /**
+     * Hides weekday labels on both date panels.
+     *
+     * @default false
+     */
+    hideWeekdays?: boolean;
+    /**
+     * Hides the shared year selector and year panel.
+     *
+     * @default false
+     */
+    hideYears?: boolean;
+    /**
+     * Latest selectable date.
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+    /**
+     * Earliest selectable date.
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * Dual calendar arrangement.
+     *
+     * - `horizontal`: shared header with year, both months, and nav; panels side by side
+     * - `vertical`: top header with year, start month, and nav; end month header above the bottom panel
+     *
+     * @default "horizontal"
+     */
+    orientation?: CalendarRangeOrientation;
+    /**
+     * Controlled range-preview hover date shared across both panels.
+     *
+     * @default undefined
+     */
+    previewDate?: Date | null;
+    /**
+     * Prevents selection (disabled tile styles).
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of tiles and chrome controls.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<CalendarRounded, CalendarRangeRoundedOverrides>;
+    /**
+     * First day of the week.
+     *
+     * @default 0
+     */
+    startOfWeek?: number | StartOfWeek;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides.
+     *
+     * @default undefined
+     */
+    tokens?: CalendarRangeTokens;
+    /**
+     * Controlled range value.
+     *
+     * @default undefined
+     */
+    value?: null | DateRangeValue;
+    /**
+     * Controlled start (left) displayed month. Pair with `viewDateChange` /
+     * `v-model:viewDate`. Without a change listener, the prop is used as the
+     * initial month only.
+     *
+     * @default undefined
+     */
+    viewDate?: Date;
+}
+export interface CalendarRangeSlots {
+    /**
+     * Custom content inside each day button on both date panels.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+    /**
+     * Content rendered beside the end (right / bottom) date panel.
+     *
+     * @default undefined
+     */
+    endAside?: Slot;
+    /**
+     * Content rendered beside the start (left / top) date panel.
+     *
+     * @default undefined
+     */
+    startAside?: Slot;
+}
+export type CalendarRangeProps = MergeHtmlProps<CalendarRangeOwnProps, HTMLAttributes>;