@eturnity/eturnity_reusable_components 8.13.13-epic-shading.1 → 8.13.13-qa-16-03-26.1

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="
@@ -142,12 +138,11 @@
               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 +162,17 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-fixed-dropdown-position="isFixedDropdownPosition"
+              :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
+              :style="{
+                transform: `translate(${dropdownPosition?.left}px, ${
+                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                })`,
+              }"
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
@@ -208,7 +210,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'
@@ -392,14 +394,17 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
+    isParentModal: Boolean,
+    isFixedDropdownPosition: 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: 0px;
+    left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -647,6 +652,11 @@
         type: String,
         required: false,
       },
+      isFixedDropdownPosition: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -664,6 +674,17 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
+        isDisplayedAtBottom: true,
+        selectTopPosition: 0,
+        selectAndDropdownDistance: 0,
+        animationFrameId: null,
+      }
+    },
+    setup() {
+      const modalRef = inject('modalRef')
+
+      return {
+        modalRef,
       }
     },
     computed: {
@@ -721,6 +742,9 @@
           /windows phone/i.test(userAgent)
         )
       },
+      isParentModal() {
+        return !!this.modalRef
+      },
     },
     watch: {
       value(val) {
@@ -734,8 +758,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)
@@ -748,11 +777,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
@@ -761,6 +809,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)
@@ -866,11 +920,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 =
@@ -963,6 +1017,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/modals/modal/index.vue

@@ -1,6 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    ref="modalRef"
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     :is-open="isOpen"
@@ -36,6 +37,7 @@
   //   <div>Data....</div>
   // </modal>
 
+  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -58,14 +60,14 @@
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
       : 'rgba(255, 255, 255, 0.9)'};
-  z-index: 99999;
+  z-index: 9999999;
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-  @media (max-width: 425px) {
-    background: white;
-  }
-`
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
 
   const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -163,6 +165,14 @@
         default: false,
       },
     },
+    setup() {
+      const modalRef = ref(null)
+      provide('modalRef', modalRef)
+
+      return {
+        modalRef,
+      }
+    },
     watch: {
       isOpen: {
         immediate: true,

package/src/helpers/isObjectEqual.js

@@ -0,0 +1,22 @@
+import { toRaw } from 'vue'
+
+export default function isObjectEqual(obj1, obj2) {
+  obj1 = toRaw(obj1)
+  obj2 = toRaw(obj2)
+  if (obj1 === obj2) return true
+  if (obj1 === null || obj2 === null) return false
+  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false
+
+  const isArray1 = Array.isArray(obj1)
+  const isArray2 = Array.isArray(obj2)
+  if (isArray1 !== isArray2) return false
+
+  const keys1 = Object.keys(obj1)
+  if (keys1.length !== Object.keys(obj2).length) return false
+
+  return keys1.every(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(obj2, key) &&
+      isObjectEqual(obj1[key], obj2[key])
+  )
+}

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = parseFloat(value)
+  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits:

package/src/main.js

@@ -2,6 +2,14 @@ import App from './App.vue'
 import { createApp } from 'vue'
 import router from './router/dynamicRoutes'
 
+const link = document.createElement('link')
+link.href =
+  'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap'
+link.rel = 'stylesheet'
+document.getElementsByTagName('head')[0].appendChild(link)
+
 const app = createApp(App)
+
+app.config.globalProperties.$c = console
 app.use(router)
 app.mount('#app')

package/src/router/dynamicRoutes.js

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Test from '@/Test.vue'
 import Toggle from '@/components/inputs/toggle/index.vue'
+import TestChart from '@/TestChart.vue'
+import DemoCharts from '@/DemoCharts.vue'
 
 const routes = [
   {
@@ -13,6 +15,16 @@ const routes = [
     name: 'Toggle',
     component: Toggle,
   },
+  {
+    path: '/test-chart',
+    name: 'TestChart',
+    component: TestChart,
+  },
+  {
+    path: '/demo-charts',
+    name: 'DemoCharts',
+    component: DemoCharts,
+  },
 ]
 
 const router = createRouter({

package/src/assets/icons/collapse_arrow_icon_white.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 5"><g data-name="Layer 2"><path fill="#ffffff" d="M0 0h8L4 5 0 0z" data-name="Layer 1"/></g></svg>

package/src/assets/svgIcons/house_sun.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.5C8.27614 0.5 8.5 0.723858 8.5 1V2.86667C8.5 3.14281 8.27614 3.36667 8 3.36667C7.72386 3.36667 7.5 3.14281 7.5 2.86667V1C7.5 0.723858 7.72386 0.5 8 0.5ZM0.5 8C0.5 7.72386 0.723858 7.5 1 7.5H2.86667C3.14281 7.5 3.36667 7.72386 3.36667 8C3.36667 8.27614 3.14281 8.5 2.86667 8.5H1C0.723858 8.5 0.5 8.27614 0.5 8ZM12.6333 8C12.6333 7.72386 12.8572 7.5 13.1333 7.5H15C15.2761 7.5 15.5 7.72386 15.5 8C15.5 8.27614 15.2761 8.5 15 8.5H13.1333C12.8572 8.5 12.6333 8.27614 12.6333 8ZM8.99987 10.8145C9.09475 11.0816 9.39061 11.2244 9.64095 11.0915C10.059 10.8696 10.4293 10.5644 10.728 10.1927C11.1343 9.6872 11.3922 9.0787 11.4728 8.43514C11.5535 7.79158 11.4537 7.13827 11.1847 6.54812C10.9156 5.95796 10.4879 5.45417 9.94915 5.09297C9.41045 4.73177 8.78197 4.52736 8.13385 4.50256C7.48573 4.47776 6.84347 4.63353 6.27873 4.9525C5.71399 5.27148 5.24899 5.7411 4.93563 6.30896C4.70526 6.72642 4.56349 7.1849 4.51696 7.65586C4.48909 7.93792 4.73355 8.15738 5.01665 8.14374C5.29975 8.1301 5.51274 7.8874 5.55771 7.60756C5.60274 7.32731 5.69588 7.05561 5.83426 6.80486C6.05573 6.40352 6.38437 6.07162 6.7835 5.84619C7.18262 5.62076 7.63654 5.51066 8.0946 5.52819C8.55265 5.54572 8.99683 5.69019 9.37756 5.94546C9.75829 6.20074 10.0606 6.55679 10.2507 6.97388C10.4409 7.39098 10.5114 7.8527 10.4544 8.30754C10.3974 8.76237 10.2152 9.19242 9.928 9.54971C9.74858 9.77293 9.5326 9.96227 9.29044 10.1103C9.04864 10.2582 8.90499 10.5474 8.99987 10.8145ZM5.17261 9.95833C5.36097 9.79137 5.64409 9.79046 5.83352 9.95621L8.82925 12.5775C8.93776 12.6724 9 12.8096 9 12.9538V14.5C9 14.7761 9.22386 15 9.5 15C9.77614 15 10 14.7761 10 14.5V12.9538C10 12.5212 9.81328 12.1097 9.48776 11.8249L6.49202 9.20363C5.92373 8.70638 5.0744 8.7091 4.5093 9.20998L1.50504 11.8728C1.18385 12.1575 1 12.5662 1 12.9954V14.5C1 14.7761 1.22386 15 1.5 15C1.77614 15 2 14.7761 2 14.5V12.9954C2 12.8523 2.06128 12.7161 2.16835 12.6212L5.17261 9.95833ZM3.40391 2.69668C3.20865 2.50142 2.89206 2.50142 2.6968 2.69668C2.50154 2.89194 2.50154 3.20852 2.6968 3.40379L4.01673 4.72372C4.212 4.91898 4.52858 4.91898 4.72384 4.72372C4.9191 4.52846 4.9191 4.21187 4.72384 4.01661L3.40391 2.69668ZM11.2764 4.01661C11.0811 4.21187 11.0811 4.52846 11.2764 4.72372C11.4716 4.91898 11.7882 4.91898 11.9835 4.72372L13.3034 3.40379C13.4987 3.20852 13.4987 2.89194 13.3034 2.69668C13.1081 2.50142 12.7916 2.50142 12.5963 2.69668L11.2764 4.01661ZM11.9835 11.2762C11.7882 11.081 11.4716 11.081 11.2764 11.2762C11.0811 11.4715 11.0811 11.7881 11.2764 11.9833L12.5963 13.3033C12.7916 13.4985 13.1081 13.4985 13.3034 13.3033C13.4987 13.108 13.4987 12.7914 13.3034 12.5962L11.9835 11.2762Z" fill="black"/>
-</svg>

package/src/components/draggableCard/defaultProps.js

@@ -1,16 +0,0 @@
-const defaultProps = {
-  title: 'Sample Title',
-  infoText: 'Sample Info Text',
-  initialPosition: { top: '0px', left: '0px' },
-  minWidth: '284px',
-  maxWidth: '284px',
-  dragTargets: ['document'],
-  dragBounds: {},
-  sampleBody1:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-  sampleBody2:
-    'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-  sampleFooter: 'Sample footer',
-}
-
-export default defaultProps

package/src/components/draggableCard/draggableCard.spec.js

@@ -1,99 +0,0 @@
-import { mount } from '@vue/test-utils'
-import DraggableCard from '@/components/draggableCard'
-import defaultProps from './defaultProps'
-
-jest.mock('@/components/icon/iconCache.mjs', () => ({
-  // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
-}))
-
-describe('DraggableCard.vue', () => {
-  it('renders properly with required props', () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    expect(
-      wrapper.find('[data-test-id="draggable_card_header"]').text()
-    ).toContain(defaultProps.title)
-
-    // Expect no footer rendered if not provided
-    const footerElement = wrapper.find('[data-test-id="draggable_card_footer"]')
-    expect(footerElement.exists()).toBe(false)
-  })
-
-  it('renders body slot content correctly', () => {
-    const wrapper = mount(DraggableCard, {
-      props: defaultProps,
-      slots: {
-        body: `
-          <div class="custom_body1">${defaultProps.sampleBody1}</div>
-          <div class="custom_body2">${defaultProps.sampleBody2}</div>
-        `,
-      },
-    })
-    expect(wrapper.find('.custom_body1').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleBody1)
-    expect(wrapper.find('.custom_body2').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleBody2)
-  })
-
-  it('renders footer slot content correctly', () => {
-    const wrapper = mount(DraggableCard, {
-      props: defaultProps,
-      slots: {
-        footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
-      },
-    })
-    expect(
-      wrapper.find('[data-test-id="draggable_card_footer"]').exists()
-    ).toBe(true)
-    expect(wrapper.find('.custom_footer').exists()).toBe(true)
-    expect(wrapper.text()).toContain(defaultProps.sampleFooter)
-  })
-
-  it('emits "on-close" when close button is clicked', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    await wrapper
-      .find('[data-test-id="draggable_card_close_button"]')
-      .trigger('click')
-    expect(wrapper.emitted('on-close')).toBeTruthy()
-  })
-
-  it('toggles collapse state when arrow icon is clicked', async () => {
-    const wrapper = mount(DraggableCard, {
-      props: { ...defaultProps, isCollapsible: true },
-    })
-    expect(wrapper.vm.isCollapsed).toBe(false)
-    await wrapper
-      .find('[data-test-id="draggable_card_collapse_button"]')
-      .trigger('click')
-    expect(wrapper.vm.isCollapsed).toBe(true)
-  })
-
-  it('handles drag start event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    await wrapper
-      .find('[data-test-id="draggable_card_drag_icon"]')
-      .trigger('mousedown', { clientX: 100, clientY: 100 })
-    expect(wrapper.vm.isDragging).toBe(true)
-  })
-
-  it('handles drag move event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDrag({ preventDefault: () => {}, clientX: 120, clientY: 120 })
-    expect(wrapper.vm.eventCoordinates.x).toBe(120)
-    expect(wrapper.vm.eventCoordinates.y).toBe(120)
-  })
-
-  it('handles drag end event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDragEnd()
-    expect(wrapper.vm.isDragging).toBe(false)
-  })
-})

package/src/components/draggableCard/draggableCard.stories.js

@@ -1,79 +0,0 @@
-import defaultProps from './defaultProps'
-import DraggableCard from './index.vue'
-import styled from 'vue3-styled-components'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'DraggableCard',
-  component: DraggableCard,
-  tags: ['autodocs'],
-}
-
-const TextContainer = styled.div`
-  font-family: ${theme.fonts.mainFont};
-  color: ${theme.colors.white};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 0%;
-`
-
-const CompleteTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
-      <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
-      </template>
-      <template #footer>
-        <TextContainer>{{ args.sampleFooter }}</TextContainer>
-      </template>
-      </DraggableCard>
-    `,
-  }
-}
-
-export const Default = CompleteTemplate.bind({})
-Default.args = {
-  ...defaultProps,
-}
-
-export const NotCollapsible = CompleteTemplate.bind({})
-NotCollapsible.args = {
-  ...defaultProps,
-  isCollapsible: false,
-}
-
-export const AdjustWidth = CompleteTemplate.bind({})
-AdjustWidth.args = {
-  ...defaultProps,
-  minWidth: '100px',
-  maxWidth: '500px',
-}
-
-const NoFooterTemplate = (args) => {
-  return {
-    components: { DraggableCard, TextContainer },
-    setup() {
-      return { args }
-    },
-    template: `
-      <DraggableCard v-bind="args">
-      <template #body>
-        <TextContainer>{{ args.sampleBody1 }}</TextContainer>
-        <TextContainer>{{ args.sampleBody2 }}</TextContainer>
-      </template>
-      </DraggableCard>
-    `,
-  }
-}
-
-export const NoFooter = NoFooterTemplate.bind({})
-NoFooter.args = {
-  ...defaultProps,
-}