Skip to content

Commit 3656d40

Browse files
graphierosgraphieros
committed
Reduce bundle size
1 parent adb83be commit 3656d40

21 files changed

+308
-290
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.9.22",
4+
"version": "1.9.23",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/atoms/BaseCheckbox.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import { createUid } from "../lib";
4+
5+
const props = defineProps(['model', 'label', 'cy'])
6+
const uid = ref(createUid())
7+
8+
const emit = defineEmits(['update:model'])
9+
10+
const value = computed({
11+
get() {
12+
return props.model
13+
},
14+
set(value) {
15+
emit('update:model', value)
16+
}
17+
})
18+
19+
</script>
20+
21+
<template>
22+
<div class="vue-ui-options-item">
23+
<input :data-cy="cy" type="checkbox" :id="uid" v-model="value">
24+
<label :for="uid">{{ label }}</label>
25+
</div>
26+
</template>

‎src/atoms/DataTable.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup>
2+
import Shape from "./Shape.vue";
23
34
const props = defineProps({
45
head: Array,
@@ -36,8 +37,13 @@ const { backgroundColor:tdbg, color:tdc, outline:tdo } = props.config.td;
3637
<tr v-for="(tr, i) in body">
3738
<td v-for="(td, j) in tr" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
3839
<div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
39-
<svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;">
40-
<circle cx="10" cy="10" r="10" :fill="td.color"/>
40+
<svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;overflow: visible">
41+
<Shape
42+
:plot="{ x: 10, y: 10 }"
43+
:color="td.color"
44+
:radius="9"
45+
:shape="config.shape || 'circle'"
46+
/>
4147
</svg>
4248
<slot name="td" :td="td"></slot>
4349
</div>

‎src/components/vue-ui-age-pyramid.vue‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useNestedProp } from "../useNestedProp";
88
import Title from "../atoms/Title.vue";
99
import UserOptions from "../atoms/UserOptions.vue";
1010
import Tooltip from "../atoms/Tooltip.vue";
11+
import BaseCheckbox from "../atoms/BaseCheckbox.vue";
1112
1213
const props = defineProps({
1314
config: {
@@ -302,16 +303,18 @@ defineExpose({
302303
@generateImage="generateImage"
303304
>
304305
<template #checkboxes>
305-
<div class="vue-ui-options-item">
306-
<input type="checkbox" :id="`vue-ui-age-pyramid-option-title_${uid}`" :name="`vue-ui-age-pyramid-option-title_${uid}`"
307-
v-model="mutableConfig.inside">
308-
<label :for="`vue-ui-age-pyramid-option-title_${uid}`">{{ agePyramidConfig.userOptions.labels.useDiv }}</label>
309-
</div>
310-
<div class="vue-ui-options-item">
311-
<input type="checkbox" :id="`vue-ui-age-pyramid-option-table_${uid}`" :name="`vue-ui-age-pyramid-option-table_${uid}`"
312-
v-model="mutableConfig.showTable">
313-
<label :for="`vue-ui-age-pyramid-option-table_${uid}`">{{ agePyramidConfig.userOptions.labels.showTable }}</label>
314-
</div>
306+
<BaseCheckbox
307+
cy="pyramid-checkbox-title"
308+
:model="mutableConfig.inside"
309+
:label="agePyramidConfig.userOptions.labels.useDiv"
310+
@update:model="val => mutableConfig.inside = val"
311+
/>
312+
<BaseCheckbox
313+
cy="pyramid-checkbox-table"
314+
:model="mutableConfig.showTable"
315+
:label="agePyramidConfig.userOptions.labels.showTable"
316+
@update:model="val => mutableConfig.showTable = val"
317+
/>
315318
</template>
316319
</UserOptions>
317320

‎src/components/vue-ui-candlestick.vue‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useNestedProp } from "../useNestedProp";
88
import Title from "../atoms/Title.vue";
99
import UserOptions from "../atoms/UserOptions.vue";
1010
import Tooltip from "../atoms/Tooltip.vue";
11+
import BaseCheckbox from "../atoms/BaseCheckbox.vue";
1112
1213
const props = defineProps({
1314
config: {
@@ -332,16 +333,18 @@ defineExpose({
332333
@generateImage="generateImage"
333334
>
334335
<template #checkboxes>
335-
<div class="vue-ui-options-item">
336-
<input data-cy="candlestick-checkbox-title" type="checkbox" :id="`vue-ui-candlestick-option-title_${uid}`" :name="`vue-ui-candlestick-option-title_${uid}`"
337-
v-model="mutableConfig.inside">
338-
<label :for="`vue-ui-candlestick-option-title_${uid}`">{{ candlestickConfig.userOptions.labels.useDiv }}</label>
339-
</div>
340-
<div class="vue-ui-options-item">
341-
<input data-cy="candlestick-checkbox-table" type="checkbox" :id="`vue-ui-candlestick-option-table_${uid}`" :name="`vue-ui-candlestick-option-table_${uid}`"
342-
v-model="mutableConfig.showTable">
343-
<label :for="`vue-ui-candlestick-option-table_${uid}`">{{ candlestickConfig.userOptions.labels.showTable }}</label>
344-
</div>
336+
<BaseCheckbox
337+
cy="candlestick-checkbox-title"
338+
:model="mutableConfig.inside"
339+
:label="candlestickConfig.userOptions.labels.useDiv"
340+
@update:model="val => mutableConfig.inside = val"
341+
/>
342+
<BaseCheckbox
343+
cy="candlestick-checkbox-table"
344+
:model="mutableConfig.showTable"
345+
:label="candlestickConfig.userOptions.labels.showTable"
346+
@update:model="val => mutableConfig.showTable = val"
347+
/>
345348
</template>
346349
</UserOptions>
347350

‎src/components/vue-ui-chestnut.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import img from "../img";
66
import mainConfig from "../default_configs.json";
77
import { useNestedProp } from "../useNestedProp";
88
import UserOptions from "../atoms/UserOptions.vue";
9+
import BaseCheckbox from "../atoms/BaseCheckbox.vue";
910
1011
const props = defineProps({
1112
config: {
@@ -453,11 +454,12 @@ defineExpose({
453454
@generateImage="generateImage"
454455
>
455456
<template #checkboxes>
456-
<div class="vue-ui-options-item">
457-
<input data-cy="chestnut-checkbox-table" type="checkbox" :id="`vue-ui-chestnut-option-table_${uid}`" :name="`vue-ui-chestnut-option-table_${uid}`"
458-
v-model="mutableConfig.showTable">
459-
<label :for="`vue-ui-chestnut-option-table_${uid}`">{{ chestnutConfig.userOptions.labels.showTable }}</label>
460-
</div>
457+
<BaseCheckbox
458+
cy="chestnut-checkbox-table"
459+
:model="mutableConfig.showTable"
460+
:label="chestnutConfig.userOptions.labels.showTable"
461+
@update:model="val => mutableConfig.showTable = val"
462+
/>
461463
</template>
462464
</UserOptions>
463465

‎src/components/vue-ui-donut.vue‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import UserOptions from "../atoms/UserOptions.vue";
1010
import DataTable from "../atoms/DataTable.vue";
1111
import Tooltip from "../atoms/Tooltip.vue";
1212
import Legend from "../atoms/Legend.vue";
13+
import BaseCheckbox from "../atoms/BaseCheckbox.vue";
1314
1415
const props = defineProps({
1516
config: {
@@ -351,21 +352,24 @@ defineExpose({
351352
@generateImage="generateImage"
352353
>
353354
<template #checkboxes>
354-
<div class="vue-ui-options-item">
355-
<input data-cy="donut-checkbox-datalabels" type="checkbox" :id="`vue-ui-donut-option-datalabels_${uid}`" :name="`vue-ui-donut-option-datalabels_${uid}`"
356-
v-model="mutableConfig.dataLabels.show">
357-
<label :for="`vue-ui-donut-option-datalabels_${uid}`">{{ donutConfig.userOptions.labels.dataLabels }}</label>
358-
</div>
359-
<div class="vue-ui-options-item">
360-
<input data-cy="donut-checkbox-title" type="checkbox" :id="`vue-ui-donut-option-title_${uid}`" :name="`vue-ui-donut-option-title_${uid}`"
361-
v-model="mutableConfig.inside">
362-
<label :for="`vue-ui-donut-option-title_${uid}`">{{ donutConfig.userOptions.labels.useDiv }}</label>
363-
</div>
364-
<div class="vue-ui-options-item">
365-
<input data-cy="donut-checkbox-table" type="checkbox" :id="`vue-ui-donut-option-table_${uid}`" :name="`vue-ui-donut-option-table_${uid}`"
366-
v-model="mutableConfig.showTable">
367-
<label :for="`vue-ui-donut-option-table_${uid}`">{{ donutConfig.userOptions.labels.showTable }}</label>
368-
</div>
355+
<BaseCheckbox
356+
cy="donut-checkbox-datalabels"
357+
:model="mutableConfig.dataLabels.show"
358+
:label="donutConfig.userOptions.labels.dataLabels"
359+
@update:model="val => mutableConfig.dataLabels.show = val"
360+
/>
361+
<BaseCheckbox
362+
cy="donut-checkbox-title"
363+
:model="mutableConfig.inside"
364+
:label="donutConfig.userOptions.labels.useDiv"
365+
@update:model="val => mutableConfig.inside = val"
366+
/>
367+
<BaseCheckbox
368+
cy="donut-checkbox-table"
369+
:model="mutableConfig.showTable"
370+
:label="donutConfig.userOptions.labels.showTable"
371+
@update:model="val => mutableConfig.showTable = val"
372+
/>
369373
</template>
370374
</UserOptions>
371375

‎src/components/vue-ui-gauge.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import img from "../img";
66
import mainConfig from "../default_configs.json";
77
import { useNestedProp } from "../useNestedProp";
88
import UserOptions from "../atoms/UserOptions.vue";
9+
import BaseCheckbox from "../atoms/BaseCheckbox.vue";
910
1011
const props = defineProps({
1112
config:{
@@ -312,11 +313,12 @@ defineExpose({
312313
@generateImage="generateImage"
313314
>
314315
<template #checkboxes>
315-
<div class="vue-ui-options-item">
316-
<input data-cy="gauge-checkbox-title" type="checkbox" :id="`vue-ui-gauge-option-title_${uid}`" :name="`vue-ui-gauge-option-title_${uid}`"
317-
v-model="mutableConfig.inside">
318-
<label :for="`vue-ui-gauge-option-title_${uid}`">{{ gaugeConfig.userOptions.labels.useDiv }}</label>
319-
</div>
316+
<BaseCheckbox
317+
cy="gauge-checkbox-title"
318+
:model="mutableConfig.inside"
319+
:label="gaugeConfig.userOptions.labels.useDiv"
320+
@update:model="val => mutableConfig.inside = val"
321+
/>
320322
</template>
321323
</UserOptions>
322324

‎src/components/vue-ui-heatmap.vue‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useNestedProp } from "../useNestedProp";
88
import Title from "../atoms/Title.vue";
99
import UserOptions from "../atoms/UserOptions.vue";
1010
import Tooltip from "../atoms/Tooltip.vue";
11+
import BaseCheckbox from "../atoms/BaseCheckbox.vue";
1112
1213
const props = defineProps({
1314
config: {
@@ -263,16 +264,18 @@ defineExpose({
263264
@generateImage="generateImage"
264265
>
265266
<template #checkboxes>
266-
<div class="vue-ui-options-item">
267-
<input data-cy="heatmap-checkbox-title" type="checkbox" :id="`vue-ui-heatmap-option-title_${uid}`" :name="`vue-ui-heatmap-option-title_${uid}`"
268-
v-model="mutableConfig.inside">
269-
<label :for="`vue-ui-heatmap-option-title_${uid}`">{{ heatmapConfig.userOptions.labels.useDiv }}</label>
270-
</div>
271-
<div class="vue-ui-options-item">
272-
<input data-cy="heatmap-checkbox-table" type="checkbox" :id="`vue-ui-heatmap-option-table_${uid}`" :name="`vue-ui-heatmap-option-table_${uid}`"
273-
v-model="mutableConfig.showTable">
274-
<label :for="`vue-ui-heatmap-option-table_${uid}`">{{ heatmapConfig.userOptions.labels.showTable }}</label>
275-
</div>
267+
<BaseCheckbox
268+
cy="heatmap-checkbox-title"
269+
:model="mutableConfig.inside"
270+
:label="heatmapConfig.userOptions.labels.useDiv"
271+
@update:model="val => mutableConfig.inside = val"
272+
/>
273+
<BaseCheckbox
274+
cy="heatmap-checkbox-table"
275+
:model="mutableConfig.showTable"
276+
:label="heatmapConfig.userOptions.labels.showTable"
277+
@update:model="val => mutableConfig.showTable = val"
278+
/>
276279
</template>
277280
</UserOptions>
278281

0 commit comments

Comments
 (0)