@abi-software/simulationvuer 0.7.0-vue-3-alpha.4 → 1.0.0

package/src/components/ui.js

@@ -1,75 +1,85 @@
-import { evaluateValue } from "./common.js";
-
-export function initialiseUi(parent) {
-  // Initialise some output-related data.
-
-  parent.simulationUiInfo.output.data.forEach((data) => {
-    parent.simulationDataId[data.id] = data.name;
-  });
-
-  let index = -1;
-
-  parent.simulationUiInfo.output.plots.forEach((outputPlot) => {
-    ++index;
-
-    parent.layout[index] = {
-      margin: {
-        t: 5,
-        l: 55,
-        r: 55,
-        b: 90,
-        pad: 4
-      },
-      dragmode: "pan",
-      xaxis: {
-        title: {
-          text: outputPlot.xAxisTitle,
-          font: {
-            size: 10,
-          },
-        },
-      },
-      yaxis: {
-        title: {
-          text: outputPlot.yAxisTitle,
-          font: {
-            size: 10,
-          },
-        }
-      },
-    };
-
-    parent.simulationData[index] = [{}];
-  });
-}
-
-export function finaliseUi(parent) {
-  // Finalise our UI, but only if we haven't already done so, we are mounted,
-  // and we have some valid simulation UI information.
-
-  if (!parent.hasFinalisedUi && parent.isMounted && parent.hasValidSimulationUiInfo) {
-    // Configure the PlotVuer's.
-
-    parent.$refs.output.classList.add("x" + parent.simulationUiInfo.output.plots.length);
-
-    // Make sure that our UI is up to date.
-
-    updateUi(parent);
-
-    parent.hasFinalisedUi = true;
-  }
-}
-
-export function updateUi(parent) {
-  // Show/hide and enable/disable all the elements.
-  // Note: we do this using $nextTick() to ensure that the UI has been fully
-  //       mounted.
-  parent.$nextTick(() => {
-    let index = -1;
-
-    parent.simulationUiInfo.input.forEach((input) => {
-      ++index;
-      parent.$refs.simInput[index].visible = (input.visible === undefined)?true:evaluateValue(parent, input.visible);
-    });
-  });
-}
+import { evaluateValue } from "./common.js";
+
+export function initialiseUi(parent) {
+  // Initialise some output-related data.
+
+  parent.simulationUiInfo.output.data.forEach((data) => {
+    parent.simulationDataId[data.id] = data.name;
+  });
+
+  let index = -1;
+
+  parent.simulationUiInfo.output.plots.forEach((outputPlot) => {
+    ++index;
+
+    parent.layout[index] = {
+      paper_bgcolor: "rgba(0, 0, 0, 0)",
+      plot_bgcolor: "rgba(0, 0, 0, 0)",
+      autosize: true,
+      margin: {
+        t: 25,
+        l: 55,
+        r: 25,
+        b: 30,
+        pad: 4,
+      },
+      loading: false,
+      options: {
+        responsive: true,
+        scrollZoom: true,
+      },
+      dragmode: "pan",
+      xaxis: {
+        title: {
+          text: outputPlot.xAxisTitle,
+          font: {
+            size: 10,
+          },
+        },
+      },
+      yaxis: {
+        title: {
+          text: outputPlot.yAxisTitle,
+          font: {
+            size: 10,
+          },
+        },
+      },
+    };
+
+    parent.simulationData[index] = [{}];
+  });
+}
+
+export function finaliseUi(parent) {
+  // Finalise our UI, but only if we haven't already done so, we are mounted,
+  // and we have some valid simulation UI information.
+
+  if (!parent.hasFinalisedUi && parent.isMounted && parent.hasValidSimulationUiInfo) {
+    // Configure the PlotVuer's.
+
+    parent.$refs.output.classList.add("x" + parent.simulationUiInfo.output.plots.length);
+
+    // Make sure that our UI is up to date.
+
+    updateUi(parent);
+
+    parent.hasFinalisedUi = true;
+  }
+}
+
+export function updateUi(parent) {
+  // Show/hide and enable/disable all the elements.
+  // Note: we do this using $nextTick() to ensure that the UI has been fully
+  //       mounted.
+
+  parent.$nextTick(() => {
+    let index = -1;
+
+    parent.simulationUiInfo.input.forEach((input) => {
+      ++index;
+
+      parent.$refs.simInput[index].visible = (input.visible === undefined) ? true : evaluateValue(parent, input.visible);
+    });
+  });
+}

package/src/main.js

@@ -1,20 +1,19 @@
-import { createApp } from 'vue'
-import * as VueRouter from 'vue-router'
-import App from './App.vue'
-import ElementPlus from 'element-plus'
-
-
-const routes = [
-  { path: '/'},
-]
-
-const router = VueRouter.createRouter({
-  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
-  history: VueRouter.createWebHashHistory(),
-  routes,
-})
-
-const app = createApp(App)
-app.use(router)
-app.use(ElementPlus)
-app.mount('#app')
+import { createApp } from 'vue'
+import * as VueRouter from 'vue-router'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+
+const routes = [
+  { path: '/'},
+]
+
+const router = VueRouter.createRouter({
+  // Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: VueRouter.createWebHashHistory(),
+  routes,
+})
+
+const app = createApp(App)
+app.use(router)
+app.use(ElementPlus)
+app.mount('#app')

package/vite.config.js

@@ -1,73 +1,60 @@
-import path from "path";
-import { resolve } from "node:path";
-const pathSrc = path.resolve(__dirname, "./src");
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ command, mode }) => {
-  const config = {
-    // css: {
-    //     preprocessorOptions: {
-    //       scss: {
-    //         additionalData: `@use '${pathSrc}\\assets\\styles' as *;`
-    //       },
-    //     },
-    // },
-    plugins: [
-        vue(),
-        Components({
-          // allow auto load markdown components under `./src/components/`
-          extensions: ['vue', 'md'],
-          // allow auto import and register components used in markdown
-          include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-          resolvers: [
-            ElementPlusResolver({
-              importStyle: 'sass',
-            }),
-          ],
-          dts: 'src/components.d.ts',
-        }),
-    
-        // https://github.com/antfu/unocss
-        // see unocss.config.ts for config
-    ],
-    build: {
-      lib: {
-        entry: path.resolve(__dirname, "./src/components/index.js"),
-        name: "SimulationVuer",
-        fileName: "simulationvuer",
-      },
-      rollupOptions: {
-        external: ["vue", "@abi-software/svg-sprite", "@abi-software/plotvuer"],
-        output: {
-          globals: {
-            vue: "Vue",
-            "@abi-software/svg-sprite": "@abi-software/svg-sprite",
-            "@abi-software/plotvuer": "@abi-software/plotvuer"
-          },
-        },
-      }, 
-    },
-    resolve: {
-      alias: {
-        '~/': `${pathSrc}/`,
-      },
-    },
-  };
-
-  if (command === 'serve') {
-    config.server =  {
-      port: 8081,
-    };
-    config.define = {
-      'process.env.HTTP_PROXY': 8081,
-      global: 'globalThis',
-      // If you want to exposes all env variables, which is not recommended
-      // 'process.env': env
-    };
-  };
-  return config;
-})
+import path from "path";
+import { resolve } from "node:path";
+const pathSrc = path.resolve(__dirname, "./src");
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+
+export default defineConfig(({ command, mode }) => {
+  const config = {
+    plugins: [
+      vue(),
+      Components({
+        // Allow auto load markdown components under `./src/components/`.
+        extensions: ["vue", "md"],
+        // Allow auto import and register components used in markdown.
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+        resolvers: [
+          ElementPlusResolver({
+            importStyle: "sass",
+          }),
+        ],
+        dts: "src/components.d.ts",
+      }),
+    ],
+    build: {
+      lib: {
+        entry: path.resolve(__dirname, "./src/components/index.js"),
+        name: "SimulationVuer",
+        fileName: "simulationvuer",
+      },
+      rollupOptions: {
+        external: ["vue", "@abi-software/svg-sprite", "@abi-software/plotvuer"],
+        output: {
+          globals: {
+            vue: "Vue",
+            "@abi-software/svg-sprite": "@abi-software/svg-sprite",
+            "@abi-software/plotvuer": "@abi-software/plotvuer",
+          },
+        },
+      },
+    },
+    resolve: {
+      alias: {
+        "~/": `${pathSrc}/`,
+      },
+    },
+  };
+
+  if (command === "serve") {
+    config.server = {
+      port: 8081,
+    };
+    config.define = {
+      "process.env.HTTP_PROXY": 8081,
+      global: "globalThis",
+    };
+  }
+  return config;
+});

package/vuese-generator.js

@@ -0,0 +1,66 @@
+/**
+ * Vuese Generator
+ *
+ * To generate markdown files from Vue components
+ * To watch components changes for Vitepress on Dev Mode
+ */
+
+import fs from 'fs'
+import path from 'path'
+import chokidar from 'chokidar'
+import { parser } from '@vuese/parser'
+import { Render } from '@vuese/markdown-render'
+
+const watchMode = process.argv.find((argv) => argv === 'watch')
+
+const componentsDir = 'src/components'
+const components = ['SimulationVuer.vue']
+const outputDir = 'docs/components'
+
+function generateMarkdown(file) {
+  const fileWithPath = `${componentsDir}/${file}`
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+
+  try {
+    const parserResult = parser(fileContent)
+    parserResult.name = 'SimulationVuer' // Because there has another name prop in component
+    const r = new Render(parserResult)
+    const renderResult = r.render()
+    const markdownResult = r.renderMarkdown()
+    const markdownContent = markdownResult.content
+    const componentName = path.basename(fileWithPath, '.vue')
+
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
+    }
+
+    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
+      if (err) {
+        console.error(`Error writing markdown file for ${componentName}`, err)
+      } else {
+        console.log(`Markdown file for ${componentName} is generated!`)
+      }
+    })
+  } catch(e) {
+    console.error(e)
+  }
+}
+
+// To generate markdown files - one time
+components.forEach((component) => {
+  console.log(`Write markdown file for ${component} on first load.`)
+  generateMarkdown(component)
+})
+
+// To watch component changes and generate markdown files
+if (watchMode) {
+  const watcher = chokidar.watch(components, {
+    cwd: componentsDir,
+    ignoreInitial: true,
+  })
+
+  watcher.on('change', (file) => {
+    console.log(`The component ${file} has changed!`)
+    generateMarkdown(file)
+  })
+}