@vobs/ui 0.3.0 → 1.1.0

package/src/menu.ts

@@ -0,0 +1,119 @@
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export interface MenuItem {
+  readonly id?: string
+  readonly label?: string
+  readonly icon?: VobsNode | (() => VobsNode | null | undefined)
+  readonly shortcut?: string
+  readonly danger?: boolean
+  readonly disabled?: boolean
+  readonly divider?: boolean
+  readonly content?: VuiChildren
+}
+
+export interface MenuProps extends VuiCommonProps {
+  readonly items?: readonly MenuItem[]
+  readonly onSelect?: (id: string, event: MouseEvent) => void
+}
+
+export function Menu(props: MenuProps = {}): VobsNode {
+  const root = createElement('div')
+  bindClassList(root, props, () => ['vui-menu'])
+  bindCommonAttributes(root, props, ['items', 'onSelect'])
+  if (!hasProp(props, 'role')) setAttribute(root, 'role', 'menu')
+
+  if (hasProp(props, 'items')) {
+    insertDynamic(root, null, () => createMenuItems(props))
+  }
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+export function MenuDivider(props: VuiCommonProps = {}): VobsNode {
+  const root = createElement('div')
+  bindClassList(root, props, () => ['vui-menu__divider'])
+  bindCommonAttributes(root, props)
+  setAttribute(root, 'role', 'separator')
+  return root
+}
+
+function createMenuItems(props: MenuProps): VobsNode {
+  const items = readProp<readonly MenuItem[]>(props, 'items', [])
+  return createFragment((parent, anchor) => {
+    for (const item of items) {
+      const node = item.divider === true
+        ? createMenuDividerNode(item)
+        : createMenuItemNode(item, props)
+      insertBefore(parent, node, anchor)
+    }
+  })
+}
+
+function createMenuDividerNode(item: MenuItem): VobsNode {
+  const divider = createElement('div')
+  setAttribute(divider, 'class', 'vui-menu__divider')
+  setAttribute(divider, 'role', 'separator')
+  setOptionalAttribute(divider, 'data-menu-item-id', item.id)
+  return divider
+}
+
+function createMenuItemNode(item: MenuItem, props: MenuProps): VobsNode {
+  const button = createElement('button')
+  setAttribute(button, 'class', `vui-menu__item${item.danger === true ? ' vui-menu__item--danger' : ''}`)
+  setAttribute(button, 'type', 'button')
+  setAttribute(button, 'role', 'menuitem')
+  setOptionalAttribute(button, 'data-menu-item-id', item.id)
+  if (item.disabled === true) {
+    setProperty(button, 'disabled', true)
+    setAttribute(button, 'aria-disabled', 'true')
+  }
+
+  if (item.icon !== undefined) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vui-menu__icon')
+    mountSlot(icon, item, 'icon')
+    insertBefore(button, icon, null)
+  }
+
+  if (item.label !== undefined) {
+    const label = createElement('span')
+    setAttribute(label, 'class', 'vui-menu__label')
+    insertBefore(label, createText(item.label), null)
+    insertBefore(button, label, null)
+  } else if (item.content !== undefined) {
+    mountSlot(button, item, 'content')
+  }
+
+  if (item.shortcut !== undefined) {
+    const shortcut = createElement('span')
+    setAttribute(shortcut, 'class', 'vui-menu__shortcut')
+    insertBefore(shortcut, createText(item.shortcut), null)
+    insertBefore(button, shortcut, null)
+  }
+
+  addEventListener(button, 'click', event => {
+    if (item.disabled === true || item.id === undefined) return
+    const handler = readProp<unknown>(props, 'onSelect', undefined)
+    if (typeof handler === 'function') (handler as MenuProps['onSelect'])!(item.id, event as MouseEvent)
+  })
+  return button
+}

package/src/nav-list.ts

@@ -0,0 +1,157 @@
+import { state } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export interface NavItem {
+  readonly id: string
+  readonly label: string
+  readonly icon?: VobsNode | (() => VobsNode | null | undefined)
+  readonly badge?: VuiChildren
+  readonly href?: string
+  readonly target?: string
+  readonly rel?: string
+  readonly active?: boolean
+  readonly disabled?: boolean
+}
+
+export interface NavGroup {
+  readonly id?: string
+  readonly title?: string
+  readonly items: readonly NavItem[]
+}
+
+export interface NavListProps extends VuiCommonProps {
+  readonly groups?: readonly NavGroup[]
+  readonly value?: string
+  readonly defaultValue?: string
+  readonly onChange?: (id: string, event: MouseEvent) => void
+}
+
+export function NavList(props: NavListProps = {}): VobsNode {
+  const root = createElement('nav')
+  const internalValue = state<string | undefined>(undefined)
+
+  bindClassList(root, props, () => ['vui-navlist'])
+  bindCommonAttributes(root, props, ['groups', 'value', 'defaultValue', 'onChange'])
+  insertDynamic(root, null, () => createNavGroups(props, internalValue))
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createNavGroups(
+  props: NavListProps,
+  internalValue: { value: string | undefined }
+): VobsNode {
+  const groups = readProp<readonly NavGroup[]>(props, 'groups', [])
+  const selected = activeId(props, groups, internalValue)
+  return createFragment((parent, anchor) => {
+    for (const group of groups) {
+      const groupRoot = createElement('div')
+      setAttribute(groupRoot, 'class', 'vui-navlist__group')
+      setOptionalAttribute(groupRoot, 'data-nav-group-id', group.id)
+
+      if (group.title !== undefined) {
+        const title = createElement('div')
+        setAttribute(title, 'class', 'vui-navlist__group-title')
+        insertBefore(title, createText(group.title), null)
+        insertBefore(groupRoot, title, null)
+      }
+
+      for (const item of group.items) {
+        insertBefore(groupRoot, createNavItem(item, props, selected, internalValue), null)
+      }
+      insertBefore(parent, groupRoot, anchor)
+    }
+  })
+}
+
+function createNavItem(
+  item: NavItem,
+  props: NavListProps,
+  selected: string | undefined,
+  internalValue: { value: string | undefined }
+): VobsNode {
+  const active = item.id === selected
+  const element = createElement(item.href === undefined ? 'button' : 'a')
+  setAttribute(element, 'class', `vui-navlist__item${active ? ' is-active' : ''}`)
+  if (item.href !== undefined) setAttribute(element, 'role', 'link')
+  setOptionalAttribute(element, 'data-nav-id', item.id)
+  if (item.href !== undefined) {
+    setAttribute(element, 'href', item.href)
+    setOptionalAttribute(element, 'target', item.target)
+    setOptionalAttribute(element, 'rel', item.rel)
+  } else {
+    setAttribute(element, 'type', 'button')
+  }
+  if (active) setAttribute(element, 'aria-current', 'page')
+  if (item.disabled === true) {
+    setAttribute(element, 'aria-disabled', 'true')
+    setProperty(element, 'tabIndex', -1)
+    if (item.href === undefined) setProperty(element, 'disabled', true)
+  }
+
+  if (item.icon !== undefined) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vui-navlist__icon')
+    mountSlot(icon, item, 'icon')
+    insertBefore(element, icon, null)
+  }
+
+  const label = createElement('span')
+  setAttribute(label, 'class', 'vui-navlist__label')
+  insertBefore(label, createText(item.label), null)
+  insertBefore(element, label, null)
+
+  if (item.badge !== undefined) {
+    const badge = createElement('span')
+    setAttribute(badge, 'class', 'vui-navlist__badge')
+    mountSlot(badge, item, 'badge')
+    insertBefore(element, badge, null)
+  }
+
+  addEventListener(element, 'click', event => {
+    if (item.disabled === true) {
+      event.preventDefault?.()
+      return
+    }
+    if (readProp<string | undefined>(props, 'value', undefined) === undefined) internalValue.value = item.id
+    const handler = readProp<unknown>(props, 'onChange', undefined)
+    if (typeof handler === 'function') (handler as NavListProps['onChange'])!(item.id, event as MouseEvent)
+  })
+  return element
+}
+
+function activeId(
+  props: NavListProps,
+  groups: readonly NavGroup[],
+  internalValue: { value: string | undefined }
+): string | undefined {
+  const controlled = readProp<string | undefined>(props, 'value', undefined)
+  if (controlled !== undefined) return controlled
+  if (internalValue.value !== undefined) return internalValue.value
+  const defaultValue = readProp<string | undefined>(props, 'defaultValue', undefined)
+  if (defaultValue !== undefined) return defaultValue
+  for (const group of groups) {
+    const active = group.items.find(item => item.active === true)
+    if (active) return active.id
+  }
+  return undefined
+}

package/src/overlay.test.ts

@@ -0,0 +1,66 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createComponent, createDOMRenderer, createVobs, setRenderer } from '@vobs/vobs'
+import { Drawer } from './drawer'
+import { createDOMPortalAdapter, createFocusTrap, createOverlayManager } from './overlay'
+
+describe('@vobs/ui overlay protocol', () => {
+  beforeEach(() => {
+    setRenderer(createDOMRenderer())
+  })
+
+  it('portal adapter mounts outside the component placeholder and cleans up on destroy', () => {
+    const container = document.createElement('main')
+    const portalTarget = document.createElement('aside')
+    const app = createVobs({
+      render: () => createComponent(Drawer, {
+        open: true,
+        title: 'Details',
+        portal: createDOMPortalAdapter(),
+        portalTarget,
+        children: 'Portal body'
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vui-drawer')).toBeNull()
+    expect(portalTarget.querySelector('.vui-drawer')?.textContent).toContain('Portal body')
+    app.destroy()
+    expect(portalTarget.querySelector('.vui-drawer')).toBeNull()
+  })
+
+  it('focus trap cycles Tab and restores the previously focused element', () => {
+    const outside = document.createElement('button')
+    const root = document.createElement('div')
+    const first = document.createElement('button')
+    const last = document.createElement('button')
+    root.append(first, last)
+    document.body.append(outside, root)
+    outside.focus()
+
+    const trap = createFocusTrap(root)
+    trap.activate()
+    expect(document.activeElement).toBe(first)
+    last.focus()
+    root.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+    expect(document.activeElement).toBe(first)
+    trap.deactivate()
+    expect(document.activeElement).toBe(outside)
+    trap.dispose()
+    root.remove()
+    outside.remove()
+  })
+
+  it('overlay manager preserves stack order and notifies subscribers', () => {
+    const manager = createOverlayManager()
+    const snapshots: string[][] = []
+    const stop = manager.subscribe(entries => snapshots.push(entries.map(entry => entry.id)))
+    manager.open({ id: 'dialog', modal: true })
+    manager.open({ id: 'menu' })
+    manager.bringToFront('dialog')
+    manager.close('menu')
+    stop()
+
+    expect(manager.entries.map(entry => entry.id)).toEqual(['dialog'])
+    expect(snapshots).toEqual([[], ['dialog'], ['dialog', 'menu'], ['menu', 'dialog'], ['dialog']])
+  })
+})

package/src/overlay.ts

@@ -0,0 +1,205 @@
+import { getCurrentOwner, onDispose } from '@vobs/reactivity'
+import {
+  createComment,
+  insertBefore,
+  isVobsFragment,
+  type VobsNode
+} from '@vobs/vobs'
+
+export interface VuiPortalAdapter<Target = unknown> {
+  mount(node: VobsNode, target: Target): void
+  unmount(node: VobsNode, target: Target): void
+}
+
+export function createPortal<Target>(
+  node: VobsNode,
+  adapter: VuiPortalAdapter<Target>,
+  target: Target
+): VobsNode {
+  const placeholder = createComment('vui:portal')
+  const owner = getCurrentOwner()
+  if (!owner) throw new Error('Vobs UI: createPortal 必须在组件 Owner 作用域内调用')
+  adapter.mount(node, target)
+  const cleanup = (): void => adapter.unmount(node, target)
+  owner.onDispose(cleanup)
+  return placeholder
+}
+
+export function createDOMPortalAdapter(): VuiPortalAdapter<Node> {
+  return {
+    mount(node, target): void {
+      insertBefore(target, node, null)
+    },
+    unmount(node, target): void {
+      removePortalNode(node, target)
+    }
+  }
+}
+
+export interface FocusTrapOptions {
+  readonly initialFocus?: HTMLElement | (() => HTMLElement | null)
+  readonly restoreFocus?: boolean
+  readonly onEscape?: (event: KeyboardEvent) => void
+}
+
+export interface FocusTrapHandle {
+  readonly active: boolean
+  activate(): void
+  deactivate(): void
+  dispose(): void
+}
+
+export function createFocusTrap(
+  root: HTMLElement,
+  options: FocusTrapOptions = {}
+): FocusTrapHandle {
+  let isActive = false
+  let disposed = false
+  let previouslyFocused: Element | null = null
+
+  const focusable = (): HTMLElement[] => [...root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)]
+    .filter(element => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true')
+
+  const onKeyDown = (event: KeyboardEvent): void => {
+    if (!isActive || disposed) return
+    if (event.key === 'Escape') {
+      options.onEscape?.(event)
+      return
+    }
+    if (event.key !== 'Tab') return
+    const elements = focusable()
+    if (elements.length === 0) {
+      event.preventDefault()
+      root.focus()
+      return
+    }
+    const first = elements[0]
+    const last = elements[elements.length - 1]
+    const current = document.activeElement
+    if (event.shiftKey && current === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && current === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  const activate = (): void => {
+    if (disposed || isActive) return
+    isActive = true
+    previouslyFocused = document.activeElement
+    root.addEventListener('keydown', onKeyDown)
+    const initial = resolveInitialFocus(options.initialFocus) ?? focusable()[0] ?? root
+    if (!root.hasAttribute('tabindex') && initial === root) root.setAttribute('tabindex', '-1')
+    initial.focus()
+  }
+
+  const deactivate = (): void => {
+    if (!isActive) return
+    isActive = false
+    root.removeEventListener('keydown', onKeyDown)
+    if (options.restoreFocus !== false
+      && typeof HTMLElement !== 'undefined'
+      && previouslyFocused instanceof HTMLElement) previouslyFocused.focus()
+    previouslyFocused = null
+  }
+
+  const handle: FocusTrapHandle = {
+    get active(): boolean { return isActive },
+    activate,
+    deactivate,
+    dispose(): void {
+      if (disposed) return
+      deactivate()
+      disposed = true
+    }
+  }
+  if (getCurrentOwner()) onDispose(() => handle.dispose())
+  return handle
+}
+
+export interface OverlayEntry {
+  readonly id: string
+  readonly modal?: boolean
+  readonly closeOnEscape?: boolean
+  readonly onEscape?: () => void
+}
+
+export interface OverlayManager {
+  readonly entries: readonly OverlayEntry[]
+  open(entry: OverlayEntry): void
+  close(id: string): void
+  bringToFront(id: string): void
+  subscribe(listener: (entries: readonly OverlayEntry[]) => void): () => void
+}
+
+export function createOverlayManager(): OverlayManager {
+  let entries: OverlayEntry[] = []
+  const listeners = new Set<(entries: readonly OverlayEntry[]) => void>()
+  const notify = (): void => {
+    const snapshot = entries.slice()
+    for (const listener of listeners) listener(snapshot)
+  }
+
+  return {
+    get entries(): readonly OverlayEntry[] { return entries },
+    open(entry): void {
+      entries = [...entries.filter(current => current.id !== entry.id), entry]
+      notify()
+    },
+    close(id): void {
+      const next = entries.filter(entry => entry.id !== id)
+      if (next.length === entries.length) return
+      entries = next
+      notify()
+    },
+    bringToFront(id): void {
+      const entry = entries.find(current => current.id === id)
+      if (!entry || entries[entries.length - 1] === entry) return
+      entries = [...entries.filter(current => current !== entry), entry]
+      notify()
+    },
+    subscribe(listener): () => void {
+      listeners.add(listener)
+      listener(entries.slice())
+      return () => listeners.delete(listener)
+    }
+  }
+}
+
+function resolveInitialFocus(
+  target: FocusTrapOptions['initialFocus']
+): HTMLElement | null {
+  if (!target) return null
+  return typeof target === 'function' ? target() : target
+}
+
+function removePortalNode(node: VobsNode, target: Node): void {
+  if (isVobsFragment(node)) {
+    let current = node.start.nextSibling
+    while (current && current !== node.end) {
+      const next = current.nextSibling
+      target.removeChild(current)
+      current = next
+    }
+    if (node.start.parentNode === target) target.removeChild(node.start)
+    if (node.end.parentNode === target) target.removeChild(node.end)
+    return
+  }
+  if (node.parentNode === target) target.removeChild(node)
+}
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'area[href]',
+  'button',
+  'input',
+  'select',
+  'textarea',
+  'iframe',
+  'object',
+  'embed',
+  '[contenteditable]',
+  '[tabindex]'
+].join(',')

package/src/page-header.ts

@@ -0,0 +1,97 @@
+import { effect } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createText,
+  insertBefore,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export interface PageHeaderProps extends VuiCommonProps {
+  readonly title?: string
+  readonly subtitle?: string
+  readonly actions?: VuiChildren
+}
+
+export function PageHeader(props: PageHeaderProps = {}): VobsNode {
+  const root = createElement('header')
+  const main = createElement('div')
+  bindClassList(root, props, () => ['vui-pagehead'])
+  bindCommonAttributes(root, props, ['title', 'subtitle', 'actions'])
+  bindUserStyle(root, props)
+
+  setAttribute(main, 'class', 'vui-pagehead__main')
+  if (hasProp(props, 'title')) {
+    const title = createElement('h1')
+    const text = createText('')
+    setAttribute(title, 'class', 'vui-pagehead__title')
+    bindTextContent(text, () => readProp(props, 'title', ''))
+    insertBefore(title, text, null)
+    insertBefore(main, title, null)
+  }
+  if (hasProp(props, 'subtitle')) {
+    const subtitle = createElement('p')
+    const text = createText('')
+    setAttribute(subtitle, 'class', 'vui-pagehead__subtitle')
+    bindTextContent(text, () => readProp(props, 'subtitle', ''))
+    insertBefore(subtitle, text, null)
+    insertBefore(main, subtitle, null)
+  }
+  if (hasProp(props, 'children')) mountSlot(main, props, 'children')
+  insertBefore(root, main, null)
+
+  if (hasProp(props, 'actions')) {
+    const actions = createElement('div')
+    setAttribute(actions, 'class', 'vui-pagehead__actions')
+    mountSlot(actions, props, 'actions')
+    insertBefore(root, actions, null)
+  }
+  return root
+}
+
+export interface PageHeaderActionProps extends VuiCommonProps {
+  readonly href?: string
+  readonly primary?: boolean
+  readonly disabled?: boolean
+  readonly onClick?: (event: MouseEvent) => void
+}
+
+export function PageHeaderAction(props: PageHeaderActionProps = {}): VobsNode {
+  const root = createElement(props.href === undefined ? 'button' : 'a')
+  bindClassList(root, props, () => [
+    'vui-pagehead__btn',
+    readProp(props, 'primary', false) ? 'is-primary' : undefined
+  ])
+  bindCommonAttributes(root, props, ['href', 'primary', 'disabled', 'onClick'])
+  if (props.href === undefined) setAttribute(root, 'type', 'button')
+  else setAttribute(root, 'href', props.href)
+  effect(() => {
+    const disabled = readProp(props, 'disabled', false)
+    setOptionalAttribute(root, 'aria-disabled', disabled ? 'true' : undefined)
+    if (props.href === undefined) setProperty(root, 'disabled', disabled)
+  })
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+
+  addEventListener(root, 'click', event => {
+    if (readProp(props, 'disabled', false)) {
+      event.preventDefault?.()
+      return
+    }
+    const handler = readProp<unknown>(props, 'onClick', undefined)
+    if (typeof handler === 'function') (handler as PageHeaderActionProps['onClick'])!(event as MouseEvent)
+  })
+  return root
+}