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

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

@@ -21,6 +21,6 @@ const options = Array.from({ length: 50 }, (_, i) => ({
 const value = ref();
 
 function testThis(value: any, option: any) {
-    alert('value: ' + value);
+    // alert('value: ' + value);
 }
 </script>

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

@@ -365,3 +365,18 @@ export const clearable = style({
     top: '0',
     display: 'flex'
 });
+
+export const arrow = style({
+    width: themeVars.space[4],
+    height: themeVars.space[4],
+    position: 'absolute',
+    right: themeVars.space[3],
+    top: themeVars.space[3],
+    display: 'flex',
+    color: themeVars.color.gray[500],
+    transition: 'transform 0.3s ease',
+});
+
+export const arrowOpen = style({
+    transform: 'rotate(180deg)',
+})

package/src/components/slider/Slider.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import { defineComponent, ref, onUnmounted } from 'vue';
 import * as style from './style';
 
 export default defineComponent({

package/src/components/switch/Switch.vue

@@ -1,12 +1,18 @@
 <template>
-    <label :class="style.base" @click.prevent="toggle">
-        <input v-model="checked" type="checkbox" :aria-checked="checked ? 'true' : 'false'"
-            :aria-disabled="(disabled || loading) ? 'true' : 'false'" :aria-labelledby="`${id}-label`"
-            :disabled="disabled || loading" :name="name" :id="id" :class="style.input" v-bind="$attrs"
-            v-on="inputListeners" />
-
-        <span :class="classes">
-        </span>
+    <label :class="style.base">
+        <SwitchRoot
+            v-model="checked"
+            :aria-checked="checked ? 'true' : 'false'"
+            :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+            :aria-labelledby="`${id}-label`"
+            :disabled="disabled || loading"
+            :name="name"
+            :id="id"
+            :class="classes"
+            v-bind="$attrs"
+            @blur="onBlur"
+            @focus="onFocus"
+        />
 
         <span :class="style.label" :id="`${id}-label`">
             <template v-if="hasSlot">
@@ -23,6 +29,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref, toRef, watch } from 'vue';
+import { SwitchRoot } from 'reka-ui';
 import { useInput } from '../../composables/useInput';
 import { useInteractive } from "../../composables/useInteractive";
 import type { Size } from '../../types/props';
@@ -30,6 +37,9 @@ import * as style from './style';
 
 export default defineComponent({
     name: "Switch",
+    components: {
+        SwitchRoot
+    },
     emits: useInput.emits(),
     props: {
         ...useInput.props(),
@@ -65,7 +75,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);
         const name = toRef(props, 'name');
@@ -102,6 +112,14 @@ export default defineComponent({
             checked.value = !checked.value;
         }
 
+        function onFocus(event: FocusEvent) {
+            emit('focus', event);
+        }
+
+        function onBlur(event: FocusEvent) {
+            emit('blur', event);
+        }
+
         expose({
             focus,
             blur,
@@ -125,7 +143,9 @@ export default defineComponent({
             hasSlot,
             inputListeners,
             focus,
-            blur
+            blur,
+            onFocus,
+            onBlur
         }
     }
 })

package/src/components/switch/style/Switch.css.ts

@@ -41,6 +41,9 @@ export const toggle = style({
     background: vars.offBackground,
     transition: 'all .4s ease',
     selectors: {
+        ['&:focus-visible']: {
+            boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+        },
         ['&:after']: {
             position: 'relative',
             display: 'block',
@@ -128,8 +131,3 @@ export const size = styleVariants({
         }
     }
 });
-
-globalStyle(`${base} ${input}:focus + ${toggle}`, {
-    vars: {},
-    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
-});

package/src/components/tab/Tab.vue

@@ -1,26 +1,37 @@
 <template>
-    <div ref="tabRef" :class="computedTabClasses" @click.prevent="handleClick" :disabled="disabled">
-        <div :class="computedTabLabelClasses">
-            <slot name="tab" :label="label" :value="value">
-                {{ computedLabel }}
-            </slot>
-
-        </div>
-        <div v-if="closable">
-            <button role="button" :class="close" @click.stop="$emit('onClose', { value, label })"></button>
+    <TabsTrigger :value="computedValue" :disabled="disabled" as-child>
+        <div ref="tabRef" v-bind="attrs" :class="computedTabClasses" :disabled="disabled">
+            <div :class="computedTabLabelClasses">
+                <slot name="tab" :label="label" :value="value">
+                    {{ computedLabel }}
+                </slot>
+            </div>
+            <div v-if="closable">
+                <button role="button" :class="close" @click.stop="$emit('onClose', { value, label })"></button>
+            </div>
         </div>
+    </TabsTrigger>
 
-        <teleport v-if="selected && teleportTo" :to="teleportTo">
-            <slot />
-        </teleport>
-    </div>
+    <teleport v-if="teleportTo && hasContent" :to="teleportTo">
+        <TabsContent :value="computedValue" as-child>
+            <div>
+                <slot />
+            </div>
+        </TabsContent>
+    </teleport>
 </template>
 
 <script lang="ts">
+import { TabsContent, TabsTrigger } from 'reka-ui';
 import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue';
 import { tabButton, tabButtonActive, tabLabel, close, tabHasClose } from './style';
 export default defineComponent({
     name: "Tab",
+    inheritAttrs: false,
+    components: {
+        TabsContent,
+        TabsTrigger
+    },
     props: {
         value: {
             type: [String, Number]
@@ -38,11 +49,12 @@ export default defineComponent({
         }
     },
     emits: ['onClose'],
-    setup(props, { emit }) {
+    setup(props, { attrs, slots }) {
         const computedValue = computed(() => props.value);
         const computedLabel = computed(() => props.label || props.value);
         const tabRef = ref<HTMLElement | null>(null);
-        const teleportTo = ref(null);
+        const teleportTo = ref<HTMLElement | null>(null);
+        const hasContent = computed(() => !!slots.default);
 
         const tabs = inject("tabs", {
             tabsContentRef: ref(null),
@@ -73,10 +85,6 @@ export default defineComponent({
             return tabs.state.active === computedValue.value;
         });
 
-        function handleClick() {
-            tabs.selectTab(computedValue.value!);
-        }
-
         onMounted(() => {
             teleportTo.value = tabs.tabsContentRef.value;
         });
@@ -87,9 +95,10 @@ export default defineComponent({
             tabRef,
             computedTabClasses,
             computedTabLabelClasses,
-            handleClick,
             selected,
             teleportTo,
+            hasContent,
+            attrs,
             close
         }
     }

package/src/components/tab/TabGroup.vue

@@ -1,21 +1,33 @@
 <template>
-    <div :class="computedTabsWrapperClasses">
-        <div ref="wrapperRef">
-            <div ref="tabsRef" :class="computedTabsClasses">
-                <slot />
+    <TabsRoot
+        :model-value="currentValue"
+        :orientation="vertical ? 'vertical' : 'horizontal'"
+        :unmount-on-hide="true"
+        @update:model-value="selectTab"
+    >
+        <div :class="computedTabsWrapperClasses">
+            <div ref="wrapperRef">
+                <TabsList ref="tabsRef" :class="computedTabsClasses">
+                    <slot />
+                </TabsList>
             </div>
+            <div ref="tabsContentRef" :class="computedTabContentClasses"></div>
         </div>
-        <div ref="tabsContentRef" :class="computedTabContentClasses"></div>
-    </div>
+    </TabsRoot>
 </template>
 
 <script lang="ts">
 import type { Size } from '../../types/props';
-import { computed, defineComponent, provide, reactive, ref, watchEffect, type PropType } from 'vue';
+import { TabsList, TabsRoot } from 'reka-ui';
+import { computed, defineComponent, provide, reactive, ref, type PropType } from 'vue';
 import { tabs, tabContent, tabsEvenly } from './style';
 
 export default defineComponent({
     name: "TabGroup",
+    components: {
+        TabsList,
+        TabsRoot
+    },
     props: {
         modelValue: {
             type: [String, Number],
@@ -41,33 +53,18 @@ export default defineComponent({
             validator: (value: string) => ['base', 'card'].includes(value)
         }
     },
-    emit: [
+    emits: [
         'update:modelValue',
         'update:selected'
     ],
     setup(props, { emit }) {
         const wrapperRef = ref<HTMLElement>();
+        const tabsRef = ref<HTMLElement>();
         const tabsContentRef = ref<HTMLElement>();
-        const contentRef = ref<HTMLElement>();
-        const active = ref();
-        const selectedActive = ref();
-
-        // Watch for changes in modelValue
-        watchEffect(() => {
-            if (props.modelValue !== undefined) {
-                active.value = props.modelValue;
-            }
-        });
-
-        // Watch for changes in selected
-        watchEffect(() => {
-            if (props.selected !== undefined) {
-                selectedActive.value = props.selected;
-            }
-        });
+        const currentValue = computed(() => props.modelValue ?? props.selected);
 
         const state = reactive({
-            active: computed(() => active.value ?? selectedActive.value),
+            active: currentValue,
             type: computed(() => props.type)
         });
 
@@ -92,16 +89,8 @@ export default defineComponent({
         });
 
         function selectTab(tab: string | number) {
-            // Update both modelValue and selected if they exist
-            if (props.modelValue !== undefined) {
-                active.value = tab;
-                emit('update:modelValue', tab);
-            }
-
-            if (props.selected !== undefined) {
-                selectedActive.value = tab;
-                emit('update:selected', tab);
-            }
+            emit('update:modelValue', tab);
+            emit('update:selected', tab);
         }
 
         provide("tabs", {
@@ -112,11 +101,13 @@ export default defineComponent({
 
         return {
             wrapperRef,
+            tabsRef,
             tabsContentRef,
-            contentRef,
+            currentValue,
             computedTabsWrapperClasses,
             computedTabsClasses,
-            computedTabContentClasses
+            computedTabContentClasses,
+            selectTab
         }
     }
 })

package/src/components/textarea/Textarea.vue

@@ -14,7 +14,7 @@
                 :id="id"
                 :placeholder="placeholder"
                 :name="name"
-                :value="modelValue || ''"
+                :value="textareaValue"
                 :readonly="readonly"
                 v-on="inputListeners"
                 :class="inputComputedClasses"
@@ -31,7 +31,6 @@
 </template>
 
 <script lang="ts">
-// @ts-nocheck
 import type { PropType } from "vue";
 import type { Size } from "../../types/props";
 import {
@@ -90,8 +89,8 @@ export default defineComponent({
         },
     },
     emits: useInput.emits(),
-    setup(props, { slots, emit, expose }) {
-        const element = ref<HTMLInputElement|null>(null);
+    setup(props, { emit, expose }) {
+        const element = ref<HTMLTextAreaElement | null>(null);
         const { focus, blur } = useInteractive(element);
         const {
             id,
@@ -145,6 +144,10 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        const textareaValue = computed(() => {
+            return props.modelValue == null ? '' : String(props.modelValue);
+        });
+
         const onClear = () => {
             emit('update:modelValue', '');
         };
@@ -165,6 +168,7 @@ export default defineComponent({
             wrapperComputedClasses,
             computedContainerClasses,
             name,
+            textareaValue,
             inputError,
             style,
 

package/src/components/tooltip/Tooltip.vue

@@ -1,68 +1,59 @@
 <template>
-    <Primitive
-        as-child
-        v-bind="$attrs"
-        @mouseenter="show"
-        @mouseleave="hide"
-        ref="wrapper">
-        <TooltipTrigger ref="reference" >
-            <slot/>
-        </TooltipTrigger>
-
-        <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"
+    <TooltipProvider :delay-duration="delay">
+        <TooltipRoot>
+            <TooltipTrigger as-child v-bind="$attrs">
+                <slot />
+            </TooltipTrigger>
+
+            <TooltipPortal :disabled="!transfer">
+                <TooltipContent
                     :class="computedClasses"
-                    ref="popper"
-                    v-if="isOpen"
-                    :style="{ zIndex: zIndex }">
+                    :side="resolvedSide"
+                    :align="resolvedAlign"
+                    :side-offset="4"
+                    :style="{ zIndex: zIndex }"
+                >
                     <slot :html="text" name="content">
                         <span v-html="text" />
                     </slot>
-                </div>
-            </Transition>
-        </Teleport>
-    </Primitive>
+                </TooltipContent>
+            </TooltipPortal>
+        </TooltipRoot>
+    </TooltipProvider>
 </template>
 
 <script lang="ts">
 import {
     defineComponent,
     ref,
-    toRef,
     type PropType,
-    computed,
-    watch,
-    onUnmounted, type Ref
+    computed
 } from 'vue';
+import {
+    TooltipContent,
+    TooltipPortal,
+    TooltipProvider,
+    TooltipRoot,
+    TooltipTrigger,
+    type TooltipContentProps
+} from 'reka-ui';
 import {
     type Placement,
-    placementWhileList,
-    usePopper
+    placementWhileList
 } from '../../composables/usePopper';
 
-import { fade } from '../../styles/transitions.css';
 import * as style from './style';
 import { useZIndex } from '../../composables/useZIndex';
-import {Primitive} from "../primative/primitive";
-import TooltipTrigger from "@/components/tooltip/TooltipTrigger.vue";
-import {createContext} from "../../utils/injection";
-
-interface TooltipContext {
-    reference: Ref<HTMLElement | undefined>
-    onReferenceChange: (element: HTMLElement | undefined) => void
-}
-
-export const [injectionTooltipContext, providerTooltipContext] = createContext<TooltipContext>('Tooltip');
 
 export default defineComponent({
     name: 'MTooltip',
-    components: {TooltipTrigger, Primitive},
+    components: {
+        TooltipContent,
+        TooltipPortal,
+        TooltipProvider,
+        TooltipRoot,
+        TooltipTrigger
+    },
     props: {
         text: {
             type: String,
@@ -95,41 +86,21 @@ export default defineComponent({
     },
     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>();
-        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];
-            }
-        });
-
-        providerTooltipContext({
-            reference,
-            onReferenceChange: element => reference.value = element
-        });
-
-        const { popper, transferTo, updatePopper } = usePopper({
-            placement,
-            transfer,
-            reference,
-            wrapper,
-            // @ts-ignore
-            offset: offset.value
+        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?: TooltipContentProps['side'];
+                align?: TooltipContentProps['align'];
+            };
         });
 
         const computedClasses = computed(() => {
@@ -141,73 +112,13 @@ export default defineComponent({
             ];
         });
 
-        watch(
-            () => isOpen.value,
-            (value: boolean) => {
-                if (value) {
-                    updatePopper();
-
-                    zIndex.value = nextZIndex();
-                }
-            }
-        );
-
-        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,
-            offset,
-            popper,
-            transferTo,
-            isOpen,
-            show,
-            hide,
             computedClasses,
+            resolvedSide: computed(() => resolvedPlacement.value.side),
+            resolvedAlign: computed(() => resolvedPlacement.value.align),
+            transfer: computed(() => props.transfer),
             zIndex,
-            style,
-            fade
+            style
         };
     }
 });

package/src/components/tooltip/TooltipTrigger.vue

@@ -1,20 +1,17 @@
-<script setup lang="ts">
-import {Primitive} from "../primative/primitive";
-import { useForwardExpose } from "../../utils/useForwardExpose";
-import {onMounted} from "vue";
-import { injectionTooltipContext } from "./Tooltip.vue";
-
-const { forwardRef, currentElement } = useForwardExpose();
-
-const tooltipContext = injectionTooltipContext();
-
-onMounted(() => {
-    tooltipContext.onReferenceChange(currentElement.value);
-})
-</script>
-
 <template>
-    <Primitive as-child :ref="forwardRef">
+    <TooltipTrigger as-child>
         <slot />
-    </Primitive>
+    </TooltipTrigger>
 </template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { TooltipTrigger } from 'reka-ui';
+
+export default defineComponent({
+    name: 'TooltipTrigger',
+    components: {
+        TooltipTrigger
+    }
+});
+</script>