@vobs/ui 0.2.0 → 1.0.0

package/src/table.ts

@@ -0,0 +1,191 @@
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  resolveSlot,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export type TableAlign = 'start' | 'center' | 'end'
+
+export interface TableColumn<Row = Record<string, unknown>> {
+  readonly id: string
+  readonly label: string
+  readonly key?: keyof Row
+  readonly render?: (row: Row, index: number) => VuiChildren
+  readonly align?: TableAlign
+}
+
+export interface TableProps<Row = Record<string, unknown>> extends VuiCommonProps {
+  readonly columns?: readonly TableColumn<Row>[]
+  readonly rows?: readonly Row[]
+  readonly caption?: string
+  readonly empty?: VuiChildren
+  readonly rowKey?: (row: Row, index: number) => unknown
+  readonly onRowClick?: (row: Row, index: number) => void
+}
+
+export function Table<Row = Record<string, unknown>>(props?: TableProps<Row>): VobsNode
+export function Table(props?: TableProps<any>): VobsNode
+export function Table<Row = Record<string, unknown>>(props: TableProps<Row> = {}): VobsNode {
+  const root = createElement('table')
+  const head = createElement('thead')
+  const body = createElement('tbody')
+
+  bindClassList(root, props, () => ['vui-table'])
+  bindCommonAttributes(root, props, ['columns', 'rows', 'caption', 'empty', 'rowKey', 'onRowClick'])
+  bindUserStyle(root, props)
+
+  if (hasProp(props, 'caption')) {
+    const caption = createElement('caption')
+    const text = createText('')
+    bindTextContent(text, () => readProp(props, 'caption', ''))
+    insertBefore(caption, text, null)
+    insertBefore(root, caption, null)
+  }
+  insertDynamic(head, null, () => createTableHead(props))
+  insertDynamic(body, null, () => createTableBody(props))
+  insertBefore(root, head, null)
+  insertBefore(root, body, null)
+  return root
+}
+
+export interface TablePanelProps<Row = Record<string, unknown>> extends VuiCommonProps {
+  readonly columns?: readonly TableColumn<Row>[]
+  readonly rows?: readonly Row[]
+  readonly empty?: VuiChildren
+  readonly footer?: VuiChildren
+  readonly rowKey?: (row: Row, index: number) => unknown
+  readonly onRowClick?: (row: Row, index: number) => void
+}
+
+export function TablePanel<Row = Record<string, unknown>>(props?: TablePanelProps<Row>): VobsNode
+export function TablePanel(props?: TablePanelProps<any>): VobsNode
+export function TablePanel<Row = Record<string, unknown>>(props: TablePanelProps<Row> = {}): VobsNode {
+  const root = createElement('div')
+  bindClassList(root, props, () => ['vui-tablepanel'])
+  bindCommonAttributes(root, props, ['columns', 'rows', 'empty', 'footer', 'rowKey', 'onRowClick'])
+  bindUserStyle(root, props)
+
+  const table = Table<Row>({
+    get columns() { return readProp<readonly TableColumn<Row>[]>(props, 'columns', []) },
+    get rows() { return readProp<readonly Row[]>(props, 'rows', []) },
+    get empty() { return readProp<VuiChildren | undefined>(props, 'empty', undefined) },
+    get rowKey() { return readProp<TablePanelProps<Row>['rowKey']>(props, 'rowKey', undefined) },
+    get onRowClick() { return readProp<TablePanelProps<Row>['onRowClick']>(props, 'onRowClick', undefined) }
+  })
+  insertBefore(root, table, null)
+
+  if (hasProp(props, 'footer')) {
+    const footer = createElement('div')
+    setAttribute(footer, 'class', 'vui-tablepanel__foot')
+    mountSlot(footer, props, 'footer')
+    insertBefore(root, footer, null)
+  }
+  return root
+}
+
+function createTableHead<Row>(props: TableProps<Row>): VobsNode {
+  const columns = readProp<readonly TableColumn<Row>[]>(props, 'columns', [])
+  return createFragment((parent, anchor) => {
+    const row = createElement('tr')
+    for (const column of columns) {
+      const cell = createElement('th')
+      setAttribute(cell, 'scope', 'col')
+      setAttribute(cell, 'data-column-id', column.id)
+      applyAlignment(cell, column.align)
+      insertBefore(cell, createText(column.label), null)
+      insertBefore(row, cell, null)
+    }
+    insertBefore(parent, row, anchor)
+  })
+}
+
+function createTableBody<Row>(props: TableProps<Row>): VobsNode {
+  const columns = readProp<readonly TableColumn<Row>[]>(props, 'columns', [])
+  const rows = readProp<readonly Row[]>(props, 'rows', [])
+  if (rows.length === 0) return createEmptyRow(props, columns.length)
+
+  return createFragment((parent, anchor) => {
+    for (let index = 0; index < rows.length; index++) {
+      insertBefore(parent, createTableRow(rows[index], index, columns, props), anchor)
+    }
+  })
+}
+
+function createTableRow<Row>(
+  row: Row,
+  index: number,
+  columns: readonly TableColumn<Row>[],
+  props: TableProps<Row>
+): VobsNode {
+  const tableRow = createElement('tr')
+  const rowKey = readProp<TableProps<Row>['rowKey']>(props, 'rowKey', undefined)
+  if (rowKey) setOptionalAttribute(tableRow, 'data-row-key', rowKey(row, index))
+
+  for (const column of columns) {
+    const cell = createElement('td')
+    setAttribute(cell, 'data-column-id', column.id)
+    applyAlignment(cell, column.align)
+    insertDynamic(cell, null, () => {
+      const value = column.render
+        ? column.render(row, index)
+        : column.key === undefined
+          ? undefined
+          : readRowValue(row, column.key)
+      return resolveSlot(value)
+    })
+    insertBefore(tableRow, cell, null)
+  }
+
+  const onRowClick = readProp<TableProps<Row>['onRowClick']>(props, 'onRowClick', undefined)
+  if (onRowClick) {
+    setProperty(tableRow, 'tabIndex', 0)
+    setAttribute(tableRow, 'data-clickable', 'true')
+    addEventListener(tableRow, 'click', () => onRowClick(row, index))
+  }
+  return tableRow
+}
+
+function createEmptyRow<Row>(props: TableProps<Row>, columnCount: number): VobsNode {
+  const row = createElement('tr')
+  const cell = createElement('td')
+  setAttribute(cell, 'colspan', String(Math.max(1, columnCount)))
+  if (hasProp(props, 'empty')) {
+    insertDynamic(cell, null, () => resolveSlot(Reflect.get(props, 'empty')))
+  } else {
+    insertBefore(cell, createText('No data'), null)
+  }
+  insertBefore(row, cell, null)
+  return row
+}
+
+function applyAlignment(cell: Element, align: TableAlign | undefined): void {
+  if (align === 'end') {
+    setAttribute(cell, 'class', 'num')
+    setAttribute(cell, 'data-align', 'end')
+  } else if (align === 'center') {
+    setAttribute(cell, 'data-align', 'center')
+  }
+}
+
+function readRowValue<Row>(row: Row, key: keyof Row): unknown {
+  if (row === null || row === undefined) return undefined
+  return Reflect.get(row as object, key)
+}

package/src/tabs.ts

@@ -0,0 +1,100 @@
+import { effect, state } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  hasProp,
+  mountSlot,
+  readProp,
+  resolveSlot
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export interface TabItem {
+  readonly id: string
+  readonly label: string
+  readonly disabled?: boolean
+  readonly content?: VuiChildren
+}
+
+export interface TabsProps extends VuiCommonProps {
+  readonly items: readonly TabItem[]
+  readonly value?: string
+  readonly variant?: 'default' | 'filled'
+  readonly onChange?: (id: string) => void
+}
+
+export function Tabs(props: TabsProps): VobsNode {
+  const root = createElement('div')
+  const tablist = createElement('div')
+  const panel = createElement('div')
+  const internalValue = state<string | undefined>(undefined)
+
+  bindClassList(root, props, () => ['vui-tabs-root'])
+  bindCommonAttributes(root, props, ['items', 'value', 'variant', 'onChange'])
+  setAttribute(tablist, 'role', 'tablist')
+  effect(() => {
+    const variant = readProp<'default' | 'filled'>(props, 'variant', 'default')
+    setAttribute(tablist, 'class', `vui-tabs${variant === 'filled' ? ' vui-tabs--filled' : ''}`)
+  })
+  setAttribute(panel, 'class', 'vui-tabs__panel')
+
+  insertDynamic(tablist, null, () => createTabButtons(props, internalValue))
+  insertDynamic(panel, null, () => {
+    const item = activeItem(readProp<readonly TabItem[]>(props, 'items', []), activeId(props, internalValue))
+    return item?.content === undefined ? null : resolveSlot(item.content)
+  })
+  insertBefore(root, tablist, null)
+  insertBefore(root, panel, null)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createTabButtons(props: TabsProps, internalValue: { value: string | undefined }): VobsNode {
+  const items = readProp<readonly TabItem[]>(props, 'items', [])
+  const selected = activeId(props, internalValue)
+  return createFragment((parent, anchor) => {
+    for (const item of items) {
+      const button = createElement('button')
+      const isActive = item.id === selected
+      setAttribute(button, 'class', `vui-tab${isActive ? ' is-active' : ''}`)
+      setAttribute(button, 'role', 'tab')
+      setAttribute(button, 'type', 'button')
+      setAttribute(button, 'aria-selected', isActive ? 'true' : 'false')
+      setAttribute(button, 'data-tab-id', item.id)
+      if (item.disabled === true) {
+        setAttribute(button, 'aria-disabled', 'true')
+        setProperty(button, 'disabled', true)
+      }
+      insertBefore(button, createText(item.label), null)
+      addEventListener(button, 'click', () => {
+        if (item.disabled === true) return
+        if (readProp<string | undefined>(props, 'value', undefined) === undefined) internalValue.value = item.id
+        const onChange = readProp<unknown>(props, 'onChange', undefined)
+        if (typeof onChange === 'function') onChange(item.id)
+      })
+      insertBefore(parent, button, anchor)
+    }
+  })
+}
+
+function activeId(props: TabsProps, 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
+  return readProp<readonly TabItem[]>(props, 'items', []).find(item => item.disabled !== true)?.id
+}
+
+function activeItem(items: readonly TabItem[], id: string | undefined): TabItem | undefined {
+  return items.find(item => item.id === id)
+}

package/src/tag.ts

@@ -0,0 +1,33 @@
+import {
+  createElement,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp
+} from './utils'
+import type { VuiCommonProps } from './types'
+
+export type TagTone = 'default' | 'brand' | 'success' | 'warning' | 'danger' | 'count' | 'neutral-strong'
+
+export interface TagProps extends VuiCommonProps {
+  readonly tone?: TagTone
+}
+
+export function Tag(props: TagProps = {}): VobsNode {
+  const root = createElement('span')
+  bindClassList(root, props, () => [
+    'vui-tag',
+    readProp<TagTone>(props, 'tone', 'default') === 'default'
+      ? undefined
+      : `vui-tag--${readProp<TagTone>(props, 'tone', 'default')}`
+  ])
+  bindCommonAttributes(root, props, ['tone'])
+  bindUserStyle(root, props)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}

package/src/third-batch.test.ts

@@ -0,0 +1,137 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { state } from '@vobs/reactivity'
+import {
+  createComponent,
+  createDOMRenderer,
+  createElement,
+  createVobs,
+  insertBefore,
+  setRenderer
+} from '@vobs/vobs'
+import { ActivityRail } from './activity-rail'
+import { ChatComposer } from './chat-composer'
+import { EditorTabs } from './editor-tabs'
+import { FileTree } from './file-tree'
+import { StatusBar } from './status-bar'
+import { WorkbenchTitlebar } from './workbench-titlebar'
+
+describe('@vobs/ui third batch', () => {
+  beforeEach(() => {
+    setRenderer(createDOMRenderer())
+  })
+
+  it('ActivityRail keeps selection controlled and preserves spacer/divider structure', () => {
+    const active = state('files')
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(ActivityRail, {
+        items: [
+          { id: 'files', label: 'Files' },
+          { id: 'search', label: 'Search' },
+          { divider: true },
+          { spacer: true },
+          { id: 'settings', label: 'Settings' }
+        ],
+        get value() { return active.value },
+        onChange: id => { active.value = id }
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelectorAll('.vui-activityrail__btn').length).toBe(3)
+    expect(container.querySelector('.vui-activityrail__divider')).toBeTruthy()
+    expect(container.querySelector('.vui-activityrail__spacer')).toBeTruthy()
+    ;(container.querySelector('[aria-label="Settings"]') as HTMLElement).click()
+    app.update()
+    expect(active.value).toBe('settings')
+    expect(container.querySelector('[aria-label="Settings"]')?.classList.contains('is-active')).toBe(true)
+    app.destroy()
+  })
+
+  it('FileTree expands folders, selects rows and emits toggle state', () => {
+    const toggles: Array<[string, boolean]> = []
+    const selected: string[] = []
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(FileTree, {
+        items: [{
+          id: 'src',
+          label: 'src',
+          kind: 'folder',
+          children: [{ id: 'main', label: 'main.ts', kind: 'file' }]
+        }],
+        onToggle: (id, expanded) => toggles.push([id, expanded]),
+        onSelect: id => selected.push(id)
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelector('[data-file-id="main"]')).toBeNull()
+    ;(container.querySelector('[data-file-id="src"]') as HTMLElement).click()
+    app.update()
+    expect(container.querySelector('[data-file-id="main"]')).toBeTruthy()
+    expect(toggles).toEqual([['src', true]])
+    expect(selected).toEqual(['src'])
+    app.destroy()
+  })
+
+  it('EditorTabs supports active selection, close callbacks and arrow navigation', () => {
+    const active = state('one')
+    const closed: string[] = []
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(EditorTabs, {
+        tabs: [
+          { id: 'one', label: 'one.ts', closeable: true },
+          { id: 'two', label: 'two.ts' }
+        ],
+        get value() { return active.value },
+        onChange: id => { active.value = id },
+        onClose: id => closed.push(id)
+      })
+    })
+    app.mount(container)
+
+    const first = container.querySelector('[data-editor-tab-id="one"]') as HTMLElement
+    first.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+    app.update()
+    expect(active.value).toBe('two')
+    ;(container.querySelector('.close') as HTMLElement).click()
+    expect(closed).toEqual(['one'])
+    app.destroy()
+  })
+
+  it('WorkbenchTitlebar, StatusBar and ChatComposer expose named native controls', () => {
+    const sent: string[] = []
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => {
+        const root = createElement('div')
+        insertBefore(root, createComponent(WorkbenchTitlebar, {
+          mode: 'Agent',
+          project: 'vobs',
+          onProjectClick: () => undefined
+        }), null)
+        insertBefore(root, createComponent(StatusBar, {
+          left: [{ id: 'sync', label: 'Synced', dot: 'success' }],
+          onItemClick: () => undefined
+        }), null)
+        insertBefore(root, createComponent(ChatComposer, {
+          value: 'hello',
+          onSend: value => sent.push(value)
+        }), null)
+        return root
+      }
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vui-wbtitlebar__mode-chip')?.textContent).toBe('Agent')
+    expect(container.querySelector('.vui-wbtitlebar__project-selector')?.textContent).toBe('vobs')
+    expect(container.querySelector('.vui-wbtitlebar__light')?.hasAttribute('style')).toBe(false)
+    expect(container.querySelector('.vui-statusbar__dot--success')).toBeTruthy()
+    expect((container.querySelector('.vui-composer__input') as HTMLTextAreaElement).value).toBe('hello')
+    ;(container.querySelector('.vui-composer__send') as HTMLButtonElement).click()
+    expect(sent).toEqual(['hello'])
+    app.destroy()
+  })
+})

package/src/toast.test.ts

@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createComponent, createDOMRenderer, createVobs, setRenderer } from '@vobs/vobs'
+import { createNotification, notificationPlugin } from '@vobs/notification'
+import { createDOMPortalAdapter } from './overlay'
+import { ToastHost } from './toast'
+
+describe('@vobs/ui ToastHost', () => {
+  beforeEach(() => {
+    setRenderer(createDOMRenderer())
+  })
+
+  it('消费 NotificationContext，按类型呈现可访问 toast 并允许手动关闭', () => {
+    const notification = createNotification({ defaultDuration: 0 })
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(ToastHost, { notification, position: 'bottom-left' })
+    })
+    app.mount(container)
+    notification.success('Saved', { title: 'Document' })
+    app.update()
+
+    const toast = container.querySelector('[data-notification-id="notification-1"]') as HTMLElement
+    expect(toast.className).toContain('vui-toast--success')
+    expect(toast.getAttribute('role')).toBe('status')
+    expect(toast.textContent).toContain('Document')
+    expect(container.querySelector('.vui-toast-host')?.className).toContain('bottom-left')
+    ;(toast.querySelector('button') as HTMLButtonElement).click()
+    app.update()
+    expect(container.querySelector('.vui-toast')).toBeNull()
+    app.destroy()
+    notification.dispose()
+  })
+
+  it('可通过 notificationPlugin 读取上下文，并支持 portal 与 error alert', () => {
+    const notification = createNotification({ defaultDuration: 0 })
+    const container = document.createElement('main')
+    const target = document.createElement('aside')
+    const app = createVobs({
+      render: () => createComponent(ToastHost, {
+        portal: createDOMPortalAdapter(),
+        portalTarget: target
+      }),
+      plugins: [notificationPlugin({ notification })]
+    })
+    app.mount(container)
+    notification.error('Cannot save')
+    app.update()
+
+    expect(container.querySelector('.vui-toast-host')).toBeNull()
+    expect(target.querySelector('.vui-toast')?.getAttribute('role')).toBe('alert')
+    app.destroy()
+    expect(target.querySelector('.vui-toast-host')).toBeNull()
+    notification.dispose()
+  })
+})

package/src/toast.ts

@@ -0,0 +1,79 @@
+import { insertList } from '@vobs/vobs'
+import {
+  addEventListener,
+  createElement,
+  createText,
+  insertBefore,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import { type Notification, type NotificationContext, useNotification } from '@vobs/notification'
+import { Icon } from './icon'
+import { createPortal, type VuiPortalAdapter } from './overlay'
+import { bindClassList, bindCommonAttributes, bindUserStyle, readProp } from './utils'
+import type { VuiCommonProps } from './types'
+
+export type ToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+export interface ToastHostProps extends VuiCommonProps {
+  readonly notification?: NotificationContext
+  readonly position?: ToastPosition
+  readonly closeLabel?: string
+  readonly portal?: VuiPortalAdapter<unknown>
+  readonly portalTarget?: unknown
+}
+
+export function ToastHost(props: ToastHostProps = {}): VobsNode {
+  const notification = props.notification ?? useNotification()
+  const root = createElement('ol')
+  bindClassList(root, props, () => [
+    'vui-toast-host',
+    `vui-toast-host--${readProp<ToastPosition>(props, 'position', 'top-right')}`
+  ])
+  bindCommonAttributes(root, props, ['notification', 'position', 'closeLabel', 'portal', 'portalTarget'])
+  bindUserStyle(root, props)
+  setAttribute(root, 'aria-label', 'Notifications')
+  setAttribute(root, 'role', 'region')
+
+  insertList(root, null, () => notification.notifications.value, entry => (
+    createToast(entry, notification, readProp(props, 'closeLabel', 'Dismiss notification'))
+  ), entry => entry.id)
+
+  const portal = readProp<VuiPortalAdapter<unknown> | undefined>(props, 'portal', undefined)
+  return portal
+    ? createPortal(root, portal, readProp(props, 'portalTarget', undefined))
+    : root
+}
+
+function createToast(
+  notification: Notification,
+  context: NotificationContext,
+  closeLabel: string
+): VobsNode {
+  const item = createElement('li')
+  const content = createElement('div')
+  const close = createElement('button')
+  setAttribute(item, 'class', `vui-toast vui-toast--${notification.type}`)
+  setAttribute(item, 'data-notification-id', notification.id)
+  setAttribute(item, 'role', notification.type === 'error' ? 'alert' : 'status')
+  setAttribute(content, 'class', 'vui-toast__content')
+  setAttribute(close, 'class', 'vui-toast__close')
+  setAttribute(close, 'type', 'button')
+  setAttribute(close, 'aria-label', closeLabel)
+  addEventListener(close, 'click', () => context.dismiss(notification.id))
+
+  if (notification.title) {
+    const title = createElement('div')
+    setAttribute(title, 'class', 'vui-toast__title')
+    insertBefore(title, createText(notification.title), null)
+    insertBefore(content, title, null)
+  }
+  const message = createElement('div')
+  setAttribute(message, 'class', 'vui-toast__message')
+  insertBefore(message, createText(notification.content), null)
+  insertBefore(content, message, null)
+  insertBefore(close, Icon({ name: 'x', size: 16, decorative: true }), null)
+  insertBefore(item, content, null)
+  insertBefore(item, close, null)
+  return item
+}

package/src/types.ts

@@ -0,0 +1,25 @@
+import type { VobsNode } from '@vobs/vobs'
+
+export type VuiAttributeValue = string | number | boolean | undefined
+
+export type VuiChildren =
+  | VobsNode
+  | string
+  | number
+  | readonly VuiChildren[]
+  | (() => VuiChildren | null | undefined)
+
+export interface VuiCommonProps {
+  readonly class?: string
+  readonly className?: string
+  readonly style?: string
+  readonly id?: string
+  readonly title?: string
+  readonly role?: string
+  readonly tabIndex?: number
+  readonly children?: VuiChildren
+  readonly [name: `aria-${string}`]: VuiAttributeValue
+  readonly [name: `data-${string}`]: VuiAttributeValue
+}
+
+export type VuiEventHandler<EventType extends Event = Event> = (event: EventType) => void