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

package/dist/base/button-core.js

@@ -0,0 +1,660 @@
+import { t } from "../config/theme/tokens.js";
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles, radiusStyles } from "../utils/style/styles.js";
+import { partAttrs, useRecipe } from "../config/styles.js";
+import { Icon } from "./Icon.js";
+import { Spinner } from "./Spinner.js";
+import { interactionTransitions } from "../utils/style/transitions.js";
+import { rippleHostStyles, useRipple } from "../utils/dom/ripple.js";
+import { AttachedContext, attachedStyles } from "../utils/style/attached.js";
+import { h } from "vue";
+import { createContext } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/base/button-core.ts
+/**
+* 按钮家族（Button、LinkButton、IconButton、CloseButton、ClearButton）的内核：共用的外观、选项、内容排布与行为。
+* 一个元素一个组件（COMPONENTS.md §1）：各组件只管自己元素的行为，样式与内容排布都从这里取。
+*
+* 外观 = variant（样式）× tone（色调）× size（字号档位，内部尺寸随之按 em 缩放）× radius（圆角）。
+*/
+/** 按钮的基础样式：去掉默认外观，继承文字样式，指针与触摸的反馈；Button 家族也用它 */
+var buttonBaseStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: "inherit",
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		lineHeight: "inherit",
+		textAlign: "inherit",
+		textDecoration: "none",
+		cursor: "pointer",
+		userSelect: "none",
+		touchAction: "manipulation",
+		WebkitTapHighlightColor: "transparent"
+	},
+	disabled: { cursor: "not-allowed" }
+});
+/** 按钮家族 的样式：root、square、fullWidth、disabled、content、hidden 等 */
+var buttonStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_sm",
+		minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		paddingBlock: "_xs",
+		paddingInline: "_lg",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "transparent",
+		fontWeight: "_semibold",
+		lineHeight: "_tight",
+		whiteSpace: "nowrap"
+	},
+	square: {
+		paddingInline: 0,
+		width: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		flexShrink: 0
+	},
+	fullWidth: {
+		display: "flex",
+		width: "_full"
+	},
+	disabled: {
+		opacity: "_disabled",
+		cursor: "not-allowed"
+	},
+	content: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	hidden: { opacity: 0 },
+	spinner: {
+		position: "absolute",
+		inset: 0,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+});
+/** 悬停变色只在可用时：原生 disabled 的按钮照样匹配 :hover，悬停变色会让人以为还能点 */
+var HOVER = ":hover:not(:disabled,[aria-disabled=\"true\"])";
+/**
+* 按钮的样式（配方）：样式 × 色调逐项写主题 token（组合档位）。中性色没有专门的实底色，用反色表面。
+* 实底悬停用各色调的 Hover token：主题检查保证它与 Contrast 字色到 4.5:1
+*/
+var buttonRecipe = css.recipe({
+	name: "Button",
+	parts: ["root"],
+	variants: {
+		variant: {
+			solid: {},
+			soft: {},
+			surface: {},
+			outline: {},
+			ghost: {},
+			link: { root: {
+				minHeight: 0,
+				paddingInline: 0,
+				fontWeight: "_medium",
+				textUnderlineOffset: "0.2em",
+				textDecorationLine: {
+					default: "none",
+					[HOVER]: "underline"
+				}
+			} }
+		},
+		tone: {
+			neutral: {},
+			accent: {},
+			info: {},
+			success: {},
+			warning: {},
+			danger: {}
+		}
+	},
+	compound: [
+		{
+			when: {
+				variant: "solid",
+				tone: "neutral"
+			},
+			root: {
+				color: "_inverseText",
+				backgroundColor: {
+					default: "_inverseSurface",
+					[HOVER]: `color-mix(in oklab, ${t.colors.inverseSurface} 85%, ${t.colors.background})`
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentContrast",
+				backgroundColor: {
+					default: "_accent",
+					[HOVER]: "_accentHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "info"
+			},
+			root: {
+				color: "_infoContrast",
+				backgroundColor: {
+					default: "_info",
+					[HOVER]: "_infoHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "success"
+			},
+			root: {
+				color: "_successContrast",
+				backgroundColor: {
+					default: "_success",
+					[HOVER]: "_successHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningContrast",
+				backgroundColor: {
+					default: "_warning",
+					[HOVER]: "_warningHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerContrast",
+				backgroundColor: {
+					default: "_danger",
+					[HOVER]: "_dangerHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				backgroundColor: {
+					default: "_fill",
+					[HOVER]: "_fillHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				backgroundColor: {
+					default: "_accentSoft",
+					[HOVER]: "_accentSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				backgroundColor: {
+					default: "_infoSoft",
+					[HOVER]: "_infoSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				backgroundColor: {
+					default: "_successSoft",
+					[HOVER]: "_successSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				backgroundColor: {
+					default: "_warningSoft",
+					[HOVER]: "_warningSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				backgroundColor: {
+					default: "_dangerSoft",
+					[HOVER]: "_dangerSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				borderColor: "_border",
+				backgroundColor: {
+					default: "_surface",
+					[HOVER]: "_fillHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				borderColor: "_accentBorder",
+				backgroundColor: {
+					default: "_accentSoft",
+					[HOVER]: "_accentSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				borderColor: "_infoBorder",
+				backgroundColor: {
+					default: "_infoSoft",
+					[HOVER]: "_infoSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				borderColor: "_successBorder",
+				backgroundColor: {
+					default: "_successSoft",
+					[HOVER]: "_successSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				borderColor: "_warningBorder",
+				backgroundColor: {
+					default: "_warningSoft",
+					[HOVER]: "_warningSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "surface",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				borderColor: "_dangerBorder",
+				backgroundColor: {
+					default: "_dangerSoft",
+					[HOVER]: "_dangerSoftHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				borderColor: "_border",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_fillHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				borderColor: "_accentBorder",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_accentSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				borderColor: "_infoBorder",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_infoSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				borderColor: "_successBorder",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_successSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				borderColor: "_warningBorder",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_warningSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				borderColor: "_dangerBorder",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_dangerSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_fillHover"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_accentSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_infoSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_successSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_warningSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				backgroundColor: {
+					default: "transparent",
+					[HOVER]: "_dangerSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "link",
+				tone: "neutral"
+			},
+			root: { color: "_text" }
+		},
+		{
+			when: {
+				variant: "link",
+				tone: "accent"
+			},
+			root: { color: "_accentText" }
+		},
+		{
+			when: {
+				variant: "link",
+				tone: "info"
+			},
+			root: { color: "_infoText" }
+		},
+		{
+			when: {
+				variant: "link",
+				tone: "success"
+			},
+			root: { color: "_successText" }
+		},
+		{
+			when: {
+				variant: "link",
+				tone: "warning"
+			},
+			root: { color: "_warningText" }
+		},
+		{
+			when: {
+				variant: "link",
+				tone: "danger"
+			},
+			root: { color: "_dangerText" }
+		}
+	]
+});
+/** 按钮根元素的部件标记：`data-scope="button" data-part="root"` */
+var buttonPart = partAttrs(buttonRecipe, "root");
+/** 按钮组的上下文：组里的按钮家族据此相连、共用外观 */
+var ButtonGroupContext = createContext("ButtonGroup");
+/**
+* 按钮的外观：显式写的 prop > 所在 ButtonGroup 写的 > createUi / Provider 的 defaults.Button > 组件自己的默认样式。
+* 在 setup 里调用，返回的函数在渲染时调用（读到最新的 prop 与配置）
+*/
+function useButtonAppearance(read, fallbackVariant, fallbackTone = "accent") {
+	const group = ButtonGroupContext.inject(null);
+	const attachedGroup = AttachedContext.inject(null);
+	const recipe = useRecipe(buttonRecipe);
+	return useDefaults("Button", () => {
+		const { variant, tone, size, radius } = read();
+		const shared = group?.appearance;
+		return {
+			variant: variant ?? shared?.variant,
+			tone: tone ?? shared?.tone,
+			size: size ?? shared?.size,
+			radius: radius ?? shared?.radius,
+			attached: attachedGroup?.orientation,
+			recipe
+		};
+	}, {
+		variant: fallbackVariant,
+		tone: group ? "accent" : fallbackTone,
+		radius: "md"
+	});
+}
+/** 外观（已合并默认值）与状态 → 按钮根元素的样式 */
+function buttonSx({ variant, tone, size, radius, attached, recipe }, state) {
+	return [
+		buttonBaseStyles.root,
+		interactionTransitions.colors,
+		buttonStyles.root,
+		focusRingStyles.visible,
+		rippleHostStyles.host,
+		recipe({
+			variant,
+			tone
+		}).root.sx,
+		radiusStyles[radius],
+		attached && attachedStyles[attached],
+		size && fontSizeStyles[size],
+		state.square && buttonStyles.square,
+		state.fullWidth && buttonStyles.fullWidth,
+		state.disabled && buttonStyles.disabled
+	];
+}
+/** 按钮内容：图标、文字、加载指示；加载中内容透明但保留宽度与无障碍名称 */
+function buttonContent({ icon, iconEnd, children, propsContent, propsIcon, propsIconEnd }, { loading, propsSpinner }) {
+	return [h("span", mergeAttrs({ sx: buttonStyles.content }, propsContent, { sx: loading && buttonStyles.hidden }), [
+		icon && h(Icon, mergeProps$1({ icon }, propsIcon)),
+		children,
+		iconEnd && h(Icon, mergeProps$1({ icon: iconEnd }, propsIconEnd))
+	]), loading && h(Spinner, mergeProps$1({ sx: buttonStyles.spinner }, propsSpinner))];
+}
+/**
+* 按钮家族的行为：不可用（原生 disabled 或可聚焦的 aria-disabled）、加载中、拦截点击、波纹、状态 data 属性。
+* 被拦下的点击会 preventDefault：不触发使用方的 onClick，也不提交表单、不跟随链接。
+*
+*   const behavior = useButtonBehavior(() => ({ disabled, loading, focusableWhenDisabled, ripple }), () => onClick);
+*   mergeAttrs<'button'>(默认, rest, behavior())
+*/
+function useButtonBehavior(read, onClick) {
+	const ripple = useRipple(() => read().ripple);
+	function click(event) {
+		const { disabled, loading, focusableWhenDisabled = false } = read();
+		if (loading || disabled && focusableWhenDisabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick()?.(event);
+	}
+	return () => {
+		const { disabled, loading, focusableWhenDisabled = false } = read();
+		return {
+			disabled: disabled && !focusableWhenDisabled || void 0,
+			"aria-disabled": disabled && focusableWhenDisabled || void 0,
+			"aria-busy": loading || void 0,
+			onClick: click,
+			...ripple,
+			"data-loading": loading || void 0,
+			"data-disabled": disabled || void 0
+		};
+	};
+}
+//#endregion
+export { ButtonGroupContext, buttonBaseStyles, buttonContent, buttonPart, buttonRecipe, buttonStyles, buttonSx, useButtonAppearance, useButtonBehavior };
+
+//# sourceMappingURL=button-core.js.map