@sdata/web-vue 3.30.0 → 4.0.0

package/es/list/list.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,326 @@
+import { configProviderInjectionKey } from "../config-provider/context.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isNumber } from "../_utils/is.js";
+import { getAllElements } from "../_utils/vue-utils.js";
+import virtual_list_default from "../_components/virtual-list/index.js";
+import { omit } from "../_utils/omit.js";
+import { useComponentRef } from "../_hooks/use-component-ref.js";
+import { useScrollbar } from "../_hooks/use-scrollbar.js";
+import Empty from "../empty/index.js";
+import Scrollbar from "../scrollbar/index.js";
+import Spin from "../spin/index.js";
+import Pagination from "../pagination/index.js";
+import Grid from "../grid/index.js";
+import { usePagination } from "./use-pagination.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, isVNode, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toRef, unref, useAttrs, useSlots, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+//#region components/list/list.vue?vue&type=script&setup=true&lang.ts
+var list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "List",
+	inheritAttrs: false
+}), {}, {
+	__name: "list",
+	props: {
+		data: Array,
+		size: {
+			type: String,
+			default: "medium"
+		},
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		split: {
+			type: Boolean,
+			default: true
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		spinProps: Object,
+		hoverable: {
+			type: Boolean,
+			default: false
+		},
+		paginationProps: Object,
+		gridProps: Object,
+		maxHeight: {
+			type: [String, Number],
+			default: 0
+		},
+		bottomOffset: {
+			type: Number,
+			default: 0
+		},
+		virtualListProps: Object,
+		scrollbar: {
+			type: [Object, Boolean],
+			default: true
+		}
+	},
+	emits: {
+		scroll: () => true,
+		reachBottom: () => true,
+		pageChange: (_page) => true,
+		pageSizeChange: (_pageSize) => true
+	},
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const VNodeRenderer = (_props) => _props.content;
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const [DefineItem, ReuseItem] = createReusableTemplate();
+		const [DefineEmpty, ReuseEmpty] = createReusableTemplate();
+		const [DefineScrollLoading, ReuseScrollLoading] = createReusableTemplate();
+		const prefixCls = getPrefixCls("list");
+		const configContext = inject(configProviderInjectionKey, void 0);
+		const mergedSpinProps = computed(() => _objectSpread2(_objectSpread2({}, configContext === null || configContext === void 0 ? void 0 : configContext.listSpinProps), props.spinProps));
+		const { componentRef, elementRef: listRef } = useComponentRef("containerRef");
+		const isVirtualList = computed(() => props.virtualListProps);
+		const { scrollbarProps } = useScrollbar(toRef(props, "scrollbar"));
+		let previousScrollTop = 0;
+		const handleScroll = (event) => {
+			const { scrollTop, scrollHeight, offsetHeight } = event.target;
+			const bottom = Math.floor(scrollHeight - (scrollTop + offsetHeight));
+			if (scrollTop > previousScrollTop && bottom <= props.bottomOffset) emit("reachBottom");
+			emit("scroll");
+			previousScrollTop = scrollTop;
+		};
+		onMounted(() => {
+			if (listRef.value) {
+				const { scrollTop, scrollHeight, offsetHeight } = listRef.value;
+				if (scrollHeight <= scrollTop + offsetHeight) emit("reachBottom");
+			}
+		});
+		const { current, pageSize, handlePageChange, handlePageSizeChange } = usePagination(props, { emit });
+		const getCurrentPageItems = (data) => {
+			if (!props.paginationProps) return data;
+			if (data.length > pageSize.value) {
+				const startIndex = (current.value - 1) * pageSize.value;
+				return data.slice(startIndex, startIndex + pageSize.value);
+			}
+			return data;
+		};
+		const sourceItems = computed(() => {
+			var _props$data;
+			return slots.default ? getAllElements(slots.default()) : (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : [];
+		});
+		const currentPageItems = computed(() => getCurrentPageItems(sourceItems.value));
+		const virtualItems = computed(() => {
+			var _props$data2;
+			return getCurrentPageItems((_props$data2 = props.data) !== null && _props$data2 !== void 0 ? _props$data2 : []);
+		});
+		const gridRows = computed(() => {
+			var _props$gridProps;
+			const span = (_props$gridProps = props.gridProps) === null || _props$gridProps === void 0 ? void 0 : _props$gridProps.span;
+			if (!span) return [];
+			const rowSize = 24 / span;
+			const rows = [];
+			for (let index = 0; index < currentPageItems.value.length; index += rowSize) rows.push(currentPageItems.value.slice(index, index + rowSize));
+			return rows;
+		});
+		const gridColumnProps = computed(() => {
+			var _props$gridProps2;
+			return omit((_props$gridProps2 = props.gridProps) !== null && _props$gridProps2 !== void 0 ? _props$gridProps2 : {}, ["gutter"]);
+		});
+		const paginationRestProps = computed(() => {
+			var _props$paginationProp;
+			return omit((_props$paginationProp = props.paginationProps) !== null && _props$paginationProp !== void 0 ? _props$paginationProp : {}, [
+				"current",
+				"pageSize",
+				"defaultCurrent",
+				"defaultPageSize"
+			]);
+		});
+		const cls = computed(() => [
+			prefixCls,
+			`${prefixCls}-${props.size}`,
+			{
+				[`${prefixCls}-bordered`]: props.bordered,
+				[`${prefixCls}-split`]: props.split,
+				[`${prefixCls}-hover`]: props.hoverable
+			}
+		]);
+		const contentStyle = computed(() => {
+			if (props.maxHeight) return {
+				maxHeight: isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight,
+				overflowY: "auto"
+			};
+			if (isVirtualList.value && !props.gridProps) return {
+				height: "100%",
+				overflow: "hidden"
+			};
+		});
+		const contentCls = computed(() => [`${prefixCls}-content`, { [`${prefixCls}-virtual`]: isVirtualList.value }]);
+		const virtualListRef = ref();
+		const resolvedVirtualListProps = computed(() => {
+			if (!props.virtualListProps) return void 0;
+			if (props.virtualListProps.height !== void 0) return props.virtualListProps;
+			return _objectSpread2(_objectSpread2({}, props.virtualListProps), {}, { height: "100%" });
+		});
+		const contentWrapperStyle = computed(() => isVirtualList.value && !props.gridProps ? {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%",
+			minHeight: 0
+		} : void 0);
+		const wrapperStyle = computed(() => isVirtualList.value && !props.gridProps ? {
+			height: "100%",
+			minHeight: 0
+		} : void 0);
+		const scrollIntoView = (options) => {
+			var _virtualListRef$value;
+			(_virtualListRef$value = virtualListRef.value) === null || _virtualListRef$value === void 0 || _virtualListRef$value.scrollTo(options);
+		};
+		__expose({
+			virtualListRef,
+			scrollIntoView
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(DefineItem), null, {
+					default: withCtx(({ item, index }) => [isVNode(item) ? (openBlock(), createBlock(VNodeRenderer, {
+						key: 0,
+						content: item
+					}, null, 8, ["content"])) : renderSlot(_ctx.$slots, "item", {
+						item,
+						index
+					}, void 0, void 0, 1)]),
+					_: 3
+				}),
+				createVNode(unref(DefineEmpty), null, {
+					default: withCtx(() => [!unref(slots)["scroll-loading"] ? renderSlot(_ctx.$slots, "empty", {}, () => {
+						var _unref2;
+						return [((_unref2 = unref(configContext)) === null || _unref2 === void 0 ? void 0 : _unref2.slots.empty) ? (openBlock(), createBlock(resolveDynamicComponent(unref(configContext).slots.empty), {
+							key: 0,
+							component: "list"
+						})) : (openBlock(), createBlock(unref(Empty), { key: 1 }))];
+					}, void 0, 0) : createCommentVNode("", true)]),
+					_: 3
+				}),
+				createVNode(unref(DefineScrollLoading), null, {
+					default: withCtx(() => [unref(slots)["scroll-loading"] ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass([`${unref(prefixCls)}-item`, `${unref(prefixCls)}-scroll-loading`])
+					}, [renderSlot(_ctx.$slots, "scroll-loading")], 2)) : createCommentVNode("", true)]),
+					_: 3
+				}),
+				createElementVNode("div", mergeProps(unref(attrs), {
+					class: `${unref(prefixCls)}-wrapper`,
+					style: wrapperStyle.value
+				}), [createVNode(unref(Spin), mergeProps(mergedSpinProps.value, {
+					class: `${unref(prefixCls)}-spin`,
+					loading: props.loading
+				}), {
+					default: withCtx(() => {
+						var _ref, _props$paginationProp2, _props$data3;
+						return [createVNode(unref(Scrollbar), mergeProps({
+							ref_key: "componentRef",
+							ref: componentRef
+						}, unref(scrollbarProps), {
+							class: cls.value,
+							style: contentStyle.value,
+							onScroll: handleScroll
+						}), {
+							default: withCtx(() => [createElementVNode("div", {
+								class: normalizeClass(`${unref(prefixCls)}-content-wrapper`),
+								style: normalizeStyle(contentWrapperStyle.value)
+							}, [
+								unref(slots).header ? (openBlock(), createElementBlock("div", {
+									key: 0,
+									class: normalizeClass(`${unref(prefixCls)}-header`)
+								}, [renderSlot(_ctx.$slots, "header")], 2)) : createCommentVNode("", true),
+								isVirtualList.value && !props.gridProps ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [virtualItems.value.length ? (openBlock(), createBlock(unref(virtual_list_default), mergeProps({
+									key: 0,
+									ref_key: "virtualListRef",
+									ref: virtualListRef
+								}, resolvedVirtualListProps.value, {
+									class: contentCls.value,
+									items: virtualItems.value,
+									onScroll: handleScroll
+								}), {
+									item: withCtx(({ item, index }) => [renderSlot(_ctx.$slots, "item", {
+										item,
+										index
+									})]),
+									_: 3
+								}, 16, ["class", "items"])) : (openBlock(), createBlock(unref(ReuseEmpty), { key: 1 })), createVNode(unref(ReuseScrollLoading))], 64)) : (openBlock(), createElementBlock("div", {
+									key: 2,
+									role: "list",
+									class: normalizeClass(contentCls.value)
+								}, [sourceItems.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [props.gridProps ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [props.gridProps.span ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(gridRows.value, (row, rowIndex) => {
+									return openBlock(), createBlock(unref(Grid).Row, {
+										key: rowIndex,
+										class: normalizeClass(`${unref(prefixCls)}-row`),
+										gutter: props.gridProps.gutter
+									}, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (item, index) => {
+											return openBlock(), createBlock(unref(Grid).Col, {
+												key: `${rowIndex}-${index}`,
+												class: normalizeClass(`${unref(prefixCls)}-col`),
+												span: props.gridProps.span
+											}, {
+												default: withCtx(() => [createVNode(unref(ReuseItem), {
+													item,
+													index
+												}, null, 8, ["item", "index"])]),
+												_: 2
+											}, 1032, ["class", "span"]);
+										}), 128))]),
+										_: 2
+									}, 1032, ["class", "gutter"]);
+								}), 128)) : (openBlock(), createBlock(unref(Grid).Row, {
+									key: 1,
+									class: normalizeClass(`${unref(prefixCls)}-row`),
+									gutter: props.gridProps.gutter
+								}, {
+									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(currentPageItems.value, (item, index) => {
+										return openBlock(), createBlock(unref(Grid).Col, mergeProps({ key: index }, { ref_for: true }, gridColumnProps.value, { class: `${unref(prefixCls)}-col` }), {
+											default: withCtx(() => [createVNode(unref(ReuseItem), {
+												item,
+												index
+											}, null, 8, ["item", "index"])]),
+											_: 2
+										}, 1040, ["class"]);
+									}), 128))]),
+									_: 1
+								}, 8, ["class", "gutter"]))], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(currentPageItems.value, (item, index) => {
+									return openBlock(), createBlock(unref(ReuseItem), {
+										key: index,
+										item,
+										index
+									}, null, 8, ["item", "index"]);
+								}), 128))], 64)) : (openBlock(), createBlock(unref(ReuseEmpty), { key: 1 })), createVNode(unref(ReuseScrollLoading))], 2)),
+								unref(slots).footer ? (openBlock(), createElementBlock("div", {
+									key: 3,
+									class: normalizeClass(`${unref(prefixCls)}-footer`)
+								}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)
+							], 6)]),
+							_: 3
+						}, 16, ["class", "style"]), props.paginationProps ? (openBlock(), createBlock(unref(Pagination), mergeProps({ key: 0 }, paginationRestProps.value, {
+							class: `${unref(prefixCls)}-pagination`,
+							total: (_ref = (_props$paginationProp2 = props.paginationProps.total) !== null && _props$paginationProp2 !== void 0 ? _props$paginationProp2 : (_props$data3 = props.data) === null || _props$data3 === void 0 ? void 0 : _props$data3.length) !== null && _ref !== void 0 ? _ref : 0,
+							current: unref(current),
+							"page-size": unref(pageSize),
+							onChange: unref(handlePageChange),
+							onPageSizeChange: unref(handlePageSizeChange)
+						}), null, 16, [
+							"class",
+							"total",
+							"current",
+							"page-size",
+							"onChange",
+							"onPageSizeChange"
+						])) : createCommentVNode("", true)];
+					}),
+					_: 3
+				}, 16, ["class", "loading"])], 16)
+			], 64);
+		};
+	}
+}));
+//#endregion
+export { list_vue_vue_type_script_setup_true_lang_default as default };