@kestra-io/ui-libs 0.0.13 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
:class="
|
|
4
|
-
class="
|
|
3
|
+
:class="classes"
|
|
4
|
+
class="wrapper"
|
|
5
5
|
>
|
|
6
6
|
<Tooltip :title="cls">
|
|
7
|
-
<
|
|
7
|
+
<div class="icon" :style="styles" />
|
|
8
8
|
</Tooltip>
|
|
9
9
|
</div>
|
|
10
10
|
</template>
|
|
@@ -26,10 +26,6 @@
|
|
|
26
26
|
type: String,
|
|
27
27
|
default: undefined
|
|
28
28
|
},
|
|
29
|
-
color: {
|
|
30
|
-
type: String,
|
|
31
|
-
default: undefined
|
|
32
|
-
},
|
|
33
29
|
theme: {
|
|
34
30
|
type: String,
|
|
35
31
|
default: undefined,
|
|
@@ -43,6 +39,16 @@
|
|
|
43
39
|
backgroundImage() {
|
|
44
40
|
return `data:image/svg+xml;base64,${this.imageBase64}`
|
|
45
41
|
},
|
|
42
|
+
classes() {
|
|
43
|
+
return {
|
|
44
|
+
"flowable": this.icon ? this.icon.flowable : false,
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
styles() {
|
|
48
|
+
return {
|
|
49
|
+
backgroundImage: `url(data:image/svg+xml;base64,${this.imageBase64})`
|
|
50
|
+
}
|
|
51
|
+
},
|
|
46
52
|
imageBase64() {
|
|
47
53
|
let icon = this.icon && this.icon.icon ? Buffer.from(this.icon.icon, "base64").toString("utf8") : undefined;
|
|
48
54
|
|
|
@@ -75,24 +81,28 @@
|
|
|
75
81
|
</script>
|
|
76
82
|
|
|
77
83
|
<style lang="scss" scoped>
|
|
78
|
-
.
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
height: 25px;
|
|
83
|
-
border: 0.4px solid var(--bs-border-color);
|
|
84
|
+
.wrapper {
|
|
85
|
+
display: inline-block;
|
|
86
|
+
width: 100%;
|
|
87
|
+
height: 100%;
|
|
84
88
|
position: relative;
|
|
85
89
|
|
|
86
90
|
:deep(span) {
|
|
87
91
|
position: absolute;
|
|
88
|
-
|
|
92
|
+
padding: 1px;
|
|
89
93
|
left: 0;
|
|
94
|
+
display: block;
|
|
95
|
+
width: 100%;
|
|
96
|
+
height: 100%;
|
|
90
97
|
}
|
|
91
98
|
|
|
92
|
-
:deep(
|
|
93
|
-
|
|
99
|
+
:deep(.icon) {
|
|
100
|
+
width: 100%;
|
|
101
|
+
height: 100%;
|
|
102
|
+
display: block;
|
|
103
|
+
background-size: contain;
|
|
104
|
+
background-repeat: no-repeat;
|
|
105
|
+
background-position: center center;
|
|
94
106
|
}
|
|
95
107
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
108
|
</style>
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
@mouseleave="mouseleave"
|
|
7
7
|
>
|
|
8
8
|
<div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
|
|
9
|
-
<div>
|
|
10
|
-
<TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg" theme="light" />
|
|
9
|
+
<div class="icon rounded">
|
|
10
|
+
<TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg" class="rounded bg-white" theme="light" />
|
|
11
11
|
</div>
|
|
12
12
|
<div class="node-content">
|
|
13
13
|
<div class="d-flex node-title">
|
|
@@ -226,6 +226,13 @@
|
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
|
+
|
|
230
|
+
.icon {
|
|
231
|
+
margin: 0.2rem;
|
|
232
|
+
width: 25px;
|
|
233
|
+
height: 25px;
|
|
234
|
+
border: 0.4px solid var(--bs-border-color);
|
|
235
|
+
}
|
|
229
236
|
}
|
|
230
237
|
|
|
231
238
|
.node-content {
|
|
@@ -267,6 +274,7 @@
|
|
|
267
274
|
font-size: 0.75rem;
|
|
268
275
|
font-weight: 700;
|
|
269
276
|
color: var(--bs-black);
|
|
277
|
+
flex-grow: 1;
|
|
270
278
|
|
|
271
279
|
html.dark & {
|
|
272
280
|
color: var(--bs-white);
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
:class="[`border-${data.color}`]"
|
|
5
5
|
class="dependency-node-wrapper rounded-3 border"
|
|
6
6
|
>
|
|
7
|
-
<TaskIcon
|
|
7
|
+
<TaskIcon :custom-icon="{icon: icon}" class="bg-pink rounded" theme="light" />
|
|
8
8
|
<div class="dependency-text d-flex flex-column">
|
|
9
9
|
<div class="dependency-flow-text text-truncate">
|
|
10
10
|
<tooltip :title="data.flowId">
|