@eturnity/eturnity_reusable_components 8.13.13-qa-16-03-26.1 → 8.13.13-qa-16-03-26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.13-qa-16-03-26.1",
+  "version": "8.13.13-qa-16-03-26.2",
   "files": [
     "dist",
     "src"

package/src/components/barchart/index.vue

@@ -48,6 +48,9 @@
           :is-scrollable="isScrollable"
           :total-bars="normalizedData.length"
         >
+          <LoadingOverlay v-if="isLoading">
+            <Spinner size="60px" />
+          </LoadingOverlay>
           <SelectionBox
             v-if="selectionSize && isSelectionEnabled"
             :bar-width="barWidth"
@@ -173,6 +176,7 @@
   import ChartControls from './ChartControls'
   import BottomFields from './BottomFields'
   import SelectionBox from './SelectionBox'
+  import Spinner from '../spinner'
 
   import {
     useTooltip,
@@ -205,6 +209,7 @@
     TooltipRow,
     TooltipGradientBox,
     ChartControlsWrapper,
+    LoadingOverlay,
   } from './styles/chart'
 
   const props = defineProps({
@@ -287,6 +292,10 @@
       default: 'absolute',
       validator: (value) => ['absolute', 'percentage'].includes(value),
     },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const generateChartId = () =>

package/src/components/barchart/styles/chart.js

@@ -257,3 +257,16 @@ export const BottomFieldsContainer = styled.div`
   margin-top: 16px;
   width: 100%;
 `
+
+export const LoadingOverlay = styled('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+`

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

@@ -1,6 +1,10 @@
 <template>
   <Container :input-width="inputWidth">
-    <InputWrapper :icon-color="iconColor" :icon-position="iconPosition">
+    <InputWrapper
+      :icon-color="iconColor"
+      :icon-position="iconPosition"
+      :is-full-height="isFullHeight"
+    >
       <SearchIconSvg class="search-icn" />
       <InputContainer
         ref="inputElement"
@@ -11,6 +15,7 @@
         :input-width="inputWidth"
         :is-disabled="disabled"
         :is-filter="isFilter"
+        :is-full-height="isFullHeight"
         :placeholder="placeholder"
         :value="value"
         @input="onChangeHandler($event)"
@@ -41,6 +46,7 @@
     isDisabled: Boolean,
     inputWidth: String,
     isFilter: Boolean,
+    isFullHeight: Boolean,
   }
   const Container = styled('div', inputAttrs)`
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
@@ -55,6 +61,7 @@
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
     box-sizing: border-box;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
     background: ${(props) => props.theme.colors.white} !important;
@@ -67,9 +74,14 @@
     }
   `
 
-  const wrapperAttrs = { iconColor: String, iconPosition: String }
+  const wrapperAttrs = {
+    iconColor: String,
+    iconPosition: String,
+    isFullHeight: Boolean,
+  }
   const InputWrapper = styled('div', wrapperAttrs)`
     position: relative;
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
 
     svg {
       position: absolute;
@@ -142,6 +154,10 @@
         type: String,
         default: 'black',
       },
+      isFullHeight: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['on-change'],
     watch: {