@teammodlr/ui-kit 2.0.20 → 2.0.21

package/package.json

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

package/src/components/colorpicker/ColorPicker.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="wrapper">
+    <div ref="wrapper" class="m-color-picker">
         <div ref="referenceRef"
              @click="isOpen = !isOpen"
              :class="style.reference"
@@ -321,4 +321,4 @@ export default defineComponent({
         };
     }
 })
-</script>
+</script>

package/src/components/dropdown/Dropdown.vue

@@ -7,7 +7,7 @@
         <DropdownWrapper>
             <Teleport :disabled="isNested" to="body">
                 <transition :name="transitionName">
-                    <div v-if="isOpen" ref="popper" :class="menuClasses">
+                    <div v-if="isOpen" ref="popper" :class="menuClasses"  :style="{zIndex: zIndex}">
                         <slot name="menu"/>
                     </div>
                 </transition>
@@ -34,6 +34,7 @@ import {
 import {onClickOutside, useEventListener} from '@vueuse/core';
 import DropdownWrapper from './DropdownWrapper.vue';
 import {useLabel} from './hooks';
+import {useZIndex} from "../../composables/useZIndex";
 import type {DropdownState} from "./symbol";
 import {DROPDOWN_STATE} from "./symbol";
 import * as style from "./style";
@@ -84,6 +85,9 @@ export default defineComponent({
             type: Function as PropType<(labels: any) => void>,
             default: () => {
             }
+        },
+        zIndex: {
+            type: Number
         }
     },
     emits: [
@@ -91,7 +95,7 @@ export default defineComponent({
     ],
     setup(props, {emit}) {
         const parentState = inject(DROPDOWN_STATE, null);
-
+        const {nextZIndex} = useZIndex();
         const isNested = !!parentState;
         const label = toRef(props, 'label')
         const isOpen = ref(props.open);
@@ -99,7 +103,7 @@ export default defineComponent({
         const transfer = toRef(props, 'transfer');
         const wrapper = ref(null);
         const referenceRef = ref(null);
-
+        const zIndex = ref(props.zIndex ?? nextZIndex());
         const reference = computed(() => {
             if (props.virtual !== null) {
                 const virtual = (props.virtual as any).$el ?? props.virtual;
@@ -251,8 +255,9 @@ export default defineComponent({
             computedWrapperClasses,
             computedReferenceClasses,
             transitionName,
-            toggleDropdown
+            toggleDropdown,
+            zIndex
         }
     }
 })
-</script>
+</script>