@signal24/vue-foundation 3.8.1 → 4.1.0

package/src/components/modal.vue

@@ -1,15 +1,10 @@
 <template>
     <Teleport to="#vf-modal-target">
-        <div :id="id" class="vf-overlay vf-modal-wrap" :class="class">
-            <form
-                action="."
-                class="vf-modal"
-                :class="{ scrolls: $isPropTruthy(this.scrolls) }"
-                @submit.prevent="$emit('formSubmit')"
-            >
+        <div :id="id" class="vf-overlay vf-modal-wrap" :class="props.class" ref="overlay">
+            <form action="." class="vf-modal" :class="{ scrolls }" @submit.prevent="$emit('formSubmit')">
                 <div v-if="$slots.header" class="vf-modal-header">
                     <slot name="header" />
-                    <i v-if="$isPropTruthy(this.closeX)" class="close" @click="$parent.$dismiss()"></i>
+                    <i v-if="props.closeX" class="close" @click="closeParent"></i>
                 </div>
                 <div class="vf-modal-content">
                     <slot />
@@ -22,137 +17,57 @@
     </Teleport>
 </template>
 
-<script>
-export default {
-    props: ['id', 'closeOnMaskClick', 'scrolls', 'closeX', 'class'],
-    emits: ['formSubmit'],
-
-    beforeCreate() {
-        const targetEl = document.getElementById('vf-modal-target') ?? document.createElement('div');
-        targetEl.id = 'vf-modal-target';
-        targetEl.removeAttribute('inert');
-        document.body.appendChild(targetEl);
-    },
-
-    mounted() {
-        window.addEventListener('keydown', this.handleEscapeKey);
-        document.body.classList.add('vf-modal-open');
-
-        if (this.$isPropTruthy(this.closeOnMaskClick)) {
-            this.$el.addEventListener('click', e => {
-                if (e.target == this.$el) this.$parent.$dismiss();
-            });
-        }
-    },
-
-    unmounted() {
-        window.removeEventListener('keydown', this.handleEscapeKey);
-
-        let areOtherModalsOpen = document.body.querySelectorAll('.vf-modal').length > 0;
-        areOtherModalsOpen || document.body.classList.remove('vf-modal-open');
-    },
-
-    methods: {
-        handleEscapeKey(e) {
-            if (e.key === 'Esc' || e.key === 'Escape') {
-                const modalWraps = document.querySelectorAll('.vf-modal-wrap');
-                if (modalWraps[modalWraps.length - 1] === this.$el) {
-                    this.$parent.$dismiss();
-                }
-            }
-        }
-    }
-};
-
-import app from '../app';
-import { markRaw } from 'vue';
-import cloneDeep from 'lodash/cloneDeep';
-
-let modalConfigs = {};
-
-function bootModal(modalId) {
-    const config = modalConfigs[modalId];
-
-    this.$modalOpener = config.opener;
-    this.$modalResult = undefined;
-
-    this.$options.storeParent = this.$modalOpener;
-
-    let originalDataFn = this.$options.data;
-    this.$options.data = function () {
-        const injectedData = config.injectedData || {};
-        const keepOriginalKeys = this.$options.keepOriginal || [];
-        let data = originalDataFn ? originalDataFn.apply(this) : {};
-
-        for (let key in injectedData) {
-            if (!keepOriginalKeys.includes(key)) {
-                if (
-                    injectedData[key] !== null &&
-                    typeof injectedData[key] == 'object' &&
-                    injectedData[key].constructor === Object
-                ) {
-                    data[key] = cloneDeep(injectedData[key]);
-                } else {
-                    data[key] = injectedData[key];
-                }
-            }
-        }
+<script lang="ts" setup>
+import { defineProps, getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue';
 
-        return data;
-    };
+import { removeModalInjectionByInternalInstance } from './modal-container';
 
-    this.$dismiss = (...args) => {
-        return new Promise(resolve => {
-            // setTimeout allows the form submission handler to run before the form is unmounted,
-            // in the event the submit button has a click handler. otherwise, the console will
-            // report "Form submission canceled because the form is not connected."
-            setTimeout(() => {
-                delete modalConfigs[modalId];
+const props = defineProps<{
+    id?: string;
+    closeOnMaskClick?: boolean;
+    scrolls?: boolean;
+    closeX?: boolean;
+    class?: string;
+}>();
 
-                let rootInjections = app.vm.store.rootInjections;
+defineEmits(['formSubmit']);
 
-                const rootInjection = rootInjections.find(injection => injection.__modalId === modalId);
-                if (!rootInjection) return;
+const overlay = ref<HTMLElement>();
+
+onMounted(() => {
+    window.addEventListener('keydown', handleEscapeKey);
+    document.body.classList.add('vf-modal-open');
+
+    if (props.closeOnMaskClick) {
+        overlay.value?.addEventListener('click', handleOverlayClick);
+    }
+});
 
-                rootInjections.remove(rootInjection);
-                this.$nextTick(() => {
-                    config.resolve.apply(this, args[0] !== undefined ? args : this.$modalResult);
-                    resolve();
-                });
-            }, 0);
-        });
-    };
+onBeforeUnmount(() => {
+    let areOtherModalsOpen = document.body.querySelectorAll('.vf-modal').length > 0;
+    areOtherModalsOpen || document.body.classList.remove('vf-modal-open');
+});
 
-    config.instanceCreationCallback && config.instanceCreationCallback(this);
+function handleOverlayClick(e: MouseEvent) {
+    if (e.target == overlay.value) {
+        closeParent();
+    }
 }
 
-app.mixin({
-    beforeCreate() {
-        const modalId = this.$options.__modalId || this.$options.__file;
-        if (modalId && modalConfigs[modalId]) bootModal.call(this, modalId);
+function handleEscapeKey(e: KeyboardEvent) {
+    if (e.key === 'Esc' || e.key === 'Escape') {
+        const modalWraps = document.querySelectorAll('.vf-modal-wrap');
+        // make sure we're the topmost modal
+        if (modalWraps[modalWraps.length - 1] === overlay.value) {
+            closeParent();
+        }
     }
-});
+}
 
-app.config.globalProperties.$modal = function (classDef, injectedData, instanceCreationCallback) {
-    return new Promise((resolve, reject) => {
-        const modalId = classDef.__modalId || classDef.__file || Math.random().toString(36).substring(2, 10);
-        classDef.__modalId = modalId;
-
-        modalConfigs[modalId] = {
-            opener: this,
-            injectedData,
-            instanceCreationCallback,
-            resolve
-        };
-
-        this.$nextTick(() => {
-            app.vm.store.rootInjections.push(markRaw(classDef));
-        });
-    });
-};
-
-// TODO: see about a injecting a root modal container & HMR inside it
-// modals, on render, can hot move themselves to body end
+function closeParent() {
+    const instance = getCurrentInstance();
+    removeModalInjectionByInternalInstance(instance!);
+}
 </script>
 
 <style lang="scss">