@sdata/web-vue 4.7.1 → 5.0.0

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

@@ -26,20 +26,29 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			var _ref, _popupContainer$value;
 			return (_ref = (_popupContainer$value = popupContainer.value) !== null && _popupContainer$value !== void 0 ? _popupContainer$value : parentPopupContainer === null || parentPopupContainer === void 0 ? void 0 : parentPopupContainer.value) !== null && _ref !== void 0 ? _ref : null;
 		}));
-		const normalizedTheme = computed(() => normalizeTheme(props.theme));
 		const parentTheme = inject(inheritedThemeInjectionKey, void 0);
-		const popupVariables = computed(() => _objectSpread2(_objectSpread2({}, parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.variables.value), getThemeCSSVariables(normalizedTheme.value)));
+		const inheritedMode = shallowRef();
+		const effectiveMode = computed(() => {
+			var _props$themeMode, _props$theme;
+			return (_props$themeMode = props.themeMode) !== null && _props$themeMode !== void 0 ? _props$themeMode : ((_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.algorithm) === null || _props$theme === void 0 ? void 0 : _props$theme.includes("dark")) ? "dark" : void 0;
+		});
 		const popupMode = computed(() => {
-			var _props$themeMode;
-			return (_props$themeMode = props.themeMode) !== null && _props$themeMode !== void 0 ? _props$themeMode : parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.mode.value;
+			var _ref2, _effectiveMode$value;
+			return (_ref2 = (_effectiveMode$value = effectiveMode.value) !== null && _effectiveMode$value !== void 0 ? _effectiveMode$value : parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.mode.value) !== null && _ref2 !== void 0 ? _ref2 : inheritedMode.value;
+		});
+		const normalizedTheme = computed(() => {
+			var _props$theme$algorith;
+			if (!props.theme) return normalizeTheme();
+			return normalizeTheme(_objectSpread2(_objectSpread2({}, props.theme), {}, { algorithm: [...((_props$theme$algorith = props.theme.algorithm) !== null && _props$theme$algorith !== void 0 ? _props$theme$algorith : []).filter((algorithm) => algorithm !== "dark"), ...popupMode.value === "dark" ? ["dark"] : []] }));
 		});
+		const popupVariables = computed(() => _objectSpread2(_objectSpread2({}, parentTheme === null || parentTheme === void 0 ? void 0 : parentTheme.variables.value), getThemeCSSVariables(normalizedTheme.value)));
 		provide(inheritedThemeInjectionKey, {
 			variables: popupVariables,
 			mode: popupMode
 		});
 		const usesLocalThemeContainer = computed(() => {
 			if (props.global) return false;
-			return Boolean(props.themeMode) || Object.keys(normalizedTheme.value.tokens).length > 0 || Object.keys(normalizedTheme.value.components).length > 0;
+			return Boolean(effectiveMode.value) || Object.keys(normalizedTheme.value.tokens).length > 0 || Object.keys(normalizedTheme.value.components).length > 0;
 		});
 		const themePopupContainerPrefixCls = getPrefixCls("theme-popup-container");
 		const { zIndex, close: closePopupManager } = usePopupManager("popup", { visible: usesLocalThemeContainer });
@@ -54,6 +63,8 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		let activeTarget = null;
 		let activeTargetIsGlobal = false;
 		const globalOwner = Symbol("ThemeProvider");
+		let inheritedModeObserver;
+		let observedModeSource = null;
 		function cleanupPopupContainer() {
 			if (!popupContainer.value) return;
 			clearThemeCSSVariables(popupContainer.value, appliedPopupThemeKeys);
@@ -80,8 +91,9 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			popupContainer.value.style.zIndex = String(zIndex.value);
 			appliedPopupThemeKeys = applyThemeCSSVariableMap(popupContainer.value, popupVariables.value, appliedPopupThemeKeys);
 			const inheritedThemeMode = (_popupMode$value = popupMode.value) !== null && _popupMode$value !== void 0 ? _popupMode$value : (_target$closest = target.closest("[sd-theme]")) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute("sd-theme");
-			if (inheritedThemeMode) popupContainer.value.setAttribute("sd-theme", inheritedThemeMode);
-			else popupContainer.value.removeAttribute("sd-theme");
+			if (inheritedThemeMode) {
+				if (popupContainer.value.getAttribute("sd-theme") !== inheritedThemeMode) popupContainer.value.setAttribute("sd-theme", inheritedThemeMode);
+			} else if (popupContainer.value.hasAttribute("sd-theme")) popupContainer.value.removeAttribute("sd-theme");
 		}
 		function resolveThemeTarget() {
 			if (typeof document === "undefined") return null;
@@ -101,21 +113,43 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				clearThemeCSSVariables(target, appliedThemeKeys);
 				appliedThemeKeys = /* @__PURE__ */ new Set();
 				target.removeAttribute("sd-theme");
+				target.removeAttribute("data-sd-theme");
 			}
 		}
 		function syncThemeTarget() {
+			var _nextTarget$closest, _nextTarget$parentEle, _nextTarget$parentEle2, _source$getAttribute;
 			const nextTarget = resolveThemeTarget();
 			if (!nextTarget) {
+				inheritedModeObserver === null || inheritedModeObserver === void 0 || inheritedModeObserver.disconnect();
+				inheritedModeObserver = void 0;
+				observedModeSource = null;
+				inheritedMode.value = void 0;
 				resetActiveTarget();
 				cleanupPopupContainer();
 				return;
 			}
 			if (activeTarget && activeTarget !== nextTarget) cleanupTarget(activeTarget);
-			if (props.global) applyGlobalTheme(nextTarget, globalOwner, normalizedTheme.value, props.themeMode);
+			const source = props.global ? (_nextTarget$closest = nextTarget.closest("[sd-theme], [data-sd-theme]")) !== null && _nextTarget$closest !== void 0 ? _nextTarget$closest : nextTarget : (_nextTarget$parentEle = (_nextTarget$parentEle2 = nextTarget.parentElement) === null || _nextTarget$parentEle2 === void 0 ? void 0 : _nextTarget$parentEle2.closest("[sd-theme], [data-sd-theme]")) !== null && _nextTarget$parentEle !== void 0 ? _nextTarget$parentEle : document.body;
+			inheritedMode.value = ((_source$getAttribute = source.getAttribute("sd-theme")) !== null && _source$getAttribute !== void 0 ? _source$getAttribute : source.getAttribute("data-sd-theme")) === "dark" ? "dark" : "light";
+			if (props.global) applyGlobalTheme(nextTarget, globalOwner, normalizedTheme.value, effectiveMode.value);
 			else {
+				var _popupMode$value2;
 				appliedThemeKeys = applyThemeCSSVariables(nextTarget, normalizedTheme.value, appliedThemeKeys);
-				if (props.themeMode) nextTarget.setAttribute("sd-theme", props.themeMode);
-				else nextTarget.removeAttribute("sd-theme");
+				if (effectiveMode.value) {
+					if (nextTarget.getAttribute("sd-theme") !== effectiveMode.value) nextTarget.setAttribute("sd-theme", effectiveMode.value);
+				} else if (nextTarget.hasAttribute("sd-theme")) nextTarget.removeAttribute("sd-theme");
+				const resolvedMode = (_popupMode$value2 = popupMode.value) !== null && _popupMode$value2 !== void 0 ? _popupMode$value2 : "light";
+				if (nextTarget.getAttribute("data-sd-theme") !== resolvedMode) nextTarget.setAttribute("data-sd-theme", resolvedMode);
+			}
+			if (observedModeSource !== source) {
+				inheritedModeObserver === null || inheritedModeObserver === void 0 || inheritedModeObserver.disconnect();
+				observedModeSource = source;
+				inheritedModeObserver = new MutationObserver(syncThemeTarget);
+				inheritedModeObserver.observe(source, {
+					attributes: true,
+					attributeFilter: ["sd-theme", "data-sd-theme"],
+					subtree: true
+				});
 			}
 			activeTarget = nextTarget;
 			activeTargetIsGlobal = props.global;
@@ -125,7 +159,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			normalizedTheme,
 			popupVariables,
 			popupMode,
-			() => props.themeMode,
+			effectiveMode,
 			() => props.global,
 			usesLocalThemeContainer,
 			rootElement
@@ -135,6 +169,7 @@ var theme_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			flush: "post"
 		});
 		onBeforeUnmount(() => {
+			inheritedModeObserver === null || inheritedModeObserver === void 0 || inheritedModeObserver.disconnect();
 			cleanupTarget(activeTarget);
 			cleanupPopupContainer();
 			activeTarget = null;

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

@@ -1,3 +1,5 @@
+import { type SdThemeSeed } from './algorithms';
+export { normalizeTokenKey } from './token-key';
 export type ThemeTokenValue = string | number;
 export type ThemeTokenMap = Record<string, ThemeTokenValue>;
 export interface SdThemeMeta {
@@ -7,6 +9,8 @@ export interface SdThemeMeta {
 }
 export type SdThemeMode = 'light' | 'dark';
 export interface SdThemeConfig {
+    seed?: SdThemeSeed;
+    algorithm?: Array<'dark' | 'compact'>;
     tokens?: ThemeTokenMap;
     components?: Record<string, ThemeTokenMap>;
     meta?: SdThemeMeta;
@@ -19,7 +23,6 @@ export interface SDThemeNormalized {
     components: Record<string, ThemeTokenMap>;
     meta: Required<Pick<SdThemeMeta, 'schemaVersion' | 'cssVarPrefix'>> & Pick<SdThemeMeta, 'name'>;
 }
-export declare function normalizeTokenKey(key: string): string;
 export declare function normalizeTheme(theme?: SdThemeConfig): SDThemeNormalized;
 export declare function resolveThemeToken(theme: SDThemeNormalized, componentName: string, tokenKey: string): ThemeTokenValue | undefined;
 export declare function getThemeCSSVariables(theme: SDThemeNormalized): Record<string, string>;

package/es/config-provider/theme.js

@@ -1,4 +1,6 @@
 import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import { deriveThemeTokens } from "./algorithms.js";
+import { normalizeTokenKey } from "./token-key.js";
 //#region components/config-provider/theme.ts
 var DEFAULT_THEME_META = {
 	schemaVersion: 1,
@@ -9,7 +11,9 @@ var RESERVED_THEME_KEYS = /* @__PURE__ */ new Set([
 	"components",
 	"meta",
 	"token",
-	"component"
+	"component",
+	"seed",
+	"algorithm"
 ]);
 function normalizeCssVarPrefix(prefix) {
 	if (!prefix) return "--";
@@ -18,9 +22,6 @@ function normalizeCssVarPrefix(prefix) {
 	if (trimmed.startsWith("--")) return trimmed.endsWith("-") ? trimmed : `${trimmed}-`;
 	return `--${trimmed.replace(/^-+/, "")}${trimmed.endsWith("-") ? "" : "-"}`;
 }
-function normalizeTokenKey(key) {
-	return key.trim().replace(/([a-z\d])([A-Z])/g, "$1-$2").replace(/([a-zA-Z])(\d+)/g, "$1-$2").replace(/(\d+)([a-zA-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").replace(/-{2,}/g, "-").replace(/^-|-$/g, "").toLowerCase();
-}
 function normalizeTokenMap(tokens) {
 	if (!tokens || typeof tokens !== "object") return {};
 	const normalized = {};
@@ -64,7 +65,7 @@ function normalizeTheme(theme) {
 		cssVarPrefix: normalizeCssVarPrefix((_theme$meta$cssVarPre = (_theme$meta3 = theme.meta) === null || _theme$meta3 === void 0 ? void 0 : _theme$meta3.cssVarPrefix) !== null && _theme$meta$cssVarPre !== void 0 ? _theme$meta$cssVarPre : DEFAULT_THEME_META.cssVarPrefix)
 	};
 	return {
-		tokens: _objectSpread2(_objectSpread2({}, legacyRootTokens), themeTokens),
+		tokens: _objectSpread2(_objectSpread2(_objectSpread2({}, deriveThemeTokens(theme)), legacyRootTokens), themeTokens),
 		components: normalizeComponentTokenMap((_theme$components = theme.components) !== null && _theme$components !== void 0 ? _theme$components : theme.component),
 		meta
 	};

package/es/config-provider/token-key.d.ts

@@ -0,0 +1 @@
+export declare function normalizeTokenKey(key: string): string;

package/es/config-provider/token-key.js

@@ -0,0 +1,6 @@
+//#region components/config-provider/token-key.ts
+function normalizeTokenKey(key) {
+	return key.trim().replace(/([a-z\d])([A-Z])/g, "$1-$2").replace(/([a-zA-Z])(\d+)/g, "$1-$2").replace(/(\d+)([a-zA-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").replace(/-{2,}/g, "-").replace(/^-|-$/g, "").toLowerCase();
+}
+//#endregion
+export { normalizeTokenKey };

package/es/copy/style/index.css

@@ -16,7 +16,7 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-copy {
-  border-radius: 4px;
+  border-radius: var(--component-copy-copy-border-radius, var(--component-copy-border-radius, var(--border-radius-small, 4px)));
 }
 .sd-copy.sd-copy-inherit {
   color: inherit;

package/es/copy/style/token.scss

@@ -1,3 +1,12 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 $copy-border-radius: global.$border-radius-small;
+
+// @generated runtime tokens — pnpm theme:generate
+$copy-border-radius: theme-runtime.token(
+  'copy',
+  'copy-border-radius',
+  $copy-border-radius,
+  'border-radius-small'
+);

package/es/cropper/style/index.css

@@ -19,13 +19,13 @@
   position: relative;
   display: block;
   width: var(--sd-cropper-width, 100%);
-  min-width: 200px;
+  min-width: var(--component-cropper-cropper-min-width, var(--component-cropper-min-width, 200px));
   height: var(--sd-cropper-height, 100%);
-  min-height: 120px;
+  min-height: var(--component-cropper-cropper-min-height, var(--component-cropper-min-height, 120px));
   overflow: hidden;
-  background-color: var(--sd-color-neutral-2);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: 6px;
+  background-color: var(--component-cropper-cropper-background-color, var(--component-cropper-background-color, var(--color-fill-2, var(--sd-color-fill-2, var(--sd-color-neutral-2)))));
+  border: 1px solid var(--component-cropper-cropper-border-color, var(--component-cropper-border-color, var(--color-border-2, var(--sd-color-border-2, var(--sd-color-neutral-3)))));
+  border-radius: var(--component-cropper-cropper-border-radius, var(--component-cropper-border-radius, var(--border-radius-medium, 6px)));
 }
 .sd-cropper-source-image {
   display: block;
@@ -38,7 +38,7 @@
 .sd-cropper cropper-canvas {
   width: var(--sd-cropper-width, 100%);
   height: var(--sd-cropper-height, 100%);
-  background-color: var(--sd-color-neutral-2);
+  background-color: var(--component-cropper-cropper-background-color, var(--component-cropper-background-color, var(--color-fill-2, var(--sd-color-fill-2, var(--sd-color-neutral-2)))));
 }
 .sd-cropper cropper-image,
 .sd-cropper cropper-selection,
@@ -47,5 +47,5 @@
 .sd-cropper cropper-shade,
 .sd-cropper cropper-viewer,
 .sd-cropper cropper-crosshair {
-  color: rgb(var(--primary-6));
+  color: var(--component-cropper-cropper-theme-color, var(--component-cropper-theme-color, rgb(var(--primary-6))));
 }

package/es/cropper/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 $cropper-background-color: global.$color-fill-2;
@@ -6,3 +7,26 @@ $cropper-border-radius: global.$border-radius-medium;
 $cropper-min-width: 200px;
 $cropper-min-height: 120px;
 $cropper-theme-color: rgb(var(--primary-6));
+
+// @generated runtime tokens — pnpm theme:generate
+$cropper-background-color: theme-runtime.token(
+  'cropper',
+  'cropper-background-color',
+  $cropper-background-color,
+  'color-fill-2'
+);
+$cropper-border-color: theme-runtime.token(
+  'cropper',
+  'cropper-border-color',
+  $cropper-border-color,
+  'color-border-2'
+);
+$cropper-border-radius: theme-runtime.token(
+  'cropper',
+  'cropper-border-radius',
+  $cropper-border-radius,
+  'border-radius-medium'
+);
+$cropper-min-width: theme-runtime.token('cropper', 'cropper-min-width', $cropper-min-width);
+$cropper-min-height: theme-runtime.token('cropper', 'cropper-min-height', $cropper-min-height);
+$cropper-theme-color: theme-runtime.token('cropper', 'cropper-theme-color', $cropper-theme-color);