vue-data-ui-cli 0.0.3 → 0.0.5

package/boilerplate.js

@@ -25,24 +25,25 @@ export default ({
       </template>-->
   `;
 
-  // let emitFuncs = '';
-  // let emitDefs = '';
+  let emitFuncs = '';
+  let emitDefs = '';
 
-  // if (emits && emits.length) {
-  //   emitFuncs = emits.map(emit => {
-  //     return `${useTypescript ? emit.funcTs : emit.func}`
-  //   }).toString().replaceAll(',', '\n\n');
+  if (emits && emits.length) {
+    emitFuncs = emits.map(emit => {
+      return `${useTypescript ? emit.funcTs : emit.func}`
+    }).toString().replaceAll(',', '\n\n');
   
-  //   emitDefs = emits.map(emit => {
-  //     return `@${emit.name}="${emit.name}"`;
-  //   }).toString().replaceAll(',', '');
-  // }
+    emitDefs = emits.map(emit => {
+      return `@${emit.name}="${emit.name}"`;
+    }).toString().replaceAll(',', '');
+  }
 
 
   return `
 <script setup${useTypescript ? ' lang="ts"' : ''}>
 import { ${[useComputedConfig, useComputedDataset].includes(false) ? 'ref, ' : ''}${useComputedConfig || useComputedDataset ? 'computed ' : ''}} from "vue";
 import { VueDataUi${useTypescript ? `,${['number', 'Array<Array<string | number>>', ''].includes(datasetType) ? '' : `type ${datasetType},`} type ${configType} }` : '}'} from "vue-data-ui";
+import "vue-data-ui/style.css";
 
 ${!datasetType ? '' : `const dataset = ${useComputedDataset ? `computed${dsType}(() => {
   return ${ds};
@@ -57,6 +58,8 @@ const config = ${useComputedConfig ? `computed${confType}(() => {
   return ${conf};
 })` : `ref${confType}(${conf})`};
 
+${emitFuncs}
+
 </script>
 
 <template>
@@ -65,6 +68,7 @@ const config = ${useComputedConfig ? `computed${confType}(() => {
       component="${component}"
       ${!datasetType ? '' : `:dataset="dataset"`}
       :config="config"
+      ${emitDefs}
     ${componentSlots.length ? '>' : '/>'}
       ${ componentSlots.length ? '<!-- Use slots here in template tags. Official Vue slots documentation https://vuejs.org/guide/components/slots -->' : '' }
       ${ componentSlots.length ? `<!-- Documentation on Vue Data UI slots, check the slots tab at https://vue-data-ui.graphieros.com/docs#${componentLink} -->` : '' }

package/emits.js

@@ -1,4 +1,4 @@
-export default(componentName) => {
+export default (componentName) => {
     const emitExamples = {
         VueUiXy: [
             {
@@ -19,10 +19,10 @@ export default(componentName) => {
                     console.log({ legend });
                 }`,
                 funcTs: `type VueUiXySelectedLegend = {
-                    name: string
-                    values: number[]
-                    color: string
-                    type: 'line' | 'bar' | 'plot'
+                    readonly name: string
+                    readonly values: number[]
+                    readonly color: string
+                    readonly type: 'line' | 'bar' | 'plot'
                 }
                 /*
                 * @selectLegend - Returns the current visible series when selecting / unselecting the legend
@@ -60,13 +60,13 @@ export default(componentName) => {
                 */
                 type VueUiXySelectedX = {
                     dataset: Array<{
-                        name: string
-                        value: number
-                        color: string
-                        type: 'line' | 'bar' | 'plot'
+                        readonly name: string
+                        readonly value: number
+                        readonly color: string
+                        readonly type: 'line' | 'bar' | 'plot'
                     }>
-                    index: number
-                    indexLabel: string
+                    readonly index: number
+                    readonly indexLabel: string
                 }
                 function selectX(selectedX: VueUiXySelectedX) {
                     console.log({ selectedX });
@@ -105,17 +105,17 @@ export default(componentName) => {
                 */
                 type VueUiXySelectedTimeLabel = {
                     datapoint: Array<{
-                        shape: 'circle' | 'triangle' | 'square' | 'dialond' | 'pentagon' | 'star' | 'hexagon'
-                        name: string
-                        color: string
-                        type: 'line' | 'bar' | 'plot'
-                        value: number
-                        comments: string[]
-                        prefix: string
-                        suffix: string
+                        readonly shape: 'circle' | 'triangle' | 'square' | 'diamond' | 'pentagon' | 'star' | 'hexagon'
+                        readonly name: string
+                        readonly color: string
+                        readonly type: 'line' | 'bar' | 'plot'
+                        readonly value: number
+                        readonly comments: string[]
+                        readonly prefix: string
+                        readonly suffix: string
                     }>
-                    absoluteIndex: number
-                    label: string
+                    readonly absoluteIndex: number
+                    readonly label: string
                 }
                 function selectTimeLabel(selectedTimeLabel: VueUiXySelectedTimeLabel) {
                     console.log({ selectedTimeLabel })
@@ -125,31 +125,89 @@ export default(componentName) => {
         ],
         VueUiDonut: [
             {
-                name: 'selectLegend',
+                name: 'selectDatapoint',
                 func: `/**
-                 * @selectLegend - Returns the current visible series when selecting / unselecting the legend
-                 *
-                 * @typedef {Object} VueUiDonutSelectedLegend
-                 * @property {string} name - The name of the legend item.
-                 * @property {number} value - The value associated with the legend item.
-                 * @property {string} color - The color representing the legend item.
-                 *
-                 * @param {VueUiDonutSelectedLegend[]} legend - The current visible series when selecting or unselecting the legend.
-                 * @returns {void}
-                 */
-                function selectLegend(legend){
-                    console.log({ legend });
+                * @selectDatapoint - On click returns the data related to the selected donut arc
+                *
+                * @typedef {Object} VueUiDonutDatapoint
+                * @property {number} index - The index of the datapoint in the dataset.
+                * @property {number[]} absoluteValues - The array of absolute values associated with the datapoint.
+                * @property {string} arcSlice - The SVG path describing the arc slice.
+                * @property {Object} center - The center point of the donut slice.
+                * @property {number} center.endX - The ending X coordinate of the center.
+                * @property {number} center.endY - The ending Y coordinate of the center.
+                * @property {string} center.path - The path associated with the center point.
+                * @property {number} center.startX - The starting X coordinate of the center.
+                * @property {number} center.startY - The starting Y coordinate of the center.
+                * @property {string} color - The color of the datapoint slice.
+                * @property {string} comment - A comment or note associated with the datapoint.
+                * @property {number} cx - The X coordinate of the slice center.
+                * @property {number} cy - The Y coordinate of the slice center.
+                * @property {number} endX - The ending X coordinate of the arc.
+                * @property {number} endY - The ending Y coordinate of the arc.
+                * @property {Object} firstSeparator - The first separator coordinates for the arc.
+                * @property {number} firstSeparator.x - The X coordinate of the first separator.
+                * @property {number} firstSeparator.y - The Y coordinate of the first separator.
+                * @property {string} name - The name of the datapoint.
+                * @property {string} path - The SVG path of the arc.
+                * @property {number} proportion - The proportion of the datapoint relative to the total.
+                * @property {number} ratio - The ratio of the datapoint relative to the total.
+                * @property {Object} separator - The separator coordinates for the arc.
+                * @property {number} separator.x - The X coordinate of the separator.
+                * @property {number} separator.y - The Y coordinate of the separator.
+                * @property {number} seriesIndex - The index of the series to which the datapoint belongs.
+                * @property {number} startX - The starting X coordinate of the arc.
+                * @property {number} startY - The starting Y coordinate of the arc.
+                * @property {number} value - The value associated with the datapoint.
+                *
+                * Logs the data related to the selected donut arc.
+                *
+                * @param {VueUiDonutDatapoint} datapoint - The data related to the selected donut arc.
+                * @returns {void}
+                */
+                function selectDatapoint(datapoint) {
+                    console.log(datapoint);
                 }`,
-                funcTs: `type VueUiDonutSelectedLegend = {
-                    name: string
-                    value: number
-                    color: string
+                funcTs: `type VueUiDonutDatapoint = {
+                    readonly index: number
+                    readonly absoluteValues: number[]
+                    readonly arcSlice: string
+                    readonly center: {
+                        endX: number
+                        endY: number
+                        path: string
+                        startX: number
+                        startY: number
+                    }
+                    readonly color: string
+                    readonly comment: string
+                    readonly cx: number
+                    readonly cy: number
+                    readonly endX: number
+                    readonly endY: number
+                    readonly firstSeparator: {
+                        x: number
+                        y: number
+                    }
+                    readonly name: string
+                    readonly path: string
+                    readonly proportion: number
+                    readonly ratio: number
+                    readonly separator: {
+                        x: number
+                        y: number
+                    }
+                    readonly seriesIndex: number
+                    readonly startX: number
+                    readonly startY: number
+                    readonly value: number
                 }
-                /*
-                * @selectLegend - Returns the current visible series when selecting / unselecting the legend
+
+                /**
+                * @selectDatapoint - On click returns the data related to the selected donut arc
                 */
-                function selectLegend(legend: VueUiDonutSelectedLegend[]){
-                    console.log({ legend });
+                function selectDatapoint(datapoint: VueUiDonutDatapoint){
+                    console.log(datapoint)
                 }`,
             },
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-data-ui-cli",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "description": "A CLI tool to generate Vue Data UI chart component boilerplates",
   "main": "index.js",
@@ -18,6 +18,11 @@
   ],
   "author": "Alec Lloyd Probert",  
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/graphieros/vue-data-ui-cli.git"
+  },
+  "homepage": "https://vue-data-ui.graphieros.com/",
   "dependencies": {
     "chalk": "^5.4.0",
     "commander": "^12.1.0",