@zerodep-dev/vue-tsx-pro-ui 0.3.1 → 0.3.2

package/dist/overlay/Popconfirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popconfirm.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/overlay/Popconfirm.tsx"],"sourcesContent":["/**\n * 气泡确认（role=\"alertdialog\"）：在触发按钮旁边问一句再执行，比确认对话框轻（删除一行、撤回、移出成员）。\n * 建在 Popover 上：点击外部、Esc 等于取消，关闭后焦点回到触发器；打开时焦点落在“取消”上，误按 Enter 不会执行。\n *\n *   <Popconfirm\n *     title=\"删除这条记录？\"\n *     description=\"删除后无法恢复\"\n *     tone=\"danger\"\n *     confirmText=\"删除\"\n *     onConfirm={() => api.remove(row.id)}\n *     trigger={(props) => <IconButton {...props} icon={Trash2} aria-label=\"删除\" />}\n *   />\n *\n * onConfirm 返回 Promise 时确认按钮加载中，完成后关闭；返回 false（或 resolve 成 false）、失败时保持打开，由调用方提示原因。\n * 后果严重、要多写几句说明或填理由的操作用 AlertDialog / useConfirm。\n * 部件：Root（Popover 的弹出层）、Icon、Title、Description、Footer（Flex）、Cancel、Confirm（Button）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { openSetter } from '../utils/dom/open-change';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { statusIcons, type StatusTone } from '../utils/style/tone-styles';\nimport { toneStyles } from '../utils/style/typography';\nimport { Popover, type PopoverProps } from './Popover';\n\n/** 未声明的属性落到弹出层的 div 上；位置、箭头、触发器同 Popover */\nexport interface PopconfirmProps extends Omit<PopoverProps, 'role' | 'children' | 'title'> {\n  /** 问题，同时是弹出层的无障碍名称 */\n  title: VNodeChild;\n  /** 补充说明（aria-describedby） */\n  description?: VNodeChild;\n  /** 确认按钮与图标的色调，默认 warning；删除这类破坏性操作用 danger */\n  tone?: StatusTone;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 确认：返回 Promise 时等它完成再关闭；返回 false、失败时保持打开 */\n  onConfirm: () => unknown;\n  /** 取消（含 Esc、点击外部） */\n  onCancel?: () => void;\n  /** 确认按钮的文字，默认取语言包（确定） */\n  confirmText?: VNodeChild;\n  /** 取消按钮的文字，默认取语言包（取消） */\n  cancelText?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 按钮行的部件属性 */\n  propsFooter?: Partial<FlexProps>;\n  /** 确认按钮的部件属性 */\n  propsConfirm?: Partial<ButtonProps>;\n  /** 取消按钮的部件属性 */\n  propsCancel?: Partial<ButtonProps>;\n}\n\n/** Popconfirm 的样式：body、icon、title、description、footer */\nexport const popconfirmStyles = css.create({\n  body: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr)',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    maxWidth: '20rem',\n  },\n  icon: { gridRow: 'span 2', marginBlockStart: '0.15em' },\n  title: { gridColumn: '2', fontWeight: '_semibold', lineHeight: '_tight' },\n  description: { gridColumn: '2', color: '_textMuted', fontSize: '_sm' },\n  footer: { gridColumn: '1 / -1', marginBlockStart: '_sm' },\n});\n\n/** 气泡确认：Popover + 问题 + 取消 / 确认 */\nexport const Popconfirm = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'top',\n    trigger,\n    title,\n    description,\n    tone = 'warning',\n    icon,\n    onConfirm,\n    onCancel,\n    confirmText,\n    cancelText,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsFooter,\n    propsConfirm,\n    propsCancel,\n    ...rest\n  }: PopconfirmProps) => {\n    const lang = useLang();\n    const id = useId();\n    const titleId = `${id}-title`;\n    const descriptionId = `${id}-description`;\n    let pending = _state(false);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 确认后关闭的不算取消；Esc、点击外部、取消按钮关闭的都是取消\n    let confirmed = false;\n    watch(\n      () => open,\n      (now) => {\n        if (now) confirmed = false;\n        else if (!confirmed) onCancel?.();\n      },\n    );\n\n    async function confirm() {\n      if (pending) return;\n      pending = true;\n      try {\n        if ((await onConfirm()) === false) return;\n      } catch (error) {\n        // 调用方负责提示失败原因；这里只保持打开，并留下记录\n        console.error('Popconfirm 的 onConfirm 失败，保持打开', error);\n        return;\n      } finally {\n        pending = false;\n      }\n      confirmed = true;\n      setOpen(false, 'confirm');\n    }\n\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <Popover\n          {...mergePartProps<Partial<PopoverProps>>(\n            {\n              'aria-labelledby': titleId,\n              'aria-describedby': hasContent(description) ? descriptionId : undefined,\n            },\n            rest,\n            { placement, role: 'alertdialog' },\n          )}\n          trigger={trigger}\n          _open={open}\n          onOpenChange={onOpenChange}\n        >\n          <div {...css.attrs(popconfirmStyles.body)}>\n            {shownIcon && (\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: shownIcon, sx: [popconfirmStyles.icon, toneStyles[tone]] },\n                  propsIcon,\n                )}\n              />\n            )}\n            <div\n              {...mergeAttrs<'div'>({ sx: popconfirmStyles.title }, propsTitle, { id: titleId })}\n            >\n              {title}\n            </div>\n            {hasContent(description) && (\n              <div\n                {...mergeAttrs<'div'>({ sx: popconfirmStyles.description }, propsDescription, {\n                  id: descriptionId,\n                })}\n              >\n                {description}\n              </div>\n            )}\n            <Flex\n              {...mergePartProps<FlexProps>(\n                { justify: 'end', gap: 'sm', sx: popconfirmStyles.footer },\n                propsFooter,\n              )}\n            >\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { size: 'sm', variant: 'soft', tone: 'neutral' },\n                  propsCancel,\n                  // 打开时焦点落在取消上：误按 Enter 不会执行\n                  {\n                    autofocus: true,\n                    disabled: pending,\n                    onClick: (event: MouseEvent) => setOpen(false, 'close', event),\n                  },\n                )}\n              >\n                {cancelText ?? lang.cancel}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>({ size: 'sm', tone }, propsConfirm, {\n                  loading: pending,\n                  onClick: () => void confirm(),\n                })}\n              >\n                {confirmText ?? lang.confirm}\n              </Button>\n            </Flex>\n          </div>\n        </Popover>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Popconfirm.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/overlay/Popconfirm.tsx"],"sourcesContent":["/**\n * 气泡确认（role=\"alertdialog\"）：在触发按钮旁边问一句再执行，比确认对话框轻（删除一行、撤回、移出成员）。\n * 建在 Popover 上：点击外部、Esc 等于取消，关闭后焦点回到触发器；打开时焦点落在“取消”上，误按 Enter 不会执行。\n *\n *   <Popconfirm\n *     title=\"删除这条记录？\"\n *     description=\"删除后无法恢复\"\n *     tone=\"danger\"\n *     confirmText=\"删除\"\n *     onConfirm={() => api.remove(row.id)}\n *     trigger={(props) => <IconButton {...props} icon={Trash2} aria-label=\"删除\" />}\n *   />\n *\n * onConfirm 返回 Promise 时确认按钮加载中，完成后关闭；返回 false（或 resolve 成 false）、失败时保持打开，由调用方提示原因。\n * 后果严重、要多写几句说明或填理由的操作用 AlertDialog / useConfirm。\n * 部件：Root（Popover 的弹出层）、Icon、Title、Description、Footer（Flex）、Cancel、Confirm（Button）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { openSetter } from '../utils/dom/open-change';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { statusIcons, type StatusTone } from '../utils/style/tone-styles';\nimport { toneStyles } from '../utils/style/typography';\nimport { Popover, type PopoverProps } from './Popover';\n\n/** 未声明的属性落到弹出层的 div 上；位置、箭头、触发器同 Popover */\nexport interface PopconfirmProps extends Omit<PopoverProps, 'role' | 'children' | 'title'> {\n  /** 问题，同时是弹出层的无障碍名称 */\n  title: VNodeChild;\n  /** 补充说明（aria-describedby） */\n  description?: VNodeChild;\n  /** 确认按钮与图标的色调，默认 warning；删除这类破坏性操作用 danger */\n  tone?: StatusTone;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 确认：返回 Promise 时等它完成再关闭；返回 false、失败时保持打开 */\n  onConfirm: () => unknown;\n  /** 取消（含 Esc、点击外部） */\n  onCancel?: () => void;\n  /** 确认按钮的文字，默认取语言包（确定） */\n  confirmText?: VNodeChild;\n  /** 取消按钮的文字，默认取语言包（取消） */\n  cancelText?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 标题的部件属性 */\n  propsTitle?: PartProps<'div'>;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'div'>;\n  /** 按钮行的部件属性 */\n  propsFooter?: Partial<FlexProps>;\n  /** 确认按钮的部件属性 */\n  propsConfirm?: Partial<ButtonProps>;\n  /** 取消按钮的部件属性 */\n  propsCancel?: Partial<ButtonProps>;\n}\n\n/** Popconfirm 的样式：body、icon、title、description、footer */\nexport const popconfirmStyles = css.create({\n  body: {\n    display: 'grid',\n    gridTemplateColumns: 'auto minmax(0, 1fr)',\n    columnGap: '_sm',\n    rowGap: '_xs',\n    maxWidth: '20rem',\n  },\n  icon: { gridRow: 'span 2', marginBlockStart: '0.15em' },\n  title: { gridColumn: '2', fontWeight: '_semibold', lineHeight: '_tight' },\n  description: { gridColumn: '2', color: '_textMuted', fontSize: '_sm' },\n  footer: { gridColumn: '1 / -1', marginBlockStart: '_sm' },\n});\n\n/** 气泡确认：Popover + 问题 + 取消 / 确认 */\nexport const Popconfirm = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'top',\n    trigger,\n    title,\n    description,\n    tone = 'warning',\n    icon,\n    onConfirm,\n    onCancel,\n    confirmText,\n    cancelText,\n    propsIcon,\n    propsTitle,\n    propsDescription,\n    propsFooter,\n    propsConfirm,\n    propsCancel,\n    ...rest\n  }: PopconfirmProps) => {\n    const lang = useLang();\n    const id = useId();\n    const titleId = `${id}-title`;\n    const descriptionId = `${id}-description`;\n    let pending = _state(false);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 确认后关闭的不算取消；Esc、点击外部、取消按钮关闭的都是取消\n    let confirmed = false;\n    watch(\n      () => open,\n      (now) => {\n        if (now) confirmed = false;\n        else if (!confirmed) onCancel?.();\n      },\n    );\n\n    async function confirm() {\n      if (pending) return;\n      pending = true;\n      try {\n        if ((await onConfirm()) === false) return;\n      } catch (error) {\n        // 调用方负责提示失败原因；这里只保持打开，并留下记录\n        console.error('Popconfirm 的 onConfirm 失败，保持打开', error);\n        return;\n      } finally {\n        pending = false;\n      }\n      confirmed = true;\n      setOpen(false, 'confirm');\n    }\n\n    return () => {\n      const shownIcon = icon === false ? undefined : (icon ?? statusIcons[tone]);\n      return (\n        <Popover\n          {...mergePartProps<Partial<PopoverProps>>(\n            {\n              'aria-labelledby': titleId,\n              'aria-describedby': hasContent(description) ? descriptionId : undefined,\n            },\n            rest,\n            { placement, role: 'alertdialog' },\n          )}\n          trigger={trigger}\n          _open={open}\n          onOpenChange={onOpenChange}\n        >\n          <div {...css.attrs(popconfirmStyles.body)}>\n            {shownIcon && (\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: shownIcon, sx: [popconfirmStyles.icon, toneStyles[tone]] },\n                  propsIcon,\n                )}\n              />\n            )}\n            <div\n              {...mergeAttrs<'div'>({ sx: popconfirmStyles.title }, propsTitle, { id: titleId })}\n            >\n              {title}\n            </div>\n            {hasContent(description) && (\n              <div\n                {...mergeAttrs<'div'>({ sx: popconfirmStyles.description }, propsDescription, {\n                  id: descriptionId,\n                })}\n              >\n                {description}\n              </div>\n            )}\n            <Flex\n              {...mergePartProps<FlexProps>(\n                { justify: 'end', gap: 'sm', sx: popconfirmStyles.footer },\n                propsFooter,\n              )}\n            >\n              <Button\n                {...mergePartProps<ButtonProps>(\n                  { size: 'sm', variant: 'soft', tone: 'neutral' },\n                  propsCancel,\n                  // 打开时焦点落在取消上：误按 Enter 不会执行\n                  {\n                    autofocus: true,\n                    disabled: pending,\n                    onClick: (event: MouseEvent) => setOpen(false, 'close', event),\n                  },\n                )}\n              >\n                {cancelText ?? lang.cancel}\n              </Button>\n              <Button\n                {...mergePartProps<ButtonProps>({ size: 'sm', tone }, propsConfirm, {\n                  loading: pending,\n                  onClick: () => void confirm(),\n                })}\n              >\n                {confirmText ?? lang.confirm}\n              </Button>\n            </Flex>\n          </div>\n        </Popover>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/overlay/Popover.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type FloatingOptions, type FloatingPlacement } from '../utils/dom/floating';
 import { type OpenChangeProps } from '../utils/dom/open-change';

package/dist/overlay/Popover.js

@@ -8,7 +8,7 @@ import { floatingStyles, useAnchoredPopover } from "../utils/dom/floating.js";
 import { openSetter } from "../utils/dom/open-change.js";
 import { Fragment, createVNode, shallowRef, useId } from "vue";
 import { _component, bindable, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/overlay/Popover.tsx
 /** 交给触发器的属性：展开收起的通用属性，加上弹层需要的 id、ref 与 aria-haspopup */
 /** 未声明的属性落到弹出层的 div 上 */

package/dist/overlay/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/overlay/Popover.tsx"],"sourcesContent":["/**\n * 弹出框（非模态）：点击触发器在旁边弹出一块内容（筛选条件、简短表单、详情），点击外部或 Esc 关闭。\n * 原生 popover=\"auto\" 负责顶层渲染、Esc、点击外部与嵌套顺序，floating-ui 负责定位（utils/dom/floating）。\n * 打开时焦点移到第一个可聚焦元素（有 autofocus 的优先），关闭后回到触发器。参考 Radix Popover。\n *\n *   <Popover _open={open} trigger={(props) => <Button {...props}>筛选</Button>}>…</Popover>\n *\n * 弹出层是 role=\"dialog\"，默认以触发器的文字作为名称（aria-labelledby）；内容有自己的标题时用 aria-labelledby 指向它。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport {\n  floatingStyles,\n  useAnchoredPopover,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { toElement } from '../utils/dom/element';\nimport { focusFirst } from '../utils/dom/focus';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { useLazyContent, type LazyContentOptions } from '../utils/motion/presence';\nimport { defaultLabelledBy, mergeAttrs, type PartProps, type TriggerProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\nimport { useMounted } from '../utils/dom/mounted';\n\n/** 交给触发器的属性：展开收起的通用属性，加上弹层需要的 id、ref 与 aria-haspopup */\nexport interface PopoverTriggerProps extends TriggerProps {\n  /** 弹出层默认以触发器的文字作为无障碍名称（aria-labelledby） */\n  id: string;\n  /** 取得触发器元素：定位的参照、关闭后焦点回到这里 */\n  ref: (element: unknown) => void;\n  /** 告诉读屏这个按钮会打开对话框类的弹层 */\n  'aria-haspopup': 'dialog';\n}\n\n/** 未声明的属性落到弹出层的 div 上 */\nexport interface PopoverProps\n  extends\n    PartProps<'div', 'id' | 'popover' | 'role'>,\n    Pick<FloatingOptions, 'offset'>,\n    LazyContentOptions,\n    OpenChangeProps {\n  /** 是否打开：父级写 _open={x}；Esc 与点击外部会关闭并写回 */\n  _open?: boolean;\n  /** 弹出位置，默认 bottom-start；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 显示指向触发器的箭头 */\n  arrow?: boolean;\n  /**\n   * 弹出层的角色，默认 dialog；要用户在确认与取消之间选择时（Popconfirm）用 alertdialog\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'alertdialog';\n  /** 触发器：`(props) => <Button {...props}>更多</Button>` */\n  trigger: (props: PopoverTriggerProps) => VNodeChild;\n  /** 箭头的部件属性 */\n  propsArrow?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** Popover 的样式：panel */\nexport const popoverStyles = css.create({\n  panel: { padding: '_md', maxWidth: 'calc(100vw - 2em)' },\n});\n\n/** 弹出框：原生 popover + floating-ui 定位，打开时焦点进入、关闭后回到触发器 */\nexport const Popover = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'bottom-start',\n    offset,\n    arrow = false,\n    role = 'dialog',\n    trigger,\n    propsArrow,\n    lazy = true,\n    children,\n    ...rest\n  }: PopoverProps) => {\n    // 面板挂载后才渲染：关着时本来就看不见；服务端渲染时也不输出，触发器在 <p> 里时 <div> 不会把段落提前截断，水合对得上\n    const mounted = useMounted();\n    const id = useId();\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n    const triggerId = `${id}-trigger`;\n    let anchor = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    let arrowElement = _state.raw<HTMLElement | null>(null);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 打开时焦点移入（等第一次定位、可见之后），Esc 与点击外部关闭后写回 open、焦点回到触发器\n    const { onToggle } = useAnchoredPopover(\n      () => ({ open, anchor, panel, floating: { placement, offset, arrow: arrowElement } }),\n      { close: (reason, event) => setOpen(false, reason, event), shown: focusFirst },\n    );\n\n    return () => (\n      <>\n        {trigger({\n          ref: (value) => (anchor = toElement(value)),\n          onClick: (event: MouseEvent) => setOpen(!open, 'trigger', event),\n          'aria-expanded': open,\n          id: triggerId,\n          'aria-controls': id,\n          'aria-haspopup': 'dialog',\n        })}\n        {mounted.value && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  floatingStyles.anchored,\n                  floatingStyles.surface,\n                  popoverStyles.panel,\n                  transitions.scale,\n                  arrow && floatingStyles.withArrow,\n                ],\n                'aria-labelledby': defaultLabelledBy(rest, triggerId),\n              },\n              rest,\n              { ref: _toRef(panel), id, popover: 'auto', role, onToggle },\n            )}\n            data-state={open ? 'open' : 'closed'}\n          >\n            {showContent() && children}\n            {arrow && (\n              <span\n                {...mergeAttrs<'span'>({ sx: floatingStyles.arrow }, propsArrow, {\n                  ref: _toRef(arrowElement),\n                  'aria-hidden': true,\n                })}\n              />\n            )}\n          </div>\n        )}\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;AA8DA,IAAa,gBAAgB,IAAI,OAAO,EACtC,OAAO;CAAE,SAAS;CAAO,UAAU;AAAoB,EACzD,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAYoB;CAAA,MAAA,OAAAA,SAAA,QAAA,eAXM,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEjB,cAAc;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAElB,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,QACN,QAAQ;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAGR,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAER,OAAIC,UAAA,QAAA,MAAA,KAAA;CAGP,MAAM,UAAU,WAAW;CAC3B,MAAM,KAAK,MAAM;CACjB,MAAM,cAAc,qBAClB,KAAA,aACA,KAAA,KACF;CACA,MAAM,YAAY,GAAG,GAAE;CACvB,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,QAAKA,WAAkC,IAAI;CAC/C,IAAI,eAAYA,WAAkC,IAAI;CACtD,MAAM,UAAU,iBACd,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF;CAEA,MAAM,EAAE,aAAa,0BACZ;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;EAAE,OAAK,MAAA;EAAE,UAAU;GAAE,WAAS,UAAA;GAAE,QAAM,OAAA;GAAE,OAAK,aAAA;EAAe;CAAE,IACnF;EAAE,QAAQ,QAAQ,UAAU,QAAQ,OAAO,QAAQ,KAAK;EAAG,OAAO;CAAW,CAC/E;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,MAAM,UAAW,OAAA,QAAS,UAAU,KAAK;EACzC,UAAU,UAAsB,QAAQ,CAAA,KAAA,OAAO,WAAW,KAAK;EAC/D,iBAAe,KAAA;EACf,IAAI;EACJ,iBAAiB;EACjB,iBAAiB;CACnB,CAAC,GACA,QAAQ,SAAKD,YAAA,OAAAE,cAEN,WACF;EACE,IAAI;GACF,eAAe;GACf,eAAe;GACf,cAAc;GACd,YAAY;GACZ,MAAA,SAAS,eAAe;EAAS;EAEnC,mBAAmB,kBAAkB,MAAM,SAAS;CACtD,GACA,MACA;EAAE,KAAG;EAAiB;EAAI,SAAS;EAAQ,MAAI,KAAA;EAAE;CAAS,CAC5D,GAAC,EAAA,cACW,KAAA,QAAO,SAAS,SAAQ,CAAA,GAAA,CAEnC,YAAY,KAAC,SAAA,OACb,MAAA,SAAAF,YAAA,QAEO,WAAmB,EAAE,IAAI,eAAe,MAAM,GAAC,WAAA,OAAc;EAC/D,KAAG;EACH,eAAe;CACjB,CAAC,GAAC,IAAA,CAEL,CAAA,CAEJ,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Popover.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/overlay/Popover.tsx"],"sourcesContent":["/**\n * 弹出框（非模态）：点击触发器在旁边弹出一块内容（筛选条件、简短表单、详情），点击外部或 Esc 关闭。\n * 原生 popover=\"auto\" 负责顶层渲染、Esc、点击外部与嵌套顺序，floating-ui 负责定位（utils/dom/floating）。\n * 打开时焦点移到第一个可聚焦元素（有 autofocus 的优先），关闭后回到触发器。参考 Radix Popover。\n *\n *   <Popover _open={open} trigger={(props) => <Button {...props}>筛选</Button>}>…</Popover>\n *\n * 弹出层是 role=\"dialog\"，默认以触发器的文字作为名称（aria-labelledby）；内容有自己的标题时用 aria-labelledby 指向它。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport {\n  floatingStyles,\n  useAnchoredPopover,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { toElement } from '../utils/dom/element';\nimport { focusFirst } from '../utils/dom/focus';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { useLazyContent, type LazyContentOptions } from '../utils/motion/presence';\nimport { defaultLabelledBy, mergeAttrs, type PartProps, type TriggerProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\nimport { useMounted } from '../utils/dom/mounted';\n\n/** 交给触发器的属性：展开收起的通用属性，加上弹层需要的 id、ref 与 aria-haspopup */\nexport interface PopoverTriggerProps extends TriggerProps {\n  /** 弹出层默认以触发器的文字作为无障碍名称（aria-labelledby） */\n  id: string;\n  /** 取得触发器元素：定位的参照、关闭后焦点回到这里 */\n  ref: (element: unknown) => void;\n  /** 告诉读屏这个按钮会打开对话框类的弹层 */\n  'aria-haspopup': 'dialog';\n}\n\n/** 未声明的属性落到弹出层的 div 上 */\nexport interface PopoverProps\n  extends\n    PartProps<'div', 'id' | 'popover' | 'role'>,\n    Pick<FloatingOptions, 'offset'>,\n    LazyContentOptions,\n    OpenChangeProps {\n  /** 是否打开：父级写 _open={x}；Esc 与点击外部会关闭并写回 */\n  _open?: boolean;\n  /** 弹出位置，默认 bottom-start；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 显示指向触发器的箭头 */\n  arrow?: boolean;\n  /**\n   * 弹出层的角色，默认 dialog；要用户在确认与取消之间选择时（Popconfirm）用 alertdialog\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'alertdialog';\n  /** 触发器：`(props) => <Button {...props}>更多</Button>` */\n  trigger: (props: PopoverTriggerProps) => VNodeChild;\n  /** 箭头的部件属性 */\n  propsArrow?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** Popover 的样式：panel */\nexport const popoverStyles = css.create({\n  panel: { padding: '_md', maxWidth: 'calc(100vw - 2em)' },\n});\n\n/** 弹出框：原生 popover + floating-ui 定位，打开时焦点进入、关闭后回到触发器 */\nexport const Popover = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'bottom-start',\n    offset,\n    arrow = false,\n    role = 'dialog',\n    trigger,\n    propsArrow,\n    lazy = true,\n    children,\n    ...rest\n  }: PopoverProps) => {\n    // 面板挂载后才渲染：关着时本来就看不见；服务端渲染时也不输出，触发器在 <p> 里时 <div> 不会把段落提前截断，水合对得上\n    const mounted = useMounted();\n    const id = useId();\n    const showContent = useLazyContent(\n      () => open,\n      () => lazy,\n    );\n    const triggerId = `${id}-trigger`;\n    let anchor = _state.raw<HTMLElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    let arrowElement = _state.raw<HTMLElement | null>(null);\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 打开时焦点移入（等第一次定位、可见之后），Esc 与点击外部关闭后写回 open、焦点回到触发器\n    const { onToggle } = useAnchoredPopover(\n      () => ({ open, anchor, panel, floating: { placement, offset, arrow: arrowElement } }),\n      { close: (reason, event) => setOpen(false, reason, event), shown: focusFirst },\n    );\n\n    return () => (\n      <>\n        {trigger({\n          ref: (value) => (anchor = toElement(value)),\n          onClick: (event: MouseEvent) => setOpen(!open, 'trigger', event),\n          'aria-expanded': open,\n          id: triggerId,\n          'aria-controls': id,\n          'aria-haspopup': 'dialog',\n        })}\n        {mounted.value && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  floatingStyles.anchored,\n                  floatingStyles.surface,\n                  popoverStyles.panel,\n                  transitions.scale,\n                  arrow && floatingStyles.withArrow,\n                ],\n                'aria-labelledby': defaultLabelledBy(rest, triggerId),\n              },\n              rest,\n              { ref: _toRef(panel), id, popover: 'auto', role, onToggle },\n            )}\n            data-state={open ? 'open' : 'closed'}\n          >\n            {showContent() && children}\n            {arrow && (\n              <span\n                {...mergeAttrs<'span'>({ sx: floatingStyles.arrow }, propsArrow, {\n                  ref: _toRef(arrowElement),\n                  'aria-hidden': true,\n                })}\n              />\n            )}\n          </div>\n        )}\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;AA8DA,IAAa,gBAAgB,IAAI,OAAO,EACtC,OAAO;CAAE,SAAS;CAAO,UAAU;AAAoB,EACzD,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAYoB;CAAA,MAAA,OAAAA,SAAA,QAAA,eAXM,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEjB,cAAc;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAElB,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,QACN,QAAQ;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAGR,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAER,OAAIC,UAAA,QAAA,MAAA,KAAA;CAGP,MAAM,UAAU,WAAW;CAC3B,MAAM,KAAK,MAAM;CACjB,MAAM,cAAc,qBAClB,KAAA,aACA,KAAA,KACF;CACA,MAAM,YAAY,GAAG,GAAE;CACvB,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,QAAKA,WAAkC,IAAI;CAC/C,IAAI,eAAYA,WAAkC,IAAI;CACtD,MAAM,UAAU,iBACd,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF;CAEA,MAAM,EAAE,aAAa,0BACZ;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;EAAE,OAAK,MAAA;EAAE,UAAU;GAAE,WAAS,UAAA;GAAE,QAAM,OAAA;GAAE,OAAK,aAAA;EAAe;CAAE,IACnF;EAAE,QAAQ,QAAQ,UAAU,QAAQ,OAAO,QAAQ,KAAK;EAAG,OAAO;CAAW,CAC/E;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,MAAM,UAAW,OAAA,QAAS,UAAU,KAAK;EACzC,UAAU,UAAsB,QAAQ,CAAA,KAAA,OAAO,WAAW,KAAK;EAC/D,iBAAe,KAAA;EACf,IAAI;EACJ,iBAAiB;EACjB,iBAAiB;CACnB,CAAC,GACA,QAAQ,SAAKD,YAAA,OAAAE,cAEN,WACF;EACE,IAAI;GACF,eAAe;GACf,eAAe;GACf,cAAc;GACd,YAAY;GACZ,MAAA,SAAS,eAAe;EAAS;EAEnC,mBAAmB,kBAAkB,MAAM,SAAS;CACtD,GACA,MACA;EAAE,KAAG;EAAiB;EAAI,SAAS;EAAQ,MAAI,KAAA;EAAE;CAAS,CAC5D,GAAC,EAAA,cACW,KAAA,QAAO,SAAS,SAAQ,CAAA,GAAA,CAEnC,YAAY,KAAC,SAAA,OACb,MAAA,SAAAF,YAAA,QAEO,WAAmB,EAAE,IAAI,eAAe,MAAM,GAAC,WAAA,OAAc;EAC/D,KAAG;EACH,eAAe;CACjB,CAAC,GAAC,IAAA,CAEL,CAAA,CAEJ,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type FloatingOptions, type FloatingPlacement } from '../utils/dom/floating';
 import { type OpenChangeProps } from '../utils/dom/open-change';

package/dist/overlay/Tooltip.js

@@ -7,7 +7,7 @@ import { openSetter } from "../utils/dom/open-change.js";
 import { useHoverLayer } from "../utils/dom/hover-layer.js";
 import { Fragment, createVNode } from "vue";
 import { _component, bindable, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/overlay/Tooltip.tsx
 /** 交给触发器的属性：展开到触发元素上（`{...props}`） */
 /** 未声明的属性落到提示的 div 上 */

package/dist/overlay/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/overlay/Tooltip.tsx"],"sourcesContent":["/**\n * 文字提示（role=\"tooltip\"）：指针停在触发器上、或用键盘聚焦它时，显示一句简短说明（图标按钮的用途、快捷键）。\n * 参考 WAI-ARIA Tooltip 模式、Radix Tooltip、React Aria Tooltip：\n *\n *   <Tooltip trigger={(props) => <IconButton {...props} icon={Copy} aria-label=\"复制\" />}>复制（Ctrl+C）</Tooltip>\n *\n * - 指针停留 delay 毫秒后显示；刚有提示关掉（skipDelay 内）时直接显示，在一排按钮上移动不用每次等；\n * - 键盘聚焦（:focus-visible）立即显示，失焦、Esc、按下触发器时隐藏；触屏不显示（没有悬停）；\n * - 指针可以移到提示上而不消失（WCAG 1.4.13）；同一时间只显示一个；\n * - 提示是对触发器的补充说明（aria-describedby）：触发器自己要有名称，提示里不放可交互的内容。\n *\n * 用 popover=\"manual\" 渲染在顶层：它不是 auto，不会关掉正打开的菜单或弹出框。开关、定位、Esc 见 useHoverLayer（与 HoverCard 共用）。\n */\nimport { _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 {\n  floatingStyles,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { createHoverGroup } from '../utils/dom/hover-intent';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { useHoverLayer } from '../utils/dom/hover-layer';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\nimport { useMounted } from '../utils/dom/mounted';\n\n/** 交给触发器的属性：展开到触发元素上（`{...props}`） */\nexport interface TooltipTriggerProps {\n  /** 取得触发器元素：定位的参照 */\n  ref: (element: unknown) => void;\n  /** 提示是对触发器的补充说明 */\n  'aria-describedby': string;\n  /** 指针进入：等 delay 后显示 */\n  onPointerenter: (event: PointerEvent) => void;\n  /** 指针离开：稍后隐藏（可以移到提示上） */\n  onPointerleave: (event: PointerEvent) => void;\n  /** 按下（点击）触发器时隐藏 */\n  onPointerdown: (event: PointerEvent) => void;\n  /** 键盘聚焦时立即显示 */\n  onFocus: (event: FocusEvent) => void;\n  /** 失焦时隐藏 */\n  onBlur: (event: FocusEvent) => void;\n}\n\n/** 未声明的属性落到提示的 div 上 */\nexport interface TooltipProps\n  extends\n    PartProps<'div', 'id' | 'popover' | 'role'>,\n    Pick<FloatingOptions, 'offset'>,\n    OpenChangeProps {\n  /** 是否显示：父级可以写 _open={x} 控制或得知；一般不需要 */\n  _open?: boolean;\n  /** 显示位置，默认 top；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 指针停留多久后显示（毫秒），默认 500 */\n  delay?: number;\n  /** 不显示（触发器照常渲染） */\n  disabled?: boolean;\n  /** 显示指向触发器的箭头 */\n  arrow?: boolean;\n  /** 触发器：`(props) => <IconButton {...props} … />` */\n  trigger: (props: TooltipTriggerProps) => VNodeChild;\n  /** 箭头的部件属性 */\n  propsArrow?: PartProps<'span'>;\n  /** 提示文字 */\n  children?: VNodeChild;\n}\n\n/** 指针离开后多久隐藏（毫秒）：留出移到提示上的时间 */\nconst CLOSE_DELAY = 100;\n\n/** 所有提示一组：同一时间只显示一个，刚关掉一个时下一个不用等 delay */\nconst tooltips = createHoverGroup();\n\n/** Tooltip 的样式：panel */\nexport const tooltipStyles = css.create({\n  panel: {\n    boxSizing: 'border-box',\n    maxWidth: 'min(20em, calc(100vw - 2em))',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: '_inverseSurface',\n    color: '_inverseText',\n    fontSize: '_sm',\n    lineHeight: '_normal',\n    overflowWrap: 'break-word',\n  },\n});\n\n/** 文字提示：悬停或键盘聚焦时显示在触发器旁边 */\nexport const Tooltip = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'top',\n    offset,\n    delay = 500,\n    disabled = false,\n    arrow = false,\n    trigger,\n    propsArrow,\n    children,\n    ...rest\n  }: TooltipProps) => {\n    // 面板挂载后才渲染：关着时本来就看不见；服务端渲染时也不输出，触发器在 <p> 里时 <div> 不会把段落提前截断，水合对得上\n    const mounted = useMounted();\n    const layer = useHoverLayer(\n      tooltips,\n      () => ({ open, disabled, placement, offset, delay, closeDelay: CLOSE_DELAY }),\n      openSetter(\n        () => open,\n        (next) => (open = next),\n        () => onOpenChange,\n      ),\n    );\n\n    return () => (\n      <>\n        {trigger({\n          ref: layer.anchorRef,\n          'aria-describedby': layer.id,\n          ...layer.hover.trigger,\n        })}\n        {mounted.value && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  floatingStyles.anchored,\n                  tooltipStyles.panel,\n                  transitions.fade,\n                  arrow && floatingStyles.withArrow,\n                ],\n              },\n              rest,\n              {\n                ref: layer.panelRef,\n                id: layer.id,\n                popover: 'manual',\n                role: 'tooltip',\n                // 指针移到提示上不消失，离开提示后再隐藏\n                ...layer.hover.panel,\n              },\n            )}\n            data-state={open && !disabled ? 'open' : 'closed'}\n          >\n            {children}\n            {arrow && <span {...layer.arrowProps(propsArrow)} />}\n          </div>\n        )}\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAuEA,IAAM,cAAc;;AAGpB,IAAM,WAAW,iBAAiB;;AAGlC,IAAa,gBAAgB,IAAI,OAAO,EACtC,OAAO;CACL,WAAW;CACX,UAAU;CACV,cAAc;CACd,eAAe;CACf,aAAa;CACb,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,UAAU;CACV,YAAY;CACZ,cAAc;AAChB,EACF,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAYoB;CAAA,MAAA,OAAAA,SAAA,QAAA,eAXM,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEjB,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAET,GAAG;CAAA,MAAA,WAAAA,aAAA,QAAA,YACA,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACR,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIV,OAAIC,UAAA,QAAA,MAAA,KAAA;CAGP,MAAM,UAAU,WAAW;CAC3B,MAAM,QAAQ,cACZ,iBACO;EAAE,MAAI,KAAA;EAAE,UAAQ,SAAA;EAAE,WAAS,UAAA;EAAE,QAAM,OAAA;EAAE,OAAK,MAAA;EAAE,YAAY;CAAY,IAC3E,iBACE,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF,CACF;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,KAAK,MAAM;EACX,oBAAoB,MAAM;EAC1B,GAAG,MAAM,MAAM;CACjB,CAAC,GACA,QAAQ,SAAKD,YAAA,OAAAE,cAEN,WACF,EACE,IAAI;EACF,eAAe;EACf,cAAc;EACd,YAAY;EACZ,MAAA,SAAS,eAAe;CAAS,EAErC,GACA,MACA;EACE,KAAK,MAAM;EACX,IAAI,MAAM;EACV,SAAS;EACT,MAAM;EAEN,GAAG,MAAM,MAAM;CACjB,CACF,GAAC,EAAA,cACW,KAAA,SAAQ,CAAA,SAAA,QAAY,SAAS,SAAQ,CAAA,GAAA,CAAA,SAAA,OAGhD,MAAA,SAAAF,YAAA,QAAmB,MAAM,WAAU,WAAA,KAAW,GAAC,IAAA,CAAI,CAAA,CAEvD,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"Tooltip.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/overlay/Tooltip.tsx"],"sourcesContent":["/**\n * 文字提示（role=\"tooltip\"）：指针停在触发器上、或用键盘聚焦它时，显示一句简短说明（图标按钮的用途、快捷键）。\n * 参考 WAI-ARIA Tooltip 模式、Radix Tooltip、React Aria Tooltip：\n *\n *   <Tooltip trigger={(props) => <IconButton {...props} icon={Copy} aria-label=\"复制\" />}>复制（Ctrl+C）</Tooltip>\n *\n * - 指针停留 delay 毫秒后显示；刚有提示关掉（skipDelay 内）时直接显示，在一排按钮上移动不用每次等；\n * - 键盘聚焦（:focus-visible）立即显示，失焦、Esc、按下触发器时隐藏；触屏不显示（没有悬停）；\n * - 指针可以移到提示上而不消失（WCAG 1.4.13）；同一时间只显示一个；\n * - 提示是对触发器的补充说明（aria-describedby）：触发器自己要有名称，提示里不放可交互的内容。\n *\n * 用 popover=\"manual\" 渲染在顶层：它不是 auto，不会关掉正打开的菜单或弹出框。开关、定位、Esc 见 useHoverLayer（与 HoverCard 共用）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  floatingStyles,\n  type FloatingOptions,\n  type FloatingPlacement,\n} from '../utils/dom/floating';\nimport { createHoverGroup } from '../utils/dom/hover-intent';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { useHoverLayer } from '../utils/dom/hover-layer';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { transitions } from '../utils/style/transitions';\nimport { useMounted } from '../utils/dom/mounted';\n\n/** 交给触发器的属性：展开到触发元素上（`{...props}`） */\nexport interface TooltipTriggerProps {\n  /** 取得触发器元素：定位的参照 */\n  ref: (element: unknown) => void;\n  /** 提示是对触发器的补充说明 */\n  'aria-describedby': string;\n  /** 指针进入：等 delay 后显示 */\n  onPointerenter: (event: PointerEvent) => void;\n  /** 指针离开：稍后隐藏（可以移到提示上） */\n  onPointerleave: (event: PointerEvent) => void;\n  /** 按下（点击）触发器时隐藏 */\n  onPointerdown: (event: PointerEvent) => void;\n  /** 键盘聚焦时立即显示 */\n  onFocus: (event: FocusEvent) => void;\n  /** 失焦时隐藏 */\n  onBlur: (event: FocusEvent) => void;\n}\n\n/** 未声明的属性落到提示的 div 上 */\nexport interface TooltipProps\n  extends\n    PartProps<'div', 'id' | 'popover' | 'role'>,\n    Pick<FloatingOptions, 'offset'>,\n    OpenChangeProps {\n  /** 是否显示：父级可以写 _open={x} 控制或得知；一般不需要 */\n  _open?: boolean;\n  /** 显示位置，默认 top；空间不够时自动翻转 */\n  placement?: FloatingPlacement;\n  /** 指针停留多久后显示（毫秒），默认 500 */\n  delay?: number;\n  /** 不显示（触发器照常渲染） */\n  disabled?: boolean;\n  /** 显示指向触发器的箭头 */\n  arrow?: boolean;\n  /** 触发器：`(props) => <IconButton {...props} … />` */\n  trigger: (props: TooltipTriggerProps) => VNodeChild;\n  /** 箭头的部件属性 */\n  propsArrow?: PartProps<'span'>;\n  /** 提示文字 */\n  children?: VNodeChild;\n}\n\n/** 指针离开后多久隐藏（毫秒）：留出移到提示上的时间 */\nconst CLOSE_DELAY = 100;\n\n/** 所有提示一组：同一时间只显示一个，刚关掉一个时下一个不用等 delay */\nconst tooltips = createHoverGroup();\n\n/** Tooltip 的样式：panel */\nexport const tooltipStyles = css.create({\n  panel: {\n    boxSizing: 'border-box',\n    maxWidth: 'min(20em, calc(100vw - 2em))',\n    paddingBlock: '_xs',\n    paddingInline: '_sm',\n    borderWidth: 0,\n    borderRadius: '_sm',\n    backgroundColor: '_inverseSurface',\n    color: '_inverseText',\n    fontSize: '_sm',\n    lineHeight: '_normal',\n    overflowWrap: 'break-word',\n  },\n});\n\n/** 文字提示：悬停或键盘聚焦时显示在触发器旁边 */\nexport const Tooltip = _component(\n  ({\n    _open: open = _bindable(false),\n    onOpenChange,\n    placement = 'top',\n    offset,\n    delay = 500,\n    disabled = false,\n    arrow = false,\n    trigger,\n    propsArrow,\n    children,\n    ...rest\n  }: TooltipProps) => {\n    // 面板挂载后才渲染：关着时本来就看不见；服务端渲染时也不输出，触发器在 <p> 里时 <div> 不会把段落提前截断，水合对得上\n    const mounted = useMounted();\n    const layer = useHoverLayer(\n      tooltips,\n      () => ({ open, disabled, placement, offset, delay, closeDelay: CLOSE_DELAY }),\n      openSetter(\n        () => open,\n        (next) => (open = next),\n        () => onOpenChange,\n      ),\n    );\n\n    return () => (\n      <>\n        {trigger({\n          ref: layer.anchorRef,\n          'aria-describedby': layer.id,\n          ...layer.hover.trigger,\n        })}\n        {mounted.value && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  floatingStyles.anchored,\n                  tooltipStyles.panel,\n                  transitions.fade,\n                  arrow && floatingStyles.withArrow,\n                ],\n              },\n              rest,\n              {\n                ref: layer.panelRef,\n                id: layer.id,\n                popover: 'manual',\n                role: 'tooltip',\n                // 指针移到提示上不消失，离开提示后再隐藏\n                ...layer.hover.panel,\n              },\n            )}\n            data-state={open && !disabled ? 'open' : 'closed'}\n          >\n            {children}\n            {arrow && <span {...layer.arrowProps(propsArrow)} />}\n          </div>\n        )}\n      </>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AAuEA,IAAM,cAAc;;AAGpB,IAAM,WAAW,iBAAiB;;AAGlC,IAAa,gBAAgB,IAAI,OAAO,EACtC,OAAO;CACL,WAAW;CACX,UAAU;CACV,cAAc;CACd,eAAe;CACf,aAAa;CACb,cAAc;CACd,iBAAiB;CACjB,OAAO;CACP,UAAU;CACV,YAAY;CACZ,cAAc;AAChB,EACF,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAYoB;CAAA,MAAA,OAAAA,SAAA,QAAA,eAXM,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAC,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAEjB,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAET,GAAG;CAAA,MAAA,WAAAA,aAAA,QAAA,YACA,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACR,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAIV,OAAIC,UAAA,QAAA,MAAA,KAAA;CAGP,MAAM,UAAU,WAAW;CAC3B,MAAM,QAAQ,cACZ,iBACO;EAAE,MAAI,KAAA;EAAE,UAAQ,SAAA;EAAE,WAAS,UAAA;EAAE,QAAM,OAAA;EAAE,OAAK,MAAA;EAAE,YAAY;CAAY,IAC3E,iBACE,KAAA,QACC,SAAU,KAAA,QAAO,YAClB,aAAA,KACF,CACF;CAEA,aAAOC,YAAAC,UAAA,MAAA,CAEF,QAAA,MAAQ;EACP,KAAK,MAAM;EACX,oBAAoB,MAAM;EAC1B,GAAG,MAAM,MAAM;CACjB,CAAC,GACA,QAAQ,SAAKD,YAAA,OAAAE,cAEN,WACF,EACE,IAAI;EACF,eAAe;EACf,cAAc;EACd,YAAY;EACZ,MAAA,SAAS,eAAe;CAAS,EAErC,GACA,MACA;EACE,KAAK,MAAM;EACX,IAAI,MAAM;EACV,SAAS;EACT,MAAM;EAEN,GAAG,MAAM,MAAM;CACjB,CACF,GAAC,EAAA,cACW,KAAA,SAAQ,CAAA,SAAA,QAAY,SAAS,SAAQ,CAAA,GAAA,CAAA,SAAA,OAGhD,MAAA,SAAAF,YAAA,QAAmB,MAAM,WAAU,WAAA,KAAW,GAAC,IAAA,CAAI,CAAA,CAEvD,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/overlay/Tour.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type ButtonProps } from '../base/Button';
 import { type HeadingProps } from '../base/Heading';

package/dist/overlay/Tour.js

@@ -13,7 +13,7 @@ import { openSetter } from "../utils/dom/open-change.js";
 import { isEditable } from "../utils/dom/hotkeys.js";
 import { createVNode, nextTick, onBeforeUnmount, ref, shallowRef, useId } from "vue";
 import { _component, bindable, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { autoUpdate } from "@floating-ui/dom";
 //#region src/overlay/Tour.tsx
 /** 引导的一步 */

package/dist/overlay/Tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","Text"],"sources":["../../src/overlay/Tour.tsx"],"sourcesContent":["/**\n * 新手引导（原生模态 dialog）：一步一步高亮页面上的元素并说明。遮罩盖住整页，目标处镂空；步骤卡片贴着目标显示。\n *\n *   <Tour\n *     _open={touring}\n *     _current={step}\n *     steps={[\n *       { target: '#search', title: '搜索', content: '按名称或编号查找订单' },\n *       { target: () => exportButton, title: '导出', content: '导出为 Excel', placement: 'left' },\n *       { title: '就这些', content: '随时可以在帮助菜单里重新查看' },   // 没有目标：卡片居中\n *     ]}\n *   />\n *\n * - 模态：背景 inert、Esc 关闭、焦点在卡片里循环，关闭后焦点回到打开前的位置（同 Dialog，见 Modal.tsx）；\n * - 目标：选择器、元素或返回元素的函数；切换步骤时滚动到视口中间，滚动、缩放、目标大小变化时镂空与卡片跟着动；\n *   找不到目标时卡片居中、整页遮罩；\n * - 卡片：封面（可选的插图）、标题（dialog 的名称）、内容（描述）、步数、上一步 / 下一步（最后一步是“完成”）、跳过；\n * - 键盘：→ / ← 下一步 / 上一步（从右到左排版时反过来；焦点在输入框里时不处理），Esc 关闭；\n * - open、current 可受控；点“完成”时调用 onFinish，跳过或 Esc 时只关闭。\n *\n * 部件：Root（dialog，整屏透明）、Spotlight（镂空）、Panel（卡片）、Cover（封面）、Title、Content、Footer、\n * Progress（步数）、Skip（跳过）、Previous（上一步）、Next（下一步 / 完成）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { autoUpdate } from '@floating-ui/dom';\nimport { nextTick, onBeforeUnmount, useId, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { H2, type HeadingProps } from '../base/Heading';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { clamp } from '../utils/data/number';\nimport { isRtl } from '../utils/dom/direction';\nimport { isEditable } from '../utils/dom/hotkeys';\nimport { anchorFloating, floatingStyles, type FloatingPlacement } from '../utils/dom/floating';\nimport {\n  openSetter,\n  type OpenChangeDetails,\n  type OpenChangeProps,\n  type OpenChangeReasons,\n} from '../utils/dom/open-change';\nimport { openModalDialog } from '../utils/dom/overlay';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 引导的一步 */\nexport interface TourStep {\n  /** 高亮的目标：选择器、元素或返回元素的函数；不写（或找不到）时卡片居中 */\n  target?: string | HTMLElement | (() => HTMLElement | null | undefined);\n  /** 标题 */\n  title: VNodeChild;\n  /** 说明 */\n  content?: VNodeChild;\n  /** 标题上方的封面：插图、截图、短视频 */\n  cover?: VNodeChild;\n  /** 卡片在目标的哪一侧，默认 bottom；空间不够时翻转 */\n  placement?: FloatingPlacement;\n}\n\n/** 打开、无障碍关联由组件管理；未声明的属性落到 dialog 上 */\nexport interface TourProps\n  extends PartProps<'dialog', 'open' | 'aria-labelledby' | 'aria-describedby'>, OpenChangeProps {\n  /** 各步 */\n  steps: readonly TourStep[];\n  /** 是否显示：父级写 _open={x} */\n  _open?: boolean;\n  /** 当前第几步，从 0 开始：父级写 _current={n} */\n  _current?: number;\n  /** 镂空比目标大出多少（px），默认 6 */\n  padding?: number;\n  /** 点了最后一步的“完成” */\n  onFinish?: () => void;\n  /** 镂空的部件属性 */\n  propsSpotlight?: PartProps<'div'>;\n  /** 卡片的部件属性 */\n  propsPanel?: PartProps<'div'>;\n  /** 封面的部件属性 */\n  propsCover?: PartProps<'div'>;\n  /** 标题（dialog 的名称）的部件属性 */\n  propsTitle?: Omit<Partial<HeadingProps>, 'id'>;\n  /** 说明（dialog 的描述）的部件属性 */\n  propsContent?: PartProps<'div', 'id'>;\n  /** 底部一行（步数与按钮）的部件属性 */\n  propsFooter?: Partial<FlexProps>;\n  /** 步数（第几步 / 共几步）的部件属性 */\n  propsProgress?: Partial<TextProps>;\n  /** 跳过按钮的部件属性；点击由组件管理 */\n  propsSkip?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 上一步按钮的部件属性；点击由组件管理 */\n  propsPrevious?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 下一步（最后一步是完成）按钮的部件属性；点击由组件管理，可以设 disabled（完成某个操作后才能继续） */\n  propsNext?: Omit<Partial<ButtonProps>, 'onClick'>;\n}\n\n/** Tour 的样式：root、spotlight、dimmed、panel、cover、title、content、footer、progress */\nexport const tourStyles = css.create({\n  // 整屏透明的 dialog：遮罩由镂空的阴影画，原生 ::backdrop 不用\n  root: {\n    position: 'fixed',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    maxWidth: 'none',\n    maxHeight: 'none',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    overflow: 'hidden',\n    '::backdrop': { backgroundColor: 'transparent' },\n  },\n  // 一个盒子画成镂空：外面一圈巨大的阴影就是遮罩\n  spotlight: {\n    position: 'fixed',\n    borderRadius: '_md',\n    boxShadow: `0 0 0 100vmax ${t.colors.overlay}`,\n    pointerEvents: 'none',\n    transition: `left ${t.durations.md} ${t.easings.standard}, top ${t.durations.md} ${t.easings.standard}, width ${t.durations.md} ${t.easings.standard}, height ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 没有目标：整页遮罩\n  dimmed: { inset: 0, borderRadius: 0, backgroundColor: '_overlay', boxShadow: 'none' },\n  panel: {\n    display: 'grid',\n    gap: '_sm',\n    width: 'min(22rem, calc(100vw - 2rem))',\n    padding: '_lg',\n    lineHeight: '_normal',\n  },\n  centered: { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' },\n  // 封面贴着卡片的上、左、右边（盖住内边距），圆角随卡片\n  cover: {\n    display: 'grid',\n    overflow: 'hidden',\n    marginBlockStart: `calc(-1 * ${t.space.lg})`,\n    marginInline: `calc(-1 * ${t.space.lg})`,\n    marginBlockEnd: '_xs',\n    borderStartStartRadius: 'inherit',\n    borderStartEndRadius: 'inherit',\n  },\n  title: { margin: 0 },\n  content: { color: '_textMuted' },\n  footer: { marginBlockStart: '_xs' },\n  progress: { marginInlineEnd: 'auto' },\n});\n\n// 镂空的位置是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Tour 的样式：rect（镂空的位置与大小） */\nexport const tourDynamicStyles = css.create({\n  rect: (left: number, top: number, width: number, height: number) => ({\n    left,\n    top,\n    width,\n    height,\n  }),\n});\n\n/** 读出这一步的目标元素 */\nfunction resolveTarget(target: TourStep['target']): HTMLElement | null {\n  if (!target) return null;\n  if (typeof target === 'string') return document.querySelector<HTMLElement>(target);\n  if (typeof target === 'function') return target() ?? null;\n  return target;\n}\n\n/** 新手引导：遮罩镂空高亮目标，卡片说明，一步一步往下走 */\nexport const Tour = _component(\n  ({\n    steps,\n    _open: open = _bindable(false),\n    onOpenChange,\n    _current: current = _bindable(0),\n    padding = 6,\n    onFinish,\n    propsSpotlight,\n    propsPanel,\n    propsCover,\n    propsTitle,\n    propsContent,\n    propsFooter,\n    propsProgress,\n    propsSkip,\n    propsPrevious,\n    propsNext,\n    ...rest\n  }: TourProps) => {\n    const lang = useLang();\n    const id = useId();\n    const titleId = `${id}-title`;\n    const contentId = `${id}-content`;\n    let dialog = _state.raw<HTMLDialogElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    // 镂空的位置；没有目标时为 null（整页遮罩、卡片居中）\n    let rect = _state<{ left: number; top: number; width: number; height: number } | null>(null);\n    let release: (() => void) | undefined;\n    let stopFollow: (() => void) | undefined;\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 这次关闭的原因：跳过是 close、完成是 confirm，没记下的是 Esc\n    let closing: OpenChangeDetails | undefined;\n\n    const step = () => steps[clamp(current, 0, steps.length - 1)];\n    const last = () => current >= steps.length - 1;\n\n    // 与对话框同一套模态行为（含锁定页面滚动：引导期间页面不跟着滚，目标由引导自己滚进视口）\n    function show() {\n      if (!dialog || dialog.open) return;\n      release = openModalDialog(dialog);\n    }\n\n    /** 跟随这一步的目标：滚到视口中间，之后镂空与卡片随滚动、缩放、大小变化更新 */\n    async function follow() {\n      stopFollow?.();\n      stopFollow = undefined;\n      await nextTick();\n      const target = resolveTarget(step()?.target);\n      if (!panel) return;\n      if (!target) {\n        rect = null;\n        // 上一步定位时写的内联位置清掉，卡片回到居中\n        Object.assign(panel.style, { left: '', top: '', visibility: '', transformOrigin: '' });\n        panel.focus({ preventScroll: true });\n        return;\n      }\n      target.scrollIntoView({ block: 'center', inline: 'nearest' });\n      const anchored = anchorFloating(target, panel, {\n        placement: step()?.placement ?? 'bottom',\n        offset: padding + 8,\n        crossAxisFallback: true,\n      });\n      const stopSpotlight = autoUpdate(target, panel, () => {\n        const box = target.getBoundingClientRect();\n        rect = {\n          left: box.left - padding,\n          top: box.top - padding,\n          width: box.width + padding * 2,\n          height: box.height + padding * 2,\n        };\n      });\n      stopFollow = () => {\n        anchored.stop();\n        stopSpotlight();\n      };\n      await anchored.ready;\n      panel.focus({ preventScroll: true });\n    }\n\n    function close(reason: keyof OpenChangeReasons, event?: Event) {\n      closing = { reason, event };\n      dialog?.close();\n    }\n\n    // 不论以什么方式关闭（Esc、跳过、完成、open 改为 false），都会触发原生 close 事件\n    function onClose() {\n      stopFollow?.();\n      stopFollow = undefined;\n      release?.();\n      release = undefined;\n      const { reason, event } = closing ?? { reason: 'escape' };\n      closing = undefined;\n      setOpen(false, reason, event);\n    }\n\n    function next(event?: Event) {\n      if (!last()) {\n        current++;\n        return;\n      }\n      close('confirm', event);\n      onFinish?.();\n    }\n\n    /** → / ← 切换步骤（从右到左排版时反过来）；焦点在可编辑的元素里时留给它，下一步按钮不可用时不前进 */\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;\n      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n      if (isEditable(event.target)) return;\n      const forward = (event.key === 'ArrowRight') !== (panel !== null && isRtl(panel));\n      if (forward && !propsNext?.disabled) next(event);\n      else if (!forward && current > 0) current--;\n      else return;\n      event.preventDefault();\n    }\n\n    _effect(() => {\n      if (open) show();\n      else if (dialog?.open) dialog.close();\n    });\n    // 打开、换步骤时重新跟随目标\n    _effect(() => {\n      void current;\n      if (open) void follow();\n    });\n    onBeforeUnmount(() => {\n      stopFollow?.();\n      release?.();\n    });\n\n    return () => {\n      const currentStep = step();\n      return (\n        <dialog\n          {...mergeAttrs<'dialog'>({ sx: tourStyles.root }, rest, {\n            ref: _toRef(dialog),\n            'aria-labelledby': titleId,\n            'aria-describedby': currentStep?.content != null ? contentId : undefined,\n            onClose,\n            onKeydown,\n          })}\n          data-step={current}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  tourStyles.spotlight,\n                  rect\n                    ? tourDynamicStyles.rect(rect.left, rect.top, rect.width, rect.height)\n                    : tourStyles.dimmed,\n                ],\n              },\n              propsSpotlight,\n              { 'aria-hidden': true },\n            )}\n          />\n          {currentStep && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    floatingStyles.anchored,\n                    floatingStyles.surface,\n                    tourStyles.panel,\n                    !rect && tourStyles.centered,\n                  ],\n                },\n                propsPanel,\n                { ref: _toRef(panel), tabindex: -1 },\n              )}\n            >\n              {currentStep.cover != null && (\n                <div {...mergeAttrs<'div'>({ sx: tourStyles.cover }, propsCover)}>\n                  {currentStep.cover}\n                </div>\n              )}\n              <H2\n                {...mergePartProps<HeadingProps>({ size: 'md', sx: tourStyles.title }, propsTitle, {\n                  id: titleId,\n                })}\n              >\n                {currentStep.title}\n              </H2>\n              {currentStep.content != null && (\n                <div\n                  {...mergeAttrs<'div'>({ sx: tourStyles.content }, propsContent, {\n                    id: contentId,\n                  })}\n                >\n                  {currentStep.content}\n                </div>\n              )}\n              <Flex\n                {...mergePartProps<FlexProps>(\n                  { align: 'center', gap: 'sm', wrap: true, sx: tourStyles.footer },\n                  propsFooter,\n                )}\n              >\n                <Text\n                  {...mergePartProps<TextProps>(\n                    { size: 'sm', tone: 'muted', sx: tourStyles.progress },\n                    propsProgress,\n                  )}\n                >\n                  {lang.tourProgress(current + 1, steps.length)}\n                </Text>\n                {!last() && (\n                  <Button\n                    {...mergePartProps<ButtonProps>(\n                      { variant: 'ghost', tone: 'neutral', size: 'sm' },\n                      propsSkip,\n                      { onClick: (event: MouseEvent) => close('close', event) },\n                    )}\n                  >\n                    {lang.tourSkip}\n                  </Button>\n                )}\n                {current > 0 && (\n                  <Button\n                    {...mergePartProps<ButtonProps>(\n                      { variant: 'outline', size: 'sm' },\n                      propsPrevious,\n                      { onClick: () => current-- },\n                    )}\n                  >\n                    {lang.tourPrevious}\n                  </Button>\n                )}\n                <Button\n                  {...mergePartProps<ButtonProps>({ size: 'sm' }, propsNext, { onClick: next })}\n                >\n                  {last() ? lang.tourFinish : lang.tourNext}\n                </Button>\n              </Flex>\n            </div>\n          )}\n        </dialog>\n      );\n    };\n  },\n  { name: 'Tour' },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Tour.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","Text"],"sources":["../../src/overlay/Tour.tsx"],"sourcesContent":["/**\n * 新手引导（原生模态 dialog）：一步一步高亮页面上的元素并说明。遮罩盖住整页，目标处镂空；步骤卡片贴着目标显示。\n *\n *   <Tour\n *     _open={touring}\n *     _current={step}\n *     steps={[\n *       { target: '#search', title: '搜索', content: '按名称或编号查找订单' },\n *       { target: () => exportButton, title: '导出', content: '导出为 Excel', placement: 'left' },\n *       { title: '就这些', content: '随时可以在帮助菜单里重新查看' },   // 没有目标：卡片居中\n *     ]}\n *   />\n *\n * - 模态：背景 inert、Esc 关闭、焦点在卡片里循环，关闭后焦点回到打开前的位置（同 Dialog，见 Modal.tsx）；\n * - 目标：选择器、元素或返回元素的函数；切换步骤时滚动到视口中间，滚动、缩放、目标大小变化时镂空与卡片跟着动；\n *   找不到目标时卡片居中、整页遮罩；\n * - 卡片：封面（可选的插图）、标题（dialog 的名称）、内容（描述）、步数、上一步 / 下一步（最后一步是“完成”）、跳过；\n * - 键盘：→ / ← 下一步 / 上一步（从右到左排版时反过来；焦点在输入框里时不处理），Esc 关闭；\n * - open、current 可受控；点“完成”时调用 onFinish，跳过或 Esc 时只关闭。\n *\n * 部件：Root（dialog，整屏透明）、Spotlight（镂空）、Panel（卡片）、Cover（封面）、Title、Content、Footer、\n * Progress（步数）、Skip（跳过）、Previous（上一步）、Next（下一步 / 完成）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { autoUpdate } from '@floating-ui/dom';\nimport { nextTick, onBeforeUnmount, useId, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { H2, type HeadingProps } from '../base/Heading';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { clamp } from '../utils/data/number';\nimport { isRtl } from '../utils/dom/direction';\nimport { isEditable } from '../utils/dom/hotkeys';\nimport { anchorFloating, floatingStyles, type FloatingPlacement } from '../utils/dom/floating';\nimport {\n  openSetter,\n  type OpenChangeDetails,\n  type OpenChangeProps,\n  type OpenChangeReasons,\n} from '../utils/dom/open-change';\nimport { openModalDialog } from '../utils/dom/overlay';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 引导的一步 */\nexport interface TourStep {\n  /** 高亮的目标：选择器、元素或返回元素的函数；不写（或找不到）时卡片居中 */\n  target?: string | HTMLElement | (() => HTMLElement | null | undefined);\n  /** 标题 */\n  title: VNodeChild;\n  /** 说明 */\n  content?: VNodeChild;\n  /** 标题上方的封面：插图、截图、短视频 */\n  cover?: VNodeChild;\n  /** 卡片在目标的哪一侧，默认 bottom；空间不够时翻转 */\n  placement?: FloatingPlacement;\n}\n\n/** 打开、无障碍关联由组件管理；未声明的属性落到 dialog 上 */\nexport interface TourProps\n  extends PartProps<'dialog', 'open' | 'aria-labelledby' | 'aria-describedby'>, OpenChangeProps {\n  /** 各步 */\n  steps: readonly TourStep[];\n  /** 是否显示：父级写 _open={x} */\n  _open?: boolean;\n  /** 当前第几步，从 0 开始：父级写 _current={n} */\n  _current?: number;\n  /** 镂空比目标大出多少（px），默认 6 */\n  padding?: number;\n  /** 点了最后一步的“完成” */\n  onFinish?: () => void;\n  /** 镂空的部件属性 */\n  propsSpotlight?: PartProps<'div'>;\n  /** 卡片的部件属性 */\n  propsPanel?: PartProps<'div'>;\n  /** 封面的部件属性 */\n  propsCover?: PartProps<'div'>;\n  /** 标题（dialog 的名称）的部件属性 */\n  propsTitle?: Omit<Partial<HeadingProps>, 'id'>;\n  /** 说明（dialog 的描述）的部件属性 */\n  propsContent?: PartProps<'div', 'id'>;\n  /** 底部一行（步数与按钮）的部件属性 */\n  propsFooter?: Partial<FlexProps>;\n  /** 步数（第几步 / 共几步）的部件属性 */\n  propsProgress?: Partial<TextProps>;\n  /** 跳过按钮的部件属性；点击由组件管理 */\n  propsSkip?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 上一步按钮的部件属性；点击由组件管理 */\n  propsPrevious?: Omit<Partial<ButtonProps>, 'onClick'>;\n  /** 下一步（最后一步是完成）按钮的部件属性；点击由组件管理，可以设 disabled（完成某个操作后才能继续） */\n  propsNext?: Omit<Partial<ButtonProps>, 'onClick'>;\n}\n\n/** Tour 的样式：root、spotlight、dimmed、panel、cover、title、content、footer、progress */\nexport const tourStyles = css.create({\n  // 整屏透明的 dialog：遮罩由镂空的阴影画，原生 ::backdrop 不用\n  root: {\n    position: 'fixed',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    maxWidth: 'none',\n    maxHeight: 'none',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    overflow: 'hidden',\n    '::backdrop': { backgroundColor: 'transparent' },\n  },\n  // 一个盒子画成镂空：外面一圈巨大的阴影就是遮罩\n  spotlight: {\n    position: 'fixed',\n    borderRadius: '_md',\n    boxShadow: `0 0 0 100vmax ${t.colors.overlay}`,\n    pointerEvents: 'none',\n    transition: `left ${t.durations.md} ${t.easings.standard}, top ${t.durations.md} ${t.easings.standard}, width ${t.durations.md} ${t.easings.standard}, height ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 没有目标：整页遮罩\n  dimmed: { inset: 0, borderRadius: 0, backgroundColor: '_overlay', boxShadow: 'none' },\n  panel: {\n    display: 'grid',\n    gap: '_sm',\n    width: 'min(22rem, calc(100vw - 2rem))',\n    padding: '_lg',\n    lineHeight: '_normal',\n  },\n  centered: { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' },\n  // 封面贴着卡片的上、左、右边（盖住内边距），圆角随卡片\n  cover: {\n    display: 'grid',\n    overflow: 'hidden',\n    marginBlockStart: `calc(-1 * ${t.space.lg})`,\n    marginInline: `calc(-1 * ${t.space.lg})`,\n    marginBlockEnd: '_xs',\n    borderStartStartRadius: 'inherit',\n    borderStartEndRadius: 'inherit',\n  },\n  title: { margin: 0 },\n  content: { color: '_textMuted' },\n  footer: { marginBlockStart: '_xs' },\n  progress: { marginInlineEnd: 'auto' },\n});\n\n// 镂空的位置是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Tour 的样式：rect（镂空的位置与大小） */\nexport const tourDynamicStyles = css.create({\n  rect: (left: number, top: number, width: number, height: number) => ({\n    left,\n    top,\n    width,\n    height,\n  }),\n});\n\n/** 读出这一步的目标元素 */\nfunction resolveTarget(target: TourStep['target']): HTMLElement | null {\n  if (!target) return null;\n  if (typeof target === 'string') return document.querySelector<HTMLElement>(target);\n  if (typeof target === 'function') return target() ?? null;\n  return target;\n}\n\n/** 新手引导：遮罩镂空高亮目标，卡片说明，一步一步往下走 */\nexport const Tour = _component(\n  ({\n    steps,\n    _open: open = _bindable(false),\n    onOpenChange,\n    _current: current = _bindable(0),\n    padding = 6,\n    onFinish,\n    propsSpotlight,\n    propsPanel,\n    propsCover,\n    propsTitle,\n    propsContent,\n    propsFooter,\n    propsProgress,\n    propsSkip,\n    propsPrevious,\n    propsNext,\n    ...rest\n  }: TourProps) => {\n    const lang = useLang();\n    const id = useId();\n    const titleId = `${id}-title`;\n    const contentId = `${id}-content`;\n    let dialog = _state.raw<HTMLDialogElement | null>(null);\n    let panel = _state.raw<HTMLElement | null>(null);\n    // 镂空的位置；没有目标时为 null（整页遮罩、卡片居中）\n    let rect = _state<{ left: number; top: number; width: number; height: number } | null>(null);\n    let release: (() => void) | undefined;\n    let stopFollow: (() => void) | undefined;\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    // 这次关闭的原因：跳过是 close、完成是 confirm，没记下的是 Esc\n    let closing: OpenChangeDetails | undefined;\n\n    const step = () => steps[clamp(current, 0, steps.length - 1)];\n    const last = () => current >= steps.length - 1;\n\n    // 与对话框同一套模态行为（含锁定页面滚动：引导期间页面不跟着滚，目标由引导自己滚进视口）\n    function show() {\n      if (!dialog || dialog.open) return;\n      release = openModalDialog(dialog);\n    }\n\n    /** 跟随这一步的目标：滚到视口中间，之后镂空与卡片随滚动、缩放、大小变化更新 */\n    async function follow() {\n      stopFollow?.();\n      stopFollow = undefined;\n      await nextTick();\n      const target = resolveTarget(step()?.target);\n      if (!panel) return;\n      if (!target) {\n        rect = null;\n        // 上一步定位时写的内联位置清掉，卡片回到居中\n        Object.assign(panel.style, { left: '', top: '', visibility: '', transformOrigin: '' });\n        panel.focus({ preventScroll: true });\n        return;\n      }\n      target.scrollIntoView({ block: 'center', inline: 'nearest' });\n      const anchored = anchorFloating(target, panel, {\n        placement: step()?.placement ?? 'bottom',\n        offset: padding + 8,\n        crossAxisFallback: true,\n      });\n      const stopSpotlight = autoUpdate(target, panel, () => {\n        const box = target.getBoundingClientRect();\n        rect = {\n          left: box.left - padding,\n          top: box.top - padding,\n          width: box.width + padding * 2,\n          height: box.height + padding * 2,\n        };\n      });\n      stopFollow = () => {\n        anchored.stop();\n        stopSpotlight();\n      };\n      await anchored.ready;\n      panel.focus({ preventScroll: true });\n    }\n\n    function close(reason: keyof OpenChangeReasons, event?: Event) {\n      closing = { reason, event };\n      dialog?.close();\n    }\n\n    // 不论以什么方式关闭（Esc、跳过、完成、open 改为 false），都会触发原生 close 事件\n    function onClose() {\n      stopFollow?.();\n      stopFollow = undefined;\n      release?.();\n      release = undefined;\n      const { reason, event } = closing ?? { reason: 'escape' };\n      closing = undefined;\n      setOpen(false, reason, event);\n    }\n\n    function next(event?: Event) {\n      if (!last()) {\n        current++;\n        return;\n      }\n      close('confirm', event);\n      onFinish?.();\n    }\n\n    /** → / ← 切换步骤（从右到左排版时反过来）；焦点在可编辑的元素里时留给它，下一步按钮不可用时不前进 */\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;\n      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n      if (isEditable(event.target)) return;\n      const forward = (event.key === 'ArrowRight') !== (panel !== null && isRtl(panel));\n      if (forward && !propsNext?.disabled) next(event);\n      else if (!forward && current > 0) current--;\n      else return;\n      event.preventDefault();\n    }\n\n    _effect(() => {\n      if (open) show();\n      else if (dialog?.open) dialog.close();\n    });\n    // 打开、换步骤时重新跟随目标\n    _effect(() => {\n      void current;\n      if (open) void follow();\n    });\n    onBeforeUnmount(() => {\n      stopFollow?.();\n      release?.();\n    });\n\n    return () => {\n      const currentStep = step();\n      return (\n        <dialog\n          {...mergeAttrs<'dialog'>({ sx: tourStyles.root }, rest, {\n            ref: _toRef(dialog),\n            'aria-labelledby': titleId,\n            'aria-describedby': currentStep?.content != null ? contentId : undefined,\n            onClose,\n            onKeydown,\n          })}\n          data-step={current}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  tourStyles.spotlight,\n                  rect\n                    ? tourDynamicStyles.rect(rect.left, rect.top, rect.width, rect.height)\n                    : tourStyles.dimmed,\n                ],\n              },\n              propsSpotlight,\n              { 'aria-hidden': true },\n            )}\n          />\n          {currentStep && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    floatingStyles.anchored,\n                    floatingStyles.surface,\n                    tourStyles.panel,\n                    !rect && tourStyles.centered,\n                  ],\n                },\n                propsPanel,\n                { ref: _toRef(panel), tabindex: -1 },\n              )}\n            >\n              {currentStep.cover != null && (\n                <div {...mergeAttrs<'div'>({ sx: tourStyles.cover }, propsCover)}>\n                  {currentStep.cover}\n                </div>\n              )}\n              <H2\n                {...mergePartProps<HeadingProps>({ size: 'md', sx: tourStyles.title }, propsTitle, {\n                  id: titleId,\n                })}\n              >\n                {currentStep.title}\n              </H2>\n              {currentStep.content != null && (\n                <div\n                  {...mergeAttrs<'div'>({ sx: tourStyles.content }, propsContent, {\n                    id: contentId,\n                  })}\n                >\n                  {currentStep.content}\n                </div>\n              )}\n              <Flex\n                {...mergePartProps<FlexProps>(\n                  { align: 'center', gap: 'sm', wrap: true, sx: tourStyles.footer },\n                  propsFooter,\n                )}\n              >\n                <Text\n                  {...mergePartProps<TextProps>(\n                    { size: 'sm', tone: 'muted', sx: tourStyles.progress },\n                    propsProgress,\n                  )}\n                >\n                  {lang.tourProgress(current + 1, steps.length)}\n                </Text>\n                {!last() && (\n                  <Button\n                    {...mergePartProps<ButtonProps>(\n                      { variant: 'ghost', tone: 'neutral', size: 'sm' },\n                      propsSkip,\n                      { onClick: (event: MouseEvent) => close('close', event) },\n                    )}\n                  >\n                    {lang.tourSkip}\n                  </Button>\n                )}\n                {current > 0 && (\n                  <Button\n                    {...mergePartProps<ButtonProps>(\n                      { variant: 'outline', size: 'sm' },\n                      propsPrevious,\n                      { onClick: () => current-- },\n                    )}\n                  >\n                    {lang.tourPrevious}\n                  </Button>\n                )}\n                <Button\n                  {...mergePartProps<ButtonProps>({ size: 'sm' }, propsNext, { onClick: next })}\n                >\n                  {last() ? lang.tourFinish : lang.tourNext}\n                </Button>\n              </Flex>\n            </div>\n          )}\n        </dialog>\n      );\n    };\n  },\n  { name: 'Tour' },\n);\n"],"mappings":"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"}

package/dist/patterns/ActionBar.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type PartProps } from '../utils/props';
 /** 未声明的属性落到外层 div 上 */

package/dist/patterns/ActionBar.js

@@ -3,7 +3,7 @@ import { hasContent, mergeAttrs } from "../utils/props.js";
 import { useIntersectionObserver } from "../utils/dom/intersection.js";
 import { createVNode, ref, shallowRef } from "vue";
 import { _component, childrenProp, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/patterns/ActionBar.tsx
 /** 未声明的属性落到外层 div 上 */
 /** ActionBar 的样式：root、sticky、stuck、start、actions */

package/dist/patterns/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/patterns/ActionBar.tsx"],"sourcesContent":["/**\n * 吸底的操作栏（div）：长表单、详情页底部的“取消 / 保存草稿 / 提交”，滚动时一直贴在滚动区域的底边，不用滚到底才能提交。\n *\n *   <ActionBar start={form.dirty ? '有未保存的改动' : undefined}>\n *     <Button variant=\"ghost\" tone=\"neutral\">取消</Button>\n *     <Button type=\"submit\" loading={form.submitting}>提交</Button>\n *   </ActionBar>\n *\n * 放在要跟着滚动的内容的最后（表单里、卡片里、页面主区里都行）：position: sticky 贴着最近的滚动容器的底边。\n * 下面还有被盖住的内容时（贴在底边、还没滚到它原本的位置）带阴影、data-stuck，提示还能往下滚；滚到底时与内容平齐。\n * start 是起始边的说明（未保存的改动、校验汇总），children 是结束边的按钮。\n *\n * 部件：Root（div）、Start（div）、Actions（div）。\n */\nimport { _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 { useIntersectionObserver } from '../utils/dom/intersection';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ActionBarProps extends PartProps<'div'> {\n  /** 起始边的内容：未保存的改动、已选几项、校验汇总 */\n  start?: VNodeChild;\n  /**\n   * 贴在滚动区域的底边，默认 true；false 时是普通的一行（如对话框里已经固定的底栏）\n   * @default true\n   */\n  sticky?: boolean;\n  /** 起始边内容的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** 按钮区的部件属性 */\n  propsActions?: PartProps<'div'>;\n  /** 按钮：靠结束边排开 */\n  children?: VNodeChild;\n}\n\n/** ActionBar 的样式：root、sticky、stuck、start、actions */\nexport const actionBarStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_md',\n    paddingBlock: '_md',\n    paddingInline: '_lg',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    backgroundColor: '_surface',\n    transition: `box-shadow ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 往下多出一条线宽：贴着底边时有 1px 在滚动区域外，交叉比例小于 1，据此判断“盖着下面的内容”\n  sticky: { position: 'sticky', insetBlockEnd: `calc(-1 * ${t.borderWidths.xs})`, zIndex: 1 },\n  // 盖着下面的内容：阴影提示还能往下滚\n  stuck: { boxShadow: '_md', borderBlockStartColor: '_border' },\n  // 说明文字比所在文字小一档（0.93em ≈ 默认字号下的 sm）\n  start: { flexGrow: 1, minWidth: 0, color: '_textMuted', fontSize: '0.93em' },\n  actions: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_sm',\n    marginInlineStart: 'auto',\n  },\n});\n\n/** 吸底的操作栏：起始边的说明、结束边的按钮；盖着下面的内容时带阴影 */\nexport const ActionBar = _component(\n  ({ start, sticky = true, propsStart, propsActions, children, ...rest }: ActionBarProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    let stuck = _state(false);\n\n    // 贴着底边时栏有一条线宽露在滚动区域外（见 sticky 样式）：没有完整可见就是盖着下面的内容\n    useIntersectionObserver(\n      () => (sticky ? root : null),\n      ([entry]) => (stuck = !!entry && entry.isIntersecting && entry.intersectionRatio < 1),\n      () => ({ threshold: [0, 1] }),\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              actionBarStyles.root,\n              sticky && actionBarStyles.sticky,\n              sticky && stuck && actionBarStyles.stuck,\n            ],\n          },\n          rest,\n          { ref: _toRef(root) },\n        )}\n        data-stuck={(sticky && stuck) || undefined}\n      >\n        {hasContent(start) && (\n          <div {...mergeAttrs<'div'>({ sx: actionBarStyles.start }, propsStart)}>{start}</div>\n        )}\n        <div {...mergeAttrs<'div'>({ sx: actionBarStyles.actions }, propsActions)}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAuCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,cAAc;EACd,eAAe;EACf,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,iBAAiB;EACjB,YAAY,cAAc,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACxD;CAEA,QAAQ;EAAE,UAAU;EAAU,eAAe,aAAa,EAAE,aAAa,GAAE;EAAK,QAAQ;CAAE;CAE1F,OAAO;EAAE,WAAW;EAAO,uBAAuB;CAAU;CAE5D,OAAO;EAAE,UAAU;EAAG,UAAU;EAAG,OAAO;EAAc,UAAU;CAAS;CAC3E,SAAS;EACP,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,mBAAmB;CACrB;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAA2F;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAxE,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAyC,OAAIC,UAAA,QAAA,MAAA,KAAA;CAClE,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI,QAAKC,IAAU,KAAK;CAGxB,8BACS,OAAA,QAAA,KAAA,QAAgB,OACtB,CAAC,WAAY,MAAA,QAAQ,CAAC,CAAC,SAAS,MAAM,kBAAkB,MAAM,oBAAoB,UAC5E,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,EAC7B;CAEA,aAAOC,YAAA,OAAAC,cAEC,WACF,EACE,IAAI;EACF,gBAAgB;EAChB,OAAA,SAAU,gBAAgB;EAC1B,OAAA,SAAA,MAAA,SAAmB,gBAAgB;CAAK,EAE5C,GACA,MACA,EAAE,KAAG,KAAe,CACtB,GAAC,EAAA,cACY,OAAA,SAAA,MAAA,SAAoB,KAAA,EAAS,CAAA,GAAA,CAEzC,WAAU,MAAA,KAAM,KAACD,YAAA,OACP,WAAkB,EAAE,IAAI,gBAAgB,MAAM,GAAC,WAAA,KAAY,GAAC,CAAA,MAAA,KAAA,CAAA,GACtEA,YAAA,OACQ,WAAkB,EAAE,IAAI,gBAAgB,QAAQ,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAAA,CAAA;AAG/E,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ActionBar.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/patterns/ActionBar.tsx"],"sourcesContent":["/**\n * 吸底的操作栏（div）：长表单、详情页底部的“取消 / 保存草稿 / 提交”，滚动时一直贴在滚动区域的底边，不用滚到底才能提交。\n *\n *   <ActionBar start={form.dirty ? '有未保存的改动' : undefined}>\n *     <Button variant=\"ghost\" tone=\"neutral\">取消</Button>\n *     <Button type=\"submit\" loading={form.submitting}>提交</Button>\n *   </ActionBar>\n *\n * 放在要跟着滚动的内容的最后（表单里、卡片里、页面主区里都行）：position: sticky 贴着最近的滚动容器的底边。\n * 下面还有被盖住的内容时（贴在底边、还没滚到它原本的位置）带阴影、data-stuck，提示还能往下滚；滚到底时与内容平齐。\n * start 是起始边的说明（未保存的改动、校验汇总），children 是结束边的按钮。\n *\n * 部件：Root（div）、Start（div）、Actions（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useIntersectionObserver } from '../utils/dom/intersection';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ActionBarProps extends PartProps<'div'> {\n  /** 起始边的内容：未保存的改动、已选几项、校验汇总 */\n  start?: VNodeChild;\n  /**\n   * 贴在滚动区域的底边，默认 true；false 时是普通的一行（如对话框里已经固定的底栏）\n   * @default true\n   */\n  sticky?: boolean;\n  /** 起始边内容的部件属性 */\n  propsStart?: PartProps<'div'>;\n  /** 按钮区的部件属性 */\n  propsActions?: PartProps<'div'>;\n  /** 按钮：靠结束边排开 */\n  children?: VNodeChild;\n}\n\n/** ActionBar 的样式：root、sticky、stuck、start、actions */\nexport const actionBarStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_md',\n    paddingBlock: '_md',\n    paddingInline: '_lg',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    backgroundColor: '_surface',\n    transition: `box-shadow ${t.durations.md} ${t.easings.standard}`,\n  },\n  // 往下多出一条线宽：贴着底边时有 1px 在滚动区域外，交叉比例小于 1，据此判断“盖着下面的内容”\n  sticky: { position: 'sticky', insetBlockEnd: `calc(-1 * ${t.borderWidths.xs})`, zIndex: 1 },\n  // 盖着下面的内容：阴影提示还能往下滚\n  stuck: { boxShadow: '_md', borderBlockStartColor: '_border' },\n  // 说明文字比所在文字小一档（0.93em ≈ 默认字号下的 sm）\n  start: { flexGrow: 1, minWidth: 0, color: '_textMuted', fontSize: '0.93em' },\n  actions: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '_sm',\n    marginInlineStart: 'auto',\n  },\n});\n\n/** 吸底的操作栏：起始边的说明、结束边的按钮；盖着下面的内容时带阴影 */\nexport const ActionBar = _component(\n  ({ start, sticky = true, propsStart, propsActions, children, ...rest }: ActionBarProps) => {\n    let root = _state.raw<HTMLElement | null>(null);\n    let stuck = _state(false);\n\n    // 贴着底边时栏有一条线宽露在滚动区域外（见 sticky 样式）：没有完整可见就是盖着下面的内容\n    useIntersectionObserver(\n      () => (sticky ? root : null),\n      ([entry]) => (stuck = !!entry && entry.isIntersecting && entry.intersectionRatio < 1),\n      () => ({ threshold: [0, 1] }),\n    );\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              actionBarStyles.root,\n              sticky && actionBarStyles.sticky,\n              sticky && stuck && actionBarStyles.stuck,\n            ],\n          },\n          rest,\n          { ref: _toRef(root) },\n        )}\n        data-stuck={(sticky && stuck) || undefined}\n      >\n        {hasContent(start) && (\n          <div {...mergeAttrs<'div'>({ sx: actionBarStyles.start }, propsStart)}>{start}</div>\n        )}\n        <div {...mergeAttrs<'div'>({ sx: actionBarStyles.actions }, propsActions)}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAuCA,IAAa,kBAAkB,IAAI,OAAO;CACxC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,cAAc;EACd,eAAe;EACf,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,iBAAiB;EACjB,YAAY,cAAc,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACxD;CAEA,QAAQ;EAAE,UAAU;EAAU,eAAe,aAAa,EAAE,aAAa,GAAE;EAAK,QAAQ;CAAE;CAE1F,OAAO;EAAE,WAAW;EAAO,uBAAuB;CAAU;CAE5D,OAAO;EAAE,UAAU;EAAG,UAAU;EAAG,OAAO;EAAc,UAAU;CAAS;CAC3E,SAAS;EACP,SAAS;EACT,YAAY;EACZ,UAAU;EACV,KAAK;EACL,mBAAmB;CACrB;AACF,CAAC;;AAGD,IAAa,YAAY,0BACvB,QAAA,SAA2F;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAxE,IAAI;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAyC,OAAIC,UAAA,QAAA,MAAA,KAAA;CAClE,IAAI,OAAIC,WAAkC,IAAI;CAC9C,IAAI,QAAKC,IAAU,KAAK;CAGxB,8BACS,OAAA,QAAA,KAAA,QAAgB,OACtB,CAAC,WAAY,MAAA,QAAQ,CAAC,CAAC,SAAS,MAAM,kBAAkB,MAAM,oBAAoB,UAC5E,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,EAC7B;CAEA,aAAOC,YAAA,OAAAC,cAEC,WACF,EACE,IAAI;EACF,gBAAgB;EAChB,OAAA,SAAU,gBAAgB;EAC1B,OAAA,SAAA,MAAA,SAAmB,gBAAgB;CAAK,EAE5C,GACA,MACA,EAAE,KAAG,KAAe,CACtB,GAAC,EAAA,cACY,OAAA,SAAA,MAAA,SAAoB,KAAA,EAAS,CAAA,GAAA,CAEzC,WAAU,MAAA,KAAM,KAACD,YAAA,OACP,WAAkB,EAAE,IAAI,gBAAgB,MAAM,GAAC,WAAA,KAAY,GAAC,CAAA,MAAA,KAAA,CAAA,GACtEA,YAAA,OACQ,WAAkB,EAAE,IAAI,gBAAgB,QAAQ,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAAA,CAAA;AAG/E,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/patterns/AppShell.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import { type VNodeChild } from 'vue';
 import { type ButtonProps } from '../base/Button';
 import { type IconData, type IconProps } from '../base/Icon';

package/dist/patterns/AppShell.js

@@ -19,7 +19,7 @@ import { useMessages } from "../config/lang/messages.js";
 import { patternsMessages } from "./messages.js";
 import { createVNode, shallowRef, unref, useId, watch } from "vue";
 import { _component, bindable, childrenProp, createContext, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Menu, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, PanelTopClose, PanelTopOpen } from "@lucide/icons";
 //#region src/patterns/AppShell.tsx
 /**