@lingxia/vue 0.14.0 → 0.16.0

package/dist/LxNativeButton.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { LxNativeButtonProps } from './types.js';
+import { h, onBeforeUnmount, useAttrs, useSlots, watch } from 'vue';
+import {
+  registerNativeButtonComponent,
+  unwrapNativeEventPayload,
+  type PressPayload,
+} from '@lingxia/elements';
+import { bindElementEvents, unbindElementEvents, useNativeHostElement } from './text_component_shared.js';
+
+const props = defineProps<LxNativeButtonProps>();
+const slots = useSlots();
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  press: [payload: PressPayload];
+}>();
+
+if (typeof window !== 'undefined') {
+  registerNativeButtonComponent();
+}
+
+const elementRef = useNativeHostElement(props);
+let bound: HTMLElement | null = null;
+const listeners: Record<string, EventListenerObject> = {
+  press: { handleEvent: (event) => emit('press', unwrapNativeEventPayload(event)) },
+};
+
+watch(elementRef, (element) => {
+  bound = bindElementEvents(bound, element, listeners);
+});
+onBeforeUnmount(() => unbindElementEvents(bound, listeners));
+
+const render = () => h('lx-native-button', {
+  ...attrs,
+  ref: elementRef,
+  id: props.id,
+  class: props.class,
+  style: props.style,
+  'aria-label': props['aria-label'],
+  'aria-description': props['aria-description'],
+  'aria-hidden': props['aria-hidden'],
+  'automation-id': props.automationId,
+  label: props.label,
+  icon: props.icon,
+  'icon-position': props.iconPosition,
+  intent: props.intent,
+  emphasis: props.emphasis,
+  size: props.size,
+  'hit-slop': props.hitSlop,
+  disabled: props.disabled,
+  pressed: props.pressed,
+  expanded: props.expanded,
+  loading: props.loading,
+  tabindex: props.tabIndex,
+  'pointer-events': props.pointerEvents,
+  hidden: props.hidden,
+}, slots.default?.());
+</script>
+
+<template>
+  <render />
+</template>

package/dist/LxNativeCover.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { LxNativeCoverProps } from './types.js';
+import { h, useAttrs, useSlots } from 'vue';
+import { registerNativeCoverComponent } from '@lingxia/elements';
+import { useNativeHostElement } from './text_component_shared.js';
+
+const props = defineProps<LxNativeCoverProps>();
+const slots = useSlots();
+const attrs = useAttrs();
+
+if (typeof window !== 'undefined') {
+  registerNativeCoverComponent();
+}
+
+const elementRef = useNativeHostElement(props);
+
+const render = () => h('lx-native-cover', {
+  ...attrs,
+  ref: elementRef,
+  id: props.id,
+  class: props.class,
+  style: props.style,
+  'aria-label': props['aria-label'],
+  'aria-description': props['aria-description'],
+  'aria-hidden': props['aria-hidden'],
+  'automation-id': props.automationId,
+  'pointer-events': props.pointerEvents,
+  hidden: props.hidden,
+  scrim: props.scrim,
+  'scrim-opacity': props.scrimOpacity,
+  role: props.role,
+}, slots.default?.());
+</script>
+
+<template>
+  <render />
+</template>

package/dist/LxNativeRoot.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { LxNativeRootProps } from './types.js';
+import { h, onBeforeUnmount, useAttrs, useSlots, watch } from 'vue';
+import { registerNativeRootComponent, unwrapNativeEventPayload, type NativeError } from '@lingxia/elements';
+import { bindElementEvents, unbindElementEvents, useNativeHostElement } from './text_component_shared.js';
+
+const props = defineProps<LxNativeRootProps>();
+const slots = useSlots();
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  ready: [payload: Record<string, never>];
+  error: [payload: NativeError];
+}>();
+
+if (typeof window !== 'undefined') {
+  registerNativeRootComponent();
+}
+
+const elementRef = useNativeHostElement(props);
+let bound: HTMLElement | null = null;
+const listeners: Record<string, EventListenerObject> = {
+  ready: { handleEvent: (event) => emit('ready', unwrapNativeEventPayload(event)) },
+  error: { handleEvent: (event) => emit('error', unwrapNativeEventPayload(event)) },
+};
+
+watch(elementRef, (element) => {
+  bound = bindElementEvents(bound, element, listeners);
+});
+onBeforeUnmount(() => unbindElementEvents(bound, listeners));
+
+const retry = async () => {
+  const el = elementRef.value as { retry?: () => Promise<void> } | null;
+  await el?.retry?.();
+};
+
+defineExpose({ retry, el: elementRef });
+
+const render = () => h('lx-native-root', {
+  ...attrs,
+  ref: elementRef,
+  id: props.id,
+  class: props.class,
+  style: props.style,
+  'aria-label': props['aria-label'],
+  'aria-description': props['aria-description'],
+  'aria-hidden': props['aria-hidden'],
+  'pointer-events': props.pointerEvents,
+  hidden: props.hidden,
+  'automation-id': props.automationId,
+}, [
+  slots.default?.(),
+  slots.fallback ? h('div', {
+    'data-lx-native-fallback': '',
+    hidden: true,
+    'aria-hidden': 'true',
+  }, slots.fallback()) : null,
+]);
+</script>
+
+<template>
+  <render />
+</template>

package/dist/LxNativeText.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { LxNativeTextProps } from './types.js';
+import { h, useAttrs, useSlots } from 'vue';
+import { registerNativeTextComponent } from '@lingxia/elements';
+import { useNativeHostElement } from './text_component_shared.js';
+
+const props = defineProps<LxNativeTextProps>();
+const slots = useSlots();
+const attrs = useAttrs();
+
+if (typeof window !== 'undefined') {
+  registerNativeTextComponent();
+}
+
+const elementRef = useNativeHostElement(props);
+
+const render = () => h('lx-native-text', {
+  ...attrs,
+  ref: elementRef,
+  id: props.id,
+  class: props.class,
+  style: props.style,
+  'aria-label': props['aria-label'],
+  'aria-description': props['aria-description'],
+  'aria-hidden': props['aria-hidden'],
+  'automation-id': props.automationId,
+  'pointer-events': props.pointerEvents,
+  hidden: props.hidden,
+  'max-lines': props.maxLines,
+  dir: props.dir,
+  'font-size': props.fontSize,
+  'font-weight': props.fontWeight,
+  'line-height': props.lineHeight,
+  'text-align': props.textAlign,
+  color: props.color,
+}, slots.default?.());
+</script>
+
+<template>
+  <render />
+</template>

package/dist/LxNativeView.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { LxNativeViewProps } from './types.js';
+import { h, useAttrs, useSlots } from 'vue';
+import { registerNativeViewComponent } from '@lingxia/elements';
+import { useNativeHostElement } from './text_component_shared.js';
+
+const props = defineProps<LxNativeViewProps>();
+const slots = useSlots();
+const attrs = useAttrs();
+
+if (typeof window !== 'undefined') {
+  registerNativeViewComponent();
+}
+
+const elementRef = useNativeHostElement(props);
+
+const render = () => h('lx-native-view', {
+  ...attrs,
+  ref: elementRef,
+  id: props.id,
+  class: props.class,
+  style: props.style,
+  'aria-label': props['aria-label'],
+  'aria-description': props['aria-description'],
+  'aria-hidden': props['aria-hidden'],
+  'automation-id': props.automationId,
+  'pointer-events': props.pointerEvents,
+  hidden: props.hidden,
+  role: props.role,
+}, slots.default?.());
+</script>
+
+<template>
+  <render />
+</template>

package/dist/LxNavigator.vue

@@ -62,7 +62,7 @@ const render = () => h(
       delta: props.delta,
       query: props.query,
       appId: props.appId,
-      envVersion: props.envVersion,
+      channel: props.channel,
       targetVersion: props.targetVersion,
       phoneNumber: props.phoneNumber,
       hoverClass: props.hoverClass,

package/dist/LxVideo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, h, onBeforeUnmount, useAttrs, useId, watch } from 'vue';
-import { registerVideoComponent } from '@lingxia/elements';
+import { registerVideoComponent, unwrapNativeEventPayload, type LxVideoEventPayloads } from '@lingxia/elements';
 import {
   buildVideoNativeAttrs,
   VIDEO_DOM_EVENT_MAP,
@@ -19,19 +19,20 @@ const props = withDefaults(defineProps<LxVideoProps>(), {
 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];
+  playRequest: [payload: LxVideoEventPayloads["onPlayRequest"]];
+  play: [payload: LxVideoEventPayloads["onPlay"]];
+  playing: [payload: LxVideoEventPayloads["onPlaying"]];
+  pause: [payload: LxVideoEventPayloads["onPause"]];
+  stop: [payload: LxVideoEventPayloads["onStop"]];
+  ended: [payload: LxVideoEventPayloads["onEnded"]];
+  timeUpdate: [payload: LxVideoEventPayloads["onTimeUpdate"]];
+  error: [payload: LxVideoEventPayloads["onError"]];
+  loadedMetadata: [payload: LxVideoEventPayloads["onLoadedMetadata"]];
+  fullscreenChange: [payload: LxVideoEventPayloads["onFullscreenChange"]];
+  waiting: [payload: LxVideoEventPayloads["onWaiting"]];
+  qualityChange: [payload: LxVideoEventPayloads["onQualityChange"]];
+  rateChange: [payload: LxVideoEventPayloads["onRateChange"]];
+  volumeChange: [payload: LxVideoEventPayloads["onVolumeChange"]];
 }>();
 
 if (typeof window !== 'undefined') {
@@ -45,19 +46,20 @@ 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) },
+  [VIDEO_DOM_EVENT_MAP.onPlayRequest]: { handleEvent: (event: Event) => emit('playRequest', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onPlay]: { handleEvent: (event: Event) => emit('play', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onPlaying]: { handleEvent: (event: Event) => emit('playing', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onPause]: { handleEvent: (event: Event) => emit('pause', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onStop]: { handleEvent: (event: Event) => emit('stop', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onEnded]: { handleEvent: (event: Event) => emit('ended', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onTimeUpdate]: { handleEvent: (event: Event) => emit('timeUpdate', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onError]: { handleEvent: (event: Event) => emit('error', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onLoadedMetadata]: { handleEvent: (event: Event) => emit('loadedMetadata', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onFullscreenChange]: { handleEvent: (event: Event) => emit('fullscreenChange', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onWaiting]: { handleEvent: (event: Event) => emit('waiting', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onQualityChange]: { handleEvent: (event: Event) => emit('qualityChange', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onVolumeChange]: { handleEvent: (event: Event) => emit('volumeChange', unwrapNativeEventPayload(event)) },
+  [VIDEO_DOM_EVENT_MAP.onRateChange]: { handleEvent: (event: Event) => emit('rateChange', unwrapNativeEventPayload(event)) },
 };
 
 watch(elementRef, (element) => {

package/dist/hook.d.ts

@@ -50,7 +50,13 @@ export interface LxPlatform {
     isAndroid: boolean;
     isHarmony: boolean;
     isWindows: boolean;
+    /**
+     * Form factor, not OS. This, not `isMacOS`/`isWindows`, is what a layout
+     * decision is usually about: the Runner reports macOS while simulating a
+     * phone, and a narrowed desktop window is still a desktop.
+     */
     isDesktop: boolean;
+    isMobile: boolean;
     isRunner: boolean;
 }
 export declare function usePlatform(): LxPlatform;

package/dist/hook.js

@@ -207,6 +207,7 @@ export function useLxChannel(method, options) {
 }
 function readPlatform() {
     const p = window.LingXiaBridge?.platform;
+    const desktop = p?.isDesktop() ?? false;
     return {
         os: p?.getOS() ?? "unknown",
         isIOS: p?.isIOS() ?? false,
@@ -215,12 +216,16 @@ function readPlatform() {
         isAndroid: p?.isAndroid() ?? false,
         isHarmony: p?.isHarmony() ?? false,
         isWindows: p?.isWindows() ?? false,
-        isDesktop: p?.isDesktop() ?? false,
+        isDesktop: desktop,
+        // Derived, not read, so that a host too old to answer `isMobile` reports
+        // one of the two rather than neither.
+        isMobile: p?.isMobile?.() ?? !desktop,
         isRunner: p?.isRunner() ?? false,
     };
 }
 // Typed platform detection for pages, so they never reach for the window global
-// or hand-roll an OS check. Fixed for the session, so it resolves once.
+// or hand-roll an OS check. Fixed for the session, so it resolves once — the
+// Runner re-serves the page when its simulated device changes form factor.
 export function usePlatform() {
     return readPlatform();
 }

package/dist/index.d.ts

@@ -1,7 +1,14 @@
 export { useLxPage, useLxPageChrome, useLxStream, useLxChannel, usePlatform, useDisplayLanguage, type LxStreamOptions, type LxStreamState, type LxChannelOptions, type LxChannelState, type LxPlatform, } from "./hook.js";
 export { default as LxVideo } from "./LxVideo.vue";
+export { default as LxNativeRoot } from "./LxNativeRoot.vue";
+export { default as LxNativeView } from "./LxNativeView.vue";
+export { default as LxNativeCover } from "./LxNativeCover.vue";
+export { default as LxNativeText } from "./LxNativeText.vue";
+export { default as LxNativeButton } from "./LxNativeButton.vue";
 export { default as LxMediaSwiper } from "./LxMediaSwiper.vue";
 export { default as LxPicker } from "./LxPicker.vue";
 export { default as LxNavigator } from "./LxNavigator.vue";
-export type { LxVideoProps, LxMediaSwiperProps, LxPickerProps, LxNavigatorProps, LxNavigatorEvent, } from "./types.js";
+export type { LxVideoProps, LxNativeRootProps, LxNativeViewProps, LxNativeCoverProps, LxNativeTextProps, LxNativeButtonProps, LxMediaSwiperProps, LxPickerProps, LxNavigatorProps, LxNavigatorEvent, } from "./types.js";
 export type { LxPageChrome, PageChromeLayoutListener, PageChromeLayoutSnapshot, PageChromeRect, } from "@lingxia/page-runtime";
+export type { LxVideoEventPayloads, LxVideoEventHandlers, NativeActionIcon } from "@lingxia/elements";
+export type { NativeStyle } from "./types.js";

package/dist/index.js

@@ -1,5 +1,10 @@
 export { useLxPage, useLxPageChrome, useLxStream, useLxChannel, usePlatform, useDisplayLanguage, } from "./hook.js";
 export { default as LxVideo } from "./LxVideo.vue";
+export { default as LxNativeRoot } from "./LxNativeRoot.vue";
+export { default as LxNativeView } from "./LxNativeView.vue";
+export { default as LxNativeCover } from "./LxNativeCover.vue";
+export { default as LxNativeText } from "./LxNativeText.vue";
+export { default as LxNativeButton } from "./LxNativeButton.vue";
 export { default as LxMediaSwiper } from "./LxMediaSwiper.vue";
 export { default as LxPicker } from "./LxPicker.vue";
 export { default as LxNavigator } from "./LxNavigator.vue";

package/dist/text_component_shared.d.ts

@@ -1,3 +1,23 @@
+import { type Ref } from "vue";
 export declare function getCustomEventDetail<T>(event: Event): T;
+type NativeAriaProps = {
+    "aria-label"?: string;
+    ariaLabel?: string;
+    "aria-description"?: string;
+    "aria-hidden"?: boolean;
+    automationId?: string;
+};
+export declare function useNativeHostElement(props: NativeAriaProps): Ref<HTMLElement | null>;
 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;
+export declare function setOptionalDomAttribute(el: HTMLElement, name: string, value: string | number | boolean | undefined | null): void;
+/** Vue's custom-element patch may assign `el['aria-label']` as an expando.
+ *  UI Automation and the island compiler only see the reflected attribute. */
+export declare function applyNativeAriaAttributes(el: HTMLElement | null, props: {
+    "aria-label"?: string;
+    ariaLabel?: string;
+    "aria-description"?: string;
+    "aria-hidden"?: boolean;
+    automationId?: string;
+}): void;
+export {};

package/dist/text_component_shared.js

@@ -1,6 +1,20 @@
+import { ref, watch } from "vue";
 export function getCustomEventDetail(event) {
     return (event.detail ?? {});
 }
+export function useNativeHostElement(props) {
+    const elementRef = ref(null);
+    const apply = () => applyNativeAriaAttributes(elementRef.value, props);
+    watch(elementRef, apply);
+    watch(() => [
+        props["aria-label"],
+        props.ariaLabel,
+        props["aria-description"],
+        props["aria-hidden"],
+        props.automationId,
+    ], apply);
+    return elementRef;
+}
 export function bindElementEvents(currentBoundElement, nextElement, listeners) {
     if (currentBoundElement && currentBoundElement !== nextElement) {
         for (const [event, listener] of Object.entries(listeners)) {
@@ -23,3 +37,29 @@ export function unbindElementEvents(boundElement, listeners) {
         boundElement.removeEventListener(event, listener);
     }
 }
+export function setOptionalDomAttribute(el, name, value) {
+    if (value === undefined || value === null || value === false) {
+        el.removeAttribute(name);
+        return;
+    }
+    if (typeof value === "boolean") {
+        el.setAttribute(name, value ? "true" : "false");
+        return;
+    }
+    el.setAttribute(name, String(value));
+}
+/** Vue's custom-element patch may assign `el['aria-label']` as an expando.
+ *  UI Automation and the island compiler only see the reflected attribute. */
+export function applyNativeAriaAttributes(el, props) {
+    if (!el)
+        return;
+    setOptionalDomAttribute(el, "aria-label", props["aria-label"] ?? props.ariaLabel);
+    setOptionalDomAttribute(el, "aria-description", props["aria-description"]);
+    if (props["aria-hidden"] === undefined) {
+        el.removeAttribute("aria-hidden");
+    }
+    else {
+        setOptionalDomAttribute(el, "aria-hidden", props["aria-hidden"]);
+    }
+    setOptionalDomAttribute(el, "automation-id", props.automationId);
+}

package/dist/types.d.ts

@@ -1,5 +1,8 @@
 import type { CSSProperties } from 'vue';
-import type { LxNavigatorEvent, NavigatorEnvVersion, NavigatorOpenType, NavigatorQuery, NavigatorTarget } from '@lingxia/elements';
+import type { LxNavigatorEvent, LxVideoEventPayloads, NativeActionIcon, NativeStyleProperty, NavigatorChannel, NavigatorOpenType, NavigatorQuery, NavigatorTarget } from '@lingxia/elements';
+export type NativeStyle = Omit<Pick<CSSProperties, NativeStyleProperty>, "borderStyle"> & {
+    borderStyle?: "solid" | "none";
+};
 export interface LxVideoProps {
     id?: string;
     src?: string;
@@ -19,22 +22,66 @@ export interface LxVideoProps {
     }>;
     playbackRates?: number[];
     class?: string;
-    style?: CSSProperties;
-    onPlayRequest?: (event: Event) => void;
-    onPlay?: (event: Event) => void;
-    onPlaying?: (event: Event) => void;
-    onPause?: (event: Event) => void;
-    onStop?: (event: Event) => void;
-    onEnded?: (event: Event) => void;
-    onTimeUpdate?: (event: Event) => void;
-    onError?: (event: Event) => void;
-    onLoadedMetadata?: (event: Event) => void;
-    onFullscreenChange?: (event: Event) => void;
-    onWaiting?: (event: Event) => void;
-    onQualityChange?: (event: Event) => void;
-    onRateChange?: (event: Event) => void;
+    style?: NativeStyle;
+    onPlayRequest?: (payload: LxVideoEventPayloads["onPlayRequest"]) => void;
+    onPlay?: (payload: LxVideoEventPayloads["onPlay"]) => void;
+    onPlaying?: (payload: LxVideoEventPayloads["onPlaying"]) => void;
+    onPause?: (payload: LxVideoEventPayloads["onPause"]) => void;
+    onStop?: (payload: LxVideoEventPayloads["onStop"]) => void;
+    onEnded?: (payload: LxVideoEventPayloads["onEnded"]) => void;
+    onWaiting?: (payload: LxVideoEventPayloads["onWaiting"]) => void;
+    onTimeUpdate?: (payload: LxVideoEventPayloads["onTimeUpdate"]) => void;
+    onError?: (payload: LxVideoEventPayloads["onError"]) => void;
+    onLoadedMetadata?: (payload: LxVideoEventPayloads["onLoadedMetadata"]) => void;
+    onFullscreenChange?: (payload: LxVideoEventPayloads["onFullscreenChange"]) => void;
+    onQualityChange?: (payload: LxVideoEventPayloads["onQualityChange"]) => void;
+    onRateChange?: (payload: LxVideoEventPayloads["onRateChange"]) => void;
+    onVolumeChange?: (payload: LxVideoEventPayloads["onVolumeChange"]) => void;
     pageBindings?: Record<string, string>;
 }
+export interface LxNativeNodeProps {
+    id?: string;
+    automationId?: string;
+    class?: string;
+    style?: NativeStyle;
+    pointerEvents?: 'auto' | 'none' | 'box-only' | 'box-none';
+    hidden?: boolean;
+    'aria-label'?: string;
+    'aria-description'?: string;
+    'aria-hidden'?: boolean;
+}
+export interface LxNativeRootProps extends LxNativeNodeProps {
+}
+export interface LxNativeViewProps extends LxNativeNodeProps {
+    role?: 'group' | 'region' | 'status' | 'presentation' | 'none';
+}
+export interface LxNativeCoverProps extends LxNativeViewProps {
+    scrim?: 'none' | 'top' | 'bottom' | 'full';
+    scrimOpacity?: number;
+}
+export interface LxNativeTextProps extends LxNativeNodeProps {
+    maxLines?: number;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    lineHeight?: number | string;
+    textAlign?: 'start' | 'center' | 'end';
+    color?: string;
+}
+export interface LxNativeButtonProps extends LxNativeNodeProps {
+    label?: string;
+    icon?: NativeActionIcon;
+    iconPosition?: 'start' | 'end';
+    intent?: 'neutral' | 'accent' | 'destructive';
+    emphasis?: 'primary' | 'secondary' | 'quiet';
+    size?: 'compact' | 'regular';
+    hitSlop?: number;
+    disabled?: boolean;
+    pressed?: boolean;
+    expanded?: boolean;
+    loading?: boolean;
+    tabIndex?: 0 | -1;
+}
 type LxMediaSwiperItem = {
     id?: string;
     type: 'image';
@@ -108,7 +155,7 @@ export interface LxNavigatorProps {
     delta?: number;
     query?: NavigatorQuery;
     appId?: string;
-    envVersion?: NavigatorEnvVersion;
+    channel?: NavigatorChannel;
     targetVersion?: string;
     phoneNumber?: string;
     hoverClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxia/vue",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "private": false,
   "description": "LingXia Vue runtime and components for lxapp pages",
   "type": "module",
@@ -16,12 +16,13 @@
   "scripts": {
     "build": "npm run clean && npm --prefix ../lingxia-elements run build && npm --prefix ../lingxia-page-runtime run build && tsc -p tsconfig.json && node scripts/copy-sfc-assets.mjs",
     "clean": "rm -rf dist",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test:components": "npm run build && node tests/native-components.mjs && node tests/native-aria-attributes.mjs"
   },
   "dependencies": {
-    "@lingxia/bridge": "~0.14.0",
-    "@lingxia/elements": "~0.14.0",
-    "@lingxia/page-runtime": "~0.14.0"
+    "@lingxia/bridge": "~0.16.0",
+    "@lingxia/elements": "~0.16.0",
+    "@lingxia/page-runtime": "~0.16.0"
   },
   "peerDependencies": {
     "vue": ">=3.5.0"