@vobs/layout 1.0.0

package/src/layout.ts

@@ -0,0 +1,294 @@
+import { effect, memo, state } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createComponent,
+  createElement,
+  createText,
+  insertBefore,
+  insertDynamic,
+  provide,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import { KIT_LAYOUT_KEY } from './context'
+import { KitHeader } from './header'
+import { KitSidebar } from './sidebar'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  resolveSlot,
+  setOptionalAttribute
+} from './utils'
+import {
+  createKitViewport,
+  DEFAULT_MOBILE_BREAKPOINT,
+  normalizeBreakpoint
+} from './viewport'
+import type {
+  KitLayoutContext,
+  KitLayoutProps,
+  KitMenuItem,
+  KitSidebarVariant
+} from './types'
+
+export function KitLayout(props: KitLayoutProps = {}): VobsNode {
+  const root = createElement('div')
+  const header = createElement('div')
+  const body = createElement('div')
+  const sidebar = createElement('div')
+  const main = createElement('main')
+  const breadcrumb = createElement('div')
+  const tabs = createElement('div')
+  const content = createElement('div')
+  const backdrop = createElement('div')
+  const footer = createElement('footer')
+
+  const breakpoint = normalizeBreakpoint(
+    readProp(props, 'mobileBreakpoint', DEFAULT_MOBILE_BREAKPOINT)
+  )
+  const viewport = createKitViewport(breakpoint)
+  const sidebarExpanded = readProp(props, 'sidebarExpanded', false)
+  const internalCollapsed = state(
+    readProp<boolean | undefined>(props, 'sidebarCollapsed', undefined) ?? !sidebarExpanded
+  )
+  const internalMobileOpen = state(readProp<boolean | undefined>(props, 'mobileOpen', undefined) ?? false)
+  const collapsed = memo(() => readProp<boolean | undefined>(props, 'sidebarCollapsed', undefined) ?? internalCollapsed.value)
+  const mobileOpen = memo(() => readProp<boolean | undefined>(props, 'mobileOpen', undefined) ?? internalMobileOpen.value)
+  const headerVisible = state(!isProvided(props, 'header'))
+  const sidebarVisible = state(isProvided(props, 'sidebar') || hasProp(props, 'menu'))
+  const backdropVisible = state(!isProvided(props, 'mobileBackdrop'))
+  const breadcrumbVisible = state(false)
+  const tabsVisible = state(false)
+  const footerVisible = state(false)
+
+  const context: KitLayoutContext = {
+    sidebarCollapsed: collapsed,
+    mobileOpen,
+    isMobile: viewport.isMobile,
+    breakpoint,
+
+    toggleSidebar(): void {
+      if (viewport.isMobile.value) context.setMobileOpen(!mobileOpen.value)
+      else context.setSidebarCollapsed(!collapsed.value)
+    },
+
+    setSidebarCollapsed(value: boolean): void {
+      if (!isBoolean(value)) throw new Error('VOBS_KIT001: sidebarCollapsed 必须是 boolean')
+      if (readProp<boolean | undefined>(props, 'sidebarCollapsed', undefined) === undefined) {
+        internalCollapsed.value = value
+      }
+      const handler = readProp<unknown>(props, 'onSidebarCollapsedChange', undefined)
+      if (typeof handler === 'function') {
+        (handler as KitLayoutProps['onSidebarCollapsedChange'])!(value)
+      }
+    },
+
+    setMobileOpen(value: boolean): void {
+      if (!isBoolean(value)) throw new Error('VOBS_KIT001: mobileOpen 必须是 boolean')
+      if (readProp<boolean | undefined>(props, 'mobileOpen', undefined) === undefined) {
+        internalMobileOpen.value = value
+      }
+      const handler = readProp<unknown>(props, 'onMobileOpenChange', undefined)
+      if (typeof handler === 'function') (handler as KitLayoutProps['onMobileOpenChange'])!(value)
+    }
+  }
+  provide(KIT_LAYOUT_KEY, context)
+
+  bindClassList(root, props, () => [
+    'vobs-kit-layout',
+    collapsed.value ? 'vobs-kit-layout--sidebar-collapsed' : undefined,
+    viewport.isMobile.value ? 'vobs-kit-layout--mobile' : undefined,
+    mobileOpen.value ? 'vobs-kit-layout--mobile-open' : undefined
+  ])
+  bindCommonAttributes(root, props, [
+    'header',
+    'sidebar',
+    'breadcrumb',
+    'tabs',
+    'footer',
+    'mobileBackdrop',
+    'menu',
+    'logo',
+    'userMenu',
+    'headerActions',
+    'activeKey',
+    'sidebarExpanded',
+    'sidebarCollapsed',
+    'mobileOpen',
+    'sidebarWidth',
+    'mobileBreakpoint',
+    'sidebarVariant',
+    'onSidebarCollapsedChange',
+    'onMobileOpenChange',
+    'onToggleSidebar',
+    'onCloseSidebar'
+  ])
+  bindUserStyle(root, props, () => {
+    const sidebarWidth = readProp<number | undefined>(props, 'sidebarWidth', undefined)
+    if (sidebarWidth === undefined) return ''
+    return `--vobs-kit-sidebar-width: ${normalizeSidebarWidth(sidebarWidth)}px`
+  })
+  setAttribute(header, 'class', 'vobs-kit-layout__header')
+  insertDynamic(header, null, () => createHeaderSlot(props, context, headerVisible))
+  bindVisibility(header, headerVisible)
+
+  setAttribute(body, 'class', 'vobs-kit-layout__body')
+  setAttribute(sidebar, 'class', 'vobs-kit-layout__sidebar')
+  setAttribute(main, 'class', 'vobs-kit-layout__main')
+  setAttribute(breadcrumb, 'class', 'vobs-kit-layout__breadcrumb')
+  setAttribute(tabs, 'class', 'vobs-kit-layout__tabs')
+  setAttribute(content, 'class', 'vobs-kit-layout__content')
+
+  insertDynamic(sidebar, null, () => createSidebarSlot(props, context, sidebarVisible))
+  bindVisibility(sidebar, sidebarVisible)
+
+  insertDynamic(breadcrumb, null, () => createNamedSlot(props, 'breadcrumb', breadcrumbVisible))
+  bindVisibility(breadcrumb, breadcrumbVisible)
+  insertDynamic(tabs, null, () => createNamedSlot(props, 'tabs', tabsVisible))
+  bindVisibility(tabs, tabsVisible)
+  if (hasProp(props, 'children')) mountSlot(content, props, 'children')
+
+  insertBefore(main, breadcrumb, null)
+  insertBefore(main, tabs, null)
+  insertBefore(main, content, null)
+  insertBefore(body, sidebar, null)
+  insertBefore(body, main, null)
+
+  setAttribute(backdrop, 'class', 'vobs-kit-layout__backdrop')
+  insertDynamic(backdrop, null, () => createBackdropSlot(props, context, sidebarVisible, backdropVisible))
+  bindVisibility(backdrop, memo(() => backdropVisible.value && sidebarVisible.value && mobileOpen.value))
+
+  setAttribute(footer, 'class', 'vobs-kit-layout__footer')
+  insertDynamic(footer, null, () => {
+    const value = isProvided(props, 'footer') ? resolveSlot(readProp(props, 'footer', undefined)) : null
+    footerVisible.value = value !== null
+    return value
+  })
+  bindVisibility(footer, footerVisible)
+
+  insertBefore(root, header, null)
+  insertBefore(root, body, null)
+  insertBefore(root, backdrop, null)
+  insertBefore(root, footer, null)
+  return root
+}
+
+function createHeaderSlot(
+  props: KitLayoutProps,
+  context: KitLayoutContext,
+  visible: { value: boolean }
+): VobsNode | null {
+  if (isProvided(props, 'header')) {
+    const value = resolveSlot(readProp(props, 'header', undefined))
+    visible.value = value !== null
+    return value
+  }
+  visible.value = true
+  return createComponent(KitHeader, {
+    get logo() { return readProp(props, 'logo', undefined) },
+    get title() { return readProp<string | undefined>(props, 'title', undefined) },
+    get headerActions() { return readProp(props, 'headerActions', undefined) },
+    get userMenu() { return readProp(props, 'userMenu', undefined) },
+    onToggleSidebar: () => {
+      context.toggleSidebar()
+      const handler = readProp<unknown>(props, 'onToggleSidebar', undefined)
+      if (typeof handler === 'function') (handler as KitLayoutProps['onToggleSidebar'])!()
+    }
+  })
+}
+
+function createSidebarSlot(
+  props: KitLayoutProps,
+  context: KitLayoutContext,
+  visible: { value: boolean }
+): VobsNode | null {
+  if (isProvided(props, 'sidebar')) {
+    const value = resolveSlot(readProp(props, 'sidebar', undefined))
+    visible.value = value !== null
+    return value
+  }
+  if (!hasProp(props, 'menu')) {
+    visible.value = false
+    return null
+  }
+  visible.value = true
+  return createComponent(KitSidebar, {
+    get menu() { return readProp<readonly KitMenuItem[]>(props, 'menu', []) },
+    get collapsed() { return context.sidebarCollapsed.value },
+    get mobileOpen() { return context.mobileOpen.value },
+    get activeKey() { return readProp<string | undefined>(props, 'activeKey', undefined) },
+    get variant() { return readProp<KitSidebarVariant>(props, 'sidebarVariant', 'default') },
+    get onSelect() { return readProp<KitLayoutProps['onMenuSelect'] | undefined>(props, 'onMenuSelect', undefined) },
+    onClose: () => {
+      context.setMobileOpen(false)
+      const handler = readProp<unknown>(props, 'onCloseSidebar', undefined)
+      if (typeof handler === 'function') (handler as KitLayoutProps['onCloseSidebar'])!()
+    }
+  })
+}
+
+function createNamedSlot(
+  props: KitLayoutProps,
+  name: 'breadcrumb' | 'tabs',
+  visible: { value: boolean }
+): VobsNode | null {
+  const value = hasProp(props, name) ? resolveSlot(readProp(props, name, undefined)) : null
+  visible.value = value !== null
+  return value
+}
+
+function createBackdropSlot(
+  props: KitLayoutProps,
+  context: KitLayoutContext,
+  sidebarVisible: { value: boolean },
+  visible: { value: boolean }
+): VobsNode | null {
+  if (isProvided(props, 'mobileBackdrop')) {
+    const value = resolveSlot(readProp(props, 'mobileBackdrop', undefined))
+    visible.value = value !== null
+    return value
+  }
+  if (!sidebarVisible.value) {
+    visible.value = false
+    return null
+  }
+  visible.value = true
+  const button = createElement('button')
+  setAttribute(button, 'type', 'button')
+  setAttribute(button, 'class', 'vobs-kit-layout__backdrop-button')
+  setAttribute(button, 'aria-label', 'Close navigation')
+  insertBefore(button, createText(''), null)
+  addEventListener(button, 'click', () => {
+    context.setMobileOpen(false)
+    const handler = readProp<unknown>(props, 'onCloseSidebar', undefined)
+    if (typeof handler === 'function') (handler as KitLayoutProps['onCloseSidebar'])!()
+  })
+  return button
+}
+
+function bindVisibility(node: Element, visible: { value: boolean }): void {
+  effect(() => {
+    setProperty(node, 'hidden', !visible.value)
+    setOptionalAttribute(node, 'aria-hidden', visible.value ? undefined : 'true')
+  })
+}
+
+function normalizeSidebarWidth(value: number): number {
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new Error('VOBS_KIT001: sidebarWidth 必须是大于 0 的有限数字')
+  }
+  return Math.round(value)
+}
+
+function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean'
+}
+
+function isProvided(props: object, name: string): boolean {
+  return hasProp(props, name) && Reflect.get(props, name) !== undefined
+}

package/src/menu.ts

@@ -0,0 +1,161 @@
+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 { KitMenuItem, KitMenuProps } from './types'
+
+export function KitMenu(props: KitMenuProps): VobsNode {
+  const root = createElement('ul')
+  const expanded = state<ReadonlySet<string>>(new Set())
+
+  bindClassList(root, props, () => ['vobs-kit-menu'])
+  bindCommonAttributes(root, props, ['items', 'collapsed', 'activeKey', 'onSelect'])
+  if (!hasProp(props, 'role')) setAttribute(root, 'role', 'menu')
+  insertDynamic(root, null, () => createMenuTree(props, expanded))
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createMenuTree(
+  props: KitMenuProps,
+  expanded: { value: ReadonlySet<string> }
+): VobsNode {
+  const items = readProp<readonly KitMenuItem[]>(props, 'items', [])
+  const activeKey = readProp<string | undefined>(props, 'activeKey', undefined)
+  const collapsed = readProp(props, 'collapsed', false)
+
+  return createFragment((parent, anchor) => {
+    for (const item of items) {
+      insertBefore(parent, createMenuItem(item, props, activeKey, collapsed, expanded), anchor)
+    }
+  })
+}
+
+function createMenuItem(
+  item: KitMenuItem,
+  props: KitMenuProps,
+  activeKey: string | undefined,
+  collapsed: boolean,
+  expanded: { value: ReadonlySet<string> }
+): VobsNode {
+  const li = createElement('li')
+  const children = item.children ?? []
+  const hasChildren = children.length > 0
+  const active = item.key === activeKey
+  const activeDescendant = children.some(child => hasActiveDescendant(child, activeKey))
+  const isExpanded = expanded.value.has(item.key) || activeDescendant
+
+  setAttribute(li, 'class', `vobs-kit-menu__item${active || activeDescendant ? ' is-active' : ''}`)
+  setOptionalAttribute(li, 'data-menu-key', item.key)
+
+  if (hasChildren) {
+    const groupButton = createElement('button')
+    setAttribute(groupButton, 'type', 'button')
+    setAttribute(groupButton, 'class', 'vobs-kit-menu__link vobs-kit-menu__group-toggle')
+    setAttribute(groupButton, 'aria-expanded', isExpanded ? 'true' : 'false')
+    if (collapsed) setOptionalAttribute(groupButton, 'title', item.label)
+    appendMenuContent(groupButton, item, collapsed)
+    addEventListener(groupButton, 'click', () => {
+      toggleExpanded(expanded, item.key)
+      if (item.href !== undefined) emitSelect(props, item)
+    })
+    insertBefore(li, groupButton, null)
+
+    if (isExpanded) {
+      const nested = createElement('ul')
+      setAttribute(nested, 'class', 'vobs-kit-menu__children')
+      setAttribute(nested, 'role', 'menu')
+      for (const child of children) {
+        insertBefore(nested, createMenuItem(child, props, activeKey, collapsed, expanded), null)
+      }
+      insertBefore(li, nested, null)
+    }
+  } else {
+    const link = createElement(item.href === undefined ? 'button' : 'a')
+    setAttribute(link, 'class', 'vobs-kit-menu__link')
+    if (item.href === undefined) setAttribute(link, 'type', 'button')
+    else {
+      setAttribute(link, 'href', item.href)
+      setOptionalAttribute(link, 'target', item.target)
+      setOptionalAttribute(link, 'rel', item.rel)
+    }
+    if (active) setAttribute(link, 'aria-current', 'page')
+    if (item.disabled === true) {
+      setAttribute(link, 'aria-disabled', 'true')
+      setProperty(link, 'disabled', true)
+    }
+    if (collapsed) setOptionalAttribute(link, 'title', item.label)
+    appendMenuContent(link, item, collapsed)
+    addEventListener(link, 'click', event => {
+      if (item.disabled === true) {
+        event.preventDefault?.()
+        return
+      }
+      emitSelect(props, item)
+    })
+    insertBefore(li, link, null)
+  }
+
+  return li
+}
+
+function appendMenuContent(parent: Element, item: KitMenuItem, collapsed: boolean): void {
+  if (item.icon !== undefined) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vobs-kit-menu__icon')
+    mountSlot(icon, item, 'icon')
+    insertBefore(parent, icon, null)
+  }
+
+  const label = createElement('span')
+  setAttribute(label, 'class', 'vobs-kit-menu__label')
+  insertBefore(label, createText(item.label), null)
+  insertBefore(parent, label, null)
+
+  if (item.badge !== undefined && !collapsed) {
+    const badge = createElement('span')
+    setAttribute(badge, 'class', 'vobs-kit-menu__badge')
+    mountSlot(badge, item, 'badge')
+    insertBefore(parent, badge, null)
+  }
+
+  if (item.children && item.children.length > 0) {
+    const expand = createElement('span')
+    setAttribute(expand, 'class', 'vobs-kit-menu__expand')
+    setAttribute(expand, 'aria-hidden', 'true')
+    insertBefore(parent, expand, null)
+  }
+}
+
+function toggleExpanded(expanded: { value: ReadonlySet<string> }, key: string): void {
+  const next = new Set(expanded.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  expanded.value = next
+}
+
+function emitSelect(props: KitMenuProps, item: KitMenuItem): void {
+  const handler = readProp<unknown>(props, 'onSelect', undefined)
+  if (typeof handler === 'function') (handler as KitMenuProps['onSelect'])!(item.key, item)
+}
+
+function hasActiveDescendant(item: KitMenuItem, activeKey: string | undefined): boolean {
+  if (item.key === activeKey) return true
+  return item.children?.some(child => hasActiveDescendant(child, activeKey)) ?? false
+}

package/src/sidebar.ts

@@ -0,0 +1,91 @@
+import { effect } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createComponent,
+  createElement,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import { KitMenu } from './menu'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindTextContent,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { KitMenuItem, KitSidebarProps } from './types'
+
+export function KitSidebar(props: KitSidebarProps = {}): VobsNode {
+  const root = createElement('aside')
+  const close = createElement('button')
+
+  bindClassList(root, props, () => [
+    'vobs-kit-sidebar',
+    readProp(props, 'collapsed', false) ? 'is-collapsed' : undefined,
+    readProp(props, 'mobileOpen', false) ? 'is-mobile-open' : undefined,
+    readProp<KitSidebarProps['variant']>(props, 'variant', 'default') === 'centered' ? 'is-centered' : undefined
+  ])
+  bindCommonAttributes(root, props, [
+    'items',
+    'menu',
+    'collapsed',
+    'mobileOpen',
+    'activeKey',
+    'variant',
+    'closeLabel',
+    'footer',
+    'onSelect',
+    'onClose'
+  ])
+  bindUserStyle(root, props)
+  setAttribute(close, 'type', 'button')
+  setAttribute(close, 'class', 'vobs-kit-sidebar__close')
+  effect(() => {
+    setOptionalAttribute(close, 'aria-label', readProp(props, 'closeLabel', 'Close navigation'))
+  })
+  insertBefore(close, createCloseLabel(props), null)
+  addEventListener(close, 'click', () => {
+    const handler = readProp<unknown>(props, 'onClose', undefined)
+    if (typeof handler === 'function') (handler as KitSidebarProps['onClose'])!()
+  })
+  insertBefore(root, close, null)
+
+  insertDynamic(root, null, () => createDefaultMenu(props))
+  if (hasProp(props, 'footer')) {
+    const footer = createElement('div')
+    setAttribute(footer, 'class', 'vobs-kit-sidebar__footer')
+    mountSlot(footer, props, 'footer')
+    insertBefore(root, footer, null)
+  }
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createDefaultMenu(props: KitSidebarProps): VobsNode | null {
+  const items = readProp<readonly KitMenuItem[] | undefined>(props, 'items', undefined)
+    ?? readProp<readonly KitMenuItem[]>(props, 'menu', [])
+  if (items.length === 0 && hasProp(props, 'children')) return null
+
+  return createComponent(KitMenu, {
+    get items() { return items },
+    get collapsed() { return readProp(props, 'collapsed', false) },
+    get activeKey() { return readProp<string | undefined>(props, 'activeKey', undefined) },
+    get onSelect() { return readProp<KitSidebarProps['onSelect'] | undefined>(props, 'onSelect', undefined) }
+  })
+}
+
+function createCloseLabel(props: KitSidebarProps): VobsNode {
+  const text = createElement('span')
+  const content = createText('')
+  setAttribute(text, 'class', 'vobs-kit-sidebar__close-label')
+  bindTextContent(content, () => readProp(props, 'closeLabel', 'Close navigation'))
+  insertBefore(text, content, null)
+  return text
+}