@sdata/web-vue 1.10.0 → 1.11.1

package/es/_components/input-label/style/input-label.scss

@@ -1,60 +1,20 @@
 @use 'sass:math';
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
 @use '@style/mixins/index.scss' as *;
+@use '@components/input/style/token.scss' as inputToken;
 @use '@components/input/style/token.scss' as *;
 @use '@components/input/style/input.scss' as *;
 
-$less-vars: (
-  'input-border-width': $input-border-width,
-  'input-color-addon-border': $input-color-addon-border,
-  'input-color-addon-border_default': $input-color-addon-border_default,
-  'input-color-bg': $input-color-bg,
-  'input-color-bg_disabled': $input-color-bg_disabled,
-  'input-color-bg_error': $input-color-bg_error,
-  'input-color-bg_error_focus': $input-color-bg_error_focus,
-  'input-color-bg_error_hover': $input-color-bg_error_hover,
-  'input-color-bg_focus': $input-color-bg_focus,
-  'input-color-bg_hover': $input-color-bg_hover,
-  'input-color-border': $input-color-border,
-  'input-color-border_disabled': $input-color-border_disabled,
-  'input-color-border_error': $input-color-border_error,
-  'input-color-border_error_focus': $input-color-border_error_focus,
-  'input-color-border_error_hover': $input-color-border_error_hover,
-  'input-color-border_focus': $input-color-border_focus,
-  'input-color-border_hover': $input-color-border_hover,
-  'input-color-icon-clear-bg_hover': $input-color-icon-clear-bg_hover,
-  'input-color-shadow_error_focus': $input-color-shadow_error_focus,
-  'input-color-shadow_focus': $input-color-shadow_focus,
-  'input-color-text': $input-color-text,
-  'input-color-text_disabled': $input-color-text_disabled,
-  'input-feedback-icon-color_error': $input-feedback-icon-color_error,
-  'input-feedback-icon-color_success': $input-feedback-icon-color_success,
-  'input-feedback-icon-color_validating': $input-feedback-icon-color_validating,
-  'input-feedback-icon-color_warning': $input-feedback-icon-color_warning,
-  'input-group-border-radius_compact': $input-group-border-radius_compact,
-  'input-size-default-height': $input-size-default-height,
-  'input-size-default-font-size': $input-size-default-font-size,
-  'input-size-default-line-height': $input-size-medium-line-height,
-  'input-size-large-height': $input-size-large-height,
-  'input-size-large-font-size': $input-size-large-font-size,
-  'input-size-large-line-height': $input-size-large-line-height,
-  'input-size-medium-height': $input-size-medium-height,
-  'input-size-medium-font-size': $input-size-medium-font-size,
-  'input-size-medium-line-height': $input-size-medium-line-height,
-  'input-size-mini-font-size': $input-size-mini-font-size,
-  'input-size-mini-height': $input-size-mini-height,
-  'input-size-mini-line-height': $input-size-mini-line-height,
-  'input-size-small-height': $input-size-small-height,
-  'input-size-small-font-size': $input-size-small-font-size,
-  'input-size-small-line-height': $input-size-small-line-height,
-  'input-size-shadow_error_focus': $input-size-shadow_error_focus,
-  'input-size-shadow_focus': $input-size-shadow_focus,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('inputToken'), $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 @mixin input-label-hide-input-element() {
@@ -74,7 +34,7 @@ $less-vars: (
   }
 
   &.#{$cls}-size-#{$size} .#{$cls}-value {
-    min-height: math.round(less-var($height) - $input-border-width * 2);
+    min-height: math.round(token-var($height) - $input-border-width * 2);
   }
 }
 

package/es/_components/select-view/select-view.d.ts

@@ -144,8 +144,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     disabled: boolean;
     loading: boolean;
     showArrow: boolean;
-    allowClear: boolean;
     multiple: boolean;
+    allowClear: boolean;
     bordered: boolean;
     maxTagCount: number | "responsive";
     retainInputValue: boolean;

package/es/_components/select-view/style/index.css

@@ -99,13 +99,6 @@
   background-color: rgb(var(--red-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--red-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
-  background-color: rgb(var(--red-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-red.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-red.sd-tag-bordered:hover {
   border-color: rgb(var(--red-6));
@@ -118,13 +111,6 @@
   background-color: rgb(var(--orangered-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--orangered-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
-  background-color: rgb(var(--orangered-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-orangered.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-orangered.sd-tag-bordered:hover {
   border-color: rgb(var(--orangered-6));
@@ -137,13 +123,6 @@
   background-color: rgb(var(--orange-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--orange-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
-  background-color: rgb(var(--orange-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-orange.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-orange.sd-tag-bordered:hover {
   border-color: rgb(var(--orange-6));
@@ -156,13 +135,6 @@
   background-color: rgb(var(--gold-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--gold-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
-  background-color: rgb(var(--gold-3));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-gold.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-gold.sd-tag-bordered:hover {
   border-color: rgb(var(--gold-6));
@@ -175,13 +147,6 @@
   background-color: rgb(var(--lime-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--lime-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
-  background-color: rgb(var(--lime-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-lime.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-lime.sd-tag-bordered:hover {
   border-color: rgb(var(--lime-6));
@@ -194,13 +159,6 @@
   background-color: rgb(var(--green-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--green-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
-  background-color: rgb(var(--green-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-green.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-green.sd-tag-bordered:hover {
   border-color: rgb(var(--green-6));
@@ -213,13 +171,6 @@
   background-color: rgb(var(--cyan-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--cyan-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
-  background-color: rgb(var(--cyan-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-cyan.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-cyan.sd-tag-bordered:hover {
   border-color: rgb(var(--cyan-6));
@@ -232,13 +183,6 @@
   background-color: rgb(var(--blue-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--blue-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
-  background-color: rgb(var(--blue-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-blue.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-blue.sd-tag-bordered:hover {
   border-color: rgb(var(--blue-6));
@@ -251,13 +195,6 @@
   background-color: rgb(var(--sdblue-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--sdblue-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
-  background-color: rgb(var(--sdblue-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-sdblue.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-sdblue.sd-tag-bordered:hover {
   border-color: rgb(var(--sdblue-6));
@@ -270,13 +207,6 @@
   background-color: rgb(var(--purple-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--purple-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
-  background-color: rgb(var(--purple-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-purple.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-purple.sd-tag-bordered:hover {
   border-color: rgb(var(--purple-6));
@@ -289,13 +219,6 @@
   background-color: rgb(var(--pinkpurple-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--pinkpurple-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
-  background-color: rgb(var(--pinkpurple-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered:hover {
   border-color: rgb(var(--pinkpurple-6));
@@ -308,13 +231,6 @@
   background-color: rgb(var(--magenta-1));
   border: 1px solid transparent;
 }
-.sd-tag .sd-tag.sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--magenta-2));
-}
-.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
-  background-color: rgb(var(--magenta-2));
-  border-color: transparent;
-}
 .sd-tag .sd-tag-checked.sd-tag-magenta.sd-tag-bordered,
 .sd-tag .sd-tag-checked.sd-tag-magenta.sd-tag-bordered:hover {
   border-color: rgb(var(--magenta-6));

package/es/_components/virtual-list/interface.d.ts

@@ -1,5 +1,5 @@
 import type { CacheSnapshot, ClassValue, ItemSizeValue, KeyFieldValue, ScrollAlign, ScrollDirection, ScrollToOptions } from 'vue-virtual-scroller';
-import { VNode } from 'vue';
+import type { CSSProperties, VNode } from 'vue';
 import type { ScrollbarProps } from '../../scrollbar';
 export type VirtualItemKey = string | number;
 export interface InternalDataItem {
@@ -33,6 +33,15 @@ interface VirtualListCommonProps<TItem = unknown> {
     hiddenPosition?: number;
     enabled?: boolean;
     scrollbar?: boolean | ScrollbarProps;
+    threshold?: number;
+    fixedSize?: boolean;
+    estimatedSize?: number;
+    component?: keyof HTMLElementTagNameMap | Record<string, unknown>;
+    listAttrs?: Record<string, unknown>;
+    contentWrapperAttrs?: Record<string, unknown>;
+    contentAttrs?: Record<string, unknown>;
+    listStyle?: CSSProperties;
+    paddingPosition?: 'content' | 'list';
 }
 export interface VirtualListRecycleProps<TItem = unknown> extends VirtualListCommonProps<TItem> {
     gridItems?: number;

package/es/{table/hooks/use-table-virtual-size.d.ts → _components/virtual-list/use-virtual-size.d.ts}

@@ -1,9 +1,10 @@
 import { type Ref } from 'vue';
-export declare const useTableVirtualSize: ({ dataKeys, fixedSize, estimatedSize, buffer, }: {
+export declare const useVirtualSize: ({ dataKeys, fixedSize, estimatedSize, overscan, visibleCount, }: {
     dataKeys: Ref<(string | number)[]>;
     fixedSize: Ref<boolean>;
     estimatedSize: Ref<number | undefined>;
-    buffer: Ref<number>;
+    overscan: Ref<number>;
+    visibleCount: Ref<number>;
 }) => {
     frontPadding: import("vue").ComputedRef<number>;
     behindPadding: import("vue").ComputedRef<number>;
@@ -14,4 +15,5 @@ export declare const useTableVirtualSize: ({ dataKeys, fixedSize, estimatedSize,
     hasItemSize: (key: string | number) => boolean;
     setStart: (index: number) => void;
     getScrollOffset: (index: number) => number;
+    getItemSize: (index: number) => number;
 };

package/es/{table/hooks/use-table-virtual-size.js → _components/virtual-list/use-virtual-size.js}

@@ -1,6 +1,6 @@
 import { computed, onMounted, ref } from "vue";
-//#region components/table/hooks/use-table-virtual-size.ts
-var useTableVirtualSize = ({ dataKeys, fixedSize, estimatedSize, buffer }) => {
+//#region components/_components/virtual-list/use-virtual-size.ts
+var useVirtualSize = ({ dataKeys, fixedSize, estimatedSize, overscan, visibleCount }) => {
 	const firstRangeAverageSize = ref(0);
 	const sizeMap = /* @__PURE__ */ new Map();
 	const fallbackEstimatedSize = computed(() => {
@@ -9,13 +9,16 @@ var useTableVirtualSize = ({ dataKeys, fixedSize, estimatedSize, buffer }) => {
 	});
 	const total = computed(() => dataKeys.value.length);
 	const start = ref(0);
+	const range = computed(() => {
+		return Math.max(visibleCount.value + overscan.value * 2, 1);
+	});
 	const end = computed(() => {
-		const nextEnd = start.value + buffer.value * 3;
+		const nextEnd = start.value + range.value;
 		if (nextEnd > total.value) return total.value;
 		return nextEnd;
 	});
 	const maxStart = computed(() => {
-		const max = total.value - buffer.value * 3;
+		const max = total.value - range.value;
 		if (max < 0) return 0;
 		return max;
 	});
@@ -59,21 +62,14 @@ var useTableVirtualSize = ({ dataKeys, fixedSize, estimatedSize, buffer }) => {
 		if (isFixed.value) return resolvedEstimatedSize.value * start.value;
 		return getOffset(0, start.value);
 	});
-	const getOffsetIndex = (scrollOffset) => {
-		const isForward = scrollOffset >= frontPadding.value;
-		let offset = Math.abs(scrollOffset - frontPadding.value);
-		const baseStart = isForward ? start.value : start.value - 1;
-		let offsetIndex = 0;
-		while (offset > 0) {
-			offset -= getItemSize(baseStart + offsetIndex);
-			if (isForward) offsetIndex += 1;
-			else offsetIndex -= 1;
-		}
-		return offsetIndex;
-	};
 	const getStartByScroll = (scrollOffset) => {
-		const offsetIndex = getOffsetIndex(scrollOffset);
-		const nextStart = start.value + offsetIndex - buffer.value;
+		let offset = scrollOffset;
+		let anchorIndex = 0;
+		while (offset > 0 && anchorIndex < total.value) {
+			offset -= getItemSize(anchorIndex);
+			anchorIndex += 1;
+		}
+		const nextStart = anchorIndex - overscan.value;
 		if (nextStart < 0) return 0;
 		if (nextStart > maxStart.value) return maxStart.value;
 		return nextStart;
@@ -90,8 +86,9 @@ var useTableVirtualSize = ({ dataKeys, fixedSize, estimatedSize, buffer }) => {
 		setItemSize,
 		hasItemSize,
 		setStart,
-		getScrollOffset
+		getScrollOffset,
+		getItemSize
 	};
 };
 //#endregion
-export { useTableVirtualSize };
+export { useVirtualSize };

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

@@ -1,7 +1,7 @@
 import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
 import virtual_list_vue_vue_type_script_lang_default from "./virtual-list.vue_vue_type_script_lang.js";
 /* empty css                                             */
-import { createBlock, createElementBlock, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveComponent, resolveDynamicComponent, toHandlers, withCtx } from "vue";
+import { Fragment, createBlock, createElementBlock, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toHandlers, withCtx } from "vue";
 //#region components/_components/virtual-list/virtual-list.vue
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_DynamicScrollerItem = resolveComponent("DynamicScrollerItem");
@@ -9,7 +9,69 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		ref: "scrollbarHostRef",
 		class: normalizeClass(_ctx.hostClassNames),
 		style: normalizeStyle(_ctx.containerOuterStyle)
-	}, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.currentScroller), mergeProps({
+	}, [_ctx.isCompatMode ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.container), {
+		key: 0,
+		ref: "viewportRef",
+		class: normalizeClass(`${_ctx.prefixCls}-scroller`),
+		style: normalizeStyle(_ctx.compatViewportStyle),
+		onScroll: _ctx.onCompatScroll
+	}, {
+		default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.list), mergeProps(_ctx.props.listAttrs, { style: _ctx.compatListStyle }), {
+			default: withCtx(() => [
+				renderSlot(_ctx.$slots, "before"),
+				_ctx.hasCompatContentWrapper ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.content), mergeProps({ key: 0 }, _ctx.props.contentWrapperAttrs, { style: _ctx.compatContentWrapperStyle }), {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.compatCurrentList, (item, index) => {
+						return openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.item), mergeProps({ key: _ctx.getCompatItemKey(item, _ctx.compatStart + index) }, { ref_for: true }, _ctx.props.contentAttrs, {
+							ref_for: true,
+							ref: (element) => _ctx.setCompatItemRef(_ctx.getCompatItemKey(item, _ctx.compatStart + index), element),
+							style: _ctx.getCompatContentStyle(index)
+						}), {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+								item,
+								index: _ctx.compatStart + index,
+								active: true,
+								itemWithSize: void 0
+							}, () => [renderSlot(_ctx.$slots, "default", {
+								item,
+								index: _ctx.compatStart + index,
+								active: true,
+								itemWithSize: void 0
+							})])]),
+							_: 2
+						}, 1040, ["style"]);
+					}), 128))]),
+					_: 3
+				}, 16, ["style"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.compatCurrentList, (item, index) => {
+					return openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedCompatComponent.content), mergeProps({ key: _ctx.getCompatItemKey(item, _ctx.compatStart + index) }, { ref_for: true }, _ctx.props.contentAttrs, {
+						ref_for: true,
+						ref: (element) => _ctx.setCompatItemRef(_ctx.getCompatItemKey(item, _ctx.compatStart + index), element),
+						style: _ctx.getCompatContentStyle(index)
+					}), {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+							item,
+							index: _ctx.compatStart + index,
+							active: true,
+							itemWithSize: void 0
+						}, () => [renderSlot(_ctx.$slots, "default", {
+							item,
+							index: _ctx.compatStart + index,
+							active: true,
+							itemWithSize: void 0
+						})])]),
+						_: 2
+					}, 1040, ["style"]);
+				}), 128)),
+				renderSlot(_ctx.$slots, "after")
+			]),
+			_: 3
+		}, 16, ["style"]))]),
+		_: 3
+	}, 40, [
+		"class",
+		"style",
+		"onScroll"
+	])) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.currentScroller), mergeProps({
+		key: 1,
 		ref: "scrollerRef",
 		class: `${_ctx.prefixCls}-scroller`,
 		style: _ctx.scrollerStyle