Skip to content

Commit a29c591

Browse files
committed
Dev environment - Add VueUiDashboard testing arena
1 parent fc222e0 commit a29c591

File tree

1 file changed

+152
-0
lines changed

1 file changed

+152
-0
lines changed
Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<script setup>
2+
import { ref, computed, onMounted, markRaw } from "vue";
3+
import LocalVueUiDashboard from '../src/components/vue-ui-dashboard.vue';
4+
import Box from "./Box.vue";
5+
import convertArrayToObject from "./convertModel";
6+
import SomeTest from "../src/SomeTest.vue";
7+
8+
const model= ref([
9+
{ key: 'locked', def: false, type: 'checkbox' },
10+
11+
{ key: 'style.board.backgroundColor', def: '#e1e5e8', type: 'color'},
12+
{ key: 'style.board.color', def: '#4A4A4A', type: 'color'},
13+
{ key: 'style.board.aspectRatio', def: '1/1.4141', type: 'text'},
14+
{ key: 'style.board.border', def: 'none', type: 'text'},
15+
16+
{ key: 'style.item.backgroundColor', def: '#FFFFFF', type: 'color'},
17+
{ key: 'style.item.borderColor', def: '#FF0000', type: 'color'},
18+
19+
{ key: 'style.resizeHandles.backgroundColor', def: '#00F', type: 'color'},
20+
{ key: 'style.resizeHandles.border', def: '2px solid #FF0000', type: 'text'},
21+
22+
{ key: 'userOptions.show', def: true, type: 'checkbox' },
23+
{ key: 'userOptions.showOnChartHover', def: true, type: 'checkbox'},
24+
25+
])
26+
27+
const config = computed(() => {
28+
const c = convertArrayToObject(model.value);
29+
return {
30+
...c,
31+
formatter: ({value}) => {
32+
return `f | ${value}`
33+
}
34+
}
35+
})
36+
37+
const step = ref(0)
38+
39+
const gaugeDataset = ref({
40+
base: 0,
41+
value: 4.2,
42+
series: [
43+
{
44+
from: 0,
45+
to: 3,
46+
},
47+
{
48+
from: 3,
49+
to: 4,
50+
},
51+
{
52+
from: 4,
53+
to: 5,
54+
},
55+
],
56+
});
57+
58+
const onionDataset = ref([
59+
{
60+
name: "Serie 1",
61+
percentage: 90,
62+
prefix: "",
63+
suffix: "",
64+
},
65+
{
66+
name: "Serie 2",
67+
percentage: 50,
68+
prefix: "",
69+
suffix: "",
70+
},
71+
{
72+
name: "Serie 3",
73+
percentage: 75,
74+
prefix: "",
75+
suffix: "",
76+
},
77+
{
78+
name: "Serie 4",
79+
percentage: 10,
80+
prefix: "",
81+
suffix: "",
82+
},
83+
]);
84+
85+
const dataset = ref([
86+
{
87+
id: 2,
88+
width: 30,
89+
height: 30,
90+
left: 10,
91+
top: 4,
92+
component: "VueUiGauge",
93+
props: { config: { userOptions: { show: false }, responsive: true }, dataset: gaugeDataset.value },
94+
},
95+
{
96+
id: 2,
97+
width: 40,
98+
height: 40,
99+
left: 50,
100+
top: 4,
101+
component: "VueUiOnion",
102+
props: { config: { userOptions: { show: false }, responsive: false }, dataset: onionDataset.value },
103+
},
104+
{
105+
id: 3,
106+
width: 20,
107+
height: 5,
108+
left: 10,
109+
top: 50,
110+
component: markRaw(SomeTest),
111+
props: { str: 'SOME TEST' },
112+
},
113+
]);
114+
115+
</script>
116+
117+
<template>
118+
<Box>
119+
<template #title>VueUiDashboard</template>
120+
121+
<template #local>
122+
<LocalVueUiDashboard :dataset="dataset" :config="config">
123+
</LocalVueUiDashboard>
124+
</template>
125+
126+
<template #VDUI-build>
127+
<VueDataUi component="VueUiDashboard" :dataset="dataset" :config="config"/>
128+
</template>
129+
130+
<template #knobs>
131+
<div
132+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
133+
<div v-for="knob in model">
134+
<label style="font-size: 10px">{{ knob.key }}</label>
135+
<div
136+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
137+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
138+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
139+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
140+
<option v-for="opt in knob.options">{{ opt }}</option>
141+
</select>
142+
</div>
143+
</div>
144+
</div>
145+
</template>
146+
147+
<template #config>
148+
{{ config }}
149+
</template>
150+
151+
</Box>
152+
</template>

0 commit comments

Comments
 (0)