@will-ui/vue 1.0.0

package/dist/components/sheet/Sheet.js

@@ -0,0 +1,592 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import { getBoundingClientRect, getElement, isElement } from "../../util/dom.js";
+import { propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import useToggleArray from "../../use/toggle/useToggleArray.js";
+import Virtual from "../virtual/Virtual.js";
+import useVisibleResize from "../../use/useVisibleResize.js";
+import { createTbodyColumns, getSelectedKey } from "./_util.js";
+import { useColumns, useFixed, useTdWidth } from "./_use.js";
+import _thead_default from "./_thead.js";
+import _tbody_default from "./_tbody.js";
+import _tfoot_default from "./_tfoot.js";
+import _props_default from "./_props.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, nextTick, onActivated, onMounted, onUnmounted, provide, reactive, readonly, ref, vShow, watch, withDirectives } from "vue";
+//#region components/sheet/Sheet.tsx
+var MIN_WIDTH = 32;
+var EMITS = [
+	"update:modelValue",
+	"update:keys",
+	"after-checked",
+	"after-radio",
+	"update:highlight",
+	"highlight",
+	"sort",
+	"scroll",
+	"reach-top",
+	"reach-bottom"
+];
+var TBODYEMITS = ["add", "delete"];
+/** 未传 props、也未配置全局时的默认值 */
+var SHEET_FALLBACK = {
+	stripe: false,
+	hover: true,
+	nowrap: true,
+	bordered: false,
+	trBordered: false,
+	resize: true,
+	autoWidth: false,
+	hasCheckbox: false,
+	hasRadio: false,
+	hasIndex: false,
+	hasAction: false,
+	canHighlight: false,
+	checkKey: "id",
+	highlightKey: "id",
+	rowKey: "id",
+	indexContent: "#",
+	virtual: false,
+	scrollWatch: false
+};
+/** 与主题默认 `--w-sheet-size: calc(var(--w-size) * 4/3)` 对齐（--w-size=36 → 48） */
+var SHEET_DEFAULT_ROW_HEIGHT = Math.round(48);
+var Sheet_default = /* @__PURE__ */ defineComponent({
+	name: "Sheet",
+	components: {
+		Thead: _thead_default,
+		Tbody: _tbody_default,
+		Tfoot: _tfoot_default,
+		Virtual
+	},
+	props: _props_default,
+	emits: [...EMITS, ...TBODYEMITS],
+	setup(props, { emit, attrs, slots, expose }) {
+		const cfg = useComponentConfig("Sheet", props, SHEET_FALLBACK);
+		const resizeWidths = /* @__PURE__ */ new Map();
+		const resizing = ref(false);
+		const resizeLineLeft = ref(-1e4);
+		const oldResizeLineLeft = ref(-1e4);
+		const currentSorter = reactive({
+			field: "",
+			sorter: true
+		});
+		const { set, get, toggle } = useToggleArray([
+			true,
+			0,
+			1
+		], { item: true });
+		const highlightValue = ref(props.highlight ? props.highlight : 0);
+		const isCheckedAll = ref(0);
+		const selectedKeys = ref([]);
+		const tableRoot = ref();
+		const tableRootLeft = ref(0);
+		const inner = ref();
+		const innerElem = computed(() => getElement(inner));
+		const innerProps = computed(() => {
+			return {
+				ref: inner,
+				class: [
+					"w-sheet-inner-container",
+					"w-sheet--min-content",
+					{
+						"w-sheet--nowrap": cfg.value.nowrap,
+						"w-sheet--stripe": cfg.value.stripe,
+						"w-sheet--hover": cfg.value.hover,
+						"w-sheet--has-action": cfg.value.hasAction,
+						"w-sheet--has-top-shadow": showTopShadow.value,
+						"w-sheet--has-bottom-shadow": showBottomShadow.value
+					}
+				],
+				style: {
+					height: cfg.value.bordered ? `calc(${cfg.value.height} + 2px)` : cfg.value.height,
+					maxHeight: cfg.value.maxHeight
+				}
+			};
+		});
+		const finalColumns = useColumns(computed(() => props.columns), computed(() => ({
+			indexContent: cfg.value.indexContent,
+			hasIndex: cfg.value.hasIndex,
+			hasCheckbox: cfg.value.hasCheckbox,
+			checkKey: cfg.value.checkKey,
+			hasRadio: cfg.value.hasRadio,
+			hasAction: cfg.value.hasAction
+		})));
+		const tbodyColumns = computed(() => createTbodyColumns(finalColumns.value));
+		const hasSum = computed(() => {
+			let has = false;
+			let i = 0;
+			let len = tbodyColumns.value.length;
+			while (i < len) {
+				const col = tbodyColumns.value[i];
+				if (col.sum !== false && col.sum !== void 0 && props.data?.length) {
+					has = true;
+					break;
+				}
+				i++;
+			}
+			return has;
+		});
+		const { scrollLeft, scrollTop, showLeftShadow, showRightShadow, leftShadowSlots, rightShadowSlots, showTopShadow, showBottomShadow, hasPin, reset } = useFixed(tableRoot, innerElem, computed(() => cfg.value.leftFixed), computed(() => cfg.value.rightFixed), hasSum, tbodyColumns);
+		const scrollEdge = {
+			isTop: true,
+			isBottom: false
+		};
+		const isProgrammaticScroll = { value: false };
+		let scrollWatchRaf = 0;
+		let scrollWatchEl;
+		let scrollWatchOnScroll;
+		function getScrollEl() {
+			const el = getElement(innerElem);
+			return isElement(el) ? el : void 0;
+		}
+		function readScrollMetrics(el) {
+			const st = el.scrollTop;
+			const sl = el.scrollLeft;
+			const maxScrollTop = Math.max(0, el.scrollHeight - el.clientHeight);
+			const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
+			return {
+				scrollTop: st,
+				scrollLeft: sl,
+				scrollBottom: maxScrollTop - st,
+				scrollRight: maxScrollLeft - sl,
+				maxScrollTop,
+				maxScrollLeft,
+				scrollTopPercent: maxScrollTop > 0 ? Math.round(st / maxScrollTop * 100) : 0,
+				scrollLeftPercent: maxScrollLeft > 0 ? Math.round(sl / maxScrollLeft * 100) : 0,
+				target: el
+			};
+		}
+		function flushScrollWatch() {
+			scrollWatchRaf = 0;
+			const el = scrollWatchEl;
+			if (!el || !cfg.value.scrollWatch) return;
+			const m = readScrollMetrics(el);
+			const isTop = m.scrollTop <= 0;
+			if (isTop && !scrollEdge.isTop) emit("reach-top");
+			scrollEdge.isTop = isTop;
+			const offset = props.bottomOffset ?? 0;
+			const isBottom = m.maxScrollTop > 0 && m.scrollTop >= m.maxScrollTop - offset;
+			if (isBottom && !scrollEdge.isBottom) emit("reach-bottom", { distance: m.scrollBottom });
+			scrollEdge.isBottom = isBottom;
+			if (!isProgrammaticScroll.value) emit("scroll", {
+				scrollTop: m.scrollTop,
+				scrollLeft: m.scrollLeft,
+				scrollBottom: m.scrollBottom,
+				scrollRight: m.scrollRight,
+				scrollTopPercent: m.scrollTopPercent,
+				scrollLeftPercent: m.scrollLeftPercent,
+				target: m.target
+			});
+		}
+		function detachScrollWatch() {
+			if (scrollWatchEl && scrollWatchOnScroll) scrollWatchEl.removeEventListener("scroll", scrollWatchOnScroll);
+			scrollWatchEl = void 0;
+			scrollWatchOnScroll = void 0;
+			if (scrollWatchRaf) {
+				cancelAnimationFrame(scrollWatchRaf);
+				scrollWatchRaf = 0;
+			}
+		}
+		function attachScrollWatch() {
+			detachScrollWatch();
+			if (!cfg.value.scrollWatch) return;
+			const el = getScrollEl();
+			if (!el) return;
+			scrollWatchEl = el;
+			scrollWatchOnScroll = () => {
+				if (scrollWatchRaf) return;
+				scrollWatchRaf = requestAnimationFrame(flushScrollWatch);
+			};
+			el.addEventListener("scroll", scrollWatchOnScroll, { passive: true });
+		}
+		watch([() => cfg.value.scrollWatch, innerElem], () => {
+			nextTick(attachScrollWatch);
+		}, { immediate: true });
+		onUnmounted(detachScrollWatch);
+		function withProgrammatic(run) {
+			isProgrammaticScroll.value = true;
+			run();
+			isProgrammaticScroll.value = false;
+		}
+		function scrollTo(top, left) {
+			const el = getScrollEl();
+			if (!el) return;
+			withProgrammatic(() => {
+				if (typeof top === "number") el.scrollTop = top;
+				if (typeof left === "number") el.scrollLeft = left;
+			});
+		}
+		function scrollToTop() {
+			scrollTo(0, void 0);
+		}
+		function scrollToBottom() {
+			const el = getScrollEl();
+			if (!el) return;
+			withProgrammatic(() => {
+				el.scrollTop = el.scrollHeight;
+			});
+		}
+		function scrollToPercent(topPercent, leftPercent) {
+			const el = getScrollEl();
+			if (!el) return;
+			const maxScrollTop = Math.max(0, el.scrollHeight - el.clientHeight);
+			const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
+			const t = Math.max(0, Math.min(100, topPercent)) / 100;
+			withProgrammatic(() => {
+				el.scrollTop = maxScrollTop * t;
+				if (typeof leftPercent === "number") {
+					const l = Math.max(0, Math.min(100, leftPercent)) / 100;
+					el.scrollLeft = maxScrollLeft * l;
+				}
+			});
+		}
+		function getScrollPosition() {
+			const el = getScrollEl();
+			if (!el) return {
+				scrollTop: 0,
+				scrollLeft: 0,
+				scrollBottom: 0,
+				scrollRight: 0,
+				scrollTopPercent: 0,
+				scrollLeftPercent: 0
+			};
+			const m = readScrollMetrics(el);
+			return {
+				scrollTop: m.scrollTop,
+				scrollLeft: m.scrollLeft,
+				scrollBottom: m.scrollBottom,
+				scrollRight: m.scrollRight,
+				scrollTopPercent: m.scrollTopPercent,
+				scrollLeftPercent: m.scrollLeftPercent
+			};
+		}
+		const { tdWidths, adjustTdWidths } = useTdWidth(computed(() => cfg.value.autoWidth), computed(() => cfg.value.bordered), innerElem, tbodyColumns, computed(() => props.size));
+		const theadProps = computed(() => {
+			return {
+				totalTbodyColumns: tbodyColumns.value.length,
+				columns: finalColumns.value,
+				indexContent: cfg.value.indexContent,
+				checkKey: cfg.value.checkKey,
+				resize: cfg.value.resize
+			};
+		});
+		const tbodyProps = computed(() => {
+			return {
+				columns: tbodyColumns.value,
+				hasIndex: cfg.value.hasIndex,
+				hasAction: cfg.value.hasAction,
+				pageSize: cfg.value.pageSize,
+				pageIndex: cfg.value.pageIndex,
+				tbodySlots: slots,
+				hasCheckbox: cfg.value.hasCheckbox,
+				hasRadio: cfg.value.hasRadio,
+				checkKey: cfg.value.checkKey,
+				isCheckedAll: isCheckedAll.value,
+				checkable: cfg.value.checkable,
+				canHighlight: cfg.value.canHighlight,
+				highlightKey: cfg.value.highlightKey,
+				rowClass: cfg.value.rowClass,
+				rowKey: cfg.value.rowKey,
+				sheetRow: cfg.value.sheetRow,
+				sheetTdIndex: cfg.value.sheetTdIndex,
+				"onAfter-render": () => {
+					adjustTdWidths();
+					nextTick(reset);
+				}
+			};
+		});
+		const tfootProps = computed(() => {
+			return {
+				hasSum: hasSum.value,
+				columns: tbodyColumns.value,
+				data: props.data,
+				sheetTdIndex: cfg.value.sheetTdIndex
+			};
+		});
+		provide("toEmit", (eventName, ...opts) => {
+			emit(eventName, ...opts);
+		});
+		provide("modelValue", readonly(computed(() => props.modelValue)));
+		provide("updateModelValue", (k) => {
+			emit("update:modelValue", k);
+		});
+		provide("isCheckedAll", readonly(isCheckedAll));
+		provide("setCheckAll", setCheckAll);
+		provide("selectedKeys", readonly(selectedKeys));
+		provide("hasKey", (k) => {
+			return selectedKeys.value.some((sv) => sv === k);
+		});
+		provide("toggleRadio", ({ row, index }) => {
+			emit("after-radio", {
+				row,
+				index
+			});
+		});
+		provide("toggleSelect", (k, checked) => {
+			if (checked) selectedKeys.value = selectedKeys.value.filter((el) => el !== k);
+			else selectedKeys.value.push(k);
+			let b = checkAllSelected();
+			isCheckedAll.value = b;
+			afterChecked();
+		});
+		provide("highlight", readonly(highlightValue));
+		provide("toggleHighlight", (v, { row, index }) => {
+			highlightValue.value = v;
+			emit("update:highlight", v);
+			emit("highlight", {
+				row,
+				index
+			});
+		});
+		watch(() => props.highlight, (hValue) => {
+			highlightValue.value = hValue;
+		});
+		provide("leftFixed", readonly(computed(() => cfg.value.leftFixed)));
+		provide("rightFixed", readonly(computed(() => cfg.value.rightFixed)));
+		provide("beforeResize", (tdElem) => {
+			resizing.value = true;
+			tableRoot.value.classList.add("w-no-select");
+			tableRootLeft.value = getBoundingClientRect(tableRoot.value).left;
+			const x = getBoundingClientRect(tdElem).right ?? 0;
+			resizeLineLeft.value = x - 1 - tableRootLeft.value;
+			oldResizeLineLeft.value = resizeLineLeft.value;
+		});
+		provide("inResizing", (colIndex, dx = 0) => {
+			resizeLineLeft.value = dx + oldResizeLineLeft.value;
+		});
+		provide("afterResize", (colIndex, dWidth) => {
+			resizing.value = false;
+			tableRoot.value.classList.remove("w-no-select");
+			resizeLineLeft.value = -1e4;
+			if (dWidth === 0) return;
+			const k = tbodyColumns.value[colIndex];
+			let newWidth = (resizeWidths.has(k) ? resizeWidths.get(k) : tdWidths.value[colIndex]) + dWidth;
+			if (newWidth <= MIN_WIDTH) newWidth = MIN_WIDTH;
+			resizeWidths.set(tbodyColumns.value[colIndex], newWidth);
+			if (!!cfg.value.leftFixed || !!cfg.value.rightFixed || hasPin.value) {
+				let n = Number(cfg.value.leftFixed) ?? 0;
+				let rightN = Number(cfg.value.rightFixed) ?? 0;
+				if (hasPin.value || n > 0 && colIndex < n || rightN > 0) reset();
+			}
+		});
+		provide("currentSorter", readonly(currentSorter));
+		provide("updateSorter", (field) => {
+			if (field === currentSorter.field) currentSorter.sorter = toggle().item;
+			else {
+				currentSorter.field = field;
+				set({ item: 0 });
+				currentSorter.sorter = get().item;
+			}
+			emit("sort", currentSorter);
+		});
+		function colGroup(widths) {
+			return createVNode("colgroup", null, [widths.map((w, i) => {
+				const k = tbodyColumns.value[i];
+				const ww = resizeWidths.has(k) ? resizeWidths.get(k) : w;
+				return createVNode("col", { "style": { width: ww + "px" } }, null);
+			})]);
+		}
+		function setCheckAll(b) {
+			isCheckedAll.value = b;
+			const checkedKeys = [...selectedKeys.value];
+			const _data = props.data;
+			if (b) {
+				if (_data && _data.length) _data.forEach((row, index) => {
+					let k = getSelectedKey(row, cfg.value.checkKey);
+					if (!checkedKeys.some((_k) => _k == k)) {
+						if (cfg.value.checkable) {
+							const { disabled } = cfg.value.checkable(row, index);
+							if (!disabled) selectedKeys.value.push(k);
+						} else selectedKeys.value.push(k);
+					}
+				});
+			} else {
+				const _keys = [];
+				_data.forEach((row, index) => {
+					const k = getSelectedKey(row, cfg.value.checkKey);
+					if (cfg.value.checkable) {
+						const { disabled } = cfg.value.checkable(row, index);
+						if (!disabled) _keys.push(k);
+					} else _keys.push(k);
+				});
+				selectedKeys.value = selectedKeys.value.filter((_k) => !_keys.some((e) => e == _k));
+			}
+			afterChecked();
+		}
+		function checkAllSelected() {
+			const keys = selectedKeys.value;
+			const d = (props.data ?? []).filter((row, index) => {
+				if (cfg.value.checkable) {
+					const { disabled } = cfg.value.checkable(row, index);
+					return !disabled;
+				}
+				return true;
+			});
+			if (d && d.length && keys.length) {
+				let checked = 1;
+				if (d.length <= keys.length) {
+					let i = 0;
+					while (i < d.length) {
+						const row = d[i];
+						const k = getSelectedKey(row, cfg.value.checkKey);
+						if (!keys.some((_k) => _k == k)) {
+							checked = 0;
+							break;
+						}
+						i++;
+					}
+				} else checked = 0;
+				return checked;
+			}
+			return 0;
+		}
+		function afterChecked() {
+			emit("after-checked", (props.data ?? []).filter((row, index) => {
+				const k = getSelectedKey(row, cfg.value.checkKey);
+				if (cfg.value.checkable) {
+					const { disabled } = cfg.value.checkable(row, index);
+					if (!disabled) return selectedKeys.value.some((s) => s == k);
+					return false;
+				}
+				return selectedKeys.value.some((s) => s == k);
+			}));
+		}
+		watch(selectedKeys, (ks) => {
+			if (!isSameArray(ks, props.keys)) emit("update:keys", ks);
+		}, { deep: true });
+		watch(() => props.keys, (ks) => {
+			if (!isSameArray(ks, selectedKeys.value)) {
+				selectedKeys.value = ks;
+				if (ks && ks.length === 0) isCheckedAll.value = 0;
+			}
+		}, {
+			deep: true,
+			immediate: true
+		});
+		watch(tbodyColumns, () => {
+			nextTick(reset);
+		});
+		watch([
+			() => props.data,
+			() => cfg.value.pageIndex,
+			() => cfg.value.pageSize
+		], ([d, i, s], [oldD, oldI, oldS]) => {
+			if (d) {
+				if (cfg.value.hasCheckbox) {
+					const b = checkAllSelected();
+					isCheckedAll.value = b;
+				}
+				if (oldS !== s || i !== oldI) requestAnimationFrame(() => {
+					nextTick(scrollToTop);
+				});
+			}
+		}, {
+			deep: true,
+			immediate: true
+		});
+		onMounted(() => {
+			if (innerElem.value && isElement(innerElem.value)) {
+				innerElem.value.scrollLeft = 0;
+				innerElem.value.scrollTop = 0;
+			}
+		});
+		useVisibleResize(innerElem, () => {
+			adjustTdWidths();
+			reset();
+		});
+		onActivated(() => {
+			if (innerElem.value && isElement(innerElem.value)) {
+				innerElem.value.scrollLeft = scrollLeft.value;
+				innerElem.value.scrollTop = scrollTop.value;
+			}
+		});
+		function renderTable() {
+			const thead = createVNode(_thead_default, theadProps.value, null);
+			const tbody = (data, from, to) => createVNode(_tbody_default, mergeProps({
+				"data": data,
+				"from": from,
+				"to": to
+			}, tbodyProps.value), null);
+			const innerTable = ({ data, index }) => createVNode(Fragment, null, [
+				createVNode("div", { "class": "w-sheet-thead" }, [createVNode("table", { "class": "w-sheet" }, [colGroup(tdWidths.value), createVNode("thead", null, [thead])])]),
+				createVNode("div", { "class": "w-sheet-tbody" }, [createVNode("table", { "class": "w-sheet" }, [colGroup(tdWidths.value), createVNode("tbody", null, [tbody(data, index ? index.from : void 0, index ? index.to : void 0)])])]),
+				hasSum.value && createVNode("div", { "class": "w-sheet-tfoot" }, [createVNode("table", { "class": "w-sheet" }, [colGroup(tdWidths.value), createVNode("tfoot", null, [createVNode(_tfoot_default, tfootProps.value, null)])])])
+			]);
+			const table = (content) => createVNode("div", {
+				"class": ["w-sheet-container", {
+					"w-sheet-bordered": cfg.value.bordered,
+					"w-sheet-tr-bordered": cfg.value.trBordered
+				}],
+				"style": toCssVarsStyle({
+					...propSizeToCssVars("sheet", props.size),
+					...propColorToCssVars("sheet", props.color),
+					...props.cssVars
+				}),
+				"ref": tableRoot
+			}, [
+				content,
+				(!props.data || props.data?.length === 0) && slots["sheet-empty"] ? slots["sheet-empty"]() : null,
+				withDirectives(createVNode("div", {
+					"class": "w-sheet-resize-line",
+					"style": { left: resizeLineLeft.value + "px" }
+				}, null), [[vShow, resizing.value]]),
+				leftShadowSlots.value.map((s, i) => createVNode("div", {
+					"key": `left-shadow-${i}`,
+					"class": ["w-sheet-left-fixed-shadow-line", { "is-show": s.show && props.data }],
+					"style": { left: s.left + "px" }
+				}, null)),
+				rightShadowSlots.value.map((s, i) => createVNode("div", {
+					"key": `right-shadow-${i}`,
+					"class": ["w-sheet-right-fixed-shadow-line", { "is-show": s.show && props.data }],
+					"style": { left: s.left + "px" }
+				}, null))
+			]);
+			if (cfg.value.virtual) return table(createVNode(Virtual, mergeProps(innerProps.value, {
+				"itemHeight": cfg.value.itemHeight ?? props.size ?? SHEET_DEFAULT_ROW_HEIGHT,
+				"sourceData": props.data,
+				"pad": cfg.value.pad
+			}), { default: (e) => {
+				return innerTable(e);
+			} }));
+			return table(createVNode("div", innerProps.value, [innerTable({ data: props.data })]));
+		}
+		expose({
+			setSorter: ({ field, sorter }) => {
+				currentSorter.field = field;
+				currentSorter.sorter = sorter;
+			},
+			getSorter: () => ({
+				field: currentSorter.field,
+				sorter: currentSorter.sorter
+			}),
+			scrollTo,
+			scrollToTop,
+			scrollToBottom,
+			scrollToPercent,
+			getScrollPosition,
+			getScrollEl,
+			resetFixed: reset
+		});
+		return renderTable;
+	}
+});
+function isSameArray(arr1, arr2) {
+	if (arr1.length === arr2.length) {
+		if (arr1.length === 0) return true;
+		let i = 0;
+		let b = true;
+		while (i < arr1.length) {
+			const k = arr1[i];
+			if (!arr2.some((item) => item === k)) {
+				b = false;
+				break;
+			}
+			i++;
+		}
+		return b;
+	}
+	return false;
+}
+//#endregion
+export { Sheet_default as default };
+
+//# sourceMappingURL=Sheet.js.map