Migrate more core components

resources/assets/scripts/components/core/Modal.ts

@@ -0,0 +1,46 @@
+import Vue from 'vue';
+import Icon from "./Icon";
+
+export default Vue.component('modal', {
+    components: {
+        Icon,
+    },
+
+    props: {
+        modalName: { type: String, default: 'modal' },
+        show: { type: Boolean, default: false },
+        closeOnEsc: { type: Boolean, default: true },
+    },
+
+    mounted: function () {
+        if (this.$props.closeOnEsc) {
+            document.addEventListener('keydown', e => {
+                if (this.show && e.key === 'Escape') {
+                    this.close();
+                }
+            })
+        }
+    },
+
+    methods: {
+        close: function () {
+            this.$emit('close', this.$props.modalName);
+        }
+    },
+
+    template: `
+        <transition name="modal">
+            <div class="modal-mask" v-show="show" v-on:click="close">
+                <div class="modal-container" @click.stop>
+                    <icon name="x"
+                          class="absolute pin-r pin-t m-2 text-grey cursor-pointer"
+                          aria-label="Close modal"
+                          role="button"
+                          v-on:click="close"
+                    />
+                    <slot/>
+                </div>
+            </div>
+        </transition>
+    `
+})