@kestra-io/ui-libs 0.0.12 → 0.0.14

package/package.json

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

package/src/assets/icons/SplitCellsHorizontal.vue

@@ -1,7 +1,7 @@
 <template>
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clip-path="url(#clip0_796_3996)">
-            <path d="M13.367 1.979C13.7368 1.979 14.0366 2.27881 14.0366 2.64863V13.3626C14.0366 13.7324 13.7368 14.0322 13.367 14.0322H2.65302C2.2832 14.0322 1.9834 13.7324 1.9834 13.3626V2.64863C1.9834 2.27881 2.2832 1.979 2.65302 1.979H13.367ZM7.34039 3.31825H3.32265V12.693H7.34039V10.0145H8.67963V12.693H12.6974V3.31825H8.67963V5.99675H7.34039V3.31825ZM10.0189 5.99675L12.0278 8.00562L10.0189 10.0145V8.67524H6.00114V10.0145L3.99227 8.00562L6.00114 5.99675V7.33599H10.0189V5.99675Z" fill="#CAC5DA" />
+            <path d="M13.367 1.979C13.7368 1.979 14.0366 2.27881 14.0366 2.64863V13.3626C14.0366 13.7324 13.7368 14.0322 13.367 14.0322H2.65302C2.2832 14.0322 1.9834 13.7324 1.9834 13.3626V2.64863C1.9834 2.27881 2.2832 1.979 2.65302 1.979H13.367ZM7.34039 3.31825H3.32265V12.693H7.34039V10.0145H8.67963V12.693H12.6974V3.31825H8.67963V5.99675H7.34039V3.31825ZM10.0189 5.99675L12.0278 8.00562L10.0189 10.0145V8.67524H6.00114V10.0145L3.99227 8.00562L6.00114 5.99675V7.33599H10.0189V5.99675Z" fill="currentColor" />
         </g>
         <defs>
             <clipPath id="clip0_796_3996">
@@ -21,4 +21,4 @@
     svg {
         transform: scale(1.5);
     }
-</style>
+</style>

package/src/assets/icons/SplitCellsVertical.vue

@@ -1,7 +1,7 @@
 <template>
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clip-path="url(#clip0_1111_7266)">
-            <path d="M1.97852 2.63349C1.97852 2.26366 2.27832 1.96387 2.64814 1.96387L13.3621 1.96387C13.7319 1.96387 14.0317 2.26366 14.0317 2.63349L14.0317 13.3475C14.0317 13.7173 13.7319 14.0171 13.3621 14.0171L2.64814 14.0171C2.27832 14.0171 1.97852 13.7173 1.97852 13.3475L1.97852 2.63349ZM3.31776 8.6601L3.31776 12.6778L12.6925 12.6778L12.6925 8.6601L10.014 8.6601L10.014 7.32085L12.6925 7.32085L12.6925 3.30311L3.31776 3.30311L3.31776 7.32086L5.99626 7.32085L5.99626 8.6601L3.31776 8.6601ZM5.99626 5.98161L8.00513 3.97274L10.014 5.98161L8.67475 5.98161L8.67475 9.99935L10.014 9.99935L8.00513 12.0082L5.99626 9.99935L7.3355 9.99935L7.3355 5.98161L5.99626 5.98161Z" fill="#CAC5DA" />
+            <path d="M1.97852 2.63349C1.97852 2.26366 2.27832 1.96387 2.64814 1.96387L13.3621 1.96387C13.7319 1.96387 14.0317 2.26366 14.0317 2.63349L14.0317 13.3475C14.0317 13.7173 13.7319 14.0171 13.3621 14.0171L2.64814 14.0171C2.27832 14.0171 1.97852 13.7173 1.97852 13.3475L1.97852 2.63349ZM3.31776 8.6601L3.31776 12.6778L12.6925 12.6778L12.6925 8.6601L10.014 8.6601L10.014 7.32085L12.6925 7.32085L12.6925 3.30311L3.31776 3.30311L3.31776 7.32086L5.99626 7.32085L5.99626 8.6601L3.31776 8.6601ZM5.99626 5.98161L8.00513 3.97274L10.014 5.98161L8.67475 5.98161L8.67475 9.99935L10.014 9.99935L8.00513 12.0082L5.99626 9.99935L7.3355 9.99935L7.3355 5.98161L5.99626 5.98161Z" fill="currentColor" />
         </g>
         <defs>
             <clipPath id="clip0_1111_7266">

package/src/components/misc/Duration.vue

@@ -1,25 +1,27 @@
 <template>
-    <span>
-        <el-tooltip v-if="histories" popper-class="duration-tt" :persistent="false" transition="" :hide-after="0">
-            <template #content>
-                <span v-for="(history, index) in histories" :key="'tt-' + index">
-                    <span class="square" :class="squareClass(history.state)" />
-                    <strong>{{ history.state }}:</strong>{{ $filters.date(history.date, 'iso') }} <br>
-                </span>
-            </template>
+    <tooltip>
+        <template #content>
+            <span v-for="(history, index) in filteredHistories" :key="'tt-' + index" class="duration-tt">
+                <span class="square" :class="squareClass(history.state)" />
+                <strong>{{ history.state }}: </strong>{{ $filters.date(history.date, 'iso') }} <br>
+            </span>
+        </template>
 
-            <span>{{ duration }}</span>
-        </el-tooltip>
-    </span>
+        <template #default>
+            <span v-html="duration" />
+        </template>
+    </tooltip>
 </template>
 
 <script>
     import State from "../../utils/state";
     import Utils from "../../utils/Utils";
+    import Tooltip from "../misc/Tooltip.vue";
 
     const ts = date => new Date(date).getTime();
 
     export default {
+        components: {Tooltip},
         props: {
             histories: {
                 type: Array,
@@ -46,9 +48,11 @@
             start() {
                 return this.histories && this.histories.length && ts(this.histories[0].date);
             },
-
             lastStep() {
                 return this.histories[this.histories.length - 1]
+            },
+            filteredHistories() {
+                return this.histories.filter(h => h.date && h.date.isValid() && h.state)
             }
         },
         methods: {
@@ -78,7 +82,7 @@
                 return ts(this.lastStep.date)
             },
             computeDuration() {
-                this.duration = Utils.humanDuration(this.delta() / 1000)
+                this.duration = this.filteredHistories.length === 0 ? "&nbsp;" : Utils.humanDuration(this.delta() / 1000)
             },
             squareClass(state) {
                 return [
@@ -93,18 +97,16 @@
 </script>
 
 <style lang="scss">
-.duration-tt {
-    .tooltip-inner {
+    .duration-tt {
         text-align: left;
         white-space: nowrap;
         max-width: none;
-    }
 
-    .square {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        margin-right: 5px;
+        .square {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            margin-right: 5px;
+        }
     }
-}
 </style>

package/src/components/misc/ExecutionInformations.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="btn-group content rounded-1 content-children">
+    <div class="btn-group content rounded-1 content-children text-truncate">
         <span v-if="taskRuns.length > 0" class="taskRunCount">{{ taskRuns.length }} task runs</span>
-        <span v-if="taskRuns.length > 0">|</span>
+        <span v-if="taskRuns.length > 0"> | </span>
         <span><duration :histories="histories" /></span>
     </div>
 </template>
@@ -95,28 +95,10 @@
 </script>
 <style scoped>
     .content {
-        display: flex;
         color: var(--bs-gray-700);
-
-        *:not(:first-child)::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 50%;
-            height: 50%;
-            transform: translateY(-50%);
-            z-index: 500;
-        }
     }
 
     .content-children {
-        flex-grow: 1;
-        display: flex;
-        height: 1.25rem;
-        gap: 0.5rem;
-        align-self: stretch;
-        pointer-events: none;
-        cursor: default;
         font-size: 0.70rem;
     }
 </style>

package/src/components/misc/TaskIcon.vue

@@ -1,21 +1,22 @@
 <template>
     <div
-        :class="[color ? `bg-${color}`: 'bg-white']"
-        class="div-icon rounded d-flex justify-content-center"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        :title="cls"
+        :class="classes"
+        class="wrapper"
     >
-        <img :src="backgroundImage" alt="task icon">
+        <Tooltip :title="cls">
+            <div class="icon" :style="styles" />
+        </Tooltip>
     </div>
 </template>
 <script>
     import {mapState} from "vuex";
     import {Buffer} from "buffer";
-    import {Tooltip} from "bootstrap";
+    import Tooltip from "../misc/Tooltip.vue";
+    import {cssVariable} from "../../utils/global.js";
 
     export default {
         name: "TaskIcon",
+        components: {Tooltip},
         props: {
             customIcon: {
                 type: Object,
@@ -25,41 +26,52 @@
                 type: String,
                 default: undefined
             },
-            color: {
+            theme: {
                 type: String,
-                default: undefined
-            }
-        },
-        mounted(){
-            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
-            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
-                return new Tooltip(tooltipTriggerEl, {
-                    trigger : "hover"
-                })
-            })
-        },
-        beforeUnmount() {
-            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
-                const tooltip = Tooltip.getInstance(el);
-                if (tooltip) {
-                    tooltip.dispose();
+                default: undefined,
+                validator(value) {
+                    return ["dark", "light"].includes(value)
                 }
-            });
+            }
         },
         computed: {
             ...mapState("plugin", ["icons"]),
             backgroundImage() {
                 return `data:image/svg+xml;base64,${this.imageBase64}`
             },
+            classes() {
+                return {
+                    "flowable": this.icon ? this.icon.flowable : false,
+                }
+            },
+            styles() {
+                return {
+                    backgroundImage: `url(data:image/svg+xml;base64,${this.imageBase64})`
+                }
+            },
             imageBase64() {
-                const icon = this.icon ? this.icon.icon : undefined;
-                return icon ? icon : Buffer.from("<svg xmlns=\"http://www.w3.org/2000/svg\" " +
-                    "xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" " +
-                    "focusable=\"false\" width=\"0.75em\" height=\"1em\" style=\"-ms-transform: " +
-                    "rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\" " +
-                    "preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 384 512\">" +
-                    "<path d=\"M288 32H0v448h384V128l-96-96zm64 416H32V64h224l96 96v288z\" fill=\"#0D1523FF\"/>" +
-                    "</svg>", "utf8").toString("base64");
+                let icon = this.icon && this.icon.icon ? Buffer.from(this.icon.icon, "base64").toString("utf8") : undefined;
+
+                if (!icon) {
+                    icon = "<svg xmlns=\"http://www.w3.org/2000/svg\" " +
+                        "xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" " +
+                        "focusable=\"false\" width=\"0.75em\" height=\"1em\" style=\"-ms-transform: " +
+                        "rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\" " +
+                        "preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 384 512\">" +
+                        "<path d=\"M288 32H0v448h384V128l-96-96zm64 416H32V64h224l96 96v288z\" fill=\"currentColor\"/>" +
+                        "</svg>";
+                }
+
+                const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
+                let color = darkTheme ? cssVariable("--bs-gray-900") : cssVariable("--bs-black");
+
+                if (this.theme) {
+                    color = this.theme === "dark" ? cssVariable("--bs-gray-900") : cssVariable("--bs-black");
+                }
+
+                icon = icon.replaceAll("currentColor", color);
+
+                return Buffer.from(icon, "utf8").toString("base64");
             },
             icon() {
                 return this.cls ? (this.icons || {})[this.cls] : this.customIcon;
@@ -67,12 +79,30 @@
         }
     }
 </script>
-<style scoped>
-    .div-icon {
-        padding: 0.3rem;
-        margin: 0.2rem;
-        width: 25px;
-        height: 25px;
-        border: 0.4px solid var(--bs-border-color);
+
+<style lang="scss" scoped>
+    .wrapper {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        :deep(span) {
+            position: absolute;
+            padding: 1px;
+            left: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        :deep(.icon) {
+            width: 100%;
+            height: 100%;
+            display: block;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center center;
+        }
     }
 </style>

package/src/components/misc/Tooltip.vue

@@ -0,0 +1,51 @@
+<template>
+    <span ref="tooltip">
+        <slot name="default" />
+    </span>
+    <span class="d-none" ref="tooltipContent">
+        <slot name="content">
+            {{ title }}
+        </slot>
+    </span>
+</template>
+<script>
+    import {Tooltip} from "bootstrap";
+
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: undefined
+            },
+            placement: {
+                type: String,
+                default: "top"
+            },
+        },
+        mounted() {
+            new Tooltip(this.$refs.tooltip, {
+                trigger: "hover",
+                html: true,
+                placement: this.placement,
+                title: this.$refs.tooltipContent.innerHTML,
+                customClass: "tooltip-custom"
+            })
+        },
+        beforeUnmount() {
+            if (this.$refs.tooltip) {
+                const tooltip = Tooltip.getInstance(this.$refs.tooltip);
+                if (tooltip) {
+                    tooltip.dispose();
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    .tooltip-custom {
+        .tooltip-inner {
+            max-width: none;
+        }
+    }
+</style>

package/src/components/nodes/BasicNode.vue

@@ -6,57 +6,53 @@
         @mouseleave="mouseleave"
     >
         <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
-        <div>
-            <TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg" />
+        <div class="icon rounded">
+            <TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg" class="rounded bg-white" theme="light" />
         </div>
         <div class="node-content">
             <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>
+                    <tooltip :title="id">
+                        {{ id }}
+                    </tooltip>
                 </div>
                 <span
                     class="d-flex"
                     v-if="description"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    :title="$t('show description')"
                 >
-                    <InformationOutline
-                        @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
-                        class="description-button ms-2"
-                    />
+                    <tooltip :title="$t('show description')">
+                        <InformationOutline
+                            @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
+                            class="description-button ms-2"
+                        />
+                    </tooltip>
                 </span>
             </div>
             <slot name="content" />
         </div>
-        <div class="position-absolute top-0 text-white d-flex top-button-div">
+        <div class="text-white top-button-div">
             <slot name="badge-button-before" />
             <span
                 v-if="link"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.OPEN_LINK, linkData)"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('open')"
             >
-                <OpenInNew class="button-icon" alt="Open in new tab" />
+                <tooltip :title="$t('open')">
+                    <OpenInNew class="button-icon" alt="Open in new tab" />
+                </tooltip>
             </span>
             <span
                 v-if="expandable"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND)"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('expand')"
             >
-                <ArrowExpand class="button-icon" alt="Expand task" />
+                <tooltip :title="$t('expand')">
+                    <ArrowExpand class="button-icon" alt="Expand task" />
+                </tooltip>
             </span>
             <slot name="badge-button-after" />
         </div>
@@ -69,7 +65,7 @@
     import {EVENTS} from "../../utils/constants.js";
     import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
-    import {Tooltip} from "bootstrap";
+    import Tooltip from "../misc/Tooltip.vue";
     import {VueFlowUtils} from "../../index.js";
     import {mapState} from "vuex";
 
@@ -78,24 +74,10 @@
             ArrowExpand,
             TaskIcon,
             InformationOutline,
-            OpenInNew
-        },
-        mounted() {
-            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
-            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
-                return new Tooltip(tooltipTriggerEl, {
-                    trigger: "hover"
-                })
-            })
-        },
-        beforeUnmount() {
-            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
-                const tooltip = Tooltip.getInstance(el);
-                if (tooltip) {
-                    tooltip.dispose();
-                }
-            });
+            OpenInNew,
+            Tooltip
         },
+
         emits: [
             EVENTS.EXPAND,
             EVENTS.OPEN_LINK,
@@ -226,8 +208,12 @@
         align-items: center;
         box-shadow: 0 12px 12px 0 rgba(130, 103, 158, 0.10);
 
-        &.execution-no-taskrun {
-            opacity: 0.6;
+        &.execution-no-taskrun, &.disabled {
+            background-color: var(--bs-gray-200);
+
+            html.dark & {
+                background-color: var(--bs-gray-500);
+            }
         }
 
         &.disabled {
@@ -239,8 +225,13 @@
                     color: var(--bs-gray-600);
                 }
             }
+        }
 
-            opacity: 0.4;
+        .icon {
+            margin: 0.2rem;
+            width: 25px;
+            height: 25px;
+            border: 0.4px solid var(--bs-border-color);
         }
     }
 
@@ -283,18 +274,13 @@
         font-size: 0.75rem;
         font-weight: 700;
         color: var(--bs-black);
+        flex-grow: 1;
 
         html.dark & {
             color: var(--bs-white);
         }
     }
 
-    .top-button-div {
-        width: 100%;
-        justify-content: end;
-        transform: translate(-5%, -50%) !important;
-    }
-
     .status-div {
         width: 8px;
         height: 100%;

package/src/components/nodes/ClusterNode.vue

@@ -1,16 +1,16 @@
 <template>
     <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">
+    <div class="top-button-div text-white d-flex">
         <span
             v-if="data.collapsable"
             class="rounded-button"
             :class="[`bg-${data.color}`]"
             @click="collapse()"
-            data-bs-toggle="tooltip"
-            data-bs-trigger="hover"
-            :title="$t('collapse')"
+
         >
-            <ArrowCollapse class="button-icon" alt="Collapse task"/>
+            <tooltip :title="$t('collapse')">
+                <ArrowCollapse class="button-icon" alt="Collapse task" />
+            </tooltip>
         </span>
     </div>
 </template>
@@ -27,31 +27,16 @@
 
 </script>
 <script>
-    import {Tooltip} from "bootstrap";
+    import Tooltip from "../misc/Tooltip.vue";
 
     export default {
         inheritAttrs: false,
+        components: {Tooltip},
         data() {
             return {
                 tooltips: [],
             }
         },
-        mounted() {
-            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
-            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
-                return new Tooltip(tooltipTriggerEl, {
-                    placement: "top"
-                })
-            })
-        },
-        beforeUnmount() {
-            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
-                const tooltip = Tooltip.getInstance(el);
-                if (tooltip) {
-                    tooltip.dispose();
-                }
-            });
-        }
     }
 </script>
 <style scoped lang="scss">
@@ -82,4 +67,11 @@
         padding: 0.25rem 0.5rem;
     }
 
+    .top-button-div {
+        transform: translate(-50%, -50%) !important;
+        left: 100% !important;
+        justify-content: center;
+        padding-right: 3px;
+    }
+
 </style>

package/src/components/nodes/CollapsedClusterNode.vue

@@ -5,7 +5,7 @@
             <component v-if="data.iconComponent" :is="data.iconComponent" :class="`text-${data.color} me-2`" />
             {{ id }}
         </span>
-        <div class="position-absolute top-0 text-white d-flex top-button-div">
+        <div class="text-white top-button-div">
             <slot name="badge-button-before"/>
             <span
                 v-if="expandable"
@@ -105,10 +105,4 @@
         font-size: 0.75rem;
     }
 
-    .top-button-div {
-        width: 100%;
-        justify-content: end;
-        transform: translate(-5%, -50%) !important;
-    }
-
 </style>

package/src/components/nodes/DependenciesNode.vue

@@ -4,48 +4,40 @@
         :class="[`border-${data.color}`]"
         class="dependency-node-wrapper rounded-3 border"
     >
-        <TaskIcon color="pink" :custom-icon="{icon: icon}" />
+        <TaskIcon :custom-icon="{icon: icon}" class="bg-pink rounded" theme="light" />
         <div class="dependency-text d-flex flex-column">
-            <div 
-                class="dependency-flow-text text-truncate"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="data.flowId"
-            >
-                {{ data.flowId }}
+            <div class="dependency-flow-text text-truncate">
+                <tooltip :title="data.flowId">
+                    {{ data.flowId }}
+                </tooltip>
             </div>
-            <div 
-                class="dependency-namespace-text text-truncate"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="data.namespace"
-            >
-                {{ data.namespace }}
+            <div class="dependency-namespace-text text-truncate">
+                <tooltip :title="data.namespace">
+                    {{ data.namespace }}
+                </tooltip>
             </div>
         </div>
 
-        <div class="position-absolute top-0 text-white d-flex top-button-div">
+        <div class="text-white top-button-div">
             <slot name="badge-button-before" />
             <span
                 v-if="data.link"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.OPEN_LINK, data)"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('open')"
             >
-                <OpenInNew class="button-icon" alt="Open in new tab" />
+                <tooltip :title="$t('open')">
+                    <OpenInNew class="button-icon" alt="Open in new tab" />
+                </tooltip>
             </span>
             <span
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND_DEPENDENCIES, data)"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('expand')"
             >
-                <ArrowExpandAll class="button-icon" alt="Expand task" />
+                <tooltip :title="$t('expand')">
+                    <ArrowExpandAll class="button-icon" alt="Expand task" />
+                </tooltip>
             </span>
             <slot name="badge-button-after" />
         </div>
@@ -60,11 +52,11 @@
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
     import ArrowExpandAll from "vue-material-design-icons/ArrowExpandAll.vue";
     import {EVENTS} from "../../utils/constants.js";
-    import {Tooltip} from "bootstrap";
+    import Tooltip from "../misc/Tooltip.vue";
 
     export default {
         name: "Dependencies",
-        components: {ArrowExpandAll, OpenInNew, TaskIcon, Handle},
+        components: {ArrowExpandAll, OpenInNew, TaskIcon, Handle, Tooltip},
         inheritAttrs: false,
         emits: [
             EVENTS.EXPAND_DEPENDENCIES,
@@ -72,22 +64,6 @@
             EVENTS.MOUSE_OVER,
             EVENTS.MOUSE_LEAVE,
         ],
-        mounted() {
-            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
-            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
-                return new Tooltip(tooltipTriggerEl, {
-                    trigger: "hover"
-                })
-            })
-        },
-        beforeUnmount() {
-            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
-                const tooltip = Tooltip.getInstance(el);
-                if (tooltip) {
-                    tooltip.dispose();
-                }
-            });
-        },
         computed: {
             EVENTS() {
                 return EVENTS
@@ -159,11 +135,4 @@
         }
     }
 
-    .top-button-div {
-        width: 100%;
-        justify-content: end;
-        transform: translate(-5%, -50%) !important;
-    }
-
-
 </style>

package/src/components/nodes/EdgeNode.vue

@@ -3,7 +3,7 @@
     import {EdgeLabelRenderer, getSmoothStepPath} from "@vue-flow/core";
     import AddTaskButton from "../buttons/AddTaskButton.vue";
     import {EVENTS} from "../../utils/constants.js";
-    import {Tooltip} from "bootstrap";
+    import Tooltip from "../misc/Tooltip.vue";
 
     export default {
         data() {
@@ -24,12 +24,19 @@
         },
         components: {
             AddTaskButton,
-            EdgeLabelRenderer
+            EdgeLabelRenderer,
+            Tooltip
         },
         computed: {
             EVENTS() {
                 return EVENTS
             },
+            classes() {
+                return {
+                    "vue-flow__edge-path": true,
+                    ["stroke-" + this.data.color]: this.data.color,
+                }
+            },
         },
         setup(props) {
             const path = computed(() => getSmoothStepPath(props));
@@ -38,22 +45,6 @@
                 path,
             };
         },
-        mounted(){
-            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
-            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
-                return new Tooltip(tooltipTriggerEl, {
-                    trigger : "hover"
-                })
-            })
-        },
-        beforeUnmount() {
-            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
-                const tooltip = Tooltip.getInstance(el);
-                if (tooltip) {
-                    tooltip.dispose();
-                }
-            });
-        },
         inheritAttrs: false,
     };
 </script>
@@ -79,14 +70,14 @@
                 transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
             }"
         >
-            <AddTaskButton
-                v-if="!data.disabled && data.haveAdd != undefined"
-                :add-task="true"
-                @click="$emit(EVENTS.ADD_TASK, data.haveAdd)"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('add task')"
-            />
+            <tooltip :title="$t('add task')">
+                <AddTaskButton
+                    v-if="!data.disabled && data.haveAdd != undefined"
+                    :add-task="true"
+                    @click="$emit(EVENTS.ADD_TASK, data.haveAdd)"
+                />
+            </tooltip>
+
         </div>
     </EdgeLabelRenderer>
-</template>
+</template>

package/src/components/nodes/TaskNode.vue

@@ -1,5 +1,5 @@
 <template>
-    <Handle type="source" :position="sourcePosition"/>
+    <Handle type="source" :position="sourcePosition" />
     <basic-node
         :id="id"
         :data="data"
@@ -12,7 +12,7 @@
         @mouseleave="forwardEvent(EVENTS.MOUSE_LEAVE)"
     >
         <template #content>
-            <execution-informations v-if="execution" :execution="execution" :task="data.node.task" :color="color"/>
+            <execution-informations v-if="execution" :execution="execution" :task="data.node.task" :color="color" />
         </template>
         <template #badge-button-before>
             <span
@@ -20,48 +20,44 @@
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.SHOW_LOGS, {id, taskRuns})"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('show task logs')"
             >
-                <TextBoxSearch class="button-icon" alt="Show logs"/>
+                <tooltip :title="$t('show task logs')">
+                    <TextBoxSearch class="button-icon" alt="Show logs" />
+                </tooltip>
             </span>
             <span
                 v-if="!execution && !data.isReadOnly && data.isFlowable"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.ADD_ERROR, {task: data.node.task})"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('add error handler')"
             >
-                <AlertOutline class="button-icon" alt="Edit task"/>
+                <tooltip :title="$t('add error handler')">
+                    <AlertOutline class="button-icon" alt="Edit task" />
+                </tooltip>
             </span>
             <span
                 v-if="!execution && !data.isReadOnly"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.EDIT, {task: data.node.task, section: SECTIONS.TASKS})"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('edit')"
             >
-                <Pencil class="button-icon" alt="Edit task"/>
+                <tooltip :title="$t('edit')">
+                    <Pencil class="button-icon" alt="Edit task" />
+                </tooltip>
             </span>
             <span
                 v-if="!execution && !data.isReadOnly"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TASKS})"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('delete')"
             >
-                <Delete class="button-icon" alt="Delete task"/>
+                <tooltip :title="$t('delete')">
+                    <Delete class="button-icon" alt="Delete task" />
+                </tooltip>
             </span>
         </template>
     </basic-node>
-    <Handle type="target" :position="targetPosition"/>
+    <Handle type="target" :position="targetPosition" />
 </template>
 <script setup>
     import BasicNode from "./BasicNode.vue";
@@ -76,7 +72,7 @@
     import TextBoxSearch from "vue-material-design-icons/TextBoxSearch.vue";
     import AlertOutline from "vue-material-design-icons/AlertOutline.vue"
     import {mapState} from "vuex";
-    import {Tooltip} from "bootstrap"
+    import Tooltip from "../misc/Tooltip.vue"
 
     export default {
         name: "Task",
@@ -87,22 +83,9 @@
             Handle,
             TextBoxSearch,
             AlertOutline,
+            Tooltip
         },
         inheritAttrs: false,
-        mounted(){
-            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
-            tooltipTriggerList.map(function (tooltipTriggerEl) {
-                return new Tooltip(tooltipTriggerEl)
-            })
-        },
-        beforeUnmount() {
-            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
-                const tooltip = Tooltip.getInstance(el);
-                if (tooltip) {
-                    tooltip.dispose();
-                }
-            });
-        },
         computed: {
             ...mapState("execution", ["execution"]),
             SECTIONS() {

package/src/components/nodes/TriggerNode.vue

@@ -13,22 +13,20 @@
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.EDIT, {task: data.node.trigger, section: SECTIONS.TRIGGERS})"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('edit')"
             >
-                <Pencil class="button-icon" alt="Edit task" />
+                <tooltip :title="$t('edit')">
+                    <Pencil class="button-icon" alt="Edit task" />
+                </tooltip>
             </span>
             <span
                 v-if="!execution && !data.isReadOnly"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TRIGGERS})"
-                data-bs-toggle="tooltip"
-                data-bs-placement="top"
-                :title="$t('delete')"
             >
-                <Delete class="button-icon" alt="Delete task" />
+                <tooltip :title="$t('delete')">
+                    <Delete class="button-icon" alt="Delete task" />
+                </tooltip>
             </span>
         </template>
     </basic-node>
@@ -43,27 +41,11 @@
     import {EVENTS, SECTIONS} from "../../utils/constants.js";
     import Pencil from "vue-material-design-icons/Pencil.vue";
     import Delete from "vue-material-design-icons/Delete.vue";
-    import {Tooltip} from "bootstrap";
+    import Tooltip from "../misc/Tooltip.vue";
 
     export default {
         name: "Task",
         inheritAttrs: false,
-        mounted(){
-            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
-            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
-                return new Tooltip(tooltipTriggerEl, {
-                    trigger : "hover"
-                })
-            })
-        },
-        beforeUnmount() {
-            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
-                const tooltip = Tooltip.getInstance(el);
-                if (tooltip) {
-                    tooltip.dispose();
-                }
-            });
-        },
         computed: {
             ...mapState("execution", ["execution"]),
             SECTIONS() {
@@ -82,8 +64,7 @@
             EVENTS.SHOW_DESCRIPTION
         ],
         components: {
-            Delete, Pencil,
-            Handle,
+            Delete, Pencil, Handle, Tooltip
         },
         props: {
             data: {

package/src/components/topology/Topology.vue

@@ -1,8 +1,8 @@
 <script setup>
     import {
         ref,
-        defineProps,
-        defineEmits, watch, nextTick,
+        watch,
+        nextTick,
         onMounted
     } from "vue";
     import {
@@ -279,6 +279,9 @@
     const flowables = () => {
         return props.flowGraph && props.flowGraph.flowables ? props.flowGraph.flowables : [];
     }
+
+    const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
+
 </script>
 <template>
     <VueFlow
@@ -290,7 +293,8 @@
         :elevate-nodes-on-select="false"
         :elevate-edges-on-select="false"
     >
-        <Background />
+        <Background :pattern-color="darkTheme ? cssVariable('--bs-grey-500') : cssVariable('--bs-grey-300')" />
+
         <template #node-cluster="clusterProps">
             <ClusterNode
                 v-bind="clusterProps"

package/src/scss/app.scss

@@ -4,27 +4,6 @@
     bottom: 0;
 }
 
-.vue-flow__node-cluster {
-    pointer-events: none !important;
-}
-
-marker[id*='id=marker-custom&type=arrowclosed'] polyline {
-    stroke: $gray-700;
-    fill: $gray-700;
-}
-
-marker[id*='id=marker-danger&type=arrowclosed'] polyline {
-    stroke: $danger;
-    fill: $danger;
-}
-
-.vue-flow__handle {
-    opacity: 0 !important;
-}
-
-.vue-flow__edge-path {
-    stroke: #9A8EB4;
-}
 
 .rounded-button {
     border-radius: 1rem;
@@ -41,4 +20,36 @@ marker[id*='id=marker-danger&type=arrowclosed'] polyline {
     font-size: 0.66rem;
 }
 
+.vue-flow__container {
+    .top-button-div {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        justify-content: end;
+        display: flex;
+        right: -16px;
+        transform: translate(-5%, -50%) !important;
+    }
+
+    .vue-flow__node-cluster {
+        pointer-events: none !important;
+    }
+
+    marker[id*='id=marker-custom&type=arrowclosed'] polyline {
+        stroke: #9A8EB4;
+        fill: #9A8EB4;
+    }
 
+    marker[id*='id=marker-danger&type=arrowclosed'] polyline {
+        stroke: #9A8EB4;
+        fill: #9A8EB4;
+    }
+
+    .vue-flow__handle {
+        opacity: 0 !important;
+    }
+
+    .vue-flow__edge-path {
+        stroke: #9A8EB4;
+    }
+}