@dolanske/vui 1.11.12 → 1.12.0

package/README.md

@@ -1,12 +1,12 @@
-# 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
-
-[Visit the docs 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
+
+[Visit the docs here <](https://dolanske.github.io/vui/)

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

@@ -21,6 +21,12 @@ interface Props {
      * Vertical alignment of the icon
      */
     iconAlign?: 'start' | 'center' | 'end';
+    /**
+     * Hides the icon completely. If you hide the icon, make sure you're using
+     * `filled` variant, otherwise the alert will be missing the relevant
+     * color-coding.
+     */
+    hideIcon?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

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

@@ -12,6 +12,7 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
         icon?(_: {}): any;
+        overlay?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLDivElement;

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

@@ -1,7 +1,10 @@
+import { Sizes } from '../../shared/types';
 interface Props {
     variant?: 'neutral' | 'danger' | 'warning' | 'success' | 'info' | 'accent';
     outline?: boolean;
     filled?: boolean;
+    size?: Sizes;
+    circle?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/src/components/Badge/BadgeGroup.vue.d.ts

@@ -0,0 +1,21 @@
+import { Spaces } from '../../shared/types';
+interface Props {
+    gap?: Spaces | number;
+}
+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<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & 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/Indicator/Indicator.vue.d.ts

@@ -0,0 +1,25 @@
+import { Sizes } from '../../shared/types';
+interface Props {
+    variant?: 'alert' | 'online' | 'offline' | 'away';
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    size?: Sizes;
+    outline?: boolean;
+    ripple?: boolean;
+}
+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<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & 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/Popout/PopoutHover.vue.d.ts

@@ -0,0 +1,171 @@
+import { Props } from './Popout.vue';
+type PopoutHoverProps = Omit<Props, 'anchor' | 'visible'> & {
+    /**
+     * If set to true, Popout will not be rendered on hover. Trigger stays
+     */
+    disabled?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        anchorRef: HTMLDivElement;
+        popoutRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly anchor: import('../../shared/types').PopoutMaybeElement<HTMLElement>;
+                readonly placement?: import('../../shared/types').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<Props> & Readonly<{
+                onClickOutside?: (() => any) | undefined;
+            }>, {
+                el: HTMLDivElement | null;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                clickOutside: () => any;
+            }, string, {
+                teleport: boolean;
+                offset: number;
+                placement: import('../../shared/types').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 import('vue').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: import('../../shared/types').Placement;
+        }> & Omit<Readonly<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<PopoutHoverProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PopoutHoverProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    anchorRef: HTMLDivElement;
+    popoutRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly anchor: import('../../shared/types').PopoutMaybeElement<HTMLElement>;
+            readonly placement?: import('../../shared/types').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<Props> & Readonly<{
+            onClickOutside?: (() => any) | undefined;
+        }>, {
+            el: HTMLDivElement | null;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            clickOutside: () => any;
+        }, string, {
+            teleport: boolean;
+            offset: number;
+            placement: import('../../shared/types').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 import('vue').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: import('../../shared/types').Placement;
+    }> & Omit<Readonly<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/src/components/Tooltip/Tooltip.vue.d.ts

@@ -13,7 +13,7 @@ interface Props {
      */
     leaveDelay?: number;
     /**
-     * If set to true, tooltip will not be rendered
+     * If set to true, tooltip will not be rendered on hover. Trigger stays
      */
     disabled?: boolean;
 }

package/dist/src/index.d.ts

@@ -6,6 +6,7 @@ import { default as Alert } from './components/Alert/Alert.vue';
 import { default as Avatar } from './components/Avatar/Avatar.vue';
 import { default as AvatarGroup } from './components/Avatar/AvatarGroup.vue';
 import { default as Badge } from './components/Badge/Badge.vue';
+import { default as BadgeGroup } from './components/Badge/BadgeGroup.vue';
 import { default as BreadcrumbItem } from './components/Breadcrumbs/BreadcrumbItem.vue';
 import { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.vue';
 import { default as Button } from './components/Button/Button.vue';
@@ -22,6 +23,7 @@ import { default as DropdownItem } from './components/Dropdown/DropdownItem.vue'
 import { default as DropdownTitle } from './components/Dropdown/DropdownTitle.vue';
 import { default as Flex } from './components/Flex/Flex.vue';
 import { default as Grid } from './components/Grid/Grid.vue';
+import { default as Indicator } from './components/Indicator/Indicator.vue';
 import { default as Color } from './components/Input/Color.vue';
 import { default as Counter } from './components/Input/Counter.vue';
 import { default as Dropzone } from './components/Input/Dropzone.vue';
@@ -39,6 +41,7 @@ import { default as OTPItem } from './components/OTP/OTPItem.vue';
 import { paginate } from './components/Pagination/pagination';
 import { default as Pagination } from './components/Pagination/Pagination.vue';
 import { default as Popout } from './components/Popout/Popout.vue';
+import { default as PopoutHover } from './components/Popout/PopoutHover.vue';
 import { default as Progress } from './components/Progress/Progress.vue';
 import { default as Radio } from './components/Radio/Radio.vue';
 import { default as RadioGroup } from './components/Radio/RadioGroup.vue';
@@ -60,4 +63,4 @@ import { searchString } from './shared/helpers';
 import { setColorTheme, theme } from './shared/theme';
 import { useViewTransition } from './shared/viewTransition';
 import * as Table from './components/Table';
-export { Accordion, AccordionGroup, Alert, Avatar, AvatarGroup, Backdrop, Badge, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Color, type Command, Commands, Confirm, CopyClipboard, Counter, defineTable, Divider, Drawer, Dropdown, DropdownItem, DropdownTitle, Dropzone, File, Flex, Grid, Input, Kbd, KbdGroup, Marquee, Modal, OTP, OTPItem, paginate, Pagination, Password, Popout, Progress, pushToast, Radio, RadioGroup, removeToast, searchString, Select, setColorTheme, Sheet, Sidebar, type Sizes, Skeleton, type Spaces as Space, type SpaceSize, Spinner, Switch, Tab, Table, Tabs, Textarea, theme, Toasts, Tooltip, useBreakpoint, useViewTransition, vuiBreakpoints, };
+export { Accordion, AccordionGroup, Alert, Avatar, AvatarGroup, Backdrop, Badge, BadgeGroup, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Color, type Command, Commands, Confirm, CopyClipboard, Counter, defineTable, Divider, Drawer, Dropdown, DropdownItem, DropdownTitle, Dropzone, File, Flex, Grid, Indicator, Input, Kbd, KbdGroup, Marquee, Modal, OTP, OTPItem, paginate, Pagination, Password, Popout, PopoutHover, Progress, pushToast, Radio, RadioGroup, removeToast, searchString, Select, setColorTheme, Sheet, Sidebar, type Sizes, Skeleton, type Spaces, type SpaceSize, Spinner, Switch, Tab, Table, Tabs, Textarea, theme, Toasts, Tooltip, useBreakpoint, useViewTransition, vuiBreakpoints, };

package/dist/src/shared/viewTransition.d.ts

@@ -13,8 +13,9 @@ interface ViewTransitionComposable {
  * A generic composable for running View Transitions.
  *
  * In order to setup view transitions, we need to provide `transition-name` in
- * CSS to the components we want to transition and then apply before & after
- * styles to them via the selector
+ * CSS to the components we want to transition and then apply old & new
+ * styles to them via the following selectors. At minimum, you should provide
+ * the animation-duration
  *
  * ```css
  * ::view-transition-old(<transition-name>) {}