@sdata/web-vue 1.18.0 → 2.1.0

package/es/alert/style/index.css

@@ -28,7 +28,7 @@
   font-size: 14px;
   line-height: 1.5715;
   text-align: left;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
 }
 .sd-alert-with-title {
   align-items: flex-start;
@@ -41,23 +41,23 @@
   flex: initial;
 }
 .sd-alert-normal {
-  background-color: var(--color-neutral-2);
+  background-color: var(--sd-color-neutral-2);
   border: 1px solid transparent;
 }
 .sd-alert-info {
-  background-color: var(--color-primary-light-1);
+  background-color: var(--sd-color-primary-light-1);
   border: 1px solid transparent;
 }
 .sd-alert-success {
-  background-color: var(--color-success-light-1);
+  background-color: var(--sd-color-success-light-1);
   border: 1px solid transparent;
 }
 .sd-alert-warning {
-  background-color: var(--color-warning-light-1);
+  background-color: var(--sd-color-warning-light-1);
   border: 1px solid transparent;
 }
 .sd-alert-error {
-  background-color: var(--color-danger-light-1);
+  background-color: var(--sd-color-danger-light-1);
   border: 1px solid transparent;
 }
 .sd-alert-banner {
@@ -75,49 +75,49 @@
   line-height: 1.5;
 }
 .sd-alert-normal .sd-alert-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-normal .sd-alert-content {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-normal.sd-alert-with-title .sd-alert-content {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-alert-info .sd-alert-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-info .sd-alert-content {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-info.sd-alert-with-title .sd-alert-content {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-alert-success .sd-alert-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-success .sd-alert-content {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-success.sd-alert-with-title .sd-alert-content {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-alert-warning .sd-alert-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-warning .sd-alert-content {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-warning.sd-alert-with-title .sd-alert-content {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-alert-error .sd-alert-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-error .sd-alert-content {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-error.sd-alert-with-title .sd-alert-content {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-alert-icon {
   margin-right: 8px;
@@ -131,19 +131,19 @@
   vertical-align: -5px;
 }
 .sd-alert-normal .sd-alert-icon svg {
-  color: var(--color-neutral-4);
+  color: var(--sd-color-neutral-4);
 }
 .sd-alert-info .sd-alert-icon svg {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }
 .sd-alert-success .sd-alert-icon svg {
-  color: rgb(var(--success-6));
+  color: rgb(var(--sd-success-6));
 }
 .sd-alert-warning .sd-alert-icon svg {
-  color: rgb(var(--warning-6));
+  color: rgb(var(--sd-warning-6));
 }
 .sd-alert-error .sd-alert-icon svg {
-  color: rgb(var(--danger-6));
+  color: rgb(var(--sd-danger-6));
 }
 .sd-alert-close-btn {
   top: 4px;
@@ -151,7 +151,7 @@
   box-sizing: border-box;
   margin-left: 8px;
   padding: 0;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
   background-color: transparent;
   border: none;
@@ -160,7 +160,7 @@
   transition: color 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-alert-close-btn:hover {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-alert-action + .sd-alert-close-btn {
   margin-left: 8px;

package/es/anchor/anchor-link.js

@@ -16,6 +16,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		class: normalizeClass(`${_ctx.prefixCls}-sublist`)
 	}, [renderSlot(_ctx.$slots, "sublist")], 2)) : createCommentVNode("", true)], 2);
 }
-var anchor_link_default = /* @__PURE__ */ _plugin_vue_export_helper_default(anchor_link_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var anchor_link_default = /*#__PURE__*/ _plugin_vue_export_helper_default(anchor_link_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { anchor_link_default as default };

package/es/anchor/anchor.js

@@ -12,6 +12,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		class: normalizeClass(`${_ctx.prefixCls}-line-slider`)
 	}, null, 2)) : createCommentVNode("", true), createElementVNode("ul", { class: normalizeClass(`${_ctx.prefixCls}-list`) }, [renderSlot(_ctx.$slots, "default")], 2)], 2);
 }
-var anchor_default = /* @__PURE__ */ _plugin_vue_export_helper_default(anchor_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var anchor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(anchor_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { anchor_default as default };

package/es/anchor/style/index.css

@@ -28,7 +28,7 @@
   width: 2px;
   height: 12px;
   margin-top: 9.0005px;
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
   transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-anchor-list {
@@ -44,7 +44,7 @@
   left: -4px;
   width: 2px;
   height: 100%;
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
   content: "";
 }
 .sd-anchor-sublist {
@@ -61,22 +61,22 @@
   margin-bottom: 2px;
   padding: 4px 8px;
   overflow: hidden;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 14px;
   line-height: 1.5715;
   white-space: nowrap;
   text-decoration: none;
   text-overflow: ellipsis;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
   cursor: pointer;
 }
 .sd-anchor-link-item .sd-anchor-link:hover {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-anchor-link-active > .sd-anchor-link {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-weight: 500;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
@@ -90,7 +90,7 @@
   display: none;
 }
 .sd-anchor-line-less .sd-anchor-link-active > .sd-anchor-link {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
   font-weight: 500;
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }

package/es/auto-complete/auto-complete.d.ts

@@ -93,17 +93,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<VirtualListProps>;
     };
 }>> & Readonly<{
-    onSearch?: ((_value: string) => any) | undefined;
     onClear?: ((_ev: Event) => any) | undefined;
+    onSearch?: ((_value: string) => any) | undefined;
     onChange?: ((_value: string) => any) | undefined;
     onSelect?: ((_value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
     onDropdownScroll?: ((_ev: Event) => any) | undefined;
     onDropdownReachBottom?: ((_ev: Event) => any) | undefined;
 }>, {
-    data: (string | number | SelectOptionData | SelectOptionGroup)[];
-    disabled: boolean;
     strict: boolean;
+    disabled: boolean;
+    data: (string | number | SelectOptionData | SelectOptionGroup)[];
     defaultValue: string;
     modelValue: string;
     allowClear: boolean;

package/es/auto-complete/auto-complete.js

@@ -8,7 +8,6 @@ import { resolveDropdownVirtualListProps } from "../_utils/virtual-dropdown.js";
 import Input from "../input/index.js";
 import { getKeyFromValue } from "../select/utils.js";
 import { useSelect } from "../select/hooks/use-select.js";
-import option_default from "../select/option.js";
 import select_dropdown_default from "../select/select-dropdown.js";
 import Trigger from "../trigger/index.js";
 import { computed, createVNode, defineComponent, mergeProps, ref, toRef, toRefs, watch } from "vue";
@@ -219,7 +218,7 @@ var auto_complete_default = /* @__PURE__ */ defineComponent({
 		const handleDropdownReachBottom = (e) => {
 			emit("dropdownReachBottom", e);
 		};
-		const { validOptions, optionInfoMap, validOptionInfos, handleKeyDown } = useSelect({
+		const { validOptions, optionInfoMap, validOptionInfos, activeKey, setActiveKey, handleKeyDown } = useSelect({
 			options: data,
 			inputValue: computedValue,
 			filterOption: mergedFilterOption,
@@ -239,16 +238,31 @@ var auto_complete_default = /* @__PURE__ */ defineComponent({
 			}
 			return () => item.label;
 		};
+		const optionPrefixCls = getPrefixCls("select-option");
 		const renderOption = (item) => {
-			return createVNode(option_default, {
-				"ref": (ref) => {
-					if (ref === null || ref === void 0 ? void 0 : ref.$el) optionRefs.value[item.key] = ref.$el;
+			const isActive = activeKey.value === item.key;
+			const cls = [optionPrefixCls, {
+				[`${optionPrefixCls}-active`]: isActive,
+				[`${optionPrefixCls}-disabled`]: item.disabled
+			}];
+			return createVNode("li", {
+				"ref": (el) => {
+					var _el$$el;
+					const element = (_el$$el = el === null || el === void 0 ? void 0 : el.$el) !== null && _el$$el !== void 0 ? _el$$el : el;
+					if (element instanceof HTMLElement) optionRefs.value[item.key] = element;
 				},
 				"key": item.key,
-				"value": item.value,
-				"disabled": item.disabled,
-				"internal": true
-			}, { default: getOptionContentFunc(item) });
+				"class": cls,
+				"onClick": (ev) => {
+					if (!item.disabled) handleSelect(item.key, ev);
+				},
+				"onMouseenter": () => {
+					if (!item.disabled) setActiveKey(item.key);
+				},
+				"onMouseleave": () => {
+					if (!item.disabled) setActiveKey();
+				}
+			}, [createVNode("span", { "class": `${optionPrefixCls}-content` }, [getOptionContentFunc(item)()])]);
 		};
 		const renderDropdown = () => {
 			return createVNode(select_dropdown_default, {

package/es/auto-complete/index.d.ts

@@ -50,8 +50,8 @@ declare const AutoComplete: {
             type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
         };
     }>> & Readonly<{
-        onSearch?: ((_value: string) => any) | undefined;
         onClear?: ((_ev: Event) => any) | undefined;
+        onSearch?: ((_value: string) => any) | undefined;
         onChange?: ((_value: string) => any) | undefined;
         onSelect?: ((_value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
@@ -72,9 +72,9 @@ declare const AutoComplete: {
         dropdownScroll: (_ev: Event) => true;
         dropdownReachBottom: (_ev: Event) => true;
     }, import("vue").PublicProps, {
-        data: (string | number | SelectOptionData | SelectOptionGroup)[];
-        disabled: boolean;
         strict: boolean;
+        disabled: boolean;
+        data: (string | number | SelectOptionData | SelectOptionGroup)[];
         defaultValue: string;
         modelValue: string;
         allowClear: boolean;
@@ -125,8 +125,8 @@ declare const AutoComplete: {
             type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
         };
     }>> & Readonly<{
-        onSearch?: ((_value: string) => any) | undefined;
         onClear?: ((_ev: Event) => any) | undefined;
+        onSearch?: ((_value: string) => any) | undefined;
         onChange?: ((_value: string) => any) | undefined;
         onSelect?: ((_value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
@@ -139,9 +139,9 @@ declare const AutoComplete: {
         focus(): void;
         blur(): void;
     }, {
-        data: (string | number | SelectOptionData | SelectOptionGroup)[];
-        disabled: boolean;
         strict: boolean;
+        disabled: boolean;
+        data: (string | number | SelectOptionData | SelectOptionGroup)[];
         defaultValue: string;
         modelValue: string;
         allowClear: boolean;
@@ -189,8 +189,8 @@ declare const AutoComplete: {
         type: import("vue").PropType<import("../_components/virtual-list/interface").VirtualListProps>;
     };
 }>> & Readonly<{
-    onSearch?: ((_value: string) => any) | undefined;
     onClear?: ((_ev: Event) => any) | undefined;
+    onSearch?: ((_value: string) => any) | undefined;
     onChange?: ((_value: string) => any) | undefined;
     onSelect?: ((_value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
@@ -211,9 +211,9 @@ declare const AutoComplete: {
     dropdownScroll: (_ev: Event) => true;
     dropdownReachBottom: (_ev: Event) => true;
 }, string, {
-    data: (string | number | SelectOptionData | SelectOptionGroup)[];
-    disabled: boolean;
     strict: boolean;
+    disabled: boolean;
+    data: (string | number | SelectOptionData | SelectOptionGroup)[];
     defaultValue: string;
     modelValue: string;
     allowClear: boolean;

package/es/auto-complete/style/index.css

@@ -23,9 +23,9 @@
  * status: default / disabled / selected / hover
  **********************************************/
 .sd-autocomplete-popup .sd-select-popup {
-  background-color: var(--color-bg-popup);
-  border: 1px solid var(--color-fill-3);
-  border-radius: var(--border-radius-medium);
+  background-color: var(--sd-color-bg-popup);
+  border: 1px solid var(--sd-color-fill-3);
+  border-radius: var(--sd-border-radius-medium);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 .sd-autocomplete-popup .sd-select-popup .sd-select-popup-inner {

package/es/avatar/avatar.js

@@ -42,6 +42,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		style: normalizeStyle(_ctx.computedTriggerIconStyle)
 	}, [renderSlot(_ctx.$slots, "trigger-icon")], 6)) : createCommentVNode("", true)], 6);
 }
-var avatar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(avatar_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(avatar_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { avatar_default as default };

package/es/avatar/avatar.vue_vue_type_script_lang.js

@@ -1,5 +1,5 @@
 import { configProviderInjectionKey } from "../config-provider/context.js";
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isNumber } from "../_utils/is.js";
 import IconLoading from "../icon/icon-loading/index.js";

package/es/avatar/style/index.css

@@ -22,25 +22,25 @@
   box-sizing: border-box;
   width: 40px;
   height: 40px;
-  color: var(--color-white);
+  color: var(--sd-color-white);
   font-size: 20px;
   white-space: nowrap;
   vertical-align: middle;
-  background-color: var(--color-fill-4);
+  background-color: var(--sd-color-fill-4);
 }
 .sd-avatar-circle {
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--sd-border-radius-circle);
 }
 .sd-avatar-circle .sd-avatar-image {
   overflow: hidden;
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--sd-border-radius-circle);
 }
 .sd-avatar-square {
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--sd-border-radius-medium);
 }
 .sd-avatar-square .sd-avatar-image {
   overflow: hidden;
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--sd-border-radius-medium);
 }
 .sd-avatar-text {
   position: absolute;
@@ -74,12 +74,12 @@
   z-index: 1;
   width: 20px;
   height: 20px;
-  color: var(--color-fill-4);
+  color: var(--sd-color-fill-4);
   font-size: 12px;
   line-height: 20px;
   text-align: center;
-  background-color: var(--color-neutral-2);
-  border-radius: var(--border-radius-circle);
+  background-color: var(--sd-color-neutral-2);
+  border-radius: var(--sd-border-radius-circle);
   transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-avatar-trigger-icon-mask {
@@ -92,15 +92,15 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  color: var(--color-white);
+  color: var(--sd-color-white);
   font-size: 16px;
   background-color: color-mix(in srgb, #1d2129 60%, transparent);
-  border-radius: var(--border-radius-medium);
+  border-radius: var(--sd-border-radius-medium);
   opacity: 0;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-avatar-circle .sd-avatar-trigger-icon-mask {
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--sd-border-radius-circle);
 }
 .sd-avatar-with-trigger-icon {
   cursor: pointer;
@@ -110,7 +110,7 @@
   opacity: 1;
 }
 .sd-avatar-with-trigger-icon:hover .sd-avatar-trigger-icon-button {
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
 }
 .sd-avatar-rtl {
   direction: rtl;
@@ -124,7 +124,7 @@
   line-height: 0;
 }
 .sd-avatar-group-max-count-avatar {
-  color: var(--color-white);
+  color: var(--sd-color-white);
   font-size: 20px;
   cursor: default;
 }
@@ -132,7 +132,7 @@
   direction: rtl;
 }
 .sd-avatar-group .sd-avatar {
-  border: 2px solid var(--color-bg-2);
+  border: 2px solid var(--sd-color-bg-2);
 }
 .sd-avatar-group .sd-avatar:not(:first-child) {
   margin-left: -10px;

package/es/back-top/back-top.js

@@ -13,6 +13,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		_: 3
 	});
 }
-var back_top_default = /* @__PURE__ */ _plugin_vue_export_helper_default(back_top_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var back_top_default = /*#__PURE__*/ _plugin_vue_export_helper_default(back_top_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { back_top_default as default };

package/es/back-top/style/index.css

@@ -24,18 +24,18 @@
 .sd-back-top-btn {
   width: 40px;
   height: 40px;
-  color: var(--color-white);
+  color: var(--sd-color-white);
   font-size: 12px;
   text-align: center;
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
   border: none;
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--sd-border-radius-circle);
   outline: none;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0, 0, 1, 1);
 }
 .sd-back-top-btn:hover {
-  background-color: rgb(var(--primary-5));
+  background-color: rgb(var(--sd-primary-5));
 }
 .sd-back-top-btn svg {
   font-size: 14px;

package/es/badge/badge.d.ts

@@ -60,8 +60,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
     };
 }>> & Readonly<{}>, {
-    offset: number[];
     dot: boolean;
+    offset: number[];
     maxCount: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/badge/badge.js

@@ -1,5 +1,5 @@
 import { configProviderInjectionKey } from "../config-provider/context.js";
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { computed, createVNode, defineComponent, inject, toRefs } from "vue";
 //#region components/badge/badge.tsx

package/es/badge/index.d.ts

@@ -31,8 +31,8 @@ declare const Badge: {
             type: NumberConstructor;
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        offset: number[];
         dot: boolean;
+        offset: number[];
         maxCount: number;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -70,8 +70,8 @@ declare const Badge: {
             type: NumberConstructor;
         };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
-        offset: number[];
         dot: boolean;
+        offset: number[];
         maxCount: number;
     }>;
     __isFragment?: never;
@@ -106,8 +106,8 @@ declare const Badge: {
         type: NumberConstructor;
     };
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    offset: number[];
     dot: boolean;
+    offset: number[];
     maxCount: number;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;