@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/components/buttongroup/examples/index.stories.ts

@@ -1,14 +1,8 @@
-import MButtonGroup from "../ButtonGroup.vue";
-import MButton from "../../button/Button.vue";
-import {
-    MButtonGroupBasic,
-    MButtonGroupIconGroup
-} from "./index";
+import MButtonGroup from '../ButtonGroup.vue';
+import MButton from '../../button/Button.vue';
+import { MButtonGroupBasic, MButtonGroupIconGroup } from './index';
 
-import {
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MButtonGroup,
@@ -17,7 +11,7 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MButtonGroupBasic);
-export const IconGroup = createStory(MButtonGroupIconGroup);
+export const IconGroup = createStory(MButtonGroupIconGroup);

package/src/components/buttongroup/style/ButtonGroup.css.ts

@@ -1,12 +1,14 @@
-import {globalStyle, style} from "@vanilla-extract/css";
-import {base as button} from "../../button/style/Button.css";
-import {border as buttonBorder} from "../../button/style/Button.css";
-import {borderState} from "../../button/style/Button.css";
+import { globalStyle, style } from '@vanilla-extract/css';
+import {
+    base as button,
+    border as buttonBorder,
+    borderState
+} from '../../button/style/Button.css';
 
 export const base = style({
-    display: "inline-flex",
-    position: "relative",
-    flexWrap: "nowrap",
+    display: 'inline-flex',
+    position: 'relative',
+    flexWrap: 'nowrap'
 });
 
 globalStyle(`${base} > ${button}:first-child:not(:last-child)`, {
@@ -18,11 +20,11 @@ globalStyle(`${base} > ${button}:first-child:not(:last-child)`, {
 globalStyle(`${base} > ${button}:not(:first-child):not(:last-child)`, {
     marginLeft: 0,
     borderRadius: 0,
-    marginRight: 0,
+    marginRight: 0
 });
 
 globalStyle(`${base} > ${button}:not(:first-child) ${buttonBorder}`, {
-    borderLeftWidth: 0,
+    borderLeftWidth: 0
 });
 
 globalStyle(`${base} > ${button}:last-child:not(:first-child)`, {
@@ -36,5 +38,5 @@ globalStyle(`${base} > ${button}:not(:first-child) ${borderState}`, {
 });
 
 export const vertical = style({
-    flexDirection: "column",
-});
+    flexDirection: 'column'
+});

package/src/components/buttongroup/symbol.ts

@@ -1,8 +1,9 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
+import type { InjectionKey } from 'vue';
+import type { Size } from '../../types/props';
 
 export interface ButtonGroupState {
-    size: Size
+    size: Size;
 }
 
-export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> = Symbol('BUTTON_GROUP_STATE');
+export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> =
+    Symbol('BUTTON_GROUP_STATE');

package/src/components/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
     <label :class="style.base">
-        <input 
+        <input
             :id="name"
             v-model="toggle"
             :name="name"
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, defineExpose, type PropType, ref, toRef, watch} from 'vue';
+import {computed, defineComponent, type PropType, ref, toRef, watch} from 'vue';
 import {useInput} from '../../composables/useInput';
 import {useInteractive} from "../../composables/useInteractive";
 import type {Size} from '../../types/props';
@@ -80,7 +80,7 @@ export default defineComponent({
             // type: [String, Number, Boolean, Object, Array]
         }
     },
-    setup(props, {slots, emit}) {
+    setup(props, {slots, emit, expose}) {
         const checkboxRef = ref<HTMLElement | null>(null);
 
         const {focus, blur} = useInteractive(checkboxRef);
@@ -125,15 +125,15 @@ export default defineComponent({
             }
         });
 
-        defineExpose({
-            focus,
-            blur,
-        })
-
         const onChange = (event: Event) => {
             emit('change', event);
         };
 
+        expose({
+            focus,
+            blur
+        })
+
         return {
             id,
             formError,

package/src/components/checkbox/examples/index.stories.ts

@@ -1,12 +1,7 @@
-import MCheckbox from "../Checkbox.vue";
-import {
-    MCheckboxBasic,
-    MCheckboxSlot
-} from "./index";
+import MCheckbox from '../Checkbox.vue';
+import { MCheckboxBasic, MCheckboxSlot } from './index';
 
-import {
-    createStory, sizeArgType, colorArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
 
 export default {
     component: MCheckbox,
@@ -15,7 +10,7 @@ export default {
         ...sizeArgType(),
         ...colorArgType()
     }
-}
+};
 
 export const Basic = createStory(MCheckboxBasic);
 export const Slot = createStory(MCheckboxSlot);

package/src/components/checkbox/examples/index.ts

@@ -1,3 +1,2 @@
 export { default as MCheckboxBasic } from './basic.vue';
 export { default as MCheckboxSlot } from './slot.vue';
-

package/src/components/checkbox/style/Checkbox.css.ts

@@ -1,12 +1,17 @@
-import {createVar, globalStyle, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '16px',
     sm: '18px',
     md: '20px',
     lg: '22px',
-    xl: '24px',
+    xl: '24px'
 };
 
 export const vars = {
@@ -15,14 +20,14 @@ export const vars = {
     backgroundColor: createVar(),
     borderColor: createVar(),
     color: createVar()
-}
+};
 
 export const base = style({
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    cursor: "pointer",
-    gap: themeVars.space['1.5'],
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    gap: themeVars.space['1.5']
 });
 
 export const checkbox = style({
@@ -33,7 +38,7 @@ export const checkbox = style({
         [vars.borderColor]: themeVars.color.gray[300],
         [vars.color]: 'white'
     },
-    position: "relative",
+    position: 'relative',
     width: vars.height,
     height: vars.height,
     borderRadius: vars.radius,
@@ -49,13 +54,13 @@ export const checkbox = style({
     flexShrink: 0,
     userSelect: 'none',
     outline: 'none',
-    
+
     selectors: {
         ['&:focus']: {
             vars: {
-                [vars.borderColor]: themeVars.color.blue[500],
+                [vars.borderColor]: themeVars.color.blue[500]
             },
-            boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+            boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
         },
         ['&:checked']: {
             backgroundColor: 'currentcolor',
@@ -67,7 +72,7 @@ export const checkbox = style({
             backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")`
         },
         ['&:checked:focus']: {
-            color: themeVars.color.blue[500],
+            color: themeVars.color.blue[500]
         },
         ['&:indeterminate']: {
             backgroundColor: 'currentcolor',
@@ -80,33 +85,32 @@ export const checkbox = style({
         },
         ['&:hover']: {
             vars: {
-                [vars.borderColor]: themeVars.color.gray[400],
+                [vars.borderColor]: themeVars.color.gray[400]
             }
         }
     }
 });
 
-
 export const disabled = style({
     opacity: 0.5,
-    cursor: 'not-allowed',
+    cursor: 'not-allowed'
 });
 
 export const indeterminate = style({
     vars: {
         [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
     }
 });
 
 export const label = style({
     marginLeft: themeVars.space['0.5'],
-    fontWeight: "500",
+    fontWeight: '500',
     display: 'inline-block',
     fontSize: themeVars.fontSize.base,
     wordBreak: 'break-word',
-    cursor: 'pointer',
-})
+    cursor: 'pointer'
+});
 
 export const size = styleVariants({
     xs: {
@@ -122,16 +126,16 @@ export const size = styleVariants({
     md: {
         vars: {
             [vars.height]: sizes.md
-        },
+        }
     },
     lg: {
         vars: {
-            [vars.height]: sizes.lg,
-        },
+            [vars.height]: sizes.lg
+        }
     },
     xl: {
         vars: {
-            [vars.height]: sizes.xl,
-        },
-    },
+            [vars.height]: sizes.xl
+        }
+    }
 });

package/src/components/checkbox/style/index.ts

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

package/src/components/colorpicker/examples/index.stories.ts

@@ -1,17 +1,12 @@
-import MColorPicker from "../ColorPicker.vue";
-import {
-    MColorBasic,
-} from "./index";
+import MColorPicker from '../ColorPicker.vue';
+import { MColorBasic } from './index';
 
-import {
-    createStory
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MColorPicker,
     title: 'Components/Color Picker',
-    argTypes: {       
-    }
-}
+    argTypes: {}
+};
 
 export const Basic = createStory(MColorBasic);

package/src/components/colorpicker/examples/index.ts

@@ -1 +1 @@
-export { default as MColorBasic } from './basic.vue';
+export { default as MColorBasic } from './basic.vue';

package/src/components/colorpicker/style/ColorPicker.css.ts

@@ -1,16 +1,22 @@
-import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 export const container = style({
-    display: "flex",
-    flexDirection: "column",
+    display: 'flex',
+    flexDirection: 'column',
     width: '280px',
     alignItems: 'center',
     gap: '10px',
     userSelect: 'none',
     zIndex: 100,
     backgroundColor: '#FFF',
-    borderRadius: "5px",
+    borderRadius: '5px',
     padding: themeVars.space[3],
     border: `1px solid ${themeVars.color.gray[200]}`,
     boxShadow: themeVars.shadow.md
@@ -25,12 +31,12 @@ export const sliderThumb = style({
     border: '2px solid white',
     boxShadow: themeVars.shadow.sm,
     cursor: 'crosshair',
-    userSelect: 'none',
+    userSelect: 'none'
 });
 
 export const eyeDrop = style({
-    backgroundColor: "transparent",
-    outline: "none",
+    backgroundColor: 'transparent',
+    outline: 'none',
     border: 0,
     color: themeVars.color.gray[600],
     width: '32px',
@@ -47,10 +53,11 @@ export const eyeDrop = style({
             color: themeVars.color.gray[700]
         }
     }
-})
+});
 
 export const preview = style({
-    backgroundImage: 'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
+    backgroundImage:
+        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
     backgroundSize: '12px 12px',
     backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',
     overflow: 'hidden',
@@ -70,7 +77,8 @@ export const colours = style({
 });
 
 export const reference = style({
-    backgroundImage: 'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
+    backgroundImage:
+        'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
     backgroundSize: '12px 12px',
     backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',
     overflow: 'hidden',
@@ -79,9 +87,9 @@ export const reference = style({
     width: '28px',
     height: '28px',
     borderRadius: themeVars.rounded.default,
-    position: "relative",
-    cursor: "pointer",
-    userSelect: "none",
+    position: 'relative',
+    cursor: 'pointer',
+    userSelect: 'none'
 });
 
 export const referenceColor = style({

package/src/components/colorpicker/utils.ts

@@ -11,17 +11,30 @@ export interface HSV {
     v: number;
 }
 
-export const RGBAToHex = (r: number, g: number, b: number, a: number): string => {
-    const hexR: string = r.toString(16).padStart(2, "0");
-    const hexG: string = g.toString(16).padStart(2, "0");
-    const hexB: string = b.toString(16).padStart(2, "0");
-    const hexA: string = Math.round(a * 255).toString(16).padStart(2, "0");
+export const RGBAToHex = (
+    r: number,
+    g: number,
+    b: number,
+    a: number
+): string => {
+    const hexR: string = r.toString(16).padStart(2, '0');
+    const hexG: string = g.toString(16).padStart(2, '0');
+    const hexB: string = b.toString(16).padStart(2, '0');
+    const hexA: string = Math.round(a * 255)
+        .toString(16)
+        .padStart(2, '0');
 
     return `#${hexR}${hexG}${hexB}${a >= 1 ? '' : hexA}`;
 };
 
-export const hexToRGB = (hexColor: string, defaultR: number = 0, defaultG: number = 0, defaultB: number = 0, defaultA: number = 0): Color => {
-    hexColor = hexColor.replace("#", "");
+export const hexToRGB = (
+    hexColor: string,
+    defaultR = 0,
+    defaultG = 0,
+    defaultB = 0,
+    defaultA = 0
+): Color => {
+    hexColor = hexColor.replace('#', '');
 
     let r = defaultR;
     let g = defaultG;
@@ -58,25 +71,25 @@ export const hexToRGB = (hexColor: string, defaultR: number = 0, defaultG: numbe
     }
 
     return {
-        r: r,
-        g: g,
-        b: b,
-        a: a
+        r,
+        g,
+        b,
+        a
     };
 };
 
 export const RGBToHSV = (r: number, g: number, b: number): HSV => {
-    var max = Math.max(r, g, b);
-    var min = Math.min(r, g, b);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
 
-    var delta = max - min;
-    var brightness = max;
-    var saturation = 0;
+    const delta = max - min;
+    const brightness = max;
+    let saturation = 0;
     if (max !== 0) {
         saturation = delta / max;
     }
 
-    var hue = 0;
+    let hue = 0;
     if (delta !== 0) {
         if (max === r) {
             hue = ((g - b) / delta) % 6;
@@ -96,14 +109,19 @@ export const RGBToHSV = (r: number, g: number, b: number): HSV => {
         h: hue,
         s: saturation,
         v: brightness / 255
-    }
-}
+    };
+};
 
-export const HSVToRGBA = (hue: number, brightness: number, saturation: number, alpha: number): Color => {
+export const HSVToRGBA = (
+    hue: number,
+    brightness: number,
+    saturation: number,
+    alpha: number
+): Color => {
     const hueInDegrees = hue;
     const chroma = brightness * saturation;
     const hue1 = hueInDegrees / 60;
-    const x = chroma * (1 - Math.abs(hue1 % 2 - 1));
+    const x = chroma * (1 - Math.abs((hue1 % 2) - 1));
     let r1 = 0;
     let g1 = 0;
     let b1 = 0;
@@ -132,15 +150,15 @@ export const HSVToRGBA = (hue: number, brightness: number, saturation: number, a
     const b = Math.round((b1 + m) * 255);
 
     return {
-        r: r,
-        g: g,
-        b: b,
+        r,
+        g,
+        b,
         a: alpha
     };
-}
+};
 
 export const HueToRGBA = (hue: number, alpha: number): Color => {
-    const chroma = (1 - Math.abs((2 * 0.5) - 1));
+    const chroma = 1 - Math.abs(2 * 0.5 - 1);
     const huePrime = (hue / 360) * 6;
     const intermediateValue = chroma * (1 - Math.abs((huePrime % 2) - 1));
     let red = 0;
@@ -183,6 +201,6 @@ export const HueToRGBA = (hue: number, alpha: number): Color => {
         r: finalRed,
         g: finalGreen,
         b: finalBlue,
-        a: alpha,
+        a: alpha
     };
-}
+};

package/src/components/confirm/examples/index.stories.ts

@@ -1,7 +1,5 @@
-import MConfirmProvider from "../ConfirmProvider.vue";
-import {
-    MConfirmProviderBasic,
-} from "./index";
+import MConfirmProvider from '../ConfirmProvider.vue';
+import { MConfirmProviderBasic } from './index';
 
 const Template = (args: any) => ({
     components: {
@@ -9,9 +7,8 @@ const Template = (args: any) => ({
         MConfirmProviderBasic
     },
     setup() {
-
         return {
-            args,
+            args
         };
     },
     template: `
@@ -19,11 +16,11 @@ const Template = (args: any) => ({
             <MConfirmProviderBasic />
         </m-confirm-provider>
     `
-})
+});
 
 export default {
     component: MConfirmProvider,
     title: 'Components/Confirm'
-}
+};
 
 export const Primary = Template.bind({});

package/src/components/confirm/props.ts

@@ -18,7 +18,7 @@ export const confirmProps = {
     okVariant: {
         type: String as PropType<Variant>,
         default: 'primary'
-    },
+    }
 } as const;
 
-export type ConfirmProps = ExtractPropTypes<typeof confirmProps>
+export type ConfirmProps = ExtractPropTypes<typeof confirmProps>;

package/src/components/confirm/providerProps.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 
-
 export const providerProps = {
     teleportTo: {
         type: String,
@@ -8,4 +7,4 @@ export const providerProps = {
     }
 };
 
-export type ProviderProps = ExtractPropTypes<typeof providerProps>
+export type ProviderProps = ExtractPropTypes<typeof providerProps>;

package/src/components/confirm/types.ts

@@ -6,29 +6,28 @@ export type ConfirmContentType = string;
 export type ConfirmContentRender = (props: any) => VNodeChild;
 
 export interface ConfirmOptions {
-    title?: string,
-    render?: ConfirmContentRender,
-    content: ConfirmContentType,
-    onClose?: () => void,
-    onOpen?: () => void,
-    onOk?: () => void,
-    onCancel?: () => void,
-    okVariant?: Variant,
-    okText?: ConfirmContentType,
-    cancelText?: ConfirmContentType,
+    title?: string;
+    render?: ConfirmContentRender;
+    content: ConfirmContentType;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOk?: () => void;
+    onCancel?: () => void;
+    okVariant?: Variant;
+    okText?: ConfirmContentType;
+    cancelText?: ConfirmContentType;
 }
 
 export interface ConfirmResponse {
-    result: boolean,
-    data: any
+    result: boolean;
+    data: any;
 }
 
 export interface ConfirmApiInjection {
-    create: (options: ConfirmOptions) => Confirm
-    destroyAll: () => void
+    create: (options: ConfirmOptions) => Confirm;
+    destroyAll: () => void;
 }
 
-
 export interface Confirm extends ConfirmOptions {
-    destroy: () => void
+    destroy: () => void;
 }

package/src/components/confirm/useConfirm.ts

@@ -5,7 +5,9 @@ export function useConfirm(): ConfirmApiInjection {
     const api = inject('m-confirm', null);
 
     if (api === null) {
-        throw new Error('m-confirm api is not provided, ensure the component is wrapped in <m-confirm-provider />.');
+        throw new Error(
+            'm-confirm api is not provided, ensure the component is wrapped in <m-confirm-provider />.'
+        );
     }
 
     return api;