-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathflexdash-tab.vue
124 lines (113 loc) · 4.07 KB
/
flexdash-tab.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- FlexDash tab node for Node-RED
Copyright ©2022-2023 by Thorsten von Eicken, see LICENSE
-->
<template>
<nr-tabs :tabs="['Config', 'Contents']" v-model="uitab" v-bind="$attrs" />
<!-- Config tab -->
<div v-show="uitab === 0" class="w:full">
<nr-props-grid>
<nr-label>Name</nr-label>
<nr-string-input
:modelValue="name"
@update:modelValue="$emit('update:prop', 'name', $event)"
tip="Name of tab config node in Node-RED. Not displayed in dashboard." />
<nr-label>Title</nr-label>
<nr-string-input
:modelValue="title"
@update:modelValue="$emit('update:prop', 'title', $event)"
tip="Name shown in the dashboard's tab bar. Leave Empty to only show icon." />
<nr-label>Icon</nr-label>
<div class="flex flex:col nr-input-tip">
<nr-string-input
:modelValue="icon"
@update:modelValue="$emit('update:prop', 'icon', $event)" />
<div class="text:85% pt:4 nr-fmt-tip">
Material design icon to show in tab bar. Include the 'mdi-' prefix. Choose at
<a class="text:underline" href="https://materialdesignicons.com" target="_blank"
>https://materialdesignicons.com</a
>
</div>
</div>
<nr-label>Dashboard</nr-label>
<nr-config-input
:modelValue="fd"
@update:modelValue="$emit('update:prop', 'fd', $event)"
prop-name="fd"
:configTypes="['flexdash dashboard']"
tip="Dashboard to which this tab belongs."
v-slot="slotProps">
<fd-fmt-node-label :node="slotProps.node" />
</nr-config-input>
</nr-props-grid>
</div>
<!-- Content tab -->
<fd-list-sorter v-show="uitab === 1" :items="children" @update:items="updateChildren">
<template v-slot="{ item }">
<div class="w:full flex b:1|solid|gray-70 r:4 my:0.5ex px:1ex pt:1ex pb:0.5ex">
<div class="w:10ex fg:gray-60">{{ item.kind }}</div>
<fd-fmt-node-label class="flex-grow:1 overflow:hidden" :node="item" />
<i class="fa fa-arrows-v ml:auto pl:1ex" />
</div>
</template>
</fd-list-sorter>
</template>
<script>
import { defineComponent } from "vue"
export default defineComponent({
name: "EditFlexdashTab",
props: {
name: { type: String, required: false },
icon: { type: String, default: "mdi-view-dashboard", required: false },
title: { type: String, required: false },
fd_children: { type: String, default: "" }, // comma-separated list of child node IDs
// node id of dashboard, intentionally not declared with a config_type in order not
// to create an export dependency
fd: {
type: String,
default: "", // node id of dashboard
// validate(v, l) {
// const configNode = RED.nodes.node(v || this.fd)
// if (configNode == null) return "Dashboard not found"
// if (configNode.valid == null || configNode.valid) return true
// return "Dashboard not valid"
// },
},
},
data() {
return {
uitab: 0,
}
},
computed: {
child_ids() {
return this.fd_children.split(",").slice(1)
},
children() {
// FIXME: deal with missing nodes
return this.child_ids.map(id => RED.nodes.node(id)).filter(n => n)
},
},
methods: {
updateChildren(cc) {
this.$emit("update:prop", "fd_children", cc.map(c => "," + c.id).join(""))
},
},
node_red: {
category: "config",
label() {
const i = this.icon && this.icon.replace(/^mdi-/, "")
return this.name || i || "FlexDash tab"
},
labelStyle() {
return this.name ? "node_label_italic" : ""
},
},
help: `FlexDash tab.
This config node represents a tab in a FlexDash dashboard.
It is shown in the top bar across the top of the web page and contains a series of
grids, each grid being full width and variable height.
The tab node has a title and an icon, both of which are optional.
On mobile devices the tabs are shown as a hamburger menu.
`,
})
</script>