Skip to content

Commit 544266a

Browse files
graphierosgraphieros
committed
Dev environment - Update testing arena
1 parent 1cbfa1a commit 544266a

File tree

4 files changed

+101
-3
lines changed

4 files changed

+101
-3
lines changed

‎TestingArena/ArenaVueUiGizmo.vue‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiGizmo from '../src/components/vue-ui-gizmo.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
8+
const dataset = ref(100)
9+
10+
const model= ref([
11+
{ key: 'type', def: 'battery', type: 'select', options: ['battery', 'gauge']},
12+
{ key: 'size', def: 64, type: 'range', min: 10, max: 100},
13+
{ key: 'stroke', def: '#e1e5e8', type: 'color'},
14+
{ key: 'color', def: '#5f8bee', type: 'color'},
15+
{ key: 'useGradient', def: true, type: 'checkbox'},
16+
{ key: 'gradientColor', def: '#9db5ed', type: 'color'},
17+
{ key: 'showPercentage', def: true, type: 'checkbox'},
18+
{ key: 'textColor', def: '#CCCCCC', type: 'color'}
19+
])
20+
21+
const config = computed(() => {
22+
const c = convertArrayToObject(model.value);
23+
return {
24+
...c
25+
}
26+
})
27+
28+
const step = ref(0)
29+
30+
</script>
31+
32+
<template>
33+
<input type="range" v-model="dataset" :min="0" :max="100"/>
34+
<Box>
35+
<template #title>VueUiGizmo</template>
36+
37+
<template #local>
38+
<LocalVueUiGizmo :dataset="dataset" :config="config"/>
39+
<LocalVueUiGizmo :dataset="dataset" :config="{
40+
...config,
41+
type: 'gauge'
42+
}"/>
43+
</template>
44+
45+
<template #VDUI-local>
46+
<LocalVueDataUi component="VueUiGizmo" :dataset="dataset" :config="config"/>
47+
<LocalVueDataUi component="VueUiGizmo" :dataset="dataset" :config="{
48+
...config,
49+
type: 'gauge'
50+
}"/>
51+
</template>
52+
53+
<template #build>
54+
<VueUiGizmo :dataset="dataset" :config="config"/>
55+
<VueUiGizmo :dataset="dataset" :config="{
56+
...config,
57+
type: 'gauge'
58+
}"/>
59+
</template>
60+
61+
<template #VDUI-build>
62+
<VueDataUi component="VueUiGizmo" :dataset="dataset" :config="config"/>
63+
<VueDataUi component="VueUiGizmo" :dataset="dataset" :config="{
64+
...config,
65+
type: 'gauge'
66+
}"/>
67+
</template>
68+
69+
<template #knobs>
70+
<div
71+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
72+
<div v-for="knob in model">
73+
<label style="font-size: 10px">{{ knob.key }}</label>
74+
<div
75+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
76+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
77+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
78+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
79+
<option v-for="opt in knob.options">{{ opt }}</option>
80+
</select>
81+
</div>
82+
</div>
83+
</div>
84+
</template>
85+
86+
<template #config>
87+
{{ config }}
88+
</template>
89+
90+
</Box>
91+
</template>

‎TestingArena/ArenaVueUiIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ref } from "vue";
33
import BaseIcon from "./../src/atoms/BaseIcon.vue";
44
55
const icons = ref([
6-
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable"
6+
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery"
77
])
88
99
</script>

‎src/App.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import ArenaVueUiFlow from "../TestingArena/ArenaVueUiFlow.vue";
4444
import ArenaVueUiParallelCoordinatePlot from "../TestingArena/ArenaVueUiParallelCoordinatePlot.vue";
4545
import ArenaVueUiTimer from "../TestingArena/ArenaVueUiTimer.vue";
4646
import ArenaVueUiCarouselTable from "../TestingArena/ArenaVueUiCarouselTable.vue";
47+
import ArenaVueUiGizmo from "../TestingArena/ArenaVueUiGizmo.vue";
4748
4849
const showOldArena = ref(false);
4950
@@ -91,12 +92,13 @@ const components = ref([
9192
/**/"VueUiParallelCoordinatePlot", // 40
9293
/*_________________*/"VueUiTimer", // 41
9394
/*_________*/"VueUiCarouselTable", // 42
95+
/*_________________*/"VueUiGizmo", // 43
9496
// screenshot
9597
// dashboard
9698
// cursor
9799
]);
98100
99-
const selectedComponent = ref(components.value[42]);
101+
const selectedComponent = ref(components.value[43]);
100102
101103
</script>
102104

@@ -239,4 +241,7 @@ const selectedComponent = ref(components.value[42]);
239241

240242
<!-- 42 -->
241243
<ArenaVueUiCarouselTable v-if="selectedComponent === 'VueUiCarouselTable'" />
244+
245+
<!-- 43 -->
246+
<ArenaVueUiGizmo v-if="selectedComponent === 'VueUiGizmo'" />
242247
</template>

‎src/main.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ import {
5656
VueUiFlow,
5757
VueUiParallelCoordinatePlot,
5858
VueUiTimer,
59-
VueUiCarouselTable
59+
VueUiCarouselTable,
60+
VueUiGizmo
6061
} from 'vue-data-ui';
6162
import 'vue-data-ui/style.css';
6263

@@ -116,4 +117,5 @@ app.component("VueUiFlow", VueUiFlow);
116117
app.component("VueUiParallelCoordinatePlot", VueUiParallelCoordinatePlot);
117118
app.component("VueUiTimer", VueUiTimer);
118119
app.component("VueUiCarouselTable", VueUiCarouselTable);
120+
app.component("VueUiGizmo", VueUiGizmo);
119121
app.mount('#app');

0 commit comments

Comments
 (0)