@lingxia/elements 0.5.0

package/dist/navigator.js

@@ -0,0 +1,388 @@
+// LxNavigator - Navigation component for LingXia apps
+// Similar to WeChat mini program navigator component
+// Component implementation
+export class LxNavigatorElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.hoverClass = 'navigator-hover';
+        this.hoverStopPropagation = false;
+        this.hoverStartTime = 20;
+        this.hoverStayTime = 70;
+        this.hoverTimer = null;
+        this.isHovering = false;
+        this.onClick = (e) => this.handleClick(e);
+        this.onTouchStart = (e) => this.handleTouchStart(e);
+        this.onTouchEnd = (e) => this.handleTouchEnd(e);
+        this.onTouchCancel = (e) => this.handleTouchCancel(e);
+        this.onMouseEnter = (e) => this.handleMouseEnter(e);
+        this.onMouseLeave = (e) => this.handleMouseLeave(e);
+        this.clickListener = {
+            handleEvent: (event) => this.onClick(event),
+        };
+        this.touchStartListener = {
+            handleEvent: (event) => this.onTouchStart(event),
+        };
+        this.touchEndListener = {
+            handleEvent: (event) => this.onTouchEnd(event),
+        };
+        this.touchCancelListener = {
+            handleEvent: (event) => this.onTouchCancel(event),
+        };
+        this.mouseEnterListener = {
+            handleEvent: (event) => this.onMouseEnter(event),
+        };
+        this.mouseLeaveListener = {
+            handleEvent: (event) => this.onMouseLeave(event),
+        };
+    }
+    static get observedAttributes() {
+        return [
+            "url",
+            "open-type",
+            "target",
+            "delta",
+            "app-id",
+            "path",
+            "phone-number",
+            "hover-class",
+            "hover-stop-propagation",
+            "hover-start-time",
+            "hover-stay-time"
+        ];
+    }
+    connectedCallback() {
+        this.setupHoverEffect();
+        this.setupClickHandler();
+        this.applyDefaultStyles();
+    }
+    disconnectedCallback() {
+        this.clearHoverTimer();
+        this.removeEventListener('click', this.clickListener);
+        this.removeEventListener('touchstart', this.touchStartListener);
+        this.removeEventListener('touchend', this.touchEndListener);
+        this.removeEventListener('touchcancel', this.touchCancelListener);
+        this.removeEventListener('mouseenter', this.mouseEnterListener);
+        this.removeEventListener('mouseleave', this.mouseLeaveListener);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'hover-class':
+                this.hoverClass = newValue || 'navigator-hover';
+                break;
+            case 'hover-stop-propagation':
+                this.hoverStopPropagation = newValue === 'true';
+                break;
+            case 'hover-start-time':
+                this.hoverStartTime = parseInt(newValue || '20', 10);
+                break;
+            case 'hover-stay-time':
+                this.hoverStayTime = parseInt(newValue || '70', 10);
+                break;
+        }
+    }
+    applyDefaultStyles() {
+        if (!this.hasAttribute('style') && !this.className) {
+            this.style.display = 'inline-block';
+            this.style.cursor = 'pointer';
+            this.style.userSelect = 'none';
+            this.style.webkitTapHighlightColor = 'transparent';
+        }
+    }
+    setupHoverEffect() {
+        this.addEventListener('touchstart', this.touchStartListener, { passive: true });
+        this.addEventListener('touchend', this.touchEndListener, { passive: true });
+        this.addEventListener('touchcancel', this.touchCancelListener, { passive: true });
+        // Desktop hover
+        this.addEventListener('mouseenter', this.mouseEnterListener);
+        this.addEventListener('mouseleave', this.mouseLeaveListener);
+    }
+    setupClickHandler() {
+        this.addEventListener('click', this.clickListener);
+    }
+    handleTouchStart(e) {
+        if (this.hoverStopPropagation) {
+            e.stopPropagation();
+        }
+        this.clearHoverTimer();
+        this.hoverTimer = window.setTimeout(() => {
+            this.addHoverClass();
+        }, this.hoverStartTime);
+    }
+    handleTouchEnd(_e) {
+        this.clearHoverTimer();
+        if (this.isHovering) {
+            window.setTimeout(() => {
+                this.removeHoverClass();
+            }, this.hoverStayTime);
+        }
+    }
+    handleTouchCancel(_e) {
+        this.clearHoverTimer();
+        this.removeHoverClass();
+    }
+    handleMouseEnter(_e) {
+        this.clearHoverTimer();
+        this.hoverTimer = window.setTimeout(() => {
+            this.addHoverClass();
+        }, this.hoverStartTime);
+    }
+    handleMouseLeave(_e) {
+        this.clearHoverTimer();
+        if (this.isHovering) {
+            window.setTimeout(() => {
+                this.removeHoverClass();
+            }, this.hoverStayTime);
+        }
+    }
+    addHoverClass() {
+        if (this.hoverClass && this.hoverClass !== 'none') {
+            this.classList.add(this.hoverClass);
+            this.isHovering = true;
+        }
+    }
+    removeHoverClass() {
+        if (this.hoverClass && this.hoverClass !== 'none') {
+            this.classList.remove(this.hoverClass);
+            this.isHovering = false;
+        }
+    }
+    clearHoverTimer() {
+        if (this.hoverTimer !== null) {
+            window.clearTimeout(this.hoverTimer);
+            this.hoverTimer = null;
+        }
+    }
+    handleClick(e) {
+        e.preventDefault();
+        const url = this.getAttribute('url') || '';
+        const openType = (this.getAttribute('open-type') || 'navigate');
+        const explicitTarget = this.getAttribute('target');
+        const delta = parseInt(this.getAttribute('delta') || '1', 10);
+        const appId = this.getAttribute('app-id');
+        const path = this.getAttribute('path');
+        const phoneNumber = this.getAttribute('phone-number');
+        // Auto-infer target if not explicitly specified
+        const target = this.inferTarget(explicitTarget, url, appId);
+        void this.navigate({
+            url,
+            openType,
+            target,
+            delta,
+            appId,
+            path,
+            phoneNumber
+        });
+    }
+    /**
+     * Auto-infer navigation target based on context
+     * Priority: explicit target > appId > HTTPS URL > default (self)
+     */
+    inferTarget(explicitTarget, url, appId) {
+        // 1. Explicit target has highest priority
+        if (explicitTarget) {
+            return explicitTarget;
+        }
+        // 2. If appId is specified, target is another lxapp
+        if (appId) {
+            return 'lxapp';
+        }
+        // 3. If URL starts with http:// or https://, open in browser
+        if (/^https?:\/\//i.test(url)) {
+            return 'browser';
+        }
+        // 4. Default: navigate within current lxapp
+        return 'self';
+    }
+    async navigate(options) {
+        try {
+            await this.performNavigation(options);
+            this.dispatchSuccess();
+        }
+        catch (error) {
+            this.dispatchFail(error);
+        }
+    }
+    dispatchSuccess() {
+        const successEvent = new CustomEvent('success', {
+            detail: {
+                success: true
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.dispatchEvent(successEvent);
+        const completeEvent = new CustomEvent('complete', {
+            detail: {
+                success: true
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.dispatchEvent(completeEvent);
+    }
+    resolveErrorMessage(error) {
+        if (error instanceof Error) {
+            const message = error.message.trim();
+            return message || 'Unknown error';
+        }
+        if (typeof error === 'string') {
+            const message = error.trim();
+            return message || 'Unknown error';
+        }
+        if (error && typeof error === 'object') {
+            const message = error.message;
+            if (typeof message === 'string' && message.trim()) {
+                return message;
+            }
+        }
+        return 'Unknown error';
+    }
+    dispatchFail(error) {
+        const errMsg = this.resolveErrorMessage(error);
+        const failEvent = new CustomEvent('fail', {
+            detail: {
+                success: false,
+                errMsg
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.dispatchEvent(failEvent);
+        const completeEvent = new CustomEvent('complete', {
+            detail: {
+                success: false,
+                errMsg
+            },
+            bubbles: true,
+            composed: true
+        });
+        this.dispatchEvent(completeEvent);
+    }
+    getHostApi() {
+        const host = window.host;
+        if (!host || typeof host !== 'object') {
+            return null;
+        }
+        return host;
+    }
+    async performNavigation(options) {
+        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o;
+        const host = this.getHostApi();
+        if (!host) {
+            throw new Error('LingXia bridge not available');
+        }
+        const url = options.url || '';
+        const delta = Number.isFinite(options.delta) && options.delta > 0 ? options.delta : 1;
+        if (options.openType === 'tel') {
+            if (!options.phoneNumber) {
+                throw new Error('tel requires phone-number attribute');
+            }
+            if (typeof ((_a = host.device) === null || _a === void 0 ? void 0 : _a.makePhoneCall) !== 'function') {
+                throw new Error('host.device.makePhoneCall is not available');
+            }
+            await host.device.makePhoneCall({ phoneNumber: options.phoneNumber });
+            return;
+        }
+        if (options.openType === 'exit') {
+            if (typeof ((_b = host.navigator) === null || _b === void 0 ? void 0 : _b.navigateBackLxApp) !== 'function') {
+                throw new Error('host.navigator.navigateBackLxApp is not available');
+            }
+            await host.navigator.navigateBackLxApp();
+            return;
+        }
+        if (options.openType === 'navigateBack') {
+            if (options.target === 'lxapp') {
+                if (typeof ((_c = host.navigator) === null || _c === void 0 ? void 0 : _c.navigateBackLxApp) !== 'function') {
+                    throw new Error('host.navigator.navigateBackLxApp is not available');
+                }
+                await host.navigator.navigateBackLxApp();
+                return;
+            }
+            if (options.target === 'browser') {
+                throw new Error('navigateBack is not supported for browser target');
+            }
+            if (typeof ((_d = host.navigation) === null || _d === void 0 ? void 0 : _d.navigateBack) !== 'function') {
+                throw new Error('host.navigation.navigateBack is not available');
+            }
+            await host.navigation.navigateBack({ delta });
+            return;
+        }
+        if (options.target === 'browser') {
+            if (!url) {
+                throw new Error('openUrl requires url');
+            }
+            if (typeof ((_f = host.device) === null || _f === void 0 ? void 0 : _f.openUrl) !== 'function') {
+                throw new Error('host.device.openUrl is not available');
+            }
+            await host.device.openUrl({ url, target: 'external' });
+            return;
+        }
+        if (options.target === 'lxapp') {
+            if (!options.appId) {
+                throw new Error('navigateToLxApp requires app-id');
+            }
+            const lxappPath = options.path || '';
+            if (typeof ((_g = host.navigator) === null || _g === void 0 ? void 0 : _g.navigateToLxApp) !== 'function') {
+                throw new Error('host.navigator.navigateToLxApp is not available');
+            }
+            await host.navigator.navigateToLxApp({ appId: options.appId, path: lxappPath });
+            return;
+        }
+        if (options.target === 'self' && /^https?:\/\//i.test(url)) {
+            if (!url) {
+                throw new Error('openUrl requires url');
+            }
+            if (typeof ((_h = host.device) === null || _h === void 0 ? void 0 : _h.openUrl) !== 'function') {
+                throw new Error('host.device.openUrl is not available');
+            }
+            await host.device.openUrl({ url, target: 'self' });
+            return;
+        }
+        if (!url) {
+            throw new Error(`${options.openType} requires url`);
+        }
+        switch (options.openType) {
+            case 'navigate':
+                if (typeof ((_j = host.navigation) === null || _j === void 0 ? void 0 : _j.navigateTo) !== 'function') {
+                    throw new Error('host.navigation.navigateTo is not available');
+                }
+                await host.navigation.navigateTo({ url });
+                break;
+            case 'redirect':
+                if (typeof ((_k = host.navigation) === null || _k === void 0 ? void 0 : _k.redirectTo) !== 'function') {
+                    throw new Error('host.navigation.redirectTo is not available');
+                }
+                await host.navigation.redirectTo({ url });
+                break;
+            case 'switchTab':
+                if (typeof ((_l = host.navigation) === null || _l === void 0 ? void 0 : _l.switchTab) !== 'function') {
+                    throw new Error('host.navigation.switchTab is not available');
+                }
+                await host.navigation.switchTab({ url });
+                break;
+            case 'reLaunch':
+                if (typeof ((_m = host.navigation) === null || _m === void 0 ? void 0 : _m.reLaunch) !== 'function') {
+                    throw new Error('host.navigation.reLaunch is not available');
+                }
+                await host.navigation.reLaunch({ url });
+                break;
+            case 'openUrl':
+                if (typeof ((_o = host.device) === null || _o === void 0 ? void 0 : _o.openUrl) !== 'function') {
+                    throw new Error('host.device.openUrl is not available');
+                }
+                await host.device.openUrl({
+                    url,
+                    target: options.target === 'self' ? 'self' : 'external'
+                });
+                break;
+            default:
+                throw new Error(`Unsupported openType: ${options.openType}`);
+        }
+    }
+}
+// Register custom element
+if (typeof customElements !== 'undefined' && !customElements.get('lx-navigator')) {
+    customElements.define('lx-navigator', LxNavigatorElement);
+}

package/dist/picker-web.d.ts

@@ -0,0 +1,2 @@
+import type { LxPickerEventDetail } from './picker.js';
+export declare function renderWebPicker(host: HTMLElement, props: Record<string, any>, onChange: (d: LxPickerEventDetail) => void): () => void;