godown 3.11.2 → 3.13.0

package/src/web-components/popover/component.ts

@@ -0,0 +1,172 @@
+import { property } from "lit/decorators.js";
+import GlobalStyle from "../../internal/global-style.js";
+import { css, html, type PropertyValues, type TemplateResult } from "lit";
+import { godown, htmlSlot, joinRules, part, StyleController, styles } from "@godown/element";
+import { hidePopover, showPopover } from "../../internal/popover.js";
+
+const POPOVER = "popover";
+const protoName = POPOVER;
+
+/**
+ * {@link Popover} renders a popover.
+ *
+ * This requires the support of the popover API and CSS position-area.
+ *
+ * @fires toggle - Fired when the popover is toggled.
+ * @slot popover - Popover content.
+ * @slot - Popover trigger.
+ * @category display
+ */
+@godown(protoName)
+@styles(css`
+  :host {
+    display: inline-block;
+  }
+
+  [part="trigger"] {
+    display: contents;
+  }
+
+  [part="root"] {
+    display: inherit;
+  }
+
+  [part="popover"] {
+    inset: unset;
+    z-index: 1;
+    overflow: visible;
+    position: absolute;
+    position-try-fallbacks: flip-block;
+  }
+`)
+class Popover extends GlobalStyle {
+  anchorName = `--${POPOVER}-${Math.random().toString(36).slice(2)}`;
+
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  @property()
+  action: "hide" | "show" | "toggle" | "none" = "show";
+
+  @property()
+  span: "span" | "spread" | "isolated" = "span";
+
+  /**
+   * The position refers to the spatial location of the popover in relation to the trigger,
+   * rather than the alignment property between them.
+   */
+  @property()
+  position:
+    | "center"
+    | "left"
+    | "left-top"
+    | "left-bottom"
+    | "right"
+    | "right-top"
+    | "right-bottom"
+    | "top"
+    | "top-left"
+    | "top-right"
+    | "bottom"
+    | "bottom-left"
+    | "bottom-right"
+    | "start"
+    | "start-start"
+    | "start-end"
+    | "end"
+    | "end-start"
+    | "end-end" = "bottom";
+
+  @part(POPOVER)
+  protected _popover: HTMLElement;
+
+  constructor() {
+    super();
+    new StyleController(this, () => {
+      return joinRules({
+        "[part=root],slot:not([name])::slotted(*)": {
+          "anchor-name": this.anchorName,
+        },
+        "[part=popover]": {
+          "position-anchor": this.anchorName,
+          "position-area": this.resolveArea(),
+        },
+      });
+    });
+  }
+  protected render(): TemplateResult<1> {
+    return html`
+      <div part="root">
+        <div
+          part="trigger"
+          @click=${this._handleClick}
+        >
+          ${htmlSlot()}
+        </div>
+        <div
+          part="popover"
+          popover="manual"
+        >
+          ${htmlSlot("popover")}
+        </div>
+      </div>
+    `;
+  }
+
+  protected _handleClick(): void {
+    const { action } = this;
+    switch (action) {
+      case "show":
+      case "hide":
+      case "toggle":
+        this[action]();
+    }
+  }
+
+  show(): void {
+    this.toggle(true);
+  }
+
+  hide(): void {
+    this.toggle(false);
+  }
+
+  toggle(force?: boolean): void {
+    this.open = force ?? !this.open;
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("open")) {
+      this._openChange();
+    }
+  }
+
+  protected _openChange(): void {
+    const { open } = this;
+    if (open) {
+      showPopover.call(this, this._popover);
+      const listener = (e) => {
+        if (!this.contains(e.target)) {
+          this.events.remove(document, "click", listener);
+          this.open = false;
+        }
+      };
+      this.events.add(document, "click", listener);
+    } else {
+      hidePopover(this._popover);
+    }
+    this.dispatchCustomEvent("toggle", open);
+  }
+
+  resolveArea(): string {
+    const split = this.position.split("-");
+    const firstValue = this.span === "spread" ? `span-${split[0]}` : split[0];
+    if (split.length < 2) {
+      return `${firstValue} center`;
+    }
+    const secondValue = this.span === "isolated" ? split[1] : `span-${split[1]}`;
+    return `${firstValue} ${secondValue}`;
+  }
+}
+
+export { Popover, Popover as default };

package/src/web-components/popover/definition.ts

@@ -0,0 +1,11 @@
+import Popover from "./component.js";
+
+Popover.define();
+
+export default Popover;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-popover": Popover;
+  }
+}

package/src/web-components/range/component.ts

@@ -15,6 +15,7 @@ import { property, queryAll, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
+import { ringTypeAttribute } from "../../internal/ring.js";
 
 const protoName = "range";
 const cssScope = scopePrefix(protoName);
@@ -203,7 +204,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   }
 
   get observedRecord(): Record<string, any> {
-    return omit(super.observedRecord, "ring-type");
+    return omit(super.observedRecord, ringTypeAttribute);
   }
 
   protected render(): TemplateResult<1> {

package/src/web-components/rotate/component.ts

@@ -15,7 +15,6 @@ const cssScope = scopePrefix(protoName);
 @styles(css`
   :host {
     display: block;
-    width: -moz-fit-content;
     width: fit-content;
     transition: all 0.5s ease-in-out;
     ${cssScope}--offset: .5em;

package/src/web-components/select/component.ts

@@ -1,25 +1,17 @@
 import { type HandlerEvent, attr, godown, htmlSlot, queryPart, styles } from "@godown/element";
 import svgCaretDown from "../../internal/icons/caret-down.js";
 import { type TemplateResult, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 
 import Input from "../input/component.js";
-import { cssGlobalVars } from "../../internal/global-style.js";
-import { type DirectionCardinalY, directionOutsetPlace } from "../../internal/direction.js";
+import { hidePopover, showPopover } from "../../internal/popover.js";
+import { memoize } from "../../internal/utils.js";
 
-function contain(a: string, b: string): boolean {
-  return a && b && a.toLowerCase().includes(b.toLowerCase());
-}
-
-function betweenAt(i: number, s: string, c: string) {
-  const start = s.slice(0, i).lastIndexOf(c) + 1 || 0;
-  const end = s.indexOf(c, i) || s.length;
-  return s.slice(start, end);
-}
+const supportsPositionArea = memoize(() => CSS.supports("position-area:top"));
 
-function updateChecked(element: HTMLElement | null, operation: 0 | 1) {
+function updateSelected(element: HTMLElement | null, operation: 0 | 1) {
   if (element) {
-    const name = "checked";
+    const name = "selected";
     if (operation) {
       element.setAttribute(name, "");
     } else {
@@ -33,14 +25,6 @@ const protoName = "select";
 /**
  * {@linkcode Select} is similar to `<select>`.
  *
- * Elements with the value attribute/property can be used as options.
- *
- * The checked attribute will be added to the selected element.
- *
- * Multi-selected state looks the same as single-selected.
- *
- * Input will filter the options.
- *
  * @fires input - Fires when the input value changes.
  * @fires change - Fires when the input value changes.
  * @fires select - Fires when select an option.
@@ -48,67 +32,63 @@ const protoName = "select";
  * @category input
  */
 @godown(protoName)
-@styles(
-  directionOutsetPlace,
-  css`
-    :host(:focus-within),
-    .outline {
-      ${cssGlobalVars.input}-outline-color: currentColor;
-    }
+@styles(css`
+  [part="root"] {
+    position: relative;
+    anchor-name: --select;
+  }
 
-    [part="input"] {
-      text-overflow: ellipsis;
-    }
+  label {
+    display: contents;
+  }
 
-    [part="content"] {
-      position: absolute;
-      width: 100%;
-      visibility: hidden;
-    }
+  [part="popover"] {
+    border: 0;
+    width: 100%;
+    background: none;
+    position-anchor: --select;
+    position-area: bottom center;
+    position-try-fallbacks: flip-block;
+  }
+
+  [part="input"] {
+    text-overflow: ellipsis;
+  }
 
-    [visible] [part="content"] {
-      visibility: visible;
+  @supports not (position-area: top) {
+    [part="popover"] {
+      left: 0;
+      top: 100%;
+      display: none;
+      position: absolute;
     }
-  `,
-)
+  }
+`)
 class Select extends Input {
-  // @ts-ignore
-  value: string | string[];
-
-  /**
-   * Selected texts.
-   */
   @property()
   text: string;
 
-  @queryPart("content")
-  protected _content: HTMLElement;
-
-  @property()
-  direction: DirectionCardinalY;
-
   @property({ type: Boolean })
   multiple = false;
 
   @property({ type: Boolean })
-  visible = false;
+  noEdit = false;
+
+  @property({ type: Array })
+  values: {
+    value: string;
+    label?: string;
+  }[] = [];
 
-  @state()
-  protected autoDirection: DirectionCardinalY = "bottom";
+  @queryPart("popover")
+  _popover: HTMLElement;
 
   protected lastChecked: HTMLElement;
   protected defaultText: string;
-  protected defaultChecked: HTMLElement[];
-  private __store: { value: string; text: string }[] = [];
-
-  get observedRecord(): Record<string, any> {
-    return {
-      ...super.observedRecord,
-      direction: this.direction || this.autoDirection,
-    };
-  }
+  protected optionsVisible = false;
 
   protected render(): TemplateResult<1> {
+    const inputNoEdit = this.noEdit || this.disabled;
     return html`
       <label
         part="root"
@@ -116,171 +96,127 @@ class Select extends Input {
       >
         ${[
           this._renderPrefix(),
+          this.noEdit
+            ? html`
+                <input style="position: absolute;inset: 0;opacity: 0;" />
+              `
+            : "",
           html`
             <input
               part="input"
-              type="${this.type}"
               .value="${this.text}"
               ?autofocus="${this.autofocus}"
-              ?disabled="${this.disabled}"
+              ?disabled="${inputNoEdit}"
               autocapitalize="${this.autocapitalize || nothing}"
               autocomplete="${this.autocomplete || nothing}"
               placeholder="${this.placeholder || nothing}"
-              @focus="${this._handleFocus}"
-              @input="${this._handleInput}"
-              @change="${this._handleChange}"
+              @input="${inputNoEdit ? null : this._handleInput}"
+              @change="${inputNoEdit ? null : this._handleChange}"
             />
           `,
           this._renderSuffix(),
-          html`
-            <label
-              part="content"
-              direction-outset-place
-            >
-              ${htmlSlot()}
-            </label>
-          `,
         ]}
+        <div
+          part="popover"
+          popover="${supportsPositionArea() ? "manual" : nothing}"
+        >
+          ${htmlSlot()}
+        </div>
       </label>
     `;
   }
 
   protected _renderSuffix(): TemplateResult<1> {
     return html`
-      <i part="suffix icon">${svgCaretDown()}</i>
+      <i part="suffix">${htmlSlot("suffix", svgCaretDown())}</i>
     `;
   }
 
-  protected _handleFocus(): void {
-    if (!this.direction) {
-      const { top, bottom } = this.getBoundingClientRect();
-      if (window.innerHeight - bottom < this._content.clientHeight && top > this._content.clientHeight) {
-        this.autoDirection = "top";
-      } else {
-        this.autoDirection = "bottom";
-      }
-    }
-    this.visible = true;
-  }
-
   protected firstUpdated(): void {
-    this.events.add(this._content, "click", (e: HandlerEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
+    this.events.add(this._slot, "click", (e: HandlerEvent<HTMLOptionElement>) => {
       const { target } = e;
-      const value = this.optionValue(target);
-      if (value) {
-        const operation = this.select(value, target.textContent);
-        if (!this.multiple) {
-          updateChecked(this.lastChecked, 0);
-        }
-        updateChecked(target, operation);
-        this.lastChecked = target;
+      if (target.tagName !== "OPTION") {
+        return;
       }
-      this._input.focus();
-    });
-    this.events.add(document, "click", (e: HandlerEvent) => {
-      // e.preventDefault();
-      e.stopPropagation();
-      const composed1 = e.composedPath()[0] as HTMLElement;
-      if (composed1 && !this.shadowRoot.contains(composed1)) {
-        this.blur();
+      const { label, value } = target;
+      const operation = this.select(value, label);
+      if (!this.multiple) {
+        updateSelected(this.lastChecked, 0);
+        this.hideOptions();
       }
+      updateSelected(target, operation);
+      this.lastChecked = target;
     });
   }
 
   protected _connectedInit(): void {
-    if (!this.value) {
-      const checked = [...this.querySelectorAll<HTMLElement>("[checked]")];
-      const list = this.multiple ? checked : checked.length ? [(this.lastChecked = checked[0])] : [];
-      list.forEach((element: HTMLElement) => {
-        const operation = this.select(this.optionValue(element), element.textContent);
-        updateChecked(element, operation);
-      });
-
-      this.default = this.value;
-      this.defaultText = this.text;
-      this.defaultChecked = checked;
-    }
-    if (!this.text) {
-      this.text = "";
-    }
+    this.default = this.value ??= "";
+    this.defaultText = this.text ??= "";
+    this.events.add(this, "focus", this.showOptions);
   }
 
   reset(): void {
     this.value = this.default;
     this.text = this.defaultText;
-    this.querySelectorAll<HTMLElement>("[checked]").forEach((element) => updateChecked(element, 0));
-    this.defaultChecked.forEach((element) => updateChecked(element, 1));
   }
 
-  select(value: string, text?: string): 0 | 1 {
-    text ||= value;
-    text = text.trim();
+  select(value: string, label: string): 0 | 1 {
+    label ||= value;
     let operation: 0 | 1 = 0;
-    if (this.multiple) {
-      const i = this.__store.findIndex((s) => s.value === value);
-      if (i > -1) {
-        this.__store.splice(i, 1);
-      } else {
-        this.__store.push({ value, text });
-        operation = 1;
-      }
-      this.value = this.__store.map((s) => s.value);
-      this.text = this.__store.map((s) => s.text).join(", ");
+    const i = this.values.findIndex((s) => s.value === value);
+    if (i > -1) {
+      this.values.splice(i, 1);
     } else {
-      if (this.value === value) {
-        this.value = "";
-        this.text = "";
-      } else {
-        this.value = value;
-        this.text = text;
-        operation = 1;
-      }
+      this.values.push({ value, label });
+      operation = 1;
     }
+    this.checkValues();
+    this.value = this.values.map((s) => s.value).join(",");
+    this.text = this.values.map((s) => s.label).join(", ");
     this.dispatchCustomEvent("select", this.value);
-    this.filter();
     return operation;
   }
 
-  filter(query?: string): void {
-    query = query?.trim();
-    [...this.children].forEach((element: HTMLElement) => {
-      this.filterCallback(
-        element,
-        !query || contain(this.optionValue(element), query) || contain(element.textContent, query),
-        query,
-      );
-    });
+  checkValues(): void {
+    if (!this.multiple && this.values.length > 1) {
+      this.values.splice(0, this.values.length - 1);
+      this.requestUpdate();
+    }
   }
 
-  filterCallback(element: HTMLElement, match: boolean, query: string): void {
-    element.style.display = match ? "" : "none";
+  showOptions(): void {
+    if (this.optionsVisible) {
+      return;
+    }
+    showPopover(this._popover);
+    const listener = (e) => {
+      if (!this.contains(e.target)) {
+        this.hideOptions();
+        this.events.remove(document, "click", listener);
+      }
+    };
+    this.events.add(document, "click", listener);
+    this.optionsVisible = true;
   }
 
-  protected _handleInput(e: HandlerEvent<HTMLInputElement>): void {
-    e.stopPropagation();
-    if (this.compositing) {
+  hideOptions(): void {
+    if (!this.optionsVisible) {
       return;
     }
-    const s = this._input.value;
-    this.filter(this.multiple ? betweenAt(this._input.selectionStart, s, ",") : s);
-    this.dispatchCustomEvent("input", this.value, { bubbles: true });
+    hidePopover(this._popover);
+    this.optionsVisible = false;
   }
 
   focus(options?: FocusOptions): void {
+    super.focus();
     this._input.focus(options);
-    this.visible = true;
+    this.showOptions();
   }
 
   blur(): void {
-    this._input.blur();
-    this.visible = false;
     super.blur();
-  }
-
-  optionValue(option: HTMLElement): string {
-    return (option as any).value || option.getAttribute("value") || "";
+    this._input.blur();
+    hidePopover(this._popover);
   }
 }
 

package/src/web-components/split/component.ts

@@ -4,7 +4,7 @@ import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
-import { RingBuilder } from "../../internal/ring.js";
+import { RingBuilder, ringTypeAttribute } from "../../internal/ring.js";
 
 const protoName = "split";
 const cssScope = scopePrefix(protoName);
@@ -97,7 +97,7 @@ class Split extends SuperInput {
   }
 
   get observedRecord(): Record<string, any> {
-    return omit(super.observedRecord, "ring-type");
+    return omit(super.observedRecord, ringTypeAttribute);
   }
 
   protected render(): TemplateResult<1> {

package/src/web-components/switch/component.ts

@@ -4,6 +4,7 @@ import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
+import { ringTypeAttribute } from "../../internal/ring.js";
 
 const protoName = "switch";
 const cssScope = scopePrefix(protoName);
@@ -94,7 +95,7 @@ class Switch extends SuperInput<boolean> {
   value = false;
 
   get observedRecord(): Record<string, any> {
-    return omit(super.observedRecord, "ring-type");
+    return omit(super.observedRecord, ringTypeAttribute);
   }
 
   protected render(): TemplateResult<1> {