@kestra-io/ui-libs 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "files": [
     "src",

package/src/components/misc/TaskIcon.vue

@@ -75,7 +75,4 @@
         height: 25px;
         border: 0.4px solid var(--bs-border-color);
     }
-    .bg-white {
-        background-color: var(--bs-white);
-    }
 </style>

package/src/components/nodes/BasicNode.vue

@@ -21,12 +21,12 @@
                 </div>
                 <span
                     class="d-flex"
+                    v-if="description"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     :title="$t('show description')"
                 >
                     <InformationOutline
-                        v-if="description"
                         @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
                         class="description-button mx-2"
                     />
@@ -105,7 +105,8 @@
             EVENTS.ADD_ERROR,
             EVENTS.EDIT,
             EVENTS.DELETE,
-            EVENTS.ADD_TASK
+            EVENTS.ADD_TASK,
+            EVENTS.SHOW_DESCRIPTION
         ],
         inheritAttrs: false,
         props: {

package/src/components/nodes/ClusterNode.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="badge rounded-pill text-color" :class="[`bg-${data.color}`]">{{ id }}</span>
+    <span class="badge rounded-pill text-color" :class="[`bg-${data.color}`]">{{ id.replace("cluster_", "") }}</span>
     <div class="position-absolute top-0 start-100 translate-middle text-white d-flex">
         <span
             v-if="data.collapsable"
@@ -69,9 +69,15 @@
         font-size: 0.75rem;
     }
 
+    .badge {
+        top: -10px;
+        position: relative;
+        left: -3px;
+    }
+
     .text-color {
         color: var(--bs-white);
-        font-size: 0.625rem;
+        font-size: 0.5rem;
         font-weight: 700;
         padding: 0.25rem 0.5rem;
     }

package/src/components/nodes/CollapsedClusterNode.vue

@@ -33,9 +33,6 @@
             ArrowExpand,
             Webhook
         },
-        created(){
-            console.log(this.data)
-        },
         inheritAttrs: false,
         props: {
             id: {
@@ -109,4 +106,4 @@
     }
 
 
-</style>
+</style>

package/src/components/nodes/TriggerNode.vue

@@ -4,7 +4,7 @@
         :id="id"
         :data="data"
         :color="color"
-        @showDescription="forwardEvent(EVENTS.SHOW_DESCRIPTION, id)"
+        @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
         @expand="forwardEvent(EVENTS.EXPAND, id)"
     >
         <template #badge-button-before>
@@ -78,7 +78,8 @@
         },
         emits: [
             EVENTS.DELETE,
-            EVENTS.EDIT
+            EVENTS.EDIT,
+            EVENTS.SHOW_DESCRIPTION
         ],
         components: {
             Delete, Pencil,
@@ -108,4 +109,4 @@
             }
         }
     }
-</script>
+</script>

package/src/components/topology/Topology.vue

@@ -21,7 +21,7 @@
     import {VueFlowUtils, YamlUtils} from "../../index.js";
     import Utils from "../../utils/Utils.js";
     import VueflowUtils from "../../utils/VueFlowUtils.js";
-    import {CLUSTER_UID_SEPARATOR} from "../../utils/constants.js";
+    import {CLUSTER_UID_SEPARATOR, EVENTS} from "../../utils/constants.js";
     import {Background} from "@vue-flow/background";
 
     const props = defineProps({
@@ -80,13 +80,13 @@
 
     const emit = defineEmits(
         [
-            "edit",
-            "delete",
-            "open-link",
-            "show-logs",
-            "show-description",
+            EVENTS.EDIT,
+            EVENTS.DELETE,
+            EVENTS.OPEN_LINK,
+            EVENTS.SHOW_LOGS,
+            EVENTS.SHOW_DESCRIPTION,
             "on-add-flowable-error",
-            "add-task",
+            EVENTS.ADD_TASK,
             "toggle-orientation",
             "loading",
             "swapped-task",
@@ -326,6 +326,7 @@
                 :is-allowed-edit="isAllowedEdit"
                 @delete="forwardEvent('delete', $event)"
                 @edit="forwardEvent('edit', $event)"
+                @show-description="forwardEvent('show-description', $event)"
             />
         </template>
 
@@ -358,4 +359,4 @@
 
 <style scoped lang="scss">
 
-</style>
+</style>

package/src/scss/app.scss

@@ -1,51 +1,51 @@
 @import "variables";
 
 .material-design-icon > .material-design-icon__svg {
-  bottom: 0;
+    bottom: 0;
 }
 
 .vue-flow__node-cluster {
-  pointer-events: none !important;
+    pointer-events: none !important;
 }
 
 marker[id*='id=marker-custom&type=arrowclosed'] polyline {
-  stroke: $gray-700;
-  fill: $gray-700;
+    stroke: $gray-700;
+    fill: $gray-700;
 }
 
 marker[id*='id=marker-danger&type=arrowclosed'] polyline {
-  stroke: $danger;
-  fill: $danger;
+    stroke: $danger;
+    fill: $danger;
 }
 
 .vue-flow__handle {
-  opacity: 0 !important;
+    opacity: 0 !important;
 }
 
 .vue-flow__edge-path {
-  stroke: $gray-700;
+    stroke: $gray-700;
 }
 
 
 .top-button-div {
-  width: 100%;
-  justify-content: end;
-  transform: translate(-5%, -50%) !important;
+    width: 100%;
+    justify-content: end;
+    transform: translate(-5%, -50%) !important;
 }
 
 .rounded-button {
-  border-radius: 1rem;
-  width: 1rem;
-  height: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 0.25rem;
-  z-index: 2000;
+    border-radius: 1rem;
+    width: 1rem;
+    height: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0.25rem;
+    z-index: 2000;
 }
 
 .button-icon {
-  font-size: 0.66rem;
+    font-size: 0.66rem;
 }
 
 

package/src/scss/bootstrap-dark.scss

@@ -16,46 +16,29 @@ $custom-colors: (
 $theme-colors: map-merge($theme-colors, $custom-colors);
 
 @each $color, $value in $theme-colors {
-  html.dark {
-    .border-#{$color} {
-      border-color: $color;
-    }
+    html.dark {
+        .border-#{$color} {
+            border-color: $color;
+        }
 
-    .bg-#{$color} {
-      background-color: $value;
-    }
+        .bg-#{$color} {
+            background-color: $value;
+        }
 
-    .bg-light-#{$color}-border {
-      background-color: rgba($value, 0.05);
-      border: 1px solid $value;
-    }
+        .bg-light-#{$color}-border {
+            background-color: rgba($value, 0.05);
+            border: 1px solid $value;
+        }
 
-    .border-execution-#{$color} {
-      border-left: 0.8125rem;
-      border-color: $value;
+        .border-execution-#{$color} {
+            border-left: 0.8125rem;
+            border-color: $value;
 
-    }
+        }
 
-    .stroke-#{$color} {
-      stroke: $value;
+        .stroke-#{$color} {
+            stroke: $value;
+        }
     }
-  }
 }
 
-
-.tooltip {
-  html.dark & {
-    color: $white;
-    background-color: $card-bg;
-    border-radius: $border-radius;
-    padding: calc($spacer / 3);
-    font-size: $font-size-xs;
-    border: 1px solid $border-color;
-  }
-}
-
-
-// overload
-.font-monospace {
-  font-size: $font-size-base * 0.7;
-}

package/src/scss/bootstrap.scss

@@ -27,6 +27,7 @@ $include-column-box-sizing: true !default;
 
 @import "bootstrap/scss/progress";
 @import "bootstrap/scss/type";
+@import "bootstrap/scss/tooltip";
 
 @import "bootstrap/scss/helpers/text-truncation";
 
@@ -41,42 +42,46 @@ $custom-colors: (
 $theme-colors: map-merge($theme-colors, $custom-colors);
 
 @each $color, $value in $theme-colors {
-  .border-#{$color} {
-    border-color: $value !important;
-  }
+    .border-#{$color} {
+        border-color: $value !important;
+    }
 
-  .bg-#{$color} {
-    background-color: $value;
-  }
+    .bg-#{$color} {
+        background-color: $value;
+    }
 
-  .bg-light-#{$color}-border {
-    background-color: rgba($value, 0.05);
-    border: 1px solid $value;
-  }
+    .bg-light-#{$color}-border {
+        background-color: rgba($value, 0.05);
+        border: 1px solid $value;
+    }
 
-  .border-execution-#{$color} {
-    border-left: 0.8125rem !important;
-    border-color: $value !important;
+    .border-execution-#{$color} {
+        border-left: 0.8125rem !important;
+        border-color: $value !important;
 
-  }
+    }
 
-  .stroke-#{$color} {
-    stroke: $value;
-  }
-}
-
-
-.tooltip {
-  color: $black;
-  background-color: $card-bg;
-  border-radius: $border-radius-lg;
-  padding: calc($spacer/3);
-  font-size: $font-size-xs;
-  border: 1px solid $border-color;
+    .stroke-#{$color} {
+        stroke: $value;
+    }
 }
 
 
 // overload
 .font-monospace {
-  font-size: $font-size-base * 0.7;
+    font-size: $font-size-base * 0.7;
+}
+
+// tooltip
+.tooltip {
+    font-size: 12px;
+    line-height: 20px;
+    --bs-tooltip-bg: var(--bs-gray-900);
+    --bs-tooltip-color: var(--bs-gray-100);
+    --bs-tooltip-opacity: 1;
+
+    html.dark & {
+        --bs-tooltip-color: var(--bs-gray-900);
+        --bs-tooltip-bg: var(--bs-gray-100);
+    }
 }

package/src/utils/YamlUtils.js

@@ -1,6 +1,6 @@
 import JsYaml from "js-yaml";
 import yaml, {Document, YAMLMap, isSeq, isMap, Pair, Scalar, YAMLSeq, LineCounter} from "yaml";
-import _cloneDeep from "lodash/cloneDeep.js"
+import {cloneDeep} from "lodash/cloneDeep"
 import {SECTIONS} from "./constants.js";
 
 const TOSTRING_OPTIONS = {lineWidth: 0};
@@ -15,7 +15,7 @@ export default class YamlUtils {
             delete value.deleted
         }
 
-        return JsYaml.dump(YamlUtils._transform(_cloneDeep(value)), {
+        return JsYaml.dump(YamlUtils._transform(cloneDeep(value)), {
             lineWidth: -1,
             noCompatMode: true,
             quotingType: "\"",