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

package/src/components/checkbox/Checkbox.vue

@@ -1,21 +1,20 @@
 <template>
     <div>
         <label :class="style.base">
-            <input
+            <CheckboxRoot
                 :id="name"
                 v-model="toggle"
                 :name="name"
                 :required="required"
-                :value="value"
+                :value="checkboxValue"
                 :disabled="disabled"
-                :checked="checked"
-                :indeterminate="indeterminate"
-                type="checkbox"
                 :aria-disabled="disabled || loading ? 'true' : 'false'"
                 :aria-labelledby="`${id}-label`"
                 v-bind="$attrs"
-                @change="onChange"
-                :class="style.checkbox"/>
+                :class="classes"
+                @blur="onBlur"
+                @focus="onFocus"
+                @update:model-value="onChange" />
             <span :class="style.label" :id="`${id}-label`">
             <template v-if="hasSlot">
                 <slot/>
@@ -31,6 +30,7 @@
 
 <script lang="ts">
 import {computed, defineComponent, type PropType, ref, toRef} from 'vue';
+import { CheckboxRoot, type AcceptableValue } from 'reka-ui';
 import {useInput} from '../../composables/useInput';
 import {useInteractive} from '../../composables/useInteractive';
 import type {Size} from '../../types/props';
@@ -38,6 +38,9 @@ import * as style from './style';
 
 export default defineComponent({
     name: 'Checkbox',
+    components: {
+        CheckboxRoot
+    },
     emits: [...useInput.emits(), 'change'],
     props: {
         ...useInput.props(),
@@ -65,7 +68,10 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        value: {}
+        value: {
+            type: [String, Number, Boolean, Object, Array] as PropType<any>,
+            default: undefined
+        }
     },
     setup(props, {slots, emit, expose}) {
         const checkboxRef = ref<HTMLElement | null>(null);
@@ -82,7 +88,7 @@ export default defineComponent({
             formDisabled,
             formLoading,
             inputListeners
-        } = useInput(props, {focus, emit});
+        } = useInput(props, {focus, emit, withListeners: false});
 
         const disabled = computed(
             () => formDisabled || props.disabled || props.loading
@@ -105,17 +111,33 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        const checkboxValue = computed(() => {
+            return props.value as AcceptableValue | undefined;
+        });
+
         const toggle = computed({
             get() {
-                return props.modelValue;
+                if (props.indeterminate) {
+                    return 'indeterminate';
+                }
+
+                return props.modelValue ?? props.checked;
             },
             set(value) {
                 emit('update:modelValue', value);
             }
         });
 
-        const onChange = (event: Event) => {
-            emit('change', event);
+        const onChange = (value: unknown) => {
+            emit('change', value);
+        };
+
+        const onFocus = (event: FocusEvent) => {
+            emit('focus', event);
+        };
+
+        const onBlur = (event: FocusEvent) => {
+            emit('blur', event);
         };
 
         expose({
@@ -131,9 +153,12 @@ export default defineComponent({
             validate,
             setError,
             onChange,
+            onFocus,
+            onBlur,
             disabled,
             name,
             checkboxRef,
+            checkboxValue,
             inputError,
             toggle,
             style,

package/src/components/checkbox/style/Checkbox.css.ts

@@ -56,14 +56,14 @@ export const checkbox = style({
     outline: 'none',
 
     selectors: {
-        ['&:focus']: {
+        ['&:focus-visible']: {
             vars: {
                 [vars.borderColor]: themeVars.color.blue[500],
                 [vars.color]: '#FFF'
             },
             boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
         },
-        ['&:checked']: {
+        ['&[data-state="checked"]']: {
             vars: {
                 [vars.borderColor]: themeVars.color.blue[500],
                 [vars.color]: themeVars.color.blue[500]
@@ -76,14 +76,14 @@ export const checkbox = style({
             color: vars.color,
             backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")`
         },
-        ['&:checked:focus']: {
+        ['&[data-state="checked"]:focus-visible']: {
             vars: {
                 [vars.borderColor]: themeVars.color.blue[500],
                 [vars.color]: themeVars.color.blue[500]
             },
             color: vars.color
         },
-        ['&:indeterminate']: {
+        ['&[data-state="indeterminate"]']: {
             vars: {
                 [vars.borderColor]: themeVars.color.blue[500],
                 [vars.color]: themeVars.color.blue[500]
@@ -101,14 +101,14 @@ export const checkbox = style({
                 [vars.borderColor]: themeVars.color.gray[400]
             }
         },
-        ['&:disabled']: {
+        ['&[data-disabled]']: {
             vars: {
                 [vars.borderColor]: themeVars.color.gray[300],
                 [vars.color]: themeVars.color.gray[200]
             },
             cursor: 'not-allowed'
         },
-        ['&:disabled:checked']: {
+        ['&[data-disabled][data-state="checked"]']: {
             vars: {
                 [vars.borderColor]: themeVars.color.gray[400],
                 [vars.color]: themeVars.color.gray[400]

package/src/components/collapse/CollapseItem.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui';
 import { useMemo } from 'vooks';
 import { computed, defineComponent, inject } from 'vue'
-import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { CSSProperties, ExtractPublicPropTypes, PropType } from 'vue';
 import { collapseInjectionKey } from './Collapse.vue';
 import MCollapseItemContent from './CollapseItemContent.vue';
 import * as style from './style';
@@ -16,6 +17,12 @@ export type CollapseItemProps = ExtractPublicPropTypes<typeof collapseItemProps>
 
 export default defineComponent({
     name: 'CollapseItem',
+    components: {
+        CollapsibleContent,
+        CollapsibleRoot,
+        CollapsibleTrigger,
+        MCollapseItemContent
+    },
     props: collapseItemProps,
     setup(props) {
         const randomName = Math.random().toString(36).substring(7);
@@ -67,6 +74,12 @@ export default defineComponent({
             }
         });
 
+        const computedHeaderMainStyles = computed<CSSProperties | undefined>(() => {
+            return collapseProps.arrowPlacement === 'right'
+                ? { flexDirection: 'row-reverse' }
+                : undefined;
+        });
+
         const computedIconClasses = computed(() => {
             return {
                 [style.collapseItemHeaderArrow]: true,
@@ -93,32 +106,44 @@ export default defineComponent({
             arrowPlacement: computed<'left' | 'right'>(() => {
                 return collapseProps.arrowPlacement;
             }),
-            handleClick(e: MouseEvent) {
-                if (collapse && !props.disabled) {
-                    collapse.toggleItem(collapsedRef.value, mergedNameRef.value, e)
+            handleOpenChange(open: boolean) {
+                if (open !== !collapsedRef.value && collapse && !props.disabled) {
+                    collapse.toggleItem(collapsedRef.value, mergedNameRef.value, new MouseEvent('click'))
                 }
-            }
+            },
+            computedHeaderMainStyles
         }
     }
 });
 </script>
 
 <template>
-    <div :class="computedContentClasses">
-        <div @click="handleClick" :class="computedHeaderClasses">
-            <div :class="computedHeaderMainClasses">
-                <svg :class="computedIconClasses" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                    class="lucide lucide-chevron-right">
-                    <path d="m9 18 6-6-6-6" />
-                </svg>
-                <slot name="header">
-                    {{ title }}
-                </slot>
-            </div>
+    <CollapsibleRoot
+        :open="!collapsed"
+        :disabled="disabled"
+        :unmount-on-hide="mergedDisplayDirective === 'if'"
+        @update:open="handleOpenChange"
+    >
+        <div :class="computedContentClasses">
+            <CollapsibleTrigger as-child>
+                <button type="button" :class="computedHeaderClasses">
+                    <div :class="computedHeaderMainClasses" :style="computedHeaderMainStyles">
+                        <svg :class="computedIconClasses" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="lucide lucide-chevron-right">
+                            <path d="m9 18 6-6-6-6" />
+                        </svg>
+                        <slot name="header">
+                            {{ title }}
+                        </slot>
+                    </div>
+                </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent as-child :force-mount="mergedDisplayDirective === 'show'">
+                <MCollapseItemContent :displayDirective="mergedDisplayDirective" :show="!collapsed">
+                    <slot />
+                </MCollapseItemContent>
+            </CollapsibleContent>
         </div>
-        <MCollapseItemContent :displayDirective="mergedDisplayDirective" :show="!collapsed">
-            <slot />
-        </MCollapseItemContent>
-    </div>
+    </CollapsibleRoot>
 </template>

package/src/components/collapse/style/Collapse.css.ts

@@ -46,7 +46,11 @@ export const collapseItemHeader = style({
     alignItems: 'center',
     position: 'relative',
     color: vars.fontColor,
-    padding: vars.headerPadding
+    padding: vars.headerPadding,
+    width: '100%',
+    border: 'none',
+    background: 'transparent',
+    textAlign: 'left'
 });
 
 

package/src/components/colorpicker/ColorPicker.vue

@@ -1,24 +1,36 @@
 <template>
     <div ref="wrapper" class="m-color-picker">
-        <div ref="referenceRef" @click="isOpen = !isOpen">
-            <slot :r="finalColor.r" :g="finalColor.g" :b="finalColor.b" :a="finalColor.a" :hex="hexInput"
-                :transparent="style.transparent">
-                <div>
-                    <template v-if="modelValue === 'inherit'">
-                        <div :style="{ border: '1px dashed #999', padding: '8px', textAlign: 'center' }">Inherit</div>
-                    </template>
-                    <template v-else>
-                        <div :class="style.referenceColor"
-                            :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
+        <PopoverRoot v-model:open="isOpen" @update:open="handleOpenChange">
+            <PopoverTrigger as-child>
+                <div ref="referenceRef">
+                    <slot :r="finalColor.r" :g="finalColor.g" :b="finalColor.b" :a="finalColor.a" :hex="hexInput"
+                        :transparent="style.transparent">
+                        <div :class="style.reference">
+                            <template v-if="modelValue === 'inherit'">
+                                <div :style="{ border: '1px dashed #999', padding: '8px', textAlign: 'center' }">Inherit</div>
+                            </template>
+                            <template v-else>
+                                <div :class="style.referenceColor"
+                                    :style="{ backgroundColor: `rgba(${finalColor.r}, ${finalColor.g}, ${finalColor.b}, ${finalColor.a})` }">
+                                </div>
+                            </template>
                         </div>
-                    </template>
+                    </slot>
                 </div>
-            </slot>
-        </div>
-        <Teleport to="body">
-            <transition :enter-active-class="scale.enterActive" :leave-active-class="scale.leaveActive"
-                :enter-from-class="scale.enterFrom" :leave-to-class="scale.leaveTo">
-                <div :class="style.container" v-if="isOpen" ref="popper" :style="{ zIndex: zIndex }">
+            </PopoverTrigger>
+            <PopoverPortal :disabled="!transfer">
+                <PopoverContent
+                    v-if="isOpen"
+                    ref="popper"
+                    :class="style.container"
+                    :style="{ zIndex: zIndex }"
+                    :side="resolvedSide"
+                    :align="resolvedAlign"
+                    :side-offset="4"
+                    :collision-padding="8"
+                    @open-auto-focus.prevent
+                    @close-auto-focus.prevent
+                >
                     <div ref="picker" @mousedown="handleMouseDown" :class="style.colours"
                         :style="`background: rgb(${mainColor.r}, ${mainColor.g}, ${mainColor.b});`">
                         <div :class="style.whiteGradient"></div>
@@ -97,20 +109,22 @@
                             </svg>
                         </MButton>
                     </div>
-                </div>
-            </transition>
-        </Teleport>
+                </PopoverContent>
+            </PopoverPortal>
+        </PopoverRoot>
     </div>
 </template>
 
 <script lang="ts">
-import { onClickOutside, useEyeDropper, useMouseInElement, useMousePressed } from '@vueuse/core';
+import { useEyeDropper, useMouseInElement, useMousePressed } from '@vueuse/core';
 import { computed, defineComponent, onMounted, type PropType, reactive, ref, toRef, watch } from "vue";
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, type PopoverContentProps } from 'reka-ui';
 import * as style from './style';
-import { scale } from "../../styles/transitions.css";
 import { hexToRGB, type HSV, HSVToRGBA, HueToRGBA, RGBAToHex, RGBToHSV } from './utils';
-import { usePopper } from "../../composables/usePopper";
-import type { Placement } from "@popperjs/core";
+import {
+    type Placement,
+    placementWhileList
+} from '../../composables/usePopper';
 import { useZIndex } from "../../composables/useZIndex";
 import MSlider from "../../components/slider/Slider.vue";
 import MButton from "../../components/button/Button.vue";
@@ -137,7 +151,8 @@ export default defineComponent({
         },
         placement: {
             type: String as PropType<Placement>,
-            default: "bottom-start"
+            default: "bottom-start",
+            validator: (value: Placement) => placementWhileList.includes(value)
         },
         zIndex: {
             type: Number
@@ -151,7 +166,11 @@ export default defineComponent({
     components: {
         MSlider,
         MInput,
-        MButton
+        MButton,
+        PopoverContent,
+        PopoverPortal,
+        PopoverRoot,
+        PopoverTrigger
     },
     setup(props, { emit }) {
         const modelModifiers = props.modelModifiers;
@@ -170,7 +189,6 @@ export default defineComponent({
         const wrapper = ref<HTMLElement>();
         const referenceRef = ref<HTMLElement>();
         const transfer = toRef(props, 'transfer');
-        const placement = toRef(props, 'placement');
         const hexInputElement = ref();
         const hueSlider = ref(0);
         const opacitySlider = ref(100);
@@ -181,16 +199,25 @@ export default defineComponent({
         });
         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
+                    : 'bottom',
+                align: align === 'start' || align === 'center' || align === 'end'
+                    ? align
+                    : 'start'
+            } as {
+                side: PopoverContentProps['side'];
+                align: PopoverContentProps['align'];
+            };
+        });
+
         const { elementX, elementY } = useMouseInElement(picker);
         const { pressed } = useMousePressed();
-        const { popper, transferTo, updatePopper } = usePopper({
-            reference: referenceRef,
-            placement,
-            transfer,
-            wrapper,
-            isDrop: false,
-            offset: [-2, 2]
-        });
+        const popper = ref<HTMLElement>();
         const brightness = computed(() => {
             return 1 - position.y;
         })
@@ -374,14 +401,6 @@ export default defineComponent({
 
             updateFromHex(false);
         });
-
-
-        onClickOutside(popper, (e) => {
-            isOpen.value = false;
-            emit('onColorChange', hexInput.value);
-        });
-
-
         watch(() => eyeDropColor.value, () => {
             if (eyeDropColor.value) {
                 hexInput.value = eyeDropColor.value;
@@ -422,11 +441,20 @@ export default defineComponent({
             updateFromHex();
         };
 
+        const handleOpenChange = (value: boolean) => {
+            const wasOpen = isOpen.value;
+
+            isOpen.value = value;
+
+            if (wasOpen && !value) {
+                emit('onColorChange', hexInput.value);
+            }
+        };
+
 
         return {
             isOpen,
             popper,
-            transferTo,
             wrapper,
             referenceRef,
             updateFromRGB,
@@ -452,9 +480,12 @@ export default defineComponent({
             style,
             mainColor,
             zIndex,
+            resolvedSide: computed(() => resolvedPlacement.value.side),
+            resolvedAlign: computed(() => resolvedPlacement.value.align),
+            transfer,
             canPickColor,
             openEyeDropper,
-            scale,
+            handleOpenChange,
             onSliderChangeComplete,
             hexInputUser,
             toggleInherit,

package/src/components/confirm/Confirm.vue

@@ -4,6 +4,7 @@
             ref="modal"
             :title="title"
             :canClickOutside="false"
+            :focusTrap="focusTrap"
             :onClose="onClose">
             <template #body>
                 {{ content }}
@@ -51,15 +52,21 @@ export default defineComponent({
             }
         }
         onMounted(async () => {
-            modal.value?.open(null);
             await nextTick();
-            setTimeout(() => {
-                if (props.focusAction) {
-                    actionButton.value.$el.focus();
-                    return;
-                }
-                cancelButton.value.$el.focus();
-            }, 100);
+
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    modal.value?.open(null);
+
+                    setTimeout(() => {
+                        if (props.focusAction) {
+                            actionButton.value.$el.focus();
+                            return;
+                        }
+                        cancelButton.value.$el.focus();
+                    }, 100);
+                });
+            });
         });
         return {
             modal,

package/src/components/confirm/props.ts

@@ -22,6 +22,10 @@ export const confirmProps = {
     focusAction: {
         type: Boolean,
         default: false
+    },
+    focusTrap: {
+        type: Boolean,
+        default: true
     }
 } as const;