@teammodlr/ui-kit 2.1.8 → 2.1.10

package/src/components/textarea/style/Textarea.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: '26px',
     sm: '30px',
     md: '38px',
     lg: '42px',
-    xl: '48px',
+    xl: '48px'
 };
 
 const borderRadiuses = {
@@ -14,7 +14,7 @@ const borderRadiuses = {
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 export const vars = {
@@ -25,8 +25,8 @@ export const vars = {
     borderColor: createVar(),
     backgroundColor: createVar(),
     color: createVar(),
-    cursor: createVar(),
-}
+    cursor: createVar()
+};
 
 export const wrapper = style({
     position: 'relative'
@@ -41,9 +41,9 @@ export const base = style({
         [vars.borderColor]: themeVars.color.gray[300],
         [vars.color]: themeVars.color.font.text,
         [vars.backgroundColor]: '#FFFFFF',
-        [vars.cursor]: 'text',
+        [vars.cursor]: 'text'
     },
-    
+
     minHeight: vars.height,
     width: '100%',
     borderRadius: vars.radius,
@@ -66,15 +66,15 @@ export const base = style({
         border-color .3s ${themeVars.transition.default}`,
     ':hover': {
         vars: {
-            [vars.borderColor]: themeVars.color.blue[400],
+            [vars.borderColor]: themeVars.color.blue[400]
         }
     },
     ':focus': {
         vars: {
-            [vars.borderColor]: themeVars.color.blue[500],
+            [vars.borderColor]: themeVars.color.blue[500]
         },
         outline: 'none',
-        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
     }
 });
 
@@ -83,50 +83,50 @@ export const size = styleVariants({
         vars: {
             [vars.radius]: borderRadiuses.xs,
             [vars.paddingX]: themeVars.space[1],
-            [vars.paddingY]: themeVars.space[0.5],
+            [vars.paddingY]: themeVars.space[0.5]
         },
         fontSize: themeVars.fontSize.small,
-        minHeight: '20px',
+        minHeight: '20px'
     },
     sm: {
         vars: {
             [vars.radius]: borderRadiuses.sm,
             [vars.paddingX]: themeVars.space[1.5],
-            [vars.paddingY]: themeVars.space[1],
+            [vars.paddingY]: themeVars.space[1]
         },
         fontSize: themeVars.fontSize.small,
-        minHeight: '24px',
+        minHeight: '24px'
     },
     md: {
         vars: {
             [vars.radius]: borderRadiuses.md,
             [vars.paddingX]: themeVars.space[1.5],
-            [vars.paddingY]: themeVars.space[1],
+            [vars.paddingY]: themeVars.space[1]
         },
-        minHeight: '28px',
+        minHeight: '28px'
     },
     lg: {
         vars: {
             [vars.radius]: borderRadiuses.lg,
             [vars.paddingX]: themeVars.space[2.5],
-            [vars.paddingY]: themeVars.space[1.5],
+            [vars.paddingY]: themeVars.space[1.5]
         },
         fontSize: themeVars.fontSize.large,
-        minHeight: '34px',
+        minHeight: '34px'
     },
     xl: {
         vars: {
             [vars.radius]: borderRadiuses.xl,
             [vars.paddingX]: themeVars.space[3],
-            [vars.paddingY]: themeVars.space[1.5],
+            [vars.paddingY]: themeVars.space[1.5]
         },
         fontSize: themeVars.fontSize.large,
-        minHeight: '36px',
-    },
+        minHeight: '36px'
+    }
 });
 
 export const block = style({
-    width: '100%',
+    width: '100%'
 });
 
 export const disabled = style({
@@ -134,18 +134,18 @@ export const disabled = style({
         [vars.borderColor]: themeVars.color.gray[200],
         [vars.color]: themeVars.color.gray[500],
         [vars.backgroundColor]: themeVars.color.gray[50],
-        [vars.cursor]: 'not-allowed',
+        [vars.cursor]: 'not-allowed'
     },
     ':focus': {
-        boxShadow: 'none',
+        boxShadow: 'none'
     },
     ':hover': {
-        cursor: 'not-allowed',
+        cursor: 'not-allowed'
     }
 });
 
 export const label = style({
-    fontWeight: "500",
+    fontWeight: '500',
     display: 'inline-block',
     fontSize: themeVars.fontSize.base,
     wordBreak: 'break-word',
@@ -161,7 +161,7 @@ export const description = style({
     color: themeVars.color.gray[600],
     lineHeight: themeVars.fontSize.large,
     wordBreak: 'break-word',
-    marginBottom: themeVars.space[1.5],
+    marginBottom: themeVars.space[1.5]
 });
 
 export const errorMessage = style({
@@ -170,22 +170,22 @@ export const errorMessage = style({
     fontSize: themeVars.fontSize.base,
     color: themeVars.color.red[600],
     wordBreak: 'break-word',
-    marginTop: themeVars.space[1.5],
+    marginTop: themeVars.space[1.5]
 });
 
 export const error = style({
     vars: {
-        [vars.borderColor]: themeVars.color.red[500],
+        [vars.borderColor]: themeVars.color.red[500]
     },
     ':hover': {
         vars: {
-            [vars.borderColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500]
         }
     },
     ':focus': {
         boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
         vars: {
-            [vars.borderColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500]
         }
-    },
+    }
 });

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

@@ -1,13 +1,8 @@
-import MTooltip from "../Tooltip.vue";
-import MButton from "@/components/button/Button.vue";
-import {
-    MTooltipBasic, MTooltipPlacement
-} from "./index";
+import MTooltip from '../Tooltip.vue';
+import MButton from '@/components/button/Button.vue';
+import { MTooltipBasic, MTooltipPlacement } from './index';
 
-import {
-    createStory,
-    popperPositionArgType
-} from "../../../__storybook__";
+import { createStory, popperPositionArgType } from '../../../__storybook__';
 
 export default {
     component: MTooltip,
@@ -16,7 +11,7 @@ export default {
     argTypes: {
         ...popperPositionArgType()
     }
-}
+};
 
 export const Basic = createStory(MTooltipBasic);
 export const Placement = createStory(MTooltipPlacement);

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

@@ -1,2 +1,2 @@
-export { default as MTooltipBasic } from "./basic.vue";
-export { default as MTooltipPlacement } from "./placement.vue";
+export { default as MTooltipBasic } from './basic.vue';
+export { default as MTooltipPlacement } from './placement.vue';

package/src/components/tooltip/style/Tooltip.css.ts

@@ -1,11 +1,10 @@
-import {createVar, globalKeyframes, style} from '@vanilla-extract/css';
-import { themeVars } from "../../../styles/theme.css";
-
+import { createVar, globalKeyframes, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 export const vars = {
     backgroundColor: createVar(),
-    color: createVar(),
-}
+    color: createVar()
+};
 
 export const wrapper = style({
     position: 'relative',
@@ -13,18 +12,18 @@ export const wrapper = style({
 });
 
 export const container = style({
-    zIndex: 50,
+    zIndex: 50
 });
 
 export const tooltip = style({
     vars: {
         [vars.backgroundColor]: themeVars.color.gray[900],
-        [vars.color]: themeVars.color.gray[100],
+        [vars.color]: themeVars.color.gray[100]
     },
     zIndex: 50,
     transition: 'opacity 0.3s, ease',
     position: 'fixed',
-    fontSize: "13px",
+    fontSize: '13px',
     fontWeight: 'normal',
     color: vars.color,
     backgroundColor: vars.backgroundColor,
@@ -36,16 +35,16 @@ export const tooltip = style({
     boxSizing: 'border-box',
     selectors: {
         '&[data-popper-placement^="top"]': {
-            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`,
+            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`
         },
         '&[data-popper-placement^="bottom"]': {
-            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`,
+            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`
         },
         '&[data-popper-placement^="left"]': {
-            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`,
+            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`
         },
         '&[data-popper-placement^="right"]': {
-            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`,
+            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`
         }
     }
 });
@@ -53,27 +52,27 @@ export const tooltip = style({
 export const reverse = style({
     vars: {
         [vars.backgroundColor]: themeVars.color.gray[100],
-        [vars.color]: themeVars.color.gray[900],
+        [vars.color]: themeVars.color.gray[900]
     }
 });
 
-const fadeOutAnimation = "fade-out-animation";
+const fadeOutAnimation = 'fade-out-animation';
 globalKeyframes(fadeOutAnimation, {
-    'from': {
-        opacity: 1,
+    from: {
+        opacity: 1
     },
-    'to': {
-        opacity: 0,
+    to: {
+        opacity: 0
     }
 });
 
-const fadeInAnimation = "fade-in-animation";
+const fadeInAnimation = 'fade-in-animation';
 globalKeyframes(fadeInAnimation, {
     '0%': {
-        opacity: 0,
+        opacity: 0
     },
     '100%': {
-        opacity: 1,
+        opacity: 1
     }
 });
 
@@ -81,11 +80,11 @@ export const fadeEnter = style({
     animationName: fadeInAnimation,
     animationDuration: '0.125s',
     animationTimingFunction: 'ease-in-out',
-    transition: themeVars.transition.default,
-})
+    transition: themeVars.transition.default
+});
 
 export const fadeLeave = style({
     animationName: fadeOutAnimation,
     animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-})
+    animationTimingFunction: 'ease-in-out'
+});

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

@@ -1,16 +1,12 @@
-import MTransfer from "../Transfer.vue";
+import MTransfer from '../Transfer.vue';
 
-import {
-    MTransferBasic
-} from "./index";
+import { MTransferBasic } from './index';
 
-import {
-    createStory,
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MTransfer,
-    title: "Components/Transfer",
+    title: 'Components/Transfer'
 };
 
-export const Basic = createStory(MTransferBasic);
+export const Basic = createStory(MTransferBasic);

package/src/components/transfer/style/Transfer.css.ts

@@ -1,49 +1,50 @@
-import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
-
-export const vars = {
-
-}
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
+export const vars = {};
 
 export const wrapper = style({
-    display: "flex",
-    flexWrap: "nowrap",
-    wordBreak: "break-word",
+    display: 'flex',
+    flexWrap: 'nowrap',
+    wordBreak: 'break-word',
     fontSize: themeVars.fontSize.base,
-    width: "100%",
-    height: "300px",
+    width: '100%',
+    height: '300px',
     border: `1px solid ${themeVars.color.gray[300]}`,
     borderRadius: themeVars.rounded.default,
-    overflow: "hidden"
+    overflow: 'hidden'
 });
 
 export const list = style({
     flex: 1,
     minWidth: 0,
-    height: "inherit",
-    display: "flex",
-    flexDirection: "column",
-    overflow: "auto",
-    borderRight: `1px solid ${themeVars.color.gray[200]}`,
+    height: 'inherit',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'auto',
+    borderRight: `1px solid ${themeVars.color.gray[200]}`
 });
 
-
 // lastchild of list in wrapper
 globalStyle(`${wrapper} > ${list}:last-child`, {
-    borderRight: "none"
-})
+    borderRight: 'none'
+});
 
 export const listHeader = style({
-    minHeight: "40px",
-    boxSizing: "border-box",
-    display: "flex",
+    minHeight: '40px',
+    boxSizing: 'border-box',
+    display: 'flex',
     flexShrink: 0,
-    padding: `${themeVars.space["4"]}`,
-    alignItems: "center",
-    position: "sticky",
+    padding: `${themeVars.space['4']}`,
+    alignItems: 'center',
+    position: 'sticky',
     top: 0,
-    backgroundColor: "#FFF",
+    backgroundColor: '#FFF',
     color: themeVars.color.gray[900],
     zIndex: 1,
     fontWeight: 500,
@@ -53,28 +54,28 @@ export const listHeader = style({
 export const listBody = style({
     flexBasis: 0,
     flexGrow: 1,
-    boxSizing: "border-box",
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
+    boxSizing: 'border-box',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column'
 });
 
 export const listContainer = style({
     flex: 1,
-    position: "relative",
-    overflow: "auto",
+    position: 'relative',
+    overflow: 'auto'
 });
 
 export const transferItem = style({
-    padding: `0 ${themeVars.space["4"]}`,
-    minHeight: "35px",
-    display: "flex",
-    alignItems: "center",
+    padding: `0 ${themeVars.space['4']}`,
+    minHeight: '35px',
+    display: 'flex',
+    alignItems: 'center',
     color: themeVars.color.gray[800],
-    cursor: "pointer",
+    cursor: 'pointer',
     fontSize: themeVars.fontSize.base,
-    userSelect: "none",
+    userSelect: 'none',
     ':hover': {
         backgroundColor: themeVars.color.gray[150]
     }
-})
+});

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

@@ -1,16 +1,12 @@
-import MTree from "../Tree.vue";
+import MTree from '../Tree.vue';
 
-import {
-    MTreeBasic
-} from "./index";
+import { MTreeBasic } from './index';
 
-import {
-    createStory,
-} from "../../../__storybook__";
+import { createStory } from '../../../__storybook__';
 
 export default {
     component: MTree,
-    title: "Components/Tree"
-}
+    title: 'Components/Tree'
+};
 
-export const Basic = createStory(MTreeBasic)
+export const Basic = createStory(MTreeBasic);

package/src/components/tree/props.ts

@@ -1,4 +1,4 @@
-import type {ExtractPublicPropTypes, PropType} from "vue";
+import type { ExtractPublicPropTypes, PropType } from 'vue';
 import type {
     TreeOptions,
     Key,
@@ -6,24 +6,24 @@ import type {
     OnUpdateIndeterminateKeys,
     onUpdateExpandedKeys,
     TreeNodeDoubleClick
-} from "./types";
-import type {TreeMateOptions} from "treemate";
-import type {MaybeArray} from "../../call";
+} from './types';
+import type { TreeMateOptions } from 'treemate';
+import type { MaybeArray } from '../../call';
 
 export const treeSharedProps = {
     expandedKeys: Array as PropType<Key[]>,
     defaultExpandAll: Boolean,
     keyField: {
         type: String,
-        default: 'key',
+        default: 'key'
     },
     labelField: {
         type: String,
-        default: 'label',
+        default: 'label'
     },
     childrenField: {
         type: String,
-        default: 'children',
+        default: 'children'
     },
     onDblClick: Function as PropType<TreeNodeDoubleClick>,
     onUpdateIndeterminateKeys: [Function, Array] as PropType<
@@ -40,7 +40,7 @@ export const treeSharedProps = {
     >
 } as const;
 
-export const treeProps= {
+export const treeProps = {
     data: {
         type: Array as PropType<TreeOptions>,
         default: () => []
@@ -64,32 +64,34 @@ export const treeProps= {
     virtualScroll: Boolean,
     nodeProps: Function as PropType<TreeNodeProps>,
     getChildren: Function as PropType<GetChildren>,
-    ...treeSharedProps,
+    ...treeSharedProps
 } as const;
 
 export type TreeProps = ExtractPublicPropTypes<typeof treeProps>;
-export type GetChildren = (option: any) => unknown
+export type GetChildren = (option: any) => unknown;
 
-export function createTreeMateOptions<T> (
+export function createTreeMateOptions<T>(
     keyField: string,
     childrenField: string,
     disabledField: string,
-    getChildren: GetChildren | undefined,
+    getChildren: GetChildren | undefined
 ): TreeMateOptions<T, T, T> {
-    const settledGetChildren: GetChildren = getChildren || ((node: T) => {
-        return (node as any)[childrenField]
-    });
+    const settledGetChildren: GetChildren =
+        getChildren ||
+        ((node: T) => {
+            return (node as any)[childrenField];
+        });
 
     return {
         getIsGroup() {
             return false;
         },
         getKey(node: T) {
-            return (node as any)[keyField]
+            return (node as any)[keyField];
         },
         getChildren: settledGetChildren,
         getDisabled(node: T) {
-            return !!((node as any)[disabledField]);
+            return !!(node as any)[disabledField];
         }
-    }
+    };
 }