@bridge-ui/vue 0.1.1 → 0.2.0

package/ai/skills/bridge-ui-components/SKILL.md

@@ -38,6 +38,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
 | Date-time range               | `.ai/docs/components/DateTimeRangeField.md`, `DateTimeRangePicker.md` |
 | Color                         | `.ai/docs/components/ColorField.md`, `ColorPicker.md`                 |
 | Spinner / skeleton / progress | `.ai/docs/components/Spinner.md`, `Skeleton.md`, `Progress.md`        |
+| Scroll fade / scrollbar       | `.ai/docs/ScrollUtilities.md`                                         |
 | Index                         | `.ai/docs/README.md`                                                  |
 
 ## Hard rules

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

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

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

@@ -21,11 +21,11 @@ export interface CalendarRangeClasses {
      */
     end?: string;
     /**
-     * Classes for the end-month header (vertical orientation).
+     * Classes for the end-month header.
      */
     endHeader?: string;
     /**
-     * Classes for the shared header.
+     * Classes for the shared header (year, months, and nav).
      */
     header?: string;
     /**
@@ -52,6 +52,10 @@ export interface CalendarRangeClasses {
      * Classes for the start (left / top) date panel wrapper.
      */
     start?: string;
+    /**
+     * Classes for the start-month header (horizontal).
+     */
+    startHeader?: string;
 }
 export interface CalendarRangeCustomProps {
     /**
@@ -67,7 +71,7 @@ export interface CalendarRangeCustomProps {
      */
     end?: HTMLAttributes;
     /**
-     * Props forwarded to the end-month header (vertical orientation).
+     * Props forwarded to the end-month header.
      *
      * @default undefined
      */
@@ -132,6 +136,12 @@ export interface CalendarRangeCustomProps {
      * @default undefined
      */
     start?: HTMLAttributes;
+    /**
+     * Props forwarded to the start-month header (horizontal date view).
+     *
+     * @default undefined
+     */
+    startHeader?: HTMLAttributes;
     /**
      * Props forwarded to the today control.
      *
@@ -254,8 +264,10 @@ export interface CalendarRangeOwnProps {
     /**
      * 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
+     * - `horizontal`: year on the left, nav on the right; month selectors sit inward
+     *   from the header midpoint; divider between the date grids
+     * - `vertical`: year on the left, nav on the right; start month centered in the
+     *   header, end month centered over the bottom panel
      *
      * @default "horizontal"
      */

package/dist/Components/CalendarRange/composables/useCalendarRange.d.ts

@@ -34,13 +34,14 @@ export declare function useCalendarRange(props: MaybeRefOrGetter<CalendarRangeOw
     monthLabel: import('vue').ComputedRef<string>;
     headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     monthsBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    panelsBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    panelsBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        "aria-hidden": boolean;
+    }>>;
     isVertical: import('vue').ComputedRef<boolean>;
     endViewDate: import('vue').ComputedRef<Date>;
     previewDate: import('vue').ComputedRef<Date | null>;
     setViewDate: (next: Date) => void;
     navIconBind: import('vue').ComputedRef<Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined>;
-    monthTarget: import('vue').Ref<"end" | "start", "end" | "start">;
     handleChange: (next: DatePickerModel) => void;
     yearPageSize: number;
     endMonthLabel: import('vue').ComputedRef<string>;
@@ -253,6 +254,7 @@ export declare function useCalendarRange(props: MaybeRefOrGetter<CalendarRangeOw
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
     }>>;
     monthPanelYear: import('vue').ComputedRef<number>;
+    startHeaderBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     todayButtonBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         onClick: () => void;
         type: "button";