@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/tag/style/Tag.css.ts

@@ -1,83 +1,83 @@
-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'
-};
-
-const borderRadiuses = {
-    xs: '2px',
-    sm: '3px',
-    md: '4px',
-    lg: '6px',
-    xl: '8px'
-};
-
-export const vars = {
-    height: createVar(),
-    radius: createVar(),
-    paddingX: createVar(),
-    paddingY: createVar(),
-    borderColor: createVar(),
-    backgroundColor: createVar(),
-    color: createVar()
-};
-
-export const base = style({
-    vars: {
-        [vars.height]: sizes.md,
-        [vars.radius]: borderRadiuses.md,
-        [vars.paddingX]: themeVars.space[1.5],
-        [vars.paddingY]: themeVars.space[0],
-        [vars.borderColor]: themeVars.color.gray[100],
-        [vars.color]: themeVars.color.gray[700],
-        [vars.backgroundColor]: themeVars.color.gray[100]
-    },
-    height: vars.height,
-    minHeight: vars.height,
-    lineHeight: vars.height,
-    borderRadius: vars.radius,
-    borderWidth: 1,
-    borderStyle: 'solid',
-    color: vars.color,
-    borderColor: vars.borderColor,
-    backgroundColor: vars.backgroundColor,
-    padding: `${vars.paddingY} ${vars.paddingX}`,
-    wordBreak: 'break-word',
-    fontSize: themeVars.fontSize.base,
-    display: 'inline-flex',
-    alignItems: 'center'
-});
-
-export const close = style({
-    marginLeft: themeVars.space[1],
-    appearance: 'none',
-    outline: 'none',
-    border: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    backgroundColor: 'transparent',
-    padding: '3px',
-    position: 'relative',
-    right: '-2px',
-    color: themeVars.color.gray[500],
-    borderRadius: '50%',
-    ':hover': {
-        backgroundColor: themeVars.color.gray[200],
-        color: themeVars.color.gray[700]
-    },
-    ':focus': {
-        outline: 'none'
-    }
-});
+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'
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px'
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    paddingX: createVar(),
+    paddingY: createVar(),
+    borderColor: createVar(),
+    backgroundColor: createVar(),
+    color: createVar()
+};
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[1.5],
+        [vars.paddingY]: themeVars.space[0],
+        [vars.borderColor]: themeVars.color.gray[100],
+        [vars.color]: themeVars.color.gray[700],
+        [vars.backgroundColor]: themeVars.color.gray[100]
+    },
+    height: vars.height,
+    minHeight: vars.height,
+    lineHeight: vars.height,
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    color: vars.color,
+    borderColor: vars.borderColor,
+    backgroundColor: vars.backgroundColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    wordBreak: 'break-word',
+    fontSize: themeVars.fontSize.base,
+    display: 'inline-flex',
+    alignItems: 'center'
+});
+
+export const close = style({
+    marginLeft: themeVars.space[1],
+    appearance: 'none',
+    outline: 'none',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    padding: '3px',
+    position: 'relative',
+    right: '-2px',
+    color: themeVars.color.gray[500],
+    borderRadius: '50%',
+    ':hover': {
+        backgroundColor: themeVars.color.gray[200],
+        color: themeVars.color.gray[700]
+    },
+    ':focus': {
+        outline: 'none'
+    }
+});

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

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

package/src/components/textarea/Textarea.vue

@@ -1,180 +1,180 @@
-<template>
-    <div ref="container" :class="computedContainerClasses">
-        <label v-if="label" :for="id" :id="`${id}-label`" :class="style.label">
-            {{ label }}
-        </label>
-        <div v-if="description" :class="style.description">
-            {{ description }}
-        </div>
-
-        <div :class="wrapperComputedClasses">
-            <textarea
-                :style="`height: ${height}px`"
-                ref="element"
-                :id="id"
-                :placeholder="placeholder"
-                :name="name"
-                :value="modelValue || ''"
-                :readonly="readonly"
-                v-on="inputListeners"
-                :class="inputComputedClasses"
-                v-bind="$attrs"
-                :disabled="disabled || loading"
-                :aria-disabled="disabled ? 'true' : 'false'"
-                :aria-labelledby="`${id}-label`"
-            />
-        </div>
-        <div v-if="inputError" :class="style.errorMessage">
-            {{ inputError }}
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-// @ts-nocheck
-import type { PropType } from "vue";
-import type { Size } from "../../types/props";
-import {
-    defineComponent,
-    ref,
-    computed,
-    toRef
-} from "vue";
-import { useInput } from "../../composables/useInput";
-import { useInteractive } from "../../composables/useInteractive";
-import * as style from './style';
-
-export default defineComponent({
-    name: 'MTextArea',
-    props: {
-        ...useInput.props(),
-        ...useInteractive.props(),
-        label: {
-            type: String
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md',
-        },
-        placeholder: {
-            type: String,
-            default: ''
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        readonly: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        description: {
-            type: String,
-            default: ''
-        },
-        block: {
-            type: Boolean,
-            default: false
-        },
-        error: {
-            type: String,
-            default: ''
-        },
-        height: {
-            type: Number,
-            default: 64
-        },
-    },
-    emits: useInput.emits(),
-    setup(props, { slots, emit, expose }) {
-        const element = ref<HTMLInputElement|null>(null);
-        const { focus, blur } = useInteractive(element);
-        const {
-            id,
-            insideForm,
-            reset,
-            inputListeners,
-            validate,
-            setError,
-            formError,
-            formDisabled,
-            formLoading
-        } = useInput(props, { focus, emit });
-
-        const name = toRef(props, 'name');
-
-        const disabled = computed(() => formDisabled || props.disabled);
-        const loading = computed(() => formLoading || props.loading);
-
-        const readonly = computed(() => (props.loading || props.readonly));
-
-        const computedContainerClasses = computed(() => {
-            return [
-                {
-                    [style.block]: props.block,
-                }
-            ]
-        });
-
-        const wrapperComputedClasses = computed(() => {
-            return [
-                style.wrapper,
-                {
-                    [style.block]: props.block,
-                }
-            ]
-        });
-
-        const inputComputedClasses = computed(() => {
-            return [
-                style.base,
-                style.size[props.size],
-                {
-                    [style.block]: props.block,
-                    [style.disabled]: disabled.value || loading.value,
-                    [style.error]: inputError.value,
-                }
-            ];
-        });
-
-        const inputError = computed(() => {
-            return formError.value || props.error;
-        });
-
-        const onClear = () => {
-            emit('update:modelValue', '');
-        };
-
-        expose({
-            focus,
-            blur,
-        })
-
-        return {
-            element,
-            id,
-
-            disabled,
-            loading,
-            readonly,
-            inputComputedClasses,
-            wrapperComputedClasses,
-            computedContainerClasses,
-            name,
-            inputError,
-            style,
-
-            onClear,
-            validate,
-            setError,
-            focus,
-            blur,
-            inputListeners
-        }
-    }
-})
-</script>
+<template>
+    <div ref="container" :class="computedContainerClasses">
+        <label v-if="label" :for="id" :id="`${id}-label`" :class="style.label">
+            {{ label }}
+        </label>
+        <div v-if="description" :class="style.description">
+            {{ description }}
+        </div>
+
+        <div :class="wrapperComputedClasses">
+            <textarea
+                :style="`height: ${height}px`"
+                ref="element"
+                :id="id"
+                :placeholder="placeholder"
+                :name="name"
+                :value="modelValue || ''"
+                :readonly="readonly"
+                v-on="inputListeners"
+                :class="inputComputedClasses"
+                v-bind="$attrs"
+                :disabled="disabled || loading"
+                :aria-disabled="disabled ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+            />
+        </div>
+        <div v-if="inputError" :class="style.errorMessage">
+            {{ inputError }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import type { PropType } from "vue";
+import type { Size } from "../../types/props";
+import {
+    defineComponent,
+    ref,
+    computed,
+    toRef
+} from "vue";
+import { useInput } from "../../composables/useInput";
+import { useInteractive } from "../../composables/useInteractive";
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MTextArea',
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        description: {
+            type: String,
+            default: ''
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        error: {
+            type: String,
+            default: ''
+        },
+        height: {
+            type: Number,
+            default: 64
+        },
+    },
+    emits: useInput.emits(),
+    setup(props, { slots, emit, expose }) {
+        const element = ref<HTMLInputElement|null>(null);
+        const { focus, blur } = useInteractive(element);
+        const {
+            id,
+            insideForm,
+            reset,
+            inputListeners,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading
+        } = useInput(props, { focus, emit });
+
+        const name = toRef(props, 'name');
+
+        const disabled = computed(() => formDisabled || props.disabled);
+        const loading = computed(() => formLoading || props.loading);
+
+        const readonly = computed(() => (props.loading || props.readonly));
+
+        const computedContainerClasses = computed(() => {
+            return [
+                {
+                    [style.block]: props.block,
+                }
+            ]
+        });
+
+        const wrapperComputedClasses = computed(() => {
+            return [
+                style.wrapper,
+                {
+                    [style.block]: props.block,
+                }
+            ]
+        });
+
+        const inputComputedClasses = computed(() => {
+            return [
+                style.base,
+                style.size[props.size],
+                {
+                    [style.block]: props.block,
+                    [style.disabled]: disabled.value || loading.value,
+                    [style.error]: inputError.value,
+                }
+            ];
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        const onClear = () => {
+            emit('update:modelValue', '');
+        };
+
+        expose({
+            focus,
+            blur,
+        })
+
+        return {
+            element,
+            id,
+
+            disabled,
+            loading,
+            readonly,
+            inputComputedClasses,
+            wrapperComputedClasses,
+            computedContainerClasses,
+            name,
+            inputError,
+            style,
+
+            onClear,
+            validate,
+            setError,
+            focus,
+            blur,
+            inputListeners
+        }
+    }
+})
+</script>

package/src/components/textarea/examples/basic.vue

@@ -1,8 +1,8 @@
-<template>
-    <MTextArea
-        label="Some Text"
-        name="text"
-        placeholder="Some text placeholder"
-        height=128
-        />
-</template>
+<template>
+    <MTextArea
+        label="Some Text"
+        name="text"
+        placeholder="Some text placeholder"
+        height=128
+        />
+</template>

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

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