@vobs/ui 0.3.0 → 1.1.0

package/src/pagination.ts

@@ -0,0 +1,163 @@
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  hasProp,
+  mountSlot,
+  readProp,
+  resolveSlot,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export interface PaginationProps extends VuiCommonProps {
+  readonly page?: number
+  readonly pageCount?: number
+  readonly siblingCount?: number
+  readonly disabled?: boolean
+  readonly previousLabel?: string
+  readonly nextLabel?: string
+  readonly previousIcon?: VuiChildren
+  readonly nextIcon?: VuiChildren
+  readonly onChange?: (page: number) => void
+}
+
+type PaginationItem = number | 'ellipsis-left' | 'ellipsis-right'
+
+export function Pagination(props: PaginationProps = {}): VobsNode {
+  const root = createElement('nav')
+  bindClassList(root, props, () => ['vui-pagination'])
+  bindCommonAttributes(root, props, [
+    'page',
+    'pageCount',
+    'siblingCount',
+    'disabled',
+    'previousLabel',
+    'nextLabel',
+    'previousIcon',
+    'nextIcon',
+    'onChange'
+  ])
+  if (!hasProp(props, 'aria-label')) setAttribute(root, 'aria-label', 'Pagination')
+  insertDynamic(root, null, () => createPaginationItems(props))
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createPaginationItems(props: PaginationProps): VobsNode {
+  const pageCount = Math.max(0, Math.floor(readProp(props, 'pageCount', 0)))
+  const page = clampPage(readProp(props, 'page', 1), pageCount)
+  const siblingCount = Math.max(0, Math.floor(readProp(props, 'siblingCount', 1)))
+  const disabled = readProp(props, 'disabled', false)
+  const items = pageCount === 0 ? [] : buildPaginationItems(page, pageCount, siblingCount)
+
+  return createFragment((parent, anchor) => {
+    insertBefore(parent, createPaginationControl(props, 'previous', page <= 1 || disabled), anchor)
+    for (const item of items) {
+      if (typeof item === 'number') {
+        insertBefore(parent, createPageButton(item, item === page, disabled, props), anchor)
+      } else {
+        insertBefore(parent, createEllipsis(item), anchor)
+      }
+    }
+    insertBefore(parent, createPaginationControl(props, 'next', page >= pageCount || pageCount === 0 || disabled), anchor)
+  })
+}
+
+function createPaginationControl(
+  props: PaginationProps,
+  direction: 'previous' | 'next',
+  disabled: boolean
+): VobsNode {
+  const button = createElement('button')
+  setAttribute(button, 'class', 'vui-pagination__item')
+  setAttribute(button, 'type', 'button')
+  setProperty(button, 'disabled', disabled)
+  setOptionalAttribute(button, 'aria-label', direction === 'previous'
+    ? readProp(props, 'previousLabel', 'Previous')
+    : readProp(props, 'nextLabel', 'Next'))
+  if (disabled) setAttribute(button, 'aria-disabled', 'true')
+
+  const icon = direction === 'previous'
+    ? readProp<VuiChildren | undefined>(props, 'previousIcon', undefined)
+    : readProp<VuiChildren | undefined>(props, 'nextIcon', undefined)
+  const fallback = direction === 'previous' ? '<' : '>'
+  const node = icon === undefined ? createText(fallback) : resolveSlot(icon)
+  if (node) insertBefore(button, node, null)
+
+  addEventListener(button, 'click', () => {
+    if (disabled) return
+    const current = readProp(props, 'page', 1)
+    const nextPage = direction === 'previous' ? current - 1 : current + 1
+    emitPageChange(props, clampPage(nextPage, readProp(props, 'pageCount', 0)))
+  })
+  return button
+}
+
+function createPageButton(
+  page: number,
+  active: boolean,
+  disabled: boolean,
+  props: PaginationProps
+): VobsNode {
+  const button = createElement('button')
+  setAttribute(button, 'class', `vui-pagination__item${active ? ' is-active' : ''}`)
+  setAttribute(button, 'type', 'button')
+  setProperty(button, 'disabled', disabled)
+  setAttribute(button, 'aria-label', `Page ${page}`)
+  if (active) setAttribute(button, 'aria-current', 'page')
+  if (disabled) setAttribute(button, 'aria-disabled', 'true')
+  insertBefore(button, createText(String(page)), null)
+  addEventListener(button, 'click', () => {
+    if (!disabled) emitPageChange(props, page)
+  })
+  return button
+}
+
+function createEllipsis(item: 'ellipsis-left' | 'ellipsis-right'): VobsNode {
+  const button = createElement('button')
+  setAttribute(button, 'class', 'vui-pagination__item')
+  setAttribute(button, 'type', 'button')
+  setProperty(button, 'disabled', true)
+  setAttribute(button, 'aria-label', item === 'ellipsis-left' ? 'Previous pages' : 'Next pages')
+  setAttribute(button, 'aria-hidden', 'true')
+  insertBefore(button, createText('...'), null)
+  return button
+}
+
+function emitPageChange(props: PaginationProps, page: number): void {
+  const handler = readProp<unknown>(props, 'onChange', undefined)
+  if (typeof handler === 'function') (handler as PaginationProps['onChange'])!(page)
+}
+
+function clampPage(page: number, pageCount: number): number {
+  if (pageCount <= 0) return 1
+  return Math.min(pageCount, Math.max(1, Math.floor(Number.isFinite(page) ? page : 1)))
+}
+
+function buildPaginationItems(page: number, pageCount: number, siblingCount: number): PaginationItem[] {
+  const totalVisible = siblingCount * 2 + 5
+  if (pageCount <= totalVisible) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1)
+  }
+
+  const left = Math.max(page - siblingCount, 2)
+  const right = Math.min(page + siblingCount, pageCount - 1)
+  const items: PaginationItem[] = [1]
+
+  if (left > 2) items.push('ellipsis-left')
+  for (let value = left; value <= right; value++) items.push(value)
+  if (right < pageCount - 1) items.push('ellipsis-right')
+  items.push(pageCount)
+  return items
+}

package/src/second-batch.test.ts

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { state } from '@vobs/reactivity'
+import {
+  createComponent,
+  createDOMRenderer,
+  createElement,
+  createVobs,
+  insertBefore,
+  setRenderer
+} from '@vobs/vobs'
+import { Avatar } from './avatar'
+import { Kbd, KbdCombo, KbdRow } from './kbd'
+import { Menu } from './menu'
+import { NavList, type NavGroup } from './nav-list'
+import { PageHeader, PageHeaderAction } from './page-header'
+import { Pagination } from './pagination'
+import { StatCard, StatCardGrid } from './stat-card'
+import { Table, TablePanel, type TableColumn } from './table'
+
+describe('@vobs/ui second batch', () => {
+  beforeEach(() => {
+    setRenderer(createDOMRenderer())
+  })
+
+  it('Menu renders icons, shortcuts, dividers and select callbacks', () => {
+    const selected: string[] = []
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(Menu, {
+        items: [
+          { id: 'edit', label: 'Edit', shortcut: 'Ctrl+E' },
+          { id: 'separator', divider: true },
+          { id: 'delete', label: 'Delete', danger: true, disabled: true }
+        ],
+        onSelect: id => selected.push(id)
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vui-menu')).toBeTruthy()
+    expect(container.querySelector('.vui-menu__shortcut')?.textContent).toBe('Ctrl+E')
+    expect(container.querySelector('.vui-menu__divider')).toBeTruthy()
+    ;(container.querySelector('[data-menu-item-id="edit"]') as HTMLElement).click()
+    ;(container.querySelector('[data-menu-item-id="delete"]') as HTMLElement).click()
+    expect(selected).toEqual(['edit'])
+    app.destroy()
+  })
+
+  it('NavList uses controlled Signal state and native links/buttons', () => {
+    const active = state('home')
+    const groups: readonly NavGroup[] = [{
+      title: 'Workspace',
+      items: [
+        { id: 'home', label: 'Home' },
+        { id: 'settings', label: 'Settings', href: '/settings' }
+      ]
+    }]
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(NavList, {
+        groups,
+        get value() { return active.value },
+        onChange: id => { active.value = id }
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelector('[data-nav-id="home"]')?.classList.contains('is-active')).toBe(true)
+    ;(container.querySelector('[data-nav-id="settings"]') as HTMLElement).click()
+    app.update()
+    expect(active.value).toBe('settings')
+    expect(container.querySelector('[data-nav-id="settings"]')?.getAttribute('aria-current')).toBe('page')
+    expect(container.querySelector('a[href="/settings"]')).toBeTruthy()
+    app.destroy()
+  })
+
+  it('Pagination builds condensed pages and reports page changes', () => {
+    const page = state(5)
+    const changes: number[] = []
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(Pagination, {
+        get page() { return page.value },
+        pageCount: 20,
+        onChange: next => {
+          changes.push(next)
+          page.value = next
+        }
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelectorAll('.vui-pagination__item').length).toBe(9)
+    expect(container.querySelector('[aria-current="page"]')?.textContent).toBe('5')
+    const next = container.querySelector('[aria-label="Next"]') as HTMLButtonElement
+    next.click()
+    app.update()
+    expect(changes).toEqual([6])
+    expect(container.querySelector('[aria-current="page"]')?.textContent).toBe('6')
+    app.destroy()
+  })
+
+  it('Avatar, PageHeader, StatCard and Kbd expose UIStyle structure', () => {
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => {
+        const root = createElement('div')
+        insertBefore(root, createComponent(Avatar, { fallback: 'A', size: 'lg', shape: 'square' }), null)
+        insertBefore(root, createComponent(PageHeader, {
+            title: 'Members',
+            subtitle: 'Manage access',
+            actions: createComponent(PageHeaderAction, { primary: true, children: 'Invite' })
+          }), null)
+        insertBefore(root, createComponent(StatCardGrid, {
+            children: createComponent(StatCard, {
+              label: 'Users',
+              value: '24',
+              delta: '+12%',
+              deltaDirection: 'up',
+              deltaCaption: 'this month'
+            })
+          }), null)
+        insertBefore(root, createComponent(KbdRow, {
+            children: [
+              createComponent(Kbd, { children: 'Esc' }),
+              createComponent(KbdCombo, { keys: ['Ctrl', 'K'] })
+            ]
+          }), null)
+        return root
+      }
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vui-avatar--lg.vui-avatar--square')?.textContent).toBe('A')
+    expect(container.querySelector('.vui-pagehead__title')?.textContent).toBe('Members')
+    expect(container.querySelector('.vui-pagehead__btn.is-primary')?.textContent).toBe('Invite')
+    expect(container.querySelector('.vui-statcard__value')?.textContent).toBe('24')
+    expect(container.querySelector('.vui-statcard__delta.is-up')?.textContent).toContain('+12%')
+    expect(container.querySelectorAll('.vui-kbd').length).toBe(3)
+    app.destroy()
+  })
+
+  it('Avatar 图片样式和 Table 居中对齐不使用内联样式', () => {
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => {
+        const root = createElement('div')
+        insertBefore(root, createComponent(Avatar, { src: '/avatar.png', alt: 'Avery' }), null)
+        insertBefore(root, createComponent(Table, {
+          columns: [
+            { id: 'name', label: 'Member', key: 'name', align: 'center' }
+          ],
+          rows: [{ name: 'Avery' }]
+        }), null)
+        return root
+      }
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vui-avatar__image')?.hasAttribute('style')).toBe(false)
+    const centeredCell = container.querySelector('[data-align="center"]') as HTMLElement
+    expect(centeredCell).toBeTruthy()
+    expect(centeredCell.hasAttribute('style')).toBe(false)
+    app.destroy()
+  })
+
+  it('Table renders columns, keyed row metadata, empty state and panel footer', () => {
+    interface Member { id: number; name: string; status: string }
+    const columns: readonly TableColumn<Member>[] = [
+      { id: 'name', label: 'Member', key: 'name' },
+      { id: 'status', label: 'Status', render: row => row.status, align: 'center' },
+      { id: 'count', label: 'Count', render: () => '1', align: 'end' }
+    ]
+    const rows: readonly Member[] = [{ id: 1, name: 'Avery', status: 'Active' }]
+    const container = document.createElement('main')
+    const app = createVobs({
+      render: () => createComponent(TablePanel, {
+        columns,
+        rows,
+        rowKey: row => row.id,
+        footer: 'Showing 1 member'
+      })
+    })
+    app.mount(container)
+
+    expect(container.querySelector('.vui-tablepanel')).toBeTruthy()
+    expect(container.querySelectorAll('.vui-table th').length).toBe(3)
+    expect(container.querySelector('[data-row-key="1"]')?.textContent).toContain('Avery')
+    expect(container.querySelector('.vui-table td.num')?.textContent).toBe('1')
+    expect(container.querySelector('.vui-tablepanel__foot')?.textContent).toBe('Showing 1 member')
+    app.destroy()
+
+    const emptyContainer = document.createElement('main')
+    const emptyApp = createVobs({
+      render: () => createComponent(Table, {
+        columns: [{ id: 'name', label: 'Member' }],
+        rows: [],
+        empty: 'Nothing here'
+      })
+    })
+    emptyApp.mount(emptyContainer)
+    expect(emptyContainer.querySelector('tbody')?.textContent).toContain('Nothing here')
+    emptyApp.destroy()
+  })
+})

package/src/stat-card.ts

@@ -0,0 +1,92 @@
+import { effect } from '@vobs/reactivity'
+import {
+  createElement,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  resolveSlot
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export type StatDeltaDirection = 'up' | 'down'
+
+export interface StatCardProps extends VuiCommonProps {
+  readonly label?: string
+  readonly value?: VuiChildren
+  readonly delta?: VuiChildren
+  readonly deltaDirection?: StatDeltaDirection
+  readonly deltaIcon?: VuiChildren
+  readonly deltaCaption?: VuiChildren
+}
+
+export function StatCard(props: StatCardProps = {}): VobsNode {
+  const root = createElement('div')
+  bindClassList(root, props, () => ['vui-statcard'])
+  bindCommonAttributes(root, props, [
+    'label',
+    'value',
+    'delta',
+    'deltaDirection',
+    'deltaIcon',
+    'deltaCaption'
+  ])
+  bindUserStyle(root, props)
+
+  if (hasProp(props, 'label')) {
+    const label = createElement('span')
+    const text = createText('')
+    setAttribute(label, 'class', 'vui-statcard__label')
+    bindTextContent(text, () => readProp(props, 'label', ''))
+    insertBefore(label, text, null)
+    insertBefore(root, label, null)
+  }
+
+  if (hasProp(props, 'value')) {
+    const value = createElement('span')
+    setAttribute(value, 'class', 'vui-statcard__value')
+    insertDynamic(value, null, () => resolveSlot(Reflect.get(props, 'value')))
+    insertBefore(root, value, null)
+  }
+
+  if (hasProp(props, 'delta') || hasProp(props, 'deltaIcon') || hasProp(props, 'deltaCaption')) {
+    const delta = createElement('span')
+    effect(() => {
+      const direction = readProp<StatDeltaDirection | undefined>(props, 'deltaDirection', undefined)
+      setAttribute(delta, 'class', `vui-statcard__delta${direction ? ` is-${direction}` : ''}`)
+    })
+    if (hasProp(props, 'deltaIcon')) mountSlot(delta, props, 'deltaIcon')
+    if (hasProp(props, 'delta')) mountSlot(delta, props, 'delta')
+    if (hasProp(props, 'deltaCaption')) {
+      const caption = createElement('span')
+      setAttribute(caption, 'class', 'vui-statcard__caption')
+      mountSlot(caption, props, 'deltaCaption')
+      insertBefore(delta, caption, null)
+    }
+    insertBefore(root, delta, null)
+  }
+
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+export interface StatCardGridProps extends VuiCommonProps {}
+
+export function StatCardGrid(props: StatCardGridProps = {}): VobsNode {
+  const root = createElement('div')
+  bindClassList(root, props, () => ['vui-statcard__grid'])
+  bindCommonAttributes(root, props)
+  bindUserStyle(root, props)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}

package/src/status-bar.ts

@@ -0,0 +1,108 @@
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export type StatusBarDot = 'success' | 'warning' | 'error'
+
+export interface StatusBarItem {
+  readonly id?: string
+  readonly icon?: VuiChildren
+  readonly dot?: StatusBarDot
+  readonly label?: VuiChildren
+  readonly disabled?: boolean
+}
+
+export interface StatusBarProps extends VuiCommonProps {
+  readonly left?: readonly StatusBarItem[]
+  readonly right?: readonly StatusBarItem[]
+  readonly onItemClick?: (id: string, event: MouseEvent) => void
+}
+
+export function StatusBar(props: StatusBarProps = {}): VobsNode {
+  const root = createElement('footer')
+  bindClassList(root, props, () => ['vui-statusbar'])
+  bindCommonAttributes(root, props, ['left', 'right', 'onItemClick'])
+  bindUserStyle(root, props)
+  setAttribute(root, 'role', 'status')
+
+  if (hasProp(props, 'left')) insertDynamic(root, null, () => createStatusGroup(props, 'left'))
+  if (hasProp(props, 'right') || hasProp(props, 'children')) {
+    const group = createElement('div')
+    setAttribute(group, 'class', 'vui-statusbar__group')
+    if (hasProp(props, 'right')) insertDynamic(group, null, () => createStatusItems(props, 'right'))
+    if (hasProp(props, 'children')) mountSlot(group, props, 'children')
+    insertBefore(root, group, null)
+  }
+  return root
+}
+
+function createStatusGroup(props: StatusBarProps, side: 'left' | 'right'): VobsNode {
+  const group = createElement('div')
+  setAttribute(group, 'class', 'vui-statusbar__group')
+  insertDynamic(group, null, () => createStatusItems(props, side))
+  return group
+}
+
+function createStatusItems(props: StatusBarProps, side: 'left' | 'right'): VobsNode {
+  const items = side === 'left'
+    ? readProp<readonly StatusBarItem[]>(props, 'left', [])
+    : readProp<readonly StatusBarItem[]>(props, 'right', [])
+  return createFragment((parent, anchor) => {
+    for (const item of items) insertBefore(parent, createStatusItem(item, props), anchor)
+  })
+}
+
+function createStatusItem(item: StatusBarItem, props: StatusBarProps): VobsNode {
+  const root = createElement('span')
+  setAttribute(root, 'class', 'vui-statusbar__item')
+  if (item.id !== undefined && readProp<unknown>(props, 'onItemClick', undefined)) {
+    setAttribute(root, 'role', 'button')
+    setAttribute(root, 'tabindex', item.disabled === true ? '-1' : '0')
+  }
+  if (item.disabled === true) setAttribute(root, 'aria-disabled', 'true')
+
+  if (item.icon !== undefined) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vui-statusbar__icon')
+    mountSlot(icon, item, 'icon')
+    insertBefore(root, icon, null)
+  }
+  if (item.dot !== undefined) {
+    const dot = createElement('span')
+    setAttribute(dot, 'class', `vui-statusbar__dot vui-statusbar__dot--${item.dot}`)
+    setAttribute(dot, 'aria-hidden', 'true')
+    insertBefore(root, dot, null)
+  }
+  if (item.label !== undefined) mountSlot(root, item, 'label')
+
+  const activate = (event: Event): void => {
+    if (item.disabled === true || item.id === undefined) return
+    const handler = readProp<unknown>(props, 'onItemClick', undefined)
+    if (typeof handler === 'function') (handler as StatusBarProps['onItemClick'])!(item.id, event as MouseEvent)
+  }
+  if (item.id !== undefined) {
+    addEventListener(root, 'click', activate)
+    addEventListener(root, 'keydown', event => {
+      const keyboardEvent = event as KeyboardEvent
+      if (keyboardEvent.key !== 'Enter' && keyboardEvent.key !== ' ') return
+      keyboardEvent.preventDefault?.()
+      activate(keyboardEvent)
+    })
+  }
+  return root
+}