@lingxia/vue 0.6.0 → 0.6.5

package/dist/LxMediaSwiper.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, h, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue';
+import {
+  buildMediaSwiperNativeAttrs,
+  MEDIA_SWIPER_DOM_EVENT_MAP,
+  registerMediaSwiperComponent,
+} from '@lingxia/elements';
+import { bindElementEvents, unbindElementEvents } from './text_component_shared.js';
+import type { LxMediaSwiperProps } from './types.js';
+
+const props = withDefaults(defineProps<LxMediaSwiperProps>(), {
+  loop: false,
+  autoplay: false,
+  interval: 5000,
+  animation: 'slide',
+  direction: 'horizontal',
+  objectFit: 'cover',
+  controls: false,
+  muted: true,
+  dots: false,
+  swipeEnabled: true,
+});
+const attrs = useAttrs();
+
+const emit = defineEmits<{
+  change: [e: Event];
+  transitionEnd: [e: Event];
+  endReached: [e: Event];
+  tap: [e: Event];
+  videoEnded: [e: Event];
+  error: [e: Event];
+}>();
+
+if (typeof window !== 'undefined') {
+  registerMediaSwiperComponent();
+}
+
+const elementRef = ref<HTMLElement | null>(null);
+const vueId = useId();
+let boundElement: HTMLElement | null = null;
+
+const resolvedId = computed(() => props.id || `lx-media-swiper-${vueId.replace(/[:]/g, '')}`);
+
+const eventListeners: Record<string, EventListenerObject> = {
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onChange]: { handleEvent: (event: Event) => emit('change', event) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onTransitionEnd]: { handleEvent: (event: Event) => emit('transitionEnd', event) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onEndReached]: { handleEvent: (event: Event) => emit('endReached', event) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onTap]: { handleEvent: (event: Event) => emit('tap', event) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onVideoEnded]: { handleEvent: (event: Event) => emit('videoEnded', event) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onError]: { handleEvent: (event: Event) => emit('error', event) },
+};
+
+watch(elementRef, (element) => {
+  boundElement = bindElementEvents(boundElement, element, eventListeners);
+});
+
+onBeforeUnmount(() => {
+  unbindElementEvents(boundElement, eventListeners);
+});
+
+watch(
+  [elementRef, () => props.pageBindings],
+  () => {
+    const el = elementRef.value as any;
+    if (el) {
+      el.pageBindings = props.pageBindings ?? {};
+    }
+  },
+  { immediate: true }
+);
+
+const domProps = computed(() => {
+  const result = buildMediaSwiperNativeAttrs({
+    ...props,
+    id: resolvedId.value,
+  }, attrs as Record<string, unknown>);
+  return {
+    ...result,
+    class: props.class ?? attrs.class,
+    style: props.style ?? attrs.style,
+  };
+});
+
+defineExpose({
+  el: elementRef,
+  next: () => (elementRef.value as any)?.next?.(),
+  previous: () => (elementRef.value as any)?.previous?.(),
+  goToIndex: (index: number) => (elementRef.value as any)?.goToIndex?.(index),
+});
+
+const render = () => h('lx-media-swiper', { ref: elementRef, ...domProps.value });
+</script>
+
+<template>
+  <render />
+</template>

package/dist/LxVideo.vue

@@ -69,15 +69,15 @@ onBeforeUnmount(() => {
 });
 
 watch(
-  [elementRef, () => props.rotate, () => props.objectFit],
+  [elementRef, () => props.contentRotate, () => props.objectFit],
   () => {
     const el = elementRef.value;
     if (!el) return;
-    const rotate = props.rotate;
-    if (rotate === undefined || rotate === null || rotate === '') {
-      el.removeAttribute('rotate');
+    const contentRotate = props.contentRotate;
+    if (contentRotate === undefined || contentRotate === null || contentRotate === '') {
+      el.removeAttribute('content-rotate');
     } else {
-      el.setAttribute('rotate', String(rotate).trim());
+      el.setAttribute('content-rotate', String(contentRotate).trim());
     }
     const objectFit = props.objectFit;
     if (objectFit === undefined || objectFit === null || objectFit === '') {

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 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 LxMediaSwiper } from "./LxMediaSwiper.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";
+export type { LxVideoProps, LxMediaSwiperProps, LxPickerProps, LxNavigatorProps, LxNavigatorEvent, LxInputProps, LxTextareaProps, } from "./types.js";

package/dist/index.js

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

package/dist/types.d.ts

@@ -1,10 +1,14 @@
 import type { CSSProperties } from 'vue';
-import type { LxVideoAttributes } from '@lingxia/elements';
+import type { LxMediaSwiperAttributes, LxVideoAttributes } from '@lingxia/elements';
 import type { LxNavigatorEvent, NavigatorEnvVersion, NavigatorOpenType, NavigatorQuery, NavigatorTarget } from '@lingxia/elements';
 export interface LxVideoProps extends Omit<LxVideoAttributes, 'ref' | 'className' | 'style'> {
     class?: string;
     style?: CSSProperties;
 }
+export interface LxMediaSwiperProps extends Omit<LxMediaSwiperAttributes, 'ref' | 'className' | 'style'> {
+    class?: string;
+    style?: CSSProperties;
+}
 export interface LxPickerProps {
     columns?: string[][] | [string[], Record<string, string[]>];
     mode?: 'date' | 'time';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxia/vue",
-  "version": "0.6.0",
+  "version": "0.6.5",
   "private": false,
   "description": "LingXia Vue runtime and components for lxapp pages",
   "type": "module",
@@ -19,9 +19,9 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@lingxia/bridge": "0.6.0",
-    "@lingxia/elements": "0.6.0",
-    "@lingxia/page-runtime": "0.6.0"
+    "@lingxia/bridge": "0.6.5",
+    "@lingxia/elements": "0.6.5",
+    "@lingxia/page-runtime": "0.6.5"
   },
   "peerDependencies": {
     "vue": ">=3.5.0"