@teammodlr/ui-kit 2.0.20 → 2.0.22

package/src/components/textarea/TextArea.vue

@@ -0,0 +1,181 @@
+<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,
+    defineExpose
+} 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 }) {
+        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', '');
+        };
+
+        defineExpose({
+            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

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

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

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

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

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

package/src/components/textarea/style/TextArea.css.ts

@@ -0,0 +1,190 @@
+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',
+};
+
+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(),
+    cursor: createVar(),
+}
+
+export const wrapper = style({
+    position: 'relative'
+});
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[2],
+        [vars.paddingY]: themeVars.space[0.5],
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.font.text,
+        [vars.backgroundColor]: '#FFFFFF',
+        [vars.cursor]: 'text',
+    },
+    
+    minHeight: vars.height,
+    width: '100%',
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: vars.borderColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    fontSize: themeVars.fontSize.base,
+    display: 'block',
+    textAlign: 'left',
+    appearance: 'none',
+    boxSizing: 'border-box',
+    resize: 'vertical',
+    boxShadow: 'none',
+    color: vars.color,
+    transition: `color .3s ${themeVars.transition.default},
+        background-color .3s ${themeVars.transition.default},
+        box-shadow .3s ${themeVars.transition.default},
+        border-color .3s ${themeVars.transition.default}`,
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[400],
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[500],
+        },
+        outline: 'none',
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+    }
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1],
+            [vars.paddingY]: themeVars.space[0.5],
+        },
+        fontSize: themeVars.fontSize.small,
+        minHeight: '20px',
+    },
+    sm: {
+        vars: {
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5],
+            [vars.paddingY]: themeVars.space[1],
+        },
+        fontSize: themeVars.fontSize.small,
+        minHeight: '24px',
+    },
+    md: {
+        vars: {
+            [vars.radius]: borderRadiuses.md,
+            [vars.paddingX]: themeVars.space[1.5],
+            [vars.paddingY]: themeVars.space[1],
+        },
+        minHeight: '28px',
+    },
+    lg: {
+        vars: {
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5],
+            [vars.paddingY]: themeVars.space[1.5],
+        },
+        fontSize: themeVars.fontSize.large,
+        minHeight: '34px',
+    },
+    xl: {
+        vars: {
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3],
+            [vars.paddingY]: themeVars.space[1.5],
+        },
+        fontSize: themeVars.fontSize.large,
+        minHeight: '36px',
+    },
+});
+
+export const block = style({
+    width: '100%',
+});
+
+export const disabled = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.gray[200],
+        [vars.color]: themeVars.color.gray[500],
+        [vars.backgroundColor]: themeVars.color.gray[50],
+        [vars.cursor]: 'not-allowed',
+    },
+    ':focus': {
+        boxShadow: 'none',
+    },
+    ':hover': {
+        cursor: 'not-allowed',
+    }
+});
+
+export const label = style({
+    fontWeight: "500",
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer',
+    marginBottom: themeVars.space[1],
+    color: themeVars.color.font.text
+});
+
+export const description = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[600],
+    lineHeight: themeVars.fontSize.large,
+    wordBreak: 'break-word',
+    marginBottom: themeVars.space[1.5],
+});
+
+export const errorMessage = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.red[600],
+    wordBreak: 'break-word',
+    marginTop: themeVars.space[1.5],
+});
+
+export const error = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.red[500],
+    },
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+    ':focus': {
+        boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+});

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

@@ -0,0 +1 @@
+export * from './TextArea.css';

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

@@ -1,91 +1,91 @@
-import {createVar, globalKeyframes, style} from '@vanilla-extract/css';
-import { themeVars } from "../../../styles/theme.css";
-
-
-export const vars = {
-    backgroundColor: createVar(),
-    color: createVar(),
-}
-
-export const wrapper = style({
-    position: 'relative',
-    display: 'inline-flex'
-});
-
-export const container = style({
-    zIndex: 50,
-});
-
-export const tooltip = style({
-    vars: {
-        [vars.backgroundColor]: themeVars.color.gray[900],
-        [vars.color]: themeVars.color.gray[100],
-    },
-    zIndex: 50,
-    transition: 'opacity 0.3s, ease',
-    position: 'fixed',
-    fontSize: "13px",
-    fontWeight: 'normal',
-    color: vars.color,
-    backgroundColor: vars.backgroundColor,
-    borderRadius: themeVars.rounded.default,
-    padding: `${themeVars.space[1.5]} ${themeVars.space[2]}`,
-    pointerEvents: 'none',
-    width: 'max-content',
-    maxWidth: '300px',
-    boxSizing: 'border-box',
-    selectors: {
-        '&[data-popper-placement^="top"]': {
-            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`,
-        },
-        '&[data-popper-placement^="bottom"]': {
-            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`,
-        },
-        '&[data-popper-placement^="left"]': {
-            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`,
-        },
-        '&[data-popper-placement^="right"]': {
-            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`,
-        }
-    }
-});
-
-export const reverse = style({
-    vars: {
-        [vars.backgroundColor]: themeVars.color.gray[100],
-        [vars.color]: themeVars.color.gray[900],
-    }
-});
-
-const fadeOutAnimation = "fade-out-animation";
-globalKeyframes(fadeOutAnimation, {
-    'from': {
-        opacity: 1,
-    },
-    'to': {
-        opacity: 0,
-    }
-});
-
-const fadeInAnimation = "fade-in-animation";
-globalKeyframes(fadeInAnimation, {
-    '0%': {
-        opacity: 0,
-    },
-    '100%': {
-        opacity: 1,
-    }
-});
-
-export const fadeEnter = style({
-    animationName: fadeInAnimation,
-    animationDuration: '0.125s',
-    animationTimingFunction: 'ease-in-out',
-    transition: themeVars.transition.default,
-})
-
-export const fadeLeave = style({
-    animationName: fadeOutAnimation,
-    animationDuration: '0.2s',
-    animationTimingFunction: 'ease-in-out',
-})
+import {createVar, globalKeyframes, style} from '@vanilla-extract/css';
+import { themeVars } from "../../../styles/theme.css";
+
+
+export const vars = {
+    backgroundColor: createVar(),
+    color: createVar(),
+}
+
+export const wrapper = style({
+    position: 'relative',
+    display: 'inline-flex'
+});
+
+export const container = style({
+    zIndex: 50,
+});
+
+export const tooltip = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.gray[900],
+        [vars.color]: themeVars.color.gray[100],
+    },
+    zIndex: 50,
+    transition: 'opacity 0.3s, ease',
+    position: 'fixed',
+    fontSize: "13px",
+    fontWeight: 'normal',
+    color: vars.color,
+    backgroundColor: vars.backgroundColor,
+    borderRadius: themeVars.rounded.default,
+    padding: `${themeVars.space[1.5]} ${themeVars.space[2]}`,
+    pointerEvents: 'none',
+    width: 'max-content',
+    maxWidth: '300px',
+    boxSizing: 'border-box',
+    selectors: {
+        '&[data-popper-placement^="top"]': {
+            margin: `${themeVars.space[1]} 0 ${themeVars.space[3]} 0`,
+        },
+        '&[data-popper-placement^="bottom"]': {
+            margin: `${themeVars.space[3]} 0 ${themeVars.space[1]} 0`,
+        },
+        '&[data-popper-placement^="left"]': {
+            margin: `0 ${themeVars.space[3]} 0 ${themeVars.space[1]}`,
+        },
+        '&[data-popper-placement^="right"]': {
+            margin: `0 ${themeVars.space[1]} 0 ${themeVars.space[3]}`,
+        }
+    }
+});
+
+export const reverse = style({
+    vars: {
+        [vars.backgroundColor]: themeVars.color.gray[100],
+        [vars.color]: themeVars.color.gray[900],
+    }
+});
+
+const fadeOutAnimation = "fade-out-animation";
+globalKeyframes(fadeOutAnimation, {
+    'from': {
+        opacity: 1,
+    },
+    'to': {
+        opacity: 0,
+    }
+});
+
+const fadeInAnimation = "fade-in-animation";
+globalKeyframes(fadeInAnimation, {
+    '0%': {
+        opacity: 0,
+    },
+    '100%': {
+        opacity: 1,
+    }
+});
+
+export const fadeEnter = style({
+    animationName: fadeInAnimation,
+    animationDuration: '0.125s',
+    animationTimingFunction: 'ease-in-out',
+    transition: themeVars.transition.default,
+})
+
+export const fadeLeave = style({
+    animationName: fadeOutAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out',
+})

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

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