@eturnity/eturnity_reusable_components 7.8.0 → 7.8.1

package/package.json

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

package/src/components/infoCard/index.vue

@@ -1,38 +1,36 @@
 <template>
-    <info-container>
-            <icon name="info" size="24px" />
-      <InfoTextContainer>
-        <slot />
-      </InfoTextContainer>
-    </info-container>
+  <info-container>
+    <icon name="info" size="24px" />
+    <text-container>
+      <slot />
+    </text-container>
+  </info-container>
 </template>
-    
+
 <script>
 import styled from 'vue-styled-components'
-import icon from '../icon'
-const InfoContainer = styled('div')`
+import Icon from '../icon'
+
+const InfoContainer = styled.div`
   display: flex;
-  align-items: flex-start;
   gap: 15px;
   padding: 20px;
-  width: 500px;
-  min-width: 450px;
-  border: 1px dashed #dee2eb;
+  border: 1px dashed ${(props) => props.theme.colors.grey4};
   border-radius: 4px;
-  margin:20px 0;
 `
 
-const InfoTextContainer = styled('div')`
+const TextContainer = styled.div`
   font-size: 13px;
+  width: 100%;
 `
 
 
 export default {
-    components:{
-        icon,
-        InfoTextContainer,
-        InfoContainer
-    },
-    props:[]
+  name: 'InfoCard',
+  components: {
+    Icon,
+    InfoContainer,
+    TextContainer
+  }
 }
 </script>

package/src/components/infoText/index.vue

@@ -58,6 +58,7 @@ const TextOverlay = styled('div', textAttrs)`
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
+  line-height: normal;
   border-radius: 4px;
   z-index: 99;
   color: ${(props) => props.theme.colors.white};

package/src/components/threeDots/index.vue

@@ -23,17 +23,17 @@
             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>
@@ -45,10 +45,11 @@
             tabindex="0"
             @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)"
@@ -68,9 +69,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: [
@@ -203,6 +205,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;
@@ -368,6 +372,7 @@ export default {
     },
     onSelect({ item, hasChildren }) {
       if (hasChildren || item.disabled) {
+        this.$emit('on-click', item)
         return
       }
       this.$emit('on-select', item)