@teammodlr/ui-kit 1.0.6 → 2.0.0

package/lib/__storybook__/argTypes.d.ts

@@ -21,9 +21,18 @@ export declare const colorArgType: () => {
         };
     };
 };
+export declare const variantArgType: () => {
+    variant: {
+        options: string[];
+        control: {
+            type: string;
+            default: string;
+        };
+    };
+};
 export declare const popperPositionArgType: () => {
     placement: {
-        options: readonly import("@/composables/usePopper").Placement[];
+        options: readonly import("@popperjs/core/lib/enums").Placement[];
         control: {
             type: string;
         };

package/lib/components/avatar/Avatar.vue.d.ts

@@ -1,3 +1,5 @@
+import type { PropType } from 'vue';
+import type { Size } from "../../types/props";
 declare const _default: import("vue").DefineComponent<{
     src: {
         type: StringConstructor;
@@ -8,32 +10,21 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: PropType<Size>;
         default: string;
     };
-    fit: {
-        type: StringConstructor;
-        default: string;
-    };
-    variant: {
-        type: StringConstructor;
-        default: string;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }, {
     avatar: import("vue").Ref<HTMLElement | null>;
-    avatarGroup: undefined;
-    classes: import("vue").ComputedRef<{
+    avatarGroup: import("../avatargroup/symbol").AvatarGroupState | undefined;
+    classes: import("vue").ComputedRef<(string | string[] | {
         [x: string]: boolean;
-        'm-avatar': boolean;
-    }>;
-    customSize: import("vue").ComputedRef<{
-        width: string | number;
-        height: string | number;
-    } | {
-        width?: undefined;
-        height?: undefined;
-    }>;
+    })[]>;
     imageExists: import("vue").Ref<boolean>;
+    imageClass: string;
     handleImageLoadError: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (e: Event) => true;
@@ -47,24 +38,19 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: PropType<Size>;
         default: string;
     };
-    fit: {
-        type: StringConstructor;
-        default: string;
-    };
-    variant: {
-        type: StringConstructor;
-        default: string;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }>> & {
     onError?: ((e: Event) => any) | undefined;
 }, {
     src: string;
-    fit: string;
+    size: Size;
+    rounded: boolean;
     srcSet: string;
-    size: string | number;
-    variant: string;
 }>;
 export default _default;

package/lib/components/avatar/style/Avatar.css.d.ts

@@ -0,0 +1,9 @@
+export declare const vars: {
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    radius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const base: string;
+export declare const size: Record<"sm" | "md" | "lg" | "xs" | "xl", string>;
+export declare const image: string;
+export declare const rounded: string;
+export declare const outline: string;

package/lib/components/avatar/style/index.d.ts

@@ -0,0 +1 @@
+export * from './Avatar.css';

package/lib/components/avatargroup/AvatarGroup.vue.d.ts

@@ -1,34 +1,49 @@
+import { type PropType } from 'vue';
+import * as style from './style';
+import type { Options } from './symbol';
+import type { Size } from "../../types/props";
 declare const _default: import("vue").DefineComponent<{
+    options: {
+        type: PropType<Options[]>;
+        default: () => never[];
+    };
     max: {
         type: NumberConstructor;
         default: number;
     };
     size: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: PropType<Size>;
         default: string;
     };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
-    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-        max: {
-            type: NumberConstructor;
-            default: number;
-        };
-        size: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: string;
-        };
-    }>> & {}>>;
+    style: typeof style;
+    avatars: import("vue").ComputedRef<Options[]>;
+    remaining: import("vue").ComputedRef<number>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<Options[]>;
+        default: () => never[];
+    };
     max: {
         type: NumberConstructor;
         default: number;
     };
     size: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: PropType<Size>;
         default: string;
     };
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
-    size: string | number;
+    size: Size;
+    rounded: boolean;
+    options: Options[];
     max: number;
 }>;
 export default _default;

package/lib/components/avatargroup/style/AvatarGroup.css.d.ts

@@ -0,0 +1,2 @@
+export declare const base: string;
+export declare const item: string;

package/lib/components/avatargroup/style/index.d.ts

@@ -0,0 +1 @@
+export * from './AvatarGroup.css';

package/lib/components/avatargroup/symbol.d.ts

@@ -0,0 +1,13 @@
+import type { InjectionKey } from "vue";
+import type { Size } from "../../types/props";
+export type Options = {
+    src: string;
+    srcSet: string;
+    alt: string;
+};
+export interface AvatarGroupState {
+    max: number;
+    size: Size;
+    rounded: boolean;
+}
+export declare const AVATAR_GROUP_STATE: InjectionKey<AvatarGroupState>;

package/lib/components/badge/Badge.vue.d.ts

@@ -0,0 +1,30 @@
+import type { Variant } from '../../types/props';
+import { type PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    variant: {
+        type: PropType<Variant>;
+        default: string;
+    };
+    secondary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    textClass: string;
+    baseClass: import("vue").ComputedRef<(string | {
+        [x: string]: boolean;
+    })[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<Variant>;
+        default: string;
+    };
+    secondary: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    variant: Variant;
+    secondary: boolean;
+}>;
+export default _default;

package/lib/components/badge/style/Badge.css.d.ts

@@ -0,0 +1,4 @@
+export declare const base: string;
+export declare const text: string;
+export declare const variant: Record<"error" | "default" | "primary" | "tertiary" | "success" | "warning", string>;
+export declare const secondary: Record<"error" | "default" | "primary" | "tertiary" | "success" | "warning", string>;

package/lib/components/badge/style/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge.css';

package/lib/components/breadcrumb/Breadcrumb.vue.d.ts

@@ -1,24 +1,33 @@
+import type { PropType } from "vue";
+import type { BreadcrumbOptions } from "./symbol";
 declare const _default: import("vue").DefineComponent<{
     seperator: {
         type: StringConstructor;
         default: string;
     };
+    options: {
+        type: PropType<BreadcrumbOptions[]>;
+    };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         seperator: {
             type: StringConstructor;
             default: string;
         };
+        options: {
+            type: PropType<BreadcrumbOptions[]>;
+        };
     }>> & {}>>;
     refreshItems: () => void;
-    classes: import("vue").ComputedRef<{
-        'm-breadcrumbs': boolean;
-    }>;
+    classes: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     seperator: {
         type: StringConstructor;
         default: string;
     };
+    options: {
+        type: PropType<BreadcrumbOptions[]>;
+    };
 }>>, {
     seperator: string;
 }>;

package/lib/components/{breadcrumbitem → breadcrumb}/BreadcrumbItem.vue.d.ts

@@ -1,18 +1,29 @@
+import * as style from "./style";
 declare const _default: import("vue").DefineComponent<{
     label: {
         type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
+    onClick: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
 }, {
     label: import("vue").Ref<string | number>;
     separator: import("vue").Ref<string>;
+    style: typeof style;
     handleClick: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
+    onClick: {
+        type: FunctionConstructor;
+        default: () => void;
+    };
 }>>, {
     label: string | number;
+    onClick: Function;
 }>;
 export default _default;

package/lib/components/breadcrumb/style/Breadcrumb.css.d.ts

@@ -0,0 +1,4 @@
+export declare const base: string;
+export declare const item: string;
+export declare const link: string;
+export declare const separator: string;

package/lib/components/breadcrumb/style/index.d.ts

@@ -0,0 +1 @@
+export * from "./Breadcrumb.css";

package/lib/components/breadcrumb/symbol.d.ts

@@ -0,0 +1,13 @@
+import type { InjectionKey } from "vue";
+export interface BreadcrumbOptions {
+    label: string;
+    name?: string | (() => string);
+}
+export interface BreadcrumbItemState {
+    label: string | number;
+}
+export interface BreadcrumbState {
+    separator: string;
+    refreshItems: () => void;
+}
+export declare const BREADCRUMB_STATE: InjectionKey<BreadcrumbState>;

package/lib/components/button/Button.vue.d.ts

@@ -1,12 +1,12 @@
-import type { PropType } from 'vue';
-import type { Color, Size } from "@/types/props";
+import type { PropType } from "vue";
+import type { Size, Variant } from "../../types/props";
 declare const _default: import("vue").DefineComponent<{
     type: {
         type: StringConstructor;
         default: string;
     };
-    color: {
-        type: PropType<Color>;
+    variant: {
+        type: PropType<Variant>;
         default: string;
     };
     size: {
@@ -31,42 +31,48 @@ declare const _default: import("vue").DefineComponent<{
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
-        default: string;
+        default: null;
     };
     href: {
         type: StringConstructor;
         default: string;
     };
-    icon: {
+    link: {
         type: BooleanConstructor;
         default: boolean;
     };
-    strong: {
+    icon: {
         type: BooleanConstructor;
         default: boolean;
     };
+    onClick: {
+        type: PropType<(e: MouseEvent) => void>;
+        default: () => void;
+    };
 }, {
-    computedClasses: import("vue").ComputedRef<(string | {
-        [x: string]: boolean | Color;
-        'm-button--rounded': boolean;
-        'm-button--block': boolean;
-        'm-button--icon': boolean;
-        'm-button--secondary': boolean;
-        'm-button--disabled': boolean;
-        'm-button--strong': boolean;
-        'm-button--icon-left': boolean;
-        'm-button--icon-right': boolean;
+    dropdownOpen: import("vue").ComputedRef<any>;
+    computedClasses: import("vue").ComputedRef<(string | string[] | {
+        [x: string]: boolean;
     })[]>;
-    computedTag: import("vue").ComputedRef<"a" | "button" | "router-link">;
+    computedWaveClasses: import("vue").ComputedRef<(string | {
+        [x: string]: boolean;
+    })[]>;
+    computedBorderClasses: import("vue").ComputedRef<string[]>;
+    computedBorderStateClasses: import("vue").ComputedRef<string[]>;
+    computedTag: import("vue").ComputedRef<"button" | "a" | "nuxt-link">;
     hasIconLeft: import("vue").ComputedRef<boolean>;
     hasIconRight: import("vue").ComputedRef<boolean>;
+    handleClick: (e: MouseEvent) => void;
+    waveTimerId: import("vue").Ref<number | null>;
+    iconLeft: string;
+    iconRight: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: StringConstructor;
         default: string;
     };
-    color: {
-        type: PropType<Color>;
+    variant: {
+        type: PropType<Variant>;
         default: string;
     };
     size: {
@@ -91,31 +97,36 @@ declare const _default: import("vue").DefineComponent<{
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
-        default: string;
+        default: null;
     };
     href: {
         type: StringConstructor;
         default: string;
     };
-    icon: {
+    link: {
         type: BooleanConstructor;
         default: boolean;
     };
-    strong: {
+    icon: {
         type: BooleanConstructor;
         default: boolean;
     };
+    onClick: {
+        type: PropType<(e: MouseEvent) => void>;
+        default: () => void;
+    };
 }>>, {
     type: string;
-    strong: boolean;
+    link: boolean;
+    onClick: (e: MouseEvent) => void;
     size: Size;
-    color: Color;
-    rounded: boolean;
-    disabled: boolean;
     block: boolean;
+    icon: boolean;
+    disabled: boolean;
+    rounded: boolean;
+    variant: Variant;
     secondary: boolean;
     to: string | Record<string, any>;
     href: string;
-    icon: boolean;
 }>;
 export default _default;

package/lib/components/button/style/Button.css.d.ts

@@ -0,0 +1,24 @@
+export declare const vars: {
+    height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    radius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    boxShadowColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const base: string;
+export declare const variant: Record<"error" | "default" | "primary" | "tertiary" | "success" | "warning", string>;
+export declare const secondary: Record<"error" | "default" | "primary" | "tertiary" | "success" | "warning", string>;
+export declare const link: Record<"error" | "default" | "primary" | "tertiary" | "success" | "warning", string>;
+export declare const size: Record<"sm" | "md" | "lg" | "xs" | "xl", string>;
+export declare const border: string;
+export declare const borderState: string;
+export declare const wave: string;
+export declare const waveActive: string;
+export declare const iconButton: string;
+export declare const icon: string;
+export declare const iconLeft: string;
+export declare const iconRight: string;
+export declare const rounded: string;
+export declare const block: string;

package/lib/components/button/style/index.d.ts

@@ -0,0 +1 @@
+export * from './Button.css';

package/lib/components/buttongroup/ButtonGroup.vue.d.ts

@@ -1,29 +1,18 @@
-import type { Size } from '@/types/props';
+import type { Size } from '../../types/props';
 import { type PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
     size: {
         type: PropType<Size>;
         default: string;
     };
 }, {
-    computedClasses: import("vue").ComputedRef<(string | {
-        [x: string]: Size;
-    })[]>;
+    classes: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
     size: {
         type: PropType<Size>;
         default: string;
     };
 }>>, {
     size: Size;
-    tag: string;
 }>;
 export default _default;

package/lib/components/buttongroup/style/ButtonGroup.css.d.ts

@@ -0,0 +1,2 @@
+export declare const base: string;
+export declare const vertical: string;

package/lib/components/buttongroup/style/index.d.ts

@@ -0,0 +1 @@
+export * from './ButtonGroup.css';

package/lib/components/buttongroup/symbol.d.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from "vue";
+import type { Size } from "../../types/props";
+export interface ButtonGroupState {
+    size: Size;
+}
+export declare const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState>;

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -1,5 +1,6 @@
 import { type PropType } from 'vue';
-import type { Size, Color } from '@/types/props';
+import type { Size } from '../../types/props';
+import * as style from './style';
 declare const _default: import("vue").DefineComponent<{
     label: {
         type: StringConstructor;
@@ -8,10 +9,6 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Size>;
         default: string;
     };
-    color: {
-        type: PropType<Color>;
-        default: string;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -20,6 +17,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -37,23 +38,19 @@ declare const _default: import("vue").DefineComponent<{
     validate: (value: any) => boolean;
     setError: (value: string) => void;
     disabled: import("vue").ComputedRef<any>;
-    loading: import("vue").ComputedRef<any>;
     name: import("vue").Ref<string | undefined>;
     checked: import("vue").Ref<boolean>;
     checkboxRef: import("vue").Ref<HTMLElement | null>;
     inputError: import("vue").ComputedRef<any>;
     toggle: () => void;
-    wrapperComputedClasses: import("vue").ComputedRef<(string | {
-        'm-form__input': boolean;
-    })[]>;
-    checkboxComputedClass: import("vue").ComputedRef<{
+    style: typeof style;
+    classes: import("vue").ComputedRef<(string | string[] | {
         [x: string]: any;
-        'm-checkbox': boolean;
-        'm-checkbox--checked': boolean;
-        'm-checkbox--disabled': any;
-        'm-checkbox--error': any;
-    }>;
+    })[]>;
     hasSlot: import("vue").ComputedRef<boolean>;
+    inputListeners: {};
+    focus: () => void | undefined;
+    blur: () => void | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
@@ -62,10 +59,6 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Size>;
         default: string;
     };
-    color: {
-        type: PropType<Color>;
-        default: string;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -74,6 +67,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     modelValue: PropType<string | number | boolean | object | any[] | undefined>;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -88,9 +85,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     size: Size;
-    color: Color;
     disabled: boolean;
     loading: boolean;
+    indeterminate: boolean;
     readonly: boolean;
     rules: unknown[];
 }>;

package/lib/components/checkbox/style/Checkbox.css.d.ts

@@ -0,0 +1,16 @@
+export declare const vars: {
+    height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    radius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const base: string;
+export declare const input: string;
+export declare const checkmark: string;
+export declare const checkbox: string;
+export declare const checked: string;
+export declare const disabled: string;
+export declare const indeterminate: string;
+export declare const label: string;
+export declare const size: Record<"sm" | "md" | "lg" | "xs" | "xl", string>;

package/lib/components/checkbox/style/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox.css';