Skip to content

Commit 831d242

Browse files
graphierosgraphieros
committed
Dev environment - Add VueUiRating testing arena
1 parent cfbba67 commit 831d242

File tree

2 files changed

+137
-1
lines changed

2 files changed

+137
-1
lines changed

‎TestingArena/ArenaVueUiRating.vue‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiRating from '../src/components/vue-ui-rating.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
import { useArena } from "../src/useArena";
8+
9+
const { local, build, vduiLocal, vduiBuild } = useArena()
10+
11+
const dataset = ref({ rating: {
12+
'1': 12.12356,
13+
'2': 43.12356,
14+
'3': 27.12356,
15+
'4': 19.12356,
16+
'5': 29.12356
17+
} });
18+
19+
const model = ref([
20+
{ key: 'type', def: 'star', type:'select', options:['star', 'image'] },
21+
{ key: 'readonly', def: true, type: 'checkbox' },
22+
{ key: 'from', def: 1, type: 'number', min: 0, max: 100 },
23+
{ key: 'to', def: 5, type: 'number', min: 0, max: 100 },
24+
{ key: 'style.itemSize', def: 32, type: 'number', min: 12, max: 96 },
25+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color' },
26+
27+
{ key: 'style.star.activeColor', def: "#FFD055", type: 'color' },
28+
{ key: 'style.star.borderColor', def: "#FFD055", type: 'color' },
29+
{ key: 'style.star.borderWidth', def: 3, type: 'number', min: 0, max: 12 },
30+
{ key: 'style.star.apexes', def: 5, type: 'number', min: 4, max: 10 },
31+
{ key: 'style.star.inactiveColor', def: '#E1E5E8', type: 'color' },
32+
{ key: 'style.star.useGradient', def: true, type: 'checkbox' },
33+
34+
{ key: 'style.image.src', def: 'https://vue-data-ui.graphieros.com/logo.png', type: 'text' },
35+
{ key: 'style.image.alt', def: 'Rating image', type: 'text' },
36+
{ key: 'style.image.inactiveOpacity', def: 0.3, type: 'number', min: 0, max: 1, step: 0.1 },
37+
38+
{ key: 'style.title.textAlign', def: 'center', type: 'select', options: ['left', 'center', 'right'] },
39+
{ key: 'style.title.fontSize', def: 20, type: 'number', min: 8, max: 42 },
40+
{ key: 'style.title.color', def: '#1A1A1A', type: 'color' },
41+
{ key: 'style.title.bold', def: true, type: 'checkbox' },
42+
{ key: 'style.title.text', def: 'TItle', type: 'text' },
43+
{ key: 'style.title.offsetY', def: 6, type: 'number', min: -50, max: 50 },
44+
{ key: 'style.title.subtitle.fontSize', def: 14, type: 'number', min: 8, max: 42 },
45+
{ key: 'style.title.subtitle.color', def: '#1A1A1A', type: 'color' },
46+
{ key: 'style.title.subtitle.bold', def: false, type: 'checkbox' },
47+
{ key: 'style.title.subtitle.text', def: 'Subtitle', type: 'text' },
48+
{ key: 'style.title.subtitle.offsetY', def: 12, type: 'number', min: -50, max: 50 },
49+
50+
{ key: 'style.rating.show', def: true, type: 'checkbox' },
51+
{ key: 'style.rating.fontSize', def: 28, type: 'number', min: 8, max: 96 },
52+
{ key: 'style.rating.bold', def: true, type: 'checkbox' },
53+
{ key: 'style.rating.roundingValue', def: 1, type: 'number', min: 0, max: 6 },
54+
{ key: 'style.rating.position', def: 'bottom', type: 'select', options: ['top', 'right', 'bottom', 'left'] },
55+
{ key: 'style.rating.offsetY', def: 12, type: 'number', min: -50, max: 50 },
56+
{ key: 'style.rating.offsetX', def: 0, type: 'number', min: -50, max: 50 },
57+
58+
{ key: 'style.tooltip.show', def: true, type: 'checkbox' },
59+
{ key: 'style.tooltip.fontSize', def: 14, type: 'number', min: 8, max: 42 },
60+
{ key: 'style.tooltip.offsetY', def: 0, type: 'number', min: -50, max: 50 },
61+
{ key: 'style.tooltip.color', def: '#1A1A1A', type: 'color' },
62+
{ key: 'style.tooltip.bold', def: true, type: 'checkbox' },
63+
{ key: 'style.tooltip.backgroundColor', def: '#FFFFFF', type: 'color' },
64+
{ key: 'style.tooltip.borderColor', def: '#E1E5E8', type: 'color' },
65+
{ key: 'style.tooltip.borderRadius', def: 4, type: 'number', min: 0, max: 12 },
66+
{ key: 'style.tooltip.boxShadow', def: '0 6px 12px -6px rgba(0,0,0,0.2)', type: 'text' },
67+
{ key: 'style.tooltip.roundingValue', def: 1, type: 'number', min: 0, max: 6 }
68+
])
69+
70+
const config = computed(() => {
71+
const c = convertArrayToObject(model.value);
72+
return {
73+
...c,
74+
style: {
75+
...c.style,
76+
tooltip: {
77+
...c.style.tooltip,
78+
// formatter: ({ value }) => {
79+
// return `${value} !`
80+
// }
81+
}
82+
}
83+
}
84+
})
85+
86+
const step = ref(0);
87+
88+
</script>
89+
90+
<template>
91+
<Box comp="VueUiRating" :dataset="dataset">
92+
<template #title>VueUiRating</template>
93+
94+
<template #local>
95+
<LocalVueUiRating :dataset="dataset" :config="config" ref="local"/>
96+
</template>
97+
98+
<template #VDUI-local>
99+
<LocalVueDataUi component="VueUiRating" :dataset="dataset" :config="config" ref="vduiLocal"/>
100+
</template>
101+
102+
<template #build>
103+
<VueUiRating :dataset="dataset" :config="config" ref="build"/>
104+
</template>
105+
106+
<template #VDUI-build>
107+
<VueDataUi component="VueUiRating" :dataset="dataset" :config="config" ref="vduiBuild"/>
108+
</template>
109+
110+
<template #knobs>
111+
<div
112+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
113+
<div v-for="knob in model">
114+
<label style="font-size: 10px">{{ knob.key }}</label>
115+
<div
116+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
117+
<input v-if="!['none', 'select'].includes(knob.type)" :type="knob.type" :min="knob.min ?? 0"
118+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
119+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
120+
<option v-for="opt in knob.options">{{ opt }}</option>
121+
</select>
122+
</div>
123+
</div>
124+
</div>
125+
</template>
126+
127+
<template #config>
128+
{{ config }}
129+
</template>
130+
</Box>
131+
</template>

‎src/App.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import ArenaVueUiCarouselTable from "../TestingArena/ArenaVueUiCarouselTable.vue
4747
import ArenaVueUiGizmo from "../TestingArena/ArenaVueUiGizmo.vue";
4848
import ArenaVueUiKpi from "../TestingArena/ArenaVueUiKpi.vue";
4949
import ArenaVueUiStackbar from "../TestingArena/ArenaVueUiStackbar.vue";
50+
import ArenaVueUiRating from "../TestingArena/ArenaVueUiRating.vue";
5051
5152
const showOldArena = ref(false);
5253
@@ -97,13 +98,14 @@ const components = ref([
9798
/*_________________*/"VueUiGizmo", // 43
9899
/*___________________*/"VueUiKpi", // 44
99100
/*______________*/"VueUiStackbar", // 45
101+
/*________________*/"VueUiRating", // 46
100102
101103
// screenshot
102104
// dashboard
103105
// cursor
104106
]);
105107
106-
const selectedComponent = ref(components.value[45]);
108+
const selectedComponent = ref(components.value[46]);
107109
108110
</script>
109111

@@ -255,4 +257,7 @@ const selectedComponent = ref(components.value[45]);
255257

256258
<!-- 45 -->
257259
<ArenaVueUiStackbar v-if="selectedComponent === 'VueUiStackbar'" />
260+
261+
<!-- 46 -->
262+
<ArenaVueUiRating v-if="selectedComponent === 'VueUiRating'" />
258263
</template>

0 commit comments

Comments
 (0)