@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.5 → 8.16.2--EPDM-14330.7

package/src/components/filterComponent/viewSort.vue

@@ -3,6 +3,7 @@
     <ButtonIcon
       class="button-icon"
       icon-name="sorting"
+      :number-count="getNumberCount()"
       :text="$gettext('sort')"
       type="filter"
       @click="toggleOptions"
@@ -22,6 +23,7 @@
                 class="sort-dropdown"
                 :dropdown-auto-close="false"
                 select-height="40px"
+                @click.stop
                 @input-change="
                   onSelectSort({
                     type: 'column',
@@ -52,6 +54,7 @@
                 class="sort-dropdown"
                 :dropdown-auto-close="false"
                 select-height="40px"
+                @click.stop
                 @input-change="
                   onSelectSort({
                     type: 'direction',
@@ -97,6 +100,7 @@
                 class="sort-dropdown"
                 :dropdown-auto-close="false"
                 select-height="40px"
+                @click.stop
                 @input-change="
                   onSelectSort({
                     type: 'column',
@@ -124,6 +128,7 @@
                 class="sort-dropdown"
                 :dropdown-auto-close="false"
                 select-height="40px"
+                @click.stop
                 @input-change="
                   onSelectSort({
                     type: 'direction',
@@ -267,17 +272,28 @@
       handleClickOutside(event) {
         const buttonIcon = this.$el.querySelector('.button-icon')
         const boxContainer = this.$el.querySelector('.box-container')
-        const isClickInDropdown = event.target.closest('.sort-dropdown')
+        const isClickInSelect =
+          event.target.closest('.sort-dropdown') ||
+          event.target.closest('.rc-select-dropdown') ||
+          event.target.closest('.select-button') ||
+          event.target.closest('.caret_dropdown')
 
         if (
           !buttonIcon.contains(event.target) &&
           !boxContainer.contains(event.target) &&
-          !isClickInDropdown
+          !isClickInSelect
         ) {
           this.isOptionsVisible = false
           document.removeEventListener('click', this.handleClickOutside)
         }
       },
+      getNumberCount() {
+        return this.selectedSort.filter((item) => {
+          const hasColumn = !!item.column
+          const hasDirection = !!item.direction
+          return hasColumn && hasDirection
+        }).length
+      },
       toggleOptions() {
         this.isOptionsVisible = !this.isOptionsVisible
         if (this.isOptionsVisible) {
@@ -287,7 +303,6 @@
         }
       },
       getSelectedLabel({ type, value }) {
-        // debugger
         if (!value) return
         if (type === 'column') {
           return this.sortOptions.find((option) => option.value === value).label
@@ -297,8 +312,6 @@
         }
       },
       onSelectSort({ type, value, index }) {
-        console.log(type, value, index)
-
         this.$emit('on-sort-change', {
           type,
           value,

package/src/components/icon/index.vue

@@ -3,13 +3,15 @@
     :cursor="cursor"
     data-test-id="icon_wrapper"
     :disabled="disabled"
-    :size="size"
+    :height="height ? height : size"
+    :width="width ? width : size"
   >
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
+      :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
@@ -67,6 +69,16 @@
       default: '30px',
       type: String,
     },
+    width: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '',
+    },
     cursor: {
       required: false,
       default: null,
@@ -97,10 +109,15 @@
       default: 'fill',
       type: String,
     },
+    disableHover: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const Wrapper = styled('div', {
-    size: String,
+    height: String,
+    width: String,
     disabled: Boolean,
     cursor: String,
   })`
@@ -108,10 +125,10 @@
     position: relative;
     align-content: center;
     justify-content: center;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    min-width: ${(props) => props.size};
-    min-height: ${(props) => props.size};
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+    min-width: ${(props) => props.width};
+    min-height: ${(props) => props.height};
     cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
     line-height: 0;
   `
@@ -152,6 +169,7 @@
     hoveredColor: String,
     animation: String,
     fillType: String,
+    disableHover: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -168,12 +186,17 @@
       ${({ theme, color, fillType }) =>
         color && `${fillType}: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
-      ${(props) => `${props.fillType}: ${props.hoveredColor || props.color};`}
+    ${(props) =>
+      !props.disableHover &&
+      `
+     &:hover svg path:not(.fix) {
+      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
     }
     &:hover + div {
-      background-color: ${(props) => props.hoveredColor};
+      background-color: ${props.hoveredColor};
     }
+    `}
+
     @keyframes fade {
       50% {
         opacity: 0.3;

package/src/components/infoText/index.vue

@@ -46,7 +46,7 @@
       </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
-      <TextWrapper :style="wrapperStyle">
+      <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
           :app-theme="appTheme"
@@ -137,7 +137,7 @@
   `
 
   const TextWrapper = styled('div')`
-    z-index: 99999;
+    z-index: 9999999999;
     position: absolute;
   `
 

package/src/components/infoText/infoText.spec.js

@@ -29,6 +29,9 @@ describe('InfoText Component', () => {
         provide: {
           theme,
         },
+        stubs: {
+          teleport: true
+        }
       },
     })
   })
@@ -38,7 +41,6 @@ describe('InfoText Component', () => {
     expect(wrapper.vm.text).toContain('default text')
     expect(wrapper.vm.size).toContain('14px')
     expect(wrapper.vm.infoPosition).toContain('bottom')
-    expect(wrapper.vm.alignArrow).toContain('center')
   })
 
   test('openTrigger prop is set to onClick', async () => {
@@ -48,8 +50,11 @@ describe('InfoText Component', () => {
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
       false
     )
+
     //should see text upon click
     await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
+    expect(wrapper.vm.isVisible).toBe(true)
+
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
       true
     )

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

@@ -56,6 +56,7 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :read-only="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -163,6 +164,7 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
+  //     :isReadOnly="true"
   //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
@@ -202,6 +204,7 @@
     showLinearUnitName: Boolean,
     colorMode: String,
     showArrowControls: Boolean,
+    readOnly: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -250,7 +253,8 @@
         ? '0 4px 4px 0'
         : '4px'};
     text-align: ${(props) => props.textAlign};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+    cursor: ${(props) =>
+      props.isDisabled || props.readOnly ? 'not-allowed' : 'auto'};
     font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
     color: ${(props) =>
       props.isError
@@ -263,7 +267,9 @@
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.isDisabled
+      props.readOnly
+        ? props.theme.semanticColors.grey[300]
+        : props.isDisabled
         ? props.colorMode === 'transparent'
           ? 'transparent'
           : props.theme.colors.grey5
@@ -276,6 +282,8 @@
     box-sizing: border-box;
     opacity: ${(props) =>
       props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
+    pointer-events: ${(props) => (props.readOnly ? 'none' : 'auto')};
+    user-select: ${(props) => (props.readOnly ? 'none' : 'auto')};
 
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
@@ -686,6 +694,10 @@
         type: Boolean,
         default: false,
       },
+      isReadOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

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%')};
@@ -50,11 +56,12 @@
   const InputContainer = styled('input', inputAttrs)`
     border: 1px solid ${(props) => props.theme.colors.grey4};
     padding: ${(props) =>
-      props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+      props.isFilter ? '8px 30px 8px 10px' : '11px 30px 11px 10px'};
     border-radius: 4px;
     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: {

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

@@ -109,11 +109,7 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret
-            class="caret_dropdown"
-            :color-mode="colorMode"
-            @click.stop="toggleCaretDropdown"
-          >
+          <Caret class="caret_dropdown" :color-mode="colorMode">
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -137,17 +133,19 @@
           </Caret>
         </SelectButton>
         <DropdownWrapper ref="dropdownWrapperRef" :no-relative="noRelative">
-          <Teleport to="body">
+          <Component
+            :is="shouldUseTeleport ? 'Teleport' : 'div'"
+            :to="shouldUseTeleport ? 'body' : undefined"
+          >
             <SelectDropdown
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
+                colorMode == 'dark' || colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
+              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -167,10 +165,22 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-fixed-dropdown-position="isFixedDropdownPosition"
+              :is-parent-modal="isParentModal"
+              :is-teleport="shouldUseTeleport"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
+              :style="
+                shouldUseTeleport
+                  ? {
+                      transform: `translate(${dropdownPosition?.left}px, ${
+                        noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                      })`,
+                    }
+                  : undefined
+              "
               @click.stop
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
@@ -178,7 +188,7 @@
             >
               <slot name="dropdown"></slot>
             </SelectDropdown>
-          </Teleport>
+          </Component>
         </DropdownWrapper>
       </SelectButtonWrapper>
     </InputWrapper>
@@ -209,7 +219,7 @@
   //     </template>
   // </Select>
 
-  import { Teleport } from 'vue'
+  import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import Icon from '../../icon'
@@ -393,14 +403,18 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
+    isParentModal: Boolean,
+    isFixedDropdownPosition: Boolean,
+    isTeleport: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
-    z-index: ${(props) => (props.isActive ? '2' : '99999')};
-    position: absolute;
-    top: ${(props) =>
-      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
-    left: ${(props) => props.dropdownPosition?.left}px;
+    z-index: ${(props) =>
+      props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
+    position: ${(props) =>
+      props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
+    top: ${(props) => (props.isTeleport ? '0px' : '4px')};
+    left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -648,6 +662,23 @@
         type: String,
         required: false,
       },
+      isFixedDropdownPosition: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      shouldUseTeleport: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+    },
+    setup() {
+      const modalRef = inject('modalRef')
+
+      return {
+        modalRef,
+      }
     },
 
     data() {
@@ -665,6 +696,10 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
+        isDisplayedAtBottom: true,
+        selectTopPosition: 0,
+        selectAndDropdownDistance: 0,
+        animationFrameId: null,
       }
     },
     computed: {
@@ -722,6 +757,9 @@
           /windows phone/i.test(userAgent)
         )
       },
+      isParentModal() {
+        return !!this.modalRef
+      },
     },
     watch: {
       value(val) {
@@ -735,8 +773,13 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
+          if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
+          if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId)
+            this.animationFrameId = null
+          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -749,11 +792,30 @@
           })
         }
       },
+      isSelectDropdownShown(isShown) {
+        if (!isShown) return
+        // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
+        // before getting the distance between the select and the dropdown menu
+        setTimeout(() => {
+          this.getDistanceBetweenSelectAndDropdownMenu()
+        }, 100)
+      },
+      selectTopPosition() {
+        this.dropdownPosition.top =
+          this.selectTopPosition +
+          this.$refs.select.$el.clientHeight +
+          this.selectAndDropdownDistance
+      },
     },
     mounted() {
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
+      if (!this.isFixedDropdownPosition)
+        document.body.addEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -762,6 +824,12 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
+      if (!this.isFixedDropdownPosition) {
+        document.body.removeEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
+      }
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -837,7 +905,9 @@
           this.$refs.select.$el == event.target ||
           this.$refs.select.$el.contains(event.target) ||
           event.target.id === 'more-button' ||
-          event.target.parentNode === dropdownRef.$el
+          event.target.closest('.options-container') ||
+          event.target.parentNode === dropdownRef.$el ||
+          dropdownRef.$el.contains(event.target)
         ) {
           return
         } else {
@@ -867,11 +937,11 @@
           return
         }
         await this.$nextTick()
-        const isDisplayedAtBottom = await this.generateDropdownPosition()
+        this.isDisplayedAtBottom = await this.generateDropdownPosition()
         // If the dropdown menu is going to be displayed at the bottom,
         // we need reverify its position after a dom update (nextTick)
         await this.$nextTick()
-        if (isDisplayedAtBottom) this.generateDropdownPosition()
+        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -964,6 +1034,25 @@
           }
         }
       },
+      getDistanceBetweenSelectAndDropdownMenu() {
+        const wholeSelectTopPosition =
+          this.selectTopPosition + this.$refs.select.$el.clientHeight
+        this.selectAndDropdownDistance =
+          this.dropdownPosition.top - wholeSelectTopPosition
+      },
+      calculateSelectTopPosition() {
+        const selectRef = this.$refs.select
+        if (selectRef) {
+          const currentTopPosition =
+            selectRef.$el.getBoundingClientRect().top + window.scrollY
+          if (this.selectTopPosition !== currentTopPosition) {
+            this.selectTopPosition = currentTopPosition
+          }
+        }
+        this.animationFrameId = requestAnimationFrame(
+          this.calculateSelectTopPosition
+        )
+      },
     },
   }
 </script>

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

@@ -142,6 +142,11 @@
         required: false,
         default: 'inherit',
       },
+      showFullName: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
     emits: ['option-hovered', 'option-selected'],
     data() {

package/src/components/modals/actionModal/actionModal.spec.js

@@ -0,0 +1,52 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import ActionModal from '@/components/modals/actionModal'
+import theme from '@/assets/theme'
+
+describe('ActionModal Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ActionModal, {
+      props: {
+        isOpen: true,
+        buttonText: 'Close',
+      },
+      slots: {
+        title: 'Sample title',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt commodo mollis. Fusce urna felis, malesuada sed elementum et, fermentum ac massa. Integer in massa vel orci fermentum bibendum in ut ante. Donec risus risus, luctus quis ex a, pulvinar placerat lacus. Sed pharetra augue a elit volutpat, eu dignissim ex pretium. Aenean imperdiet, nulla in pharetra rutrum, mauris mauris tincidunt tellus, non tempus quam lorem laoreet lectus.',
+        buttons: '<button @click="closeAction">Close</button>',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  test('renders ActionModal component with default props', () => {
+    expect(wrapper.find('[data-test-id="actionModal"]').exists()).toBe(true)
+
+    expect(wrapper.vm.isOpen).toBe(true)
+  })
+
+  test('action modal slots is display when user passed slots content', () => {
+    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
+    expect(modalTitleEl.text()).toBe('Sample title')
+
+    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
+    expect(modalBodyEl.text()).toContain('Lorem ipsum dolor sit amet')
+
+    const modalActionButton = wrapper.find('[data-test-id="modal_buttons"]')
+    expect(modalActionButton.text()).toContain('Close')
+  })
+
+  test('action modal on-close event is emitted when modal close button is clicked', async () => {
+    const modalCloseButton = wrapper.find('.close')
+
+    modalCloseButton.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('on-close')).toBeTruthy()
+  })
+})