@teammodlr/ui-kit 3.0.0-beta.9 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.1",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -12,6 +12,7 @@
   ],
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.es.js",
       "require": "./lib/index.cjs.js"
     },
@@ -30,9 +31,10 @@
     "build:vite": "vite build",
     "build:storybook": "storybook build",
     "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
+    "test:types": "npm run gen-types && vue-tsc --noEmit -p type-tests/tsconfig.json",
     "release:prepare": "npm run build",
     "release": "bumpp --execute=\"npm run release:prepare\" --all",
-    "release:publish": "npm run release && npm publish",
+    "release:publish": "npm run release && npm publish --tag latest",
     "build:watch": "concurrently \"vite build --watch\" \"vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false --watch\""
   },
   "keywords": [],
@@ -63,9 +65,9 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
     "vite": "^5.3.3",
+    "vue": "^3.4.31",
     "vue-tsc": "^2.0.26",
-    "vueuc": "^0.4.58",
-    "vue": "^3.4.31"
+    "vueuc": "^0.4.58"
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.1",
@@ -77,6 +79,7 @@
     "maska": "^2.1.11",
     "reka-ui": "^2.9.3",
     "treemate": "^0.3.11",
+    "virtua": "^0.49.1",
     "vooks": "^0.2.12",
     "vue-sonner": "^2.0.9"
   },

package/src/components/cardcontextmenu/CardContextMenu.vue

@@ -124,7 +124,9 @@ export default defineComponent({
             type: Number
         }
     },
-    emits: ['update:open'],
+    emits: {
+        'update:open': (_value: boolean) => true
+    },
     setup(props, { emit }) {
         const parentState = inject(CARDCONTEXTMENU_STATE, null);
         const { nextZIndex } = useZIndex();

package/src/components/cardcontextmenu/style/Dropdown.css.ts

@@ -189,6 +189,7 @@ export const menuItem = style({
     cursor: 'pointer',
     transition: 'background-color 0.14s ease',
     textDecoration: 'none',
+    outline: 'none',
     ':hover': {
         vars: {
             [vars.backgroundColor]: themeVars.color.gray[100],
@@ -196,6 +197,12 @@ export const menuItem = style({
         },
         backgroundColor: vars.backgroundColor,
         color: vars.color
+    },
+    ':focus': {
+        outline: 'none'
+    },
+    ':focus-visible': {
+        outline: 'none'
     }
 });
 

package/src/components/clearbutton/ClearButton.vue

@@ -0,0 +1,41 @@
+<template>
+    <button
+        type="button"
+        tabindex="-1"
+        aria-label="Clear"
+        :class="style.clearButton"
+        @mousedown.prevent
+        @click.stop.prevent="$emit('clear', $event)"
+        @keydown.stop
+    >
+        <svg
+            :class="style.icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+        >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+        </svg>
+    </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MClearButton',
+    emits: {
+        clear: (_e: MouseEvent) => true
+    },
+    setup() {
+        return { style };
+    }
+});
+</script>

package/src/components/clearbutton/style/ClearButton.css.ts

@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const clearButton = style({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: themeVars.space[6],
+    height: themeVars.space[6],
+    padding: 0,
+    border: 'none',
+    borderRadius: '9999px',
+    background: 'transparent',
+    color: themeVars.color.gray[400],
+    cursor: 'pointer',
+    outline: 'none',
+    transition: `color .15s ${themeVars.transition.default},
+        background-color .15s ${themeVars.transition.default}`,
+    ':hover': {
+        color: themeVars.color.gray[700],
+        backgroundColor: themeVars.color.gray[100]
+    },
+    ':focus-visible': {
+        color: themeVars.color.gray[700],
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+    },
+    ':active': {
+        backgroundColor: themeVars.color.gray[200]
+    }
+});
+
+export const icon = style({
+    width: themeVars.space[4],
+    height: themeVars.space[4],
+    pointerEvents: 'none'
+});

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

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

package/src/components/colorpicker/ColorPicker.vue

@@ -1,8 +1,8 @@
 <template>
     <div ref="wrapper" class="m-color-picker">
-        <PopoverRoot v-model:open="isOpen" @update:open="handleOpenChange">
+        <PopoverRoot v-model:open="isOpen">
             <PopoverTrigger as-child>
-                <div ref="referenceRef">
+                <div ref="referenceRef" tabindex="0" @mousedown.prevent @focus="isOpen = true" :class="style.trigger">
                     <slot :r="finalColor.r" :g="finalColor.g" :b="finalColor.b" :a="finalColor.a" :hex="hexInput"
                         :transparent="style.transparent">
                         <div :class="style.reference">
@@ -147,7 +147,7 @@ export default defineComponent({
         },
         transfer: {
             type: Boolean,
-            default: false
+            default: true
         },
         placement: {
             type: String as PropType<Placement>,
@@ -162,7 +162,10 @@ export default defineComponent({
             default: "#FFFFFF"
         }
     },
-    emits: ['update:modelValue', 'onColorChange'],
+    emits: {
+        'update:modelValue': (_value: string) => true,
+        onColorChange: (_value: string) => true
+    },
     components: {
         MSlider,
         MInput,
@@ -441,15 +444,13 @@ export default defineComponent({
             updateFromHex();
         };
 
-        const handleOpenChange = (value: boolean) => {
-            const wasOpen = isOpen.value;
-
-            isOpen.value = value;
-
-            if (wasOpen && !value) {
+        watch(isOpen, (open, wasOpen) => {
+            console.log('[ColorPicker] isOpen watch:', { wasOpen, open, hexInput: hexInput.value });
+            if (wasOpen && !open) {
+                console.log('[ColorPicker] Emitting onColorChange:', hexInput.value);
                 emit('onColorChange', hexInput.value);
             }
-        };
+        });
 
 
         return {
@@ -485,7 +486,6 @@ export default defineComponent({
             transfer,
             canPickColor,
             openEyeDropper,
-            handleOpenChange,
             onSliderChangeComplete,
             hexInputUser,
             toggleInherit,

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

@@ -12,22 +12,13 @@
     </div>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            colorValue: 'rgba(0,0,0,50%)' // Initial color value
-        };
-    },
-    setup() {
-        const updateColor = (color) => {
-            console.log(color);
-            debugger;
-        }
+<script setup>
+import { ref } from 'vue';
 
-        return {
-            updateColor
-        }
-    }
-};
+const colorValue = ref('rgba(0,0,0,50%)');
+
+function updateColor(color) {
+    console.log(color);
+    colorValue.value = color;
+}
 </script>

package/src/components/colorpicker/style/ColorPicker.css.ts

@@ -72,6 +72,10 @@ export const colours = style({
     cursor: 'crosshair'
 });
 
+export const trigger = style({
+    outline: 'none'
+});
+
 export const reference = style({
     backgroundImage:
         'linear-gradient(45deg, #bebebe 25%, transparent 25%), linear-gradient(-45deg, #bebebe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bebebe 75%), linear-gradient(-45deg, transparent 75%, #bebebe 75%)',
@@ -85,7 +89,8 @@ export const reference = style({
     borderRadius: themeVars.rounded.default,
     position: 'relative',
     cursor: 'pointer',
-    userSelect: 'none'
+    userSelect: 'none',
+    outline: 'none'
 });
 
 export const transparent = style({

package/src/components/dialog/Dialog.vue

@@ -13,6 +13,7 @@
                     v-if="isOpen"
                     ref="dialog"
                     force-mount
+                    :class="style.dialogContent"
                     :style="computedStyle"
                     :disable-outside-pointer-events="modal"
                     @open-auto-focus="handleOpenAutoFocus"
@@ -21,7 +22,7 @@
                     @focus-outside="handleFocusOutside"
                     @interact-outside.prevent
                 >
-                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                    <FocusScope :trapped="focusTrap" :loop="focusTrap" :class="style.focusScope">
                         <slot v-if="$slots.container" name="container" :close="close"></slot>
                         <template v-else>
                             <div :class="style.content">
@@ -126,7 +127,15 @@ export default defineComponent({
         },
     },
     // Eventually remove 'open', i lazy cant be assed for now
-    emits: ['onOpen', 'onClose', 'update:open', 'open', 'close'],
+    emits: {
+        onOpen: () => true,
+        onClose: () => true,
+        'update:open': (_value: boolean) => true,
+        open: () => true,
+        close: () => true,
+        // Fired once the leave animation has finished and the dialog is out of the DOM
+        'after-leave': () => true
+    },
     setup(props, { emit, expose }) {
         const wrapper = ref<HTMLElement | null>(null);
         const dialog = shallowRef<HTMLElement | ComponentPublicInstance | null>(null);
@@ -230,6 +239,7 @@ export default defineComponent({
 
         function handleAfterLeave() {
             emit('close');
+            emit('after-leave');
         }
 
         function onCloseEmit() {
@@ -246,10 +256,6 @@ export default defineComponent({
         }
 
         function handleFocusOutside(event: Event) {
-            if (!props.focusTrap) {
-                return;
-            }
-
             event.preventDefault();
         }
 

package/src/components/dialog/style/Dialog.css.ts

@@ -72,6 +72,36 @@ export const content = style({
     }
 });
 
+// DialogContent chrome ([role="dialog"]). Covers both the default content
+// above and custom `#container` panels, which bypass `content`.
+// Scoped to the chrome element itself so interactive descendants
+// (inputs, buttons) keep their own focus rings.
+export const dialogContent = style({
+    outline: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+});
+
+// Inner FocusScope wrapper ([tabindex="-1"]) rendered inside DialogContent.
+// Suppresses the detached black outline seen on drag mousedown / Tab wrap.
+export const focusScope = style({
+    outline: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+});
+
 export const header = style({
     color: themeVars.color.font.default,
     backgroundColor: '#FFF',

package/src/components/drawer/Drawer.vue

@@ -0,0 +1,280 @@
+<template>
+    <DialogRoot :open="isOpen" modal @update:open="handleOpenChange">
+        <DialogTrigger v-if="hasTrigger" as-child>
+            <slot name="trigger" />
+        </DialogTrigger>
+        <DialogPortal to="body">
+            <Transition
+                appear
+                type="animation"
+                :enter-active-class="fade.enterActive"
+                :leave-active-class="fade.leaveActive"
+                :enter-from-class="fade.enterFrom"
+                :leave-to-class="fade.leaveTo"
+            >
+                <DialogOverlay
+                    v-if="isOpen && showMask"
+                    force-mount
+                    :class="style.mask"
+                    :style="{ zIndex }"
+                />
+            </Transition>
+            <Transition
+                appear
+                type="animation"
+                :enter-active-class="currentTransition.enterActive"
+                :leave-active-class="currentTransition.leaveActive"
+                :enter-from-class="currentTransition.enterFrom"
+                :leave-to-class="currentTransition.leaveTo"
+            >
+                <DialogContent
+                    v-if="isOpen"
+                    force-mount
+                    :class="[style.placement[placement]]"
+                    :style="contentStyle"
+                    :disable-outside-pointer-events="true"
+                    @open-auto-focus="handleOpenAutoFocus"
+                    @escape-key-down="onEscapeKeyDown"
+                    @pointer-down-outside="onPointerDownOutside"
+                    @interact-outside="onInteractOutside"
+                >
+                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                        <div v-if="hasTitle || showClose" :class="style.header">
+                            <DialogTitle as-child>
+                                <div :class="style.title">
+                                    <slot name="title">{{ title }}</slot>
+                                </div>
+                            </DialogTitle>
+                            <DialogClose v-if="showClose" as-child>
+                                <button :class="style.close" aria-label="Close" />
+                            </DialogClose>
+                        </div>
+                        <div :class="style.body" ref="bodyRef">
+                            <slot />
+                        </div>
+                        <div v-if="hasFooter" :class="style.footer">
+                            <slot name="footer" />
+                        </div>
+                    </FocusScope>
+                </DialogContent>
+            </Transition>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<script lang="ts">
+import type { CSSProperties, PropType } from 'vue';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+    FocusScope
+} from 'reka-ui';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
+import * as style from './style';
+import { fade } from '../../styles/transitions.css';
+import { useZIndex, ZINDEX } from '../../composables/useZIndex';
+
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+
+export default defineComponent({
+    name: 'MDrawer',
+    components: {
+        DialogClose,
+        DialogContent,
+        DialogOverlay,
+        DialogPortal,
+        DialogRoot,
+        DialogTitle,
+        DialogTrigger,
+        FocusScope
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: undefined
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'right'
+        },
+        width: {
+            type: [String, Number],
+            default: '378px'
+        },
+        height: {
+            type: [String, Number],
+            default: '378px'
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        showClose: {
+            type: Boolean,
+            default: true
+        },
+        showMask: {
+            type: Boolean,
+            default: true
+        },
+        outsideClose: {
+            type: Boolean,
+            default: true
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: {
+        open: () => true,
+        close: (_e?: MouseEvent | KeyboardEvent) => true,
+        'update:open': (_value: boolean) => true
+    },
+    setup(props, { emit, slots }) {
+        const { nextZIndex } = useZIndex();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+        provide(ZINDEX, zIndex);
+
+        const bodyRef = ref<HTMLElement | null>(null);
+        const hasFooter = computed(() => !!slots.footer);
+        const hasTitle = computed(() => !!slots.title || !!props.title);
+        const hasTrigger = computed(() => !!slots.trigger);
+
+        const internalOpen = ref(false);
+
+        const isOpen = computed({
+            get: () => {
+                if (props.open !== undefined) return props.open;
+                return internalOpen.value;
+            },
+            set: (value: boolean) => {
+                if (props.open !== undefined) {
+                    emit('update:open', value);
+                } else {
+                    internalOpen.value = value;
+                }
+            }
+        });
+
+        const isHorizontal = computed(() =>
+            props.placement === 'left' || props.placement === 'right'
+        );
+
+        const contentStyle = computed<CSSProperties>(() => {
+            const s: CSSProperties = { zIndex: zIndex.value };
+            if (isHorizontal.value) {
+                const w = props.width;
+                s.width = typeof w === 'number' ? `${w}px` : w;
+            } else {
+                const h = props.height;
+                s.height = typeof h === 'number' ? `${h}px` : h;
+            }
+            return s;
+        });
+
+        const currentTransition = computed(() => style.slideTransition[props.placement]);
+
+        const focusableSelector = [
+            '[autofocus]',
+            'input:not([type="hidden"])',
+            'textarea',
+            'select',
+            '[contenteditable="true"]',
+            'button',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+
+        function getFirstFocusable() {
+            if (!bodyRef.value) return null;
+            return Array.from(
+                bodyRef.value.querySelectorAll<HTMLElement>(focusableSelector)
+            ).find(el =>
+                !el.matches(':disabled') &&
+                el.getAttribute('aria-disabled') !== 'true' &&
+                el.getAttribute('aria-hidden') !== 'true' &&
+                el.getClientRects().length > 0
+            ) ?? null;
+        }
+
+        const handleOpenAutoFocus = (e: Event) => {
+            const first = getFirstFocusable();
+            if (first) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+
+        const close = (e: MouseEvent | KeyboardEvent | undefined) => {
+            emit('close', e);
+            isOpen.value = false;
+        };
+
+        const onEscapeKeyDown = (e: KeyboardEvent) => {
+            e.stopPropagation();
+            close(e);
+        };
+
+        const onPointerDownOutside = (e: Event) => {
+            if (!props.outsideClose) e.preventDefault();
+        };
+
+        const onInteractOutside = (e: Event) => {
+            if (!props.outsideClose) {
+                e.preventDefault();
+                return;
+            }
+            close(e as MouseEvent | KeyboardEvent);
+        };
+
+        const handleOpenChange = (value: boolean) => {
+            if (!value && isOpen.value) {
+                close(undefined);
+                return;
+            }
+            isOpen.value = value;
+        };
+
+        watch(
+            () => isOpen.value,
+            (next, prev) => {
+                if (next && !prev) {
+                    zIndex.value = props.zIndex ?? nextZIndex();
+                    emit('open');
+                }
+            }
+        );
+
+        const open = () => { isOpen.value = true; };
+
+        return {
+            style,
+            fade,
+            isOpen,
+            zIndex,
+            hasFooter,
+            hasTitle,
+            hasTrigger,
+            bodyRef,
+            contentStyle,
+            currentTransition,
+            open,
+            close,
+            handleOpenAutoFocus,
+            handleOpenChange,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onInteractOutside
+        };
+    }
+});
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+    <MDrawer ref="drawer" title="Basic Drawer">
+        <p style="margin: 0">This is the drawer body. It slides in from the right by default.</p>
+    </MDrawer>
+
+    <MButton @click="drawer?.open()">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const drawer = ref<InstanceType<typeof MDrawer> | null>(null);
+</script>

package/src/components/drawer/examples/custom-title.vue

@@ -0,0 +1,21 @@
+<template>
+    <MDrawer ref="drawer">
+        <template #title>
+            <span style="display: flex; align-items: center; gap: 6px">
+                <span style="font-size: 1.1em">⚙️</span>
+                Settings
+            </span>
+        </template>
+        <p style="margin: 0">Custom title slot with an icon.</p>
+    </MDrawer>
+
+    <MButton @click="drawer?.open()">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const drawer = ref<InstanceType<typeof MDrawer> | null>(null);
+</script>