@dolanske/vui 0.1.4 → 0.2.0

package/README.md

@@ -5,111 +5,42 @@
 3. Build your thing bro
 
 ---
-Dev stuff dont look
-
-Opinionated vue UI library for building personal applications. Completely from scratch (besides some libraries later on ig xd).
-
-#### Components
-
-- [x] Breadcrumbs
-- [x] File input
-  - [x] Style normal input
-  - [x] Dropzone (its own component)
-- [x] Confirm dialog
-  - [x] 4 props (title, description, onCancel, onOk)
-  - [x] description is a slot
-- [x] Date picker
-- [x] Input Password
-  - [x] Wrapper around input with an eye icon which changes type to text
-- [x] Number field (+ and -)
-  - [x] This could be implemented once Input improvements are in
-- [x] Input improvements
-  - [x] Errors slot (border is red (maybe) and render red text before "after" slot). Prop is string[]
-  - [x] Prefix / suffix slots. Allow non-editable text/slots "within" the input component. This will require some styling changes as the input element itself cant use the border anymore
-- [x] Progress Bar
-- [x] Skeleton
-- [x] Button
-  - [x] Add `accent` button variant
-- [x] ButtonGroup
-  - [x] Merges buttons together vertically or horizontally (merged border radius etc)
-- [x] Toast
-- [x] Grid
-- [x] Flex
-- [x] Input
-- [x] Switch (like iOS)
-- [x] Radio button group
-- [x] Tabs
-  - [x] Filled
-- [x] Card
-- [x] Textarea
-  - [x] Autoexpand
-- [x] Modal
-- [x] Checkbox
-- [x] Select
-  - [x] Depends on <Dropdown />
-  - [x] Single select
-  - [x] Multiselect
-  - [x] With search
-  - [x] Clearing
-- [x] Accordion
-- [x] Alert
-- [x] Divider
-- [x] Badge
-- [x] Avatar
-- [x] Content - It's a class called `.article` (can also use the <article /> HTML element)
-- [x] Copy clipboard button
-  - [x] Renderless component consuming button props + copy prop
-  - [x] Copied text ()
-- [x] Kbd
-  - [x] Option to highlight if key is pressed
-- [x] Sheet
-  - [x] Size
-  - [x] Location
-- [x] Tooltip
-  - [x] Custom placement
-  - [x] Show up delay
-- [x] Dropdown
-  - [x] Dropdown itme
-  - [x] Dropdown title
-- [x] Table
-  - [x] Header & sorting
-  - [X] Pagination
-  - [x] Row select
-  - [x] Reactive options (ability to alter functionality without having to re-render whole table)
-  - [x] Interactivity
-- [x] Drawer
-- [x] Pagination
-- [x] Popout (https://floating-ui.com/)
-  - [x] Anchoring to a Component or element
-- [x] Input Slider
-  - [x] Just style normal input slider
 
 ## 1.0 Checklist
-- [x] Tweak all colors
-- [ ] Tweak all spacing
-- [ ] Move style attribute assignments to scoped style element instead (flex, grid etc)
-- [x] Add generic outline
-- [ ] Accessibility test
-- [ ] Document how to
-  - [ ] Set up fonts for the library (global and global mono)
-  - [ ] Document how to set up --color-accent
-- [ ] If something interactive is disabled, add disabled cursor
-- [ ] Make sure all components have their variables localized so that they can be changed on a component level
-- [ ] Create documentation site
-- [ ] Check how everything looks on mobile
-  - [ ] Fix everything down to 300px
-  - [ ] Make some tweaks for typography sizing
 
+- [ ] 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
+  - [ ] Make sure it works on mobile down to 340px
+    - [ ] Components
+    - [ ] Scale down Typography
 ---
 
-### Post 1.0 components
+## 1.1
+
+- [ ] Improve customization
+  - [ ] Test how easy it is to modify values
+  - [ ] Explore option to provide styling using CSS modules?
+  - [ ] Make sure all components have their variables localized so that they can be changed on a component level (ugh what a bother)
+
+### Post 1.2 components
 
 - [ ] Carousel (slider)
-- [ ] InputOTP
-  - [ ] Wrapper
-  - [ ] Slot
 - [ ] CodeBlock
   - [ ] Code highlighting
   - [ ] Copy code
   - [ ] Type, padding, etc
 - [ ] Command dropdown
+- [ ] Documentation
+  - [ ] Design my own documentation site (GENERIC?!)
+  - [ ] Pages
+    - [ ] CSS variable setup, accent, fonts
+    - [ ] CSS helpers
+    - [ ] Components
+    - [ ] Typography page
+
+### Whenever
+
+- [ ] Bump target from ES2022 whenever vite-plugin-dts is fixed

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

@@ -1,6 +1,7 @@
 export interface AccordionProps {
     open?: boolean;
     label?: string;
+    card?: boolean;
 }
 declare function open(): void;
 declare function close(): void;

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

@@ -1,9 +1,11 @@
 import { Sizes } from '../../shared/types';
 interface Props {
-    size?: Sizes;
+    size?: Sizes | number;
     url?: string;
     fallback?: string;
     icon?: 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 const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    avatar: HTMLDivElement;
+}, any>;
 export default _default;

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

@@ -1,10 +1,8 @@
 interface Props {
     thickness?: number;
-    size?: number;
+    size?: number | string;
     vertical?: boolean;
-    width?: number;
-    height?: number;
-    margin?: string;
+    margin?: string | number;
 }
 declare function __VLS_template(): {
     slots: {

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

@@ -0,0 +1,105 @@
+import { Placement } from '../../shared/types';
+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;
+}
+declare function open(): void;
+declare function close(): void;
+declare function toggle(): void;
+declare function __VLS_template(): {
+    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: true;
+        }): any;
+    };
+    refs: {
+        anchor: HTMLDivElement;
+        dropdown: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly anchor: import('../../shared/types').PopoutMaybeElement<HTMLElement>;
+                readonly placement?: Placement | undefined;
+                readonly offset?: number | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $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: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                offset: number;
+            }, {}, 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<{
+            offset: number;
+        }> & Omit<Readonly<import('../Popout/Popout.vue').Props> & Readonly<{}>, "offset"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+    };
+    attrs: Partial<{}>;
+};
+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, {}, 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/Input/Dropzone.vue.d.ts

@@ -26,6 +26,7 @@ declare function __VLS_template(): {
                 readonly multiple?: boolean | undefined;
                 readonly min?: number | undefined;
                 readonly max?: number | undefined;
+                readonly disabled?: boolean | undefined;
                 readonly "onUpdate:modelValue"?: ((modelValue: string | number) => any) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
             $attrs: {

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

@@ -15,6 +15,7 @@ export interface InputProps {
     multiple?: boolean;
     min?: number;
     max?: number;
+    disabled?: boolean;
 }
 declare let __VLS_typeProps: InputProps;
 type __VLS_PublicProps = {

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

@@ -0,0 +1,43 @@
+import { ModelRef, Ref } from 'vue';
+export interface OtpContext {
+    otpValue: ModelRef<string>;
+    cursorIndex: Ref<number>;
+    redacted: Ref<boolean>;
+    register: () => void;
+}
+interface Props {
+    mode?: 'num' | 'char' | 'both';
+    redacted?: boolean;
+}
+declare let __VLS_typeProps: Props;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        inputRef: HTMLInputElement;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value?: string | undefined) => any;
+    "update:modelValue": (modelValue: string) => any;
+    complete: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value?: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((modelValue: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: HTMLInputElement;
+}, 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/OTP/OTPItem.vue.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    i: number;
+}
+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>;
+export default _default;

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

@@ -1,6 +1,6 @@
-import { MaybeElement, Placement } from '@floating-ui/vue';
-interface Props {
-    anchor: MaybeElement<HTMLElement>;
+import { Placement, PopoutMaybeElement } from '../../shared/types';
+export interface Props {
+    anchor: PopoutMaybeElement<HTMLElement>;
     /**
      * Override the autoPlacement option
      */

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

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

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

@@ -1,6 +1,5 @@
-import { VNode } from 'vue';
 import { FlexProps } from '../Flex/Flex.vue';
-import { RadioProps } from './Radio.vue';
+import { default as Radio } from './Radio.vue';
 interface Props extends FlexProps {
     disabled?: boolean;
 }
@@ -10,17 +9,9 @@ type __VLS_PublicProps = {
 } & typeof __VLS_typeProps;
 declare function __VLS_template(): {
     slots: Readonly<{
-        default: () => {
-            children: Array<VNode & {
-                props: RadioProps;
-            }>;
-        }[];
+        default: () => Array<typeof Radio>;
     }> & {
-        default: () => {
-            children: Array<VNode & {
-                props: RadioProps;
-            }>;
-        }[];
+        default: () => Array<typeof Radio>;
     };
     refs: {};
     attrs: Partial<{}>;

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

@@ -1,4 +1,4 @@
-import { Placement } from '@floating-ui/vue';
+import { Placement } from '../../shared/types';
 interface Props {
     /**
      * Tooltip placement related to the anchor

package/dist/index.d.ts

@@ -28,6 +28,8 @@ import { default as Kbd } from './components/Kbd/Kbd.vue';
 import { default as KbdGroup } from './components/Kbd/KbdGroup.vue';
 import { default as Confirm } from './components/Modal/Confirm.vue';
 import { default as Modal } from './components/Modal/Modal.vue';
+import { default as OTP } from './components/OTP/OTP.vue';
+import { default as OTPItem } from './components/OTP/OTPItem.vue';
 import { default as Pagination } from './components/Pagination/Pagination.vue';
 import { default as Popout } from './components/Popout/Popout.vue';
 import { default as Progress } from './components/Progress/Progress.vue';
@@ -51,4 +53,4 @@ import { default as Toasts } from './components/Toast/Toasts.vue';
 import { default as Tooltip } from './components/Tooltip/Tooltip.vue';
 import { default as Backdrop } from './internal/Backdrop/Backdrop.vue';
 import { searchString } from './shared/helpers';
-export { Accordion, AccordionGroup, Alert, Avatar, Backdrop, Badge, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Calendar, Card, Cell, Checkbox, Confirm, CopyClipboard, Counter, Divider, Drawer, Dropdown, DropdownItem, DropdownTitle, Dropzone, File, Flex, Grid, Header, Input, Kbd, KbdGroup, Modal, Pagination, Password, Popout, Progress, pushToast, Radio, RadioGroup, removeToast, Row, searchString, Select, SelectAll, SelectRow, Sheet, Skeleton, Spinner, Switch, Tab, Table, Tabs, Textarea, Toasts, Tooltip, };
+export { Accordion, AccordionGroup, Alert, Avatar, Backdrop, Badge, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Calendar, Card, Cell, Checkbox, Confirm, CopyClipboard, Counter, Divider, Drawer, Dropdown, DropdownItem, DropdownTitle, Dropzone, File, Flex, Grid, Header, Input, Kbd, KbdGroup, Modal, OTP, OTPItem, Pagination, Password, Popout, Progress, pushToast, Radio, RadioGroup, removeToast, Row, searchString, Select, SelectAll, SelectRow, Sheet, Skeleton, Spinner, Switch, Tab, Table, Tabs, Textarea, Toasts, Tooltip, };

package/dist/shared/helpers.d.ts

@@ -1,7 +1,7 @@
 export declare function createArray(length: number, startOffset?: number): number[];
 export declare function searchString(match: string | string[], input: string): boolean;
 export declare function getMaybeRefLength(value: string | number): number;
-export declare function isNil(value: any): value is undefined;
+export declare function isNil(value: any): value is undefined | null;
 /**
  * Checks wether a color is light or dark, depending on
  */
@@ -14,3 +14,10 @@ export declare function calculateColorLightness(r: number, g: number, b: number)
 export declare function stringRgbToValues(rgbString: string): [number, number, number];
 export declare function randomMinMax(min: number, max: number): number;
 export declare function delay(amount: number): Promise<any>;
+export declare function setCharAt(str: string, char: string | number, index: number): string;
+/**
+ * Takes in a value and if it is a number, appends "px" to it, otherwise returns
+ * the original value.
+ *
+ */
+export declare function formatUnitValue(value: string | number, unit?: string): string;

package/dist/shared/types.d.ts

@@ -1,3 +1,4 @@
+import { ComponentPublicInstance } from 'vue';
 export declare enum Size {
     s = "s",
     m = "m",
@@ -8,3 +9,5 @@ export type DeepRequired<T> = {
     [K in keyof T]: DeepRequired<T[K]>;
 } & Required<T>;
 export type VueClass = string | Record<string, boolean> | Array<string | Record<string, string | boolean>>;
+export type PopoutMaybeElement<T> = T | ComponentPublicInstance | null | undefined;
+export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';