@teammodlr/ui-kit 2.3.18 → 2.3.21

package/package.json

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

package/src/components/modal/Modal.vue

@@ -1,39 +1,18 @@
 <template>
     <Teleport :to="'body'">
-        <TransitionGroup
-            type="animation"
-            :enter-active-class="fade.enterActive"
-            :leave-active-class="fade.leaveActive"
-            :enter-from-class="fade.enterFrom"
-            :leave-to-class="fade.leaveTo">
-            <div
-                :class="style.mask"
-                :style="{ zIndex: zIndex }"
-                v-if="isOpen"></div>
-            <div
-                tabIndex="-1"
-                v-if="isOpen"
-                @keydown="onWrapperKeyDown"
-                ref="wrapperRef"
-                role="dialog"
-                :class="computedWrapperClasses"
-                :style="computedWrapperStyles"
-                @click="onOutsideClick">
+        <TransitionGroup type="animation" :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
+            :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
+            <div :class="style.mask" :style="{ zIndex: zIndex }" v-if="isOpen"></div>
+            <div tabIndex="-1" v-if="isOpen" @keydown="onWrapperKeyDown" ref="wrapperRef" role="dialog"
+                :class="computedWrapperClasses" :style="computedWrapperStyles" @click="onOutsideClick">
                 <!--                    <Transition-->
                 <!--                        type="animation"-->
                 <!--                        :enter-active-class="modalScale.enterActive"-->
                 <!--                        :leave-active-class="modalScale.leaveActive"-->
                 <!--                        :enter-from-class="modalScale.enterFrom"-->
                 <!--                        :leave-to-class="modalScale.leaveTo">-->
-                <div
-                    :class="computedModalClasses"
-                    role="document"
-                    v-bind="$attrs"
-                    :style="contentStyleRef">
-                    <div
-                        :class="computedContainerClasses"
-                        @mousedown="onContentMouseDown"
-                        @mouseup="onContentMouseUp"
+                <div :class="computedModalClasses" role="document" v-bind="$attrs" :style="contentStyleRef">
+                    <div :class="computedContainerClasses" @mousedown="onContentMouseDown" @mouseup="onContentMouseUp"
                         ref="target">
                         <template v-if="loading">
                             <slot name="loading"> Loading...</slot>
@@ -43,17 +22,12 @@
                                 <slot name="sidebar"></slot>
                             </div>
                             <div :class="style.content">
-                                <div
-                                    v-if="title || showClose"
-                                    :class="style.header">
+                                <div v-if="title || showClose" :class="style.header">
                                     <div :class="style.title" v-if="title">
                                         <div>{{ title }}</div>
                                     </div>
                                 </div>
-                                <button
-                                    v-if="showClose"
-                                    :class="style.close"
-                                    @click="close"></button>
+                                <button v-if="showClose" :class="style.close" @click="close"></button>
                                 <div :class="style.body">
                                     <slot name="body"></slot>
                                     <slot></slot>
@@ -88,6 +62,10 @@ import { useZIndex } from '../../composables/useZIndex';
 export default defineComponent({
     name: 'MModal',
     props: {
+        open: {
+            type: Boolean,
+            default: undefined
+        },
         title: {
             type: String,
             default: ''
@@ -110,8 +88,8 @@ export default defineComponent({
             default: true
         },
         onClose: {
-            type: Function as PropType<(e: MouseEvent | KeyboardEvent) => void>,
-            default: () => {}
+            type: Function as PropType<(e: MouseEvent | KeyboardEvent | undefined) => void>,
+            default: () => { }
         },
         zIndex: {
             type: Number
@@ -130,10 +108,10 @@ export default defineComponent({
             default: true
         }
     },
-    emits: ['open'],
+    emits: ['open', 'update:open'],
     setup(props, { emit, slots }) {
         const { nextZIndex } = useZIndex();
-        const isOpen = ref(false);
+
         const target = ref();
         const wrapperRef = shallowRef<HTMLDivElement>();
         const zIndex = ref(props.zIndex ?? nextZIndex());
@@ -141,6 +119,26 @@ export default defineComponent({
         const hasFooter = computed(() => !!slots.footer);
         const transformOrigin = ref<string>();
 
+        const internalOpen = ref(false);
+
+        const isOpen = computed({
+            get: () => {
+                // If open prop is explicitly provided (v-model), use it
+                if (props.open !== undefined) {
+                    return props.open;
+                }
+
+                return internalOpen.value;
+            },
+            set: (value: boolean) => {
+                if (props.open !== undefined) {
+                    emit('update:open', value);
+                } else {
+                    internalOpen.value = value;
+                }
+            }
+        });
+
         const contentStyleRef = computed(() => {
             const { width, height } = props;
             const contentStyle: CSSProperties = {};
@@ -230,7 +228,7 @@ export default defineComponent({
             }
         };
 
-        const close = (e: MouseEvent | KeyboardEvent) => {
+        const close = (e: MouseEvent | KeyboardEvent | undefined) => {
             props.onClose?.(e);
             ownerScrollbarClose();
             isOpen.value = false;
@@ -267,20 +265,21 @@ export default defineComponent({
             }, 250);
         }
 
-        // watch(
-        //     () => isOpen.value,
-        //     value => {
-        //         if (value) {
-        //             zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
-        //             emit('open');
-        //             nextTick(() => {
-        //                 // activate()
-        //             });
-        //         } else {
-        //             // deactivate()
-        //         }
-        //     }
-        // );
+        watch(
+            () => isOpen.value,
+            (newValue, oldValue) => {
+                if (newValue && !oldValue) {
+                    // Opening
+                    ownerScrollbarOpen();
+                    zIndex.value = props.zIndex ?? nextZIndex();
+                    emit('open');
+                } else if (!newValue && oldValue) {
+                    // Closing
+                    ownerScrollbarClose();
+                }
+            },
+            { immediate: true }
+        );
 
         return {
             close,

package/src/components/modal/examples/index.stories.ts

@@ -1,5 +1,5 @@
 import MModal from '../Modal.vue';
-import { MModalBasic, MModalForm, MModalSidebar } from './index';
+import { MModalBasic, MModalForm, MModalSidebar, MModalOpenProp } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -14,3 +14,4 @@ export default {
 export const Basic = createStory(MModalBasic);
 export const ModalForm = createStory(MModalForm);
 export const ModalSidebar = createStory(MModalSidebar);
+export const OpenProp = createStory(MModalOpenProp);

package/src/components/modal/examples/index.ts

@@ -1,3 +1,4 @@
 export { default as MModalBasic } from './basic.vue';
 export { default as MModalForm } from './modal-form.vue';
 export { default as MModalSidebar } from './sidebar.vue';
+export { default as MModalOpenProp } from './open-prop.vue'

package/src/components/modal/examples/open-prop.vue

@@ -0,0 +1,50 @@
+<template>
+    <MModal
+        v-model:open="isOpen"
+        ref="modal"
+        title="I am a modal"
+        class="fine-me"
+        wrap-class-name="hello-world">
+        <template #body>
+            <div>
+                <MInput />
+            </div>
+        </template>
+        <template #footer>
+            <div style="display: flex; flex-grow: 1; justify-content: end">
+                <MButton variant="primary" @click="isOpen = false">
+                    Okay
+                </MButton>
+                <MButton style="margin-left: 8px" @click="isOpen = false">
+                    Cancel
+                </MButton>
+            </div>
+        </template>
+    </MModal>
+
+    <div style="position: relative; width: 100%; height: 1000px">
+        <button
+            @click="open"
+            style="
+                position: absolute;
+                width: 100px;
+                height: 50px;
+                top: 0;
+                left: 0;
+            ">
+            Top Left
+        </button>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false)
+const modal = ref<any>(null)
+
+const open = (event: MouseEvent) => {
+    isOpen.value = true
+};
+</script>

package/src/components/select/Select.vue

@@ -38,7 +38,7 @@
                 <Transition :enter-active-class="scale.enterActive" :leave-active-class="scale.leaveActive"
                     :enter-from-class="scale.enterFrom" :leave-to-class="scale.leaveTo">
                     <div :class="style.menu" v-if="isOpen" ref="popper" :style="computedConsistentWidth"
-                        :aria-hidden="isOpen ? 'false' : 'true'">
+                        :aria-hidden="isOpen ? 'false' : 'true'" :data-element="`select-menu-overlay-${id}`">
                         <div v-if="searchable || (multiple && selectAll)" :class="style.search">
                             <div v-if="multiple && selectAll" :class="style.checkAll">
                                 <button role="button" type="button" :class="{
@@ -61,7 +61,7 @@
                                 </button>
                             </div>
                             <input v-if="searchable" type="text" ref="searchRef" v-model="search" placeholder="Search"
-                                :class="style.searchInput" />
+                                :class="style.searchInput" :data-input="`select-menu-search-${id}`" />
                         </div>
                         <div :class="style.options">
                             <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef" :class="{
@@ -69,7 +69,9 @@
                                 [style.optionSelected]: option.active,
                                 [style.optionFocused]:
                                     selectedIndex === index
-                            }" @click.prevent="option.onClick" @hover="selectedIndex = index">
+                            }" @click.prevent="option.onClick" @hover="selectedIndex = index"
+                                :data-element="`select-menu-option-${id}-${option.value}`"
+                            >
                                 <span :class="style.optionIcon">
                                     <svg v-if="option.active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                         fill="currentColor" aria-hidden="true">
@@ -195,6 +197,10 @@ export default defineComponent({
         zIndex: {
             type: Number
         },
+        showDataOptions: {
+            type: Boolean,
+            default: true
+        },
         'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue> | undefined>,
         onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue> | undefined>,
     },