@eturnity/eturnity_reusable_components 7.8.1 → 7.8.3

package/package.json

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

package/src/components/threeDots/index.vue

@@ -38,7 +38,7 @@
             {{ 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"
@@ -56,8 +56,8 @@
               v-if="hasChildren(item)"
             />
             <span>
-            {{ item.name }}
-          </span>
+              {{ item.name }}
+            </span>
           </option-item>
         </options-container>
       </template>
@@ -184,19 +184,18 @@ 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;
+  ${(props) => props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
 `
 
 const optionAttrs = { isDisabled: Boolean }
@@ -288,6 +287,10 @@ export default {
     isLoading: {
       required: false,
       default: false
+    },
+    textWrap: {
+      required: false,
+      default: true
     }
   },
   data() {