@eturnity/eturnity_reusable_components 8.10.3-EPDM-14085.1 → 8.10.3-EPDM-13568.6

package/src/assets/svgIcons/inverter-1.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.72271 6.43179V8.55952H4.48362V9.85441H1.72271V12.0278H5.27082V13.3683H0V5.09127H5.27082V6.43179H1.72271Z" fill="white"/>
-<path d="M8.27381 6.43179V8.71924H11.2515V10.0655H8.27381V13.3683H6.55109V5.09127H11.8219V6.43179H8.27381Z" fill="white"/>
-<path d="M17.441 6.67708C17.3877 6.76455 17.3326 6.8292 17.2755 6.87103C17.2223 6.90906 17.152 6.92807 17.0645 6.92807C16.9808 6.92807 16.8896 6.89955 16.7907 6.84251C16.6956 6.78166 16.5834 6.71701 16.4541 6.64856C16.3248 6.58011 16.1765 6.51736 16.0092 6.46031C15.8419 6.39947 15.646 6.36905 15.4216 6.36905C15.0261 6.36905 14.7295 6.45841 14.5318 6.63715C14.334 6.81208 14.2351 7.04216 14.2351 7.32738C14.2351 7.50992 14.2884 7.66203 14.3948 7.78372C14.5051 7.90161 14.6477 8.00429 14.8227 8.09176C15.0014 8.17923 15.203 8.25719 15.4273 8.32564C15.6517 8.39409 15.8818 8.47015 16.1176 8.55381C16.3533 8.63367 16.5834 8.72875 16.8078 8.83903C17.0322 8.94931 17.2318 9.08812 17.4067 9.25545C17.5855 9.42278 17.7281 9.62813 17.8346 9.87152C17.9449 10.1111 18 10.4039 18 10.75C18 11.1265 17.9334 11.4801 17.8003 11.811C17.671 12.138 17.4828 12.4252 17.2356 12.6724C16.9884 12.9157 16.6823 13.1078 16.3172 13.2485C15.9559 13.3892 15.5452 13.4596 15.0851 13.4596C14.8227 13.4596 14.5603 13.4329 14.2979 13.3797C14.0393 13.3265 13.7883 13.2523 13.5449 13.1572C13.3053 13.0622 13.079 12.9481 12.8661 12.815C12.6531 12.6819 12.4668 12.5336 12.3071 12.37L12.809 11.56C12.8509 11.4992 12.906 11.4497 12.9745 11.4117C13.0429 11.3699 13.1152 11.3489 13.1912 11.3489C13.2939 11.3489 13.4023 11.387 13.5164 11.463C13.6305 11.5391 13.7617 11.6228 13.91 11.714C14.0583 11.8053 14.2294 11.889 14.4234 11.965C14.6211 12.0411 14.8569 12.0791 15.1307 12.0791C15.53 12.0791 15.838 11.9878 16.0548 11.8053C16.2754 11.6228 16.3857 11.3508 16.3857 10.9896C16.3857 10.7804 16.3305 10.6112 16.2202 10.4819C16.1138 10.3526 15.9731 10.2442 15.7981 10.1567C15.6232 10.0693 15.4235 9.99511 15.1992 9.93427C14.9748 9.86962 14.7447 9.79926 14.5089 9.72321C14.2732 9.64715 14.0431 9.55588 13.8187 9.4494C13.5943 9.34292 13.3947 9.20221 13.2198 9.02727C13.0448 8.85234 12.9022 8.63558 12.7919 8.37698C12.6854 8.11838 12.6322 7.79704 12.6322 7.41294C12.6322 7.10491 12.693 6.80638 12.8147 6.51736C12.9364 6.22834 13.1152 5.97164 13.351 5.74727C13.5867 5.5229 13.8758 5.34226 14.218 5.20536C14.5641 5.06845 14.9596 5 15.4045 5C15.9027 5 16.3629 5.07796 16.785 5.23388C17.2109 5.38599 17.5703 5.59896 17.8631 5.87277L17.441 6.67708Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/subsidies-1.svg

@@ -1,5 +0,0 @@
-<svg fill="none" height="19" viewbox="10 11 20 19" width="20" xmlns="http://www.w3.org/2000/svg">
-<path clip-rule="evenodd" d="M12.1033 25.5601C13.0105 24.899 14.2445 23.9998 16.4505 23.9998C17.4975 23.9998 18.329 24.1906 19.0439 24.4994C19.7215 24.7922 20.2572 25.178 20.6877 25.488L20.7181 25.5099C21.1741 25.8382 21.5209 26.083 21.9419 26.2649C22.3417 26.4376 22.8479 26.5678 23.5843 26.5678C24.9591 26.5678 25.5311 26.1595 26.3692 25.5613C26.6017 25.3954 26.8547 25.2149 27.1509 25.0244C27.7083 24.666 28.4508 24.8273 28.8092 25.3848C29.1676 25.9422 29.0063 26.6847 28.4489 27.0431C28.2828 27.1499 28.1089 27.2766 27.9212 27.4134C27.0145 28.0741 25.7882 28.9677 23.5843 28.9677C22.537 28.9677 21.7053 28.7769 20.9903 28.4681C20.3124 28.1753 19.7765 27.7894 19.3458 27.4792L19.3158 27.4576C18.8598 27.1293 18.513 26.8844 18.0921 26.7026C17.6924 26.5299 17.1866 26.3998 16.4505 26.3998C15.0763 26.3998 14.5087 26.8048 13.6754 27.3995C13.4303 27.5745 13.1621 27.7659 12.8436 27.9682C12.2842 28.3236 11.5426 28.1582 11.1872 27.5988C10.8319 27.0394 10.9973 26.2978 11.5567 25.9425C11.7281 25.8336 11.9081 25.7024 12.1033 25.5601Z" fill="#263238" fill-rule="evenodd"></path>
-<path clip-rule="evenodd" d="M12.1033 19.5602C13.0105 18.8991 14.2445 17.9999 16.4505 17.9999C17.4975 17.9999 18.329 18.1907 19.0439 18.4995C19.7215 18.7923 20.2572 19.1781 20.6877 19.4881L20.7181 19.51C21.1741 19.8383 21.5209 20.0831 21.9419 20.265C22.3417 20.4377 22.8479 20.5679 23.5843 20.5679C24.9591 20.5679 25.5311 20.1596 26.3692 19.5614C26.6017 19.3955 26.8547 19.215 27.1509 19.0245C27.7083 18.6661 28.4508 18.8274 28.8092 19.3849C29.1676 19.9423 29.0063 20.6848 28.4489 21.0432C28.2828 21.15 28.1089 21.2767 27.9212 21.4135C27.0145 22.0742 25.7882 22.9678 23.5843 22.9678C22.537 22.9678 21.7053 22.777 20.9903 22.4682C20.3124 22.1754 19.7765 21.7895 19.3458 21.4793L19.3158 21.4577C18.8598 21.1294 18.513 20.8845 18.0921 20.7027C17.6924 20.53 17.1866 20.3999 16.4505 20.3999C15.0763 20.3999 14.5087 20.8049 13.6754 21.3996C13.4303 21.5746 13.1621 21.766 12.8436 21.9683C12.2842 22.3237 11.5426 22.1583 11.1872 21.5989C10.8319 21.0395 10.9973 20.2979 11.5567 19.9426C11.7281 19.8337 11.9081 19.7025 12.1033 19.5602Z" fill="#263238" fill-rule="evenodd"></path>
-<path clip-rule="evenodd" d="M12.1033 13.5603C13.0105 12.8992 14.2445 12 16.4505 12C17.4975 12 18.329 12.1908 19.0439 12.4996C19.7215 12.7924 20.2572 13.1782 20.6877 13.4882L20.7181 13.5101C21.1741 13.8384 21.5209 14.0832 21.9419 14.2651C22.3417 14.4378 22.8479 14.568 23.5843 14.568C24.9591 14.568 25.5311 14.1597 26.3692 13.5615C26.6017 13.3956 26.8547 13.2151 27.1509 13.0246C27.7083 12.6662 28.4508 12.8275 28.8092 13.385C29.1676 13.9424 29.0063 14.6849 28.4489 15.0433C28.2828 15.1501 28.1089 15.2768 27.9212 15.4136C27.0145 16.0743 25.7882 16.9679 23.5843 16.9679C22.537 16.9679 21.7053 16.7771 20.9903 16.4683C20.3124 16.1755 19.7765 15.7896 19.3458 15.4794L19.3158 15.4578C18.8598 15.1295 18.513 14.8846 18.0921 14.7028C17.6924 14.5301 17.1866 14.4 16.4505 14.4C15.0763 14.4 14.5087 14.805 13.6754 15.3997C13.4303 15.5747 13.1621 15.7661 12.8436 15.9684C12.2842 16.3238 11.5426 16.1584 11.1872 15.599C10.8319 15.0396 10.9973 14.298 11.5567 13.9427C11.7281 13.8338 11.9081 13.7026 12.1033 13.5603Z" fill="#263238" fill-rule="evenodd"></path>
-</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,
-}

package/src/components/draggableCard/index.vue

@@ -1,347 +0,0 @@
-<template>
-  <CardContainer
-    data-test-id="draggable_card_container"
-    :initial-position="initialPosition"
-    :max-width="maxWidth"
-    :min-width="minWidth"
-  >
-    <HeaderContainer data-test-id="draggable_card_header">
-      <SubHeaderWrapper>
-        <LeftIconsContainer>
-          <DragHandleWrapper :class="{ dragging: isDragging }">
-            <RCIcon
-              :color="theme.colors.grey3"
-              data-test-id="draggable_card_drag_icon"
-              name="drag_icon"
-              size="14px"
-              :title="$gettext('drag_drop')"
-              @mousedown="(event) => onDragStart(event, false)"
-              @touchstart="
-                (event) => {
-                  onDragStart(event, true)
-                }
-              "
-            />
-          </DragHandleWrapper>
-          <ArrowIconWrapper
-            v-if="isCollapsible"
-            data-test-id="draggable_card_collapse_button"
-            :is-collapsed="isCollapsed"
-            @click="toggleCollapse"
-          >
-            <CollapseArrowIcon />
-          </ArrowIconWrapper>
-        </LeftIconsContainer>
-        <TitleContainer>
-          <TextContainer>{{ title }}</TextContainer>
-          <InfoText v-if="infoText?.length" :text="infoText" />
-        </TitleContainer>
-      </SubHeaderWrapper>
-      <CloseButton
-        class="close"
-        data-test-id="draggable_card_close_button"
-        @click="$emit('on-close')"
-      />
-    </HeaderContainer>
-    <BodyContainer v-if="!isCollapsed" data-test-id="draggable_card_body">
-      <slot name="body"></slot>
-    </BodyContainer>
-    <FooterContainer v-if="$slots.footer" data-test-id="draggable_card_footer">
-      <slot name="footer"></slot>
-    </FooterContainer>
-  </CardContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import theme from '../../assets/theme.js'
-  import RCIcon from '../icon'
-  import CloseButton from '../buttons/closeButton'
-  import InfoText from '../infoText'
-  import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
-
-  const CardContainerAttr = {
-    initialPosition: Object,
-    minWidth: String,
-    maxWidth: String,
-  }
-  const CardContainer = styled('div', CardContainerAttr)`
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    min-width: ${(props) => props.minWidth};
-    max-width: ${(props) => props.maxWidth};
-    background: ${theme.colors.transparentBlack2};
-    z-index: 5;
-    ${(props) =>
-      props.initialPosition?.top && `top: ${props.initialPosition.top};`}
-    ${(props) =>
-      props.initialPosition?.right && `right: ${props.initialPosition.right};`}
-    ${(props) =>
-      props.initialPosition?.left && `left: ${props.initialPosition.left};`}
-    ${(props) =>
-      props.initialPosition?.bottom &&
-      `bottom: ${props.initialPosition.bottom};`}
-  `
-
-  const HeaderContainer = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-  `
-
-  const SubHeaderWrapper = styled.div`
-    display: flex;
-    min-width: 180px;
-    align-items: center;
-    justify-content: space-between;
-    height: fit-content;
-    margin-right: 14px;
-  `
-
-  const LeftIconsContainer = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-right: 14px;
-  `
-
-  const TitleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  `
-
-  const TextContainer = styled.div`
-    font-family: ${theme.fonts.mainFont};
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 19.6px;
-    letter-spacing: -1%;
-    color: ${theme.colors.white};
-    word-break: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-  `
-
-  const DragHandleWrapper = styled.div`
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    width: 26px;
-    height: 26px;
-    cursor: grab;
-    &.dragging {
-      cursor: grabbing;
-    }
-  `
-
-  const collapsedAttrs = {
-    isCollapsed: Boolean,
-  }
-  const ArrowIconWrapper = styled('div', collapsedAttrs)`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 8px;
-    transition: transform 0.3s ease;
-    cursor: pointer;
-    path {
-      fill: ${theme.colors.white};
-    }
-    ${(props) => props.isCollapsed && 'transform: rotate(-180deg);'}
-  `
-
-  const BodyContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding-top: 8px;
-    padding-right: 16px;
-    padding-bottom: 8px;
-    padding-left: 16px;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-  `
-
-  const FooterContainer = styled.div`
-    display: flex;
-    border-radius: 4px;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-    background: ${theme.colors.eturnityGrey};
-    word-break: break-word;
-    overflow-wrap: break-word;
-    white-space: normal;
-  `
-
-  export default {
-    name: 'DraggableCard',
-    components: {
-      CardContainer,
-      HeaderContainer,
-      SubHeaderWrapper,
-      LeftIconsContainer,
-      TextContainer,
-      DragHandleWrapper,
-      ArrowIconWrapper,
-      CollapseArrowIcon,
-      RCIcon,
-      CloseButton,
-      InfoText,
-      TitleContainer,
-      BodyContainer,
-      FooterContainer,
-    },
-    props: {
-      minWidth: {
-        required: true,
-        type: String,
-      },
-      maxWidth: {
-        required: true,
-        type: String,
-      },
-      initialPosition: {
-        required: true,
-        type: Object,
-      },
-      title: {
-        required: true,
-        type: String,
-      },
-      isCollapsible: {
-        required: false,
-        type: Boolean,
-        default: true,
-      },
-      infoText: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      dragTargets: {
-        required: false,
-        type: Array,
-        default: () => ['document'],
-      },
-      dragBounds: {
-        required: false,
-        type: Object,
-        default: () => {},
-      },
-    },
-    emits: ['on-close'],
-    data() {
-      return {
-        isCollapsed: false,
-        isDragging: false,
-        isTouchStart: false,
-        eventCoordinates: {
-          x: 0,
-          y: 0,
-        },
-      }
-    },
-    computed: {
-      dragBoundsEnabled() {
-        const minPosition = this.dragBounds?.min
-        const maxPosition = this.dragBounds?.max
-        return (
-          minPosition?.top &&
-          minPosition?.left &&
-          maxPosition?.top &&
-          maxPosition?.left
-        )
-      },
-      theme() {
-        return theme
-      },
-    },
-    beforeUnmount() {
-      this.removeEvents()
-    },
-    methods: {
-      toggleCollapse() {
-        this.isCollapsed = !this.isCollapsed
-      },
-      onDragStart(e, isTouchStart) {
-        e.preventDefault()
-        this.isDragging = true
-        this.isTouchStart = isTouchStart
-        this.eventCoordinates.x = isTouchStart
-          ? e.touches[0].clientX
-          : e.clientX
-        this.eventCoordinates.y = isTouchStart
-          ? e.touches[0].clientY
-          : e.clientY
-        this.dragTargets.forEach((id) => {
-          const target =
-            id === 'document' ? document : document.getElementById(id)
-          if (target && target.addEventListener) {
-            target.addEventListener(
-              isTouchStart ? 'touchend' : 'mouseup',
-              this.onDragEnd
-            )
-            target.addEventListener(
-              isTouchStart ? 'touchmove' : 'mousemove',
-              this.onDrag
-            )
-          }
-        })
-        document.addEventListener(
-          isTouchStart ? 'touchend' : 'mouseup',
-          this.onDragEnd
-        )
-      },
-      onDrag(e) {
-        e.preventDefault()
-        const eventX = this.isTouchStart ? e.touches[0].clientX : e.clientX
-        const eventY = this.isTouchStart ? e.touches[0].clientY : e.clientY
-        const deltaX = this.eventCoordinates.x - eventX
-        const deltaY = this.eventCoordinates.y - eventY
-        this.eventCoordinates.x = eventX
-        this.eventCoordinates.y = eventY
-        const element = this.$el
-        let positionY = element.offsetTop - deltaY
-        let positionX = element.offsetLeft - deltaX
-        if (this.dragBoundsEnabled) {
-          const minPosition = this.dragBounds.min
-          const maxPosition = this.dragBounds.max
-          positionY = Math.min(
-            Math.max(positionY, minPosition.top),
-            maxPosition.top
-          )
-          positionX = Math.min(
-            Math.max(positionX, minPosition.left),
-            maxPosition.left
-          )
-        }
-        element.style.top = positionY + 'px'
-        element.style.left = positionX + 'px'
-      },
-      onDragEnd() {
-        this.isDragging = false
-        this.removeEvents()
-      },
-      removeEvents() {
-        this.dragTargets.forEach((id) => {
-          const target =
-            id === 'document' ? document : document.getElementById(id)
-          if (target && target.removeEventListener) {
-            target.removeEventListener('mouseup', this.onDragEnd)
-            target.removeEventListener('touchend', this.onDragEnd)
-            target.removeEventListener('mousemove', this.onDrag)
-            target.removeEventListener('touchmove', this.onDrag)
-          }
-        })
-        document.removeEventListener('mouseup', this.onDragEnd)
-        document.removeEventListener('touchend', this.onDragEnd)
-      },
-    },
-  }
-</script>