@eturnity/eturnity_reusable_components 1.2.40 → 1.2.41-3d-master.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.40",
+  "version": "1.2.41-3d-master.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/buttons/mainButton/index.vue

@@ -1,8 +1,9 @@
 <template>
   <page-container>
     <button-container
-      :isDisabled="isDisabled"
       :type="type"
+      :minWidth="minWidth"
+      :isDisabled="isDisabled"
       :customColor="customColor"
     >
       {{ text }}
@@ -14,37 +15,39 @@
 // To use:
 // import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
 // <main-button
-//   type="secondary" // primary, secondary, cancel
-//   :isDisabled="true"
 //   text="Click Me"
 //   customColor="#ab5348"
+//   type="secondary" // primary, secondary, cancel
+//   :isDisabled="true"
+//   :minWidth="minWidth"
 // />
 
 import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.type === "primary"
-      ? props.theme.colors.black
-      : props.type === "secondary"
-      ? props.theme.colors.grey3
-      : props.type === "cancel"
-      ? props.theme.colors.red
-      : props.theme.colors.black};
+      props.isDisabled
+          ? props.theme.colors.disabled
+          : props.customColor
+              ? props.customColor
+              : props.type === "primary"
+                  ? props.theme.colors.black
+                  : props.type === "secondary"
+                      ? props.theme.colors.grey3
+                      : props.type === "cancel"
+                          ? props.theme.colors.red
+                          : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
+  ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -77,6 +80,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null
+    }
   },
 }
 </script>

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

@@ -74,7 +74,7 @@ const InputLabel = styled('div', labelAttrs)`
   };
 
   font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-  font-weight: 700;
+  font-family: 'Lato-Bold', Arial;
 `
 
 const LabelWrapper = styled.div`
@@ -138,7 +138,7 @@ const InputContainer = styled('input', inputProps)`
   min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
   max-height: ${(props) => props.inputHeight};
   box-sizing: border-box; // to allow width of 100% with padding
-  font-weight: 500;
+  font-weight: 400;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : 

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

@@ -1,7 +1,7 @@
 <template>
   <component-wrapper :layout="layout">
     <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value">
+      <label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value" :checkmarkColor="checkmarkColor">
         <radio
           type="radio"
           :value="selectedOption"
@@ -83,7 +83,7 @@ const RadioWrapper = styled.div`
   grid-gap: 10px;
 `
 
-const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
+const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean, checkmarkColor: String }
 const LabelContainer = styled("label", containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -139,7 +139,7 @@ const LabelContainer = styled("label", containerProps)`
             ? "8px"
             : "6px"};
       border-radius: 100%;
-      background: ${(props) => props.theme.colors.primary};
+      background: ${(props) => props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
   }
 `
@@ -220,6 +220,10 @@ export default {
     name: {
       required: false,
       default: ''
+    },
+    checkmarkColor: {
+      required: false,
+      default: ''
     }
   },
   data() {

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

@@ -279,6 +279,9 @@ const InputWrapper = styled('div', inputAttrs)`
     mounted(){
         this.selectedValue=this.value
     },
+    beforeDestroy(){
+        document.removeEventListener('click', this.clickOutside)
+    },
     methods:{
         focus(){
             this.isActive=true
@@ -290,7 +293,7 @@ const InputWrapper = styled('div', inputAttrs)`
             if(this.isSearchBarVisible){return}
             this.isDropdownOpen=!this.isDropdownOpen
             if (this.isDropdownOpen) {
-                setTimeout(()=>document.addEventListener('click', this.clickOutside),10)
+                document.addEventListener('click', this.clickOutside)
             } else {
                 document.removeEventListener('click', this.clickOutside)
             }
@@ -299,7 +302,7 @@ const InputWrapper = styled('div', inputAttrs)`
         openDropdown(){
             this.focus()
             this.isDropdownOpen=true
-            setTimeout(()=>document.addEventListener('click', this.clickOutside),10)
+            document.addEventListener('click', this.clickOutside)
         },
         closeDropdown(){
             this.blur()