@teammodlr/ui-kit 3.0.0-beta.11 → 3.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.12",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/colorpicker/ColorPicker.vue

@@ -1,6 +1,6 @@
 <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">
                     <slot :r="finalColor.r" :g="finalColor.g" :b="finalColor.b" :a="finalColor.a" :hex="hexInput"
@@ -441,15 +441,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 +483,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/messageprovider/MessageProvider.vue

@@ -64,7 +64,7 @@ export default defineComponent({
         },
     },
     setup(props) {
-        const activeMessages = new Map<string, { stop: () => void; closed: boolean; onClose?: () => void }>();
+        const activeMessages = new Map<string, { stop: () => void; closed: boolean; currentId: string; onClose?: () => void }>();
 
         const sonnerPosition = computed(() => placementMap[props.placement]);
 
@@ -100,9 +100,9 @@ export default defineComponent({
             return timeout ?? props.timeout;
         }
 
-        function syncToast(message: PrivateMessageReactive, isUpdate = false) {
+        function createToast(message: PrivateMessageReactive, sonnerId: string) {
             const options: ExternalToast = {
-                id: message.id,
+                id: sonnerId,
                 duration: normalizeDuration(message.timeout),
                 closeButton: message.closeButton ?? message.closable,
                 richColors: message.richColors,
@@ -111,10 +111,6 @@ export default defineComponent({
                 onAutoClose: () => closeMessage(message.id, true),
             };
 
-            if (isUpdate) {
-                toast.dismiss(message.id);
-            }
-
             switch (message.type) {
                 case 'success':
                     toast.success(message.content, options);
@@ -137,6 +133,23 @@ export default defineComponent({
             }
         }
 
+        function syncToast(message: PrivateMessageReactive) {
+            const active = activeMessages.get(message.id);
+            if (!active) {
+                return;
+            }
+
+            const oldId = active.currentId;
+            const newId = Math.random().toString(16).slice(2, 14);
+            active.currentId = newId;
+
+            toast.dismiss(oldId);
+
+            requestAnimationFrame(() => {
+                createToast(message, newId);
+            });
+        }
+
         function closeMessage(id: string, invokeOnClose: boolean) {
             const active = activeMessages.get(id);
             if (!active || active.closed) {
@@ -168,20 +181,29 @@ export default defineComponent({
                 type: options.type,
                 onClose: options.onClose,
                 destroy: () => {
+                    const active = activeMessages.get(id);
+                    const sonnerId = active?.currentId ?? id;
                     closeMessage(id, false);
-                    toast.dismiss(id);
+                    toast.dismiss(sonnerId);
                 },
             }) as PrivateMessageReactive;
 
+            const sonnerId = Math.random().toString(16).slice(2, 14);
+            activeMessages.set(id, { stop: () => {}, closed: false, currentId: sonnerId, onClose: options.onClose });
+
             const stop = watch(
                 () => [message.content, message.type, message.timeout, message.closable, message.closeButton, message.richColors, sonnerPosition.value],
-                (newVal, oldVal) => {
-                    syncToast(message, !!oldVal);
+                (_, oldVal) => {
+                    if (!oldVal) {
+                        createToast(message, activeMessages.get(id)!.currentId);
+                    } else {
+                        syncToast(message);
+                    }
                 },
                 { immediate: true }
             );
 
-            activeMessages.set(id, { stop, closed: false, onClose: options.onClose });
+            activeMessages.get(id)!.stop = stop;
 
             return message;
         }