@5minds/node-red-dashboard-2-processcube-dynamic-list 1.0.0-master-23dd92-m848h39y

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,45 @@
+# Dynamic List
+
+A UI-Node to display a list of process instances or usertasks.
+
+## Usage
+
+Query ProcessInstance or UserTask data from the process engine.
+Use a `function` node to transform the queried data into the required format for the `dynamic-list` node.
+The `dyanmic-list` node expects an array of objects as its messages `payload`. The expected schema of these objects is:
+- title: string;
+- progress?:
+    - type: 'boolean' | 'percentage';
+    - value: number; (value between 0 and 100)
+- details?: string;
+- state?:
+    - text: string;
+    - backgroundColor: string;
+- assignee?: string;
+
+Pipe the `function` nodes result into the `dynamic-list` node.
+
+The nodes default output will be triggered each time a list entry was clicked.
+The `payload` property of the message that is ouput will be an object identifieng the clicked list entry.
+This object will exactly equal one of the objects that where used as an input for the `dynamic-list` node.
+Therefore, any amount of additional properties can be passed through this node, besides the ones used for displaying the list entry. I. e. a `processInstanceId`, `flowNodeInstanceId` or `userTask`.
+Each additional output, generated by `actions`, will behave in the same manner, but is only triggered when clicking onto the corresponding button.
+
+## Actions
+
+This field is used for configuring additional actions for each list entry. Actions will be displayed as buttons at the end of each row.
+
+Each action is defined by:
+
+- **Id**: The Id of the action. This will be the name of the nodes output.
+- **Icon**: An URL for an image, that should be displayed. 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.
+
+For each action configured, the node will gain a new output, that is named as the linked actions id.
+
+## Item hover effect
+
+When not checked, all hover effects for the list entries will not be shown. Clicking the card will still trigger a message from the nodes first output.
+
+## Reference
+
+[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)

package/nodes/icons/ui_dynamic_list.svg

@@ -0,0 +1,8 @@
+<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="M3.5 13C3.22386 13 3 13.2239 3 13.5V20.2778C3 20.5539 3.22386 20.7778 3.5 20.7778H9.5C9.77614 20.7778 10 20.5539 10 20.2778V13.5C10 13.2239 9.77614 13 9.5 13H3.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 24.6667C3.22386 24.6667 3 24.8905 3 25.1667V31.9444C3 32.2206 3.22386 32.4444 3.5 32.4444H9.5C9.77614 32.4444 10 32.2206 10 31.9444V25.1667C10 24.8905 9.77614 24.6667 9.5 24.6667H3.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 36.3333C21.5739 36.3333 22.4444 37.2039 22.4444 38.2778V46.0556C22.4444 47.1294 21.5739 48 20.5 48C19.4261 48 18.5556 47.1294 18.5556 46.0556V38.2778C18.5556 37.2039 19.4261 36.3333 20.5 36.3333Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6667 42.1667C14.6667 41.0928 15.5372 40.2222 16.6111 40.2222H24.3889C25.4628 40.2222 26.3333 41.0928 26.3333 42.1667C26.3333 43.2406 25.4628 44.1111 24.3889 44.1111H16.6111C15.5372 44.1111 14.6667 43.2406 14.6667 42.1667Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 13C14.2239 13 14 13.2239 14 13.5V20.2778C14 20.5539 14.2239 20.7778 14.5 20.7778H37.5C37.7761 20.7778 38 20.5539 38 20.2778V13.5C38 13.2239 37.7761 13 37.5 13H14.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 24.6667C14.2239 24.6667 14 24.8905 14 25.1667V31.9444C14 32.2206 14.2239 32.4444 14.5 32.4444H37.5C37.7761 32.4444 38 32.2206 38 31.9444V25.1667C38 24.8905 37.7761 24.6667 37.5 24.6667H14.5Z" fill="white"/>
+</svg>

package/nodes/locales/en-US/ui-dynamic-list.html

@@ -0,0 +1,3 @@
+<script type="text/html" data-help-name="ui-dynamic-list">
+  <p>A list that displays process instances or usertasks.</p>
+</script>

package/nodes/locales/en-US/ui-dynamic-list.json

@@ -0,0 +1,7 @@
+{
+  "ui-dynamic-list": {
+    "label": {
+      "size": "Size"
+    }
+  }
+}

package/nodes/ui-dynamic-list.html

@@ -0,0 +1,227 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty(obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop);
+        }
+
+        RED.nodes.registerType('ui-dynamic-list', {
+            category: 'ProcessCube UI',
+            color: '#00aed7',
+            defaults: {
+                name: { value: '' },
+                group: { type: 'ui-group', required: true },
+                order: { value: 1 },
+                itemHoverEffect: { value: true },
+                actions: {
+                    value: [],
+                    validate: function (v) {
+                        const unique = new Set(
+                            v.map(function (o) {
+                                return o.id;
+                            })
+                        );
+                        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: 1 },
+            },
+            inputs: 1,
+            outputs: 1,
+            outputLabels: function (index) {
+                return index !== 0 ? this.actions[index - 1].id : 'Entry clicked';
+            },
+            icon: 'ui_dynamic_list.svg',
+            paletteLabel: 'ui-dynamic-list',
+            label: function () {
+                return this.name || 'ui-dynamic-list';
+            },
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group',
+                });
+
+                function generateAction(i, action) {
+                    const container = $('<li/>', {
+                        style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
+                    });
+
+                    // Create input fields for icon and id
+                    const row = $('<div/>').appendTo(container);
+
+                    $('<input/>', {
+                        class: 'node-input-action-id',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Id',
+                        value: action.id,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    $('<input/>', {
+                        class: 'node-input-action-icon',
+                        type: 'text',
+                        style: 'margin-left:7px; width:calc(50% - 32px);',
+                        placeholder: 'Icon',
+                        value: action.icon,
+                    })
+                        .appendTo(row)
+                        .typedInput({
+                            type: 'str',
+                            types: ['str'],
+                        });
+
+                    // Create delete button for the action
+                    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-action-container').append(container);
+                }
+
+                $('#node-input-add-action').click(function () {
+                    generateAction($('#node-input-action-container').children().length + 1, {});
+                    $('#node-input-action-container-div').scrollTop(
+                        $('#node-input-action-container-div').get(0).scrollHeight
+                    );
+                });
+
+                for (let i = 0; i < this.actions.length; i++) {
+                    const action = this.actions[i];
+                    generateAction(i + 1, action);
+                }
+
+                $('#node-input-action-container').sortable({
+                    axis: 'y',
+                    handle: '.node-input-action-handle',
+                    cursor: 'move',
+                });
+            },
+            oneditsave: function () {
+                const actions = $('#node-input-action-container').children();
+                const node = this;
+                node.actions = [];
+                actions.each(function (i) {
+                    const action = $(this);
+                    const o = {
+                        id: action.find('.node-input-action-id').val(),
+                        icon: action.find('.node-input-action-icon').val(),
+                    };
+
+                    node.actions.push(o);
+                });
+                node.outputs = node.actions.length + 1;
+            },
+        });
+    })();
+</script>
+
+<script type="text/html" data-template-name="ui-dynamic-list">
+    <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-list.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">
+        <label for="node-input-itemHoverEffect"><i class="fa fa-hand"></i>Item hover effect</label>
+        <input type="checkbox" id="node-input-itemHoverEffect" title="Uncheck to remove all hover effects from the list entries.">
+    </div>
+    <div class="form-row form-row-flex node-input-action-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-action-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-action-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+    </div>
+    <!-- Add Action Button -->
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-action" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
+    </div>
+</script>
+
+<script type="text/markdown" data-help-name="ui-dynamic-list">
+A UI-Node to display a list of process instances or usertasks.
+
+## Usage
+
+Query ProcessInstance or UserTask data from the process engine.
+Use a `function` node to transform the queried data into the required format for the `dynamic-list` node.
+The `dyanmic-list` node expects an array of objects as its messages `payload`. The expected schema of these objects is:
+- title: string;
+- progress?:
+    - type: 'boolean' | 'percentage';
+    - value: number; (value between 0 and 100)
+- details?: string;
+- state?:
+    - text: string;
+    - backgroundColor: string;
+- assignee?: string;
+
+Pipe the `function` nodes result into the `dynamic-list` node.
+
+The nodes default output will be triggered each time a list entry was clicked.
+The `payload` property of the message that is ouput will be an object identifieng the clicked list entry.
+This object will exactly equal one of the objects that where used as an input for the `dynamic-list` node.
+Therefore, any amount of additional properties can be passed through this node, besides the ones used for displaying the list entry. I. e. a `processInstanceId`, `flowNodeInstanceId` or `userTask`.
+Each additional output, generated by `actions`, will behave in the same manner, but is only triggered when clicking onto the corresponding button.
+
+## Actions
+
+This field is used for configuring additional actions for each list entry. Actions will be displayed as buttons at the end of each row.
+
+Each action is defined by:
+
+- **Id**: The Id of the action. This will be the name of the nodes output.
+- **Icon**: An URL for an image, that should be displayed. 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.
+
+For each action configured, the node will gain a new output, that is named as the linked actions id.
+
+## Item hover effect
+
+When not checked, all hover effects for the list entries will not be shown. Clicking the card will still trigger a message from the nodes first output.
+
+## Reference
+
+[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
+</script>

package/nodes/ui-dynamic-list.js

@@ -0,0 +1,34 @@
+module.exports = function (RED) {
+    function DynamicListNode(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) {
+                base.stores.data.save(base, node, msg);
+            },
+        };
+
+        if (group) {
+            group.register(node, config, evts);
+        } else {
+            node.error('No group configured');
+        }
+    }
+
+    RED.nodes.registerType('ui-dynamic-list', DynamicListNode, {
+        defaults: {
+            outputs: { value: 1 },
+        },
+        outputs: function (config) {
+            return 1;
+        },
+    });
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+    "name": "@5minds/node-red-dashboard-2-processcube-dynamic-list",
+    "version": "1.0.0-master-23dd92-m848h39y",
+    "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-dynamic-list.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-dynamic-list.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-dynamic-list": "nodes/ui-dynamic-list.js"
+        }
+    },
+    "node-red-dashboard-2": {
+        "version": "1.0.0",
+        "widgets": {
+            "ui-dynamic-list": {
+                "output": "ui-dynamic-list.umd.js",
+                "component": "UIDynamicList"
+            }
+        }
+    }
+}

package/resources/ui-dynamic-list.umd.js

@@ -0,0 +1,2 @@
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".list-entry[data-v-a51b547e]{background:#fff;display:flex;justify-content:space-between;padding:16px;margin-bottom:24px;border-radius:8px;box-shadow:0 0 8px #bababa;transition:box-shadow .25s ease;align-items:center}.list-entry-hoverable[data-v-a51b547e]{cursor:pointer}.list-entry-hoverable[data-v-a51b547e]:hover{box-shadow:0 0 32px #bababa;transition:box-shadow .5s ease}.list-entry_left[data-v-a51b547e]{display:flex;align-items:center;gap:24px}.list-entry_left-progress[data-v-a51b547e]{font-size:24px;font-weight:400;color:#405fa5}.list-entry_left-texts[data-v-a51b547e]{display:flex;flex-direction:column;gap:4px;justify-content:center}.list-entry_left-title[data-v-a51b547e]{display:flex;gap:8px;align-items:center}.list-entry_left-title-text[data-v-a51b547e]{font-size:18px;font-weight:400}.list-entry_left-title-state[data-v-a51b547e]{font-size:12px;color:#fff;font-weight:700;padding:4px 8px;border-radius:8px;border:2px solid transparent}.list-entry_left-details[data-v-a51b547e]{font-size:18px;color:#7a7a99;font-weight:400}.list-entry_right[data-v-a51b547e]{display:flex;align-self:center;flex-direction:column;align-items:end;gap:4px}.list-entry_right-assignee[data-v-a51b547e]{font-size:18px;font-weight:400}.list-entry_right-actions[data-v-a51b547e]{display:flex;gap:8px}.list-entry_right-action[data-v-a51b547e]{cursor:pointer;padding:4px;opacity:.6}.list-entry_right-action[data-v-a51b547e]:hover{opacity:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["ui-dynamic-list"]={},n.Vue))})(this,function(n,t){"use strict";const _=(e,o)=>{const i=e.__vccOpts||e;for(const[l,c]of o)i[l]=c;return i},C={name:"UIDynamicList",inject:["$socket"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!0,visible:!0})}},computed:{},data(){return{actions:[],entries:[],itemHoverEffect:!0}},mounted(){this.$socket.on("widget-load:"+this.id,e=>{var o,i;this.actions=((o=this.props)==null?void 0:o.actions)??[],this.entries=(e==null?void 0:e.payload)??[],this.itemHoverEffect=((i=this.props)==null?void 0:i.itemHoverEffect)??!0}),this.$socket.on("msg-input:"+this.id,e=>{this.entries=e.payload??[]}),this.$socket.emit("widget-load",this.id)},unmounted(){var e,o;(e=this.$socket)==null||e.off("widget-load"+this.id),(o=this.$socket)==null||o.off("msg-input:"+this.id)},methods:{send(e,o){const i=[];i[o]={payload:e},this.$socket.emit("widget-action",this.id,i)},entryClicked(e){this.send(e,0)},actionClicked(e,o,i){i.stopPropagation();const l=this.actions.findIndex(c=>c.id===e.id);l>-1&&this.send(o,l+1)}}},a=e=>(t.pushScopeId("data-v-a51b547e"),e=e(),t.popScopeId(),e),m=["onClick"],k={class:"list-entry_left"},f={key:0,class:"list-entry_left-progress"},g={key:0,width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg"},y=[a(()=>t.createElementVNode("path",{d:"M12.04 20.44L21.91 10.57L19.95 8.61L12.04 16.52L8.05 12.53L6.09 14.49L12.04 20.44ZM14 28C12.0633 28 10.2433 27.6325 8.54 26.8975C6.83667 26.1625 5.355 25.165 4.095 23.905C2.835 22.645 1.8375 21.1633 1.1025 19.46C0.3675 17.7567 0 15.9367 0 14C0 12.0633 0.3675 10.2433 1.1025 8.54C1.8375 6.83667 2.835 5.355 4.095 4.095C5.355 2.835 6.83667 1.8375 8.54 1.1025C10.2433 0.3675 12.0633 0 14 0C15.9367 0 17.7567 0.3675 19.46 1.1025C21.1633 1.8375 22.645 2.835 23.905 4.095C25.165 5.355 26.1625 6.83667 26.8975 8.54C27.6325 10.2433 28 12.0633 28 14C28 15.9367 27.6325 17.7567 26.8975 19.46C26.1625 21.1633 25.165 22.645 23.905 23.905C22.645 25.165 21.1633 26.1625 19.46 26.8975C17.7567 27.6325 15.9367 28 14 28Z",fill:"#405FA5"},null,-1))],B={key:1,width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg"},E=[a(()=>t.createElementVNode("path",{d:"M14 28C12.0633 28 10.2433 27.6325 8.54 26.8975C6.83667 26.1625 5.355 25.165 4.095 23.905C2.835 22.645 1.8375 21.1633 1.1025 19.46C0.3675 17.7567 0 15.9367 0 14C0 12.0633 0.3675 10.2433 1.1025 8.54C1.8375 6.83667 2.835 5.355 4.095 4.095C5.355 2.835 6.83667 1.8375 8.54 1.1025C10.2433 0.3675 12.0633 0 14 0C15.9367 0 17.7567 0.3675 19.46 1.1025C21.1633 1.8375 22.645 2.835 23.905 4.095C25.165 5.355 26.1625 6.83667 26.8975 8.54C27.6325 10.2433 28 12.0633 28 14C28 15.9367 27.6325 17.7567 26.8975 19.46C26.1625 21.1633 25.165 22.645 23.905 23.905C22.645 25.165 21.1633 26.1625 19.46 26.8975C17.7567 27.6325 15.9367 28 14 28ZM14 25.2C17.1267 25.2 19.775 24.115 21.945 21.945C24.115 19.775 25.2 17.1267 25.2 14C25.2 10.8733 24.115 8.225 21.945 6.055C19.775 3.885 17.1267 2.8 14 2.8C10.8733 2.8 8.225 3.885 6.055 6.055C3.885 8.225 2.8 10.8733 2.8 14C2.8 17.1267 3.885 19.775 6.055 21.945C8.225 24.115 10.8733 25.2 14 25.2Z",fill:"black"},null,-1))],w={class:"list-entry_left-texts"},b={class:"list-entry_left-title"},x={class:"list-entry_left-title-text"},V={key:0,class:"list-entry_left-details"},N={class:"list-entry_right"},S={class:"list-entry_right-actions"},L=["onClick","src"],I={key:0,class:"list-entry_right-assignee"};function D(e,o,i,l,c,d){return t.openBlock(),t.createElementBlock("div",null,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(c.entries,s=>{var p,h;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["list-entry",{"list-entry-hoverable":c.itemHoverEffect}]),onClick:r=>d.entryClicked(s)},[t.createElementVNode("div",k,[((p=s.progress)==null?void 0:p.type)==="percentage"?(t.openBlock(),t.createElementBlock("span",f,t.toDisplayString(s.progress.value)+" %",1)):((h=s.progress)==null?void 0:h.type)==="boolean"?(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[s.progress.value===100?(t.openBlock(),t.createElementBlock("svg",g,y)):(t.openBlock(),t.createElementBlock("svg",B,E))],64)):t.createCommentVNode("",!0),t.createElementVNode("div",w,[t.createElementVNode("div",b,[t.createElementVNode("span",x,t.toDisplayString(s.title),1),s.state?(t.openBlock(),t.createElementBlock("span",{key:0,class:"list-entry_left-title-state",style:t.normalizeStyle({backgroundColor:s.state.backgroundColor})},t.toDisplayString(s.state.text),5)):t.createCommentVNode("",!0)]),s.details?(t.openBlock(),t.createElementBlock("span",V,t.toDisplayString(s.details),1)):t.createCommentVNode("",!0)])]),t.createElementVNode("div",N,[t.createElementVNode("div",S,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(c.actions,r=>(t.openBlock(),t.createElementBlock("img",{onClick:j=>d.actionClicked(r,s,j),class:"list-entry_right-action",src:r.icon},null,8,L))),256))]),s.assignee?(t.openBlock(),t.createElementBlock("span",I,t.toDisplayString(s.assignee),1)):t.createCommentVNode("",!0)])],10,m)}),256))])}const $=_(C,[["render",D],["__scopeId","data-v-a51b547e"]]);n.UIDynamicList=$,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/ui/components/UIDynamicList.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div v-for="entry in entries" class="list-entry" :class="{ 'list-entry-hoverable': itemHoverEffect }" @click="entryClicked(entry)">
+        <div class="list-entry_left">
+            <span v-if="entry.progress?.type === 'percentage'" class="list-entry_left-progress">{{ entry.progress.value}} %</span>
+            <template v-else-if="entry.progress?.type === 'boolean'">
+                <svg v-if="entry.progress.value === 100" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12.04 20.44L21.91 10.57L19.95 8.61L12.04 16.52L8.05 12.53L6.09 14.49L12.04 20.44ZM14 28C12.0633 28 10.2433 27.6325 8.54 26.8975C6.83667 26.1625 5.355 25.165 4.095 23.905C2.835 22.645 1.8375 21.1633 1.1025 19.46C0.3675 17.7567 0 15.9367 0 14C0 12.0633 0.3675 10.2433 1.1025 8.54C1.8375 6.83667 2.835 5.355 4.095 4.095C5.355 2.835 6.83667 1.8375 8.54 1.1025C10.2433 0.3675 12.0633 0 14 0C15.9367 0 17.7567 0.3675 19.46 1.1025C21.1633 1.8375 22.645 2.835 23.905 4.095C25.165 5.355 26.1625 6.83667 26.8975 8.54C27.6325 10.2433 28 12.0633 28 14C28 15.9367 27.6325 17.7567 26.8975 19.46C26.1625 21.1633 25.165 22.645 23.905 23.905C22.645 25.165 21.1633 26.1625 19.46 26.8975C17.7567 27.6325 15.9367 28 14 28Z" fill="#405FA5"/>
+                </svg>
+                <svg v-else width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M14 28C12.0633 28 10.2433 27.6325 8.54 26.8975C6.83667 26.1625 5.355 25.165 4.095 23.905C2.835 22.645 1.8375 21.1633 1.1025 19.46C0.3675 17.7567 0 15.9367 0 14C0 12.0633 0.3675 10.2433 1.1025 8.54C1.8375 6.83667 2.835 5.355 4.095 4.095C5.355 2.835 6.83667 1.8375 8.54 1.1025C10.2433 0.3675 12.0633 0 14 0C15.9367 0 17.7567 0.3675 19.46 1.1025C21.1633 1.8375 22.645 2.835 23.905 4.095C25.165 5.355 26.1625 6.83667 26.8975 8.54C27.6325 10.2433 28 12.0633 28 14C28 15.9367 27.6325 17.7567 26.8975 19.46C26.1625 21.1633 25.165 22.645 23.905 23.905C22.645 25.165 21.1633 26.1625 19.46 26.8975C17.7567 27.6325 15.9367 28 14 28ZM14 25.2C17.1267 25.2 19.775 24.115 21.945 21.945C24.115 19.775 25.2 17.1267 25.2 14C25.2 10.8733 24.115 8.225 21.945 6.055C19.775 3.885 17.1267 2.8 14 2.8C10.8733 2.8 8.225 3.885 6.055 6.055C3.885 8.225 2.8 10.8733 2.8 14C2.8 17.1267 3.885 19.775 6.055 21.945C8.225 24.115 10.8733 25.2 14 25.2Z" fill="black"/>
+                </svg>
+            </template>
+            <div class="list-entry_left-texts">
+                <div class="list-entry_left-title">
+                    <span class="list-entry_left-title-text">{{ entry.title }}</span>
+                    <span
+                        v-if="entry.state"
+                        class="list-entry_left-title-state"
+                        :style="{
+                            backgroundColor: entry.state.backgroundColor
+                        }"
+                    >{{ entry.state.text }}</span>
+                </div>
+                <span v-if="entry.details" class="list-entry_left-details">{{ entry.details }}</span>
+            </div>
+        </div>
+        <div class="list-entry_right">
+            <div class="list-entry_right-actions">
+                <img v-for="action in actions" @click="(event) => actionClicked(action, entry, event)" class="list-entry_right-action" :src="action.icon" />
+            </div>
+            <span v-if="entry.assignee" class="list-entry_right-assignee">{{ entry.assignee }}</span>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: 'UIDynamicList',
+    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 }),
+        },
+    },
+    computed: {
+    },
+    data() {
+        return {
+            actions: [],
+            entries: [],
+            itemHoverEffect: true,
+        };
+    },
+    mounted() {
+        this.$socket.on('widget-load:' + this.id, (msg) => {
+            this.actions = this.props?.actions ?? [];
+            this.entries = msg?.payload ?? [];
+            this.itemHoverEffect = this.props?.itemHoverEffect ?? true;
+        });
+        this.$socket.on('msg-input:' + this.id, (msg) => {
+            this.entries = msg.payload ?? [];
+        });
+        this.$socket.emit('widget-load', this.id);
+    },
+    unmounted() {
+        this.$socket?.off('widget-load' + this.id);
+        this.$socket?.off('msg-input:' + this.id);
+    },
+    methods: {
+        send (entry, index) {
+            const msgArr = []
+            msgArr[index] = { payload: entry }
+            this.$socket.emit('widget-action', this.id, msgArr)
+        },
+        entryClicked(entry) {
+            this.send(entry, 0)
+        },
+        actionClicked(action, entry, event) {
+            event.stopPropagation();
+            const actionIndex = this.actions.findIndex(a => a.id === action.id);
+            if (actionIndex > -1) {
+              this.send(entry, actionIndex + 1)
+            }
+        }
+    },
+};
+</script>
+
+<style scoped>
+/* CSS is auto scoped, but using named classes is still recommended */
+@import '../stylesheets/ui-dynamic-list.css'
+</style>

package/ui/index.js

@@ -0,0 +1,2 @@
+/* Exports of all of the components in this node */
+export { default as UIDynamicList } from './components/UIDynamicList.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 UIDyanmicList from "./components/UIDyanmicList.vue";
+
+createApp(UIDyanmicList).mount("#app");

package/ui/stylesheets/ui-dynamic-list.css

@@ -0,0 +1,96 @@
+.list-entry {
+  background: #FFF;
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  margin-bottom: 24px;
+  border-radius: 8px;
+  box-shadow: 0px 0px 8px 0px #BABABA;
+  transition: box-shadow .25s ease;
+  align-items: center;
+}
+
+.list-entry-hoverable {
+  cursor: pointer;
+}
+
+.list-entry-hoverable:hover {
+  box-shadow: 0px 0px 32px 0px #BABABA;
+  transition: box-shadow .5s ease;
+}
+
+.list-entry_left {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.list-entry_left-progress {
+  font-size: 24px;
+  font-weight: 400;
+  color: #405FA5;
+}
+
+.list-entry_left-texts {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  justify-content: center;
+}
+
+.list-entry_left-title {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.list-entry_left-title-text {
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.list-entry_left-title-state {
+  font-size: 12px;
+  color: #FFF;
+  font-weight: 700;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+}
+
+.list-entry_left-details {
+  font-size: 18px;
+  color: #7A7A99;
+  font-weight: 400;
+}
+
+.list-entry_right {
+  display: flex;
+  align-self: center;
+  flex-direction: column;
+  align-items: end;
+  gap: 4px
+}
+
+.list-entry_right-assignee {
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.list-entry_right-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.list-entry_right-action {
+  cursor: pointer;
+  padding: 4px;
+  opacity: .6;
+}
+
+.list-entry_right-action:hover {
+  opacity: 1;
+}