@lingxia/elements 0.5.0

package/dist/picker.d.ts

@@ -0,0 +1,77 @@
+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;
+        }
+    }
+}
+export declare class LxPickerElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private componentId;
+    private mounted;
+    private unregister?;
+    private _handlers;
+    private rawHandlers;
+    private _pageBindings;
+    private harmonyEmbed?;
+    private lastHarmonyProps?;
+    private webCleanup?;
+    private attrObserver?;
+    private removeLayoutInvalidationListener?;
+    private readonly layoutInvalidationListener;
+    private upgradeProperty;
+    set pageBindings(bindings: Record<string, string>);
+    get pageBindings(): Record<string, string>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private getAttr;
+    private getJsonAttr;
+    private collectProps;
+    private shouldRefreshForAttribute;
+    private startAttrObserver;
+    private stopAttrObserver;
+    private dataAttrToDatasetKey;
+    private collectDataset;
+    private mountPicker;
+    set onchange(cb: EventListener | null);
+    get onchange(): EventListener | null;
+    private ensureHarmonyEmbed;
+    private encodeHarmonyProps;
+}
+export declare function registerPickerComponent(): void;
+export {};

package/dist/picker.js

@@ -0,0 +1,342 @@
+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,";
+// Component implementation
+export class LxPickerElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.componentId = null;
+        this.mounted = false;
+        this._handlers = {};
+        this.rawHandlers = {};
+        this._pageBindings = {};
+        this.layoutInvalidationListener = {
+            handleEvent: () => {
+                if (!this.isConnected || isHarmony() || isDesktop())
+                    return;
+                void this.mountPicker();
+            }
+        };
+    }
+    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"
+        ];
+    }
+    upgradeProperty(propName) {
+        const self = this;
+        if (!Object.prototype.hasOwnProperty.call(self, propName))
+            return;
+        const value = self[propName];
+        delete self[propName];
+        self[propName] = value;
+    }
+    set pageBindings(bindings) {
+        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
+        if (this.isConnected) {
+            this.mountPicker();
+        }
+    }
+    get pageBindings() {
+        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) => {
+            var _a;
+            if (typeof message.event === "string") {
+                this.dispatchEvent(new CustomEvent(message.event, { detail: (_a = message.detail) !== null && _a !== void 0 ? _a : {}, bubbles: true }));
+            }
+        });
+        this.startAttrObserver();
+        if (isAndroid()) {
+            this.removeLayoutInvalidationListener = addNativeComponentLayoutInvalidationListener(this.layoutInvalidationListener);
+        }
+        this.mountPicker();
+        queueMicrotask(() => {
+            if (!this.isConnected)
+                return;
+            this.mountPicker();
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.webCleanup) {
+            this.webCleanup();
+            this.webCleanup = undefined;
+        }
+        (_a = this.removeLayoutInvalidationListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        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) {
+        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();
+    }
+    getAttr(name, fallback = "") {
+        return this.getAttribute(name) || fallback;
+    }
+    getJsonAttr(name) {
+        const raw = this.getAttribute(name);
+        if (!raw)
+            return undefined;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    collectProps() {
+        const mode = this.getAttr("mode", "selector");
+        const isDateMode = mode === "date" || mode === "time";
+        const fields = this.getAttr("fields");
+        const props = {
+            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;
+    }
+    shouldRefreshForAttribute(name) {
+        const normalized = name.trim().toLowerCase();
+        return normalized.startsWith("data-");
+    }
+    startAttrObserver() {
+        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 });
+    }
+    stopAttrObserver() {
+        if (!this.attrObserver) {
+            return;
+        }
+        this.attrObserver.disconnect();
+        this.attrObserver = undefined;
+    }
+    dataAttrToDatasetKey(attr) {
+        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("");
+    }
+    collectDataset() {
+        const dataset = {};
+        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;
+    }
+    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 = {
+            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) {
+        const raw = cb;
+        const current = this._handlers['change'];
+        if (current)
+            this.removeEventListener('change', current);
+        if (typeof raw === "function" ||
+            (!!raw && typeof raw === "object" && typeof raw.handleEvent === "function")) {
+            const listener = typeof raw === "function"
+                ? { handleEvent: raw }
+                : raw;
+            this._handlers['change'] = listener;
+            this.rawHandlers['change'] = raw;
+            this.addEventListener('change', listener);
+        }
+        else {
+            delete this._handlers['change'];
+            delete this.rawHandlers['change'];
+        }
+    }
+    get onchange() { return this.rawHandlers['change'] || null; }
+    ensureHarmonyEmbed(rect, props, cornerRadius) {
+        // 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";
+        }
+    }
+    encodeHarmonyProps(props) {
+        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/dist/platform.d.ts

@@ -0,0 +1,6 @@
+export declare function isHarmony(): boolean;
+export declare function isIOS(): boolean;
+export declare function isAndroid(): boolean;
+export declare function isMacOS(): boolean;
+export declare function isDesktop(): boolean;
+export declare function getOS(): string;

package/dist/platform.js

@@ -0,0 +1,24 @@
+export function isHarmony() {
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isHarmony) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;
+}
+export function isIOS() {
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isIOS) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;
+}
+export function isAndroid() {
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isAndroid) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;
+}
+export function isMacOS() {
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isMacOS) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;
+}
+export function isDesktop() {
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isDesktop) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;
+}
+export function getOS() {
+    var _a, _b, _c, _d;
+    return (_d = (_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.getOS) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : "unknown";
+}

package/dist/text_component_native_attrs.d.ts

@@ -0,0 +1,53 @@
+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 declare function buildInputNativeAttrs(options: InputNativeAttrOptions, extraAttrs?: Record<string, unknown>, mounted?: boolean): Record<string, string>;
+export declare function buildTextareaNativeAttrs(options: TextareaNativeAttrOptions, extraAttrs?: Record<string, unknown>, mounted?: boolean): Record<string, string>;

package/dist/text_component_native_attrs.js

@@ -0,0 +1,111 @@
+import { appendDataAttrs } from "./native_component_wrapper_shared.js";
+export function buildInputNativeAttrs(options, extraAttrs = {}, mounted = false) {
+    var _a;
+    const result = {};
+    const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+    if (explicitId.length > 0)
+        result.id = explicitId;
+    const nextValue = (_a = options.modelValue) !== null && _a !== void 0 ? _a : 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, extraAttrs = {}, mounted = false) {
+    var _a;
+    const result = {};
+    const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+    if (explicitId.length > 0)
+        result.id = explicitId;
+    const nextValue = (_a = options.modelValue) !== null && _a !== void 0 ? _a : 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;
+}

package/dist/text_component_shared.d.ts

@@ -0,0 +1,7 @@
+export declare function getPropOrAttr(el: HTMLElement, name: string): unknown;
+export declare function parseNumberLike(value: unknown): number | undefined;
+export declare function getBoolAttr(el: HTMLElement, name: string): boolean;
+export declare function getNumAttr(el: HTMLElement, name: string): number | undefined;
+export declare function shouldRefreshForDataAttribute(name: string): boolean;
+export declare function collectDataset(el: HTMLElement): Record<string, string>;
+export declare function ensureElementVisibleForKeyboard(el: HTMLElement, explicitKeyboardHeight?: number, forceCenter?: boolean, extraDelays?: number[]): void;