@kestra-io/ui-libs 0.0.13 → 0.0.15

package/package.json

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

package/src/assets/icons/SplitCellsHorizontal.vue

@@ -5,7 +5,7 @@
         </g>
         <defs>
             <clipPath id="clip0_796_3996">
-                <rect width="16" height="16" fill="white" />
+                <rect width="16" height="16" fill="currentColor" />
             </clipPath>
         </defs>
     </svg>

package/src/assets/icons/SplitCellsVertical.vue

@@ -5,7 +5,7 @@
         </g>
         <defs>
             <clipPath id="clip0_1111_7266">
-                <rect width="16" height="16" fill="white" transform="translate(0 16) rotate(-90)" />
+                <rect width="16" height="16" fill="currentColor" transform="translate(0 16) rotate(-90)" />
             </clipPath>
         </defs>
     </svg>

package/src/components/misc/TaskIcon.vue

@@ -1,10 +1,10 @@
 <template>
     <div
-        :class="[color ? `bg-${color}`: 'bg-white']"
-        class="div-icon rounded"
+        :class="classes"
+        class="wrapper"
     >
         <Tooltip :title="cls">
-            <img :src="backgroundImage" :alt="cls">
+            <div class="icon" :style="styles" />
         </Tooltip>
     </div>
 </template>
@@ -26,10 +26,6 @@
                 type: String,
                 default: undefined
             },
-            color: {
-                type: String,
-                default: undefined
-            },
             theme: {
                 type: String,
                 default: undefined,
@@ -43,6 +39,16 @@
             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() {
                 let icon = this.icon && this.icon.icon ? Buffer.from(this.icon.icon, "base64").toString("utf8") : undefined;
 
@@ -75,24 +81,28 @@
 </script>
 
 <style lang="scss" scoped>
-    .div-icon {
-        padding: 0.1rem;
-        margin: 0.2rem;
-        width: 25px;
-        height: 25px;
-        border: 0.4px solid var(--bs-border-color);
+    .wrapper {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
         position: relative;
 
         :deep(span) {
             position: absolute;
-            top: -2px;
+            padding: 1px;
             left: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
         }
 
-        :deep(img) {
-            max-width: 100%;
+        :deep(.icon) {
+            width: 100%;
+            height: 100%;
+            display: block;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center center;
         }
     }
-
-
 </style>

package/src/components/nodes/BasicNode.vue

@@ -6,8 +6,8 @@
         @mouseleave="mouseleave"
     >
         <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
-        <div>
-            <TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg" theme="light" />
+        <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">
@@ -226,6 +226,13 @@
                 }
             }
         }
+
+        .icon {
+            margin: 0.2rem;
+            width: 25px;
+            height: 25px;
+            border: 0.4px solid var(--bs-border-color);
+        }
     }
 
     .node-content {
@@ -267,6 +274,7 @@
         font-size: 0.75rem;
         font-weight: 700;
         color: var(--bs-black);
+        flex-grow: 1;
 
         html.dark & {
             color: var(--bs-white);

package/src/components/nodes/DependenciesNode.vue

@@ -4,7 +4,7 @@
         :class="[`border-${data.color}`]"
         class="dependency-node-wrapper rounded-3 border"
     >
-        <TaskIcon color="pink" :custom-icon="{icon: icon}" theme="light" />
+        <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">
                 <tooltip :title="data.flowId">

package/src/components/topology/Topology.vue

@@ -1,8 +1,8 @@
 <script setup>
     import {
         ref,
-        defineProps,
-        defineEmits, watch, nextTick,
+        watch,
+        nextTick,
         onMounted
     } from "vue";
     import {

package/src/scss/app.scss

@@ -20,6 +20,10 @@
     font-size: 0.66rem;
 }
 
+.vue-flow__controls-button {
+    color: black;
+}
+
 .vue-flow__container {
     .top-button-div {
         position: absolute;
@@ -35,6 +39,7 @@
         pointer-events: none !important;
     }
 
+
     marker[id*='id=marker-custom&type=arrowclosed'] polyline {
         stroke: #9A8EB4;
         fill: #9A8EB4;