@lingxia/page-runtime 0.5.0 → 0.5.1

package/dist/react/LxTextarea.d.ts

@@ -1,47 +0,0 @@
-import React from "react";
-export interface LxTextareaEventDetail {
-    value?: string;
-    cursor?: number;
-    lineCount?: number;
-    height?: number;
-    duration?: number;
-    selectionStart?: number;
-    selectionEnd?: number;
-    heightRpx?: number;
-}
-export interface LxTextareaProps {
-    id?: 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;
-    onInput?: (detail: LxTextareaEventDetail) => void;
-    onChange?: (detail: LxTextareaEventDetail) => void;
-    onFocus?: (detail: LxTextareaEventDetail) => void;
-    onBlur?: (detail: LxTextareaEventDetail) => void;
-    onConfirm?: (detail: LxTextareaEventDetail) => void;
-    onLineChange?: (detail: LxTextareaEventDetail) => void;
-    onKeyboardHeightChange?: (detail: LxTextareaEventDetail) => void;
-    pageBindings?: Record<string, string>;
-    className?: string;
-    style?: React.CSSProperties;
-}
-export declare const LxTextarea: React.ForwardRefExoticComponent<LxTextareaProps & React.RefAttributes<HTMLElement>>;

package/dist/react/LxTextarea.js

@@ -1,118 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import { registerTextareaComponent } from "@lingxia/elements";
-import { buildTextareaNativeAttrs } from "@lingxia/elements";
-import { assignForwardedRef, bindElementEvents, getCustomEventDetail, unbindElementEvents, } from "./text_component_shared.js";
-if (typeof window !== "undefined") {
-    registerTextareaComponent();
-}
-export const LxTextarea = forwardRef(({ value, defaultValue, placeholder, placeholderStyle, placeholderClass, maxlength, disabled, autoFocus, focus, autoHeight, cursorSpacing, showConfirmBar, adjustPosition, holdKeyboard, disableDefaultPadding, confirmType, confirmHold, fixed, adjustKeyboardTo, cursor, selectionStart, selectionEnd, onInput, onChange, onFocus, onBlur, onConfirm, onLineChange, onKeyboardHeightChange, pageBindings, className, style, id, ...rest }, ref) => {
-    const elementRef = useRef(null);
-    const boundElementRef = useRef(null);
-    const handlerRef = useRef({
-        onInput,
-        onChange,
-        onFocus,
-        onBlur,
-        onConfirm,
-        onLineChange,
-        onKeyboardHeightChange,
-    });
-    handlerRef.current = {
-        onInput,
-        onChange,
-        onFocus,
-        onBlur,
-        onConfirm,
-        onLineChange,
-        onKeyboardHeightChange,
-    };
-    const listenerMapRef = useRef({
-        input: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        change: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        focus: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        blur: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        confirm: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onConfirm) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        linechange: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onLineChange) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        keyboardheightchange: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onKeyboardHeightChange) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-    });
-    const elementRefCallback = useCallback((element) => {
-        boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
-        elementRef.current = element;
-        assignForwardedRef(ref, element);
-    }, [ref]);
-    useEffect(() => () => {
-        unbindElementEvents(boundElementRef.current, listenerMapRef.current);
-        boundElementRef.current = null;
-        elementRef.current = null;
-    }, []);
-    React.useEffect(() => {
-        const el = elementRef.current;
-        if (!el)
-            return;
-        const setAttr = (name, next) => {
-            if (next === null) {
-                el.removeAttribute(name);
-                return;
-            }
-            el.setAttribute(name, next);
-        };
-        setAttr("value", value !== undefined ? String(value) : null);
-        setAttr("focus", focus !== undefined ? (focus ? "true" : "false") : null);
-        setAttr("maxlength", maxlength !== undefined ? String(maxlength) : null);
-        setAttr("placeholder-style", placeholderStyle ? String(placeholderStyle) : null);
-        setAttr("auto-height", autoHeight ? "true" : null);
-    }, [value, focus, maxlength, placeholderStyle, autoHeight]);
-    // Set pageBindings property on custom element
-    useEffect(() => {
-        const el = elementRef.current;
-        if (el && pageBindings) {
-            el.pageBindings = pageBindings;
-        }
-    }, [pageBindings]);
-    const textareaProps = buildTextareaNativeAttrs({
-        id,
-        value,
-        defaultValue,
-        placeholder,
-        placeholderStyle,
-        placeholderClass,
-        maxlength,
-        disabled,
-        autoFocus,
-        focus,
-        autoHeight,
-        cursorSpacing,
-        showConfirmBar,
-        adjustPosition,
-        holdKeyboard,
-        disableDefaultPadding,
-        confirmType,
-        confirmHold,
-        fixed,
-        adjustKeyboardTo,
-        cursor,
-        selectionStart,
-        selectionEnd,
-    }, rest, boundElementRef.current !== null);
-    return React.createElement("lx-textarea", {
-        ref: elementRefCallback,
-        className,
-        style,
-        ...textareaProps,
-    });
-});
-LxTextarea.displayName = "LxTextarea";

package/dist/react/LxVideo.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { type LxVideoAttributes } from '@lingxia/elements';
-export interface LxVideoProps extends LxVideoAttributes, Omit<React.HTMLAttributes<HTMLElement>, keyof LxVideoAttributes | "children" | "dangerouslySetInnerHTML" | "ref" | "onPlaying"> {
-}
-export declare const LxVideo: React.ForwardRefExoticComponent<Omit<LxVideoProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/react/LxVideo.js

@@ -1,113 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import { registerVideoComponent } from '@lingxia/elements';
-import { buildVideoNativeAttrs, VIDEO_DOM_EVENT_MAP, } from '@lingxia/elements';
-import { assignForwardedRef, bindElementEvents, unbindElementEvents, } from './text_component_shared.js';
-if (typeof window !== "undefined") {
-    registerVideoComponent();
-}
-export const LxVideo = forwardRef(({ id, src, poster, objectFit, rotate, autoplay, loop, muted, controls, progressBar, live, volume, qualities, playbackRates, onPlayRequest, onPlay, onPlaying, onPause, onStop, onEnded, onTimeUpdate, onError, onLoadedMetadata, onFullscreenChange, onWaiting, onQualityChange, onRateChange, pageBindings, className, style, ...rest }, ref) => {
-    const elementRef = useRef(null);
-    const boundElementRef = useRef(null);
-    const reactId = useId();
-    const resolvedId = useMemo(() => {
-        if (id)
-            return id;
-        return `lx-video-${reactId.replace(/[:]/g, "")}`;
-    }, [id, reactId]);
-    const handlerRef = useRef({
-        onPlayRequest,
-        onPlay,
-        onPlaying,
-        onPause,
-        onStop,
-        onEnded,
-        onTimeUpdate,
-        onError,
-        onLoadedMetadata,
-        onFullscreenChange,
-        onWaiting,
-        onQualityChange,
-        onRateChange,
-    });
-    handlerRef.current = {
-        onPlayRequest,
-        onPlay,
-        onPlaying,
-        onPause,
-        onStop,
-        onEnded,
-        onTimeUpdate,
-        onError,
-        onLoadedMetadata,
-        onFullscreenChange,
-        onWaiting,
-        onQualityChange,
-        onRateChange,
-    };
-    const listenerMapRef = useRef(Object.fromEntries(Object.entries(VIDEO_DOM_EVENT_MAP).map(([propKey, eventName]) => [
-        eventName,
-        {
-            handleEvent: (event) => {
-                const handler = handlerRef.current[propKey];
-                if (typeof handler === "function") {
-                    handler(event);
-                }
-            },
-        },
-    ])));
-    const elementRefCallback = useCallback((element) => {
-        boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
-        elementRef.current = element;
-        assignForwardedRef(ref, element);
-    }, [ref]);
-    useEffect(() => () => {
-        unbindElementEvents(boundElementRef.current, listenerMapRef.current);
-        boundElementRef.current = null;
-        elementRef.current = null;
-    }, []);
-    useEffect(() => {
-        const el = elementRef.current;
-        if (!el)
-            return;
-        if (rotate === undefined || rotate === null) {
-            el.removeAttribute("rotate");
-        }
-        else {
-            el.setAttribute("rotate", String(rotate).trim());
-        }
-        if (objectFit === undefined || objectFit === null) {
-            el.removeAttribute("object-fit");
-        }
-        else {
-            el.setAttribute("object-fit", String(objectFit).trim().toLowerCase());
-        }
-    }, [rotate, objectFit]);
-    // Set pageBindings property on custom element
-    useEffect(() => {
-        const el = elementRef.current;
-        if (el && pageBindings) {
-            el.pageBindings = pageBindings;
-        }
-    }, [pageBindings]);
-    const domProps = buildVideoNativeAttrs({
-        id: resolvedId,
-        src,
-        poster,
-        autoplay,
-        loop,
-        muted,
-        controls,
-        progressBar,
-        live,
-        volume,
-        qualities,
-        playbackRates,
-    }, rest);
-    return React.createElement('lx-video', {
-        ref: elementRefCallback,
-        className,
-        style,
-        ...domProps
-    });
-});
-LxVideo.displayName = 'LxVideo';

package/dist/react/hook.d.ts

@@ -1,39 +0,0 @@
-import type { LxChannel, LxBridgeError, LxStream } from "@lingxia/bridge";
-import { type ActionMap, type ChannelIn, type ChannelOut, type MethodParams, type ParamsSource, type Snapshot, type StreamData, type StreamResult } from "../shared/runtime.js";
-export declare function useLxPage<TData = Snapshot, TActions extends ActionMap = ActionMap>(): {
-    data: TData;
-    actions: TActions;
-};
-export interface LxStreamOptions<TData, TReduced> {
-    params?: unknown | (() => unknown);
-    manual?: boolean;
-    reduce?: (accumulated: TReduced, chunk: TData) => TReduced;
-    initial?: TReduced;
-}
-export interface LxStreamState<TData, TResult = unknown> {
-    data: TData | undefined;
-    result: TResult | undefined;
-    error: LxBridgeError | undefined;
-    streaming: boolean;
-    cancel: () => void;
-    start: () => void;
-}
-export declare function useLxStream<TMethod extends (...args: any[]) => LxStream<any, any>, TReduced = StreamData<TMethod>>(method: TMethod, options?: LxStreamOptions<StreamData<TMethod>, TReduced> & {
-    params?: ParamsSource<MethodParams<TMethod>>;
-}): LxStreamState<TReduced extends StreamData<TMethod> ? StreamData<TMethod> : TReduced, StreamResult<TMethod>>;
-export interface LxChannelOptions {
-    params?: unknown | (() => unknown);
-    manual?: boolean;
-}
-export interface LxChannelState<TData, TOut = TData> {
-    last: TData | undefined;
-    error: LxBridgeError | undefined;
-    connecting: boolean;
-    connected: boolean;
-    send: (payload: TOut) => void;
-    close: (code?: string, reason?: string) => void;
-    reopen: () => void;
-}
-export declare function useLxChannel<TMethod extends (...args: any[]) => Promise<LxChannel<any, any>>>(method: TMethod, options?: LxChannelOptions & {
-    params?: ParamsSource<MethodParams<TMethod>>;
-}): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>>;

package/dist/react/hook.js

@@ -1,212 +0,0 @@
-import * as React from "react";
-import { ensurePageBridgeSubscription, getMethodKey, getPageActions, getPageSnapshot, invokeMethod, resolveParams, stableParamKey, subscribePageSnapshot, toBridgeError, } from "../shared/runtime.js";
-export function useLxPage() {
-    ensurePageBridgeSubscription();
-    const [, setVersion] = React.useState(0);
-    React.useEffect(() => {
-        ensurePageBridgeSubscription();
-        const listener = () => setVersion((v) => v + 1);
-        const unsubscribe = subscribePageSnapshot(listener);
-        setVersion((v) => v + 1);
-        return unsubscribe;
-    }, []);
-    const actions = React.useMemo(() => getPageActions(), []);
-    return { data: getPageSnapshot(), actions };
-}
-export function useLxStream(method, options) {
-    var _a;
-    const [state, setState] = React.useState({
-        data: ((options === null || options === void 0 ? void 0 : options.reduce) ? options.initial : undefined),
-        result: undefined,
-        error: undefined,
-        streaming: false,
-    });
-    const handleRef = React.useRef(null);
-    const accRef = React.useRef(options === null || options === void 0 ? void 0 : options.initial);
-    const optionsRef = React.useRef(options);
-    const methodRef = React.useRef(method);
-    const paramsRef = React.useRef(resolveParams(options === null || options === void 0 ? void 0 : options.params));
-    const runIdRef = React.useRef(0);
-    const resolvedParams = resolveParams(options === null || options === void 0 ? void 0 : options.params);
-    const paramsKey = (options === null || options === void 0 ? void 0 : options.manual) ? "" : stableParamKey(resolvedParams);
-    const methodDep = (_a = getMethodKey(method)) !== null && _a !== void 0 ? _a : method;
-    optionsRef.current = options;
-    methodRef.current = method;
-    paramsRef.current = resolvedParams;
-    const cancel = React.useCallback(() => {
-        var _a;
-        runIdRef.current += 1;
-        (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
-        handleRef.current = null;
-        setState((prev) => ({ ...prev, streaming: false }));
-    }, []);
-    const start = React.useCallback(() => {
-        var _a;
-        (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
-        const runId = runIdRef.current + 1;
-        runIdRef.current = runId;
-        const opts = optionsRef.current;
-        accRef.current = opts === null || opts === void 0 ? void 0 : opts.initial;
-        setState({
-            data: ((opts === null || opts === void 0 ? void 0 : opts.reduce) ? opts.initial : undefined),
-            result: undefined,
-            error: undefined,
-            streaming: true,
-        });
-        let handle;
-        try {
-            handle = invokeMethod(methodRef.current, paramsRef.current);
-        }
-        catch (err) {
-            if (runIdRef.current !== runId)
-                return;
-            handleRef.current = null;
-            setState((prev) => ({
-                ...prev,
-                error: toBridgeError(err),
-                streaming: false,
-            }));
-            return;
-        }
-        handleRef.current = handle;
-        handle.on("data", (chunk) => {
-            if (runIdRef.current !== runId)
-                return;
-            const currentOpts = optionsRef.current;
-            if (currentOpts === null || currentOpts === void 0 ? void 0 : currentOpts.reduce) {
-                accRef.current = currentOpts.reduce(accRef.current, chunk);
-                setState((prev) => ({
-                    ...prev,
-                    data: accRef.current,
-                }));
-            }
-            else {
-                setState((prev) => ({
-                    ...prev,
-                    data: chunk,
-                }));
-            }
-        });
-        handle.on("end", (result) => {
-            if (runIdRef.current !== runId)
-                return;
-            handleRef.current = null;
-            setState((prev) => ({
-                ...prev,
-                result,
-                streaming: false,
-            }));
-        });
-        handle.on("error", (err) => {
-            if (runIdRef.current !== runId)
-                return;
-            handleRef.current = null;
-            setState((prev) => ({
-                ...prev,
-                error: err,
-                streaming: false,
-            }));
-        });
-    }, []);
-    React.useEffect(() => {
-        if (!(options === null || options === void 0 ? void 0 : options.manual)) {
-            start();
-        }
-        return () => {
-            var _a;
-            runIdRef.current += 1;
-            (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.cancel();
-            handleRef.current = null;
-        };
-    }, [methodDep, options === null || options === void 0 ? void 0 : options.manual, paramsKey, start]);
-    return { ...state, cancel, start };
-}
-export function useLxChannel(method, options) {
-    var _a;
-    const [state, setState] = React.useState({
-        last: undefined,
-        error: undefined,
-        connecting: false,
-        connected: false,
-    });
-    const chRef = React.useRef(null);
-    const methodRef = React.useRef(method);
-    const paramsRef = React.useRef(resolveParams(options === null || options === void 0 ? void 0 : options.params));
-    const runIdRef = React.useRef(0);
-    const resolvedParams = resolveParams(options === null || options === void 0 ? void 0 : options.params);
-    const paramsKey = (options === null || options === void 0 ? void 0 : options.manual) ? "" : stableParamKey(resolvedParams);
-    const methodDep = (_a = getMethodKey(method)) !== null && _a !== void 0 ? _a : method;
-    methodRef.current = method;
-    paramsRef.current = resolvedParams;
-    const send = React.useCallback((payload) => {
-        var _a;
-        (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.send(payload);
-    }, []);
-    const close = React.useCallback((code, reason) => {
-        var _a;
-        runIdRef.current += 1;
-        (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.close(code, reason);
-        chRef.current = null;
-        setState((prev) => ({ ...prev, connecting: false, connected: false }));
-    }, []);
-    const reopen = React.useCallback(() => {
-        var _a;
-        (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.close();
-        chRef.current = null;
-        const runId = ++runIdRef.current;
-        setState({
-            last: undefined,
-            error: undefined,
-            connecting: true,
-            connected: false,
-        });
-        Promise.resolve(invokeMethod(methodRef.current, paramsRef.current))
-            .then((ch) => {
-            if (runIdRef.current !== runId) {
-                ch.close();
-                return;
-            }
-            chRef.current = ch;
-            setState((prev) => ({ ...prev, connecting: false, connected: true }));
-            ch.on("data", (payload) => {
-                if (runIdRef.current !== runId)
-                    return;
-                setState((prev) => ({ ...prev, last: payload }));
-            });
-            ch.on("close", () => {
-                if (runIdRef.current !== runId)
-                    return;
-                chRef.current = null;
-                setState((prev) => ({ ...prev, connecting: false, connected: false }));
-            });
-            ch.on("error", (err) => {
-                if (runIdRef.current !== runId)
-                    return;
-                chRef.current = null;
-                setState((prev) => ({ ...prev, error: err, connecting: false, connected: false }));
-            });
-        })
-            .catch((err) => {
-            if (runIdRef.current !== runId)
-                return;
-            setState({
-                last: undefined,
-                error: toBridgeError(err),
-                connecting: false,
-                connected: false,
-            });
-        });
-    }, []);
-    React.useEffect(() => {
-        if (!(options === null || options === void 0 ? void 0 : options.manual)) {
-            reopen();
-        }
-        return () => {
-            var _a;
-            runIdRef.current += 1;
-            (_a = chRef.current) === null || _a === void 0 ? void 0 : _a.close();
-            chRef.current = null;
-        };
-    }, [methodDep, options === null || options === void 0 ? void 0 : options.manual, paramsKey, reopen]);
-    return { ...state, send, close, reopen };
-}

package/dist/react/index.d.ts

@@ -1,6 +0,0 @@
-export { useLxPage, useLxStream, useLxChannel, type LxStreamOptions, type LxStreamState, type LxChannelOptions, type LxChannelState, } from "./hook.js";
-export { LxVideo, type LxVideoProps } from "./LxVideo.js";
-export { LxPicker, type LxPickerProps } from "./LxPicker.js";
-export { LxNavigator, type LxNavigatorProps } from "./LxNavigator.js";
-export { LxInput, type LxInputProps } from "./LxInput.js";
-export { LxTextarea, type LxTextareaProps } from "./LxTextarea.js";

package/dist/react/index.js

@@ -1,6 +0,0 @@
-export { useLxPage, useLxStream, useLxChannel, } from "./hook.js";
-export { LxVideo } from "./LxVideo.js";
-export { LxPicker } from "./LxPicker.js";
-export { LxNavigator } from "./LxNavigator.js";
-export { LxInput } from "./LxInput.js";
-export { LxTextarea } from "./LxTextarea.js";

package/dist/react/text_component_shared.d.ts

@@ -1,5 +0,0 @@
-import type { ForwardedRef } from "react";
-export declare function getCustomEventDetail<T>(event: Event): T;
-export declare function assignForwardedRef<T>(ref: ForwardedRef<T>, value: T | null): void;
-export declare function bindElementEvents(boundElement: HTMLElement | null, nextElement: HTMLElement | null, listeners: Record<string, EventListenerObject>): HTMLElement | null;
-export declare function unbindElementEvents(boundElement: HTMLElement | null, listeners: Record<string, EventListenerObject>): void;

package/dist/react/text_component_shared.js

@@ -1,33 +0,0 @@
-export function getCustomEventDetail(event) {
-    var _a;
-    return ((_a = event.detail) !== null && _a !== void 0 ? _a : {});
-}
-export function assignForwardedRef(ref, value) {
-    if (typeof ref === "function") {
-        ref(value);
-        return;
-    }
-    if (ref) {
-        ref.current = value;
-    }
-}
-export function bindElementEvents(boundElement, nextElement, listeners) {
-    if (boundElement && boundElement !== nextElement) {
-        unbindElementEvents(boundElement, listeners);
-        boundElement = null;
-    }
-    if (nextElement && boundElement !== nextElement) {
-        for (const [event, listener] of Object.entries(listeners)) {
-            nextElement.addEventListener(event, listener);
-        }
-        boundElement = nextElement;
-    }
-    return boundElement;
-}
-export function unbindElementEvents(boundElement, listeners) {
-    if (!boundElement)
-        return;
-    for (const [event, listener] of Object.entries(listeners)) {
-        boundElement.removeEventListener(event, listener);
-    }
-}

package/dist/vue/LxInput.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import { computed, h, onBeforeUnmount, ref, useAttrs, watch } from 'vue';
-import { registerInputComponent } from '@lingxia/elements';
-import { buildInputNativeAttrs } from '@lingxia/elements';
-import type { LxInputProps } from './types.js';
-import {
-  bindElementEvents,
-  getCustomEventDetail,
-  unbindElementEvents,
-} from './text_component_shared.js';
-
-const props = withDefaults(defineProps<LxInputProps>(), {
-  type: 'text',
-  disabled: false,
-  confirmType: 'done',
-});
-const attrs = useAttrs();
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-  input: [detail: Record<string, unknown>];
-  change: [detail: Record<string, unknown>];
-  focus: [detail: Record<string, unknown>];
-  blur: [detail: Record<string, unknown>];
-  confirm: [detail: Record<string, unknown>];
-  keyboardHeightChange: [detail: Record<string, unknown>];
-  nicknameReview: [detail: Record<string, unknown>];
-}>();
-
-if (typeof window !== 'undefined') {
-  registerInputComponent();
-}
-
-const elementRef = ref<HTMLElement | null>(null);
-let boundElement: HTMLElement | null = null;
-
-const inputEventListeners: Record<string, EventListenerObject> = {
-  input: {
-    handleEvent: (event: Event) => {
-      const detail = getCustomEventDetail<Record<string, unknown>>(event);
-      if (typeof detail.value === 'string') {
-        emit('update:modelValue', detail.value);
-      }
-      emit('input', detail);
-    },
-  },
-  change: {
-    handleEvent: (event: Event) => emit('change', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-  focus: {
-    handleEvent: (event: Event) => emit('focus', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-  blur: {
-    handleEvent: (event: Event) => emit('blur', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-  confirm: {
-    handleEvent: (event: Event) => emit('confirm', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-  keyboardheightchange: {
-    handleEvent: (event: Event) => emit('keyboardHeightChange', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-  nicknamereview: {
-    handleEvent: (event: Event) => emit('nicknameReview', getCustomEventDetail<Record<string, unknown>>(event)),
-  },
-};
-
-watch(elementRef, (element) => {
-  boundElement = bindElementEvents(boundElement, element, inputEventListeners);
-});
-
-onBeforeUnmount(() => {
-  unbindElementEvents(boundElement, inputEventListeners);
-});
-
-const inputProps = computed<Record<string, unknown>>(() => {
-  const result: Record<string, unknown> = buildInputNativeAttrs({
-    ...props,
-    id: props.id ?? (typeof attrs.id === 'string' ? attrs.id : undefined),
-  }, attrs as Record<string, unknown>, elementRef.value !== null);
-  result.class = props.class ?? attrs.class;
-  result.style = props.style ?? attrs.style;
-  return result;
-});
-
-defineExpose({ el: elementRef });
-
-const renderInput = () => h('lx-input', { ref: elementRef, ...inputProps.value });
-</script>
-
-<template>
-  <renderInput />
-</template>