@lovince/ui-vue 0.2.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.2.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,16 +44,21 @@ 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` |
 | | Carousel | `LvCarouselRoot`, `LvCarouselViewport`, `LvCarouselSlide`, `LvCarouselPrevious`, `LvCarouselNext`, `LvCarouselIndicators`, `LvCarouselIndicator` |
 | | 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/display/table-parts.d.ts

@@ -0,0 +1,272 @@
+import { PropType } from 'vue';
+export type TableAlign = 'start' | 'center' | 'end';
+export type TableHeadScope = 'col' | 'row' | 'colgroup' | 'rowgroup';
+export declare const TABLE_ALIGNS: readonly ["start", "center", "end"];
+export declare const TABLE_HEAD_SCOPES: readonly ["col", "row", "colgroup", "rowgroup"];
+export declare const LvTableContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    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, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvTableRoot: 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>;
+export declare const LvTableCaption: 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>;
+export declare const LvTableHeader: 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>;
+export declare const LvTableBody: 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>;
+export declare const LvTableFooter: 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>;
+export declare const LvTableRow: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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>;
+    };
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    selected: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvTableHead: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    scope: {
+        type: PropType<TableHeadScope>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    align: {
+        type: PropType<TableAlign>;
+        default: undefined;
+        validator: (value: string) => boolean;
+    };
+    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>;
+    };
+    scope: {
+        type: PropType<TableHeadScope>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    align: {
+        type: PropType<TableAlign>;
+        default: undefined;
+        validator: (value: string) => boolean;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    align: TableAlign;
+    scope: TableHeadScope;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvTableCell: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    align: {
+        type: PropType<TableAlign>;
+        default: undefined;
+        validator: (value: string) => boolean;
+    };
+    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>;
+    };
+    align: {
+        type: PropType<TableAlign>;
+        default: undefined;
+        validator: (value: string) => boolean;
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    align: TableAlign;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;