Skip to content

Commit 1ccd1d1

Browse files
graphierosgraphieros
committed
VueUiAccordion added new component
1 parent d71ee1e commit 1ccd1d1

File tree

11 files changed

+211
-12
lines changed

11 files changed

+211
-12
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1414
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1515
![npm](https://img.shields.io/npm/dt/vue-data-ui)
16-
![Static Badge](https://img.shields.io/badge/components-43-green)
16+
![Static Badge](https://img.shields.io/badge/components-44-green)
1717

1818
[Interactive documentation](https://vue-data-ui.graphieros.com/)
1919

@@ -73,6 +73,7 @@ Available components:
7373

7474
## Utilities
7575

76+
- [VueUiAccordion](https://vue-data-ui.graphieros.com/docs#vue-ui-accordion)
7677
- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
7778
- [VueUiDashboard](https://vue-data-ui.graphieros.com/docs#vue-ui-dashboard)
7879
- [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)

‎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": "2.0.95",
4+
"version": "2.0.96",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import VueUiKpiTest from "./components/vue-ui-kpi.vue";
5858
import GalaxyTest from "./components/vue-ui-galaxy.vue";
5959
import TreemapTest from "./components/vue-ui-treemap.vue";
6060
import TableHeatmapTest from "./components/vue-ui-table-heatmap.vue";
61+
import AccordionTest from "./components/vue-ui-accordion.vue";
6162
6263
const dataset = ref([
6364
{
@@ -3390,9 +3391,56 @@ const tableHeatmapDataset = ref([
33903391
</template>
33913392
</Box>
33923393

3394+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_accordion)">
3395+
<template #title>
3396+
<BaseIcon name="accordion"/>
3397+
VueUiAccordion
3398+
</template>
3399+
<template #info>
3400+
<!-- <BaseIcon name="chartTable" stroke="#5f8bee"/>
3401+
<BaseIcon name="pdf" stroke="#5f8bee"/>
3402+
<BaseIcon name="image" stroke="#5f8bee"/>
3403+
<BaseIcon name="excel" stroke="#5f8bee"/>
3404+
<BaseIcon name="fullscreen" stroke="#5f8bee"/> -->
3405+
</template>
3406+
<template #dev>
3407+
<AccordionTest>
3408+
<template #arrow>
3409+
<BaseIcon name="arrowRight"/>
3410+
</template>
3411+
<template #title>
3412+
<div style="font-size: 16px; font-weight: bold">
3413+
TITLE
3414+
</div>
3415+
</template>
3416+
<template #content>
3417+
<VueDataUi component="VueUiGalaxy" :dataset="galaxyDataset" :config="galaxyConfig" />
3418+
</template>
3419+
</AccordionTest>
3420+
</template>
3421+
<template #prod>
3422+
<VueUiAccordion>
3423+
<template #arrow>
3424+
<BaseIcon name="arrowRight"/>
3425+
</template>
3426+
<template #title>
3427+
<div style="font-size: 16px; font-weight: bold">
3428+
TITLE
3429+
</div>
3430+
</template>
3431+
<template #content>
3432+
<VueDataUi component="VueUiGalaxy" :dataset="galaxyDataset" :config="galaxyConfig" />
3433+
</template>
3434+
</VueUiAccordion>
3435+
</template>
3436+
<template #config>
3437+
{{ PROD_CONFIG.vue_ui_accordion }}
3438+
</template>
3439+
</Box>
3440+
33933441
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_table_heatmap)">
33943442
<template #title>
3395-
<!-- <BaseIcon name="chartTreemap"/> -->
3443+
<BaseIcon name="chartTable"/>
33963444
VueUiTableHeatmap
33973445
</template>
33983446
<template #info>

‎src/atoms/BaseIcon.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ const icons = computed(() => {
138138
lambda: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 2 5 C 2 2 4 2 4 2 C 10 2 10 18 18 18 M 10 10 L 2 18" stroke-linecap="round" stroke-linejoin="round"/>`,
139139
people: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth / 2}" fill="none" d="M 5 1 A 1 1 0 0 0 5 9 A 1 1 0 0 0 5 1 M 15 1 A 1 1 0 0 0 15 9 A 1 1 0 0 0 15 1 M 5 11 A 1 1 0 0 0 5 19 A 1 1 0 0 0 5 11 M 15 11 A 1 1 0 0 0 15 19 A 1 1 0 0 0 15 11 M 3 4 L 3 4 M 7 4 L 7 4 M 3 6 C 4 7 6 7 7 6 M 13 4 L 13 4 M 17 4 L 17 4 M 13 6 C 14 7 16 7 17 6 M 3 14 L 3 14 M 7 14 L 7 14 M 3 16 C 4 17 6 17 7 16 M 13 14 L 13 14 M 17 14 L 17 14 M 13 16 C 14 17 16 17 17 16" stroke-linecap="round" stroke-linejoin="round"/>`,
140140
copy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" d="M 18 16 C 18 17 17 18 16 18 L 8 18 C 7 18 6 17 6 16 L 6 8 C 6 7 7 6 8 6 L 16 6 C 17 6 18 7 18 8 L 18 16 M 6 14 L 4 14 C 3 14 2 13 2 12 L 2 4 C 2 3 3 2 4 2 L 12 2 C 13 2 14 3 14 4 L 14 6" stroke-linecap="round" stroke-linejoin="round"/>`,
141+
accordion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 18 6 L 16 8 L 18 10 L 16 12 L 18 14 L 16 16 L 18 18 L 2 18 L 4 16 L 2 14 L 4 12 L 2 10 L 4 8 L 2 6 L 4 4 L 2 2"/><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 16 4 L 4 4 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 6 L 18 6 L 16 8 L 4 8 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 18 10 L 16 12 L 4 12 Z" /><path stroke="none" fill="${props.stroke}" style="opacity:0.3" stroke-linecap="round" stroke-linejoin="round" d="M 2 14 L 18 14 L 16 16 L 4 16 Z" />`
141142
}
142143
})
143144

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import VueUiWaffle from "./vue-ui-waffle.vue";
4444
import VueUiWheel from "./vue-ui-wheel.vue";
4545
import VueUiXy from "./vue-ui-xy.vue";
4646
import VueUiTableHeatmap from "./vue-ui-table-heatmap.vue";
47+
import VueUiAccordion from "./vue-ui-accordion.vue";
4748
4849
const props = defineProps({
4950
component: { type: String },
@@ -52,7 +53,7 @@ const props = defineProps({
5253
})
5354
5455
const isError = computed(() => {
55-
return !["VueUi3dBar", "VueUiAgePyramid", "VueUiAnnotator", "VueUiCandlestick", "VueUiChestnut", "VueUiDashboard", "VueUiDigits", "VueUiDonutEvolution", "VueUiDonut", "VueUiGauge", "VueUiGalaxy", "VueUiHeatmap", "VueUiKpi", "VueUiMiniLoader", "VueUiMolecule", "VueUiMoodRadar", "VueUiNestedDonuts", "VueUiOnion", "VueUiQuadrant", "VueUiRadar", "VueUiRating", "VueUiRelationCircle", "VueUiRings", "VueUiScatter", "VueUiScreenshot", "VueUiSkeleton", "VueUiSmiley", "VueUiSparkbar", "VueUiSparkgauge", "VueUiSparkHistogram", "VueUiSparkline", "VueUiSparkStackbar", "VueUiTableSparkline", "VueUiTable", "VueUiThermometer", "VueUiTiremarks", "VueUiVerticalBar", "VueUiWaffle", "VueUiWheel", "VueUiXy", "VueUiTreemap", "VueUiTableHeatmap"].includes(props.component)
56+
return !["VueUi3dBar", "VueUiAgePyramid", "VueUiAnnotator", "VueUiCandlestick", "VueUiChestnut", "VueUiDashboard", "VueUiDigits", "VueUiDonutEvolution", "VueUiDonut", "VueUiGauge", "VueUiGalaxy", "VueUiHeatmap", "VueUiKpi", "VueUiMiniLoader", "VueUiMolecule", "VueUiMoodRadar", "VueUiNestedDonuts", "VueUiOnion", "VueUiQuadrant", "VueUiRadar", "VueUiRating", "VueUiRelationCircle", "VueUiRings", "VueUiScatter", "VueUiScreenshot", "VueUiSkeleton", "VueUiSmiley", "VueUiSparkbar", "VueUiSparkgauge", "VueUiSparkHistogram", "VueUiSparkline", "VueUiSparkStackbar", "VueUiTableSparkline", "VueUiTable", "VueUiThermometer", "VueUiTiremarks", "VueUiVerticalBar", "VueUiWaffle", "VueUiWheel", "VueUiXy", "VueUiTreemap", "VueUiTableHeatmap", "VueUiAccordion"].includes(props.component)
5657
});
5758
5859
const vue_ui_3d_bar = ref(null);
@@ -128,7 +129,7 @@ const recalculateHeight = ref(() => null);
128129
129130
onMounted(() => {
130131
if (isError.value) {
131-
throw new Error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n. VueUi3dBar\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiDashboard\n. VueUiDigits\n. VueUiDonutEvolution\n. VueUiDonut\n. VueUiGauge\n. VueUiHeatmap\n. VueUiMiniLoadar\n. VueUiKpi\n. VueUiMolecule\n. VueUiMoodRadar\n. VueUiNestedDonuts\n. VueUiOnion\n. VueUiQuadrant\n. VueUiRadar\n. VueUiRating\n. VueUiRelationCircle\n. VueUiRings\n. VueUiScatter\n. VueUiScreenshot\n. VueUiSkeleton\n. VueUiSmiley\n. VueUiSparkbar\n. VueUiSparkgauge\n. VueUiSparkHistogram\n. VueUiSparkline\n. VueUiSparkStackbar\n. VueUiTableHeatmap\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
132+
throw new Error(`\n\nVue Data UI exception:\nThe provided component "${props.component}" does not exist. Check the spelling.\n\nAvailable components:\n\n. VueUi3dBar\n. VueUiAccordion\n. VueUiAgePyramid\n. VueUiAnnotator\n. VueUiCandlestick\n. VueUiChestnut\n. VueUiDashboard\n. VueUiDigits\n. VueUiDonutEvolution\n. VueUiDonut\n. VueUiGauge\n. VueUiHeatmap\n. VueUiMiniLoadar\n. VueUiKpi\n. VueUiMolecule\n. VueUiMoodRadar\n. VueUiNestedDonuts\n. VueUiOnion\n. VueUiQuadrant\n. VueUiRadar\n. VueUiRating\n. VueUiRelationCircle\n. VueUiRings\n. VueUiScatter\n. VueUiScreenshot\n. VueUiSkeleton\n. VueUiSmiley\n. VueUiSparkbar\n. VueUiSparkgauge\n. VueUiSparkHistogram\n. VueUiSparkline\n. VueUiSparkStackbar\n. VueUiTableHeatmap\n. VueUiTableSparkline\n. VueUiTable\n. VueUiThermometer\n. VueUiTiremarks\n. VueUiVerticalBar\n. VueUiWaffle\n. VueUiWheel\n. VueUiXy\n\n`)
132133
}
133134
134135
if(vue_ui_table_heatmap.value) {
@@ -349,6 +350,18 @@ defineExpose({
349350
The provided component "{{ component }}" does not exist
350351
</div>
351352

353+
<VueUiAccordion v-if="component === 'VueUiAccordion'" :config="config">
354+
<template #arrow="{ backgroundColor, color, iconColor }">
355+
<slot name="arrow" v-bind="{ backgroundColor, color, iconColor }"/>
356+
</template>
357+
<template #title="{ color }">
358+
<slot name="title" v-bind="{ color }"/>
359+
</template>
360+
<template #content="{ backgroundColor, color }">
361+
<slot name="content" v-bind="{ backgroundColor, color }"/>
362+
</template>
363+
</VueUiAccordion>
364+
352365
<VueUiTableHeatmap
353366
v-if="component === 'VueUiTableHeatmap'"
354367
ref="vue_ui_table_heatmap"

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import BaseIcon from "../atoms/BaseIcon.vue";
4+
import { useNestedProp } from "../useNestedProp";
5+
import mainConfig from "../default_configs.json";
6+
7+
const props = defineProps({
8+
config: {
9+
type: Object,
10+
default() {
11+
return {}
12+
}
13+
},
14+
});
15+
16+
const defaultConfig = ref(mainConfig.vue_ui_accordion);
17+
18+
const accordionConfig = computed(() => {
19+
return useNestedProp({
20+
userConfig: props.config,
21+
defaultConfig: defaultConfig.value
22+
});
23+
});
24+
25+
</script>
26+
27+
<template>
28+
<details>
29+
<summary>
30+
<div class="vue-ui-accordion-head" :style="`background:${accordionConfig.head.backgroundColor};padding:${accordionConfig.head.padding};`">
31+
<div class="vue-ui-accordion-arrow">
32+
<slot name="arrow" v-if="accordionConfig.head.useArrowSlot" v-bind="{ backgroundColor: accordionConfig.head.backgroundColor, color: accordionConfig.head.color, iconColor: accordionConfig.head.iconColor }" />
33+
<BaseIcon name="arrowRight" v-else :stroke="accordionConfig.head.iconColor" />
34+
</div>
35+
<slot name="title" v-bind="{ color: accordionConfig.head.color }"/>
36+
</div>
37+
</summary>
38+
</details>
39+
<div class="vue-ui-accordion-content" :style="`background:${accordionConfig.body.backgroundColor};color:${accordionConfig.body.color}`">
40+
<slot name="content" v-bind="{ backgroundColor: accordionConfig.body.backgroundColor, color: accordionConfig.body.color }"/>
41+
</div>
42+
</template>
43+
44+
<style scoped>
45+
summary {
46+
user-select: none;
47+
cursor: pointer;
48+
}
49+
50+
details {
51+
overflow: hidden;
52+
}
53+
54+
details>summary {
55+
list-style: none;
56+
}
57+
58+
.vue-ui-accordion-head {
59+
display: flex;
60+
flex-direction: row;
61+
gap: 6px;
62+
}
63+
64+
.vue-ui-accordion-arrow {
65+
display: flex;
66+
place-items: center;
67+
justify-content: center;
68+
width: fit-content;
69+
transform: rotate(0deg);
70+
transition: transform 0.3s ease-in-out;
71+
transform-origin: center;
72+
}
73+
74+
details[open]>summary .vue-ui-accordion-arrow {
75+
transform: rotate(90deg);
76+
}
77+
78+
details summary::-webkit-details-marker {
79+
display: none;
80+
}
81+
82+
div.vue-ui-accordion-content {
83+
opacity: 0;
84+
box-sizing: border-box;
85+
max-height: 0;
86+
overflow: hidden;
87+
padding: 0 10px;
88+
transition: max-height 400ms ease-out, border 0ms 400ms linear, opacity 400ms ease-out;
89+
}
90+
91+
details[open]+div.vue-ui-accordion-content {
92+
max-height: 800px;
93+
transition: max-height 400ms ease-out, border 0ms linear, opacity 400ms ease-out;
94+
opacity: 1;
95+
}
96+
97+
details[open] span::before {
98+
rotate: 90deg;
99+
transition: rotate 200ms ease-out;
100+
}
101+
</style>

‎src/default_configs.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3637,5 +3637,18 @@
36373637
"userOptions": {
36383638
"show": true
36393639
}
3640+
},
3641+
"vue_ui_accordion": {
3642+
"head": {
3643+
"useArrowSlot": false,
3644+
"backgroundColor": "#FFFFFF",
3645+
"color": "#2D353C",
3646+
"iconColor": "#5f8bee",
3647+
"padding": "12px 6px"
3648+
},
3649+
"body": {
3650+
"backgroundColor": "#FFFFFF",
3651+
"color":"#2D353C"
3652+
}
36403653
}
36413654
}

‎src/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import VueUiGalaxy from "./components/vue-ui-galaxy.vue";
4444
import VueUiKpi from "./components/vue-ui-kpi.vue";
4545
import VueUiTreemap from "./components/vue-ui-treemap.vue";
4646
import VueUiTableHeatmap from "./components/vue-ui-table-heatmap.vue";
47+
import VueUiAccordion from "./components/vue-ui-accordion.vue";
4748

4849
export {
4950
VueUiXy,
@@ -91,5 +92,6 @@ export {
9192
VueUiGalaxy,
9293
VueUiKpi,
9394
VueUiTreemap,
94-
VueUiTableHeatmap
95+
VueUiTableHeatmap,
96+
VueUiAccordion
9597
};

‎src/main.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@ import {
4545
VueUiWaffle,
4646
VueUiWheel,
4747
VueUiXy,
48-
VueUiTableHeatmap
48+
VueUiTableHeatmap,
49+
VueUiAccordion
4950
} from 'vue-data-ui';
5051
import 'vue-data-ui/style.css';
5152

@@ -94,4 +95,5 @@ app.component("VueUiVerticalBar", VueUiVerticalBar);
9495
app.component("VueUiWaffle", VueUiWaffle);
9596
app.component("VueUiWheel", VueUiWheel);
9697
app.component("VueUiXy", VueUiXy);
98+
app.component("VueUiAccordion", VueUiAccordion);
9799
app.mount('#app');

0 commit comments

Comments
 (0)