@eturnity/eturnity_reusable_components 1.2.38 → 1.2.39-EPDM-5626

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.38",
+  "version": "1.2.39-EPDM-5626",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/buttons/mainButton/index.vue

@@ -1,8 +1,9 @@
 <template>
   <page-container>
     <button-container
-      :isDisabled="isDisabled"
       :type="type"
+      :minWidth="minWidth"
+      :isDisabled="isDisabled"
       :customColor="customColor"
     >
       {{ text }}
@@ -14,37 +15,39 @@
 // To use:
 // import MainButton from "@eturnity/eturnity_reusable_components/src/components/buttons/mainButton"
 // <main-button
-//   type="secondary" // primary, secondary, cancel
-//   :isDisabled="true"
 //   text="Click Me"
 //   customColor="#ab5348"
+//   type="secondary" // primary, secondary, cancel
+//   :isDisabled="true"
+//   :minWidth="minWidth"
 // />
 
 import styled from "vue-styled-components"
 
 const PageContainer = styled.div``
 
-const ButtonAttrs = { type: String, isDisabled: Boolean, customColor: String }
+const ButtonAttrs = { type: String, isDisabled: Boolean, minWidth: String, customColor: String }
 const ButtonContainer = styled("div", ButtonAttrs)`
   padding: 7px 15px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-    props.isDisabled
-      ? props.theme.colors.disabled
-      : props.customColor
-      ? props.customColor
-      : props.type === "primary"
-      ? props.theme.colors.black
-      : props.type === "secondary"
-      ? props.theme.colors.grey3
-      : props.type === "cancel"
-      ? props.theme.colors.red
-      : props.theme.colors.black};
+      props.isDisabled
+          ? props.theme.colors.disabled
+          : props.customColor
+              ? props.customColor
+              : props.type === "primary"
+                  ? props.theme.colors.black
+                  : props.type === "secondary"
+                      ? props.theme.colors.grey3
+                      : props.type === "cancel"
+                          ? props.theme.colors.red
+                          : props.theme.colors.black};
   border-radius: 4px;
   text-align: center;
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
   user-select: none;
+  ${(props) => (props.minWidth ? `min-width: ${props.minWidth};` : '')};
 
   &:hover {
     opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
@@ -77,6 +80,10 @@ export default {
       required: false,
       default: null,
     },
+    minWidth: {
+      required: false,
+      default: null
+    }
   },
 }
 </script>

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

@@ -226,7 +226,7 @@ const SlotContainer = styled('span', inputProps)`
   width: ${(props) =>
     props.slotSize ? 'calc(' + props.slotSize + ' - 10px)' : 'fit-content'};
   right: 10px;
-  top: 0;
+  top: 10px;
   padding-left: 10px;
   color: ${(props) =>
     props.isError