@eturnity/eturnity_reusable_components 1.0.92 → 1.0.95

package/package.json

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

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/tableDropdown/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <dropdown-row :colspan="colSpan" @click="toggleOpen" ref="dropdownItem">
+  <dropdown-row
+    :colspan="colSpan"
+    @click="toggleOpen"
+    ref="dropdownItem"
+    :disabled="disabled"
+  >
     <component-container :colSpan="colSpan" class="table-dropdown">
       <component-item v-for="(item, index) in tableItems" :key="index">
         <template-button
@@ -114,15 +119,18 @@
 //   :optionItems="groupComponents" // list of options
 //   :optionsLoading="dropdownOptionsLoading"
 //   :optionsDisplay="['display_name', 'company_item_number']" // Array. what should be displayed
+//   :disabled="true"
 // />
 import styled from "vue-styled-components"
 import Spinner from "@eturnity/eturnity_reusable_components/src/components/spinner"
 import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
 
-const DropdownRow = styled.td``
+const rowAttrs = { disabled: Boolean }
+const DropdownRow = styled("td", rowAttrs)`
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "auto")};
+`
 
 const ComponentItem = styled.div`
-  /* padding-left: 12px; */
   overflow: hidden;
   text-overflow: ellipsis;
 `
@@ -283,6 +291,10 @@ export default {
       required: true,
       default: [], // should be like ['display_name', 'company_item_number', 'description']
     },
+    disabled: {
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -291,6 +303,9 @@ export default {
   },
   methods: {
     toggleOpen() {
+      if (this.disabled) {
+        return
+      }
       if (!this.isOpen) {
         document.addEventListener("click", this.clickOutside)
         this.$emit("dropdown-search", "")