Skip to content

Commit 0c99555

Browse files
graphierosgraphieros
committed
Dev environment - Add VueUiCarouselTable testing arena
1 parent a27992a commit 0c99555

File tree

3 files changed

+269
-2
lines changed

3 files changed

+269
-2
lines changed

‎TestingArena/ArenaVueUiCarouselTable.vue‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
<script setup>
2+
import { ref, computed, onMounted } from "vue";
3+
import LocalVueUiCarouselTable from '../src/components/vue-ui-carousel-table.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, toggleTable, toggleLabels, toggleStack } = useArena()
10+
11+
const model = ref([
12+
{ key: 'responsiveBreakpoint', def: 400, type: 'number', min: 300, max: 800 },
13+
{ key: 'animation.use', def: true, type: 'checkbox'},
14+
{ key: 'animation.speedMs', def: 1000, type: 'number', type: 'range', min: 200, max: 2000},
15+
{ key: 'animation.pauseOnHover', def: true, type: 'checkbox'},
16+
{ key: 'border.size', def: 0, type: 'number', min: 0, max: 12 },
17+
{ key: 'border.color', def: '#1A1A1A', type: 'color'},
18+
19+
{ key: 'style.backgroundColor', def: '#FFFFFF', type: 'color' },
20+
{ key: 'style.color', def: '#1A1A1A', type: 'color' },
21+
{ key: 'style.fontFamily', def: 'inherit', type: 'text' },
22+
23+
{ key: 'caption.text', def: 'Lorem ipsum dolor sit amet', type: 'text'},
24+
25+
{ key: 'caption.padding.top', def: 12, type: 'number', min: 0, max: 24},
26+
{ key: 'caption.padding.right', def: 12, type: 'number', min: 0, max: 24},
27+
{ key: 'caption.padding.bottom', def: 12, type: 'number', min: 0, max: 24},
28+
{ key: 'caption.padding.left', def: 12, type: 'number', min: 0, max: 24},
29+
30+
{ key: 'caption.style.backgroundColor', def: '#FFFFFF', type: 'color'},
31+
{ key: 'caption.style.color', def: '#1A1A1A', type: 'color'},
32+
{ key: 'caption.style.fontSize', def: '16px', type: 'text'},
33+
{ key: 'caption.style.fontWeight', def: 'bold', type: 'text'},
34+
{ key: 'caption.style.textAlign', def: 'left', type: 'select', options: ['left', 'center', 'right']},
35+
36+
{ key: 'thead.tr.style.backgroundColor', def: '#FFFFFF', type: 'color'},
37+
{ key: 'thead.tr.style.boxShadow', def: '0px 6px 12px -6px #1A1A1A50' },
38+
39+
{ key: 'thead.tr.border.size', def: 0, type: 'number', min: 0, max: 12 },
40+
{ key: 'thead.tr.border.color', def: '#1A1A1A', type: 'color'},
41+
{ key: 'thead.tr.th.border.size', def: 0, type: 'number', min: 0, max: 12 },
42+
{ key: 'thead.tr.th.border.color', def: '#1A1A1A', type: 'color'},
43+
{ key: 'thead.tr.th.style.textAlign', def: 'right', type: 'select', options: ['left', 'center', 'right']},
44+
{ key: 'thead.tr.th.style.fontVariantNumeric', def: 'tabular-nums', type: 'text'},
45+
46+
{ key: 'thead.tr.th.padding.top', def: 0, type: 'number', min: 0, max: 24},
47+
{ key: 'thead.tr.th.padding.right', def: 12, type: 'number', min: 0, max: 24},
48+
{ key: 'thead.tr.th.padding.bottom', def: 0, type: 'number', min: 0, max: 24},
49+
{ key: 'thead.tr.th.padding.left', def: 0, type: 'number', min: 0, max: 24},
50+
51+
{ key: 'tbody.tr.visible', def: 5, type: 'number', min: 1, max: 100},
52+
{ key: 'tbody.tr.height', def: 32, type: 'number', min: 12, max: 100 },
53+
{ key: 'tbody.tr.style.backgroundColor', def: '#FFFFFF', type: 'color'},
54+
{ key: 'tbody.tr.style.color', def: '#1A1A1A', type: 'color'},
55+
56+
{ key: 'tbody.tr.border.size', def: 0, type: 'number', min: 0, max: 12 },
57+
{ key: 'tbody.tr.border.color', def: '#1A1A1A', type: 'color'},
58+
59+
{ key: 'tbody.tr.td.alternateColor', def: true, type: 'checkbox'},
60+
{ key: 'tbody.tr.td.alternateOpacity', def: 0.5, type: 'range', min: 0, max: 1, step: 0.01},
61+
{ key: 'tbody.tr.td.style.fontVariantNumeric', def: 'tabular-nums', type: 'text'},
62+
{ key: 'tbody.tr.td.style.textAlign', def: 'right', type:'select', options: ['left', 'center', 'right']},
63+
{ key: 'tbody.tr.td.style.backgroundColor', def: '#e1e5e8', type: 'color' },
64+
65+
{ key: 'tbody.tr.td.border.size', def: 0, type: 'number', min: 0, max: 12 },
66+
{ key: 'tbody.tr.td.border.color', def: '#1A1A1A', type: 'color'},
67+
68+
{ key: 'tbody.tr.td.padding.top', def: 0, type: 'number', min: 0, max: 24},
69+
{ key: 'tbody.tr.td.padding.right', def: 12, type: 'number', min: 0, max: 24},
70+
{ key: 'tbody.tr.td.padding.bottom', def: 0, type: 'number', min: 0, max: 24},
71+
{ key: 'tbody.tr.td.padding.left', def: 0, type: 'number', min: 0, max: 24},
72+
73+
{ key: 'userOptions.show', def: true, type: 'checkbox'},
74+
{ key: 'userOptions.buttons.pdf', def: true, type: 'checkbox' },
75+
{ key: 'userOptions.buttons.img', def: true, type: 'checkbox' },
76+
{ key: 'userOptions.buttons.csv', def: true, type: 'checkbox' },
77+
{ key: 'userOptions.buttons.animation', def: true, type: 'checkbox' },
78+
{ key: 'userOptions.buttons.fullscreen', def: true, type: 'checkbox' },
79+
80+
{ key: 'userOptions.buttonTitles.pdf', def: 'DOWNLOAD PDF', type: 'text'},
81+
{ key: 'userOptions.buttonTitles.csv', def: 'DOWNLOAD CSV', type: 'text'},
82+
{ key: 'userOptions.buttonTitles.img', def: 'DOWNLOAD PNG', type: 'text'},
83+
{ key: 'userOptions.buttonTitles.animation', def: 'TOGGLE ANIMATION', type: 'text'},
84+
{ key: 'userOptions.buttonTitles.fullscreen', def: 'TOGGLE FULLSCREEN', type: 'text'},
85+
{ key: 'userOptions.buttonTitles.open', def: 'OPEN OPTIONS', type: 'text'},
86+
{ key: 'userOptions.buttonTitles.close', def: 'CLOSE OPTIONS', type: 'text'},
87+
])
88+
89+
const config = computed(() => {
90+
const c = convertArrayToObject(model.value);
91+
return {
92+
...c
93+
}
94+
})
95+
96+
function generateBody(n) {
97+
let arr = [];
98+
for (let i = 0; i < n; i += 1) {
99+
arr.push([
100+
Math.round(Math.random()*Math.random()*1000000),
101+
Math.round(Math.random()*Math.random()*1000000),
102+
Math.round(Math.random()*Math.random()*1000000),
103+
Math.round(Math.random()*Math.random()*1000000),
104+
Math.round(Math.random()*Math.random()*1000000),
105+
Math.round(Math.random()*Math.random()*1000000),
106+
Math.round(Math.random()*Math.random()*1000000),
107+
])
108+
}
109+
return arr
110+
}
111+
112+
const dataset = ref({
113+
head: ['Column 1 has a long name', 'col2', 'col3', 'col4', 'col 5', 'col 6', 'col 7'],
114+
body: generateBody(12)
115+
})
116+
117+
const step = ref(0)
118+
119+
const localComponent = ref(null);
120+
const buildComponent = ref(null);
121+
const vduiLocalComponent = ref(null);
122+
const vduiBuildComponent = ref(null);
123+
124+
function toggleAnimLocal() {
125+
localComponent.value.toggleAnimation();
126+
}
127+
function pauseLocal() {
128+
localComponent.value.pauseAnimation();
129+
}
130+
function resumeLocal() {
131+
localComponent.value.resumeAnimation();
132+
}
133+
134+
function toggleAnimVduiLocal() {
135+
vduiLocalComponent.value.toggleAnimation();
136+
}
137+
138+
function pauseVduiLocal() {
139+
vduiLocalComponent.value.pauseAnimation();
140+
}
141+
142+
function resumeVduiLocal() {
143+
vduiLocalComponent.value.resumeAnimation();
144+
}
145+
146+
function toggleAnimBuild() {
147+
if(buildComponent.value) {
148+
buildComponent.value.toggleAnimation();
149+
}
150+
}
151+
152+
function pauseBuild() {
153+
buildComponent.value.pauseAnimation();
154+
}
155+
156+
function resumeBuild() {
157+
buildComponent.value.resumeAnimation();
158+
}
159+
160+
function toggleAnimVduiBuild() {
161+
if(vduiBuildComponent.value) {
162+
vduiBuildComponent.value.toggleAnimation();
163+
}
164+
}
165+
166+
function pauseVduiBuild() {
167+
vduiBuildComponent.value.pauseAnimation();
168+
}
169+
170+
function resumeVduiBuild() {
171+
vduiBuildComponent.value.resumeAnimation();
172+
}
173+
174+
</script>
175+
176+
<template>
177+
<Box>
178+
<template #title>VueUiCarouselTable</template>
179+
180+
<template #local>
181+
<button @click="toggleAnimLocal">TOGGLE ANIMATION (public)</button>
182+
<button @click="pauseLocal">PAUSE ANIMATION (public)</button>
183+
<button @click="resumeLocal">RESUME ANIMATION (public)</button>
184+
<LocalVueUiCarouselTable
185+
:config="config"
186+
:dataset="dataset"
187+
ref="localComponent"
188+
>
189+
<template #caption>
190+
Lorem ipsum dolor
191+
</template>
192+
<template #th="{th}">
193+
{{ th }}
194+
</template>
195+
</LocalVueUiCarouselTable>
196+
</template>
197+
198+
<template #VDUI-local>
199+
<button @click="toggleAnimVduiLocal">TOGGLE ANIMATION (public)</button>
200+
<button @click="pauseVduiLocal">PAUSE ANIMATION (public)</button>
201+
<button @click="resumeVduiLocal">RESUME ANIMATION (public)</button>
202+
<LocalVueDataUi
203+
component="VueUiCarouselTable"
204+
ref="vduiLocalComponent"
205+
:config="config"
206+
:dataset="dataset"
207+
>
208+
209+
</LocalVueDataUi>
210+
</template>
211+
212+
<template #build>
213+
<button @click="toggleAnimBuild">TOGGLE ANIMATION (public)</button>
214+
<button @click="pauseBuild">PAUSE ANIMATION (public)</button>
215+
<button @click="resumeBuild">RESUME ANIMATION (public)</button>
216+
<VueUiCarouselTable
217+
ref="buildComponent"
218+
:dataset="dataset"
219+
:config="config"
220+
>
221+
</VueUiCarouselTable>
222+
</template>
223+
224+
<template #VDUI-build>
225+
<button @click="toggleAnimVduiBuild">TOGGLE ANIMATION (public)</button>
226+
<button @click="pauseVduiBuild">PAUSE ANIMATION (public)</button>
227+
<button @click="resumeVduiBuild">RESUME ANIMATION (public)</button>
228+
<VueDataUi
229+
ref="vduiBuildComponent"
230+
component="VueUiCarouselTable"
231+
:dataset="dataset"
232+
:config="config"
233+
>
234+
235+
</VueDataUi>
236+
</template>
237+
238+
<template #knobs>
239+
<div
240+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
241+
<div v-for="knob in model">
242+
<label style="font-size: 10px">{{ knob.key }}</label>
243+
<div
244+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
245+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
246+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
247+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
248+
<option v-for="opt in knob.options">{{ opt }}</option>
249+
</select>
250+
</div>
251+
</div>
252+
</div>
253+
</template>
254+
255+
<template #config>
256+
{{ config }}
257+
</template>
258+
259+
</Box>
260+
</template>

‎src/App.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import ArenaVueUiXyCanvas from "../TestingArena/ArenaVueUiXyCanvas.vue";
4343
import ArenaVueUiFlow from "../TestingArena/ArenaVueUiFlow.vue";
4444
import ArenaVueUiParallelCoordinatePlot from "../TestingArena/ArenaVueUiParallelCoordinatePlot.vue";
4545
import ArenaVueUiTimer from "../TestingArena/ArenaVueUiTimer.vue";
46+
import ArenaVueUiCarouselTable from "../TestingArena/ArenaVueUiCarouselTable.vue";
4647
4748
const showOldArena = ref(false);
4849
@@ -89,12 +90,13 @@ const components = ref([
8990
/*__________________*/"VueUiFlow", // 39
9091
/**/"VueUiParallelCoordinatePlot", // 40
9192
/*_________________*/"VueUiTimer", // 41
93+
/*_________*/"VueUiCarouselTable", // 42
9294
// screenshot
9395
// dashboard
9496
// cursor
9597
]);
9698
97-
const selectedComponent = ref(components.value[0]);
99+
const selectedComponent = ref(components.value[42]);
98100
99101
</script>
100102

@@ -234,4 +236,7 @@ const selectedComponent = ref(components.value[0]);
234236

235237
<!-- 41 -->
236238
<ArenaVueUiTimer v-if="selectedComponent === 'VueUiTimer'" />
239+
240+
<!-- 42 -->
241+
<ArenaVueUiCarouselTable v-if="selectedComponent === 'VueUiCarouselTable'" />
237242
</template>

‎src/main.js‎

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

@@ -114,4 +115,5 @@ app.component("VueUiXyCanvas", VueUiXyCanvas);
114115
app.component("VueUiFlow", VueUiFlow);
115116
app.component("VueUiParallelCoordinatePlot", VueUiParallelCoordinatePlot);
116117
app.component("VueUiTimer", VueUiTimer);
118+
app.component("VueUiCarouselTable", VueUiCarouselTable);
117119
app.mount('#app');

0 commit comments

Comments
 (0)