@lingxia/elements 0.6.0 → 0.6.5

package/dist/native_component_wrapper_shared.d.ts

@@ -1,5 +1,6 @@
 import type { NavigatorEnvVersion, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
 import type { NavigatorQuery } from "./navigator.js";
+import type { LxMediaSwiperItem } from "./media_swiper.js";
 import type { LxVideoQuality } from "./video.js";
 export declare function appendDataAttrs(attrs: Record<string, unknown>, target: Record<string, string>): void;
 export declare function appendPassthroughAttrs(attrs: Record<string, unknown>, target: Record<string, string>): void;
@@ -77,3 +78,37 @@ export interface VideoNativeAttrOptions {
     playbackRates?: number[];
 }
 export declare function buildVideoNativeAttrs(options: VideoNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string | number>;
+export declare const MEDIA_SWIPER_DOM_EVENT_MAP: {
+    readonly onChange: "change";
+    readonly onTransitionEnd: "transitionend";
+    readonly onEndReached: "endreached";
+    readonly onTap: "tap";
+    readonly onVideoEnded: "videoended";
+    readonly onError: "error";
+};
+export interface MediaSwiperNativeAttrOptions {
+    id?: string;
+    items?: LxMediaSwiperItem[];
+    index?: number;
+    initialIndex?: number;
+    loop?: boolean;
+    autoplay?: boolean;
+    interval?: number;
+    animation?: "slide" | "none";
+    animationDuration?: number;
+    direction?: "horizontal" | "vertical";
+    contentRotate?: 0 | 90 | 180 | 270;
+    objectFit?: "cover" | "contain" | "fill" | "fit";
+    controls?: boolean;
+    muted?: boolean;
+    dots?: boolean | {
+        color?: string;
+        activeColor?: string;
+    };
+    swipeEnabled?: boolean;
+    peek?: number | {
+        previous?: number;
+        next?: number;
+    };
+}
+export declare function buildMediaSwiperNativeAttrs(options: MediaSwiperNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string | number>;

package/dist/native_component_wrapper_shared.js

@@ -199,3 +199,64 @@ export function buildVideoNativeAttrs(options, extraAttrs = {}) {
     appendPassthroughAttrs(extraAttrs, extraNativeAttrs);
     return { ...result, ...extraNativeAttrs };
 }
+export const MEDIA_SWIPER_DOM_EVENT_MAP = {
+    onChange: "change",
+    onTransitionEnd: "transitionend",
+    onEndReached: "endreached",
+    onTap: "tap",
+    onVideoEnded: "videoended",
+    onError: "error",
+};
+export function buildMediaSwiperNativeAttrs(options, extraAttrs = {}) {
+    const result = {};
+    const explicitId = typeof options.id === "string" ? options.id.trim() : "";
+    if (explicitId.length > 0)
+        result.id = explicitId;
+    if (Array.isArray(options.items))
+        result.items = JSON.stringify(options.items);
+    if (typeof options.index === "number")
+        result.index = options.index;
+    if (typeof options.initialIndex === "number")
+        result["initial-index"] = options.initialIndex;
+    if (options.loop)
+        result.loop = "";
+    if (options.autoplay)
+        result.autoplay = "";
+    if (typeof options.interval === "number")
+        result.interval = options.interval;
+    if (options.animation)
+        result.animation = options.animation;
+    if (typeof options.animationDuration === "number")
+        result["animation-duration"] = options.animationDuration;
+    if (options.direction)
+        result.direction = options.direction;
+    if (typeof options.contentRotate === "number")
+        result["content-rotate"] = options.contentRotate;
+    if (options.objectFit)
+        result["object-fit"] = options.objectFit;
+    if (options.controls)
+        result.controls = "";
+    if (options.muted === false)
+        result.muted = "false";
+    if (options.muted === true)
+        result.muted = "";
+    if (options.dots === true)
+        result.dots = "";
+    if (options.dots && typeof options.dots === "object")
+        result.dots = JSON.stringify(options.dots);
+    if (options.swipeEnabled === false)
+        result["swipe-enabled"] = "false";
+    if (typeof options.peek === "number" && options.peek > 0) {
+        result.peek = options.peek;
+    }
+    else if (options.peek && typeof options.peek === "object") {
+        const previous = Math.max(0, Number(options.peek.previous) || 0);
+        const next = Math.max(0, Number(options.peek.next) || 0);
+        if (previous > 0 || next > 0) {
+            result.peek = JSON.stringify({ previous, next });
+        }
+    }
+    const extraNativeAttrs = {};
+    appendPassthroughAttrs(extraAttrs, extraNativeAttrs);
+    return { ...result, ...extraNativeAttrs };
+}

package/dist/video.d.ts

@@ -8,7 +8,7 @@ export type LxVideoAttributes = {
     src?: string;
     poster?: string;
     objectFit?: "cover" | "contain" | "fill" | "fit";
-    rotate?: 0 | 90 | 180 | 270;
+    contentRotate?: 0 | 90 | 180 | 270;
     autoplay?: boolean;
     loop?: boolean;
     muted?: boolean;
@@ -72,11 +72,13 @@ export declare class LxVideoElement extends HTMLElement {
     private parseObjectFitValue;
     set pageBindings(bindings: Record<string, string>);
     get pageBindings(): Record<string, string>;
+    set src(value: string | null | undefined);
+    get src(): string | null;
     private dataAttrToDatasetKey;
     private collectDataset;
     private upgradeProperty;
-    set rotate(value: unknown);
-    get rotate(): 0 | 90 | 180 | 270 | undefined;
+    set contentRotate(value: unknown);
+    get contentRotate(): 0 | 90 | 180 | 270 | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;

package/dist/video.js

@@ -33,7 +33,7 @@ export class LxVideoElement extends HTMLElement {
             "src",
             "poster",
             "object-fit",
-            "rotate",
+            "content-rotate",
             "autoplay",
             "loop",
             "muted",
@@ -84,6 +84,16 @@ export class LxVideoElement extends HTMLElement {
     get pageBindings() {
         return this._pageBindings;
     }
+    set src(value) {
+        if (value == null) {
+            this.removeAttribute("src");
+            return;
+        }
+        this.setAttribute("src", String(value));
+    }
+    get src() {
+        return this.getAttribute("src");
+    }
     dataAttrToDatasetKey(attr) {
         const raw = attr.slice(5).trim();
         if (!raw)
@@ -123,21 +133,22 @@ export class LxVideoElement extends HTMLElement {
         delete self[propName];
         self[propName] = value;
     }
-    set rotate(value) {
+    set contentRotate(value) {
         const normalized = this.parseRotateValue(value);
         if (normalized === undefined) {
-            this.removeAttribute("rotate");
+            this.removeAttribute("content-rotate");
             return;
         }
-        this.setAttribute("rotate", String(normalized));
+        this.setAttribute("content-rotate", String(normalized));
     }
-    get rotate() {
-        return this.parseRotateValue(this.getAttribute("rotate"));
+    get contentRotate() {
+        return this.parseRotateValue(this.getAttribute("content-rotate"));
     }
     connectedCallback() {
         // React may set custom-element properties before upgrade; replay through setters.
         this.upgradeProperty("pageBindings");
-        this.upgradeProperty("rotate");
+        this.upgradeProperty("contentRotate");
+        this.upgradeProperty("src");
         this.upgradeProperty("onplayrequest");
         this.upgradeProperty("onplay");
         this.upgradeProperty("onplaying");
@@ -230,8 +241,8 @@ export class LxVideoElement extends HTMLElement {
         }
         if (!this.isConnected)
             return;
-        // Keep rotate/object-fit updates immediate across all native platforms.
-        const forcePropsUpdate = name === "rotate" || name === "object-fit" || name === "objectfit";
+        // Keep content-rotate/object-fit updates immediate across all native platforms.
+        const forcePropsUpdate = name === "content-rotate" || name === "object-fit" || name === "objectfit";
         if (isHarmony() && forcePropsUpdate) {
             // Bridge callbacks can race on Harmony; force a deterministic embed recreate for visual props.
             this.forceHarmonyEmbedRecreate = true;
@@ -340,13 +351,13 @@ export class LxVideoElement extends HTMLElement {
         const progressBar = isLive
             ? (progressBarAttr !== null && progressBarAttr !== "false")
             : (progressBarAttr !== "false");
-        const rawRotate = this.getAttribute("rotate");
-        const validRotate = this.parseRotateValue(rawRotate);
+        const rawContentRotate = this.getAttribute("content-rotate");
+        const validContentRotate = this.parseRotateValue(rawContentRotate);
         const pageFuncBindings = this._pageBindings;
         const dataset = this.collectDataset();
         const clearProps = [];
-        if (rawRotate === null || validRotate === undefined) {
-            clearProps.push("rotate");
+        if (rawContentRotate === null || validContentRotate === undefined) {
+            clearProps.push("contentRotate");
         }
         if (rawObjectFit == null || objectFit === undefined) {
             clearProps.push("objectFit");
@@ -362,7 +373,7 @@ export class LxVideoElement extends HTMLElement {
             live: isLive,
             volume: !Number.isNaN(volume !== null && volume !== void 0 ? volume : NaN) ? volume : undefined,
             objectFit,
-            rotate: validRotate,
+            contentRotate: validContentRotate,
             ...(clearProps.length > 0 ? { __clearProps: clearProps } : {}),
             qualities,
             playbackRates,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxia/elements",
-  "version": "0.6.0",
+  "version": "0.6.5",
   "private": false,
   "description": "LingXia custom elements — native-backed web components for LxApp pages",
   "type": "module",

package/src/index.ts

@@ -4,6 +4,25 @@ export {
   type LxVideoAttributes,
 } from "./video.js";
 
+export {
+  registerMediaSwiperComponent,
+  LxMediaSwiperElement,
+  type LxMediaSwiperAttributes,
+  type LxMediaSwiperItem,
+  type LxMediaSwiperChangeEvent,
+  type LxMediaSwiperChangeEventDetail,
+  type LxMediaSwiperTransitionEndEvent,
+  type LxMediaSwiperTransitionEndEventDetail,
+  type LxMediaSwiperItemEvent,
+  type LxMediaSwiperEventDetail,
+  type LxMediaSwiperEndReachedEvent,
+  type LxMediaSwiperEndReachedEventDetail,
+  type LxMediaSwiperErrorEvent,
+  type LxMediaSwiperErrorEventDetail,
+  type LxMediaSwiperChangeSource,
+  type LxMediaSwiperErrorCode,
+} from "./media_swiper.js";
+
 export {
   registerPickerComponent,
   LxPickerElement,
@@ -43,11 +62,13 @@ export {
 
 export {
   buildVideoNativeAttrs,
+  buildMediaSwiperNativeAttrs,
   buildNavigatorNativeAttrs,
   buildPickerNativeAttrs,
   getPickerDisplayText,
   getPickerValueFromIndex,
   VIDEO_DOM_EVENT_MAP,
+  MEDIA_SWIPER_DOM_EVENT_MAP,
 } from "./native_component_wrapper_shared.js";
 
 export {