@kestra-io/ui-libs 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.8",
+  "version": "v0.0.10",
   "type": "module",
   "files": [
     "src",

package/src/components/misc/ExecutionInformations.vue

@@ -96,6 +96,7 @@
 <style scoped>
     .content {
         display: flex;
+        color: var(--bs-gray-700);
 
         *:not(:first-child)::before {
             content: "";
@@ -118,4 +119,4 @@
         cursor: default;
         font-size: 0.70rem;
     }
-</style>
+</style>

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

@@ -1,41 +1,41 @@
 <template>
     <div
-        :class="[`border-${borderColor}`]"
+        :class="classes"
         class="node-wrapper rounded-3 border"
         @mouseover="mouseover"
         @mouseleave="mouseleave"
     >
-        <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]"/>
+        <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
         <div>
-            <TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg"/>
+            <TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg" />
         </div>
         <div class="node-content">
-            <div class="d-flex justify-content-around">
+            <div class="d-flex node-title">
                 <div
                     class="text-truncate task-title"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     :title="id"
                 >
-                    <span> {{ id }} </span>
+                    <span>{{ id }}</span>
                 </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"
+                        class="description-button ms-2"
                     />
                 </span>
             </div>
-            <slot name="content"/>
+            <slot name="content" />
         </div>
         <div class="position-absolute top-0 text-white d-flex top-button-div">
-            <slot name="badge-button-before"/>
+            <slot name="badge-button-before" />
             <span
                 v-if="link"
                 class="rounded-button"
@@ -45,7 +45,7 @@
                 data-bs-placement="top"
                 :title="$t('open')"
             >
-                <OpenInNew class="button-icon" alt="Open in new tab"/>
+                <OpenInNew class="button-icon" alt="Open in new tab" />
             </span>
             <span
                 v-if="expandable"
@@ -56,9 +56,9 @@
                 data-bs-placement="top"
                 :title="$t('expand')"
             >
-                <ArrowExpand class="button-icon" alt="Expand task"/>
+                <ArrowExpand class="button-icon" alt="Expand task" />
             </span>
-            <slot name="badge-button-after"/>
+            <slot name="badge-button-after" />
         </div>
     </div>
 </template>
@@ -105,7 +105,8 @@
             EVENTS.ADD_ERROR,
             EVENTS.EDIT,
             EVENTS.DELETE,
-            EVENTS.ADD_TASK
+            EVENTS.ADD_TASK,
+            EVENTS.SHOW_DESCRIPTION
         ],
         inheritAttrs: false,
         props: {
@@ -188,6 +189,13 @@
                         return null;
                 }
             },
+            classes() {
+                return {
+                    [`border-${this.borderColor}`]: this.borderColor,
+                    "disabled": this.data.node.task?.disabled,
+                    [this.$attrs.class]: true
+                }
+            },
             linkData() {
                 if(this.data.node.task) {
                     return {link: VueFlowUtils.linkDatas(this.data.node.task, this.execution)}
@@ -206,7 +214,7 @@
         background-color: var(--bs-white);
 
         html.dark & {
-            background-color: var(--card-bg);
+            background-color: var(--bs-gray-300);
         }
 
         width: 184px;
@@ -217,6 +225,23 @@
         z-index: 150000;
         align-items: center;
         box-shadow: 0 12px 12px 0 rgba(130, 103, 158, 0.10);
+
+        &.execution-no-taskrun {
+            opacity: 0.6;
+        }
+
+        &.disabled {
+            .task-title {
+                color: var(--bs-gray-500);
+                text-decoration: line-through;
+
+                html.dark & {
+                    color: var(--bs-gray-600);
+                }
+            }
+
+            opacity: 0.4;
+        }
     }
 
     .node-content {
@@ -224,12 +249,15 @@
         flex-direction: column;
         justify-content: center;
         margin-left: 0.7rem;
+
+        > .node-title {
+            width: 125px;
+        }
     }
 
     .description-button {
         color: var(--bs-gray-700);
         cursor: pointer;
-        width: 25px;
     }
 
     .material-design-icon.icon-rounded {
@@ -254,16 +282,18 @@
     .task-title {
         font-size: 0.75rem;
         font-weight: 700;
-        line-height: 1.5rem;
         color: var(--bs-black);
 
         html.dark & {
             color: var(--bs-white);
         }
-
-        width: 6rem;
     }
 
+    .top-button-div {
+        width: 100%;
+        justify-content: end;
+        transform: translate(-5%, -50%) !important;
+    }
 
     .status-div {
         width: 8px;

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/TaskNode.vue

@@ -4,6 +4,7 @@
         :id="id"
         :data="data"
         :state="state"
+        :class="classes"
         @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
         @expand="forwardEvent(EVENTS.EXPAND, id)"
         @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
@@ -152,6 +153,11 @@
                     .map((j) => j[1])
                 return result[0];
             },
+            classes() {
+                return {
+                    "execution-no-taskrun": this.execution && this.taskRuns && this.taskRuns.length === 0,
+                }
+            },
         },
         emits: [
             EVENTS.EXPAND,

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/_variables.scss

@@ -16,18 +16,17 @@ $green: #03DABA !default;
 $teal: #03D87F !default;
 $cyan: #60C5FE !default;
 
-
 // gray
 $white: #FFF !default;
 $gray-100: #F5F5FF !default;
-$gray-200: #F0F0FF !default;
+$gray-200: #f1f5fa !default;
 $gray-300: #E5E4F7 !default;
-$gray-400: #D1CFE9 !default;
-$gray-500: #B8B6D9 !default;
-$gray-600: #A6A4CA !default;
-$gray-700: #9A8EB4 !default;
-$gray-800: #7E719F !default;
-$gray-900: #564A75 !default;
+$gray-400: #b6c2e4 !default;
+$gray-500: #8997bd !default;
+$gray-600: #7081b9 !default;
+$gray-700: #303e67 !default;
+$gray-800: #2c3652 !default;
+$gray-900: #1d2c48 !default;
 $black: #26282D !default;
 
 $light: $gray-200 !default;
@@ -35,21 +34,10 @@ $dark: $gray-900 !default;
 
 // fonts
 $font-size-base: 1rem !default;
-$font-size-xs: $font-size-base * .75;
-$font-size-sm: $font-size-base * .875;
-$font-size-lg: $font-size-base * 1.25;
-$font-size-xl: $font-size-base * 1.375;
 $font-family-sans-serif: "Public Sans", sans-serif;
 $font-family-monospace: "Source Code Pro", monospace;
 $font-size-xs: $font-size-base * 0.75 !default;
 
-$h1-font-size: $font-size-base * 3.375;
-$h2-font-size: $font-size-base * 2.5;
-$h3-font-size: $font-size-base * 2;
-$h4-font-size: $font-size-base * 1.375;
-$h5-font-size: $font-size-base * 1.25;
-$h6-font-size: $font-size-base * 1.125;
-
 // border radius
 $border-radius: 0.25rem !default;
 $border-radius-lg: 0.5rem !default;
@@ -81,45 +69,6 @@ $box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
 $box-shadow: 0 .5rem 1rem rgba($black, .15);
 $box-shadow-lg: 0 1rem 3rem rgba($black, .175);
 
-// button
-$btn-font-size-lg: 18px;
-
-// grid
-$grid-gutter-width: 1.75rem;
-
-// nav
-$nav-pills-border-radius: 50rem;
-
-// accordion
-$accordion-icon-color: $white;
-$accordion-icon-active-color: $white;
-
-// purples
-$purple-1: #382369;
-$purple-2: #FBC7F4;
-$purple-3: #9580EE;
-$purple-4: linear-gradient(160.34deg, rgba(130, 0, 255, 0.12) 5.3%, rgba(130, 0, 255, 0) 75.43%), #201838;
-$purple-5: #362762;
-$purple-6: #6113BC;
-$purple-7: #1A1223;
-$purple-8: #EEEDFF;
-$purple-9: 0px 12.972px 39.7269px rgba(90, 0, 176, 0.1);
-$purple-10: #150E1C;
-$purple-11: #332C3B;
-$purple-12: #432A71;
-$purple-16: #281A35;
-$purple-19: conic-gradient(from 90deg at 50% 50%, #BE79FF 0deg, #7136F6 360deg);
-$purple-20: #291E39;
-$purple-21: #A42DCD;
-$purple-22: #FCF7FE;
-$purple-23: #EDE8F3;
-$purple-24: #15023F;
-$purple-26: #DCCDEB;
-$purple-27: #8200FF;
-$purple-28: #2D313E;
-$purple-29: #F1F5FF;
-$purple-30: rgba(255, 255, 255, 0.1);
-
 // boostrap flags
 $enable-reduced-motion: false;
 

package/src/scss/app.scss

@@ -1,51 +1,44 @@
 @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;
-}
-
-
-.top-button-div {
-  width: 100%;
-  justify-content: end;
-  transform: translate(-5%, -50%) !important;
+    stroke: $gray-700;
 }
 
 .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);
+    }
 }