@redseed/redseed-ui-vue3 8.22.1 → 8.23.0

package/package.json

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

package/src/components/CardGroup/CardGroup.vue

@@ -38,6 +38,11 @@ const props = defineProps({
         type: String,
         default: 'center',
         validator: (value) => ['top', 'center', 'bottom'].includes(value)
+    },
+    handleSide: {
+        type: String,
+        default: 'left',
+        validator: (value) => ['left', 'right'].includes(value)
     }
 })
 
@@ -52,6 +57,8 @@ 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--handle-left': props.reorderable && props.handleSide === 'left',
+        'rsui-card-group--handle-right': props.reorderable && props.handleSide === 'right',
         'rsui-card-group--2xs': responsiveWidth.value['2xs'],
         'rsui-card-group--xs': responsiveWidth.value['xs'],
         'rsui-card-group--sm': responsiveWidth.value['sm'],
@@ -120,6 +127,7 @@ function onHandleMouseDown(e) {
     const child = getCardChild(e.target)
     if (child) {
         child.setAttribute('draggable', 'true')
+        child.classList.add('rsui-card-group__card--grabbed')
     }
 }
 
@@ -127,6 +135,7 @@ function onHandleMouseUp(e) {
     const child = getCardChild(e.target)
     if (child) {
         child.removeAttribute('draggable')
+        child.classList.remove('rsui-card-group__card--grabbed')
     }
 }
 
@@ -180,7 +189,7 @@ 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.classList.remove('rsui-card-group__card--drag-over', 'rsui-card-group__card--dragging', 'rsui-card-group__card--grabbed')
             child.removeAttribute('draggable')
         })
     }
@@ -232,7 +241,7 @@ function syncHandles() {
         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.className = `rsui-card-group__drag-handle rsui-card-group__drag-handle--${props.handleAlignment} rsui-card-group__drag-handle--${props.handleSide}`
             handle.setAttribute('role', 'button')
             handle.setAttribute('tabindex', '0')
             handle.setAttribute('aria-label', 'Reorder')
@@ -241,7 +250,7 @@ function syncHandles() {
             handle.addEventListener('keydown', onHandleKeyDown)
             handle.appendChild(createHandleSvg())
             child.style.position = 'relative'
-            child.appendChild(handle)
+            child.prepend(handle)
         } else if (!props.reorderable && hasHandle) {
             hasHandle.removeEventListener('mousedown', onHandleMouseDown)
             hasHandle.removeEventListener('mouseup', onHandleMouseUp)