@vobs/layout 1.0.0

package/src/styles/layout.css

@@ -0,0 +1,421 @@
+.vobs-kit-layout {
+  --vobs-kit-sidebar-width: 180px;
+  --vobs-kit-sidebar-collapsed-width: 48px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  color: var(--text-default, #1f2937);
+  background: var(--bg-base-default, #ffffff);
+}
+
+.vobs-kit-layout__header,
+.vobs-kit-layout__footer {
+  flex: 0 0 auto;
+}
+
+.vobs-kit-layout__body {
+  display: grid;
+  grid-template-columns: var(--vobs-kit-sidebar-width) minmax(0, 1fr);
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.vobs-kit-layout--sidebar-collapsed .vobs-kit-layout__body {
+  grid-template-columns: var(--vobs-kit-sidebar-collapsed-width) minmax(0, 1fr);
+}
+
+.vobs-kit-layout__sidebar {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  border-right: 1px solid var(--border-neutral-l1, #e5e7eb);
+  background: var(--bg-base-secondary, #f9fafb);
+}
+
+.vobs-kit-layout__sidebar--disabled,
+.vobs-kit-layout__sidebar[hidden] {
+  display: none;
+}
+
+.vobs-kit-layout__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.vobs-kit-layout__breadcrumb,
+.vobs-kit-layout__tabs {
+  flex: 0 0 auto;
+  padding-inline: 24px;
+}
+
+.vobs-kit-layout__content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 24px;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 24px;
+}
+
+.vobs-kit-layout__backdrop {
+  display: none;
+}
+
+.vobs-kit-layout__backdrop[hidden] {
+  display: none;
+}
+
+.vobs-kit-layout__footer {
+  border-top: 1px solid var(--border-neutral-l1, #e5e7eb);
+}
+
+.vobs-kit-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 56px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-neutral-l1, #e5e7eb);
+  background: var(--bg-base-secondary, #f9fafb);
+}
+
+.vobs-kit-header__toggle,
+.vobs-kit-header__brand,
+.vobs-kit-header__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vobs-kit-header__brand {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.vobs-kit-header__logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.vobs-kit-header__title {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vobs-kit-header__toggle-button,
+.vobs-kit-sidebar__close {
+  min-height: 32px;
+  padding: 4px 10px;
+  border: 1px solid var(--border-neutral-l2, #d1d5db);
+  border-radius: 4px;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.vobs-kit-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 10px 6px;
+}
+
+.vobs-kit-sidebar__close {
+  display: none;
+  align-self: flex-end;
+  margin-bottom: 8px;
+}
+
+.vobs-kit-sidebar__close-label {
+  display: inline;
+}
+
+.vobs-kit-sidebar.is-centered .vobs-kit-menu {
+  margin-block: auto;
+}
+
+.vobs-kit-menu,
+.vobs-kit-menu__children {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.vobs-kit-menu__children {
+  padding-left: 16px;
+}
+
+.vobs-kit-menu__link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 36px;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 4px;
+  color: var(--text-secondary, #4b5563);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.vobs-kit-menu__item.is-active > .vobs-kit-menu__link::before {
+  content: '';
+  position: absolute;
+  left: -6px;
+  top: 50%;
+  width: 3px;
+  height: 20px;
+  border-radius: var(--radius-full, 999px);
+  background: var(--bg-brand, #32f08c);
+  transform: translateY(-50%);
+}
+
+.vobs-kit-menu__link:hover,
+.vobs-kit-menu__item.is-active > .vobs-kit-menu__link {
+  color: var(--text-default, #111827);
+  background: var(--bg-overlay-l2, #e5e7eb);
+}
+
+.vobs-kit-menu__icon,
+.vobs-kit-menu__expand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 20px;
+}
+
+.vobs-kit-menu__label {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vobs-kit-menu__badge {
+  flex: 0 0 auto;
+  color: var(--text-tertiary, #6b7280);
+  font-size: 12px;
+}
+
+.vobs-kit-menu__expand::before {
+  content: '+';
+}
+
+.vobs-kit-sidebar.is-collapsed .vobs-kit-menu__label,
+.vobs-kit-sidebar.is-collapsed .vobs-kit-menu__badge,
+.vobs-kit-sidebar.is-collapsed .vobs-kit-menu__expand {
+  display: none;
+}
+
+.vobs-kit-sidebar.is-collapsed .vobs-kit-menu__link {
+  justify-content: center;
+  padding-inline: 6px;
+}
+
+.vobs-kit-sidebar__footer {
+  margin-top: auto;
+  padding-top: 6px;
+}
+
+.vobs-kit-breadcrumb {
+  overflow: auto;
+  color: var(--text-secondary, #4b5563);
+}
+
+.vobs-kit-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  min-width: max-content;
+  gap: 8px;
+  margin: 0;
+  padding: 12px 0;
+  list-style: none;
+}
+
+.vobs-kit-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.vobs-kit-breadcrumb__separator {
+  color: var(--text-tertiary, #9ca3af);
+}
+
+.vobs-kit-breadcrumb__label {
+  color: inherit;
+  text-decoration: none;
+}
+
+.vobs-kit-breadcrumb__item.is-current .vobs-kit-breadcrumb__label {
+  color: var(--text-default, #111827);
+  font-weight: 600;
+}
+
+.vobs-kit-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: auto;
+  border-bottom: 1px solid var(--border-neutral-l1, #e5e7eb);
+}
+
+.vobs-kit-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  min-height: 36px;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  color: var(--text-secondary, #4b5563);
+  background: transparent;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.vobs-kit-tabs__tab:hover,
+.vobs-kit-tabs__tab.is-active {
+  color: var(--text-default, #111827);
+}
+
+.vobs-kit-tabs__tab.is-active {
+  border-bottom-color: var(--text-default, #111827);
+}
+
+.vobs-kit-tabs__icon {
+  display: inline-flex;
+}
+
+.vobs-kit-tabs__label {
+  white-space: nowrap;
+}
+
+.vobs-kit-tabs__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+@media (max-width: 767px) {
+  .vobs-kit-layout__body {
+    display: block;
+  }
+
+  .vobs-kit-layout__main {
+    height: 100%;
+  }
+
+  .vobs-kit-layout__sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 20;
+    width: var(--vobs-kit-sidebar-width);
+    min-height: 100vh;
+    border-right: 1px solid var(--border-neutral-l1, #e5e7eb);
+    box-shadow: 8px 0 24px rgb(0 0 0 / 16%);
+    transform: translateX(-100%);
+    transition: transform 160ms ease;
+  }
+
+  .vobs-kit-layout--sidebar-collapsed .vobs-kit-layout__sidebar {
+    width: var(--vobs-kit-sidebar-width);
+  }
+
+  .vobs-kit-layout--mobile-open .vobs-kit-layout__sidebar {
+    transform: translateX(0);
+  }
+
+  .vobs-kit-layout__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 10;
+    display: block;
+    background: rgb(17 24 39 / 42%);
+  }
+
+  .vobs-kit-layout__backdrop-button {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .vobs-kit-sidebar__close {
+    display: inline-flex;
+  }
+
+  .vobs-kit-layout__breadcrumb,
+  .vobs-kit-layout__tabs {
+    padding-inline: 16px;
+  }
+
+  .vobs-kit-layout__content {
+    padding: 16px;
+  }
+}
+
+.vobs-kit-layout--mobile .vobs-kit-layout__body {
+  display: block;
+}
+
+.vobs-kit-layout--mobile .vobs-kit-layout__sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 20;
+  width: var(--vobs-kit-sidebar-width);
+  min-height: 100vh;
+  box-shadow: 8px 0 24px rgb(0 0 0 / 16%);
+  transform: translateX(-100%);
+}
+
+.vobs-kit-layout--mobile.vobs-kit-layout--mobile-open .vobs-kit-layout__sidebar {
+  transform: translateX(0);
+}
+
+.vobs-kit-layout--mobile .vobs-kit-layout__backdrop:not([hidden]) {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  display: block;
+  background: rgb(17 24 39 / 42%);
+}

package/src/styles/styles.css

@@ -0,0 +1 @@
+@import './layout.css';

package/src/tabs.ts

@@ -0,0 +1,127 @@
+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 { KitTabItem, KitTabsProps } from './types'
+
+export function KitTabs(props: KitTabsProps = {}): VobsNode {
+  const root = createElement('nav')
+  const active = state<string | undefined>(undefined)
+
+  bindClassList(root, props, () => ['vobs-kit-tabs'])
+  bindCommonAttributes(root, props, [
+    'tabs',
+    'items',
+    'value',
+    'activeKey',
+    'closable',
+    'onSelect',
+    'onChange',
+    'onClose'
+  ])
+  if (!hasProp(props, 'aria-label')) setAttribute(root, 'aria-label', 'Tabs')
+  if (!hasProp(props, 'role')) setAttribute(root, 'role', 'tablist')
+  insertDynamic(root, null, () => createTabItems(props, active))
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createTabItems(
+  props: KitTabsProps,
+  internal: { value: string | undefined }
+): VobsNode {
+  const tabs = readProp<readonly KitTabItem[]>(props, 'tabs', readProp(props, 'items', []))
+  const selected = readProp<string | undefined>(
+    props,
+    'activeKey',
+    readProp<string | undefined>(props, 'value', undefined)
+  ) ?? internal.value ?? tabs.find(tab => tab.disabled !== true)?.id
+
+  return createFragment((parent, anchor) => {
+    for (const tab of tabs) {
+      insertBefore(parent, createTab(tab, props, selected, internal), anchor)
+    }
+  })
+}
+
+function createTab(
+  tab: KitTabItem,
+  props: KitTabsProps,
+  selected: string | undefined,
+  internal: { value: string | undefined }
+): VobsNode {
+  const active = tab.id === selected
+  const element = createElement(tab.href === undefined ? 'button' : 'a')
+  setAttribute(element, 'class', `vobs-kit-tabs__tab${active ? ' is-active' : ''}`)
+  setAttribute(element, 'role', 'tab')
+  setAttribute(element, 'aria-selected', active ? 'true' : 'false')
+  setOptionalAttribute(element, 'data-tab-id', tab.id)
+  if (tab.href === undefined) setAttribute(element, 'type', 'button')
+  else setAttribute(element, 'href', tab.href)
+  if (tab.disabled === true) {
+    setAttribute(element, 'aria-disabled', 'true')
+    setProperty(element, 'tabIndex', -1)
+    if (tab.href === undefined) setProperty(element, 'disabled', true)
+  }
+
+  if (tab.icon !== undefined) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vobs-kit-tabs__icon')
+    mountSlot(icon, tab, 'icon')
+    insertBefore(element, icon, null)
+  }
+
+  const label = createElement('span')
+  setAttribute(label, 'class', 'vobs-kit-tabs__label')
+  insertBefore(label, createText(tab.label), null)
+  insertBefore(element, label, null)
+
+  const closable = readProp(props, 'closable', false) || tab.closable === true
+  if (closable) {
+    const close = createElement('button')
+    setAttribute(close, 'class', 'vobs-kit-tabs__close')
+    setAttribute(close, 'type', 'button')
+    setAttribute(close, 'aria-label', `Close ${tab.label}`)
+    insertBefore(close, createText('x'), null)
+    addEventListener(close, 'click', event => {
+      event.stopPropagation?.()
+      const handler = readProp<unknown>(props, 'onClose', undefined)
+      if (typeof handler === 'function') (handler as KitTabsProps['onClose'])!(tab)
+    })
+    insertBefore(element, close, null)
+  }
+
+  addEventListener(element, 'click', event => {
+    if (tab.disabled === true) {
+      event.preventDefault?.()
+      return
+    }
+    if (!isControlled(props)) internal.value = tab.id
+    const onSelect = readProp<unknown>(props, 'onSelect', undefined)
+    if (typeof onSelect === 'function') (onSelect as KitTabsProps['onSelect'])!(tab)
+    const onChange = readProp<unknown>(props, 'onChange', undefined)
+    if (typeof onChange === 'function') (onChange as KitTabsProps['onChange'])!(tab.id, tab)
+  })
+  return element
+}
+
+function isControlled(props: KitTabsProps): boolean {
+  return readProp<string | undefined>(props, 'activeKey', undefined) !== undefined
+    || readProp<string | undefined>(props, 'value', undefined) !== undefined
+}

package/src/types.ts

@@ -0,0 +1,150 @@
+import type { Signal } from '@vobs/reactivity'
+import type { VobsNode } from '@vobs/vobs'
+
+export type LayoutAttributeValue = string | number | boolean | undefined
+
+export type LayoutChild = VobsNode | string | number | null | undefined | false
+
+export type LayoutChildren =
+  | LayoutChild
+  | readonly LayoutChildren[]
+  | (() => LayoutChildren)
+
+export interface LayoutCommonProps {
+  readonly class?: string
+  readonly className?: string
+  readonly style?: string
+  readonly id?: string
+  readonly title?: string
+  readonly role?: string
+  readonly tabIndex?: number
+  readonly children?: LayoutChildren
+  readonly [name: `aria-${string}`]: LayoutAttributeValue
+  readonly [name: `data-${string}`]: LayoutAttributeValue
+}
+
+export interface KitMenuItem {
+  readonly key: string
+  readonly label: string
+  readonly icon?: LayoutChildren
+  readonly badge?: LayoutChildren
+  readonly href?: string
+  readonly target?: string
+  readonly rel?: string
+  readonly permission?: string
+  readonly disabled?: boolean
+  readonly children?: readonly KitMenuItem[]
+}
+
+export type KitSidebarVariant = 'default' | 'centered'
+
+export interface KitLayoutProps extends LayoutCommonProps {
+  readonly header?: LayoutChildren
+  readonly sidebar?: LayoutChildren
+  readonly breadcrumb?: LayoutChildren
+  readonly tabs?: LayoutChildren
+  readonly footer?: LayoutChildren
+  readonly mobileBackdrop?: LayoutChildren
+  readonly menu?: readonly KitMenuItem[]
+  readonly logo?: LayoutChildren
+  readonly title?: string
+  readonly userMenu?: LayoutChildren
+  readonly headerActions?: LayoutChildren
+  readonly activeKey?: string
+  /** Whether the sidebar starts expanded when no controlled collapsed state is provided. */
+  readonly sidebarExpanded?: boolean
+  readonly sidebarCollapsed?: boolean
+  readonly mobileOpen?: boolean
+  readonly sidebarWidth?: number
+  readonly mobileBreakpoint?: number
+  readonly sidebarVariant?: KitSidebarVariant
+  readonly onSidebarCollapsedChange?: (collapsed: boolean) => void
+  readonly onMobileOpenChange?: (open: boolean) => void
+  readonly onToggleSidebar?: () => void
+  readonly onCloseSidebar?: () => void
+  readonly onMenuSelect?: (key: string, item: KitMenuItem) => void
+}
+
+export interface KitHeaderProps extends LayoutCommonProps {
+  readonly logo?: LayoutChildren
+  readonly title?: string
+  readonly sidebarToggle?: LayoutChildren
+  readonly userMenu?: LayoutChildren
+  readonly headerActions?: LayoutChildren
+  readonly toggleLabel?: string
+  readonly onToggleSidebar?: () => void
+}
+
+export interface KitSidebarProps extends LayoutCommonProps {
+  readonly items?: readonly KitMenuItem[]
+  readonly menu?: readonly KitMenuItem[]
+  readonly collapsed?: boolean
+  readonly mobileOpen?: boolean
+  readonly activeKey?: string
+  readonly variant?: KitSidebarVariant
+  readonly closeLabel?: string
+  readonly footer?: LayoutChildren
+  readonly onSelect?: (key: string, item: KitMenuItem) => void
+  readonly onClose?: () => void
+}
+
+export interface KitMenuProps extends LayoutCommonProps {
+  readonly items: readonly KitMenuItem[]
+  readonly collapsed?: boolean
+  readonly activeKey?: string
+  readonly onSelect?: (key: string, item: KitMenuItem) => void
+}
+
+export interface KitBreadcrumbItem {
+  readonly key?: string
+  readonly label: string
+  readonly href?: string
+  readonly disabled?: boolean
+}
+
+export interface KitBreadcrumbProps extends LayoutCommonProps {
+  readonly items: readonly KitBreadcrumbItem[]
+  readonly separator?: LayoutChildren
+  readonly onNavigate?: (item: KitBreadcrumbItem, index: number) => void
+}
+
+export interface KitTabItem {
+  readonly id: string
+  readonly label: string
+  readonly href?: string
+  readonly icon?: LayoutChildren
+  readonly disabled?: boolean
+  readonly closable?: boolean
+}
+
+export interface KitTabsProps extends LayoutCommonProps {
+  readonly tabs?: readonly KitTabItem[]
+  readonly items?: readonly KitTabItem[]
+  readonly value?: string
+  readonly activeKey?: string
+  readonly closable?: boolean
+  readonly onSelect?: (tab: KitTabItem) => void
+  readonly onChange?: (id: string, tab: KitTabItem) => void
+  readonly onClose?: (tab: KitTabItem) => void
+}
+
+export interface KitReadonlySignal<T> {
+  readonly value: T
+}
+
+export interface KitLayoutContext {
+  readonly sidebarCollapsed: KitReadonlySignal<boolean>
+  readonly mobileOpen: KitReadonlySignal<boolean>
+  readonly isMobile: KitReadonlySignal<boolean>
+  readonly breakpoint: number
+  toggleSidebar(): void
+  setSidebarCollapsed(value: boolean): void
+  setMobileOpen(value: boolean): void
+}
+
+export interface KitViewport {
+  readonly width: Signal<number>
+  readonly height: Signal<number>
+  readonly isMobile: Signal<boolean>
+  dispose(): void
+}