frappe-ui 1.0.0-beta.16 → 1.0.0-beta.18

package/experimental/FloatingWindow/FloatingWindow.cy.ts

@@ -265,6 +265,30 @@ describe('FloatingWindow', () => {
     })
   })
 
+  describe('pointercancel cleanup', () => {
+    it('stops resize and removes move listener when resize is cancelled by the browser', () => {
+      cy.mount(controlledWindow())
+      cy.get('[aria-label="Pop out"]').click()
+      cy.get('.floating-window').invoke('outerWidth').should('eq', 460)
+
+      // Start resize, then cancel (OS gesture / context-menu interrupt).
+      cy.get('[data-resize=se]').trigger('pointerdown', {
+        eventConstructor: 'PointerEvent',
+        button: 0,
+        clientX: 800,
+        clientY: 700,
+      })
+      cy.get('body').trigger('pointercancel', { eventConstructor: 'PointerEvent' })
+      // Move after cancel must be a no-op (listener torn down).
+      cy.get('body').trigger('pointermove', {
+        eventConstructor: 'PointerEvent',
+        clientX: 900,
+        clientY: 800,
+      })
+      cy.get('.floating-window').invoke('outerWidth').should('eq', 460)
+    })
+  })
+
   describe('edge and corner resize', () => {
     // Floating default is 460×520, parked bottom-right in the 1200×800 viewport:
     // x = 1200 - 460 - 24 = 716, y = 800 - 520 - 24 = 256.

package/experimental/FloatingWindow/FloatingWindow.vue

@@ -24,6 +24,7 @@
           isFloating ? 'cursor-move' : '',
           $slots.header ? '' : 'gap-2 px-2.5 py-1.5',
         ]"
+        @pointerdown="startDrag"
       >
         <!-- Host-owned header: takes the whole row, supplies its own controls. -->
         <div v-if="$slots.header" class="min-w-0 flex-1">
@@ -113,7 +114,7 @@
           type="button"
           data-resize="se"
           aria-label="Resize window"
-          class="absolute -bottom-1 -right-1 size-3 cursor-nwse-resize rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+          class="absolute -bottom-1 -right-1 z-10 size-4 cursor-nwse-resize rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
           @pointerdown.prevent="startResize($event, { x: 1, y: 1 })"
           @keydown="onResizeKey"
         />
@@ -195,6 +196,7 @@ const handle = ref<HTMLElement | null>(null)
 const {
   mode,
   style,
+  startDrag,
   startResize,
   resizeBy,
   dock,
@@ -245,17 +247,17 @@ const resizeHandles: ResizeHandle[] = [
   {
     name: 'nw',
     dir: { x: -1, y: -1 },
-    class: '-top-1 -left-1 size-3 cursor-nwse-resize',
+    class: '-top-1 -left-1 size-4 z-10 cursor-nwse-resize',
   },
   {
     name: 'ne',
     dir: { x: 1, y: -1 },
-    class: '-top-1 -right-1 size-3 cursor-nesw-resize',
+    class: '-top-1 -right-1 size-4 z-10 cursor-nesw-resize',
   },
   {
     name: 'sw',
     dir: { x: -1, y: 1 },
-    class: '-bottom-1 -left-1 size-3 cursor-nesw-resize',
+    class: '-bottom-1 -left-1 size-4 z-10 cursor-nesw-resize',
   },
 ]
 

package/experimental/FloatingWindow/useFloatingWindow.ts

@@ -6,12 +6,7 @@ import {
   type CSSProperties,
   type Ref,
 } from 'vue'
-import {
-  useDraggable,
-  useEventListener,
-  useStorage,
-  useWindowSize,
-} from '@vueuse/core'
+import { useEventListener, useStorage, useWindowSize } from '@vueuse/core'
 import type {
   FloatingWindowOptions,
   Rect,
@@ -20,22 +15,12 @@ import type {
 } from './types'
 
 const TRAY_WIDTH = 320
-// Gap from the viewport edge when parked in the bottom-right corner.
 const EDGE_MARGIN = 24
-// Default floating size when a window pops out, absent any saved rect. Resizable
-// from there; the docked footprint is set by the host container, not these.
 const DEFAULT_WIDTH = 460
 const DEFAULT_HEIGHT = 520
-// Smallest the panel can be resized to.
 const MIN_WIDTH = 380
 const MIN_HEIGHT = 300
 
-// Only one window may be detached (floating or minimized) at a time. Opening a
-// new one pins the previous, like a single chat / mail composer. The active
-// window registers its `dock()` here so a newcomer can pin it; a global rule
-// keyed off `BODY_CLASS` lifts the popover layer above the detached window
-// (reka-ui teleports popovers to <body> at z-index:auto, which would otherwise
-// sit behind it).
 const BODY_CLASS = 'has-floating-window'
 let activeDocker: (() => void) | null = null
 
@@ -52,10 +37,9 @@ function clamp(value: number, min: number, max: number): number {
  * Headless drag + resize + window-state engine for FloatingWindow.
  *
  * Owns the geometry (x/y/width/height), the `mode` state machine, viewport
- * clamping and persistence. The shell component renders chrome and binds
- * `style`; this composable holds no markup. Drag is delegated to VueUse's
- * `useDraggable` and is only enabled while floating. Resize is a small custom
- * pointer loop, since VueUse has no resize composable.
+ * clamping and persistence. Drag and resize both use raw pointer events with
+ * `setPointerCapture` so the pointer never escapes to background images or
+ * links — no jank, no native drag interference.
  */
 export function useFloatingWindow(
   panel: Ref<HTMLElement | null>,
@@ -77,26 +61,15 @@ export function useFloatingWindow(
     : ref({ mode: initialMode, rect: fallback })
 
   const mode = ref<WindowMode>(saved.value.mode)
+  const x = ref(saved.value.rect.x)
+  const y = ref(saved.value.rect.y)
   const width = ref(saved.value.rect.width)
   const height = ref(saved.value.rect.height)
+  const isDragging = ref(false)
   const isResizing = ref(false)
 
   const isFloating = computed(() => mode.value === 'floating')
 
-  function clampPosition() {
-    x.value = clamp(x.value, 0, viewportWidth.value - 80)
-    y.value = clamp(y.value, 0, viewportHeight.value - 40)
-  }
-
-  const { x, y, isDragging } = useDraggable(panel, {
-    handle,
-    initialValue: { x: saved.value.rect.x, y: saved.value.rect.y },
-    disabled: computed(() => !isFloating.value),
-    preventDefault: true,
-    onMove: clampPosition,
-    onEnd: persist,
-  })
-
   const style = computed<CSSProperties>(() => {
     if (mode.value === 'docked') return {}
     if (mode.value === 'minimized')
@@ -121,12 +94,7 @@ export function useFloatingWindow(
     if (!storageKey) return
     saved.value = {
       mode: mode.value,
-      rect: {
-        x: x.value,
-        y: y.value,
-        width: width.value,
-        height: height.value,
-      },
+      rect: { x: x.value, y: y.value, width: width.value, height: height.value },
     }
   }
 
@@ -135,55 +103,60 @@ export function useFloatingWindow(
     persist()
   }
 
-  /** Park the window in the bottom-right corner, like a chat / mail composer. */
   function anchorBottomRight() {
-    x.value = viewportWidth.value - width.value - EDGE_MARGIN
-    y.value = viewportHeight.value - height.value - EDGE_MARGIN
-    clampPosition()
+    x.value = clamp(viewportWidth.value - width.value - EDGE_MARGIN, 0, viewportWidth.value - width.value)
+    y.value = clamp(viewportHeight.value - height.value - EDGE_MARGIN, 0, viewportHeight.value - height.value)
   }
 
   const dock = () => setMode('docked')
   const minimize = () => setMode('minimized')
 
-  /** Pop the window out, parked in the bottom-right at its floating size. */
   function float() {
     anchorBottomRight()
     setMode('floating')
   }
   const expandFromTray = float
 
-  // Single detached window: when this one detaches it pins whichever window was
-  // detached before; when it docks it clears itself from the active slot.
-  watch(
-    () => mode.value !== 'docked',
-    (detached) => {
-      if (detached) {
-        if (activeDocker && activeDocker !== dock) activeDocker()
-        setActiveDocker(dock)
-      } else if (activeDocker === dock) {
-        setActiveDocker(null)
-      }
-    },
-    { immediate: true },
-  )
-  onScopeDispose(() => {
-    if (activeDocker === dock) setActiveDocker(null)
-  })
-
-  /** Resize by a fixed delta, the keyboard path on the bottom-right corner. */
-  function resizeBy(dx: number, dy: number) {
-    width.value = clamp(width.value + dx, MIN_WIDTH, viewportWidth.value)
-    height.value = clamp(height.value + dy, MIN_HEIGHT, viewportHeight.value)
-    persist()
+  /**
+   * Begin a pointer drag from the title-bar handle. `setPointerCapture` routes
+   * all subsequent pointer events to the handle element, so the pointer never
+   * reaches background images or links — no native drag interference or jank.
+   */
+  function startDrag(event: PointerEvent) {
+    if (!isFloating.value) return
+    // Bail if the click originated on an interactive element inside the header
+    // (button, link, input…) so their own click handlers still fire.
+    if ((event.target as HTMLElement).closest('button, a, input, select, textarea, [role="button"]')) return
+    event.preventDefault()
+    // ponytail: best-effort; synthetic test events have no registered pointer id
+    try { ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId) } catch {}
+    isDragging.value = true
+    const origin = { pointerX: event.clientX, pointerY: event.clientY, x: x.value, y: y.value }
+    const stopMove = useEventListener('pointermove', (e: PointerEvent) => {
+      x.value = clamp(origin.x + e.clientX - origin.pointerX, 0, viewportWidth.value - width.value)
+      y.value = clamp(origin.y + e.clientY - origin.pointerY, 0, viewportHeight.value - height.value)
+    })
+    const stopDrag = () => {
+      isDragging.value = false
+      persist()
+      stopMove()
+      stopUp()
+      stopCancel()
+    }
+    const stopUp = useEventListener('pointerup', stopDrag)
+    const stopCancel = useEventListener('pointercancel', stopDrag)
   }
 
   /**
    * Begin a pointer resize from an edge or corner. `dir` says which edges move;
-   * it defaults to the bottom-right corner. Dragging a top/left edge also shifts
-   * the panel's origin so the opposite edge stays anchored.
+   * dragging a top/left edge also shifts the panel's origin so the opposite
+   * edge stays anchored. Uses the same `setPointerCapture` pattern as `startDrag`.
    */
   function startResize(event: PointerEvent, dir: ResizeDir = { x: 1, y: 1 }) {
     isResizing.value = true
+    event.preventDefault()
+    // ponytail: best-effort; synthetic test events have no registered pointer id
+    try { ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId) } catch {}
     const origin = {
       pointerX: event.clientX,
       pointerY: event.clientY,
@@ -202,28 +175,46 @@ export function useFloatingWindow(
         x.value = origin.x + origin.width - width.value
       }
       if (dir.y === 1) {
-        height.value = clamp(
-          origin.height + dy,
-          MIN_HEIGHT,
-          viewportHeight.value,
-        )
+        height.value = clamp(origin.height + dy, MIN_HEIGHT, viewportHeight.value)
       } else if (dir.y === -1) {
-        height.value = clamp(
-          origin.height - dy,
-          MIN_HEIGHT,
-          viewportHeight.value,
-        )
+        height.value = clamp(origin.height - dy, MIN_HEIGHT, viewportHeight.value)
         y.value = origin.y + origin.height - height.value
       }
     })
-    const stopUp = useEventListener('pointerup', () => {
+    const stopResize = () => {
       isResizing.value = false
       persist()
       stopMove()
       stopUp()
-    })
+      stopCancel()
+    }
+    const stopUp = useEventListener('pointerup', stopResize)
+    const stopCancel = useEventListener('pointercancel', stopResize)
+  }
+
+  /** Resize by a fixed delta — the keyboard path on the bottom-right corner. */
+  function resizeBy(dx: number, dy: number) {
+    width.value = clamp(width.value + dx, MIN_WIDTH, viewportWidth.value)
+    height.value = clamp(height.value + dy, MIN_HEIGHT, viewportHeight.value)
+    persist()
   }
 
+  watch(
+    () => mode.value !== 'docked',
+    (detached) => {
+      if (detached) {
+        if (activeDocker && activeDocker !== dock) activeDocker()
+        setActiveDocker(dock)
+      } else if (activeDocker === dock) {
+        setActiveDocker(null)
+      }
+    },
+    { immediate: true },
+  )
+  onScopeDispose(() => {
+    if (activeDocker === dock) setActiveDocker(null)
+  })
+
   return {
     mode,
     x,
@@ -238,6 +229,7 @@ export function useFloatingWindow(
     minimize,
     expandFromTray,
     setMode,
+    startDrag,
     startResize,
     resizeBy,
   }

package/experimental/MultiEmailInput/MultiEmailInput.cy.ts

@@ -0,0 +1,155 @@
+import { defineComponent, h, ref } from 'vue'
+import MultiEmailInput from './MultiEmailInput.vue'
+import type { MultiEmailOption } from './types'
+
+const members: MultiEmailOption[] = [
+  { label: 'Ada Lovelace', value: 'ada@example.com' },
+  { label: 'Grace Hopper', value: 'grace@example.com' },
+]
+
+// A controlled host that surfaces the bound model + the last invalid email as
+// text, so v-model sync and the `invalid` event are observable.
+function host(
+  options: {
+    initial?: string[]
+    suggestions?: MultiEmailOption[]
+    label?: string
+    required?: boolean
+    error?: string
+    disabled?: boolean
+  } = {},
+) {
+  return defineComponent({
+    setup() {
+      const model = ref<string[]>(options.initial ?? [])
+      const invalid = ref('')
+      // Mutate the model the way a parent would (not via the component's UI),
+      // to prove a programmatic write syncs without surprising the host.
+      const setProgrammatically = () => (model.value = ['grace@example.com'])
+      return { model, invalid, setProgrammatically }
+    },
+    render() {
+      return [
+        h('span', { 'data-cy': 'model' }, this.model.join(',')),
+        h('span', { 'data-cy': 'invalid' }, this.invalid),
+        h(
+          'button',
+          { 'data-cy': 'set-prog', onClick: this.setProgrammatically },
+          'set',
+        ),
+        h(MultiEmailInput, {
+          modelValue: this.model,
+          'onUpdate:modelValue': (v: string[]) => (this.model = v),
+          onInvalid: (v: string) => (this.invalid = v),
+          options: options.suggestions ?? members,
+          label: options.label,
+          required: options.required,
+          error: options.error,
+          disabled: options.disabled,
+          placeholder: 'Add email…',
+        }),
+      ]
+    },
+  })
+}
+
+describe('MultiEmailInput', () => {
+  it('renders the control and placeholder', () => {
+    cy.mount(host())
+    cy.get('[data-slot="control"]').should('exist')
+    cy.get('[data-slot="input"]')
+      .should('exist')
+      .and('have.attr', 'placeholder', 'Add email…')
+  })
+
+  it('forwards `id` and associates the label', () => {
+    cy.mount(host({ label: 'Invite by email', required: true }))
+    cy.get('label').should('contain.text', 'Invite by email')
+    cy.get('[data-slot="input"]')
+      .invoke('attr', 'id')
+      .then((id) => {
+        cy.get('label').should('have.attr', 'for', id)
+      })
+  })
+
+  it('picks a suggestion into a chip and syncs v-model', () => {
+    cy.mount(host())
+    cy.get('[data-slot="input"]').focus()
+    cy.get('[data-slot="item"]').contains('Ada Lovelace').click()
+    cy.get('[data-slot="tag"]').should('have.length', 1)
+    cy.get('[data-cy="model"]').should('have.text', 'ada@example.com')
+  })
+
+  it('commits a typed new address on Enter via the create row', () => {
+    cy.mount(host({ suggestions: [] }))
+    cy.get('[data-slot="input"]').type('new@person.com')
+    cy.get('[data-create="true"]').should('contain.text', 'new@person.com')
+    cy.get('[data-slot="input"]').type('{enter}')
+    cy.get('[data-cy="model"]').should('have.text', 'new@person.com')
+    cy.get('[data-slot="tag"]').should('have.length', 1)
+  })
+
+  it('commits the typed address on Enter even while suggestions are showing', () => {
+    // A valid, new address typed while the suggestion list is non-empty: Enter
+    // must add what was typed (create row is highlighted), not a suggestion.
+    cy.mount(host())
+    cy.get('[data-slot="input"]').type('new@person.com')
+    cy.get('[data-slot="item"]').should('have.length.greaterThan', 1)
+    cy.get('[data-slot="input"]').type('{enter}')
+    cy.get('[data-cy="model"]').should('have.text', 'new@person.com')
+  })
+
+  it('syncs a programmatic model change into chips', () => {
+    cy.mount(host())
+    cy.get('[data-cy="set-prog"]').click()
+    cy.get('[data-cy="model"]').should('have.text', 'grace@example.com')
+    cy.get('[data-slot="tag"]').should('have.length', 1)
+  })
+
+  it('applies a host class to the control when there is no labeling', () => {
+    cy.mount({
+      render: () => h(MultiEmailInput, { modelValue: [], class: 'w-full' }),
+    })
+    cy.get('[data-slot="control"]').should('have.class', 'w-full')
+  })
+
+  it('rejects an invalid typed address and adds no chip', () => {
+    cy.mount(host({ suggestions: [] }))
+    cy.get('[data-slot="input"]').type('not-an-email{enter}')
+    cy.get('[data-cy="invalid"]').should('have.text', 'not-an-email')
+    cy.get('[data-slot="tag"]').should('not.exist')
+    cy.get('[data-cy="model"]').should('have.text', '')
+  })
+
+  it('removes a chip via its delete button', () => {
+    cy.mount(host({ initial: ['ada@example.com'] }))
+    cy.get('[data-slot="tag"]').should('have.length', 1)
+    cy.get('[aria-label="Remove ada@example.com"]').click()
+    cy.get('[data-slot="tag"]').should('not.exist')
+    cy.get('[data-cy="model"]').should('have.text', '')
+  })
+
+  it('removes the last chip on Backspace from an empty input', () => {
+    cy.mount(host({ initial: ['ada@example.com', 'grace@example.com'] }))
+    cy.get('[data-slot="input"]').focus().type('{backspace}{backspace}')
+    cy.get('[data-cy="model"]').should('have.text', 'ada@example.com')
+  })
+
+  it('excludes already-selected emails from the suggestions', () => {
+    cy.mount(host({ initial: ['ada@example.com'] }))
+    cy.get('[data-slot="input"]').focus()
+    cy.get('[data-slot="item"]').should('have.length', 1)
+    cy.get('[data-slot="item"]').should('contain.text', 'Grace Hopper')
+  })
+
+  it('renders the error region and marks the input invalid', () => {
+    cy.mount(host({ error: 'Something went wrong' }))
+    cy.get('[data-slot="error"]').should('contain.text', 'Something went wrong')
+    cy.get('[data-slot="input"]').should('have.attr', 'aria-invalid', 'true')
+  })
+
+  it('does not open or accept input when disabled', () => {
+    cy.mount(host({ disabled: true }))
+    cy.get('[data-slot="input"]').should('have.attr', 'disabled')
+  })
+})