From c182e398a9b30842bfc04ab1b6ef7864ff27580e Mon Sep 17 00:00:00 2001
From: luisthieme <luis.thieme@5minds.de>
Date: Mon, 22 Jul 2024 09:50:05 +0200
Subject: [PATCH] fix widget not showing in layout manager; bump version

---
 nodes/dynamic-form.html         | 322 +++++++++++++++++---------------
 nodes/dynamic-form.js           |  80 ++++----
 package.json                    | 162 ++++++++--------
 ui/stylesheets/dynamic-form.css |  38 ++--
 vite.config.js                  |  64 +++----
 5 files changed, 345 insertions(+), 321 deletions(-)

diff --git a/nodes/dynamic-form.html b/nodes/dynamic-form.html
index 315ac7d..0cb1a8c 100644
--- a/nodes/dynamic-form.html
+++ b/nodes/dynamic-form.html
@@ -1,168 +1,192 @@
 <script type="text/javascript">
-    RED.nodes.registerType('dynamic-form', {
-        category: 'ProcessCube UI',
-        color: '#00aed7',
-        defaults: {
-            name: { value: "" },
-            group: { type: 'ui-group', required: true },
-            order: { value: 0 },
-            options: {
-                value: [{ label: ''}],
-                validate: function (v) {
-                    const unique = new Set(v.map(function (o) { return o.label }));
-                    return v.length === unique.size;
-                }
-            },
-            waiting_title: { value: "Waiting for Warten auf den Usertask..." },
-            waiting_info: { value: "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist." },
-            width: {
-                value: 0,
-                validate: function (v) {
-                    const width = v || 0
-                    const currentGroup = $('#node-input-group').val() || this.group
-                    const groupNode = RED.nodes.node(currentGroup)
-                    const valid = !groupNode || +width <= +groupNode.width
-                    $('#node-input-size').toggleClass('input-error', !valid)
-                    return valid
-                }
-            },
-            height: { value: 0 },
-            outputs: { value: 1}
+  RED.nodes.registerType("ui-dynamic-form", {
+    category: "ProcessCube UI",
+    color: "#00aed7",
+    defaults: {
+      name: { value: "" },
+      group: { type: "ui-group", required: true },
+      order: { value: 0 },
+      options: {
+        value: [{ label: "" }],
+        validate: function (v) {
+          const unique = new Set(
+            v.map(function (o) {
+              return o.label;
+            })
+          );
+          return v.length === unique.size;
         },
-        inputs: 1,
-        outputs: 1,
-        outputLabels: function(index) {
-          return this.options[index].label
+      },
+      waiting_title: { value: "Waiting for Warten auf den Usertask..." },
+      waiting_info: {
+        value:
+          "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.",
+      },
+      width: {
+        value: 0,
+        validate: function (v) {
+          const width = v || 0;
+          const currentGroup = $("#node-input-group").val() || this.group;
+          const groupNode = RED.nodes.node(currentGroup);
+          const valid = !groupNode || +width <= +groupNode.width;
+          $("#node-input-size").toggleClass("input-error", !valid);
+          return valid;
         },
-        icon: "file.svg",
-        label: function() {
-            return this.name || "dynamic-form";
-        },
-        oneditprepare: function () {
-            $('#node-input-size').elementSizer({
-                width: '#node-input-width',
-                height: '#node-input-height',
-                group: '#node-input-group'
-            });
+      },
+      height: { value: 0 },
+      outputs: { value: 1 },
+    },
+    inputs: 1,
+    outputs: 1,
+    outputLabels: function (index) {
+      return this.options[index].label;
+    },
+    icon: "file.svg",
+    label: function () {
+      return this.name || "dynamic-form";
+    },
+    oneditprepare: function () {
+      $("#node-input-size").elementSizer({
+        width: "#node-input-width",
+        height: "#node-input-height",
+        group: "#node-input-group",
+      });
 
-            function generateOption(i, option) {
-                const container = $('<li/>', {
-                    style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;'
-                });
+      function generateOption(i, option) {
+        const container = $("<li/>", {
+          style:
+            "background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;",
+        });
 
-                // Create input fields for value and label
-                const row = $('<div/>').appendTo(container);
-                $('<input/>', {
-                    class: 'node-input-option-label',
-                    type: 'text',
-                    style: 'margin-left:7px; width:calc(100% - 48px);',
-                    placeholder: 'Label',
-                    value: option.label
-                }).appendTo(row).typedInput({
-                  type: 'str', types: ['str']
-                });
+        // Create input fields for value and label
+        const row = $("<div/>").appendTo(container);
+        $("<input/>", {
+          class: "node-input-option-label",
+          type: "text",
+          style: "margin-left:7px; width:calc(100% - 48px);",
+          placeholder: "Label",
+          value: option.label,
+        })
+          .appendTo(row)
+          .typedInput({
+            type: "str",
+            types: ["str"],
+          });
 
-                // $('<input/>', {
-                //     class: 'node-input-option-condition',
-                //     type: 'text',
-                //     style: 'margin-left:7px; width:calc(50% - 32px);',
-                //     placeholder: 'Condition',
-                //     value: option.condition
-                // }).appendTo(row).typedInput({
-                //   type: 'str', types: ['str']
-                // });
+        // $('<input/>', {
+        //     class: 'node-input-option-condition',
+        //     type: 'text',
+        //     style: 'margin-left:7px; width:calc(50% - 32px);',
+        //     placeholder: 'Condition',
+        //     value: option.condition
+        // }).appendTo(row).typedInput({
+        //   type: 'str', types: ['str']
+        // });
 
-                // Create delete button for the option
-                const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row);
-                const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan);
-                $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
+        // Create delete button for the option
+        const finalSpan = $("<span/>", {
+          style: "float:right; margin-right:8px;",
+        }).appendTo(row);
+        const deleteButton = $("<a/>", {
+          href: "#",
+          class: "editor-button editor-button-small",
+          style: "margin-top:7px; margin-left:5px;",
+        }).appendTo(finalSpan);
+        $("<i/>", { class: "fa fa-remove" }).appendTo(deleteButton);
 
-                deleteButton.click(function () {
-                    container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' });
-                    container.fadeOut(300, function () {
-                        $(this).remove();
-                    });
-                });
+        deleteButton.click(function () {
+          container.css({
+            background: "var(--red-ui-secondary-background-inactive, #fee)",
+          });
+          container.fadeOut(300, function () {
+            $(this).remove();
+          });
+        });
 
-                $('#node-input-option-container').append(container);
-            }
+        $("#node-input-option-container").append(container);
+      }
 
-            $('#node-input-add-option').click(function () {
-                generateOption($('#node-input-option-container').children().length + 1, {});
-                $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
-            });
+      $("#node-input-add-option").click(function () {
+        generateOption(
+          $("#node-input-option-container").children().length + 1,
+          {}
+        );
+        $("#node-input-option-container-div").scrollTop(
+          $("#node-input-option-container-div").get(0).scrollHeight
+        );
+      });
 
-            for (let i = 0; i < this.options.length; i++) {
-                const option = this.options[i];
-                generateOption(i + 1, option);
-            }
+      for (let i = 0; i < this.options.length; i++) {
+        const option = this.options[i];
+        generateOption(i + 1, option);
+      }
 
-            $('#node-input-option-container').sortable({
-                axis: 'y',
-                handle: '.node-input-option-handle',
-                cursor: 'move'
-            });
-        },
-        oneditsave: function () {
-            const options = $('#node-input-option-container').children();
-            const node = this;
-            node.options = [];
-            options.each(function (i) {
-                const option = $(this);
-                const o = {
-                    label: option.find('.node-input-option-label').val(),
-                    // condition: option.find('.node-input-option-condition').val()
-                };
+      $("#node-input-option-container").sortable({
+        axis: "y",
+        handle: ".node-input-option-handle",
+        cursor: "move",
+      });
+    },
+    oneditsave: function () {
+      const options = $("#node-input-option-container").children();
+      const node = this;
+      node.options = [];
+      options.each(function (i) {
+        const option = $(this);
+        const o = {
+          label: option.find(".node-input-option-label").val(),
+          // condition: option.find('.node-input-option-condition').val()
+        };
 
-                node.options.push(o);
-            });
+        node.options.push(o);
+      });
 
-            this.outputs = node.options.length || 1
-        },
-    });
+      this.outputs = node.options.length || 1;
+    },
+  });
 </script>
 
-<script type="text/html" data-template-name="dynamic-form">
-    <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
-        <input type="text" id="node-input-name" placeholder="Name">
-    </div>
-    <div class="form-row">
-        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
-        <input type="text" id="node-input-group">
-    </div>
-    <div class="form-row">
-        <label><i class="fa fa-object-group"></i> <span data-i18n="dynamic-form.label.size"></label>
-        <input type="hidden" id="node-input-width">
-        <input type="hidden" id="node-input-height">
-        <button class="editor-button" id="node-input-size"></button>
-    </div>
+<script type="text/html" data-template-name="ui-dynamic-form">
+  <div class="form-row">
+      <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+      <input type="text" id="node-input-name" placeholder="Name">
+  </div>
+  <div class="form-row">
+      <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+      <input type="text" id="node-input-group">
+  </div>
+  <div class="form-row">
+      <label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-form.label.size"></label>
+      <input type="hidden" id="node-input-width">
+      <input type="hidden" id="node-input-height">
+      <button class="editor-button" id="node-input-size"></button>
+  </div>
 
-    <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
-        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
-        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
-            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
-            <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
-        </div>
-        <a
-            data-html="true"
-            title="Dynamic Property: Send 'msg.options' in order to override this property."
-            class="red-ui-button ui-node-popover-title"
-            style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
-            <i style="font-family: ui-serif;">fx</i>
-        </a>
-    </div>
-    <!-- Add Option Button -->
-    <div class="form-row">
-        <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
-    </div>
+  <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
+      <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
+      <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
+          <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
+          <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
+      </div>
+      <a
+          data-html="true"
+          title="Dynamic Property: Send 'msg.options' in order to override this property."
+          class="red-ui-button ui-node-popover-title"
+          style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+          <i style="font-family: ui-serif;">fx</i>
+      </a>
+  </div>
+  <!-- Add Option Button -->
+  <div class="form-row">
+      <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
+  </div>
 
-    <div class="form-row">
-        <label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
-        <input type="text" id="node-input-waiting_title">
-    </div>
-    <div class="form-row">
-        <label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
-        <input type="text" id="node-input-waiting_info">
-    </div>
+  <div class="form-row">
+      <label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
+      <input type="text" id="node-input-waiting_title">
+  </div>
+  <div class="form-row">
+      <label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
+      <input type="text" id="node-input-waiting_info">
+  </div>
 </script>
diff --git a/nodes/dynamic-form.js b/nodes/dynamic-form.js
index f2e00b3..7b58eb5 100644
--- a/nodes/dynamic-form.js
+++ b/nodes/dynamic-form.js
@@ -1,48 +1,48 @@
 module.exports = function (RED) {
-    function DynamicFormNode (config) {
-        RED.nodes.createNode(this, config)
+  function DynamicFormNode(config) {
+    RED.nodes.createNode(this, config);
 
-        const node = this
+    const node = this;
 
-        // which group are we rendering this widget
-        const group = RED.nodes.getNode(config.group)
+    // which group are we rendering this widget
+    const group = RED.nodes.getNode(config.group);
 
-        const base = group.getBase()
+    const base = group.getBase();
 
-        // server-side event handlers
-        const evts = {
-            onAction: true,
-            onInput: function (msg, send, done) {
-                // store the latest value in our Node-RED datastore
-                base.stores.data.save(base, node, msg)
-            },
-            onSocket: {
-                'my-custom-event': function (conn, id, msg) {
-                    console.info('"my-custom-event" received:', conn.id, id, msg)
-                    console.info('conn.id:', conn.id)
-                    console.info('id:', id)
-                    console.info('msg:', msg)
-                    console.info('node.id:', node.id)
-                    // emit a msg in Node-RED from this node
-                    node.send(msg)
-                }
-            }
-        }
+    // server-side event handlers
+    const evts = {
+      onAction: true,
+      onInput: function (msg, send, done) {
+        // store the latest value in our Node-RED datastore
+        base.stores.data.save(base, node, msg);
+      },
+      onSocket: {
+        "my-custom-event": function (conn, id, msg) {
+          console.info('"my-custom-event" received:', conn.id, id, msg);
+          console.info("conn.id:", conn.id);
+          console.info("id:", id);
+          console.info("msg:", msg);
+          console.info("node.id:", node.id);
+          // emit a msg in Node-RED from this node
+          node.send(msg);
+        },
+      },
+    };
 
-        // inform the dashboard UI that we are adding this node
-        if (group) {
-            group.register(node, config, evts)
-        } else {
-            node.error('No group configured')
-        }
+    // inform the dashboard UI that we are adding this node
+    if (group) {
+      group.register(node, config, evts);
+    } else {
+      node.error("No group configured");
     }
+  }
 
-    RED.nodes.registerType('dynamic-form', DynamicFormNode, {
-      defaults: {
-        outputs: { value: 1 }
-      },
-      outputs: function(config) {
-        return config.outputs || 1;
-      }
-    })
-}
+  RED.nodes.registerType("ui-dynamic-form", DynamicFormNode, {
+    defaults: {
+      outputs: { value: 1 },
+    },
+    outputs: function (config) {
+      return config.outputs || 1;
+    },
+  });
+};
diff --git a/package.json b/package.json
index 16bd23d..95d458d 100644
--- a/package.json
+++ b/package.json
@@ -1,85 +1,85 @@
 {
-    "name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
-    "version": "1.0.13",
-    "description": "The ui component for the ProcessCube dynamic-form",
-    "keywords": [
-        "processcube",
-        "dynamic-form",
-        "node-red",
-        "node-red-dashboard-2"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/5minds/.gitnode-red-dashboard-2-processcube-dynamic-form"
+  "name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
+  "version": "1.0.14",
+  "description": "The ui component for the ProcessCube dynamic-form",
+  "keywords": [
+    "processcube",
+    "dynamic-form",
+    "node-red",
+    "node-red-dashboard-2"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/5minds/.gitnode-red-dashboard-2-processcube-dynamic-form"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Martin Moellenbeck",
+    "url": "https://github.com/moellenbeck"
+  },
+  "contributors": [
+    {
+      "name": "Robin Lenz",
+      "url": "https://github.com/roblen45"
     },
-    "license": "Apache-2.0",
-    "author": {
-        "name": "Martin Moellenbeck",
-        "url": "https://github.com/moellenbeck"
-    },
-    "contributors": [
-        {
-            "name": "Robin Lenz",
-            "url": "https://github.com/roblen45"
-        },
-        {
-            "name": "Luis Thieme",
-            "url": "https://github.com/luisthieme"
-        }
-    ],
-    "exports": {
-        "import": "./resources/dynamic-form.esm.js",
-        "require": "./resources/dynamic-form.umd.js"
-    },
-    "files": [
-        "dist/*",
-        "nodes/*",
-        "ui/*",
-        "resources/*"
-    ],
-    "scripts": {
-        "build": "vite build",
-        "build:dev": "NODE_ENV=development vite build",
-        "dev": "NODE_ENV=development vite build --watch",
-        "dev:prod": "vite build --watch",
-        "lint": "npm run lint:js && npm run lint:package",
-        "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
-        "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
-        "lint:js:fix": "yarn lint:js --fix",
-        "lint:package": "sort-package-json --check 'package.json'",
-        "lint:package:fix": "sort-package-json 'package.json'"
-    },
-    "dependencies": {
-        "to-title-case": "^1.0.0",
-        "vue": "^3.3.8",
-        "vuex": "^4.1.0"
-    },
-    "devDependencies": {
-        "@vitejs/plugin-vue": "^4.5.0",
-        "eslint": "^8.53.0",
-        "eslint-config-standard": "^17.1.0",
-        "eslint-plugin-import": "^2.29.0",
-        "eslint-plugin-n": "^16.3.1",
-        "eslint-plugin-vue": "^9.18.1",
-        "vite": "^5.0.13",
-        "vite-plugin-css-injected-by-js": "^3.3.0"
-    },
-    "engines": {
-        "node": ">=14"
-    },
-    "node-red": {
-        "version": ">=3.0.0",
-        "nodes": {
-            "dynamic-form": "nodes/dynamic-form.js"
-        }
-    },
-    "node-red-dashboard-2": {
-        "version": "1.0.0",
-        "widgets": {
-            "dynamic-form": {
-                "output": "dynamic-form.umd.js",
-                "component": "DynamicForm"
-            }
-        }
+    {
+      "name": "Luis Thieme",
+      "url": "https://github.com/luisthieme"
+    }
+  ],
+  "exports": {
+    "import": "./resources/dynamic-form.esm.js",
+    "require": "./resources/dynamic-form.umd.js"
+  },
+  "files": [
+    "dist/*",
+    "nodes/*",
+    "ui/*",
+    "resources/*"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "dev:prod": "vite build --watch",
+    "lint": "npm run lint:js && npm run lint:package",
+    "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
+    "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
+    "lint:js:fix": "yarn lint:js --fix",
+    "lint:package": "sort-package-json --check 'package.json'",
+    "lint:package:fix": "sort-package-json 'package.json'"
+  },
+  "dependencies": {
+    "to-title-case": "^1.0.0",
+    "vue": "^3.3.8",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "eslint": "^8.53.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-vue": "^9.18.1",
+    "vite": "^5.0.13",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "node-red": {
+    "version": ">=3.0.0",
+    "nodes": {
+      "ui-dynamic-form": "nodes/dynamic-form.js"
+    }
+  },
+  "node-red-dashboard-2": {
+    "version": "1.0.0",
+    "widgets": {
+      "ui-dynamic-form": {
+        "output": "dynamic-form.umd.js",
+        "component": "DynamicForm"
+      }
     }
+  }
 }
diff --git a/ui/stylesheets/dynamic-form.css b/ui/stylesheets/dynamic-form.css
index e81a032..d7cb064 100644
--- a/ui/stylesheets/dynamic-form.css
+++ b/ui/stylesheets/dynamic-form.css
@@ -1,44 +1,44 @@
 .dynamic-form-wrapper {
-    padding: 10px;
-    margin: 10px;
-    border: 1px solid black;
+  padding: 10px;
+  margin: 10px;
+  border: 1px solid black;
 }
 
 .dynamic-form-class {
-    color: green;
-    font-weight: bold;
+  color: green;
+  font-weight: bold;
 }
 
 h1 {
-    margin-bottom: 10px
+  margin-bottom: 10px;
 }
 
 h2 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
 }
 
 h3 {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 p {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 ul li {
-   list-style-type: circle;
-   list-style-position: inside;
-   margin-left: 15px;
+  list-style-type: circle;
+  list-style-position: inside;
+  margin-left: 15px;
 }
 
 pre {
-    padding: 12px;
-    margin: 12px;
-    background-color: #eee;
+  padding: 12px;
+  margin: 12px;
+  background-color: #eee;
 }
 
 code {
-    font-size: 0.825rem;
-    color: #ae0000;
-}
\ No newline at end of file
+  font-size: 0.825rem;
+  color: #ae0000;
+}
diff --git a/vite.config.js b/vite.config.js
index affe7ee..cd8d89c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,42 +1,42 @@
-import { resolve } from 'path'
+import { resolve } from "path";
 
-import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 
 // Set to this to the name of this collection of components
 // This must match node-red-dashboard-2.widgets[libraryName] in package.json
-const LIBRARY_NAME = 'dynamic-form'
+const LIBRARY_NAME = "ui-dynamic-form";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [vue(), cssInjectedByJsPlugin()],
-    build: {
-        // Generate a source map in dev mode
-        sourcemap: process.env.NODE_ENV === 'development',
+  plugins: [vue(), cssInjectedByJsPlugin()],
+  build: {
+    // Generate a source map in dev mode
+    sourcemap: process.env.NODE_ENV === "development",
 
-        // Configure build as a UMD library
-        lib: {
-            entry: resolve(__dirname, 'ui/index.js'),
-            name: LIBRARY_NAME,
-            formats: ['umd'],
-            fileName: (format, entryName) => `${LIBRARY_NAME}.${format}.js`
-        },
+    // Configure build as a UMD library
+    lib: {
+      entry: resolve(__dirname, "ui/index.js"),
+      name: LIBRARY_NAME,
+      formats: ["umd"],
+      fileName: (format, entryName) => `${LIBRARY_NAME}.${format}.js`,
+    },
 
-        // Utilise Node-RED's handling of /resources folder for the build output
-        outDir: './resources',
+    // Utilise Node-RED's handling of /resources folder for the build output
+    outDir: "./resources",
 
-        // Declare dependencies that shouldn't be bundled into the library
-        rollupOptions: {
-            // Don't rollup the Vue dependency into the build
-            external: ['vue', 'vuex'],
-            output: {
-                // Provide global variables to use in the UMD build
-                globals: {
-                    vue: 'Vue',
-                    vuex: 'vuex'
-                }
-            }
-        }
-    }
-})
+    // Declare dependencies that shouldn't be bundled into the library
+    rollupOptions: {
+      // Don't rollup the Vue dependency into the build
+      external: ["vue", "vuex"],
+      output: {
+        // Provide global variables to use in the UMD build
+        globals: {
+          vue: "Vue",
+          vuex: "vuex",
+        },
+      },
+    },
+  },
+});