@kestra-io/ui-libs 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.9",
+  "version": "v0.0.11",
   "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/nodes/BasicNode.vue

@@ -1,23 +1,23 @@
 <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"
@@ -28,14 +28,14 @@
                 >
                     <InformationOutline
                         @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>
@@ -189,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)}
@@ -207,7 +214,7 @@
         background-color: var(--bs-white);
 
         html.dark & {
-            background-color: var(--card-bg);
+            background-color: var(--bs-gray-300);
         }
 
         width: 184px;
@@ -218,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 {
@@ -225,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 {
@@ -255,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/DependenciesNode.vue

@@ -159,4 +159,11 @@
         }
     }
 
+    .top-button-div {
+        width: 100%;
+        justify-content: end;
+        transform: translate(-5%, -50%) !important;
+    }
+
+
 </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/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

@@ -23,14 +23,7 @@ marker[id*='id=marker-danger&type=arrowclosed'] polyline {
 }
 
 .vue-flow__edge-path {
-    stroke: $gray-700;
-}
-
-
-.top-button-div {
-    width: 100%;
-    justify-content: end;
-    transform: translate(-5%, -50%) !important;
+    stroke: #9A8EB4;
 }
 
 .rounded-button {