@redseed/redseed-ui-vue3 8.23.0 → 8.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.23.0",
+    "version": "8.24.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, onMounted, onUpdated, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
 import Empty from '../Empty/Empty.vue'
 import Pagination from '../Pagination/Pagination.vue'
 import { useResponsiveWidth } from '../../helpers'
@@ -82,6 +82,8 @@ const emit = defineEmits([
 
 // Drag and drop
 const dragFromIndex = ref(null)
+let dragOverChild = null
+let childObserver = null
 
 function createHandleSvg() {
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
@@ -153,14 +155,15 @@ function onDragOver(e) {
     if (!props.reorderable || dragFromIndex.value === null) return
     e.preventDefault()
     e.dataTransfer.dropEffect = 'move'
-    const index = getChildIndex(e.target)
+    const child = getCardChild(e.target)
+    const index = child ? Array.from(cardsContainerElement.value.children).indexOf(child) : -1
     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)
-    })
+    if (dragOverChild && dragOverChild !== child) {
+        dragOverChild.classList.remove('rsui-card-group__card--drag-over')
+    }
+    child.classList.add('rsui-card-group__card--drag-over')
+    dragOverChild = child
 }
 
 function onDragLeave(e) {
@@ -194,6 +197,7 @@ function cleanupDragState() {
         })
     }
     dragFromIndex.value = null
+    dragOverChild = null
 }
 
 function onHandleKeyDown(e) {
@@ -275,9 +279,41 @@ function cleanupHandles() {
     })
 }
 
-onMounted(syncHandles)
-onUpdated(syncHandles)
-onBeforeUnmount(cleanupHandles)
+function startObserver() {
+    const container = cardsContainerElement.value
+    if (!container || childObserver) return
+    childObserver = new MutationObserver(syncHandles)
+    childObserver.observe(container, { childList: true })
+}
+
+function stopObserver() {
+    if (childObserver) {
+        childObserver.disconnect()
+        childObserver = null
+    }
+}
+
+onMounted(() => {
+    if (props.reorderable) {
+        syncHandles()
+        startObserver()
+    }
+})
+
+watch(() => props.reorderable, (val) => {
+    if (val) {
+        syncHandles()
+        startObserver()
+    } else {
+        cleanupHandles()
+        stopObserver()
+    }
+})
+
+onBeforeUnmount(() => {
+    cleanupHandles()
+    stopObserver()
+})
 
 const pageUpdated = (event) => {
     emit('pageUpdated', event)

package/src/components/Image/ImageCircle.vue

@@ -1,12 +1,27 @@
 <script setup>
+import { computed } from 'vue'
 import Image from './Image.vue'
 
 defineOptions({
     inheritAttrs: false,
 })
+
+const props = defineProps({
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const imageCircleClass = computed(() => [
+    'rsui-image-circle',
+    {
+        'rsui-image-circle--lg': props.lg,
+    },
+])
 </script>
 <template>
-<div class="rsui-image-circle">
+<div :class="imageCircleClass">
     <Image v-bind="$attrs">
         <template v-for="(_, name) in $slots"
             v-slot:[name]="slotProps"

package/src/components/Layout/PageHeader.vue

@@ -1,12 +1,26 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Modal from '../Modal/Modal.vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 
+const props = defineProps({
+    profile: {
+        type: Boolean,
+        default: false,
+    },
+})
+
 const showMetaModal = ref(false)
+
+const pageHeaderClass = computed(() => [
+    'rsui-page-header',
+    {
+        'rsui-page-header--profile': props.profile,
+    },
+])
 </script>
 <template>
-    <div class="rsui-page-header">
+    <div :class="pageHeaderClass">
         <div class="rsui-page-header__top">
             <div v-if="$slots.title" class="rsui-page-header__title">
                 <div v-if="$slots.avatar" class="rsui-page-header__avatar">