@redseed/redseed-ui-vue3 8.44.0 → 8.45.0

package/package.json

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

package/src/components/Drawer/Drawer.vue

@@ -56,8 +56,69 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    resizable: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+// User-set panel width (px) when resizable; null falls back to the size-class width.
+const panelWidth = ref(null)
+const isResizing = ref(false)
+
+const panelStyle = computed(() => {
+    if (!props.resizable || panelWidth.value === null) return {}
+
+    return {
+        width: `${panelWidth.value}px`,
+        maxWidth: 'none',
+    }
 })
 
+const MIN_WIDTH = 320
+
+function clampWidth(width) {
+    const max = window.innerWidth * 0.95
+
+    return Math.min(max, Math.max(MIN_WIDTH, width))
+}
+
+function startResize(event) {
+    const startX = event.clientX
+    const startWidth = drawerPanelRef.value.getBoundingClientRect().width
+    isResizing.value = true
+    document.body.style.userSelect = 'none'
+
+    function onMove(moveEvent) {
+        const dx = moveEvent.clientX - startX
+        // Right-anchored grows by dragging left; left-anchored grows by dragging right.
+        const delta = props.left ? dx : -dx
+        panelWidth.value = clampWidth(startWidth + delta)
+    }
+
+    function onUp() {
+        isResizing.value = false
+        document.body.style.userSelect = ''
+        document.removeEventListener('pointermove', onMove)
+        document.removeEventListener('pointerup', onUp)
+    }
+
+    document.addEventListener('pointermove', onMove)
+    document.addEventListener('pointerup', onUp)
+    event.preventDefault()
+}
+
+function onHandleKeydown(event) {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+
+    const step = 16
+    const current = panelWidth.value ?? drawerPanelRef.value?.getBoundingClientRect().width ?? MIN_WIDTH
+    const growsLeft = !props.left
+    const grow = event.key === (growsLeft ? 'ArrowLeft' : 'ArrowRight')
+    panelWidth.value = clampWidth(current + (grow ? step : -step))
+    event.preventDefault()
+}
+
 const defaultWidth = computed(() => !props.sm && !props.md && !props.lg)
 
 const drawerPanelClass = computed(() => [
@@ -160,12 +221,23 @@ function handlePanelAfterLeave() {
         >
             <div v-if="isPanelVisible"
                 ref="drawerPanelRef"
-                :class="drawerPanelClass"
+                :class="[drawerPanelClass, { 'rsui-drawer__panel--resizing': isResizing }]"
+                :style="panelStyle"
                 role="dialog"
                 :aria-modal="!nonModal"
                 :aria-labelledby="$slots.header ? drawerHeaderId : undefined"
                 tabindex="-1"
             >
+                <div v-if="resizable"
+                    class="rsui-drawer__resize-handle"
+                    role="separator"
+                    aria-orientation="vertical"
+                    aria-label="Resize drawer"
+                    tabindex="0"
+                    @pointerdown="startResize"
+                    @keydown="onHandleKeydown"
+                ></div>
+
                 <button v-if="closeIcon"
                     type="button"
                     class="rsui-drawer__close-icon"