@lingxia/elements 0.5.0

package/dist/native_component_wrapper_shared.d.ts

@@ -0,0 +1,74 @@
+import type { NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { LxVideoQuality } from "./video.js";
+export declare function appendDataAttrs(attrs: Record<string, unknown>, target: Record<string, string>): void;
+export declare function appendPassthroughAttrs(attrs: Record<string, unknown>, target: Record<string, string>): void;
+export interface NavigatorNativeAttrOptions {
+    url?: string;
+    openType?: NavigatorOpenType;
+    target?: NavigatorTarget;
+    delta?: number;
+    appId?: string;
+    path?: string;
+    phoneNumber?: string;
+    hoverClass?: string;
+    hoverStopPropagation?: boolean;
+    hoverStartTime?: number;
+    hoverStayTime?: number;
+}
+export declare function buildNavigatorNativeAttrs(options: NavigatorNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string>;
+export type PickerColumns = string[][] | [string[], Record<string, string[]>];
+export type PickerValue = string | string[] | undefined;
+export type PickerFields = "year" | "month" | "day" | "range";
+export interface PickerNativeAttrOptions {
+    id?: string;
+    columns?: PickerColumns;
+    mode?: "date" | "time";
+    start?: string;
+    end?: string;
+    fields?: PickerFields;
+    modelValue?: string | string[];
+    value?: string | string[];
+    cancelText?: string;
+    cancelTextColor?: string;
+    cancelButtonColor?: string;
+    confirmText?: string;
+    confirmTextColor?: string;
+    confirmButtonColor?: string;
+}
+export declare function isPickerDateMode(mode?: "date" | "time"): boolean;
+export declare function isPickerCascading(columns?: PickerColumns): columns is [string[], Record<string, string[]>];
+export declare function isPickerSingle(columns?: PickerColumns): boolean;
+export declare function getPickerIndexFromValue(columns: PickerColumns | undefined, value: PickerValue): number | number[];
+export declare function getPickerValueFromIndex(columns: PickerColumns | undefined, index: number | number[]): string | string[];
+export declare function getPickerDisplayText(value: PickerValue, fields?: PickerFields): string;
+export declare function buildPickerNativeAttrs(options: PickerNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string>;
+export declare const VIDEO_DOM_EVENT_MAP: {
+    readonly onPlayRequest: "playrequest";
+    readonly onPlay: "play";
+    readonly onPlaying: "playing";
+    readonly onPause: "pause";
+    readonly onStop: "stop";
+    readonly onEnded: "ended";
+    readonly onTimeUpdate: "timeupdate";
+    readonly onError: "error";
+    readonly onLoadedMetadata: "loadedmetadata";
+    readonly onFullscreenChange: "fullscreenchange";
+    readonly onWaiting: "waiting";
+    readonly onQualityChange: "qualitychange";
+    readonly onRateChange: "ratechange";
+};
+export interface VideoNativeAttrOptions {
+    id?: string;
+    src?: string;
+    poster?: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+    progressBar?: boolean;
+    live?: boolean;
+    volume?: string | number;
+    qualities?: LxVideoQuality[];
+    playbackRates?: number[];
+}
+export declare function buildVideoNativeAttrs(options: VideoNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string | number>;

package/dist/native_component_wrapper_shared.js

@@ -0,0 +1,193 @@
+export function appendDataAttrs(attrs, target) {
+    for (const [key, value] of Object.entries(attrs)) {
+        if (value === undefined || value === null)
+            continue;
+        if (!key.startsWith("data-"))
+            continue;
+        target[key] = String(value);
+    }
+}
+export function appendPassthroughAttrs(attrs, target) {
+    for (const [key, value] of Object.entries(attrs)) {
+        if (value === undefined || value === null)
+            continue;
+        if (key in target)
+            continue;
+        if (key === "class" || key === "className" || key === "style" || key === "children" || key === "ref") {
+            continue;
+        }
+        if (key.startsWith("on"))
+            continue;
+        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+            target[key] = String(value);
+        }
+    }
+}
+export function buildNavigatorNativeAttrs(options, extraAttrs = {}) {
+    var _a, _b, _c, _d, _e, _f;
+    const result = {
+        "open-type": (_a = options.openType) !== null && _a !== void 0 ? _a : "navigate",
+        delta: String((_b = options.delta) !== null && _b !== void 0 ? _b : 1),
+        "hover-class": (_c = options.hoverClass) !== null && _c !== void 0 ? _c : "navigator-hover",
+        "hover-stop-propagation": String((_d = options.hoverStopPropagation) !== null && _d !== void 0 ? _d : false),
+        "hover-start-time": String((_e = options.hoverStartTime) !== null && _e !== void 0 ? _e : 20),
+        "hover-stay-time": String((_f = options.hoverStayTime) !== null && _f !== void 0 ? _f : 70),
+    };
+    if (options.url)
+        result.url = options.url;
+    if (options.target)
+        result.target = options.target;
+    if (options.appId)
+        result["app-id"] = options.appId;
+    if (options.path)
+        result.path = options.path;
+    if (options.phoneNumber)
+        result["phone-number"] = options.phoneNumber;
+    appendPassthroughAttrs(extraAttrs, result);
+    return result;
+}
+export function isPickerDateMode(mode) {
+    return mode === "date" || mode === "time";
+}
+export function isPickerCascading(columns) {
+    return !!columns && columns.length === 2 && typeof columns[1] === "object" && !Array.isArray(columns[1]);
+}
+export function isPickerSingle(columns) {
+    return !!columns && columns.length === 1;
+}
+export function getPickerIndexFromValue(columns, value) {
+    var _a, _b;
+    if (!columns)
+        return 0;
+    if (isPickerSingle(columns)) {
+        if (typeof value !== "string")
+            return 0;
+        const idx = columns[0].indexOf(value);
+        return idx >= 0 ? idx : 0;
+    }
+    if (!Array.isArray(value)) {
+        return Array.from({ length: columns.length }, () => 0);
+    }
+    if (isPickerCascading(columns)) {
+        const [keys, map] = columns;
+        const keyIdx = Math.max(0, keys.indexOf(value[0]));
+        const valIdx = Math.max(0, (_b = (_a = map[keys[keyIdx]]) === null || _a === void 0 ? void 0 : _a.indexOf(value[1])) !== null && _b !== void 0 ? _b : 0);
+        return [keyIdx, valIdx];
+    }
+    const indexes = value.map((item, index) => { var _a, _b; return Math.max(0, (_b = (_a = columns[index]) === null || _a === void 0 ? void 0 : _a.indexOf(item)) !== null && _b !== void 0 ? _b : 0); });
+    while (indexes.length < columns.length)
+        indexes.push(0);
+    return indexes;
+}
+export function getPickerValueFromIndex(columns, index) {
+    var _a, _b, _c, _d, _e;
+    if (!columns)
+        return "";
+    if (typeof index === "number") {
+        return (_b = (_a = columns[0]) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : "";
+    }
+    if (isPickerCascading(columns)) {
+        const [keys, map] = columns;
+        const key = (_c = keys[index[0]]) !== null && _c !== void 0 ? _c : "";
+        return [key, (_e = (_d = map[key]) === null || _d === void 0 ? void 0 : _d[index[1]]) !== null && _e !== void 0 ? _e : ""];
+    }
+    return index.map((item, column) => { var _a, _b; return (_b = (_a = columns[column]) === null || _a === void 0 ? void 0 : _a[item]) !== null && _b !== void 0 ? _b : ""; });
+}
+export function getPickerDisplayText(value, fields) {
+    if (!value)
+        return "";
+    if (fields === "range" && Array.isArray(value)) {
+        return `${value[0]} ~ ${value[1]}`;
+    }
+    return typeof value === "string" ? value : value.join(" - ");
+}
+export function buildPickerNativeAttrs(options, extraAttrs = {}) {
+    var _a, _b;
+    const result = {};
+    const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+    const nextValue = (_a = options.modelValue) !== null && _a !== void 0 ? _a : options.value;
+    if (explicitId.length > 0)
+        result.id = explicitId;
+    if (isPickerDateMode(options.mode)) {
+        result.mode = options.mode;
+        if (options.fields)
+            result.fields = options.fields;
+        if (nextValue) {
+            result.value = typeof nextValue === "string" ? nextValue : JSON.stringify(nextValue);
+        }
+        if (options.start)
+            result.start = options.start;
+        if (options.end)
+            result.end = options.end;
+    }
+    else {
+        result.mode = isPickerCascading(options.columns)
+            ? "cascading"
+            : isPickerSingle(options.columns)
+                ? "selector"
+                : "multiSelector";
+        result.columns = JSON.stringify((_b = options.columns) !== null && _b !== void 0 ? _b : []);
+        result["default-index"] = JSON.stringify(getPickerIndexFromValue(options.columns, nextValue));
+    }
+    if (options.cancelText)
+        result["cancel-text"] = options.cancelText;
+    if (options.cancelTextColor)
+        result["cancel-text-color"] = options.cancelTextColor;
+    if (options.cancelButtonColor)
+        result["cancel-button-color"] = options.cancelButtonColor;
+    if (options.confirmText)
+        result["confirm-text"] = options.confirmText;
+    if (options.confirmTextColor)
+        result["confirm-text-color"] = options.confirmTextColor;
+    if (options.confirmButtonColor)
+        result["confirm-button-color"] = options.confirmButtonColor;
+    appendPassthroughAttrs(extraAttrs, result);
+    return result;
+}
+export const VIDEO_DOM_EVENT_MAP = {
+    onPlayRequest: "playrequest",
+    onPlay: "play",
+    onPlaying: "playing",
+    onPause: "pause",
+    onStop: "stop",
+    onEnded: "ended",
+    onTimeUpdate: "timeupdate",
+    onError: "error",
+    onLoadedMetadata: "loadedmetadata",
+    onFullscreenChange: "fullscreenchange",
+    onWaiting: "waiting",
+    onQualityChange: "qualitychange",
+    onRateChange: "ratechange",
+};
+export function buildVideoNativeAttrs(options, extraAttrs = {}) {
+    var _a, _b;
+    const result = {};
+    const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+    if (explicitId.length > 0)
+        result.id = explicitId;
+    if (options.src)
+        result.src = options.src;
+    if (options.poster)
+        result.poster = options.poster;
+    if (options.autoplay)
+        result.autoplay = "";
+    if (options.loop)
+        result.loop = "";
+    if (options.muted)
+        result.muted = "";
+    if (options.controls)
+        result.controls = "";
+    if (options.progressBar === false)
+        result["progress-bar"] = "false";
+    if (options.live)
+        result.live = "";
+    if (options.volume !== undefined)
+        result.volume = options.volume;
+    if ((_a = options.qualities) === null || _a === void 0 ? void 0 : _a.length)
+        result.qualities = JSON.stringify(options.qualities);
+    if ((_b = options.playbackRates) === null || _b === void 0 ? void 0 : _b.length)
+        result["playback-rates"] = JSON.stringify(options.playbackRates);
+    const extraNativeAttrs = {};
+    appendPassthroughAttrs(extraAttrs, extraNativeAttrs);
+    return { ...result, ...extraNativeAttrs };
+}

package/dist/nativecomponent.d.ts

@@ -0,0 +1,6 @@
+import type { NativeComponentMessage } from './types.js';
+export type { NativeComponentMessage } from './types.js';
+export declare function sendNativeComponentMessage(message: NativeComponentMessage): void;
+export declare function registerNativeComponentHandler(id: string, handler: (msg: NativeComponentMessage) => void): () => void;
+export declare function invalidateNativeComponentLayout(delays?: number[]): void;
+export declare function addNativeComponentLayoutInvalidationListener(listener: EventListenerOrEventListenerObject): () => void;

package/dist/nativecomponent.js

@@ -0,0 +1,82 @@
+let warnedNoHandler = false;
+const NATIVE_COMPONENT_LAYOUT_INVALIDATED_EVENT = "lingxia:native-component-layout-invalidated";
+let pendingLayoutInvalidationFrame = null;
+const pendingLayoutInvalidationTimers = new Map();
+export function sendNativeComponentMessage(message) {
+    var _a, _b;
+    const sender = typeof window !== "undefined"
+        ? (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.nativeComponents) === null || _b === void 0 ? void 0 : _b.send
+        : undefined;
+    if (typeof sender !== "function") {
+        if (!warnedNoHandler) {
+            warnedNoHandler = true;
+            console.warn("[LingXia NativeComponent] message handler not available");
+        }
+        return;
+    }
+    sender(message);
+}
+export function registerNativeComponentHandler(id, handler) {
+    var _a, _b, _c, _d, _e;
+    const nativeComponents = typeof window !== "undefined"
+        ? (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.nativeComponents
+        : undefined;
+    const registerFn = nativeComponents === null || nativeComponents === void 0 ? void 0 : nativeComponents.register;
+    if (typeof registerFn === "function") {
+        const unregister = registerFn(id, handler);
+        const platform = (_b = window.LingXiaBridge) === null || _b === void 0 ? void 0 : _b.platform;
+        const requiresReadyHandshake = !!(((_c = platform === null || platform === void 0 ? void 0 : platform.isIOS) === null || _c === void 0 ? void 0 : _c.call(platform)) ||
+            ((_d = platform === null || platform === void 0 ? void 0 : platform.isAndroid) === null || _d === void 0 ? void 0 : _d.call(platform)) ||
+            ((_e = platform === null || platform === void 0 ? void 0 : platform.isMacOS) === null || _e === void 0 ? void 0 : _e.call(platform)));
+        const hasHandler = nativeComponents === null || nativeComponents === void 0 ? void 0 : nativeComponents.hasHandler;
+        const send = nativeComponents === null || nativeComponents === void 0 ? void 0 : nativeComponents.send;
+        if (typeof send === "function") {
+            const nativeReady = typeof hasHandler === "function" ? hasHandler() : true;
+            if (requiresReadyHandshake || nativeReady) {
+                send({ action: "component.ready", id });
+            }
+        }
+        return unregister;
+    }
+    if (!warnedNoHandler) {
+        warnedNoHandler = true;
+        console.warn("[LingXia NativeComponent] message handler not available");
+    }
+    return () => { };
+}
+function dispatchNativeComponentLayoutInvalidated() {
+    if (typeof window === "undefined")
+        return;
+    window.dispatchEvent(new CustomEvent(NATIVE_COMPONENT_LAYOUT_INVALIDATED_EVENT));
+}
+export function invalidateNativeComponentLayout(delays = [32, 96]) {
+    if (typeof window === "undefined")
+        return;
+    if (pendingLayoutInvalidationFrame === null) {
+        pendingLayoutInvalidationFrame = window.requestAnimationFrame(() => {
+            pendingLayoutInvalidationFrame = null;
+            dispatchNativeComponentLayoutInvalidated();
+        });
+    }
+    const uniqueDelays = new Set(delays
+        .map((delay) => Math.round(delay))
+        .filter((delay) => delay > 0));
+    uniqueDelays.forEach((delay) => {
+        if (pendingLayoutInvalidationTimers.has(delay)) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            pendingLayoutInvalidationTimers.delete(delay);
+            dispatchNativeComponentLayoutInvalidated();
+        }, delay);
+        pendingLayoutInvalidationTimers.set(delay, timer);
+    });
+}
+export function addNativeComponentLayoutInvalidationListener(listener) {
+    if (typeof window === "undefined")
+        return () => { };
+    window.addEventListener(NATIVE_COMPONENT_LAYOUT_INVALIDATED_EVENT, listener);
+    return () => {
+        window.removeEventListener(NATIVE_COMPONENT_LAYOUT_INVALIDATED_EVENT, listener);
+    };
+}

package/dist/navigator.d.ts

@@ -0,0 +1,83 @@
+export type NavigatorOpenType = 'navigate' | 'redirect' | 'navigateBack' | 'reLaunch' | 'switchTab' | 'exit' | 'openUrl' | 'tel';
+export type NavigatorTarget = 'self' | 'lxapp' | 'browser';
+export interface LxNavigatorEventDetail {
+    success?: boolean;
+    errMsg?: string;
+}
+export interface LxNavigatorEvent extends CustomEvent<LxNavigatorEventDetail> {
+    detail: LxNavigatorEventDetail;
+}
+export type LxNavigatorAttributes = {
+    url?: string;
+    'open-type'?: NavigatorOpenType;
+    target?: NavigatorTarget;
+    delta?: number;
+    'app-id'?: string;
+    path?: string;
+    'phone-number'?: string;
+    'hover-class'?: string;
+    'hover-stop-propagation'?: boolean;
+    'hover-start-time'?: number;
+    'hover-stay-time'?: number;
+    className?: string;
+    style?: any;
+    onSuccess?: (e: LxNavigatorEvent) => void;
+    onFail?: (e: LxNavigatorEvent) => void;
+    onComplete?: (e: LxNavigatorEvent) => void;
+    ref?: any;
+    children?: any;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "lx-navigator": LxNavigatorAttributes;
+        }
+    }
+}
+export declare class LxNavigatorElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private hoverClass;
+    private hoverStopPropagation;
+    private hoverStartTime;
+    private hoverStayTime;
+    private hoverTimer;
+    private isHovering;
+    private readonly onClick;
+    private readonly onTouchStart;
+    private readonly onTouchEnd;
+    private readonly onTouchCancel;
+    private readonly onMouseEnter;
+    private readonly onMouseLeave;
+    private readonly clickListener;
+    private readonly touchStartListener;
+    private readonly touchEndListener;
+    private readonly touchCancelListener;
+    private readonly mouseEnterListener;
+    private readonly mouseLeaveListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private applyDefaultStyles;
+    private setupHoverEffect;
+    private setupClickHandler;
+    private handleTouchStart;
+    private handleTouchEnd;
+    private handleTouchCancel;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private addHoverClass;
+    private removeHoverClass;
+    private clearHoverTimer;
+    private handleClick;
+    /**
+     * Auto-infer navigation target based on context
+     * Priority: explicit target > appId > HTTPS URL > default (self)
+     */
+    private inferTarget;
+    private navigate;
+    private dispatchSuccess;
+    private resolveErrorMessage;
+    private dispatchFail;
+    private getHostApi;
+    private performNavigation;
+}