@kestra-io/ui-libs 0.0.263 → 0.0.264

package/src/components/plugins_v2/PropertyDetailV2.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="property-detail">
+        <PropertyMeta :property="property" :subtype="subtype" :enum-values="enumValues" />
+
+        <div v-if="property.title !== undefined || property.description !== undefined || (depth < maxDepth && referencedDefinitions.length > 0)">
+            <div class="property-description markdown">
+                <slot v-if="property.title !== undefined" :content="codeSanitizer(property.title)" name="markdown" />
+                <slot v-if="property.description !== undefined" :content="codeSanitizer(property.description)" name="markdown" />
+                <div v-if="property['$internalStorageURI']">
+                    <Alert type="info">
+                        <slot content="Pebble expression referencing an Internal Storage URI e.g. `{{ outputs.mytask.uri }}`." name="markdown" />
+                    </Alert>
+                </div>
+                
+                <div v-if="depth < maxDepth && referencedDefinitions.length > 0" class="mt-3">
+                    <div class="definitions-header">
+                        Definitions
+                    </div>
+                    <DefinitionCollapsible
+                        v-for="def in referencedDefinitions"
+                        :key="`${def.key}-${depth}`"
+                        :definition="def"
+                        :definitions="definitions"
+                        :visited-keys="visitedKeysWithCurrent"
+                        :depth="depth + 1"
+                        :max-depth="maxDepth"
+                        :section="section"
+                    >
+                        <template #markdown="{content}">
+                            <slot :content="content" name="markdown" />
+                        </template>
+                    </DefinitionCollapsible>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {extractEnumValues, extractTypeInfo, extractReferencedDefinitions, type JSONProperty, type JSONSchema} from "../../utils/schemaUtils.ts";
+    import {sanitizeForMarkdown} from "../../utils/Utils";
+    import {computed} from "vue";
+    import Alert from "../content/Alert.vue";
+    import PropertyMeta from "./PropertyMeta.vue";
+    import DefinitionCollapsible from "./DefinitionCollapsible.vue";
+
+    const props = withDefaults(defineProps<{
+        property: JSONProperty,
+        definitions?: Record<string, JSONSchema>,
+        visitedKeys?: Set<string>,
+        depth?: number,
+        maxDepth?: number,
+        section?: string
+    }>(), {
+        definitions: undefined,
+        visitedKeys: () => new Set<string>(),
+        depth: 0,
+        maxDepth: 3,
+        section: "properties"
+    });
+
+    const subtype = computed(() => extractTypeInfo(props.property).subType);
+    const enumValues = computed(() => extractEnumValues(props.property));
+
+    const referencedDefinitions = computed(() => {
+        const defs = props.definitions;
+        const d = props.depth;
+        const max = props.maxDepth;
+        const prop = props.property;
+        const visited = props.visitedKeys;
+        
+        if (!defs || d >= max) return [];
+        return extractReferencedDefinitions(prop, defs, visited);
+    });
+
+    const visitedKeysWithCurrent = computed(() => {
+        const newSet = new Set(props.visitedKeys);
+        referencedDefinitions.value.forEach(def => newSet.add(def.key));
+        return newSet;
+    });
+
+    const codeSanitizer = sanitizeForMarkdown;
+</script>
+
+<style lang="scss" scoped>
+    @use "../../scss/color-palette" as color-palette;
+
+    .property-detail > * {
+        display: flex;
+        justify-content: space-between;
+        border-top: 1px solid var(--ks-border-primary);
+        align-items: center;
+        padding: 1rem 0;
+        margin: 0;
+        gap: var(--spacer);
+
+        span, .property-description:deep(p) {
+            line-height: 1.5rem;
+            font-size: .875rem !important;
+        }
+
+        code {
+            color: var(--ks-content-primary);
+            background: var(--ks-background-body);
+        }
+
+        .border-red {
+            border-color: color-palette.$base-red-400 !important;
+        }
+
+        &:first-child {
+            border-top: none !important;
+        }
+
+        > * {
+            width: fit-content;
+        }
+    }
+
+    .definitions-header {
+        font-weight: 600;
+        font-size: 0.875rem;
+        margin-bottom: 0.75rem;
+        color: var(--ks-content-primary);
+    }
+
+</style>

package/src/components/plugins_v2/PropertyMeta.vue

@@ -0,0 +1,169 @@
+<template>
+    <div v-if="subtype && !subtype.startsWith('#')">
+        <span>SubType</span>
+        <span class="type-box rounded fs-7 px-2 py-1">{{ subtype }}</span>
+    </div>
+
+    <div v-if="property.default !== undefined">
+        <span>Default</span>
+        <code class="border rounded px-2 py-1">{{ property.default }}</code>
+    </div>
+
+    <div v-if="property.pattern !== undefined">
+        <span>Validation RegExp</span>
+        <code class="border rounded px-2 py-1">{{ property.pattern }}</code>
+    </div>
+
+    <div v-if="property.unit !== undefined && property.unit.trim().length > 0">
+        <span>Unit</span>
+        <code class="border rounded px-2 py-1">{{ property.unit }}</code>
+    </div>
+
+    <div v-if="property.minLength !== undefined">
+        <span>Min length</span>
+        <code class="border rounded px-2 py-1">{{ property.minLength }}</code>
+    </div>
+
+    <div v-if="property.maxLength !== undefined">
+        <span>Max length</span>
+        <code class="border rounded px-2 py-1">{{ property.maxLength }}</code>
+    </div>
+
+    <div v-if="property.minItems !== undefined">
+        <span>Min items</span>
+        <code class="border rounded px-2 py-1">{{ property.minItems }}</code>
+    </div>
+
+    <div v-if="property.maxItems !== undefined">
+        <span>Max items</span>
+        <code class="border rounded px-2 py-1">{{ property.maxItems }}</code>
+    </div>
+
+    <div v-if="property.minimum !== undefined">
+        <span>Minimum</span>
+        <code class="border rounded px-2 py-1">&gt;= {{ property.minimum }}</code>
+    </div>
+
+    <div v-if="property.exclusiveMinimum !== undefined">
+        <span>Minimum</span>
+        <code class="border rounded px-2 py-1">&gt; {{ property.minimum }}</code>
+    </div>
+
+    <div v-if="property.maximum !== undefined">
+        <span>Maximum</span>
+        <code class="border rounded px-2 py-1">&lt;= {{ property.maximum }}</code>
+    </div>
+
+    <div v-if="property.exclusiveMaximum !== undefined">
+        <span>Maximum</span>
+        <code class="border rounded px-2 py-1">&lt; {{ property.maximum }}</code>
+    </div>
+
+    <div v-if="property.format !== undefined">
+        <span>Format</span>
+        <code class="border rounded px-2 py-1">{{ property.format }}</code>
+    </div>
+
+    <div v-if="enumValues !== undefined">
+        <span>Possible Values</span>
+        <div class="values-wrapper d-flex flex-wrap justify-content-end gap-7 p-0">
+            <code v-for="(possibleValue, index) in enumValues" class="border rounded px-2 py-1" :key="index">
+                {{ possibleValue }}
+            </code>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import type {JSONProperty} from "../../utils/schemaUtils";
+
+    defineProps<{
+        property: JSONProperty,
+        subtype?: string,
+        enumValues?: string[]
+    }>();
+</script>
+
+<style lang="scss" scoped>
+    @use "../../scss/color-palette" as color-palette;
+
+    div {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--spacer);
+        padding: 9px 0;
+        padding-bottom: 0;
+
+        span {
+            line-height: 1.5rem;
+            font-size: .875rem !important;
+            color: var(--ks-content-secondary) !important;
+        }
+
+        code {
+            color: var(--ks-content-primary);
+            background: var(--ks-background-body);
+        }
+
+        .border-red {
+            border-color: color-palette.$base-red-400 !important;
+        }
+
+        &:first-child {
+            border-top: none !important;
+        }
+
+        > * {
+            width: fit-content;
+        }
+    }
+
+        $section-styles: (
+        properties: (
+            color: var(--ks-content-running),
+            background: var(--ks-background-running),
+            border-color: var(--ks-border-running)
+        ),
+        outputs: (
+            color: var(--ks-content-success),
+            background: rgba(color-palette.$base-green-900, .2),
+            border-color: var(--ks-border-success)
+        ),
+        metrics: (
+            color: var(--ks-content-warning),
+            background: var(--ks-background-warning),
+            border-color: var(--ks-border-warning)
+        )
+    );
+
+    .type-box {
+        font-size: 12px !important;
+        line-height: 20px;
+        padding: 0 10px !important;
+        padding-bottom: 2px;
+        border-radius: 40px !important;
+        text-transform: capitalize;
+        border: 1px solid;
+    }
+
+    .values-wrapper {
+        display: flex !important;
+        justify-content: flex-end !important;
+        border: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        align-items: unset !important;
+    }
+
+    @each $section, $styles in $section-styles {
+        .section-#{$section} {
+            .type-box {
+                color: map-get($styles, color);
+                background: map-get($styles, background) !important;
+                border-color: map-get($styles, border-color);
+                text-transform: lowercase;
+            }
+        }
+    }
+</style>

package/src/components/plugins_v2/SchemaToHtmlV2.vue

@@ -0,0 +1,213 @@
+<template>
+    <div class="d-flex flex-column gap-6">
+        <div class="d-flex flex-column">
+            <div class="alert alert-info mb-2" role="alert" v-if="schema.properties?.$beta">
+                <p>
+                    This plugin is currently in beta. While it is considered safe for use, please be aware that its API
+                    could change in ways that are not compatible with earlier versions in future releases, or it might
+                    become unsupported.
+                </p>
+            </div>
+
+            <div v-if="schema.properties?.title" class="plugin-title markdown">
+                <slot name="markdown" :content="schema.properties.title.replace(/ *:(?![ /])/g, ': ')" />
+            </div>
+            <div v-if="schema.properties?.description" class="markdown">
+                <slot name="markdown" :content="schema.properties.description.replace(/ *:(?![ /])/g, ': ')" />
+            </div>
+
+            <SchemaToCode :highlighter="highlighter" language="yaml" :theme="codeTheme" :code="`type: &quot;${pluginType}&quot;`" :key="pluginType" />
+        </div>
+
+        <div class="d-flex flex-column" :key="pluginType">
+            <Collapsible class="plugin-section" v-if="examples" title="Examples" href="examples" :no-url-change>
+                <template #content>
+                    <div class="d-flex flex-column gap-4">
+                        <template v-for="(example, index) in examples" :key="pluginType + '-' + index">
+                            <div class="d-flex flex-column">
+                                <div class="markdown">
+                                    <slot v-if="example.title" :content="example.title.replace(/ *:(?![ /])/g, ': ')" name="markdown" />
+                                </div>
+                                <SchemaToCode
+                                    :highlighter="highlighter"
+                                    :language="example.lang ?? 'yaml'"
+                                    :theme="codeTheme"
+                                    :code="generateExampleCode(example)"
+                                    v-if="example.code"
+                                />
+                            </div>
+                            <hr class="w-100 align-self-center" v-if="index < examples.length - 1">
+                        </template>
+                    </div>
+                </template>
+            </Collapsible>
+
+            <CollapsibleProperties
+                v-if="schema.properties?.properties"
+                class="plugin-section"
+                :properties="schema.properties.properties"
+                section-name="Properties"
+                href="properties"
+                :initially-expanded="propsInitiallyExpanded"
+                :force-include="forceIncludeProperties"
+                :definitions="schema.definitions"
+                :no-url-change
+            >
+                <template #markdown="{content}">
+                    <div class="markdown">
+                        <slot name="markdown" :content="content" />
+                    </div>
+                </template>
+            </CollapsibleProperties>
+
+            <CollapsibleProperties
+                v-if="schema.outputs?.properties && Object.keys(schema.outputs.properties).length > 0"
+                class="plugin-section"
+                :properties="schema.outputs.properties"
+                section-name="Outputs"
+                href="outputs"
+                :show-dynamic="false"
+                :definitions="schema.definitions"
+                :no-url-change
+            >
+                <template #markdown="{content}">
+                    <div class="markdown">
+                        <slot name="markdown" :content="content" />
+                    </div>
+                </template>
+            </CollapsibleProperties>
+
+            <CollapsibleProperties
+                v-if="schema.properties?.$metrics"
+                class="plugin-section"
+                :properties="metrics"
+                section-name="Metrics"
+                href="metrics"
+                :show-dynamic="false"
+                :definitions="schema.definitions"
+                :no-url-change
+            >
+                <template #markdown="{content}">
+                    <div class="markdown">
+                        <slot name="markdown" :content="content" />
+                    </div>
+                </template>
+            </CollapsibleProperties>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {computed, ref} from "vue";
+    import type {HighlighterCore} from "shiki/core";
+    import SchemaToCode from "../plugins/SchemaToCode.vue";
+    import type {JSONProperty, JSONSchema} from "../../utils/schemaUtils.ts";
+    import Collapsible from "./CollapsibleV2.vue";
+    import CollapsibleProperties from "./CollapsiblePropertiesV2.vue";
+
+    const props = withDefaults(defineProps<{
+        schema: JSONSchema,
+        pluginType: string,
+        darkMode?: boolean,
+        propsInitiallyExpanded?: boolean,
+        forceIncludeProperties?: string[],
+        noUrlChange?: boolean
+    }>(), {
+        darkMode: true,
+        propsInitiallyExpanded: false,
+        forceIncludeProperties: () => [],
+        noUrlChange: false
+    });
+
+    const generateExampleCode = (example: NonNullable<NonNullable<JSONSchema["properties"]>["$examples"]>[number]) => {
+        if (!example?.full) {
+            const fullCode = `id: "${props.pluginType.split(".").reverse()[0]?.toLowerCase()}"\ntype: "${props.pluginType}"\n`;
+            return fullCode.concat(example.code)
+        }
+
+        return example.code
+    }
+
+    const highlighter = ref<HighlighterCore | undefined>();
+
+    const examples = computed(() => props.schema.properties?.["$examples"]);
+
+    const metrics = computed(() => Object.fromEntries(
+        props.schema.properties?.["$metrics"]?.map(metric => ([metric.name, {...metric, name: undefined}])) as [string, JSONProperty][]
+    ));
+
+    const {getHighlighterCore} = await import("../plugins/shikiToolset");
+
+    highlighter.value = await getHighlighterCore();
+
+    const codeTheme = "github-" + (props.darkMode ? "dark" : "light");
+</script>
+
+<style scoped lang="scss">
+    @use "../../scss/variables" as variables;
+    @use "../../scss/color-palette" as color-palette;
+
+    .plugin-title :deep(p) {
+        font-size: 1rem;
+        margin: 1rem 0;
+    }
+
+    :deep(.markdown) {
+
+        pre,
+        .code-block {
+            margin: 0;
+        }
+
+        >ol,
+        >ul,
+        >dl {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+    }
+
+    :deep(.plugin-section) {
+        border-bottom: 1px solid variables.$black-3;
+        padding: 2rem 0;
+
+        @media (min-width: 992px) {
+            margin-left: -2rem;
+            margin-right: -2rem;
+            padding: 2rem;
+        }
+
+        &:first-child {
+            border-top: 1px solid variables.$black-3;
+        }
+
+        &:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+
+        .material-design-icon > .material-design-icon__svg {
+            height: 1.35rem;
+            width: 1.35rem;
+        }
+
+        .material-design-icon:not(.text-danger):not(.text-info):not(.text-warning):not(.text-success):not(.text-primary):not(.text-secondary) {
+            &,
+            & * {
+                height: 1.5rem;
+                width: 1.5rem;
+                bottom: 0;
+                color: variables.$black-10 !important;
+            }
+        }
+
+        .material-design-icon:not(.property .material-design-icon):not(.text-danger):not(.text-info):not(.text-warning):not(.text-success):not(.text-primary):not(.text-secondary) {
+            &,
+            & * {
+                height: 1.5rem;
+                width: 1.5rem;
+                color: color-palette.$base-gray-300 !important;
+            }
+        }
+    }
+</style>

package/src/composables/usePluginElementCounts.ts

@@ -0,0 +1,16 @@
+import {computed, unref, type Ref} from "vue";
+import {extractPluginElements, type Plugin} from "../utils/plugins";
+
+/**
+ * Composable to compute plugin element counts and groupings.
+ * Provides reactive computed values for elements by type and total count.
+ * @param plugin - The plugin to analyze.
+ * @returns Object with elementsByType (computed) and total (computed) counts.
+ */
+export function usePluginElementCounts(plugin: Plugin | Ref<Plugin>) {
+    const elementsByType = computed(() => extractPluginElements(unref(plugin)));
+
+    const total = computed(() => Object.values(elementsByType.value).reduce((sum, arr) => sum + arr.length, 0));
+
+    return {elementsByType, total} as const;
+}

package/src/index.ts

@@ -7,10 +7,11 @@ export {default as getMDCParser} from "./composables/getMDCParser";
 export * from "./utils/constants";
 export * from "./utils/url";
 export * from "./utils/plugins";
+export {usePluginElementCounts} from "./composables/usePluginElementCounts";
 export {default as RotatingDotsIcon} from "./assets/icons/RotatingDots.vue";
 
 export type {YamlElement} from "./utils/YamlUtilsLegacy";
-export type {Plugin} from "./utils/plugins";
+export type {Plugin, PluginMetadata, PluginElement} from "./utils/plugins";
 export type {JSONSchema, JSONProperty} from "./utils/schemaUtils";
 
 import "./scss/ks-theme-light.scss";

package/src/scss/_variables.scss

@@ -38,6 +38,75 @@ $white-3: #B9B9BA;
 $black-2: #161617;
 $black-3: #252526;
 
+$primary-1: #4B0AAA !default;
+
+// extended whites
+$white-1: #E1E1E1 !default;
+$white-2: #E5E4F7 !default;
+$white-4: #CCC6D2 !default;
+$white-5: #7C7C7C !default;
+$white-6: #F0F0FF !default;
+
+// extended blacks
+$black-1: #070708 !default;
+$black-4: #111113 !default;
+$black-5: #333336 !default;
+$black-6: #3D3D3F !default;
+$black-7: #0D0D0C !default;
+$black-8: #8B8B8D !default;
+$black-9: #1D1D1E !default;
+$black-10: #646465 !default;
+
+// greens/blues
+$green-1: #BFE1B0 !default;
+$indigo-1: #1B0229 !default;
+
+// extended purples (many small variant tokens used across docs)
+$purple-1: #382369 !default;
+$purple-2: #FBC7F4 !default;
+$purple-3: #9580EE !default;
+$purple-4: linear-gradient(160.34deg, rgba(130, 0, 255, 0.12) 5.3%, rgba(130, 0, 255, 0) 75.43%), #201838 !default;
+$purple-5: #362762 !default;
+$purple-6: #6113BC !default;
+$purple-7: #1A1223 !default;
+$purple-8: #EEEDFF !default;
+$purple-10: #150E1C !default;
+$purple-11: #332C3B !default;
+$purple-12: #432A71 !default;
+$purple-13: #e5e4f7 !default;
+$purple-14: #8e20f9 !default;
+$purple-15: #9237fb !default;
+$purple-16: #281A35 !default;
+$purple-17: #F5F5FF !default;
+$purple-18: #7E719F !default;
+$purple-19: conic-gradient(from 90deg at 50% 50%, #BE79FF 0deg, #7136F6 360deg) !default;
+$purple-20: #291E39 !default;
+$purple-21: #A42DCD !default;
+$purple-22: #FCF7FE !default;
+$purple-23: #EDE8F3 !default;
+$purple-24: #15023F !default;
+$purple-26: #DCCDEB !default;
+$purple-27: #8200FF !default;
+$purple-28: #2D313E !default;
+$purple-29: #F1F5FF !default;
+$purple-31: #2A1940 !default;
+$purple-32: #CFCEFF !default;
+$purple-33: #110221 !default;
+$purple-34: #10051F !default;
+$purple-35: #736BCD !default;
+$purple-37: #A396FF !default;
+$purple-38: #7078EF !default;
+$purple-39: #817CFF !default;
+$purple-40: #5818D8 !default;
+$purple-41: #7A38FF !default;
+$purple-42: #909AF6 !default;
+$purple-43: #7733FF !default;
+
+// gray variant used in some places (palette value)
+$gray-300-alt: #9797A6 !default;
+
+$purple-50: #E0E0FF !default;
+
 // fonts
 $font-size-base: 1rem !default;
 $font-family-sans-serif: "Public Sans", sans-serif;

package/src/utils/Utils.ts

@@ -85,6 +85,10 @@ export function distinctFilter(value: any, index: number, array: any[]) {
     return array.indexOf(value) === index;
 }
 
+export function sanitizeForMarkdown(str: string): string {
+    return str.replace(/(```)(?:bash|yaml|js|console|json)(\n) *([\s\S]*?```)/g, "$1$2$3").replace(/(?<!:):(?![: /])/g, ": ");
+}
+
 export default {
     capitalize,
     dateFilter,
@@ -93,4 +97,5 @@ export default {
     humanDuration,
     afterLastDot,
     distinctFilter
+    , sanitizeForMarkdown
 };

package/src/utils/VueFlowUtils.ts

@@ -176,7 +176,7 @@ export function generateDagreGraph(
             continue;
         }
         if (!edgeReplacer[cluster.cluster.uid]) {
-            dagreGraph.setNode(cluster.cluster.uid, {clusterLabelPos: "top"});
+           dagreGraph.setNode(cluster.cluster.uid, {clusterLabelPos: "top"});
 
             for (const node of cluster.nodes || []) {
                 if (!hiddenNodes.includes(node)) {
@@ -643,6 +643,14 @@ export function generateGraph(
         );
         if (newEdge) {
             const edgeColor = getEdgeColor(edge, nodeByUid, clusterByNodeUid);
+            const targetNodeType = nodeByUid[newEdge.target]?.type ?? "";
+            const sourceNodeType = nodeByUid[newEdge.source]?.type ?? "";
+            let edgeBoundary: "top" | "bottom" | undefined = undefined;
+            if (typeof targetNodeType === "string" && targetNodeType.endsWith("GraphClusterRoot")) {
+                edgeBoundary = "top";
+            } else if (typeof sourceNodeType === "string" && sourceNodeType.endsWith("GraphClusterEnd")) {
+                edgeBoundary = "bottom";
+            }
             elements.push({
                 id: newEdge.source + "|" + newEdge.target,
                 source: newEdge.source,
@@ -665,6 +673,7 @@ export function generateGraph(
                             clusterRootTaskNodeUids,
                             readOnlyUidPrefixes
                         ),
+                    edgeBoundary: edgeBoundary,
                     haveDashArray:
                         nodeByUid[edge.source].type.endsWith("GraphTrigger") ||
                         nodeByUid[edge.target].type.endsWith("GraphTrigger") ||
@@ -682,7 +691,6 @@ export function generateGraph(
 
     return elements;
 }
-
 export function isClusterRootOrEnd(node: MinimalNode) {
     return ["GraphClusterRoot", "GraphClusterFinally", "GraphClusterAfterExecution", "GraphClusterEnd"].some((s) =>
         node.type.endsWith(s)