Improvement - Add icons and exposed methods

Author: graphieros

TestingArena/ArenaVueUiIcon.vue

@@ -3,7 +3,7 @@ import { ref } from "vue";
 import BaseIcon from "./../src/atoms/BaseIcon.vue";
 
 const icons = ref([
-    "annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "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", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot"
+    "annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "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", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread",
 ])
 
 </script>
@@ -15,4 +15,7 @@ const icons = ref([
     <div style="display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin: 0 auto; margin-top: 64px; margin-bottom: 64px; max-width: 1200px">
         <BaseIcon v-for="icon in icons" :name="icon" stroke="#CCCCCC" :size="48"/>
     </div>
+    <div style="display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin: 0 auto; margin-top: 64px; margin-bottom: 64px; max-width: 1200px">
+        <BaseIcon v-for="icon in icons" :name="icon" stroke="#6376DD" :size="96"/>
+    </div>
 </template>

package.json

@@ -107,4 +107,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.13"
   }
-}
+}

src/atoms/BaseIcon.vue

@@ -182,7 +182,12 @@ const icons = computed(() => {
         home: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 10 2 L 18 10 M 4 10 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 10 M 8 18"/>`,
         homeFilled: `<path fill="${props.stroke}" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 10 2 L 18 10 M 4 10 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 10 M 8 18"/>`,
         icons: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 9 L 5 2 L 9 9 L 1 9 M 12 9 L 12 2 L 19 2 L 19 9 L 12 9 M 5 11 C 0 11 0 18 5 18 C 10 18 10 11 5 11 M 15 11 L 15 18 L 16 18 L 16 11 L 15 11 M 12 14 L 19 14 L 19 15 L 12 15 L 12 14"/>`,
-        robot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 18 18 L 2 18 L 2 2 M 6 5 A 1 1 0 0 0 6 8 A 1 1 0 0 0 6 5 M 14 5 A 1 1 0 0 0 14 8 A 1 1 0 0 0 14 5 M 1 4 L 1 9 M 19 4 L 19 9 M 5 11 C 6 16 14 16 15 11 M 7 1 L 13 1"/>`
+        robot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 18 2 L 18 18 L 2 18 L 2 2 M 6 5 A 1 1 0 0 0 6 8 A 1 1 0 0 0 6 5 M 14 5 A 1 1 0 0 0 14 8 A 1 1 0 0 0 14 5 M 1 4 L 1 9 M 19 4 L 19 9 M 5 11 C 6 16 14 16 15 11 M 7 1 L 13 1"/>`,
+        hourglass: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 4 1 L 16 1 M 13 1 C 16 3 14 5 14 5 M 7 1 C 4 3 6 5 6 5 M 4 19 L 16 19 M 6 5 C 10 10 10 10 6 15 M 14 5 C 10 10 10 10 14 15 M 13 19 C 16 17 14 15 14 15 M 7 19 C 4 17 6 15 6 15"/><path style="opacity:0.3" fill="${props.stroke}" stroke="none" d="M 7 18 L 13 18 C 14 15 11 13 10 13 C 9 13 6 15 7 18"/>`,
+        computer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 4 L 2 10 C 2 11 3 12 4 12 L 16 12 C 17 12 18 11 18 10 L 18 4 C 18 3 17 2 16 2 L 4 2 C 3 2 2 3 2 4 M 4 16 L 2 19 L 18 19 L 16 16 L 4 16 M 5 14 L 15 14 M 7 14 L 10 12 L 13 14 M 7 5 L 4 7 L 7 9 M 13 5 L 16 7 L 13 9 M 11 4 L 9 10"/>`,
+        htmlTag: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 6 5 L 1 10 L 6 15 M 14 5 L 19 10 L 14 15 M 7 18 L 13 2"/>`,
+        curlyBrackets: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 5 2 C 3 2 2 3 2 5 L 2.35 7.988 C 2 9 1 9 1 10 C 1 11 2 11 2.396 11.949 L 2 15 C 2 17 3 18 5 18 M 15 2 C 17 2 18 3 18 5 L 17.611 8.035 C 18 9 19 9 19 10 C 19 11 18 11 17.611 12.008 L 18 15 C 18 17 17 18 15 18"/>`,
+        curlySpread: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 5 2 C 3 2 2 3 2 5 L 2.35 7.988 C 2 9 1 9 1 10 C 1 11 2 11 2.396 11.949 L 2 15 C 2 17 3 18 5 18 M 15 2 C 17 2 18 3 18 5 L 17.611 8.035 C 18 9 19 9 19 10 C 19 11 18 11 17.611 12.008 L 18 15 C 18 17 17 18 15 18 M 10 9 A 1 1 0 0 0 10 11 A 1 1 0 0 0 10 9 M 6 9 A 1 1 0 0 0 6 11 A 1 1 0 0 0 6 9 M 14 9 A 1 1 0 0 0 14 11 A 1 1 0 0 0 14 9"/>`,
     }
 });
 

src/index.js

@@ -1,7 +1,7 @@
 import { defineAsyncComponent } from "vue";
 import getVueDataUiConfig from "./getVueDataUiConfig";
 import getThemeConfig from "./getThemeConfig";
-import { getPalette, createWordCloudDatasetFromPlainText, abbreviate, createTSpans } from "./lib";
+import { getPalette, createWordCloudDatasetFromPlainText, abbreviate, createTSpans, createStraightPath, createSmoothPath } from "./lib";
 import { lightenColor, darkenColor, shiftColorHue } from "./exposedLib";
 
 export const Arrow = defineAsyncComponent(() => import("./atoms/Arrow.vue"))
@@ -77,5 +77,7 @@ export {
     getVueDataUiConfig,
     lightenColor,
     shiftColorHue,
-    createTSpans
+    createTSpans,
+    createStraightPath,
+    createSmoothPath
 }

types/vue-data-ui.d.ts

@@ -1155,7 +1155,12 @@ declare module "vue-data-ui" {
         | "home"
         | "homeFilled"
         | "icons"
-        | "robot";
+        | "robot"
+        | "hourglass"
+        | "computer"
+        | "htmlTag"
+        | "curlyBrackets"
+        | "curlySpread";
 
     export const VueUiIcon: DefineComponent<{
         name: VueUiIconName;
@@ -6878,6 +6883,38 @@ declare module "vue-data-ui" {
         | ((word: string) => string)
         | null;
 
+
+    export type Point = {
+        [key: string]: any
+        x: number
+        y: number
+    }
+
+    /**
+     * Vue Data UI utility
+     * ---
+     * Generate a straight line path to include in the d attribute of a svg path element 
+     * ___
+     * @example
+     * const path = createStraightPath([{x: 1, y: 1}, { x: 2, y: 1.2}])
+     *
+     * @param points - An array of point objects
+     */
+    export const createStraightPath: (points: Point[]) => string
+
+    /**
+     * Vue Data UI utility
+     * ---
+     * Generate a spline path to include in the d attribute of a svg path element 
+     * ___
+     * @example
+     * const path = createSmoothPath([{x: 1, y: 1}, { x: 2, y: 1.2}, { x: 3, y: 0.2 }])
+     *
+     * @param points - An array of point objects
+     */
+    export const createSmoothPath: (points: Point[]) => string
+
+
     /**
      * Vue Data UI utility
      * ---