@teammodlr/ui-kit 2.1.8 → 2.1.9

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

@@ -1,18 +1,14 @@
-import MDialog from "../Dialog.vue";
-import {
-    MDialogBasic
-} from "./index";
+import MDialog from '../Dialog.vue';
+import { MDialogBasic } from './index';
 
-import {
-    createStory, sizeArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MDialog,
     title: 'Components/Dialog',
     argTypes: {
-        ...sizeArgType(),
+        ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MDialogBasic);

package/src/components/dialog/style/Dialog.css.ts

@@ -1,86 +1,87 @@
-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';
 
-export const vars = {
+export const vars = {};
 
-}
-
-export const root = style({
-
-});
+export const root = style({});
 export const backdrop = style({
-    position: "fixed",
+    position: 'fixed',
     inset: 0,
     top: 0,
     bottom: 0,
     left: 0,
     right: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    pointerEvents: "none",
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none'
 });
 
 export const backdropColor = style({
-    backgroundColor: 'rgba(0,0,0,.45)',
+    backgroundColor: 'rgba(0,0,0,.45)'
 });
 
 export const wrapper = style({
-    position: "fixed",
+    position: 'fixed',
     inset: 0,
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
     outline: 0,
-    overflow: "auto",
-    boxSizing: "border-box",
+    overflow: 'auto',
+    boxSizing: 'border-box'
 });
 
 export const dialog = style({
-    boxSizing: "border-box",
-    margin: "0 auto",
+    boxSizing: 'border-box',
+    margin: '0 auto',
     padding: 0,
-    position: "relative",
-    top: "100px",
-    width: "auto",
+    position: 'relative',
+    top: '100px',
+    width: 'auto',
     maxWidth: `calc(100vw - 32px)`,
-    paddingBottom: "24px",
+    paddingBottom: '24px'
 });
 
 export const content = style({
-    position: "relative",
-    backgroundColor: "#FFF",
-    backgroundClip: "padding-box",
+    position: 'relative',
+    backgroundColor: '#FFF',
+    backgroundClip: 'padding-box',
     border: 0,
     borderRadius: themeVars.rounded.default,
-    pointerEvents: "auto",
+    pointerEvents: 'auto',
     padding: `20px 24px`,
     boxShadow: `0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)`
-})
+});
 
 export const header = style({
     color: themeVars.color.font.default,
-    backgroundColor: "#FFF",
-    marginBottom: themeVars.space[2],
+    backgroundColor: '#FFF',
+    marginBottom: themeVars.space[2]
 });
 
 export const footer = style({
-    textAlign: "end",
+    textAlign: 'end',
     background: `0 0`,
-    marginTop: themeVars.space[2],
-})
+    marginTop: themeVars.space[2]
+});
 
 export const title = style({
     margin: 0,
     color: themeVars.color.font.default,
     fontWeight: 600,
     lineHeight: 1.5,
-    wordWrap: "break-word",
+    wordWrap: 'break-word'
 });
 
 export const close = style({
-    position: "absolute",
+    position: 'absolute',
     top: `17px`,
     insetInlineEnd: `17px`,
     padding: 0,
@@ -93,7 +94,7 @@ export const close = style({
     cursor: `pointer`,
     selectors: {
         '&:hover': {
-            backgroundColor: `hsla(0,0%,45.1%,0.1)`,
+            backgroundColor: `hsla(0,0%,45.1%,0.1)`
         }
     }
-})
+});

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

@@ -3,12 +3,8 @@ import MDropdownList from '../DropdownList.vue';
 import MDropdownItem from '../DropdownItem.vue';
 import MButton from '../../button/Button.vue';
 
-import {
-    MDropdownBasic,
-    MDropdownContext,
-    MDropdownCustom
-} from './index';
-import {createStory, popperPositionArgType} from '../../../__storybook__';
+import { MDropdownBasic, MDropdownContext, MDropdownCustom } from './index';
+import { createStory, popperPositionArgType } from '../../../__storybook__';
 
 export default {
     component: MDropdown,
@@ -21,7 +17,7 @@ export default {
     argTypes: {
         ...popperPositionArgType()
     }
-}
+};
 
 export const Basic = createStory(MDropdownBasic);
 export const Custom = createStory(MDropdownCustom);

package/src/components/dropdown/hooks.ts

@@ -1,30 +1,30 @@
-import { ref, watch, onMounted, nextTick } from 'vue'
+import { ref, watch, onMounted, nextTick } from 'vue';
 
-import type { Ref } from 'vue'
+import type { Ref } from 'vue';
 
 export function useLabel(
-  rawLabel: Ref<string | number | null>,
-  element: Ref<HTMLElement | null | undefined>
+    rawLabel: Ref<string | number | null>,
+    element: Ref<HTMLElement | null | undefined>
 ) {
-  const label = ref(rawLabel.value)
+    const label = ref(rawLabel.value);
 
-  function setLabel(value: string | number | null) {
-    if (element.value) {
-      label.value = value ?? element.value.textContent?.trim() ?? null
-    } else {
-      label.value = value
+    function setLabel(value: string | number | null) {
+        if (element.value) {
+            label.value = value ?? element.value.textContent?.trim() ?? null;
+        } else {
+            label.value = value;
+        }
     }
-  }
 
-  watch(rawLabel, value => {
-    setLabel(value)
-  })
+    watch(rawLabel, value => {
+        setLabel(value);
+    });
 
-  onMounted(() => {
-    nextTick(() => {
-      setLabel(rawLabel.value)
-    })
-  })
+    onMounted(() => {
+        nextTick(() => {
+            setLabel(rawLabel.value);
+        });
+    });
 
-  return label
+    return label;
 }

package/src/components/dropdown/style/Dropdown.css.ts

@@ -1,55 +1,55 @@
-import { style } from "@vanilla-extract/css";
-import { themeVars } from "../../../styles/theme.css";
+import { style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 export const menu = style({
-    backgroundColor: "#ffffff",
-    borderRadius: "5px",
+    backgroundColor: '#ffffff',
+    borderRadius: '5px',
     padding: '5px 0',
     zIndex: 4000,
-    boxSizing: "border-box",
-    position: "relative",
-    minWidth: "200px",
-    maxWidth: "350px",
+    boxSizing: 'border-box',
+    position: 'relative',
+    minWidth: '200px',
+    maxWidth: '350px',
     border: `1px solid ${themeVars.color.gray[300]}`,
     boxShadow: themeVars.shadow.md
 });
 
 export const menuItems = style({
-    listStyle: "none",
+    listStyle: 'none',
     margin: 0,
-    padding: 0,
+    padding: 0
 });
 
 export const menuItem = style({
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    cursor: "pointer",
-    minHeight: "36px",
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    minHeight: '36px',
     fontSize: themeVars.fontSize.base,
     paddingBlock: themeVars.space['1.5'],
     paddingInline: themeVars.space['3'],
     gap: themeVars.space[2],
     color: themeVars.color.gray[800],
-    transition: "background-color 0.05s ease-in-out",
-    textDecoration: "none",
+    transition: 'background-color 0.05s ease-in-out',
+    textDecoration: 'none',
     ':hover': {
-        backgroundColor: themeVars.color.gray[100],
+        backgroundColor: themeVars.color.gray[100]
     }
 });
 
 export const menuItemText = style({
     flex: 1,
-    whiteSpace: "nowrap",
+    whiteSpace: 'nowrap'
 });
 
 export const menuItemIcon = style({
-    display: "flex",
-    alignItems: "center",
+    display: 'flex',
+    alignItems: 'center'
 });
 
 export const menuSeperator = style({
-    height: "1px",
+    height: '1px',
     backgroundColor: themeVars.color.gray[200],
-    marginBlock: themeVars.space[1],
-})
+    marginBlock: themeVars.space[1]
+});

package/src/components/dropdown/symbol.ts

@@ -1,8 +1,9 @@
-import type {InjectionKey} from "vue";
+import type { InjectionKey } from 'vue';
 
 export interface DropdownState {
     handleSelect: (labels: string[]) => void;
     isOpen: boolean;
 }
 
-export const DROPDOWN_STATE: InjectionKey<DropdownState> = Symbol('DROPDOWN_STATE');
+export const DROPDOWN_STATE: InjectionKey<DropdownState> =
+    Symbol('DROPDOWN_STATE');

package/src/components/form/Form.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, provide, reactive, computed, onMounted, watch, nextTick, ref, toRef} from 'vue';
+import {defineComponent, provide, reactive, computed, onMounted, watch, nextTick, toRef} from 'vue';
 import type { PropType } from 'vue';
 import * as style from "./style";
 import {FORM_STATE} from "./symbol";

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

@@ -5,9 +5,7 @@ import MSelect from '../../select/Select.vue';
 import MCheckbox from '../../checkbox/Checkbox.vue';
 import MColorPicker from '../../colorpicker/ColorPicker.vue';
 
-import {
-    MFormBasic
-} from './index';
+import { MFormBasic } from './index';
 import { createStory } from '../../../__storybook__';
 
 export default {
@@ -20,6 +18,6 @@ export default {
         MColorPicker
     },
     title: 'Components/Form'
-}
+};
 
 export const Basic = createStory(MFormBasic);

package/src/components/form/style/Form.css.ts

@@ -1,23 +1,28 @@
-import {createVar, globalKeyframes, globalStyle, style} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import {
+    createVar,
+    globalKeyframes,
+    globalStyle,
+    style
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
 
 const borderRadiuses = {
     xs: '2px',
     sm: '3px',
     md: '4px',
     lg: '6px',
-    xl: '8px',
+    xl: '8px'
 };
 
 export const vars = {
-    spacing: createVar(),
+    spacing: createVar()
 };
 
 export const base = style({
     vars: {
         [vars.spacing]: themeVars.space[4]
     },
-    display: "flex",
-    flexDirection: "column",
-    gap: vars.spacing,
-});
+    display: 'flex',
+    flexDirection: 'column',
+    gap: vars.spacing
+});

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

@@ -1,2 +1,2 @@
-export {assignInlineVars} from '@vanilla-extract/dynamic';
-export * from './Form.css';
+export { assignInlineVars } from '@vanilla-extract/dynamic';
+export * from './Form.css';

package/src/components/form/symbol.ts

@@ -1,11 +1,16 @@
-import type {InjectionKey} from "vue";
+import type { InjectionKey } from 'vue';
 
 export interface FormState {
-    add: (name: string, focus: () => void, validate: () => boolean, setError: (error: string) => void) => void;
+    add: (
+        name: string,
+        focus: () => void,
+        validate: () => boolean,
+        setError: (error: string) => void
+    ) => void;
     remove: (name: string) => void;
-    insideForm: boolean,
-    disabled: boolean,
+    insideForm: boolean;
+    disabled: boolean;
     loading: boolean;
 }
 
-export const FORM_STATE: InjectionKey<FormState> = Symbol('FORM_STATE');
+export const FORM_STATE: InjectionKey<FormState> = Symbol('FORM_STATE');

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

@@ -1,12 +1,10 @@
-import { createStory } from "../../../__storybook__";
-import MImage from "../Image.vue";
-import {
-    MImageBasic,
-} from "./index";
+import { createStory } from '../../../__storybook__';
+import MImage from '../Image.vue';
+import { MImageBasic } from './index';
 
 export default {
     component: MImage,
-    title: 'Components/Image',
-}
+    title: 'Components/Image'
+};
 
 export const Basic = createStory(MImageBasic);

package/src/components/input/Input.vue

@@ -6,7 +6,7 @@
         <div v-if="description" :class="style.description">
             {{ description }}
         </div>
-        
+
         <div :class="wrapperComputedClasses">
             <div v-if="hasLeftIcon" :class="style.leftIcon">
                 <slot name="icon-left" />
@@ -14,12 +14,12 @@
             <div v-if="hasPrefix" :class="style.prefix">
                 <slot name="prefix" />
             </div>
-            <input 
+            <input
                 ref="element"
-                :id="id"  
-                :type="inputType" 
+                :id="id"
+                :type="inputType"
                 :placeholder="placeholder"
-                :name="name" 
+                :name="name"
                 :value="modelValue || ''"
                 :readonly="readonly"
                 v-on="inputListeners"
@@ -52,8 +52,7 @@ import {
     defineComponent,
     ref,
     computed,
-    toRef,
-    defineExpose
+    toRef
 } from "vue";
 import { useInput } from "../../composables/useInput";
 import { useInteractive } from "../../composables/useInteractive";
@@ -106,7 +105,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 {
@@ -198,7 +197,7 @@ export default defineComponent({
             emit('update:modelValue', '');
         };
 
-        defineExpose({
+        expose({
             focus,
             blur,
         })

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

@@ -1,4 +1,4 @@
-import MInput from "../Input.vue";
+import MInput from '../Input.vue';
 import {
     MInputBasic,
     MInputSuffix,
@@ -6,11 +6,9 @@ import {
     MInputLeftIcon,
     MInputRightIcon,
     MInputSizes
-} from "./index";
+} from './index';
 
-import {
-    createStory, sizeArgType
-} from "../../../__storybook__";
+import { createStory, sizeArgType } from '../../../__storybook__';
 
 export default {
     component: MInput,
@@ -18,11 +16,11 @@ export default {
     argTypes: {
         ...sizeArgType()
     }
-}
+};
 
 export const Basic = createStory(MInputBasic);
 export const Suffix = createStory(MInputSuffix);
 export const Prefix = createStory(MInputPrefix);
 export const Sizes = createStory(MInputSizes);
 export const LeftIcon = createStory(MInputLeftIcon);
-export const RightIcon = createStory(MInputRightIcon);
+export const RightIcon = createStory(MInputRightIcon);