@bridge-ui/vue 0.0.7 → 0.0.9

package/dist/Components/Calendar/Calendar.vue_vue_type_script_setup_true_lang.js

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

package/dist/Components/Calendar/calendar.types.d.ts

@@ -0,0 +1,287 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DatePickerModel, DisableDatesInput, MergeHtmlProps, MergeProps, StartOfWeek } from '@bridge-ui/core';
+import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
+import { IconProps } from '../Icon/icon.types';
+export interface CalendarColorOverrides {}
+export interface CalendarRoundedOverrides {}
+export type CalendarView = "date" | "year" | "month";
+export interface CalendarClasses {
+    /**
+     * Classes for the fixed-height date / month / year panel.
+     */
+    body?: string;
+    /**
+     * Classes for the header.
+     */
+    header?: string;
+    /**
+     * Classes for navigation icon buttons.
+     */
+    navButton?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+    /**
+     * Classes for the month / year selector buttons.
+     */
+    selector?: string;
+}
+export interface CalendarCustomProps {
+    /**
+     * Props forwarded to the fixed-height panel that hosts date / month / year.
+     *
+     * @default undefined
+     */
+    body?: HTMLAttributes;
+    /**
+     * Props forwarded to the header.
+     *
+     * @default undefined
+     */
+    header?: 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-month control.
+     *
+     * @default undefined
+     */
+    nextButton?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the previous-month 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 today control.
+     *
+     * @default undefined
+     */
+    todayButton?: ButtonHTMLAttributes;
+}
+export interface CalendarEmits {
+    /**
+     * Emitted when the selection model changes.
+     */
+    change: [value: DatePickerModel];
+    /**
+     * Emitted when the range preview hover date changes.
+     */
+    previewDateChange: [date: Date | null];
+    /**
+     * Emitted when the active panel view changes.
+     */
+    viewChange: [view: CalendarView];
+    /**
+     * Emitted when the displayed month changes.
+     */
+    viewDateChange: [date: Date];
+}
+export interface CalendarSlots {
+    /**
+     * Custom content inside each day button on the date panel.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+}
+export interface CalendarTokens {
+    /**
+     * 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 CalendarOwnProps {
+    /**
+     * Classes for calendar regions.
+     *
+     * @default undefined
+     */
+    classes?: CalendarClasses;
+    /**
+     * Accent color for tiles.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<CalendarColor, CalendarColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: CalendarCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: DatePickerModel;
+    /**
+     * Uncontrolled initial panel view.
+     *
+     * @default "date"
+     */
+    defaultView?: CalendarView;
+    /**
+     * Disables the calendar.
+     *
+     * @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 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 the date panel.
+     *
+     * @default false
+     */
+    hideWeekdays?: boolean;
+    /**
+     * Hides the year selector and year panel.
+     *
+     * @default false
+     */
+    hideYears?: boolean;
+    /**
+     * Latest selectable date.
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+    /**
+     * Earliest selectable date.
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * Allows selecting multiple dates.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Controlled range-preview hover date (shared across panels when needed).
+     *
+     * @default undefined
+     */
+    previewDate?: Date | null;
+    /**
+     * Selects a date range.
+     *
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * Prevents selection (disabled tile styles).
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of tiles and header chrome.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<CalendarRounded, CalendarRoundedOverrides>;
+    /**
+     * First day of the week.
+     *
+     * @default 0
+     */
+    startOfWeek?: number | StartOfWeek;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides.
+     *
+     * @default undefined
+     */
+    tokens?: CalendarTokens;
+    /**
+     * Controlled selection model.
+     *
+     * @default undefined
+     */
+    value?: DatePickerModel;
+    /**
+     * Controlled panel view (`date` / `month` / `year`). Pair with `viewChange` /
+     * `v-model:view`. Without a change listener, the prop is used as the initial
+     * view only.
+     *
+     * @default undefined
+     */
+    view?: CalendarView;
+    /**
+     * Controlled 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 type CalendarProps = MergeHtmlProps<CalendarOwnProps, HTMLAttributes>;