@lingxia/page-runtime 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/shared/runtime.d.ts +1 -12
- package/dist/shared/runtime.js +72 -43
- package/package.json +6 -32
- package/dist/react/LxInput.d.ts +0 -47
- package/dist/react/LxInput.js +0 -128
- package/dist/react/LxNavigator.d.ts +0 -23
- package/dist/react/LxNavigator.js +0 -61
- package/dist/react/LxPicker.d.ts +0 -27
- package/dist/react/LxPicker.js +0 -113
- package/dist/react/LxTextarea.d.ts +0 -47
- package/dist/react/LxTextarea.js +0 -118
- package/dist/react/LxVideo.d.ts +0 -5
- package/dist/react/LxVideo.js +0 -113
- package/dist/react/hook.d.ts +0 -39
- package/dist/react/hook.js +0 -212
- package/dist/react/index.d.ts +0 -6
- package/dist/react/index.js +0 -6
- package/dist/react/text_component_shared.d.ts +0 -5
- package/dist/react/text_component_shared.js +0 -33
- package/dist/vue/LxInput.vue +0 -92
- package/dist/vue/LxNavigator.vue +0 -79
- package/dist/vue/LxPicker.vue +0 -144
- package/dist/vue/LxTextarea.vue +0 -90
- package/dist/vue/LxVideo.vue +0 -111
- package/dist/vue/hook.d.ts +0 -42
- package/dist/vue/hook.js +0 -194
- package/dist/vue/index.d.ts +0 -7
- package/dist/vue/index.js +0 -6
- package/dist/vue/text_component_shared.d.ts +0 -3
- package/dist/vue/text_component_shared.js +0 -26
- package/dist/vue/types.d.ts +0 -101
- package/dist/vue/types.js +0 -1
- package/src/index.ts +0 -21
- package/src/react/LxInput.tsx +0 -224
- package/src/react/LxNavigator.tsx +0 -132
- package/src/react/LxPicker.tsx +0 -205
- package/src/react/LxTextarea.tsx +0 -216
- package/src/react/LxVideo.tsx +0 -166
- package/src/react/hook.ts +0 -317
- package/src/react/index.ts +0 -14
- package/src/react/text_component_shared.ts +0 -43
- package/src/shared/runtime.ts +0 -186
- package/src/vue/LxInput.vue +0 -92
- package/src/vue/LxNavigator.vue +0 -79
- package/src/vue/LxPicker.vue +0 -144
- package/src/vue/LxTextarea.vue +0 -90
- package/src/vue/LxVideo.vue +0 -111
- package/src/vue/hook.ts +0 -313
- package/src/vue/index.ts +0 -22
- package/src/vue/shims-vue.d.ts +0 -5
- package/src/vue/text_component_shared.ts +0 -33
- package/src/vue/types.ts +0 -107
package/dist/vue/LxNavigator.vue
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { ref, h, onMounted, onBeforeUnmount, useAttrs } from 'vue';
|
|
3
|
-
import type { LxNavigatorEvent } from '@lingxia/elements';
|
|
4
|
-
import { buildNavigatorNativeAttrs } from '@lingxia/elements';
|
|
5
|
-
import type { LxNavigatorProps } from './types.js';
|
|
6
|
-
import '@lingxia/elements';
|
|
7
|
-
|
|
8
|
-
const props = withDefaults(defineProps<LxNavigatorProps>(), {
|
|
9
|
-
openType: 'navigate',
|
|
10
|
-
delta: 1,
|
|
11
|
-
hoverClass: 'navigator-hover',
|
|
12
|
-
hoverStopPropagation: false,
|
|
13
|
-
hoverStartTime: 20,
|
|
14
|
-
hoverStayTime: 70,
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
const slots = defineSlots();
|
|
18
|
-
const attrs = useAttrs();
|
|
19
|
-
|
|
20
|
-
const emit = defineEmits<{
|
|
21
|
-
success: [e: LxNavigatorEvent];
|
|
22
|
-
fail: [e: LxNavigatorEvent];
|
|
23
|
-
complete: [e: LxNavigatorEvent];
|
|
24
|
-
}>();
|
|
25
|
-
|
|
26
|
-
const elementRef = ref<HTMLElement | null>(null);
|
|
27
|
-
|
|
28
|
-
const handleSuccess = (e: Event) => emit('success', e as LxNavigatorEvent);
|
|
29
|
-
const handleFail = (e: Event) => emit('fail', e as LxNavigatorEvent);
|
|
30
|
-
const handleComplete = (e: Event) => emit('complete', e as LxNavigatorEvent);
|
|
31
|
-
const successListener: EventListenerObject = { handleEvent: handleSuccess };
|
|
32
|
-
const failListener: EventListenerObject = { handleEvent: handleFail };
|
|
33
|
-
const completeListener: EventListenerObject = { handleEvent: handleComplete };
|
|
34
|
-
|
|
35
|
-
onMounted(() => {
|
|
36
|
-
const el = elementRef.value;
|
|
37
|
-
if (!el) return;
|
|
38
|
-
el.addEventListener('success', successListener);
|
|
39
|
-
el.addEventListener('fail', failListener);
|
|
40
|
-
el.addEventListener('complete', completeListener);
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
onBeforeUnmount(() => {
|
|
44
|
-
const el = elementRef.value;
|
|
45
|
-
if (!el) return;
|
|
46
|
-
el.removeEventListener('success', successListener);
|
|
47
|
-
el.removeEventListener('fail', failListener);
|
|
48
|
-
el.removeEventListener('complete', completeListener);
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
defineExpose({ el: elementRef });
|
|
52
|
-
|
|
53
|
-
const render = () => h(
|
|
54
|
-
'lx-navigator',
|
|
55
|
-
{
|
|
56
|
-
ref: elementRef,
|
|
57
|
-
...buildNavigatorNativeAttrs({
|
|
58
|
-
url: props.url,
|
|
59
|
-
openType: props.openType,
|
|
60
|
-
target: props.target,
|
|
61
|
-
delta: props.delta,
|
|
62
|
-
appId: props.appId,
|
|
63
|
-
path: props.path,
|
|
64
|
-
phoneNumber: props.phoneNumber,
|
|
65
|
-
hoverClass: props.hoverClass,
|
|
66
|
-
hoverStopPropagation: props.hoverStopPropagation,
|
|
67
|
-
hoverStartTime: props.hoverStartTime,
|
|
68
|
-
hoverStayTime: props.hoverStayTime,
|
|
69
|
-
}, attrs as Record<string, unknown>),
|
|
70
|
-
class: props.class ?? attrs.class,
|
|
71
|
-
style: props.style ?? attrs.style,
|
|
72
|
-
},
|
|
73
|
-
slots.default?.()
|
|
74
|
-
);
|
|
75
|
-
</script>
|
|
76
|
-
|
|
77
|
-
<template>
|
|
78
|
-
<render />
|
|
79
|
-
</template>
|
package/dist/vue/LxPicker.vue
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { ref, computed, h, onBeforeUnmount, useAttrs, useId, watch } from 'vue';
|
|
3
|
-
import { registerPickerComponent } from '@lingxia/elements';
|
|
4
|
-
import {
|
|
5
|
-
buildPickerNativeAttrs,
|
|
6
|
-
getPickerDisplayText,
|
|
7
|
-
getPickerValueFromIndex,
|
|
8
|
-
} from '@lingxia/elements';
|
|
9
|
-
import { bindElementEvents, getCustomEventDetail, unbindElementEvents } from './text_component_shared.js';
|
|
10
|
-
import type { LxPickerProps } from './types.js';
|
|
11
|
-
|
|
12
|
-
const props = withDefaults(defineProps<LxPickerProps>(), {
|
|
13
|
-
placeholder: 'Please select',
|
|
14
|
-
disabled: false,
|
|
15
|
-
});
|
|
16
|
-
const attrs = useAttrs();
|
|
17
|
-
|
|
18
|
-
const slots = defineSlots();
|
|
19
|
-
|
|
20
|
-
const emit = defineEmits<{
|
|
21
|
-
'update:modelValue': [value: string | string[]];
|
|
22
|
-
confirm: [value: string | string[]];
|
|
23
|
-
cancel: [];
|
|
24
|
-
scroll: [value: string | string[]];
|
|
25
|
-
}>();
|
|
26
|
-
|
|
27
|
-
if (typeof window !== 'undefined') {
|
|
28
|
-
registerPickerComponent();
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const visible = ref(false);
|
|
32
|
-
const vueId = useId();
|
|
33
|
-
const pickerId = computed(() => `lx-picker-${vueId.replace(/[:]/g, '')}`);
|
|
34
|
-
const pickerRef = ref<HTMLElement | null>(null);
|
|
35
|
-
let boundElement: HTMLElement | null = null;
|
|
36
|
-
const pickerEventListeners: Record<string, EventListenerObject> = {
|
|
37
|
-
change: {
|
|
38
|
-
handleEvent: (event: Event) => handleChange(event),
|
|
39
|
-
},
|
|
40
|
-
scroll: {
|
|
41
|
-
handleEvent: (event: Event) => handleScroll(event),
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const displayText = computed(() => getPickerDisplayText(props.modelValue, props.fields));
|
|
46
|
-
|
|
47
|
-
function handleChange(e: Event) {
|
|
48
|
-
props.onChange?.(e);
|
|
49
|
-
const detail = getCustomEventDetail<{
|
|
50
|
-
confirmed?: boolean;
|
|
51
|
-
cancelled?: boolean;
|
|
52
|
-
value?: string | string[];
|
|
53
|
-
index?: number | number[];
|
|
54
|
-
}>(e);
|
|
55
|
-
if (detail.confirmed) {
|
|
56
|
-
if (props.mode === 'date' || props.mode === 'time') {
|
|
57
|
-
const nextValue = detail.value ?? '';
|
|
58
|
-
emit('update:modelValue', nextValue);
|
|
59
|
-
emit('confirm', nextValue);
|
|
60
|
-
} else if (detail.index !== undefined) {
|
|
61
|
-
const nextValue = getPickerValueFromIndex(props.columns, detail.index);
|
|
62
|
-
emit('update:modelValue', nextValue);
|
|
63
|
-
emit('confirm', nextValue);
|
|
64
|
-
}
|
|
65
|
-
visible.value = false;
|
|
66
|
-
} else if (detail.cancelled) {
|
|
67
|
-
emit('cancel');
|
|
68
|
-
visible.value = false;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function handleScroll(e: Event) {
|
|
73
|
-
props.onNativeScroll?.(e);
|
|
74
|
-
const detail = getCustomEventDetail<{
|
|
75
|
-
value?: string | string[];
|
|
76
|
-
index?: number | number[];
|
|
77
|
-
}>(e);
|
|
78
|
-
if (detail.value !== undefined) {
|
|
79
|
-
emit('scroll', detail.value);
|
|
80
|
-
} else if (detail.index !== undefined) {
|
|
81
|
-
emit('scroll', getPickerValueFromIndex(props.columns, detail.index));
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
function handleClick() {
|
|
86
|
-
if (!props.disabled) visible.value = true;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
watch(pickerRef, (element) => {
|
|
90
|
-
boundElement = bindElementEvents(boundElement, element, pickerEventListeners);
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
onBeforeUnmount(() => {
|
|
94
|
-
unbindElementEvents(boundElement, pickerEventListeners);
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
const pickerProps = computed(() => {
|
|
98
|
-
return buildPickerNativeAttrs({
|
|
99
|
-
id: pickerId.value,
|
|
100
|
-
columns: props.columns,
|
|
101
|
-
mode: props.mode,
|
|
102
|
-
start: props.start,
|
|
103
|
-
end: props.end,
|
|
104
|
-
fields: props.fields,
|
|
105
|
-
modelValue: props.modelValue,
|
|
106
|
-
cancelText: props.cancelText,
|
|
107
|
-
cancelTextColor: props.cancelTextColor,
|
|
108
|
-
cancelButtonColor: props.cancelButtonColor,
|
|
109
|
-
confirmText: props.confirmText,
|
|
110
|
-
confirmTextColor: props.confirmTextColor,
|
|
111
|
-
confirmButtonColor: props.confirmButtonColor,
|
|
112
|
-
}, attrs as Record<string, unknown>);
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
const triggerStyle = computed(() => ({
|
|
116
|
-
display: 'flex',
|
|
117
|
-
alignItems: 'center',
|
|
118
|
-
justifyContent: 'space-between',
|
|
119
|
-
padding: '12px 14px',
|
|
120
|
-
backgroundColor: '#fff',
|
|
121
|
-
border: '1px solid #e5e7eb',
|
|
122
|
-
borderRadius: '8px',
|
|
123
|
-
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
124
|
-
opacity: props.disabled ? 0.5 : 1,
|
|
125
|
-
width: '100%',
|
|
126
|
-
boxSizing: 'border-box',
|
|
127
|
-
}));
|
|
128
|
-
|
|
129
|
-
defineExpose({ el: pickerRef });
|
|
130
|
-
|
|
131
|
-
const renderPicker = () => visible.value ? h('lx-picker', { ref: pickerRef, ...pickerProps.value }) : null;
|
|
132
|
-
</script>
|
|
133
|
-
|
|
134
|
-
<template>
|
|
135
|
-
<slot :open="handleClick" :disabled="props.disabled">
|
|
136
|
-
<div :class="props.class ?? attrs.class" :style="[triggerStyle, props.style ?? attrs.style]" @click="handleClick">
|
|
137
|
-
<span :style="{ color: modelValue ? '#111' : '#9ca3af' }">{{ displayText || placeholder }}</span>
|
|
138
|
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2">
|
|
139
|
-
<path d="M6 9l6 6 6-6" />
|
|
140
|
-
</svg>
|
|
141
|
-
</div>
|
|
142
|
-
</slot>
|
|
143
|
-
<renderPicker />
|
|
144
|
-
</template>
|
package/dist/vue/LxTextarea.vue
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { computed, h, onBeforeUnmount, ref, useAttrs, watch } from 'vue';
|
|
3
|
-
import { registerTextareaComponent } from '@lingxia/elements';
|
|
4
|
-
import { buildTextareaNativeAttrs } from '@lingxia/elements';
|
|
5
|
-
import type { LxTextareaProps } from './types.js';
|
|
6
|
-
import {
|
|
7
|
-
bindElementEvents,
|
|
8
|
-
getCustomEventDetail,
|
|
9
|
-
unbindElementEvents,
|
|
10
|
-
} from './text_component_shared.js';
|
|
11
|
-
|
|
12
|
-
const props = withDefaults(defineProps<LxTextareaProps>(), {
|
|
13
|
-
disabled: false,
|
|
14
|
-
});
|
|
15
|
-
const attrs = useAttrs();
|
|
16
|
-
|
|
17
|
-
const emit = defineEmits<{
|
|
18
|
-
'update:modelValue': [value: string];
|
|
19
|
-
input: [detail: Record<string, unknown>];
|
|
20
|
-
change: [detail: Record<string, unknown>];
|
|
21
|
-
focus: [detail: Record<string, unknown>];
|
|
22
|
-
blur: [detail: Record<string, unknown>];
|
|
23
|
-
confirm: [detail: Record<string, unknown>];
|
|
24
|
-
lineChange: [detail: Record<string, unknown>];
|
|
25
|
-
keyboardHeightChange: [detail: Record<string, unknown>];
|
|
26
|
-
}>();
|
|
27
|
-
|
|
28
|
-
if (typeof window !== 'undefined') {
|
|
29
|
-
registerTextareaComponent();
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const elementRef = ref<HTMLElement | null>(null);
|
|
33
|
-
let boundElement: HTMLElement | null = null;
|
|
34
|
-
|
|
35
|
-
const textareaEventListeners: Record<string, EventListenerObject> = {
|
|
36
|
-
input: {
|
|
37
|
-
handleEvent: (event: Event) => {
|
|
38
|
-
const detail = getCustomEventDetail<Record<string, unknown>>(event);
|
|
39
|
-
if (typeof detail.value === 'string') {
|
|
40
|
-
emit('update:modelValue', detail.value);
|
|
41
|
-
}
|
|
42
|
-
emit('input', detail);
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
change: {
|
|
46
|
-
handleEvent: (event: Event) => emit('change', getCustomEventDetail<Record<string, unknown>>(event)),
|
|
47
|
-
},
|
|
48
|
-
focus: {
|
|
49
|
-
handleEvent: (event: Event) => emit('focus', getCustomEventDetail<Record<string, unknown>>(event)),
|
|
50
|
-
},
|
|
51
|
-
blur: {
|
|
52
|
-
handleEvent: (event: Event) => emit('blur', getCustomEventDetail<Record<string, unknown>>(event)),
|
|
53
|
-
},
|
|
54
|
-
confirm: {
|
|
55
|
-
handleEvent: (event: Event) => emit('confirm', getCustomEventDetail<Record<string, unknown>>(event)),
|
|
56
|
-
},
|
|
57
|
-
linechange: {
|
|
58
|
-
handleEvent: (event: Event) => emit('lineChange', getCustomEventDetail<Record<string, unknown>>(event)),
|
|
59
|
-
},
|
|
60
|
-
keyboardheightchange: {
|
|
61
|
-
handleEvent: (event: Event) => emit('keyboardHeightChange', getCustomEventDetail<Record<string, unknown>>(event)),
|
|
62
|
-
},
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
watch(elementRef, (element) => {
|
|
66
|
-
boundElement = bindElementEvents(boundElement, element, textareaEventListeners);
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
onBeforeUnmount(() => {
|
|
70
|
-
unbindElementEvents(boundElement, textareaEventListeners);
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
const textareaProps = computed<Record<string, unknown>>(() => {
|
|
74
|
-
const result: Record<string, unknown> = buildTextareaNativeAttrs({
|
|
75
|
-
...props,
|
|
76
|
-
id: props.id ?? (typeof attrs.id === 'string' ? attrs.id : undefined),
|
|
77
|
-
}, attrs as Record<string, unknown>, elementRef.value !== null);
|
|
78
|
-
result.class = props.class ?? attrs.class;
|
|
79
|
-
result.style = props.style ?? attrs.style;
|
|
80
|
-
return result;
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
defineExpose({ el: elementRef });
|
|
84
|
-
|
|
85
|
-
const renderTextarea = () => h('lx-textarea', { ref: elementRef, ...textareaProps.value });
|
|
86
|
-
</script>
|
|
87
|
-
|
|
88
|
-
<template>
|
|
89
|
-
<renderTextarea />
|
|
90
|
-
</template>
|
package/dist/vue/LxVideo.vue
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { ref, computed, h, onBeforeUnmount, useAttrs, useId, watch } from 'vue';
|
|
3
|
-
import { registerVideoComponent } from '@lingxia/elements';
|
|
4
|
-
import {
|
|
5
|
-
buildVideoNativeAttrs,
|
|
6
|
-
VIDEO_DOM_EVENT_MAP,
|
|
7
|
-
} from '@lingxia/elements';
|
|
8
|
-
import { bindElementEvents, unbindElementEvents } from './text_component_shared.js';
|
|
9
|
-
import type { LxVideoProps } from './types.js';
|
|
10
|
-
|
|
11
|
-
const props = withDefaults(defineProps<LxVideoProps>(), {
|
|
12
|
-
autoplay: false,
|
|
13
|
-
loop: false,
|
|
14
|
-
muted: false,
|
|
15
|
-
controls: true,
|
|
16
|
-
progressBar: true,
|
|
17
|
-
live: false,
|
|
18
|
-
});
|
|
19
|
-
const attrs = useAttrs();
|
|
20
|
-
|
|
21
|
-
const emit = defineEmits<{
|
|
22
|
-
playRequest: [e: Event];
|
|
23
|
-
play: [e: Event];
|
|
24
|
-
playing: [e: Event];
|
|
25
|
-
pause: [e: Event];
|
|
26
|
-
stop: [e: Event];
|
|
27
|
-
ended: [e: Event];
|
|
28
|
-
timeUpdate: [e: Event];
|
|
29
|
-
error: [e: Event];
|
|
30
|
-
loadedMetadata: [e: Event];
|
|
31
|
-
fullscreenChange: [e: Event];
|
|
32
|
-
waiting: [e: Event];
|
|
33
|
-
qualityChange: [e: Event];
|
|
34
|
-
rateChange: [e: Event];
|
|
35
|
-
}>();
|
|
36
|
-
|
|
37
|
-
if (typeof window !== 'undefined') {
|
|
38
|
-
registerVideoComponent();
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const elementRef = ref<HTMLElement | null>(null);
|
|
42
|
-
const vueId = useId();
|
|
43
|
-
let boundElement: HTMLElement | null = null;
|
|
44
|
-
|
|
45
|
-
const resolvedId = computed(() => props.id || `lx-video-${vueId.replace(/[:]/g, '')}`);
|
|
46
|
-
|
|
47
|
-
const videoEventListeners: Record<string, EventListenerObject> = {
|
|
48
|
-
[VIDEO_DOM_EVENT_MAP.onPlayRequest]: { handleEvent: (event: Event) => emit('playRequest', event) },
|
|
49
|
-
[VIDEO_DOM_EVENT_MAP.onPlay]: { handleEvent: (event: Event) => emit('play', event) },
|
|
50
|
-
[VIDEO_DOM_EVENT_MAP.onPlaying]: { handleEvent: (event: Event) => emit('playing', event) },
|
|
51
|
-
[VIDEO_DOM_EVENT_MAP.onPause]: { handleEvent: (event: Event) => emit('pause', event) },
|
|
52
|
-
[VIDEO_DOM_EVENT_MAP.onStop]: { handleEvent: (event: Event) => emit('stop', event) },
|
|
53
|
-
[VIDEO_DOM_EVENT_MAP.onEnded]: { handleEvent: (event: Event) => emit('ended', event) },
|
|
54
|
-
[VIDEO_DOM_EVENT_MAP.onTimeUpdate]: { handleEvent: (event: Event) => emit('timeUpdate', event) },
|
|
55
|
-
[VIDEO_DOM_EVENT_MAP.onError]: { handleEvent: (event: Event) => emit('error', event) },
|
|
56
|
-
[VIDEO_DOM_EVENT_MAP.onLoadedMetadata]: { handleEvent: (event: Event) => emit('loadedMetadata', event) },
|
|
57
|
-
[VIDEO_DOM_EVENT_MAP.onFullscreenChange]: { handleEvent: (event: Event) => emit('fullscreenChange', event) },
|
|
58
|
-
[VIDEO_DOM_EVENT_MAP.onWaiting]: { handleEvent: (event: Event) => emit('waiting', event) },
|
|
59
|
-
[VIDEO_DOM_EVENT_MAP.onQualityChange]: { handleEvent: (event: Event) => emit('qualityChange', event) },
|
|
60
|
-
[VIDEO_DOM_EVENT_MAP.onRateChange]: { handleEvent: (event: Event) => emit('rateChange', event) },
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
watch(elementRef, (element) => {
|
|
64
|
-
boundElement = bindElementEvents(boundElement, element, videoEventListeners);
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
onBeforeUnmount(() => {
|
|
68
|
-
unbindElementEvents(boundElement, videoEventListeners);
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
watch(
|
|
72
|
-
[elementRef, () => props.rotate, () => props.objectFit],
|
|
73
|
-
() => {
|
|
74
|
-
const el = elementRef.value;
|
|
75
|
-
if (!el) return;
|
|
76
|
-
const rotate = props.rotate;
|
|
77
|
-
if (rotate === undefined || rotate === null || rotate === '') {
|
|
78
|
-
el.removeAttribute('rotate');
|
|
79
|
-
} else {
|
|
80
|
-
el.setAttribute('rotate', String(rotate).trim());
|
|
81
|
-
}
|
|
82
|
-
const objectFit = props.objectFit;
|
|
83
|
-
if (objectFit === undefined || objectFit === null || objectFit === '') {
|
|
84
|
-
el.removeAttribute('object-fit');
|
|
85
|
-
} else {
|
|
86
|
-
el.setAttribute('object-fit', String(objectFit).trim().toLowerCase());
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
{ immediate: true }
|
|
90
|
-
);
|
|
91
|
-
|
|
92
|
-
const domProps = computed(() => {
|
|
93
|
-
const result = buildVideoNativeAttrs({
|
|
94
|
-
...props,
|
|
95
|
-
id: resolvedId.value,
|
|
96
|
-
}, attrs as Record<string, unknown>);
|
|
97
|
-
return {
|
|
98
|
-
...result,
|
|
99
|
-
class: props.class ?? attrs.class,
|
|
100
|
-
style: props.style ?? attrs.style,
|
|
101
|
-
};
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
defineExpose({ el: elementRef });
|
|
105
|
-
|
|
106
|
-
const render = () => h('lx-video', { ref: elementRef, ...domProps.value });
|
|
107
|
-
</script>
|
|
108
|
-
|
|
109
|
-
<template>
|
|
110
|
-
<render />
|
|
111
|
-
</template>
|
package/dist/vue/hook.d.ts
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { type Ref } from "vue";
|
|
2
|
-
import type { LxChannel, LxBridgeError, LxStream } from "@lingxia/bridge";
|
|
3
|
-
import { type ActionMap, type ChannelIn, type ChannelOut, type MethodParams, type ParamsSource, type Snapshot, type StreamData, type StreamResult } from "../shared/runtime.js";
|
|
4
|
-
type MethodSource<T> = T | Ref<T>;
|
|
5
|
-
export declare function useLxPage<TData = Snapshot, TActions extends ActionMap = ActionMap>(): {
|
|
6
|
-
data: TData;
|
|
7
|
-
actions: TActions;
|
|
8
|
-
};
|
|
9
|
-
export interface LxStreamOptions<TData, TReduced> {
|
|
10
|
-
params?: unknown | (() => unknown);
|
|
11
|
-
manual?: boolean;
|
|
12
|
-
reduce?: (accumulated: TReduced, chunk: TData) => TReduced;
|
|
13
|
-
initial?: TReduced;
|
|
14
|
-
}
|
|
15
|
-
export interface LxStreamState<TData, TResult = unknown> {
|
|
16
|
-
data: Ref<TData | undefined>;
|
|
17
|
-
result: Ref<TResult | undefined>;
|
|
18
|
-
error: Ref<LxBridgeError | undefined>;
|
|
19
|
-
streaming: Ref<boolean>;
|
|
20
|
-
cancel: () => void;
|
|
21
|
-
start: () => void;
|
|
22
|
-
}
|
|
23
|
-
export declare function useLxStream<TMethod extends (...args: any[]) => LxStream<any, any>, TReduced = StreamData<TMethod>>(method: MethodSource<TMethod>, options?: LxStreamOptions<StreamData<TMethod>, TReduced> & {
|
|
24
|
-
params?: ParamsSource<MethodParams<TMethod>>;
|
|
25
|
-
}): LxStreamState<TReduced extends StreamData<TMethod> ? StreamData<TMethod> : TReduced, StreamResult<TMethod>>;
|
|
26
|
-
export interface LxChannelOptions {
|
|
27
|
-
params?: unknown | (() => unknown);
|
|
28
|
-
manual?: boolean;
|
|
29
|
-
}
|
|
30
|
-
export interface LxChannelState<TData, TOut = TData> {
|
|
31
|
-
last: Ref<TData | undefined>;
|
|
32
|
-
error: Ref<LxBridgeError | undefined>;
|
|
33
|
-
connecting: Ref<boolean>;
|
|
34
|
-
connected: Ref<boolean>;
|
|
35
|
-
send: (payload: TOut) => void;
|
|
36
|
-
close: (code?: string, reason?: string) => void;
|
|
37
|
-
reopen: () => void;
|
|
38
|
-
}
|
|
39
|
-
export declare function useLxChannel<TMethod extends (...args: any[]) => Promise<LxChannel<any, any>>>(method: MethodSource<TMethod>, options?: LxChannelOptions & {
|
|
40
|
-
params?: ParamsSource<MethodParams<TMethod>>;
|
|
41
|
-
}): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>>;
|
|
42
|
-
export {};
|
package/dist/vue/hook.js
DELETED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
import { onUnmounted, reactive, ref, unref, watch, } from "vue";
|
|
2
|
-
import { ensurePageBridgeSubscription, getMethodKey, getPageActions, invokeMethod, resolveParams, stableParamKey, subscribePageData, toBridgeError, } from "../shared/runtime.js";
|
|
3
|
-
function resolveMethod(source) {
|
|
4
|
-
return unref(source);
|
|
5
|
-
}
|
|
6
|
-
const reactiveSnapshot = reactive({});
|
|
7
|
-
let snapshotSubscribed = false;
|
|
8
|
-
function ensureReactiveSnapshot() {
|
|
9
|
-
if (snapshotSubscribed)
|
|
10
|
-
return;
|
|
11
|
-
snapshotSubscribed = true;
|
|
12
|
-
subscribePageData((next) => {
|
|
13
|
-
const normalized = next && typeof next === "object" ? next : {};
|
|
14
|
-
for (const key of Object.keys(reactiveSnapshot)) {
|
|
15
|
-
if (!Object.prototype.hasOwnProperty.call(normalized, key)) {
|
|
16
|
-
delete reactiveSnapshot[key];
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
Object.assign(reactiveSnapshot, normalized);
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
export function useLxPage() {
|
|
23
|
-
ensurePageBridgeSubscription();
|
|
24
|
-
ensureReactiveSnapshot();
|
|
25
|
-
return { data: reactiveSnapshot, actions: getPageActions() };
|
|
26
|
-
}
|
|
27
|
-
export function useLxStream(method, options) {
|
|
28
|
-
const data = ref(((options === null || options === void 0 ? void 0 : options.reduce) ? options.initial : undefined));
|
|
29
|
-
const result = ref(undefined);
|
|
30
|
-
const error = ref(undefined);
|
|
31
|
-
const streaming = ref(false);
|
|
32
|
-
let handle = null;
|
|
33
|
-
let acc = options === null || options === void 0 ? void 0 : options.initial;
|
|
34
|
-
let runId = 0;
|
|
35
|
-
function cancel() {
|
|
36
|
-
runId += 1;
|
|
37
|
-
handle === null || handle === void 0 ? void 0 : handle.cancel();
|
|
38
|
-
handle = null;
|
|
39
|
-
streaming.value = false;
|
|
40
|
-
}
|
|
41
|
-
function start() {
|
|
42
|
-
handle === null || handle === void 0 ? void 0 : handle.cancel();
|
|
43
|
-
const currentRunId = runId + 1;
|
|
44
|
-
runId = currentRunId;
|
|
45
|
-
acc = options === null || options === void 0 ? void 0 : options.initial;
|
|
46
|
-
data.value = ((options === null || options === void 0 ? void 0 : options.reduce) ? options.initial : undefined);
|
|
47
|
-
result.value = undefined;
|
|
48
|
-
error.value = undefined;
|
|
49
|
-
streaming.value = true;
|
|
50
|
-
let nextHandle;
|
|
51
|
-
try {
|
|
52
|
-
const params = resolveParams(options === null || options === void 0 ? void 0 : options.params);
|
|
53
|
-
nextHandle = invokeMethod(resolveMethod(method), params);
|
|
54
|
-
}
|
|
55
|
-
catch (err) {
|
|
56
|
-
if (runId !== currentRunId)
|
|
57
|
-
return;
|
|
58
|
-
handle = null;
|
|
59
|
-
error.value = toBridgeError(err);
|
|
60
|
-
streaming.value = false;
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
handle = nextHandle;
|
|
64
|
-
nextHandle.on("data", (chunk) => {
|
|
65
|
-
if (runId !== currentRunId)
|
|
66
|
-
return;
|
|
67
|
-
if (options === null || options === void 0 ? void 0 : options.reduce) {
|
|
68
|
-
acc = options.reduce(acc, chunk);
|
|
69
|
-
data.value = acc;
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
data.value = chunk;
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
nextHandle.on("end", (res) => {
|
|
76
|
-
if (runId !== currentRunId)
|
|
77
|
-
return;
|
|
78
|
-
handle = null;
|
|
79
|
-
result.value = res;
|
|
80
|
-
streaming.value = false;
|
|
81
|
-
});
|
|
82
|
-
nextHandle.on("error", (err) => {
|
|
83
|
-
if (runId !== currentRunId)
|
|
84
|
-
return;
|
|
85
|
-
handle = null;
|
|
86
|
-
error.value = err;
|
|
87
|
-
streaming.value = false;
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
watch(() => {
|
|
91
|
-
var _a;
|
|
92
|
-
if (options === null || options === void 0 ? void 0 : options.manual)
|
|
93
|
-
return null;
|
|
94
|
-
const resolvedMethod = resolveMethod(method);
|
|
95
|
-
return [
|
|
96
|
-
(_a = getMethodKey(resolvedMethod)) !== null && _a !== void 0 ? _a : resolvedMethod,
|
|
97
|
-
stableParamKey(resolveParams(options === null || options === void 0 ? void 0 : options.params)),
|
|
98
|
-
];
|
|
99
|
-
}, () => {
|
|
100
|
-
if (!(options === null || options === void 0 ? void 0 : options.manual)) {
|
|
101
|
-
start();
|
|
102
|
-
}
|
|
103
|
-
}, { immediate: !(options === null || options === void 0 ? void 0 : options.manual) });
|
|
104
|
-
onUnmounted(() => {
|
|
105
|
-
runId += 1;
|
|
106
|
-
handle === null || handle === void 0 ? void 0 : handle.cancel();
|
|
107
|
-
handle = null;
|
|
108
|
-
});
|
|
109
|
-
return { data, result, error, streaming, cancel, start };
|
|
110
|
-
}
|
|
111
|
-
export function useLxChannel(method, options) {
|
|
112
|
-
const last = ref(undefined);
|
|
113
|
-
const error = ref(undefined);
|
|
114
|
-
const connecting = ref(false);
|
|
115
|
-
const connected = ref(false);
|
|
116
|
-
let ch = null;
|
|
117
|
-
let runId = 0;
|
|
118
|
-
function send(payload) {
|
|
119
|
-
ch === null || ch === void 0 ? void 0 : ch.send(payload);
|
|
120
|
-
}
|
|
121
|
-
function close(code, reason) {
|
|
122
|
-
runId += 1;
|
|
123
|
-
ch === null || ch === void 0 ? void 0 : ch.close(code, reason);
|
|
124
|
-
ch = null;
|
|
125
|
-
connecting.value = false;
|
|
126
|
-
connected.value = false;
|
|
127
|
-
}
|
|
128
|
-
function reopen() {
|
|
129
|
-
ch === null || ch === void 0 ? void 0 : ch.close();
|
|
130
|
-
ch = null;
|
|
131
|
-
const thisRunId = ++runId;
|
|
132
|
-
last.value = undefined;
|
|
133
|
-
error.value = undefined;
|
|
134
|
-
connecting.value = true;
|
|
135
|
-
connected.value = false;
|
|
136
|
-
Promise.resolve(invokeMethod(resolveMethod(method), resolveParams(options === null || options === void 0 ? void 0 : options.params)))
|
|
137
|
-
.then((nextChannel) => {
|
|
138
|
-
if (runId !== thisRunId) {
|
|
139
|
-
nextChannel.close();
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
|
-
ch = nextChannel;
|
|
143
|
-
connecting.value = false;
|
|
144
|
-
connected.value = true;
|
|
145
|
-
nextChannel.on("data", (payload) => {
|
|
146
|
-
if (runId !== thisRunId)
|
|
147
|
-
return;
|
|
148
|
-
last.value = payload;
|
|
149
|
-
});
|
|
150
|
-
nextChannel.on("close", () => {
|
|
151
|
-
if (runId !== thisRunId)
|
|
152
|
-
return;
|
|
153
|
-
ch = null;
|
|
154
|
-
connecting.value = false;
|
|
155
|
-
connected.value = false;
|
|
156
|
-
});
|
|
157
|
-
nextChannel.on("error", (err) => {
|
|
158
|
-
if (runId !== thisRunId)
|
|
159
|
-
return;
|
|
160
|
-
ch = null;
|
|
161
|
-
error.value = err;
|
|
162
|
-
connecting.value = false;
|
|
163
|
-
connected.value = false;
|
|
164
|
-
});
|
|
165
|
-
})
|
|
166
|
-
.catch((err) => {
|
|
167
|
-
if (runId !== thisRunId)
|
|
168
|
-
return;
|
|
169
|
-
error.value = toBridgeError(err);
|
|
170
|
-
connecting.value = false;
|
|
171
|
-
connected.value = false;
|
|
172
|
-
});
|
|
173
|
-
}
|
|
174
|
-
watch(() => {
|
|
175
|
-
var _a;
|
|
176
|
-
if (options === null || options === void 0 ? void 0 : options.manual)
|
|
177
|
-
return null;
|
|
178
|
-
const resolvedMethod = resolveMethod(method);
|
|
179
|
-
return [
|
|
180
|
-
(_a = getMethodKey(resolvedMethod)) !== null && _a !== void 0 ? _a : resolvedMethod,
|
|
181
|
-
stableParamKey(resolveParams(options === null || options === void 0 ? void 0 : options.params)),
|
|
182
|
-
];
|
|
183
|
-
}, () => {
|
|
184
|
-
if (!(options === null || options === void 0 ? void 0 : options.manual)) {
|
|
185
|
-
reopen();
|
|
186
|
-
}
|
|
187
|
-
}, { immediate: !(options === null || options === void 0 ? void 0 : options.manual) });
|
|
188
|
-
onUnmounted(() => {
|
|
189
|
-
runId += 1;
|
|
190
|
-
ch === null || ch === void 0 ? void 0 : ch.close();
|
|
191
|
-
ch = null;
|
|
192
|
-
});
|
|
193
|
-
return { last, error, connecting, connected, send, close, reopen };
|
|
194
|
-
}
|
package/dist/vue/index.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { useLxPage, useLxStream, useLxChannel, type LxStreamOptions, type LxStreamState, type LxChannelOptions, type LxChannelState, } from "./hook.js";
|
|
2
|
-
export { default as LxVideo } from "./LxVideo.vue";
|
|
3
|
-
export { default as LxPicker } from "./LxPicker.vue";
|
|
4
|
-
export { default as LxNavigator } from "./LxNavigator.vue";
|
|
5
|
-
export { default as LxInput } from "./LxInput.vue";
|
|
6
|
-
export { default as LxTextarea } from "./LxTextarea.vue";
|
|
7
|
-
export type { LxVideoProps, LxPickerProps, LxNavigatorProps, LxNavigatorEvent, LxInputProps, LxTextareaProps, } from "./types.js";
|
package/dist/vue/index.js
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
export { useLxPage, useLxStream, useLxChannel, } from "./hook.js";
|
|
2
|
-
export { default as LxVideo } from "./LxVideo.vue";
|
|
3
|
-
export { default as LxPicker } from "./LxPicker.vue";
|
|
4
|
-
export { default as LxNavigator } from "./LxNavigator.vue";
|
|
5
|
-
export { default as LxInput } from "./LxInput.vue";
|
|
6
|
-
export { default as LxTextarea } from "./LxTextarea.vue";
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export declare function getCustomEventDetail<T>(event: Event): T;
|
|
2
|
-
export declare function bindElementEvents(currentBoundElement: HTMLElement | null, nextElement: HTMLElement | null, listeners: Record<string, EventListenerObject>): HTMLElement | null;
|
|
3
|
-
export declare function unbindElementEvents(boundElement: HTMLElement | null, listeners: Record<string, EventListenerObject>): void;
|