@eturnity/eturnity_reusable_components 7.4.2 → 7.4.3-EPDM-9694.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.2",
+  "version": "7.4.3-EPDM-9694.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/select/index.vue

@@ -23,7 +23,7 @@
           v-if="infoTextMessage"
           :text="infoTextMessage"
           borderColor="#ccc"
-          :size="fontSize ? fontSize : '16px'"
+          :size="infoTextSize"
           :alignText="infoTextAlign"
         />
       </label-wrapper>
@@ -394,6 +394,10 @@ export default {
       required: false,
       default: true
     },
+    infoTextSize: {
+      required: false,
+      default: '14px'
+    },
     dataId: {
       type: String,
       default: ''

package/src/components/modals/modal/index.vue

@@ -3,7 +3,6 @@
     :position="position"
     :isOpen="isOpen"
     :class="{ visible: isOpen, hidden: !isOpen }"
-    @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
     <modal-container @click.stop>
@@ -21,10 +20,13 @@
 </template>
 
 <script>
+// Rules: (as defined in https://e-turnity.atlassian.net/browse/EPDM-9694)
+// 1. On clicking the “escape” key, close the modal onCloseModal()
+// 2. Always prevent outside close
 // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
 // This is a more flexible modal box, where the parent can decide how the body of the modal looks
 // To use:
-// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
+// <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :isLoading="true" :hideClose="true">
 //   <div>Data....</div>
 // </modal>
 
@@ -118,10 +120,6 @@ export default {
       required: true,
       default: false
     },
-    preventOutsideClose: {
-      required: false,
-      default: false
-    },
     isLoading: {
       required: false,
       default: false
@@ -139,20 +137,27 @@ export default {
       default: 'fixed'
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeyDown)
+  },
   methods: {
     onCloseModal() {
       this.$emit('on-close')
     },
-    onOutsideClose() {
-      // If true, then only allow closing to come from clicking the X or wherever the onCloseModal is called
-      if (!this.preventOutsideClose) {
-        this.$emit('on-close')
+    handleKeyDown({ key }) {
+      if (key === 'Escape') {
+        this.onCloseModal()
       }
     }
   },
   watch: {
-    isOpen: function (newVal) {
-      document.body.style.overflow = newVal ? 'hidden' : ''
+    isOpen: function (isOpen) {
+      document.body.style.overflow = isOpen ? 'hidden' : ''
+      if (isOpen) {
+        window.addEventListener('keydown', this.handleKeyDown)
+      } else {
+        window.removeEventListener('keydown', this.handleKeyDown)
+      }
     }
   }
 }