Skip to content

Commit f974502

Browse files
graphierosgraphieros
committed
VueUiIcon added 29 icons
1 parent 2f2598e commit f974502

File tree

6 files changed

+84
-16
lines changed

6 files changed

+84
-16
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.40",
4+
"version": "1.9.41",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3583,16 +3583,47 @@ function shootScreenProd() {
35833583
<Box open :misc="true">
35843584
<template #title>__Icons__</template>
35853585
<template #misc>
3586-
<BaseIcon name="pdf" />
3587-
<BaseIcon name="image" />
3588-
<BaseIcon name="excel" />
3589-
<BaseIcon name="tableOpen" />
3590-
<BaseIcon name="tableClose" />
3591-
<BaseIcon name="spin" />
3592-
<BaseIcon name="close" />
3593-
<BaseIcon name="labelOpen" />
3594-
<BaseIcon name="labelClose" />
3595-
<BaseIcon name="sort" />
3586+
<div style="display: flex; flex-wrap: wrap; gap: 12px; width: 100%">
3587+
<BaseIcon name="pdf" />
3588+
<BaseIcon name="image" />
3589+
<BaseIcon name="excel" />
3590+
<BaseIcon name="tableOpen" />
3591+
<BaseIcon name="tableClose" />
3592+
<BaseIcon name="spin" />
3593+
<BaseIcon name="close" />
3594+
<BaseIcon name="labelOpen" />
3595+
<BaseIcon name="labelClose" />
3596+
<BaseIcon name="sort" />
3597+
<BaseIcon name="chartBar" stroke="#42d392" />
3598+
<BaseIcon name="chartLine" stroke="#42d392" />
3599+
<BaseIcon name="chartRings" stroke="#42d392" />
3600+
<BaseIcon name="chartDonut" stroke="#42d392" />
3601+
<BaseIcon name="chartGauge" stroke="#42d392" />
3602+
<BaseIcon name="chartTiremarks" stroke="#42d392" />
3603+
<BaseIcon name="chartDonutEvolution" stroke="#42d392" />
3604+
<BaseIcon name="screenshot" stroke="#42d392" />
3605+
<BaseIcon name="chartWheel" stroke="#42d392" />
3606+
<BaseIcon name="skeleton" stroke="#42d392" />
3607+
<BaseIcon name="chartSparkHistogram" stroke="#42d392" />
3608+
<BaseIcon name="chartRelationCircle" stroke="#42d392" />
3609+
<BaseIcon name="chartCandlestick" stroke="#42d392" />
3610+
<BaseIcon name="chartScatter" stroke="#42d392" />
3611+
<BaseIcon name="chartVerticalBar" stroke="#42d392" />
3612+
<BaseIcon name="chartOnion" stroke="#42d392" />
3613+
<BaseIcon name="chartQuadrant" stroke="#42d392" />
3614+
<BaseIcon name="chartThermometer" stroke="#42d392" />
3615+
<BaseIcon name="chartRadar" stroke="#42d392" />
3616+
<BaseIcon name="chartSparkStackbar" stroke="#42d392" />
3617+
<BaseIcon name="smiley" stroke="#42d392" />
3618+
<BaseIcon name="star" stroke="#42d392" />
3619+
<BaseIcon name="chartChestnut" stroke="#42d392" />
3620+
<BaseIcon name="chartAgePyramid" stroke="#42d392" />
3621+
<BaseIcon name="chartWaffle" stroke="#42d392" />
3622+
<BaseIcon name="annotator" stroke="#42d392" />
3623+
<BaseIcon name="dashboard" stroke="#42d392" />
3624+
<BaseIcon name="chartHeatmap" stroke="#42d392" />
3625+
<BaseIcon name="chartTable" stroke="#42d392" />
3626+
</div>
35963627
</template>
35973628
</Box>
35983629

‎src/atoms/BaseIcon.vue

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,36 @@ const icons = computed(() => {
3333
excel: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linejoin="round" d="M4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L16 19C18 19 19 18 19 16L19 6C15 6 14 5 14 1ZM14 8C15 8 16 9 16 10L16 14C16 15 15 16 14 16L6 16C5 16 4 15 4 14L4 10C4 9 5 8 6 8Z"/><line stroke="${props.stroke}" stroke-width="${props.strokeWidth}" x1="9" x2="9" y1="8" y2="16" /><line stroke="${props.stroke}" stroke-width="${props.strokeWidth}" x1="4" x2="16" y1="12" y2="12" />`,
3434
pdf: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" d="M4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L16 19C18 19 19 18 19 16L19 6C15 6 14 5 14 1ZM4 16 4 9 5 9Q7 9 7 11 7 13 5 13L4 13M9 16 9 9 9 9Q12 9 12 12L12 13Q12 16 9 16L9 16M14 16 14 9 16 9M14 12 16 12"/>`,
3535
labelOpen: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 8C1 9 1 11 2 12L5 16C6 17 6 17 7 17L17 17C19 17 19 16 19 15L19 5C19 5 19 3 17 3L7 3C6 3 6 3 5 4L2 8M7 7 13 7M7 10 15 10M7 13 16 13" />`,
36-
labelClose: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 8C1 9 1 11 2 12L5 16C6 17 6 17 7 17L17 17C19 17 19 15 19 15L19 5C19 5 19 3 17 3L12 3M7 10 15 10M7 13 16 13M9 6 4 1M4 6 9 1" />`
36+
labelClose: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 8C1 9 1 11 2 12L5 16C6 17 6 17 7 17L17 17C19 17 19 15 19 15L19 5C19 5 19 3 17 3L12 3M7 10 15 10M7 13 16 13M9 6 4 1M4 6 9 1" />`,
37+
chartBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 12 2 18C2 19 2 19 3 19L5 19C6 19 6 19 6 18L6 12C6 11 6 11 5 11L3 11C2 11 2 11 2 12M8 7 8 18C8 19 8 19 9 19L11 19C12 19 12 19 12 18L12 7C12 6 12 6 11 6L9 6C8 6 8 6 8 7M14 2 14 18C14 19 14 19 15 19L17 19C18 19 18 19 18 18L18 2C18 1 18 1 17 1L15 1C14 1 14 1 14 2"/>`,
38+
chartLine: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 1 1 18C1 19 1 19 2 19L19 19M3 17Q3 12 5 7 6 5 8 10 10 15 11 6 12 3 14 8 16 11 19 1" />`,
39+
chartRings: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 14A1 1 0 0015 14 1 1 0 005 14M8 17A1 1 0 0012 17 1 1 0 008 17" />`,
40+
chartDonut: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M6 10A1 1 0 0014 10 1 1 0 006 10M1 10 6 10M10 14 10 19M14 10" />`,
41+
chartGauge: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M19 13A1 1 0 001 13M9 15A1 1 0 0011 15 1 1 0 009 15M10 14 11 8" />`,
42+
chartTiremarks: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 8 1 12M3 8 3 12M5 8 5 12M7 8 7 12M9 8 9 12M11 8 11 12M13 8 13 12M15 8 15 12M17 8 17 12M19 8 19 12" />`,
43+
chartDonutEvolution: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 1 1 18C1 19 1 19 2 19L19 19M3 8A1 1 0 007 8 1 1 0 003 8M8 14A1 1 0 0012 14 1 1 0 008 14M14 4A1 1 0 0018 4 1 1 0 0014 4M7 10 9 12M11 12 15 6" />`,
44+
screenshot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 4 1 3C1 2 2 1 3 1L4 1M16 1 17 1C18 1 19 2 19 3L19 4M1 16 1 17C1 18 2 19 3 19L4 19M16 19 17 19C18 19 19 18 19 17L19 16M8 10A1 1 0 0012 10 1 1 0 008 10M5 13 5 8C5 7 5 7 6 7L14 7C15 7 15 7 15 8L15 13C15 14 15 14 14 14L6 14C5 14 5 14 5 13M7 6 13 6" />`,
45+
chartWheel: `<circle cx="10" cy="10" r="7" fill="none" stroke="${props.stroke}" stroke-width="${props.strokewidth}" stroke-dasharray="16"/><circle cx="10" cy="10" r="9" fill="none" stroke="${props.stroke}" stroke-width="${props.strokewidth}" stroke-dasharray="2" style="opacity:0.7"/><circle cx="10" cy="10" r="1" fill="${props.stroke}" />`,
46+
skeleton: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 14A1 1 0 003 18L7 18A1 1 0 007 14L3 14M3 8A1 1 0 003 12L7 12A1 1 0 007 8L3 8M3 2A1 1 0 003 6L4 6A1 1 0 004 2L3 2M12 10 12 16C12 17 13 18 14 18L17 18C18 18 19 17 19 16L19 10C19 9 18 8 17 8L14 8C13 8 12 9 12 10" />`,
47+
chartSparkHistogram: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 11C14 12 15 12 15 12L17 12C18 12 18 11 18 11L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9" />`,
48+
chartRelationCircle: `<path fill="none" stroke="${props.stroke}" stroke-linecap="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M1 10C7 11 9 13 10 19M10 19C10 11 8 7 6 2M10 19C10 11 12 7 14 2M10 19C11 13 12 11 19 10" />`,
49+
chartCandlestick: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 14C14 15 15 15 15 15L17 15C18 15 18 14 18 14L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9M4 8 4 5M3 5 5 5M10 13 10 16M9 16 11 16M16 8 16 2M15 2 17 2M10 7 10 4M9 4 11 4M4 12 4 18M3 18 5 18M16 15 16 18M15 18 17 18" />`,
50+
chartScatter: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 1 1 18C1 19 1 19 2 19L19 19" /><circle stroke="none" fill="${props.stroke}" cx="5" cy="15" r="1"/><circle stroke="none" fill="${props.stroke}" cx="6" cy="12" r="1" /><circle stroke="none" fill="${props.stroke}" cx="8" cy="15" r="1"/><circle stroke="none" fill="${props.stroke}" cx="10" cy="8" r="1"/><circle stroke="none" fill="${props.stroke}" cx="12" cy="10" r="1"/><circle stroke="none" fill="${props.stroke}" cx="14" cy="6" r="1"/><circle stroke="none" fill="${props.stroke}" cx="16" cy="4" r="1"/><circle stroke="none" fill="${props.stroke}" cx="11" cy="14" r="1"/>`,
51+
chartVerticalBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 3 1 5C1 6 1 6 2 6L9 6C10 6 10 6 10 5L10 3C10 2 10 2 9 2L2 2C1 2 1 2 1 3M1 9 1 11C1 12 1 12 2 12L13 12C14 12 14 12 14 11L14 9C14 8 14 8 13 8L2 8C1 8 1 8 1 9M1 15 1 17C1 18 1 18 2 18L17 18C18 18 18 18 18 17L18 15C18 14 18 14 17 14L2 14C1 14 1 14 1 15" />`,
52+
chartOnion: `<circle fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" cx="10" cy="10" r="9" stroke-dasharray="20" /><circle fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" cx="10" cy="10" r="5" stroke-dasharray="16" style="transform:rotate(-110deg);transform-origin:center" /><circle fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" cx="10" cy="10" r="2" stroke-dasharray="8" style="transform:rotate(-100deg);transform-origin:center"/>`,
53+
chartQuadrant: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M10 1 10 19M1 10 19 10" /><circle stroke="none" fill="${props.stroke}" cx="3" cy="14" r="1"/><circle stroke="none" fill="${props.stroke}" cx="5" cy="6" r="1"/><circle stroke="none" fill="${props.stroke}" cx="14" cy="17" r="1"/><circle stroke="none" fill="${props.stroke}" cx="17" cy="14" r="1"/><circle stroke="none" fill="${props.stroke}" cx="15" cy="4" r="1"/>`,
54+
chartThermometer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M13 4A1 1 0 007 4L7 16A1 1 0 0013 16L13 4M7 15 8 15M7 12 8 12M7 9 8 9M7 6 8 6M10 18 10 9M12 15 13 15M12 12 13 12M12 9 13 9M12 6 13 6" />`,
55+
chartRadar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 6 2 14 10 19 18 14 18 6 10 1 2 6" /><path fill="${props.stroke}" stroke="none" stroke-width="0" stroke-linecap="round" d="M4 7 10 5 18 6 12 11 10 16 6 11 4 7" />`,
56+
chartSparkStackbar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 8A1 1 0 003 12L17 12A1 1 0 0017 8L3 8M5 8 5 12M9 8 9 12M15 8 15 12" />`,
57+
smiley: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 12C8 14 12 14 15 12M5 7A1 1 0 008 7 1 1 0 005 7M12 7A1 1 0 0015 7 1 1 0 0012 7" />`,
58+
star: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M3 19 10 15 17 19 14 12 19 8 13 8 10 2 7 8 1 8 6 12 3 19" />`,
59+
chartChestnut: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M4 3A1 1 0 004 9 1 1 0 004 3M4 12A1 1 0 004 17 1 1 0 004 12M9 4 19 4M9 7 17 7M9 10 15 10M9 13 13 13M9 16 11 16" />`,
60+
chartAgePyramid: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 19 17 19M2 17 18 17M1 15 19 15M2 13 18 13M4 11 16 11M2 9 18 9M4 7 17 7M7 5 13 5M9 3 11 3M10 1 11 1" />`,
61+
chartWaffle: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 2 1 4C1 5 1 5 2 5L4 5C5 5 5 5 5 4L5 2C5 1 5 1 4 1L2 1C1 1 1 1 1 2M18 1 16 1C15 1 15 1 15 2L15 4C15 5 15 5 16 5L18 5C19 5 19 5 19 4L19 2C19 1 19 1 18 1M8 2 8 4C8 5 8 5 9 5L11 5C12 5 12 5 12 4L12 2C12 1 12 1 11 1L9 1C8 1 8 1 8 2M2 19 4 19C5 19 5 19 5 18L5 16C5 15 5 15 4 15L2 15C1 15 1 15 1 16L1 18C1 19 1 19 2 19M1 9 1 11C1 12 1 12 2 12L4 12C5 12 5 12 5 11L5 9C5 8 5 8 4 8L2 8C1 8 1 8 1 9M15 16 15 18C15 19 15 19 16 19L18 19C19 19 19 19 19 18L19 16C19 15 19 15 18 15L16 15C15 15 15 15 15 16M8 16 8 18C8 19 8 19 9 19L11 19C12 19 12 19 12 18L12 16C12 15 12 15 11 15L9 15C8 15 8 15 8 16M8 9 8 11C8 12 8 12 9 12L11 12C12 12 12 12 12 11L12 9C12 8 12 8 11 8L9 8C8 8 8 8 8 9M15 9 15 11C15 12 15 12 16 12L18 12C19 12 19 12 19 11L19 9C19 8 19 8 18 8L16 8C15 8 15 8 15 9" />`,
62+
annotator: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 17 4 12C5 12 7 13 8 15L3 17M4 12 11 2C12 2 14 3 15 5L8 15M3 19C5 19 5 19 8 19 11 19 11 18 13 18 15 18 15 19 19 19M12 1C13 1 15 2 16 4" />`,
63+
dashboard: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 5A1 1 0 009 5 1 1 0 001 5M5 1 5 5 9 5M1 15 6 15M1 18 8 18M13 9C13 10 13 10 14 10 15 10 15 10 15 9L15 6C15 5 15 5 14 5 13 5 13 5 13 6 13 6 13 8 13 9M17 9C17 10 17 10 18 10 19 10 19 10 19 9L19 4C19 3 19 3 18 3 17 3 17 3 17 4L17 9M9 12 12 18 14 15 17 16 19 13M1 12 4 12" />`,
64+
chartHeatmap: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 2 10 18M2 10 18 10M6 2 6 18M14 2 14 18M2 6 18 6M2 14 18 14"/><rect fill="${props.stroke}" stroke="none" x="2" y="6" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="6" y="10" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="6" y="14" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="14" y="2" height="4" width="4" style="opacity:0.5" />`,
65+
chartTable: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 6 10 18M2 10 18 10M6 2M14 2M2 6 18 6M2 14 18 14M6 8 8 8M6 12 8 12M6 16 8 16M14 8 16 8M14 12 16 12M14 16 16 16" />`
3766
}
3867
})
3968

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,13 +92,13 @@ describe('<VueUiHeatmap />', () => {
9292
cy.get(`[data-cy="user-options-summary"]`).click();
9393

9494
cy.get(`[data-cy="user-options-pdf"]`).click();
95-
cy.wait(3000);
95+
cy.wait(10000);
9696
cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.pdf`);
9797
cy.get(`[data-cy="user-options-xls"]`).click();
9898
cy.wait(3000);
9999
cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.xlsx`);
100100
cy.get(`[data-cy="user-options-img"]`).click();
101-
cy.wait(3000);
101+
cy.wait(10000);
102102
cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.png`);
103103
cy.clearDownloads();
104104

‎types/vue-data-ui.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ declare module 'vue-data-ui' {
55
[key: string]: unknown;
66
}
77

8+
export const VueUiIcon: DefineComponent<{
9+
name: string;
10+
stroke?: string;
11+
strokeWidth?: number;
12+
size?: number;
13+
isSpin?: boolean;
14+
}>;
15+
816
export type VueUiDonutEvolutionConfig = {
917
style?: {
1018
fontFamily?: string;

0 commit comments

Comments
 (0)