Added new icons

graphieros · Mar 25, 2024 · 26dfa52 · 26dfa52
1 parent 7378b7b
commit 26dfa52
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.39",
+  "version": "2.0.40",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -2866,12 +2866,14 @@ function testEmit2(data) {
           <BaseIcon name="circleQuestion" stroke="#42d392" />
           <BaseIcon name="refresh" stroke="#42d392" />
           <BaseIcon name="chartNestedDonuts" stroke="#42d392" />
+          <BaseIcon name="chartSparkbar" stroke="#42d392" />
+          <BaseIcon name="chartSparkline" stroke="#42d392" />
 
         </div>
       </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkgauge)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkgauge)">
         <template #title>
           <BaseIcon name="chartGauge"/>
           VueUiSparkgauge
@@ -3283,7 +3285,7 @@ function testEmit2(data) {
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
         <template #title>
-          <BaseIcon name="chartLine" />
+          <BaseIcon name="chartSparkline" />
           VueUiSparkline
         </template>
         <template #dev>
@@ -4075,7 +4077,7 @@ function testEmit2(data) {
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkbar)">
         <template #title>
-          <BaseIcon name="chartVerticalBar"/>
+          <BaseIcon name="chartSparkbar"/>
           VueUiSparkbar
         </template>
         <template #dev>

diff --git a/src/atoms/BaseIcon.vue b/src/atoms/BaseIcon.vue
@@ -43,7 +43,7 @@ const icons = computed(() => {
         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" />`,
         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"/>`,
         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" />`,
-        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" />`,
+        chartSparkStackbar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 18 10" style="opacity:0.3" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 14 10" style="opacity:0.5" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 10 L 8 10" />`,
         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" />`,
         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" />`,
         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" />`,
@@ -97,6 +97,8 @@ const icons = computed(() => {
         circleExclamation: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 10 5 L 10 10 M 10 13 A 1 1 0 0 0 10 15 A 1 1 0 0 0 10 13" />`,
         circleQuestion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 A 1 1 0 0 0 19 10 A 1 1 0 0 0 1 10 M 10 5 C 14 5 14 10 10 10 M 10 13 A 1 1 0 0 0 10 15 A 1 1 0 0 0 10 13 M 7 7 C 7 6 8 5 10 5" />`,
         refresh: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 A 1 1 0 0 0 17 10 C 17 5 12 2 7 4 L 10 1 M 7 4 L 10 7" />`,
+        chartSparkbar: `<path fill="none"  stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 5 L 18 5 M 2 10 L 18 10 M 2 15 L 18 15" style="opacity:0.3" /><path fill="none"  stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 5 L 15 5 M 2 10 L 11 10 M 2 15 L 7 15" />`,
+        chartSparkline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 1 10 C 1 8 2 8 2 8 C 4 8 4 12 6 13 C 8 12 6 7 8 6 C 10 6 10 11 11 11 C 13 12 12 6 14 4" />`
     }
 })
 

diff --git a/src/components/vue-data-ui.vue b/src/components/vue-data-ui.vue
@@ -316,7 +316,7 @@ defineExpose({
 <template>
     <div v-if="isError" style="width:100%; display: flex; gap:6px; align-items:center; color:#FF0000">
         <div style="width:36px">
-            <BaseIcon name="chartDonut" stroke="#FF0000" />
+            <BaseIcon name="moodFlat" stroke="#FF0000" />
         </div>
         The provided component "{{ component }}" does not exist
     </div>

diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
@@ -469,7 +469,7 @@ declare module 'vue-data-ui' {
         config?: VueUiMoodRadarConfig
     }>;
 
-    export type VueUiIconName = "annotator" | "chart3bar" | "chartAgePyramid" | "chartBar" | "chartCandlestick" | "chartChestnut" | "chartDonut" | "chartDonutEvolution" | "chartGauge" | "chartHeatmap" | "chartLine" | "chartMoodbar" | "chartOnion" | "chartQuadrant" | "chartRadar" | "chartRelationCircle" | "chartRings" | "chartScatter" | "chartSparkHistogram" | "chartSparkStackbar" | "chartTable" | "chartThermometer" | "chartTiremarks" | "chartVerticalBar" | "chartWaffle" | "chartWheel" | "close" | "dashboard" | "digit0" | "digit1" | "digit2" | "digit3" | "digit4" | "digit5" | "digit6" | "digit7" | "digit8" | "digit9" | "excel" | "image" | "labelClose" | "labelOpen" | "menu" | "moodFlat" | "moodHappy" | "moodNeutral" | "moodSad" | "pdf" | "screenshot" | "skeleton" | "smiley" | "sort" | "spin" | "star" | "tableClose" | "tableOpen" | "chartNestedDonuts";
+    export type VueUiIconName = "annotator" | "chart3bar" | "chartAgePyramid" | "chartBar" | "chartCandlestick" | "chartChestnut" | "chartDonut" | "chartDonutEvolution" | "chartGauge" | "chartHeatmap" | "chartLine" | "chartMoodbar" | "chartOnion" | "chartQuadrant" | "chartRadar" | "chartRelationCircle" | "chartRings" | "chartScatter" | "chartSparkHistogram" | "chartSparkStackbar" | "chartTable" | "chartThermometer" | "chartTiremarks" | "chartVerticalBar" | "chartWaffle" | "chartWheel" | "close" | "dashboard" | "digit0" | "digit1" | "digit2" | "digit3" | "digit4" | "digit5" | "digit6" | "digit7" | "digit8" | "digit9" | "excel" | "image" | "labelClose" | "labelOpen" | "menu" | "moodFlat" | "moodHappy" | "moodNeutral" | "moodSad" | "pdf" | "screenshot" | "skeleton" | "smiley" | "sort" | "spin" | "star" | "tableClose" | "tableOpen" | "chartNestedDonuts" | "chartSparkbar" | "refresh" | "circleQuestion" | "circleExclamation" | "circleCheck" | "circleCancel" | "moodLaughing" | "moodWink" | "moodEmbarrassed" | "moodSurprised" | "exitFullscreen" | "fullscreen" | "arrowRight" | "arrowTop" | "arrowBottom" | "arromwLeft" | "chartCluster" | "chartSparkline";
 
     export const VueUiIcon: DefineComponent<{
         name: VueUiIconName,