@eturnity/eturnity_reusable_components 1.0.89 → 1.0.93

package/package.json

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

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

@@ -73,13 +73,13 @@ const Container = styled("label", containerAttrs)`
         ? "16px"
         : "25px"};
     background-color: ${(props) =>
-      props.isDisabled
-        ? props.theme.colors.lightGray
-        : !props.isChecked
-        ? "#fff"
-        : props.backgroundColor
+      props.isChecked
         ? props.backgroundColor
-        : props.theme.colors.green};
+          ? props.backgroundColor
+          : props.theme.colors.green
+        : props.isDisabled
+        ? props.theme.colors.lightGray
+        : "#fff"};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>

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

@@ -17,6 +17,9 @@
         :inputWidth="inputWidth"
         :value="value"
         @input="onChangeHandler"
+        :noBorder="noBorder"
+        :disabled="disabled"
+        :isDisabled="disabled"
       />
     </input-wrapper>
     <error-message v-if="isError">{{ errorMessage }}</error-message>
@@ -44,11 +47,20 @@ const LabelWrapper = styled.div`
   margin-bottom: 12px;
 `
 
-const inputProps = { isError: Boolean, inputWidth: String }
+const inputProps = {
+  isError: Boolean,
+  inputWidth: String,
+  noBorder: Boolean,
+  isDisabled: Boolean,
+}
 const InputContainer = styled("input", inputProps)`
   border: ${(props) =>
     props.isError
       ? "1px solid " + props.theme.colors.red
+      : props.noBorder
+      ? "none"
+      : props.hasLength
+      ? "1px solid " + props.theme.colors.black
       : "1px solid " + props.theme.colors.mediumGray};
   padding: ${(props) =>
     props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
@@ -59,6 +71,9 @@ const InputContainer = styled("input", inputProps)`
   width: 100%;
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 500;
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
+  background-color: ${(props) =>
+    props.isDisabled ? props.theme.colors.grey5 : "#fff"};
 
   &::placeholder {
     color: ${(props) =>
@@ -84,16 +99,16 @@ const ErrorMessage = styled.div`
 export default {
   // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
   // To use:
-  //   <input-text
-  //     placeholder="Company name"
-  //     :value="companyName"
-  //     @input-change="onInputChange({ value: $event, type: 'companyName' })"
-  //     :isError="checkErrors()"
-  //     :errorMessage="This is my error message"
-  //     infoTextAlign="right" // left by default
-  //     infoTextMessage="My info message"
-  //     label="Question 5"
-  //   />
+  // <input-text
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
+  //   :isError="checkErrors()"
+  //   :errorMessage="This is my error message"
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  // />
   name: "input-text",
   components: {
     Container,
@@ -134,6 +149,14 @@ export default {
     label: {
       required: false,
     },
+    noBorder: {
+      required: false,
+      default: false,
+    },
+    disabled: {
+      required: false,
+      default: false,
+    },
   },
   methods: {
     onChangeHandler($event) {

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

@@ -109,7 +109,7 @@ const TableContainer = styled.table`
   }
 
   td {
-    padding: 7px 15px 7px 10px;
+    padding: 6px 15px 7px 10px;
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {
@@ -313,6 +313,7 @@ const TableContainer = styled.table`
     font-size: 13px;
     padding: 5px 10px;
     background: #fff;
+    min-width: max-content;
 
     &:focus {
       background: ${(props) => props.theme.colors.grey5};