@sdata/web-vue 3.2.1 → 3.3.1

package/es/_components/virtual-list-v2/virtual-list.vue_vue_type_script_lang.js

@@ -0,0 +1,179 @@
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../../_utils/global-config.js";
+import { isNumber, isObject } from "../../_utils/is.js";
+import Scrollbar from "../../scrollbar/index.js";
+import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectWithoutProperties.js";
+import { useSize } from "./hooks/use-size.js";
+import virtual_list_item_default from "./virtual-list-item.js";
+import { computed, defineComponent, nextTick, ref, toRefs } from "vue";
+//#region components/_components/virtual-list-v2/virtual-list.vue?vue&type=script&lang.ts
+var _excluded = ["outerStyle"];
+var virtual_list_vue_vue_type_script_lang_default = defineComponent({
+	name: "VirtualList",
+	components: {
+		Scrollbar,
+		VirtualListItem: virtual_list_item_default
+	},
+	props: {
+		height: {
+			type: [Number, String],
+			default: 200
+		},
+		data: {
+			type: Array,
+			default: () => []
+		},
+		threshold: {
+			type: Number,
+			default: 0
+		},
+		itemKey: {
+			type: String,
+			default: "key"
+		},
+		fixedSize: {
+			type: Boolean,
+			default: false
+		},
+		estimatedSize: {
+			type: Number,
+			default: 30
+		},
+		buffer: {
+			type: Number,
+			default: 10
+		},
+		component: {
+			type: [String, Object],
+			default: "div"
+		},
+		listAttrs: { type: Object },
+		contentAttrs: { type: Object },
+		paddingPosition: {
+			type: String,
+			default: "content"
+		},
+		scrollbar: {
+			type: [Boolean, Object],
+			default: false
+		}
+	},
+	emits: {
+		scroll: (ev) => true,
+		reachBottom: (ev) => true
+	},
+	setup(props, { emit }) {
+		const { data, itemKey, fixedSize, estimatedSize, buffer, height } = toRefs(props);
+		const prefixCls = getPrefixCls("virtual-list");
+		const mergedComponent = computed(() => {
+			if (isObject(props.component)) return _objectSpread2({
+				container: "div",
+				list: "div",
+				content: "div"
+			}, props.component);
+			return {
+				container: props.component,
+				list: "div",
+				content: "div"
+			};
+		});
+		const containerRef = ref();
+		const contentRef = ref();
+		const scrollbarEnabled = computed(() => props.scrollbar !== false);
+		const scrollbarProps = computed(() => isObject(props.scrollbar) ? props.scrollbar : {});
+		const containerComponent = computed(() => scrollbarEnabled.value ? Scrollbar : mergedComponent.value.container);
+		const style = computed(() => {
+			return {
+				height: isNumber(height.value) ? `${height.value}px` : height.value,
+				overflow: scrollbarEnabled.value ? "hidden" : "auto"
+			};
+		});
+		const containerProps = computed(() => {
+			if (!scrollbarEnabled.value) return {};
+			const _scrollbarProps$value = scrollbarProps.value, { outerStyle } = _scrollbarProps$value, rest = _objectWithoutProperties(_scrollbarProps$value, _excluded);
+			const heightStyle = { height: style.value.height };
+			return _objectSpread2(_objectSpread2({}, rest), {}, { outerStyle: Array.isArray(outerStyle) ? [heightStyle, ...outerStyle] : outerStyle ? [heightStyle, outerStyle] : heightStyle });
+		});
+		const getScrollElement = () => {
+			var _value$elements, _ref, _elements$scrollOffse;
+			const value = containerRef.value;
+			if (!value) return;
+			if (typeof value.scrollTop === "number") return value;
+			const elements = (_value$elements = value.elements) === null || _value$elements === void 0 ? void 0 : _value$elements.call(value);
+			return (_ref = (_elements$scrollOffse = elements === null || elements === void 0 ? void 0 : elements.scrollOffsetElement) !== null && _elements$scrollOffse !== void 0 ? _elements$scrollOffse : elements === null || elements === void 0 ? void 0 : elements.viewport) !== null && _ref !== void 0 ? _ref : value.$el;
+		};
+		const setContainerScrollTop = (top) => {
+			const value = containerRef.value;
+			if (value && typeof value.scrollTop === "function") {
+				value.scrollTop(top);
+				return;
+			}
+			const element = getScrollElement();
+			if (element) element.scrollTop = top;
+		};
+		const getContainerScrollTop = () => {
+			var _getScrollElement$scr, _getScrollElement;
+			return (_getScrollElement$scr = (_getScrollElement = getScrollElement()) === null || _getScrollElement === void 0 ? void 0 : _getScrollElement.scrollTop) !== null && _getScrollElement$scr !== void 0 ? _getScrollElement$scr : 0;
+		};
+		const dataKeys = computed(() => data.value.map((item, index) => {
+			var _item$itemKey$value;
+			return (_item$itemKey$value = item[itemKey.value]) !== null && _item$itemKey$value !== void 0 ? _item$itemKey$value : index;
+		}));
+		const { frontPadding, behindPadding, start, end, getStartByScroll, setItemSize, hasItemSize, setStart, getScrollOffset } = useSize({
+			dataKeys,
+			fixedSize,
+			estimatedSize,
+			buffer
+		});
+		const currentList = computed(() => {
+			if (props.threshold && data.value.length <= props.threshold) return data.value;
+			return data.value.slice(start.value, end.value);
+		});
+		const onScroll = (ev) => {
+			const { scrollTop, scrollHeight, offsetHeight } = ev.target;
+			const _start = getStartByScroll(scrollTop);
+			if (_start !== start.value) {
+				setStart(_start);
+				nextTick(() => {
+					scrollTo(scrollTop);
+				});
+			}
+			emit("scroll", ev);
+			if (Math.floor(scrollHeight - (scrollTop + offsetHeight)) <= 0) emit("reachBottom", ev);
+		};
+		const scrollTo = (options) => {
+			var _options$index, _options$key;
+			if (!containerRef.value) return;
+			if (isNumber(options)) {
+				setContainerScrollTop(options);
+				return;
+			}
+			const _index = (_options$index = options.index) !== null && _options$index !== void 0 ? _options$index : dataKeys.value.indexOf((_options$key = options.key) !== null && _options$key !== void 0 ? _options$key : "");
+			setStart(_index - buffer.value);
+			setContainerScrollTop(getScrollOffset(_index));
+			nextTick(() => {
+				const _scrollTop = getScrollOffset(_index);
+				if (_scrollTop !== getContainerScrollTop()) setContainerScrollTop(_scrollTop);
+			});
+		};
+		return {
+			prefixCls,
+			containerRef,
+			contentRef,
+			frontPadding,
+			currentList,
+			behindPadding,
+			onScroll,
+			setItemSize,
+			hasItemSize,
+			start,
+			scrollTo,
+			style,
+			containerProps,
+			containerComponent,
+			mergedComponent
+		};
+	}
+});
+//#endregion
+export { virtual_list_vue_vue_type_script_lang_default as default };

package/es/_hooks/use-config-provider-prop.d.ts

@@ -4,7 +4,7 @@ interface UseConfigProviderPropOptions<T> {
     propNames: readonly string[];
     getGlobalValue: (configProviderCtx: ConfigProvider | undefined) => T | undefined;
 }
-export declare const useConfigProviderProp: <T>(propValue: Ref<T | undefined>, options: UseConfigProviderPropOptions<T>) => {
+export declare const useConfigProviderProp: <T>(propValue: Ref<T>, options: UseConfigProviderPropOptions<T>) => {
     mergedValue: import("vue").ComputedRef<T | undefined>;
 };
 export {};

package/es/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+export { _plugin_vue_export_helper_default as default };

package/es/color-picker/hooks/use-control-block.js

@@ -1,9 +1,11 @@
+import { throttleByRaf } from "../../_utils/throttle-by-raf.js";
 import { ref } from "vue";
 //#region components/color-picker/hooks/use-control-block.ts
 var useControlBlock = ({ value, onChange }) => {
 	const active = ref(false);
 	const blockRef = ref();
 	const handlerRef = ref();
+	const throttledChange = throttleByRaf(onChange);
 	const getPercentNumber = (value, max) => {
 		if (value < 0) return 0;
 		if (value > max) return 1;
@@ -14,7 +16,7 @@ var useControlBlock = ({ value, onChange }) => {
 		const { clientX, clientY } = ev;
 		const rect = blockRef.value.getBoundingClientRect();
 		const newValue = [getPercentNumber(clientX - rect.x, rect.width), getPercentNumber(clientY - rect.y, rect.height)];
-		if (newValue[0] !== value[0] || newValue[1] !== value[1]) onChange === null || onChange === void 0 || onChange(newValue);
+		if (newValue[0] !== value[0] || newValue[1] !== value[1]) throttledChange(newValue);
 	};
 	const removeListener = () => {
 		active.value = false;
@@ -23,6 +25,7 @@ var useControlBlock = ({ value, onChange }) => {
 		window.removeEventListener("contextmenu", removeListener);
 	};
 	const onMouseDown = (ev) => {
+		ev.preventDefault();
 		active.value = true;
 		setCurrentPosition(ev);
 		window.addEventListener("mousemove", onMouseMove);

package/es/components.d.ts

@@ -126,6 +126,7 @@ declare module 'vue' {
         SdTimePicker: SDVue['TimePicker'];
         SdTimeline: SDVue['Timeline'];
         SdTimelineItem: SDVue['TimelineItem'];
+        SdToolbar: SDVue['Toolbar'];
         SdTooltip: SDVue['Tooltip'];
         SdTour: SDVue['Tour'];
         SdTransfer: SDVue['Transfer'];

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

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import { VirtualListProps } from '../_components/virtual-list/interface';
 import { Size } from '../_utils/constant';
 import { SdLang } from '../locale/interface';
-import { ConfigProviderDatePicker, ConfigProviderDrawer, type JsonFormProviderConfig, ConfigProviderModal } from './context';
+import { ConfigProviderDatePicker, ConfigProviderDrawer, type JsonFormProviderConfig, ConfigProviderModal, ConfigProviderPagination } from './context';
 import { SdThemeConfig, SdThemeMode } from './theme';
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -63,6 +63,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     drawer: {
         type: PropType<ConfigProviderDrawer>;
     };
+    pagination: {
+        type: PropType<ConfigProviderPagination>;
+    };
     jsonForm: {
         type: PropType<JsonFormProviderConfig>;
     };
@@ -127,6 +130,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     drawer: {
         type: PropType<ConfigProviderDrawer>;
     };
+    pagination: {
+        type: PropType<ConfigProviderPagination>;
+    };
     jsonForm: {
         type: PropType<JsonFormProviderConfig>;
     };

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

@@ -115,6 +115,11 @@ var config_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		*/
 		drawer: { type: Object },
 		/**
+		* @zh Pagination 组件默认配置
+		* @en Default config for Pagination
+		*/
+		pagination: { type: Object },
+		/**
 		* @zh JsonForm 组件默认配置
 		* @en Default config for JsonForm
 		*/
@@ -146,7 +151,7 @@ var config_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		* @version 2.28.0
 		*/
 		const slots = useSlots();
-		const { prefixCls, locale, size, allowClear, autoInsertSpaceInButton, allowSearch, virtualListProps, updateAtScroll, scrollToClose, exchangeTime, rtl, datePicker, modal, drawer } = toRefs(props);
+		const { prefixCls, locale, size, allowClear, autoInsertSpaceInButton, allowSearch, virtualListProps, updateAtScroll, scrollToClose, exchangeTime, rtl, datePicker, modal, drawer, pagination } = toRefs(props);
 		const config = reactive({
 			slots,
 			prefixCls,
@@ -163,6 +168,7 @@ var config_provider_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			datePicker,
 			modal,
 			drawer,
+			pagination,
 			jsonForm: toRefs(props).jsonForm,
 			theme: normalizeTheme(props.theme)
 		});

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

@@ -7,6 +7,7 @@ import { ButtonProps } from '../button';
 import { ShortcutType, WeekStart } from '../date-picker/interface';
 import { EllipsisTooltipProps } from '../ellipsis';
 import { SdLang } from '../locale/interface';
+import { PaginationSelectProps } from '../pagination/interface';
 import { SDThemeNormalized } from './theme';
 export interface ConfigProviderModal {
     mask?: boolean;
@@ -53,6 +54,18 @@ export interface ConfigProviderDatePicker {
     dayStartOfWeek?: WeekStart;
     abbreviation?: boolean;
 }
+export interface ConfigProviderPagination {
+    pageSizeOptions?: number[];
+    defaultPageSize?: number;
+    showTotal?: boolean;
+    showMore?: boolean;
+    showJumper?: boolean;
+    showPageSize?: boolean;
+    autoAdjust?: boolean;
+    baseSize?: number;
+    bufferSize?: number;
+    pageSizeProps?: PaginationSelectProps;
+}
 export interface ConfigProvider {
     slots: Slots;
     prefixCls?: string;
@@ -69,6 +82,7 @@ export interface ConfigProvider {
     datePicker?: ConfigProviderDatePicker;
     modal?: ConfigProviderModal;
     drawer?: ConfigProviderDrawer;
+    pagination?: ConfigProviderPagination;
     jsonForm?: JsonFormProviderConfig;
     theme?: SDThemeNormalized;
 }

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

@@ -57,6 +57,9 @@ declare const ConfigProvider: {
         drawer: {
             type: import("vue").PropType<import("./context.ts").ConfigProviderDrawer>;
         };
+        pagination: {
+            type: import("vue").PropType<import("./context.ts").ConfigProviderPagination>;
+        };
         jsonForm: {
             type: import("vue").PropType<import("./context.ts").JsonFormProviderConfig>;
         };
@@ -138,6 +141,9 @@ declare const ConfigProvider: {
         drawer: {
             type: import("vue").PropType<import("./context.ts").ConfigProviderDrawer>;
         };
+        pagination: {
+            type: import("vue").PropType<import("./context.ts").ConfigProviderPagination>;
+        };
         jsonForm: {
             type: import("vue").PropType<import("./context.ts").JsonFormProviderConfig>;
         };
@@ -216,6 +222,9 @@ declare const ConfigProvider: {
     drawer: {
         type: import("vue").PropType<import("./context.ts").ConfigProviderDrawer>;
     };
+    pagination: {
+        type: import("vue").PropType<import("./context.ts").ConfigProviderPagination>;
+    };
     jsonForm: {
         type: import("vue").PropType<import("./context.ts").JsonFormProviderConfig>;
     };

package/es/index.css

@@ -2709,19 +2709,18 @@ body {
   align-items: center;
   min-width: 0;
   margin-right: 4px;
-  color: var(--sd-color-text-1);
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-word;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
+  color: var(--sd-color-text-1);
   background-color: var(--sd-color-bg-2);
   border-color: var(--sd-color-fill-3);
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-2);
 }
-.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color {
-  color: var(--sd-color-white);
-}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
@@ -2796,14 +2795,14 @@ body {
   max-width: 100%;
   vertical-align: bottom;
 }
-.sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
+.sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-2);
 }
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-3);
 }
-.sd-select-view-multiple.sd-select-view-disabled .sd-select-view-tag {
+.sd-select-view-multiple.sd-select-view-disabled .sd-select-view-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   color: var(--sd-color-text-4);
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-3);
@@ -5251,6 +5250,75 @@ body.sd-tour-active .sd-tour-popover * {
   resize: vertical;
 }
 
+.sd-toolbar {
+  width: 100%;
+}
+.sd-toolbar-inner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+  width: 100%;
+}
+.sd-toolbar-with-border .sd-toolbar-inner {
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--sd-color-neutral-3);
+}
+.sd-toolbar-body {
+  flex: 1 1 0;
+  min-width: 0;
+  max-height: var(--toolbar-body-max-height);
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.sd-toolbar-body--schema .sd-form {
+  display: grid;
+  flex: 1;
+  grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
+  gap: 8px;
+  width: 100%;
+  background-color: var(--sd-color-bg-2);
+}
+.sd-toolbar-body--schema .sd-form > * {
+  max-width: var(--toolbar-item-max-width);
+}
+.sd-toolbar-body--schema .sd-form-item {
+  margin-bottom: 0;
+}
+.sd-toolbar-body--schema .sd-form-item-content {
+  min-height: var(--toolbar-item-height);
+}
+.sd-toolbar-body--max-width .sd-form {
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--toolbar-item-max-width), var(--toolbar-span-width)), var(--toolbar-item-max-width)));
+}
+.sd-toolbar-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  align-items: center;
+  align-self: flex-end;
+  white-space: nowrap;
+}
+.sd-toolbar-expand {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+.sd-toolbar-expand-icon {
+  transition: transform 0.3s ease;
+}
+.sd-toolbar-expand-icon--up {
+  transform: rotate(180deg);
+}
+@media screen and (width <= 640px) {
+  .sd-toolbar-body--schema .sd-form {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+  .sd-toolbar-body--schema .sd-form-item {
+    grid-column: span 1 !important;
+  }
+}
+
 .sd-tag-group {
   position: relative;
   display: inline-flex;
@@ -6232,6 +6300,9 @@ body.sd-tour-active .sd-tour-popover * {
   grid-column: 1/-1;
   grid-template-columns: var(--sd-table-grid-template, minmax(0, 1fr));
 }
+.sd-table-thead > .sd-table-tr, .sd-table-tbody > .sd-table-tr, .sd-table-tfoot-content > .sd-table-tr {
+  display: contents;
+}
 .sd-table-tbody > .sd-virtual-list, .sd-table-tbody > .sd-table-body {
   grid-column: 1/-1;
   width: 100%;
@@ -6566,9 +6637,10 @@ body.sd-tour-active .sd-tour-popover * {
   flex-direction: column;
   width: auto;
   height: 100%;
+  overflow: hidden;
 }
 .sd-table-container .sd-table-content-scroll-x {
-  overflow: auto hidden;
+  overflow: hidden;
 }
 .sd-table-container::before, .sd-table-container::after {
   position: absolute;
@@ -6597,6 +6669,7 @@ body.sd-tour-active .sd-tour-popover * {
   box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
 }
 .sd-table-header {
+  flex: 0 0 auto;
   width: 100%;
   min-width: 100%;
   overflow: hidden;
@@ -6621,13 +6694,15 @@ body.sd-tour-active .sd-tour-popover * {
   background-color: transparent;
 }
 .sd-table.sd-table-empty .sd-table-header {
-  overflow-x: auto;
+  overflow-x: hidden;
 }
 .sd-table-body {
   position: relative;
+  flex: 1 1 auto;
   width: 100%;
-  min-height: 40px;
-  overflow: auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   background-color: var(--sd-color-bg-2);
 }
 .sd-table-border .sd-table-container {
@@ -6747,7 +6822,7 @@ body.sd-tour-active .sd-tour-popover * {
   z-index: 1;
   flex-shrink: 0;
   width: 100%;
-  overflow-x: auto;
+  overflow-x: hidden;
   background-color: var(--sd-color-neutral-2);
   box-shadow: 0 -1px 0 var(--sd-color-neutral-3);
   scrollbar-color: transparent transparent;
@@ -11538,19 +11613,18 @@ body.sd-tour-active .sd-tour-popover * {
   align-items: center;
   min-width: 0;
   margin-right: 4px;
-  color: var(--sd-color-text-1);
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-word;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
+  color: var(--sd-color-text-1);
   background-color: var(--sd-color-bg-2);
   border-color: var(--sd-color-fill-3);
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-2);
 }
-.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color {
-  color: var(--sd-color-white);
-}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
@@ -11625,14 +11699,14 @@ body.sd-tour-active .sd-tour-popover * {
   max-width: 100%;
   vertical-align: bottom;
 }
-.sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
+.sd-input-tag.sd-input-tag-focus .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-2);
 }
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-3);
 }
-.sd-input-tag.sd-input-tag-disabled .sd-input-tag-tag {
+.sd-input-tag.sd-input-tag-disabled .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   color: var(--sd-color-text-4);
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-3);

package/es/index.d.ts

@@ -145,6 +145,8 @@ export { default as Tag } from './tag';
 export type { TagColor, TagInstance, TagProps } from './tag';
 export { default as TagGroup } from './tag-group';
 export type { TagGroupFieldNames, TagGroupInstance, TagGroupObjectOption, TagGroupOption, TagGroupOptionLabel, TagGroupProps, } from './tag-group';
+export { default as Toolbar } from './toolbar';
+export type { ToolbarEmits, ToolbarInstance, ToolbarModelValue, ToolbarProps, ToolbarResetEventHandler, ToolbarSearchEventHandler, } from './toolbar';
 export { default as Textarea } from './textarea';
 export type { TextareaInstance } from './textarea';
 export { default as TimePicker } from './time-picker';

package/es/index.js

@@ -135,6 +135,7 @@ import TagGroup from "./tag-group/index.js";
 import ThemeProvider from "./theme-provider/index.js";
 import item_default$1 from "./timeline/item.js";
 import Timeline from "./timeline/index.js";
+import Toolbar from "./toolbar/index.js";
 import Tour from "./tour/index.js";
 import paragraph_default from "./typography/paragraph.js";
 import text_default from "./typography/text.js";
@@ -143,4 +144,4 @@ import Typography from "./typography/index.js";
 import Upload from "./upload/index.js";
 import Watermark from "./watermark/index.js";
 import SDVue from "./sd-vue.js";
-export { A2UI_0_8, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Secret, Select, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, TimePicker, Timeline, item_default$1 as TimelineItem, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, defineJsonFormComponents, defineJsonFormSchemas, getCssVarToken, getLocale, useFormItem, useLocale };
+export { A2UI_0_8, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Secret, Select, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, defineJsonFormComponents, defineJsonFormSchemas, getCssVarToken, getLocale, useFormItem, useLocale };

package/es/index.scss

@@ -16,6 +16,7 @@
 @use '@components/timeline/style/index.scss' as *;
 @use '@components/time-picker/style/index.scss' as *;
 @use '@components/textarea/style/index.scss' as *;
+@use '@components/toolbar/style/index.scss' as *;
 @use '@components/tag/style/index.scss' as *;
 @use '@components/tag-group/style/index.scss' as *;
 @use '@components/tabs/style/index.scss' as *;

package/es/input-tag/style/index.css

@@ -613,19 +613,18 @@
   align-items: center;
   min-width: 0;
   margin-right: 4px;
-  color: var(--sd-color-text-1);
   font-size: 12px;
   white-space: pre-wrap;
   word-break: break-word;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
+  color: var(--sd-color-text-1);
   background-color: var(--sd-color-bg-2);
   border-color: var(--sd-color-fill-3);
 }
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-2);
 }
-.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color {
-  color: var(--sd-color-white);
-}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
@@ -700,14 +699,14 @@
   max-width: 100%;
   vertical-align: bottom;
 }
-.sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
+.sd-input-tag.sd-input-tag-focus .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-2);
 }
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag .sd-icon-hover:hover::before {
   background-color: var(--sd-color-fill-3);
 }
-.sd-input-tag.sd-input-tag-disabled .sd-input-tag-tag {
+.sd-input-tag.sd-input-tag-disabled .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
   color: var(--sd-color-text-4);
   background-color: var(--sd-color-fill-2);
   border-color: var(--sd-color-fill-3);