@teammodlr/ui-kit 2.1.41 → 2.1.44

package/src/components/modal/Modal.vue

@@ -1,310 +1,310 @@
-<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">
-                <!--                    <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"
-                        ref="target">
-                        <template v-if="loading">
-                            <slot name="loading"> Loading...</slot>
-                        </template>
-                        <template v-else>
-                            <div :class="style.sidebar" v-if="hasSidebar">
-                                <slot name="sidebar"></slot>
-                            </div>
-                            <div :class="style.content">
-                                <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>
-                                <div :class="style.body">
-                                    <slot name="body"></slot>
-                                    <slot></slot>
-                                </div>
-                                <div :class="style.footer" v-if="hasFooter">
-                                    <slot name="footer"></slot>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-                <!--                    </Transition>-->
-            </div>
-        </TransitionGroup>
-    </Teleport>
-</template>
-
-<script lang="ts">
-import type { CSSProperties, PropType } from 'vue';
-import {
-    computed,
-    defineComponent,
-    nextTick,
-    ref,
-    shallowRef,
-    watch
-} from 'vue';
-import * as style from './style';
-import { fade, modalScale } from '../../styles/transitions.css';
-import { useZIndex } from '../../composables/useZIndex';
-
-export default defineComponent({
-    name: 'MModal',
-    props: {
-        title: {
-            type: String,
-            default: ''
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        wrapClassName: {
-            type: String,
-            default: ''
-        },
-        // @deprecated
-        canClickOutside: {
-            type: Boolean,
-            default: true
-        },
-        outsideClose: {
-            type: Boolean,
-            default: true
-        },
-        onClose: {
-            type: Function as PropType<(e: MouseEvent | KeyboardEvent) => void>,
-            default: () => {}
-        },
-        zIndex: {
-            type: Number
-        },
-        showClose: {
-            type: Boolean,
-            default: true
-        },
-        width: {
-            type: [String, Number],
-            default: '520px'
-        },
-        height: [String, Number],
-        centered: {
-            type: Boolean,
-            default: true
-        }
-    },
-    emits: ['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());
-        const hasSidebar = computed(() => !!slots.sidebar);
-        const hasFooter = computed(() => !!slots.footer);
-        const transformOrigin = ref<string>();
-
-        const contentStyleRef = computed(() => {
-            const { width, height } = props;
-            const contentStyle: CSSProperties = {};
-
-            if (width !== undefined) {
-                contentStyle.width =
-                    typeof width === 'number' ? `${width}px` : width;
-            }
-
-            if (height !== undefined) {
-                contentStyle.height =
-                    typeof height === 'number' ? `${height}px` : height;
-            }
-
-            if (transformOrigin.value) {
-                contentStyle.transformOrigin = transformOrigin.value;
-            }
-
-            return contentStyle;
-        });
-
-        const computedWrapperClasses = computed(() => {
-            return [
-                style.wrapper,
-                {
-                    [style.centeredWrapper]: props.centered
-                },
-                props.wrapClassName
-            ];
-        });
-
-        const computedModalClasses = computed(() => {
-            return [
-                style.modal,
-                {
-                    [style.centeredModal]: props.centered
-                }
-            ];
-        });
-
-        const computedContainerClasses = computed(() => {
-            return [
-                style.container,
-                {
-                    [style.hasSidebar]: hasSidebar.value
-                }
-            ];
-        });
-
-        const computedWrapperStyles = computed(() => {
-            return {
-                zIndex: zIndex.value
-            };
-        });
-
-        const contentClickRef = shallowRef(false);
-        const contentTimeoutRef = shallowRef<any>();
-
-        const onContentMouseDown = () => {
-            clearTimeout(contentTimeoutRef.value);
-            contentClickRef.value = true;
-        };
-
-        const onContentMouseUp = () => {
-            contentTimeoutRef.value = setTimeout(() => {
-                contentClickRef.value = false;
-            }, 0);
-        };
-
-        const onOutsideClick = (e: MouseEvent) => {
-            if (!(props.canClickOutside || props.outsideClose)) {
-                return null;
-            }
-
-            if (contentClickRef.value) {
-                contentClickRef.value = false;
-            } else if (wrapperRef.value === e.target) {
-                close(e);
-            }
-        };
-
-        const onWrapperKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') {
-                e.stopPropagation();
-                close(e);
-                return;
-            }
-        };
-
-        const close = (e: MouseEvent | KeyboardEvent) => {
-            props.onClose?.(e);
-            ownerScrollbarClose();
-            isOpen.value = false;
-        };
-
-        const open = () => {
-            ownerScrollbarOpen();
-
-            isOpen.value = true;
-        };
-
-        function ownerScrollbarOpen() {
-            let ownerWindow = window;
-            let documentElement = ownerWindow.document.documentElement;
-
-            let scrollbarWidthBefore =
-                ownerWindow.innerWidth - documentElement.clientWidth;
-            documentElement.style.overflow = 'hidden';
-
-            if (scrollbarWidthBefore > 0) {
-                let scrollbarWidthAfter =
-                    documentElement.clientWidth - documentElement.offsetWidth;
-                let scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter;
-                documentElement.style.paddingRight = `${scrollbarWidth}px`;
-            }
-        }
-
-        function ownerScrollbarClose() {
-            setTimeout(() => {
-                let documentElement = window.document.documentElement;
-
-                documentElement.style.overflow = 'visible';
-                documentElement.style.paddingRight = '0px';
-            }, 250);
-        }
-
-        // watch(
-        //     () => isOpen.value,
-        //     value => {
-        //         if (value) {
-        //             zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
-        //             emit('open');
-        //             nextTick(() => {
-        //                 // activate()
-        //             });
-        //         } else {
-        //             // deactivate()
-        //         }
-        //     }
-        // );
-
-        return {
-            close,
-            onOutsideClick,
-            open,
-            onContentMouseDown,
-            onContentMouseUp,
-            onWrapperKeyDown,
-            target,
-            style,
-            isOpen,
-            computedWrapperStyles,
-            computedModalClasses,
-            computedContainerClasses,
-            computedWrapperClasses,
-            zIndex,
-            modalScale,
-            fade,
-            contentStyleRef,
-            wrapperRef,
-            hasSidebar,
-            hasFooter,
-            nextZIndex
-        };
-    }
-});
-</script>
+<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">
+                <!--                    <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"
+                        ref="target">
+                        <template v-if="loading">
+                            <slot name="loading"> Loading...</slot>
+                        </template>
+                        <template v-else>
+                            <div :class="style.sidebar" v-if="hasSidebar">
+                                <slot name="sidebar"></slot>
+                            </div>
+                            <div :class="style.content">
+                                <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>
+                                <div :class="style.body">
+                                    <slot name="body"></slot>
+                                    <slot></slot>
+                                </div>
+                                <div :class="style.footer" v-if="hasFooter">
+                                    <slot name="footer"></slot>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+                <!--                    </Transition>-->
+            </div>
+        </TransitionGroup>
+    </Teleport>
+</template>
+
+<script lang="ts">
+import type { CSSProperties, PropType } from 'vue';
+import {
+    computed,
+    defineComponent,
+    nextTick,
+    ref,
+    shallowRef,
+    watch
+} from 'vue';
+import * as style from './style';
+import { fade, modalScale } from '../../styles/transitions.css';
+import { useZIndex } from '../../composables/useZIndex';
+
+export default defineComponent({
+    name: 'MModal',
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        wrapClassName: {
+            type: String,
+            default: ''
+        },
+        // @deprecated
+        canClickOutside: {
+            type: Boolean,
+            default: true
+        },
+        outsideClose: {
+            type: Boolean,
+            default: true
+        },
+        onClose: {
+            type: Function as PropType<(e: MouseEvent | KeyboardEvent) => void>,
+            default: () => {}
+        },
+        zIndex: {
+            type: Number
+        },
+        showClose: {
+            type: Boolean,
+            default: true
+        },
+        width: {
+            type: [String, Number],
+            default: '520px'
+        },
+        height: [String, Number],
+        centered: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: ['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());
+        const hasSidebar = computed(() => !!slots.sidebar);
+        const hasFooter = computed(() => !!slots.footer);
+        const transformOrigin = ref<string>();
+
+        const contentStyleRef = computed(() => {
+            const { width, height } = props;
+            const contentStyle: CSSProperties = {};
+
+            if (width !== undefined) {
+                contentStyle.width =
+                    typeof width === 'number' ? `${width}px` : width;
+            }
+
+            if (height !== undefined) {
+                contentStyle.height =
+                    typeof height === 'number' ? `${height}px` : height;
+            }
+
+            if (transformOrigin.value) {
+                contentStyle.transformOrigin = transformOrigin.value;
+            }
+
+            return contentStyle;
+        });
+
+        const computedWrapperClasses = computed(() => {
+            return [
+                style.wrapper,
+                {
+                    [style.centeredWrapper]: props.centered
+                },
+                props.wrapClassName
+            ];
+        });
+
+        const computedModalClasses = computed(() => {
+            return [
+                style.modal,
+                {
+                    [style.centeredModal]: props.centered
+                }
+            ];
+        });
+
+        const computedContainerClasses = computed(() => {
+            return [
+                style.container,
+                {
+                    [style.hasSidebar]: hasSidebar.value
+                }
+            ];
+        });
+
+        const computedWrapperStyles = computed(() => {
+            return {
+                zIndex: zIndex.value
+            };
+        });
+
+        const contentClickRef = shallowRef(false);
+        const contentTimeoutRef = shallowRef<any>();
+
+        const onContentMouseDown = () => {
+            clearTimeout(contentTimeoutRef.value);
+            contentClickRef.value = true;
+        };
+
+        const onContentMouseUp = () => {
+            contentTimeoutRef.value = setTimeout(() => {
+                contentClickRef.value = false;
+            }, 0);
+        };
+
+        const onOutsideClick = (e: MouseEvent) => {
+            if (!(props.canClickOutside || props.outsideClose)) {
+                return null;
+            }
+
+            if (contentClickRef.value) {
+                contentClickRef.value = false;
+            } else if (wrapperRef.value === e.target) {
+                close(e);
+            }
+        };
+
+        const onWrapperKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                close(e);
+                return;
+            }
+        };
+
+        const close = (e: MouseEvent | KeyboardEvent) => {
+            props.onClose?.(e);
+            ownerScrollbarClose();
+            isOpen.value = false;
+        };
+
+        const open = () => {
+            ownerScrollbarOpen();
+
+            isOpen.value = true;
+        };
+
+        function ownerScrollbarOpen() {
+            let ownerWindow = window;
+            let documentElement = ownerWindow.document.documentElement;
+
+            let scrollbarWidthBefore =
+                ownerWindow.innerWidth - documentElement.clientWidth;
+            documentElement.style.overflow = 'hidden';
+
+            if (scrollbarWidthBefore > 0) {
+                let scrollbarWidthAfter =
+                    documentElement.clientWidth - documentElement.offsetWidth;
+                let scrollbarWidth = scrollbarWidthBefore - scrollbarWidthAfter;
+                documentElement.style.paddingRight = `${scrollbarWidth}px`;
+            }
+        }
+
+        function ownerScrollbarClose() {
+            setTimeout(() => {
+                let documentElement = window.document.documentElement;
+
+                documentElement.style.overflow = 'visible';
+                documentElement.style.paddingRight = '0px';
+            }, 250);
+        }
+
+        // watch(
+        //     () => isOpen.value,
+        //     value => {
+        //         if (value) {
+        //             zIndex.value = props.zIndex ? zIndex.value++ : nextZIndex();
+        //             emit('open');
+        //             nextTick(() => {
+        //                 // activate()
+        //             });
+        //         } else {
+        //             // deactivate()
+        //         }
+        //     }
+        // );
+
+        return {
+            close,
+            onOutsideClick,
+            open,
+            onContentMouseDown,
+            onContentMouseUp,
+            onWrapperKeyDown,
+            target,
+            style,
+            isOpen,
+            computedWrapperStyles,
+            computedModalClasses,
+            computedContainerClasses,
+            computedWrapperClasses,
+            zIndex,
+            modalScale,
+            fade,
+            contentStyleRef,
+            wrapperRef,
+            hasSidebar,
+            hasFooter,
+            nextZIndex
+        };
+    }
+});
+</script>