Initial commit

2020-06-15 10:58:47 +08:00
commit 4f1dfe7564
8590 changed files with 1516878 additions and 0 deletions
@@ -0,0 +1,77 @@
+<template>
+  <modal :name="name" width="100%" height="100%" @closed="close">
+    <button class="modal__button modal__button--close" @click="close" aria-label="Close"></button>
+    <slot />
+  </modal>
+</template>
+
+<script>
+import VModal from 'vue-js-modal';
+
+export default {
+  name: 'Wizard',
+  components: {
+    VModal
+  },
+  mounted () {
+    this.setup();
+  },
+  beforeDestroy () {
+    this.close();
+  },
+  props: {
+    name: {
+      type: String,
+      default: 'modal'
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    setup () {
+      if (this.isOpen) {
+        this.open();
+      } else {
+        this.close();
+      }
+    },
+    open () {
+      this.$modal.show(this.name);
+      document.body.classList.add('u-overflow-hidden');
+    },
+    close () {
+      document.body.classList.remove('u-overflow-hidden');
+      this.$modal.hide(this.name);
+      this.$emit('closeModal');
+    }
+  },
+  watch: {
+    isOpen () {
+      this.setup();
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import 'new-dashboard/styles/variables';
+
+.modal {
+  &__button {
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    padding: 2em;
+
+    &--close {
+      right: 0;
+      background-image: url('../assets/icons/common/close.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 16px;
+    }
+  }
+}
+</style>