@eturnity/eturnity_reusable_components 8.40.1 → 8.40.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.40.1",
+  "version": "8.40.3",
   "files": [
     "dist",
     "src"

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

@@ -16,6 +16,9 @@
       :width="width"
     >
       <LabelComponent :has-icon="Boolean(icon)" :reverse-direction="iconLast">
+        <FlexSpinner v-if="isLoading">
+          <RCSpinner size="tiny" />
+        </FlexSpinner>
         <Icon
           v-if="icon"
           :color="getIconColor"
@@ -44,6 +47,7 @@
   // />
 
   import styled from 'vue3-styled-components'
+  import RCSpinner from '../../spinner'
   import Icon from '../../icon'
   import theme from '../../../assets/theme'
 
@@ -174,6 +178,10 @@
     transform: rotate(20deg);
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   `
+  const FlexSpinner = styled('div')`
+    flex: 0;
+    margin-right: 8px;
+  `
 
   export default {
     name: 'MainButton',
@@ -183,6 +191,8 @@
       PageContainer,
       ButtonContainer,
       BetaTag,
+      RCSpinner,
+      FlexSpinner,
     },
     props: {
       type: {
@@ -285,6 +295,10 @@
         type: Boolean,
         default: false,
       },
+      isLoading: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       theme() {

package/src/components/filter/index.vue

@@ -3,6 +3,7 @@
     <ParentDropdown
       :dropdown-text="dropdownText ? dropdownText : 'Default view'"
       :is-open="isDropdownOpen"
+      :number-of-filters-applied="numberOfFiltersApplied"
       @on-toggle="onToggleDropdown()"
     />
     <FilterSettings
@@ -74,6 +75,11 @@
       closeDropdown: {
         required: false,
       },
+      activeFilterView: {
+        type: Object,
+        default: null,
+        required: false,
+      },
     },
     data() {
       return {
@@ -82,6 +88,14 @@
         preventOutsideClick: false,
       }
     },
+    computed: {
+      numberOfFiltersApplied() {
+        const filterColumns = this.activeFilterView?.columns?.filter(
+          (column) => column.custom_view_filter !== null
+        )
+        return filterColumns?.length > 0 ? filterColumns.length : 0
+      },
+    },
     watch: {
       closeDropdown(newVal) {
         if (newVal) {

package/src/components/filter/parentDropdown.vue

@@ -6,6 +6,9 @@
     <TitleWrapper :is-open="isOpen">
       <TitleText>
         {{ dropdownText }}
+        <Counter v-if="numberOfFiltersApplied">
+          {{ numberOfFiltersApplied }}
+        </Counter>
       </TitleText>
       <ArrowWrapper>
         <Icon
@@ -43,18 +46,32 @@
     grid-template-columns: auto auto;
     align-items: center;
     justify-items: center;
-    grid-gap: 10px;
+    grid-gap: 8px;
     border: 1px solid ${(props) => props.theme.colors.grey4};
     background-color: ${(props) =>
       props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
     border-left: none;
     border-radius: 0px 4px 4px 0px;
-    padding: 6px 14px;
+    padding: 6px 10px;
     user-select: none;
   `
 
   const TitleText = styled.div`
     font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `
+
+  const Counter = styled.div`
+    line-height: 18px;
+    border-radius: 8px;
+    padding: 0 8px;
+    background: ${(props) => props.theme.semanticColors.purple['100']};
+    color: ${(props) => props.theme.colors.primary};
+    display: flex;
+    align-items: center;
+    justify-content: center;
   `
 
   const ArrowWrapper = styled.div`
@@ -75,6 +92,7 @@
       IconWrapper,
       TitleWrapper,
       TitleText,
+      Counter,
       ArrowWrapper,
     },
     props: {
@@ -86,6 +104,11 @@
         required: true,
         default: 'View',
       },
+      numberOfFiltersApplied: {
+        required: false,
+        default: 0,
+        type: Number,
+      },
     },
   }
 </script>

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

@@ -179,7 +179,7 @@
   }
   const LabelText = styled('div', LabelTextAttrs)`
     font-size: 13px;
-    display: grid;
+    display: flex;
     align-items: center;
     min-height: 16px;
     color: ${(props) =>

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

@@ -93,7 +93,7 @@
           v-if="hasError && hasErrorMessage"
           data-test-id="error_message_wrapper"
         >
-          {{ dynamicErrorMessage }}
+          {{ errorMessage }}
         </ErrorMessage>
       </InputErrorWrapper>
     </InputWrapper>
@@ -444,9 +444,6 @@
       hasErrorMessage() {
         return this.errorMessage && this.errorMessage.length > 0
       },
-      dynamicErrorMessage() {
-        return this.errorMessage
-      },
     },
     watch: {
       hasFocus(newVal) {

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

@@ -1,77 +1,85 @@
 <template>
-  <ComponentWrapper :color-mode="colorMode" :layout="layout">
-    <RadioWrapper
-      v-for="(item, index) in options"
-      :key="item.value"
-      :data-test-id="'radioWrapper_' + item.value"
-    >
-      <LabelContainer
-        :checkmark-color="checkmarkColor"
-        :color-mode="colorMode"
-        :has-label="!!item.label"
-        :has-slots="!!$slots[`input-${item.value}`]"
-        :is-checked="selectedOption === item.value"
-        :is-disabled="isItemDisabled(item)"
-        :size="size"
+  <FlexRadioContainer>
+    <ComponentWrapper :color-mode="colorMode" :layout="layout">
+      <RadioWrapper
+        v-for="(item, index) in options"
+        :key="item.value"
+        :data-test-id="'radioWrapper_' + item.value"
       >
-        <Radio
-          :checked="selectedOption === item.value"
-          :data-id="`radio_button_${dataId}_option_${item.value}`"
-          :data-qa-id="dataQaId"
-          :data-test-id="'radioInput_' + item.value"
-          :disabled="isItemDisabled(item)"
-          :name="'radioButtons_' + radioName"
-          type="radio"
-          :value="selectedOption"
-          @click="onInputHandler(item.value)"
-        />
-        <span class="checkmark"></span>
-        <LabelText
-          v-if="item.label"
+        <LabelContainer
+          :checkmark-color="checkmarkColor"
           :color-mode="colorMode"
-          :data-test-id="'radioLabel_' + item.value"
+          :has-label="!!item.label"
+          :has-slots="!!$slots[`input-${item.value}`]"
+          :is-checked="selectedOption === item.value"
           :is-disabled="isItemDisabled(item)"
+          :size="size"
         >
-          {{ item.label }}
-          <IsRequiredLabelStar v-if="isRequiredLabel" />
-        </LabelText>
-        <InfoText
-          v-if="item.infoText"
-          :data-test-id="'radioInfo_' + item.value"
-          size="16px"
-          :text="item.infoText"
-        />
-        <slot :name="`input-${item.value}`"></slot>
-      </LabelContainer>
-      <ImageContainer v-if="item.img">
-        <RadioImage
-          :data-test-id="'radioImage_' + item.value"
-          :src="item.img"
-        />
-        <div
-          class="search-icn-container"
-          :data-test-id="'radioOpenImage_' + item.value"
-          @click="toggleImageModal(index)"
-        >
-          <img
-            alt=""
-            class="search-icn"
-            :src="require('../../../assets/icons/search_icon.png')"
+          <Radio
+            :checked="selectedOption === item.value"
+            :data-id="`radio_button_${dataId}_option_${item.value}`"
+            :data-qa-id="dataQaId"
+            :data-test-id="'radioInput_' + item.value"
+            :disabled="isItemDisabled(item)"
+            :name="'radioButtons_' + radioName"
+            type="radio"
+            :value="selectedOption"
+            @click="onInputHandler(item.value)"
           />
-        </div>
-      </ImageContainer>
-      <Modal
-        v-if="item.img"
-        :data-test-id="'radioModal_' + item.value"
-        :is-open="isImageOpen(index)"
-        @on-close="toggleImageModal(null)"
-      >
-        <ModalImageContainer>
-          <ModalImage :src="item.img" />
-        </ModalImageContainer>
-      </Modal>
-    </RadioWrapper>
-  </ComponentWrapper>
+          <span class="checkmark"></span>
+          <LabelText
+            v-if="item.label"
+            :color-mode="colorMode"
+            :data-test-id="'radioLabel_' + item.value"
+            :is-disabled="isItemDisabled(item)"
+          >
+            {{ item.label }}
+            <IsRequiredLabelStar v-if="isRequiredLabel" />
+          </LabelText>
+          <InfoText
+            v-if="item.infoText"
+            :data-test-id="'radioInfo_' + item.value"
+            size="16px"
+            :text="item.infoText"
+          />
+          <slot :name="`input-${item.value}`"></slot>
+        </LabelContainer>
+        <ImageContainer v-if="item.img">
+          <RadioImage
+            :data-test-id="'radioImage_' + item.value"
+            :src="item.img"
+          />
+          <div
+            class="search-icn-container"
+            :data-test-id="'radioOpenImage_' + item.value"
+            @click="toggleImageModal(index)"
+          >
+            <img
+              alt=""
+              class="search-icn"
+              :src="require('../../../assets/icons/search_icon.png')"
+            />
+          </div>
+        </ImageContainer>
+        <Modal
+          v-if="item.img"
+          :data-test-id="'radioModal_' + item.value"
+          :is-open="isImageOpen(index)"
+          @on-close="toggleImageModal(null)"
+        >
+          <ModalImageContainer>
+            <ModalImage :src="item.img" />
+          </ModalImageContainer>
+        </Modal>
+      </RadioWrapper>
+    </ComponentWrapper>
+    <ErrorMessage
+      v-if="hasError && errorMessage"
+      data-test-id="error_message_wrapper"
+    >
+      {{ errorMessage }}
+    </ErrorMessage>
+  </FlexRadioContainer>
 </template>
 
 <script>
@@ -99,6 +107,7 @@
   import Modal from '../../modals/modal'
   import InfoText from '../../infoText'
   import IsRequiredLabelStar from '../isRequiredLabelStar'
+  import ErrorMessage from '../../errorMessage'
 
   const wrapperProps = {
     layout: String,
@@ -246,7 +255,11 @@
   const ModalImageContainer = styled.div`
     padding: 40px;
   `
-
+  const FlexRadioContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  `
   export default {
     name: 'RadioButton',
     components: {
@@ -262,6 +275,8 @@
       InfoText,
       LabelText,
       IsRequiredLabelStar,
+      ErrorMessage,
+      FlexRadioContainer,
     },
     props: {
       disabled: {
@@ -320,6 +335,16 @@
         default: false,
         type: Boolean,
       },
+      hasError: {
+        required: false,
+        default: false,
+        type: Boolean,
+      },
+      errorMessage: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     emits: ['on-radio-change'],
     data() {

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

@@ -201,6 +201,12 @@
             </SelectDropdown>
           </Component>
         </DropdownWrapper>
+        <ErrorMessage
+          v-if="hasError && hasErrorMessage"
+          data-test-id="error_message_wrapper"
+        >
+          {{ errorMessage }}
+        </ErrorMessage>
       </SelectButtonWrapper>
     </InputWrapper>
   </Container>
@@ -233,6 +239,7 @@
   import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
+  import ErrorMessage from '../../errorMessage'
   import Icon from '../../icon'
   import InputText from '../inputText'
   import DraggableInputHandle from '../../draggableInputHandle'
@@ -302,7 +309,6 @@
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
-    display: inline-block;
     text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
@@ -514,6 +520,7 @@
       Teleport,
       DraggableInputHandle,
       IsRequiredLabelStar,
+      ErrorMessage,
     },
 
     props: {
@@ -620,9 +627,14 @@
         default: true,
       },
       hasError: {
+        type: Boolean,
         required: false,
         default: false,
       },
+      errorMessage: {
+        type: String,
+        default: '',
+      },
       disabled: {
         required: false,
         type: Boolean,
@@ -735,6 +747,9 @@
       }
     },
     computed: {
+      hasErrorMessage() {
+        return this.errorMessage && this.errorMessage.length > 0
+      },
       optionLength() {
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1

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

@@ -25,6 +25,8 @@
           :resize="resize"
           :rows="rowHeight"
           :value="value"
+          @blur="onInputBlur"
+          @focus="onInputFocus"
           @input="onChangeHandler"
         ></textarea>
       </InputContainer>
@@ -208,6 +210,12 @@
         }
         this.$emit('input-change', $event.target.value)
       },
+      onInputBlur($event) {
+        this.$emit('input-blur', $event.target.value)
+      },
+      onInputFocus($event) {
+        this.$emit('input-focus', $event.target.value)
+      },
     },
   }
 </script>

package/src/components/spinner/index.vue

@@ -59,6 +59,8 @@
 
   const getSpinnerSize = (size) => {
     switch (size) {
+      case 'tiny':
+        return '16px'
       case 'small':
         return '24px'
       case 'large':