@greypan/web-ui 7.0.0 → 8.0.0

package/dist/components/autocomplete/index.js

@@ -1,32 +1,36 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import "../option/index.js";
 import t from "../../assets/glass.js";
-import n from "../../assets/overlay-motion.js";
+import { normalizeLiteral as n } from "../../shared/normalize/index.js";
 import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
-import { normalizeLiteral as o } from "../../shared/normalize/index.js";
+import "../input/index.js";
+import "../option/index.js";
+import o from "../../assets/overlay-motion.js";
 import { dispatchOpenChangeEvent as s } from "../../shared/open-state/index.js";
-import { createComboboxOpenController as c, createOptionListenerBinding as l, handleComboboxFocusOut as u, nextWrappingIndex as d } from "../../shared/option-portal/combobox-shell.js";
-import { defineOptionPortal as f } from "../../shared/option-portal/index.js";
-import { defineAnchoredPanel as p } from "../../shared/overlay/anchored-panel.js";
-import { defineOpenOverlay as m } from "../../shared/overlay/open-overlay.js";
-import { applyOverlayVariables as h, defineOverlayPortal as g } from "../../shared/overlay/portal.js";
-import { defineScrollLockLease as _ } from "../../shared/scroll-lock/scroll-lock.js";
-import v from "./style.js";
-import { LitElement as y, html as b, nothing as x, unsafeCSS as S } from "lit";
-import { customElement as C, property as w, state as T } from "lit/decorators.js";
-import { ifDefined as E } from "lit/directives/if-defined.js";
+import { createComboboxOpenController as c, createOptionListenerBinding as l, defineComboboxTrigger as u, handleComboboxFocusOut as d, nextWrappingIndex as f } from "../../shared/option-portal/combobox-shell.js";
+import { defineOptionPortal as p } from "../../shared/option-portal/index.js";
+import { defineAnchoredPanel as m } from "../../shared/overlay/anchored-panel.js";
+import { defineOpenOverlay as h } from "../../shared/overlay/open-overlay.js";
+import { applyOverlayVariables as g, defineOverlayPortal as _ } from "../../shared/overlay/portal.js";
+import { defineScrollLockLease as v } from "../../shared/scroll-lock/scroll-lock.js";
+import y from "./style.js";
+import { LitElement as b, html as x, nothing as S, unsafeCSS as C } from "lit";
+import { customElement as w, property as T, state as E } from "lit/decorators.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
 //#region src/components/autocomplete/index.ts
-var D, O = [
+var O, k = [
 	"none",
 	"prefix",
 	"contains"
 ];
-function k(e) {
+function A(e) {
 	return e instanceof Element && e.getAttribute("slot") === "empty";
 }
-var A = class extends r(y) {
+function j(e) {
+	return e instanceof Element && e.slot === "trigger";
+}
+var M = class extends r(b) {
 	static {
-		D = this;
+		O = this;
 	}
 	constructor(...e) {
 		super(...e), this.placeholder = "", this.borderless = !1, this.disabled = !1, this.readonly = !1, this.required = !1, this.portal = !1, this.noScrollLock = !1, this.allowCustomValue = !1, this.name = "", this.ariaLabel = null, this._filter = "contains", this._value = "", this._selectedValue = "", this._formAssociation = a({
@@ -45,19 +49,33 @@ var A = class extends r(y) {
 				typeof e == "string" && (this.value = e);
 			},
 			syncValidity: () => this._syncValidity()
-		}).make(), this._formAssociationController = new i(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._idPrefix = `web-ui-autocomplete-${++D._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._scrollLock = _().make(), this._optionPortal = f().make({
+		}).make(), this._formAssociationController = new i(this, this._formAssociation), this._isOpen = !1, this._activeIndex = -1, this._focused = !1, this._hasTriggerSlot = !1, this._idPrefix = `web-ui-autocomplete-${++O._nextInstanceId}`, this._a11yOptionIds = /* @__PURE__ */ new WeakMap(), this._nextA11yOptionId = 0, this._options = [], this._scrollLock = v().make(), this._optionPortal = p().make({
 			element: this,
 			idPrefix: `${this._idPrefix}-option`,
 			getPortal: () => this._portal,
 			getPortalContent: () => this._portalContent,
 			isOpen: () => this.portal && this._isOpen,
-			getMigratableNodes: () => Array.from(this.childNodes).filter((e) => !k(e)),
+			getMigratableNodes: () => Array.from(this.childNodes).filter((e) => !A(e) && !j(e)),
 			hasUpdated: () => this.hasUpdated,
 			requestUpdate: () => this.requestUpdate(),
 			bindOption: (e) => this._bindOption(e),
 			unbindOption: (e) => this._unbindOption(e)
-		}), this._overlay = m().make({ requestClose: () => this._close() }), this._panel = p().make({
-			getAnchor: () => this.shadowRoot?.querySelector(".input-wrapper") ?? null,
+		}), this._trigger = u().make({
+			getWrapper: () => this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
+			getCustomTrigger: () => {
+				let e = this.shadowRoot?.querySelector("slot[name=\"trigger\"]")?.assignedElements()[0];
+				return e instanceof HTMLElement ? e : null;
+			},
+			getFallbackTrigger: () => this.shadowRoot?.querySelector(".autocomplete-input") ?? null,
+			onInput: (e) => this._onTriggerInput(e),
+			onClick: () => this._onTriggerClick(),
+			onFocusIn: (e) => this._onTriggerFocusIn(e),
+			onFocusOut: (e) => this._onTriggerFocusOut(e)
+		}), this._overlay = h().make({
+			requestClose: () => this._close(),
+			isConnected: () => this.isConnected
+		}), this._panel = m().make({
+			getAnchor: () => this._trigger.getTrigger() ?? this.shadowRoot?.querySelector(".autocomplete-trigger") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".autocomplete-overlay") ?? null,
 			getPositioning: () => ({
 				placement: "bottom-start",
@@ -71,9 +89,11 @@ var A = class extends r(y) {
 		}), this._onClickOutside = (e) => {
 			this._isOpen && (e.composedPath().includes(this) || this._panel.getHandle()?.containsEvent(e) || this._close());
 		}, this._onFocusOut = () => {
-			u(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
+			d(this, () => this._panel.getHandle(), () => this._isOpen, () => this._close());
 		}, this._handlePanelPointerDown = (e) => {
 			e.preventDefault();
+		}, this._onTriggerSlotChange = () => {
+			this._syncTriggerSlot();
 		}, this._optionListeners = l({
 			onClick: (e) => this._handleOptionClick(e),
 			onPointerOver: (e) => this._handleOptionPointerOver(e),
@@ -94,12 +114,11 @@ var A = class extends r(y) {
 		}, this._onKeydown = (e) => {
 			if (!(this._isDisabled || this.readonly)) switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), this._isOpen ? this._navigateActive(1) : this._open(!0);
-					break;
 				case "ArrowUp":
-					e.preventDefault(), this._isOpen ? this._navigateActive(-1) : this._open(!0);
+					if (this._isOpen && this._trigger.isMultilineEdit(e)) break;
+					e.preventDefault(), this._isOpen ? this._navigateActive(e.key === "ArrowDown" ? 1 : -1) : this._open(!0);
 					break;
-				case "Enter": if (this._isOpen) {
+				case "Enter": if (this._isOpen && !this._trigger.isMultilineEdit(e)) {
 					e.preventDefault();
 					let t = this._options[this._activeIndex];
 					if (t && !t.disabled && !t.hasAttribute("data-filtered")) {
@@ -114,18 +133,20 @@ var A = class extends r(y) {
 					this.allowCustomValue && this._value && !this._hasExactOption(this._value) && this._selectCustomValue();
 				}
 			}
-		}, this._onInput = (e) => {
-			if (this._isDisabled || this.readonly) return;
-			let t = e.target;
-			t.value !== this._value && (this.value = t.value, this._activeIndex = -1, this._syncActiveOption(), this._isOpen || this._open());
-		}, this._onInnerChange = (e) => {
-			e.stopPropagation();
-		}, this._onFocus = () => {
-			this._isDisabled || (this._focused = !0);
-		}, this._onInputClick = () => {
+		}, this._onTriggerInput = (e) => {
+			this._isDisabled || this.readonly || e !== this._value && (this.value = e, this._activeIndex = -1, this._syncActiveOption(), this._isOpen || this._open());
+		}, this._onTriggerClick = () => {
 			this._isDisabled || this.readonly || this._options.length > 0 && this._open();
-		}, this._onBlur = () => {
-			this._focused = !1;
+		}, this._onTriggerFocusIn = (e) => {
+			this._isDisabled || (this._focused = !0, this._isSlottedFocus(e) && this.dispatchEvent(new FocusEvent("focus", {
+				composed: !0,
+				relatedTarget: e.relatedTarget
+			})));
+		}, this._onTriggerFocusOut = (e) => {
+			this._focused = !1, this._isSlottedFocus(e) && this.dispatchEvent(new FocusEvent("blur", {
+				composed: !0,
+				relatedTarget: e.relatedTarget
+			}));
 		}, this._openController = c({
 			canOpen: () => !this._isDisabled && !this.readonly,
 			getIsOpen: () => this._isOpen,
@@ -150,9 +171,9 @@ var A = class extends r(y) {
 	}
 	static {
 		this.styles = [
-			S(t),
-			S(n),
-			S(v)
+			C(t),
+			C(o),
+			C(y)
 		];
 	}
 	get filter() {
@@ -160,7 +181,7 @@ var A = class extends r(y) {
 	}
 	set filter(e) {
 		let t = this._filter;
-		this._filter = o(e, O, "contains"), this.requestUpdate("filter", t);
+		this._filter = n(e, k, "contains"), this.requestUpdate("filter", t);
 	}
 	get value() {
 		return this._value;
@@ -188,8 +209,18 @@ var A = class extends r(y) {
 	get open() {
 		return this._isOpen;
 	}
+	focus(e) {
+		this._trigger.focusTrigger(e);
+	}
+	blur() {
+		this._trigger.blurTrigger();
+	}
 	connectedCallback() {
-		super.connectedCallback(), this._optionPortal.bindHost(), this.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), document.addEventListener("click", this._onClickOutside);
+		super.connectedCallback(), this._optionPortal.bindHost(), this._trigger.bind(), this.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), document.addEventListener("click", this._onClickOutside);
+	}
+	_syncTriggerSlot() {
+		let e = Array.from(this.children).some(j);
+		this._hasTriggerSlot !== e && (this._hasTriggerSlot = e, this.hasUpdated && this._reconfigureOverlay());
 	}
 	attributeChangedCallback(e, t, n) {
 		super.attributeChangedCallback(e, t, n), e === "selected-value" && this.isConnected && n !== this._selectedValue && queueMicrotask(() => {
@@ -197,19 +228,18 @@ var A = class extends r(y) {
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._optionPortal.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._close(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
+		super.disconnectedCallback(), this._optionPortal.dispose(), this._trigger.dispose(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), document.removeEventListener("click", this._onClickOutside), this._options.forEach(this._unbindOption), this._close(), this._portal = void 0, this._portalContent = void 0, this._panel.dispose(), this._scrollLock.release();
 	}
 	firstUpdated() {
-		requestAnimationFrame(() => {
+		this._trigger.bind(), requestAnimationFrame(() => {
 			this.isConnected && this._optionPortal.scheduleRefresh();
 		});
 	}
 	willUpdate() {
-		this._refreshOptions(), this._optionPortal.ensureOptionIds(this._options), this._syncSelectedValue(), this._applyFilter(), this._syncOptionA11y(), this._syncActiveOption();
+		this._syncTriggerSlot(), this._refreshOptions(), this._optionPortal.ensureOptionIds(this._options), this._syncSelectedValue(), this._applyFilter(), this._syncOptionA11y(), this._syncActiveOption();
 	}
 	updated(e) {
-		let t = this.shadowRoot?.querySelector(".autocomplete-input");
-		t && t.value !== this._value && (t.value = this._value), (e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this.toggleAttribute("focused", this._focused), this._syncOpenAttribute(), this._syncOverlayInert(), this._syncValidity(), this._syncEmptyState();
+		this._trigger.setValue(this._value), (e.has("portal") || e.has("overlayContainer")) && requestAnimationFrame(() => this._reconfigureOverlay()), e.has("noScrollLock") && this._syncScrollLock(), this.toggleAttribute("focused", this._focused), this._syncOpenAttribute(), this._syncOverlayInert(), this._syncValidity(), this._syncEmptyState();
 	}
 	formDisabledCallback(e) {
 		this._formAssociation.setDisabled(e), e && this._isOpen && this._close();
@@ -260,7 +290,7 @@ var A = class extends r(y) {
 		let t = this._options.filter((e) => !e.disabled && !e.hasAttribute("data-filtered"));
 		if (!t.length) return;
 		let n = this._activeIndex >= 0 ? t.indexOf(this._options[this._activeIndex]) : e > 0 ? -1 : 0;
-		this._activeIndex = this._options.indexOf(t[d(t.length, n, e)]), this._syncActiveOption();
+		this._activeIndex = this._options.indexOf(t[f(t.length, n, e)]), this._syncActiveOption();
 	}
 	_setInitialActiveOption() {
 		let e = this._options.findIndex((e) => !e.disabled && !e.hasAttribute("data-filtered"));
@@ -295,6 +325,10 @@ var A = class extends r(y) {
 			composed: !0
 		}));
 	}
+	_isSlottedFocus(e) {
+		let t = e.target;
+		return t instanceof Node && !!this.shadowRoot && !this.shadowRoot.contains(t);
+	}
 	_open(e = !1) {
 		this._openController.open(e);
 	}
@@ -317,14 +351,14 @@ var A = class extends r(y) {
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	_createPortal() {
-		let e = g().make({
+		let e = _().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${n}\n${v}`,
+			style: `${t}\n${o}\n${y}`,
 			className: "wui-glass autocomplete-overlay portal wui-floating-panel",
 			onContentChange: (e) => {
 				this._optionPortal.scheduleRefresh();
-				let t = e.flatMap((e) => [...e.removedNodes]).filter(k);
+				let t = e.flatMap((e) => [...e.removedNodes]).filter(A);
 				if (t.length) {
 					this._portal?.removeContent(t);
 					let e = this._portal?.panel.querySelector(".autocomplete-empty");
@@ -332,18 +366,18 @@ var A = class extends r(y) {
 				}
 			}
 		});
-		this._portal = e, h(e.panel, this, [
+		this._portal = e, g(e.panel, this, [
 			"--wui-overlay-min-width",
 			"--wui-autocomplete-max-width",
 			"--wui-autocomplete-max-height"
 		]), e.panel.setAttribute("aria-hidden", "true"), e.panel.addEventListener("pointerdown", this._handlePanelPointerDown);
+		let n = document.createElement("div");
+		n.className = "autocomplete-scroll";
 		let r = document.createElement("div");
-		r.className = "autocomplete-scroll";
+		r.className = "autocomplete-content", this._portalContent = r;
 		let i = document.createElement("div");
-		i.className = "autocomplete-content", this._portalContent = i;
-		let a = document.createElement("div");
-		a.className = "autocomplete-empty", a.hidden = !0, a.dataset.wuiA11yEmpty = this._getEmptySlotText(), r.append(i), i.append(a), e.panel.append(r);
-		for (let t of Array.from(this.childNodes)) t instanceof Comment || (k(t) ? e.appendContent([t], a) : e.appendContent([t], i));
+		i.className = "autocomplete-empty", i.hidden = !0, i.dataset.wuiA11yEmpty = this._getEmptySlotText(), n.append(r), r.append(i), e.panel.append(n);
+		for (let t of Array.from(this.childNodes)) t instanceof Comment || j(t) || (A(t) ? e.appendContent([t], i) : e.appendContent([t], r));
 		return e;
 	}
 	_getLabelledbyText() {
@@ -358,36 +392,37 @@ var A = class extends r(y) {
 		return (this.shadowRoot?.querySelector("slot[name=\"empty\"]"))?.assignedElements().map((e) => e.textContent?.trim()).filter(Boolean).join(" ").trim() || "无匹配选项";
 	}
 	render() {
-		let e = `${this._idPrefix}-listbox`, t = `${this._idPrefix}-label`, n = this._getLabelledbyText(), r = this._options.filter((e) => !e.hasAttribute("data-filtered")), i = this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex] : void 0, a = i ? this._getA11yOptionId(i) : x;
-		return b`
+		let e = `${this._idPrefix}-listbox`, t = `${this._idPrefix}-label`, n = this._getLabelledbyText(), r = this._options.filter((e) => !e.hasAttribute("data-filtered")), i = this._isOpen && this._activeIndex >= 0 ? this._options[this._activeIndex] : void 0, a = i ? this._getA11yOptionId(i) : S;
+		return x`
       <div class="wui-autocomplete-inner">
-        ${n ? b`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : x}
-        <div class="wui-glass input-wrapper">
-          <input
-            class="autocomplete-input"
-            type="text"
-            placeholder=${this.placeholder}
-            name=${this.name}
-            .value=${this._value}
-            aria-label=${E(this.ariaLabel)}
-            aria-labelledby=${n ? t : x}
-            ?disabled=${this._isDisabled}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            role="combobox"
-            aria-expanded=${this._isOpen}
-            aria-haspopup="listbox"
-            aria-autocomplete="list"
-            aria-controls=${e}
-            aria-disabled=${String(this._isDisabled)}
-            aria-readonly=${this.readonly ? "true" : x}
-            aria-activedescendant=${a}
-            @input=${this._onInput}
-            @change=${this._onInnerChange}
-            @click=${this._onInputClick}
-            @focus=${this._onFocus}
-            @blur=${this._onBlur}
-          />
+        ${n ? x`<span class="autocomplete-a11y-only" id=${t}>${n}</span>` : S}
+        <div
+          class="autocomplete-trigger"
+          ?data-custom-trigger=${this._hasTriggerSlot}
+          role="combobox"
+          aria-expanded=${this._isOpen}
+          aria-haspopup="listbox"
+          aria-autocomplete="list"
+          aria-controls=${e}
+          aria-disabled=${String(this._isDisabled)}
+          aria-readonly=${this.readonly ? "true" : S}
+          aria-label=${D(this.ariaLabel)}
+          aria-labelledby=${n ? t : S}
+          aria-activedescendant=${a}
+          tabindex="-1"
+        >
+          <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
+          ${this._hasTriggerSlot ? S : x`<web-ui-input
+                  class="autocomplete-input"
+                  .value=${this._value}
+                  placeholder=${this.placeholder}
+                  name=${this.name}
+                  ?borderless=${this.borderless}
+                  ?disabled=${this._isDisabled}
+                  ?readonly=${this.readonly}
+                  ?required=${this.required}
+                  aria-label=${D(this.ariaLabel || n || void 0)}
+                ></web-ui-input>`}
         </div>
         <div
           class="autocomplete-a11y-listbox"
@@ -396,7 +431,7 @@ var A = class extends r(y) {
           ?hidden=${!this._isOpen}
           aria-hidden=${String(!this._isOpen)}
         >
-          ${r.map((e) => b`<div
+          ${r.map((e) => x`<div
                 id=${this._getA11yOptionId(e)}
                 role="option"
                 aria-selected=${e.value === this._selectedValue ? "true" : "false"}
@@ -426,46 +461,46 @@ var A = class extends r(y) {
     `;
 	}
 };
-e([w({
+e([T({
 	type: String,
 	reflect: !0
-})], A.prototype, "placeholder", void 0), e([w({
+})], M.prototype, "placeholder", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "borderless", void 0), e([w({
+})], M.prototype, "borderless", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "disabled", void 0), e([w({
+})], M.prototype, "disabled", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "readonly", void 0), e([w({
+})], M.prototype, "readonly", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "required", void 0), e([w({
+})], M.prototype, "required", void 0), e([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "portal", void 0), e([w({
+})], M.prototype, "portal", void 0), e([T({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], A.prototype, "noScrollLock", void 0), e([w({
+})], M.prototype, "noScrollLock", void 0), e([T({
 	type: Boolean,
 	reflect: !0,
 	attribute: "allow-custom-value"
-})], A.prototype, "allowCustomValue", void 0), e([w({ attribute: !1 })], A.prototype, "overlayContainer", void 0), e([w({
+})], M.prototype, "allowCustomValue", void 0), e([T({ attribute: !1 })], M.prototype, "overlayContainer", void 0), e([T({
 	type: String,
 	reflect: !0
-})], A.prototype, "name", void 0), e([w({
+})], M.prototype, "name", void 0), e([T({
 	type: String,
 	attribute: "aria-label"
-})], A.prototype, "ariaLabel", void 0), e([w({
+})], M.prototype, "ariaLabel", void 0), e([T({
 	type: String,
 	attribute: "aria-labelledby"
-})], A.prototype, "ariaLabelledby", void 0), e([w({
+})], M.prototype, "ariaLabelledby", void 0), e([T({
 	type: String,
 	reflect: !0
-})], A.prototype, "filter", null), e([T()], A.prototype, "_value", void 0), e([T()], A.prototype, "_selectedValue", void 0), e([T()], A.prototype, "_isOpen", void 0), e([T()], A.prototype, "_activeIndex", void 0), e([T()], A.prototype, "_focused", void 0), A = D = e([C("web-ui-autocomplete")], A);
+})], M.prototype, "filter", null), e([E()], M.prototype, "_value", void 0), e([E()], M.prototype, "_selectedValue", void 0), e([E()], M.prototype, "_isOpen", void 0), e([E()], M.prototype, "_activeIndex", void 0), e([E()], M.prototype, "_focused", void 0), e([E()], M.prototype, "_hasTriggerSlot", void 0), M = O = e([w("web-ui-autocomplete")], M);
 //#endregion
-export { A as WebUiAutocomplete };
+export { M as WebUiAutocomplete };
 
 //# sourceMappingURL=index.js.map