@eturnity/eturnity_reusable_components 7.8.1 → 7.8.2

package/package.json

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

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() {