@teammodlr/ui-kit 2.0.28 → 2.0.30

package/src/components/textarea/style/{TextArea.css.ts → Textarea.css.ts}

@@ -1,190 +1,191 @@
-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],
-        }
-    },
-});
+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,
+    fontFamily: 'inherit',
+    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

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

package/src/components/tooltip/Tooltip.vue

@@ -1,118 +1,151 @@
-<template>
-    <span
-        v-bind="$attrs"
-        style="display: inline-flex"
-        @mouseenter="() => { isOpen = true }"
-        @mouseleave="() => { isOpen = false }"
-        ref="wrapper"
-    >
-        <span ref="reference">
-            <slot />
-        </span>
-
-        <Teleport :to="transferTo">
-            <div role="tooltip" :class="computedClasses" ref="popper" v-if="isOpen" :style="{zIndex: zIndex}">
-                <slot
-                    :text="text"
-                    name="content"
-                >
-                    {{ text }}
-                </slot>
-            </div>
-        </Teleport>
-    </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, toRef, type PropType, computed, watch } from 'vue';
-import { type Placement, placementWhileList, usePopper } from "../../composables/usePopper";
-import * as style from "./style";
-import {useZIndex} from "../../composables/useZIndex";
-
-export default defineComponent({
-    name: "MTooltip",
-    props: {
-        text: {
-            type: String,
-            default: ""
-        },
-        placement: {
-            type: String as PropType<Placement>,
-            default: 'top',
-            validator: (value: Placement) => placementWhileList.includes(value)
-        },
-        transitionName: {
-            type: String,
-            default: 'scale'
-        },
-        reverse: {
-            type: Boolean,
-            default: false
-        },
-        transfer: {
-            type: Boolean,
-            default: false
-        },
-        zIndex: {
-            type: Number
-        }
-    },
-    setup(props) {
-        const {nextZIndex} = useZIndex();
-        const placement = toRef(props, 'placement');
-        // @ts-ignore
-        const transfer = toRef(props, 'transfer');
-        const wrapper = ref<HTMLElement | null>(null);
-        const reference = ref<HTMLElement | null>(null);
-        const isOpen = ref(false);
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-
-        const offset = computed(() => {
-            switch(placement.value) {
-                case 'top':
-                    return [8, 0];
-                case 'bottom':
-                    return [-8, 0];
-                case 'left':
-                    return [0, 8];
-                case 'right':
-                    return [0, 8];
-            }
-        });
-
-        const { popper, transferTo, updatePopper } = usePopper({
-            placement,
-            transfer,
-            reference,
-            wrapper,
-            // @ts-ignore
-            offset: offset.value
-        });
-
-        const computedClasses = computed(() => {
-            return [
-                style.tooltip,
-                {
-                    [style.reverse]: props.reverse
-                }
-            ]
-        });
-
-        watch(() => isOpen.value, (value: boolean) => {
-            if (value) {
-                updatePopper();
-            }
-        });
-
-        return {
-            reference,
-            popper,
-            transferTo,
-            isOpen,
-            computedClasses,
-            zIndex,
-            style
-        }
-    }
-})
-</script>
+<template>
+    <span
+        v-bind="$attrs"
+        style="display: inline-flex"
+        @mouseenter="toggle"
+        @mouseleave="toggle"
+        ref="wrapper"
+    >
+        <span ref="reference">
+            <slot />
+        </span>
+
+        <Teleport :to="transferTo">
+            <Transition 
+                :enter-active-class="fade.enterActive"
+                :leave-active-class="fade.leaveActive"
+                :enter-from-class="fade.enterFrom"
+                :leave-to-class="fade.leaveTo"
+            >
+                <div role="tooltip" :class="computedClasses" ref="popper" v-show="isOpen" :style="{zIndex: zIndex}">
+                    <slot
+                        :text="text"
+                        name="content"
+                    >
+                        {{ text }}
+                    </slot>
+                </div>
+            </Transition>
+        </Teleport>
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRef, type PropType, computed, watch } from 'vue';
+import { type Placement, placementWhileList, usePopper } from "../../composables/usePopper";
+import { fade } from "../../styles/transitions.css";
+import * as style from "./style";
+import {useZIndex} from "../../composables/useZIndex";
+
+export default defineComponent({
+    name: "MTooltip",
+    props: {
+        text: {
+            type: String,
+            default: ""
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'top',
+            validator: (value: Placement) => placementWhileList.includes(value)
+        },
+        transitionName: {
+            type: String,
+            default: 'scale'
+        },
+        reverse: {
+            type: Boolean,
+            default: false
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        zIndex: {
+            type: Number
+        },
+        delay: {
+            type: Number,
+            default: 500
+        }
+    },
+    setup(props) {
+        const {nextZIndex} = useZIndex();
+        const placement = toRef(props, 'placement');
+        // @ts-ignore
+        const transfer = toRef(props, 'transfer');
+        const wrapper = ref<HTMLElement | null>(null);
+        const reference = ref<HTMLElement | null>(null);
+        const isOpen = ref(false);
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+        const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
+        const offset = computed(() => {
+            switch(placement.value) {
+                case 'top':
+                    return [0, 8];
+                case 'bottom':
+                    return [0, -8];
+                case 'left':
+                    return [8, 0];
+                case 'right':
+                    return [-8, 0];
+                default: 
+                    return [0, 0];
+            }
+        });
+
+        const { popper, transferTo, updatePopper } = usePopper({
+            placement,
+            transfer,
+            reference,
+            wrapper,
+            // @ts-ignore
+            offset: offset.value
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                style.tooltip,
+                {
+                    [style.reverse]: props.reverse
+                }
+            ]
+        });
+
+        watch(() => isOpen.value, (value: boolean) => {
+            if (value) {
+                updatePopper();
+            }
+        });
+
+        const toggle = () => {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            if (props.delay && !isOpen.value) {
+                timeout.value = setTimeout(() => {
+                    isOpen.value = !isOpen.value;
+                }, props.delay);
+            } else {
+                isOpen.value = !isOpen.value;
+            }
+        }
+
+        return {
+            reference,
+            popper,
+            transferTo,
+            isOpen,
+            toggle,
+            computedClasses,
+            zIndex,
+            style,
+            fade
+        }
+    }
+})
+</script>
+
+
+<style scoped></style>