@kestra-io/ui-libs 0.0.83 → 0.0.88

package/src/components/topology/Topology.vue

@@ -1,15 +1,111 @@
-<script setup>
-    import {computed, nextTick, onMounted, ref, watch} from "vue";
-    import {ClusterNode, CollapsedClusterNode, DotNode, EdgeNode, TaskNode, TriggerNode,} from "../index.js";
-    import {useVueFlow, VueFlow} from "@vue-flow/core";
+<template>
+    <VueFlow
+        :id="id"
+        :default-marker-color="cssVariable('--bs-cyan')"
+        fit-view-on-init
+        :nodes-draggable="false"
+        :nodes-connectable="false"
+        :elevate-nodes-on-select="false"
+        :elevate-edges-on-select="false"
+    >
+        <Background :pattern-color="darkTheme ? cssVariable('--bs-grey-500') : cssVariable('--bs-grey-300')" />
+
+        <template #node-cluster="clusterProps">
+            <ClusterNode
+                v-bind="clusterProps"
+                @collapse="collapseCluster($event, true)"
+            />
+        </template>
+
+        <template #node-dot="dotProps">
+            <DotNode
+                v-bind="dotProps"
+            />
+        </template>
+
+        <template #node-task="taskProps">
+            <TaskNode
+                v-bind="taskProps"
+                :icons="icons"
+                :icon-component="iconComponent"
+                @edit="emit(EVENTS.EDIT, $event)"
+                @delete="emit(EVENTS.DELETE, $event)"
+                @expand="expand($event)"
+                @open-link="emit(EVENTS.OPEN_LINK, $event)"
+                @show-logs="emit(EVENTS.SHOW_LOGS, $event)"
+                @show-description="emit(EVENTS.SHOW_DESCRIPTION, $event)"
+                @show-condition="emit(EVENTS.SHOW_CONDITION, $event)"
+                @mouseover="onMouseOver($event)"
+                @mouseleave="onMouseLeave()"
+                @add-error="emit('on-add-flowable-error', $event)"
+                :enable-subflow-interaction="enableSubflowInteraction"
+            />
+        </template>
+
+        <template #node-trigger="triggerProps">
+            <TriggerNode
+                v-bind="triggerProps"
+                :icons="icons"
+                :icon-component="iconComponent"
+                :is-read-only="isReadOnly"
+                :is-allowed-edit="isAllowedEdit"
+                @delete="emit(EVENTS.DELETE, $event)"
+                @edit="emit(EVENTS.EDIT, $event)"
+                @show-description="emit(EVENTS.SHOW_DESCRIPTION, $event)"
+            />
+        </template>
+
+        <template #node-collapsedcluster="CollapsedProps">
+            <CollapsedClusterNode
+                v-bind="CollapsedProps"
+                @expand="expand($event)"
+            />
+        </template>
+
+        <template #edge-edge="EdgeProps">
+            <EdgeNode
+                v-bind="EdgeProps"
+                :yaml-source="source"
+                @add-task="emit(EVENTS.ADD_TASK, $event)"
+                :is-read-only="isReadOnly"
+                :is-allowed-edit="isAllowedEdit"
+            />
+        </template>
+
+        <Controls :show-interactive="false">
+            <ControlButton @click="emit('toggle-orientation', $event)" v-if="toggleOrientationButton">
+                <SplitCellsVertical :size="48" v-if="!isHorizontal" />
+                <SplitCellsHorizontal v-if="isHorizontal" />
+            </ControlButton>
+        </Controls>
+    </VueFlow>
+</template>
+<script lang="ts" setup>
+    import {computed, nextTick, onMounted, PropType, ref, watch} from "vue";
+    import {useVueFlow, VueFlow, XYPosition} from "@vue-flow/core";
     import {ControlButton, Controls} from "@vue-flow/controls";
+    import {Background} from "@vue-flow/background";
+    // @ts-expect-error no types for internals necessary
+    import ClusterNode from "../nodes/ClusterNode.vue";
+    // @ts-expect-error no types for internals necessary
+    import DotNode from "../nodes/DotNode.vue";
+    // @ts-expect-error no types for internals necessary
+    import EdgeNode from "../nodes/EdgeNode.vue";
+    // @ts-expect-error no types for internals necessary
+    import TaskNode from "../nodes/TaskNode.vue";
+    // @ts-expect-error no types for internals necessary
+    import TriggerNode from "../nodes/TriggerNode.vue"
+    // @ts-expect-error no types for internals necessary
+    import CollapsedClusterNode from "../nodes/CollapsedClusterNode.vue";
+    // @ts-expect-error no types for internals necessary
     import SplitCellsVertical from "../../assets/icons/SplitCellsVertical.vue";
+    // @ts-expect-error no types for internals necessary
     import SplitCellsHorizontal from "../../assets/icons/SplitCellsHorizontal.vue";
-    import {cssVariable} from "../../utils/global.js";
-    import {VueFlowUtils, YamlUtils} from "../../index.js";
-    import {CLUSTER_PREFIX, EVENTS} from "../../utils/constants.js";
-    import {Background} from "@vue-flow/background";
-    import Utils from "../../utils/Utils.js";
+    import {cssVariable} from "../../utils/global";
+    import {CLUSTER_PREFIX, EVENTS} from "../../utils/constants"
+    import Utils from "../../utils/Utils"
+    import VueFlowUtils, {type FlowGraph} from "../../utils/VueFlowUtils";
+    import {YamlUtils} from "../../utils/YamlUtils"
 
     const props = defineProps({
         id: {
@@ -38,7 +134,7 @@
             default: false,
         },
         flowGraph: {
-            type: Object,
+            type: Object as PropType<FlowGraph>,
             required: true
         },
         flowId: {
@@ -70,11 +166,11 @@
     });
 
     const dragging = ref(false);
-    const lastPosition = ref(null)
+    const lastPosition = ref<XYPosition | null>()
     const {getNodes, onNodeDrag, onNodeDragStart, onNodeDragStop, fitView, setElements} = useVueFlow({id: props.id});
     const edgeReplacer = ref({});
-    const hiddenNodes = ref([]);
-    const collapsed = ref(new Set());
+    const hiddenNodes = ref<string[]>([]);
+    const collapsed = ref(new Set<string>());
     const clusterToNode = ref([])
 
     const emit = defineEmits(
@@ -112,11 +208,11 @@
         VueFlowUtils.cleanGraph(props.id);
 
         nextTick(() => {
-            forwardEvent("loading", true);
+            emit("loading", true);
 
             // Workaround due to start & end nodes regeneration when fetching the graph again
             const oldCollapsed = collapsed.value;
-            collapsed.value = new Set();
+            collapsed.value = new Set<string>();
             hiddenNodes.value = [];
             edgeReplacer.value = {};
             oldCollapsed.forEach(n => collapseCluster(CLUSTER_PREFIX + n, false, false))
@@ -136,18 +232,16 @@
                 props.isAllowedEdit,
                 props.enableSubflowInteraction
             );
-            setElements(elements);
-            fitView();
-            forwardEvent("loading", false);
+            if(elements) {
+                setElements(elements);
+                fitView();
+                emit("loading", false);
+            }
         })
     }
 
-    const forwardEvent = (type, payload) => {
-        emit(type, payload);
-    };
-
     // Graph interactions functions
-    const onMouseOver = (node) => {
+    const onMouseOver = (node: any) => {
         if (!dragging.value) {
             VueFlowUtils.linkedElements(props.id, node.uid).forEach((n) => {
                 if (n?.type === "task") {
@@ -178,19 +272,21 @@
         lastPosition.value = e.node.position;
     })
 
-    onNodeDragStop((e) => {
+    onNodeDragStop((e:any) => {
         dragging.value = false;
         if (checkIntersections(e.intersections, e.node) === null) {
             const taskNode1 = e.node;
             // check multiple intersection with task
-            const taskNode2 = e.intersections.find(n => n.type === "task");
+            const taskNode2 = e.intersections.find((n:any) => n.type === "task");
             if (taskNode2) {
                 try {
-                    emit("swapped-task", {
-                        newSource: YamlUtils.swapTasks(props.source, Utils.afterLastDot(taskNode1.id), Utils.afterLastDot(taskNode2.id)),
-                        swappedTasks: [taskNode1.id, taskNode2.id]
-                    })
-                } catch (e) {
+                    if(props.source){
+                        emit("swapped-task", {
+                            newSource: YamlUtils.swapTasks(props.source, Utils.afterLastDot(taskNode1.id) ?? "", Utils.afterLastDot(taskNode2.id) ?? ""),
+                            swappedTasks: [taskNode1.id, taskNode2.id]
+                        })
+                    }
+                } catch (e: any) {
                     emit("message", {
                         variant: "error",
                         title: "cannot swap tasks",
@@ -218,7 +314,7 @@
             .map(cluster => cluster.cluster.taskNode.uid + ".");
     })
 
-    onNodeDrag((e) => {
+    onNodeDrag((e: any) => {
         resetNodesStyle();
         getNodes.value.filter(n => n.id !== e.node.id).forEach(n => {
             if (n.type === "trigger" || (n.type === "task" && (n.id.startsWith(e.node.id + ".") || e.node.id.startsWith(n.id + "."))) || subflowPrefixes?.value?.some(subflowPrefix => n.id.startsWith(subflowPrefix))) {
@@ -227,8 +323,8 @@
                 n.style = {...n.style, opacity: "1"}
             }
         })
-        if (!checkIntersections(e.intersections, e.node) && e.intersections.filter(n => n.type === "task").length === 1) {
-            e.intersections.forEach(n => {
+        if (!checkIntersections(e.intersections, e.node) && e.intersections.filter((n:any) => n.type === "task").length === 1) {
+            e.intersections.forEach((n:any) => {
                 if (n.type === "task") {
                     n.style = {...n.style, outline: "0.5px solid " + cssVariable("--bs-primary")}
                     n.class = "rounded-3"
@@ -239,31 +335,31 @@
         }
     })
 
-    const checkIntersections = (intersections, node) => {
-        const tasksMeet = intersections.filter(n => n.type === "task").map(n => Utils.afterLastDot(n.id));
+    const checkIntersections = (intersections:any, node:any) => {
+        const tasksMeet = intersections.filter((n:any) => n.type === "task").map((n:any) => Utils.afterLastDot(n.id));
         if (tasksMeet.length > 1) {
             return "toomuchtaskerror";
         }
         try {
-            if (tasksMeet.length === 1 && YamlUtils.isParentChildrenRelation(props.source, Utils.afterLastDot(tasksMeet[0]), Utils.afterLastDot(node.id))) {
+            if (tasksMeet.length === 1 && props.source && YamlUtils.isParentChildrenRelation(props.source, Utils.afterLastDot(tasksMeet[0]) ?? "", Utils.afterLastDot(node.id) ?? "")) {
                 return "parentchildrenerror";
             }
-        } catch (e) {
+        } catch {
             return "parentchildrenerror";
         }
-        if (intersections.filter(n => n.type === "trigger").length > 0) {
+        if (intersections.filter((n:any) => n.type === "trigger").length > 0) {
             return "triggererror";
         }
         return null;
     }
 
-    const collapseCluster = (clusterUid, regenerate, recursive) => {
-        const cluster = props.flowGraph.clusters.find(cluster => cluster.cluster.uid.endsWith(clusterUid));
+    const collapseCluster = (clusterUid: string, regenerate: boolean, recursive = false) => {
+        const cluster:any = props.flowGraph.clusters.find(cluster => cluster.cluster.uid.endsWith(clusterUid));
         const nodeId = clusterUid.replace(CLUSTER_PREFIX, "");
         collapsed.value.add(nodeId)
 
-        hiddenNodes.value = hiddenNodes.value.concat(cluster.nodes.filter(e => e !== nodeId || recursive));
-        hiddenNodes.value = hiddenNodes.value.concat([cluster.cluster.uid])
+        hiddenNodes.value = hiddenNodes.value.concat(cluster.nodes.filter((e:any) => e !== nodeId || recursive));
+        hiddenNodes.value = hiddenNodes.value.concat([cluster.cluster.uid] as string[])
         edgeReplacer.value = {
             ...edgeReplacer.value,
             [cluster.cluster.uid]: nodeId,
@@ -282,13 +378,13 @@
         }
     }
 
-    const expand = (expandData) => {
+    const expand = (expandData:any) => {
         const taskTypesWithSubflows = [
             "io.kestra.core.tasks.flows.Flow", "io.kestra.core.tasks.flows.Subflow", "io.kestra.plugin.core.flow.Subflow",
             "io.kestra.core.tasks.flows.ForEachItem$ForEachItemExecutable", "io.kestra.plugin.core.flow.ForEachItem$ForEachItemExecutable"
         ];
         if (taskTypesWithSubflows.includes(expandData.type) && !props.expandedSubflows.includes(expandData.id)) {
-            forwardEvent("expand-subflow", [...props.expandedSubflows, expandData.id]);
+            emit("expand-subflow", [...props.expandedSubflows, expandData.id]);
             return;
         }
         edgeReplacer.value = {};
@@ -304,88 +400,6 @@
     const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
 
 </script>
-<template>
-    <VueFlow
-        :id="id"
-        :default-marker-color="cssVariable('--bs-cyan')"
-        fit-view-on-init
-        :nodes-draggable="false"
-        :nodes-connectable="false"
-        :elevate-nodes-on-select="false"
-        :elevate-edges-on-select="false"
-    >
-        <Background :pattern-color="darkTheme ? cssVariable('--bs-grey-500') : cssVariable('--bs-grey-300')" />
-
-        <template #node-cluster="clusterProps">
-            <ClusterNode
-                v-bind="clusterProps"
-                @collapse="collapseCluster($event, true)"
-            />
-        </template>
-
-        <template #node-dot="dotProps">
-            <DotNode
-                v-bind="dotProps"
-            />
-        </template>
-
-        <template #node-task="taskProps">
-            <TaskNode
-                v-bind="taskProps"
-                :icons="icons"
-                :icon-component="iconComponent"
-                @edit="forwardEvent(EVENTS.EDIT, $event)"
-                @delete="forwardEvent(EVENTS.DELETE, $event)"
-                @expand="expand($event)"
-                @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
-                @show-logs="forwardEvent(EVENTS.SHOW_LOGS, $event)"
-                @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
-                @show-condition="forwardEvent(EVENTS.SHOW_CONDITION, $event)"
-                @mouseover="onMouseOver($event)"
-                @mouseleave="onMouseLeave()"
-                @add-error="forwardEvent('on-add-flowable-error', $event)"
-                :enable-subflow-interaction="enableSubflowInteraction"
-            />
-        </template>
-
-        <template #node-trigger="triggerProps">
-            <TriggerNode
-                v-bind="triggerProps"
-                :icons="icons"
-                :icon-component="iconComponent"
-                :is-read-only="isReadOnly"
-                :is-allowed-edit="isAllowedEdit"
-                @delete="forwardEvent(EVENTS.DELETE, $event)"
-                @edit="forwardEvent(EVENTS.EDIT, $event)"
-                @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
-            />
-        </template>
-
-        <template #node-collapsedcluster="CollapsedProps">
-            <CollapsedClusterNode
-                v-bind="CollapsedProps"
-                @expand="expand($event)"
-            />
-        </template>
-
-        <template #edge-edge="EdgeProps">
-            <EdgeNode
-                v-bind="EdgeProps"
-                :yaml-source="source"
-                @add-task="forwardEvent(EVENTS.ADD_TASK, $event)"
-                :is-read-only="isReadOnly"
-                :is-allowed-edit="isAllowedEdit"
-            />
-        </template>
-
-        <Controls :show-interactive="false">
-            <ControlButton @click="forwardEvent('toggle-orientation', $event)" v-if="toggleOrientationButton">
-                <SplitCellsVertical :size="48" v-if="!isHorizontal" />
-                <SplitCellsHorizontal v-if="isHorizontal" />
-            </ControlButton>
-        </Controls>
-    </VueFlow>
-</template>
 
 <style scoped lang="scss">
     :deep(.unused-path) {

package/src/composables/getMDCParser.ts

@@ -0,0 +1,13 @@
+import type {MDParser} from "./useMarkdownParser"
+
+let parser:MDParser
+
+export default async function getMDCParser() {
+    if(parser){
+        return parser
+    }
+    
+    const {default: useMarkdownParser} = await import("./useMarkdownParser")
+    parser = await useMarkdownParser();
+    return parser
+}

package/src/composables/{useMarkdownParser.js → useMarkdownParser.ts}

@@ -1,4 +1,5 @@
-import {createMarkdownParser, createShikiHighlighter, rehypeHighlight,} from "@nuxtjs/mdc/runtime";
+import {createMarkdownParser, createShikiHighlighter, rehypeHighlight} from "@nuxtjs/mdc/runtime";
+import type {MDCParserResult} from "@nuxtjs/mdc";
 import GithubLight from "shiki/themes/github-light.mjs";
 import GithubDark from "shiki/themes/github-dark.mjs";
 import Bash from "shiki/langs/bash.mjs";
@@ -30,43 +31,48 @@ import Typescript from "shiki/langs/typescript.mjs";
 import Xml from "shiki/langs/xml.mjs";
 import Yaml from "shiki/langs/yaml.mjs";
 
+
+const langsMap: Record<string, any> = {
+    bash: Bash,
+    c: C,
+    cpp: Cpp,
+    csv: Csv,
+    dockerfile: Dockerfile,
+    go: Go,
+    groovy: Groovy,
+    handlebars: Handlebars,
+    hcl: Hcl,
+    ini: Ini,
+    java: Java,
+    javascript: Javascript,
+    json: Json,
+    markdown: Markdown,
+    mermaid: Mermaid,
+    perl: Perl,
+    php: Php,
+    python: Python,
+    r: R,
+    ruby: Ruby,
+    rust: Rust,
+    scala: Scala,
+    sql: Sql,
+    systemd: Systemd,
+    twig: Twig,
+    typescript: Typescript,
+    xml: Xml,
+    yaml: Yaml,
+};
+
+export type MDParser = (md: string) => Promise<MDCParserResult>
+
 export default function useMarkdownParser() {
-    let parser;
+    let parser: MDParser;
 
-    return async (markdown) => {
+    return async (markdown:string) => {
         if (!parser) {
             const {bundledLanguagesInfo} = await import("shiki/langs");
 
-            const langsMap = {
-                bash: Bash,
-                c: C,
-                cpp: Cpp,
-                csv: Csv,
-                dockerfile: Dockerfile,
-                go: Go,
-                groovy: Groovy,
-                handlebars: Handlebars,
-                hcl: Hcl,
-                ini: Ini,
-                java: Java,
-                javascript: Javascript,
-                json: Json,
-                markdown: Markdown,
-                mermaid: Mermaid,
-                perl: Perl,
-                php: Php,
-                python: Python,
-                r: R,
-                ruby: Ruby,
-                rust: Rust,
-                scala: Scala,
-                sql: Sql,
-                systemd: Systemd,
-                twig: Twig,
-                typescript: Typescript,
-                xml: Xml,
-                yaml: Yaml,
-            };
+            
             Object.entries(langsMap).forEach(([langId, lang]) => {
                 const info = bundledLanguagesInfo.find(i => i.aliases?.includes?.(langId) || i.id === langId);
                 if (!info) {

package/src/index.ts

@@ -0,0 +1,9 @@
+export {YamlUtils} from "./utils/YamlUtils";
+export {cssVariable} from "./utils/global";
+export {default as Utils} from "./utils/Utils";
+export {default as VueFlowUtils} from "./utils/VueFlowUtils";
+
+import "./scss/theme-light.scss";
+import "./scss/theme-dark.scss";
+
+export * from "./components/index";

package/src/material-icons.d.ts

@@ -0,0 +1,5 @@
+declare module "vue-material-design-icons/*.vue" {
+    import {Component} from "vue";
+    const icon: Component;
+    export default icon;
+}

package/src/scss/color-palette.scss

@@ -0,0 +1,73 @@
+$base-blue-100: #a2cdff;
+$base-blue-200: #7fbbff;
+$base-blue-300: #5bb8ff;
+$base-blue-400: #3991ff;
+$base-blue-50: #c7fdff;
+$base-blue-500: #1761fd;
+$base-blue-600: #134ecc;
+$base-blue-700: #0e3b9a;
+$base-blue-800: #0a2869;
+$base-blue-900: #051538;
+$base-green-100: #beefe2;
+$base-green-200: #7cdfc4;
+$base-green-300: #21ce9c;
+$base-green-400: #02be8a;
+$base-green-50: #e4f9f3;
+$base-green-500: #029e73;
+$base-green-600: #017f5c;
+$base-green-700: #016046;
+$base-green-800: #014230;
+$base-green-900: #002319;
+$base-black: #060709;
+$base-gray-100: #cfd3d6;
+$base-gray-200: #ecebef;
+$base-gray-300: #9797a6;
+$base-gray-400: #404559;
+$base-gray-50: #f9f9fa;
+$base-gray-500: #2f3342;
+$base-gray-600: #2c303f;
+$base-gray-700: #21242e;
+$base-gray-800: #21242e;
+$base-gray-900: #1c1e27;
+$base-gray-950: #060709;
+$base-white: #ffffff;
+$base-orange-100: #f3c4a1;
+$base-orange-200: #eeae7e;
+$base-orange-300: #e9985b;
+$base-orange-400: #e58238;
+$base-orange-50: #fff2ea;
+$base-orange-500: #dd5f00;
+$base-orange-600: #c15300;
+$base-orange-700: #a64700;
+$base-orange-800: #8a3b00;
+$base-orange-900: #6f3000;
+$base-purple-100: #bbbbff;
+$base-purple-200: #a396ff;
+$base-purple-300: #9470ff;
+$base-purple-400: #8c4bff;
+$base-purple-50: #e0e0ff;
+$base-purple-500: #8405ff;
+$base-purple-600: #7400df;
+$base-purple-700: #6300bf;
+$base-purple-800: #53009f;
+$base-purple-900: #420080;
+$base-red-100: #fec9cb;
+$base-red-200: #fd9297;
+$base-red-300: #fd7278;
+$base-red-400: #e3262f;
+$base-red-50: #fff2f3;
+$base-red-500: #ab0009;
+$base-red-600: #870007;
+$base-red-700: #5a0005;
+$base-red-800: #470004;
+$base-red-900: #260002;
+$base-yellow-100: #fdedb3;
+$base-yellow-200: #fdeaa8;
+$base-yellow-300: #fde89d;
+$base-yellow-400: #fde592;
+$base-yellow-50: #fffbef;
+$base-yellow-500: #fce07c;
+$base-yellow-600: #ddc46d;
+$base-yellow-700: #bda85d;
+$base-yellow-800: #9e8c4e;
+$base-yellow-900: #7e703e;