@lovince/ui-vue 0.1.0 → 0.2.0

package/dist/components/layout/primitives.d.ts

@@ -0,0 +1,242 @@
+import { PropType } from 'vue';
+export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type Justify = 'start' | 'center' | 'end' | 'between';
+export declare const LvStack: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    gap: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    align: {
+        type: PropType<Align>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<Justify>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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<{
+    direction: {
+        type: PropType<"row" | "column">;
+        default: string;
+    };
+    gap: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    align: {
+        type: PropType<Align>;
+        default: undefined;
+    };
+    justify: {
+        type: PropType<Justify>;
+        default: undefined;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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;
+    direction: "column" | "row";
+    align: Align;
+    wrap: boolean;
+    justify: Justify;
+    gap: Space;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    columns: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minItemWidth: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    gap: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    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<{
+    columns: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minItemWidth: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    gap: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    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;
+    columns: number;
+    gap: Space;
+    minItemWidth: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    size: {
+        type: PropType<"prose" | "page" | "full">;
+        default: string;
+    };
+    gutter: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    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<{
+    size: {
+        type: PropType<"prose" | "page" | "full">;
+        default: string;
+    };
+    gutter: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    as: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly default: "div";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    size: "page" | "full" | "prose";
+    as: string | import('vue').Component;
+    asChild: boolean;
+    gutter: Space;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvMasonry: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minItemWidth: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    gap: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    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<{
+    columns: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minItemWidth: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    gap: {
+        type: PropType<Space>;
+        default: Space;
+    };
+    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;
+    columns: number;
+    gap: Space;
+    minItemWidth: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvMasonryItem: 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 {};

package/dist/components/layout/scroll-area.d.ts

@@ -0,0 +1,160 @@
+import { PropType } from 'vue';
+import { ScrollAreaOrientation } from '@lovince/ui-headless';
+export declare const LvScrollAreaRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minThumbSize: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    keyboardStep: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    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<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minThumbSize: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    keyboardStep: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    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;
+    disabled: boolean;
+    keyboardStep: number;
+    minThumbSize: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvScrollAreaViewport: 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 LvScrollAreaScrollbar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    orientation: {
+        type: PropType<ScrollAreaOrientation>;
+        default: string;
+        validator: (value: string) => value is "horizontal" | "vertical";
+    };
+    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>;
+    };
+    orientation: {
+        type: PropType<ScrollAreaOrientation>;
+        default: string;
+        validator: (value: string) => value is "horizontal" | "vertical";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    orientation: ScrollAreaOrientation;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const LvScrollAreaThumb: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        default: string;
+        type: PropType<string | import('vue').Component>;
+    };
+    orientation: {
+        type: PropType<ScrollAreaOrientation>;
+        default: string;
+        validator: (value: string) => value is "horizontal" | "vertical";
+    };
+    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>;
+    };
+    orientation: {
+        type: PropType<ScrollAreaOrientation>;
+        default: string;
+        validator: (value: string) => value is "horizontal" | "vertical";
+    };
+    asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    asChild: boolean;
+    orientation: ScrollAreaOrientation;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/{sortable.d.ts → layout/sortable.d.ts}

@@ -1,16 +1,10 @@
 import { PropType } from 'vue';
 import { Orientation } from '@lovince/ui-headless';
-/**
- * A list people put in order: dragged by a handle, or from the keyboard —
- * Space picks an item up, the arrows move it, Space drops it and Escape puts
- * it back. Every step is announced, so the order is never changed unseen.
- */
-export declare const SortableRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvSortableRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
     };
-    /** The values in their order. */
     modelValue: {
         type: PropType<string[]>;
         default: undefined;
@@ -40,7 +34,6 @@ export declare const SortableRoot: import('vue').DefineComponent<import('vue').E
         default: string;
         type: PropType<string | import('vue').Component>;
     };
-    /** The values in their order. */
     modelValue: {
         type: PropType<string[]>;
         default: undefined;
@@ -71,7 +64,7 @@ export declare const SortableRoot: import('vue').DefineComponent<import('vue').E
     modelValue: string[];
     defaultValue: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const SortableItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvSortableItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -80,7 +73,6 @@ export declare const SortableItem: import('vue').DefineComponent<import('vue').E
         type: StringConstructor;
         required: true;
     };
-    /** How the item is named in announcements; defaults to its text. */
     textValue: {
         type: StringConstructor;
         default: undefined;
@@ -100,7 +92,6 @@ export declare const SortableItem: import('vue').DefineComponent<import('vue').E
         type: StringConstructor;
         required: true;
     };
-    /** How the item is named in announcements; defaults to its text. */
     textValue: {
         type: StringConstructor;
         default: undefined;
@@ -114,7 +105,7 @@ export declare const SortableItem: import('vue').DefineComponent<import('vue').E
     asChild: boolean;
     textValue: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const SortableHandle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvSortableHandle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     readonly as: {
         readonly default: "button";
         readonly type: PropType<string | import('vue').Component>;

package/dist/components/{splitter.d.ts → layout/splitter.d.ts}

@@ -1,10 +1,6 @@
 import { PropType } from 'vue';
 import { Direction, Orientation } from '@lovince/ui-headless';
-/**
- * Panels with draggable dividers between them — the WAI-ARIA window splitter.
- * Sizes are percentages of the group, one per panel, and always add up to 100.
- */
-export declare const SplitterGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvSplitterGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: {
         type: PropType<number[]>;
         default: undefined;
@@ -21,7 +17,6 @@ export declare const SplitterGroup: import('vue').DefineComponent<import('vue').
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Percent moved per arrow key press. */
     keyboardStep: {
         type: NumberConstructor;
         default: number;
@@ -55,7 +50,6 @@ export declare const SplitterGroup: import('vue').DefineComponent<import('vue').
         type: BooleanConstructor;
         default: boolean;
     };
-    /** Percent moved per arrow key press. */
     keyboardStep: {
         type: NumberConstructor;
         default: number;
@@ -79,8 +73,7 @@ export declare const SplitterGroup: import('vue').DefineComponent<import('vue').
     keyboardStep: number;
     modelValue: number[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const SplitterPanel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /** Starting size in percent; panels without one share what is left. */
+export declare const LvSplitterPanel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     defaultSize: {
         type: NumberConstructor;
         default: undefined;
@@ -104,7 +97,6 @@ export declare const SplitterPanel: import('vue').DefineComponent<import('vue').
 }>, () => 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<{
-    /** Starting size in percent; panels without one share what is left. */
     defaultSize: {
         type: NumberConstructor;
         default: undefined;
@@ -132,7 +124,7 @@ export declare const SplitterPanel: import('vue').DefineComponent<import('vue').
     minSize: number;
     maxSize: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const SplitterHandle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvSplitterHandle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;

package/dist/components/{tree.d.ts → layout/tree.d.ts}

@@ -1,10 +1,5 @@
 import { PropType } from 'vue';
-/**
- * A hierarchy to browse and pick from — the WAI-ARIA tree view. Arrow keys
- * move through the visible items; Right opens a branch or enters it, Left
- * closes it or climbs to its parent.
- */
-export declare const TreeRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvTreeRoot: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -79,7 +74,7 @@ export declare const TreeRoot: import('vue').DefineComponent<import('vue').Extra
     defaultValue: string | string[];
     defaultExpanded: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export declare const TreeItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvTreeItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;
@@ -120,8 +115,7 @@ export declare const TreeItem: import('vue').DefineComponent<import('vue').Extra
     asChild: boolean;
     disabled: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-/** An item's children. Rendered only while the item is open, so closed branches hold no focusable items. */
-export declare const TreeGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const LvTreeGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         default: string;
         type: PropType<string | import('vue').Component>;

package/dist/components/layout/virtual-list.d.ts

@@ -0,0 +1,68 @@
+import { PropType } from 'vue';
+export declare const LvVirtualList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<readonly unknown[]>;
+        required: true;
+    };
+    itemSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    overscan: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    getKey: {
+        type: PropType<(item: unknown, index: number) => string | number>;
+        default: (_: unknown, index: number) => number;
+    };
+    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<{
+    items: {
+        type: PropType<readonly unknown[]>;
+        required: true;
+    };
+    itemSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    overscan: {
+        type: NumberConstructor;
+        default: number;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    getKey: {
+        type: PropType<(item: unknown, index: number) => string | number>;
+        default: (_: unknown, index: number) => number;
+    };
+    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;
+    overscan: number;
+    getKey: (item: unknown, index: number) => string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;