@dolanske/vui 1.10.14 → 1.11.0

package/README.md

@@ -1,11 +1,19 @@
-# VUI
-
-1. `npm i @dolanske/vui`
-2. In your main app entry,`import "@dolanske/vui/style` to import the global CSS
-3. Build your thing bro
-
----
-
-## Documentation
-
-[Right here](https://dolanske.github.io/vui/)
+# VUI
+
+1. `npm i @dolanske/vui`
+2. In your main app entry,`import "@dolanske/vui/style` to import the global CSS
+3. Override default style [tokens](https://dolanske.github.io/vui/docs/tokens) to fit your style
+4. Build your thing bro
+
+---
+
+## Documentation
+
+[Right here](https://dolanske.github.io/vui/)
+
+---
+
+## TODO
+
+- [] Migrate Hivecom divider
+- [] Update docs

package/dist/{components → src/components}/Carousel/Carousel.vue.d.ts

@@ -37,6 +37,7 @@ declare function __VLS_template(): {
                 readonly rowReverse?: boolean | undefined;
                 readonly columnReverse?: boolean | undefined;
                 readonly gap?: (Spaces | number) | undefined;
+                readonly center?: boolean | undefined;
                 readonly xStart?: boolean | undefined;
                 readonly xEnd?: boolean | undefined;
                 readonly xCenter?: boolean | undefined;
@@ -47,11 +48,10 @@ declare function __VLS_template(): {
                 readonly yStart?: boolean | undefined;
                 readonly yEnd?: boolean | undefined;
                 readonly yBaseline?: boolean | undefined;
+                readonly yStretch?: boolean | undefined;
                 readonly expand?: boolean | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
+            $attrs: import('vue').Attrs;
             $refs: {
                 [x: string]: unknown;
             };
@@ -87,7 +87,7 @@ declare function __VLS_template(): {
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
         } & Readonly<{
             gap: Spaces | number;
-        }> & Omit<Readonly<import('../Flex/Flex.vue').FlexProps> & Readonly<{}>, "gap"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        }> & Omit<Readonly<import('../Flex/Flex.vue').FlexProps> & Readonly<{}>, "gap"> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
                 default?(_: {}): any;
             };
@@ -109,6 +109,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
             readonly rowReverse?: boolean | undefined;
             readonly columnReverse?: boolean | undefined;
             readonly gap?: (Spaces | number) | undefined;
+            readonly center?: boolean | undefined;
             readonly xStart?: boolean | undefined;
             readonly xEnd?: boolean | undefined;
             readonly xCenter?: boolean | undefined;
@@ -119,11 +120,10 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
             readonly yStart?: boolean | undefined;
             readonly yEnd?: boolean | undefined;
             readonly yBaseline?: boolean | undefined;
+            readonly yStretch?: boolean | undefined;
             readonly expand?: boolean | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
+        $attrs: import('vue').Attrs;
         $refs: {
             [x: string]: unknown;
         };
@@ -159,7 +159,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
     } & Readonly<{
         gap: Spaces | number;
-    }> & Omit<Readonly<import('../Flex/Flex.vue').FlexProps> & Readonly<{}>, "gap"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+    }> & Omit<Readonly<import('../Flex/Flex.vue').FlexProps> & Readonly<{}>, "gap"> & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             default?(_: {}): any;
         };

package/dist/src/components/Divider/Divider.vue.d.ts

@@ -0,0 +1,33 @@
+interface BaseProps {
+    size?: number | string;
+    type?: 'solid' | 'dashed' | 'dotted';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<(BaseProps & {
+    vertical: true;
+    height: number | string;
+}) | (BaseProps & {
+    vertical?: false;
+    height?: never;
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<(BaseProps & {
+    vertical: true;
+    height: number | string;
+}) | (BaseProps & {
+    vertical?: false;
+    height?: never;
+})> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/Dropdown/Dropdown.vue.d.ts

@@ -0,0 +1,216 @@
+import { Placement } from '../../shared/types';
+import { nextTick } from 'vue';
+export interface Props {
+    /**
+     * Tooltip placement related to the anchor
+     */
+    placement?: Placement;
+    /**
+     * Set the minimum width of the dropdown element
+     */
+    minWidth?: number | string;
+    /**
+     * Sets the width of the dropdown to the width of its anchor
+     */
+    expand?: boolean;
+    /**
+     * Set he max height of the dropdown element before it starts scrolling
+     */
+    maxHeight?: number | string;
+    /**
+     * Disable mobile drawer behavior, always use the floating dropdown.
+     */
+    noMobileDrawer?: boolean;
+}
+declare function open(): void;
+declare function close(): void;
+declare function toggle(): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {
+            open: typeof open;
+            isOpen: boolean;
+            close: typeof close;
+            toggle: typeof toggle;
+        }): any;
+        default?(_: {
+            open: typeof open;
+            close: typeof close;
+            toggle: typeof toggle;
+            isOpen: boolean;
+        }): any;
+        default?(_: {
+            open: typeof open;
+            close: typeof close;
+            toggle: typeof toggle;
+            isOpen: boolean;
+        }): any;
+    };
+    refs: {
+        anchor: HTMLDivElement;
+        popoutEl: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly anchor: import('../../shared/types').PopoutMaybeElement<HTMLElement>;
+                readonly placement?: Placement | undefined;
+                readonly offset?: number | undefined;
+                readonly visible: boolean;
+                readonly transitionName?: string | "none" | undefined;
+                readonly teleport?: boolean | undefined;
+                readonly enterDelay?: number | undefined;
+                readonly leaveDelay?: number | undefined;
+                readonly onClickOutside?: (() => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                popout: HTMLDivElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: "clickOutside") => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{
+                onClickOutside?: (() => any) | undefined;
+            }>, {
+                el: HTMLDivElement | null;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                clickOutside: () => any;
+            }, string, {
+                teleport: boolean;
+                offset: number;
+                placement: Placement;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            teleport: boolean;
+            offset: number;
+            placement: Placement;
+        }> & Omit<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{
+            onClickOutside?: (() => any) | undefined;
+        }>, "el" | ("teleport" | "offset" | "placement")> & {
+            el: HTMLDivElement | null;
+        } & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    open: typeof open;
+    close: typeof close;
+    toggle: typeof toggle;
+    isOpen: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    anchor: HTMLDivElement;
+    popoutEl: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly anchor: import('../../shared/types').PopoutMaybeElement<HTMLElement>;
+            readonly placement?: Placement | undefined;
+            readonly offset?: number | undefined;
+            readonly visible: boolean;
+            readonly transitionName?: string | "none" | undefined;
+            readonly teleport?: boolean | undefined;
+            readonly enterDelay?: number | undefined;
+            readonly leaveDelay?: number | undefined;
+            readonly onClickOutside?: (() => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: import('vue').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            popout: HTMLDivElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "clickOutside") => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{
+            onClickOutside?: (() => any) | undefined;
+        }>, {
+            el: HTMLDivElement | null;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            clickOutside: () => any;
+        }, string, {
+            teleport: boolean;
+            offset: number;
+            placement: Placement;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        teleport: boolean;
+        offset: number;
+        placement: Placement;
+    }> & Omit<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{
+        onClickOutside?: (() => any) | undefined;
+    }>, "el" | ("teleport" | "offset" | "placement")> & {
+        el: HTMLDivElement | null;
+    } & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/{components → src/components}/Flex/Flex.vue.d.ts

@@ -1,23 +1,46 @@
 import { Spaces } from '../../shared/types';
 export interface FlexProps {
+    /** Render as inline flex container. */
     inline?: boolean;
+    /** Allow items to wrap onto multiple lines. */
     wrap?: boolean;
+    /** Wrap items in reverse order. */
     wrapReverse?: boolean;
+    /** Set main axis direction to row. */
     row?: boolean;
+    /** Set main axis direction to column. */
     column?: boolean;
+    /** Set main axis direction to row-reverse. */
     rowReverse?: boolean;
+    /** Set main axis direction to column-reverse. */
     columnReverse?: boolean;
+    /** Space between children. */
     gap?: Spaces | number;
+    /** Center content on both axes. */
+    center?: boolean;
+    /** Align items to the start on main axis. */
     xStart?: boolean;
+    /** Align items to the end on main axis. */
     xEnd?: boolean;
+    /** Center items on main axis. */
     xCenter?: boolean;
+    /** Distribute items with space-between on main axis. */
     xBetween?: boolean;
+    /** Distribute items with space-around on main axis. */
     xAround?: boolean;
+    /** Distribute items with space-evenly on main axis. */
     xEvenly?: boolean;
+    /** Center items on cross axis. */
     yCenter?: boolean;
+    /** Align items to start on cross axis. */
     yStart?: boolean;
+    /** Align items to end on cross axis. */
     yEnd?: boolean;
+    /** Align items to text baseline on cross axis. */
     yBaseline?: boolean;
+    /** Stretch items on cross axis. */
+    yStretch?: boolean;
+    /** Expand width to 100%. */
     expand?: boolean;
 }
 declare function __VLS_template(): {

package/dist/{components → src/components}/Grid/Grid.vue.d.ts

@@ -3,15 +3,41 @@ import { Spaces } from '../../shared/types';
  * This component is not meant for complex grids
  */
 interface Props {
+    /** Render as inline grid container. */
     inline?: boolean;
+    /** Space between rows and columns. */
     gap?: Spaces | number;
+    /** Grid template rows value or count. */
     rows?: number | string;
+    /** Grid template columns value or count. */
     columns?: number | string;
+    /** Center content on both axes. */
+    center?: boolean;
+    /** Align items to center on inline axis. */
+    xCenter?: boolean;
+    /** Align items to start on inline axis. */
+    xStart?: boolean;
+    /** Align items to end on inline axis. */
+    xEnd?: boolean;
+    /** Stretch items on inline axis. */
+    xStretch?: boolean;
+    /** Align items to center on block axis. */
     yCenter?: boolean;
+    /** Align items to start on block axis. */
     yStart?: boolean;
+    /** Align items to end on block axis. */
     yEnd?: boolean;
+    /** Align items to text baseline on block axis. */
     yBaseline?: boolean;
+    /** Stretch items on block axis. */
     yStretch?: boolean;
+    /** Auto-place grid items by rows. */
+    autoFlowRow?: boolean;
+    /** Auto-place grid items by columns. */
+    autoFlowColumn?: boolean;
+    /** Use dense auto-placement packing. */
+    autoFlowDense?: boolean;
+    /** Expand width to 100%. */
     expand?: boolean;
 }
 declare function __VLS_template(): {

package/dist/{components → src/components}/Input/Dropzone.vue.d.ts

@@ -30,9 +30,7 @@ declare function __VLS_template(): {
                 readonly disabled?: boolean | undefined;
                 readonly "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
+            $attrs: import('vue').Attrs;
             $refs: {
                 [x: string]: unknown;
             } & {
@@ -78,9 +76,9 @@ declare function __VLS_template(): {
             modelValue?: string | number;
         } & InputProps> & Readonly<{
             "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-        }>, "focus"> & import('vue').ShallowUnwrapRef<{
+        }>, "focus"> & {
             focus: () => void;
-        }> & {} & import('vue').ComponentCustomProperties & {} & {
+        } & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
                 before?(_: {}): any;
                 start?(_: {}): any;
@@ -122,9 +120,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
             readonly disabled?: boolean | undefined;
             readonly "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
+        $attrs: import('vue').Attrs;
         $refs: {
             [x: string]: unknown;
         } & {
@@ -170,9 +166,9 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
         modelValue?: string | number;
     } & InputProps> & Readonly<{
         "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-    }>, "focus"> & import('vue').ShallowUnwrapRef<{
+    }>, "focus"> & {
         focus: () => void;
-    }> & {} & import('vue').ComponentCustomProperties & {} & {
+    } & {} & import('vue').ComponentCustomProperties & {} & {
         $slots: {
             before?(_: {}): any;
             start?(_: {}): any;

package/dist/{components → src/components}/Popout/Popout.vue.d.ts

@@ -48,7 +48,9 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    el: HTMLDivElement | null;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     clickOutside: () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClickOutside?: (() => any) | undefined;

package/dist/{components → src/components}/Toast/toast.d.ts

@@ -39,9 +39,7 @@ export declare const toasts: import('vue').Ref<Map<number, {
     } | {
         [x: string]: any;
         setup?: ((this: void, props: import('@vue/shared').LooseRequired<any>, ctx: {
-            attrs: {
-                [x: string]: unknown;
-            };
+            attrs: import('vue').Attrs;
             slots: Readonly<{
                 [name: string]: import('vue').Slot<any> | undefined;
             }>;
@@ -169,9 +167,7 @@ export declare const toasts: import('vue').Ref<Map<number, {
     } | {
         [x: string]: any;
         setup?: ((this: void, props: import('@vue/shared').LooseRequired<any>, ctx: {
-            attrs: {
-                [x: string]: unknown;
-            };
+            attrs: import('vue').Attrs;
             slots: Readonly<{
                 [name: string]: import('vue').Slot<any> | undefined;
             }>;

package/dist/{shared → src/shared}/breakpoints.d.ts

@@ -1,11 +1,14 @@
 import { Ref } from 'vue';
 export declare enum Breakpoints {
-    Mobile = "mobile"
+    Mobile = "mobile",
+    Tablet = "tablet"
 }
 export declare const vuiBreakpoints: Ref<{
     mobile: number;
+    tablet: number;
 }, Record<Breakpoints, number> | {
     mobile: number;
+    tablet: number;
 }>;
 /**
  * Returns a reactive boolean indicating if the current window width is less than or equal to the specified breakpoint.