@eturnity/eturnity_reusable_components 8.40.4 → 8.40.6

package/src/components/errorMessage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ComponentWrapper>
-    <TextOverlay :margin-top="marginTop">
+    <TextOverlay :is-relative="isRelative" :margin-top="marginTop">
       <slot></slot>
     </TextOverlay>
   </ComponentWrapper>
@@ -13,9 +13,10 @@
 
   import styled from 'vue3-styled-components'
 
-  const TextOverlay = styled('div', { marginTop: String })`
-    position: absolute;
-    top: calc(100% + ${(props) => props.marginTop});
+  const TextOverlay = styled('div', { marginTop: String, isRelative: Boolean })`
+    position: ${(props) => (props.isRelative ? 'relative' : 'absolute')};
+    top: ${(props) =>
+      props.isRelative ? '8px' : `calc(100% + ${props.marginTop})`};
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
@@ -26,7 +27,7 @@
     border-radius: 4px;
     z-index: 999;
     color: ${(props) => props.theme.colors.white};
-
+    margin-bottom: 8px;
     :before {
       content: '';
       background-color: ${(props) => props.theme.colors.red};
@@ -51,6 +52,10 @@
       ComponentWrapper,
     },
     props: {
+      isRelative: {
+        required: false,
+        default: false,
+      },
       marginTop: {
         required: false,
         default: '13px',

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

@@ -1,5 +1,9 @@
 <template>
-  <Container :align-items="alignItems" :input-width="inputWidth">
+  <Container
+    :align-items="alignItems"
+    :input-width="inputWidth"
+    :is-relative-error-message="isRelativeErrorMessage"
+  >
     <LabelSlotWrapper
       v-if="hasLabelSlot"
       :align-items="alignItems"
@@ -193,9 +197,12 @@
         </ArrowButton>
       </ArrowControls>
     </InputWrapper>
-    <ErrorMessage v-if="isError && errorMessage">{{
-      errorMessage
-    }}</ErrorMessage>
+
+    <ErrorMessage
+      v-if="isError && errorMessage"
+      :is-relative="isRelativeErrorMessage"
+      >{{ errorMessage }}</ErrorMessage
+    >
   </Container>
 </template>
 
@@ -270,14 +277,15 @@
     readOnly: Boolean,
     isBorderErrorOnly: Boolean,
     isInfoBorder: Boolean,
+    isRelativeErrorMessage: Boolean,
   }
-
   const Container = styled('div', inputProps)`
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
     position: relative;
-    display: grid;
+    display: ${(props) => (props.isRelativeErrorMessage ? 'flex' : 'grid')};
     grid-template-columns: ${(props) =>
       props.alignItems === 'vertical' ? '1fr' : 'auto 1fr'};
+    ${(props) => props.isRelativeErrorMessage && 'flex-direction: column'};
   `
 
   const InputContainer = styled('input', inputProps)`
@@ -811,6 +819,10 @@
         type: Boolean,
         default: false,
       },
+      isRelativeErrorMessage: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {