@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/navigation/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_vue_computed","_createVNode","_mergeProps","Menu","_vtp_untrack","_vtp_forwardChildren"],"sources":["../../src/navigation/Tabs.tsx"],"sourcesContent":["/**\n * 标签页（WAI-ARIA 的 Tabs 模式），复合组件：Tabs（状态）> TabList（role=\"tablist\"）> Tab（role=\"tab\"），\n * 加上与每个 Tab 对应的 TabPanel（role=\"tabpanel\"）。各层都是独立的组件，可以自由排版、各自加属性。\n *\n *   <Tabs _value={tab}>\n *     <TabList aria-label=\"订单\">\n *       <Tab value=\"all\">全部</Tab>\n *       <Tab value=\"paid\">已付款</Tab>\n *     </TabList>\n *     <TabPanel value=\"all\">…</TabPanel>\n *     <TabPanel value=\"paid\">…</TabPanel>\n *   </Tabs>\n *\n * 键盘：标签之间用方向键移动（漫游焦点，整组一个 Tab 位置），Home / End 到两端；\n * activation=\"automatic\"（默认）时焦点移到哪个标签就切换到哪个，\"manual\" 时按 Enter / 空格才切换。\n *\n * line 样式的下划线是 TabList 里的一个指示条（Indicator）：跟着当前标签走（useActiveIndicator：\n * 切换时用 Anime.js 滑过去，时长取主题，减少动态效果时直接到位；尺寸变化时直接对齐）。\n */\nimport { ChevronDown, ChevronLeft, ChevronRight, Plus, X } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, onBeforeUnmount, useId, watch, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useActiveIndicator } from '../utils/motion/active-indicator';\nimport { useLazyContent } from '../utils/motion/presence';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { Menu, MenuRadioGroup, MenuRadioItem } from '../overlay/Menu';\nimport { plainText } from '../utils/data/text';\nimport { announce } from '../utils/dom/announcer';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { batchLayout } from '../utils/dom/layout-batch';\nimport { startMove } from '../utils/dom/move';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { rovingFocus } from '../utils/dom/roving-focus';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 标签的排列方向 */\nexport interface TabsOrientations {\n  /** 横排（默认），左右键切换 */\n  horizontal: unknown;\n  /** 竖排（标签在左侧），上下键切换 */\n  vertical: unknown;\n}\n\n/** 焦点移动时是否同时切换 */\nexport interface TabsActivations {\n  /** 焦点移到哪个标签就显示哪个面板（默认）：面板内容轻量时用 */\n  automatic: unknown;\n  /** 方向键只移动焦点，按 Enter / 空格才切换：切换面板代价大（要请求数据）时用 */\n  manual: unknown;\n}\n\n/** 标签的样式 */\nexport interface TabsVariants {\n  /** 下划线（默认）：当前标签下方一条品牌色的线 */\n  line: unknown;\n  /** 浅色底：当前标签有浅色底，像分段控件 */\n  soft: unknown;\n}\n\n/** Tabs 的外观选项；可以用 createUi / Provider 的 defaults.Tabs 统一改默认值 */\nexport interface TabsOptions {\n  /** 样式，默认 line */\n  variant?: keyof TabsVariants;\n  /** 字号档位，不写时继承 */\n  size?: TextSize;\n}\n\n/** Tabs 交给 TabList、Tab、TabPanel 的状态 */\nexport interface TabsState {\n  /** 当前标签的值 */\n  readonly value: string | undefined;\n  /** 横排或竖排 */\n  readonly orientation: keyof TabsOrientations;\n  /** 方向键移动焦点时是否同时切换 */\n  readonly activation: keyof TabsActivations;\n  /** 样式 */\n  readonly variant: keyof TabsVariants;\n  /** 面板第一次显示时才渲染 */\n  readonly lazy: boolean;\n  /** 波纹；不写时沿用配置 */\n  readonly ripple: boolean | undefined;\n  /** 切换到某个标签 */\n  select(value: string): void;\n  /** 标签与面板的 id，互相引用 */\n  id(part: 'tab' | 'panel', value: string): string;\n  /**\n   * 登记标签（按渲染顺序）与它的文字，没有选中值时选第一个；返回注销函数\n   * （参数是注销时各标签显示的顺序，关掉当前标签时按它选旁边的）\n   */\n  register(value: string, label: () => string): (order?: readonly string[]) => void;\n  /** 标签的文字（“全部标签页”菜单用） */\n  label(value: string): string;\n  /** 登记面板；返回注销函数 */\n  registerPanel(value: string): () => void;\n  /** 这个标签有没有对应的面板：只当导航用的标签（没有 TabPanel）不写 aria-controls */\n  hasPanel(value: string): boolean;\n  /** 登记了的标签，按渲染顺序 */\n  readonly values: readonly string[];\n  /** 正在拖动的标签 */\n  readonly dragging: string | undefined;\n  /** 开始、结束拖动 */\n  setDragging(value: string | undefined): void;\n  /** 关闭了有焦点的标签：等选中的标签换好之后，把焦点交给它 */\n  refocus(): void;\n}\n\n/** Tabs 的上下文：自定义的标签或面板可以 inject 它 */\nexport const TabsContext = createContext<TabsState>('Tabs');\n\n/** 值里的空格等字符不能出现在 id 里 */\nconst idSafe = (value: string) => value.replace(/[^\\w-]/g, '_');\n\n// ─────────────── Tabs ───────────────\n\n/** 未声明的属性落到外层 div 上 */\nexport interface TabsProps extends PartProps<'div'>, TabsOptions {\n  /** 当前标签的 value：父级写 _value={x}；不写时默认第一个标签 */\n  _value?: string;\n  /** 方向，默认 horizontal */\n  orientation?: keyof TabsOrientations;\n  /** 焦点移动时是否同时切换，默认 automatic */\n  activation?: keyof TabsActivations;\n  /** 面板第一次显示时才渲染，之后切走也保留（面板内容重时用） */\n  lazy?: boolean;\n  /** 标签按下时的波纹；不写时沿用全局配置 */\n  ripple?: boolean;\n  children?: VNodeChild;\n}\n\n/** Tabs 的样式：root、vertical */\nexport const tabsStyles = css.create({\n  // 能收缩：放在顶栏这类一行里时，列表放不下就在列表里滚动\n  root: { display: 'flex', flexDirection: 'column', gap: '_md', minWidth: 0 },\n  vertical: { flexDirection: 'row', alignItems: 'flex-start' },\n});\n\n/** 标签页的状态容器：管理当前值，并把它交给 TabList、Tab、TabPanel */\nexport const Tabs = _component(\n  ({\n    _value: value = _bindable<string | undefined>(undefined),\n    orientation = 'horizontal',\n    activation = 'automatic',\n    variant,\n    size,\n    lazy = false,\n    ripple,\n    children,\n    ...rest\n  }: TabsProps) => {\n    const appearance = useDefaults('Tabs', () => ({ variant, size }), { variant: 'line' });\n    const baseId = useId();\n    let registered = _state.raw<string[]>([]);\n    let panels = _state.raw<string[]>([]);\n    let dragging = _state<string | undefined>(undefined);\n    // 各标签的文字：读的是 Tab 的子内容，跟着它变\n    const labels = new Map<string, () => string>();\n    const current = _derived(value ?? registered[0]);\n    const tabId = (tab: string) => `${baseId}-tab-${idSafe(tab)}`;\n\n    TabsContext.provide({\n      get value() {\n        return current;\n      },\n      get orientation() {\n        return orientation;\n      },\n      get activation() {\n        return activation;\n      },\n      get variant() {\n        return appearance().variant;\n      },\n      get lazy() {\n        return lazy;\n      },\n      get ripple() {\n        return ripple;\n      },\n      select: (next) => (value = next),\n      id: (part, tab) => (part === 'tab' ? tabId(tab) : `${baseId}-${part}-${idSafe(tab)}`),\n      register(tab, label) {\n        registered = [...registered, tab];\n        labels.set(tab, label);\n        return (order = registered) => {\n          registered = registered.filter((item) => item !== tab);\n          labels.delete(tab);\n          if (current !== tab) return;\n          // 关掉的是当前标签（使用方没有另选）：按显示的顺序选它后面的一个，没有时选前面的一个\n          const index = order.indexOf(tab);\n          const rest = order.filter((item) => item !== tab && registered.includes(item));\n          value = rest[Math.min(Math.max(index, 0), rest.length - 1)];\n        };\n      },\n      registerPanel(tab) {\n        panels = [...panels, tab];\n        return () => (panels = panels.filter((item) => item !== tab));\n      },\n      hasPanel: (tab) => panels.includes(tab),\n      label: (tab) => labels.get(tab)?.() ?? tab,\n      get values() {\n        return registered;\n      },\n      get dragging() {\n        return dragging;\n      },\n      setDragging: (next) => (dragging = next),\n      refocus: () =>\n        void nextTick(() => {\n          if (current !== undefined) document.getElementById(tabId(current))?.focus();\n        }),\n    });\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              tabsStyles.root,\n              orientation === 'vertical' && tabsStyles.vertical,\n              appearance().size && fontSizeStyles[appearance().size!],\n            ],\n          },\n          rest,\n        )}\n        data-orientation={orientation}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n// ─────────────── TabList ───────────────\n\n/** 角色、方向由组件管理 */\nexport type TabListManaged = 'role' | 'aria-orientation';\n\n/** 未声明的属性落到 role=\"tablist\" 的 div 上；aria-label 是这组标签的名称 */\nexport interface TabListProps extends PartProps<'div', TabListManaged> {\n  /** 到两端后是否从另一端继续，默认 true */\n  loop?: boolean;\n  /** 列表末尾的“新建标签页”按钮：点了调用 */\n  onAdd?: () => void;\n  /**\n   * 拖动标签（或在标签上按 Alt + ←→）改变顺序：参数是新的顺序（各标签的 value），使用方按它重排；\n   * 不写时不能拖\n   */\n  onReorder?: (values: string[]) => void;\n  /** 标签栏右边“全部标签页”的菜单（标签多、放不下时一眼找到并切过去） */\n  showAllMenu?: boolean;\n  /** line 样式的下划线指示条的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  /** 横排时包着标签列表与右边按钮的那一层的部件属性 */\n  propsBar?: PartProps<'div'>;\n  /** “新建标签页”按钮的部件属性 */\n  propsAdd?: Partial<IconButtonProps>;\n  children?: VNodeChild;\n}\n\n/** TabList 的样式：bar、barLine、root、scrollable、line、lineVertical、soft、softVertical、indicator、indicatorVertical */\nexport const tabListStyles = css.create({\n  // 横排时包着标签列表与右边的按钮（滚动、全部标签页、新建）：列表按内容宽，放不下时收缩并滚动\n  bar: { display: 'flex', alignItems: 'center', gap: '_xs', minWidth: 0 },\n  // 横排 line 的分隔线画在整行上：标签少时也铺满（页签区、页面顶部的标签）\n  barLine: {\n    borderBottomWidth: '_xs',\n    borderBottomStyle: 'solid',\n    borderBottomColor: '_borderMuted',\n  },\n  root: { display: 'flex', flexShrink: 0 },\n  // 横排放不下时（顶栏、窄屏）在列表里横向滚动，不盖到旁边的内容上；滚动条藏起来，触控板、拖动照样能滚\n  scrollable: {\n    flexShrink: 1,\n    minWidth: 0,\n    overflowX: 'auto',\n    overflowY: 'hidden',\n    scrollbarWidth: 'none',\n  },\n  // 指示条按标签的 offsetLeft / offsetTop 定位，列表要是它的定位容器\n  line: { position: 'relative', gap: '_md' },\n  lineVertical: {\n    flexDirection: 'column',\n    gap: '_xs',\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_borderMuted',\n  },\n  soft: { gap: '_xs', padding: '_xs', borderRadius: '_md', backgroundColor: '_fill' },\n  softVertical: { flexDirection: 'column' },\n  // 一条 2px 的品牌色线，压在列表的分隔线上；位置与长度由脚本写（transform 与 width/height）\n  indicator: {\n    position: 'absolute',\n    left: 0,\n    // 压在列表底边的分隔线上（滚动的列表会裁掉伸出去的部分，所以放在边框内侧）\n    bottom: 0,\n    width: 0,\n    height: '_borderWidths.sm',\n    borderRadius: '_sm',\n    backgroundColor: '_accent',\n    pointerEvents: 'none',\n  },\n  indicatorVertical: {\n    left: 'auto',\n    bottom: 'auto',\n    top: 0,\n    insetInlineEnd: `calc(-1 * ${t.borderWidths.xs})`,\n    width: '_borderWidths.sm',\n    height: 0,\n  },\n});\n\n/** 列表里各标签的 value，按显示的顺序（拖动排序后组件的登记顺序不再是显示顺序） */\nconst tabOrder = (list: Element | null | undefined) =>\n  [...(list?.querySelectorAll<HTMLElement>('[role=\"tab\"]') ?? [])].map((tab) => tab.dataset.value!);\n\n/** 标签列表（role=\"tablist\"）：方向键在标签之间移动；横排放不下时有滚动按钮，可以拖动排序、新建 */\nexport const TabList = _component(\n  ({\n    loop = true,\n    onAdd,\n    onReorder,\n    showAllMenu = false,\n    propsIndicator,\n    propsBar,\n    propsAdd,\n    children,\n    ...rest\n  }: TabListProps) => {\n    const lang = useLang();\n    const tabs = TabsContext.inject();\n    let list = _state.raw<HTMLElement | null>(null);\n    let indicator = _state.raw<HTMLElement | null>(null);\n    // 横排放不下时：能不能往前、往后滚（滚动按钮）\n    let overflow = _state.raw({ overflowing: false, start: false, end: false });\n    _effect(() =>\n      list\n        ? rovingFocus(list, { items: '[role=\"tab\"]', orientation: tabs.orientation, loop })\n        : undefined,\n    );\n\n    useActiveIndicator(() => ({\n      container: list,\n      indicator,\n      active: '[role=\"tab\"][aria-selected=\"true\"]',\n      axis: tabs.orientation,\n      value: tabs.value,\n    }));\n\n    function measure() {\n      batchLayout(() => {\n        if (!list || tabs.orientation === 'vertical') return;\n        // 从右到左排版时 scrollLeft 是负的：取绝对值就是离起始端多远\n        const scrolled = Math.abs(list.scrollLeft);\n        const max = list.scrollWidth - list.clientWidth;\n        const next = { overflowing: max > 1, start: scrolled > 1, end: scrolled < max - 1 };\n        return () => {\n          if (Object.entries(next).some(([key, value]) => overflow[key as 'start'] !== value))\n            overflow = next;\n        };\n      });\n    }\n    useResizeObserver(\n      () => (list ? [list, ...list.querySelectorAll<HTMLElement>('[role=\"tab\"]')] : []),\n      measure,\n    );\n    watch(() => tabs.values.length, measure, { flush: 'post' });\n\n    // 切到一个滚到外面的标签（方向键、菜单、程序）：把它滚进来\n    watch(\n      () => tabs.value,\n      (value) => {\n        const tab = value === undefined ? null : document.getElementById(tabs.id('tab', value));\n        if (!list || !tab || list.scrollWidth <= list.clientWidth) return;\n        const outer = list.getBoundingClientRect();\n        const inner = tab.getBoundingClientRect();\n        if (inner.left < outer.left) list.scrollBy({ left: inner.left - outer.left - 16 });\n        else if (inner.right > outer.right) list.scrollBy({ left: inner.right - outer.right + 16 });\n      },\n      { flush: 'post' },\n    );\n\n    /** 滚动按钮：往前（-1）或往后（1）滚大半屏 */\n    function scrollBy(direction: 1 | -1) {\n      if (!list) return;\n      const sign = isRtl(list) ? -direction : direction;\n      list.scrollBy({ left: sign * list.clientWidth * 0.8, behavior: 'smooth' });\n    }\n\n    /** 把 value 移到 to（按显示的顺序），交给使用方重排；键盘移动时告诉读屏 */\n    function moveTab(value: string, to: number, announceMove: boolean) {\n      const order = tabOrder(list);\n      const from = order.indexOf(value);\n      if (!onReorder || from < 0 || to < 0 || to >= order.length || to === from) return;\n      const next = order.filter((item) => item !== value);\n      next.splice(to, 0, value);\n      onReorder(next);\n      if (!announceMove) return;\n      const label = document.getElementById(tabs.id('tab', value))?.textContent ?? value;\n      announce(lang.tabMoved(label, to + 1, order.length));\n      // 标签的元素被移动过：焦点放回它上面\n      void nextTick(() => document.getElementById(tabs.id('tab', value))?.focus());\n    }\n\n    // 拖动排序：越过别的标签的中线就换位（同 Sortable）；触摸时照常横向滚动\n    function onPointerdown(event: PointerEvent) {\n      const target = event.target as Element;\n      const tab = target.closest<HTMLElement>('[role=\"tab\"]');\n      if (!onReorder || !tab || !list || event.pointerType === 'touch') return;\n      const value = tab.dataset.value!;\n      startMove(event, {\n        threshold: 4,\n        // 标签的元素会被重排：捕获在不动的列表上\n        captureTarget: list,\n        onMove: ({ clientX }) => {\n          tabs.setDragging(value);\n          const order = tabOrder(list);\n          const from = order.indexOf(value);\n          const over = [...list!.querySelectorAll<HTMLElement>('[role=\"tab\"]')].find((item) => {\n            const rect = item.getBoundingClientRect();\n            return clientX >= rect.left && clientX <= rect.right;\n          });\n          const to = over ? order.indexOf(over.dataset.value!) : -1;\n          if (!over || to === from) return;\n          const rect = over.getBoundingClientRect();\n          const center = rect.left + rect.width / 2;\n          // 按书写方向“越过中线”：往后挪时要过了它的中线，往前挪时要回到中线之前\n          const past = isRtl(list!) ? clientX < center : clientX > center;\n          if (to > from === past) moveTab(value, to, false);\n        },\n        onEnd: () => tabs.setDragging(undefined),\n      });\n    }\n\n    // 键盘替代拖动：在标签上按 Alt + ←→ 往前、往后挪一位（从右到左排版时反过来）\n    function onKeydown(event: KeyboardEvent) {\n      if (!onReorder || !event.altKey || event.ctrlKey || event.metaKey || !list) return;\n      const tab = (event.target as Element).closest<HTMLElement>('[role=\"tab\"]');\n      const { forward, backward } = inlineArrows(isRtl(list));\n      if (!tab || (event.key !== forward && event.key !== backward)) return;\n      event.preventDefault();\n      const value = tab.dataset.value!;\n      const from = tabOrder(list).indexOf(value);\n      moveTab(value, from + (event.key === forward ? 1 : -1), true);\n    }\n\n    /** “全部标签页”菜单：按显示的顺序（刚加上、还没渲染出来的排在最后）列出标签的文字 */\n    function renderAllMenu() {\n      const shown = tabOrder(list).filter((value) => tabs.values.includes(value));\n      const order = [...shown, ...tabs.values.filter((value) => !shown.includes(value))];\n      const items = order.map((value) => ({ value, label: tabs.label(value) }));\n      return (\n        <Menu\n          trigger={(props) => (\n            <IconButton\n              {...props}\n              icon={ChevronDown}\n              size=\"sm\"\n              variant=\"ghost\"\n              aria-label={lang.tabList}\n            />\n          )}\n          placement=\"bottom-end\"\n        >\n          <MenuRadioGroup\n            label={lang.tabList}\n            _value={tabs.value ?? ''}\n            onUpdate:_value={(next: string) => tabs.select(next)}\n          >\n            {items.map((item) => (\n              <MenuRadioItem key={item.value} value={item.value}>\n                {item.label}\n              </MenuRadioItem>\n            ))}\n          </MenuRadioGroup>\n        </Menu>\n      );\n    }\n\n    return () => {\n      const vertical = tabs.orientation === 'vertical';\n      const tablist = (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                tabListStyles.root,\n                !vertical && tabListStyles.scrollable,\n                tabs.variant === 'line'\n                  ? [tabListStyles.line, vertical && tabListStyles.lineVertical]\n                  : [tabListStyles.soft, vertical && tabListStyles.softVertical],\n              ],\n            },\n            rest,\n            {\n              ref: _toRef(list),\n              role: 'tablist',\n              'aria-orientation': tabs.orientation,\n              onScroll: measure,\n              onPointerdown,\n              onKeydown,\n            },\n          )}\n        >\n          {children}\n          {tabs.variant === 'line' && (\n            <span\n              {...mergeAttrs<'span'>(\n                { sx: [tabListStyles.indicator, vertical && tabListStyles.indicatorVertical] },\n                propsIndicator,\n                { ref: _toRef(indicator), 'aria-hidden': true },\n              )}\n            />\n          )}\n        </div>\n      );\n      if (vertical) return tablist;\n      // 滚动按钮只给指针用：键盘在标签之间移动时，当前标签会自己滚进来\n      const scrollButton = (direction: 1 | -1) =>\n        overflow.overflowing && (\n          <IconButton\n            icon={direction === 1 ? ChevronRight : ChevronLeft}\n            propsIcon={{ flipInRtl: true }}\n            size=\"sm\"\n            variant=\"ghost\"\n            tabindex={-1}\n            aria-label={direction === 1 ? lang.tabScrollNext : lang.tabScrollPrevious}\n            disabled={direction === 1 ? !overflow.end : !overflow.start}\n            onClick={() => scrollBy(direction)}\n          />\n        );\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [tabListStyles.bar, tabs.variant === 'line' && tabListStyles.barLine] },\n            propsBar,\n          )}\n        >\n          {scrollButton(-1)}\n          {tablist}\n          {scrollButton(1)}\n          {showAllMenu && renderAllMenu()}\n          {onAdd && (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                { icon: Plus, size: 'sm', variant: 'ghost', 'aria-label': lang.tabAdd },\n                propsAdd,\n                { onClick: onAdd },\n              )}\n            />\n          )}\n        </div>\n      );\n    };\n  },\n);\n\n// ─────────────── Tab ───────────────\n\n/** 角色、选中、关联与可聚焦由组件管理 */\nexport type TabManaged =\n  'role' | 'aria-selected' | 'aria-controls' | 'id' | 'tabindex' | 'disabled';\n\n/** 未声明的属性落到 role=\"tab\" 的 button 上 */\nexport interface TabProps extends PartProps<'button', TabManaged> {\n  /** 这个标签的值，与对应 TabPanel 的 value 相同 */\n  value: string;\n  /** 不可用：方向键跳过它 */\n  disabled?: boolean;\n  /**\n   * 可以关闭：标签末尾有关闭按钮，标签上按 Delete、鼠标中键点也关闭。使用方移除这个标签；\n   * 关掉的是当前标签时 Tabs 选它后面（没有时前面）的一个，焦点也跟过去\n   */\n  onClose?: () => void;\n  /** 关闭按钮的部件属性 */\n  propsClose?: Partial<IconButtonProps>;\n  children?: VNodeChild;\n}\n\n/** Tabs 的样式：root、hover、line、lineVertical、lineActive、soft 等 */\n/**\n * 标签的配方：状态（选中、禁用、拖动中）由 DOM 上的 aria-selected、disabled、data-dragging 决定，\n * 样式、方向、可关闭是档位\n */\nexport const tabRecipe = css.recipe({\n  name: 'Tab',\n  parts: ['root', 'closeWrapper', 'close'],\n  base: {\n    // 去掉按钮默认外观、焦点环、波纹、颜色过渡由 ButtonBase 给出\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: '_sm',\n      minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n      paddingInline: '_md',\n      color: { default: '_textMuted', _hover: '_text', _selected: '_text' },\n      fontWeight: '_medium',\n      whiteSpace: 'nowrap',\n      borderRadius: '_sm',\n      opacity: { default: null, _dragging: 0.6, _disabled: '_disabled' },\n    },\n    closeWrapper: { display: 'inline-grid', flexShrink: 0 },\n    close: { gridArea: '1 / 1', justifySelf: 'end', alignSelf: 'center', marginInlineEnd: '_xs' },\n  },\n  variants: {\n    variant: {\n      // 下划线：当前标签的底边（竖排时是结束边）一条 2px 的品牌色线，压在列表的分隔线上；\n      // 线由 TabList 的指示条画（切换时滑过去），标签自己只变文字颜色\n      line: {\n        root: {\n          marginBottom: `calc(-1 * ${t.borderWidths.xs})`,\n          borderBottomWidth: '_sm',\n          borderBottomStyle: 'solid',\n          borderBottomColor: 'transparent',\n        },\n      },\n      soft: {\n        root: {\n          // 未选中时同 ButtonBase 的透明底：条件对象按属性整体覆盖前面的值，default 写 null 会露出原生按钮底色\n          backgroundColor: { default: 'transparent', _selected: '_surface' },\n          boxShadow: { default: null, _selected: '_xs' },\n        },\n      },\n    },\n    orientation: { horizontal: {}, vertical: {} },\n    // 可关闭：标签与关闭按钮叠在同一个网格格子里，关闭按钮靠结束端，标签给它留出位置。\n    // 不用定位：标签的 offsetParent 还得是列表，下划线指示条按它的 offsetLeft 对齐\n    closable: {\n      true: { root: { gridArea: '1 / 1', paddingInlineEnd: `calc(${t.space.md} + 1.25em)` } },\n    },\n  },\n  compound: [\n    {\n      when: { variant: 'line', orientation: 'vertical' },\n      root: {\n        justifyContent: 'flex-start',\n        marginBottom: 0,\n        marginInlineEnd: `calc(-1 * ${t.borderWidths.xs})`,\n        borderBottomWidth: 0,\n        borderInlineEndWidth: '_sm',\n        borderInlineEndStyle: 'solid',\n        borderInlineEndColor: 'transparent',\n      },\n    },\n  ],\n});\n\n/** 标签的部件（createUi / Provider 的 styles.Tab 按它定制） */\nexport type TabPart = (typeof tabRecipe.parts)[number];\n\n/** 标签（role=\"tab\" 的 button） */\nexport const Tab = _component(\n  ({ value, disabled = false, onClose, propsClose, children, ...rest }: TabProps) => {\n    const lang = useLang();\n    const tabs = TabsContext.inject();\n    const recipe = useRecipe(tabRecipe);\n    const unregister = tabs.register(_untrack(value), () => plainText(children) || value);\n    onBeforeUnmount(() => {\n      const element = document.getElementById(tabs.id('tab', value));\n      // 关掉的标签有焦点：等 Tabs 选好旁边的标签再把焦点交过去（元素一移除焦点就丢到 body 上了）\n      if (element && element === document.activeElement) tabs.refocus();\n      unregister(tabOrder(element?.closest('[role=\"tablist\"]')));\n    });\n\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key === 'Delete' && onClose && !disabled) {\n        event.preventDefault();\n        onClose();\n      }\n    }\n\n    return () => {\n      const selected = tabs.value === value;\n      const styles = recipe({\n        variant: tabs.variant,\n        orientation: tabs.orientation,\n        closable: !!onClose,\n      });\n      const tab = (\n        <ButtonBase\n          {...mergePartProps<ButtonBaseProps>(\n            {\n              ...styles.root,\n              ripple: tabs.ripple,\n            },\n            rest as Partial<ButtonBaseProps>,\n            {\n              role: 'tab',\n              id: tabs.id('tab', value),\n              'aria-selected': selected,\n              'aria-controls': tabs.hasPanel(value) ? tabs.id('panel', value) : undefined,\n              disabled,\n              // 使用方的 onClick / onFocus 先执行（mergeProps 的规则），onClick 里 preventDefault 可以拦下切换\n              onClick: () => tabs.select(value),\n              onFocus: () => {\n                if (tabs.activation === 'automatic') tabs.select(value);\n              },\n              onKeydown,\n              'aria-keyshortcuts': onClose ? 'Delete' : undefined,\n              // 鼠标中键关闭（同浏览器的标签页）\n              onAuxclick: (event: MouseEvent) => {\n                if (event.button === 1 && onClose && !disabled) onClose();\n              },\n            },\n          )}\n          data-state={selected ? 'active' : 'inactive'}\n          data-value={value}\n          data-dragging={tabs.dragging === value || undefined}\n        >\n          {children}\n        </ButtonBase>\n      );\n      if (!onClose) return tab;\n      // 关闭按钮不能放进标签按钮里（按钮里不能有按钮）：一起包在 role=\"presentation\" 里，按钮本身只给指针用（对读屏隐藏）\n      return (\n        <span role=\"presentation\" {...mergeAttrs<'span'>(styles.closeWrapper)}>\n          {tab}\n          <IconButton\n            {...mergePartProps<IconButtonProps>(\n              {\n                icon: X,\n                size: 'xs',\n                variant: 'ghost',\n                radius: 'full',\n                ...styles.close,\n                'aria-label': lang.tabClose(plainText(children) || value),\n              },\n              propsClose,\n              {\n                tabindex: -1,\n                // 只给指针用：tablist 里只能有标签；键盘、读屏用标签上的 Delete（aria-keyshortcuts）\n                'aria-hidden': true,\n                disabled,\n                // 按下时不把焦点挪到关闭按钮上\n                onPointerdown: (event: PointerEvent) => event.preventDefault(),\n                onClick: (event: MouseEvent) => {\n                  event.stopPropagation();\n                  onClose();\n                },\n              },\n            )}\n          />\n        </span>\n      );\n    };\n  },\n);\n\n// ─────────────── TabPanel ───────────────\n\n/** 角色、关联与显示由组件管理 */\nexport type TabPanelManaged = 'role' | 'id' | 'aria-labelledby' | 'hidden';\n\n/** 未声明的属性落到 role=\"tabpanel\" 的 div 上 */\nexport interface TabPanelProps extends PartProps<'div', TabPanelManaged> {\n  /** 对应标签的 value */\n  value: string;\n  children?: VNodeChild;\n}\n\n/** Tabs 的样式：root */\nexport const tabPanelStyles = css.create({\n  root: { flexGrow: 1, minWidth: 0, borderRadius: '_sm' },\n});\n\n/** 标签面板（role=\"tabpanel\"）：只显示当前标签的那一个 */\nexport const TabPanel = _component(({ value, children, ...rest }: TabPanelProps) => {\n  const tabs = TabsContext.inject();\n  onBeforeUnmount(tabs.registerPanel(_untrack(value)));\n  // 显示过：lazy 时从这以后一直渲染内容\n  const showContent = useLazyContent(\n    () => tabs.value === value,\n    () => tabs.lazy,\n  );\n\n  return () => {\n    const selected = tabs.value === value;\n    return (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [tabPanelStyles.root, focusRingStyles.visible], tabindex: 0 },\n          rest,\n          {\n            role: 'tabpanel',\n            id: tabs.id('panel', value),\n            'aria-labelledby': tabs.id('tab', value),\n            hidden: !selected,\n          },\n        )}\n        data-state={selected ? 'active' : 'inactive'}\n      >\n        {showContent() && children}\n      </div>\n    );\n  };\n});\n"],"mappings":"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"}

package/dist/navigation/Toolbar.d.ts

@@ -0,0 +1,39 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type Space } from '../utils/style/styles';
+/** 工具栏方向 */
+export interface ToolbarOrientations {
+    /** 横排（默认），左右键移动 */
+    horizontal: unknown;
+    /** 竖排，上下键移动 */
+    vertical: unknown;
+}
+/** 角色与方向由组件管理 */
+export type ToolbarManaged = 'role' | 'aria-orientation';
+/** 未声明的属性落到 div 上；aria-label 是工具栏的名称 */
+export interface ToolbarProps extends PartProps<'div', ToolbarManaged> {
+    /** 方向，默认 horizontal */
+    orientation?: keyof ToolbarOrientations;
+    /** 到两端后是否从另一端继续，默认 true */
+    loop?: boolean;
+    /** 项之间的间距档位，默认 xs */
+    gap?: Space;
+    /** 参与方向键移动的项的选择器，默认按钮与链接 */
+    items?: string;
+    children?: VNodeChild;
+}
+/** Toolbar 的样式：root、vertical */
+export declare const toolbarStyles: Readonly<{
+    root: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+}>;
+/** 工具栏交给里面的组件的状态 */
+export interface ToolbarState {
+    /** 方向 */
+    readonly orientation: keyof ToolbarOrientations;
+}
+/** 工具栏的上下文：里面自带漫游焦点的组件（ToggleGroup）据此把焦点交给工具栏统一管理 */
+export declare const ToolbarContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<ToolbarState>;
+/** 工具栏：一个 Tab 位置，组内方向键移动 */
+export declare const Toolbar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ToolbarProps>;

package/dist/navigation/Toolbar.js

@@ -0,0 +1,67 @@
+import { mergeAttrs } from "../utils/props.js";
+import { gapStyles } from "../utils/style/styles.js";
+import { rovingFocus } from "../utils/dom/roving-focus.js";
+import { createVNode, mergeProps, shallowRef } from "vue";
+import { _component, childrenProp, createContext, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/navigation/Toolbar.tsx
+/** 工具栏方向 */
+/** 角色与方向由组件管理 */
+/** 未声明的属性落到 div 上；aria-label 是工具栏的名称 */
+/** Toolbar 的样式：root、vertical */
+var toolbarStyles = css.create({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		flexWrap: "wrap"
+	},
+	vertical: {
+		flexDirection: "column",
+		alignItems: "stretch"
+	}
+});
+/** 默认参与方向键移动的项：按钮、链接、自定义的 role="button" */
+var DEFAULT_ITEMS = "button, a[href], [role=\"button\"]";
+/** 工具栏交给里面的组件的状态 */
+/** 工具栏的上下文：里面自带漫游焦点的组件（ToggleGroup）据此把焦点交给工具栏统一管理 */
+var ToolbarContext = createContext("Toolbar");
+/** 工具栏：一个 Tab 位置，组内方向键移动 */
+var Toolbar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const loop = readonlyProp(_props, "loop", true);
+	const gap = readonlyProp(_props, "gap", "xs");
+	const items = readonlyProp(_props, "items", () => DEFAULT_ITEMS);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	let root = shallowRef(null);
+	effect(() => root.value ? rovingFocus(root.value, {
+		items: items.value,
+		orientation: orientation.value,
+		loop: loop.value,
+		initial: (enabled) => enabled[0]
+	}) : void 0);
+	ToolbarContext.provide({ get orientation() {
+		return orientation.value;
+	} });
+	return () => createVNode("div", mergeProps(mergeAttrs({ sx: [
+		toolbarStyles.root,
+		orientation.value === "vertical" && toolbarStyles.vertical,
+		gapStyles[gap.value]
+	] }, rest, {
+		ref: root,
+		role: "toolbar",
+		"aria-orientation": orientation.value
+	}), { "data-orientation": orientation.value }), [children.value]);
+}, {
+	name: "Toolbar",
+	props: [
+		"orientation",
+		"loop",
+		"gap",
+		"items"
+	]
+});
+//#endregion
+export { Toolbar, ToolbarContext, toolbarStyles };
+
+//# sourceMappingURL=Toolbar.js.map

package/dist/navigation/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/navigation/Toolbar.tsx"],"sourcesContent":["/**\n * 工具栏（role=\"toolbar\"）：一组相关的按钮、链接。整组只占一个 Tab 位置，组内用方向键移动（漫游焦点），\n * 键盘用户不必一个个 Tab 过去（WAI-ARIA 的 Toolbar 模式）。名称写 aria-label。\n *\n *   <Toolbar aria-label=\"文字格式\">\n *     <IconButton icon={Bold} aria-label=\"加粗\" />\n *     <IconButton icon={Italic} aria-label=\"斜体\" />\n *   </Toolbar>\n *\n * 里面的输入框不参与方向键移动（左右键要用来移动光标），用 Tab 进出。\n * 里面的 ToggleGroup 不再自己管焦点，它的按钮和其他按钮一起用方向键移动（同 WAI-ARIA 的文字格式工具栏示例）。\n */\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { rovingFocus } from '../utils/dom/roving-focus';\nimport { gapStyles, type Space } from '../utils/style/styles';\n\n/** 工具栏方向 */\nexport interface ToolbarOrientations {\n  /** 横排（默认），左右键移动 */\n  horizontal: unknown;\n  /** 竖排，上下键移动 */\n  vertical: unknown;\n}\n\n/** 角色与方向由组件管理 */\nexport type ToolbarManaged = 'role' | 'aria-orientation';\n\n/** 未声明的属性落到 div 上；aria-label 是工具栏的名称 */\nexport interface ToolbarProps extends PartProps<'div', ToolbarManaged> {\n  /** 方向，默认 horizontal */\n  orientation?: keyof ToolbarOrientations;\n  /** 到两端后是否从另一端继续，默认 true */\n  loop?: boolean;\n  /** 项之间的间距档位，默认 xs */\n  gap?: Space;\n  /** 参与方向键移动的项的选择器，默认按钮与链接 */\n  items?: string;\n  children?: VNodeChild;\n}\n\n/** Toolbar 的样式：root、vertical */\nexport const toolbarStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', flexWrap: 'wrap' },\n  vertical: { flexDirection: 'column', alignItems: 'stretch' },\n});\n\n/** 默认参与方向键移动的项：按钮、链接、自定义的 role=\"button\" */\nconst DEFAULT_ITEMS = 'button, a[href], [role=\"button\"]';\n\n/** 工具栏交给里面的组件的状态 */\nexport interface ToolbarState {\n  /** 方向 */\n  readonly orientation: keyof ToolbarOrientations;\n}\n\n/** 工具栏的上下文：里面自带漫游焦点的组件（ToggleGroup）据此把焦点交给工具栏统一管理 */\nexport const ToolbarContext = createContext<ToolbarState>('Toolbar');\n\n/** 工具栏：一个 Tab 位置，组内方向键移动 */\nexport const Toolbar = _component(\n  ({\n    orientation = 'horizontal',\n    loop = true,\n    gap = 'xs',\n    items = DEFAULT_ITEMS,\n    children,\n    ...rest\n  }: ToolbarProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    // Tab 进入时落在上次聚焦的项，没有就是第一项：不跳到按下的切换按钮上（那是标签页的习惯）\n    _effect(() =>\n      root\n        ? rovingFocus(root, { items, orientation, loop, initial: (enabled) => enabled[0] })\n        : undefined,\n    );\n    ToolbarContext.provide({\n      get orientation() {\n        return orientation;\n      },\n    });\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              toolbarStyles.root,\n              orientation === 'vertical' && toolbarStyles.vertical,\n              gapStyles[gap],\n            ],\n          },\n          rest,\n          { ref: _toRef(root), role: 'toolbar', 'aria-orientation': orientation },\n        )}\n        data-orientation={orientation}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AA4CA,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EAAE,SAAS;EAAQ,YAAY;EAAU,UAAU;CAAO;CAChE,UAAU;EAAE,eAAe;EAAU,YAAY;CAAU;AAC7D,CAAC;;AAGD,IAAM,gBAAgB;;;AAStB,IAAa,iBAAiB,cAA4B,SAAS;;AAGnE,IAAa,UAAU,0BACrB,QAAA,SAOoB;CAAA,MAAA,cAAAA,aAAA,QAAA,eANJ,YAAY;CAAA,MAAA,OAAAA,aAAA,QAAA,QACnB,IAAI;CAAA,MAAA,MAAAA,aAAA,QAAA,OACL,IAAI;CAAA,MAAA,QAAAA,aAAA,QAAA,eACF,aAAa;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAElB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,IAAI,OAAIC,WAAkC,IAAI;CAE9C,aACE,KAAA,QACI,YAAW,KAAA,OAAO;EAAE,OAAK,MAAA;EAAE,aAAW,YAAA;EAAE,MAAI,KAAA;EAAE,UAAU,YAAY,QAAQ;CAAG,CAAC,IAChF,KAAA,CAAS;CAEf,eAAe,QAAQ,EACrB,IAAI,cAAc;EAChB,OAAA,YAAA;CACF,EACF,CAAC;CAED,aAAOC,YAAA,OAAAC,WAEC,WACF,EACE,IAAI;EACF,cAAc;EACd,YAAA,UAAgB,cAAc,cAAc;EAC5C,UAAS,IAAA;CAAK,EAElB,GACA,MACA;EAAE,KAAG;EAAgB,MAAM;EAAW,oBAAkB,YAAA;CAAc,CACxE,GAAC,EAAA,oBAAA,YAAA,MAAA,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAMP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/AlertDialog.d.ts

@@ -0,0 +1,43 @@
+import { type VNodeChild } from 'vue';
+import { type DialogProps } from './Dialog';
+/** 未声明的属性落到 dialog 上；确认、取消按钮的属性（onConfirm、confirmText、tone、propsConfirm…）同 Dialog */
+export interface AlertDialogProps extends Omit<DialogProps, 'footer' | 'closable' | 'dismissible'> {
+}
+/** 确认对话框：确认 / 取消两个按钮，焦点先落在取消上 */
+export declare const AlertDialog: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<AlertDialogProps>;
+/** 确认时要填的理由 */
+export interface ConfirmReason {
+    /** 输入框的标签（“驳回理由”） */
+    label: VNodeChild;
+    /** 必填：空着点确认时提示“必填”、不关闭 */
+    required?: boolean;
+    /** 输入框的占位文字 */
+    placeholder?: string;
+    /** 输入框下的说明（“申请人会收到这段理由”） */
+    description?: VNodeChild;
+    /** 最多几个字，显示字数 */
+    maxlength?: number;
+}
+/** confirm() 的选项：AlertDialog 的属性（open 由 confirm 管理） */
+export interface ConfirmOptions extends Omit<AlertDialogProps, '_open' | 'onConfirm'> {
+    /** 确认：拿到填的理由（没给 reason 时是空字符串）；返回 false 或失败时保持打开 */
+    onConfirm?: (reason: string) => unknown;
+    /** 要填理由：对话框里多一个多行输入框，confirm 得到填的理由 */
+    reason?: ConfirmReason;
+}
+/** useConfirm 返回的函数：给了 reason 时得到理由（取消时 null），否则得到是否确认 */
+export interface Confirm {
+    /** 要填理由：确认时得到理由，取消、Esc 时得到 null */
+    (options: ConfirmOptions & {
+        reason: ConfirmReason;
+    }): Promise<string | null>;
+    /** 确认得到 true，取消、Esc 得到 false */
+    (options: ConfirmOptions): Promise<boolean>;
+}
+/**
+ * 命令式确认：在组件 setup 里调用，返回 confirm(options)。对话框渲染到 body 末尾，
+ * 沿用调用处的主题、语言等配置（ConfigScope）；关闭后自动卸载。
+ * 确认（onConfirm 完成）时得到 true（有 reason 时得到理由），取消、Esc 时得到 false（有 reason 时 null）；
+ * onConfirm 返回 false 或失败时对话框保持打开，可以再试或取消。
+ */
+export declare function useConfirm(): Confirm;

package/dist/overlay/AlertDialog.js

@@ -0,0 +1,106 @@
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { mergePartProps } from "../utils/props.js";
+import { useRecipe } from "../config/styles.js";
+import { transitions } from "../utils/style/transitions.js";
+import { Field } from "../form/Field.js";
+import { Textarea } from "../input/Textarea.js";
+import { useDetachedDialog } from "./detached.js";
+import { ModalCore } from "./ModalCore.js";
+import { dialogRecipe } from "./Dialog.js";
+import { createVNode, mergeProps, shallowRef } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/overlay/AlertDialog.tsx
+/** 未声明的属性落到 dialog 上；确认、取消按钮的属性（onConfirm、confirmText、tone、propsConfirm…）同 Dialog */
+/** 确认对话框：确认 / 取消两个按钮，焦点先落在取消上 */
+var AlertDialog = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const size = readonlyProp(_props, "size");
+	const onConfirm = readonlyProp(_props, "onConfirm");
+	const propsCancel = readonlyProp(_props, "propsCancel");
+	const rest = restProps(_props, _ctx, true);
+	const appearance = useDefaults("Dialog", () => ({ size: size.value }), { size: "xs" });
+	const recipe = useRecipe(dialogRecipe);
+	return () => createVNode(ModalCore, mergeProps(mergePartProps({
+		title: rest.title,
+		parts: recipe({ size: appearance().size }),
+		panelSx: transitions.scale
+	}, rest, {
+		role: "alertdialog",
+		closable: false,
+		dismissible: false,
+		onConfirm: onConfirm.value ?? (() => {}),
+		propsCancel: {
+			autofocus: true,
+			...propsCancel.value
+		}
+	}), {
+		"_open": open.value,
+		"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+	}), null);
+}, {
+	name: "AlertDialog",
+	props: [
+		"_open",
+		"onUpdate:_open",
+		"size",
+		"onConfirm",
+		"propsCancel"
+	]
+});
+/** 确认时要填的理由 */
+/** confirm() 的选项：AlertDialog 的属性（open 由 confirm 管理） */
+/** useConfirm 返回的函数：给了 reason 时得到理由（取消时 null），否则得到是否确认 */
+/**
+* 命令式确认：在组件 setup 里调用，返回 confirm(options)。对话框渲染到 body 末尾，
+* 沿用调用处的主题、语言等配置（ConfigScope）；关闭后自动卸载。
+* 确认（onConfirm 完成）时得到 true（有 reason 时得到理由），取消、Esc 时得到 false（有 reason 时 null）；
+* onConfirm 返回 false 或失败时对话框保持打开，可以再试或取消。
+*/
+function useConfirm() {
+	const mount = useDetachedDialog();
+	const lang = useLang();
+	const confirm = ({ reason, onConfirm, ...options }) => new Promise((resolve) => {
+		let confirmed = false;
+		const text = shallowRef("");
+		const tried = shallowRef(false);
+		const missing = () => !!reason?.required && !text.value.trim();
+		mount((host) => createVNode(AlertDialog, mergeProps(options, {
+			"propsCancel": reason ? {
+				autofocus: false,
+				...options.propsCancel
+			} : options.propsCancel,
+			"_open": host.open,
+			"onUpdate:_open": ($event) => host.open = $event,
+			"onConfirm": async () => {
+				tried.value = true;
+				if (missing()) return false;
+				if (await onConfirm?.(text.value.trim()) === false) return false;
+				confirmed = true;
+			},
+			"onClose": (event) => {
+				options.onClose?.(event);
+				resolve(reason ? confirmed ? text.value.trim() : null : confirmed);
+				host.closed();
+			}
+		}), { default: () => [options.children, reason && createVNode(Field, {
+			"label": reason.label,
+			"description": reason.description,
+			"required": reason.required,
+			"error": tried.value && missing() ? lang.formRequired : void 0
+		}, { default: () => [createVNode(Textarea, {
+			"_value": text.value,
+			"onUpdate:_value": (next) => text.value = next,
+			"placeholder": reason.placeholder,
+			"maxlength": reason.maxlength,
+			"showCount": reason.maxlength !== void 0,
+			"autofocus": true
+		}, null)] })] }));
+	});
+	return confirm;
+}
+//#endregion
+export { AlertDialog, useConfirm };
+
+//# sourceMappingURL=AlertDialog.js.map

package/dist/overlay/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/overlay/AlertDialog.tsx"],"sourcesContent":["/**\n * 确认对话框（role=\"alertdialog\"）：打断当前操作、要用户明确选择“确认”或“取消”，如删除前的确认。\n * 建在 Dialog 的内核上；没有右上角的关闭按钮，点击遮罩不关闭（Esc 仍然等于取消）。\n * 打开时焦点落在“取消”上，误按 Enter 不会执行破坏性操作（同 Radix AlertDialog）。\n *\n *   <AlertDialog\n *     _open={confirming}\n *     tone=\"danger\"\n *     title=\"删除这个项目？\"\n *     description=\"删除后无法恢复。\"\n *     confirmText=\"删除\"\n *     onConfirm={() => api.remove(id)}\n *   />\n *\n * onConfirm 返回 Promise 时：确认按钮显示加载中、取消与 Esc 暂不可用，完成后关闭；失败时保持打开，由调用方提示错误。\n *\n * 只想在一个操作前问一句时，用命令式的 useConfirm，不必自己管 open：\n *\n *   const confirm = useConfirm();                  // setup 里\n *   if (await confirm({ title: '删除这个项目？', tone: 'danger', confirmText: '删除' })) remove();\n *\n * 要填理由的（驳回、作废、退回）给 reason：对话框里多一个多行输入框，得到填的理由，取消时是 null：\n *\n *   const reason = await confirm({ title: '驳回这个申请？', tone: 'danger', reason: { label: '驳回理由', required: true } });\n *   if (reason !== null) await api.reject(id, reason);\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { shallowRef, type VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { transitions } from '../utils/style/transitions';\nimport { Field } from '../form/Field';\nimport { Textarea } from '../input/Textarea';\nimport { mergePartProps } from '../utils/props';\nimport { useDetachedDialog } from './detached';\nimport { dialogRecipe, type DialogProps } from './Dialog';\nimport { ModalCore, type ModalCoreProps } from './ModalCore';\n\n/** 未声明的属性落到 dialog 上；确认、取消按钮的属性（onConfirm、confirmText、tone、propsConfirm…）同 Dialog */\nexport interface AlertDialogProps extends Omit<\n  DialogProps,\n  'footer' | 'closable' | 'dismissible'\n> {}\n\n/** 确认对话框：确认 / 取消两个按钮，焦点先落在取消上 */\nexport const AlertDialog = _component(\n  ({ _open: open = _bindable(false), size, onConfirm, propsCancel, ...rest }: AlertDialogProps) => {\n    const appearance = useDefaults('Dialog', () => ({ size }), { size: 'xs' });\n    const recipe = useRecipe(dialogRecipe);\n    return () => (\n      <ModalCore\n        {...mergePartProps<ModalCoreProps>(\n          {\n            title: rest.title,\n            parts: recipe({ size: appearance().size }),\n            panelSx: transitions.scale,\n          },\n          rest,\n          {\n            role: 'alertdialog',\n            closable: false,\n            dismissible: false,\n            // 没写 onConfirm 也有确认按钮：点了就关\n            onConfirm: onConfirm ?? (() => {}),\n            propsCancel: { autofocus: true, ...propsCancel },\n          },\n        )}\n        _open={open}\n      />\n    );\n  },\n);\n\n/** 确认时要填的理由 */\nexport interface ConfirmReason {\n  /** 输入框的标签（“驳回理由”） */\n  label: VNodeChild;\n  /** 必填：空着点确认时提示“必填”、不关闭 */\n  required?: boolean;\n  /** 输入框的占位文字 */\n  placeholder?: string;\n  /** 输入框下的说明（“申请人会收到这段理由”） */\n  description?: VNodeChild;\n  /** 最多几个字，显示字数 */\n  maxlength?: number;\n}\n\n/** confirm() 的选项：AlertDialog 的属性（open 由 confirm 管理） */\nexport interface ConfirmOptions extends Omit<AlertDialogProps, '_open' | 'onConfirm'> {\n  /** 确认：拿到填的理由（没给 reason 时是空字符串）；返回 false 或失败时保持打开 */\n  onConfirm?: (reason: string) => unknown;\n  /** 要填理由：对话框里多一个多行输入框，confirm 得到填的理由 */\n  reason?: ConfirmReason;\n}\n\n/** useConfirm 返回的函数：给了 reason 时得到理由（取消时 null），否则得到是否确认 */\nexport interface Confirm {\n  /** 要填理由：确认时得到理由，取消、Esc 时得到 null */\n  (options: ConfirmOptions & { reason: ConfirmReason }): Promise<string | null>;\n  /** 确认得到 true，取消、Esc 得到 false */\n  (options: ConfirmOptions): Promise<boolean>;\n}\n\n/**\n * 命令式确认：在组件 setup 里调用，返回 confirm(options)。对话框渲染到 body 末尾，\n * 沿用调用处的主题、语言等配置（ConfigScope）；关闭后自动卸载。\n * 确认（onConfirm 完成）时得到 true（有 reason 时得到理由），取消、Esc 时得到 false（有 reason 时 null）；\n * onConfirm 返回 false 或失败时对话框保持打开，可以再试或取消。\n */\nexport function useConfirm(): Confirm {\n  const mount = useDetachedDialog();\n  const lang = useLang();\n  const confirm = ({ reason, onConfirm, ...options }: ConfirmOptions) =>\n    new Promise<string | boolean | null>((resolve) => {\n      let confirmed = false;\n      const text = shallowRef('');\n      // 必填没填：点确认后才提示，之后随输入更新\n      const tried = shallowRef(false);\n      const missing = () => !!reason?.required && !text.value.trim();\n      mount((host) => (\n        <AlertDialog\n          {...options}\n          // 要填理由时焦点先进输入框；没有理由时落在取消上（误按 Enter 不会执行）\n          propsCancel={reason ? { autofocus: false, ...options.propsCancel } : options.propsCancel}\n          _open={host.open}\n          onConfirm={async () => {\n            tried.value = true;\n            if (missing()) return false;\n            if ((await onConfirm?.(text.value.trim())) === false) return false;\n            confirmed = true;\n          }}\n          onClose={(event: Event & { currentTarget: HTMLDialogElement }) => {\n            options.onClose?.(event);\n            resolve(reason ? (confirmed ? text.value.trim() : null) : confirmed);\n            host.closed();\n          }}\n        >\n          {options.children}\n          {reason && (\n            <Field\n              label={reason.label}\n              description={reason.description}\n              required={reason.required}\n              error={tried.value && missing() ? lang.formRequired : undefined}\n            >\n              <Textarea\n                _value={text.value}\n                onUpdate:_value={(next: string) => (text.value = next)}\n                placeholder={reason.placeholder}\n                maxlength={reason.maxlength}\n                showCount={reason.maxlength !== undefined}\n                autofocus\n              />\n            </Field>\n          )}\n        </AlertDialog>\n      ));\n    });\n  return confirm as Confirm;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,0BACzB,QAAA,SAAiG;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eAAtE,OAAK,KAAA,IAAA;CAAA,MAAA,OAAAC,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAoC,OAAIC,UAAA,QAAA,MAAA,IAAA;CACtE,MAAM,aAAa,YAAY,iBAAiB,EAAE,MAAI,KAAA,MAAC,IAAI,EAAE,MAAM,KAAK,CAAC;CACzE,MAAM,SAAS,UAAU,YAAY;CACrC,aAAOC,YAAA,WAAAC,WAEC,eACF;EACE,OAAO,KAAK;EACZ,OAAO,OAAO,EAAE,MAAM,WAAW,CAAC,CAAC,KAAK,CAAC;EACzC,SAAS,YAAY;CACvB,GACA,MACA;EACE,MAAM;EACN,UAAU;EACV,aAAa;EAEb,WAAW,UAAA,gBAAoB,CAAC;EAChC,aAAa;GAAE,WAAW;GAAM,GAAA,YAAA;EAAe;CACjD,CACF,GAAC;EAAA,SAAA,KAAA;EAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAA,QAAA;CAAA,CAAA,GAAA,IAAA;AAIP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;;;;;AAsCA,SAAgB,aAAsB;CACpC,MAAM,QAAQ,kBAAkB;CAChC,MAAM,OAAO,QAAQ;CACrB,MAAM,WAAW,EAAE,QAAQ,WAAW,GAAG,cACvC,IAAI,SAAkC,YAAY;EAChD,IAAI,YAAY;EAChB,MAAM,OAAO,WAAW,EAAE;EAE1B,MAAM,QAAQ,WAAW,KAAK;EAC9B,MAAM,gBAAgB,CAAC,CAAC,QAAQ,YAAY,CAAC,KAAK,MAAM,KAAK;EAC7D,OAAO,SAAID,YAAA,aAAAC,WAEH,SAAO;GAAA,eAEE,SAAS;IAAE,WAAW;IAAO,GAAG,QAAQ;GAAY,IAAI,QAAQ;GAAW,SACjF,KAAK;GAAI,mBAAA,WAAT,KAAK,OAAI;GAAA,aACL,YAAY;IACrB,MAAM,QAAQ;IACd,IAAI,QAAQ,GAAG,OAAO;IACtB,IAAK,MAAM,YAAY,KAAK,MAAM,KAAK,CAAC,MAAO,OAAO,OAAO;IAC7D,YAAY;GACd;GAAC,YACS,UAAwD;IAChE,QAAQ,UAAU,KAAK;IACvB,QAAQ,SAAU,YAAY,KAAK,MAAM,KAAK,IAAI,OAAQ,SAAS;IACnE,KAAK,OAAO;GACd;EAAC,CAAA,GAAA,EAAA,eAAA,CAEA,QAAQ,UACR,UAAMD,YAAA,OAAA;GAAA,SAEI,OAAO;GAAK,eACN,OAAO;GAAW,YACrB,OAAO;GAAQ,SAClB,MAAM,SAAS,QAAQ,IAAI,KAAK,eAAe,KAAA;EAAS,GAAA,EAAA,eAAA,CAAAA,YAAA,UAAA;GAAA,UAGrD,KAAK;GAAK,oBACA,SAAkB,KAAK,QAAQ;GAAK,eACzC,OAAO;GAAW,aACpB,OAAO;GAAS,aAChB,OAAO,cAAc,KAAA;GAAS,aAAA;EAAA,GAAA,IAAA,CAAA,EAAA,CAAA,CAI9C,EAAA,CAAA,CAEJ;CACH,CAAC;CACH,OAAO;AACT"}

package/dist/overlay/CommandPalette.d.ts

@@ -0,0 +1,64 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonBaseProps } from '../base/ButtonBase';
+import { type ListboxViewProps, type OptionRenderState } from '../input/Listbox';
+import { type ListboxOption, type OptionMapping } from '../input/list-state';
+import { type PartProps } from '../utils/props';
+import { type DialogProps } from './Dialog';
+/** 交给触发器的属性：展开到按钮上 */
+export interface CommandPaletteTriggerProps {
+    /** 打开面板 */
+    onClick: (event: MouseEvent) => void;
+    /** 告诉读屏这个按钮会打开对话框 */
+    'aria-haspopup': 'dialog';
+    /** 面板是否打开 */
+    'aria-expanded': boolean;
+}
+/** 与数据类型无关的属性；未声明的属性落到对话框（dialog）上 */
+export interface CommandPaletteBaseProps<T> extends Omit<DialogProps, 'open' | 'title' | 'description' | 'footer' | 'children' | 'onSelect'> {
+    /** 是否打开：父级可以写 _open={x}；快捷键、触发按钮、选中、Esc 都会改它 */
+    _open?: boolean;
+    /** 数据：ListboxOption、字符串，或任意数据加 toOption */
+    items: readonly T[];
+    /** 执行了一项（回车或点击）：面板随即关闭 */
+    onAction: (item: T) => void;
+    /** 输入框里的文字：父级可以写 _inputValue={x}（远程搜索时据此取数据）；每次打开清空 */
+    _inputValue?: string;
+    /** 过滤：默认按选项文字与说明匹配（忽略大小写与重音）；函数自定义；false 不过滤（远程搜索，items 就是结果） */
+    filter?: false | ((item: T, query: string) => boolean);
+    /** 正在取结果（远程搜索）：没有结果时列表里是骨架行，已有结果时顶部显示进度条 */
+    loading?: boolean;
+    /** 打开面板的快捷键，默认 'Mod+K'；false 不注册 */
+    hotkey?: string | false;
+    /** 输入框的占位文字，默认取语言包（搜索文档） */
+    placeholder?: string;
+    /** 面板的名称（读屏念的），默认取语言包（搜索） */
+    label?: string;
+    /** 触发器：`(props) => <IconButton {...props} icon={Search} aria-label="搜索" />`；默认是一个像搜索框的按钮，false 不渲染 */
+    trigger?: ((props: CommandPaletteTriggerProps) => VNodeChild) | false;
+    /** 自定义选项内容 */
+    renderOption?: (item: T, state: OptionRenderState) => VNodeChild;
+    /** 没有匹配时显示的内容；默认是 Empty（文案取语言包） */
+    empty?: VNodeChild;
+    /** 默认触发器的部件属性 */
+    propsTrigger?: Partial<ButtonBaseProps>;
+    /** 输入框的部件属性 */
+    propsInput?: PartProps<'input'>;
+    /** 列表的部件属性 */
+    propsListbox?: Partial<ListboxViewProps<T>>;
+}
+/** 命令面板的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+export type CommandPaletteProps<T = ListboxOption> = CommandPaletteBaseProps<T> & OptionMapping<T>;
+/** CommandPalette 的样式：dialog、search、input、listbox、trigger、triggerText、triggerLabel */
+export declare const commandPaletteStyles: Readonly<{
+    body: css.CompiledStyles;
+    dialog: css.CompiledStyles;
+    input: css.CompiledStyles;
+    listbox: css.CompiledStyles;
+    search: css.CompiledStyles;
+    trigger: css.CompiledStyles;
+    triggerLabel: css.CompiledStyles;
+    triggerText: css.CompiledStyles;
+}>;
+/** 命令面板：快捷键打开的搜索对话框 */
+export declare const CommandPalette: <T>(props: CommandPaletteProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;