@sdata/web-vue 1.8.0 → 1.10.0

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

@@ -790,6 +790,7 @@
 }
 .sd-select-view-multiple .sd-select-view-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -797,9 +798,16 @@
   display: flex;
   flex-wrap: wrap;
 }
+.sd-select-view-multiple .sd-select-view-inner.sd-select-view-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -817,6 +825,19 @@
 .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);
 }
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-tag.sd-select-view-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   width: 100%;
   padding-right: 0;
@@ -843,6 +864,9 @@
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
   box-sizing: border-box;
 }
+.sd-select-view-inner-responsive .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
+  flex: 0 0 auto;
+}
 .sd-select-view-multiple .sd-select-view-mirror {
   position: absolute;
   top: 0;
@@ -851,6 +875,27 @@
   visibility: hidden;
   pointer-events: none;
 }
+.sd-select-view-multiple .sd-select-view-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-select-view-multiple .sd-select-view-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-select-view-multiple.sd-select-view-focus .sd-select-view-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);

package/es/_components/transition/expand-transition.vue.d.ts

@@ -1,10 +1,10 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{}, {
-    onBeforeEnter(el: HTMLDivElement): void;
-    onEnter(el: HTMLDivElement): void;
-    onAfterEnter(el: HTMLDivElement): void;
-    onBeforeLeave(el: HTMLDivElement): void;
-    onLeave(el: HTMLDivElement): void;
-    onAfterLeave(el: HTMLElement): void;
+    onBeforeEnter(el: Element): void;
+    onEnter(el: Element): void;
+    onAfterEnter(el: Element): void;
+    onBeforeLeave(el: Element): void;
+    onLeave(el: Element): void;
+    onAfterLeave(el: Element): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/_components/transition/expand-transition.vue_vue_type_script_lang.js

@@ -1,26 +1,33 @@
 import { defineComponent } from "vue";
 //#region components/_components/transition/expand-transition.vue?vue&type=script&lang.ts
+var toHTMLElement = (element) => element;
 var expand_transition_vue_vue_type_script_lang_default = defineComponent({
 	name: "ExpandTransition",
 	setup() {
 		return {
 			onBeforeEnter(el) {
-				el.style.height = "0";
+				const element = toHTMLElement(el);
+				element.style.height = "0";
 			},
 			onEnter(el) {
-				el.style.height = `${el.scrollHeight}px`;
+				const element = toHTMLElement(el);
+				element.style.height = `${element.scrollHeight}px`;
 			},
 			onAfterEnter(el) {
-				el.style.height = "";
+				const element = toHTMLElement(el);
+				element.style.height = "";
 			},
 			onBeforeLeave(el) {
-				el.style.height = `${el.scrollHeight}px`;
+				const element = toHTMLElement(el);
+				element.style.height = `${element.scrollHeight}px`;
 			},
 			onLeave(el) {
-				el.style.height = `0`;
+				const element = toHTMLElement(el);
+				element.style.height = `0`;
 			},
 			onAfterLeave(el) {
-				el.style.height = ``;
+				const element = toHTMLElement(el);
+				element.style.height = ``;
 			}
 		};
 	}

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

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

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

@@ -1,4 +1,6 @@
+import type { CacheSnapshot, ClassValue, ItemSizeValue, KeyFieldValue, ScrollAlign, ScrollDirection, ScrollToOptions } from 'vue-virtual-scroller';
 import { VNode } from 'vue';
+import type { ScrollbarProps } from '../../scrollbar';
 export type VirtualItemKey = string | number;
 export interface InternalDataItem {
     key: VirtualItemKey;
@@ -12,22 +14,62 @@ export type ItemSlot = (props: {
 export interface ScrollIntoViewOptions {
     index?: number;
     key?: VirtualItemKey;
-    align: 'auto' | 'top' | 'bottom';
+    align?: 'auto' | 'top' | 'bottom' | ScrollAlign;
 }
-export interface VirtualListProps {
-    height: number | string;
-    threshold?: number | null;
-    isStaticItemHeight?: boolean;
-    estimatedItemHeight?: number;
-    data?: unknown[];
-    itemKey?: string;
-    component?: keyof HTMLElementTagNameMap;
+interface VirtualListCommonProps<TItem = unknown> {
+    items?: TItem[];
+    height?: number | string;
+    itemSize?: ItemSizeValue<TItem>;
+    minItemSize?: number | string | null;
+    keyField?: KeyFieldValue<any>;
+    direction?: ScrollDirection;
+    pageMode?: boolean;
+    listTag?: string;
+    itemTag?: string;
+    shift?: boolean;
+    cache?: CacheSnapshot;
+    disableTransform?: boolean;
+    flowMode?: boolean;
+    hiddenPosition?: number;
+    enabled?: boolean;
+    scrollbar?: boolean | ScrollbarProps;
 }
+export interface VirtualListRecycleProps<TItem = unknown> extends VirtualListCommonProps<TItem> {
+    gridItems?: number;
+    itemSecondarySize?: number;
+    sizeField?: string;
+    typeField?: string;
+    buffer?: number;
+    prerender?: number;
+    emitUpdate?: boolean;
+    updateInterval?: number;
+    skipHover?: boolean;
+    listClass?: ClassValue;
+    itemClass?: ClassValue;
+}
+export interface VirtualListDynamicProps<TItem = unknown> extends VirtualListCommonProps<TItem> {
+    minItemSize: number | string;
+}
+export type VirtualListProps<TItem = unknown> = VirtualListRecycleProps<TItem> | VirtualListDynamicProps<TItem>;
 export type ScrollOptions = number | {
     index?: number;
     key?: VirtualItemKey;
-    align?: 'auto' | 'top' | 'bottom';
+    align?: 'auto' | 'top' | 'bottom' | ScrollAlign;
+    smooth?: boolean;
+    offset?: number;
 };
 export interface VirtualListRef {
+    scrollToItem: (index: number, options?: ScrollToOptions) => void;
+    scrollToPosition: (position: number, options?: ScrollToOptions) => void;
+    findItemIndex: (offset: number) => number;
+    getItemOffset: (index: number) => number;
+    getItemSize: (index: number) => number;
+    cacheSnapshot: () => CacheSnapshot | undefined;
+    restoreCache: (snapshot: CacheSnapshot | null | undefined) => boolean;
+    updateVisibleItems?: (itemsChanged: boolean, checkPositionDiff?: boolean) => void;
+    scrollToBottom?: () => void;
+    forceUpdate?: (clear?: boolean) => void;
+    getDynamicItemSize?: (item: unknown, index?: number) => number;
     scrollTo: (options: ScrollOptions) => void;
 }
+export {};

package/es/_components/virtual-list/style/index.scss

@@ -0,0 +1 @@
+@import url('vue-virtual-scroller/dist/vue-virtual-scroller.css');

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

@@ -0,0 +1,60 @@
+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";
+//#region components/_components/virtual-list/virtual-list.vue
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	const _component_DynamicScrollerItem = resolveComponent("DynamicScrollerItem");
+	return openBlock(), createElementBlock("div", {
+		ref: "scrollbarHostRef",
+		class: normalizeClass(_ctx.hostClassNames),
+		style: normalizeStyle(_ctx.containerOuterStyle)
+	}, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.currentScroller), mergeProps({
+		ref: "scrollerRef",
+		class: `${_ctx.prefixCls}-scroller`,
+		style: _ctx.scrollerStyle
+	}, _ctx.scrollerProps, toHandlers(_ctx.scrollerListeners)), {
+		before: withCtx(() => [renderSlot(_ctx.$slots, "before")]),
+		default: withCtx((slotProps) => [_ctx.isDynamicScroller ? (openBlock(), createBlock(_component_DynamicScrollerItem, {
+			key: 0,
+			item: slotProps.item,
+			active: slotProps.active,
+			index: slotProps.index,
+			"size-dependencies": null
+		}, {
+			default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+				item: slotProps.item,
+				index: slotProps.index,
+				active: slotProps.active,
+				itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+			}, () => [renderSlot(_ctx.$slots, "default", {
+				item: slotProps.item,
+				index: slotProps.index,
+				active: slotProps.active,
+				itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+			})])]),
+			_: 2
+		}, 1032, [
+			"item",
+			"active",
+			"index"
+		])) : renderSlot(_ctx.$slots, "item", {
+			key: 1,
+			item: slotProps.item,
+			index: slotProps.index,
+			active: slotProps.active,
+			itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+		}, () => [renderSlot(_ctx.$slots, "default", {
+			item: slotProps.item,
+			index: slotProps.index,
+			active: slotProps.active,
+			itemWithSize: _ctx.getSlotItemWithSize(slotProps)
+		})])]),
+		empty: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+		after: withCtx(() => [renderSlot(_ctx.$slots, "after")]),
+		_: 3
+	}, 16, ["class", "style"]))], 6);
+}
+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 };