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

package/dist/base/button-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-core.js","names":["mergeProps"],"sources":["../../src/base/button-core.ts"],"sourcesContent":["/**\n * 按钮家族（Button、LinkButton、IconButton、CloseButton、ClearButton）的内核：共用的外观、选项、内容排布与行为。\n * 一个元素一个组件（COMPONENTS.md §1）：各组件只管自己元素的行为，样式与内容排布都从这里取。\n *\n * 外观 = variant（样式）× tone（色调）× size（字号档位，内部尺寸随之按 em 缩放）× radius（圆角）。\n */\nimport { h, type VNodeChild } from 'vue';\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Icon, type IconData, type IconProps } from './Icon';\nimport { Spinner, type SpinnerProps } from './Spinner';\nimport { useDefaults } from '../config/defaults';\nimport { partAttrs, useRecipe } from '../config/styles';\nimport { rippleHostStyles, useRipple, type RippleHandlers } from '../utils/dom/ripple';\nimport { mergeAttrs, mergeProps, type PartProps } from '../utils/props';\nimport { focusRingStyles, radiusStyles, type Radius } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport {\n  AttachedContext,\n  attachedStyles,\n  type AttachedOrientations,\n} from '../utils/style/attached';\nimport { interactionTransitions } from '../utils/style/transitions';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 按钮样式 */\nexport interface ButtonVariants {\n  /** 实底：一组操作里的主要操作，每组最多一个 */\n  solid: unknown;\n  /** 浅色底：次要但仍需突出的操作，如卡片里的操作 */\n  soft: unknown;\n  /** 浅色底加描边：表单、设置页里常用的次要操作 */\n  surface: unknown;\n  /** 只有描边：次要操作 */\n  outline: unknown;\n  /** 无底无边，悬停时才有底色：工具栏、行内操作、图标按钮 */\n  ghost: unknown;\n  /** 看起来像链接（无底、无内边距、悬停下划线）：文字中间的操作 */\n  link: unknown;\n}\n\n/** 按钮家族共用的外观选项；可以用 createUi / Provider 的 defaults.Button 统一改默认值 */\nexport interface ButtonOptions {\n  /**\n   * 样式；可以用 createUi / Provider 的 defaults.Button 统一改\n   * @default 'solid'\n   */\n  variant?: keyof ButtonVariants;\n  /**\n   * 色调：与 Badge、Alert 等同一套\n   * @default 'accent'\n   */\n  tone?: StatusTone;\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /**\n   * 圆角\n   * @default 'md'\n   */\n  radius?: Radius;\n  /** 加载中：显示旋转指示，宽度不变，点击无效，焦点保留；读屏会得知 aria-busy */\n  loading?: boolean;\n  /** 按下时的波纹效果；不写时沿用 createUi / Provider 的 ripple（默认开启） */\n  ripple?: boolean;\n  /** 加载指示（Spinner）的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n}\n\n/** 有文字的按钮（Button、LinkButton）另有的选项 */\nexport interface ButtonContentOptions {\n  /** 文字前的图标：`import { Plus } from '@lucide/icons'` */\n  icon?: IconData;\n  /** 文字后的图标 */\n  iconEnd?: IconData;\n  /** 占满容器宽度 */\n  fullWidth?: boolean;\n  /** 内容层（包着图标与文字的 span）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  /** 前置图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 后置图标的部件属性 */\n  propsIconEnd?: Partial<IconProps>;\n  /** 按钮文字；加载中仍保留（读屏名称不变） */\n  children?: VNodeChild;\n}\n\n/** 按钮的基础样式：去掉默认外观，继承文字样式，指针与触摸的反馈；Button 家族也用它 */\nexport const buttonBaseStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'inherit',\n    textAlign: 'inherit',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    userSelect: 'none',\n    // 触摸时不等双击缩放的判定，点击立即响应\n    touchAction: 'manipulation',\n    WebkitTapHighlightColor: 'transparent',\n  },\n  disabled: { cursor: 'not-allowed' },\n});\n\n/** 按钮家族 的样式：root、square、fullWidth、disabled、content、hidden 等 */\nexport const buttonStyles = css.create({\n  // 去掉默认外观、指针与触摸反馈、颜色过渡来自 buttonBaseStyles 与 interactionTransitions（buttonSx 里排在前面）\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    paddingBlock: '_xs',\n    paddingInline: '_lg',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: 'transparent',\n    fontWeight: '_semibold',\n    lineHeight: '_tight',\n    whiteSpace: 'nowrap',\n  },\n  // 图标按钮：宽高相等\n  square: {\n    paddingInline: 0,\n    width: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    flexShrink: 0,\n  },\n  fullWidth: { display: 'flex', width: '_full' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n  content: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  // 加载中隐藏内容但保留占位与无障碍名称（不用 visibility: hidden，那样读屏也读不到）\n  hidden: { opacity: 0 },\n  spinner: {\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\n/** 悬停变色只在可用时：原生 disabled 的按钮照样匹配 :hover，悬停变色会让人以为还能点 */\nconst HOVER = ':hover:not(:disabled,[aria-disabled=\"true\"])';\n\n/**\n * 按钮的样式（配方）：样式 × 色调逐项写主题 token（组合档位）。中性色没有专门的实底色，用反色表面。\n * 实底悬停用各色调的 Hover token：主题检查保证它与 Contrast 字色到 4.5:1\n */\nexport const buttonRecipe = css.recipe({\n  name: 'Button',\n  parts: ['root'],\n  variants: {\n    variant: {\n      solid: {},\n      soft: {},\n      surface: {},\n      outline: {},\n      ghost: {},\n      link: {\n        root: {\n          minHeight: 0,\n          paddingInline: 0,\n          fontWeight: '_medium',\n          textUnderlineOffset: '0.2em',\n          textDecorationLine: { default: 'none', [HOVER]: 'underline' },\n        },\n      },\n    },\n    tone: { neutral: {}, accent: {}, info: {}, success: {}, warning: {}, danger: {} },\n  },\n  compound: [\n    {\n      when: { variant: 'solid', tone: 'neutral' },\n      root: {\n        color: '_inverseText',\n        backgroundColor: {\n          default: '_inverseSurface',\n          [HOVER]: `color-mix(in oklab, ${t.colors.inverseSurface} 85%, ${t.colors.background})`,\n        },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'accent' },\n      root: {\n        color: '_accentContrast',\n        backgroundColor: { default: '_accent', [HOVER]: '_accentHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'info' },\n      root: {\n        color: '_infoContrast',\n        backgroundColor: { default: '_info', [HOVER]: '_infoHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'success' },\n      root: {\n        color: '_successContrast',\n        backgroundColor: { default: '_success', [HOVER]: '_successHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'warning' },\n      root: {\n        color: '_warningContrast',\n        backgroundColor: { default: '_warning', [HOVER]: '_warningHover' },\n      },\n    },\n    {\n      when: { variant: 'solid', tone: 'danger' },\n      root: {\n        color: '_dangerContrast',\n        backgroundColor: { default: '_danger', [HOVER]: '_dangerHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: { default: '_fill', [HOVER]: '_fillHover' } },\n    },\n    {\n      when: { variant: 'soft', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        backgroundColor: { default: '_accentSoft', [HOVER]: '_accentSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'info' },\n      root: {\n        color: '_infoText',\n        backgroundColor: { default: '_infoSoft', [HOVER]: '_infoSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'success' },\n      root: {\n        color: '_successText',\n        backgroundColor: { default: '_successSoft', [HOVER]: '_successSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        backgroundColor: { default: '_warningSoft', [HOVER]: '_warningSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'soft', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        backgroundColor: { default: '_dangerSoft', [HOVER]: '_dangerSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'neutral' },\n      root: {\n        color: '_text',\n        borderColor: '_border',\n        backgroundColor: { default: '_surface', [HOVER]: '_fillHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        borderColor: '_accentBorder',\n        backgroundColor: { default: '_accentSoft', [HOVER]: '_accentSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'info' },\n      root: {\n        color: '_infoText',\n        borderColor: '_infoBorder',\n        backgroundColor: { default: '_infoSoft', [HOVER]: '_infoSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'success' },\n      root: {\n        color: '_successText',\n        borderColor: '_successBorder',\n        backgroundColor: { default: '_successSoft', [HOVER]: '_successSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        borderColor: '_warningBorder',\n        backgroundColor: { default: '_warningSoft', [HOVER]: '_warningSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'surface', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        borderColor: '_dangerBorder',\n        backgroundColor: { default: '_dangerSoft', [HOVER]: '_dangerSoftHover' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'neutral' },\n      root: {\n        color: '_text',\n        borderColor: '_border',\n        backgroundColor: { default: 'transparent', [HOVER]: '_fillHover' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        borderColor: '_accentBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_accentSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'info' },\n      root: {\n        color: '_infoText',\n        borderColor: '_infoBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_infoSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'success' },\n      root: {\n        color: '_successText',\n        borderColor: '_successBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_successSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        borderColor: '_warningBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_warningSoft' },\n      },\n    },\n    {\n      when: { variant: 'outline', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        borderColor: '_dangerBorder',\n        backgroundColor: { default: 'transparent', [HOVER]: '_dangerSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'neutral' },\n      root: { color: '_text', backgroundColor: { default: 'transparent', [HOVER]: '_fillHover' } },\n    },\n    {\n      when: { variant: 'ghost', tone: 'accent' },\n      root: {\n        color: '_accentText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_accentSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'info' },\n      root: {\n        color: '_infoText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_infoSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'success' },\n      root: {\n        color: '_successText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_successSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'warning' },\n      root: {\n        color: '_warningText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_warningSoft' },\n      },\n    },\n    {\n      when: { variant: 'ghost', tone: 'danger' },\n      root: {\n        color: '_dangerText',\n        backgroundColor: { default: 'transparent', [HOVER]: '_dangerSoft' },\n      },\n    },\n    { when: { variant: 'link', tone: 'neutral' }, root: { color: '_text' } },\n    { when: { variant: 'link', tone: 'accent' }, root: { color: '_accentText' } },\n    { when: { variant: 'link', tone: 'info' }, root: { color: '_infoText' } },\n    { when: { variant: 'link', tone: 'success' }, root: { color: '_successText' } },\n    { when: { variant: 'link', tone: 'warning' }, root: { color: '_warningText' } },\n    { when: { variant: 'link', tone: 'danger' }, root: { color: '_dangerText' } },\n  ],\n});\n\n/** 按钮的部件（createUi / Provider 的 styles.Button 按它定制） */\nexport type ButtonPart = (typeof buttonRecipe.parts)[number];\n\n/** 按钮根元素的部件标记：`data-scope=\"button\" data-part=\"root\"` */\nexport const buttonPart = partAttrs(buttonRecipe, 'root');\n\n/** ButtonGroup 交给组里按钮的状态：统一的外观（相连的方向经 AttachedContext 给出） */\nexport interface ButtonGroupState {\n  /** 组上写的外观，组里的按钮没写的项用它 */\n  readonly appearance: Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>;\n}\n\n/** 按钮组的上下文：组里的按钮家族据此相连、共用外观 */\nexport const ButtonGroupContext = createContext<ButtonGroupState>('ButtonGroup');\n\n/** 合并后的外观：每一项都有值（size 不写时继承字号）；在 ButtonGroup、ControlGroup 里时带上相连的方向 */\nexport type ButtonAppearance = Required<Pick<ButtonOptions, 'variant' | 'tone' | 'radius'>> &\n  Pick<ButtonOptions, 'size'> & {\n    attached?: keyof AttachedOrientations;\n    /** 按钮的配方，带上 createUi / Provider 里 styles.Button 的定制 */\n    recipe: ReturnType<typeof useRecipe<ButtonPart, unknown>>;\n  };\n\n/**\n * 按钮的外观：显式写的 prop > 所在 ButtonGroup 写的 > createUi / Provider 的 defaults.Button > 组件自己的默认样式。\n * 在 setup 里调用，返回的函数在渲染时调用（读到最新的 prop 与配置）\n */\nexport function useButtonAppearance(\n  read: () => Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>,\n  fallbackVariant: keyof ButtonVariants,\n  fallbackTone: StatusTone = 'accent',\n): () => ButtonAppearance {\n  const group = ButtonGroupContext.inject(null);\n  const attachedGroup = AttachedContext.inject(null);\n  const recipe = useRecipe(buttonRecipe);\n  return useDefaults(\n    'Button',\n    () => {\n      const { variant, tone, size, radius } = read();\n      const shared = group?.appearance;\n      return {\n        variant: variant ?? shared?.variant,\n        tone: tone ?? shared?.tone,\n        size: size ?? shared?.size,\n        radius: radius ?? shared?.radius,\n        attached: attachedGroup?.orientation,\n        recipe,\n      };\n    },\n    // 组里的按钮外观要一致：不论有没有文字都按 Button 的默认色调（拆分按钮的两半同色）\n    { variant: fallbackVariant, tone: group ? 'accent' : fallbackTone, radius: 'md' },\n  );\n}\n\n/** 外观（已合并默认值）与状态 → 按钮根元素的样式 */\nexport function buttonSx(\n  { variant, tone, size, radius, attached, recipe }: ButtonAppearance,\n  state: { disabled: boolean; square?: boolean; fullWidth?: boolean },\n): SxStyles {\n  return [\n    buttonBaseStyles.root,\n    interactionTransitions.colors,\n    buttonStyles.root,\n    focusRingStyles.visible,\n    rippleHostStyles.host,\n    recipe({ variant, tone }).root.sx,\n    radiusStyles[radius],\n    attached && attachedStyles[attached],\n    size && fontSizeStyles[size],\n    state.square && buttonStyles.square,\n    state.fullWidth && buttonStyles.fullWidth,\n    state.disabled && buttonStyles.disabled,\n  ] as SxStyles;\n}\n\n/** 按钮内容：图标、文字、加载指示；加载中内容透明但保留宽度与无障碍名称 */\nexport function buttonContent(\n  {\n    icon,\n    iconEnd,\n    children,\n    propsContent,\n    propsIcon,\n    propsIconEnd,\n  }: Omit<ButtonContentOptions, 'fullWidth'>,\n  { loading, propsSpinner }: Pick<ButtonOptions, 'loading' | 'propsSpinner'>,\n): VNodeChild {\n  return [\n    h(\n      'span',\n      mergeAttrs<'span'>({ sx: buttonStyles.content }, propsContent, {\n        sx: loading && buttonStyles.hidden,\n      }),\n      [\n        icon && h(Icon, mergeProps<IconProps>({ icon }, propsIcon) as IconProps),\n        children,\n        iconEnd && h(Icon, mergeProps<IconProps>({ icon: iconEnd }, propsIconEnd) as IconProps),\n      ],\n    ),\n    loading &&\n      h(\n        Spinner,\n        mergeProps<SpinnerProps>({ sx: buttonStyles.spinner }, propsSpinner) as SpinnerProps,\n      ),\n  ];\n}\n\n/** useButtonBehavior 每次渲染读取的状态 */\nexport interface ButtonBehaviorState {\n  /** 不可用 */\n  disabled: boolean;\n  /** 加载中：点击无效，焦点保留 */\n  loading: boolean;\n  /** 不可用时仍可聚焦：用 aria-disabled 代替原生 disabled。链接没有原生 disabled，总是写 true */\n  focusableWhenDisabled?: boolean;\n  /** 波纹；不写时沿用配置 */\n  ripple?: boolean;\n}\n\n/** useButtonBehavior 给出的受管属性：展开到 mergeProps 的受管层 */\nexport interface ButtonBehaviorProps<E extends MouseEvent = MouseEvent> extends RippleHandlers {\n  /** 原生 disabled（不可聚焦的不可用） */\n  disabled?: boolean;\n  /** 可聚焦的不可用 */\n  'aria-disabled'?: true;\n  /** 加载中 */\n  'aria-busy'?: true;\n  /** 加载中、可聚焦的不可用时拦下点击，否则交给使用方的 onClick */\n  onClick: (event: E) => void;\n  /** 状态写成 data 属性，样式与测试据此选择 */\n  'data-loading'?: true;\n  /** 不可用（两种方式都有） */\n  'data-disabled'?: true;\n}\n\n/**\n * 按钮家族的行为：不可用（原生 disabled 或可聚焦的 aria-disabled）、加载中、拦截点击、波纹、状态 data 属性。\n * 被拦下的点击会 preventDefault：不触发使用方的 onClick，也不提交表单、不跟随链接。\n *\n *   const behavior = useButtonBehavior(() => ({ disabled, loading, focusableWhenDisabled, ripple }), () => onClick);\n *   mergeAttrs<'button'>(默认, rest, behavior())\n */\nexport function useButtonBehavior<E extends MouseEvent>(\n  read: () => ButtonBehaviorState,\n  onClick: () => ((event: E) => void) | undefined,\n): () => ButtonBehaviorProps<E> {\n  const ripple = useRipple(() => read().ripple);\n  function click(event: E) {\n    const { disabled, loading, focusableWhenDisabled = false } = read();\n    if (loading || (disabled && focusableWhenDisabled)) {\n      event.preventDefault();\n      return;\n    }\n    onClick()?.(event);\n  }\n  return () => {\n    const { disabled, loading, focusableWhenDisabled = false } = read();\n    const soft = disabled && focusableWhenDisabled;\n    return {\n      disabled: (disabled && !focusableWhenDisabled) || undefined,\n      'aria-disabled': soft || undefined,\n      'aria-busy': loading || undefined,\n      onClick: click,\n      ...ripple,\n      'data-loading': loading || undefined,\n      'data-disabled': disabled || undefined,\n    };\n  };\n}\n"],"mappings":"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"}

package/dist/charts/AreaChart.d.ts

@@ -0,0 +1,18 @@
+import { type LineCurves } from './LineChart';
+import { type XYChartProps } from './XYChart';
+/** 未声明的属性落到外层 div（role="figure"）上 */
+export interface AreaChartProps<T extends object> extends XYChartProps<T> {
+    /** 堆叠：true 各系列依次叠起，'percent' 按占比叠满 100%（数值轴是百分比）；默认重叠、半透明 */
+    stacked?: boolean | 'percent';
+    /**
+     * 曲线的形状
+     * @default 'monotone'
+     */
+    curve?: keyof LineCurves;
+    /**
+     * 面积的不透明度（0–1）；默认重叠时 0.25、堆叠时 0.8
+     */
+    opacity?: number;
+}
+/** 面积图 */
+export declare const AreaChart: <T extends object>(props: AreaChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/charts/AreaChart.js

@@ -0,0 +1,90 @@
+import { XYChart } from "./XYChart.js";
+import { CURVES } from "./LineChart.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Area } from "@unovis/ts";
+//#region src/charts/AreaChart.tsx
+/**
+* 面积图：每个系列一片面积，上沿描一条线；默认各系列重叠、半透明（看得出谁高谁低），stacked 时依次叠起（看总量与构成），
+* stacked="percent" 时按占比叠满 100%（只看构成的变化）。
+*
+*   <AreaChart data={months} index="month" series={[{ key: 'visits', label: '访问量' }]} />
+*   <AreaChart stacked data={months} index="month" series={channels} unit="万次" />
+*   <AreaChart stacked="percent" data={months} index="month" series={channels} />
+*
+* 坐标轴、十字线（带圆点）与提示框、图例、单位、加载与空状态、给读屏的数据表同 LineChart（见 XYChart）。
+*/
+/** 未声明的属性落到外层 div（role="figure"）上 */
+/** 面积图 */
+var AreaChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const stacked = readonlyProp(_props, "stacked", false);
+	const curve = readonlyProp(_props, "curve", "monotone");
+	const opacity = readonlyProp(_props, "opacity");
+	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
+	const rest = restProps(_props, _ctx, true);
+	const kind = computed(() => ({
+		crosshairDots: true,
+		stacked: stacked.value !== false,
+		percent: stacked.value === "percent",
+		padding: {
+			left: 12,
+			right: 12,
+			top: 8
+		},
+		components: ({ series, x, y, instance }) => {
+			const common = {
+				x,
+				curveType: CURVES[curve.value],
+				line: true,
+				lineWidth: 2
+			};
+			if (stacked.value) {
+				const area = instance("stacked", () => new Area({
+					x,
+					y: []
+				}));
+				area.setConfig({
+					...common,
+					y: series.map(y),
+					color: (_rows, position) => series[position]?.color,
+					lineColor: (_rows, position) => series[position]?.color,
+					opacity: opacity.value ?? .8
+				});
+				return [area];
+			}
+			return series.map((item) => {
+				const area = instance(`area:${item.key}`, () => new Area({
+					x,
+					y: () => 0
+				}));
+				area.setConfig({
+					...common,
+					y: y(item),
+					color: item.color,
+					lineColor: item.color,
+					opacity: opacity.value ?? .25
+				});
+				return area;
+			});
+		}
+	}));
+	return () => createVNode(XYChart, mergeProps(rest, {
+		"_hiddenSeries": hiddenSeries.value,
+		"onUpdate:_hiddenSeries": _cache[0] || (_cache[0] = ($event) => hiddenSeries.value = $event),
+		"kind": kind.value
+	}), null);
+}, {
+	name: "AreaChart",
+	props: [
+		"stacked",
+		"curve",
+		"opacity",
+		"_hiddenSeries",
+		"onUpdate:_hiddenSeries"
+	]
+});
+//#endregion
+export { AreaChart };
+
+//# sourceMappingURL=AreaChart.js.map

package/dist/charts/AreaChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/AreaChart.tsx"],"sourcesContent":["/**\n * 面积图：每个系列一片面积，上沿描一条线；默认各系列重叠、半透明（看得出谁高谁低），stacked 时依次叠起（看总量与构成），\n * stacked=\"percent\" 时按占比叠满 100%（只看构成的变化）。\n *\n *   <AreaChart data={months} index=\"month\" series={[{ key: 'visits', label: '访问量' }]} />\n *   <AreaChart stacked data={months} index=\"month\" series={channels} unit=\"万次\" />\n *   <AreaChart stacked=\"percent\" data={months} index=\"month\" series={channels} />\n *\n * 坐标轴、十字线（带圆点）与提示框、图例、单位、加载与空状态、给读屏的数据表同 LineChart（见 XYChart）。\n */\nimport { Area } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { CURVES, type LineCurves } from './LineChart';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上 */\nexport interface AreaChartProps<T extends object> extends XYChartProps<T> {\n  /** 堆叠：true 各系列依次叠起，'percent' 按占比叠满 100%（数值轴是百分比）；默认重叠、半透明 */\n  stacked?: boolean | 'percent';\n  /**\n   * 曲线的形状\n   * @default 'monotone'\n   */\n  curve?: keyof LineCurves;\n  /**\n   * 面积的不透明度（0–1）；默认重叠时 0.25、堆叠时 0.8\n   */\n  opacity?: number;\n}\n\n/** 面积图 */\nexport const AreaChart = _component(\n  <T extends object>({\n    stacked = false,\n    curve = 'monotone',\n    opacity,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: AreaChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      crosshairDots: true,\n      stacked: stacked !== false,\n      percent: stacked === 'percent',\n      padding: { left: 12, right: 12, top: 8 },\n      components: ({ series, x, y, instance }) => {\n        const common = {\n          x,\n          curveType: CURVES[curve],\n          line: true,\n          lineWidth: 2,\n        };\n        if (stacked) {\n          const area = instance('stacked', () => new Area<T>({ x, y: [] }));\n          area.setConfig({\n            ...common,\n            y: series.map(y),\n            color: (_rows: T[], position: number) => series[position]?.color,\n            lineColor: (_rows: T[], position: number) => series[position]?.color,\n            opacity: opacity ?? 0.8,\n          });\n          return [area];\n        }\n        // 重叠：每个系列一个 Area（Unovis 的多个 y 总是堆叠的）\n        return series.map((item) => {\n          const area = instance(`area:${item.key}`, () => new Area<T>({ x, y: () => 0 }));\n          area.setConfig({\n            ...common,\n            y: y(item),\n            color: item.color,\n            lineColor: item.color,\n            opacity: opacity ?? 0.25,\n          });\n          return area;\n        });\n      },\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,IAAa,YAAY,0BACvB,QAAA,SAMyB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WALb,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SACP,UAAU;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,eAAAC,SAAA,QAAA,uBAEgC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,eAAe;EACf,SAAS,QAAA,UAAY;EACrB,SAAS,QAAA,UAAY;EACrB,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;EAAE;EACvC,aAAa,EAAE,QAAQ,GAAG,GAAG,eAAe;GAC1C,MAAM,SAAS;IACb;IACA,WAAW,OAAM,MAAA;IACjB,MAAM;IACN,WAAW;GACb;GACA,IAAA,QAAA,OAAa;IACX,MAAM,OAAO,SAAS,iBAAiB,IAAI,KAAQ;KAAE;KAAG,GAAG,CAAA;IAAG,CAAC,CAAC;IAChE,KAAK,UAAU;KACb,GAAG;KACH,GAAG,OAAO,IAAI,CAAC;KACf,QAAQ,OAAY,aAAqB,OAAO,SAAS,EAAE;KAC3D,YAAY,OAAY,aAAqB,OAAO,SAAS,EAAE;KAC/D,SAAS,QAAA,SAAW;IACtB,CAAC;IACD,OAAO,CAAC,IAAI;GACd;GAEA,OAAO,OAAO,KAAK,SAAS;IAC1B,MAAM,OAAO,SAAS,QAAQ,KAAK,aAAa,IAAI,KAAQ;KAAE;KAAG,SAAS;IAAE,CAAC,CAAC;IAC9E,KAAK,UAAU;KACb,GAAG;KACH,GAAG,EAAE,IAAI;KACT,OAAO,KAAK;KACZ,WAAW,KAAK;KAChB,SAAS,QAAA,SAAW;IACtB,CAAC;IACD,OAAO;GACT,CAAC;EACH;CACF,EAAC;CACD,aAAOC,YAAA,SAAAC,WAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/BarChart.d.ts

@@ -0,0 +1,19 @@
+import { type XYChartProps } from './XYChart';
+/** 柱子的方向 */
+export interface BarChartOrientations {
+    /** 竖向的柱子（默认） */
+    vertical: unknown;
+    /** 横向的条：类目名较长、类目较多时 */
+    horizontal: unknown;
+}
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+export interface BarChartProps<T extends object> extends XYChartProps<T> {
+    /** 堆叠：true 同一类目的系列叠成一根柱子，'percent' 按占比叠满 100%（数值轴是百分比）；默认并排 */
+    stacked?: boolean | 'percent';
+    /** 方向，默认 vertical */
+    orientation?: keyof BarChartOrientations;
+    /** 柱子末端的圆角（px），默认 4 */
+    radius?: number;
+}
+/** 柱状图：分组或堆叠，竖向或横向 */
+export declare const BarChart: <T extends object>(props: BarChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/charts/BarChart.js

@@ -0,0 +1,88 @@
+import { XYChart } from "./XYChart.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { GroupedBar, StackedBar } from "@unovis/ts";
+//#region src/charts/BarChart.tsx
+/**
+* 柱状图：每个类目一组柱子，系列并排（分组）或叠成一根（堆叠），可以横向；stacked="percent" 时每根叠满 100%（看构成）。
+*
+*   <BarChart
+*     aria-label="各项目销售额"
+*     data={projects}
+*     index="name"
+*     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}
+*     unit="万元"
+*   />
+*
+* 颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart；悬停一个类目时提示框列出这一组的全部系列。
+*/
+/** 柱子的方向 */
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+/** 柱状图：分组或堆叠，竖向或横向 */
+var BarChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const stacked = readonlyProp(_props, "stacked", false);
+	const orientation = readonlyProp(_props, "orientation", "vertical");
+	const radius = readonlyProp(_props, "radius", 4);
+	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
+	const rest = restProps(_props, _ctx, true);
+	const kind = computed(() => ({
+		horizontal: orientation.value === "horizontal",
+		skeleton: "bars",
+		stacked: stacked.value !== false,
+		percent: stacked.value === "percent",
+		itemSelector: stacked.value ? StackedBar.selectors.bar : GroupedBar.selectors.bar,
+		components: ({ series, x, y, instance, events }) => {
+			const common = {
+				x,
+				y: series.map(y),
+				color: (_row, position) => series[position]?.color,
+				roundedCorners: radius.value,
+				orientation: orientation.value,
+				events
+			};
+			if (stacked.value) {
+				const bars = instance("stacked", () => new StackedBar({
+					x,
+					y: []
+				}));
+				bars.setConfig({
+					...common,
+					barPadding: .4,
+					barMaxWidth: 48
+				});
+				return [bars];
+			}
+			const bars = instance("grouped", () => new GroupedBar({
+				x,
+				y: []
+			}));
+			bars.setConfig({
+				...common,
+				groupPadding: .3,
+				barPadding: .1,
+				groupMaxWidth: 96,
+				barMinHeight: 0
+			});
+			return [bars];
+		}
+	}));
+	return () => createVNode(XYChart, mergeProps(rest, {
+		"_hiddenSeries": hiddenSeries.value,
+		"onUpdate:_hiddenSeries": _cache[0] || (_cache[0] = ($event) => hiddenSeries.value = $event),
+		"kind": kind.value
+	}), null);
+}, {
+	name: "BarChart",
+	props: [
+		"stacked",
+		"orientation",
+		"radius",
+		"_hiddenSeries",
+		"onUpdate:_hiddenSeries"
+	]
+});
+//#endregion
+export { BarChart };
+
+//# sourceMappingURL=BarChart.js.map

package/dist/charts/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/BarChart.tsx"],"sourcesContent":["/**\n * 柱状图：每个类目一组柱子，系列并排（分组）或叠成一根（堆叠），可以横向；stacked=\"percent\" 时每根叠满 100%（看构成）。\n *\n *   <BarChart\n *     aria-label=\"各项目销售额\"\n *     data={projects}\n *     index=\"name\"\n *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}\n *     unit=\"万元\"\n *   />\n *\n * 颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart；悬停一个类目时提示框列出这一组的全部系列。\n */\nimport { GroupedBar, StackedBar } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 柱子的方向 */\nexport interface BarChartOrientations {\n  /** 竖向的柱子（默认） */\n  vertical: unknown;\n  /** 横向的条：类目名较长、类目较多时 */\n  horizontal: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface BarChartProps<T extends object> extends XYChartProps<T> {\n  /** 堆叠：true 同一类目的系列叠成一根柱子，'percent' 按占比叠满 100%（数值轴是百分比）；默认并排 */\n  stacked?: boolean | 'percent';\n  /** 方向，默认 vertical */\n  orientation?: keyof BarChartOrientations;\n  /** 柱子末端的圆角（px），默认 4 */\n  radius?: number;\n}\n\n/** 柱状图：分组或堆叠，竖向或横向 */\nexport const BarChart = _component(\n  <T extends object>({\n    stacked = false,\n    orientation = 'vertical',\n    radius = 4,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: BarChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      horizontal: orientation === 'horizontal',\n      skeleton: 'bars',\n      stacked: stacked !== false,\n      percent: stacked === 'percent',\n      itemSelector: stacked ? StackedBar.selectors.bar : GroupedBar.selectors.bar,\n      components: ({ series, x, y, instance, events }) => {\n        const common = {\n          x,\n          y: series.map(y),\n          color: (_row: T, position: number) => series[position]?.color,\n          roundedCorners: radius,\n          orientation,\n          events,\n        };\n        if (stacked) {\n          const bars = instance('stacked', () => new StackedBar<T>({ x, y: [] }));\n          bars.setConfig({ ...common, barPadding: 0.4, barMaxWidth: 48 });\n          return [bars];\n        }\n        const bars = instance('grouped', () => new GroupedBar<T>({ x, y: [] }));\n        // 空值不画柱子（Unovis 默认给 2px 的最小高度，空值也会画出一条线）\n        bars.setConfig({\n          ...common,\n          groupPadding: 0.3,\n          barPadding: 0.1,\n          groupMaxWidth: 96,\n          barMinHeight: 0,\n        });\n        return [bars];\n      },\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,WAAW,0BACtB,QAAA,SAMwB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WALZ,KAAK;CAAA,MAAA,cAAAA,aAAA,QAAA,eACD,UAAU;CAAA,MAAA,SAAAA,aAAA,QAAA,UACf,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBACwC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,YAAY,YAAA,UAAgB;EAC5B,UAAU;EACV,SAAS,QAAA,UAAY;EACrB,SAAS,QAAA,UAAY;EACrB,cAAc,QAAA,QAAU,WAAW,UAAU,MAAM,WAAW,UAAU;EACxE,aAAa,EAAE,QAAQ,GAAG,GAAG,UAAU,aAAa;GAClD,MAAM,SAAS;IACb;IACA,GAAG,OAAO,IAAI,CAAC;IACf,QAAQ,MAAS,aAAqB,OAAO,SAAS,EAAE;IACxD,gBAAc,OAAA;IACd,aAAW,YAAA;IACX;GACF;GACA,IAAA,QAAA,OAAa;IACX,MAAM,OAAO,SAAS,iBAAiB,IAAI,WAAc;KAAE;KAAG,GAAG,CAAA;IAAG,CAAC,CAAC;IACtE,KAAK,UAAU;KAAE,GAAG;KAAQ,YAAY;KAAK,aAAa;IAAG,CAAC;IAC9D,OAAO,CAAC,IAAI;GACd;GACA,MAAM,OAAO,SAAS,iBAAiB,IAAI,WAAc;IAAE;IAAG,GAAG,CAAA;GAAG,CAAC,CAAC;GAEtE,KAAK,UAAU;IACb,GAAG;IACH,cAAc;IACd,YAAY;IACZ,eAAe;IACf,cAAc;GAChB,CAAC;GACD,OAAO,CAAC,IAAI;EACd;CACF,EAAC;CACD,aAAOC,YAAA,SAAAC,WAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/ChordChart.d.ts

@@ -0,0 +1,48 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type NumericFormat } from '../config/lang/format';
+import type { PartProps } from '../utils/props';
+import { type FlowLink, type FlowNode } from './flow';
+import { type ChartFrameParts } from './frame';
+/** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
+export interface ChordChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 节点 */
+    nodes: readonly FlowNode[];
+    /** 流向 */
+    links: readonly FlowLink[];
+    /** 数值的格式（可缩放，如以万元为单位）：提示框、数据表共用 */
+    valueFormat?: NumericFormat;
+    /** 单位：显示在左上方，数值后面带上 */
+    unit?: string;
+    /**
+     * 绘图区的高度；数字按 px
+     * @default 320
+     */
+    height?: number | string;
+    /**
+     * 图例：点一下隐藏节点；关掉时节点名写在弧的外侧
+     * @default true
+     */
+    legend?: boolean;
+    /**
+     * 悬停时的提示框
+     * @default true
+     */
+    tooltip?: boolean;
+    /**
+     * 加载中：绘图区显示一个圆形的骨架，带 aria-busy
+     * @default false
+     */
+    loading?: boolean;
+    /** 隐藏的节点（存 id）：点图例时写回，父级可以写 _hiddenNodes={ids} */
+    _hiddenNodes?: string[];
+    /** 没有数据时显示的内容，默认是“暂无数据” */
+    empty?: VNodeChild;
+}
+/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */
+export declare const chordChartStyles: Readonly<{
+    root: css.CompiledStyles;
+    skeleton: css.CompiledStyles;
+}>;
+/** 弦图 */
+export declare const ChordChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ChordChartProps>;

package/dist/charts/ChordChart.js

@@ -0,0 +1,149 @@
+import { colors, fontSizes } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useFormat } from "../config/lang/format.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
+import { flowData, resolveFlowNodes } from "./flow.js";
+import { useSingleChart } from "./single.js";
+import { computed, createVNode, mergeProps, shallowRef } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChordDiagram, ChordLabelAlignment } from "@unovis/ts";
+//#region src/charts/ChordChart.tsx
+/**
+* 弦图：节点排成一圈，两两之间的流量画成弦，看几方之间相互往来的多少（部门协作、地区间人口流动、贸易往来）。
+*
+*   <ChordChart aria-label="部门协作" nodes={departments} links={collaborations} />
+*
+* 数据同 SankeyChart（节点 { id, label?, color? }，流向 { source, target, value }）；弦取起点节点的颜色。
+* 悬停一段弧出这个节点的总量，悬停一根弦出“起点 → 终点”的流量；点图例隐藏一个节点，连同它的弦。
+* 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。
+*/
+/** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
+/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */
+var chordChartStyles = css.create({
+	root: {
+		"--vis-chord-diagram-link-opacity": "0.45",
+		"--vis-chord-diagram-link-stroke-color": colors.surface,
+		"--vis-chord-diagram-link-stroke-opacity": "0.6",
+		"--vis-chord-diagram-link-highlighted-opacity": "0.85",
+		"--vis-chord-diagram-link-dimmed-opacity": "0.12",
+		"--vis-chord-diagram-node-dimmed-opacity": "0.3",
+		"--vis-chord-diagram-label-text-font-size": fontSizes.xs
+	},
+	skeleton: {
+		display: "block",
+		height: "100%",
+		aspectRatio: "1",
+		marginInline: "auto",
+		borderRadius: "50%"
+	}
+});
+/** 交给 Unovis 的节点、流向 */
+/** 弦图 */
+var ChordChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const nodes = readonlyProp(_props, "nodes");
+	const links = readonlyProp(_props, "links");
+	const valueFormat = readonlyProp(_props, "valueFormat");
+	const unit = readonlyProp(_props, "unit");
+	const height = readonlyProp(_props, "height", 320);
+	const legend = readonlyProp(_props, "legend", true);
+	const tooltip = readonlyProp(_props, "tooltip", true);
+	const loading = readonlyProp(_props, "loading", false);
+	const hiddenNodes = bindable(_props, "_hiddenNodes", () => [], _ctx.emit);
+	const empty = readonlyProp(_props, "empty");
+	const sx = readonlyProp(_props, "sx");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const resolved = computed(() => resolveFlowNodes(nodes.value));
+	const visible = computed(() => new Map([...resolved.value].filter(([id]) => !hiddenNodes.value.includes(id))));
+	const valueText = useChartValueText(() => ({
+		valueFormat: valueFormat.value,
+		unit: unit.value
+	}));
+	const labelOf = (id) => resolved.value.get(id)?.label ?? id;
+	function toggle(id) {
+		hiddenNodes.value = hiddenNodes.value.includes(id) ? hiddenNodes.value.filter((item) => item !== id) : [...hiddenNodes.value, id];
+	}
+	let plot = shallowRef(null);
+	const chart = useSingleChart(() => ({
+		element: plot.value,
+		ready: !loading.value && nodes.value.length > 0,
+		tooltip: tooltip.value,
+		build: (instance) => {
+			const chord = instance("chord", () => new ChordDiagram({ linkValue: (link) => link.amount }));
+			chord.setConfig({
+				linkValue: (link) => link.amount,
+				nodeColor: (node) => node.color,
+				linkColor: (link) => link.source.color,
+				nodeLabel: (node) => legend.value ? "" : node.label,
+				padAngle: .04,
+				nodeWidth: 14,
+				nodeLabelAlignment: ChordLabelAlignment.Perpendicular,
+				nodeLabelColor: () => colors.textMuted
+			});
+			return {
+				component: chord,
+				data: flowData(visible.value, links.value),
+				triggers: {
+					[ChordDiagram.selectors.node]: (node) => chart.tooltip(chartTooltip(node.data.label, [{
+						label: lang.chartTotal,
+						color: node.data.color,
+						value: valueText(node._state.value)
+					}])),
+					[ChordDiagram.selectors.link]: (ribbon) => chart.tooltip(chartTooltip(lang.chartFlowLabel(ribbon.data.source.label, ribbon.data.target.label), [{
+						label: lang.chartValue,
+						color: ribbon.data.source.color,
+						value: valueText(ribbon.data.value)
+					}]))
+				}
+			};
+		}
+	}));
+	return () => createVNode(ChartFrame, mergeProps(rest, {
+		"sx": [chordChartStyles.root, sx.value],
+		"unit": unit.value,
+		"height": height.value,
+		"legend": legend.value ? [...resolved.value.values()].map((node) => ({
+			key: node.id,
+			label: node.label,
+			color: node.color
+		})) : [],
+		"hiddenKeys": hiddenNodes.value,
+		"onLegendToggle": toggle,
+		"loading": loading.value,
+		"skeleton": createVNode(Skeleton, { "sx": chordChartStyles.skeleton }, null),
+		"isEmpty": nodes.value.length === 0,
+		"empty": empty.value,
+		"table": {
+			columns: [lang.chartFlow, unit.value ? `${lang.chartValue}（${unit.value}）` : lang.chartValue],
+			rows: links.value.filter((link) => visible.value.has(link.source) && visible.value.has(link.target)).map((link) => ({
+				header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),
+				cells: [format.number(link.value, valueFormat.value)]
+			}))
+		},
+		"plotRef": _cache[0] || (_cache[0] = (element) => plot.value = element)
+	}), null);
+}, {
+	name: "ChordChart",
+	props: [
+		"nodes",
+		"links",
+		"valueFormat",
+		"unit",
+		"height",
+		"legend",
+		"tooltip",
+		"loading",
+		"_hiddenNodes",
+		"onUpdate:_hiddenNodes",
+		"empty",
+		"sx"
+	]
+});
+//#endregion
+export { ChordChart, chordChartStyles };
+
+//# sourceMappingURL=ChordChart.js.map

package/dist/charts/ChordChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChordChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/ChordChart.tsx"],"sourcesContent":["/**\n * 弦图：节点排成一圈，两两之间的流量画成弦，看几方之间相互往来的多少（部门协作、地区间人口流动、贸易往来）。\n *\n *   <ChordChart aria-label=\"部门协作\" nodes={departments} links={collaborations} />\n *\n * 数据同 SankeyChart（节点 { id, label?, color? }，流向 { source, target, value }）；弦取起点节点的颜色。\n * 悬停一段弧出这个节点的总量，悬停一根弦出“起点 → 终点”的流量；点图例隐藏一个节点，连同它的弦。\n * 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。\n */\nimport { ChordDiagram, ChordLabelAlignment } from '@unovis/ts';\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 { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { colors, fontSizes } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport type { NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { flowData, resolveFlowNodes, type FlowLink, type FlowNode } from './flow';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { useSingleChart, type SingleChart } from './single';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface ChordChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly FlowNode[];\n  /** 流向 */\n  links: readonly FlowLink[];\n  /** 数值的格式（可缩放，如以万元为单位）：提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 320\n   */\n  height?: number | string;\n  /**\n   * 图例：点一下隐藏节点；关掉时节点名写在弧的外侧\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示一个圆形的骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 隐藏的节点（存 id）：点图例时写回，父级可以写 _hiddenNodes={ids} */\n  _hiddenNodes?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */\nexport const chordChartStyles = css.create({\n  root: {\n    '--vis-chord-diagram-link-opacity': '0.45',\n    '--vis-chord-diagram-link-stroke-color': colors.surface,\n    '--vis-chord-diagram-link-stroke-opacity': '0.6',\n    '--vis-chord-diagram-link-highlighted-opacity': '0.85',\n    '--vis-chord-diagram-link-dimmed-opacity': '0.12',\n    '--vis-chord-diagram-node-dimmed-opacity': '0.3',\n    '--vis-chord-diagram-label-text-font-size': fontSizes.xs,\n  },\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 交给 Unovis 的节点、流向 */\ntype Data = ReturnType<typeof flowData>;\ntype Node = Data['nodes'][number];\ntype Link = Data['links'][number];\n\n/** 弦图 */\nexport const ChordChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    _hiddenNodes: hiddenNodes = _bindable<string[]>([]),\n    empty,\n    sx,\n    ...rest\n  }: ChordChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const visible = _derived(new Map([...resolved].filter(([id]) => !hiddenNodes.includes(id))));\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const labelOf = (id: string) => resolved.get(id)?.label ?? id;\n\n    function toggle(id: string) {\n      hiddenNodes = hiddenNodes.includes(id)\n        ? hiddenNodes.filter((item) => item !== id)\n        : [...hiddenNodes, id];\n    }\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<{ nodes: Node[]; links?: Link[] }>(() => ({\n      element: plot,\n      ready: !loading && nodes.length > 0,\n      tooltip,\n      build: (instance) => {\n        const chord = instance(\n          'chord',\n          () => new ChordDiagram<Node, Link>({ linkValue: (link) => link.amount }),\n        );\n        chord.setConfig({\n          linkValue: (link) => link.amount,\n          nodeColor: (node) => (node as Node).color,\n          linkColor: (link) => (link.source as Node).color,\n          // 有图例时不在弧旁写名字：径向排的中文在上下两侧是竖着的，不好读\n          nodeLabel: (node) => (legend ? '' : (node as Node).label),\n          padAngle: 0.04,\n          nodeWidth: 14,\n          nodeLabelAlignment: ChordLabelAlignment.Perpendicular,\n          nodeLabelColor: () => colors.textMuted,\n        });\n        return {\n          component: chord,\n          data: flowData(visible, links),\n          triggers: {\n            [ChordDiagram.selectors.node]: (node: { data: Node; _state: { value?: number } }) =>\n              chart.tooltip(\n                chartTooltip(node.data.label, [\n                  {\n                    label: lang.chartTotal,\n                    color: node.data.color,\n                    value: valueText(node._state.value),\n                  },\n                ]),\n              ),\n            [ChordDiagram.selectors.link]: (ribbon: {\n              data: { source: Node; target: Node; value: NumericValue };\n            }) =>\n              chart.tooltip(\n                chartTooltip(\n                  lang.chartFlowLabel(ribbon.data.source.label, ribbon.data.target.label),\n                  [\n                    {\n                      label: lang.chartValue,\n                      color: ribbon.data.source.color,\n                      value: valueText(ribbon.data.value),\n                    },\n                  ],\n                ),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[chordChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? [...resolved.values()].map((node) => ({\n                key: node.id,\n                label: node.label,\n                color: node.color,\n              }))\n            : []\n        }\n        hiddenKeys={hiddenNodes}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={chordChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links\n            .filter((link) => visible.has(link.source) && visible.has(link.target))\n            .map((link) => ({\n              header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n              cells: [format.number(link.value, valueFormat)],\n            })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/ComboChart.d.ts

@@ -0,0 +1,30 @@
+import type { NumericFormat } from '../config/lang/format';
+import { type LineCurves, type LineDots } from './LineChart';
+import type { ChartSeries } from './series';
+import { type XYChartProps } from './XYChart';
+/** 组合图的一个系列 */
+export interface ComboSeries<T> extends ChartSeries<T> {
+    /** 画法：bar 柱（默认）、line 线 */
+    type?: 'bar' | 'line';
+    /** 数值轴：primary 左侧的主轴（默认），secondary 右侧的第二数值轴（单位不同的量） */
+    axis?: 'primary' | 'secondary';
+}
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+export interface ComboChartProps<T extends object> extends Omit<XYChartProps<T>, 'series'> {
+    /** 系列：柱或线，画在主轴或第二数值轴上 */
+    series: readonly ComboSeries<T>[];
+    /** 第二数值轴的格式（比率写 `{ style: 'percent' }`） */
+    secondaryFormat?: NumericFormat;
+    /** 第二数值轴的单位：显示在右上方 */
+    secondaryUnit?: string;
+    /** 柱子堆叠：同一类目的柱叠成一根；默认并排 */
+    stacked?: boolean;
+    /** 线的形状，默认 linear */
+    curve?: keyof LineCurves;
+    /** 线上的数据点，默认 filled */
+    dots?: keyof LineDots;
+    /** 柱子末端的圆角（px），默认 4 */
+    radius?: number;
+}
+/** 组合图：柱 + 线，可以有第二数值轴 */
+export declare const ComboChart: <T extends object>(props: ComboChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;