@redseed/redseed-ui-vue3 8.43.0 → 8.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.43.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"

package/src/components/Section/SectionHeader.vue

@@ -26,6 +26,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    noClamp: {
+        type: Boolean,
+        default: false,
+    },
     /**
      * Heading level (1-6) for the title. When set, the title renders as a real
      * <h1>-<h6> so consuming pages get a correct document outline (WCAG 1.3.1,
@@ -80,9 +84,9 @@ const titleTag = computed(() => props.headingLevel ? `h${props.headingLevel}` :
 >
     <div class="rsui-section-header__header">
 
-        <!-- Icon slot, optional -->
+        <!-- Icon slot, optional — hidden on narrow sections -->
         <div class="rsui-section-header__icon"
-            v-if="$slots.icon"
+            v-if="$slots.icon && responsiveWidth.specific"
         >
             <slot name="icon"></slot>
         </div>
@@ -93,8 +97,16 @@ const titleTag = computed(() => props.headingLevel ? `h${props.headingLevel}` :
         }">
 
             <!-- Title slot, default slot -->
-            <div class="rsui-section-header__title">
-                <component :is="titleTag" class="rsui-section-header__title-text">
+            <div :class="[
+                'rsui-section-header__title',
+                { 'rsui-section-header__title--stacked': !responsiveWidth.specific },
+            ]">
+                <component :is="titleTag"
+                    :class="[
+                        'rsui-section-header__title-text',
+                        { 'rsui-section-header__title-text--no-clamp': noClamp },
+                    ]"
+                >
                     <slot></slot>
                 </component>
                 <div v-if="$slots.badge" class="rsui-section-header__badge">