@lingxia/vue 0.5.1

package/dist/LxInput.vue

@@ -0,0 +1,92 @@
+<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>

package/dist/LxNavigator.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, h, onMounted, onBeforeUnmount, useAttrs } from 'vue';
+import type { LxNavigatorEvent } from '@lingxia/elements';
+import { buildNavigatorNativeAttrs } from '@lingxia/elements';
+import type { LxNavigatorProps } from './types.js';
+import '@lingxia/elements';
+
+const props = withDefaults(defineProps<LxNavigatorProps>(), {
+  openType: 'navigate',
+  delta: 1,
+  hoverClass: 'navigator-hover',
+  hoverStopPropagation: false,
+  hoverStartTime: 20,
+  hoverStayTime: 70,
+});
+
+const slots = defineSlots();
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  success: [e: LxNavigatorEvent];
+  fail: [e: LxNavigatorEvent];
+  complete: [e: LxNavigatorEvent];
+}>();
+
+const elementRef = ref<HTMLElement | null>(null);
+
+const handleSuccess = (e: Event) => emit('success', e as LxNavigatorEvent);
+const handleFail = (e: Event) => emit('fail', e as LxNavigatorEvent);
+const handleComplete = (e: Event) => emit('complete', e as LxNavigatorEvent);
+const successListener: EventListenerObject = { handleEvent: handleSuccess };
+const failListener: EventListenerObject = { handleEvent: handleFail };
+const completeListener: EventListenerObject = { handleEvent: handleComplete };
+
+onMounted(() => {
+  const el = elementRef.value;
+  if (!el) return;
+  el.addEventListener('success', successListener);
+  el.addEventListener('fail', failListener);
+  el.addEventListener('complete', completeListener);
+});
+
+onBeforeUnmount(() => {
+  const el = elementRef.value;
+  if (!el) return;
+  el.removeEventListener('success', successListener);
+  el.removeEventListener('fail', failListener);
+  el.removeEventListener('complete', completeListener);
+});
+
+defineExpose({ el: elementRef });
+
+const render = () => h(
+  'lx-navigator',
+  {
+    ref: elementRef,
+    ...buildNavigatorNativeAttrs({
+      url: props.url,
+      openType: props.openType,
+      target: props.target,
+      delta: props.delta,
+      appId: props.appId,
+      path: props.path,
+      phoneNumber: props.phoneNumber,
+      hoverClass: props.hoverClass,
+      hoverStopPropagation: props.hoverStopPropagation,
+      hoverStartTime: props.hoverStartTime,
+      hoverStayTime: props.hoverStayTime,
+    }, attrs as Record<string, unknown>),
+    class: props.class ?? attrs.class,
+    style: props.style ?? attrs.style,
+  },
+  slots.default?.()
+);
+</script>
+
+<template>
+  <render />
+</template>

package/dist/LxPicker.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref, computed, h, onBeforeUnmount, useAttrs, useId, watch } from 'vue';
+import { registerPickerComponent } from '@lingxia/elements';
+import {
+  buildPickerNativeAttrs,
+  getPickerDisplayText,
+  getPickerValueFromIndex,
+} from '@lingxia/elements';
+import { bindElementEvents, getCustomEventDetail, unbindElementEvents } from './text_component_shared.js';
+import type { LxPickerProps } from './types.js';
+
+const props = withDefaults(defineProps<LxPickerProps>(), {
+  placeholder: 'Please select',
+  disabled: false,
+});
+const attrs = useAttrs();
+
+const slots = defineSlots();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[]];
+  confirm: [value: string | string[]];
+  cancel: [];
+  scroll: [value: string | string[]];
+}>();
+
+if (typeof window !== 'undefined') {
+  registerPickerComponent();
+}
+
+const visible = ref(false);
+const vueId = useId();
+const pickerId = computed(() => `lx-picker-${vueId.replace(/[:]/g, '')}`);
+const pickerRef = ref<HTMLElement | null>(null);
+let boundElement: HTMLElement | null = null;
+const pickerEventListeners: Record<string, EventListenerObject> = {
+  change: {
+    handleEvent: (event: Event) => handleChange(event),
+  },
+  scroll: {
+    handleEvent: (event: Event) => handleScroll(event),
+  },
+};
+
+const displayText = computed(() => getPickerDisplayText(props.modelValue, props.fields));
+
+function handleChange(e: Event) {
+  props.onChange?.(e);
+  const detail = getCustomEventDetail<{
+    confirmed?: boolean;
+    cancelled?: boolean;
+    value?: string | string[];
+    index?: number | number[];
+  }>(e);
+  if (detail.confirmed) {
+    if (props.mode === 'date' || props.mode === 'time') {
+      const nextValue = detail.value ?? '';
+      emit('update:modelValue', nextValue);
+      emit('confirm', nextValue);
+    } else if (detail.index !== undefined) {
+      const nextValue = getPickerValueFromIndex(props.columns, detail.index);
+      emit('update:modelValue', nextValue);
+      emit('confirm', nextValue);
+    }
+    visible.value = false;
+  } else if (detail.cancelled) {
+    emit('cancel');
+    visible.value = false;
+  }
+}
+
+function handleScroll(e: Event) {
+  props.onNativeScroll?.(e);
+  const detail = getCustomEventDetail<{
+    value?: string | string[];
+    index?: number | number[];
+  }>(e);
+  if (detail.value !== undefined) {
+    emit('scroll', detail.value);
+  } else if (detail.index !== undefined) {
+    emit('scroll', getPickerValueFromIndex(props.columns, detail.index));
+  }
+}
+
+function handleClick() {
+  if (!props.disabled) visible.value = true;
+}
+
+watch(pickerRef, (element) => {
+  boundElement = bindElementEvents(boundElement, element, pickerEventListeners);
+});
+
+onBeforeUnmount(() => {
+  unbindElementEvents(boundElement, pickerEventListeners);
+});
+
+const pickerProps = computed(() => {
+  return buildPickerNativeAttrs({
+    id: pickerId.value,
+    columns: props.columns,
+    mode: props.mode,
+    start: props.start,
+    end: props.end,
+    fields: props.fields,
+    modelValue: props.modelValue,
+    cancelText: props.cancelText,
+    cancelTextColor: props.cancelTextColor,
+    cancelButtonColor: props.cancelButtonColor,
+    confirmText: props.confirmText,
+    confirmTextColor: props.confirmTextColor,
+    confirmButtonColor: props.confirmButtonColor,
+  }, attrs as Record<string, unknown>);
+});
+
+const triggerStyle = computed(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '12px 14px',
+  backgroundColor: '#fff',
+  border: '1px solid #e5e7eb',
+  borderRadius: '8px',
+  cursor: props.disabled ? 'not-allowed' : 'pointer',
+  opacity: props.disabled ? 0.5 : 1,
+  width: '100%',
+  boxSizing: 'border-box',
+}));
+
+defineExpose({ el: pickerRef });
+
+const renderPicker = () => visible.value ? h('lx-picker', { ref: pickerRef, ...pickerProps.value }) : null;
+</script>
+
+<template>
+  <slot :open="handleClick" :disabled="props.disabled">
+    <div :class="props.class ?? attrs.class" :style="[triggerStyle, props.style ?? attrs.style]" @click="handleClick">
+      <span :style="{ color: modelValue ? '#111' : '#9ca3af' }">{{ displayText || placeholder }}</span>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2">
+        <path d="M6 9l6 6 6-6" />
+      </svg>
+    </div>
+  </slot>
+  <renderPicker />
+</template>

package/dist/LxTextarea.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, h, onBeforeUnmount, ref, useAttrs, watch } from 'vue';
+import { registerTextareaComponent } from '@lingxia/elements';
+import { buildTextareaNativeAttrs } from '@lingxia/elements';
+import type { LxTextareaProps } from './types.js';
+import {
+  bindElementEvents,
+  getCustomEventDetail,
+  unbindElementEvents,
+} from './text_component_shared.js';
+
+const props = withDefaults(defineProps<LxTextareaProps>(), {
+  disabled: false,
+});
+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>];
+  lineChange: [detail: Record<string, unknown>];
+  keyboardHeightChange: [detail: Record<string, unknown>];
+}>();
+
+if (typeof window !== 'undefined') {
+  registerTextareaComponent();
+}
+
+const elementRef = ref<HTMLElement | null>(null);
+let boundElement: HTMLElement | null = null;
+
+const textareaEventListeners: 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)),
+  },
+  linechange: {
+    handleEvent: (event: Event) => emit('lineChange', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+  keyboardheightchange: {
+    handleEvent: (event: Event) => emit('keyboardHeightChange', getCustomEventDetail<Record<string, unknown>>(event)),
+  },
+};
+
+watch(elementRef, (element) => {
+  boundElement = bindElementEvents(boundElement, element, textareaEventListeners);
+});
+
+onBeforeUnmount(() => {
+  unbindElementEvents(boundElement, textareaEventListeners);
+});
+
+const textareaProps = computed<Record<string, unknown>>(() => {
+  const result: Record<string, unknown> = buildTextareaNativeAttrs({
+    ...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 renderTextarea = () => h('lx-textarea', { ref: elementRef, ...textareaProps.value });
+</script>
+
+<template>
+  <renderTextarea />
+</template>

package/dist/LxVideo.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, computed, h, onBeforeUnmount, useAttrs, useId, watch } from 'vue';
+import { registerVideoComponent } from '@lingxia/elements';
+import {
+  buildVideoNativeAttrs,
+  VIDEO_DOM_EVENT_MAP,
+} from '@lingxia/elements';
+import { bindElementEvents, unbindElementEvents } from './text_component_shared.js';
+import type { LxVideoProps } from './types.js';
+
+const props = withDefaults(defineProps<LxVideoProps>(), {
+  autoplay: false,
+  loop: false,
+  muted: false,
+  controls: true,
+  progressBar: true,
+  live: false,
+});
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  playRequest: [e: Event];
+  play: [e: Event];
+  playing: [e: Event];
+  pause: [e: Event];
+  stop: [e: Event];
+  ended: [e: Event];
+  timeUpdate: [e: Event];
+  error: [e: Event];
+  loadedMetadata: [e: Event];
+  fullscreenChange: [e: Event];
+  waiting: [e: Event];
+  qualityChange: [e: Event];
+  rateChange: [e: Event];
+}>();
+
+if (typeof window !== 'undefined') {
+  registerVideoComponent();
+}
+
+const elementRef = ref<HTMLElement | null>(null);
+const vueId = useId();
+let boundElement: HTMLElement | null = null;
+
+const resolvedId = computed(() => props.id || `lx-video-${vueId.replace(/[:]/g, '')}`);
+
+const videoEventListeners: Record<string, EventListenerObject> = {
+  [VIDEO_DOM_EVENT_MAP.onPlayRequest]: { handleEvent: (event: Event) => emit('playRequest', event) },
+  [VIDEO_DOM_EVENT_MAP.onPlay]: { handleEvent: (event: Event) => emit('play', event) },
+  [VIDEO_DOM_EVENT_MAP.onPlaying]: { handleEvent: (event: Event) => emit('playing', event) },
+  [VIDEO_DOM_EVENT_MAP.onPause]: { handleEvent: (event: Event) => emit('pause', event) },
+  [VIDEO_DOM_EVENT_MAP.onStop]: { handleEvent: (event: Event) => emit('stop', event) },
+  [VIDEO_DOM_EVENT_MAP.onEnded]: { handleEvent: (event: Event) => emit('ended', event) },
+  [VIDEO_DOM_EVENT_MAP.onTimeUpdate]: { handleEvent: (event: Event) => emit('timeUpdate', event) },
+  [VIDEO_DOM_EVENT_MAP.onError]: { handleEvent: (event: Event) => emit('error', event) },
+  [VIDEO_DOM_EVENT_MAP.onLoadedMetadata]: { handleEvent: (event: Event) => emit('loadedMetadata', event) },
+  [VIDEO_DOM_EVENT_MAP.onFullscreenChange]: { handleEvent: (event: Event) => emit('fullscreenChange', event) },
+  [VIDEO_DOM_EVENT_MAP.onWaiting]: { handleEvent: (event: Event) => emit('waiting', event) },
+  [VIDEO_DOM_EVENT_MAP.onQualityChange]: { handleEvent: (event: Event) => emit('qualityChange', event) },
+  [VIDEO_DOM_EVENT_MAP.onRateChange]: { handleEvent: (event: Event) => emit('rateChange', event) },
+};
+
+watch(elementRef, (element) => {
+  boundElement = bindElementEvents(boundElement, element, videoEventListeners);
+});
+
+onBeforeUnmount(() => {
+  unbindElementEvents(boundElement, videoEventListeners);
+});
+
+watch(
+  [elementRef, () => props.rotate, () => props.objectFit],
+  () => {
+    const el = elementRef.value;
+    if (!el) return;
+    const rotate = props.rotate;
+    if (rotate === undefined || rotate === null || rotate === '') {
+      el.removeAttribute('rotate');
+    } else {
+      el.setAttribute('rotate', String(rotate).trim());
+    }
+    const objectFit = props.objectFit;
+    if (objectFit === undefined || objectFit === null || objectFit === '') {
+      el.removeAttribute('object-fit');
+    } else {
+      el.setAttribute('object-fit', String(objectFit).trim().toLowerCase());
+    }
+  },
+  { immediate: true }
+);
+
+const domProps = computed(() => {
+  const result = buildVideoNativeAttrs({
+    ...props,
+    id: resolvedId.value,
+  }, attrs as Record<string, unknown>);
+  return {
+    ...result,
+    class: props.class ?? attrs.class,
+    style: props.style ?? attrs.style,
+  };
+});
+
+defineExpose({ el: elementRef });
+
+const render = () => h('lx-video', { ref: elementRef, ...domProps.value });
+</script>
+
+<template>
+  <render />
+</template>

package/dist/hook.d.ts

@@ -0,0 +1,43 @@
+import { type Ref } from "vue";
+import type { LxChannel, LxBridgeError, LxStream } from "@lingxia/bridge";
+import { type ChannelIn, type ChannelOut, type MethodParams, type ParamsSource, type StreamData, type StreamResult } from "@lingxia/bridge/invocation";
+import { type ActionMap, type Snapshot } from "@lingxia/page-runtime";
+type MethodSource<T> = T | Ref<T>;
+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: Ref<TData | undefined>;
+    result: Ref<TResult | undefined>;
+    error: Ref<LxBridgeError | undefined>;
+    streaming: Ref<boolean>;
+    cancel: () => void;
+    start: () => void;
+}
+export declare function useLxStream<TMethod extends (...args: any[]) => LxStream<any, any>, TReduced = StreamData<TMethod>>(method: MethodSource<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: Ref<TData | undefined>;
+    error: Ref<LxBridgeError | undefined>;
+    connecting: Ref<boolean>;
+    connected: Ref<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: MethodSource<TMethod>, options?: LxChannelOptions & {
+    params?: ParamsSource<MethodParams<TMethod>>;
+}): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>>;
+export {};

package/dist/hook.js

@@ -0,0 +1,193 @@
+import { onUnmounted, reactive, ref, unref, watch, } from "vue";
+import { getMethodKey, invokeMethod, resolveParams, stableParamKey, toBridgeError, } from "@lingxia/bridge/invocation";
+import { ensurePageBridgeSubscription, getPageActions, subscribePageData, } from "@lingxia/page-runtime";
+function resolveMethod(source) {
+    return unref(source);
+}
+const reactiveSnapshot = reactive({});
+let snapshotSubscribed = false;
+function ensureReactiveSnapshot() {
+    if (snapshotSubscribed)
+        return;
+    snapshotSubscribed = true;
+    subscribePageData((next) => {
+        const normalized = next && typeof next === "object" ? next : {};
+        for (const key of Object.keys(reactiveSnapshot)) {
+            if (!Object.prototype.hasOwnProperty.call(normalized, key)) {
+                delete reactiveSnapshot[key];
+            }
+        }
+        Object.assign(reactiveSnapshot, normalized);
+    });
+}
+export function useLxPage() {
+    ensurePageBridgeSubscription();
+    ensureReactiveSnapshot();
+    return { data: reactiveSnapshot, actions: getPageActions() };
+}
+export function useLxStream(method, options) {
+    const data = ref((options?.reduce ? options.initial : undefined));
+    const result = ref(undefined);
+    const error = ref(undefined);
+    const streaming = ref(false);
+    let handle = null;
+    let acc = options?.initial;
+    let runId = 0;
+    function cancel() {
+        runId += 1;
+        handle?.cancel();
+        handle = null;
+        streaming.value = false;
+    }
+    function start() {
+        handle?.cancel();
+        const currentRunId = runId + 1;
+        runId = currentRunId;
+        acc = options?.initial;
+        data.value = (options?.reduce ? options.initial : undefined);
+        result.value = undefined;
+        error.value = undefined;
+        streaming.value = true;
+        let nextHandle;
+        try {
+            const params = resolveParams(options?.params);
+            nextHandle = invokeMethod(resolveMethod(method), params);
+        }
+        catch (err) {
+            if (runId !== currentRunId)
+                return;
+            handle = null;
+            error.value = toBridgeError(err);
+            streaming.value = false;
+            return;
+        }
+        handle = nextHandle;
+        nextHandle.on("data", (chunk) => {
+            if (runId !== currentRunId)
+                return;
+            if (options?.reduce) {
+                acc = options.reduce(acc, chunk);
+                data.value = acc;
+            }
+            else {
+                data.value = chunk;
+            }
+        });
+        nextHandle.on("end", (res) => {
+            if (runId !== currentRunId)
+                return;
+            handle = null;
+            result.value = res;
+            streaming.value = false;
+        });
+        nextHandle.on("error", (err) => {
+            if (runId !== currentRunId)
+                return;
+            handle = null;
+            error.value = err;
+            streaming.value = false;
+        });
+    }
+    watch(() => {
+        if (options?.manual)
+            return null;
+        const resolvedMethod = resolveMethod(method);
+        return [
+            getMethodKey(resolvedMethod) ?? resolvedMethod,
+            stableParamKey(resolveParams(options?.params)),
+        ];
+    }, () => {
+        if (!options?.manual) {
+            start();
+        }
+    }, { immediate: !options?.manual });
+    onUnmounted(() => {
+        runId += 1;
+        handle?.cancel();
+        handle = null;
+    });
+    return { data, result, error, streaming, cancel, start };
+}
+export function useLxChannel(method, options) {
+    const last = ref(undefined);
+    const error = ref(undefined);
+    const connecting = ref(false);
+    const connected = ref(false);
+    let ch = null;
+    let runId = 0;
+    function send(payload) {
+        ch?.send(payload);
+    }
+    function close(code, reason) {
+        runId += 1;
+        ch?.close(code, reason);
+        ch = null;
+        connecting.value = false;
+        connected.value = false;
+    }
+    function reopen() {
+        ch?.close();
+        ch = null;
+        const thisRunId = ++runId;
+        last.value = undefined;
+        error.value = undefined;
+        connecting.value = true;
+        connected.value = false;
+        Promise.resolve(invokeMethod(resolveMethod(method), resolveParams(options?.params)))
+            .then((nextChannel) => {
+            if (runId !== thisRunId) {
+                nextChannel.close();
+                return;
+            }
+            ch = nextChannel;
+            connecting.value = false;
+            connected.value = true;
+            nextChannel.on("data", (payload) => {
+                if (runId !== thisRunId)
+                    return;
+                last.value = payload;
+            });
+            nextChannel.on("close", () => {
+                if (runId !== thisRunId)
+                    return;
+                ch = null;
+                connecting.value = false;
+                connected.value = false;
+            });
+            nextChannel.on("error", (err) => {
+                if (runId !== thisRunId)
+                    return;
+                ch = null;
+                error.value = err;
+                connecting.value = false;
+                connected.value = false;
+            });
+        })
+            .catch((err) => {
+            if (runId !== thisRunId)
+                return;
+            error.value = toBridgeError(err);
+            connecting.value = false;
+            connected.value = false;
+        });
+    }
+    watch(() => {
+        if (options?.manual)
+            return null;
+        const resolvedMethod = resolveMethod(method);
+        return [
+            getMethodKey(resolvedMethod) ?? resolvedMethod,
+            stableParamKey(resolveParams(options?.params)),
+        ];
+    }, () => {
+        if (!options?.manual) {
+            reopen();
+        }
+    }, { immediate: !options?.manual });
+    onUnmounted(() => {
+        runId += 1;
+        ch?.close();
+        ch = null;
+    });
+    return { last, error, connecting, connected, send, close, reopen };
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/dist/text_component_shared.d.ts

@@ -0,0 +1,3 @@
+export declare function getCustomEventDetail<T>(event: Event): T;
+export declare function bindElementEvents(currentBoundElement: 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/text_component_shared.js

@@ -0,0 +1,25 @@
+export function getCustomEventDetail(event) {
+    return (event.detail ?? {});
+}
+export function bindElementEvents(currentBoundElement, nextElement, listeners) {
+    if (currentBoundElement && currentBoundElement !== nextElement) {
+        for (const [event, listener] of Object.entries(listeners)) {
+            currentBoundElement.removeEventListener(event, listener);
+        }
+        currentBoundElement = null;
+    }
+    if (nextElement && currentBoundElement !== nextElement) {
+        for (const [event, listener] of Object.entries(listeners)) {
+            nextElement.addEventListener(event, listener);
+        }
+        currentBoundElement = nextElement;
+    }
+    return currentBoundElement;
+}
+export function unbindElementEvents(boundElement, listeners) {
+    if (!boundElement)
+        return;
+    for (const [event, listener] of Object.entries(listeners)) {
+        boundElement.removeEventListener(event, listener);
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,101 @@
+import type { CSSProperties } from 'vue';
+import type { LxVideoAttributes } from '@lingxia/elements';
+import type { LxNavigatorEvent, NavigatorOpenType, NavigatorTarget } from '@lingxia/elements';
+export interface LxVideoProps extends Omit<LxVideoAttributes, 'ref' | 'className' | 'style'> {
+    class?: string;
+    style?: CSSProperties;
+}
+export interface LxPickerProps {
+    columns?: string[][] | [string[], Record<string, string[]>];
+    mode?: 'date' | 'time';
+    start?: string;
+    end?: string;
+    fields?: 'year' | 'month' | 'day' | 'range';
+    modelValue?: string | string[];
+    placeholder?: string;
+    class?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    cancelText?: string;
+    cancelTextColor?: string;
+    cancelButtonColor?: string;
+    confirmText?: string;
+    confirmTextColor?: string;
+    confirmButtonColor?: string;
+    onChange?: (event: Event) => void;
+    onNativeScroll?: (event: Event) => void;
+    pageBindings?: Record<string, string>;
+}
+export interface LxNavigatorProps {
+    url?: string;
+    openType?: NavigatorOpenType;
+    target?: NavigatorTarget;
+    delta?: number;
+    appId?: string;
+    path?: string;
+    phoneNumber?: string;
+    hoverClass?: string;
+    hoverStopPropagation?: boolean;
+    hoverStartTime?: number;
+    hoverStayTime?: number;
+    class?: string;
+    style?: CSSProperties;
+}
+export interface LxInputProps {
+    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;
+    class?: string;
+    style?: CSSProperties;
+    pageBindings?: Record<string, string>;
+}
+export interface LxTextareaProps {
+    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;
+    class?: string;
+    style?: CSSProperties;
+    pageBindings?: Record<string, string>;
+}
+export type { LxNavigatorEvent };

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@lingxia/vue",
+  "version": "0.5.1",
+  "private": false,
+  "description": "LingXia Vue runtime and components for lxapp pages",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "npm run clean && npm --prefix ../lingxia-elements run build && npm --prefix ../lingxia-page-runtime run build && tsc -p tsconfig.json && mkdir -p dist && cp src/*.vue dist/ && cp src/shims-vue.d.ts dist/shims-vue.d.ts",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@lingxia/bridge": "0.5.1",
+    "@lingxia/elements": "0.5.1",
+    "@lingxia/page-runtime": "0.5.1"
+  },
+  "peerDependencies": {
+    "vue": ">=3.5.0"
+  },
+  "devDependencies": {
+    "@lingxia/bridge": "file:../lingxia-bridge",
+    "@lingxia/elements": "file:../lingxia-elements",
+    "@lingxia/page-runtime": "file:../lingxia-page-runtime",
+    "typescript": "^5.7.2",
+    "vue": "^3.5.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LingXia-Dev/LingXia.git",
+    "directory": "packages/lingxia-vue"
+  },
+  "license": "MIT"
+}