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

package/src/components/threeDots/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <page-container @click="toggleButton()" ref="pageContainer" :activated="isOpen">
+  <page-container
+    @click="toggleButton()"
+    ref="pageContainer"
+    :activated="isOpen"
+  >
     <button-container ref="dropdownItem">
       <dot-item />
       <dot-item />
@@ -23,40 +27,44 @@
             v-for="child in childOpen"
             :key="child.value"
             @click.stop="
-            onSelect({
-              item: child,
-              hasChildren: hasChildren(child)
-            })
-          "
+              onSelect({
+                item: child,
+                hasChildren: hasChildren(child)
+              })
+            "
             @keyup.enter.stop="
-            onSelect({
-              item: child,
-              hasChildren: hasChildren(child)
-            })
-          "
+              onSelect({
+                item: child,
+                hasChildren: hasChildren(child)
+              })
+            "
           >
             {{ 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"
+            :data-id="item.dataId"
             tabindex="0"
-            @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
+            @click.stop="
+              onSelect({ item: item, hasChildren: hasChildren(item) })
+            "
             @keyup.enter="
-            onSelect({ item: item, hasChildren: hasChildren(item) })
-          "
+              onSelect({ item: item, hasChildren: hasChildren(item) })
+            "
             @mouseover="onItemHover({ index, item })"
             :isDisabled="item.disabled"
+            :title="item.title"
           >
             <arrow-left
               :hasChildren="hasChildren(item)"
               v-if="hasChildren(item)"
             />
             <span>
-            {{ item.name }}
-          </span>
+              {{ item.name }}
+            </span>
           </option-item>
         </options-container>
       </template>
@@ -68,9 +76,10 @@
 // import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
 // To use:
 // <three-dots
+//   :isLoading="true"
 //   :options="listOptions"
+//   @on-click="onClick($event)"
 //   @on-select="onSelect($event)"
-//   :isLoading="true"
 // />
 // options to pass:
 // listOptions: [
@@ -133,7 +142,8 @@ const PageContainer = styled('div', PageContainerAttrs)`
   width: 30px;
   height: 30px;
   border-radius: 4px;
-  background-color: ${(props) => props.activated ? props.theme.colors.grey5 : ''};
+  background-color: ${(props) =>
+    props.activated ? props.theme.colors.grey5 : ''};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
@@ -182,19 +192,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 }
@@ -203,6 +212,8 @@ const OptionItem = styled('div', optionAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
+  ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
+  ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
 
   &:hover {
     background-color: #ebeef4;
@@ -284,6 +295,10 @@ export default {
     isLoading: {
       required: false,
       default: false
+    },
+    textWrap: {
+      required: false,
+      default: true
     }
   },
   data() {
@@ -317,21 +332,28 @@ export default {
       const positionArray = this.determineElementQuarter(button, rectButton)
       contextMenu.style.transform = ''
       if (positionArray.includes('left')) {
-        contextMenu.style.left = (rectButton.right - rectRelativeParent.left + 5) + 'px'
+        contextMenu.style.left =
+          rectButton.right - rectRelativeParent.left + 5 + 'px'
       } else {
-        contextMenu.style.left = (rectButton.left - rectRelativeParent.left - 5) + 'px'
+        contextMenu.style.left =
+          rectButton.left - rectRelativeParent.left - 5 + 'px'
         contextMenu.style.transform = 'translateX(-100%)'
       }
       if (positionArray.includes('top')) {
-        contextMenu.style.top = (rectButton.top - rectRelativeParent.top) + 'px'
+        contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
       } else {
-        contextMenu.style.top = (rectButton.bottom - rectRelativeParent.top) + 'px'
+        contextMenu.style.top =
+          rectButton.bottom - rectRelativeParent.top + 'px'
         contextMenu.style.transform += ' translateY(-100%)'
       }
     },
     findRelativeParent(element) {
       while (element.parentElement) {
-        if (window.getComputedStyle(element.parentElement).position === 'relative' || window.getComputedStyle(element.parentElement).position === 'absolute') {
+        if (
+          window.getComputedStyle(element.parentElement).position ===
+            'relative' ||
+          window.getComputedStyle(element.parentElement).position === 'absolute'
+        ) {
           return element.parentElement
         }
         element = element.parentElement
@@ -368,6 +390,7 @@ export default {
     },
     onSelect({ item, hasChildren }) {
       if (hasChildren || item.disabled) {
+        this.$emit('on-click', item)
         return
       }
       this.$emit('on-select', item)

package/src/main.js

@@ -1,6 +1,6 @@
-import Vue from "vue"
-import App from "./App.vue"
-import VueCompositionAPI from "@vue/composition-api"
+import Vue from 'vue'
+import App from './App.vue'
+import VueCompositionAPI from '@vue/composition-api'
 import vClickOutside from 'v-click-outside'
 
 Vue.config.productionTip = false
@@ -9,5 +9,5 @@ Vue.use(VueCompositionAPI)
 Vue.use(vClickOutside)
 
 new Vue({
-  render: (h) => h(App),
-}).$mount("#app")
+  render: (h) => h(App)
+}).$mount('#app')