@dataloop-ai/components 0.18.63 → 0.18.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.63",
+  "version": "0.18.64",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlPopup/DlPopup.vue

@@ -15,9 +15,10 @@
                 :class="classes"
                 :style="styles"
             >
-                <draggable-upper
-                    v-if="draggable"
-                    @move="movePopup"
+                <draggable-upper
+                    v-if="draggable"
+                    class="popup-dialog-upper"
+                    @move="movePopup"
                 />
                 <popup-header
                     v-if="
@@ -376,7 +377,7 @@ export default defineComponent({
 
         function configureScrollTarget() {
             if (anchorEl.value !== null || props.scrollTarget) {
-                (localScrollTarget as Ref<any>).value = getScrollTarget(
+                localScrollTarget.value = getScrollTarget(
                     anchorEl.value as HTMLElement,
                     props.scrollTarget
                 )
@@ -505,6 +506,16 @@ export default defineComponent({
     border-radius: 2px;
 }
 
+.popup-dialog-upper {
+    opacity: 0;
+    position: absolute;
+    top: 2px;
+    cursor: pointer;
+}
+.popup-dialog-upper:hover {
+    opacity: 1;
+}
+
 .popup-content {
     max-width: 100%;
     padding: 0 16px;

package/src/components/basic/DlPopup/components/DraggableUpper.vue

@@ -1,56 +1,86 @@
 <template>
-    <div
-        ref="draggableUpper"
-        class="root"
-    />
+    <div
+        ref="draggableUpper"
+        class="root"
+        @mouseenter="visibleDragIcon = true"
+        @mouseleave="visibleDragIcon = false"
+    >
+        <dl-icon
+            class="draggable-icon"
+            color="dl-color-medium"
+            icon="icon-dl-drag"
+            size="12px"
+            @mousedown="startDragElement"
+        />
+    </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, onMounted } from 'vue-demi'
+import { throttle } from 'lodash'
+import { defineComponent, getCurrentInstance, ref } from 'vue-demi'
+import { DlIcon } from '../../../essential/DlIcon'
 
 export default defineComponent({
+    components: {
+        DlIcon
+    },
     emits: ['move'],
-    setup() {
-        const vm = getCurrentInstance()
+    setup(props, { emit }) {
+        const visibleDragIcon = ref(false)
 
-        onMounted(() => {
-            const root = vm!.refs.draggableUpper as HTMLElement
-            let newX = 0
-            let newY = 0
-            let offsetX = 0
-            let offsetY = 0
+        const draggableOptions = ref({
+            draggableX: 0,
+            draggableY: 0,
+            originalX: 0,
+            originalY: 0,
+            draggableCursor: 'pointer'
+        })
 
-            if (root) {
-                root.onmousedown = dragMouseDown
+        const iconStyles = (): Record<string, string> => {
+            return {
+                cursor: draggableOptions.value.draggableCursor,
+                visibility: visibleDragIcon.value ? 'visible' : 'hidden'
             }
+        }
 
-            function dragMouseDown(e: any) {
-                e = e || window.event
-                e.preventDefault()
-
-                offsetX = e.layerX
-                offsetY = e.layerY
+        const startDragElement = (e: MouseEvent) => {
+            e.preventDefault()
 
-                newX = e.clientX
-                newY = e.clientY
-                document.onmouseup = closeDragElement
+            const target: HTMLElement = e.currentTarget as any
+            const iconOffsetX = target.parentElement.clientWidth / 2
+            const iconOffsetY = target.parentElement.clientHeight / 2
 
-                document.onmousemove = elementDrag
+            if (
+                !draggableOptions.value.originalY &&
+                !draggableOptions.value.originalX
+            ) {
+                draggableOptions.value.originalY = e.y
+                draggableOptions.value.originalX = e.x
             }
 
-            function elementDrag(e: any) {
-                e = e || window.event
+            draggableOptions.value.draggableCursor = 'grabbing'
+            document.onmousemove = throttle((e: MouseEvent) => {
+                e = e || (window.event as MouseEvent)
                 e.preventDefault()
-                newX = e.clientX - offsetX
-                newY = e.clientY - offsetY
-                vm!.emit('move', newX, newY)
-            }
+                const x = e.x - iconOffsetX
+                const y = e.y - iconOffsetY
+                emit('move', x, y)
+            }, 5)
+            document.onmouseup = stopDragElement
+        }
+        const stopDragElement = () => {
+            document.onmousemove = null
+            document.onmouseup = null
+            draggableOptions.value.draggableCursor = 'pointer'
+        }
 
-            function closeDragElement() {
-                document.onmouseup = null
-                document.onmousemove = null
-            }
-        })
+        return {
+            visibleDragIcon,
+            draggableOptions,
+            iconStyles,
+            startDragElement,
+            stopDragElement
+        }
     }
 })
 </script>
@@ -59,6 +89,16 @@ export default defineComponent({
 .root {
     width: 100%;
     height: 10px;
+    display: flex;
+    justify-content: center;
+}
+.draggable-icon {
+    display: none;
+    padding: 0px 10px;
+    transform: rotate(90deg);
+}
+.draggable-icon:hover {
     cursor: move;
+    display: flex;
 }
 </style>

package/src/demos/DlPopupDemo.vue

@@ -6,6 +6,7 @@
                 additional-info="Some additional information"
                 subtitle="Some text for better explanation."
                 with-close-button
+                draggable
                 @close-button-click="handleClear"
             >
                 <dl-text-area