@eturnity/eturnity_reusable_components 1.2.67 → 1.2.69

package/package.json

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

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

@@ -39,6 +39,7 @@
           :isSearchBarVisible="isSearchBarVisible"
           :disabled="disabled"
           @keydown.native="onKeyDown"
+          :showBorder="showBorder"
         >
           <inputText
             v-if="isSearchBarVisible"
@@ -184,33 +185,36 @@ const selectButtonAttrs = {
   hasError: Boolean,
   disabled: Boolean,
   selectHeight: String,
-  isSearchBarVisible: Boolean
+  isSearchBarVisible: Boolean,
+  showBorder: Boolean
 }
 const selectButton = styled('div', selectButtonAttrs)`
-    position:relative;
-    box-sizing: border-box;
-    border-radius:4px;
-    padding: ${(props) =>
-      props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px'};
-    text-align:left;
-    border-radius:4px;
-    min-height:36px;
-    display: flex;
-    align-items: center;
-    max-height:${(props) => props.selectHeight};
-    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' : '')};
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: ${(props) => (props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px')};
+  text-align: left;
+  border-radius: 4px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  max-height: ${(props) => props.selectHeight};
+  ${({ showBorder, theme, hasError }) =>
+    showBorder &&
+    `
+    border:1px solid ${hasError ? theme.colors.red : 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,
@@ -341,6 +345,10 @@ export default {
     isAutoSearch: {
       required: false,
       default: true
+    },
+    showBorder: {
+      required: false,
+      default: true
     }
   },
 

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

@@ -71,9 +71,7 @@
 import styled from "vue-styled-components"
   import InfoText from "../../infoText"
   import theme from "../../../assets/theme"
-  const Container = styled.div`
-    display: inline-block;
-  `
+  const Container = styled.div``
   
   const flexAttrs = { label:String,size: String, disabled: Boolean,alignItems: String }
   const FlexWrapper = styled("div", flexAttrs)`
@@ -117,12 +115,14 @@ import styled from "vue-styled-components"
     border:1px solid ${props=>props.isActive?props.secondaryColor:props.inactiveColor};
     display:flex;
     align-items:center;
-	font-size: 13px;
-	line-height: 1;
-	text-align: center;
-	padding: 10px;
-	margin-right: -1px;
-	transition: all 0.1s ease-in-out;
+    justify-content: center;
+    flex-grow:1;
+    font-size: 13px;
+    line-height: 1;
+    text-align: center;
+    padding: 10px;
+    margin-right: -1px;
+    transition: all 0.1s ease-in-out;
     overflow:hidden;
     & :hover{
         cursor: pointer;