vue-data-ui-cli 0.0.1

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "vueIndentScriptAndStyle": true
+}

package/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.

package/README.md

@@ -0,0 +1,32 @@
+# 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.
+
+## Vue Data UI documentation
+
+Check out the [official documentation website](https://vue-data-ui.graphieros.com/)

package/boilerplate.js

@@ -0,0 +1,76 @@
+export default ({
+  component,
+  config,
+  dataset,
+  useTypescript,
+  useComputedDataset,
+  useComputedConfig,
+  configType,
+  datasetType,
+  isDatasetArray,
+  componentSlots,
+  componentLink,
+  emits
+}) => {
+
+  const dsType = useTypescript ? `<${`${datasetType}${isDatasetArray ? '[]' : ''}`}>` : '';
+  const confType = useTypescript ? `<${configType}>` : '';
+  const ds = JSON.stringify(dataset);
+  const conf = JSON.stringify(config);
+
+  const sourceSlot = `
+        <!-- #source slot: display the source for your data -->
+      <!--<template #source>
+        <small>Source: <cite>My source</cite></small>
+      </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 ? `,${['number', 'Array<Array<string | number>>', ''].includes(datasetType) ? '' : `type ${datasetType},`} type ${configType} }` : '}'} from "vue-data-ui";
+
+${!datasetType ? '' : `const dataset = ${useComputedDataset ? `computed${dsType}(() => {
+  return ${ds};
+})` : `ref${dsType}(${ds})`};`}
+
+/**
+ * This is the default config.
+ * It is not required to send it all to the component.
+ * You can keep only the modified attributes you need.
+ */
+const config = ${useComputedConfig ? `computed${confType}(() => {
+  return ${conf};
+})` : `ref${confType}(${conf})`};
+
+</script>
+
+<template>
+  <div :style="{ width: '600px' }">
+    <VueDataUi
+      component="${component}"
+      ${!datasetType ? '' : `:dataset="dataset"`}
+      :config="config"
+    ${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 : ''}
+    ${componentSlots.length ? '</VueDataUi>' : ''}
+  </div>
+</template>
+`;
+};