@teammodlr/ui-kit 2.3.22 → 3.0.0-beta.10

package/src/components/popover/examples/variant.vue

@@ -0,0 +1,30 @@
+<template>
+    <div style="padding: 100px; display: flex; gap: 16px;">
+        <MPopover>
+            <MButton>Light (Default)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Light popover content</p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover variant="dark">
+            <MButton variant="dark">Dark</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Dark popover content</p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover variant="dark" arrow placement="bottom">
+            <MButton variant="dark">Dark with Arrow</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Dark popover with arrow</p>
+                </div>
+            </template>
+        </MPopover>
+    </div>
+</template>

package/src/components/popover/style/Popover.css.ts

@@ -0,0 +1,203 @@
+import { globalKeyframes, globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const menuFadeOutAnimation = 'popover-fade-out';
+globalKeyframes(menuFadeOutAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const menuSlideFadeOutTopAnimation = 'popover-slide-fade-out-top';
+globalKeyframes(menuSlideFadeOutTopAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutBottomAnimation = 'popover-slide-fade-out-bottom';
+globalKeyframes(menuSlideFadeOutBottomAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutLeftAnimation = 'popover-slide-fade-out-left';
+globalKeyframes(menuSlideFadeOutLeftAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutRightAnimation = 'popover-slide-fade-out-right';
+globalKeyframes(menuSlideFadeOutRightAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeTopAnimation = 'popover-slide-fade-top';
+globalKeyframes(menuSlideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeBottomAnimation = 'popover-slide-fade-bottom';
+globalKeyframes(menuSlideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeLeftAnimation = 'popover-slide-fade-left';
+globalKeyframes(menuSlideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const menuSlideFadeRightAnimation = 'popover-slide-fade-right';
+globalKeyframes(menuSlideFadeRightAnimation, {
+    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-popover-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: menuSlideFadeOutTopAnimation
+        },
+        '&[data-state="closed"][data-side="bottom"]': {
+            animationName: menuSlideFadeOutBottomAnimation
+        },
+        '&[data-state="closed"][data-side="left"]': {
+            animationName: menuSlideFadeOutLeftAnimation
+        },
+        '&[data-state="closed"][data-side="right"]': {
+            animationName: menuSlideFadeOutRightAnimation
+        },
+        '&[data-state="open"][data-side="top"]': {
+            animationName: menuSlideFadeTopAnimation
+        },
+        '&[data-state="open"][data-side="bottom"]': {
+            animationName: menuSlideFadeBottomAnimation
+        },
+        '&[data-state="open"][data-side="left"]': {
+            animationName: menuSlideFadeLeftAnimation
+        },
+        '&[data-state="open"][data-side="right"]': {
+            animationName: menuSlideFadeRightAnimation
+        }
+    }
+});
+
+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]
+});
+
+export const close = style({
+    position: 'absolute',
+    top: themeVars.space[2],
+    right: themeVars.space[2],
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    borderRadius: themeVars.rounded.default,
+    cursor: 'pointer',
+    color: themeVars.color.font.muted,
+    ':hover': {
+        backgroundColor: themeVars.color.gray[100],
+        color: themeVars.color.font.text
+    }
+});

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

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

package/src/components/radio/Radio.vue

@@ -1,20 +1,19 @@
 <template>
     <label :class="style.base">
-        <input
-            v-model="pick"
-            :value="value"
-            type="radio"
-            :aria-checked="checked ? 'true' : 'false'"
-            :aria-disabled="(disabled || loading) ? 'true' : 'false'"
-            :aria-labelledby="`${id}-label`"
-            :disabled="disabled || loading"
-            :name="name"
-            :id="id"
-            v-bind="$attrs"
-            v-on="inputListeners"
-            :class="style.input"
-        />
-        <span :class="classes"></span>
+        <RadioGroupRoot v-model="pick" :name="name" :disabled="disabled || loading">
+            <RadioGroupItem
+                :value="value"
+                :id="id"
+                :disabled="disabled || loading"
+                :aria-checked="checked ? 'true' : 'false'"
+                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+                v-bind="$attrs"
+                :class="classes"
+                @blur="onBlur"
+                @focus="onFocus"
+            />
+        </RadioGroupRoot>
         <span :class="style.label" :id="`${id}-label`">
             <template v-if="hasSlot">
                 <slot/>
@@ -29,6 +28,7 @@
 
 <script lang="ts">
 import type {PropType} from 'vue';
+import { RadioGroupItem, RadioGroupRoot } from 'reka-ui';
 import {computed, defineComponent, ref, toRef} from 'vue';
 import {useInput} from '../../composables/useInput';
 import {useInteractive} from "../../composables/useInteractive";
@@ -37,6 +37,10 @@ import * as style from './style';
 
 export default defineComponent({
     name: "Radio",
+    components: {
+        RadioGroupItem,
+        RadioGroupRoot
+    },
     emits: useInput.emits(),
     props: {
         ...useInput.props(),
@@ -76,7 +80,7 @@ export default defineComponent({
             formDisabled,
             formLoading,
             inputListeners
-        } = useInput(props, {focus, emit});
+        } = useInput(props, {focus, emit, withListeners: false});
 
         const disabled = computed(() => formDisabled || formLoading || props.disabled || props.loading);
         const name = toRef(props, 'name');
@@ -106,6 +110,14 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        function onFocus(event: FocusEvent) {
+            emit('focus', event);
+        }
+
+        function onBlur(event: FocusEvent) {
+            emit('blur', event);
+        }
+
         expose({
             focus,
             blur,
@@ -129,7 +141,9 @@ export default defineComponent({
             hasSlot,
             inputListeners,
             focus,
-            blur
+            blur,
+            onFocus,
+            onBlur
         }
     }
 })

package/src/components/radiobutton/RadioButton.vue

@@ -1,14 +1,24 @@
 <template>
-    <label :class="computedClasses" :disabled="disabled" @click="handleClick" v-bind="$attrs" :aria-selected="selected" :aria-disabled="disabled">
+    <RadioGroupItem
+        :class="computedClasses"
+        :disabled="disabled"
+        :value="id"
+        :name="name"
+        v-bind="$attrs"
+        :aria-selected="selected"
+        :aria-disabled="disabled"
+        @click="handleClick"
+    >
         <input type="radio" :class="computedRadioClasses" :name="name" :value="id" :disabled="disabled">
         <span>
             <slot />
         </span>
-    </label>
+    </RadioGroupItem>
 </template>
 
 <script lang="ts">
 import type {PropType} from "vue";
+import { RadioGroupItem } from 'reka-ui';
 import {computed, defineComponent, inject, ref } from "vue";
 import type {Size} from "../../types/props";
 import * as style from "./style";
@@ -18,6 +28,9 @@ import {RADIO_BUTTON_GROUP_STATE} from "../radiobuttongroup/symbol";
 
 export default defineComponent({
     name: "MRadioButton",
+    components: {
+        RadioGroupItem
+    },
     props: {
         ...useInput.props(),
         ...useInteractive.props(),

package/src/components/radiobuttongroup/RadioButtonGroup.vue

@@ -1,12 +1,15 @@
 <template>
-    <div
+    <RadioGroupRoot
+        v-model="selectedValue"
+        :name="name"
         :class="computedClasses"
     >
         <slot/>
-    </div>
+    </RadioGroupRoot>
 </template>
 
 <script lang="ts">
+import { RadioGroupRoot } from 'reka-ui';
 import {computed, defineComponent, type PropType, provide, reactive, toRef} from "vue";
 import type {Size} from '../../types/props';
 import * as style from "./style";
@@ -15,6 +18,9 @@ import {RADIO_BUTTON_GROUP_STATE} from "./symbol";
 
 export default defineComponent({
     name: "MRadioButtonGroup",
+    components: {
+        RadioGroupRoot
+    },
     props: {
         modelValue: {
             type: [String, Number],
@@ -68,8 +74,9 @@ export default defineComponent({
         })
 
         return {
-            computedClasses
+            computedClasses,
+            selectedValue
         }
     }
 });
-</script>
+</script>