@sdata/web-vue 4.7.1 → 5.0.0

package/es/color-picker/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -98,3 +99,202 @@ $color-panel-block-margin: global.$spacing-3;
 $color-panel-block-border-radius: global.$border-2;
 
 $color-panel-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-border-2'));
+
+// @generated runtime tokens — pnpm theme:generate
+$color-preview-size-mini: theme-runtime.token(
+  'color-picker',
+  'color-preview-size-mini',
+  $color-preview-size-mini,
+  'size-4'
+);
+$color-preview-size-small: theme-runtime.token(
+  'color-picker',
+  'color-preview-size-small',
+  $color-preview-size-small
+);
+$color-preview-size-medium: theme-runtime.token(
+  'color-picker',
+  'color-preview-size-medium',
+  $color-preview-size-medium,
+  'size-6'
+);
+$color-preview-size-large: theme-runtime.token(
+  'color-picker',
+  'color-preview-size-large',
+  $color-preview-size-large
+);
+$color-input-bg-color: theme-runtime.token(
+  'color-picker',
+  'color-input-bg-color',
+  $color-input-bg-color
+);
+$color-value-margin-left: theme-runtime.token(
+  'color-picker',
+  'color-value-margin-left',
+  $color-value-margin-left,
+  'spacing-2'
+);
+$color-value-font-color: theme-runtime.token(
+  'color-picker',
+  'color-value-font-color',
+  $color-value-font-color
+);
+$color-value-font-color_disabled: theme-runtime.token(
+  'color-picker',
+  'color-value-font-color-disabled',
+  $color-value-font-color_disabled
+);
+$color-value-size-mini-font-size: theme-runtime.token(
+  'color-picker',
+  'color-value-size-mini-font-size',
+  $color-value-size-mini-font-size,
+  'font-size-body-1'
+);
+$color-value-size-small-font-size: theme-runtime.token(
+  'color-picker',
+  'color-value-size-small-font-size',
+  $color-value-size-small-font-size,
+  'font-size-body-3'
+);
+$color-value-size-medium-font-size: theme-runtime.token(
+  'color-picker',
+  'color-value-size-medium-font-size',
+  $color-value-size-medium-font-size,
+  'font-size-body-3'
+);
+$color-value-size-large-font-size: theme-runtime.token(
+  'color-picker',
+  'color-value-size-large-font-size',
+  $color-value-size-large-font-size,
+  'font-size-body-3'
+);
+$color-input-border-radius: theme-runtime.token(
+  'color-picker',
+  'color-input-border-radius',
+  $color-input-border-radius,
+  'border-radius-small'
+);
+$color-preview-border-size: theme-runtime.token(
+  'color-picker',
+  'color-preview-border-size',
+  $color-preview-border-size,
+  'border-1'
+);
+$color-preview-border-color: theme-runtime.token(
+  'color-picker',
+  'color-preview-border-color',
+  $color-preview-border-color
+);
+$color-value-font-size: theme-runtime.token(
+  'color-picker',
+  'color-value-font-size',
+  $color-value-font-size,
+  'font-weight-400'
+);
+$color-panel-width: theme-runtime.token('color-picker', 'color-panel-width', $color-panel-width);
+$color-panel-padding: theme-runtime.token(
+  'color-picker',
+  'color-panel-padding',
+  $color-panel-padding,
+  'spacing-6'
+);
+$color-panel-border-radius: theme-runtime.token(
+  'color-picker',
+  'color-panel-border-radius',
+  $color-panel-border-radius,
+  'border-radius-small'
+);
+$color-panel-bg-color: theme-runtime.token(
+  'color-picker',
+  'color-panel-bg-color',
+  $color-panel-bg-color
+);
+$color-panel-box-shadow: theme-runtime.token(
+  'color-picker',
+  'color-panel-box-shadow',
+  $color-panel-box-shadow
+);
+$color-palette-height: theme-runtime.token(
+  'color-picker',
+  'color-palette-height',
+  $color-palette-height
+);
+$color-palette-handle-size: theme-runtime.token(
+  'color-picker',
+  'color-palette-handle-size',
+  $color-palette-handle-size,
+  'size-4'
+);
+$color-palette-handle-border-size: theme-runtime.token(
+  'color-picker',
+  'color-palette-handle-border-size',
+  $color-palette-handle-border-size,
+  'border-2'
+);
+$color-control-bar-width: theme-runtime.token(
+  'color-picker',
+  'color-control-bar-width',
+  $color-control-bar-width
+);
+$color-control-bar-height: theme-runtime.token(
+  'color-picker',
+  'color-control-bar-height',
+  $color-control-bar-height
+);
+$color-control-bar-alpha-margin-top: theme-runtime.token(
+  'color-picker',
+  'color-control-bar-alpha-margin-top',
+  $color-control-bar-alpha-margin-top,
+  'spacing-6'
+);
+$color-control-bar-border-radius: theme-runtime.token(
+  'color-picker',
+  'color-control-bar-border-radius',
+  $color-control-bar-border-radius
+);
+$color-panel-input-margin-top: theme-runtime.token(
+  'color-picker',
+  'color-panel-input-margin-top',
+  $color-panel-input-margin-top,
+  'spacing-6'
+);
+$color-panel-input-group-margin-left: theme-runtime.token(
+  'color-picker',
+  'color-panel-input-group-margin-left',
+  $color-panel-input-group-margin-left,
+  'spacing-6'
+);
+$color-panel-format-select-width: theme-runtime.token(
+  'color-picker',
+  'color-panel-format-select-width',
+  $color-panel-format-select-width
+);
+$color-panel-section-title-font-size: theme-runtime.token(
+  'color-picker',
+  'color-panel-section-title-font-size',
+  $color-panel-section-title-font-size,
+  'font-size-caption'
+);
+$color-panel-empty-font-size: theme-runtime.token(
+  'color-picker',
+  'color-panel-empty-font-size',
+  $color-panel-empty-font-size,
+  'font-size-body-1'
+);
+$color-panel-block-size: theme-runtime.token(
+  'color-picker',
+  'color-panel-block-size',
+  $color-panel-block-size,
+  'size-4'
+);
+$color-panel-block-border-radius: theme-runtime.token(
+  'color-picker',
+  'color-panel-block-border-radius',
+  $color-panel-block-border-radius,
+  'border-2'
+);
+$color-panel-border-color: theme-runtime.token(
+  'color-picker',
+  'color-panel-border-color',
+  $color-panel-border-color
+);

package/es/comment/style/index.css

@@ -18,48 +18,48 @@
 .sd-comment {
   display: flex;
   flex-wrap: nowrap;
-  font-size: 14px;
+  font-size: var(--component-comment-comment-font-size, var(--component-comment-font-size, var(--font-size-body-3, 14px)));
   line-height: 1.5715;
 }
 .sd-comment:not(:first-of-type), .sd-comment-inner-comment {
-  margin-top: 20px;
+  margin-top: var(--component-comment-comment-margin-bottom, var(--component-comment-margin-bottom, var(--spacing-8, 20px)));
 }
 .sd-comment-inner {
   flex: 1;
 }
 .sd-comment-avatar {
   flex-shrink: 0;
-  margin-right: 12px;
+  margin-right: var(--component-comment-comment-margin-avatar-right, var(--component-comment-margin-avatar-right, var(--spacing-6, 12px)));
   cursor: pointer;
 }
 .sd-comment-avatar > img {
-  width: 32px;
-  height: 32px;
+  width: var(--component-comment-comment-size-avatar-width, var(--component-comment-size-avatar-width, var(--size-8, 32px)));
+  height: var(--component-comment-comment-size-avatar-width, var(--component-comment-size-avatar-width, var(--size-8, 32px)));
   border-radius: var(--sd-border-radius-circle);
 }
 .sd-comment-author {
-  margin-right: 8px;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  margin-right: var(--component-comment-comment-margin-author-right, var(--component-comment-margin-author-right, var(--spacing-4, 8px)));
+  color: var(--component-comment-comment-color-author-text, var(--component-comment-color-author-text, var(--sd-color-text-2)));
+  font-size: var(--component-comment-comment-font-author-size, var(--component-comment-font-author-size, var(--font-size-body-3, 14px)));
 }
 .sd-comment-datetime {
-  color: var(--sd-color-text-3);
-  font-size: 12px;
+  color: var(--component-comment-comment-color-datetime-text, var(--component-comment-color-datetime-text, var(--sd-color-text-3)));
+  font-size: var(--component-comment-comment-font-datetime-size, var(--component-comment-font-datetime-size, var(--font-size-body-1, 12px)));
 }
 .sd-comment-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-comment-comment-color-content-text, var(--component-comment-color-content-text, var(--sd-color-text-1)));
 }
 .sd-comment-title-align-right {
   display: flex;
   justify-content: space-between;
 }
 .sd-comment-actions {
-  margin-top: 8px;
-  color: var(--sd-color-text-2);
-  font-size: 14px;
+  margin-top: var(--component-comment-comment-margin-actions-top, var(--component-comment-margin-actions-top, var(--spacing-4, 8px)));
+  color: var(--component-comment-comment-color-actions-text, var(--component-comment-color-actions-text, var(--sd-color-text-2)));
+  font-size: var(--component-comment-comment-font-action-size, var(--component-comment-font-action-size, var(--font-size-body-3, 14px)));
 }
 .sd-comment-actions > *:not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--component-comment-comment-margin-actions-right, var(--component-comment-margin-actions-right, var(--spacing-4, 8px)));
 }
 .sd-comment-actions-align-right {
   display: flex;

package/es/comment/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -33,3 +34,85 @@ $comment-margin-actions-right: global.$spacing-4;
 $comment-size-avatar-width: global.$size-8;
 
 $comment-font-action-size: global.$font-size-body-3;
+
+// @generated runtime tokens — pnpm theme:generate
+$comment-color-author-text: theme-runtime.token(
+  'comment',
+  'comment-color-author-text',
+  $comment-color-author-text
+);
+$comment-color-datetime-text: theme-runtime.token(
+  'comment',
+  'comment-color-datetime-text',
+  $comment-color-datetime-text
+);
+$comment-color-content-text: theme-runtime.token(
+  'comment',
+  'comment-color-content-text',
+  $comment-color-content-text
+);
+$comment-color-actions-text: theme-runtime.token(
+  'comment',
+  'comment-color-actions-text',
+  $comment-color-actions-text
+);
+$comment-font-size: theme-runtime.token(
+  'comment',
+  'comment-font-size',
+  $comment-font-size,
+  'font-size-body-3'
+);
+$comment-font-author-size: theme-runtime.token(
+  'comment',
+  'comment-font-author-size',
+  $comment-font-author-size,
+  'font-size-body-3'
+);
+$comment-font-datetime-size: theme-runtime.token(
+  'comment',
+  'comment-font-datetime-size',
+  $comment-font-datetime-size,
+  'font-size-body-1'
+);
+$comment-margin-avatar-right: theme-runtime.token(
+  'comment',
+  'comment-margin-avatar-right',
+  $comment-margin-avatar-right,
+  'spacing-6'
+);
+$comment-margin-author-right: theme-runtime.token(
+  'comment',
+  'comment-margin-author-right',
+  $comment-margin-author-right,
+  'spacing-4'
+);
+$comment-margin-actions-top: theme-runtime.token(
+  'comment',
+  'comment-margin-actions-top',
+  $comment-margin-actions-top,
+  'spacing-4'
+);
+$comment-margin-bottom: theme-runtime.token(
+  'comment',
+  'comment-margin-bottom',
+  $comment-margin-bottom,
+  'spacing-8'
+);
+$comment-margin-actions-right: theme-runtime.token(
+  'comment',
+  'comment-margin-actions-right',
+  $comment-margin-actions-right,
+  'spacing-4'
+);
+$comment-size-avatar-width: theme-runtime.token(
+  'comment',
+  'comment-size-avatar-width',
+  $comment-size-avatar-width,
+  'size-8'
+);
+$comment-font-action-size: theme-runtime.token(
+  'comment',
+  'comment-font-action-size',
+  $comment-font-action-size,
+  'font-size-body-3'
+);

package/es/config-provider/algorithms.d.ts

@@ -0,0 +1,11 @@
+import type { SdThemeConfig, ThemeTokenMap } from './theme';
+export interface SdThemeSeed {
+    primary?: string;
+    success?: string;
+    warning?: string;
+    danger?: string;
+    radius?: number;
+    fontSize?: number;
+    controlHeight?: number;
+}
+export declare function deriveThemeTokens(theme: SdThemeConfig): ThemeTokenMap;

package/es/config-provider/algorithms.js

@@ -0,0 +1,53 @@
+import { generate } from "@arco-design/color";
+//#region components/config-provider/algorithms.ts
+/** 基础 token 派生为现有 CSS 协议，显式 tokens 始终拥有更高优先级。 */
+function deriveThemeTokens(theme) {
+	var _theme$seed, _theme$algorithm$incl, _theme$algorithm, _theme$algorithm$incl2, _theme$algorithm2;
+	const tokens = {};
+	const seed = (_theme$seed = theme.seed) !== null && _theme$seed !== void 0 ? _theme$seed : {};
+	const dark = (_theme$algorithm$incl = (_theme$algorithm = theme.algorithm) === null || _theme$algorithm === void 0 ? void 0 : _theme$algorithm.includes("dark")) !== null && _theme$algorithm$incl !== void 0 ? _theme$algorithm$incl : false;
+	for (const name of [
+		"primary",
+		"success",
+		"warning",
+		"danger"
+	]) {
+		const color = seed[name];
+		if (!color || !/^#[\da-f]{6}$/i.test(color)) continue;
+		generate(color, {
+			list: true,
+			dark,
+			format: "rgb"
+		}).forEach((value, index) => {
+			const channels = value.replace(/^rgba?\(|\)$/g, "");
+			tokens[`${name}-${index + 1}`] = channels;
+			if (name === "primary") tokens[`link-${index + 1}`] = channels;
+		});
+	}
+	if (seed.radius !== void 0) {
+		tokens["border-radius-small"] = `${seed.radius}px`;
+		tokens["border-radius-medium"] = `${seed.radius * 1.5}px`;
+		tokens["border-radius-large"] = `${seed.radius * 2}px`;
+	}
+	if (seed.fontSize !== void 0) for (const [index, delta] of [
+		-2,
+		-1,
+		0
+	].entries()) tokens[`font-size-body-${index + 1}`] = `${seed.fontSize + delta}px`;
+	const compact = (_theme$algorithm$incl2 = (_theme$algorithm2 = theme.algorithm) === null || _theme$algorithm2 === void 0 ? void 0 : _theme$algorithm2.includes("compact")) !== null && _theme$algorithm$incl2 !== void 0 ? _theme$algorithm$incl2 : false;
+	if (seed.controlHeight !== void 0 || compact) {
+		var _seed$controlHeight;
+		const base = ((_seed$controlHeight = seed.controlHeight) !== null && _seed$controlHeight !== void 0 ? _seed$controlHeight : 32) * (compact ? .875 : 1);
+		for (const [name, delta] of [
+			["mini", -8],
+			["small", -4],
+			["default", 0],
+			["medium", 0],
+			["large", 4]
+		]) tokens[`size-${name}`] = `${base + delta}px`;
+	}
+	if (compact) tokens["spacing-7"] = "12px";
+	return tokens;
+}
+//#endregion
+export { deriveThemeTokens };

package/es/config-provider/global-theme.js

@@ -2,20 +2,23 @@ import { getThemeCSSVariables } from "./theme.js";
 //#region components/config-provider/global-theme.ts
 var targets = /* @__PURE__ */ new WeakMap();
 function render(target, state) {
+	var _declared;
 	const variables = {};
-	let mode = state.mode;
+	let declared;
 	for (const layer of state.layers.values()) {
 		Object.assign(variables, layer.variables);
-		if (layer.mode !== void 0) mode = layer.mode;
+		if (layer.mode !== void 0) declared = layer.mode;
 	}
+	const mode = (_declared = declared) !== null && _declared !== void 0 ? _declared : state.layers.size ? target.getAttribute("sd-theme") : state.mode;
 	for (const [key, original] of state.variables) if (variables[key] !== void 0) target.style.setProperty(key, variables[key]);
 	else {
 		if (original.value) target.style.setProperty(key, original.value, original.priority);
 		else target.style.removeProperty(key);
 		state.variables.delete(key);
 	}
-	if (mode === null) target.removeAttribute("sd-theme");
-	else target.setAttribute("sd-theme", mode);
+	if (mode === null) {
+		if (target.hasAttribute("sd-theme")) target.removeAttribute("sd-theme");
+	} else if (target.getAttribute("sd-theme") !== mode) target.setAttribute("sd-theme", mode);
 }
 function applyGlobalTheme(target, owner, theme, mode) {
 	let state = targets.get(target);

package/es/config-provider/theme-config.d.ts

@@ -0,0 +1,11 @@
+import type { SdThemeConfig } from './theme';
+export declare function validateThemeConfig(input: unknown): {
+    valid: boolean;
+    data?: SdThemeConfig;
+    errors: string[];
+};
+export declare function parseThemeConfig(text: string): {
+    valid: boolean;
+    data?: SdThemeConfig;
+    errors: string[];
+};

package/es/config-provider/theme-config.js

@@ -0,0 +1,114 @@
+import { normalizeTokenKey } from "./token-key.js";
+//#region components/config-provider/theme-config.ts
+var object = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+function validateThemeConfig(input) {
+	var _input$tokens, _input$components;
+	const errors = [];
+	if (!object(input)) return {
+		valid: false,
+		errors: ["主题配置必须是 JSON 对象。"]
+	};
+	const allowed = /* @__PURE__ */ new Set([
+		"meta",
+		"tokens",
+		"token",
+		"components",
+		"component",
+		"seed",
+		"algorithm"
+	]);
+	for (const key of Object.keys(input)) if (!allowed.has(key)) errors.push(`不支持的字段：${key}`);
+	const tokenMap = (value, location) => {
+		const result = {};
+		if (value === void 0) return result;
+		if (!object(value)) {
+			errors.push(`${location} 必须是对象。`);
+			return result;
+		}
+		for (const [key, item] of Object.entries(value)) {
+			const normalized = normalizeTokenKey(key);
+			if (!normalized || /^(?:__proto__|constructor|prototype)$/.test(key) || !/^[\w-]+$/.test(normalized)) errors.push(`${location}.${key} 名称无效。`);
+			else if (typeof item !== "string" && typeof item !== "number" || typeof item === "number" && !Number.isFinite(item)) errors.push(`${location}.${key} 必须是字符串或有限数字。`);
+			else if (normalized in result) errors.push(`${location}.${key} 与已有 token 重复。`);
+			else result[normalized] = item;
+		}
+		return result;
+	};
+	const data = {
+		tokens: tokenMap((_input$tokens = input.tokens) !== null && _input$tokens !== void 0 ? _input$tokens : input.token, "tokens"),
+		components: {}
+	};
+	const components = (_input$components = input.components) !== null && _input$components !== void 0 ? _input$components : input.component;
+	if (components !== void 0 && !object(components)) errors.push("components 必须是对象。");
+	else if (object(components)) for (const [name, value] of Object.entries(components)) {
+		const key = normalizeTokenKey(name);
+		if (!key || [
+			"__proto__",
+			"constructor",
+			"prototype"
+		].includes(name) || !/^[\w-]+$/.test(key)) errors.push(`组件名称 ${name} 无效。`);
+		else if (key in data.components) errors.push(`组件名称 ${name} 与已有组件重复。`);
+		else data.components[key] = tokenMap(value, `components.${name}`);
+	}
+	data.meta = {
+		schemaVersion: 1,
+		cssVarPrefix: "--"
+	};
+	if (input.meta !== void 0) {
+		if (!object(input.meta)) errors.push("meta 必须是对象。");
+		else {
+			if (input.meta.schemaVersion !== void 0 && input.meta.schemaVersion !== 1) errors.push("仅支持 schemaVersion 1。");
+			if (input.meta.cssVarPrefix !== void 0) {
+				if (typeof input.meta.cssVarPrefix !== "string" || !input.meta.cssVarPrefix.trim()) errors.push("meta.cssVarPrefix 必须是非空字符串。");
+				else data.meta.cssVarPrefix = input.meta.cssVarPrefix;
+			}
+			if (input.meta.name !== void 0 && typeof input.meta.name !== "string") errors.push("meta.name 必须是字符串。");
+			else if (typeof input.meta.name === "string") data.meta.name = input.meta.name;
+		}
+	}
+	if (input.algorithm !== void 0) {
+		if (!Array.isArray(input.algorithm) || input.algorithm.some((value) => value !== "dark" && value !== "compact")) errors.push("algorithm 仅支持 dark、compact 数组。");
+		else data.algorithm = [...new Set(input.algorithm)];
+	}
+	if (input.seed !== void 0) {
+		if (!object(input.seed)) errors.push("seed 必须是对象。");
+		else {
+			const seed = {};
+			for (const [key, value] of Object.entries(input.seed)) if ([
+				"primary",
+				"success",
+				"warning",
+				"danger"
+			].includes(key)) {
+				if (typeof value !== "string" || !/^#[\da-f]{6}$/i.test(value)) errors.push(`seed.${key} 必须是六位十六进制颜色。`);
+				else seed[key] = value;
+			} else if ([
+				"radius",
+				"fontSize",
+				"controlHeight"
+			].includes(key)) {
+				const minimum = key === "radius" ? 0 : key === "fontSize" ? 8 : 16;
+				if (typeof value !== "number" || !Number.isFinite(value) || value < minimum || value > 256) errors.push(`seed.${key} 必须是 ${minimum} 到 256 之间的数字。`);
+				else seed[key] = value;
+			} else errors.push(`不支持的基础 token：${key}`);
+			data.seed = seed;
+		}
+	}
+	return {
+		valid: !errors.length,
+		data: errors.length ? void 0 : data,
+		errors
+	};
+}
+function parseThemeConfig(text) {
+	try {
+		return validateThemeConfig(JSON.parse(text));
+	} catch (_unused) {
+		return {
+			valid: false,
+			errors: ["JSON 解析失败，请检查逗号、引号和对象结构。"]
+		};
+	}
+}
+//#endregion
+export { parseThemeConfig, validateThemeConfig };