@teammodlr/ui-kit 3.0.0-beta.26 → 3.0.0-beta.30

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

@@ -58,3 +58,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';

package/src/components/select/Select.vue

@@ -16,7 +16,7 @@
                     <div :class="selectComputedClasses">
                         <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
                             <MTag v-for="value in selectedMax" :key="value" :closeable="true"
-                                @close="event => removeSelected(event, value)" :size="size">
+                                @close="() => removeSelected(value)" :size="size">
                                 {{ getSelectedLabel(value) }}
                             </MTag>
                             <template v-if="selectedCountNotShown > 0">
@@ -138,7 +138,9 @@ let shouldOpenNextFocusedSelect = false;
 export default defineComponent({
     name: 'MSelect',
     emits: {
-        ...useInput.emits()
+        ...useInput.emits(),
+        'on-open': () => true,
+        'on-close': () => true
     },
     props: {
         ...useInput.props(),
@@ -613,9 +615,7 @@ export default defineComponent({
             }
         }
 
-        function removeSelected(event: MouseEvent, value: string | number) {
-            event.preventDefault();
-            event.stopPropagation();
+        function removeSelected(value: string | number) {
             if (!props.multiple) {
                 return;
             }
@@ -827,10 +827,12 @@ export default defineComponent({
         watch(open, (value: boolean) => {
             nextTick(() => {
                 if (!value) {
+                    emit('on-close');
                     search.value = '';
                 }
 
                 if (value) {
+                    emit('on-open');
                     zIndex.value = nextZIndex();
                 }