@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/components/pagination/style/Pagination.css.ts

@@ -1,64 +1,69 @@
-import {createVar, globalKeyframes, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import {
+    createVar,
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
     xs: '300px',
     sm: '400px',
     md: '640px',
     lg: '800px',
-    xl: '1140px',
+    xl: '1140px'
 };
 
 export const vars = {
     backgroundColor: createVar(),
-    color: createVar(),
-}
+    color: createVar()
+};
 
 export const pagination = style({
-    display: "inline-flex",
-    alignItems: "center",
+    display: 'inline-flex',
+    alignItems: 'center',
     fontSize: themeVars.fontSize.small,
-    boxSizing: "border-box"
+    boxSizing: 'border-box'
 });
 
 export const buttons = style({
-    display: "inline-flex",
-    alignItems: "center",
+    display: 'inline-flex',
+    alignItems: 'center',
     fontSize: themeVars.fontSize.small,
-    boxSizing: "border-box",
-    gap: themeVars.space["2.5"]
+    boxSizing: 'border-box',
+    gap: themeVars.space['2.5']
 });
 
 export const pages = style({
-    display: "inline-flex",
-    alignItems: "center",
+    display: 'inline-flex',
+    alignItems: 'center',
     margin: 0,
-    gap: themeVars.space["1"]
+    gap: themeVars.space['1']
 });
 
 export const page = style({
     vars: {
-        [vars.backgroundColor]: "transparent",
-        [vars.color]: themeVars.color.gray["700"]
+        [vars.backgroundColor]: 'transparent',
+        [vars.color]: themeVars.color.gray['700']
     },
-    height: "28px",
-    width: "28px",
+    height: '28px',
+    width: '28px',
     borderRadius: themeVars.rounded.default,
-    outline: "none",
-    border: "none",
+    outline: 'none',
+    border: 'none',
     fontSize: 'inherit',
-    padding: `0px ${themeVars.space["2"]}`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
+    padding: `0px ${themeVars.space['2']}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     lineHeight: 1,
     color: vars.color,
     backgroundColor: vars.backgroundColor,
-    cursor: "pointer",
+    cursor: 'pointer',
     selectors: {
         '&:hover': {
             vars: {
-                [vars.backgroundColor]: themeVars.color.gray["150"],
+                [vars.backgroundColor]: themeVars.color.gray['150']
             }
         }
     }
@@ -66,23 +71,22 @@ export const page = style({
 
 export const active = style({
     vars: {
-        [vars.backgroundColor]: themeVars.color.blue["600"],
-        [vars.color]: "#FFF"
+        [vars.backgroundColor]: themeVars.color.blue['600'],
+        [vars.color]: '#FFF'
     },
     selectors: {
         '&:hover': {
             vars: {
-                [vars.backgroundColor]: themeVars.color.blue["700"],
+                [vars.backgroundColor]: themeVars.color.blue['700']
             }
         }
     }
 });
 
 export const svg = style({
-    height: "calc(1em + 2px)",
-    width: "calc(1em + 2px)",
-    display: "inline-block",
-    fontSize: "inherit",
-    userSelect: "none",
-
-});
+    height: 'calc(1em + 2px)',
+    width: 'calc(1em + 2px)',
+    display: 'inline-block',
+    fontSize: 'inherit',
+    userSelect: 'none'
+});

package/src/components/radio/Radio.vue

@@ -28,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent, defineExpose, ref, toRef } from 'vue';
-import { useInput } from '../../composables/useInput';
-import { useInteractive } from "../../composables/useInteractive";
-import type { Size } from '../../types/props';
+import type {PropType} from 'vue';
+import {computed, defineComponent, ref, toRef} from 'vue';
+import {useInput} from '../../composables/useInput';
+import {useInteractive} from "../../composables/useInteractive";
+import type {Size} from '../../types/props';
 import * as style from './style';
 
 export default defineComponent({
@@ -61,7 +61,7 @@ export default defineComponent({
             default: null
         }
     },
-    setup(props, {slots, emit}) {
+    setup(props, {slots, emit, expose}) {
         const radioRef = ref<HTMLElement | null>(null);
 
         const {focus, blur} = useInteractive(radioRef);
@@ -106,7 +106,7 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
-        defineExpose({
+        expose({
             focus,
             blur,
         })

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

@@ -1,12 +1,7 @@
-import MRadio from "../Radio.vue";
-import {
-    MRadioBasic,
-    MRadioGroup,
-} from "./index";
+import MRadio from '../Radio.vue';
+import { MRadioBasic, MRadioGroup } from './index';
 
-import {
-    createStory, sizeArgType, colorArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
 
 export default {
     component: MRadio,
@@ -15,7 +10,7 @@ export default {
         ...sizeArgType(),
         ...colorArgType()
     }
-}
+};
 
 export const Basic = createStory(MRadioBasic);
 export const Group = createStory(MRadioGroup);

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

@@ -1,3 +1,2 @@
 export { default as MRadioBasic } from './basic.vue';
 export { default as MRadioGroup } from './group.vue';
-

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

@@ -1,12 +1,12 @@
-import {createVar, style, styleVariants} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import { createVar, 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,30 +15,30 @@ 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 input = style({
     position: 'absolute',
     opacity: 0,
-    cursor: "pointer"
+    cursor: 'pointer'
 });
 
 export const checkmark = style({
-    position: "absolute",
+    position: 'absolute',
     width: `calc(${vars.height} - 2px)`,
     height: `calc(${vars.height} - 2px)`,
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    color: "white",
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    color: 'white'
 });
 
 export const checkbox = style({
@@ -47,9 +47,9 @@ export const checkbox = style({
         [vars.radius]: themeVars.rounded.full,
         [vars.backgroundColor]: 'white',
         [vars.borderColor]: themeVars.color.gray[300],
-        [vars.color]: themeVars.color.gray[600],
+        [vars.color]: themeVars.color.gray[600]
     },
-    position: "relative",
+    position: 'relative',
     width: vars.height,
     height: vars.height,
     borderRadius: vars.radius,
@@ -63,7 +63,7 @@ export const checkbox = style({
 export const checked = style({
     vars: {
         [vars.borderColor]: themeVars.color.blue[500],
-        [vars.backgroundColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500]
     },
     selectors: {
         ['&:after']: {
@@ -75,31 +75,31 @@ export const checked = style({
             width: `calc(${vars.height} - 10px)`,
             height: `calc(${vars.height} - 10px)`,
             borderRadius: themeVars.rounded.full,
-            backgroundColor: "#FFF"
+            backgroundColor: '#FFF'
         }
     }
 });
 
 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: {
@@ -115,17 +115,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/radio/style/index.ts

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

package/src/components/radiobutton/RadioButton.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import type {PropType} from "vue";
-import {computed, defineComponent, inject, ref,defineExpose } from "vue";
+import {computed, defineComponent, inject, ref } from "vue";
 import type {Size} from "../../types/props";
 import * as style from "./style";
 import {useInteractive} from "../../composables/useInteractive";
@@ -48,7 +48,7 @@ export default defineComponent({
         }
     },
     emits: ['update:modelValue'],
-    setup(props, {emit}) {
+    setup(props, {emit, expose}) {
         const radioRef = ref<HTMLElement | null>(null);
         const parentState = inject(RADIO_BUTTON_GROUP_STATE, null);
         const value = computed(() => {
@@ -110,7 +110,7 @@ export default defineComponent({
             props.onClick(e);
         };
 
-        defineExpose({
+        expose({
             focus,
             blur,
         })

package/src/components/radiobutton/style/RadioButton.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: '22px',
     sm: '28px',
     md: '36px',
     lg: '40px',
-    xl: '45px',
+    xl: '45px'
 };
 
 const borderRadiuses = {
@@ -14,7 +19,7 @@ const borderRadiuses = {
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 const padding = {
@@ -22,8 +27,8 @@ const padding = {
     sm: `0 ${themeVars.space[2]}`,
     md: `0 ${themeVars.space[3]}`,
     lg: `0 ${themeVars.space[3]}`,
-    xl: `0 ${themeVars.space[4]}`,
-}
+    xl: `0 ${themeVars.space[4]}`
+};
 
 export const vars = {
     height: createVar(),
@@ -32,18 +37,18 @@ export const vars = {
     backgroundColor: createVar(),
     borderColor: createVar(),
     boxShadowColor: createVar(),
-    color: createVar(),
-}
+    color: createVar()
+};
 
 export const base = style({
     vars: {
-        [vars.borderColor]: "transparent",
+        [vars.borderColor]: 'transparent'
     },
     alignItems: 'center',
     boxSizing: 'border-box',
     display: 'inline-flex',
     fontSize: themeVars.fontSize.base,
-    fontWeight: "500",
+    fontWeight: '500',
     maxWidth: '100%',
     width: 'auto',
     position: 'relative',
@@ -56,7 +61,7 @@ export const base = style({
     lineHeight: vars.height,
     borderRadius: vars.radius,
     padding: vars.padding,
-    zIndex: "auto",
+    zIndex: 'auto',
     backgroundColor: vars.backgroundColor,
     border: `1px solid ${vars.borderColor}`,
     color: vars.color,
@@ -66,30 +71,30 @@ export const base = style({
         border-color .3s ${themeVars.transition.default}`,
     fontFamily: 'inherit',
     ':hover': {
-        cursor: 'pointer',
+        cursor: 'pointer'
     },
     ':focus': {
-        outline: 'none',
+        outline: 'none'
     }
 });
 
 export const variant = styleVariants({
     active: {
         vars: {
-            [vars.backgroundColor]: "white",
+            [vars.backgroundColor]: 'white',
             [vars.color]: themeVars.color.blue[500],
             [vars.boxShadowColor]: themeVars.color.gray[900],
-            [vars.borderColor]: themeVars.color.gray[200],
+            [vars.borderColor]: themeVars.color.gray[200]
         },
         boxShadow: `0 .5px 0px 4px rgba(0, 0, 0, 0.01)`,
         ':hover': {
             vars: {
-                [vars.color]: themeVars.color.blue[600],
-            },
+                [vars.color]: themeVars.color.blue[600]
+            }
         },
         ':focus': {
             vars: {
-                [vars.color]: themeVars.color.blue[500],
+                [vars.color]: themeVars.color.blue[500]
             }
         }
     },
@@ -98,16 +103,16 @@ export const variant = styleVariants({
             [vars.color]: themeVars.color.gray[400],
             [vars.backgroundColor]: 'transparent',
             [vars.boxShadowColor]: themeVars.color.blue[500],
-            [vars.borderColor]: "transparent",
+            [vars.borderColor]: 'transparent'
         },
         ':hover': {
             vars: {
-                [vars.color]: themeVars.color.blue[400],
-            },
+                [vars.color]: themeVars.color.blue[400]
+            }
         },
         ':focus': {
             vars: {
-                [vars.color]: themeVars.color.blue[400],
+                [vars.color]: themeVars.color.blue[400]
             }
         }
     }
@@ -118,41 +123,41 @@ export const size = styleVariants({
         vars: {
             [vars.height]: sizes.xs,
             [vars.radius]: borderRadiuses.xs,
-            [vars.padding]: padding.xs,
+            [vars.padding]: padding.xs
         },
-        fontSize: themeVars.fontSize.small,
+        fontSize: themeVars.fontSize.small
     },
     sm: {
         vars: {
             [vars.height]: sizes.sm,
             [vars.radius]: borderRadiuses.sm,
-            [vars.padding]: padding.sm,
+            [vars.padding]: padding.sm
         },
-        fontSize: themeVars.fontSize.small,
+        fontSize: themeVars.fontSize.small
     },
     md: {
         vars: {
             [vars.height]: sizes.md,
             [vars.radius]: borderRadiuses.md,
-            [vars.padding]: padding.md,
-        },
+            [vars.padding]: padding.md
+        }
     },
     lg: {
         vars: {
             [vars.height]: sizes.lg,
             [vars.radius]: borderRadiuses.lg,
-            [vars.padding]: padding.lg,
+            [vars.padding]: padding.lg
         },
-        fontSize: themeVars.fontSize.large,
+        fontSize: themeVars.fontSize.large
     },
     xl: {
         vars: {
             [vars.height]: sizes.xl,
             [vars.radius]: borderRadiuses.xl,
-            [vars.padding]: padding.xl,
+            [vars.padding]: padding.xl
         },
-        fontSize: themeVars.fontSize.large,
-    },
+        fontSize: themeVars.fontSize.large
+    }
 });
 
 export const icon = style({
@@ -173,12 +178,12 @@ globalStyle(`${icon} > svg`, {
 });
 
 export const radio = style({
-    pointerEvents: "none",
-    position: "absolute",
+    pointerEvents: 'none',
+    position: 'absolute',
     border: 0,
     left: 0,
     right: 0,
     top: 0,
     bottom: 0,
     opacity: 0
-})
+});

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

@@ -1,12 +1,8 @@
-import MRadioButtonGroup from "../RadioButtonGroup.vue";
-import MRadioButton from "../../radiobutton/RadioButton.vue";
-import {
-    MRadioButtonGroupBasic,
-} from "./index";
+import MRadioButtonGroup from '../RadioButtonGroup.vue';
+import MRadioButton from '../../radiobutton/RadioButton.vue';
+import { MRadioButtonGroupBasic } from './index';
 
-import {
-    createStory, sizeArgType, colorArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType, colorArgType } from '../../../__storybook__';
 
 export default {
     component: MRadioButtonGroup,
@@ -15,8 +11,8 @@ export default {
     },
     title: 'Components/Radio Button Group',
     argTypes: {
-        ...sizeArgType(),
+        ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MRadioButtonGroupBasic);

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

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

package/src/components/radiobuttongroup/style/RadioButtonGroup.css.ts

@@ -1,37 +1,37 @@
-import {createVar, globalStyle, style} from "@vanilla-extract/css";
-import {base as button} from "../../radiobutton/style/RadioButton.css";
-import {themeVars} from "../../../styles/theme.css";
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
+import { base as button } from '../../radiobutton/style/RadioButton.css';
+import { themeVars } from '../../../styles/theme.css';
 
 const vars = {
     padding: createVar(),
     borderRadius: createVar(),
     gap: createVar()
-}
+};
 
 export const base = style({
     vars: {
         [vars.padding]: themeVars.space[1],
         [vars.borderRadius]: themeVars.rounded.default,
-        [vars.gap]: themeVars.space[1],
+        [vars.gap]: themeVars.space[1]
     },
-    display: "inline-flex",
-    position: "relative",
-    flexWrap: "nowrap",
+    display: 'inline-flex',
+    position: 'relative',
+    flexWrap: 'nowrap',
     backgroundColor: themeVars.color.gray[100],
     padding: vars.padding,
     borderRadius: vars.borderRadius,
-    gap: vars.gap,
+    gap: vars.gap
 });
 
 export const vertical = style({
-    flexDirection: "column",
+    flexDirection: 'column'
 });
 
 export const block = style({
-    display: "flex",
-    alignItems: "stretch",
+    display: 'flex',
+    alignItems: 'stretch'
 });
 
 globalStyle(`${base}${block} > ${button}`, {
-    flex: 1,
-});
+    flex: 1
+});

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

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

package/src/components/radiobuttongroup/symbol.ts

@@ -1,11 +1,12 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
+import type { InjectionKey } from 'vue';
+import type { Size } from '../../types/props';
 
 export interface RadioButtonGroupState {
-    size: Size,
-    name: string,
-    modelValue: string | number,
-    doUpdateValue: (value: string | number) => void
+    size: Size;
+    name: string;
+    modelValue: string | number;
+    doUpdateValue: (value: string | number) => void;
 }
 
-export const RADIO_BUTTON_GROUP_STATE: InjectionKey<RadioButtonGroupState> = Symbol('RADIO_BUTTON_GROUP_STATE');
+export const RADIO_BUTTON_GROUP_STATE: InjectionKey<RadioButtonGroupState> =
+    Symbol('RADIO_BUTTON_GROUP_STATE');