bitboss-ui 3.0.0-beta.4 → 3.0.0-beta.41

package/dist/components/BbDatePicker/types.d.ts

@@ -1,11 +1,64 @@
 import { ElementOrComponentRef, ElementOrComponentRefOrSelector } from '../../types/CommonProps';
 import { DatePickerType } from '../../types/DatePickerType';
+import { PtMap, PtValue } from '../../types/passthrough';
 import { Placement } from '../../types/Placement';
 import { BbOffCanvasProps } from '../BbOffCanvas/types';
-import { TimeUnit } from '../BbBaseDatePickerInput/BbBaseDatePickerTimeSelector.vue';
+import { BbCalendarDateSlotName, BbCalendarDaySlotProps, BbCalendarPtPart, BbCalendarPtState, BbCalendarSegment } from '../BbCalendar/types';
+import { TimeUnit } from '../CommonTimeSelector/types';
 /** Which end of a range the time rail edits. */
-export type BbDatePickerSegment = 'start' | 'end';
+export type BbDatePickerSegment = BbCalendarSegment;
+/**
+ * Passthrough parts of `BbDatePicker` (plans/passthrough/BbDatePicker.md). The
+ * calendar's parts are forwarded to the `BbCalendar` inside the surface under
+ * the same words (described on `BbCalendarPtPart`), the time rail's with
+ * them: `item` per entry, `header` / `cellColumnHeader` on its readout and
+ * letters.
+ *
+ * The cell parts are broadcasts resolved per node. On `day` and `dayButton`: `selected` a chosen day, `disabled` a day outside `min` / `max` or refused by `selectable`, `today`, `outside` a day of the previous or next month, `rangeStart` / `rangeEnd` / `inRange` a committed range's ends and middle, `highlighted` the keyboard cursor. The panel items carry the same set but `today` and `outside`. `open` follows the surface.
+ *
+ * @part root - The floating element — an invisible positioning wrapper; a
+ *   `class` on the component lands here. No node on the phone sheet: style
+ *   what you see with `panel`.
+ * @part panel - The calendar surface you see — the popover's painted bubble
+ *   on desktop, the sheet itself on a phone. It carries the sizing tokens:
+ *   `pt:panel="[--cell:36px]"` widens the calendar, `[--px:2px]` tightens.
+ * @part sheet - The bottom sheet on a phone only (the `BbOffCanvas` root).
+ *   Applied after `panel`, so it wins a conflict there.
+ */
+export type BbDatePickerPtPart = 'root' | 'panel' | 'sheet' | BbCalendarPtPart;
+/**
+ * Passthrough states of `BbDatePicker`, true while the matching `--` modifier is on.
+ *
+ * @state disabled - Component-wide while the picker is `disabled`. Also per
+ *   node: on the cells, one outside `min` / `max` or refused by `selectable`;
+ *   on `arrow`, at a bound or while the month / year panel is open.
+ * @state open - Component-wide: the calendar is showing.
+ */
+export type BbDatePickerPtState = BbCalendarPtState | 'open';
+/**
+ * The runtime lists the resolver is wired with — kept next to the types so the
+ * two cannot drift. Spelled out (not spread from `BB_CALENDAR_PT`) because the
+ * states must sit in ladder order, and `open` belongs between `active` and
+ * `highlighted`.
+ */
+export declare const BB_DATE_PICKER_PT: {
+    readonly parts: readonly ["root", "panel", "sheet", "header", "arrow", "month", "year", "cellColumnHeader", "day", "dayButton", "monthItem", "yearItem", "item"];
+    readonly states: readonly ["outside", "today", "inRange", "selected", "rangeStart", "rangeEnd", "disabled", "active", "open", "highlighted"];
+};
+/**
+ * The calendar parts, forwarded to the hosted `BbCalendar` under the same
+ * words (`root`, `panel` and `sheet` are the surface's own). Also what
+ * `BbDatePickerInput` forwards to the picker.
+ */
+export declare const DATE_PICKER_CALENDAR_PARTS: ReadonlyArray<Exclude<BbCalendarPtPart, "root">>;
 export type BbDatePickerProps = {
+    [K in `pt:${BbDatePickerPtPart}` | `pt:${BbDatePickerPtPart}:${BbDatePickerPtState}`]?: PtValue;
+} & {
+    /**
+     * Passthrough, object form: the same keys as the `pt:*` attributes
+     * without the prefix. See the `pt:<part>` row.
+     */
+    pt?: PtMap<BbDatePickerPtPart, BbDatePickerPtState>;
     /**
      * External activator element or component ref. When provided, the `activator`
      * slot is not rendered and click + ARIA are attached programmatically to the
@@ -100,7 +153,10 @@ export type BbDatePickerProps = {
      * forced) by `type="month"` and `type="year"`.
      */
     floating?: boolean;
-    /** First day of the week (0 = Sunday … 6 = Saturday). */
+    /**
+     * First day of the week (0 = Sunday … 6 = Saturday).
+     * @defaultValue `1`
+     */
     firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /**
      * Emit UTC (`...Z`) instead of the local offset. Ignored with `floating`,
@@ -117,7 +173,26 @@ export type BbDatePickerProps = {
      * @defaultValue `config.adaptive` (`true`)
      */
     adaptive?: boolean;
-    /** Extra props forwarded to the `BbOffCanvas` sheet when adaptive on mobile. */
+    /**
+     * Props for the phone sheet. A `pt` inside it, object or colon keys, styles
+     * only that sheet.
+     *
+     * Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on
+     * mobile (e.g. `title`, `size`, `persistent`). Spread over the defaults: the
+     * sheet is `draggable` (the time wheels and the year list never drag it) and
+     * hides its ✕ (picking, backdrop, Escape and drag close it); pass
+     * `{ hideClose: false }` to bring the ✕ back.
+     *
+     * A `pt` inside it styles ONLY the sheet, in `BbOffCanvas`'s part words
+     * (`root`, `header`, `title`, `description`, `content`, `footer`, `close`;
+     * state `open`), object (`{ pt: { header: '…' } }`) or colon keys
+     * (`{ 'pt:header': '…' }`) alike. It merges after what this component
+     * forwards to its sheet, so it wins a conflict and drops nothing — see the
+     * passthrough guide § Inside the sheet.
+     *
+     * For this component it is the only way to style the sheet's header,
+     * title and ✕: its own `pt:header` is the calendar's navigation bar.
+     */
     offCanvasProps?: Partial<BbOffCanvasProps>;
     /**
      * Popover/sheet transition duration in milliseconds.
@@ -140,10 +215,21 @@ export type BbDatePickerProps = {
     disableFlip?: boolean;
     /** Render popover content before it is first shown. */
     eager?: boolean;
-    /** Accessible label applied to the activator via `aria-label`. */
+    /**
+     * Accessible label. The activator is named by it followed by the
+     * activator's own text ("Due date 12 Sep"), through `aria-labelledby`.
+     */
     label?: string;
 };
 export type BbDatePickerEvents = {
+    /** Emitted as soon as the calendar surface starts to open (the popover, or the sheet on a phone). */
+    (e: 'show'): void;
+    /** Emitted once the calendar surface is open and its open transition has finished. */
+    (e: 'shown'): void;
+    /** Emitted as soon as the calendar surface starts to close. */
+    (e: 'hide'): void;
+    /** Emitted once the calendar surface has finished closing. */
+    (e: 'hidden'): void;
     /** Emitted when the selected date value changes (single/range/null). */
     (e: 'update:modelValue', value: string | string[] | null): void;
     /** Companion time model, alongside every change while `type="datetime"`. */
@@ -151,7 +237,7 @@ export type BbDatePickerEvents = {
     /** The active range end changed (range + `type="datetime"` only). */
     (e: 'update:activeSegment', value: BbDatePickerSegment): void;
     /**
-     * Relay of the raw calendar-grid pick, before this component combines it with
+     * Relay of the raw calendar-grid pick, before the calendar combines it with
      * the time. An embedding host binds this to run its own value engine; clean
      * consumers ignore it and use `update:modelValue`.
      */
@@ -167,9 +253,16 @@ export type BbDatePickerEvents = {
 };
 /** Props exposed by the `activator` slot (mirrors `BbColorPalette`). */
 export type BbDatePickerActivatorSlotProps = {
-    /** Spread onto your activator element to register its ref. */
+    /**
+     * Spread onto your activator element: registers its ref and names it
+     * (`aria-labelledby`: the label, then the element's own text) and sets
+     * `aria-haspopup` / `aria-expanded`; the label is in the server HTML too.
+     */
     props: {
         ref: (el: unknown) => void;
+        'aria-haspopup': 'dialog';
+        'aria-expanded': 'true' | 'false';
+        'aria-labelledby': string;
     };
     /** Spread onto a wrapping element to anchor the popover to something larger. */
     anchorProps: {
@@ -182,16 +275,13 @@ export type BbDatePickerActivatorSlotProps = {
     /** Whether the picker is disabled. */
     disabled: boolean;
 };
-/** Scope handed to the `day` / `append:day` slots (forwarded to the grid). */
-export type BbDatePickerDaySlotProps = {
-    first: boolean;
-    highlighted: boolean;
-    item: any;
-    label: string;
-    last: boolean;
-    middle: boolean;
-    selected: boolean;
-};
+/** Scope handed to the `day` / `append:day` slots, per day cell (the calendar's). */
+export type BbDatePickerDaySlotProps = BbCalendarDaySlotProps;
+/** A day's own slot name: its local `YYYY-MM-DD` date, which `slotKey` leaves as it is, e.g. `2024-03-15`. */
+export type BbDatePickerDateSlotName = BbCalendarDateSlotName;
+/**
+ * @dynamicSlotsFrom BbCalendar
+ */
 export type BbDatePickerSlots = {
     /** Custom activator element. Apply `v-bind="props"` to your trigger. */
     activator?: (props: BbDatePickerActivatorSlotProps) => any;
@@ -199,4 +289,8 @@ export type BbDatePickerSlots = {
     day?: (props: BbDatePickerDaySlotProps) => any;
     /** Appends content below each calendar day. */
     'append:day'?: (props: BbDatePickerDaySlotProps) => any;
+    /** Replaces one date's button label (`#2024-03-15`); wins over `day`. */
+    [date: BbDatePickerDateSlotName]: (props: BbDatePickerDaySlotProps) => any;
+    /** Appends content below one date (`#append:2024-03-15`); wins over `append:day`. */
+    [date: `append:${BbDatePickerDateSlotName}`]: (props: BbDatePickerDaySlotProps) => any;
 };

package/dist/components/BbDatePicker/types.js

@@ -0,0 +1,33 @@
+import { BB_CALENDAR_PT as e } from "../BbCalendar/types.js";
+//#region src/components/BbDatePicker/types.ts
+var t = {
+	parts: [
+		"root",
+		"panel",
+		"sheet",
+		"header",
+		"arrow",
+		"month",
+		"year",
+		"cellColumnHeader",
+		"day",
+		"dayButton",
+		"monthItem",
+		"yearItem",
+		"item"
+	],
+	states: [
+		"outside",
+		"today",
+		"inRange",
+		"selected",
+		"rangeStart",
+		"rangeEnd",
+		"disabled",
+		"active",
+		"open",
+		"highlighted"
+	]
+}, n = e.parts.filter((e) => e !== "root");
+//#endregion
+export { t as BB_DATE_PICKER_PT, n as DATE_PICKER_CALENDAR_PARTS };

package/dist/components/BbDatePickerInput/BbDatePickerInput.vue.d.ts

@@ -1,21 +1,33 @@
 import { BbDatePickerInputProps, BbDatePickerInputSlots, DatePickerInputError } from './types';
 type __VLS_Slots = BbDatePickerInputSlots;
 declare const __VLS_base: import('vue').DefineComponent<BbDatePickerInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string | string[] | null) => any;
+    active: () => any;
     error: (error: DatePickerInputError) => any;
     focus: (event: FocusEvent) => any;
-    active: () => any;
+    "update:modelValue": (value: string | string[] | null) => any;
+    show: () => any;
+    shown: () => any;
+    hide: () => any;
+    hidden: () => any;
     "update:time": (value: string | string[] | null) => any;
     inactive: () => any;
 }, string, import('vue').PublicProps, Readonly<BbDatePickerInputProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+    onActive?: (() => any) | undefined;
     onError?: ((error: DatePickerInputError) => any) | undefined;
     onFocus?: ((event: FocusEvent) => any) | undefined;
-    onActive?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+    onShow?: (() => any) | undefined;
+    onShown?: (() => any) | undefined;
+    onHide?: (() => any) | undefined;
+    onHidden?: (() => any) | undefined;
     "onUpdate:time"?: ((value: string | string[] | null) => any) | undefined;
     onInactive?: (() => any) | undefined;
 }>, {
     adaptive: boolean;
+    type: import('../../types/DatePickerType').DatePickerType;
+    disableWriting: boolean | "mobile" | "desktop";
+    disableCalendar: boolean | "mobile" | "desktop";
+    autocomplete: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;