@eturnity/eturnity_reusable_components 1.1.31 → 1.1.34

package/package.json

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

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -42,6 +42,7 @@ Default.args = {
   disabled: false,
   value: "",
   inputWidth: "200px",
+  minWidth: "150px",
   unitName: "pc",
   isError: false,
   numberPrecision: 0,

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

@@ -18,6 +18,7 @@
         :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
+        :minWidth="minWidth"
         :value="formatWithCurrency(value)"
         :hasLength="!!value && !!value.length"
         @blur="onInputBlur($event)"
@@ -48,6 +49,7 @@
 //     placeholder="Enter distance"
 //     :isError="false" //default is false
 //     inputWidth="150px" //by default, this is 100%
+//     minWidth="100px"
 //     :numberPrecision="3"
 //     unitName="pc"
 //     :value="inputValue" //required -- String
@@ -79,6 +81,7 @@ const inputProps = {
   isError: Boolean,
   hasUnit: Boolean,
   inputWidth: String,
+  minWidth: String,
   hasLength: Boolean,
   isDisabled: Boolean,
   noBorder: Boolean,
@@ -103,6 +106,7 @@ const InputContainer = styled("input", inputProps)`
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "unset")};
   background-color: ${(props) =>
     props.isDisabled ? props.theme.colors.grey5 : "#fff"};
   box-sizing: border-box;
@@ -189,6 +193,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null,
+    },
     value: {
       required: true,
       default: null,

package/src/components/inputs/inputText/InputText.stories.js

@@ -26,6 +26,7 @@ const Template = (args, { argTypes }) => ({
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical
   //   inputWidth="250px"
+  //   minWidth="100px"
   // />
 })
 
@@ -35,6 +36,7 @@ Default.args = {
   disabled: false,
   value: "",
   inputWidth: "200px",
+  minWidth: "10ch",
   unitName: "pc",
   isError: false,
   textAlign: "left",

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

@@ -18,6 +18,7 @@
         :placeholder="placeholder"
         :isError="isError"
         :inputWidth="inputWidth"
+        :minWidth="minWidth"
         :value="value"
         @input="onChangeHandler"
         :noBorder="noBorder"
@@ -53,6 +54,7 @@ const LabelWrapper = styled.div`
 const inputProps = {
   isError: Boolean,
   inputWidth: String,
+  minWidth: String,
   noBorder: Boolean,
   isDisabled: Boolean,
 }
@@ -72,6 +74,7 @@ const InputContainer = styled("input", inputProps)`
   color: ${(props) =>
     props.isError ? props.theme.colors.red : props.theme.colors.black};
   width: ${(props) => (props.inputWidth ? props.inputWidth : "100%")};
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "unset")};
   box-sizing: border-box; // to allow width of 100% with padding
   font-weight: 500;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "auto")};
@@ -119,6 +122,7 @@ export default {
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical
   //   inputWidth="250px"
+  //   minWidth="100px"
   // />
   name: "input-text",
   components: {
@@ -147,6 +151,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null,
+    },
     value: {
       required: true,
       default: null,

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

@@ -82,7 +82,7 @@ const TableContainer = styled.table`
         background-color: ${(props) => props.theme.colors.white};
         cursor: pointer;
 
-        .table-dropdown {
+        .table-dropdown-item {
           background-color: ${(props) => props.theme.colors.grey5};
         }
 
@@ -319,8 +319,6 @@ const TableContainer = styled.table`
     font-size: 13px;
     padding: 5px 10px;
     background: #fff;
-    min-width: max-content;
-    min-width: 150px; // Safari/Firefox backup
 
     &:focus {
       background: ${(props) => props.theme.colors.grey5};