First commit

Author: graphieros

LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2025 ALEC LLOYD PROBERT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,28 @@
+# Vue Data UI CLI
+
+A CLI tool to generate Vue Data UI chart component boilerplates.
+
+## Installation
+
+```bash
+npm i -g vue-data-ui-cli
+```
+
+## Usage
+
+Run the CLI command:
+
+```bash
+vdui-cli
+```
+
+You will be prompted for the following:
+
+- Select a Vue Data UI component
+- Use computed or ref for the dataset
+- Use computed or ref for the config
+- Use TypeScript or not
+- The name of your Vue component
+- The directory to create the component
+
+The tool will then create a Vue file containing the boilerplate chart component, with a sample dataset for immediate testing.

boilerplate.js

@@ -9,7 +9,8 @@ export default ({
   datasetType,
   isDatasetArray,
   componentSlots,
-  componentLink
+  componentLink,
+  emits
 }) => {
 
   const dsType = useTypescript ? `<${`${datasetType}${isDatasetArray ? '[]' : ''}`}>` : '';
@@ -24,14 +25,28 @@ export default ({
       </template>-->
   `;
 
+  // let emitFuncs = '';
+  // let emitDefs = '';
+
+  // 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(',', '');
+  // }
+
+
   return `
 <script setup${useTypescript ? ' lang="ts"' : ''}>
 import { ${[useComputedConfig, useComputedDataset].includes(false) ? 'ref, ' : ''}${useComputedConfig || useComputedDataset ? 'computed ' : ''}} from "vue";
-import { VueDataUi${useTypescript ? `, type ${datasetType}, type ${configType} }` : '}'} from "vue-data-ui";
+import { VueDataUi${useTypescript ? `,${['number', 'Array<Array<string | number>>', ''].includes(datasetType) ? '' : `type ${datasetType},`} type ${configType} }` : '}'} from "vue-data-ui";
 
-const dataset = ${useComputedDataset ? `computed${dsType}(() => {
+${!datasetType ? '' : `const dataset = ${useComputedDataset ? `computed${dsType}(() => {
   return ${ds};
-})` : `ref${dsType}(${ds})`};
+})` : `ref${dsType}(${ds})`};`}
 
 /**
  * This is the default config.
@@ -48,13 +63,13 @@ const config = ${useComputedConfig ? `computed${confType}(() => {
   <div :style="{ width: '600px' }">
     <VueDataUi
       component="${component}"
-      :dataset="dataset"
+      ${!datasetType ? '' : `:dataset="dataset"`}
       :config="config"
-    >
-      <!-- Include slots here -->
-      <!-- For more info on slots, check the slots tab at https://vue-data-ui.graphieros.com/docs#${componentLink} -->
+    ${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} -->` : '' }
       ${ componentSlots.includes('source') ? sourceSlot : ''}
-    </VueDataUi>
+    ${componentSlots.length ? '</VueDataUi>' : ''}
   </div>
 </template>
 `;