@sdata/web-vue 3.24.0 → 3.25.0

package/es/index.css

@@ -8582,7 +8582,7 @@ body.sd-tour-active .sd-tour-popover * {
   position: relative;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
   border-radius: calc(var(--sd-border-radius-medium) * 2);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
@@ -9066,7 +9066,7 @@ body.sd-tour-active .sd-tour-popover * {
   color: var(--sd-color-neutral-10);
   font-size: 14px;
   line-height: 1.5715;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-medium);
   transition: border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -9631,7 +9631,7 @@ body.sd-tour-active .sd-tour-popover * {
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: rgba(255, 255, 255, 0.88);
+  background: color-mix(in srgb, var(--sd-color-bg-2) 88%, transparent);
 }
 .sd-qr-code-status {
   display: inline-flex;
@@ -10891,6 +10891,10 @@ body.sd-tour-active .sd-tour-popover * {
   margin-left: -6px;
 }
 
+:where(body, [sd-theme])[sd-theme=dark] .sd-model-selector-logo {
+  filter: brightness(0) invert(1);
+}
+
 .sd-message-list {
   position: fixed;
   left: 0;

package/es/model-selector/index.d.ts

@@ -93,11 +93,12 @@ declare const ModelSelector: {
         disabled?: boolean;
     }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
-            default?: (props: {
+            default(props: {
                 close: () => void;
+                disabled: boolean;
                 open: () => void;
                 visible: boolean;
-            }) => any;
+            }): unknown;
         };
     });
     Content: {

package/es/model-selector/model-selector-trigger.vue.d.ts

@@ -1,13 +1,13 @@
 type __VLS_Props = {
     disabled?: boolean;
 };
-declare var __VLS_10: {
-    close: () => void;
-    open: () => void;
-    visible: boolean;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+type __VLS_Slots = {
+    default(props: {
+        close: () => void;
+        disabled: boolean;
+        open: () => void;
+        visible: boolean;
+    }): unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/model-selector/model-selector-trigger.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
 import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
+import { mergeFirstChild } from "../_utils/vue-utils.js";
 import Button from "../button/index.js";
 import { useModelSelectorContext } from "./use-model-selector-context.js";
-import { createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { createBlock, defineComponent, h, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
 //#region components/model-selector/model-selector-trigger.vue?vue&type=script&setup=true&lang.ts
 var model_selector_trigger_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "ModelSelectorTrigger" }), {}, {
 	__name: "model-selector-trigger",
@@ -11,18 +12,39 @@ var model_selector_trigger_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		default: false
 	} },
 	setup(__props) {
+		const TriggerElement = defineComponent({
+			name: "ModelSelectorTriggerElement",
+			inheritAttrs: false,
+			setup: (_, { attrs, slots }) => {
+				return () => {
+					var _slots$default, _slots$default2;
+					const children = (_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : [];
+					if (mergeFirstChild(children, attrs)) return children;
+					return h(Button, attrs, { default: () => children });
+				};
+			}
+		});
 		const prefixCls = getPrefixCls("model-selector-trigger");
 		const context = useModelSelectorContext("ModelSelectorTrigger");
+		function handleClick(event) {
+			if (__props.disabled) {
+				event.preventDefault();
+				return;
+			}
+			context.setVisible(!context.visible.value);
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Button), {
+			return openBlock(), createBlock(unref(TriggerElement), {
 				class: normalizeClass(unref(prefixCls)),
 				"aria-expanded": unref(context).visible.value,
+				"aria-disabled": __props.disabled || void 0,
 				"aria-haspopup": "dialog",
 				disabled: __props.disabled,
-				onClick: _cache[0] || (_cache[0] = ($event) => unref(context).setVisible(!unref(context).visible.value))
+				onClick: handleClick
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
 					close: () => unref(context).setVisible(false),
+					disabled: __props.disabled,
 					open: () => unref(context).setVisible(true),
 					visible: unref(context).visible.value
 				})]),
@@ -30,6 +52,7 @@ var model_selector_trigger_vue_vue_type_script_setup_true_lang_default = /*@__PU
 			}, 8, [
 				"class",
 				"aria-expanded",
+				"aria-disabled",
 				"disabled"
 			]);
 		};

package/es/model-selector/style/index.css

@@ -141,4 +141,8 @@
 }
 .sd-model-selector-logo-group > .sd-model-selector-logo + .sd-model-selector-logo {
   margin-left: -6px;
+}
+
+:where(body, [sd-theme])[sd-theme=dark] .sd-model-selector-logo {
+  filter: brightness(0) invert(1);
 }

package/es/model-selector/style/index.scss

@@ -155,3 +155,9 @@ $model-selector-prefix-cls: string.unquote('#{theme.$prefix}-model-selector');
     }
   }
 }
+
+#{theme.$sd-theme-tag}[sd-theme='dark'] {
+  .#{$model-selector-prefix-cls}-logo {
+    filter: brightness(0) invert(1);
+  }
+}

package/es/qr-code/qr-code.vue_vue_type_script_setup_true_lang.js

@@ -3,8 +3,9 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/es
 import { getPrefixCls } from "../_utils/global-config.js";
 import { useI18n } from "../locale/index.js";
 import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/asyncToGenerator.js";
+import { useThemeMode } from "../_hooks/use-theme-mode.js";
 import qr_code_status_default from "./qr-code-status.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, watch } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, useTemplateRef, watch } from "vue";
 import QRCode from "qrcode";
 //#region components/qr-code/qr-code.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -68,7 +69,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		*/
 		color: {
 			type: String,
-			default: "#1D2129"
+			default: ""
 		},
 		/**
 		* @zh 二维码背景色
@@ -162,6 +163,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		const resolvedSpinProps = computed(() => _objectSpread2(_objectSpread2({}, configCtx === null || configCtx === void 0 ? void 0 : configCtx.qrCodeSpinProps), props.spinProps));
 		const prefixCls = getPrefixCls("qr-code");
+		const themeMode = useThemeMode(useTemplateRef("root"));
 		const canvasRef = ref();
 		const svgMarkup = ref("");
 		const handleRefresh = () => {
@@ -195,15 +197,22 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const rootStyle = computed(() => ({
 			width: `${props.size}px`,
 			height: `${props.size}px`,
-			backgroundColor: props.bgColor
+			backgroundColor: props.bgColor === "transparent" ? void 0 : props.bgColor
 		}));
-		const qrBgColor = computed(() => props.bgColor === "transparent" ? "#ffffff" : props.bgColor);
+		const qrColor = computed(() => {
+			if (props.color) return props.color;
+			return themeMode.value === "dark" ? "#f6f6f6" : "#1d2129";
+		});
+		const qrBgColor = computed(() => {
+			if (props.bgColor !== "transparent") return props.bgColor;
+			return themeMode.value === "dark" ? "#232324" : "#ffffff";
+		});
 		const qrOptions = computed(() => ({
 			errorCorrectionLevel: props.errorLevel,
 			margin: props.marginSize,
 			width: props.size,
 			color: {
-				dark: props.color,
+				dark: qrColor.value,
 				light: qrBgColor.value
 			}
 		}));
@@ -259,7 +268,8 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			props.bgColor,
 			props.errorLevel,
 			props.marginSize,
-			props.boostLevel
+			props.boostLevel,
+			themeMode.value
 		], () => {
 			renderCode();
 		}, {
@@ -269,6 +279,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		return (_ctx, _cache) => {
 			return hasValue.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
+				ref: "root",
 				class: normalizeClass(rootClass.value),
 				style: normalizeStyle(rootStyle.value)
 			}, [

package/es/qr-code/style/index.css

@@ -67,7 +67,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: rgba(255, 255, 255, 0.88);
+  background: color-mix(in srgb, var(--sd-color-bg-2) 88%, transparent);
 }
 .sd-qr-code-status {
   display: inline-flex;

package/es/qr-code/style/token.scss

@@ -9,7 +9,7 @@ $qr-code-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bo
 
 $qr-code-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 
-$qr-code-color-mask-bg: rgb(255 255 255 / 88%);
+$qr-code-color-mask-bg: color-mix(in srgb, #{$qr-code-color-bg} 88%, transparent);
 
 $qr-code-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
 

package/es/rich-text-editor/style/index.css

@@ -22,7 +22,7 @@
   color: var(--sd-color-neutral-10);
   font-size: 14px;
   line-height: 1.5715;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-medium);
   transition: border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

package/es/rich-text-editor/style/token.scss

@@ -1,4 +1,5 @@
 @use '@style/theme/index.scss' as global;
+@use 'sass:string';
 
 @forward '@style/theme/index.scss';
 
@@ -16,7 +17,7 @@ $rich-text-editor-code-padding: global.$spacing-2;
 $rich-text-editor-color-text: global.$color-text-1;
 $rich-text-editor-color-text-disabled: global.$color-text-4;
 $rich-text-editor-color-placeholder: global.$color-text-4;
-$rich-text-editor-color-background: global.$color-bg-2;
+$rich-text-editor-color-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 $rich-text-editor-color-background-disabled: global.$color-fill-2;
 $rich-text-editor-color-border: global.$color-border-2;
 $rich-text-editor-color-border-hover: global.$color-primary-5;

package/es/sender/style/index.css

@@ -22,7 +22,7 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
   border-radius: calc(var(--sd-border-radius-medium) * 2);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);

package/es/sender/style/token.scss

@@ -1,4 +1,5 @@
 @use '@style/theme/index.scss' as global;
+@use 'sass:string';
 
 @forward '@style/theme/index.scss';
 
@@ -22,7 +23,7 @@ $sender-color-primary-hover: global.$color-primary-5;
 $sender-color-text: global.$color-text-1;
 $sender-color-text-disabled: global.$color-text-4;
 $sender-color-text-placeholder: global.$color-text-4;
-$sender-color-bg: global.$color-bg-2;
+$sender-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 $sender-color-bg-disabled: global.$color-fill-2;
 $sender-color-header-bg: global.$color-fill-2;
 $sender-color-border: global.$color-border-2;

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "3.23.0",
+  "version": "3.24.1",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "3.24.0",
+  "version": "3.25.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",