@teammodlr/ui-kit 2.3.15 → 2.3.17

package/package.json

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

package/src/components/colorpicker/ColorPicker.vue

@@ -212,10 +212,9 @@ export default defineComponent({
 
         const emitModelValue = () => {
             emit('update:modelValue', hexInput.value);
-            emit('onColorChange', hexInput.value);
         };
 
-        const setInputs = () => {
+        const setInputs = (shouldEmit: boolean = true) => {
             if (hexInput.value !== 'inherit') {
                 hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
             }
@@ -224,13 +223,13 @@ export default defineComponent({
             bInput.value = finalColor.value.b.toString();
             aInput.value = finalColor.value.a.toFixed(2).toString();
 
-            if (!modelModifiers.lazy) {
+            if (shouldEmit && !modelModifiers.lazy) {
                 emitModelValue();
             }
         };
 
         watch(() => finalColor.value, () => {
-            setInputs();
+            setInputs(false);
         });
 
         watch(() => props.color, (newColor) => {
@@ -240,12 +239,12 @@ export default defineComponent({
             }
         });
 
-        const updateFromHSV = (hsv: HSV, alpha: number) => {
+        const updateFromHSV = (hsv: HSV, alpha: number, shouldEmit: boolean = true) => {
             position.x = hsv.s;
             position.y = 1 - hsv.v;
             hueSlider.value = ((1 / 360) * hsv.h) * 100;
             opacitySlider.value = alpha * 100;
-            setInputs();
+            setInputs(shouldEmit);
         }
 
         const updateFromHex = (shouldEmit = true) => {
@@ -266,7 +265,7 @@ export default defineComponent({
                 opacitySlider.value = 0;
             }
 
-            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
+            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a, shouldEmit);
             if (shouldEmit && modelModifiers.lazy) {
                 emitModelValue();
             }
@@ -379,6 +378,7 @@ export default defineComponent({
 
         onClickOutside(popper, (e) => {
             isOpen.value = false;
+            emit('onColorChange', hexInput.value);
         });
 
 

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

@@ -1,7 +1,7 @@
 <template>
     <div>
         <p>Selected Color: {{ colorValue }}</p>
-        <MColorPicker v-model.lazy="colorValue" style="display: inline-block;">
+        <MColorPicker color="#FF0000" style="display: inline-block;" @on-color-change="updateColor">
             <template #default="{ r, g, b, hex, transparent }">
                 <div :class="transparent"
                     style="width: 100px; height: 100px; border: 1px solid black; position: relative; overflow: hidden;">
@@ -18,6 +18,16 @@ export default {
         return {
             colorValue: 'rgba(0,0,0,50%)' // Initial color value
         };
+    },
+    setup() {
+        const updateColor = (color) => {
+            console.log(color);
+            debugger;
+        }
+
+        return {
+            updateColor
+        }
     }
 };
 </script>

package/src/components/dialogprovider/DialogProvider.vue

@@ -13,7 +13,7 @@
     </template>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, provide, ref, nextTick } from 'vue';
+import { defineComponent, reactive, provide, ref, nextTick, computed } from 'vue';
 import type { DialogApiInjection, DialogOptions, DialogReactive } from './types';
 import MDialog from '../dialog/Dialog.vue';
 import MRenderer from '../renderer/renderer';
@@ -103,9 +103,26 @@ export default defineComponent({
             remove(key);
         }
 
+        const hasOpenDialog = computed(() => {
+            return Object.values(dialogMap).some(dialog => dialog.options.open === true);
+        });
+
+        const openDialogCount = computed(() => {
+            return Object.values(dialogMap).filter(dialog => dialog.options.open === true).length;
+        });
+
+        const openDialogKeys = computed(() => {
+            return Object.values(dialogMap)
+                .filter(dialog => dialog.options.open === true)
+                .map(dialog => dialog.key);
+        });
+
         const api: DialogApiInjection = {
             create,
             remove,
+            hasOpenDialog: () => hasOpenDialog.value,
+            openDialogCount: () => openDialogCount.value,
+            openDialogKeys: () => openDialogKeys.value
         };
 
         provide('m-dialog', api);

package/src/components/dialogprovider/types.ts

@@ -23,4 +23,7 @@ export interface DialogReactive {
 export interface DialogApiInjection {
     create: (key: string, options?: DialogOptions) => DialogReactive;
     remove: (key: string) => void;
+    hasOpenDialog: () => boolean;
+    openDialogCount: () => number;
+    openDialogKeys: () => string[];
 }