@eturnity/eturnity_reusable_components 8.22.23-EPDM-15709.0 → 8.22.23-EPDM-13618.0

package/src/components/draggableCard/index.vue

@@ -1,370 +1,370 @@
-<template>
-  <CardContainer
-    :class="customClass"
-    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,
-    customClass: 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: () => {},
-      },
-      customClass: {
-        required: false,
-        type: String,
-        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>
+<template>
+  <CardContainer
+    :class="customClass"
+    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,
+    customClass: 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: () => {},
+      },
+      customClass: {
+        required: false,
+        type: String,
+        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>