@dolanske/vui 0.4.0 → 1.0.0

package/README.md

@@ -9,22 +9,14 @@
 ## 1.0 Checklist
 
 - [ ] Real life test
-  - [ ] Might be useful to build this in the hivecom project
-  - [ ] Build an example page with 100% of the components
-  - [ ] Run accessibility tools on it
-  - [ ] Run color contrast test
+  - [x] Might be useful to build this in the hivecom project
+  - [x] Build an example page with 100% of the components
+  - [x] Run accessibility tools on it
+  - [x] Run color contrast test
   - [ ] Make sure it works on mobile down to 340px
     - [ ] Components
     - [ ] Scale down Typography
-- [ ] Sidebar
-  - [x] Base sidebar
-  - [x] Sidebar header slot
-  - [x] Sidebar footer slot
-  - [ ] Option to hide (animated)
-  - [x] Option to render icons only / reduced size
-  - [ ] Controlled from outside (v-model?, method?)
-  - [x] Option to have sidebar hover over content, if it's closed and user moves
-  cursor all the way to the left
+- [x] Sidebar
 
 ---
 
@@ -35,6 +27,7 @@
   - [ ] Code highlighting
   - [ ] Copy code
   - [ ] Type, padding, etc
+  - [ ] Use this https://shiki.style/guide/install
 - [ ] Command dropdown
 - [ ] Documentation
   - [ ] Design my own documentation site (GENERIC?!)

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

@@ -5,13 +5,19 @@ interface Props {
      */
     icon?: string;
     /**
-     * Setting a title and description will use slightly different styling other than slots.
+     * Setting a title and description will use slightly different styling other
+     * than slots.
      */
     title?: string;
+    /**
+     * Use strong color
+     */
+    filled?: boolean;
     description?: string;
 }
 declare function __VLS_template(): {
     slots: {
+        default?(_: {}): any;
         default?(_: {}): any;
         end?(_: {}): any;
     };

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

@@ -6,5 +6,19 @@ interface Props {
     icon?: string;
     alt?: string;
 }
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+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, {}, 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/Badge/Badge.vue.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    variant?: 'neutral' | 'danger' | 'warning' | 'success' | 'info';
+    variant?: 'neutral' | 'danger' | 'warning' | 'success' | 'info' | 'accent';
     outline?: boolean;
     filled?: boolean;
 }

package/dist/components/Breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -1,6 +1,6 @@
 export interface BreadcrumbItemProps {
     label?: string;
-    path?: string;
+    href?: string;
 }
 declare function __VLS_template(): {
     slots: {

package/dist/components/Button/Button.vue.d.ts

@@ -1,25 +1,15 @@
 import { Sizes } from '../../shared/types';
-export type Variants = 'default' | 'danger' | 'success' | 'link' | 'blue' | 'accent';
+export type Variants = 'fill' | 'danger' | 'success' | 'link' | 'accent' | 'gray';
 interface Props {
     loading?: boolean;
+    size?: Sizes;
     expand?: boolean;
     square?: boolean;
-    dashed?: boolean;
+    icon?: string;
+    variant?: Variants;
+    outline?: boolean;
     disabled?: boolean;
-    size?: Sizes;
-    /**
-     * Sets the hover styling property
-     */
-    active?: boolean;
-    /**
-     * No styling applied to the button unless hovered
-     */
     plain?: boolean;
-    variant?: Variants;
-    /**
-     * The children will be set to an icon and the icon will become a square
-     */
-    icon?: string;
 }
 declare function __VLS_template(): {
     slots: {

package/dist/components/ButtonGroup/ButtonGroup.vue.d.ts

@@ -1,5 +1,7 @@
+import { Space } from '../../shared/types';
 interface Props {
     vertical?: boolean;
+    gap?: Space | number;
 }
 declare function __VLS_template(): {
     slots: {

package/dist/components/Calendar/Calendar.vue.d.ts

@@ -12,11 +12,11 @@ declare const __VLS_component: import('vue').DefineComponent<VueDatePickerProps
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<VueDatePickerProps & {
     expand?: boolean;
 }> & Readonly<{}>, {
-    dark: boolean;
     expand: boolean;
     format: string | ((date: Date) => string) | ((dates: Date[]) => string);
     autoApply: boolean;
     autoPosition: boolean | "top" | "bottom";
+    monthNameFormat: "long" | "short";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/Checkbox/Checkbox.vue.d.ts

@@ -4,6 +4,7 @@ interface Props {
     iconOff?: string;
     disabled?: boolean;
     checked?: boolean;
+    accent?: boolean;
 }
 declare let __VLS_typeProps: Props;
 type __VLS_PublicProps = {

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

@@ -12,6 +12,10 @@ export interface Props {
      * 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;
 }
 declare function open(): void;
 declare function close(): void;
@@ -40,6 +44,7 @@ declare function __VLS_template(): {
                 readonly anchor: import('../../shared/types').PopoutMaybeElement<HTMLElement>;
                 readonly placement?: Placement | undefined;
                 readonly offset?: number | undefined;
+                readonly onClickOutside?: (() => any) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
             $attrs: {
                 [x: string]: unknown;
@@ -55,9 +60,13 @@ declare function __VLS_template(): {
             $root: import('vue').ComponentPublicInstance | null;
             $parent: import('vue').ComponentPublicInstance | null;
             $host: Element | null;
-            $emit: (event: string, ...args: any[]) => void;
+            $emit: (event: "clickOutside") => void;
             $el: any;
-            $options: import('vue').ComponentOptionsBase<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            $options: import('vue').ComponentOptionsBase<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{
+                onClickOutside?: (() => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                clickOutside: () => any;
+            }, string, {
                 offset: number;
             }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
@@ -81,7 +90,9 @@ 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<{
             offset: number;
-        }> & Omit<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{}>, "offset"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        }> & Omit<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{
+            onClickOutside?: (() => any) | undefined;
+        }>, "offset"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
             $slots: {
                 default?(_: {}): any;
             };
@@ -95,7 +106,11 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {
     close: typeof close;
     toggle: typeof toggle;
     isOpen: import('vue').Ref<boolean, boolean>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -7,7 +7,11 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<{
+    sticky?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    sticky?: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/Flex/Flex.vue.d.ts

@@ -28,7 +28,9 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<FlexProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FlexProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<FlexProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<FlexProps> & Readonly<{}>, {
+    gap: Space | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/Grid/Grid.vue.d.ts

@@ -7,7 +7,10 @@ interface Props {
     gap?: Space | number;
     rows?: number | string;
     columns?: number | string;
-    areas?: string[];
+    alignCenter?: boolean;
+    alignStart?: boolean;
+    alignEnd?: boolean;
+    alignBaseline?: boolean;
 }
 declare function __VLS_template(): {
     slots: {
@@ -17,7 +20,9 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 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, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    gap: Space | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/Input/Dropzone.vue.d.ts

@@ -12,7 +12,7 @@ declare function __VLS_template(): {
             $data: {};
             $props: {
                 readonly modelValue?: (string | number) | undefined;
-                readonly type?: import('vue').InputTypeHTMLAttribute | undefined;
+                readonly type?: import('./Input.vue').InputType | undefined;
                 readonly label?: string | undefined;
                 readonly hint?: string | undefined;
                 readonly limit?: (number | string) | undefined;

package/dist/components/Input/Input.vue.d.ts

@@ -1,6 +1,6 @@
-import { InputTypeHTMLAttribute } from 'vue';
+export type InputType = 'text' | 'password' | 'color' | 'date' | 'email' | 'number' | 'range' | 'search' | 'tel' | 'time' | 'url' | 'file';
 export interface InputProps {
-    type?: InputTypeHTMLAttribute;
+    type?: InputType;
     label?: string;
     hint?: string;
     limit?: number | string;

package/dist/components/Kbd/KbdGroup.vue.d.ts

@@ -1,17 +1,9 @@
-import { VNode } from 'vue';
+import { default as Kbd } from './Kbd.vue';
 declare function __VLS_template(): {
     slots: Readonly<{
-        default: () => Array<VNode & {
-            props: {
-                keys: string;
-            };
-        }>;
+        default: () => Array<typeof Kbd>;
     }> & {
-        default: () => Array<VNode & {
-            props: {
-                keys: string;
-            };
-        }>;
+        default: () => Array<typeof Kbd>;
     };
     refs: {};
     attrs: Partial<{}>;

package/dist/components/Modal/Confirm.vue.d.ts

@@ -29,7 +29,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     onConfirm?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
 }>, {
-    size: import('../../shared/types').Sizes | "full";
+    size: import('../../shared/types').Sizes | "full" | "screen";
     cancelText: string;
     canDismiss: boolean;
     confirmText: string;

package/dist/components/Modal/Modal.vue.d.ts

@@ -1,7 +1,7 @@
 import { Sizes } from '../../shared/types';
 import { Props as CardProps } from '../Card/Card.vue';
 export interface ModalProps {
-    size?: Sizes | 'full';
+    size?: Sizes | 'full' | 'screen';
     /**
      * Modal wraps a floating card. You can optinally pass in any props you'd pass
      * into the <Card /> component.

package/dist/components/Pagination/Pagination.vue.d.ts

@@ -1,9 +1,11 @@
+import { Variants } from '../Button/Button.vue';
 import { Pagination } from './pagination';
 interface Props {
     numbers?: boolean;
     pagination: Pagination;
     prevNext?: boolean;
     firstLast?: boolean;
+    variant?: Variants;
 }
 declare function setNext(): void;
 declare function setPrev(): void;
@@ -29,6 +31,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onChange?: ((page: number) => any) | undefined;
 }>, {
+    variant: Variants;
     numbers: boolean;
     prevNext: boolean;
     firstLast: boolean;

package/dist/components/Popout/Popout.vue.d.ts

@@ -1,5 +1,8 @@
 import { Placement, PopoutMaybeElement } from '../../shared/types';
 export interface Props {
+    /**
+     * Reference to the HTML element the Popout is anchored to
+     */
     anchor: PopoutMaybeElement<HTMLElement>;
     /**
      * Override the autoPlacement option
@@ -20,7 +23,11 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 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<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clickOutside: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClickOutside?: (() => any) | undefined;
+}>, {
     offset: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     popout: HTMLDivElement;

package/dist/components/Progress/Progress.vue.d.ts

@@ -22,8 +22,10 @@ type __VLS_PublicProps = {
     modelValue?: number;
 } & typeof __VLS_typeProps;
 declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    done: () => any;
     "update:modelValue": (modelValue: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDone?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((modelValue: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     progress: HTMLDivElement;

package/dist/components/Radio/Radio.vue.d.ts

@@ -2,6 +2,7 @@ export interface RadioProps {
     label?: string;
     disabled?: boolean;
     value: any;
+    accent?: boolean;
 }
 declare let __VLS_typeProps: RadioProps;
 type __VLS_PublicProps = {

package/dist/components/Select/Select.vue.d.ts

@@ -19,6 +19,8 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         search?: boolean;
         maxActiveOptions?: number;
         showClear?: boolean;
+        disabled?: boolean;
+        errors?: string[];
     })> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/components/Sheet/Sheet.vue.d.ts

@@ -16,6 +16,9 @@ declare function __VLS_template(): {
         default?(_: {
             close: typeof close;
         }): any;
+        footer?(_: {
+            close: typeof close;
+        }): any;
     };
     refs: {};
     attrs: Partial<{}>;

package/dist/components/Switch/Switch.vue.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     label?: string;
     disabled?: boolean;
+    accent?: boolean;
 }
 declare let __VLS_typeProps: Props;
 type __VLS_PublicProps = {

package/dist/components/Table/index.d.ts

@@ -0,0 +1,6 @@
+import { default as Cell } from './Cell.vue';
+import { default as Head } from './Head.vue';
+import { default as Root } from './Root.vue';
+import { default as SelectAll } from './SelectAll.vue';
+import { default as SelectRow } from './SelectRow.vue';
+export { Cell, Head, Root, SelectAll, SelectRow };

package/dist/components/Table/table.d.ts

@@ -22,7 +22,7 @@ interface TableOptionsInput {
     };
     select?: boolean;
 }
-export declare function defineTable<const Dataset extends Array<BaseRow>>(computedDataset: MaybeRefOrGetter<Dataset>, tableOptions?: TableOptionsInput): {
+export declare function defineTable<const Dataset extends any[]>(computedDataset: MaybeRefOrGetter<Dataset>, tableOptions?: TableOptionsInput): {
     setSort: (key: keyof Dataset[number], type?: "asc" | "desc" | "toggle") => void;
     clearSort: () => void;
     search: Ref<string | undefined, string | undefined>;

package/dist/components/Tabs/Tab.vue.d.ts

@@ -1,8 +1,21 @@
 export interface TabProps {
     disabled?: boolean;
-    id?: string;
-    label: string;
+    label?: string;
     icon?: string;
 }
-declare const _default: import('vue').DefineComponent<TabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<TabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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/Tabs/Tabs.vue.d.ts

@@ -14,10 +14,14 @@ declare function __VLS_template(): {
         default: () => Array<VNode & {
             props: TabProps;
         }>;
+        start: unknown;
+        end: unknown;
     }> & {
         default: () => Array<VNode & {
             props: TabProps;
         }>;
+        start: unknown;
+        end: unknown;
     };
     refs: {
         tabs: HTMLDivElement;