frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/experimental/FloatingWindow/useFloatingWindow.ts

@@ -0,0 +1,236 @@
+import {
+  computed,
+  onScopeDispose,
+  ref,
+  watch,
+  type CSSProperties,
+  type Ref,
+} from 'vue'
+import { useEventListener, useStorage, useWindowSize } from '@vueuse/core'
+import type {
+  FloatingWindowOptions,
+  Rect,
+  ResizeDir,
+  WindowMode,
+} from './types'
+
+const TRAY_WIDTH = 320
+const EDGE_MARGIN = 24
+const DEFAULT_WIDTH = 460
+const DEFAULT_HEIGHT = 520
+const MIN_WIDTH = 380
+const MIN_HEIGHT = 300
+
+const BODY_CLASS = 'has-floating-window'
+let activeDocker: (() => void) | null = null
+
+function setActiveDocker(docker: (() => void) | null) {
+  activeDocker = docker
+  document.body.classList.toggle(BODY_CLASS, activeDocker !== null)
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+/**
+ * Headless drag + resize + window-state engine for FloatingWindow.
+ *
+ * Owns the geometry (x/y/width/height), the `mode` state machine, viewport
+ * 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>,
+  handle: Ref<HTMLElement | null>,
+  options: FloatingWindowOptions = {},
+) {
+  const { initialMode = 'docked', storageKey = null } = options
+
+  const { width: viewportWidth, height: viewportHeight } = useWindowSize()
+
+  const fallback: Rect = {
+    x: Math.max(0, viewportWidth.value - DEFAULT_WIDTH - EDGE_MARGIN),
+    y: Math.max(0, viewportHeight.value - DEFAULT_HEIGHT - EDGE_MARGIN),
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
+  }
+  const saved = storageKey
+    ? useStorage(storageKey, { mode: initialMode, rect: fallback })
+    : 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')
+
+  const style = computed<CSSProperties>(() => {
+    if (mode.value === 'docked') return {}
+    if (mode.value === 'minimized')
+      return {
+        position: 'fixed',
+        right: `${EDGE_MARGIN}px`,
+        bottom: `${EDGE_MARGIN}px`,
+        width: `${TRAY_WIDTH}px`,
+        zIndex: 50,
+      }
+    return {
+      position: 'fixed',
+      left: `${x.value}px`,
+      top: `${y.value}px`,
+      width: `${width.value}px`,
+      height: `${height.value}px`,
+      zIndex: 50,
+    }
+  })
+
+  function persist() {
+    if (!storageKey) return
+    saved.value = {
+      mode: mode.value,
+      rect: { x: x.value, y: y.value, width: width.value, height: height.value },
+    }
+  }
+
+  function setMode(next: WindowMode) {
+    mode.value = next
+    persist()
+  }
+
+  function anchorBottomRight() {
+    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')
+
+  function float() {
+    anchorBottomRight()
+    setMode('floating')
+  }
+  const expandFromTray = float
+
+  /**
+   * 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;
+   * 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,
+      x: x.value,
+      y: y.value,
+      width: width.value,
+      height: height.value,
+    }
+    const stopMove = useEventListener('pointermove', (e: PointerEvent) => {
+      const dx = e.clientX - origin.pointerX
+      const dy = e.clientY - origin.pointerY
+      if (dir.x === 1) {
+        width.value = clamp(origin.width + dx, MIN_WIDTH, viewportWidth.value)
+      } else if (dir.x === -1) {
+        width.value = clamp(origin.width - dx, MIN_WIDTH, viewportWidth.value)
+        x.value = origin.x + origin.width - width.value
+      }
+      if (dir.y === 1) {
+        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)
+        y.value = origin.y + origin.height - height.value
+      }
+    })
+    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,
+    y,
+    width,
+    height,
+    style,
+    isDragging,
+    isResizing,
+    dock,
+    float,
+    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')
+  })
+})