vrtalk-web-sdk 0.1.532 → 0.1.533
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.
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="vrtalk-bvc-shell">
|
|
3
|
+
<div v-if="labelText" class="bvc-label">{{ labelText }}</div>
|
|
4
|
+
<div class="bvc-render-area">
|
|
5
|
+
<vrtalk-interaction-control-renderer
|
|
6
|
+
v-if="bound?.control"
|
|
7
|
+
:control="bound.control"
|
|
8
|
+
:value="value"
|
|
9
|
+
:placeholder="bound.placeholder"
|
|
10
|
+
:label="bound.label"
|
|
11
|
+
@update:value="(v: any) => $emit('update:value', v)"/>
|
|
12
|
+
</div>
|
|
13
|
+
<div v-if="descText" class="bvc-desc">{{ descText }}</div>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
import {computed} from 'vue'
|
|
19
|
+
import type {XrBoundVariableControl} from 'vrtalk-web-sdk'
|
|
20
|
+
import VrtalkInteractionControlRenderer from '../interaction-control/vrtalk-interaction-control-renderer.vue'
|
|
21
|
+
import {pickStr} from '../common/pick-str'
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Bound Variable Control 的纯展示外壳（SDK 共享，三端公用）
|
|
25
|
+
*
|
|
26
|
+
* 只负责布局：内边距 + label 顶部 + 控件垂直居中 + description 底部。
|
|
27
|
+
* 变量订阅 / 写回 / preview 取值都在调用方做：
|
|
28
|
+
* - player / unity-ui 运行时：变量引擎读写
|
|
29
|
+
* - console designer：用预览值
|
|
30
|
+
*
|
|
31
|
+
* 通过统一一个 shell，三端的监控面板 / 汉堡画布 / 表单 Action 看上去完全一致。
|
|
32
|
+
*/
|
|
33
|
+
const $props = defineProps<{
|
|
34
|
+
bound: XrBoundVariableControl
|
|
35
|
+
value: any
|
|
36
|
+
}>()
|
|
37
|
+
|
|
38
|
+
defineEmits<{ (e: 'update:value', v: any): void }>()
|
|
39
|
+
|
|
40
|
+
const labelText = computed(() => pickStr($props.bound?.label) || '')
|
|
41
|
+
const descText = computed(() => pickStr($props.bound?.description) || '')
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<style scoped lang="scss">
|
|
45
|
+
.vrtalk-bvc-shell {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: 100%;
|
|
50
|
+
padding: 8px 12px;
|
|
51
|
+
gap: 6px;
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
|
|
55
|
+
.bvc-label {
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
font-size: 13px;
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
color: inherit;
|
|
60
|
+
opacity: 0.9;
|
|
61
|
+
line-height: 1.3;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
white-space: nowrap;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.bvc-render-area {
|
|
68
|
+
flex: 1 1 auto;
|
|
69
|
+
min-height: 0;
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: stretch;
|
|
73
|
+
|
|
74
|
+
> * {
|
|
75
|
+
width: 100%;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.bvc-desc {
|
|
80
|
+
flex-shrink: 0;
|
|
81
|
+
font-size: 12px;
|
|
82
|
+
color: inherit;
|
|
83
|
+
opacity: 0.65;
|
|
84
|
+
line-height: 1.4;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
text-overflow: ellipsis;
|
|
87
|
+
white-space: nowrap;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
</style>
|