@redseed/redseed-ui-vue3 8.20.0 → 8.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.20.0",
+    "version": "8.21.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/CardGroup/CardGroup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUpdated, onBeforeUnmount } from 'vue'
 import Empty from '../Empty/Empty.vue'
 import Pagination from '../Pagination/Pagination.vue'
 import { useResponsiveWidth } from '../../helpers'
@@ -29,10 +29,20 @@ const props = defineProps({
     pagination: {
         type: Boolean,
         default: true
+    },
+    reorderable: {
+        type: Boolean,
+        default: false
+    },
+    handleAlignment: {
+        type: String,
+        default: 'center',
+        validator: (value) => ['top', 'center', 'bottom'].includes(value)
     }
 })
 
 const cardGroupElement = ref(null)
+const cardsContainerElement = ref(null)
 
 const { responsiveWidth } = useResponsiveWidth(cardGroupElement)
 
@@ -41,6 +51,7 @@ const cardGroupClasses = computed(() => [
     {
         'rsui-card-group--compact': props.variant === 'compact',
         'rsui-card-group--list': props.variant === 'list',
+        'rsui-card-group--reorderable': props.reorderable,
         'rsui-card-group--2xs': responsiveWidth.value['2xs'],
         'rsui-card-group--xs': responsiveWidth.value['xs'],
         'rsui-card-group--sm': responsiveWidth.value['sm'],
@@ -58,9 +69,164 @@ const emit = defineEmits([
     'lastPageUpdated',
     'clickEmptyAction',
     'clickSecondaryEmptyAction',
-    'clickTertiaryEmptyAction'
+    'clickTertiaryEmptyAction',
+    'reorder'
 ])
 
+// Drag and drop
+const dragFromIndex = ref(null)
+
+function createHandleSvg() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('width', '16')
+    svg.setAttribute('height', '24')
+    svg.setAttribute('viewBox', '0 0 16 24')
+    svg.setAttribute('fill', 'currentColor')
+    svg.setAttribute('aria-hidden', 'true')
+    svg.classList.add('rsui-card-group__drag-handle-icon')
+    // 6 dots: 2 columns x 3 rows
+    const positions = [
+        [4, 5], [12, 5],
+        [4, 12], [12, 12],
+        [4, 19], [12, 19],
+    ]
+    positions.forEach(([cx, cy]) => {
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+        circle.setAttribute('cx', cx)
+        circle.setAttribute('cy', cy)
+        circle.setAttribute('r', '2')
+        svg.appendChild(circle)
+    })
+    return svg
+}
+
+function getCardChild(el) {
+    const container = cardsContainerElement.value
+    if (!container || !el) return null
+    let node = el
+    while (node && node.parentElement !== container) {
+        node = node.parentElement
+    }
+    return node
+}
+
+function getChildIndex(el) {
+    const child = getCardChild(el)
+    if (!child) return -1
+    return Array.from(cardsContainerElement.value.children).indexOf(child)
+}
+
+function onHandleMouseDown(e) {
+    const child = getCardChild(e.target)
+    if (child) {
+        child.setAttribute('draggable', 'true')
+    }
+}
+
+function onHandleMouseUp(e) {
+    const child = getCardChild(e.target)
+    if (child) {
+        child.removeAttribute('draggable')
+    }
+}
+
+function onDragStart(e) {
+    if (!props.reorderable) return
+    const index = getChildIndex(e.target)
+    if (index === -1) return
+    dragFromIndex.value = index
+    const child = getCardChild(e.target)
+    child.classList.add('rsui-card-group__card--dragging')
+    e.dataTransfer.effectAllowed = 'move'
+}
+
+function onDragOver(e) {
+    if (!props.reorderable || dragFromIndex.value === null) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    const index = getChildIndex(e.target)
+    if (index === -1 || index === dragFromIndex.value) return
+
+    const container = cardsContainerElement.value
+    const children = Array.from(container.children)
+    children.forEach((child, i) => {
+        child.classList.toggle('rsui-card-group__card--drag-over', i === index)
+    })
+}
+
+function onDragLeave(e) {
+    if (!props.reorderable) return
+    const child = getCardChild(e.target)
+    if (child && !child.contains(e.relatedTarget)) {
+        child.classList.remove('rsui-card-group__card--drag-over')
+    }
+}
+
+function onDrop(e) {
+    if (!props.reorderable) return
+    e.preventDefault()
+    const toIndex = getChildIndex(e.target)
+    if (toIndex !== -1 && dragFromIndex.value !== null && dragFromIndex.value !== toIndex) {
+        emit('reorder', { fromIndex: dragFromIndex.value, toIndex })
+    }
+    cleanupDragState()
+}
+
+function onDragEnd() {
+    cleanupDragState()
+}
+
+function cleanupDragState() {
+    const container = cardsContainerElement.value
+    if (container) {
+        Array.from(container.children).forEach(child => {
+            child.classList.remove('rsui-card-group__card--drag-over', 'rsui-card-group__card--dragging')
+            child.removeAttribute('draggable')
+        })
+    }
+    dragFromIndex.value = null
+}
+
+function syncHandles() {
+    const container = cardsContainerElement.value
+    if (!container) return
+
+    Array.from(container.children).forEach(child => {
+        const hasHandle = child.querySelector('.rsui-card-group__drag-handle')
+        if (props.reorderable && !hasHandle) {
+            const handle = document.createElement('div')
+            handle.className = `rsui-card-group__drag-handle rsui-card-group__drag-handle--${props.handleAlignment}`
+            handle.addEventListener('mousedown', onHandleMouseDown)
+            handle.addEventListener('mouseup', onHandleMouseUp)
+            handle.appendChild(createHandleSvg())
+            child.style.position = 'relative'
+            child.appendChild(handle)
+        } else if (!props.reorderable && hasHandle) {
+            hasHandle.removeEventListener('mousedown', onHandleMouseDown)
+            hasHandle.removeEventListener('mouseup', onHandleMouseUp)
+            hasHandle.remove()
+        }
+    })
+}
+
+function cleanupHandles() {
+    const container = cardsContainerElement.value
+    if (!container) return
+    Array.from(container.children).forEach(child => {
+        const handle = child.querySelector('.rsui-card-group__drag-handle')
+        if (handle) {
+            handle.removeEventListener('mousedown', onHandleMouseDown)
+            handle.removeEventListener('mouseup', onHandleMouseUp)
+            handle.remove()
+        }
+        child.removeAttribute('draggable')
+    })
+}
+
+onMounted(syncHandles)
+onUpdated(syncHandles)
+onBeforeUnmount(cleanupHandles)
+
 const pageUpdated = (event) => {
     emit('pageUpdated', event)
 }
@@ -89,7 +255,15 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
             @last="lastPageUpdated"
         ></Pagination>
     </div>
-    <div v-if="totalItems" class="rsui-card-group__cards">
+    <div v-if="totalItems"
+        ref="cardsContainerElement"
+        class="rsui-card-group__cards"
+        @dragstart="onDragStart"
+        @dragover="onDragOver"
+        @dragleave="onDragLeave"
+        @drop="onDrop"
+        @dragend="onDragEnd"
+    >
         <slot></slot>
     </div>
     <div v-if="showEmptyMessage" class="rsui-card-group__empty">