@lovince/ui-vue 0.3.0 → 0.4.0

package/README.md

@@ -6,7 +6,7 @@ effects run through [`@lovince/ui-dom`](../ui-dom). This package subscribes to
 the machine, feeds props in, and renders what `connect()` returns. It holds no
 behaviour of its own.
 
-> **Status: `0.3.0`, experimental.** The API may change before `1.0`.
+> **Status: `0.4.0`, experimental.** The API may change before `1.0`.
 
 ```bash
 bun add @lovince/ui-vue
@@ -29,6 +29,7 @@ names never clash with your own components or native elements.
 | | Accordion | `LvAccordionRoot`, `LvAccordionItem`, `LvAccordionHeader`, `LvAccordionTrigger`, `LvAccordionContent` |
 | | Tabs | `LvTabsRoot`, `LvTabsList`, `LvTabsTrigger`, `LvTabsContent` |
 | Overlays | Dialog | `LvDialogRoot`, `LvDialogTrigger`, `LvDialogPortal`, `LvDialogOverlay`, `LvDialogContent`, `LvDialogTitle`, `LvDialogDescription`, `LvDialogClose` |
+| | Lightbox | `LvLightboxRoot`, `LvLightboxTrigger`, `LvLightboxPortal`, `LvLightboxOverlay`, `LvLightboxContent`, `LvLightboxTitle`, `LvLightboxItem`, `LvLightboxPrevious`, `LvLightboxNext`, `LvLightboxCounter`, `LvLightboxClose` |
 | | Popover | `LvPopoverRoot`, `LvPopoverTrigger`, `LvPopoverAnchor`, `LvPopoverPortal`, `LvPopoverContent`, `LvPopoverClose` |
 | | Tooltip | `LvTooltipRoot`, `LvTooltipTrigger`, `LvTooltipPortal`, `LvTooltipContent` |
 | | Hover card | `LvHoverCardRoot`, `LvHoverCardTrigger`, `LvHoverCardPortal`, `LvHoverCardContent` |
@@ -43,10 +44,12 @@ names never clash with your own components or native elements.
 | | Command palette | `LvCommandRoot`, `LvCommandInput`, `LvCommandList`, `LvCommandGroup`, `LvCommandItem`, `LvCommandEmpty`, `LvCommandSeparator` |
 | | Emoji picker | `LvEmojiPickerRoot`, `LvEmojiPickerSearch`, `LvEmojiPickerList`, `LvEmojiPickerGroup`, `LvEmojiPickerItem`, `LvEmojiPickerNav`… |
 | Input | Slider | `LvSliderRoot`, `LvSliderTrack`, `LvSliderRange`, `LvSliderThumb` |
+| | Angle Slider | `LvAngleSliderRoot`, `LvAngleSliderTrack`, `LvAngleSliderMarkers`, `LvAngleSliderIndicator`, `LvAngleSliderThumb`, `LvAngleSliderValue` |
 | | Number field | `LvNumberFieldRoot`, `LvNumberFieldInput`, `LvNumberFieldIncrement`, `LvNumberFieldDecrement` |
 | | PIN input | `LvPinInputRoot`, `LvPinInputInput` |
 | | Calendar | `LvCalendarRoot`, `LvCalendarHeading`, `LvCalendarPrev`, `LvCalendarNext`, `LvCalendarGrid`, `LvCalendarHeadCell`, `LvCalendarCell`, `LvCalendarDay` |
 | Forms | Field, Input, Textarea, Form, TagsInput, FileUpload, TimeField, PhoneInput | `LvFieldRoot`, `LvFieldLabel`, `LvTagsInputRoot`, `LvTagsInputInput`, `LvTagsInputItem`, `LvTagsInputRemove`, `LvFileUploadRoot`, `LvFileUploadInput`, `LvFileUploadItem`, `LvFileUploadRemove`, `LvTimeFieldRoot`, `LvTimeFieldInput`, `LvPhoneInputRoot`, `LvPhoneInputInput`, `LvPhoneInputCountrySelect` |
+| | Clock Picker | `LvClockPickerRoot`, `LvClockPickerViewTrigger`, `LvClockPickerMeridiem`, `LvClockPickerDial`, `LvClockPickerHand` |
 | Layout | ScrollArea | `LvScrollAreaRoot`, `LvScrollAreaViewport`, `LvScrollAreaScrollbar`, `LvScrollAreaThumb` |
 | | Splitter | `LvSplitterGroup`, `LvSplitterPanel`, `LvSplitterHandle` |
 | | Tree | `LvTreeRoot`, `LvTreeItem`, `LvTreeGroup` |
@@ -54,6 +57,7 @@ names never clash with your own components or native elements.
 | | Sortable | `LvSortableRoot`, `LvSortableItem`, `LvSortableHandle` |
 | | Section | `LvSectionRoot`, `LvSectionHeader`, `LvSectionEyebrow`, `LvSectionTitle`, `LvSectionDescription`, `LvSectionContent` |
 | Display | Avatar, Progress | `LvAvatarRoot`, `LvAvatarImage`, `LvAvatarFallback`, `LvProgressRoot`, `LvProgressIndicator` |
+| | Gauge, Countdown | `LvGauge`, `LvCountdownRoot`, `LvCountdownSegment` |
 | | Table | `LvTableContainer`, `LvTableRoot`, `LvTableCaption`, `LvTableHeader`, `LvTableBody`, `LvTableFooter`, `LvTableRow`, `LvTableHead`, `LvTableCell`, plus `LvDataTable` |
 
 ### Primitives

package/dist/components/display/countdown.d.ts

@@ -0,0 +1,127 @@
+import { PropType } from 'vue';
+import { CountdownUnit } from '@lovince/ui-headless';
+export declare const LvCountdownRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    to: {
+        type: PropType<Date | number | string>;
+        default: undefined;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    paused: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    units: {
+        type: PropType<readonly CountdownUnit[]>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    complete: () => true;
+    tick: (remaining: number) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    to: {
+        type: PropType<Date | number | string>;
+        default: undefined;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoStart: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    paused: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    units: {
+        type: PropType<readonly CountdownUnit[]>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    onComplete?: (() => any) | undefined;
+    onTick?: ((remaining: number) => any) | undefined;
+}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+    to: string | number | Date;
+    duration: number;
+    paused: boolean;
+    autoStart: boolean;
+    units: readonly CountdownUnit[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvCountdownSegment: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    unit: {
+        type: PropType<CountdownUnit>;
+        required: true;
+    };
+    pad: {
+        type: NumberConstructor;
+        default: number;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    unit: {
+        type: PropType<CountdownUnit>;
+        required: true;
+    };
+    pad: {
+        type: NumberConstructor;
+        default: number;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    pad: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/display/gauge.d.ts

@@ -0,0 +1,152 @@
+import { PropType } from 'vue';
+import { GaugeBand, GaugeSegment } from '@lovince/ui-headless';
+export declare const LvGauge: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    startAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    sweep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ticks: {
+        type: NumberConstructor;
+        default: number;
+    };
+    bands: {
+        type: PropType<readonly GaugeBand[]>;
+        default: undefined;
+    };
+    segments: {
+        type: PropType<readonly GaugeSegment[]>;
+        default: undefined;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    needle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    valueText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    startAngle: {
+        type: NumberConstructor;
+        default: number;
+    };
+    sweep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ticks: {
+        type: NumberConstructor;
+        default: number;
+    };
+    bands: {
+        type: PropType<readonly GaugeBand[]>;
+        default: undefined;
+    };
+    segments: {
+        type: PropType<readonly GaugeSegment[]>;
+        default: undefined;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    needle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    valueText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    ticks: number;
+    startAngle: number;
+    sweep: number;
+    valueText: string;
+    thickness: number;
+    gap: number;
+    bands: readonly GaugeBand[];
+    segments: readonly GaugeSegment[];
+    needle: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/forms/clock-picker.d.ts

@@ -0,0 +1,245 @@
+import { PropType } from 'vue';
+import { ClockView, Meridiem, TimeValue } from '@lovince/ui-headless';
+export declare const LvClockPickerRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<TimeValue | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<TimeValue | null>;
+        default: null;
+    };
+    view: {
+        type: PropType<ClockView>;
+        default: undefined;
+    };
+    defaultView: {
+        type: PropType<ClockView>;
+        default: string;
+    };
+    hour12: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minuteStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoAdvance: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hoursLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    minutesLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (value: TimeValue | null) => boolean;
+    'update:view': (view: ClockView) => view is "hours" | "minutes";
+    commit: (value: TimeValue | null) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<TimeValue | null>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<TimeValue | null>;
+        default: null;
+    };
+    view: {
+        type: PropType<ClockView>;
+        default: undefined;
+    };
+    defaultView: {
+        type: PropType<ClockView>;
+        default: string;
+    };
+    hour12: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minuteStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    autoAdvance: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hoursLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    minutesLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    onCommit?: ((value: string | null) => any) | undefined;
+    "onUpdate:view"?: ((view: ClockView) => any) | undefined;
+}>, {
+    name: string;
+    as: string | import('vue').Component;
+    asChild: boolean;
+    disabled: boolean;
+    defaultView: ClockView;
+    view: ClockView;
+    hour12: boolean;
+    minuteStep: number;
+    autoAdvance: boolean;
+    modelValue: string | null;
+    defaultValue: string | null;
+    hoursLabel: string;
+    minutesLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvClockPickerViewTrigger: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    view: {
+        type: PropType<ClockView>;
+        required: true;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    view: {
+        type: PropType<ClockView>;
+        required: true;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvClockPickerMeridiem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    meridiem: {
+        type: PropType<Meridiem>;
+        required: true;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    meridiem: {
+        type: PropType<Meridiem>;
+        required: true;
+    };
+    as: {
+        readonly default: "button";
+        readonly type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvClockPickerDial: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly as: string | import('vue').Component;
+    readonly asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvClockPickerHand: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;