@eturnity/eturnity_reusable_components 1.2.68 → 1.2.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.68",
+  "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
     }
   },