@eturnity/eturnity_reusable_components 1.2.20 → 1.2.22-EPDM-5202.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.20",
+  "version": "1.2.22-EPDM-5202.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -48,9 +48,10 @@ const InputLabel = styled("div", labelAttrs)`
 
 const LabelWrapper = styled.div`
   display: inline-grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto auto;
   grid-gap: 12px;
   align-items: center;
+  justify-content: start;
 `
 
 const inputProps = {

package/src/components/threeDots/index.vue

@@ -10,7 +10,8 @@
       @click.stop
       :top="getItemLocation('top')"
       :right="getItemLocation('right')"
-      :containerWidth="childOpen ? 420 : 220"
+      :containerWidth="childOpen ? 440 : 240"
+      ref="dropdownContainer"
     >
       <loading-container v-if="isLoading">
         <spinner />
@@ -26,13 +27,13 @@
           @click.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child),
+              hasChildren: hasChildren(child)
             })
           "
           @keyup.enter.stop="
             onSelect({
               item: child,
-              hasChildren: hasChildren(child),
+              hasChildren: hasChildren(child)
             })
           "
         >
@@ -51,7 +52,10 @@
           @mouseover="onItemHover({ index, item })"
           :isDisabled="item.disabled"
         >
-          <arrow-left :hasChildren="hasChildren(item)" />
+          <arrow-left
+            :hasChildren="hasChildren(item)"
+            v-if="hasChildren(item)"
+          />
           <span>
             {{ item.name }}
           </span>
@@ -117,8 +121,8 @@
 //         },
 //       ],
 
-import styled from "vue-styled-components"
-import Spinner from "../spinner"
+import styled from 'vue-styled-components'
+import Spinner from '../spinner'
 
 const PageContainer = styled.div`
   display: grid;
@@ -155,11 +159,11 @@ const DotItem = styled.div`
 `
 
 const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
-const DropdownContainer = styled("div", dropdownAttrs)`
+const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  top: ${(props) => props.top + "px"};
-  left: ${(props) => props.right - props.containerWidth + "px"};
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.right - props.containerWidth + 'px'};
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -180,19 +184,21 @@ const OptionsContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 200px;
+  min-width: 220px;
+  max-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 OptionItem = styled("div", optionAttrs)`
+const OptionItem = styled('div', optionAttrs)`
   padding: 12px;
-  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
 
@@ -222,7 +228,7 @@ const OptionChild = styled.div`
 `
 
 const arrowAttrs = { hasChildren: Boolean }
-const ArrowLeft = styled("span", arrowAttrs)`
+const ArrowLeft = styled('span', arrowAttrs)`
   border: solid #9f9f9f;
   border-width: 0 1.5px 1.5px 0;
   display: inline-block;
@@ -230,16 +236,18 @@ const ArrowLeft = styled("span", arrowAttrs)`
   margin-bottom: 1px;
   transform: rotate(135deg);
   margin-right: 3px;
-  visibility: ${(props) => (props.hasChildren ? "visible" : "hidden")};
+  visibility: ${(props) => (props.hasChildren ? 'visible' : 'hidden')};
 `
 
 const childAttrs = { isOpen: Boolean }
-const ChildrenContainer = styled("div", childAttrs)`
+const ChildrenContainer = styled('div', childAttrs)`
   border: ${(props) =>
-    props.isOpen ? "1px solid" + props.theme.colors.grey3 : "none"};
+    props.isOpen ? '1px solid' + props.theme.colors.grey3 : 'none'};
   display: grid;
   grid-template-columns: 1fr;
   min-width: 200px;
+  max-width: 200px;
+  white-space: normal;
   width: max-content;
   border-radius: 4px;
   background-color: #fff;
@@ -250,7 +258,7 @@ const ChildrenContainer = styled("div", childAttrs)`
 `
 
 export default {
-  name: "three-dots",
+  name: 'three-dots',
   components: {
     PageContainer,
     ButtonContainer,
@@ -262,22 +270,23 @@ export default {
     ArrowLeft,
     DropdownContainer,
     Spinner,
-    LoadingContainer,
+    LoadingContainer
   },
   props: {
     options: {
-      required: true,
+      required: true
     },
     isLoading: {
       required: false,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
       isOpen: false,
       hoverItem: null,
       childOpen: null,
+      containerWidth: 16
     }
   },
   methods: {
@@ -285,15 +294,15 @@ export default {
       this.isOpen = !this.isOpen
 
       if (this.isOpen) {
-        document.addEventListener("click", this.clickOutside)
+        document.addEventListener('click', this.clickOutside)
       } else {
-        document.removeEventListener("click", this.clickOutside)
+        document.removeEventListener('click', this.clickOutside)
       }
     },
     getItemLocation(value) {
       let ref = this.$refs.dropdownItem
       let location = ref.$el.getBoundingClientRect()[value]
-      if (value === "top") {
+      if (value === 'top') {
         location = location + window.scrollY
       }
       return location
@@ -310,7 +319,7 @@ export default {
       if (hasChildren || item.disabled) {
         return
       }
-      this.$emit("on-select", item)
+      this.$emit('on-select', item)
       this.isOpen = false
     },
     clickOutside(event) {
@@ -318,7 +327,7 @@ export default {
         return
       }
       this.toggleButton()
-    },
-  },
+    }
+  }
 }
 </script>