@eturnity/eturnity_reusable_components 7.8.1 → 7.8.2-EPDM-7779.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.8.1",
+  "version": "7.8.2-EPDM-7779.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -63,7 +63,7 @@
             @input-change="searchChange"
             @click.native.stop
           />
-          <selector v-else>
+          <selector :selectWidth="selectorWidth" v-else>
             <slot name="selector" :selectedValue="selectedValue"></slot>
           </selector>
           <Caret @click.stop="toggleCaretDropdown">
@@ -142,20 +142,26 @@ import InfoText from '../../infoText'
 import icon from '../../icon'
 import inputText from '../inputText'
 
+const CARET_WIDTH = 30
+const ELLIPSIS_WIDTH = 16
+
 const Caret = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 30px;
-  min-width: 30px;
+  width: ${CARET_WIDTH}px;
+  min-width: ${CARET_WIDTH}px;
   height: 100%;
   align-items: stretch
   cursor: pointer;
   margin-left: auto;
 `
 
-const Selector = styled.div`
-  width: 100%;
+const Selector = styled('div', { selectWidth: String })`
+  max-width: ${(props) => props.selectWidth};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `
 
 const labelAttrs = { fontSize: String, fontColor: String }
@@ -164,7 +170,7 @@ const InputLabel = styled('div', labelAttrs)`
     props.theme.colors[props.fontColor]
       ? props.theme.colors[props.fontColor]
       : props.fontColor};
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+  font-size: ${(props) => props.fontSize};
   font-weight: 700;
 `
 const optionalLabel = styled.span`
@@ -299,7 +305,7 @@ export default {
     },
     fontSize: {
       required: false,
-      default: null
+      default: '13px'
     },
     label: {
       required: false
@@ -546,26 +552,27 @@ export default {
           this.$refs.dropdown.$el.scrollTop = topPos
         }
       }
+    },
+    clearSearch() {
+      this.textSearch = ''
     }
   },
   computed: {
     optionLength() {
       if (this.isDropdownOpen) {
-        // this filterRef is needed to check for the # of children on Filter dropdowns
-        const filterRef =
-          this.$refs.dropdown.$children &&
-          this.$refs.dropdown.$children.length > 1
-            ? this.$refs.dropdown.$children
-            : this.$refs.dropdown.$children[0].$children
-            ? this.$refs.dropdown.$children[0].$children
-            : this.$refs.dropdown.$children
-        return filterRef.length
-      } else {
-        return 0
+        return this.$refs.dropdown.$el.childElementCount
       }
+
+      return 0
     },
     isSearchBarVisible() {
-      return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
+      // Removed the optionLength condition, because if there were no result/options when we searched, we still need to show the search input
+      return this.isSearchable && this.isDropdownOpen
+    },
+    selectorWidth() {
+      const currentWidth = this.selectWidth ? this.selectWidth : '100%'
+
+      return `calc(${currentWidth} - ${CARET_WIDTH + ELLIPSIS_WIDTH}px)`
     }
   },
   watch: {

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

@@ -6,7 +6,7 @@
     @click.native="onOutsideClose()"
     :backdrop="backdrop"
   >
-    <modal-container @click.stop>
+    <modal-container @click="onClickModalContainer">
       <spinner v-if="isLoading" size="50px" :limitedToModal="true" />
       <content-container :visible="!isLoading">
         <slot />
@@ -27,7 +27,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')" :preventOutsideClose="true" :isLoading="true" :hideClose="true" :stopPropagation="false">
 //   <div>Data....</div>
 // </modal>
 
@@ -156,6 +156,10 @@ export default {
     position: {
       required: false,
       default: 'fixed'
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
@@ -167,6 +171,11 @@ export default {
       if (!this.preventOutsideClose) {
         this.$emit('on-close')
       }
+    },
+    onClickModalContainer(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation()
+      }
     }
   },
   watch: {

package/src/components/threeDots/index.vue

@@ -38,11 +38,12 @@
             {{ child.name }}
           </option-child>
         </children-container>
-        <options-container v-if="!isLoading">
+        <options-container v-if="!isLoading" :textWrap="textWrap">
           <option-item
             v-for="(item, index) in options"
             :key="item.value"
             tabindex="0"
+            :textWrap="textWrap"
             @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
             @keyup.enter="
               onSelect({ item: item, hasChildren: hasChildren(item) })
@@ -56,8 +57,8 @@
               v-if="hasChildren(item)"
             />
             <span>
-            {{ item.name }}
-          </span>
+              {{ item.name }}
+            </span>
           </option-item>
         </options-container>
       </template>
@@ -184,22 +185,20 @@ const LoadingContainer = styled.div`
   background: #fff;
 `
 
-const OptionsContainer = styled.div`
+const OptionsContainerAttrs = { textWrap: Boolean }
+const OptionsContainer = styled('div', OptionsContainerAttrs)`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 220px;
-  max-width: 220px;
-  width: max-content;
+  ${(props) => props.textWrap ? 'width: 220px' : 'width: max-content' };
   border-radius: 4px;
   background-color: #fff;
   max-height: 220px;
   overflow: auto;
   height: max-content;
-  white-space: normal;
 `
 
-const optionAttrs = { isDisabled: Boolean }
+const optionAttrs = { isDisabled: Boolean, textWrap: Boolean }
 const OptionItem = styled('div', optionAttrs)`
   padding: 12px;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
@@ -207,6 +206,7 @@ const OptionItem = styled('div', optionAttrs)`
   position: relative;
   ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
   ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
+  ${(props) => props.textWrap ? '' : 'white-space: nowrap'};
 
   &:hover {
     background-color: #ebeef4;
@@ -288,6 +288,10 @@ export default {
     isLoading: {
       required: false,
       default: false
+    },
+    textWrap: {
+      required: false,
+      default: true
     }
   },
   data() {