@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/editable-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/editable-text/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA8Fa,0BAA0B;SACrB,sBAAM;EAEqB;EACA;EACC;EACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCgC;EAEd;UAE7C;;;;;MAOb;MAIA,MAAM;UAOgB;UACF;UAEhB;UACA;UACA;UACA;UACA;mBACS;cAEL;mBAIK;mBAaA;;EAQR;EA2BA;EAcA;UASD;;;;;UAYA;;UAMA;;;;;;EAUR;UAQQ;UAgBA;UAOA;;;;;;UAiBA;;;;;;;;;UAiBA;;;;;;;UAaA;;;;;UA4BA;;;;;;;;;UAgBA;UAIA;mBAIS;UA+BT;UAYA;;;;;;;;UAaA;cASI;EAMH,wBAAM;WA0BE;IACf,OAAO;IACP,QAAQ;IACR,QAAQ;;;QAIJ;YACI;IACR,wBAAwB"}

package/dist/components/editable-text/index.js

@@ -1,193 +1,338 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import { FormAssociated as t, FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
-import { createFieldId as i } from "../../shared/form-association/field-id.js";
-import a from "./style.js";
-import { LitElement as o, html as s, unsafeCSS as c } from "lit";
-import { customElement as l, property as u, query as d, state as f } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { ifDefined as m } from "lit/directives/if-defined.js";
-//#region src/components/editable-text/index.ts
-var h = "​", g = 1;
-function _(e) {
-	for (let t of e.childNodes) if (t instanceof Text) return t;
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import { FormAssociated, FormAssociationController, defineFormAssociation } from "../../shared/form-association/index.js";
+import { createFieldId } from "../../shared/form-association/field-id.js";
+import style_default from "./style.js";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+// src/components/editable-text/index.ts
+/** 空值且无 placeholder 时保留可点击行盒。 */
+const BLANK_GLYPH = "​";
+/** 行/字符落点二分的容差（px），吸收次像素与舍入差异。 */
+const CARET_TOLERANCE = 1;
+/**
+* 取文本层承载文案的 Text 节点。
+*
+* 绑定表达式位于元素首个位置时，Lit 会在它前面留一个注释标记节点，因此不能用
+* `firstChild`：那会拿到没有布局的注释，Range 量不到任何矩形。
+*/
+function textNodeOf(layer) {
+	for (const child of layer.childNodes) if (child instanceof Text) return child;
 	return null;
 }
-function v(e, t, n) {
-	let r = _(e);
-	if (!r) return 0;
-	let i = r.data.length, a = document.createRange(), o = (e) => (a.setStart(r, e), a.setEnd(r, e), a.getBoundingClientRect()), s = [];
-	for (let t of e.getClientRects()) s.some((e) => Math.abs(e.top - t.top) <= g) || s.push(t);
-	if (s.length === 0) return i;
-	let c = s[0], l = Infinity;
-	for (let e of s) {
-		let t = Math.abs((e.top + e.bottom) / 2 - n);
-		t <= l && (l = t, c = e);
-	}
-	let u = 0, d = i;
-	for (; u < d;) {
-		let e = u + d >> 1;
-		o(e).top >= c.top - g ? d = e : u = e + 1;
-	}
-	let f = u;
-	for (u = f, d = i; u < d;) {
-		let e = u + d + 1 >> 1;
-		o(e).top <= c.top + g ? u = e : d = e - 1;
-	}
-	let p = Math.max(u, f);
-	for (u = f, d = p; u < d;) {
-		let e = u + d + 1 >> 1;
-		o(e).left <= t + g ? u = e : d = e - 1;
-	}
-	return u;
+/**
+* 把视口坐标映射为文本层的字符偏移。
+*
+* `document.caretPositionFromPoint` 不进入 shadow DOM（对 shadow 内容返回 shadow host
+* 之外的节点），因此在文本层上用 Range 空矩形二分：先按 y 选行，再在行内按 x 选字符。
+* 文本层与编辑层同盒同排版，偏移与 textarea 的 selectionStart 一一对应。
+*/
+function caretOffsetFromPoint(textLayer, x, y) {
+	const node = textNodeOf(textLayer);
+	if (!node) return 0;
+	const length = node.data.length;
+	const range = document.createRange();
+	const rectAt = (offset) => {
+		range.setStart(node, offset);
+		range.setEnd(node, offset);
+		return range.getBoundingClientRect();
+	};
+	const lines = [];
+	for (const rect of textLayer.getClientRects()) if (!lines.some((line) => Math.abs(line.top - rect.top) <= CARET_TOLERANCE)) lines.push(rect);
+	if (lines.length === 0) return length;
+	let line = lines[0];
+	let nearest = Infinity;
+	for (const candidate of lines) {
+		const distance = Math.abs((candidate.top + candidate.bottom) / 2 - y);
+		if (distance <= nearest) {
+			nearest = distance;
+			line = candidate;
+		}
+	}
+	let lo = 0;
+	let hi = length;
+	while (lo < hi) {
+		const mid = lo + hi >> 1;
+		if (rectAt(mid).top >= line.top - CARET_TOLERANCE) hi = mid;
+		else lo = mid + 1;
+	}
+	const lineStart = lo;
+	lo = lineStart;
+	hi = length;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (rectAt(mid).top <= line.top + CARET_TOLERANCE) lo = mid;
+		else hi = mid - 1;
+	}
+	const lineEnd = Math.max(lo, lineStart);
+	lo = lineStart;
+	hi = lineEnd;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (rectAt(mid).left <= x + CARET_TOLERANCE) lo = mid;
+		else hi = mid - 1;
+	}
+	return lo;
 }
-var y = class extends t(o) {
+let WebUiEditableText = class WebUiEditableText extends FormAssociated(LitElement) {
 	static {
-		this.styles = [c(a)];
+		this.styles = [unsafeCSS(style_default)];
 	}
+	/**
+	* `value` attribute 承载 form reset 的初值，不随当前值反射；property 暴露当前值，
+	* 与原生 input 的 value / defaultValue 关系一致。
+	*/
 	get value() {
 		return this._value;
 	}
-	set value(e) {
-		let t = this._value;
-		this._value = e, this._formAssociation.sync(), this.requestUpdate("value", t);
+	set value(v) {
+		const old = this._value;
+		this._value = v;
+		this._formAssociation.sync();
+		this.requestUpdate("value", old);
 	}
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	constructor() {
-		super(), this.name = "", this.placeholder = "", this.disabled = !1, this.readonly = !1, this.commitOnUnmount = !1, this.ariaLabel = null, this._value = "", this._editing = !1, this._editBase = "", this._pendingCaret = null, this._refocusing = !1, this._resizeObserver = null, this._fieldId = i("web-ui-editable-text"), this._formAssociation = r({
+		super();
+		this.name = "";
+		this.placeholder = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.commitOnUnmount = false;
+		this.ariaLabel = null;
+		this._value = "";
+		this._editing = false;
+		this._editBase = "";
+		this._pendingCaret = null;
+		this._refocusing = false;
+		this._resizeObserver = null;
+		this._fieldId = createFieldId("web-ui-editable-text");
+		this._formAssociation = defineFormAssociation({
 			host: this,
 			getState: () => this._value,
-			setState: (e) => {
-				this.value = e;
+			setState: (value) => {
+				this.value = value;
 			},
 			getFormValue: () => this._value,
 			getFormState: () => this._value,
-			restoreState: (e) => {
-				typeof e == "string" && (this.value = e);
+			restoreState: (state) => {
+				if (typeof state === "string") this.value = state;
 			}
-		}).make(), this._formAssociationController = new n(this, this._formAssociation), this._onEditingKeydown = (e) => {
-			if (!e.isComposing && e.composedPath().includes(this)) {
-				if (e.key === "Escape") {
-					e.preventDefault(), e.stopPropagation(), this._cancelEditing(), this._returnFocusToHost();
-					return;
-				}
-				if (e.key === "Enter") {
-					if (e.preventDefault(), e.stopPropagation(), this.readonly) return;
-					this._commitEditing(!0);
-				}
+		}).make();
+		this._formAssociationController = new FormAssociationController(this, this._formAssociation);
+		this._onEditingKeydown = (e) => {
+			if (e.isComposing) return;
+			if (!e.composedPath().includes(this)) return;
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopPropagation();
+				this._cancelEditing();
+				this._returnFocusToHost();
+				return;
 			}
-		}, this.addEventListener("focus", this._onHostFocus);
+			if (e.key === "Enter") {
+				e.preventDefault();
+				e.stopPropagation();
+				if (this.readonly) return;
+				this._commitEditing(true);
+			}
+		};
+		this.addEventListener("focus", this._onHostFocus);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.commitOnUnmount && this._editing && !this._isDisabled && !this.readonly && this._value !== this._editBase && this._commitEditing(!1), this._releaseEditingKeys(), this._teardownAutosize();
+		super.disconnectedCallback();
+		if (this.commitOnUnmount && this._editing && !this._isDisabled && !this.readonly && this._value !== this._editBase) this._commitEditing(false);
+		this._releaseEditingKeys();
+		this._teardownAutosize();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._setupAutosize(), this._editing && this._claimEditingKeys();
+		super.connectedCallback();
+		this._setupAutosize();
+		if (this._editing) this._claimEditingKeys();
 	}
 	updated() {
-		this._isDisabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"), this._editing && this._isDisabled && this._exitEditing(), this._autosizeEditor();
+		if (this._isDisabled) this.removeAttribute("tabindex");
+		else this.setAttribute("tabindex", "0");
+		if (this._editing && this._isDisabled) this._exitEditing();
+		this._autosizeEditor();
 	}
 	_onHostFocus() {
 		if (this._refocusing) {
-			this._refocusing = !1;
+			this._refocusing = false;
 			return;
 		}
 		this._enterEditing();
 	}
+	/**
+	* pointerdown 时文本层仍是命中目标，此时记录落点；浏览器随后的默认聚焦会触发
+	* host focus 进入编辑，偏移在那里应用到 textarea。
+	*/
 	_onPointerDown(e) {
-		this._isDisabled || this._editing || !this._textLayer || (this._pendingCaret = v(this._textLayer, e.clientX, e.clientY));
+		if (this._isDisabled || this._editing || !this._textLayer) return;
+		this._pendingCaret = caretOffsetFromPoint(this._textLayer, e.clientX, e.clientY);
 	}
+	/** mousedown 默认聚焦被拦截等场景由 click 兜底进入编辑。 */
 	_onClick() {
-		this._isDisabled || this._editing || this._enterEditing();
+		if (this._isDisabled || this._editing) return;
+		this._enterEditing();
 	}
+	/**
+	* 公共 API：进入编辑态并全选内容；已在编辑态时只重新全选。
+	*
+	* `disabled` 时不进入编辑，与 `focus()` 一致。
+	*/
 	select() {
 		if (this._isDisabled) return;
-		this._editing || this._enterEditing();
-		let e = this._editor;
-		e?.setSelectionRange(0, e.value.length);
+		if (!this._editing) this._enterEditing();
+		const editor = this._editor;
+		editor?.setSelectionRange(0, editor.value.length);
 	}
 	_enterEditing() {
 		if (this._isDisabled || this._editing) return;
-		this._editing = !0, this._editBase = this._value, this.toggleAttribute("editing", !0), this._claimEditingKeys();
-		let e = this._editor;
-		if (!e) return;
-		e.focus();
-		let t = this._pendingCaret ?? this._value.length;
+		this._editing = true;
+		this._editBase = this._value;
+		this.toggleAttribute("editing", true);
+		this._claimEditingKeys();
+		const editor = this._editor;
+		if (!editor) return;
+		editor.focus();
+		const offset = this._pendingCaret ?? this._value.length;
 		this._pendingCaret = null;
-		let n = Math.max(0, Math.min(t, e.value.length));
-		e.setSelectionRange(n, n);
+		const clamped = Math.max(0, Math.min(offset, editor.value.length));
+		editor.setSelectionRange(clamped, clamped);
 	}
 	_exitEditing() {
-		this._editing && (this._editing = !1, this._releaseEditingKeys(), this.toggleAttribute("editing", !1));
+		if (!this._editing) return;
+		this._editing = false;
+		this._releaseEditingKeys();
+		this.toggleAttribute("editing", false);
 	}
 	_onInput() {
-		let e = this._editor;
+		const editor = this._editor;
 		if (this._isDisabled || this.readonly) {
-			e && e.value !== this._value && (e.value = this._value);
+			if (editor && editor.value !== this._value) editor.value = this._value;
 			return;
 		}
-		this._value = e?.value ?? "", this._formAssociation.sync(), this._autosizeEditor();
+		this._value = editor?.value ?? "";
+		this._formAssociation.sync();
+		this._autosizeEditor();
 	}
+	/**
+	* blur 提交：与 Enter 同一条提交路径，草稿成为新值并派发 change。
+	*
+	* 不交还焦点：焦点已被用户移走，抢回宿主会吞掉消费者的目标焦点。
+	*/
 	_onBlur() {
-		if (this._editing && !this._isDisabled) {
-			if (this.readonly) {
-				this._exitEditing();
-				return;
-			}
-			this._commitEditing(!1);
+		if (!this._editing || this._isDisabled) return;
+		if (this.readonly) {
+			this._exitEditing();
+			return;
 		}
+		this._commitEditing(false);
 	}
-	_commitEditing(e) {
-		this._editing && (this._exitEditing(), e && this._returnFocusToHost(), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		})));
+	/**
+	* 提交：草稿成为新值、退出编辑，并恰好派发一次 change。Enter 与 blur 同走这一条路。
+	*
+	* `returnFocus` 区分两种来路：Enter 主动结束时把焦点交还宿主（标记防重入编辑）；
+	* blur 是被动失焦，焦点已被用户移走，再抢回宿主会吞掉消费者的目标焦点。
+	* 先退出编辑再动焦点：退出时 textarea 隐藏触发的 blur 看到 _editing 已为 false，
+	* 不会把这次提交误判成又一次 blur 提交。
+	*/
+	_commitEditing(returnFocus) {
+		if (!this._editing) return;
+		this._exitEditing();
+		if (returnFocus) this._returnFocusToHost();
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
 	}
+	/**
+	* 取消：恢复进入编辑时的值并派发 cancel。仅 Escape 走这一条路径。
+	*
+	* 调用方（Escape 分支）随后才交还焦点：本方法先摘除编辑态，焦点迁移触发的 blur
+	* 到达时 `_editing` 已为 false 而早退，不会把取消误判成 blur 提交。
+	*/
 	_cancelEditing() {
-		this._editing && (this._value = this._editBase, this._formAssociation.sync(), this._exitEditing(), this._refocusing = !0, this.dispatchEvent(new Event("cancel", {
-			bubbles: !1,
-			composed: !1
-		})));
+		if (!this._editing) return;
+		this._value = this._editBase;
+		this._formAssociation.sync();
+		this._exitEditing();
+		this._refocusing = true;
+		this.dispatchEvent(new Event("cancel", {
+			bubbles: false,
+			composed: false
+		}));
 	}
+	/**
+	* 焦点交还宿主：先标记再聚焦，宿主 focus 到达时标记已消费，不会再次进入编辑；
+	* 标记在微任务里清掉，此后的聚焦照常进入编辑。
+	*/
 	_returnFocusToHost() {
-		this._refocusing = !0, this.focus(), queueMicrotask(() => {
-			this._refocusing = !1;
+		this._refocusing = true;
+		this.focus();
+		queueMicrotask(() => {
+			this._refocusing = false;
 		});
 	}
+	/**
+	* 编辑态按键归属：Enter 提交、Escape 取消。
+	*
+	* 监听挂在 window 捕获阶段而不是 shadow 内的 textarea 上：消费方（overlay 仲裁者）在
+	* document 捕获阶段收 Escape，组件若只在 textarea 上处理，按键先被仲裁者收走，
+	* 于是一次 Escape 会同时取消编辑和关闭外层 overlay。window 在 document 上游，
+	* stopPropagation 只有挂在这里才拦得住仲裁者。
+	*/
 	_claimEditingKeys() {
-		window.addEventListener("keydown", this._onEditingKeydown, !0);
+		window.addEventListener("keydown", this._onEditingKeydown, true);
 	}
 	_releaseEditingKeys() {
-		window.removeEventListener("keydown", this._onEditingKeydown, !0);
+		window.removeEventListener("keydown", this._onEditingKeydown, true);
 	}
 	_setupAutosize() {
-		if (this._teardownAutosize(), typeof ResizeObserver > "u") {
+		this._teardownAutosize();
+		if (typeof ResizeObserver === "undefined") {
 			this._autosizeEditor();
 			return;
 		}
-		this._resizeObserver = new ResizeObserver(() => this._autosizeEditor()), this._resizeObserver.observe(this), this._autosizeEditor();
+		this._resizeObserver = new ResizeObserver(() => this._autosizeEditor());
+		this._resizeObserver.observe(this);
+		this._autosizeEditor();
 	}
 	_teardownAutosize() {
-		this._resizeObserver?.disconnect(), this._resizeObserver = null, this._editor?.style.removeProperty("height");
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this._editor?.style.removeProperty("height");
 	}
+	/**
+	* 编辑层高度始终跟随自身内容，不依赖文本层折出的行盒。
+	*
+	* 编辑层绝对定位并用 top/bottom 撑高，`height: auto` 量到的是包含块高度而不是内容高；
+	* 先归零再读 scrollHeight，拿到的才是自身内容的高度（含 1px 内边距）。
+	* 观察宿主而非编辑层：编辑层在文档流外，改它的高度不会反过来改动宿主尺寸。
+	*/
 	_autosizeEditor() {
-		let e = this._editor;
-		if (!e) return;
-		let t = e.style.height;
-		e.style.height = "0px";
-		let n = e.scrollHeight;
-		e.style.height = n > 0 ? `${n}px` : t;
+		const editor = this._editor;
+		if (!editor) return;
+		const previous = editor.style.height;
+		editor.style.height = "0px";
+		const height = editor.scrollHeight;
+		editor.style.height = height > 0 ? `${height}px` : previous;
 	}
 	get _displayText() {
-		return this._value === "" ? this.placeholder === "" ? h : this.placeholder : this._value;
+		if (this._value !== "") return this._value;
+		if (this.placeholder !== "") return this.placeholder;
+		return BLANK_GLYPH;
 	}
 	render() {
-		return s`
+		return html`
       <div class="layers" @pointerdown=${this._onPointerDown} @click=${this._onClick}>
         <span
-          class=${p({
-			text: !0,
+          class=${classMap({
+			text: true,
 			placeholder: this._value === "",
 			"trailing-newline": this._value.endsWith("\n")
 		})}
@@ -200,7 +345,7 @@ var y = class extends t(o) {
           .placeholder=${this.placeholder}
           ?disabled=${this._isDisabled}
           ?readonly=${this.readonly}
-          aria-label=${m(this.ariaLabel)}
+          aria-label=${ifDefined(this.ariaLabel)}
           @input=${this._onInput}
           @blur=${this._onBlur}
         ></textarea>
@@ -208,27 +353,36 @@ var y = class extends t(o) {
     `;
 	}
 };
-e([u({
+__decorate([property({
 	type: String,
-	reflect: !0
-})], y.prototype, "name", void 0), e([u({
+	reflect: true
+})], WebUiEditableText.prototype, "name", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], y.prototype, "placeholder", void 0), e([u({
+	reflect: true
+})], WebUiEditableText.prototype, "placeholder", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], y.prototype, "disabled", void 0), e([u({
+	reflect: true
+})], WebUiEditableText.prototype, "disabled", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], y.prototype, "readonly", void 0), e([u({
+	reflect: true
+})], WebUiEditableText.prototype, "readonly", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "commit-on-unmount"
-})], y.prototype, "commitOnUnmount", void 0), e([u({
+})], WebUiEditableText.prototype, "commitOnUnmount", void 0);
+__decorate([property({
 	type: String,
 	attribute: "aria-label"
-})], y.prototype, "ariaLabel", void 0), e([f()], y.prototype, "_value", void 0), e([u({ type: String })], y.prototype, "value", null), e([d(".editor")], y.prototype, "_editor", void 0), e([d(".text")], y.prototype, "_textLayer", void 0), y = e([l("web-ui-editable-text")], y);
-//#endregion
-export { y as WebUiEditableText };
+})], WebUiEditableText.prototype, "ariaLabel", void 0);
+__decorate([state()], WebUiEditableText.prototype, "_value", void 0);
+__decorate([property({ type: String })], WebUiEditableText.prototype, "value", null);
+__decorate([query(".editor")], WebUiEditableText.prototype, "_editor", void 0);
+__decorate([query(".text")], WebUiEditableText.prototype, "_textLayer", void 0);
+WebUiEditableText = __decorate([customElement("web-ui-editable-text")], WebUiEditableText);
+export { WebUiEditableText };
 
 //# sourceMappingURL=index.js.map