@silver-formily/grid 1.0.0

package/README.md

@@ -0,0 +1,5 @@
+# @silver-formily/grid
+
+> `@silver-formily/grid` 初始化包结构。
+
+当前仅包含 `src/demo.ts` 作为示例入口，后续可在此基础上扩展网格组件与工具函数。

package/dist/index.d.mts

@@ -0,0 +1,73 @@
+//#region src/types.d.ts
+type GridNode = {
+  index?: number;
+  visible?: boolean;
+  column?: number;
+  shadowColumn?: number;
+  row?: number;
+  shadowRow?: number;
+  span?: number;
+  originSpan?: number;
+  element?: HTMLElement;
+};
+interface IGridOptions {
+  maxRows?: number;
+  maxColumns?: number | number[];
+  minColumns?: number | number[];
+  maxWidth?: number | number[];
+  minWidth?: number | number[];
+  breakpoints?: number[];
+  columnGap?: number;
+  rowGap?: number;
+  colWrap?: boolean;
+  strictAutoFit?: boolean;
+  shouldVisible?: (node: GridNode, grid: Grid<HTMLElement>) => boolean;
+  onDigest?: (grid: Grid<HTMLElement>) => void;
+  onInitialized?: (grid: Grid<HTMLElement>) => void;
+}
+//#endregion
+//#region src/index.d.ts
+declare function createGrid<Container extends HTMLElement>(options?: IGridOptions): Grid<Container>;
+declare class Grid<Container extends HTMLElement> {
+  options: IGridOptions;
+  width: number;
+  height: number;
+  container: Container;
+  children: GridNode[];
+  childTotalColumns: number;
+  shadowChildTotalColumns: number;
+  childOriginTotalColumns: number;
+  shadowChildOriginTotalColumns: number;
+  ready: boolean;
+  constructor(options?: IGridOptions);
+  set breakpoints(breakpoints: number[]);
+  get breakpoints(): number[];
+  get breakpoint(): number;
+  set maxWidth(maxWidth: number);
+  get maxWidth(): number;
+  set minWidth(minWidth: number);
+  get minWidth(): number;
+  set maxColumns(maxColumns: number);
+  get maxColumns(): number;
+  set maxRows(maxRows: number);
+  get maxRows(): number;
+  set minColumns(minColumns: number);
+  get minColumns(): number;
+  set rowGap(rowGap: number);
+  get rowGap(): number;
+  set columnGap(columnGap: number);
+  get columnGap(): number;
+  set colWrap(colWrap: boolean);
+  get colWrap(): boolean;
+  get columns(): number;
+  get rows(): number;
+  get shadowRows(): number;
+  get templateColumns(): string;
+  get gap(): string;
+  get childSize(): number;
+  get fullnessLastColumn(): boolean;
+  connect: (container: Container) => () => void;
+  static id: (options?: IGridOptions) => string;
+}
+//#endregion
+export { Grid, type GridNode, type IGridOptions, createGrid };

package/dist/index.mjs

@@ -0,0 +1,422 @@
+import { batch, define, markRaw, observable, reaction } from "@formily/reactive";
+
+//#region src/observer.ts
+const isHTMLElement$1 = (node) => node.nodeType === 1;
+var ChildListMutationObserver = class {
+	observer;
+	callback;
+	childList = [];
+	init = {};
+	constructor(callback) {
+		this.callback = callback;
+		this.observer = new MutationObserver(this.handler);
+	}
+	observeChildList(element) {
+		Array.from(element.children).forEach((node) => {
+			if (isHTMLElement$1(node)) this.addObserver(node);
+		});
+	}
+	addObserver(element) {
+		if (this.childList.find((node) => node.element === element)) return;
+		const child = {
+			element,
+			observer: new MutationObserver(this.callback),
+			dispose: () => {
+				child.observer.disconnect();
+				this.childList = this.childList.filter((node) => node !== child);
+			}
+		};
+		child.observer.observe(child.element, {
+			...this.init,
+			subtree: false,
+			childList: false,
+			characterData: false,
+			characterDataOldValue: false,
+			attributeOldValue: false
+		});
+		this.childList.push(child);
+	}
+	removeObserver(element) {
+		this.childList.find((node) => node.element === element)?.dispose();
+	}
+	handler = (mutations) => {
+		mutations.forEach((mutation) => {
+			if (mutation.type === "childList") {
+				mutation.addedNodes.forEach((node) => {
+					if (isHTMLElement$1(node)) this.addObserver(node);
+				});
+				mutation.removedNodes.forEach((node) => {
+					if (isHTMLElement$1(node)) this.removeObserver(node);
+				});
+			}
+		});
+		this.callback(mutations, this.observer);
+	};
+	observe = (element, init = {}) => {
+		this.init = init;
+		this.observeChildList(element);
+		this.observer.observe(element, {
+			...this.init,
+			subtree: false,
+			childList: true,
+			characterData: false,
+			characterDataOldValue: false,
+			attributeOldValue: false
+		});
+	};
+	disconnect = () => {
+		this.observer.disconnect();
+		this.childList.forEach((node) => node.observer.disconnect());
+		this.childList = [];
+	};
+};
+
+//#endregion
+//#region src/utils.ts
+const SpanRegExp = /span\s*(\d+)/;
+const isValid = (value) => value !== void 0 && value !== null;
+function isHTMLElement(value) {
+	const HTMLElementCtor = globalThis.HTMLElement;
+	if (typeof HTMLElementCtor !== "function") return false;
+	return value instanceof HTMLElementCtor;
+}
+function calcBreakpointIndex(breakpoints, width) {
+	if (Array.isArray(breakpoints)) {
+		for (let i = 0; i < breakpoints.length; i++) if (width <= breakpoints[i]) return i;
+	}
+	return -1;
+}
+function calcFactor(value, breakpointIndex) {
+	if (Array.isArray(value)) {
+		if (breakpointIndex === -1) return value[0];
+		return value[breakpointIndex] ?? value[value.length - 1];
+	}
+	return value;
+}
+function parseSpan(gridColumnStart) {
+	return Number(String(gridColumnStart).match(SpanRegExp)?.[1] ?? 1);
+}
+function parseGridNode(elements) {
+	return Array.from(elements).reduce((buf, element, index) => {
+		if (!isHTMLElement(element)) return buf;
+		const style = getComputedStyle(element);
+		const visible = style.display !== "none";
+		const origin = element.getAttribute("data-grid-span");
+		const span = parseSpan(style.gridColumnStart) || 1;
+		const originSpan = Number(origin ?? span);
+		if (!origin) element.setAttribute("data-grid-span", String(span));
+		buf.push({
+			index,
+			visible,
+			span,
+			originSpan,
+			element,
+			column: 0,
+			shadowColumn: 0,
+			row: 0,
+			shadowRow: 0
+		});
+		return buf;
+	}, []);
+}
+function calcChildTotalColumns(nodes, shadow = false) {
+	return nodes.reduce((buf, node) => {
+		if (!shadow && !node.visible) return buf;
+		return buf + (node.span ?? 1);
+	}, 0);
+}
+function calcChildOriginTotalColumns(nodes, shadow = false) {
+	return nodes.reduce((buf, node) => {
+		const span = node.span ?? 1;
+		const originSpan = node.originSpan ?? span;
+		if (!shadow && !node.visible) return buf;
+		if (originSpan === -1) return buf + span;
+		return buf + originSpan;
+	}, 0);
+}
+function calcSatisfyColumns(width, maxColumns, minColumns, maxWidth, minWidth, gap) {
+	const results = [];
+	for (let columns = minColumns; columns <= maxColumns; columns++) {
+		const innerWidth = width - (columns - 1) * gap;
+		const columnWidth = innerWidth / columns;
+		if (columnWidth >= minWidth && columnWidth <= maxWidth) results.push(columns);
+		else if (columnWidth < minWidth) results.push(Math.min(Math.floor(innerWidth / minWidth), maxColumns));
+		else if (columnWidth > maxWidth) results.push(Math.min(Math.floor(innerWidth / maxWidth), maxColumns));
+	}
+	if (!results.length) return minColumns;
+	return Math.max(...results);
+}
+function factor(value, grid) {
+	if (!isValid(value)) return void 0;
+	return calcFactor(value, grid.breakpoint);
+}
+function resolveChildren(grid) {
+	if (!grid.ready) return;
+	let walked = 0;
+	let shadowWalked = 0;
+	let rowIndex = 0;
+	let shadowRowIndex = 0;
+	const shouldVisible = grid.options.shouldVisible;
+	grid.children = grid.children.map((node) => {
+		const element = node.element;
+		const columnIndex = walked % grid.columns;
+		const shadowColumnIndex = shadowWalked % grid.columns;
+		const remainColumns = grid.columns - columnIndex;
+		const originSpan = node.originSpan ?? node.span ?? 1;
+		const targetSpan = originSpan > grid.columns ? grid.columns : originSpan;
+		const span = grid.options.strictAutoFit ? targetSpan : targetSpan > remainColumns ? remainColumns : targetSpan;
+		const gridColumn = originSpan === -1 ? `span ${remainColumns} / -1` : `span ${span} / auto`;
+		if (element && element.style.gridColumn !== gridColumn) element.style.gridColumn = gridColumn;
+		if (node.visible) walked += span;
+		shadowWalked += span;
+		if (columnIndex === 0) rowIndex++;
+		if (shadowColumnIndex === 0) shadowRowIndex++;
+		node.shadowRow = shadowRowIndex;
+		node.shadowColumn = shadowColumnIndex + 1;
+		if (node.visible) {
+			node.row = rowIndex;
+			node.column = columnIndex + 1;
+		}
+		if (shouldVisible) if (!shouldVisible(node, grid)) {
+			if (node.visible && element) element.style.display = "none";
+			node.visible = false;
+		} else {
+			if (!node.visible && element) element.style.display = "";
+			node.visible = true;
+		}
+		return node;
+	});
+}
+const nextTick = (callback) => Promise.resolve(0).then(callback);
+
+//#endregion
+//#region src/index.ts
+function createGrid(options) {
+	return markRaw(new Grid(options));
+}
+var Grid = class {
+	options;
+	width = 0;
+	height = 0;
+	container;
+	children = [];
+	childTotalColumns = 0;
+	shadowChildTotalColumns = 0;
+	childOriginTotalColumns = 0;
+	shadowChildOriginTotalColumns = 0;
+	ready = false;
+	constructor(options) {
+		Reflect.defineProperty(this, "__v_skip", {
+			value: true,
+			configurable: true
+		});
+		this.options = {
+			breakpoints: [
+				720,
+				1280,
+				1920
+			],
+			columnGap: 8,
+			rowGap: 4,
+			minWidth: 100,
+			colWrap: true,
+			strictAutoFit: false,
+			...options
+		};
+		define(this, {
+			options: observable.shallow,
+			width: observable.ref,
+			height: observable.ref,
+			ready: observable.ref,
+			children: observable.ref,
+			childOriginTotalColumns: observable.ref,
+			shadowChildOriginTotalColumns: observable.ref,
+			shadowChildTotalColumns: observable.ref,
+			childTotalColumns: observable.ref,
+			columns: observable.computed,
+			templateColumns: observable.computed,
+			gap: observable.computed,
+			maxColumns: observable.computed,
+			minColumns: observable.computed,
+			maxWidth: observable.computed,
+			minWidth: observable.computed,
+			breakpoints: observable.computed,
+			breakpoint: observable.computed,
+			rowGap: observable.computed,
+			columnGap: observable.computed,
+			colWrap: observable.computed
+		});
+	}
+	set breakpoints(breakpoints) {
+		this.options.breakpoints = breakpoints;
+	}
+	get breakpoints() {
+		return this.options.breakpoints ?? [];
+	}
+	get breakpoint() {
+		const width = this.ready ? this.width : Number.POSITIVE_INFINITY;
+		const breakpoint = calcBreakpointIndex(this.breakpoints, width);
+		if (!this.ready && breakpoint === -1 && this.breakpoints.length > 0) return this.breakpoints.length - 1;
+		return breakpoint;
+	}
+	set maxWidth(maxWidth) {
+		this.options.maxWidth = maxWidth;
+	}
+	get maxWidth() {
+		return factor(this.options.maxWidth, this) ?? Infinity;
+	}
+	set minWidth(minWidth) {
+		this.options.minWidth = minWidth;
+	}
+	get minWidth() {
+		return factor(this.options.minWidth, this) ?? 100;
+	}
+	set maxColumns(maxColumns) {
+		this.options.maxColumns = maxColumns;
+	}
+	get maxColumns() {
+		return factor(this.options.maxColumns, this) ?? Infinity;
+	}
+	set maxRows(maxRows) {
+		this.options.maxRows = maxRows;
+	}
+	get maxRows() {
+		return this.options.maxRows ?? Infinity;
+	}
+	set minColumns(minColumns) {
+		this.options.minColumns = minColumns;
+	}
+	get minColumns() {
+		return factor(this.options.minColumns, this) ?? 1;
+	}
+	set rowGap(rowGap) {
+		this.options.rowGap = rowGap;
+	}
+	get rowGap() {
+		return factor(this.options.rowGap, this) ?? 5;
+	}
+	set columnGap(columnGap) {
+		this.options.columnGap = columnGap;
+	}
+	get columnGap() {
+		return factor(this.options.columnGap, this) ?? 10;
+	}
+	set colWrap(colWrap) {
+		this.options.colWrap = colWrap;
+	}
+	get colWrap() {
+		return factor(this.options.colWrap, this) ?? true;
+	}
+	get columns() {
+		if (!this.ready) {
+			const minColumns = Math.max(1, this.minColumns);
+			if (this.maxColumns === Infinity) return minColumns;
+			return Math.max(minColumns, Math.max(1, this.maxColumns));
+		}
+		const originTotalColumns = this.childOriginTotalColumns;
+		if (this.colWrap === false) return originTotalColumns;
+		const baseColumns = this.childSize;
+		const strictMaxWidthColumns = Math.round(this.width / (this.maxWidth + this.columnGap));
+		const looseMaxWidthColumns = Math.min(originTotalColumns, strictMaxWidthColumns);
+		const maxWidthColumns = this.options.strictAutoFit ? strictMaxWidthColumns : looseMaxWidthColumns;
+		const strictMinWidthColumns = Math.round(this.width / (this.minWidth + this.columnGap));
+		const looseMinWidthColumns = Math.min(originTotalColumns, strictMinWidthColumns);
+		const minWidthColumns = this.options.strictAutoFit ? strictMinWidthColumns : looseMinWidthColumns;
+		const minCalculatedColumns = Math.min(baseColumns, originTotalColumns, maxWidthColumns, minWidthColumns);
+		const maxCalculatedColumns = Math.max(baseColumns, originTotalColumns, maxWidthColumns, minWidthColumns);
+		const finalColumns = calcSatisfyColumns(this.width, maxCalculatedColumns, minCalculatedColumns, this.maxWidth, this.minWidth, this.columnGap);
+		if (finalColumns >= this.maxColumns) return this.maxColumns;
+		if (finalColumns <= this.minColumns) return this.minColumns;
+		return finalColumns;
+	}
+	get rows() {
+		return Math.ceil(this.childTotalColumns / this.columns);
+	}
+	get shadowRows() {
+		return Math.ceil(this.shadowChildTotalColumns / this.columns);
+	}
+	get templateColumns() {
+		if (!this.ready) return `repeat(${this.columns},minmax(0,1fr))`;
+		if (!this.width) return "";
+		if (this.maxWidth === Infinity) return `repeat(${this.columns},minmax(0,1fr))`;
+		if (this.options.strictAutoFit !== true) {
+			const columnWidth = (this.width - (this.columns - 1) * this.columnGap) / this.columns;
+			if (columnWidth < this.minWidth || columnWidth > this.maxWidth) return `repeat(${this.columns},minmax(0,1fr))`;
+		}
+		return `repeat(${this.columns},minmax(${this.minWidth}px,${this.maxWidth}px))`;
+	}
+	get gap() {
+		return `${this.rowGap}px ${this.columnGap}px`;
+	}
+	get childSize() {
+		return this.children.length;
+	}
+	get fullnessLastColumn() {
+		return this.columns === this.children[this.childSize - 1]?.span;
+	}
+	connect = (container) => {
+		if (!container) return () => {};
+		this.container = container;
+		const digest = batch.bound(() => {
+			this.children = parseGridNode(this.container.children);
+			this.childTotalColumns = calcChildTotalColumns(this.children);
+			this.shadowChildTotalColumns = calcChildTotalColumns(this.children, true);
+			this.childOriginTotalColumns = calcChildOriginTotalColumns(this.children);
+			this.shadowChildOriginTotalColumns = calcChildOriginTotalColumns(this.children, true);
+			const rect = this.container.getBoundingClientRect();
+			if (rect.width && rect.height) {
+				this.width = rect.width;
+				this.height = rect.height;
+			}
+			resolveChildren(this);
+			nextTick(() => {
+				this.options.onDigest?.(this);
+			});
+			if (!this.ready) nextTick(() => {
+				this.options.onInitialized?.(this);
+			});
+		});
+		const initialize = batch.bound(() => {
+			digest();
+			this.ready = true;
+		});
+		const mutationObserver = new ChildListMutationObserver(digest);
+		const smoothDigest = () => {
+			requestAnimationFrame(() => {
+				digest();
+			});
+		};
+		const resizeObserver = new ResizeObserver(smoothDigest);
+		const dispose = reaction(() => ({ ...this.options }), digest);
+		resizeObserver.observe(this.container);
+		mutationObserver.observe(this.container, {
+			attributeFilter: ["data-grid-span"],
+			attributes: true
+		});
+		initialize();
+		return () => {
+			resizeObserver.unobserve(this.container);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			dispose();
+			this.children = [];
+		};
+	};
+	static id = (options = {}) => {
+		return JSON.stringify([
+			"maxRows",
+			"maxColumns",
+			"minColumns",
+			"maxWidth",
+			"minWidth",
+			"breakpoints",
+			"columnGap",
+			"rowGap",
+			"colWrap",
+			"strictAutoFit"
+		].map((key) => options[key]));
+	};
+};
+
+//#endregion
+export { Grid, createGrid };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@silver-formily/grid",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Grid package scaffold for silver-formily",
+  "author": "hezhengxu",
+  "license": "MIT",
+  "homepage": "https://github.com/hezhengxu2018/silver-formily",
+  "repository": {
+    "type": "github",
+    "url": "https://github.com/hezhengxu2018/silver-formily",
+    "directory": "packages/grid"
+  },
+  "bugs": {
+    "url": "https://github.com/hezhengxu2018/silver-formily/issues"
+  },
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@formily/reactive": "^2"
+  },
+  "devDependencies": {
+    "@formily/reactive": "^2.3.7",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-istanbul": "4.0.18",
+    "eslint": "^9.36.0",
+    "jsdom": "^26.1.0",
+    "playwright": "^1.58.2",
+    "tsdown": "^0.18.1",
+    "typescript": "5.9.2",
+    "vitest": "^4.0.16",
+    "@silver-formily/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage --browser.headless",
+    "lint": "eslint .",
+    "format": "eslint . --fix",
+    "check-types": "tsc --noEmit",
+    "docs:dev": "pnpm --filter grid-docs dev",
+    "docs:build": "pnpm turbo run docs:build --filter=grid-docs",
+    "docs:preview": "pnpm --filter grid-docs preview"
+  }
+}