@lingxia/elements 0.17.0 → 0.19.0

package/dist/picker.d.ts

@@ -1,5 +1,10 @@
-export type LxPickerColumn = string[];
-export type LxPickerCascadingColumns = [string[], Record<string, string[]>];
+export type LxPickerColumn = readonly string[];
+export type LxPickerCascadingColumns = readonly [
+    readonly string[],
+    Readonly<Record<string, readonly string[]>>
+];
+/** Selector or multi-column columns, or cascading keys and their options. */
+export type LxPickerColumns = readonly LxPickerColumn[] | LxPickerCascadingColumns;
 type LxPickerViewEventHandler = (e: LxPickerEvent) => void;
 export interface LxPickerEventDetail {
     index?: number | number[];
@@ -13,7 +18,7 @@ export interface LxPickerEvent extends CustomEvent<LxPickerEventDetail> {
 export type LxPickerAttributes = {
     id?: string;
     mode?: 'selector' | 'multiSelector' | 'cascading' | 'date' | 'time';
-    columns?: LxPickerColumn[] | LxPickerCascadingColumns;
+    columns?: LxPickerColumns;
     defaultIndex?: number | number[];
     value?: string;
     start?: string;
@@ -30,7 +35,6 @@ export type LxPickerAttributes = {
     ref?: any;
     onChange?: LxPickerViewEventHandler;
     onScroll?: LxPickerViewEventHandler;
-    pageBindings?: Record<string, string>;
 };
 declare global {
     namespace JSX {
@@ -46,7 +50,6 @@ export declare class LxPickerElement extends HTMLElement {
     private unregister?;
     private _handlers;
     private rawHandlers;
-    private _pageBindings;
     private harmonyEmbed?;
     private lastHarmonyProps?;
     private webCleanup?;
@@ -54,8 +57,6 @@ export declare class LxPickerElement extends HTMLElement {
     private removeLayoutInvalidationListener?;
     private readonly layoutInvalidationListener;
     private upgradeProperty;
-    set pageBindings(bindings: Record<string, string>);
-    get pageBindings(): Record<string, string>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
@@ -65,8 +66,6 @@ export declare class LxPickerElement extends HTMLElement {
     private shouldRefreshForAttribute;
     private startAttrObserver;
     private stopAttrObserver;
-    private dataAttrToDatasetKey;
-    private collectDataset;
     private mountPicker;
     set onchange(cb: EventListener | null);
     get onchange(): EventListener | null;

package/dist/picker.js

@@ -19,7 +19,6 @@ export class LxPickerElement extends HTMLElement {
         this.mounted = false;
         this._handlers = {};
         this.rawHandlers = {};
-        this._pageBindings = {};
         this.layoutInvalidationListener = {
             handleEvent: () => {
                 if (!this.isConnected || isHarmony() || !hasNativePicker())
@@ -54,17 +53,7 @@ export class LxPickerElement extends HTMLElement {
         delete self[propName];
         self[propName] = value;
     }
-    set pageBindings(bindings) {
-        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected) {
-            this.mountPicker();
-        }
-    }
-    get pageBindings() {
-        return this._pageBindings;
-    }
     connectedCallback() {
-        this.upgradeProperty("pageBindings");
         this.upgradeProperty("onchange");
         this.componentId = ensureComponentId(this, "lx-picker", this.componentId);
         if (!this.componentId)
@@ -203,46 +192,10 @@ export class LxPickerElement extends HTMLElement {
         this.attrObserver.disconnect();
         this.attrObserver = undefined;
     }
-    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("");
-    }
-    collectDataset() {
-        const dataset = {};
-        const attrs = this.getAttributeNames();
-        for (const attr of attrs) {
-            if (!attr.startsWith("data-"))
-                continue;
-            const key = this.dataAttrToDatasetKey(attr);
-            if (!key)
-                continue;
-            const value = this.getAttribute(attr);
-            if (value == null)
-                continue;
-            dataset[key] = value;
-        }
-        return dataset;
-    }
     async mountPicker() {
         if (!this.componentId)
             return;
         const props = this.collectProps();
-        const dataset = this.collectDataset();
-        props.dataset = dataset;
-        props.datasetJson = JSON.stringify(dataset);
-        props.pageFuncBindings = this._pageBindings;
-        props.pageFuncBindingsJson = JSON.stringify(this._pageBindings);
         const { rect, cornerRadius } = measureElement(this);
         if (isHarmony()) {
             this.ensureHarmonyEmbed(rect, props, cornerRadius);

package/dist/video.d.ts

@@ -69,8 +69,8 @@ export type LxVideoAttributes = {
     progressBar?: boolean;
     live?: boolean;
     volume?: string | number;
-    qualities?: LxVideoQuality[];
-    playbackRates?: number[];
+    qualities?: readonly LxVideoQuality[];
+    playbackRates?: readonly number[];
     className?: string;
     style?: unknown;
     ref?: unknown;
@@ -88,7 +88,6 @@ export type LxVideoAttributes = {
     onQualityChange?: (event: CustomEvent<LxVideoEventPayloads["onQualityChange"]>) => void;
     onRateChange?: (event: CustomEvent<LxVideoEventPayloads["onRateChange"]>) => void;
     onVolumeChange?: (event: CustomEvent<LxVideoEventPayloads["onVolumeChange"]>) => void;
-    pageBindings?: Record<string, string>;
 };
 declare global {
     namespace JSX {
@@ -110,11 +109,6 @@ export declare class LxVideoElement extends HTMLElement {
     private unregister?;
     private handlers;
     private rawHandlers;
-    private bindings;
-    set pageBindings(bindings: Record<string, string>);
-    get pageBindings(): Record<string, string>;
-    get pageFuncBindings(): Record<string, string>;
-    get pageFuncBindingsJson(): string;
     set src(value: string | null | undefined);
     get src(): string | null;
     set contentRotate(value: unknown);

package/dist/video.js

@@ -15,7 +15,6 @@ export class LxVideoElement extends HTMLElement {
         this.islandPlaybackIdle = false;
         this.handlers = {};
         this.rawHandlers = {};
-        this.bindings = {};
     }
     static get observedAttributes() {
         return [
@@ -35,20 +34,6 @@ export class LxVideoElement extends HTMLElement {
             "playback-rates",
         ];
     }
-    set pageBindings(bindings) {
-        this.bindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected)
-            this.requestRootCompile();
-    }
-    get pageBindings() {
-        return this.bindings;
-    }
-    get pageFuncBindings() {
-        return this.bindings;
-    }
-    get pageFuncBindingsJson() {
-        return JSON.stringify(this.bindings);
-    }
     set src(value) {
         if (value == null) {
             this.removeAttribute("src");
@@ -74,7 +59,6 @@ export class LxVideoElement extends HTMLElement {
     }
     connectedCallback() {
         for (const property of [
-            "pageBindings",
             "contentRotate",
             "src",
             "onplayrequest",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxia/elements",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "private": false,
   "description": "LingXia custom elements — native-backed web components for LxApp pages",
   "type": "module",
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "build": "npm --prefix ../lingxia-bridge run build:types && tsc -p tsconfig.json",
-    "test:inline-native": "npm run build && node tests/inline-native-structure.mjs && node tests/inline-native-unwrap.mjs && node tests/inline-native-runtime.mjs && node tests/inline-native-events.mjs && node tests/inline-native-style.mjs && node tests/video-events.mjs && node tests/inline-native-identity.mjs && node tests/inline-native-contract.mjs",
+    "test:inline-native": "npm run build && node tests/inline-native-structure.mjs && node tests/inline-native-unwrap.mjs && node tests/inline-native-runtime.mjs && node tests/inline-native-events.mjs && node tests/inline-native-style.mjs && node tests/video-events.mjs && node tests/navigator-routing.mjs && node tests/inline-native-identity.mjs && node tests/inline-native-contract.mjs",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run build"
   },

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   type LxVideoAttributes,
   type LxVideoEventPayloads,
   type LxVideoEventHandlers,
+  type LxVideoQuality,
 } from "./video.js";
 
 export {
@@ -11,6 +12,9 @@ export {
   LxMediaSwiperElement,
   type LxMediaSwiperAttributes,
   type LxMediaSwiperItem,
+  type LxMediaSwiperEventPayloads,
+  type LxMediaSwiperEventHandlers,
+  type LxMediaSwiperHandle,
   type LxMediaSwiperChangeEvent,
   type LxMediaSwiperChangeEventDetail,
   type LxMediaSwiperTransitionEndEvent,
@@ -31,6 +35,7 @@ export {
   type LxPickerAttributes,
   type LxPickerColumn,
   type LxPickerCascadingColumns,
+  type LxPickerColumns,
   type LxPickerEvent,
   type LxPickerEventDetail,
 } from "./picker.js";
@@ -41,6 +46,15 @@ export {
   type LxNavigatorAttributes,
   type LxNavigatorEvent,
   type NavigatorChannel,
+  type NavigatorEdge,
+  type NavigatorFloatPosition,
+  type NavigatorInteraction,
+  type NavigatorPagePlacement,
+  type NavigatorPlacement,
+  type NavigatorSize,
+  type NavigatorSizeValue,
+  type NavigatorUrlPlacement,
+  type NavigatorWindowChrome,
   type NavigatorOpenType,
   type NavigatorQuery,
   type NavigatorQueryValue,

package/src/inline-native/structure.ts

@@ -687,7 +687,6 @@ export function isFallbackElement(element: Element): boolean {
 
 function readElementProps(element: Element): Record<string, unknown> {
   const props: Record<string, unknown> = {};
-  const dataset: Record<string, string> = {};
   for (const attr of Array.from(element.attributes)) {
     if (attr.name === "data-lx-native-measuring" || attr.name === "data-lx-native-paint-hidden") continue;
     const name = attr.name;
@@ -695,10 +694,6 @@ function readElementProps(element: Element): Record<string, unknown> {
       continue;
     }
     props[camelize(name)] = attr.value;
-    if (name.startsWith("data-") && name !== "data-lx-component-id") {
-      const key = camelize(name.slice(5));
-      if (key) dataset[key] = attr.value;
-    }
     if (name.startsWith("aria-")) {
       props[name] = attr.value;
     }
@@ -730,8 +725,6 @@ function readElementProps(element: Element): Record<string, unknown> {
     "muted",
     "volume",
     "progressBar",
-    "pageFuncBindings",
-    "pageFuncBindingsJson",
     "intent",
     "emphasis",
     "size",
@@ -754,10 +747,6 @@ function readElementProps(element: Element): Record<string, unknown> {
       props[key] = anyEl[key];
     }
   }
-  if (Object.keys(dataset).length > 0) {
-    props.dataset = dataset;
-    props.datasetJson = JSON.stringify(dataset);
-  }
   const ariaLabel = element.getAttribute("aria-label");
   if (ariaLabel) {
     props["aria-label"] = ariaLabel;

package/src/media_swiper.ts

@@ -7,8 +7,6 @@ import { ensureComponentId, NativeComponentUpdateState, iOSNativeComponentHelper
 import { measureElement } from "./dom.js";
 import { isAndroid, isHarmony, isIOS } from "./platform.js";
 
-type LxMediaSwiperEventHandler = (e: Event) => void;
-
 export type LxMediaSwiperItem =
   | {
       id?: string;
@@ -66,6 +64,28 @@ export type LxMediaSwiperItemEvent = CustomEvent<LxMediaSwiperEventDetail>;
 export type LxMediaSwiperEndReachedEvent = CustomEvent<LxMediaSwiperEndReachedEventDetail>;
 export type LxMediaSwiperErrorEvent = CustomEvent<LxMediaSwiperErrorEventDetail>;
 
+/** What each framework callback receives: the event's `detail`. */
+export interface LxMediaSwiperEventPayloads {
+  onChange: LxMediaSwiperChangeEventDetail;
+  onTransitionEnd: LxMediaSwiperTransitionEndEventDetail;
+  onEndReached: LxMediaSwiperEndReachedEventDetail;
+  onTap: LxMediaSwiperEventDetail;
+  onVideoEnded: LxMediaSwiperEventDetail;
+  onError: LxMediaSwiperErrorEventDetail;
+}
+
+/** The framework callbacks: each receives its event's payload. */
+export type LxMediaSwiperEventHandlers = {
+  [K in keyof LxMediaSwiperEventPayloads]?: (payload: LxMediaSwiperEventPayloads[K]) => void;
+};
+
+/** Imperative control of a mounted swiper (React ref, Vue template ref). */
+export interface LxMediaSwiperHandle {
+  next(): void;
+  previous(): void;
+  goToIndex(index: number): void;
+}
+
 /**
  * Peek leaves part of the previous and next pages visible alongside the current
  * page so users get a hint that more content exists. A single `number` applies
@@ -81,7 +101,7 @@ export type LxMediaSwiperPeek = number | { previous?: number; next?: number };
 
 export type LxMediaSwiperAttributes = {
   id?: string;
-  items?: LxMediaSwiperItem[];
+  items?: readonly LxMediaSwiperItem[];
   index?: number;
   initialIndex?: number;
   loop?: boolean;
@@ -100,13 +120,12 @@ export type LxMediaSwiperAttributes = {
   className?: string;
   style?: any;
   ref?: any;
-  onChange?: LxMediaSwiperEventHandler;
-  onTransitionEnd?: LxMediaSwiperEventHandler;
-  onEndReached?: LxMediaSwiperEventHandler;
-  onTap?: LxMediaSwiperEventHandler;
-  onVideoEnded?: LxMediaSwiperEventHandler;
-  onError?: LxMediaSwiperEventHandler;
-  pageBindings?: Record<string, string>;
+  onChange?: (event: LxMediaSwiperChangeEvent) => void;
+  onTransitionEnd?: (event: LxMediaSwiperTransitionEndEvent) => void;
+  onEndReached?: (event: LxMediaSwiperEndReachedEvent) => void;
+  onTap?: (event: LxMediaSwiperItemEvent) => void;
+  onVideoEnded?: (event: LxMediaSwiperItemEvent) => void;
+  onError?: (event: LxMediaSwiperErrorEvent) => void;
 };
 
 type ObjectFit = "cover" | "contain" | "fill" | "fit";
@@ -129,7 +148,7 @@ declare global {
   }
 }
 
-export class LxMediaSwiperElement extends HTMLElement {
+export class LxMediaSwiperElement extends HTMLElement implements LxMediaSwiperHandle {
   static get observedAttributes() {
     return [
       "id",
@@ -163,7 +182,6 @@ export class LxMediaSwiperElement extends HTMLElement {
   private iOSHelper?: iOSNativeComponentHelper;
   private rawHandlers: Record<string, EventListenerOrEventListenerObject> = {};
   private handlers: Record<string, EventListenerOrEventListenerObject> = {};
-  private _pageBindings: Record<string, string> = {};
   // Monotonic command counter used as the Harmony bridge fallback. Harmony's
   // Web.onNativeEmbedDataInfo channel only delivers attribute-derived props,
   // so imperative API calls have to piggyback into a prop the Builder polls.
@@ -179,7 +197,7 @@ export class LxMediaSwiperElement extends HTMLElement {
   private harmonyEmbed?: HTMLEmbedElement;
   private lastHarmonyProps?: string;
 
-  set items(value: LxMediaSwiperItem[] | string | null | undefined) {
+  set items(value: readonly LxMediaSwiperItem[] | string | null | undefined) {
     if (typeof value === "string") {
       const trimmed = value.trim();
       if (trimmed.length === 0) {
@@ -237,23 +255,6 @@ export class LxMediaSwiperElement extends HTMLElement {
     return this.parseRotate(this.getAttribute("content-rotate"));
   }
 
-  set pageBindings(bindings: Record<string, string>) {
-    this.setPageBindings(bindings);
-  }
-
-  get pageBindings(): Record<string, string> {
-    return this._pageBindings;
-  }
-
-  set pageFuncBindings(bindings: Record<string, string>) {
-    this.setPageBindings(bindings);
-  }
-
-  setPageBindings(bindings: Record<string, string>) {
-    this._pageBindings = bindings ?? {};
-    if (this.isConnected) this.mountOrUpdate(true);
-  }
-
   next(): void {
     this.sendCommand("next");
   }
@@ -272,8 +273,6 @@ export class LxMediaSwiperElement extends HTMLElement {
     this.upgradeProperty("index");
     this.upgradeProperty("initialIndex");
     this.upgradeProperty("contentRotate");
-    this.upgradeProperty("pageBindings");
-    this.upgradeProperty("pageFuncBindings");
     for (const prop of Object.keys(EVENT_MAP)) this.upgradeProperty(prop);
 
     this.componentId = ensureComponentId(this, "lx-media-swiper", this.componentId);
@@ -377,7 +376,6 @@ export class LxMediaSwiperElement extends HTMLElement {
   private collectProps(): Record<string, unknown> {
     const objectFit = this.parseObjectFit(this.getAttribute("object-fit"));
     const dots = this.parseDots();
-    const dataset = this.collectDataset();
     // Always emit a normalised peek object so removing the attribute (or setting it
     // to 0) propagates as an explicit reset. JSON.stringify would drop `undefined`,
     // which makes native think peek hasn't changed and keep the old padding.
@@ -399,10 +397,6 @@ export class LxMediaSwiperElement extends HTMLElement {
       dots,
       swipeEnabled: this.getAttribute("swipe-enabled") !== "false",
       peek,
-      pageFuncBindings: this._pageBindings,
-      pageFuncBindingsJson: JSON.stringify(this._pageBindings),
-      dataset,
-      datasetJson: JSON.stringify(dataset),
     };
     return props;
   }
@@ -809,16 +803,6 @@ export class LxMediaSwiperElement extends HTMLElement {
     }
   }
 
-  private collectDataset(): Record<string, string> {
-    const dataset: Record<string, string> = {};
-    for (const attr of this.getAttributeNames()) {
-      if (!attr.startsWith("data-")) continue;
-      const key = attr.slice(5).replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
-      const value = this.getAttribute(attr);
-      if (key && value != null) dataset[key] = value;
-    }
-    return dataset;
-  }
 }
 
 export function registerMediaSwiperComponent() {

package/src/native_component_wrapper_shared.ts

@@ -1,4 +1,15 @@
-import type { NavigatorChannel, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { LxPickerCascadingColumns, LxPickerColumns } from "./picker.js";
+import type {
+  NavigatorChannel,
+  NavigatorEdge,
+  NavigatorFloatPosition,
+  NavigatorInteraction,
+  NavigatorOpenType,
+  NavigatorPlacement,
+  NavigatorSize,
+  NavigatorTarget,
+  NavigatorWindowChrome,
+} from "./navigator.js";
 import type { NavigatorQuery } from "./navigator.js";
 import type { LxMediaSwiperItem } from "./media_swiper.js";
 import type { LxVideoQuality, LxVideoEventPayloads } from "./video.js";
@@ -37,6 +48,12 @@ export interface NavigatorNativeAttrOptions {
   openType?: NavigatorOpenType;
   target?: NavigatorTarget;
   delta?: number;
+  as?: NavigatorPlacement;
+  edge?: NavigatorEdge;
+  position?: NavigatorFloatPosition;
+  chrome?: NavigatorWindowChrome;
+  size?: NavigatorSize;
+  interaction?: NavigatorInteraction;
   appId?: string;
   query?: NavigatorQuery;
   channel?: NavigatorChannel;
@@ -64,6 +81,12 @@ export function buildNavigatorNativeAttrs(
   if (options.url) result.url = options.url;
   if (options.page) result.page = options.page;
   if (options.target) result.target = options.target;
+  if (options.as) result.as = options.as;
+  if (options.edge) result.edge = options.edge;
+  if (options.position) result.position = options.position;
+  if (options.chrome) result.chrome = options.chrome;
+  if (options.size) result.size = JSON.stringify(options.size);
+  if (options.interaction) result.interaction = JSON.stringify(options.interaction);
   if (options.appId) result["app-id"] = options.appId;
   if (options.query) result.query = JSON.stringify(options.query);
   if (options.channel) result.channel = options.channel;
@@ -74,19 +97,18 @@ export function buildNavigatorNativeAttrs(
   return result;
 }
 
-export type PickerColumns = string[][] | [string[], Record<string, string[]>];
-export type PickerValue = string | string[] | undefined;
+export type PickerValue = string | readonly string[] | undefined;
 export type PickerFields = "year" | "month" | "day" | "range";
 
 export interface PickerNativeAttrOptions {
   id?: string;
-  columns?: PickerColumns;
+  columns?: LxPickerColumns;
   mode?: "date" | "time";
   start?: string;
   end?: string;
   fields?: PickerFields;
-  modelValue?: string | string[];
-  value?: string | string[];
+  modelValue?: string | readonly string[];
+  value?: string | readonly string[];
   cancelText?: string;
   cancelTextColor?: string;
   cancelButtonColor?: string;
@@ -99,16 +121,16 @@ export function isPickerDateMode(mode?: "date" | "time"): boolean {
   return mode === "date" || mode === "time";
 }
 
-export function isPickerCascading(columns?: PickerColumns): columns is [string[], Record<string, string[]>] {
+export function isPickerCascading(columns?: LxPickerColumns): columns is LxPickerCascadingColumns {
   return !!columns && columns.length === 2 && typeof columns[1] === "object" && !Array.isArray(columns[1]);
 }
 
-export function isPickerSingle(columns?: PickerColumns): boolean {
+export function isPickerSingle(columns?: LxPickerColumns): boolean {
   return !!columns && columns.length === 1;
 }
 
 export function getPickerIndexFromValue(
-  columns: PickerColumns | undefined,
+  columns: LxPickerColumns | undefined,
   value: PickerValue
 ): number | number[] {
   if (!columns) return 0;
@@ -132,7 +154,7 @@ export function getPickerIndexFromValue(
 }
 
 export function getPickerValueFromIndex(
-  columns: PickerColumns | undefined,
+  columns: LxPickerColumns | undefined,
   index: number | number[]
 ): string | string[] {
   if (!columns) return "";
@@ -222,8 +244,8 @@ export interface VideoNativeAttrOptions {
   progressBar?: boolean;
   live?: boolean;
   volume?: string | number;
-  qualities?: LxVideoQuality[];
-  playbackRates?: number[];
+  qualities?: readonly LxVideoQuality[];
+  playbackRates?: readonly number[];
 }
 
 export function buildVideoNativeAttrs(
@@ -263,7 +285,7 @@ export const MEDIA_SWIPER_DOM_EVENT_MAP = {
 
 export interface MediaSwiperNativeAttrOptions {
   id?: string;
-  items?: LxMediaSwiperItem[];
+  items?: readonly LxMediaSwiperItem[];
   index?: number;
   initialIndex?: number;
   loop?: boolean;