@lingxia/elements 0.5.0

package/dist/text_component_shared.js

@@ -0,0 +1,148 @@
+export function getPropOrAttr(el, name) {
+    const attr = el.getAttribute(name);
+    if (attr !== null)
+        return attr;
+    const camelName = name.replace(/-([a-z])/g, (_m, ch) => ch.toUpperCase());
+    const self = el;
+    if (Object.prototype.hasOwnProperty.call(self, camelName)) {
+        const value = self[camelName];
+        if (value !== undefined && value !== null)
+            return value;
+    }
+    return undefined;
+}
+export function parseNumberLike(value) {
+    if (typeof value === "number") {
+        return Number.isFinite(value) ? value : undefined;
+    }
+    if (typeof value === "string") {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    return undefined;
+}
+export function getBoolAttr(el, name) {
+    const raw = getPropOrAttr(el, name);
+    if (raw === undefined || raw === null)
+        return false;
+    if (typeof raw === "boolean")
+        return raw;
+    const val = String(raw).trim().toLowerCase();
+    if (val === "false" || val === "0" || val === "null" || val === "undefined") {
+        return false;
+    }
+    return true;
+}
+export function getNumAttr(el, name) {
+    const raw = getPropOrAttr(el, name);
+    if (raw === undefined || raw === null)
+        return undefined;
+    if (typeof raw === "number")
+        return Number.isFinite(raw) ? raw : undefined;
+    const val = String(raw).trim();
+    if (val === "")
+        return undefined;
+    const n = Number(val);
+    return Number.isNaN(n) ? undefined : n;
+}
+export function shouldRefreshForDataAttribute(name) {
+    const normalized = name.trim().toLowerCase();
+    return normalized.startsWith("data-");
+}
+function 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("");
+}
+export function collectDataset(el) {
+    const dataset = {};
+    const attrs = el.getAttributeNames();
+    for (const attr of attrs) {
+        if (!attr.startsWith("data-"))
+            continue;
+        const key = dataAttrToDatasetKey(attr);
+        if (!key)
+            continue;
+        const value = el.getAttribute(attr);
+        if (value == null)
+            continue;
+        dataset[key] = value;
+    }
+    return dataset;
+}
+function findScrollableAncestor(el) {
+    let node = el.parentElement;
+    while (node) {
+        const style = getComputedStyle(node);
+        const overflowY = style.overflowY;
+        const scrollable = (overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight + 1;
+        if (scrollable) {
+            return node;
+        }
+        node = node.parentElement;
+    }
+    return null;
+}
+function applyScrollDelta(el, deltaY) {
+    if (Math.abs(deltaY) <= 1)
+        return;
+    const target = findScrollableAncestor(el);
+    if (target) {
+        target.scrollTop += Math.round(deltaY);
+        return;
+    }
+    window.scrollBy(0, Math.round(deltaY));
+}
+export function ensureElementVisibleForKeyboard(el, explicitKeyboardHeight = 0, forceCenter = false, extraDelays = [120]) {
+    const tryScroll = () => {
+        if (!el.isConnected)
+            return;
+        const rect = el.getBoundingClientRect();
+        const layoutViewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+        const visualViewport = window.visualViewport;
+        const visualBottom = visualViewport ? (visualViewport.offsetTop + visualViewport.height) : layoutViewportHeight;
+        const keyboardHeight = Math.max(0, explicitKeyboardHeight || 0);
+        const keyboardLikelyVisible = keyboardHeight > 0 ||
+            (!!visualViewport && visualViewport.height < (layoutViewportHeight - 40));
+        if (!keyboardLikelyVisible) {
+            return;
+        }
+        const viewportHeight = keyboardHeight > 0
+            ? Math.min(layoutViewportHeight, layoutViewportHeight - keyboardHeight)
+            : Math.min(layoutViewportHeight, visualBottom);
+        if (viewportHeight <= 0)
+            return;
+        const topSafe = 12;
+        const bottomSafe = 24;
+        let delta = 0;
+        const visibleBottom = Math.max(topSafe, viewportHeight - bottomSafe);
+        if (rect.bottom > visibleBottom) {
+            delta = rect.bottom - visibleBottom;
+        }
+        else if (rect.top < topSafe) {
+            delta = rect.top - topSafe;
+        }
+        if (Math.abs(delta) > 1) {
+            applyScrollDelta(el, delta);
+            return;
+        }
+        if (forceCenter && rect.bottom > layoutViewportHeight * 0.6) {
+            el.scrollIntoView({ block: "center", inline: "nearest", behavior: "auto" });
+        }
+    };
+    tryScroll();
+    requestAnimationFrame(() => tryScroll());
+    extraDelays.forEach((delay) => {
+        setTimeout(() => tryScroll(), delay);
+    });
+}

package/dist/textarea.d.ts

@@ -0,0 +1,129 @@
+export interface LxTextareaEventDetail {
+    value?: string;
+    cursor?: number;
+    lineCount?: number;
+    height?: number;
+    duration?: number;
+    selectionStart?: number;
+    selectionEnd?: number;
+    heightRpx?: number;
+}
+export interface LxTextareaEvent extends CustomEvent<LxTextareaEventDetail> {
+    detail: LxTextareaEventDetail;
+}
+export type LxTextareaAttributes = {
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    'placeholder-style'?: string;
+    'placeholder-class'?: string;
+    maxlength?: number | string;
+    disabled?: boolean | string;
+    'auto-focus'?: boolean | string;
+    focus?: boolean | string;
+    'auto-height'?: boolean | string;
+    'cursor-spacing'?: number | string;
+    'show-confirm-bar'?: boolean | string;
+    'adjust-position'?: boolean | string;
+    'hold-keyboard'?: boolean | string;
+    'disable-default-padding'?: boolean | string;
+    'confirm-type'?: 'send' | 'search' | 'next' | 'go' | 'done' | 'return';
+    'confirm-hold'?: boolean | string;
+    fixed?: boolean | string;
+    'adjust-keyboard-to'?: 'cursor' | 'bottom';
+    cursor?: number | string;
+    'selection-start'?: number | string;
+    'selection-end'?: number | string;
+    className?: string;
+    style?: any;
+    ref?: any;
+    onInput?: (e: LxTextareaEvent) => void;
+    onChange?: (e: LxTextareaEvent) => void;
+    onFocus?: (e: LxTextareaEvent) => void;
+    onBlur?: (e: LxTextareaEvent) => void;
+    onConfirm?: (e: LxTextareaEvent) => void;
+    onLinechange?: (e: LxTextareaEvent) => void;
+    onKeyboardheightchange?: (e: LxTextareaEvent) => void;
+    pageBindings?: Record<string, string>;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "lx-textarea": LxTextareaAttributes;
+        }
+    }
+}
+export declare class LxTextareaElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private componentId;
+    private mounted;
+    private unregister?;
+    private _handlers;
+    private rawHandlers;
+    private harmonyEmbed?;
+    private lastHarmonyProps?;
+    private pendingHarmonyProps?;
+    private pendingHarmonyRetryTimer;
+    private pendingHarmonyRetryCount;
+    private attrObserver?;
+    private shadow?;
+    private innerTextarea?;
+    private lastNativeAutoHeight?;
+    private autoHeightMinHeight?;
+    private lastKeyboardHeight;
+    private readonly updateState;
+    private resizeObserver?;
+    private pendingLayoutFrame;
+    private focusLayoutSyncTimer;
+    private readonly layoutEventListener;
+    private removeLayoutInvalidationListener?;
+    private _pageBindings;
+    set pageBindings(bindings: Record<string, string>);
+    get pageBindings(): Record<string, string>;
+    private upgradeProperty;
+    private registerNativeHandler;
+    private normalizeNativeDetail;
+    private unmountNativeComponentById;
+    private teardownHarmonyEmbed;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private getAttr;
+    private getBoolAttr;
+    private getNumAttr;
+    private getPropOrAttr;
+    private shouldTrackNativeLayout;
+    private startTracking;
+    private stopTracking;
+    private startSizeObserver;
+    private stopSizeObserver;
+    private schedulePositionSync;
+    private applyNativeAutoHeightIfNeeded;
+    private parseHeight;
+    private collectProps;
+    private getHostTextColor;
+    private shouldAdjustPosition;
+    private ensureVisibleForKeyboard;
+    private resyncHarmonyLayoutAfterFocus;
+    private startFocusLayoutSync;
+    private stopFocusLayoutSync;
+    private shouldRefreshForAttribute;
+    private startAttrObserver;
+    private stopAttrObserver;
+    private collectDataset;
+    private autoResizeTextarea;
+    private getLineCount;
+    private mountDesktopTextarea;
+    private mountTextarea;
+    syncNativeProps(): void;
+    private ensureHostLayout;
+    set oninput(cb: EventListener | null);
+    get oninput(): EventListener | null;
+    set onchange(cb: EventListener | null);
+    get onchange(): EventListener | null;
+    private ensureHarmonyEmbed;
+    private encodeHarmonyProps;
+    private pushHarmonyPropsUpdate;
+    private scheduleHarmonyPropsRetry;
+}
+export declare function registerTextareaComponent(): void;