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