@eturnity/eturnity_reusable_components 8.13.13-epic-shading.0 → 8.13.13-epic-shading.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.13-epic-shading.0",
+  "version": "8.13.13-epic-shading.1",
   "files": [
     "dist",
     "src"

package/src/assets/icons/collapse_arrow_icon_white.svg

@@ -0,0 +1 @@
+<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/components/draggableCard/index.vue

@@ -2,8 +2,7 @@
   <CardContainer
     data-test-id="draggable_card_container"
     :initial-position="initialPosition"
-    :max-width="maxWidth"
-    :min-width="minWidth"
+    :width="width"
   >
     <HeaderContainer data-test-id="draggable_card_header">
       <SubHeaderWrapper>
@@ -29,7 +28,7 @@
             :is-collapsed="isCollapsed"
             @click="toggleCollapse"
           >
-            <CollapseArrowIcon />
+            <img :src="CollapseArrowIconUrl" />
           </ArrowIconWrapper>
         </LeftIconsContainer>
         <TitleContainer :data-id="titleDataId">
@@ -58,20 +57,18 @@
   import RCIcon from '../icon'
   import CloseButton from '../buttons/closeButton'
   import InfoText from '../infoText'
-  import CollapseArrowIcon from '../../assets/icons/collapse_arrow_icon.svg'
+  import CollapseArrowIconUrl from '../../assets/icons/collapse_arrow_icon_white.svg?url'
 
   const CardContainerAttr = {
     initialPosition: Object,
-    minWidth: String,
-    maxWidth: String,
+    width: 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};
+    width: ${(props) => props.width};
     background: ${theme.colors.transparentBlack2};
     z-index: 5;
     ${(props) =>
@@ -96,9 +93,8 @@
     display: flex;
     min-width: 180px;
     align-items: center;
-    justify-content: space-between;
     height: fit-content;
-    margin-right: 14px;
+    margin-right: 30px;
   `
 
   const LeftIconsContainer = styled.div`
@@ -149,10 +145,6 @@
     height: 26px;
     cursor: pointer;
     transition: transform 0.3s ease;
-    path {
-      fill: ${theme.colors.white};
-    }
-
     ${(props) => props.isCollapsed && 'transform: rotate(-180deg);'}
   `
 
@@ -191,7 +183,6 @@
       TextContainer,
       DragHandleWrapper,
       ArrowIconWrapper,
-      CollapseArrowIcon,
       RCIcon,
       CloseButton,
       InfoText,
@@ -200,11 +191,7 @@
       FooterContainer,
     },
     props: {
-      minWidth: {
-        required: true,
-        type: String,
-      },
-      maxWidth: {
+      width: {
         required: true,
         type: String,
       },
@@ -252,6 +239,7 @@
           x: 0,
           y: 0,
         },
+        CollapseArrowIconUrl,
       }
     },
     computed: {
@@ -259,16 +247,21 @@
         const minPosition = this.dragBounds?.min
         const maxPosition = this.dragBounds?.max
         return (
-          minPosition?.top &&
-          minPosition?.left &&
-          maxPosition?.top &&
-          maxPosition?.left
+          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()
     },
@@ -316,25 +309,41 @@
         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'
+        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 =