@teammodlr/ui-kit 2.1.29 → 2.1.31

package/package.json

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

package/src/components/select/Select.vue

@@ -15,8 +15,8 @@
             :aria-disabled="disabled ? 'true' : 'false'"
             :aria-labelledby="`${id}-label`"
             tabindex="0"
-            @focusin="focusSelect"
-            @click="onSelectClick">
+            @mousedown.prevent="onSelectClick"
+            @focusin.stop="focusSelect">
             <div :class="selectComputedClasses">
                 <template
                     v-if="
@@ -28,7 +28,7 @@
                         v-for="value in selectedMax"
                         :key="value"
                         :closeable="true"
-                        @close="removeSelected(value)"
+                        @close="event => removeSelected(event, value)"
                         :size="size">
                         {{ getSelectedLabel(value) }}
                     </MTag>
@@ -454,7 +454,6 @@ export default defineComponent({
                 open.value = false;
                 return;
             }
-
             open.value = true;
         }
 
@@ -514,7 +513,9 @@ export default defineComponent({
             }
         }
 
-        function removeSelected(value: string | number) {
+        function removeSelected(event: MouseEvent, value: string | number) {
+            event.preventDefault();
+            event.stopPropagation();
             if (!props.multiple) {
                 return;
             }
@@ -722,19 +723,16 @@ export default defineComponent({
         });
 
         const focusSelect = (event: FocusEvent) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (event.relatedTarget != null && !isOpen.value) {
-                if (selectRef.value) {
+            setTimeout(() => {
+                if (selectRef.value && !open.value) {
                     openSelect();
                 }
-            }
+            }, 10);
         };
 
         const onSelectClick = (event: MouseEvent) => {
             event.preventDefault();
             event.stopPropagation();
-
             openSelect();
         };
 

package/src/components/tag/Tag.vue

@@ -3,58 +3,64 @@
         <span>
             <slot />
         </span>
-        <button v-if="closeable" @click.stop="close" :class="style.close" tabindex="0">
-            <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="width: 1em; height: 1em;">
-                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <button
+            v-if="closeable"
+            @mousedown.stop="close"
+            :class="style.close"
+            tabindex="0">
+            <svg
+                viewBox="0 0 12 12"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                style="width: 1em; height: 1em">
+                <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd">
                     <g fill="currentColor" fill-rule="nonzero">
                         <path
-                            d="M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z">
-                        </path>
+                            d="M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z"></path>
                     </g>
                 </g>
             </svg>
-
         </button>
     </div>
 </template>
 
 <script lang="ts">
-import type { Color, Size } from "../../types/props";
-import { computed, defineComponent, type PropType } from "vue";
-import * as style from "./style";
+import type { Color, Size } from '../../types/props';
+import { computed, defineComponent, type PropType } from 'vue';
+import * as style from './style';
 
 export default defineComponent({
-    name: "MTag",
+    name: 'MTag',
     props: {
         color: {
             type: String as PropType<Color>,
-            default: "primary",
+            default: 'primary'
         },
         size: {
             type: String as PropType<Size>,
-            default: "md",
+            default: 'md'
         },
         closeable: {
             type: Boolean,
-            default: false,
-        },
+            default: false
+        }
+    },
+    emits: {
+        close: (event: MouseEvent) => true
     },
-    emits: ['close'],
     setup(props, { emit }) {
         const computedClasses = computed(() => {
-            return [
-                style.base
-            ];
-            return {
-                "m-tag": true,
-                [`m-tag--${props.color}`]: true,
-                [`m-tag--${props.size}`]: true,
-            };
+            return [style.base];
         });
 
-        const close = () => {
-            emit('close')
-        }
+        const close = (event: MouseEvent) => {
+            emit('close', event);
+        };
 
         return {
             computedClasses,
@@ -62,5 +68,5 @@ export default defineComponent({
             style
         };
     }
-})
+});
 </script>