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

package/dist/base/Heading.js

@@ -0,0 +1,122 @@
+import { space, t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles, fontWeightStyles, lineClampStyles, textAlignStyles, textStyles, textWrapStyles, toneStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "./Icon.js";
+import { headingMarker } from "../utils/style/markers.js";
+import { layoutVars } from "../utils/style/vars.js";
+import { createVNode, unref } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Hash } from "@lucide/icons";
+//#region src/base/Heading.tsx
+/**
+* 标题：H1–H6 各是一个组件（语义不同的元素分成不同组件，不靠 prop 切换标签），默认字号各不相同，
+* 样式与逻辑由同一个工厂生成。size 可以单独改：视觉层级与文档结构分开。
+* 紧凑行高、text-wrap: balance（各行长度均衡），大字号略收紧字间距；去掉浏览器默认的外边距，间距交给布局。
+*
+*   <H1>订单详情</H1>
+*   <H2 size="lg">收货地址</H2>
+*   <H2 id="install" anchor>安装</H2>   末尾带指向本节的锚点链接（悬停或聚焦时显示）
+*
+* 级别要连续，不要为了字号跳级（字号用 size 改）。
+*/
+/** 标题组件可用的标签 */
+/** 未声明的属性落到 h1–h6 元素上 */
+/** H1–H6 的样式：root、xxl、xxxl */
+var headingStyles = css.create({
+	root: {
+		margin: 0,
+		fontFamily: "_heading",
+		lineHeight: "_tight",
+		textWrap: "balance",
+		scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`
+	},
+	xxl: { letterSpacing: "_tight" },
+	xxxl: { letterSpacing: "_tighter" },
+	anchor: {
+		display: "inline-flex",
+		verticalAlign: "middle",
+		marginInlineStart: "_xs",
+		borderRadius: "_xs",
+		color: {
+			default: "_textMuted",
+			":hover": "_accentText"
+		},
+		fontSize: "0.75em",
+		textDecoration: "none",
+		opacity: {
+			default: 0,
+			":focus-visible": 1,
+			[css.when.ancestor(":hover", headingMarker)]: 1
+		},
+		transition: `opacity ${t.durations.sm} ${t.easings.standard}`
+	}
+});
+/** 生成标题组件：标签与默认字号（H1–H6 由它生成） */
+function createHeading(tag, defaultSize) {
+	return /*#__PURE__*/ _component((_props, _ctx) => {
+		const size = readonlyProp(_props, "size", () => defaultSize);
+		const weight = readonlyProp(_props, "weight", "semibold");
+		const tone = readonlyProp(_props, "tone");
+		const align = readonlyProp(_props, "align");
+		const truncate = readonlyProp(_props, "truncate", false);
+		const lineClamp = readonlyProp(_props, "lineClamp");
+		const wrap = readonlyProp(_props, "wrap");
+		const anchor = readonlyProp(_props, "anchor", false);
+		const propsAnchor = readonlyProp(_props, "propsAnchor");
+		const children = childrenProp(_props);
+		const rest = restProps(_props, _ctx, false);
+		const lang = useLang();
+		return () => {
+			const Tag = tag;
+			const sx = [
+				headingStyles.root,
+				fontSizeStyles[size.value],
+				(size.value === "xxl" || size.value === "xxxl") && headingStyles[size.value],
+				fontWeightStyles[weight.value],
+				tone.value && toneStyles[tone.value],
+				align.value && textAlignStyles[align.value],
+				truncate.value && textStyles.truncate,
+				lineClamp.value != null && [textStyles.clamp, lineClampStyles.lines(lineClamp.value)],
+				wrap.value && textWrapStyles[wrap.value],
+				anchor.value && headingMarker
+			];
+			const id = rest.id;
+			return createVNode(Tag, mergeAttrs({ sx }, rest), { default: () => [unref(children), anchor.value && id && createVNode("a", mergeAttrs({ sx: [headingStyles.anchor, focusRingStyles.visible] }, propsAnchor.value, {
+				href: `#${id}`,
+				"aria-label": lang.headingAnchor
+			}), [createVNode(Icon, { "icon": Hash }, null)])] });
+		};
+	}, {
+		props: [
+			"size",
+			"weight",
+			"tone",
+			"align",
+			"truncate",
+			"lineClamp",
+			"wrap",
+			"anchor",
+			"propsAnchor"
+		],
+		name: tag.toUpperCase()
+	});
+}
+/** 页面主标题，每页一个；默认字号 xxxl（30px） */
+var H1 = createHeading("h1", "xxxl");
+/** 页面里的一级分区；默认字号 xxl（24px） */
+var H2 = createHeading("h2", "xxl");
+/** 分区里的小节；默认字号 xl（18px） */
+var H3 = createHeading("h3", "xl");
+/** 四级标题；默认字号 lg（16px） */
+var H4 = createHeading("h4", "lg");
+/** 五级标题；默认字号 md（14px） */
+var H5 = createHeading("h5", "md");
+/** 六级标题；默认字号 md（14px） */
+var H6 = createHeading("h6", "md");
+//#endregion
+export { H1, H2, H3, H4, H5, H6, createHeading, headingStyles };
+
+//# sourceMappingURL=Heading.js.map

package/dist/base/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_vue_unref"],"sources":["../../src/base/Heading.tsx"],"sourcesContent":["/**\n * 标题：H1–H6 各是一个组件（语义不同的元素分成不同组件，不靠 prop 切换标签），默认字号各不相同，\n * 样式与逻辑由同一个工厂生成。size 可以单独改：视觉层级与文档结构分开。\n * 紧凑行高、text-wrap: balance（各行长度均衡），大字号略收紧字间距；去掉浏览器默认的外边距，间距交给布局。\n *\n *   <H1>订单详情</H1>\n *   <H2 size=\"lg\">收货地址</H2>\n *   <H2 id=\"install\" anchor>安装</H2>   末尾带指向本节的锚点链接（悬停或聚焦时显示）\n *\n * 级别要连续，不要为了字号跳级（字号用 size 改）。\n */\nimport { Hash } from '@lucide/icons';\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 { mergeAttrs, type PartProps } from '../utils/props';\nimport { space, t } from '../config/theme/tokens';\nimport { headingMarker } from '../utils/style/markers';\nimport { layoutVars } from '../utils/style/vars';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { Icon } from './Icon';\nimport {\n  fontSizeStyles,\n  fontWeightStyles,\n  lineClampStyles,\n  textAlignStyles,\n  textStyles,\n  textWrapStyles,\n  toneStyles,\n  type FontSize,\n  type FontWeight,\n  type TextAlign,\n  type TextWrap,\n  type Tone,\n} from '../utils/style/typography';\n\n/** 标题组件可用的标签 */\nexport type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n/** 未声明的属性落到 h1–h6 元素上 */\nexport interface HeadingProps extends PartProps<HeadingTag> {\n  /** 字号档位，不写时按级别：H1 xxxl、H2 xxl、H3 xl、H4 lg、H5–H6 md */\n  size?: FontSize;\n  /** 字重，默认 semibold */\n  weight?: FontWeight;\n  /** 色调，不写时继承 */\n  tone?: Tone;\n  /** 水平对齐，不写时继承 */\n  align?: TextAlign;\n  /** 单行省略 */\n  truncate?: boolean;\n  /** 最多显示几行，超出的省略（同 Text） */\n  lineClamp?: number;\n  /** 换行方式，默认 balance（各行长度均衡）；同 Text 的 wrap */\n  wrap?: TextWrap;\n  /** 有 id 时在末尾放一个指向本节的锚点链接（#），悬停或聚焦时显示：文档里方便复制本节的链接 */\n  anchor?: boolean;\n  /** 锚点链接的部件属性 */\n  propsAnchor?: PartProps<'a'>;\n  children?: VNodeChild;\n}\n\n/** H1–H6 的样式：root、xxl、xxxl */\nexport const headingStyles = css.create({\n  // 字体取 fonts.heading：默认同正文，纸张主题换成衬线\n  root: {\n    margin: 0,\n    fontFamily: '_heading',\n    lineHeight: '_tight',\n    textWrap: 'balance',\n    // 锚点跳转（#install）后让开粘性顶栏，再留一点空\n    scrollMarginBlockStart: `calc(${layoutVars.stickyOffset} + ${space.lg})`,\n  },\n  // 大字号的字形间距显得松，略收紧\n  xxl: { letterSpacing: '_tight' },\n  xxxl: { letterSpacing: '_tighter' },\n  anchor: {\n    display: 'inline-flex',\n    verticalAlign: 'middle',\n    marginInlineStart: '_xs',\n    borderRadius: '_xs',\n    color: { default: '_textMuted', ':hover': '_accentText' },\n    fontSize: '0.75em',\n    textDecoration: 'none',\n    opacity: {\n      default: 0,\n      ':focus-visible': 1,\n      [css.when.ancestor(':hover', headingMarker)]: 1,\n    },\n    transition: `opacity ${t.durations.sm} ${t.easings.standard}`,\n  },\n});\n\n/** 生成标题组件：标签与默认字号（H1–H6 由它生成） */\nexport function createHeading(tag: HeadingTag, defaultSize: FontSize) {\n  return _component(\n    ({\n      size = defaultSize,\n      weight = 'semibold',\n      tone,\n      align,\n      truncate = false,\n      lineClamp,\n      wrap,\n      anchor = false,\n      propsAnchor,\n      children,\n      ...rest\n    }: HeadingProps) => {\n      const lang = useLang();\n      return () => {\n        const Tag = tag;\n        const sx = [\n          headingStyles.root,\n          fontSizeStyles[size],\n          (size === 'xxl' || size === 'xxxl') && headingStyles[size],\n          fontWeightStyles[weight],\n          tone && toneStyles[tone],\n          align && textAlignStyles[align],\n          truncate && textStyles.truncate,\n          lineClamp != null && [textStyles.clamp, lineClampStyles.lines(lineClamp)],\n          wrap && textWrapStyles[wrap],\n          anchor && headingMarker,\n        ];\n        const id = rest.id;\n        return (\n          <Tag {...mergeAttrs<HeadingTag>({ sx }, rest)}>\n            {children}\n            {anchor && id && (\n              <a\n                {...mergeAttrs<'a'>(\n                  { sx: [headingStyles.anchor, focusRingStyles.visible] },\n                  propsAnchor,\n                  { href: `#${id}`, 'aria-label': lang.headingAnchor },\n                )}\n              >\n                <Icon icon={Hash} />\n              </a>\n            )}\n          </Tag>\n        );\n      };\n    },\n    { name: tag.toUpperCase() },\n  );\n}\n\n/** 页面主标题，每页一个；默认字号 xxxl（30px） */\nexport const H1 = createHeading('h1', 'xxxl');\n/** 页面里的一级分区；默认字号 xxl（24px） */\nexport const H2 = createHeading('h2', 'xxl');\n/** 分区里的小节；默认字号 xl（18px） */\nexport const H3 = createHeading('h3', 'xl');\n/** 四级标题；默认字号 lg（16px） */\nexport const H4 = createHeading('h4', 'lg');\n/** 五级标题；默认字号 md（14px） */\nexport const H5 = createHeading('h5', 'md');\n/** 六级标题；默认字号 md（14px） */\nexport const H6 = createHeading('h6', 'md');\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAa,gBAAgB,IAAI,OAAO;CAEtC,MAAM;EACJ,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU;EAEV,wBAAwB,QAAQ,WAAW,aAAY,KAAM,MAAM,GAAE;CACvE;CAEA,KAAK,EAAE,eAAe,SAAS;CAC/B,MAAM,EAAE,eAAe,WAAW;CAClC,QAAQ;EACN,SAAS;EACT,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,OAAO;GAAE,SAAS;GAAc,UAAU;EAAc;EACxD,UAAU;EACV,gBAAgB;EAChB,SAAS;GACP,SAAS;GACT,kBAAkB;IACjB,IAAI,KAAK,SAAS,UAAU,aAAa,IAAI;EAChD;EACA,YAAY,WAAW,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACrD;AACF,CAAC;;AAGD,SAAgB,cAAc,KAAiB,aAAuB;CACpE,OAAO,0BACL,QAAA,SAYoB;EAAA,MAAA,OAAAA,aAAA,QAAA,cAXX,WAAW;EAAA,MAAA,SAAAA,aAAA,QAAA,UACT,UAAU;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,WAAAA,aAAA,QAAA,YAGR,KAAK;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,UAGP,KAAK;EAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;EAAA,MAAA,WAAAC,aAAA,MAAA;EAAA,MAGX,OAAIC,UAAA,QAAA,MAAA,KAAA;EAEP,MAAM,OAAO,QAAQ;EACrB,aAAa;GACX,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,cAAc;IACd,eAAc,KAAA;KACb,KAAA,UAAS,SAAS,KAAA,UAAS,WAAW,cAAa,KAAA;IACpD,iBAAgB,OAAA;IAChB,KAAA,SAAQ,WAAU,KAAA;IAClB,MAAA,SAAS,gBAAe,MAAA;IACxB,SAAA,SAAY,WAAW;IACvB,UAAA,SAAa,QAAQ,CAAC,WAAW,OAAO,gBAAgB,MAAK,UAAA,KAAU,CAAC;IACxE,KAAA,SAAQ,eAAc,KAAA;IACtB,OAAA,SAAU;GAAa;GAEzB,MAAM,KAAK,KAAK;GAChB,OAAAC,YAAA,KACW,WAAuB,EAAE,GAAG,GAAG,IAAI,GAAC,EAAA,eAAA,CAAAC,MAAA,QAAA,GAE1C,OAAA,SAAU,MAAED,YAAA,KAEL,WACF,EAAE,IAAI,CAAC,cAAc,QAAQ,gBAAgB,OAAO,EAAE,GAAC,YAAA,OAEvD;IAAE,MAAM,IAAI;IAAM,cAAc,KAAK;GAAc,CACrD,GAAC,CAAAA,YAAA,MAAA,EAAA,QAEW,KAAI,GAAA,IAAA,CAAA,CAAA,CAEnB,EAAA,CAAA;EAGP;CACF,GACA;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE,MAAM,IAAI,YAAY;CAAE,CAC5B;AACF;;AAGA,IAAa,KAAK,cAAc,MAAM,MAAM;;AAE5C,IAAa,KAAK,cAAc,MAAM,KAAK;;AAE3C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI;;AAE1C,IAAa,KAAK,cAAc,MAAM,IAAI"}

package/dist/base/Icon.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 图标：渲染 Lucide 格式的图标数据。使用方安装 @lucide/icons 后按名导入（可摇树）：
+ *
+ *   <Icon icon={Search} />                  装饰性：对读屏隐藏
+ *   <Icon icon={Trash} aria-label="删除" />  有名称：role="img"
+ *
+ * 自定义图标按同一格式写 `{ size?, node: [[标签, 属性, 子节点?], …] }` 即可。
+ */
+import type { LucideIconData } from '@lucide/icons';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import { type TextSize, type Tone } from '../utils/style/typography';
+/** 图标数据：Lucide 的标准格式 */
+export type IconData = LucideIconData;
+/** 绘制与无障碍相关的属性由组件管理 */
+export type IconManaged = 'viewBox' | 'fill' | 'stroke' | 'stroke-width' | 'stroke-linecap' | 'stroke-linejoin' | 'role' | 'aria-hidden';
+/** 未声明的属性落到 svg 上；传了 aria-label 或 aria-labelledby 才对读屏可见 */
+export interface IconProps extends PartProps<'svg', IconManaged> {
+    /** 图标数据：`import { Search } from '@lucide/icons'` */
+    icon: IconData;
+    /** 不写时为 1em，跟随所在文字；档位对应主题字号，数字为像素 */
+    size?: TextSize | number;
+    /** 色调（状态图标：成功、警告…）；不写时跟随文字颜色 */
+    tone?: Tone;
+    /** 线宽（24 格画布上的单位），默认取主题的 strokeWidths.md */
+    strokeWidth?: number;
+    /** 从右到左排版时水平翻转：箭头、chevron 这类有方向的图标 */
+    flipInRtl?: boolean;
+    /**
+     * 描线动画（一笔画出）：挂载时为 true 就在挂载时播，之后每次由 false 变为 true 再播（Anime.js 的 createDrawable，
+     * 时长取主题，减少动态效果时直接画好）。要在挂载时就给出（true / false），不给的图标不建动画
+     */
+    draw?: boolean;
+}
+/** Icon 的样式：icon、flip */
+export declare const iconStyles: Readonly<{
+    flip: css.CompiledStyles;
+    icon: css.CompiledStyles;
+}>;
+/** 图标（svg）：渲染 Lucide 格式的图标数据；不传 aria-label 时是装饰性的，对读屏隐藏 */
+export declare const Icon: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<IconProps>;
+/** Lucide 图标数据里的一个节点：[标签, 属性, 子节点] */
+export type IconNode = IconData['node'][number];
+/**
+ * 图标的子元素（path、circle…）拼成的 SVG 标记，按图标数据缓存，作为 svg 的 innerHTML。
+ * 不为每条路径建虚拟节点：一千个图标挂载 39ms → 19ms，按钮、菜单项、勾选框里都有图标
+ */
+export declare function iconMarkup(icon: IconData): string;

package/dist/base/Icon.js

@@ -0,0 +1,110 @@
+import { mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles, toneStyles } from "../utils/style/typography.js";
+import { useAnimate } from "../utils/motion/animation.js";
+import { createVNode, mergeProps, onMounted, shallowRef, watch } from "vue";
+import { _component, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { createDrawable, utils } from "animejs";
+//#region src/base/Icon.tsx
+/** 图标数据：Lucide 的标准格式 */
+/** 绘制与无障碍相关的属性由组件管理 */
+/** 未声明的属性落到 svg 上；传了 aria-label 或 aria-labelledby 才对读屏可见 */
+/** Icon 的样式：icon、flip */
+var iconStyles = css.create({
+	icon: {
+		width: "1em",
+		height: "1em",
+		flexShrink: 0,
+		verticalAlign: "-0.125em",
+		strokeWidth: "_md"
+	},
+	flip: { transform: {
+		default: null,
+		":dir(rtl)": "scaleX(-1)"
+	} }
+});
+/** 图标（svg）：渲染 Lucide 格式的图标数据；不传 aria-label 时是装饰性的，对读屏隐藏 */
+var Icon = /*#__PURE__*/ _component((_props, _ctx) => {
+	const icon = readonlyProp(_props, "icon");
+	const size = readonlyProp(_props, "size");
+	const tone = readonlyProp(_props, "tone");
+	const strokeWidth = readonlyProp(_props, "strokeWidth");
+	const flipInRtl = readonlyProp(_props, "flipInRtl", false);
+	const draw = readonlyProp(_props, "draw");
+	const rest = restProps(_props, _ctx, true);
+	let svg = shallowRef(null);
+	if (untrack(() => draw.value) !== void 0) useDraw(() => svg.value, () => draw.value === true);
+	return () => {
+		const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
+		return createVNode("svg", mergeProps(mergeAttrs({ sx: [
+			iconStyles.icon,
+			typeof size.value === "string" && fontSizeStyles[size.value],
+			tone.value && toneStyles[tone.value],
+			flipInRtl.value && iconStyles.flip
+		] }, rest, {
+			style: {
+				fontSize: typeof size.value === "number" ? `${size.value}px` : void 0,
+				strokeWidth: strokeWidth.value
+			},
+			viewBox: viewBox(icon.value),
+			fill: "none",
+			stroke: "currentColor",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			role: labelled ? "img" : void 0,
+			"aria-hidden": labelled ? void 0 : "true",
+			ref: svg
+		}), { "innerHTML": iconMarkup(icon.value) }), null);
+	};
+}, {
+	name: "Icon",
+	props: [
+		"icon",
+		"size",
+		"tone",
+		"strokeWidth",
+		"flipInRtl",
+		"draw"
+	]
+});
+/** 描线：draw 变为 true（含挂载时）就从无到有画出每一笔 */
+function useDraw(element, draw) {
+	const animate = useAnimate();
+	const play = () => {
+		const svg = element();
+		if (!svg || !draw()) return;
+		const strokes = createDrawable([...svg.children]);
+		utils.set(strokes, { draw: "0 0" });
+		animate(strokes, { draw: "0 1" }, {
+			duration: "xl",
+			ease: "enter",
+			scope: svg
+		});
+	};
+	onMounted(play);
+	watch(draw, play, { flush: "post" });
+}
+/** Lucide 图标默认画在 24×24 的画布上；自定义图标可以给出自己的 size 或 width / height */
+function viewBox(icon) {
+	return `0 0 ${icon.width ?? icon.size ?? 24} ${icon.height ?? icon.size ?? 24}`;
+}
+/** Lucide 图标数据里的一个节点：[标签, 属性, 子节点] */
+var markupCache = /* @__PURE__ */ new WeakMap();
+/**
+* 图标的子元素（path、circle…）拼成的 SVG 标记，按图标数据缓存，作为 svg 的 innerHTML。
+* 不为每条路径建虚拟节点：一千个图标挂载 39ms → 19ms，按钮、菜单项、勾选框里都有图标
+*/
+function iconMarkup(icon) {
+	let markup = markupCache.get(icon);
+	if (markup === void 0) markupCache.set(icon, markup = icon.node.map(nodeMarkup).join(""));
+	return markup;
+}
+function nodeMarkup([tag, attrs, children]) {
+	if (!/^[a-z][a-z0-9-]*$/i.test(tag)) throw new Error(`图标数据里的标签名不合法：${tag}`);
+	return `<${tag}${Object.entries(attrs).filter(([name]) => name !== "key").map(([name, value]) => ` ${name}="${escapeAttribute(String(value))}"`).join("")}>${children?.map(nodeMarkup).join("") ?? ""}</${tag}>`;
+}
+var escapeAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;");
+//#endregion
+export { Icon, iconMarkup, iconStyles };
+
+//# sourceMappingURL=Icon.js.map

package/dist/base/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/base/Icon.tsx"],"sourcesContent":["/**\n * 图标：渲染 Lucide 格式的图标数据。使用方安装 @lucide/icons 后按名导入（可摇树）：\n *\n *   <Icon icon={Search} />                  装饰性：对读屏隐藏\n *   <Icon icon={Trash} aria-label=\"删除\" />  有名称：role=\"img\"\n *\n * 自定义图标按同一格式写 `{ size?, node: [[标签, 属性, 子节点?], …] }` 即可。\n */\nimport type { LucideIconData } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { createDrawable, utils } from 'animejs';\nimport { onMounted, watch } from 'vue';\nimport { useAnimate } from '../utils/motion/animation';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { fontSizeStyles, toneStyles, type TextSize, type Tone } from '../utils/style/typography';\n\n/** 图标数据：Lucide 的标准格式 */\nexport type IconData = LucideIconData;\n\n/** 绘制与无障碍相关的属性由组件管理 */\nexport type IconManaged =\n  | 'viewBox'\n  | 'fill'\n  | 'stroke'\n  | 'stroke-width'\n  | 'stroke-linecap'\n  | 'stroke-linejoin'\n  | 'role'\n  | 'aria-hidden';\n\n/** 未声明的属性落到 svg 上；传了 aria-label 或 aria-labelledby 才对读屏可见 */\nexport interface IconProps extends PartProps<'svg', IconManaged> {\n  /** 图标数据：`import { Search } from '@lucide/icons'` */\n  icon: IconData;\n  /** 不写时为 1em，跟随所在文字；档位对应主题字号，数字为像素 */\n  size?: TextSize | number;\n  /** 色调（状态图标：成功、警告…）；不写时跟随文字颜色 */\n  tone?: Tone;\n  /** 线宽（24 格画布上的单位），默认取主题的 strokeWidths.md */\n  strokeWidth?: number;\n  /** 从右到左排版时水平翻转：箭头、chevron 这类有方向的图标 */\n  flipInRtl?: boolean;\n  /**\n   * 描线动画（一笔画出）：挂载时为 true 就在挂载时播，之后每次由 false 变为 true 再播（Anime.js 的 createDrawable，\n   * 时长取主题，减少动态效果时直接画好）。要在挂载时就给出（true / false），不给的图标不建动画\n   */\n  draw?: boolean;\n}\n\n/** Icon 的样式：icon、flip */\nexport const iconStyles = css.create({\n  icon: {\n    width: '1em',\n    height: '1em',\n    flexShrink: 0,\n    // 与文字基线对齐\n    verticalAlign: '-0.125em',\n    // 写成 CSS 而不是 stroke-width 属性：主题能统一调整，子元素照常继承\n    strokeWidth: '_md',\n  },\n  flip: { transform: { default: null, ':dir(rtl)': 'scaleX(-1)' } },\n});\n\n/** 图标（svg）：渲染 Lucide 格式的图标数据；不传 aria-label 时是装饰性的，对读屏隐藏 */\nexport const Icon = _component(\n  ({ icon, size, tone, strokeWidth, flipInRtl = false, draw, ...rest }: IconProps) => {\n    let svg = _state.raw<SVGSVGElement | null>(null);\n    // 大多数图标不描线：不给 draw 时不建监听与动画\n    if (_untrack(draw) !== undefined)\n      useDraw(\n        () => svg,\n        () => draw === true,\n      );\n    return () => {\n      const labelled = rest['aria-label'] != null || rest['aria-labelledby'] != null;\n      return (\n        <svg\n          {...mergeAttrs<'svg'>(\n            {\n              sx: [\n                iconStyles.icon,\n                typeof size === 'string' && fontSizeStyles[size],\n                tone && toneStyles[tone],\n                flipInRtl && iconStyles.flip,\n              ],\n            },\n            rest,\n            {\n              style: {\n                fontSize: typeof size === 'number' ? `${size}px` : undefined,\n                strokeWidth,\n              },\n              viewBox: viewBox(icon),\n              fill: 'none',\n              stroke: 'currentColor',\n              'stroke-linecap': 'round',\n              'stroke-linejoin': 'round',\n              role: labelled ? 'img' : undefined,\n              'aria-hidden': labelled ? undefined : 'true',\n              ref: _toRef(svg),\n            },\n          )}\n          innerHTML={iconMarkup(icon)}\n        />\n      );\n    };\n  },\n);\n\n/** 描线：draw 变为 true（含挂载时）就从无到有画出每一笔 */\nfunction useDraw(element: () => SVGSVGElement | null, draw: () => boolean) {\n  const animate = useAnimate();\n  const play = () => {\n    const svg = element();\n    if (!svg || !draw()) return;\n    const strokes = createDrawable([...svg.children] as SVGGeometryElement[]);\n    // 先擦掉再画：挂载时在浏览器绘制前就擦掉，不会先闪一下完整的图标\n    void utils.set(strokes, { draw: '0 0' });\n    void animate(strokes, { draw: '0 1' }, { duration: 'xl', ease: 'enter', scope: svg });\n  };\n  onMounted(play);\n  watch(draw, play, { flush: 'post' });\n}\n\n/** Lucide 图标默认画在 24×24 的画布上；自定义图标可以给出自己的 size 或 width / height */\nfunction viewBox(icon: IconData) {\n  const width = icon.width ?? icon.size ?? 24;\n  const height = icon.height ?? icon.size ?? 24;\n  return `0 0 ${width} ${height}`;\n}\n\n/** Lucide 图标数据里的一个节点：[标签, 属性, 子节点] */\nexport type IconNode = IconData['node'][number];\n\nconst markupCache = new WeakMap<IconData, string>();\n\n/**\n * 图标的子元素（path、circle…）拼成的 SVG 标记，按图标数据缓存，作为 svg 的 innerHTML。\n * 不为每条路径建虚拟节点：一千个图标挂载 39ms → 19ms，按钮、菜单项、勾选框里都有图标\n */\nexport function iconMarkup(icon: IconData): string {\n  let markup = markupCache.get(icon);\n  if (markup === undefined) markupCache.set(icon, (markup = icon.node.map(nodeMarkup).join('')));\n  return markup;\n}\n\nfunction nodeMarkup([tag, attrs, children]: IconNode): string {\n  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) throw new Error(`图标数据里的标签名不合法：${tag}`);\n  // 节点里的 key 是给虚拟节点用的，不是 SVG 属性\n  const attributes = Object.entries(attrs)\n    .filter(([name]) => name !== 'key')\n    .map(([name, value]) => ` ${name}=\"${escapeAttribute(String(value))}\"`)\n    .join('');\n  return `<${tag}${attributes}>${children?.map(nodeMarkup).join('') ?? ''}</${tag}>`;\n}\n\nconst escapeAttribute = (value: string) =>\n  value.replaceAll('&', '&amp;').replaceAll('\"', '&quot;').replaceAll('<', '&lt;');\n"],"mappings":"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"}

package/dist/base/IconButton.d.ts

@@ -0,0 +1,34 @@
+import { type PartProps } from '../utils/props';
+import { type ButtonOptions } from './button-core';
+import type { IconData, IconProps } from './Icon';
+/** 不可用、忙碌由组件管理；aria-label 必填，单独声明 */
+export type IconButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy' | 'aria-label';
+/** 未声明的属性落到 button 上 */
+export interface IconButtonProps extends PartProps<'button', IconButtonManaged>, ButtonOptions {
+    /** 图标：`import { Settings } from '@lucide/icons'` */
+    icon: IconData;
+    /** 按钮的无障碍名称（读屏念的），必填 */
+    'aria-label': string;
+    /** 不可用：原生 disabled，不能聚焦 */
+    disabled?: boolean;
+    /** 不可用时仍可聚焦：改用 aria-disabled，点击无效（见 Button） */
+    focusableWhenDisabled?: boolean;
+    /** 按钮类型，默认 button */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * 样式：只有图标时默认不带底色
+     * @default 'ghost'
+     */
+    variant?: ButtonOptions['variant'];
+    /**
+     * 色调：只有图标时默认中性色（工具栏、卡片上的次要操作）
+     * @default 'neutral'
+     */
+    tone?: ButtonOptions['tone'];
+    /** 内容层（包着图标的 span）的部件属性 */
+    propsContent?: PartProps<'span'>;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+}
+/** 只有图标的按钮（button）：方形，必须有 aria-label */
+export declare const IconButton: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<IconButtonProps>;

package/dist/base/IconButton.js

@@ -0,0 +1,81 @@
+import { mergeAttrs } from "../utils/props.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { buttonContent, buttonPart, buttonSx, useButtonAppearance, useButtonBehavior } from "./button-core.js";
+import { createVNode } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/base/IconButton.tsx
+/** 不可用、忙碌由组件管理；aria-label 必填，单独声明 */
+/** 未声明的属性落到 button 上 */
+/** 只有图标的按钮（button）：方形，必须有 aria-label */
+var IconButton = /*#__PURE__*/ _component((_props, _ctx) => {
+	const icon = readonlyProp(_props, "icon");
+	const label = readonlyProp(_props, "ariaLabel");
+	const variant = readonlyProp(_props, "variant");
+	const tone = readonlyProp(_props, "tone");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const loading = readonlyProp(_props, "loading", false);
+	const ripple = readonlyProp(_props, "ripple");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const focusableWhenDisabled = readonlyProp(_props, "focusableWhenDisabled", false);
+	const type = readonlyProp(_props, "type", "button");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsSpinner = readonlyProp(_props, "propsSpinner");
+	const onClick = readonlyProp(_props, "onClick");
+	const rest = restProps(_props, _ctx, true);
+	const appearance = useButtonAppearance(() => ({
+		variant: variant.value,
+		tone: tone.value,
+		size: size.value,
+		radius: radius.value
+	}), "ghost", "neutral");
+	const spinner = useDelayedLoading(() => loading.value);
+	const behavior = useButtonBehavior(() => ({
+		disabled: disabled.value,
+		loading: loading.value,
+		focusableWhenDisabled: focusableWhenDisabled.value,
+		ripple: ripple.value
+	}), () => onClick.value);
+	return () => createVNode("button", mergeAttrs({
+		...buttonPart,
+		sx: buttonSx(appearance(), {
+			disabled: disabled.value,
+			square: true
+		}),
+		type: type.value
+	}, rest, {
+		...behavior(),
+		"aria-label": label.value
+	}), [buttonContent({
+		icon: icon.value,
+		propsContent: propsContent.value,
+		propsIcon: propsIcon.value
+	}, {
+		loading: spinner.value,
+		propsSpinner: propsSpinner.value
+	})]);
+}, {
+	name: "IconButton",
+	props: [
+		"icon",
+		"ariaLabel",
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"loading",
+		"ripple",
+		"disabled",
+		"focusableWhenDisabled",
+		"type",
+		"propsContent",
+		"propsIcon",
+		"propsSpinner",
+		"onClick"
+	]
+});
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/base/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/IconButton.tsx"],"sourcesContent":["/**\n * 只有图标的按钮（button）：宽高相等，类型上必须给 aria-label（读屏要知道它是做什么的）。\n * 外观与 Button 共用（button-core.ts），默认 ghost 样式。关闭、清除这类常用的见 CloseButton、ClearButton。\n *\n *   <IconButton icon={Settings} aria-label=\"设置\" />\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from './button-core';\nimport type { IconData, IconProps } from './Icon';\n\n/** 不可用、忙碌由组件管理；aria-label 必填，单独声明 */\nexport type IconButtonManaged = 'disabled' | 'aria-disabled' | 'aria-busy' | 'aria-label';\n\n/** 未声明的属性落到 button 上 */\nexport interface IconButtonProps extends PartProps<'button', IconButtonManaged>, ButtonOptions {\n  /** 图标：`import { Settings } from '@lucide/icons'` */\n  icon: IconData;\n  /** 按钮的无障碍名称（读屏念的），必填 */\n  'aria-label': string;\n  /** 不可用：原生 disabled，不能聚焦 */\n  disabled?: boolean;\n  /** 不可用时仍可聚焦：改用 aria-disabled，点击无效（见 Button） */\n  focusableWhenDisabled?: boolean;\n  /** 按钮类型，默认 button */\n  type?: 'button' | 'submit' | 'reset';\n  /**\n   * 样式：只有图标时默认不带底色\n   * @default 'ghost'\n   */\n  variant?: ButtonOptions['variant'];\n  /**\n   * 色调：只有图标时默认中性色（工具栏、卡片上的次要操作）\n   * @default 'neutral'\n   */\n  tone?: ButtonOptions['tone'];\n  /** 内容层（包着图标的 span）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 只有图标的按钮（button）：方形，必须有 aria-label */\nexport const IconButton = _component(\n  ({\n    icon,\n    'aria-label': label,\n    variant,\n    tone,\n    size,\n    radius,\n    loading = false,\n    ripple,\n    disabled = false,\n    focusableWhenDisabled = false,\n    type = 'button',\n    propsContent,\n    propsIcon,\n    propsSpinner,\n    onClick,\n    ...rest\n  }: IconButtonProps) => {\n    const appearance = useButtonAppearance(\n      () => ({ variant, tone, size, radius }),\n      'ghost',\n      // 只有图标的按钮多是工具栏、卡片角上的次要操作：默认中性色，一排图标不会满屏品牌色\n      'neutral',\n    );\n    // 很快完成的加载不换成加载指示；点击拦截、aria-busy 仍按 loading 立即生效\n    const spinner = useDelayedLoading(() => loading);\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading, focusableWhenDisabled, ripple }),\n      () => onClick,\n    );\n\n    return () => (\n      <button\n        {...mergeAttrs<'button'>(\n          { ...buttonPart, sx: buttonSx(appearance(), { disabled, square: true }), type },\n          rest,\n          { ...behavior(), 'aria-label': label },\n        )}\n      >\n        {buttonContent({ icon, propsContent, propsIcon }, { loading: spinner.value, propsSpinner })}\n      </button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAmDA,IAAa,aAAa,0BACxB,QAAA,SAiBuB;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WAVX,KAAK;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAEJ,KAAK;CAAA,MAAA,wBAAAA,aAAA,QAAA,yBACQ,KAAK;CAAA,MAAA,OAAAA,aAAA,QAAA,QACtB,QAAQ;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAKZ,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,aAAa,2BACV;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,IACrC,SAEA,SACF;CAEA,MAAM,UAAU,wBAAkB,QAAA,KAAa;CAC/C,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAO,QAAA;EAAE,uBAAqB,sBAAA;EAAE,QAAM,OAAA;CAAC,UAC1D,QAAA,KACF;CAEA,aAAOC,YAAA,UAEC,WACF;EAAE,GAAG;EAAY,IAAI,SAAS,WAAW,GAAG;GAAE,UAAQ,SAAA;GAAE,QAAQ;EAAK,CAAC;EAAG,MAAI,KAAA;CAAC,GAC9E,MACA;EAAE,GAAG,SAAS;EAAG,cAAY,MAAA;CAAQ,CACvC,GAAC,CAEA,cAAc;EAAE,MAAI,KAAA;EAAE,cAAY,aAAA;EAAE,WAAS,UAAA;CAAC,GAAG;EAAE,SAAS,QAAQ;EAAO,cAAY,aAAA;CAAC,CAAC,CAAC,CAAA;AAGjG,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/base/IconLinkButton.d.ts

@@ -0,0 +1,34 @@
+import { type PartProps } from '../utils/props';
+import { type ButtonOptions } from './button-core';
+import type { IconData, IconProps } from './Icon';
+/** 地址、不可用与名称由组件管理 */
+export type IconLinkButtonManaged = 'href' | 'aria-disabled' | 'role' | 'aria-label';
+/** 未声明的属性落到 a 上 */
+export interface IconLinkButtonProps extends PartProps<'a', IconLinkButtonManaged>, Omit<ButtonOptions, 'loading' | 'propsSpinner'> {
+    /** 链接地址 */
+    href: string;
+    /** 图标：`import { BookOpen } from '@lucide/icons'` */
+    icon: IconData;
+    /** 链接的无障碍名称（读屏念的），必填 */
+    'aria-label': string;
+    /** 外部链接：新窗口打开，加 rel="noopener noreferrer"，名称后补上“在新窗口打开” */
+    external?: boolean;
+    /** 不可用：去掉 href，保留 role="link" 与 aria-disabled（同 LinkButton） */
+    disabled?: boolean;
+    /**
+     * 样式：只有图标时默认不带底色
+     * @default 'ghost'
+     */
+    variant?: ButtonOptions['variant'];
+    /**
+     * 色调：只有图标时默认中性色（工具栏、卡片上的次要操作）
+     * @default 'neutral'
+     */
+    tone?: ButtonOptions['tone'];
+    /** 内容层（包着图标的 span）的部件属性 */
+    propsContent?: PartProps<'span'>;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+}
+/** 只有图标的链接（a）：外观同 IconButton，行为同 LinkButton */
+export declare const IconLinkButton: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<IconLinkButtonProps>;

package/dist/base/IconLinkButton.js

@@ -0,0 +1,81 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs } from "../utils/props.js";
+import { buttonContent, buttonPart, buttonSx, useButtonAppearance, useButtonBehavior } from "./button-core.js";
+import { externalLinkAttrs, useRouterLink } from "../utils/dom/link.js";
+import { createVNode } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/base/IconLinkButton.tsx
+/** 地址、不可用与名称由组件管理 */
+/** 未声明的属性落到 a 上 */
+/** 只有图标的链接（a）：外观同 IconButton，行为同 LinkButton */
+var IconLinkButton = /*#__PURE__*/ _component((_props, _ctx) => {
+	const href = readonlyProp(_props, "href");
+	const icon = readonlyProp(_props, "icon");
+	const label = readonlyProp(_props, "ariaLabel");
+	const external = readonlyProp(_props, "external", false);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const variant = readonlyProp(_props, "variant");
+	const tone = readonlyProp(_props, "tone");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const ripple = readonlyProp(_props, "ripple");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const onClick = readonlyProp(_props, "onClick");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const router = useRouterLink();
+	const appearance = useButtonAppearance(() => ({
+		variant: variant.value,
+		tone: tone.value,
+		size: size.value,
+		radius: radius.value
+	}), "ghost", "neutral");
+	const behavior = useButtonBehavior(() => ({
+		disabled: disabled.value,
+		loading: false,
+		focusableWhenDisabled: true,
+		ripple: ripple.value
+	}), () => (event) => {
+		onClick.value?.(event);
+		router.onClick(event, href.value);
+	});
+	return () => createVNode("a", mergeAttrs({
+		...buttonPart,
+		sx: buttonSx(appearance(), {
+			disabled: disabled.value,
+			square: true
+		}),
+		...external.value && externalLinkAttrs
+	}, rest, {
+		...behavior(),
+		href: disabled.value ? void 0 : router.href(href.value),
+		role: disabled.value ? "link" : void 0,
+		"aria-label": external.value ? `${label.value}${lang.linkNewWindow}` : label.value
+	}), [buttonContent({
+		icon: icon.value,
+		propsContent: propsContent.value,
+		propsIcon: propsIcon.value
+	}, { loading: false })]);
+}, {
+	name: "IconLinkButton",
+	props: [
+		"href",
+		"icon",
+		"ariaLabel",
+		"external",
+		"disabled",
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"ripple",
+		"propsContent",
+		"propsIcon",
+		"onClick"
+	]
+});
+//#endregion
+export { IconLinkButton };
+
+//# sourceMappingURL=IconLinkButton.js.map

package/dist/base/IconLinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconLinkButton.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode"],"sources":["../../src/base/IconLinkButton.tsx"],"sourcesContent":["/**\n * 只有图标的链接（a）：外观同 IconButton（宽高相等、默认 ghost），行为同 LinkButton（站内链接经 router 跳转）。\n * 顶栏里的仓库、社交账号链接这类“点了去别处”的图标用它；类型上必须给 aria-label。\n *\n *   <IconLinkButton href=\"https://github.com/…\" external icon={Github} aria-label=\"GitHub 仓库\" />\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { useLang } from '../config/context';\nimport { externalLinkAttrs, useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  buttonContent,\n  buttonPart,\n  buttonSx,\n  useButtonAppearance,\n  useButtonBehavior,\n  type ButtonOptions,\n} from './button-core';\nimport type { IconData, IconProps } from './Icon';\n\n/** 地址、不可用与名称由组件管理 */\nexport type IconLinkButtonManaged = 'href' | 'aria-disabled' | 'role' | 'aria-label';\n\n/** 未声明的属性落到 a 上 */\nexport interface IconLinkButtonProps\n  extends PartProps<'a', IconLinkButtonManaged>, Omit<ButtonOptions, 'loading' | 'propsSpinner'> {\n  /** 链接地址 */\n  href: string;\n  /** 图标：`import { BookOpen } from '@lucide/icons'` */\n  icon: IconData;\n  /** 链接的无障碍名称（读屏念的），必填 */\n  'aria-label': string;\n  /** 外部链接：新窗口打开，加 rel=\"noopener noreferrer\"，名称后补上“在新窗口打开” */\n  external?: boolean;\n  /** 不可用：去掉 href，保留 role=\"link\" 与 aria-disabled（同 LinkButton） */\n  disabled?: boolean;\n  /**\n   * 样式：只有图标时默认不带底色\n   * @default 'ghost'\n   */\n  variant?: ButtonOptions['variant'];\n  /**\n   * 色调：只有图标时默认中性色（工具栏、卡片上的次要操作）\n   * @default 'neutral'\n   */\n  tone?: ButtonOptions['tone'];\n  /** 内容层（包着图标的 span）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n}\n\n/** 只有图标的链接（a）：外观同 IconButton，行为同 LinkButton */\nexport const IconLinkButton = _component(\n  ({\n    href,\n    icon,\n    'aria-label': label,\n    external = false,\n    disabled = false,\n    variant,\n    tone,\n    size,\n    radius,\n    ripple,\n    propsContent,\n    propsIcon,\n    onClick,\n    ...rest\n  }: IconLinkButtonProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const appearance = useButtonAppearance(\n      () => ({ variant, tone, size, radius }),\n      'ghost',\n      // 只有图标的按钮多是工具栏、卡片角上的次要操作：默认中性色，一排图标不会满屏品牌色\n      'neutral',\n    );\n    const behavior = useButtonBehavior(\n      () => ({ disabled, loading: false, focusableWhenDisabled: true, ripple }),\n      () => (event) => {\n        (onClick as ((event: MouseEvent) => void) | undefined)?.(event);\n        router.onClick(event, href);\n      },\n    );\n\n    return () => (\n      <a\n        {...mergeAttrs<'a'>(\n          {\n            ...buttonPart,\n            sx: buttonSx(appearance(), { disabled, square: true }),\n            ...(external && externalLinkAttrs),\n          },\n          rest,\n          {\n            ...behavior(),\n            href: disabled ? undefined : router.href(href),\n            role: disabled ? 'link' : undefined,\n            'aria-label': external ? `${label}${lang.linkNewWindow}` : label,\n          },\n        )}\n      >\n        {buttonContent({ icon, propsContent, propsIcon }, { loading: false })}\n      </a>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAqDA,IAAa,iBAAiB,0BAC5B,QAAA,SAe2B;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAXd,KAAK;CAAA,MAAA,WAAAA,aAAA,QAAA,YACL,KAAK;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MASb,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,cAAc;CAC7B,MAAM,aAAa,2BACV;EAAE,SAAO,QAAA;EAAE,MAAI,KAAA;EAAE,MAAI,KAAA;EAAE,QAAM,OAAA;CAAC,IACrC,SAEA,SACF;CACA,MAAM,WAAW,yBACR;EAAE,UAAQ,SAAA;EAAE,SAAS;EAAO,uBAAuB;EAAM,QAAM,OAAA;CAAC,WAChE,UAAU;EACf,QAAA,QAAyD,KAAK;EAC9D,OAAO,QAAQ,OAAK,KAAA,KAAM;CAC5B,CACF;CAEA,aAAOC,YAAA,KAEC,WACF;EACE,GAAG;EACH,IAAI,SAAS,WAAW,GAAG;GAAE,UAAQ,SAAA;GAAE,QAAQ;EAAK,CAAC;EACrD,GAAI,SAAA,SAAY;CAClB,GACA,MACA;EACE,GAAG,SAAS;EACZ,MAAM,SAAA,QAAW,KAAA,IAAY,OAAO,KAAI,KAAA,KAAK;EAC7C,MAAM,SAAA,QAAW,SAAS,KAAA;EAC1B,cAAc,SAAA,QAAW,GAAA,MAAA,QAAW,KAAK,kBAAe,MAAA;CAC1D,CACF,GAAC,CAEA,cAAc;EAAE,MAAI,KAAA;EAAE,cAAY,aAAA;EAAE,WAAS,UAAA;CAAC,GAAG,EAAE,SAAS,MAAM,CAAC,CAAC,CAAA;AAG3E,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}