@eturnity/eturnity_reusable_components 7.4.4-EPDM-9606 → 7.4.4-EPDM-7260.3

package/src/components/label/index.vue

@@ -0,0 +1,104 @@
+<template>
+      <label-wrapper
+        :labelAlign="labelAlign">
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          >
+          <slot></slot>
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          :size="fontSize ? fontSize : '16px'"
+          :alignArrow="infoTextAlign"
+        />
+      </label-wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../infoText'
+
+
+const labelAttrs = { fontSize: String, labelFontColor: String }
+const InputLabel = styled('div', labelAttrs)`
+  color: ${(props) =>
+    props.theme.colors[props.labelFontColor]
+      ? props.theme.colors[props.labelFontColor]
+      : props.labelFontColor
+      ? props.labelFontColor
+      : props.theme.colors.eturnityGrey};
+
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-weight: 700;
+`
+const optionalLabel = styled.span`
+  font-weight: 300;
+`
+
+const LabelWrapper = styled('div',{labelAlign:String})`
+  ${props=>props.labelAlign=='horizontal'?
+    'display: inline-grid;':
+    'display: grid;'
+  }
+  ${props=>props.labelAlign=='horizontal'?
+    'margin-right: 10px;':
+    'margin-bottom: 8px;'
+  }
+  vertical-align: center;
+  grid-template-columns: auto auto;
+  grid-gap: 12px;
+  align-items: center;
+  justify-content: start;
+`
+export default {
+  // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
+  // To use:
+  // <label-text
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  // />
+  name: 'input-text',
+  components: {
+    InfoText,
+    InputLabel,
+    LabelWrapper,
+    optionalLabel
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
+  },
+  props: {
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    labelOptional: {
+      required: false,
+      default: false
+    },
+    fontSize: {
+      required: false,
+      default: null
+    },
+    labelFontColor: {
+      required: false,
+      default: 'black'
+    },
+    labelAlign: {
+      required: false,
+      default: 'vertical'
+    },
+  },
+}
+</script>

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>
@@ -27,7 +26,7 @@
 // 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>
 
@@ -86,6 +85,22 @@ const ModalContainer = styled.div`
   min-width: 100px;
   min-height: 100px;
 
+  ::-webkit-scrollbar {
+    width: 0.3em;
+    height: 100%;
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
+  /* Make scrollbar visible when needed */
+  ::-webkit-scrollbar-thumb {
+    background-color: ${(props) => props.theme.colors.grey3};
+  }
+
+  /* Make scrollbar track visible when needed */
+  ::-webkit-scrollbar-track {
+    background-color: ${(props) => props.theme.colors.grey5};
+  }
+
   .close {
     position: absolute;
     right: 20px;
@@ -121,10 +136,6 @@ export default {
       required: true,
       default: false
     },
-    preventOutsideClose: {
-      required: false,
-      default: false
-    },
     isLoading: {
       required: false,
       default: false
@@ -142,20 +153,30 @@ 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: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : ''
+        if (isOpen) {
+          window.addEventListener('keydown', this.handleKeyDown)
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown)
+        }
+      }
     }
   }
 }