[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
vue-data-ui.graphieros.com/
charts
components-library
dashboard
data-storytelling
data-visualization
donut
gauge
heatmap
quadrant
radar
rating-stars
scatter
screenshot
skeleton-loader
sparkline
table
vue-data-ui
vue3
vuejs
vuejs3
refactor(manual-testing): improve home page layout
graphieros
(Jun 20, 2026, 8:32 AM +0200)
cd1e6812
1b5ce437
+78
-35
+30
-30
manual-testing/package.json
+30
-30
manual-testing/package.json
···
1
1
{
2
-
"name": "manual-testing",
3
-
"version": "0.0.0",
4
-
"private": true,
5
-
"type": "module",
6
-
"engines": {
7
-
"node": "^20.19.0 || >=22.12.0"
8
-
},
9
-
"scripts": {
10
-
"dev:ui": "vite",
11
-
"dev:api": "node backend/server.js",
12
-
"dev": "node add-dev-dep.cjs && npm i && run-p dev:ui dev:api",
13
-
"stop": "node backend/stop-ports.js"
14
-
},
15
-
"dependencies": {
16
-
"vue": "^3.5.38",
17
-
"vue-router": "^5.0.6"
18
-
},
19
-
"devDependencies": {
20
-
"@tsconfig/node22": "^22.0.2",
21
-
"@types/node": "^22.18.11",
22
-
"@vitejs/plugin-vue": "^6.0.7",
23
-
"@vue/tsconfig": "^0.9.1",
24
-
"npm-run-all2": "^8.0.4",
25
-
"typescript": "~5.9.0",
26
-
"vite": "8.0.16",
27
-
"vite-plugin-vue-devtools": "^8.1.1",
28
-
"vue-tsc": "^3.1.1",
29
-
"vue-data-ui": "file:../../vue-data-ui"
30
-
}
31
-
}
2
+
"name": "manual-testing",
3
+
"version": "0.0.0",
4
+
"private": true,
5
+
"type": "module",
6
+
"engines": {
7
+
"node": "^20.19.0 || >=22.12.0"
8
+
},
9
+
"scripts": {
10
+
"dev:ui": "vite",
11
+
"dev:api": "node backend/server.js",
12
+
"dev": "node add-dev-dep.cjs && npm i && run-p dev:ui dev:api",
13
+
"stop": "node backend/stop-ports.js"
14
+
},
15
+
"dependencies": {
16
+
"vue": "^3.5.38",
17
+
"vue-router": "^5.0.6"
18
+
},
19
+
"devDependencies": {
20
+
"@tsconfig/node22": "^22.0.2",
21
+
"@types/node": "^22.18.11",
22
+
"@vitejs/plugin-vue": "^6.0.7",
23
+
"@vue/tsconfig": "^0.9.1",
24
+
"npm-run-all2": "^8.0.4",
25
+
"typescript": "~5.9.0",
26
+
"vite": "8.0.16",
27
+
"vite-plugin-vue-devtools": "^8.1.1",
28
+
"vue-tsc": "^3.1.1",
29
+
"vue-data-ui": "file:../../vue-data-ui"
30
+
}
31
+
}
+48
-5
manual-testing/src/components/TodoList.vue
+48
-5
manual-testing/src/components/TodoList.vue
···
1
1
<script setup>
2
-
import { ref, computed, onMounted } from 'vue';
2
+
import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
3
3
import useCrud from '../composables/useCrud';
4
4
import { createUid, treeShake } from '../../../src/lib';
5
5
import {
···
12
12
import PendingTodoList from './PendingTodoList.vue';
13
13
import DoneTodoList from './DoneTodoList.vue';
14
14
import { components } from '../../../cypress/fixtures/vdui-components';
15
+
import { useRoute } from 'vue-router';
15
16
16
17
const {
17
18
items,
···
29
30
onMounted(() => {
30
31
readAll();
31
32
});
33
+
34
+
const route = useRoute();
35
+
36
+
const isRootRoute = computed(() => route.path === '/')
32
37
33
38
const dialog = ref(null);
34
39
const todoDialog = ref(null);
···
731
736
'IN',
732
737
'UP',
733
738
'HAS',
734
-
'SHOULD'
739
+
'SHOULD',
740
+
'ARE',
741
+
'UN'
735
742
].map(el => el.toLowerCase())
736
743
737
744
const wordCloudData = computed(() => {
···
742
749
.filter(w => !ignoredWords.includes(w))
743
750
.join(' '))
744
751
.join(' ')
752
+
return words
753
+
});
745
754
746
-
console.log(words)
747
-
return words
755
+
const WIDTH = ref(0);
756
+
const HEIGHT = ref(0);
757
+
758
+
async function setWH() {
759
+
WIDTH.value = window.innerWidth - 300;
760
+
HEIGHT.value = window.innerHeight;
761
+
}
762
+
763
+
onMounted(() => {
764
+
setWH();
765
+
window.addEventListener('resize', setWH);
748
766
});
767
+
768
+
onBeforeUnmount(() => {
769
+
window.removeEventListener('resize', setWH);
770
+
})
749
771
750
772
const wordCloudConfig = computed(() => ({
751
773
theme: 'dark',
752
774
userOptions: {
753
775
show: false,
754
776
},
777
+
responsive: true,
755
778
style: {
756
779
chart: {
780
+
controls: {
781
+
show: false,
782
+
},
783
+
tooltip: {
784
+
show: false,
785
+
},
757
786
words: {
758
787
color: '#AAAAAA',
759
788
usePalette: false,
760
789
proximity: 20,
761
790
packingWeight: 10,
791
+
},
792
+
zoom: {
793
+
show: false
762
794
}
763
795
}
764
796
}
765
797
}))
798
+
766
799
767
800
</script>
768
801
769
802
<template>
770
-
<div style="width:100%; max-width: 500px; margin: 0 auto;">
803
+
<div :style="{
804
+
position: 'fixed',
805
+
top: 0,
806
+
left: 300,
807
+
width: WIDTH + 'px',
808
+
height: HEIGHT + 'px',
809
+
opacity: 0.1,
810
+
pointerEvents: 'none',
811
+
userSelect: 'none'
812
+
}"
813
+
v-if="isRootRoute">
771
814
<VueUiWordCloud v-if="wordCloudData" :dataset="wordCloudData" :config="wordCloudConfig"/>
772
815
</div>
773
816
<button class="open-btn" @click="openDialog()">