@eturnity/eturnity_reusable_components 1.2.53 → 1.2.55

package/package.json

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

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

@@ -49,7 +49,7 @@ const containerAttrs = {
 }
 const Container = styled('label', containerAttrs)`
   display: grid;
-  grid-template-columns: ${(props) => (props.hasLabel ? '18px auto' : '18px')};
+  grid-template-columns: ${(props) => (props.hasLabel ? '16px auto' : '16px')};
   grid-gap: 16px;
   align-content: center;
   color: ${(props) => props.theme.colors.black};

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

@@ -1,6 +1,6 @@
 <template>
-    <Container 
-        :selectWidth="selectWidth" 
+    <Container
+        :selectWidth="selectWidth"
         @mouseenter="mouseEnterHandler"
         @mouseleave="mouseLeaveHandler"
         >
@@ -9,7 +9,7 @@
         :alignItems="alignItems"
         >
             <label-wrapper v-if="label"  >
-                <input-label 
+                <input-label
                     :fontColor="labelFontColor || colorMode=='dark'?'white':'eturnityGrey'"
                     :fontSize="fontSize">{{ label }}</input-label>
                 <info-text
@@ -20,36 +20,39 @@
                 :alignText="infoTextAlign"
                 />
             </label-wrapper>
-            <div>
-            <selectButton 
+            <select-button-wrapper :disabled="disabled">
+            <selectButton
                 ref="select"
                 @click="toggleDropdown"
-                :isActive="isActive"
                 :selectHeight="selectHeight"
                 :bgColor="buttonBgColor || colorMode=='dark'?'transparentBlack1':'white'"
                 :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
+                :hasError="hasError"
+                :isSearchBarVisible="isSearchBarVisible"
+                :disabled="disabled"
                 @keydown.native="onKeyDown"
                 >
-                <inputText 
+                <inputText
                     v-if="isSearchBarVisible"
                     ref="searchInput"
                     tabindex="0"
                     :noBorder="true"
-                    :inputHeight="selectHeight"
+                    :fontSize="fontSize"
                     backgroundColor="transparent"
                     :fontColor="buttonFontColor || colorMode=='dark'?'white':'black'"
-                    :value="textSearch" 
+                    :value="textSearch"
                     @keydown.stop="onKeyDown"
                     @input-change="searchChange" />
-                <div v-else>
+                <selector v-else>
                     <slot name="selector" :selectedValue="selectedValue"></slot>
-                </div>
-                <Caret :isUp="isDropdownOpen" @click.stop="toggleCaretDropdown" >
-                    <icon name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
+                </selector>
+                <Caret @click.stop="toggleCaretDropdown" >
+                    <icon v-if="isDropdownOpen" name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
+                    <icon v-else name="arrow_down" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
                 </Caret>
             </selectButton>
             <DropdownWrapper>
-            <selectDropdown 
+            <selectDropdown
                 ref="dropdown"
                 v-show="isDropdownOpen"
                 :hoveredIndex="hoveredIndex"
@@ -63,14 +66,14 @@
                 <slot name="dropdown"></slot>
             </selectDropdown>
             </DropdownWrapper>
-            </div>
-        </input-wrapper>    
+            </select-button-wrapper>
+        </input-wrapper>
     </Container>
   </template>
-  
+
   <script>
     //How to use it
-    // <Select 
+    // <Select
     //     hoverDropdown="true"
     //     selectWidth="100%"
     //     optionWidth="50%"
@@ -86,24 +89,28 @@
     //     <Option value="3">value three</Option>
     //     <Option value="4">value four</Option>
     //     </template>
-    // </Select> 
-                
+    // </Select>
+
   import styled from 'vue-styled-components'
   import InfoText from '../../infoText'
   import icon from '../../icon'
   import inputText from '../inputText'
-  
-  const caretAttrs={isUp:Boolean}
-  const Caret=styled('div', caretAttrs)`
-  position:absolute;
-  display:flex;
-  align-items:center;
-  height:100%;
-  right:15px;
-  top:-2px
-  transform: ${props=>!props.isUp?"rotate(180deg)":""};
-  transform-origin: center;
-  `
+
+const Caret = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  min-width: 30px;
+  height: 100%;
+  padding-top: 5px;
+  cursor: pointer;
+  margin-left: auto;
+`
+
+const Selector = styled.div`
+  width: 100%;
+`
 
   const labelAttrs = { fontSize: String }
   const InputLabel = styled('div', labelAttrs)`
@@ -124,23 +131,37 @@ const LabelWrapper = styled.div`
   align-items: center;
   justify-content: start;
 `
-const selectButtonAttrs={bgColor:String,fontColor:String,isActive:Boolean,selectHeight:String}
+
+const SelectButtonWrapperAttrs = {
+  disabled: Boolean
+}
+const SelectButtonWrapper = styled('div', SelectButtonWrapperAttrs)`
+  ${(props) => props.disabled ? 'cursor: not-allowed' : '' };
+`
+
+const selectButtonAttrs={
+  bgColor: String,
+  fontColor: String,
+  hasError: Boolean,
+  disabled: Boolean,
+  selectHeight: String,
+  isSearchBarVisible: Boolean
+}
 const selectButton = styled('div',selectButtonAttrs)`
     position:relative;
     box-sizing: border-box;
-    border:1px solid red;
     border-radius:4px;
-    padding:0px 10px;
+    padding: ${(props) => props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px' };
     text-align:left;
     border-radius:4px;
     min-height:36px;
-    display: grid;
-    grid-template-columns:auto 40px;
+    display: flex;
     align-items: center;
     max-height:${props=>props.selectHeight};
-    border:1px solid ${(props)=>props.theme.colors.grey4}
-    background-color:${(props) => props.theme.colors[props.bgColor]?props.theme.colors[props.bgColor]:props.bgColor};
+    border:1px solid ${(props) => props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
+    background-color:${(props) => props.disabled ? props.theme.colors.grey5 : props.theme.colors[props.bgColor] ? props.theme.colors[props.bgColor] : props.bgColor};
     color:${(props) => props.theme.colors[props.fontColor]?props.theme.colors[props.fontColor]:props.fontColor};
+    ${(props) => props.disabled ? 'pointer-events: none' : '' };
 `
 const selectDropdownAttrs={bgColor:String,fontColor:String,selectWidth: String, optionWidth: String,hoveredIndex:Number,selectedValue:Number | String}
 const selectDropdown = styled('div',selectDropdownAttrs)`
@@ -182,7 +203,7 @@ const InputWrapper = styled('div', inputAttrs)`
 `
   export default {
     name: 'RCselect',
-  
+
     props: {
         value:{
             required:false,
@@ -247,14 +268,23 @@ const InputWrapper = styled('div', inputAttrs)`
             required:false,
             default:true
         },
+        hasError: {
+          required: false,
+          default: false
+        },
+        disabled: {
+          required: false,
+          default: false
+        },
         isAutoSearch:{
             required:false,
             default:true
         }
     },
-  
+
     components: {
         selectButton,
+        SelectButtonWrapper,
         selectDropdown,
         Container,
         InputLabel,
@@ -264,9 +294,10 @@ const InputWrapper = styled('div', inputAttrs)`
         DropdownWrapper,
         icon,
         Caret,
+        Selector,
         inputText
     },
-  
+
     data() {
       return {
         selectedValue: null,
@@ -293,10 +324,10 @@ const InputWrapper = styled('div', inputAttrs)`
         },
         toggleDropdown(){
             if(this.isSearchBarVisible){return}
-            this.isDropdownOpen=!this.isDropdownOpen            
+            this.isDropdownOpen=!this.isDropdownOpen
         },
         toggleCaretDropdown(){
-            this.isDropdownOpen=!this.isDropdownOpen            
+            this.isDropdownOpen=!this.isDropdownOpen
         },
         openDropdown(){
             this.focus()
@@ -356,7 +387,7 @@ const InputWrapper = styled('div', inputAttrs)`
                 const optionHoveredComponent=this.$refs.dropdown.$children[(this.hoveredIndex-1+this.optionLength)%this.optionLength]
                 this.optionSelected(optionHoveredComponent.$el.dataset.value)
             }
-            
+
         },
         onArrowPress(dir){
             this.hoveredIndex=((this.hoveredIndex+dir+this.optionLength-1)%this.optionLength)+1
@@ -382,6 +413,7 @@ const InputWrapper = styled('div', inputAttrs)`
             this.selectedValue=val
         },
         isDropdownOpen(val){
+            this.$emit('is-dropdown-open', val)
             if(val){
                 setTimeout(()=>{
                     this.isClickOutsideActive=true
@@ -398,4 +430,3 @@ const InputWrapper = styled('div', inputAttrs)`
     }
   }
   </script>
- 

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

@@ -3,7 +3,7 @@
         <slot></slot>
     </optionContainer>
   </template>
-  
+
   <script>
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
@@ -15,7 +15,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 15px;
+    padding: 12px 10px;
     gap: 14px;
     width:100%;
     box-sizing:inherit;
@@ -23,10 +23,10 @@
       background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
     }
   `
-  
+
   export default {
     name: 'RCoption',
-  
+
     props: {
       value: {
         required: true
@@ -39,9 +39,9 @@
         default:'light'
       }
     },
-  
+
     components: {optionContainer},
-  
+
     data() {
       return {}
     },
@@ -57,4 +57,3 @@
     }
   }
   </script>
- 

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

@@ -15,16 +15,20 @@
         />
       </label-wrapper>
       <input-container
-        :placeholder="placeholder"
-        :isError="isError"
-        :rows="rowHeight"
-        :value="value"
         :inputWidth="inputWidth"
-        :disabled="isDisabled"
+        :isError="isError"
         :fontSize="fontSize"
-        @input="onChangeHandler"
-        :resize="resize"
-      />
+        :disabled="isDisabled"
+      >
+        <textarea
+          :placeholder="placeholder"
+          :rows="rowHeight"
+          :value="value"
+          :disabled="isDisabled"
+          @input="onChangeHandler"
+          :resize="resize"
+        />
+      </input-container>
     </input-wrapper>
     <error-message v-if="isError && errorText">{{ errorText }}</error-message>
   </container>
@@ -71,27 +75,30 @@ const inputProps = {
   fontSize: String,
   inputWidth: String
 }
-const InputContainer = styled('textarea', inputProps)`
-  border: ${(props) =>
-    props.isError
-      ? '1px solid ' + props.theme.colors.red
-      : '1px solid ' + props.theme.colors.grey4};
-  padding: ${(props) =>
-    props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
-  border-radius: 4px;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-  color: ${(props) => props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  max-width: 100%;
-  box-sizing: border-box; // to allow width of 100% with padding
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
-  &::placeholder {
-    color: ${(props) => props.theme.colors.grey2};
-  }
+const InputContainer = styled('div', inputProps)`
+  textarea {
+    border: ${(props) =>
+      props.isError
+        ? '1px solid ' + props.theme.colors.red
+        : '1px solid ' + props.theme.colors.grey4};
+    padding: ${(props) =>
+      props.hasUnit ? '11px 40px 11px 10px' : '11px 5px 11px 10px'};
+    border-radius: 4px;
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+    color: ${(props) => props.theme.colors.black};
+    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    max-width: 100%;
+    box-sizing: border-box; // to allow width of 100% with padding
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
 
-  &:focus {
-    outline: none;
+    &::placeholder {
+      color: ${(props) => props.theme.colors.grey2};
+    }
+
+    &:focus {
+      outline: none;
+    }
   }
 `
 
@@ -181,7 +188,7 @@ export default {
       if (this.isDisabled) {
         return
       }
-      this.$emit('input-change', $event)
+      this.$emit('input-change', $event.target.value)
     }
   }
 }

package/src/components/tables/mainTable/index.vue

@@ -189,7 +189,9 @@ const TableContainer = styled('table', containerAttrs)`
     }
 
     &.checkbox-header {
-      width: 40px;
+      min-width: 40px;
+      display: flex;
+      gap: 10px;
     }
   }