Vuetify Version Bump

[joepavitt]

Description

• Update vuetify dependency to 3.5.17
• Allows for the inclusion of v-sparkline and v-treeview in a ui-template node.

Related Issue(s)

Closes #798

[joepavitt]

v-sparkline example

[
    {
        "id": "0318b78e790954f1",
        "type": "ui-template",
        "z": "47b2904dbecb9aa7",
        "group": "8907e8392c1cd840",
        "page": "",
        "ui": "",
        "name": "Sparkline",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n  <v-sparkline class=\"nrdb-ui-sparkline\" :auto-line-width=\"autoLineWidth\" :fill=\"fill\" :gradient=\"gradient\"\n    :gradient-direction=\"gradientDirection\" :line-width=\"width\" :model-value=\"value\" :padding=\"padding\"\n    :smooth=\"radius || false\" :stroke-linecap=\"lineCap\" :type=\"type\" auto-draw></v-sparkline>\n</template>\n\n<script>\n  export default {\n    data: function () {\n      const gradients = [\n        ['#222'],\n        ['#42b3f4'],\n        ['red', 'orange', 'yellow'],\n        ['purple', 'violet'],\n        ['#00c6ff', '#F0F', '#FF0'],\n        ['#f72047', '#ffd200', '#1feaea'],\n      ]\n      return {\n        width: 2,\n        radius: 10,\n        padding: 8,\n        lineCap: 'round',\n        gradient: gradients[5],\n        value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],\n        gradientDirection: 'top',\n        gradients,\n        fill: false,\n        type: 'trend',\n        autoLineWidth: false,\n      }\n    },\n    watch: {\n      msg: function () {\n        this.value.push(this.msg.payload)\n      }\n    }\n  }\n</script>\n\n<style>\n.nrdb-ui-sparkline path {\n  stroke-dasharray: 0 !important;\n}\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 260,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "028d1733d6848a45",
        "type": "ui-slider",
        "z": "47b2904dbecb9aa7",
        "group": "8907e8392c1cd840",
        "name": "",
        "label": "slider",
        "tooltip": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "outs": "all",
        "topic": "topic",
        "topicType": "msg",
        "thumbLabel": true,
        "min": 0,
        "max": 10,
        "step": 1,
        "className": "",
        "x": 110,
        "y": 60,
        "wires": [
            [
                "0318b78e790954f1"
            ]
        ]
    },
    {
        "id": "8907e8392c1cd840",
        "type": "ui-group",
        "name": "Sparkline",
        "page": "729fe675749ced1e",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "729fe675749ced1e",
        "type": "ui-page",
        "name": "Vuetify Labs",
        "ui": "c2e1aa56f50f03bd",
        "path": "/vuetify-labs",
        "icon": "beaker",
        "layout": "grid",
        "theme": "129e99574def90a3",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c2e1aa56f50f03bd",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "129e99574def90a3",
        "type": "ui-theme",
        "name": "Another Theme",
        "colors": {
            "surface": "#000000",
            "primary": "#ff4000",
            "bgPage": "#f0f0f0",
            "groupBg": "#ffffff",
            "groupOutline": "#d9d9d9"
        },
        "sizes": {
            "pagePadding": "9px",
            "groupGap": "12px",
            "groupBorderRadius": "9px",
            "widgetGap": "6px"
        }
    }
]

[joepavitt]

v-treeview example

Note the short-term css trick to circumvent vuetifyjs/vuetify#19692

[
    {
        "id": "ea042f9c9e5fc756",
        "type": "ui-template",
        "z": "47b2904dbecb9aa7",
        "group": "188b1a98f5af0e62",
        "page": "",
        "ui": "",
        "name": "Treeview",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <v-treeview :items=\"items\"></v-treeview>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      items: [\n        {\n          id: 1,\n          title: 'Applications :',\n          children: [\n            { id: 2, title: 'Calendar : app' },\n            { id: 3, title: 'Chrome : app' },\n            { id: 4, title: 'Webstorm : app' },\n          ],\n        },\n        {\n          id: 5,\n          title: 'Documents :',\n          children: [\n            {\n              id: 6,\n              title: 'vuetify :',\n              children: [\n                {\n                  id: 7,\n                  title: 'src :',\n                  children: [\n                    { id: 8, title: 'index : ts' },\n                    { id: 9, title: 'bootstrap : ts' },\n                  ],\n                },\n              ],\n            },\n            {\n              id: 10,\n              title: 'material2 :',\n              children: [\n                {\n                  id: 11,\n                  title: 'src :',\n                  children: [\n                    { id: 12, title: 'v-btn : ts' },\n                    { id: 13, title: 'v-card : ts' },\n                    { id: 14, title: 'v-window : ts' },\n                  ],\n                },\n              ],\n            },\n          ],\n        },\n        {\n          id: 15,\n          title: 'Downloads :',\n          children: [\n            { id: 16, title: 'October : pdf' },\n            { id: 17, title: 'November : pdf' },\n            { id: 18, title: 'Tutorial : html' },\n          ],\n        },\n        {\n          id: 19,\n          title: 'Videos :',\n          children: [\n            {\n              id: 20,\n              title: 'Tutorials :',\n              children: [\n                { id: 21, title: 'Basic layouts : mp4' },\n                { id: 22, title: 'Advanced techniques : mp4' },\n                { id: 23, title: 'All about app : dir' },\n              ],\n            },\n            { id: 24, title: 'Intro : mov' },\n            { id: 25, title: 'Conference introduction : avi' },\n          ],\n        },\n      ],\n    }),\n  }\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 260,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "188b1a98f5af0e62",
        "type": "ui-group",
        "name": "Treeview",
        "page": "729fe675749ced1e",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "729fe675749ced1e",
        "type": "ui-page",
        "name": "Vuetify Labs",
        "ui": "c2e1aa56f50f03bd",
        "path": "/vuetify-labs",
        "icon": "beaker",
        "layout": "grid",
        "theme": "129e99574def90a3",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c2e1aa56f50f03bd",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "129e99574def90a3",
        "type": "ui-theme",
        "name": "Another Theme",
        "colors": {
            "surface": "#000000",
            "primary": "#ff4000",
            "bgPage": "#f0f0f0",
            "groupBg": "#ffffff",
            "groupOutline": "#d9d9d9"
        },
        "sizes": {
            "pagePadding": "9px",
            "groupGap": "12px",
            "groupBorderRadius": "9px",
            "widgetGap": "6px"
        }
    }
]

[arturv2000]

Hi

Would it be possible to also add VNumberInput

[joepavitt]

@arturv2000 incoming. We do still plan on adding that as a base node for what it's worth. Hadn't spotted that Vuetify had their own until you pointed that out, so thanks for letting us know