@vobs/ui 0.3.0 → 1.1.0

package/src/chat-composer.ts

@@ -0,0 +1,156 @@
+import { effect } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createText,
+  insertBefore,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindPropertyValue,
+  bindUserStyle,
+  hasProp,
+  listen,
+  mountSlot,
+  readProp,
+  setOptionalAttribute,
+  setOptionalProperty
+} from './utils'
+import type { VuiChildren, VuiCommonProps, VuiEventHandler } from './types'
+
+export interface ChatComposerProps extends VuiCommonProps {
+  readonly value?: string
+  readonly placeholder?: string
+  readonly disabled?: boolean
+  readonly model?: string
+  readonly modelIcon?: VuiChildren
+  readonly modelChevron?: VuiChildren
+  readonly tools?: VuiChildren
+  readonly actions?: VuiChildren
+  readonly sendIcon?: VuiChildren
+  readonly sendLabel?: string
+  readonly onInput?: VuiEventHandler<InputEvent>
+  readonly onSubmit?: (value: string, event: KeyboardEvent) => void
+  readonly onSend?: (value: string, event: MouseEvent) => void
+  readonly onModelClick?: (event: MouseEvent) => void
+}
+
+export function ChatComposer(props: ChatComposerProps = {}): VobsNode {
+  const root = createElement('div')
+  const input = createElement('textarea')
+  const toolbar = createElement('div')
+  const tools = createElement('div')
+  const actions = createElement('div')
+
+  bindClassList(root, props, () => ['vui-composer'])
+  bindUserStyle(root, props)
+  bindCommonAttributes(input, props, [
+    'value',
+    'placeholder',
+    'disabled',
+    'model',
+    'modelIcon',
+    'modelChevron',
+    'tools',
+    'actions',
+    'sendIcon',
+    'sendLabel',
+    'onInput',
+    'onSubmit',
+    'onSend',
+    'onModelClick'
+  ])
+  setAttribute(input, 'class', 'vui-composer__input')
+  setAttribute(toolbar, 'class', 'vui-composer__toolbar')
+  setAttribute(tools, 'class', 'vui-composer__tools')
+  setAttribute(actions, 'class', 'vui-composer__actions')
+
+  effect(() => {
+    setOptionalAttribute(input, 'placeholder', readProp<string | undefined>(props, 'placeholder', undefined))
+    setOptionalProperty(input, 'disabled', readProp(props, 'disabled', false))
+    setOptionalAttribute(input, 'aria-disabled', readProp(props, 'disabled', false) ? 'true' : undefined)
+  })
+  if (hasProp(props, 'value')) {
+    bindPropertyValue(input, 'value', () => readProp(props, 'value', '') ?? '')
+  }
+  listen(input, 'input', props, 'onInput', () => readProp(props, 'disabled', false))
+  addEventListener(input, 'keydown', event => {
+    const keyboardEvent = event as KeyboardEvent
+    if (keyboardEvent.key !== 'Enter' || (!keyboardEvent.metaKey && !keyboardEvent.ctrlKey)) return
+    keyboardEvent.preventDefault?.()
+    const handler = readProp<unknown>(props, 'onSubmit', undefined)
+    if (typeof handler === 'function') (handler as ChatComposerProps['onSubmit'])!(currentValue(input, props), keyboardEvent)
+  })
+
+  if (hasProp(props, 'tools')) mountSlot(tools, props, 'tools')
+  else if (hasProp(props, 'children')) mountSlot(tools, props, 'children')
+  if (hasProp(props, 'model')) insertBefore(tools, createModelSelector(props), null)
+
+  if (hasProp(props, 'actions')) mountSlot(actions, props, 'actions')
+  else insertBefore(actions, createSendButton(input, props), null)
+
+  insertBefore(root, input, null)
+  insertBefore(toolbar, tools, null)
+  insertBefore(toolbar, actions, null)
+  insertBefore(root, toolbar, null)
+  return root
+}
+
+function createModelSelector(props: ChatComposerProps): VobsNode {
+  const button = createElement('button')
+  setAttribute(button, 'class', 'vui-composer__model')
+  setAttribute(button, 'type', 'button')
+  if (hasProp(props, 'modelIcon')) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vui-composer__model-icon')
+    mountSlot(icon, props, 'modelIcon')
+    insertBefore(button, icon, null)
+  }
+  const text = createText('')
+  bindTextContent(text, () => readProp(props, 'model', ''))
+  insertBefore(button, text, null)
+  if (hasProp(props, 'modelChevron')) {
+    const chevron = createElement('span')
+    setAttribute(chevron, 'class', 'vui-composer__model-chevron')
+    mountSlot(chevron, props, 'modelChevron')
+    insertBefore(button, chevron, null)
+  }
+  addEventListener(button, 'click', event => {
+    const handler = readProp<unknown>(props, 'onModelClick', undefined)
+    if (typeof handler === 'function') (handler as ChatComposerProps['onModelClick'])!(event as MouseEvent)
+  })
+  return button
+}
+
+function createSendButton(input: Element, props: ChatComposerProps): VobsNode {
+  const button = createElement('button')
+  setAttribute(button, 'class', 'vui-composer__send')
+  setAttribute(button, 'type', 'button')
+  const label = readProp(props, 'sendLabel', 'Send')
+  setOptionalAttribute(button, 'aria-label', label)
+  if (hasProp(props, 'sendIcon')) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vui-composer__send-icon')
+    mountSlot(icon, props, 'sendIcon')
+    insertBefore(button, icon, null)
+  } else {
+    insertBefore(button, createText(label), null)
+  }
+  effect(() => setProperty(button, 'disabled', readProp(props, 'disabled', false)))
+  addEventListener(button, 'click', event => {
+    if (readProp(props, 'disabled', false)) return
+    const handler = readProp<unknown>(props, 'onSend', undefined)
+    if (typeof handler === 'function') (handler as ChatComposerProps['onSend'])!(currentValue(input, props), event as MouseEvent)
+  })
+  return button
+}
+
+function currentValue(input: Element, props: ChatComposerProps): string {
+  const value = Reflect.get(input, 'value')
+  return typeof value === 'string' ? value : readProp(props, 'value', '') ?? ''
+}

package/src/dialog.ts

@@ -0,0 +1,127 @@
+import { effect } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createText,
+  insertBefore,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute,
+  setOptionalProperty
+} from './utils'
+import type { VuiCommonProps } from './types'
+import type { VuiPortalAdapter } from './overlay'
+import { createPortal } from './overlay'
+
+export type DialogCloseReason = 'close-button' | 'backdrop' | 'escape'
+
+export interface DialogProps extends VuiCommonProps {
+  readonly open?: boolean
+  readonly title?: string
+  readonly headerActions?: VobsNode | (() => VobsNode | null | undefined)
+  readonly size?: 'sm' | 'md' | 'lg'
+  readonly modal?: boolean
+  readonly closeOnBackdrop?: boolean
+  readonly closeOnEscape?: boolean
+  readonly titleId?: string
+  readonly descriptionId?: string
+  readonly closeLabel?: string
+  readonly onClose?: (reason: DialogCloseReason) => void
+  readonly portal?: VuiPortalAdapter<unknown>
+  readonly portalTarget?: unknown
+}
+
+export function Dialog(props: DialogProps = {}): VobsNode {
+  const root = createElement('div')
+  const surface = createElement('section')
+  const body = createElement('div')
+
+  bindClassList(root, props, () => ['vui-backdrop'])
+  bindUserStyle(root, props)
+  bindCommonAttributes(surface, props, [
+    'open',
+    'title',
+    'headerActions',
+    'size',
+    'modal',
+    'closeOnBackdrop',
+    'closeOnEscape',
+    'titleId',
+    'descriptionId',
+    'closeLabel',
+    'onClose',
+    'portal',
+    'portalTarget'
+  ])
+  setAttribute(root, 'role', 'presentation')
+  setAttribute(surface, 'class', 'vui-dialog')
+  setAttribute(surface, 'role', 'dialog')
+  setAttribute(body, 'class', 'vui-dialog__body')
+
+  effect(() => {
+    const open = readProp(props, 'open', false)
+    const modal = readProp(props, 'modal', true)
+    setOptionalProperty(root, 'hidden', !open)
+    setOptionalAttribute(root, 'data-state', open ? 'open' : 'closed')
+    setOptionalAttribute(surface, 'aria-modal', modal ? 'true' : 'false')
+    setOptionalAttribute(surface, 'aria-labelledby', readProp<string | undefined>(props, 'titleId', undefined))
+    setOptionalAttribute(surface, 'aria-describedby', readProp<string | undefined>(props, 'descriptionId', undefined))
+    setOptionalAttribute(surface, 'data-size', readProp(props, 'size', 'md'))
+  })
+
+  if (hasProp(props, 'title') || hasProp(props, 'headerActions') || hasProp(props, 'onClose')) {
+    const head = createElement('header')
+    setAttribute(head, 'class', 'vui-dialog__head')
+    if (hasProp(props, 'title')) {
+      const title = createElement('div')
+      const text = createText('')
+      setAttribute(title, 'class', 'vui-dialog__title')
+      bindTextContent(text, () => readProp(props, 'title', ''))
+      insertBefore(title, text, null)
+      insertBefore(head, title, null)
+    }
+    if (hasProp(props, 'headerActions')) mountSlot(head, props, 'headerActions')
+    if (hasProp(props, 'onClose')) {
+      const close = createElement('button')
+      setAttribute(close, 'class', 'vui-dialog__close')
+      setAttribute(close, 'type', 'button')
+      setAttribute(close, 'aria-label', readProp(props, 'closeLabel', 'Close'))
+      insertBefore(close, createText('x'), null)
+      addEventListener(close, 'click', () => emitClose(props, 'close-button'))
+      insertBefore(head, close, null)
+    }
+    insertBefore(surface, head, null)
+  }
+
+  if (hasProp(props, 'children')) mountSlot(body, props, 'children')
+  insertBefore(surface, body, null)
+  insertBefore(root, surface, null)
+
+  addEventListener(root, 'click', event => {
+    if (event.target !== root) return
+    if (readProp(props, 'closeOnBackdrop', true)) emitClose(props, 'backdrop')
+  })
+  addEventListener(root, 'keydown', event => {
+    if ((event as KeyboardEvent).key !== 'Escape') return
+    if (readProp(props, 'closeOnEscape', true)) emitClose(props, 'escape')
+  })
+  const portal = readProp<VuiPortalAdapter<unknown> | undefined>(props, 'portal', undefined)
+  return portal
+    ? createPortal(root, portal, readProp(props, 'portalTarget', undefined))
+    : root
+}
+
+function emitClose(props: DialogProps, reason: DialogCloseReason): void {
+  if (!readProp(props, 'open', false)) return
+  const handler = readProp<unknown>(props, 'onClose', undefined)
+  if (typeof handler === 'function') handler(reason)
+}

package/src/drawer.ts

@@ -0,0 +1,131 @@
+import { effect } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createText,
+  insertBefore,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute,
+  setOptionalProperty
+} from './utils'
+import { createPortal, type VuiPortalAdapter } from './overlay'
+import type { VuiCommonProps } from './types'
+
+export type DrawerCloseReason = 'close-button' | 'backdrop' | 'escape'
+
+export interface DrawerProps extends VuiCommonProps {
+  readonly open?: boolean
+  readonly title?: string
+  readonly side?: 'left' | 'right'
+  readonly closeOnBackdrop?: boolean
+  readonly closeOnEscape?: boolean
+  readonly modal?: boolean
+  readonly titleId?: string
+  readonly descriptionId?: string
+  readonly closeLabel?: string
+  readonly footer?: VuiCommonProps['children']
+  readonly onClose?: (reason: DrawerCloseReason) => void
+  readonly portal?: VuiPortalAdapter<unknown>
+  readonly portalTarget?: unknown
+}
+
+export function Drawer(props: DrawerProps = {}): VobsNode {
+  const root = createElement('div')
+  const surface = createElement('aside')
+  const body = createElement('div')
+  bindClassList(root, props, () => ['vui-backdrop'])
+  bindUserStyle(root, props)
+  bindCommonAttributes(surface, props, [
+    'open',
+    'title',
+    'side',
+    'closeOnBackdrop',
+    'closeOnEscape',
+    'modal',
+    'titleId',
+    'descriptionId',
+    'closeLabel',
+    'footer',
+    'onClose',
+    'portal',
+    'portalTarget'
+  ])
+  setAttribute(root, 'role', 'presentation')
+  setAttribute(surface, 'class', 'vui-drawer')
+  setAttribute(surface, 'role', 'dialog')
+  setAttribute(body, 'class', 'vui-drawer__body')
+
+  effect(() => {
+    const open = readProp(props, 'open', false)
+    const modal = readProp(props, 'modal', true)
+    setOptionalProperty(root, 'hidden', !open)
+    setOptionalAttribute(root, 'data-state', open ? 'open' : 'closed')
+    setOptionalAttribute(surface, 'aria-modal', modal ? 'true' : 'false')
+    setOptionalAttribute(surface, 'aria-labelledby', readProp<string | undefined>(props, 'titleId', undefined))
+    setOptionalAttribute(surface, 'aria-describedby', readProp<string | undefined>(props, 'descriptionId', undefined))
+    setOptionalAttribute(surface, 'data-side', readProp(props, 'side', 'right'))
+  })
+
+  if (hasProp(props, 'title') || hasProp(props, 'onClose')) {
+    const head = createElement('header')
+    setAttribute(head, 'class', 'vui-drawer__head')
+    if (hasProp(props, 'title')) {
+      const title = createElement('div')
+      const text = createText('')
+      setAttribute(title, 'class', 'vui-dialog__title')
+      bindTextContent(text, () => readProp(props, 'title', ''))
+      insertBefore(title, text, null)
+      insertBefore(head, title, null)
+    }
+    if (hasProp(props, 'onClose')) {
+      const close = createElement('button')
+      setAttribute(close, 'class', 'vui-dialog__close')
+      setAttribute(close, 'type', 'button')
+      setAttribute(close, 'aria-label', readProp(props, 'closeLabel', 'Close'))
+      insertBefore(close, createText('x'), null)
+      addEventListener(close, 'click', () => emitClose(props, 'close-button'))
+      insertBefore(head, close, null)
+    }
+    insertBefore(surface, head, null)
+  }
+
+  if (hasProp(props, 'children')) mountSlot(body, props, 'children')
+  insertBefore(surface, body, null)
+  if (hasProp(props, 'footer')) {
+    const footer = createElement('footer')
+    setAttribute(footer, 'class', 'vui-dialog__foot')
+    mountSlot(footer, props, 'footer')
+    insertBefore(surface, footer, null)
+  }
+  insertBefore(root, surface, null)
+
+  addEventListener(root, 'click', event => {
+    if (event.target !== root) return
+    if (readProp(props, 'closeOnBackdrop', true)) emitClose(props, 'backdrop')
+  })
+  addEventListener(root, 'keydown', event => {
+    if ((event as KeyboardEvent).key !== 'Escape') return
+    if (readProp(props, 'closeOnEscape', true)) emitClose(props, 'escape')
+  })
+
+  const portal = readProp<VuiPortalAdapter<unknown> | undefined>(props, 'portal', undefined)
+  return portal
+    ? createPortal(root, portal, readProp(props, 'portalTarget', undefined))
+    : root
+}
+
+function emitClose(props: DrawerProps, reason: DrawerCloseReason): void {
+  if (!readProp(props, 'open', false)) return
+  const handler = readProp<unknown>(props, 'onClose', undefined)
+  if (typeof handler === 'function') handler(reason)
+}

package/src/editor-tabs.ts

@@ -0,0 +1,184 @@
+import { state } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  resolveSlot,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export interface EditorTabItem {
+  readonly id: string
+  readonly label: string
+  readonly icon?: VuiChildren
+  readonly closeIcon?: VuiChildren
+  readonly closeable?: boolean
+  readonly disabled?: boolean
+}
+
+export interface EditorTabsProps extends VuiCommonProps {
+  readonly tabs?: readonly EditorTabItem[]
+  readonly value?: string
+  readonly defaultValue?: string
+  readonly closeIcon?: VuiChildren
+  readonly actions?: VuiChildren
+  readonly onChange?: (id: string, event: MouseEvent | KeyboardEvent) => void
+  readonly onClose?: (id: string, event: MouseEvent) => void
+}
+
+export function EditorTabs(props: EditorTabsProps = {}): VobsNode {
+  const root = createElement('div')
+  const internalValue = state<string | undefined>(undefined)
+  bindClassList(root, props, () => ['vui-editortabs'])
+  bindCommonAttributes(root, props, [
+    'tabs',
+    'value',
+    'defaultValue',
+    'closeIcon',
+    'actions',
+    'onChange',
+    'onClose'
+  ])
+  bindUserStyle(root, props)
+  insertDynamic(root, null, () => createEditorTabs(props, internalValue))
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createEditorTabs(
+  props: EditorTabsProps,
+  internalValue: { value: string | undefined }
+): VobsNode {
+  const tabs = readProp<readonly EditorTabItem[]>(props, 'tabs', [])
+  const selected = activeId(props, tabs, internalValue)
+  return createFragment((parent, anchor) => {
+    for (const tab of tabs) {
+      insertBefore(parent, createEditorTab(tab, tabs, selected, props, internalValue), anchor)
+    }
+
+    const spacer = createElement('span')
+    setAttribute(spacer, 'class', 'vui-editortabs__spacer')
+    insertBefore(parent, spacer, anchor)
+
+    if (hasProp(props, 'actions')) {
+      const actions = createElement('span')
+      setAttribute(actions, 'class', 'vui-editortabs__actions')
+      mountSlot(actions, props, 'actions')
+      insertBefore(parent, actions, anchor)
+    }
+  })
+}
+
+function createEditorTab(
+  tab: EditorTabItem,
+  tabs: readonly EditorTabItem[],
+  selected: string | undefined,
+  props: EditorTabsProps,
+  internalValue: { value: string | undefined }
+): VobsNode {
+  const active = tab.id === selected
+  const root = createElement('span')
+  setAttribute(root, 'class', `vui-editortab${active ? ' is-active' : ''}`)
+  setAttribute(root, 'role', 'tab')
+  setAttribute(root, 'aria-selected', active ? 'true' : 'false')
+  setAttribute(root, 'tabindex', active ? '0' : '-1')
+  setOptionalAttribute(root, 'data-editor-tab-id', tab.id)
+  if (tab.disabled === true) setAttribute(root, 'aria-disabled', 'true')
+
+  if (tab.icon !== undefined) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'ic')
+    mountSlot(icon, tab, 'icon')
+    insertBefore(root, icon, null)
+  }
+  const label = createElement('span')
+  setAttribute(label, 'class', 'vui-editortab__label')
+  insertBefore(label, createText(tab.label), null)
+  insertBefore(root, label, null)
+
+  if (tab.closeable === true) {
+    const close = createElement('button')
+    setAttribute(close, 'class', 'close')
+    setAttribute(close, 'type', 'button')
+    setAttribute(close, 'aria-label', `Close ${tab.label}`)
+    const closeIcon = tab.closeIcon ?? readProp<VuiChildren | undefined>(props, 'closeIcon', undefined)
+    const icon = closeIcon === undefined ? createText('x') : resolveSlot(closeIcon)
+    if (icon) insertBefore(close, icon, null)
+    addEventListener(close, 'click', event => {
+      event.stopPropagation?.()
+      const handler = readProp<unknown>(props, 'onClose', undefined)
+      if (typeof handler === 'function') (handler as EditorTabsProps['onClose'])!(tab.id, event as MouseEvent)
+    })
+    insertBefore(root, close, null)
+  }
+
+  addEventListener(root, 'click', event => {
+    if (tab.disabled === true) return
+    selectTab(tab.id, props, internalValue, event as MouseEvent)
+  })
+  addEventListener(root, 'keydown', event => {
+    const keyboardEvent = event as KeyboardEvent
+    if (keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ') {
+      keyboardEvent.preventDefault?.()
+      if (tab.disabled !== true) selectTab(tab.id, props, internalValue, keyboardEvent)
+      return
+    }
+    if (keyboardEvent.key !== 'ArrowLeft' && keyboardEvent.key !== 'ArrowRight') return
+    keyboardEvent.preventDefault?.()
+    const direction = keyboardEvent.key === 'ArrowLeft' ? -1 : 1
+    const next = adjacentTab(tabs, tab.id, direction)
+    if (next) selectTab(next.id, props, internalValue, keyboardEvent)
+  })
+  return root
+}
+
+function selectTab(
+  id: string,
+  props: EditorTabsProps,
+  internalValue: { value: string | undefined },
+  event: MouseEvent | KeyboardEvent
+): void {
+  if (readProp<string | undefined>(props, 'value', undefined) === undefined) internalValue.value = id
+  const handler = readProp<unknown>(props, 'onChange', undefined)
+  if (typeof handler === 'function') (handler as EditorTabsProps['onChange'])!(id, event)
+}
+
+function adjacentTab(
+  tabs: readonly EditorTabItem[],
+  id: string,
+  direction: -1 | 1
+): EditorTabItem | undefined {
+  const start = tabs.findIndex(tab => tab.id === id)
+  if (start < 0) return undefined
+  for (let index = start + direction; index >= 0 && index < tabs.length; index += direction) {
+    if (tabs[index].disabled !== true) return tabs[index]
+  }
+  return undefined
+}
+
+function activeId(
+  props: EditorTabsProps,
+  tabs: readonly EditorTabItem[],
+  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
+  return tabs.find(tab => tab.disabled !== true)?.id
+}