@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/components/switch/style/Switch.css.ts

@@ -2,23 +2,23 @@ import {
     createVar,
     globalStyle,
     style,
-    styleVariants,
-} from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const sizes = {
-    xs: "14px",
-    sm: "16px",
-    md: "18px",
-    lg: "20px",
-    xl: "22px",
+    xs: '14px',
+    sm: '16px',
+    md: '18px',
+    lg: '20px',
+    xl: '22px'
 };
 
 const vars = {
     offBackground: createVar(),
     onBackground: createVar(),
     handleBackground: createVar(),
-    height: createVar(),
+    height: createVar()
 };
 
 export const toggle = style({
@@ -26,79 +26,79 @@ export const toggle = style({
         [vars.height]: sizes.md,
         [vars.offBackground]: themeVars.color.gray[300],
         [vars.onBackground]: themeVars.color.blue[500],
-        [vars.handleBackground]: "#fff",
+        [vars.handleBackground]: '#fff'
     },
     outline: 0,
-    display: "block",
+    display: 'block',
     width: `calc(${vars.height} * 2)`,
     minWidth: `calc(${vars.height} * 2)`,
     height: `calc(${vars.height} + 2px)`,
-    position: "relative",
-    cursor: "pointer",
-    userSelect: "none",
-    borderRadius: "2em",
-    padding: "2px",
+    position: 'relative',
+    cursor: 'pointer',
+    userSelect: 'none',
+    borderRadius: '2em',
+    padding: '2px',
     background: vars.offBackground,
-    transition: "all .4s ease",
+    transition: 'all .4s ease',
     selectors: {
-        ["&:after"]: {
-            position: "relative",
-            display: "block",
+        ['&:after']: {
+            position: 'relative',
+            display: 'block',
             content: '""',
             width: `calc(${vars.height} - 2px)`,
-            height: "100%",
+            height: '100%',
             left: 0,
-            borderRadius: "50%",
+            borderRadius: '50%',
             background: vars.handleBackground,
-            transition: "all .2s ease",
+            transition: 'all .2s ease'
         },
-        ["&:before"]: {
-            position: "relative",
+        ['&:before']: {
+            position: 'relative',
             content: '""',
-            width: "50%",
-            height: "100%",
-            display: "none",
-        },
-    },
+            width: '50%',
+            height: '100%',
+            display: 'none'
+        }
+    }
 });
 
 export const checked = style({
     vars: {
-        [vars.offBackground]: vars.onBackground,
+        [vars.offBackground]: vars.onBackground
     },
     selectors: {
-        ["&:after"]: {
-            left: "50%"
-        },
-    },
+        ['&:after']: {
+            left: '50%'
+        }
+    }
 });
 
 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",
+    position: 'absolute',
     opacity: 0,
-    cursor: "pointer",
+    cursor: 'pointer'
 });
 
 export const disabled = style({
     opacity: 0.5,
-    cursor: "not-allowed",
+    cursor: 'not-allowed'
 });
 
 export const label = style({
-    marginLeft: themeVars.space["0.5"],
-    fontWeight: "500",
-    display: "inline-block",
+    marginLeft: themeVars.space['0.5'],
+    fontWeight: '500',
+    display: 'inline-block',
     fontSize: themeVars.fontSize.base,
-    wordBreak: "break-word",
-    cursor: "pointer",
+    wordBreak: 'break-word',
+    cursor: 'pointer'
 });
 
 export const size = styleVariants({
@@ -115,22 +115,21 @@ 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
+        }
+    }
 });
 
 globalStyle(`${base} ${input}:focus + ${toggle}`, {
-    vars: {
-    },
-    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+    vars: {},
+    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
 });

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

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

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

@@ -1,14 +1,8 @@
-import MTabGroup from "../TabGroup.vue";
-import MTab from "../Tab.vue";
-import {
-    MTabsBasic,
-    MTabsVertical
-} from "./index";
+import MTabGroup from '../TabGroup.vue';
+import MTab from '../Tab.vue';
+import { MTabsBasic, MTabsVertical } from './index';
 
-import {
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MTabGroup,
@@ -19,7 +13,7 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MTabsBasic);
 export const Vertical = createStory(MTabsVertical);

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

@@ -1,22 +1,16 @@
-import MTable from "../Table.vue";
-import MButton from "../../button/Button.vue";
-import {
-    MTableBasic,
-    MTableEmpty,
-    MTableSelected
-} from "./index";
+import MTable from '../Table.vue';
+import MButton from '../../button/Button.vue';
+import { MTableBasic, MTableEmpty, MTableSelected } from './index';
 
-import {
-    createStory
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MTable,
     subcomponents: {
         MButton
     },
-    title: 'Components/Table',
-}
+    title: 'Components/Table'
+};
 
 export const Basic = createStory(MTableBasic);
 export const Empty = createStory(MTableEmpty);

package/src/components/table/style/Table.css.ts

@@ -1,25 +1,31 @@
-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 wrapper = style({
-    width: "100%",
-    overflow: "auto",
+    width: '100%',
+    overflow: 'auto'
 });
 
 const vars = {
     headerHeight: createVar(),
     cellPadding: createVar(),
     fontSize: createVar()
-}
+};
 
 export const table = style({
     vars: {
-        [vars.headerHeight]: "44px",
-        [vars.cellPadding]: "8px 14px",
-        [vars.fontSize]: themeVars.fontSize.base,
+        [vars.headerHeight]: '44px',
+        [vars.cellPadding]: '8px 14px',
+        [vars.fontSize]: themeVars.fontSize.base
     },
-    width: "100%",
-    borderCollapse: "collapse",
+    width: '100%',
+    borderCollapse: 'collapse',
     fontSize: vars.fontSize
 });
 
@@ -27,31 +33,30 @@ export const hoverable = style({});
 export const striped = style({});
 
 globalStyle(`${striped} tbody tr:nth-child(even)`, {
-    backgroundColor: themeVars.color.gray[75],
+    backgroundColor: themeVars.color.gray[75]
 });
 
-
 globalStyle(`${table} th`, {
     height: vars.headerHeight,
     padding: vars.cellPadding,
-    textAlign: "left",
+    textAlign: 'left',
     backgroundColor: themeVars.color.gray[100],
     borderBottom: `1px solid ${themeVars.color.gray[200]}`,
     color: themeVars.color.gray[600],
     fontWeight: 500,
     fontSize: themeVars.fontSize.base,
-    marginBottom: "5px"
+    marginBottom: '5px'
 });
 
 globalStyle(`${table} td`, {
     padding: vars.cellPadding,
-    textAlign: "left",
+    textAlign: 'left',
     color: themeVars.color.gray[900],
     borderBottom: `1px solid ${themeVars.color.gray[200]}`,
     fontWeight: 400,
-    transition: `background-color 0.2s ${themeVars.transition.default}`,
+    transition: `background-color 0.2s ${themeVars.transition.default}`
 });
 
 globalStyle(`${hoverable} tr:hover td`, {
-    backgroundColor: themeVars.color.gray[100],
+    backgroundColor: themeVars.color.gray[100]
 });

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

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

package/src/components/table/types/index.ts

@@ -3,4 +3,4 @@ export type TableHeadItem = {
     name?: string;
     width?: string | number;
     align?: 'left' | 'center' | 'right';
-}
+};

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

@@ -1,14 +1,8 @@
-import MTag from "../Tag.vue";
+import MTag from '../Tag.vue';
 
-import {
-    MTagBasic,
-} from "./index";
+import { MTagBasic } from './index';
 
-import {
-    colorArgType,
-    createStory,
-    sizeArgType
-} from "../../../__storybook__";
+import { colorArgType, createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MTag,
@@ -17,6 +11,6 @@ export default {
         ...colorArgType(),
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MTagBasic);

package/src/components/tag/style/Tag.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: '18px',
     sm: '22px',
     md: '26px',
     lg: '30px',
-    xl: '34px',
+    xl: '34px'
 };
 
 const borderRadiuses = {
@@ -14,7 +19,7 @@ const borderRadiuses = {
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 export const vars = {
@@ -24,7 +29,7 @@ export const vars = {
     paddingY: createVar(),
     borderColor: createVar(),
     backgroundColor: createVar(),
-    color: createVar(),
+    color: createVar()
 };
 
 export const base = style({
@@ -35,7 +40,7 @@ export const base = style({
         [vars.paddingY]: themeVars.space[0],
         [vars.borderColor]: themeVars.color.gray[100],
         [vars.color]: themeVars.color.gray[700],
-        [vars.backgroundColor]: themeVars.color.gray[100],
+        [vars.backgroundColor]: themeVars.color.gray[100]
     },
     height: vars.height,
     minHeight: vars.height,
@@ -50,7 +55,7 @@ export const base = style({
     wordBreak: 'break-word',
     fontSize: themeVars.fontSize.base,
     display: 'inline-flex',
-    alignItems: 'center',
+    alignItems: 'center'
 });
 
 export const close = style({
@@ -70,9 +75,9 @@ export const close = style({
     borderRadius: '50%',
     ':hover': {
         backgroundColor: themeVars.color.gray[200],
-        color: themeVars.color.gray[700],
+        color: themeVars.color.gray[700]
     },
     ':focus': {
         outline: 'none'
     }
-})
+});

package/src/components/textarea/Textarea.vue

@@ -6,14 +6,14 @@
         <div v-if="description" :class="style.description">
             {{ description }}
         </div>
-        
+
         <div :class="wrapperComputedClasses">
-            <textarea 
+            <textarea
                 :style="`height: ${height}px`"
                 ref="element"
-                :id="id"  
+                :id="id"
                 :placeholder="placeholder"
-                :name="name" 
+                :name="name"
                 :value="modelValue || ''"
                 :readonly="readonly"
                 v-on="inputListeners"
@@ -38,8 +38,7 @@ import {
     defineComponent,
     ref,
     computed,
-    toRef,
-    defineExpose
+    toRef
 } from "vue";
 import { useInput } from "../../composables/useInput";
 import { useInteractive } from "../../composables/useInteractive";
@@ -91,7 +90,7 @@ export default defineComponent({
         },
     },
     emits: useInput.emits(),
-    setup(props, { slots, emit }) {
+    setup(props, { slots, emit, expose }) {
         const element = ref<HTMLInputElement|null>(null);
         const { focus, blur } = useInteractive(element);
         const {
@@ -150,7 +149,7 @@ export default defineComponent({
             emit('update:modelValue', '');
         };
 
-        defineExpose({
+        expose({
             focus,
             blur,
         })

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

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