@kestra-io/ui-libs 0.0.8 → 0.0.9

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.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/src/components/misc/TaskIcon.vue +0 -3
  3. package/src/components/nodes/BasicNode.vue +3 -2
  4. package/src/components/nodes/ClusterNode.vue +8 -2
  5. package/src/components/nodes/CollapsedClusterNode.vue +1 -4
  6. package/src/components/nodes/TriggerNode.vue +4 -3
  7. package/src/components/topology/Topology.vue +9 -8
  8. package/src/scss/app.scss +20 -20
  9. package/src/scss/bootstrap-dark.scss +18 -35
  10. package/src/scss/bootstrap.scss +33 -28
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kestra-io/ui-libs",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src",
package/src/components/misc/TaskIcon.vue CHANGED
@@ -75,7 +75,4 @@
75
75
  height: 25px;
76
76
  border: 0.4px solid var(--bs-border-color);
77
77
  }
78
- .bg-white {
79
- background-color: var(--bs-white);
80
- }
81
78
  </style>
package/src/components/nodes/BasicNode.vue CHANGED
@@ -21,12 +21,12 @@
21
21
  </div>
22
22
  <span
23
23
  class="d-flex"
24
+ v-if="description"
24
25
  data-bs-toggle="tooltip"
25
26
  data-bs-placement="top"
26
27
  :title="$t('show description')"
27
28
  >
28
29
  <InformationOutline
29
- v-if="description"
30
30
  @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
31
31
  class="description-button mx-2"
32
32
  />
@@ -105,7 +105,8 @@
105
105
  EVENTS.ADD_ERROR,
106
106
  EVENTS.EDIT,
107
107
  EVENTS.DELETE,
108
- EVENTS.ADD_TASK
108
+ EVENTS.ADD_TASK,
109
+ EVENTS.SHOW_DESCRIPTION
109
110
  ],
110
111
  inheritAttrs: false,
111
112
  props: {
package/src/components/nodes/ClusterNode.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <span class="badge rounded-pill text-color" :class="[`bg-${data.color}`]">{{ id }}</span>
2
+ <span class="badge rounded-pill text-color" :class="[`bg-${data.color}`]">{{ id.replace("cluster_", "") }}</span>
3
3
  <div class="position-absolute top-0 start-100 translate-middle text-white d-flex">
4
4
  <span
5
5
  v-if="data.collapsable"
@@ -69,9 +69,15 @@
69
69
  font-size: 0.75rem;
70
70
  }
71
71
 
72
+ .badge {
73
+ top: -10px;
74
+ position: relative;
75
+ left: -3px;
76
+ }
77
+
72
78
  .text-color {
73
79
  color: var(--bs-white);
74
- font-size: 0.625rem;
80
+ font-size: 0.5rem;
75
81
  font-weight: 700;
76
82
  padding: 0.25rem 0.5rem;
77
83
  }
package/src/components/nodes/CollapsedClusterNode.vue CHANGED
@@ -33,9 +33,6 @@
33
33
  ArrowExpand,
34
34
  Webhook
35
35
  },
36
- created(){
37
- console.log(this.data)
38
- },
39
36
  inheritAttrs: false,
40
37
  props: {
41
38
  id: {
@@ -109,4 +106,4 @@
109
106
  }
110
107
 
111
108
 
112
- </style>
109
+ </style>
package/src/components/nodes/TriggerNode.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  :id="id"
5
5
  :data="data"
6
6
  :color="color"
7
- @showDescription="forwardEvent(EVENTS.SHOW_DESCRIPTION, id)"
7
+ @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
8
8
  @expand="forwardEvent(EVENTS.EXPAND, id)"
9
9
  >
10
10
  <template #badge-button-before>
@@ -78,7 +78,8 @@
78
78
  },
79
79
  emits: [
80
80
  EVENTS.DELETE,
81
- EVENTS.EDIT
81
+ EVENTS.EDIT,
82
+ EVENTS.SHOW_DESCRIPTION
82
83
  ],
83
84
  components: {
84
85
  Delete, Pencil,
@@ -108,4 +109,4 @@
108
109
  }
109
110
  }
110
111
  }
111
- </script>
112
+ </script>
package/src/components/topology/Topology.vue CHANGED
@@ -21,7 +21,7 @@
21
21
  import {VueFlowUtils, YamlUtils} from "../../index.js";
22
22
  import Utils from "../../utils/Utils.js";
23
23
  import VueflowUtils from "../../utils/VueFlowUtils.js";
24
- import {CLUSTER_UID_SEPARATOR} from "../../utils/constants.js";
24
+ import {CLUSTER_UID_SEPARATOR, EVENTS} from "../../utils/constants.js";
25
25
  import {Background} from "@vue-flow/background";
26
26
 
27
27
  const props = defineProps({
@@ -80,13 +80,13 @@
80
80
 
81
81
  const emit = defineEmits(
82
82
  [
83
- "edit",
84
- "delete",
85
- "open-link",
86
- "show-logs",
87
- "show-description",
83
+ EVENTS.EDIT,
84
+ EVENTS.DELETE,
85
+ EVENTS.OPEN_LINK,
86
+ EVENTS.SHOW_LOGS,
87
+ EVENTS.SHOW_DESCRIPTION,
88
88
  "on-add-flowable-error",
89
- "add-task",
89
+ EVENTS.ADD_TASK,
90
90
  "toggle-orientation",
91
91
  "loading",
92
92
  "swapped-task",
@@ -326,6 +326,7 @@
326
326
  :is-allowed-edit="isAllowedEdit"
327
327
  @delete="forwardEvent('delete', $event)"
328
328
  @edit="forwardEvent('edit', $event)"
329
+ @show-description="forwardEvent('show-description', $event)"
329
330
  />
330
331
  </template>
331
332
 
@@ -358,4 +359,4 @@
358
359
 
359
360
  <style scoped lang="scss">
360
361
 
361
- </style>
362
+ </style>
package/src/scss/app.scss CHANGED
@@ -1,51 +1,51 @@
1
1
  @import "variables";
2
2
 
3
3
  .material-design-icon > .material-design-icon__svg {
4
- bottom: 0;
4
+ bottom: 0;
5
5
  }
6
6
 
7
7
  .vue-flow__node-cluster {
8
- pointer-events: none !important;
8
+ pointer-events: none !important;
9
9
  }
10
10
 
11
11
  marker[id*='id=marker-custom&type=arrowclosed'] polyline {
12
- stroke: $gray-700;
13
- fill: $gray-700;
12
+ stroke: $gray-700;
13
+ fill: $gray-700;
14
14
  }
15
15
 
16
16
  marker[id*='id=marker-danger&type=arrowclosed'] polyline {
17
- stroke: $danger;
18
- fill: $danger;
17
+ stroke: $danger;
18
+ fill: $danger;
19
19
  }
20
20
 
21
21
  .vue-flow__handle {
22
- opacity: 0 !important;
22
+ opacity: 0 !important;
23
23
  }
24
24
 
25
25
  .vue-flow__edge-path {
26
- stroke: $gray-700;
26
+ stroke: $gray-700;
27
27
  }
28
28
 
29
29
 
30
30
  .top-button-div {
31
- width: 100%;
32
- justify-content: end;
33
- transform: translate(-5%, -50%) !important;
31
+ width: 100%;
32
+ justify-content: end;
33
+ transform: translate(-5%, -50%) !important;
34
34
  }
35
35
 
36
36
  .rounded-button {
37
- border-radius: 1rem;
38
- width: 1rem;
39
- height: 1rem;
40
- display: flex;
41
- justify-content: center;
42
- align-items: center;
43
- margin-left: 0.25rem;
44
- z-index: 2000;
37
+ border-radius: 1rem;
38
+ width: 1rem;
39
+ height: 1rem;
40
+ display: flex;
41
+ justify-content: center;
42
+ align-items: center;
43
+ margin-left: 0.25rem;
44
+ z-index: 2000;
45
45
  }
46
46
 
47
47
  .button-icon {
48
- font-size: 0.66rem;
48
+ font-size: 0.66rem;
49
49
  }
50
50
 
51
51
 
package/src/scss/bootstrap-dark.scss CHANGED
@@ -16,46 +16,29 @@ $custom-colors: (
16
16
  $theme-colors: map-merge($theme-colors, $custom-colors);
17
17
 
18
18
  @each $color, $value in $theme-colors {
19
- html.dark {
20
- .border-#{$color} {
21
- border-color: $color;
22
- }
19
+ html.dark {
20
+ .border-#{$color} {
21
+ border-color: $color;
22
+ }
23
23
 
24
- .bg-#{$color} {
25
- background-color: $value;
26
- }
24
+ .bg-#{$color} {
25
+ background-color: $value;
26
+ }
27
27
 
28
- .bg-light-#{$color}-border {
29
- background-color: rgba($value, 0.05);
30
- border: 1px solid $value;
31
- }
28
+ .bg-light-#{$color}-border {
29
+ background-color: rgba($value, 0.05);
30
+ border: 1px solid $value;
31
+ }
32
32
 
33
- .border-execution-#{$color} {
34
- border-left: 0.8125rem;
35
- border-color: $value;
33
+ .border-execution-#{$color} {
34
+ border-left: 0.8125rem;
35
+ border-color: $value;
36
36
 
37
- }
37
+ }
38
38
 
39
- .stroke-#{$color} {
40
- stroke: $value;
39
+ .stroke-#{$color} {
40
+ stroke: $value;
41
+ }
41
42
  }
42
- }
43
43
  }
44
44
 
45
-
46
- .tooltip {
47
- html.dark & {
48
- color: $white;
49
- background-color: $card-bg;
50
- border-radius: $border-radius;
51
- padding: calc($spacer / 3);
52
- font-size: $font-size-xs;
53
- border: 1px solid $border-color;
54
- }
55
- }
56
-
57
-
58
- // overload
59
- .font-monospace {
60
- font-size: $font-size-base * 0.7;
61
- }
package/src/scss/bootstrap.scss CHANGED
@@ -27,6 +27,7 @@ $include-column-box-sizing: true !default;
27
27
 
28
28
  @import "bootstrap/scss/progress";
29
29
  @import "bootstrap/scss/type";
30
+ @import "bootstrap/scss/tooltip";
30
31
 
31
32
  @import "bootstrap/scss/helpers/text-truncation";
32
33
 
@@ -41,42 +42,46 @@ $custom-colors: (
41
42
  $theme-colors: map-merge($theme-colors, $custom-colors);
42
43
 
43
44
  @each $color, $value in $theme-colors {
44
- .border-#{$color} {
45
- border-color: $value !important;
46
- }
45
+ .border-#{$color} {
46
+ border-color: $value !important;
47
+ }
47
48
 
48
- .bg-#{$color} {
49
- background-color: $value;
50
- }
49
+ .bg-#{$color} {
50
+ background-color: $value;
51
+ }
51
52
 
52
- .bg-light-#{$color}-border {
53
- background-color: rgba($value, 0.05);
54
- border: 1px solid $value;
55
- }
53
+ .bg-light-#{$color}-border {
54
+ background-color: rgba($value, 0.05);
55
+ border: 1px solid $value;
56
+ }
56
57
 
57
- .border-execution-#{$color} {
58
- border-left: 0.8125rem !important;
59
- border-color: $value !important;
58
+ .border-execution-#{$color} {
59
+ border-left: 0.8125rem !important;
60
+ border-color: $value !important;
60
61
 
61
- }
62
+ }
62
63
 
63
- .stroke-#{$color} {
64
- stroke: $value;
65
- }
66
- }
67
-
68
-
69
- .tooltip {
70
- color: $black;
71
- background-color: $card-bg;
72
- border-radius: $border-radius-lg;
73
- padding: calc($spacer/3);
74
- font-size: $font-size-xs;
75
- border: 1px solid $border-color;
64
+ .stroke-#{$color} {
65
+ stroke: $value;
66
+ }
76
67
  }
77
68
 
78
69
 
79
70
  // overload
80
71
  .font-monospace {
81
- font-size: $font-size-base * 0.7;
72
+ font-size: $font-size-base * 0.7;
73
+ }
74
+
75
+ // tooltip
76
+ .tooltip {
77
+ font-size: 12px;
78
+ line-height: 20px;
79
+ --bs-tooltip-bg: var(--bs-gray-900);
80
+ --bs-tooltip-color: var(--bs-gray-100);
81
+ --bs-tooltip-opacity: 1;
82
+
83
+ html.dark & {
84
+ --bs-tooltip-color: var(--bs-gray-900);
85
+ --bs-tooltip-bg: var(--bs-gray-100);
86
+ }
82
87
  }