@greendrake/ui 0.6.0 → 0.8.0

package/src/useSelection.ts

@@ -1,99 +1,94 @@
-import { shallowReactive, type Ref, type ComputedRef } from 'vue'
+import { shallowReactive, shallowRef, toValue, type MaybeRefOrGetter, type Ref, type ComputedRef } from 'vue'
+
+type Key = string | number
+
+// The arrows' steps through the list.
+const arrowSteps: Record<string, number> = { ArrowUp: -1, ArrowDown: 1 }
 
 // Flat, index-addressable multi-selection over an ordered item list: single
 // (replace), ctrl-toggle, shift-range from an anchor, keyboard cursor moves,
-// select-all. The selected Set holds item ids read from items[i][idField].
-export default function useSelection<Id extends string | number>(items: Ref<Record<string, unknown>[]> | ComputedRef<Record<string, unknown>[]>, idField: string) {
+// select-all. The selected Set holds item ids read from items[i][idField];
+// the anchor and the cursor are rows, addressed by items[i][keyField] — the
+// id itself unless an item shows in several rows (a tree node under two
+// parents), whose keys tell them apart. Without multi, every pick replaces.
+export default function useSelection<Id extends Key>(items: Ref<Record<string, unknown>[]> | ComputedRef<Record<string, unknown>[]>, idField: string, { keyField = idField, multi = true }: { keyField?: string; multi?: MaybeRefOrGetter<boolean> } = {}) {
     const selected: Set<Id> = shallowReactive(new Set())
-    let anchor: Id | null = null
-    let cursor: Id | null = null
-
-    function getId(index: number): Id {
-        return items.value[index][idField] as Id
-    }
-
-    function indexOf(id: Id): number {
-        return items.value.findIndex(item => (item[idField] as Id) === id)
-    }
+    // The row the keyboard moves from; the anchor is the one ranges extend from.
+    const cursor = shallowRef<Key | null>(null)
+    let anchor: Key | null = null
 
-    function addRange(fromId: Id, toId: Id): void {
-        const a = indexOf(fromId)
-        const b = indexOf(toId)
-        if (a === -1 || b === -1) return
-        const [lo, hi] = a <= b ? [a, b] : [b, a]
-        for (let i = lo; i <= hi; i++) selected.add(getId(i))
-    }
+    const getId = (index: number): Id => items.value[index][idField] as Id
+    const keyAt = (index: number): Key => items.value[index][keyField] as Key
+    const indexOf = (key: Key): number => items.value.findIndex(item => item[keyField] === key)
 
-    function toggle(id: Id): void {
-        if (selected.has(id)) selected.delete(id)
-        else selected.add(id)
-        anchor = id
-        cursor = id
+    // Selects the rows from index a to index b, either way round, alone.
+    function selectRange(a: number, b: number): void {
+        selected.clear()
+        for (let i = Math.min(a, b); i <= Math.max(a, b); i++) selected.add(getId(i))
     }
 
-    function replace(id: Id): void {
+    function replace(key: Key): void {
         selected.clear()
-        selected.add(id)
-        anchor = id
-        cursor = id
+        selected.add(getId(indexOf(key)))
+        anchor = key
+        cursor.value = key
     }
 
-    function rangeTo(id: Id): void {
-        if (anchor === null) {
-            toggle(id)
-            return
+    /**
+     * A pointer's pick of a row: Shift selects the range from the anchor,
+     * Ctrl/Cmd toggles the row — as Shift does with no anchor in the list —
+     * a plain pick selects it alone.
+     */
+    function pick(key: Key, e: MouseEvent): void {
+        const multiple = toValue(multi)
+        const from = multiple && e.shiftKey && anchor !== null ? indexOf(anchor) : -1
+        if (from !== -1) {
+            selectRange(from, indexOf(key))
+            cursor.value = key
+        } else if (multiple && (e.shiftKey || e.ctrlKey || e.metaKey)) {
+            const id = getId(indexOf(key))
+            if (selected.has(id)) selected.delete(id)
+            else selected.add(id)
+            anchor = key
+            cursor.value = key
+        } else {
+            replace(key)
         }
-        selected.clear()
-        addRange(anchor, id)
-        cursor = id
     }
 
     /**
-     * Move cursor up or down.
-     * If extend is true (shift held), add to selection.
-     * If extend is false, replace selection with single item.
-     * Returns the new cursor index (useful for scrolling into view), or -1 if no items.
+     * Ctrl/Cmd+A selects all; the arrows move the cursor, selecting its row
+     * alone, or with Shift the range from the anchor to it. Returns the
+     * cursor's new index, for the host to scroll into view, or -1.
      */
-    function moveCursor(direction: 'up' | 'down', extend: boolean): number {
+    function onKeyDown(e: KeyboardEvent): number {
+        if (toValue(multi) && (e.ctrlKey || e.metaKey) && e.key === 'a') {
+            e.preventDefault()
+            for (let i = 0; i < items.value.length; i++) selected.add(getId(i))
+            return -1
+        }
+        const step = arrowSteps[e.key]
+        if (step === undefined) return -1
+        e.preventDefault()
         if (!items.value.length) return -1
-        const max = items.value.length - 1
-        const curIdx = cursor !== null ? indexOf(cursor) : -1
-        const next = direction === 'up' ? Math.max(0, curIdx <= 0 ? 0 : curIdx - 1) : Math.min(max, curIdx === -1 ? 0 : curIdx + 1)
-        const nextId = getId(next)
-
-        if (extend) {
-            selected.add(nextId)
-            cursor = nextId
-            if (anchor === null) anchor = nextId
-        } else {
-            selected.clear()
-            selected.add(nextId)
-            anchor = nextId
-            cursor = nextId
+        const at = cursor.value === null ? -1 : indexOf(cursor.value)
+        const next = at === -1 ? 0 : Math.min(Math.max(at + step, 0), items.value.length - 1)
+        if (!toValue(multi) || !e.shiftKey) {
+            replace(keyAt(next))
+            return next
         }
+        if (anchor === null || indexOf(anchor) === -1) anchor = keyAt(at === -1 ? next : at)
+        selectRange(indexOf(anchor), next)
+        cursor.value = keyAt(next)
         return next
     }
 
-    function selectAll(): void {
-        for (let i = 0; i < items.value.length; i++) selected.add(getId(i))
-    }
-
-    function clear(): void {
-        selected.clear()
-        anchor = null
-        cursor = null
-    }
-
     return {
         selected,
+        cursor,
         getId,
-        indexOf,
-        addRange,
-        toggle,
         replace,
-        rangeTo,
-        moveCursor,
-        selectAll,
-        clear
+        pick,
+        onKeyDown
     }
 }

package/src/useWidthDrag.ts

@@ -0,0 +1,38 @@
+import { computed, shallowRef, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'
+import { capturePointer } from './capturePointer'
+
+export interface WidthDrag {
+    /** Whether a drag is in progress. */
+    active: ComputedRef<boolean>
+    /** The handle's pointerdown: captures the pointer and drags from `width`, handing each new width to `set`. */
+    start(event: PointerEvent, width: number, set: (width: number) => void): void
+    /** The handle's pointermove. */
+    move(event: PointerEvent): void
+    /** The handle's pointerup and pointercancel. */
+    end(): void
+}
+
+// A width dragged by a handle at its end edge: the width follows the pointer's
+// horizontal travel, never below `minWidth`.
+export default function useWidthDrag(minWidth: MaybeRefOrGetter<number>): WidthDrag {
+    const drag = shallowRef<{ startX: number; startWidth: number; set: (width: number) => void } | null>(null)
+    return {
+        active: computed(() => drag.value !== null),
+        start(event, width, set) {
+            event.preventDefault()
+            capturePointer(event)
+            drag.value = {
+                startX: event.clientX,
+                startWidth: width,
+                set
+            }
+        },
+        move(event) {
+            const d = drag.value
+            if (d) d.set(Math.max(toValue(minWidth), d.startWidth + event.clientX - d.startX))
+        },
+        end() {
+            drag.value = null
+        }
+    }
+}