@teammodlr/ui-kit 2.1.8 → 2.1.9

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');

package/src/components/renderer/examlpes/index.stories.ts

@@ -1,11 +1,7 @@
-import MRenderer from "../renderer";
-import {
-    MRendererBasic,
-} from "./index";
+import MRenderer from '../renderer';
+import { MRendererBasic } from './index';
 
-import {
-    createStory, sizeArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MRenderer,
@@ -13,6 +9,6 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MRendererBasic);

package/src/components/renderer/props.ts

@@ -1,6 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 
-
 export const rendererProps = {
     h: {
         type: Function,
@@ -10,6 +9,6 @@ export const rendererProps = {
         type: Object as PropType<Record<string, any>>,
         default: undefined
     }
-}
+};
 
-export type RendererProps = ExtractPropTypes<typeof rendererProps>
+export type RendererProps = ExtractPropTypes<typeof rendererProps>;

package/src/components/renderer/renderer.ts

@@ -2,7 +2,7 @@ import { defineComponent, renderSlot } from 'vue';
 import { rendererProps } from './props';
 
 export default defineComponent({
-    name: "Renderer",
+    name: 'Renderer',
     props: rendererProps,
     setup(props, { slots }) {
         return () => {
@@ -11,6 +11,6 @@ export default defineComponent({
             }
 
             return props.h(props.props);
-        }
+        };
     }
-})
+});

package/src/components/select/Select.vue

@@ -105,7 +105,6 @@ import {
     ref,
     watch,
     watchEffect,
-    defineExpose,
     type PropType
 } from "vue";
 import MTag from "../tag/Tag.vue";
@@ -189,7 +188,7 @@ export default defineComponent({
     components: {
         MTag
     },
-    setup(props, {emit}) {
+    setup(props, {emit, expose}) {
         const container = ref<HTMLElement | null>(null);
         const wrapper = ref<HTMLElement>();
         const optionsRef = ref<HTMLElement[]>();
@@ -632,9 +631,9 @@ export default defineComponent({
             }
         }
 
-        defineExpose({
+        expose({
             focus,
-            blur,
+            blur
         })
 
         return {

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

@@ -1,13 +1,7 @@
-import MSelect from "../Select.vue";
-import {
-    MSelectBasic,
-    MSelectSearchable,
-    MSelectMultiple,
-} from "./index";
+import MSelect from '../Select.vue';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple } from './index';
 
-import {
-    createStory, sizeArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MSelect,
@@ -15,7 +9,7 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MSelectBasic);
 export const Searchable = createStory(MSelectSearchable);