@lingxia/page-runtime 0.5.0

package/src/vue/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/src/vue/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/src/vue/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/src/vue/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>