@teammodlr/ui-kit 3.0.0-beta.33 → 3.0.0-beta.36

package/src/components/hovercard/HoverCard.vue

@@ -0,0 +1,163 @@
+<template>
+    <HoverCardRoot
+        v-model:open="isOpen"
+        :open-delay="openDelay"
+        :close-delay="closeDelay"
+    >
+        <HoverCardTrigger as-child>
+            <slot />
+        </HoverCardTrigger>
+        <HoverCardPortal :disabled="!transfer">
+            <HoverCardContent
+                :class="contentClasses"
+                :side="resolvedSide"
+                :align="resolvedAlign"
+                :side-offset="sideOffset"
+                :collision-padding="collisionPadding"
+                :style="{ zIndex: zIndex }"
+            >
+                <slot name="content" />
+                <HoverCardArrow v-if="showArrow" :class="style.arrow" :width="12" :height="6" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<script lang="ts">
+import {
+    HoverCardArrow,
+    HoverCardContent,
+    HoverCardPortal,
+    HoverCardRoot,
+    HoverCardTrigger,
+    type HoverCardContentProps
+} from 'reka-ui';
+import {
+    computed,
+    defineComponent,
+    ref,
+    useAttrs,
+    watch,
+    type PropType
+} from 'vue';
+import {
+    type Placement,
+    placementWhileList
+} from '../../composables/usePopper';
+import { useZIndex } from '../../composables/useZIndex';
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MHoverCard',
+    inheritAttrs: false,
+    components: {
+        HoverCardArrow,
+        HoverCardContent,
+        HoverCardPortal,
+        HoverCardRoot,
+        HoverCardTrigger
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'bottom',
+            validator: (value: Placement) => placementWhileList.includes(value)
+        },
+        transfer: {
+            type: Boolean,
+            default: true
+        },
+        sideOffset: {
+            type: Number,
+            default: 5
+        },
+        collisionPadding: {
+            type: [Number, Object] as PropType<number | { top?: number; right?: number; bottom?: number; left?: number }>,
+            default: 10
+        },
+        arrow: {
+            type: Boolean,
+            default: false
+        },
+        variant: {
+            type: String as PropType<'light' | 'dark'>,
+            default: 'light'
+        },
+        openDelay: {
+            type: Number,
+            default: 700
+        },
+        closeDelay: {
+            type: Number,
+            default: 300
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: ['update:open'],
+    setup(props, { emit }) {
+        const attrs = useAttrs();
+        const { nextZIndex } = useZIndex();
+        const isOpen = ref(props.open);
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const resolvedPlacement = computed(() => {
+            const [side, align] = props.placement.split('-');
+
+            return {
+                side: side === 'top' || side === 'right' || side === 'bottom' || side === 'left'
+                    ? side
+                    : undefined,
+                align: align === 'start' || align === 'center' || align === 'end'
+                    ? align
+                    : undefined
+            } as {
+                side?: HoverCardContentProps['side'];
+                align?: HoverCardContentProps['align'];
+            };
+        });
+
+        const showArrow = computed(() => {
+            const { align } = resolvedPlacement.value;
+            return props.arrow && (!align || align === 'center');
+        });
+
+        const contentClasses = computed(() => {
+            return [
+                'm-hover-card-content',
+                style.content,
+                {
+                    [style.dark]: props.variant === 'dark'
+                },
+                attrs.class
+            ];
+        });
+
+        watch(
+            () => props.open,
+            value => {
+                isOpen.value = value;
+            }
+        );
+
+        watch(isOpen, value => {
+            emit('update:open', value);
+        });
+
+        return {
+            isOpen,
+            zIndex,
+            showArrow,
+            contentClasses,
+            resolvedSide: computed(() => resolvedPlacement.value.side),
+            resolvedAlign: computed(() => resolvedPlacement.value.align),
+            style
+        };
+    }
+});
+</script>

package/src/components/hovercard/style/HoverCard.css.ts

@@ -0,0 +1,175 @@
+import { globalKeyframes, globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const slideFadeOutTopAnimation = 'hover-card-slide-fade-out-top';
+globalKeyframes(slideFadeOutTopAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    }
+});
+
+const slideFadeOutBottomAnimation = 'hover-card-slide-fade-out-bottom';
+globalKeyframes(slideFadeOutBottomAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    }
+});
+
+const slideFadeOutLeftAnimation = 'hover-card-slide-fade-out-left';
+globalKeyframes(slideFadeOutLeftAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    }
+});
+
+const slideFadeOutRightAnimation = 'hover-card-slide-fade-out-right';
+globalKeyframes(slideFadeOutRightAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    }
+});
+
+const slideFadeTopAnimation = 'hover-card-slide-fade-top';
+globalKeyframes(slideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const slideFadeBottomAnimation = 'hover-card-slide-fade-bottom';
+globalKeyframes(slideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const slideFadeLeftAnimation = 'hover-card-slide-fade-left';
+globalKeyframes(slideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const slideFadeRightAnimation = 'hover-card-slide-fade-right';
+globalKeyframes(slideFadeRightAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+export const content = style({
+    backgroundColor: '#ffffff',
+    borderRadius: '5px',
+    padding: '5px',
+    zIndex: 4000,
+    boxSizing: 'border-box',
+    position: 'relative',
+    minWidth: '130px',
+    maxWidth: '350px',
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    boxShadow: themeVars.shadow.md,
+    transformOrigin: 'var(--reka-hover-card-content-transform-origin)',
+    willChange: 'transform, opacity',
+    outline: 'none',
+    selectors: {
+        '&[data-state="open"]': {
+            animationDuration: '0.16s',
+            animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            animationFillMode: 'both'
+        },
+        '&[data-state="closed"]': {
+            animationDuration: '0.12s',
+            animationTimingFunction: 'ease-out',
+            animationFillMode: 'both'
+        },
+        '&[data-state="closed"][data-side="top"]': {
+            animationName: slideFadeOutTopAnimation
+        },
+        '&[data-state="closed"][data-side="bottom"]': {
+            animationName: slideFadeOutBottomAnimation
+        },
+        '&[data-state="closed"][data-side="left"]': {
+            animationName: slideFadeOutLeftAnimation
+        },
+        '&[data-state="closed"][data-side="right"]': {
+            animationName: slideFadeOutRightAnimation
+        },
+        '&[data-state="open"][data-side="top"]': {
+            animationName: slideFadeTopAnimation
+        },
+        '&[data-state="open"][data-side="bottom"]': {
+            animationName: slideFadeBottomAnimation
+        },
+        '&[data-state="open"][data-side="left"]': {
+            animationName: slideFadeLeftAnimation
+        },
+        '&[data-state="open"][data-side="right"]': {
+            animationName: slideFadeRightAnimation
+        }
+    }
+});
+
+export const arrow = style({
+    fill: '#ffffff'
+});
+
+globalStyle(`${arrow} path`, {
+    fill: '#ffffff',
+    stroke: themeVars.color.gray[300],
+    strokeWidth: '1px'
+});
+
+export const dark = style({
+    backgroundColor: themeVars.color.gray[900],
+    border: `1px solid ${themeVars.color.gray[800]}`,
+    color: themeVars.color.gray[100]
+});
+
+globalStyle(`${dark} ${arrow}`, {
+    fill: themeVars.color.gray[900]
+});
+
+globalStyle(`${dark} ${arrow} path`, {
+    fill: themeVars.color.gray[900],
+    stroke: themeVars.color.gray[800]
+});

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

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

package/src/components/index.ts

@@ -59,4 +59,4 @@ export { default as MDialogProvider } from './dialogprovider/DialogProvider.vue'
 export { default as MDrawer } from './drawer/Drawer.vue';
 export { default as MTree } from './tree/Tree.vue';
 export { default as MPopover } from './popover/Popover.vue';
-// export { default as MHoverCard } from './hovercard/HoverCard.vue';
+export { default as MHoverCard } from './hovercard/HoverCard.vue';

package/src/components/input/Input.vue

@@ -20,9 +20,10 @@
                 :type="inputType"
                 :placeholder="placeholder"
                 :name="name"
-                :value="modelValue || ''"
+                :value="currentValue"
                 :readonly="readonly"
                 v-on="inputListeners"
+                @input="onNativeInput"
                 :class="inputComputedClasses"
                 v-bind="$attrs"
                 :disabled="disabled || loading"
@@ -32,6 +33,7 @@
             <div v-if="hasSuffix" :class="style.suffix">
                 <slot name="suffix" />
             </div>
+            <MClearButton v-if="showClear" :class="clearClasses" @clear="onClear" />
             <div v-if="hasRightIcon" :class="style.rightIcon">
                 <slot name="icon-right" />
             </div>
@@ -52,14 +54,17 @@ import {
     defineComponent,
     ref,
     computed,
-    toRef
+    toRef,
+    watch
 } from "vue";
 import { useInput } from "../../composables/useInput";
 import { useInteractive } from "../../composables/useInteractive";
+import MClearButton from '../clearbutton/ClearButton.vue';
 import * as style from './style';
 
 export default defineComponent({
     name: 'MInput',
+    components: { MClearButton },
     props: {
         ...useInput.props(),
         ...useInteractive.props(),
@@ -103,8 +108,12 @@ export default defineComponent({
             type: String,
             default: ''
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
     },
-    emits: useInput.emits(),
+    emits: [...useInput.emits(), 'clear'],
     setup(props, { slots, emit, expose }) {
         const element = ref<HTMLInputElement|null>(null);
         const { focus, blur } = useInteractive(element);
@@ -170,6 +179,8 @@ export default defineComponent({
                     [style.disabled]: disabled.value || loading.value,
                     [style.hasLeftIcon]: hasLeftIcon.value,
                     [style.hasRightIcon]: hasRightIcon.value,
+                    [style.hasClear]: props.clearable,
+                    [style.hasClearAndRightIcon]: props.clearable && hasRightIcon.value,
                 }
             ];
 
@@ -193,8 +204,41 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        // Tracks typed text so clearable works without v-model
+        const internalValue = ref<any>(props.modelValue ?? '');
+        watch(() => props.modelValue, value => {
+            internalValue.value = value ?? '';
+        });
+
+        const currentValue = computed(() => {
+            const value = props.modelValue !== undefined ? props.modelValue : internalValue.value;
+            return value || '';
+        });
+
+        const onNativeInput = (event: Event) => {
+            internalValue.value = (event.target as HTMLInputElement).value;
+        };
+
+        const showClear = computed(() => {
+            return props.clearable
+                && !disabled.value
+                && !loading.value
+                && !props.readonly
+                && currentValue.value !== '';
+        });
+
+        const clearClasses = computed(() => {
+            return [
+                style.clear,
+                { [style.clearWithRightIcon]: hasRightIcon.value }
+            ];
+        });
+
         const onClear = () => {
+            internalValue.value = '';
             emit('update:modelValue', '');
+            emit('clear');
+            focus();
         };
 
         expose({
@@ -220,6 +264,10 @@ export default defineComponent({
             hasHelpMessage,
             inputError,
             style,
+            showClear,
+            clearClasses,
+            currentValue,
+            onNativeInput,
 
             onClear,
             validate,

package/src/components/input/examples/clearable.vue

@@ -0,0 +1,18 @@
+<template>
+    <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
+        <MInput v-model="value" placeholder="Type something..." clearable />
+        <MInput v-model="value" placeholder="With a right icon" clearable>
+            <template #icon-right>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+                </svg>
+            </template>
+        </MInput>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('Clear me');
+</script>

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

@@ -5,7 +5,8 @@ import {
     MInputPrefix,
     MInputLeftIcon,
     MInputRightIcon,
-    MInputSizes
+    MInputSizes,
+    MInputClearable
 } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
@@ -24,3 +25,4 @@ export const Prefix = createStory(MInputPrefix);
 export const Sizes = createStory(MInputSizes);
 export const LeftIcon = createStory(MInputLeftIcon);
 export const RightIcon = createStory(MInputRightIcon);
+export const Clearable = createStory(MInputClearable);

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

@@ -4,3 +4,4 @@ export { default as MInputPrefix } from './prefix.vue';
 export { default as MInputSizes } from './sizes.vue';
 export { default as MInputLeftIcon } from './left-icon.vue';
 export { default as MInputRightIcon } from './right-icon.vue';
+export { default as MInputClearable } from './clearable.vue';

package/src/components/input/style/Input.css.ts

@@ -251,6 +251,26 @@ export const hasRightIcon = style({
     paddingRight: '2.25rem'
 });
 
+export const hasClear = style({
+    paddingRight: '1.75rem'
+});
+
+export const hasClearAndRightIcon = style({
+    paddingRight: '4rem'
+});
+
+export const clear = style({
+    position: 'absolute',
+    zIndex: 2,
+    top: '50%',
+    right: themeVars.space[1],
+    transform: 'translateY(-50%)'
+});
+
+export const clearWithRightIcon = style({
+    right: '2.25rem'
+});
+
 export const prefix = style({
     pointerEvents: 'none',
     marginRight: themeVars.space[3],

package/src/components/select/Select.vue

@@ -35,6 +35,7 @@
                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
                         </span>
                     </div>
+                    <MClearButton v-if="showClear" :class="style.clear" @clear="clearSelected" />
                 </div>
             </PopoverTrigger>
 
@@ -121,6 +122,7 @@ import {
         type PropType
 } from 'vue';
 import MTag from '../tag/Tag.vue';
+import MClearButton from '../clearbutton/ClearButton.vue';
 import { VList } from 'virtua/vue';
 import * as style from './style';
 
@@ -140,7 +142,8 @@ export default defineComponent({
     emits: {
         ...useInput.emits(),
         'on-open': () => true,
-        'on-close': () => true
+        'on-close': () => true,
+        clear: () => true
     },
     props: {
         ...useInput.props(),
@@ -226,6 +229,10 @@ export default defineComponent({
         zIndex: {
             type: Number
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
         showDataOptions: {
             type: Boolean,
             default: true
@@ -235,6 +242,7 @@ export default defineComponent({
     },
     components: {
         MTag,
+        MClearButton,
         VList,
         PopoverContent,
         PopoverPortal,
@@ -615,6 +623,25 @@ export default defineComponent({
             }
         }
 
+        const hasValue = computed(() => {
+            return props.multiple
+                ? Array.isArray(selected.value) && selected.value.length > 0
+                : !!selected.value;
+        });
+
+        const showClear = computed(() => {
+            return props.clearable
+                && hasValue.value
+                && !disabled.value
+                && !loading.value;
+        });
+
+        function clearSelected() {
+            selected.value = props.multiple ? [] : '';
+            emit('clear');
+            container.value?.focus();
+        }
+
         function removeSelected(value: string | number) {
             if (!props.multiple) {
                 return;
@@ -783,6 +810,7 @@ export default defineComponent({
                 style.base,
                 style.sizes[props.size],
                 {
+                    [style.hasClear]: showClear.value,
                     [style.selectedTags]:
                         props.multiple &&
                         Array.isArray(selected.value) &&
@@ -954,6 +982,8 @@ export default defineComponent({
             getSelectedLabel,
             openSelect,
             removeSelected,
+            showClear,
+            clearSelected,
             inputError,
             transitionName,
             inputListeners,

package/src/components/select/examples/clearable.vue

@@ -0,0 +1,18 @@
+<template>
+    <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
+        <MSelect v-model="single" :options="options" clearable />
+        <MSelect v-model="multiple" :options="options" multiple clearable />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const options = Array.from({ length: 10 }, (_, i) => ({
+    value: i + 1,
+    label: `Option ${i + 1}`
+}));
+
+const single = ref(2);
+const multiple = ref([1, 2]);
+</script>

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

@@ -1,5 +1,5 @@
 import MSelect from '../Select.vue';
-import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill } from './index';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill, MSelectClearable } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -15,3 +15,4 @@ export const Basic = createStory(MSelectBasic);
 export const Searchable = createStory(MSelectSearchable);
 export const Multiple = createStory(MSelectMultiple);
 export const Fill = createStory(MSelectFill);
+export const Clearable = createStory(MSelectClearable);

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

@@ -2,3 +2,4 @@ export { default as MSelectBasic } from './basic.vue';
 export { default as MSelectSearchable } from './searchable.vue';
 export { default as MSelectMultiple } from './multiple.vue';
 export { default as MSelectFill } from './fill.vue';
+export { default as MSelectClearable } from './clearable.vue';

package/src/components/select/style/Select.css.ts

@@ -379,13 +379,16 @@ export const noResults = style({
     fontSize: themeVars.fontSize.small
 });
 
-export const clearable = style({
-    width: themeVars.space[4],
-    height: themeVars.space[4],
+export const clear = style({
     position: 'absolute',
-    right: themeVars.space[2],
-    top: '0',
-    display: 'flex'
+    zIndex: 1,
+    top: '50%',
+    right: '2.25rem',
+    transform: 'translateY(-50%)'
+});
+
+export const hasClear = style({
+    paddingRight: '3.75rem'
 });
 
 export const arrow = style({