@lingxia/elements 0.5.0

package/src/picker.ts

@@ -0,0 +1,418 @@
+import {
+  sendNativeComponentMessage,
+  registerNativeComponentHandler,
+  addNativeComponentLayoutInvalidationListener
+} from "./nativecomponent.js";
+import { ensureComponentId } from "./component.js";
+import { measureElement } from "./dom.js";
+import { isAndroid, isHarmony, isDesktop } from "./platform.js";
+
+const HARMONY_PROPS_PREFIX = "data:application/json,";
+
+// Type definitions
+export type LxPickerColumn = string[];
+export type LxPickerCascadingColumns = [string[], Record<string, string[]>];
+type LxPickerViewEventHandler = (e: LxPickerEvent) => void;
+
+export interface LxPickerEventDetail {
+  index?: number | number[];
+  value?: string | string[];
+  confirmed?: boolean;
+  cancelled?: boolean;
+}
+
+export interface LxPickerEvent extends CustomEvent<LxPickerEventDetail> {
+  detail: LxPickerEventDetail;
+}
+
+export type LxPickerAttributes = {
+  id?: string;
+  mode?: 'selector' | 'multiSelector' | 'cascading' | 'date' | 'time';
+  columns?: LxPickerColumn[] | LxPickerCascadingColumns;
+  defaultIndex?: number | number[];
+  value?: string;
+  start?: string;
+  end?: string;
+  fields?: 'year' | 'month' | 'day' | 'range';
+  cancelText?: string;
+  confirmText?: string;
+  cancelButtonColor?: string;
+  confirmButtonColor?: string;
+  cancelTextColor?: string;
+  confirmTextColor?: string;
+  className?: string;
+  style?: any;
+  ref?: any;
+  onChange?: LxPickerViewEventHandler;
+  onScroll?: LxPickerViewEventHandler;
+  pageBindings?: Record<string, string>;
+};
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "lx-picker": LxPickerAttributes;
+    }
+  }
+}
+
+// Component implementation
+export class LxPickerElement extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "id",
+      "mode",
+      "columns",
+      "default-index",
+      "value",
+      "start",
+      "end",
+      "fields",
+      "cancel-text",
+      "confirm-text",
+      "cancel-button-color",
+      "confirm-button-color",
+      "cancel-text-color",
+      "confirm-text-color"
+    ];
+  }
+
+  private componentId: string | null = null;
+  private mounted = false;
+  private unregister?: () => void;
+  private _handlers: Record<string, EventListenerOrEventListenerObject> = {};
+  private rawHandlers: Record<string, EventListenerOrEventListenerObject> = {};
+  private _pageBindings: Record<string, string> = {};
+  private harmonyEmbed?: HTMLEmbedElement;
+  private lastHarmonyProps?: string;
+  private webCleanup?: () => void;
+  private attrObserver?: MutationObserver;
+  private removeLayoutInvalidationListener?: () => void;
+  private readonly layoutInvalidationListener: EventListenerObject = {
+    handleEvent: () => {
+      if (!this.isConnected || isHarmony() || isDesktop()) return;
+      void this.mountPicker();
+    }
+  };
+
+  private upgradeProperty(propName: string): void {
+    const self = this as unknown as Record<string, unknown>;
+    if (!Object.prototype.hasOwnProperty.call(self, propName)) return;
+    const value = self[propName];
+    delete self[propName];
+    self[propName] = value;
+  }
+
+  set pageBindings(bindings: Record<string, string>) {
+    this._pageBindings = bindings ?? {};
+    if (this.isConnected) {
+      this.mountPicker();
+    }
+  }
+
+  get pageBindings(): Record<string, string> {
+    return this._pageBindings;
+  }
+
+  connectedCallback() {
+    this.upgradeProperty("pageBindings");
+    this.upgradeProperty("onchange");
+
+    this.componentId = ensureComponentId(this, "lx-picker", this.componentId);
+    if (!this.componentId) return;
+
+    this.unregister = registerNativeComponentHandler(this.componentId!, (message) => {
+      if (typeof message.event === "string") {
+        this.dispatchEvent(new CustomEvent(message.event, { detail: message.detail ?? {}, bubbles: true }));
+      }
+    });
+
+    this.startAttrObserver();
+    if (isAndroid()) {
+      this.removeLayoutInvalidationListener = addNativeComponentLayoutInvalidationListener(this.layoutInvalidationListener);
+    }
+    this.mountPicker();
+    queueMicrotask(() => {
+      if (!this.isConnected) return;
+      this.mountPicker();
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.webCleanup) {
+      this.webCleanup();
+      this.webCleanup = undefined;
+    }
+    this.removeLayoutInvalidationListener?.();
+    this.removeLayoutInvalidationListener = undefined;
+
+    if (this.componentId && !isHarmony() && !isDesktop()) {
+      sendNativeComponentMessage({
+        action: "component.unmount",
+        id: this.componentId
+      });
+    }
+    if (this.unregister) {
+      this.unregister();
+      this.unregister = undefined;
+    }
+    if (this.harmonyEmbed && this.contains(this.harmonyEmbed)) {
+      this.removeChild(this.harmonyEmbed);
+    }
+    this.harmonyEmbed = undefined;
+    this.lastHarmonyProps = undefined;
+    this.mounted = false;
+    this.stopAttrObserver();
+    Object.keys(this._handlers).forEach(name => {
+      this.removeEventListener(name, this._handlers[name]);
+    });
+    this._handlers = {};
+    this.rawHandlers = {};
+  }
+
+  attributeChangedCallback(name: string) {
+    if (name === "id") {
+      const prev = this.componentId;
+      this.componentId = ensureComponentId(this, "lx-picker", this.componentId);
+      if (prev && this.componentId !== prev) {
+        this.mounted = false;
+      }
+    }
+    if (!this.isConnected) return;
+    this.mountPicker();
+  }
+
+  private getAttr(name: string, fallback = "") {
+    return this.getAttribute(name) || fallback;
+  }
+
+  private getJsonAttr(name: string) {
+    const raw = this.getAttribute(name);
+    if (!raw) return undefined;
+    try { return JSON.parse(raw); } catch { return undefined; }
+  }
+
+  private collectProps() {
+    const mode = this.getAttr("mode", "selector");
+    const isDateMode = mode === "date" || mode === "time";
+    const fields = this.getAttr("fields");
+
+    const props: Record<string, any> = {
+      mode,
+      cancelText: this.getAttr("cancel-text", ""),
+      confirmText: this.getAttr("confirm-text", ""),
+      cancelButtonColor: this.getAttr("cancel-button-color"),
+      confirmButtonColor: this.getAttr("confirm-button-color"),
+      cancelTextColor: this.getAttr("cancel-text-color"),
+      confirmTextColor: this.getAttr("confirm-text-color")
+    };
+
+    if (isDateMode) {
+      if (fields) props.fields = fields;
+      const value = this.getAttr("value");
+      if (value) {
+        props.value = fields === "range" ? this.getJsonAttr("value") : value;
+      }
+
+      const start = this.getAttr("start");
+      if (start) props.start = start;
+
+      const end = this.getAttr("end");
+      if (end) props.end = end;
+    } else {
+      props.columns = this.getJsonAttr("columns");
+      props.defaultIndex = this.getJsonAttr("default-index");
+    }
+
+    return props;
+  }
+
+  private shouldRefreshForAttribute(name: string): boolean {
+    const normalized = name.trim().toLowerCase();
+    return normalized.startsWith("data-");
+  }
+
+  private startAttrObserver(): void {
+    if (typeof MutationObserver === "undefined" || this.attrObserver) {
+      return;
+    }
+    this.attrObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        const attrName = mutation.attributeName;
+        if (!attrName || !this.shouldRefreshForAttribute(attrName)) {
+          continue;
+        }
+        this.mountPicker();
+        break;
+      }
+    });
+    this.attrObserver.observe(this, { attributes: true });
+  }
+
+  private stopAttrObserver(): void {
+    if (!this.attrObserver) {
+      return;
+    }
+    this.attrObserver.disconnect();
+    this.attrObserver = undefined;
+  }
+
+  private dataAttrToDatasetKey(attr: string): string {
+    const raw = attr.slice(5).trim();
+    if (!raw) return "";
+    const parts = raw.split("-").filter(Boolean);
+    if (parts.length === 0) return "";
+    return parts
+      .map((segment, index) => {
+        if (index === 0) return segment.toLowerCase();
+        return segment.charAt(0).toUpperCase() + segment.slice(1);
+      })
+      .join("");
+  }
+
+  private collectDataset(): Record<string, string> {
+    const dataset: Record<string, string> = {};
+    const attrs = this.getAttributeNames();
+    for (const attr of attrs) {
+      if (!attr.startsWith("data-")) continue;
+      const key = this.dataAttrToDatasetKey(attr);
+      if (!key) continue;
+      const value = this.getAttribute(attr);
+      if (value == null) continue;
+      dataset[key] = value;
+    }
+    return dataset;
+  }
+
+  private async mountPicker() {
+    if (!this.componentId) return;
+
+    const props = this.collectProps();
+    const dataset = this.collectDataset();
+    props.dataset = dataset;
+    props.datasetJson = JSON.stringify(dataset);
+    props.pageFuncBindings = this._pageBindings;
+    props.pageFuncBindingsJson = JSON.stringify(this._pageBindings);
+    const { rect, cornerRadius } = measureElement(this);
+
+    if (isHarmony()) {
+      this.ensureHarmonyEmbed(rect, props, cornerRadius);
+      this.mounted = true;
+      return;
+    }
+
+    if (isDesktop()) {
+      if (this.webCleanup) return;
+      const { renderWebPicker } = await import('./picker-web.js');
+      if (!this.isConnected || !this.componentId || this.webCleanup) return;
+      this.webCleanup = renderWebPicker(this, props, (detail) => {
+        this.dispatchEvent(new CustomEvent('change', { detail, bubbles: true }));
+      });
+      this.mounted = true;
+      return;
+    }
+
+    const payload: any = {
+      action: this.mounted ? "component.update" : "component.mount",
+      id: this.componentId,
+      type: "picker.native",
+      rect,
+      zIndex: 9999,
+      props: props
+    };
+
+    if (cornerRadius !== undefined) {
+      payload.cornerRadius = cornerRadius;
+    }
+
+    sendNativeComponentMessage(payload);
+    this.mounted = true;
+  }
+
+  // Event handler getter/setter for 'change' event
+  set onchange(cb: EventListener | null) {
+    const raw = cb as unknown;
+    const current = this._handlers['change'];
+    if (current) this.removeEventListener('change', current);
+
+    if (
+      typeof raw === "function" ||
+      (!!raw && typeof raw === "object" && typeof (raw as EventListenerObject).handleEvent === "function")
+    ) {
+      const listener =
+        typeof raw === "function"
+          ? ({ handleEvent: raw } as EventListenerObject)
+          : (raw as EventListenerOrEventListenerObject);
+      this._handlers['change'] = listener;
+      this.rawHandlers['change'] = raw as EventListenerOrEventListenerObject;
+      this.addEventListener('change', listener);
+    } else {
+      delete this._handlers['change'];
+      delete this.rawHandlers['change'];
+    }
+  }
+  get onchange() { return (this.rawHandlers['change'] as EventListener) || null; }
+
+  private ensureHarmonyEmbed(
+    rect: { width: number; height: number },
+    props: Record<string, unknown>,
+    cornerRadius?: number
+  ) {
+    // Create embed element only once
+    if (!this.harmonyEmbed) {
+      const embed = document.createElement("embed");
+      embed.setAttribute("type", "native/picker");
+      embed.setAttribute("width", `${rect.width}`);
+      embed.setAttribute("height", `${rect.height}`);
+      embed.setAttribute("id", this.componentId!);
+      embed.setAttribute("data-lx-component-id", this.componentId!);
+      embed.style.display = "block";
+      embed.style.width = "100%";
+      embed.style.height = "100%";
+      embed.style.border = "none";
+      if (cornerRadius !== undefined) {
+        embed.style.borderRadius = `${cornerRadius}px`;
+        embed.style.overflow = "hidden";
+      }
+
+      const encodedProps = this.encodeHarmonyProps(props);
+      embed.setAttribute("src", encodedProps);
+      this.lastHarmonyProps = encodedProps;
+
+      this.appendChild(embed);
+      this.harmonyEmbed = embed;
+      return;
+    }
+
+    // Only update props via src if they actually changed
+    const encodedProps = this.encodeHarmonyProps(props);
+    if (encodedProps !== this.lastHarmonyProps) {
+      this.harmonyEmbed.setAttribute("src", encodedProps);
+      this.lastHarmonyProps = encodedProps;
+    }
+
+    // Ensure embed element matches latest corner radius for clipping
+    if (cornerRadius !== undefined && this.harmonyEmbed.style.borderRadius !== `${cornerRadius}px`) {
+      this.harmonyEmbed.style.borderRadius = `${cornerRadius}px`;
+      this.harmonyEmbed.style.overflow = "hidden";
+    }
+  }
+
+  private encodeHarmonyProps(props: Record<string, unknown>): string {
+    try {
+      const payload = { componentId: this.componentId, ...props };
+      return `${HARMONY_PROPS_PREFIX}${encodeURIComponent(
+        JSON.stringify(payload)
+      )}`;
+    } catch (_e) {
+      return `${HARMONY_PROPS_PREFIX}%7B%7D`;
+    }
+  }
+}
+
+// Register the custom element
+export function registerPickerComponent() {
+  if (typeof window !== "undefined" && !customElements.get("lx-picker")) {
+    customElements.define("lx-picker", LxPickerElement);
+  }
+}

package/src/platform.ts

@@ -0,0 +1,25 @@
+import type {} from '@lingxia/bridge';
+
+export function isHarmony(): boolean {
+  return window.LingXiaBridge?.platform?.isHarmony?.() === true;
+}
+
+export function isIOS(): boolean {
+  return window.LingXiaBridge?.platform?.isIOS?.() === true;
+}
+
+export function isAndroid(): boolean {
+  return window.LingXiaBridge?.platform?.isAndroid?.() === true;
+}
+
+export function isMacOS(): boolean {
+  return window.LingXiaBridge?.platform?.isMacOS?.() === true;
+}
+
+export function isDesktop(): boolean {
+  return window.LingXiaBridge?.platform?.isDesktop?.() === true;
+}
+
+export function getOS(): string {
+  return window.LingXiaBridge?.platform?.getOS?.() ?? "unknown";
+}

package/src/text_component_native_attrs.ts

@@ -0,0 +1,137 @@
+import { appendDataAttrs } from "./native_component_wrapper_shared.js";
+
+export interface InputNativeAttrOptions {
+  id?: string;
+  modelValue?: string;
+  value?: string;
+  defaultValue?: string;
+  type?: "text" | "number" | "password" | "digit";
+  password?: boolean;
+  placeholder?: string;
+  placeholderStyle?: string;
+  placeholderClass?: string;
+  maxlength?: number;
+  cursorSpacing?: number;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  focus?: boolean;
+  confirmType?: "send" | "search" | "next" | "go" | "done";
+  alwaysEmbed?: boolean;
+  confirmHold?: boolean;
+  cursor?: number;
+  cursorColor?: string;
+  selectionStart?: number;
+  selectionEnd?: number;
+  adjustPosition?: boolean;
+  holdKeyboard?: boolean;
+}
+
+export interface TextareaNativeAttrOptions {
+  id?: string;
+  modelValue?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  placeholderStyle?: string;
+  placeholderClass?: string;
+  maxlength?: number;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  focus?: boolean;
+  autoHeight?: boolean;
+  cursorSpacing?: number;
+  showConfirmBar?: boolean;
+  adjustPosition?: boolean;
+  holdKeyboard?: boolean;
+  disableDefaultPadding?: boolean;
+  confirmType?: "send" | "search" | "next" | "go" | "done" | "return";
+  confirmHold?: boolean;
+  fixed?: boolean;
+  adjustKeyboardTo?: "cursor" | "bottom";
+  cursor?: number;
+  selectionStart?: number;
+  selectionEnd?: number;
+}
+
+export function buildInputNativeAttrs(
+  options: InputNativeAttrOptions,
+  extraAttrs: Record<string, unknown> = {},
+  mounted = false
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+
+  if (explicitId.length > 0) result.id = explicitId;
+
+  const nextValue = options.modelValue ?? options.value;
+  if (nextValue !== undefined) {
+    result.value = nextValue;
+  } else if (!mounted && options.defaultValue !== undefined) {
+    result.value = options.defaultValue;
+  }
+
+  if (options.type) result.type = options.type;
+  if (options.password) result.password = "true";
+  if (options.placeholder) result.placeholder = options.placeholder;
+  if (options.placeholderStyle) result["placeholder-style"] = options.placeholderStyle;
+  if (options.placeholderClass) result["placeholder-class"] = options.placeholderClass;
+  if (options.maxlength !== undefined) result.maxlength = String(options.maxlength);
+  if (options.cursorSpacing !== undefined) result["cursor-spacing"] = String(options.cursorSpacing);
+  if (options.autoFocus) result["auto-focus"] = "true";
+  if (options.disabled) result.disabled = "true";
+  if (options.focus !== undefined) result.focus = options.focus ? "true" : "false";
+  if (options.confirmType) result["confirm-type"] = options.confirmType;
+  if (options.alwaysEmbed) result["always-embed"] = "true";
+  if (options.confirmHold) result["confirm-hold"] = "true";
+  if (options.cursor !== undefined) result.cursor = String(options.cursor);
+  if (options.cursorColor) result["cursor-color"] = options.cursorColor;
+  if (options.selectionStart !== undefined) result["selection-start"] = String(options.selectionStart);
+  if (options.selectionEnd !== undefined) result["selection-end"] = String(options.selectionEnd);
+  if (options.adjustPosition === false) result["adjust-position"] = "false";
+  if (options.holdKeyboard) result["hold-keyboard"] = "true";
+
+  appendDataAttrs(extraAttrs, result);
+  return result;
+}
+
+export function buildTextareaNativeAttrs(
+  options: TextareaNativeAttrOptions,
+  extraAttrs: Record<string, unknown> = {},
+  mounted = false
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+
+  if (explicitId.length > 0) result.id = explicitId;
+
+  const nextValue = options.modelValue ?? options.value;
+  if (nextValue !== undefined) {
+    result.value = nextValue;
+  } else if (!mounted && options.defaultValue !== undefined) {
+    result.value = options.defaultValue;
+  }
+
+  if (options.placeholder) result.placeholder = options.placeholder;
+  if (options.placeholderStyle) result["placeholder-style"] = options.placeholderStyle;
+  if (options.placeholderClass) result["placeholder-class"] = options.placeholderClass;
+  if (options.maxlength !== undefined) result.maxlength = String(options.maxlength);
+  if (options.disabled) result.disabled = "true";
+  if (options.autoFocus) result["auto-focus"] = "true";
+  if (options.focus !== undefined) result.focus = options.focus ? "true" : "false";
+  if (options.autoHeight) result["auto-height"] = "true";
+  if (options.cursorSpacing !== undefined) result["cursor-spacing"] = String(options.cursorSpacing);
+  if (options.showConfirmBar === false) result["show-confirm-bar"] = "false";
+  if (options.adjustPosition === false) result["adjust-position"] = "false";
+  if (options.holdKeyboard) result["hold-keyboard"] = "true";
+  if (options.disableDefaultPadding) result["disable-default-padding"] = "true";
+  if (options.confirmType) result["confirm-type"] = options.confirmType;
+  if (options.confirmHold) result["confirm-hold"] = "true";
+  if (options.fixed) result.fixed = "true";
+  if (options.adjustKeyboardTo) result["adjust-keyboard-to"] = options.adjustKeyboardTo;
+  if (options.cursor !== undefined) result.cursor = String(options.cursor);
+  if (options.selectionStart !== undefined) result["selection-start"] = String(options.selectionStart);
+  if (options.selectionEnd !== undefined) result["selection-end"] = String(options.selectionEnd);
+
+  appendDataAttrs(extraAttrs, result);
+  return result;
+}