@vobs/ui 0.2.0 → 1.0.0

package/dist/calendar-picker.js

@@ -1,217 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { effect, signal } from '@vobs/reactivity';
-import { createCompiledTemplate, defineComponent, } from '@vobs/runtime-dom';
-import { createServerTemplate, escapeHtmlAttribute } from '@vobs/server-renderer';
-import { createCalendarPlans } from './calendar.js';
-const ROOT_CLASS = 'kui-calendar-picker';
-/** Initial displayed month: month prop → value's month → current month. */
-function resolveInitialMonth(month, value) {
-    if (month !== undefined && /^\d{4}-\d{2}$/.test(month))
-        return month;
-    const fromValue = value === undefined ? undefined : value.slice(0, 7);
-    if (fromValue !== undefined && /^\d{4}-\d{2}$/.test(fromValue))
-        return fromValue;
-    const now = new Date();
-    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
-}
-/** Shifts the displayed month (rolls over across years). */
-function shiftMonth(current, delta) {
-    const parts = current.split('-');
-    const year = Number(parts[0]);
-    const month = Number(parts[1]);
-    if (!Number.isFinite(year) || !Number.isFinite(month))
-        return current;
-    const shifted = new Date(year, month - 1 + delta, 1);
-    return `${shifted.getFullYear()}-${String(shifted.getMonth() + 1).padStart(2, '0')}`;
-}
-/** Renders the popover content: header (prev/title/next) + weekday row + 42 cells. Events are delegated, so no rebinding is needed. */
-function renderPopover(popover, scope, displayMonth) {
-    popover.replaceChildren();
-    const plans = createCalendarPlans({
-        id: 'kui-calendar',
-        ...(scope.props.value?.value === undefined ? {} : { value: scope.props.value.value }),
-        month: displayMonth,
-        ...(scope.props.min?.value === undefined ? {} : { min: scope.props.min.value }),
-        ...(scope.props.max?.value === undefined ? {} : { max: scope.props.max.value }),
-        ...(scope.props.disabled?.value === undefined ? {} : { disabled: scope.props.disabled.value }),
-        locale: scope.props.locale?.value ?? 'zh-CN',
-    });
-    const header = document.createElement('div');
-    header.className = plans.header.className;
-    const prev = document.createElement('button');
-    prev.className = plans.prevButton.className;
-    prev.type = 'button';
-    prev.setAttribute('data-direction', 'prev');
-    prev.setAttribute('aria-label', 'Previous month');
-    const title = document.createElement('span');
-    title.className = plans.title.className;
-    title.textContent = String(plans.title.attrs['data-label'] ?? '');
-    const next = document.createElement('button');
-    next.className = plans.nextButton.className;
-    next.type = 'button';
-    next.setAttribute('data-direction', 'next');
-    next.setAttribute('aria-label', 'Next month');
-    header.append(prev, title, next);
-    const weekdayRow = document.createElement('div');
-    weekdayRow.className = plans.weekdayRow.className;
-    for (const weekday of plans.weekdays) {
-        const span = document.createElement('span');
-        span.className = weekday.className;
-        span.textContent = String(weekday.attrs['data-label'] ?? '');
-        weekdayRow.append(span);
-    }
-    const grid = document.createElement('div');
-    grid.className = plans.grid.className;
-    grid.setAttribute('role', 'grid');
-    for (const day of plans.days) {
-        const button = document.createElement('button');
-        button.className = day.className;
-        button.type = 'button';
-        for (const [name, value] of Object.entries(day.attrs)) {
-            if (value === undefined)
-                continue;
-            button.setAttribute(name, typeof value === 'boolean' ? String(value) : String(value));
-        }
-        button.textContent = String(day.day);
-        grid.append(button);
-    }
-    popover.append(header, weekdayRow, grid);
-}
-/** Shared picker assembly for mount/hydrate (input + popover state machine + event delegation + outside-click/Escape close + dispose). */
-function mountCalendarPicker(owner, root, scope, _environment) {
-    const input = document.createElement('input');
-    input.className = 'kui-calendar-picker__input';
-    input.type = 'text';
-    input.readOnly = true;
-    input.setAttribute('role', 'combobox');
-    input.setAttribute('aria-haspopup', 'dialog');
-    input.setAttribute('aria-expanded', 'false');
-    const popover = document.createElement('div');
-    popover.className = 'kui-calendar-popover';
-    popover.setAttribute('role', 'dialog');
-    popover.hidden = true;
-    root.append(input, popover);
-    const open = signal(false);
-    const displayMonth = signal(resolveInitialMonth(scope.props.month?.value, scope.props.value?.value));
-    const stopValueSync = effect(() => {
-        const value = scope.props.value?.value ?? '';
-        if (input.value !== value)
-            input.value = value;
-    });
-    const stopPlaceholder = effect(() => {
-        input.placeholder = scope.props.placeholder?.value ?? '';
-    });
-    const stopRender = effect(() => {
-        const isOpen = open.value;
-        const month = displayMonth.value;
-        void scope.props.value?.value;
-        void scope.props.locale?.value;
-        if (isOpen) {
-            renderPopover(popover, scope, month);
-        }
-        popover.hidden = !isOpen;
-        input.setAttribute('aria-expanded', String(isOpen));
-    });
-    const stopDisabled = effect(() => {
-        input.disabled = scope.props.disabled?.value === true;
-    });
-    const onPopoverClick = (event) => {
-        const target = event.target;
-        if (target === null)
-            return;
-        const isoDay = target.closest('[data-iso]');
-        if (isoDay !== null) {
-            const iso = isoDay.dataset['iso'];
-            if (iso !== undefined && scope.props.disabled?.value !== true) {
-                scope.emit('update', iso);
-                open.value = false;
-                scope.emit('close');
-            }
-            return;
-        }
-        const nav = target.closest('[data-direction]');
-        if (nav !== null) {
-            const direction = nav.dataset['direction'];
-            if (direction === 'prev' || direction === 'next') {
-                displayMonth.value = shiftMonth(displayMonth.value, direction === 'prev' ? -1 : 1);
-            }
-        }
-    };
-    popover.addEventListener('click', onPopoverClick);
-    const onInputClick = () => {
-        if (scope.props.disabled?.value === true)
-            return;
-        const next = !open.value;
-        open.value = next;
-        scope.emit(next ? 'open' : 'close');
-    };
-    input.addEventListener('click', onInputClick);
-    const onDocumentClick = (event) => {
-        if (!open.value)
-            return;
-        const target = event.target;
-        if (target !== null && root.contains(target))
-            return;
-        open.value = false;
-        scope.emit('close');
-    };
-    document.addEventListener('mousedown', onDocumentClick);
-    const onKeyDown = (event) => {
-        if (event.key !== 'Escape' || !open.value)
-            return;
-        open.value = false;
-        scope.emit('close');
-    };
-    document.addEventListener('keydown', onKeyDown);
-    owner.own(() => {
-        stopValueSync();
-        stopPlaceholder();
-        stopRender();
-        stopDisabled();
-        popover.removeEventListener('click', onPopoverClick);
-        input.removeEventListener('click', onInputClick);
-        document.removeEventListener('mousedown', onDocumentClick);
-        document.removeEventListener('keydown', onKeyDown);
-    });
-}
-const template = createCompiledTemplate({
-    templateId: 'k-calendar-picker',
-    sourceId: '@vobs/ui/calendar-picker',
-    rootTag: 'div',
-    mount(owner, scope, environment) {
-        const root = document.createElement('div');
-        root.className = ROOT_CLASS;
-        mountCalendarPicker(owner, root, scope, environment);
-        return { root, refs: {} };
-    },
-    hydrate(owner, root, scope, environment) {
-        if (root.localName !== 'div')
-            return undefined;
-        root.classList.add(ROOT_CLASS);
-        mountCalendarPicker(owner, root, scope, environment);
-        return { root, refs: {} };
-    },
-});
-/** Component definition: `<k-calendar-picker :value="date" @update="onDate" />`. */
-export const CalendarPicker = defineComponent({
-    template,
-    props: ['value', 'month', 'min', 'max', 'disabled', 'locale', 'placeholder', 'className'],
-    emits: ['update', 'open', 'close'],
-    setup(context) {
-        return { props: context.props, emit: context.emit.bind(context) };
-    },
-});
-/** Server template (SSR): only the input (popover closed by default). */
-export const CalendarPickerServerTemplate = createServerTemplate({
-    templateId: 'k-calendar-picker',
-    sourceId: '@vobs/ui/calendar-picker',
-    rootTag: 'div',
-    render(scope) {
-        const value = scope.props.value?.value ?? '';
-        const placeholder = scope.props.placeholder?.value ?? '';
-        return `<div class="${ROOT_CLASS}"><input class="kui-calendar-picker__input" type="text" readonly value="${escapeHtmlAttribute(value)}" placeholder="${escapeHtmlAttribute(placeholder)}" /></div>`;
-    },
-});

package/dist/calendar.d.ts

@@ -1,95 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { type UiAttributes, type UiDomPlan } from './primitives.js';
-/**
- * Calendar panel plans (official component, scheme A — implemented inside the ui library, not an adapter).
- *
- * Month-view grid: header (prev/title/next) + weekday row + 42-cell date grid (6 weeks, including leading/trailing out-of-month cells).
- * Homogeneous with other plans components in the ui package (combobox/cascader pattern): static DOM plans + derived state.
- * Day cells are dynamic data but expressed as a static plans array (days: readonly CalendarDayPlan[]) — apps render them via templates.
- *
- * Localization: Intl API (weekday/month names follow locale, default zh-CN; no @vobs/i18n dependency).
- * Date semantics: ISO 'YYYY-MM-DD' strings (lexicographic order = chronological order, min/max compared as strings).
- * State derivation: disabled > selected > today > outside > idle (data-state applied by createUiDomPlan).
- */
-export type CalendarDayState = 'idle' | 'today' | 'selected' | 'outside' | 'disabled';
-export interface CalendarDayPlan extends UiDomPlan<'button'> {
-    /** Day of month (1-31). */
-    readonly day: number;
-    /** ISO date 'YYYY-MM-DD'. */
-    readonly iso: string;
-    /** Whether the day belongs to the displayed month (false = leading/trailing out-of-month cell). */
-    readonly inMonth: boolean;
-    /** Derived state (disabled > selected > today > outside > idle). */
-    readonly dayState: CalendarDayState;
-}
-export interface CalendarPlanOptions {
-    /** Root element id (child element ids are derived from it). */
-    readonly id: string;
-    /** Selected value 'YYYY-MM-DD' (renders the selected state). */
-    readonly value?: string;
-    /** Displayed month 'YYYY-MM' (defaults to the current month). */
-    readonly month?: string;
-    /** Minimum selectable date 'YYYY-MM-DD' (inclusive). */
-    readonly min?: string;
-    /** Maximum selectable date 'YYYY-MM-DD' (inclusive). */
-    readonly max?: string;
-    /** Disables the whole calendar. */
-    readonly disabled?: boolean;
-    /** BCP 47 locale (default 'zh-CN'); determines weekday/month names and title format. */
-    readonly locale?: string;
-    readonly className?: string;
-    readonly attrs?: UiAttributes;
-}
-export interface CalendarPlans {
-    readonly root: UiDomPlan<'div'>;
-    readonly header: UiDomPlan<'div'>;
-    readonly prevButton: UiDomPlan<'button'>;
-    readonly nextButton: UiDomPlan<'button'>;
-    readonly title: UiDomPlan<'span'>;
-    readonly weekdayRow: UiDomPlan<'div'>;
-    /** 7 weekday abbreviations (Sunday-first, follows locale). */
-    readonly weekdays: readonly UiDomPlan<'span'>[];
-    readonly grid: UiDomPlan<'div'>;
-    /** 42 cells (6 weeks, starting from the Sunday of the displayed month's first day's week). */
-    readonly days: readonly CalendarDayPlan[];
-}
-/** Date → ISO 'YYYY-MM-DD' (local timezone). */
-export declare function formatCalendarDate(date: Date): string;
-/** ISO 'YYYY-MM-DD' → local Date (returns undefined for invalid/overflow input). */
-export declare function parseCalendarDate(iso: string): Date | undefined;
-/**
- * Builds calendar panel plans (42-cell month view).
- *
- * Layout convention: Sunday-first (Chinese convention) — the grid starts on the Sunday of the week
- * containing the displayed month's first day, for 42 cells total.
- * Per-cell state derivation: disabled (out of min/max or whole calendar disabled) > selected > today > outside > idle.
- */
-export declare function createCalendarPlans(options: CalendarPlanOptions): CalendarPlans;
-/**
- * Date Range Picker plans — two range inputs (start/end) + a dual-calendar popover container.
- * Spec source: common enterprise-backend component set (high-frequency list filtering; no UIStyle spec, this is an out-of-spec component).
- * Calendar content is rendered by the app into startCalendar / endCalendar using createCalendarPlans.
- */
-export interface DateRangePickerPlans {
-    readonly root: UiDomPlan<'div'>;
-    readonly startInput: UiDomPlan<'input'>;
-    readonly separator: UiDomPlan<'span'>;
-    readonly endInput: UiDomPlan<'input'>;
-    /** Popover container (hidden by default; visibility controlled by the app). */
-    readonly popover: UiDomPlan<'div'>;
-    readonly startCalendar: UiDomPlan<'div'>;
-    readonly endCalendar: UiDomPlan<'div'>;
-}
-export interface DateRangePickerPlanOptions {
-    readonly id: string;
-    readonly startValue?: string;
-    readonly endValue?: string;
-    readonly placeholder?: string;
-    readonly disabled?: boolean;
-    readonly className?: string;
-    readonly attrs?: UiAttributes;
-}
-export declare function createDateRangePickerPlans(options: DateRangePickerPlanOptions): DateRangePickerPlans;

package/dist/calendar.js

@@ -1,194 +0,0 @@
-/** @license MIT
- * Copyright (c) 2026 vobsjs
- * @vobs/ui
- */
-import { createUiDomPlan } from './primitives.js';
-const pad2 = (value) => value.toString().padStart(2, '0');
-/** Date → ISO 'YYYY-MM-DD' (local timezone). */
-export function formatCalendarDate(date) {
-    return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
-}
-/** ISO 'YYYY-MM-DD' → local Date (returns undefined for invalid/overflow input). */
-export function parseCalendarDate(iso) {
-    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-    if (match === null)
-        return undefined;
-    const year = Number(match[1]);
-    const month = Number(match[2]) - 1;
-    const day = Number(match[3]);
-    if (month < 0 || month > 11 || day < 1 || day > 31)
-        return undefined;
-    const date = new Date(year, month, day);
-    // Read-back validation for overflow (e.g. 2026-13-40 is normalized by JS to 2027-02-08)
-    if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
-        return undefined;
-    }
-    return date;
-}
-/** Displayed-month parse: 'YYYY-MM' → { year, month } (invalid input falls back to the current month). */
-function parseCalendarMonth(month) {
-    const match = month === undefined ? null : /^(\d{4})-(\d{2})$/.exec(month);
-    if (match === null) {
-        const now = new Date();
-        return { year: now.getFullYear(), month: now.getMonth() };
-    }
-    const parsed = { year: Number(match[1]), month: Number(match[2]) - 1 };
-    return parsed.month >= 0 && parsed.month <= 11
-        ? parsed
-        : { year: parsed.year, month: parsed.month };
-}
-/** Weekday names (Sunday-first): 2024-01-07 is a Sunday; format the following 7 days via Intl. */
-function resolveWeekdayNames(locale) {
-    const formatter = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
-    return Array.from({ length: 7 }, (_, index) => formatter.format(new Date(2024, 0, 7 + index)));
-}
-/** Month title format follows the locale, e.g. 'August 2026' (en-US). */
-function resolveMonthTitle(year, month, locale) {
-    return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }).format(new Date(year, month, 1));
-}
-/**
- * Builds calendar panel plans (42-cell month view).
- *
- * Layout convention: Sunday-first (Chinese convention) — the grid starts on the Sunday of the week
- * containing the displayed month's first day, for 42 cells total.
- * Per-cell state derivation: disabled (out of min/max or whole calendar disabled) > selected > today > outside > idle.
- */
-export function createCalendarPlans(options) {
-    const { id, locale = 'zh-CN' } = options;
-    const display = parseCalendarMonth(options.month);
-    const todayIso = formatCalendarDate(new Date());
-    // Start cell: back up from the first day of the displayed month to the preceding Sunday
-    const firstOfMonth = new Date(display.year, display.month, 1);
-    const start = new Date(display.year, display.month, 1 - firstOfMonth.getDay());
-    const days = [];
-    for (let index = 0; index < 42; index += 1) {
-        const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);
-        const iso = formatCalendarDate(date);
-        const inMonth = date.getMonth() === display.month;
-        const isDisabled = options.disabled === true ||
-            (options.min !== undefined && iso < options.min) ||
-            (options.max !== undefined && iso > options.max);
-        const isSelected = !isDisabled && iso === options.value;
-        const isToday = !isDisabled && !isSelected && iso === todayIso;
-        const dayState = isDisabled
-            ? 'disabled'
-            : isSelected
-                ? 'selected'
-                : isToday
-                    ? 'today'
-                    : inMonth
-                        ? 'idle'
-                        : 'outside';
-        days.push({
-            ...createUiDomPlan('button', 'calendar-day', {
-                state: dayState,
-                disabled: isDisabled,
-                ...(inMonth ? {} : { className: 'kui-calendar-day--outside' }),
-                attrs: {
-                    id: `${id}-day-${index}`,
-                    type: 'button',
-                    'data-iso': iso,
-                    'data-in-month': inMonth ? 'true' : 'false',
-                    'aria-label': date.toLocaleDateString(locale),
-                    'aria-pressed': isSelected ? 'true' : undefined,
-                    'aria-current': isToday ? 'date' : undefined,
-                    ...options.attrs,
-                },
-            }),
-            day: date.getDate(),
-            iso,
-            inMonth,
-            dayState,
-        });
-    }
-    const weekdays = resolveWeekdayNames(locale).map((name, index) => createUiDomPlan('span', 'calendar-weekday', {
-        attrs: {
-            id: `${id}-weekday-${index}`,
-            'data-label': name,
-        },
-    }));
-    return {
-        root: createUiDomPlan('div', 'calendar', {
-            state: options.disabled === true ? 'disabled' : 'idle',
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${id}-calendar`, ...options.attrs },
-        }),
-        header: createUiDomPlan('div', 'calendar-header', {
-            attrs: { id: `${id}-header` },
-        }),
-        prevButton: createUiDomPlan('button', 'calendar-nav', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            attrs: {
-                id: `${id}-prev`,
-                type: 'button',
-                'aria-label': 'Previous month',
-                'data-direction': 'prev',
-            },
-        }),
-        nextButton: createUiDomPlan('button', 'calendar-nav', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            attrs: {
-                id: `${id}-next`,
-                type: 'button',
-                'aria-label': 'Next month',
-                'data-direction': 'next',
-            },
-        }),
-        title: createUiDomPlan('span', 'calendar-title', {
-            attrs: {
-                id: `${id}-title`,
-                'data-label': resolveMonthTitle(display.year, display.month, locale),
-            },
-        }),
-        weekdayRow: createUiDomPlan('div', 'calendar-weekday-row', {
-            attrs: { id: `${id}-weekday-row` },
-        }),
-        weekdays,
-        grid: createUiDomPlan('div', 'calendar-grid', {
-            attrs: { id: `${id}-grid`, role: 'grid' },
-        }),
-        days,
-    };
-}
-export function createDateRangePickerPlans(options) {
-    const placeholder = options.placeholder ?? 'YYYY-MM-DD';
-    return {
-        root: createUiDomPlan('div', 'date-range-picker', {
-            ...(options.className === undefined ? {} : { className: options.className }),
-            attrs: { id: `${options.id}-range`, ...options.attrs },
-        }),
-        startInput: createUiDomPlan('input', 'date-range-input', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            attrs: {
-                id: `${options.id}-start`,
-                type: 'text',
-                readonly: 'true',
-                ...(options.startValue === undefined ? {} : { value: options.startValue }),
-                ...(options.placeholder === undefined ? {} : { placeholder }),
-            },
-        }),
-        separator: createUiDomPlan('span', 'date-range-separator', {
-            attrs: { id: `${options.id}-sep`, 'data-label': '~' },
-        }),
-        endInput: createUiDomPlan('input', 'date-range-input', {
-            ...(options.disabled === undefined ? {} : { disabled: options.disabled }),
-            attrs: {
-                id: `${options.id}-end`,
-                type: 'text',
-                readonly: 'true',
-                ...(options.endValue === undefined ? {} : { value: options.endValue }),
-                ...(options.placeholder === undefined ? {} : { placeholder }),
-            },
-        }),
-        popover: createUiDomPlan('div', 'date-range-popover', {
-            state: 'hidden',
-            attrs: { id: `${options.id}-popover`, role: 'dialog', 'aria-hidden': 'true' },
-        }),
-        startCalendar: createUiDomPlan('div', 'date-range-calendar', {
-            attrs: { id: `${options.id}-start-calendar` },
-        }),
-        endCalendar: createUiDomPlan('div', 'date-range-calendar', {
-            attrs: { id: `${options.id}-end-calendar` },
-        }),
-    };
-}