@teammodlr/ui-kit 2.1.39 → 2.1.43

package/src/components/tooltip/Tooltip.vue

@@ -1,196 +1,196 @@
-<template>
-    <span
-        v-bind="$attrs"
-        style="display: inline-flex"
-        @mouseenter="show"
-        @mouseleave="hide"
-        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-if="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,
-    onUnmounted
-} 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;
-            }
-        };
-
-        function show() {
-            if (timeout.value) {
-                clearTimeout(timeout.value);
-            }
-
-            if (props.delay) {
-                timeout.value = setTimeout(() => {
-                    isOpen.value = true;
-                }, props.delay);
-            } else {
-                isOpen.value = true;
-            }
-        }
-
-        function hide() {
-            if (timeout.value) {
-                clearTimeout(timeout.value);
-            }
-
-            isOpen.value = false;
-        }
-
-        onUnmounted(() => {
-            isOpen.value = false;
-            if (timeout.value) {
-                clearTimeout(timeout.value);
-            }
-            timeout.value = null;
-        });
-
-        return {
-            reference,
-            popper,
-            transferTo,
-            isOpen,
-            show,
-            hide,
-            computedClasses,
-            zIndex,
-            style,
-            fade
-        };
-    }
-});
-</script>
-
-<style scoped></style>
+<template>
+    <span
+        v-bind="$attrs"
+        style="display: inline-flex"
+        @mouseenter="show"
+        @mouseleave="hide"
+        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-if="isOpen"
+                    :style="{ zIndex: zIndex }">
+                    <slot :html="text" name="content">
+                        <span v-html="text" />
+                    </slot>
+                </div>
+            </Transition>
+        </Teleport>
+    </span>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    ref,
+    toRef,
+    type PropType,
+    computed,
+    watch,
+    onUnmounted
+} 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;
+            }
+        };
+
+        function show() {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            if (props.delay) {
+                timeout.value = setTimeout(() => {
+                    isOpen.value = true;
+                }, props.delay);
+            } else {
+                isOpen.value = true;
+            }
+        }
+
+        function hide() {
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+
+            isOpen.value = false;
+        }
+
+        onUnmounted(() => {
+            isOpen.value = false;
+            if (timeout.value) {
+                clearTimeout(timeout.value);
+            }
+            timeout.value = null;
+        });
+
+        return {
+            reference,
+            popper,
+            transferTo,
+            isOpen,
+            show,
+            hide,
+            computedClasses,
+            zIndex,
+            style,
+            fade
+        };
+    }
+});
+</script>
+
+<style scoped></style>

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

@@ -1,5 +1,5 @@
-<template>
-    <MTooltip text="Hello World">
-        <MButton>Top</MButton>
-    </MTooltip>
-</template>
+<template>
+    <MTooltip text="Hello<br />World">
+        <MButton>Top</MButton>
+    </MTooltip>
+</template>

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/examples/placement.vue

@@ -1,9 +1,9 @@
-<template>
-    <div style="padding: 200px;">
-        <MTooltip text="Hello World" placement="top">
-            <div style="width: 100px; height: 50px; background: red;">
-
-            </div>
-        </MTooltip>
-    </div>
-</template>
+<template>
+    <div style="padding: 200px;">
+        <MTooltip text="Hello World" placement="top">
+            <div style="width: 100px; height: 50px; background: red;">
+
+            </div>
+        </MTooltip>
+    </div>
+</template>

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

@@ -1,90 +1,90 @@
-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';