@eturnity/eturnity_reusable_components 1.0.40 → 1.0.44

package/package.json

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

package/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <main-table>
+      <main-table titleText="My Table">
         <thead>
           <tr>
             <th>Column 1</th>

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

@@ -12,6 +12,7 @@
         @focus="focusInput()"
         @keyup.enter="$emit('on-enter-click')"
         :disabled="disabled"
+        :isDisabled="disabled"
         :noBorder="noBorder"
         :textAlign="textAlign"
       />
@@ -36,6 +37,7 @@
 //     inputWidth="150px" //by default, this is 100%
 //     :numberPrecision="3"
 //     unitName="pc"
+//     :numberPrecision="4"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
 //     @on-enter-click="onInputSubmit()"
@@ -61,7 +63,7 @@ const inputProps = {
   hasUnit: Boolean,
   inputWidth: String,
   hasLength: Boolean,
-  disabled: Boolean,
+  isDisabled: Boolean,
   noBorder: Boolean,
   textAlign: String,
 }
@@ -78,13 +80,13 @@ const InputContainer = styled("input", inputProps)`
     props.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
   border-radius: 4px;
   text-align: ${(props) => props.textAlign};
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "auto")};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
   font-size: 16px;
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
   background-color: ${(props) =>
-    props.disabled
+    props.isDisabled
       ? props.theme.colors.grey5 + " !important"
       : "#fff !important"};
 
@@ -240,6 +242,9 @@ export default {
       }
     },
     focusInput() {
+      if (this.disabled) {
+        return
+      }
       this.isFocused = true
     },
     formatWithCurrency(value) {

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

@@ -1,14 +1,19 @@
 <template>
-  <table-scroll>
-    <table-wrapper :fullWidth="fullWidth">
-      <spinner-wrapper v-if="isLoading">
-        <spinner />
-      </spinner-wrapper>
-      <table-container v-else>
-        <slot />
-      </table-container>
-    </table-wrapper>
-  </table-scroll>
+  <page-container>
+    <table-title v-if="titleText">
+      {{ titleText }}
+    </table-title>
+    <table-scroll>
+      <table-wrapper :fullWidth="fullWidth">
+        <spinner-wrapper v-if="isLoading">
+          <spinner />
+        </spinner-wrapper>
+        <table-container v-else>
+          <slot />
+        </table-container>
+      </table-wrapper>
+    </table-scroll>
+  </page-container>
 </template>
 
 <script>
@@ -17,6 +22,14 @@
 import styled from "vue-styled-components"
 import Spinner from "../../spinner"
 
+const PageContainer = styled.div``
+
+const TableTitle = styled.div`
+  margin-bottom: 6px;
+  font-weight: bold;
+  font-size: 13px;
+`
+
 const TableScroll = styled.div`
   position: relative;
   max-width: 100%;
@@ -193,8 +206,8 @@ const TableContainer = styled.table`
     }
 
     &:hover {
-      input {
-        background-color: ${(props) => props.theme.colors.grey5};
+      input:disabled {
+        background-color: ${(props) => props.theme.colors.grey5 + "!important"};
       }
 
       .drag-icon {
@@ -204,7 +217,7 @@ const TableContainer = styled.table`
 
     .drag-container {
       display: table-cell;
-      width: auto;
+      width: 12px;
       vertical-align: middle;
     }
 
@@ -253,6 +266,7 @@ const TableContainer = styled.table`
   input {
     font-size: 13px;
     padding: 5px 10px;
+    background: #fff !important;
   }
 
   .open-container {
@@ -270,6 +284,8 @@ export default {
     SpinnerWrapper,
     Spinner,
     TableContainer,
+    PageContainer,
+    TableTitle,
   },
   props: {
     fullWidth: {
@@ -280,6 +296,10 @@ export default {
       required: false,
       default: false,
     },
+    titleText: {
+      required: false,
+      default: null,
+    },
   },
 }
 </script>