@sdata/web-vue 3.2.1 → 3.3.1

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

@@ -816,19 +816,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-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);
 }
@@ -903,14 +902,14 @@
   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);

package/es/_components/virtual-list-v2/hooks/use-size.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+export declare const useSize: ({ dataKeys, fixedSize, estimatedSize, buffer, }: {
+    dataKeys: Ref<(string | number)[]>;
+    fixedSize: Ref<boolean>;
+    estimatedSize: Ref<number | undefined>;
+    buffer: Ref<number>;
+}) => {
+    frontPadding: import("vue").ComputedRef<number>;
+    behindPadding: import("vue").ComputedRef<number>;
+    start: Ref<number, number>;
+    end: import("vue").ComputedRef<number>;
+    getStartByScroll: (scrollOffset: number) => number;
+    setItemSize: (key: string | number, size: number) => void;
+    hasItemSize: (key: string | number) => boolean;
+    setStart: (index: number) => void;
+    getScrollOffset: (index: number) => number;
+};

package/es/_components/virtual-list-v2/hooks/use-size.js

@@ -0,0 +1,95 @@
+import { computed, onMounted, ref } from "vue";
+//#region components/_components/virtual-list-v2/hooks/use-size.ts
+var useSize = ({ dataKeys, fixedSize, estimatedSize, buffer }) => {
+	const firstRangeAverageSize = ref(0);
+	const sizeMap = /* @__PURE__ */ new Map();
+	const total = computed(() => dataKeys.value.length);
+	const start = ref(0);
+	const end = computed(() => {
+		const _end = start.value + buffer.value * 3;
+		if (_end > total.value) return total.value;
+		return _end;
+	});
+	const maxStart = computed(() => {
+		const max = total.value - buffer.value * 3;
+		if (max < 0) return 0;
+		return max;
+	});
+	const setStart = (index) => {
+		if (index < 0) start.value = 0;
+		else if (index > maxStart.value) start.value = maxStart.value;
+		else start.value = index;
+	};
+	const isFixed = ref(fixedSize.value);
+	const _estimatedSize = computed(() => {
+		var _estimatedSize$value;
+		const nextEstimatedSize = (_estimatedSize$value = estimatedSize.value) !== null && _estimatedSize$value !== void 0 ? _estimatedSize$value : 30;
+		if (nextEstimatedSize !== 30) return nextEstimatedSize;
+		return firstRangeAverageSize.value || nextEstimatedSize;
+	});
+	const setItemSize = (key, size) => {
+		sizeMap.set(key, size);
+	};
+	const getItemSize = (index) => {
+		var _sizeMap$get;
+		if (isFixed.value) return _estimatedSize.value;
+		const _key = dataKeys.value[index];
+		if (_key === void 0) return _estimatedSize.value;
+		return (_sizeMap$get = sizeMap.get(_key)) !== null && _sizeMap$get !== void 0 ? _sizeMap$get : _estimatedSize.value;
+	};
+	const hasItemSize = (key) => {
+		return sizeMap.has(key);
+	};
+	onMounted(() => {
+		const firstRangeTotalSize = Array.from(sizeMap.values()).reduce((pre, value) => pre + value, 0);
+		if (firstRangeTotalSize > 0) firstRangeAverageSize.value = firstRangeTotalSize / sizeMap.size;
+	});
+	const getScrollOffset = (index) => {
+		if (isFixed.value) return _estimatedSize.value * index;
+		return getOffset(0, index);
+	};
+	const getOffset = (start, end) => {
+		let offset = 0;
+		for (let i = start; i < end; i++) offset += getItemSize(i);
+		return offset;
+	};
+	const frontPadding = computed(() => {
+		if (isFixed.value) return _estimatedSize.value * start.value;
+		return getOffset(0, start.value);
+	});
+	const getOffsetIndex = (scrollOffset) => {
+		const isForward = scrollOffset >= frontPadding.value;
+		let offset = Math.abs(scrollOffset - frontPadding.value);
+		const _start = isForward ? start.value : start.value - 1;
+		let offsetIndex = 0;
+		while (offset > 0) {
+			const itemSize = getItemSize(_start + offsetIndex);
+			offset -= itemSize;
+			isForward ? offsetIndex++ : offsetIndex--;
+		}
+		return offsetIndex;
+	};
+	const getStartByScroll = (scrollOffset) => {
+		const offsetIndex = getOffsetIndex(scrollOffset);
+		const _start = start.value + offsetIndex - buffer.value;
+		if (_start < 0) return 0;
+		if (_start > maxStart.value) return maxStart.value;
+		return _start;
+	};
+	return {
+		frontPadding,
+		behindPadding: computed(() => {
+			if (isFixed.value) return _estimatedSize.value * (total.value - end.value);
+			return getOffset(end.value, total.value);
+		}),
+		start,
+		end,
+		getStartByScroll,
+		setItemSize,
+		hasItemSize,
+		setStart,
+		getScrollOffset
+	};
+};
+//#endregion
+export { useSize };

package/es/_components/virtual-list-v2/index.d.ts

@@ -0,0 +1,2 @@
+import VirtualList from './virtual-list.vue';
+export default VirtualList;

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

@@ -0,0 +1,5 @@
+import virtual_list_default from "./virtual-list.js";
+//#region components/_components/virtual-list-v2/index.ts
+var virtual_list_v2_default = virtual_list_default;
+//#endregion
+export { virtual_list_v2_default as default };

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

@@ -0,0 +1,44 @@
+import { VNode } from 'vue';
+import type { ScrollbarProps } from '../../scrollbar';
+export type VirtualItemKey = string | number;
+export interface InternalDataItem {
+    key: VirtualItemKey;
+    index: number;
+    item: unknown;
+}
+export type ItemSlot = (props: {
+    item: unknown;
+    index: number;
+}) => VNode[];
+export interface ScrollIntoViewOptions {
+    index?: number;
+    key?: VirtualItemKey;
+    align: 'auto' | 'top' | 'bottom';
+}
+export interface VirtualListProps {
+    height?: number | string;
+    threshold?: number;
+    isStaticItemHeight?: boolean;
+    fixedSize?: boolean;
+    estimatedSize?: number;
+    buffer?: number;
+    data?: unknown[];
+    itemKey?: string | ((item: unknown) => VirtualItemKey);
+    component?: keyof HTMLElementTagNameMap | {
+        container?: keyof HTMLElementTagNameMap;
+        list?: keyof HTMLElementTagNameMap;
+        content?: keyof HTMLElementTagNameMap;
+    };
+    listAttrs?: Record<string, unknown>;
+    contentAttrs?: Record<string, unknown>;
+    paddingPosition?: 'content' | 'list';
+    scrollbar?: boolean | ScrollbarProps;
+}
+export type ScrollOptions = number | {
+    index?: number;
+    key?: VirtualItemKey;
+    align?: 'auto' | 'top' | 'bottom';
+};
+export interface VirtualListRef {
+    scrollTo: (options: ScrollOptions) => void;
+}

package/es/_components/virtual-list-v2/virtual-list-item.d.ts

@@ -0,0 +1,22 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    hasItemSize: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    setItemSize: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    hasItemSize: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    setItemSize: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,37 @@
+import { getFirstComponent } from "../../_utils/vue-utils.js";
+import { cloneVNode, defineComponent, getCurrentInstance, onBeforeUnmount, onMounted, ref } from "vue";
+//#region components/_components/virtual-list-v2/virtual-list-item.tsx
+var virtual_list_item_default = /* @__PURE__ */ defineComponent({
+	name: "VirtualListItem",
+	props: {
+		hasItemSize: {
+			type: Function,
+			required: true
+		},
+		setItemSize: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props, { slots }) {
+		var _getCurrentInstance;
+		const key = (_getCurrentInstance = getCurrentInstance()) === null || _getCurrentInstance === void 0 ? void 0 : _getCurrentInstance.vnode.key;
+		const itemRef = ref();
+		const setItemSize = () => {
+			var _itemRef$value$$el, _itemRef$value, _ele$getBoundingClien, _ele$getBoundingClien2;
+			const ele = (_itemRef$value$$el = (_itemRef$value = itemRef.value) === null || _itemRef$value === void 0 ? void 0 : _itemRef$value.$el) !== null && _itemRef$value$$el !== void 0 ? _itemRef$value$$el : itemRef.value;
+			const height = (_ele$getBoundingClien = ele === null || ele === void 0 || (_ele$getBoundingClien2 = ele.getBoundingClientRect) === null || _ele$getBoundingClien2 === void 0 ? void 0 : _ele$getBoundingClien2.call(ele).height) !== null && _ele$getBoundingClien !== void 0 ? _ele$getBoundingClien : ele === null || ele === void 0 ? void 0 : ele.offsetHeight;
+			if (height) props.setItemSize(key, height);
+		};
+		onMounted(() => setItemSize());
+		onBeforeUnmount(() => setItemSize());
+		return () => {
+			var _slots$default;
+			const child = getFirstComponent((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
+			if (child) return cloneVNode(child, { ref: itemRef }, true);
+			return null;
+		};
+	}
+});
+//#endregion
+export { virtual_list_item_default as default };

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

@@ -0,0 +1,47 @@
+import virtual_list_vue_vue_type_script_lang_default from "./virtual-list.vue_vue_type_script_lang.js";
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import { Fragment, createBlock, createElementBlock, mergeProps, openBlock, renderList, renderSlot, resolveComponent, resolveDynamicComponent, withCtx } from "vue";
+//#region components/_components/virtual-list-v2/virtual-list.vue
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	const _component_VirtualListItem = resolveComponent("VirtualListItem");
+	return openBlock(), createBlock(resolveDynamicComponent(_ctx.containerComponent), mergeProps({
+		ref: "containerRef",
+		class: _ctx.prefixCls,
+		style: _ctx.style
+	}, _ctx.containerProps, { onScroll: _ctx.onScroll }), {
+		default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedComponent.list), mergeProps(_ctx.listAttrs, { style: _ctx.paddingPosition === "list" ? {
+			paddingTop: `${_ctx.frontPadding}px`,
+			paddingBottom: `${_ctx.behindPadding}px`
+		} : {} }), {
+			default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(_ctx.mergedComponent.content), mergeProps({ ref: "contentRef" }, _ctx.contentAttrs, { style: _ctx.paddingPosition === "content" ? {
+				paddingTop: `${_ctx.frontPadding}px`,
+				paddingBottom: `${_ctx.behindPadding}px`
+			} : {} }), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.currentList, (item, index) => {
+					var _item$_ctx$itemKey;
+					return openBlock(), createBlock(_component_VirtualListItem, {
+						key: (_item$_ctx$itemKey = item[_ctx.itemKey]) !== null && _item$_ctx$itemKey !== void 0 ? _item$_ctx$itemKey : _ctx.start + index,
+						"has-item-size": _ctx.hasItemSize,
+						"set-item-size": _ctx.setItemSize
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+							item,
+							index: _ctx.start + index
+						})]),
+						_: 2
+					}, 1032, ["has-item-size", "set-item-size"]);
+				}), 128))]),
+				_: 3
+			}, 16, ["style"]))]),
+			_: 3
+		}, 16, ["style"]))]),
+		_: 3
+	}, 16, [
+		"class",
+		"style",
+		"onScroll"
+	]);
+}
+var virtual_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(virtual_list_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+//#endregion
+export { virtual_list_default as default };