@5minds/node-red-dashboard-2-processcube-process-progress-bar 1.0.0-master-f256e1-m848mtcq

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,31 @@
+# Process Progress Bar
+
+A UI-Node to display a step-by-step progress bar, tracking the progress of a process.
+
+## Usage
+
+After configuring the node, use a `usertask-event-listener` node and direct all `new` and `finished` events for the tracked process into the `ui-process-progress-bar` node.
+It will automatically update, when UserTasks are started or finished.
+
+## Title
+
+Will be displayed above the progress bar. It can also be set dynamically by setting `msg.payload.title`.
+
+## Steps
+
+This field is used for configuring the steps of the progress bar.
+
+Each step is defined by:
+
+- **Label**: The text displayed for the progress bar step
+- **FlownodeId**: The Id of the Flownode, that needs to be active/finished to start/fullfill this step.
+- **Icon (optional)**: An URL for an image, that should be displayed in addition to the label. This will be used as the `src`-Property of a HTML `img`-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.
+- **Icon finished (optional)**: An URL for an image, that should be displayed in addition to the label, after the step has been finished. This will be used as the `src`-Property of a HTML `img`-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.
+
+## Color
+
+Will be used as the outline/fill/text color for the steps.
+
+## Reference
+
+[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)

package/nodes/icons/ui-progress-bar.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 25C5.23858 25 3 27.2386 3 30C3 32.7614 5.23858 35 8 35H33C35.7614 35 38 32.7614 38 30C38 27.2386 35.7614 25 33 25H8ZM8 28C6.89543 28 6 28.8954 6 30C6 31.1046 6.89543 32 8 32H33C34.1046 32 35 31.1046 35 30C35 28.8954 34.1046 28 33 28H8Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 32H35V28H19C20.1046 28 21 28.8954 21 30C21 31.1046 20.1046 32 19 32Z" fill="white"/>
+</svg>

package/nodes/locales/en-US/ui-process-progress-bar.html

@@ -0,0 +1,3 @@
+<script type="text/html" data-help-name="ui-process-progress-bar">
+  <p>A progress bar that tracks the progress of a process.</p>
+</script>

package/nodes/locales/en-US/ui-process-progress-bar.json

@@ -0,0 +1,7 @@
+{
+  "ui-process-progress-bar": {
+    "label": {
+      "size": "Size"
+    }
+  }
+}

package/nodes/ui-process-progress-bar.html

@@ -0,0 +1,232 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty(obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop);
+        }
+
+        RED.nodes.registerType('ui-process-progress-bar', {
+            category: 'ProcessCube UI',
+            color: '#00aed7',
+            defaults: {
+                name: { value: '' },
+                group: { type: 'ui-group', required: true },
+                order: { value: 1 },
+                color: { value: '#8899C9' },
+                steps: {
+                    value: [],
+                    validate: function (v) {
+                        const unique = new Set(
+                            v.map(function (o) {
+                                return o.label;
+                            })
+                        );
+                        return v.length === unique.size;
+                    },
+                },
+                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: 0 },
+            },
+            inputs: 1,
+            outputs: 0,
+            icon: 'ui-progress-bar.svg',
+            paletteLabel: 'ui-process-progress-bar',
+            label: function () {
+                return this.name || 'ui-process-progress-bar';
+            },
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group',
+                });
+
+                function generateStep(i, step) {
+                    const container = $('<li/>', {
+                        style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
+                    });
+
+                    // Create input fields for flowNodeId, icon and label
+                    const row = $('<div/>').appendTo(container);
+                    $('<input/>', {
+                        class: 'node-input-step-label',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Label',
+                        value: step.label,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    $('<input/>', {
+                        class: 'node-input-step-flowNodeId',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'FlownodeId',
+                        value: step.flowNodeId,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    $('<input/>', {
+                        class: 'node-input-step-icon',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Icon',
+                        value: step.icon,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                        $('<input/>', {
+                        class: 'node-input-step-iconFinished',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Icon (finished)',
+                        value: step.iconFinished,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    // Create delete button for the step
+                    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();
+                        });
+                    });
+
+                    $('#node-input-step-container').append(container);
+                }
+
+                $('#node-input-add-step').click(function () {
+                    generateStep($('#node-input-step-container').children().length + 1, {});
+                    $('#node-input-step-container-div').scrollTop(
+                        $('#node-input-step-container-div').get(0).scrollHeight
+                    );
+                });
+
+                for (let i = 0; i < this.steps.length; i++) {
+                    const step = this.steps[i];
+                    generateStep(i + 1, step);
+                }
+
+                $('#node-input-step-container').sortable({
+                    axis: 'y',
+                    handle: '.node-input-step-handle',
+                    cursor: 'move',
+                });
+            },
+            oneditsave: function () {
+                const steps = $('#node-input-step-container').children();
+                const node = this;
+                node.steps = [];
+                steps.each(function (i) {
+                    const step = $(this);
+                    const o = {
+                        label: step.find('.node-input-step-label').val(),
+                        flowNodeId: step.find('.node-input-step-flowNodeId').val(),
+                        icon: step.find('.node-input-step-icon').val(),
+                        iconFinished: step.find('.node-input-step-iconFinished').val(),
+                    };
+
+                    node.steps.push(o);
+                });
+            },
+        });
+    })();
+</script>
+
+<script type="text/html" data-template-name="ui-process-progress-bar">
+    <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-process-progress-bar.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-step-container-row" style="margin-bottom: 0px;width: 100%">
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Steps</label>
+        <div id="node-input-step-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-step-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+    </div>
+    <!-- Add Step Button -->
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-step" 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-color"><i class="fa fa-table"></i> Color</label>
+      <input type="color" id="node-input-color" style="max-width:200px;">
+  </div>
+</script>
+
+<script type="text/markdown" data-help-name="ui-process-progress-bar">
+A UI-Node to display a step-by-step progress bar, tracking the progress of a process.
+
+## Usage
+
+After configuring the node, use a `usertask-event-listener` node and direct all `new` and `finished` events for the tracked process into the `ui-process-progress-bar` node.
+It will automatically update, when UserTasks are started or finished.
+
+## Steps
+
+This field is used for configuring the steps of the progress bar.
+
+Each step is defined by:
+
+- **Label**: The text displayed for the progress bar step
+- **FlownodeId**: The Id of the Flownode, that needs to be active/finished to start/fullfill this step.
+- **Icon (optional)**: An URL for an image, that should be displayed in addition to the label. This will be used as the `src`-Property of a HTML `img`-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.
+- **Icon finished (optional)**: An URL for an image, that should be displayed in addition to the label, after the step has been finished. This will be used as the `src`-Property of a HTML `img`-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.
+
+## Color
+
+Will be used as the outline/fill/text color for the steps.
+
+## Reference
+
+[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
+</script>

package/nodes/ui-process-progress-bar.js

@@ -0,0 +1,56 @@
+const util = require('util');
+module.exports = function (RED) {
+    function ProcessProgressBarNode(config) {
+        RED.nodes.createNode(this, config);
+
+        const node = this;
+
+        const group = RED.nodes.getNode(config.group);
+
+        const base = group.getBase();
+
+        //server-side event handlers
+        const evts = {
+            onAction: true,
+            onInput: function (msg, send, done) {
+                let activeStep = null;
+                let finishedSteps = [];
+
+                if (msg.payload?.action && msg.payload?.userTask) {
+                  const flowNodeId = msg.payload.userTask.flowNodeId;
+                  const action = msg.payload.action;
+                  const flowNodeIds = config.steps.map(step => step.flowNodeId);
+                  const flowNodeIdExists = flowNodeIds.includes(flowNodeId);
+
+                  if (flowNodeIdExists && action === 'new') {
+                    activeStep = flowNodeId;
+                    finishedSteps = flowNodeIds.slice(0, flowNodeIds.indexOf(flowNodeId));
+                  } else if (flowNodeIdExists && action === 'finished') {
+                    finishedSteps = flowNodeIds.slice(0, flowNodeIds.indexOf(flowNodeId) + 1)
+                  }
+                }
+
+                msg.processProgressBar = {
+                  activeStep, finishedSteps
+                };
+
+                base.stores.data.save(base, node, msg);
+            },
+        };
+
+        if (group) {
+            group.register(node, config, evts);
+        } else {
+            node.error('No group configured');
+        }
+    }
+
+    RED.nodes.registerType('ui-process-progress-bar', ProcessProgressBarNode, {
+        defaults: {
+            outputs: { value: 0 },
+        },
+        outputs: function (config) {
+            return 0;
+        },
+    });
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+    "name": "@5minds/node-red-dashboard-2-processcube-process-progress-bar",
+    "version": "1.0.0-master-f256e1-m848mtcq",
+    "description": "A ui component for showing progress bars tracking a process",
+    "keywords": [
+        "processcube",
+        "usertask",
+        "node-red",
+        "node-red-dashboard-2"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/5minds/node-red-dashboard-2-processcube-process-progress-bar.git"
+    },
+    "license": "Apache-2.0",
+    "author": {
+        "name": "Martin Moellenbeck",
+        "url": "https://github.com/moellenbeck"
+    },
+    "contributors": [
+        {
+            "name": "Niclas Podzierski",
+            "url": "https://github.com/niclaspodzierski"
+        }
+    ],
+    "exports": {
+        "require": "./resources/ui-process-progress-bar.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": {
+        "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.3.2",
+        "vite-plugin-css-injected-by-js": "^3.3.0"
+    },
+    "engines": {
+        "node": ">=14"
+    },
+    "node-red": {
+        "version": ">=3.0.0",
+        "nodes": {
+            "ui-process-progress-bar": "nodes/ui-process-progress-bar.js"
+        }
+    },
+    "node-red-dashboard-2": {
+        "version": "1.0.0",
+        "widgets": {
+            "ui-process-progress-bar": {
+                "output": "ui-process-progress-bar.umd.js",
+                "component": "UIProcessProgressBar"
+            }
+        }
+    }
+}

package/resources/ui-process-progress-bar.umd.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode(".progressBarWrapper[data-v-d9042733]{display:grid;align-items:center;gap:8px;padding:40px;border-radius:8px;border:2px solid #F6F5FA;background:#fff;margin-left:92px;margin-right:92px;margin-bottom:32px}.progressBarWrapper .progressBarStep[data-v-d9042733]{display:flex;align-items:center;gap:8px;padding:16px}.progressBarWrapper .currentStep[data-v-d9042733]{border-radius:15px;border:4px solid #8899C9}.progressBarWrapper .finishedStep[data-v-d9042733]{border-radius:15px;background:#8899c9;color:#fff}.progressBarWrapper hr[data-v-d9042733]{border-radius:2px;border:none;height:4px;background:#4a4759}.progressBarWrapper .coloredConnection[data-v-d9042733]{background:#8899c9}.progressBarWrapper span[data-v-d9042733]{font-size:21px;font-style:normal;font-weight:400;line-height:normal;white-space:nowrap}")),document.head.appendChild(r)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o["ui-process-progress-bar"]={},o.vuex,o.Vue))})(this,function(o,n,e){"use strict";const a=(t,s)=>{const c=t.__vccOpts||t;for(const[l,d]of s)c[l]=d;return c},p={name:"UIProcessProgressBar",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},created(){this.steps=this.props.steps},computed:{...n.mapState("data",["messages"]),templateColumns(){return{gridTemplateColumns:new Array(this.steps.length).fill("min-content").join(" auto ")}},stepFlowNodeIds(){return this.steps.map(t=>t.flowNodeId)},activeStep(){var t,s;return(s=(t=this.messages[this.id])==null?void 0:t.processProgressBar)==null?void 0:s.activeStep},finishedSteps(){var t,s;return((s=(t=this.messages[this.id])==null?void 0:t.processProgressBar)==null?void 0:s.finishedSteps)??[]}},data(){return{steps:[]}},mounted(){this.$socket.on("widget-load:"+this.id,t=>{this.steps=this.props.steps,this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.on("msg-input:"+this.id,t=>{this.messages[this.id]=t,this.$store.commit("data/bind",{widgetId:this.id,msg:t})}),this.$socket.emit("widget-load",this.id)},unmounted(){var t,s;(t=this.$socket)==null||t.off("widget-load"+this.id),(s=this.$socket)==null||s.off("msg-input:"+this.id)},methods:{}},m=["src"],h=["src"];function f(t,s,c,l,d,r){return e.openBlock(),e.createElementBlock("div",{class:"progressBarWrapper",style:e.normalizeStyle(r.templateColumns)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.steps,(i,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{class:e.normalizeClass(["progressBarStep",{currentStep:i.flowNodeId==r.activeStep,finishedStep:r.finishedSteps.includes(i.flowNodeId)}])},[i.icon&&!r.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:0,src:i.icon},null,8,m)):e.createCommentVNode("",!0),i.iconFinished&&r.finishedSteps.includes(i.flowNodeId)?(e.openBlock(),e.createElementBlock("img",{key:1,src:i.iconFinished},null,8,h)):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(i.label),1)],2),g!=d.steps.length-1?(e.openBlock(),e.createElementBlock("hr",{key:0,class:e.normalizeClass({coloredConnection:r.finishedSteps.includes(i.flowNodeId)})},null,2)):e.createCommentVNode("",!0)],64))),256))],4)}const u=a(p,[["render",f],["__scopeId","data-v-d9042733"]]);o.UIProcessProgressBar=u,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/ui/components/UIProcessProgressBar.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="progressBarWrapper" :style="templateColumns">
+    <template v-for="(step, index) in steps">
+      <div class="progressBarStep" :class="{ currentStep: step.flowNodeId == activeStep, finishedStep: finishedSteps.includes(step.flowNodeId) }">
+          <img v-if="step.icon && !finishedSteps.includes(step.flowNodeId)" :src="step.icon" />
+          <img v-if="step.iconFinished && finishedSteps.includes(step.flowNodeId)" :src="step.iconFinished" />
+          <span>
+              {{ step.label }}
+          </span>
+      </div>
+      <hr v-if="index != steps.length - 1" :class="{coloredConnection: finishedSteps.includes(step.flowNodeId)}" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+    name: 'UIProcessProgressBar',
+    inject: ['$socket'],
+    props: {
+        /* do not remove entries from this - Dashboard's Layout Manager's will pass this data to your component */
+        id: { type: String, required: true },
+        props: { type: Object, default: () => ({}) },
+        /* state: { type: Object, default: () => ({ enabled: false, visible: false }) } // DEFAULT */
+        state: {
+            type: Object,
+            default: () => ({ enabled: true, visible: true }),
+        },
+    },
+    created() {
+        this.steps = this.props.steps;
+    },
+    computed: {
+        ...mapState('data', ['messages']),
+        templateColumns () {
+          return { gridTemplateColumns: new Array(this.steps.length).fill("min-content").join(" auto ")};
+        },
+        stepFlowNodeIds () {
+          return this.steps.map(step => step.flowNodeId);
+        },
+        activeStep () {
+            return this.messages[this.id]?.processProgressBar?.activeStep;
+        },
+        finishedSteps () {
+          return this.messages[this.id]?.processProgressBar?.finishedSteps ?? [];
+        },
+    },
+    data() {
+        return {
+          steps: [],
+        };
+    },
+    mounted() {
+        this.$socket.on('widget-load:' + this.id, (msg) => {
+          this.steps = this.props.steps;
+          this.$store.commit('data/bind', {
+            widgetId: this.id,
+            msg,
+          });
+        });
+        this.$socket.on('msg-input:' + this.id, (msg) => {
+            this.messages[this.id] = msg;
+
+            this.$store.commit('data/bind', {
+                widgetId: this.id,
+                msg,
+            });
+        });
+        this.$socket.emit('widget-load', this.id);
+    },
+    unmounted() {
+        this.$socket?.off('widget-load' + this.id);
+        this.$socket?.off('msg-input:' + this.id);
+    },
+    methods: {
+    },
+};
+</script>
+
+<style scoped>
+/* CSS is auto scoped, but using named classes is still recommended */
+@import '../stylesheets/ui-process-progress-bar.css'
+</style>

package/ui/index.js

@@ -0,0 +1,2 @@
+/* Exports of all of the components in this node */
+export { default as UIProcessProgressBar } from './components/UIProcessProgressBar.vue';

package/ui/main.js

@@ -0,0 +1,10 @@
+/**
+ * Used only for development (via `npm run dev`).
+ *
+ * This file is useful for testing your component in isolation from Node-RED.
+ */
+import { createApp } from "vue";
+
+import UIProcessProgressBar from "./components/UIProcessProgressBar.vue";
+
+createApp(UIProcessProgressBar).mount("#app");

package/ui/stylesheets/ui-process-progress-bar.css

@@ -0,0 +1,47 @@
+.progressBarWrapper {
+  display: grid;
+  align-items: center;
+  gap: 8px;
+  padding: 40px;
+  border-radius: 8px;
+  border: 2px solid #F6F5FA;
+  background: #FFF;
+  margin-left: 92px;
+  margin-right: 92px;
+  margin-bottom: 32px;
+}
+.progressBarWrapper .progressBarStep {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+}
+.progressBarWrapper .currentStep {
+  border-radius: 15px;
+  border: 4px solid #8899C9;
+}
+
+.progressBarWrapper .finishedStep {
+  border-radius: 15px;
+  background: #8899C9;
+  color: #FFF;
+}
+
+.progressBarWrapper hr {
+  border-radius: 2px;
+  border: none;
+  height: 4px;
+  background: #4A4759;
+}
+
+.progressBarWrapper .coloredConnection {
+  background: #8899C9;
+}
+
+.progressBarWrapper span {
+  font-size: 21px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  white-space: nowrap;
+}