@teammodlr/ui-kit 2.0.20 → 2.0.22

package/src/components/button/Button.vue

@@ -1,204 +1,204 @@
-<template>
-    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled"
-               @click="handleClick" v-bind="$attrs">
-<!--        <div :class="computedWaveClasses" :key="waveTimerId"></div>-->
-        <div :class="computedBorderClasses"></div>
-        <div :class="computedBorderStateClasses"></div>
-        <span v-if="hasIconLeft" :class="iconLeft">
-            <slot name="icon-left"/>
-        </span>
-        <span>
-            <slot/>
-        </span>
-        <span v-if="hasIconRight" :class="iconRight">
-            <slot name="icon-right"/>
-        </span>
-    </component>
-</template>
-
-<script lang="ts">
-import type {PropType} from "vue";
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, toRef} from "vue";
-import type {Size, Variant} from "../../types/props";
-import * as style from "./style";
-import {BUTTON_GROUP_STATE} from "../buttongroup/symbol";
-import {FORM_STATE} from "../form/symbol";
-
-export default defineComponent({
-    name: "MButton",
-    props: {
-        type: {
-            type: String,
-            default: 'button',
-        },
-        variant: {
-            type: String as PropType<Variant>,
-            default: 'default'
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        block: {
-            type: Boolean,
-            default: false
-        },
-        secondary: {
-            type: Boolean,
-            default: false
-        },
-        to: {
-            type: [String, Object],
-            default: null
-        },
-        href: {
-            type: String,
-            default: '',
-        },
-        link: {
-            type: Boolean,
-            default: false
-        },
-        icon: {
-            type: Boolean,
-            default: false
-        },
-        onClick: {
-            type: Function as PropType<(e: MouseEvent) => void>,
-            default: () => {
-            }
-        }
-    },
-    setup(props, {slots}) {
-        const group = inject(BUTTON_GROUP_STATE, null);
-        const form = inject(FORM_STATE, null);
-        const state = inject("dropdown", null);
-
-        const sizeValue = ref<Size>('md');
-        const waveActive = ref<boolean>(false);
-        const waveTimerId = ref<number | null>(0);
-        const loading = toRef(props, 'loading');
-
-        const dropdownOpen = computed(() => {
-            // @ts-ignore
-            return state?.isOpen.value;
-        });
-
-        const groupSize = computed(() => {
-            return group?.size;
-        });
-
-        const size = computed<Size>(() => {
-            return groupSize.value || props.size;
-        })
-
-        const hasIconLeft = computed(() => !!(slots['icon-left']));
-        const hasIconRight = computed(() => !!(slots['icon-right']));
-
-        const computedClasses = computed(() => {
-            // TODO: We can use dropdownOpen (T or F) to style the open button :)
-            return [
-                style.base,
-                [style.size[size.value]],
-                style.variant[props.variant],
-                {
-                    [style.rounded]: props.rounded,
-                    [style.secondary[props.variant]]: props.secondary,
-                    [style.block]: props.block,
-                    [style.link[props.variant]]: props.link,
-                    [style.iconButton]: props.icon,
-                    [style.loading]: form?.loading || loading.value,
-                }
-            ]
-        });
-
-        const computedWaveClasses = computed(() => {
-            return [
-                style.wave,
-                {
-                    [style.waveActive]: waveActive.value
-                }
-            ]
-        });
-
-        const computedBorderClasses = computed(() => {
-            return [
-                style.border
-            ]
-        });
-
-        const computedBorderStateClasses = computed(() => {
-            return [
-                style.borderState
-            ]
-        });
-
-        const computedTag = computed(() => (props.to ? 'nuxt-link' : props.href ? 'a' : 'button'));
-
-        onMounted(() => {
-            sizeValue.value = groupSize.value || props.size;
-        });
-
-        onBeforeUnmount(() => {
-            if (waveTimerId.value) {
-                clearTimeout(waveTimerId.value);
-            }
-        });
-
-        // const playWave = () => {
-        //     if (props.disabled || props.secondary) {
-        //         return;
-        //     }
-        //     if (waveTimerId.value) {
-        //         clearTimeout(waveTimerId.value);
-        //         waveActive.value = false;
-        //         waveTimerId.value = null;
-        //     }
-        //     nextTick(() => {
-        //         waveActive.value = true;
-        //         waveTimerId.value = setTimeout(() => {
-        //             waveActive.value = false;
-        //             waveTimerId.value = null;
-        //         }, 800);
-        //     })
-        // }
-
-        const handleClick = (e: MouseEvent): void => {
-            if (props.disabled) {
-                e.preventDefault();
-                return;
-            }
-            // playWave();
-            props.onClick(e);
-        };
-
-        return {
-            dropdownOpen,
-            computedClasses,
-            computedWaveClasses,
-            computedBorderClasses,
-            computedBorderStateClasses,
-            computedTag,
-            hasIconLeft,
-            hasIconRight,
-            handleClick,
-            waveTimerId,
-            iconLeft: style.iconLeft,
-            iconRight: style.iconRight,
-        }
-    }
-})
-</script>
+<template>
+    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled"
+               @click="handleClick" v-bind="$attrs">
+<!--        <div :class="computedWaveClasses" :key="waveTimerId"></div>-->
+        <div :class="computedBorderClasses"></div>
+        <div :class="computedBorderStateClasses"></div>
+        <span v-if="hasIconLeft" :class="iconLeft">
+            <slot name="icon-left"/>
+        </span>
+        <span>
+            <slot/>
+        </span>
+        <span v-if="hasIconRight" :class="iconRight">
+            <slot name="icon-right"/>
+        </span>
+    </component>
+</template>
+
+<script lang="ts">
+import type {PropType} from "vue";
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, toRef} from "vue";
+import type {Size, Variant} from "../../types/props";
+import * as style from "./style";
+import {BUTTON_GROUP_STATE} from "../buttongroup/symbol";
+import {FORM_STATE} from "../form/symbol";
+
+export default defineComponent({
+    name: "MButton",
+    props: {
+        type: {
+            type: String,
+            default: 'button',
+        },
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        secondary: {
+            type: Boolean,
+            default: false
+        },
+        to: {
+            type: [String, Object],
+            default: null
+        },
+        href: {
+            type: String,
+            default: '',
+        },
+        link: {
+            type: Boolean,
+            default: false
+        },
+        icon: {
+            type: Boolean,
+            default: false
+        },
+        onClick: {
+            type: Function as PropType<(e: MouseEvent) => void>,
+            default: () => {
+            }
+        }
+    },
+    setup(props, {slots}) {
+        const group = inject(BUTTON_GROUP_STATE, null);
+        const form = inject(FORM_STATE, null);
+        const state = inject("dropdown", null);
+
+        const sizeValue = ref<Size>('md');
+        const waveActive = ref<boolean>(false);
+        const waveTimerId = ref<number | null>(0);
+        const loading = toRef(props, 'loading');
+
+        const dropdownOpen = computed(() => {
+            // @ts-ignore
+            return state?.isOpen.value;
+        });
+
+        const groupSize = computed(() => {
+            return group?.size;
+        });
+
+        const size = computed<Size>(() => {
+            return groupSize.value || props.size;
+        })
+
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const computedClasses = computed(() => {
+            // TODO: We can use dropdownOpen (T or F) to style the open button :)
+            return [
+                style.base,
+                [style.size[size.value]],
+                style.variant[props.variant],
+                {
+                    [style.rounded]: props.rounded,
+                    [style.secondary[props.variant]]: props.secondary,
+                    [style.block]: props.block,
+                    [style.link[props.variant]]: props.link,
+                    [style.iconButton]: props.icon,
+                    [style.loading]: form?.loading || loading.value,
+                }
+            ]
+        });
+
+        const computedWaveClasses = computed(() => {
+            return [
+                style.wave,
+                {
+                    [style.waveActive]: waveActive.value
+                }
+            ]
+        });
+
+        const computedBorderClasses = computed(() => {
+            return [
+                style.border
+            ]
+        });
+
+        const computedBorderStateClasses = computed(() => {
+            return [
+                style.borderState
+            ]
+        });
+
+        const computedTag = computed(() => (props.to ? 'nuxt-link' : props.href ? 'a' : 'button'));
+
+        onMounted(() => {
+            sizeValue.value = groupSize.value || props.size;
+        });
+
+        onBeforeUnmount(() => {
+            if (waveTimerId.value) {
+                clearTimeout(waveTimerId.value);
+            }
+        });
+
+        // const playWave = () => {
+        //     if (props.disabled || props.secondary) {
+        //         return;
+        //     }
+        //     if (waveTimerId.value) {
+        //         clearTimeout(waveTimerId.value);
+        //         waveActive.value = false;
+        //         waveTimerId.value = null;
+        //     }
+        //     nextTick(() => {
+        //         waveActive.value = true;
+        //         waveTimerId.value = setTimeout(() => {
+        //             waveActive.value = false;
+        //             waveTimerId.value = null;
+        //         }, 800);
+        //     })
+        // }
+
+        const handleClick = (e: MouseEvent): void => {
+            if (props.disabled) {
+                e.preventDefault();
+                return;
+            }
+            // playWave();
+            props.onClick(e);
+        };
+
+        return {
+            dropdownOpen,
+            computedClasses,
+            computedWaveClasses,
+            computedBorderClasses,
+            computedBorderStateClasses,
+            computedTag,
+            hasIconLeft,
+            hasIconRight,
+            handleClick,
+            waveTimerId,
+            iconLeft: style.iconLeft,
+            iconRight: style.iconRight,
+        }
+    }
+})
+</script>
   

package/src/components/buttongroup/ButtonGroup.vue

@@ -1,36 +1,36 @@
-<template>
-    <div
-            :class="classes"
-    >
-        <slot/>
-    </div>
-</template>
-
-<script lang="ts">
-import type {Size} from '../../types/props';
-import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
-import * as style from "./style";
-import type {ButtonGroupState} from "./symbol";
-import {BUTTON_GROUP_STATE} from "./symbol";
-
-export default defineComponent({
-    name: "MButtonGroup",
-    props: {
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        }
-    },
-    setup(props) {
-        const state: ButtonGroupState = reactive({
-            size: toRef(props, 'size')
-        });
-
-        provide(BUTTON_GROUP_STATE, state);
-
-        return {
-            classes: style.base
-        }
-    }
-})
-</script>
+<template>
+    <div
+            :class="classes"
+    >
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import type {Size} from '../../types/props';
+import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from "./style";
+import type {ButtonGroupState} from "./symbol";
+import {BUTTON_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MButtonGroup",
+    props: {
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        }
+    },
+    setup(props) {
+        const state: ButtonGroupState = reactive({
+            size: toRef(props, 'size')
+        });
+
+        provide(BUTTON_GROUP_STATE, state);
+
+        return {
+            classes: style.base
+        }
+    }
+})
+</script>

package/src/components/buttongroup/symbol.ts

@@ -1,8 +1,8 @@
-import type {InjectionKey} from "vue";
-import type {Size} from "../../types/props";
-
-export interface ButtonGroupState {
-    size: Size
-}
-
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export interface ButtonGroupState {
+    size: Size
+}
+
 export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> = Symbol('BUTTON_GROUP_STATE');

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>