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

package/src/components/draggableCard/index.vue

@@ -1,363 +0,0 @@
-<template>
-  <CardContainer
-    data-test-id="draggable_card_container"
-    :initial-position="initialPosition"
-    :width="width"
-  >
-    <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"
-          >
-            <img :src="CollapseArrowIconUrl" />
-          </ArrowIconWrapper>
-        </LeftIconsContainer>
-        <TitleContainer :data-id="titleDataId">
-          <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 CollapseArrowIconUrl from '../../assets/icons/collapse_arrow_icon_white.svg?url'
-
-  const CardContainerAttr = {
-    initialPosition: Object,
-    width: String,
-  }
-  const CardContainer = styled('div', CardContainerAttr)`
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    width: ${(props) => props.width};
-    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;
-    height: fit-content;
-    margin-right: 30px;
-  `
-
-  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;
-    height: 26px;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-    ${(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,
-      RCIcon,
-      CloseButton,
-      InfoText,
-      TitleContainer,
-      BodyContainer,
-      FooterContainer,
-    },
-    props: {
-      width: {
-        required: true,
-        type: String,
-      },
-      initialPosition: {
-        required: true,
-        type: Object,
-      },
-      title: {
-        required: true,
-        type: String,
-      },
-      titleDataId: {
-        required: false,
-        type: String,
-        default: '',
-      },
-      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,
-        },
-        CollapseArrowIconUrl,
-      }
-    },
-    computed: {
-      dragBoundsEnabled() {
-        const minPosition = this.dragBounds?.min
-        const maxPosition = this.dragBounds?.max
-        return (
-          Number.isFinite(minPosition?.top) &&
-          Number.isFinite(minPosition?.left) &&
-          Number.isFinite(maxPosition?.top) &&
-          Number.isFinite(maxPosition?.left)
-        )
-      },
-      theme() {
-        return theme
-      },
-    },
-    watch: {
-      dragBounds() {
-        this.clampElementPosition()
-      },
-    },
-    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
-        element.style.top = positionY + 'px'
-        element.style.left = positionX + 'px'
-        if (this.dragBoundsEnabled) {
-          this.clampElementPosition()
-        }
-      },
-      onDragEnd() {
-        this.isDragging = false
-        this.removeEvents()
-      },
-      clampElementPosition() {
-        if (!this.dragBoundsEnabled) return
-
-        const element = this.$el
-        const rect = element.getBoundingClientRect()
-        const computedStyle = window.getComputedStyle(element)
-        const currentX = parseFloat(computedStyle.left) || 0
-        const currentY = parseFloat(computedStyle.top) || 0
-
-        const minPosition = this.dragBounds.min
-        const maxPosition = this.dragBounds.max
-
-        const y = Math.min(
-          Math.max(currentY, minPosition.top),
-          maxPosition.top - rect.height
-        )
-
-        const x = Math.min(
-          Math.max(currentX, minPosition.left),
-          maxPosition.left - rect.width
-        )
-
-        element.style.top = y + 'px'
-        element.style.left = x + 'px'
-      },
-      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>