@kestra-io/ui-libs 0.0.263 → 0.0.264

package/src/components/misc/SubgroupCard.vue

@@ -0,0 +1,178 @@
+<template>
+    <a :href="hrefWithDefault">
+        <div class="plugin" :class="{'is-active': isActive}">
+            <div class="top-row">
+                <div class="icon-content">
+                    <img :src="iconB64Svg" :alt="`${text} icon`">
+                </div>
+                <div class="text-content">
+                    <h6>{{ text }}</h6>
+                    <p v-if="description" class="description">{{ description }}</p>
+                </div>
+            </div>
+            <div class="footer">
+                <hr>
+                <div class="bottom-row">
+                    <div class="left">
+                        <p v-if="props.totalCount">{{ props.totalCount ?? 0 }} <span>Tasks</span></p>
+                        <p v-if="props.blueprintsCount">{{ props.blueprintsCount ?? 0 }} <span>Blueprints</span></p>
+                    </div>
+                    <ChevronRight />
+                </div>
+            </div>
+        </div>
+    </a>
+</template>
+<script setup lang="ts">
+    import {computed} from "vue";
+    import {slugify} from "../../utils/url";
+    import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
+
+    const props = withDefaults(defineProps<{
+        iconB64Svg: string,
+        text: string,
+        routePath: string
+        totalCount: number,
+        description?: string,
+        href?: string | undefined
+        isActive?: boolean,
+        blueprintsCount?: number
+    }>(), {
+        totalCount: 0,
+        description: "",
+        href: undefined,
+        isActive: false,
+        blueprintsCount: 0,
+    });
+    
+    const hrefWithDefault = computed(() => props.href === undefined
+        ? `${props.routePath}/${slugify(props.text)}`
+        : props.href);
+
+</script>
+
+<style scoped lang="scss">
+    @use "../../scss/variables" as variables;
+    @use "../../scss/color-palette" as color-palette;
+
+    .plugin {
+        width: 100%;
+        height: 152px;
+        border-radius: 12px;
+        border: 1px solid var(--kestra-io-token-color-border-secondary);
+        padding: 1rem;
+        background: var(--kestra-io-token-color-background-secondary);
+        display: flex;
+        flex-direction: column;
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+        transition: 0.4s ease-out;
+
+        &:hover {
+            border-color: var(--kestra-io-token-color-border-active);
+            box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
+            transform: scale(1.025);
+        }
+
+        &.is-active {
+            border-color: variables.$primary;
+        }
+
+        .top-row {
+            display: flex;
+            flex-direction: row;
+            gap: 1rem;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+        }
+
+        .icon-content {
+            width: 60px;
+            height: 60px;
+            background: variables.$gray-100;
+            border-radius: 8px;
+            border: 1px solid variables.$white-2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            img {
+                width: 45px;
+                height: 45px;
+            }
+        }
+
+        .text-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            overflow: hidden;
+
+            .description {
+                color: var(--ks-content-secondary);
+                font-size: 12px !important;
+                line-height: 1rem;
+                margin: 0;
+                overflow: hidden;
+                display: -webkit-box;
+                line-clamp: 2;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+        }
+
+        h6 {
+            color: variables.$white;
+            font-size: 1rem;
+            font-weight: 700;
+            margin: 0;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            padding-top: 0;
+        }
+
+        hr {
+            border: 1px solid var(--ks-border-primary);
+            margin: 0;
+        }
+
+        .footer {
+            margin-top: auto;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .bottom-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: color-palette.$base-gray-300;
+            height: 45px;
+
+            .left {
+                display: flex;
+                gap: 1rem;
+                align-items: center;
+
+                p {
+                    margin: 0;
+                    font-weight: 700;
+                    font-size: 14px !important;
+                }
+
+                span {
+                    color: color-palette.$base-gray-300;
+                    font-weight: normal;
+                    font-size: 12px;
+                }
+            }
+
+            :deep(svg) {
+                font-size: 1rem;
+                color: variables.$purple-36;
+            }
+        }
+    }
+</style>

package/src/components/nodes/EdgeNode.vue

@@ -17,7 +17,7 @@
             :style="{
                 pointerEvents: 'all',
                 position: 'absolute',
-                transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
+                transform: `translate(-50%, -50%) translate(${path[1] + labelXOffset}px,${path[2] + labelYOffset}px)`,
             }"
         >
             <tooltip :title>
@@ -103,6 +103,22 @@
 
 
     const path = computed(() => getSmoothStepPath(props as any));
+    const isVertical = computed(() => {
+        const dx = (props.targetX ?? 0) - (props.sourceX ?? 0);
+        const dy = (props.targetY ?? 0) - (props.sourceY ?? 0);
+        return Math.abs(dy) >= Math.abs(dx);
+    });
+
+    const OFFSET = 14; 
+    const labelYOffset = computed(() => {
+        if (!isVertical.value) return 0;
+        const boundary = props.data?.edgeBoundary;
+        if (boundary === "top") return -OFFSET;
+        if (boundary === "bottom") return OFFSET;
+        return 0;
+    });
+
+    const labelXOffset = computed(() => 0);
 
     defineOptions({
         inheritAttrs: false,

package/src/components/plugins/CollapsibleProperties.vue

@@ -61,7 +61,8 @@
         extractTypeInfo,
         className,
         type JSONProperty,
-        aggregateAllOf
+        aggregateAllOf,
+        isDynamic
     } from "../../utils/schemaUtils";
     import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
     import Collapsible from "../misc/Collapsible.vue";
@@ -104,18 +105,6 @@
         }
     );
 
-    const isDynamic = (property: JSONProperty): boolean => {
-        if (property["$dynamic"] === true) {
-            return true;
-        }
-
-        if (property["$dynamic"] === false) {
-            return false;
-        }
-
-        return property.anyOf?.some(prop => prop["$dynamic"] === true) ?? false;
-    };
-
     function sortedAndAggregated(schema: Record<string, JSONProperty>): Record<string, JSONProperty> {
         const requiredKeys = [];
         const nonRequiredKeys = [];

package/src/components/plugins/PluginIndex.vue

@@ -1,50 +1,91 @@
 <template>
     <div class="d-flex flex-column gap-4">
-        <slot v-if="description !== undefined" name="markdown" :content="description.replace(/ *:(?![ /])/g, ': ')" />
         <!-- Root plugin page with subgroups -->
         <template v-if="subGroup === undefined && plugins.length > 1">
-            <div class="d-flex flex-column">
-                <RowLink
-                    v-for="subGroupWrapper in subGroupsWrappers"
-                    :id="`group-${slugify(subGroupName(subGroupWrapper))}`"
-                    :icon-b64-svg="'data:image/svg+xml;base64,' + (icons[subGroupWrapper.subGroup] ?? icons[subGroupWrapper.group])"
-                    :text="subGroupName(subGroupWrapper)"
-                    :href="subGroupHref(subGroupName(subGroupWrapper))"
-                    :key="subGroupName(subGroupWrapper)"
-                    :route-path="routePath"
-                    class="text-capitalize"
-                    @click="$emit('goTo', {subGroup: subGroupWrapper})"
-                />
+            <div class="pb-2">
+                <div class="row g-4 last">
+                    <div class="col-md-4 col-lg-6 col-xl-6 col-xxl-4" v-for="subGroupWrapper in subGroupsWrappers" :key="subGroupName(subGroupWrapper)">
+                        <SubgroupCard
+                            :id="slugify(subGroupName(subGroupWrapper))"
+                            :icon-b64-svg="'data:image/svg+xml;base64,' + (icons[subGroupWrapper.subGroup] ?? icons[subGroupWrapper.group])"
+                            :text="getSubgroupTitle(subGroupWrapper)"
+                            :description="getSubgroupDescription(subGroupWrapper)"
+                            :href="`${routePath}/${slugify(subGroupName(subGroupWrapper))}`"
+                            :route-path="routePath"
+                            :plugin-group="subGroupWrapper.group ?? subGroupWrapper.name"
+                            :total-count="getTotalElementCount(subGroupWrapper)"
+                            :blueprints-count="props.subgroupBlueprintCounts?.[`${slugify(subGroupWrapper.group ?? subGroupWrapper.name)}-${slugify(subGroupName(subGroupWrapper))}`] ?? 0"
+                            :is-active="activeId === slugify(subGroupName(subGroupWrapper))"
+                            class="text-capitalize h-100"
+                            @click="$emit('goTo', {subGroup: subGroupWrapper})"
+                        />
+                    </div>
+                </div>
             </div>
         </template>
         <template v-else>
-            <div class="d-flex flex-column elements-section" v-for="(elements, elementType) in elementsByType" :key="elementType">
+            <div class="d-flex flex-column elements-section pb-3" v-for="(elements, elementType) in elementsByType" :key="elementType">
                 <h4 :id="`section-${slugify(elementType)}`" class="text-capitalize">
                     {{ elementType }}
                 </h4>
-                <div class="d-flex flex-column">
-                    <RowLink
-                        v-for="element in elements"
-                        :id="slugify(element)"
-                        :icon-b64-svg="'data:image/svg+xml;base64,' + (icons[element] ?? icons[plugin.subGroup ?? plugin.group] ?? icons[plugin.group])"
-                        :text="elementName(element)"
-                        :href="elementHref(element)"
-                        :key="element"
-                        :route-path="routePath"
-                        class="text-capitalize"
-                        @click="$emit('goTo', {element})"
+                <div class="row g-4 last">
+                    <div class="col-md-4 col-lg-6 col-xl-6 col-xxl-4" v-for="element in elements" :key="element">
+                        <ElementCard
+                            :id="slugify(element)"
+                            :icon-b64-svg="'data:image/svg+xml;base64,' + (icons[element] ?? icons[plugin.subGroup ?? plugin.group] ?? icons[plugin.group])"
+                            :text="elementName(element)"
+                            :plugin-class="element"
+                            :href="elementHref(element)"
+                            :route-path="routePath"
+                            :is-active="activeId === slugify(element)"
+                            :title="schemas?.[element]?.title"
+                            class="h-100"
+                            @click="$emit('goTo', {element})"
+                        >
+                            <template #markdown="{content}">
+                                <slot name="markdown" :content="content" />
+                            </template>
+                        </ElementCard>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template v-if="description !== undefined && plugin.longDescription">
+            <div class="description">
+                <h4 id="how-to-use-this-plugin">
+                    How to use this plugin
+                </h4>
+                <div ref="contentWrap" class="markdown-container" :class="{expanded: isExpanded}">
+                    <div ref="contentInner" class="markdown-inner">
+                        <slot name="markdown" :content="description.replace(/ *:(?![ /])/g, ': ')" />
+                    </div>
+                    <div 
+                        v-if="isOverflow && !isExpanded" 
+                        class="gradient-overlay" 
                     />
                 </div>
+                <div v-if="isOverflow || isExpanded" class="more-wrap text-center">
+                    <button class="more-btn" @click="toggleExpand">
+                        {{ isExpanded ? "See less" : "See more" }}
+                        <component :is="isExpanded ? ChevronUp : ChevronDown" />
+                    </button>
+                </div>
             </div>
         </template>
     </div>
 </template>
 <script setup lang="ts">
-    import RowLink from "../misc/RowLink.vue";
-    import type {Plugin, PluginElement} from "../../utils/plugins";
-    import {isEntryAPluginElementPredicate, subGroupName} from "../../utils/plugins";
+    import {computed, ref} from "vue";
+    import {useElementSize} from "@vueuse/core";
     import {slugify} from "../../utils/url";
-    import {computed} from "vue";
+    import type {Plugin, PluginMetadata} from "../../utils/plugins";
+    import {subGroupName, extractPluginElements} from "../../utils/plugins";
+    import {usePluginElementCounts} from "../../composables/usePluginElementCounts";
+
+    import ElementCard from "../misc/ElementCard.vue";
+    import SubgroupCard from "../misc/SubgroupCard.vue";
+    import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
+    import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
 
     const props = defineProps<{
         plugins: Plugin[],
@@ -52,8 +93,24 @@
         routePath: string
         icons: Record<string, string>
         subGroup?: string | undefined,
+        activeId?: string | undefined
+        subgroupBlueprintCounts?: Record<string, number>,
+        metadataMap?: Record<string, PluginMetadata>,
+        schemas?: Record<string, {title?: string}>
     }>();
 
+    const getSubgroupMetadata = (subGroupWrapper: Plugin) => {
+        return props.metadataMap?.[subGroupWrapper.subGroup ?? subGroupWrapper.group];
+    };
+
+    const getSubgroupDescription = (subGroupWrapper: Plugin) => {
+        return getSubgroupMetadata(subGroupWrapper)?.description ?? subGroupWrapper.description;
+    };
+
+    const getSubgroupTitle = (subGroupWrapper: Plugin) => {
+        return getSubgroupMetadata(subGroupWrapper)?.title ?? subGroupWrapper.title ?? subGroupName(subGroupWrapper);
+    };
+
     const plugin = computed(() => props.plugins.find(p => props.subGroup === undefined ? true : (slugify(subGroupName(p)) === props.subGroup)) as Plugin);
 
     const description = computed(() => {
@@ -70,20 +127,92 @@
         return split?.[split.length - 1];
     }
 
-    const subGroupHref = (targetSubGroup: string) => `${props.routePath}/${slugify(targetSubGroup)}`;
-
     const elementHref = (element: string) => `${props.routePath}/${element}`;
 
-    function extractPluginElements(plugin: Plugin): Record<string, string[]> {
-        return Object.fromEntries(
-            Object.entries(plugin).filter(([key, value]) => isEntryAPluginElementPredicate(key, value))
-                .map(([key, value]) => [key.replace(/[A-Z]/g, match => ` ${match}`), (value as PluginElement[]).filter(({deprecated}) => !deprecated).map(({cls}) => cls)])
-        );
+    function getTotalElementCount(plugin: Plugin): number {
+        const elements = extractPluginElements(plugin);
+        return Object.values(elements).reduce((sum, arr) => sum + arr.length, 0);
     }
 
-    const elementsByType = computed<Record<string, string[]>>(() => extractPluginElements(plugin.value));
+    const {elementsByType} = usePluginElementCounts(plugin);
+
+    const contentWrap = ref<HTMLElement | null>(null);
+    const contentInner = ref<HTMLElement | null>(null);
+    const isExpanded = ref(false);
+
+    const {height: wrapHeight} = useElementSize(contentWrap);
+    const {height: innerHeight} = useElementSize(contentInner);
+
+    const isOverflow = computed(() => innerHeight.value > wrapHeight.value + 2);
+
+    const toggleExpand = () => {
+        isExpanded.value = !isExpanded.value;
+    }
 
     defineEmits<{
         (e: "goTo", target: {subGroup?: Plugin & Pick<Plugin, "subGroup">, element?: string}): void
     }>()
 </script>
+
+<style lang="scss" scoped>
+    @use "../../scss/variables" as variables;
+    
+    h4 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 0 0 1.5rem;
+        color: var(--ks-content-primary);
+    }
+    
+    .description {
+        border-top: 1px solid variables.$black-3;
+        padding: 2rem 3rem;
+        margin: 0 -3rem;
+    }
+
+    .row > * {
+        padding-inline: 8px;
+        margin-top: 1rem;
+    }
+
+    .markdown-container {
+        position: relative;
+        max-height: 384px;
+        overflow: hidden;
+        transition: max-height 250ms ease-in-out;
+
+        &.expanded {
+            max-height: none;
+        }
+    }
+
+    .markdown-inner {
+        color: var(--ks-content-primary);
+    }
+
+    .gradient-overlay {
+        pointer-events: none;
+        position: absolute;
+        inset: auto 0 0;
+        height: 140px;
+        background: linear-gradient(transparent, rgba(10, 11, 13, 0.85));
+    }
+
+    .more-btn {
+        background: rgba(10, 11, 13, 0.85);
+        color: var(--ks-content-primary);
+        border: none;
+        padding: 0.5rem 1rem;
+        border-radius: 999px;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+        font-weight: 400;
+        font-family: 'Source Code Pro', monospace;
+
+        :deep(svg) {
+            font-size: 1.25rem;
+        }
+    }
+</style>

package/src/components/plugins/PropertyDetail.vue

@@ -149,10 +149,12 @@
 </template>
 
 <script setup lang="ts">
-    import {className, extractEnumValues, extractTypeInfo, type JSONProperty} from "../../utils/schemaUtils.ts";
     import {ref} from "vue";
-    import EyeOutline from "vue-material-design-icons/EyeOutline.vue";
+    import {sanitizeForMarkdown} from "../../utils/Utils";
+    import {className, extractEnumValues, extractTypeInfo, type JSONProperty} from "../../utils/schemaUtils.ts";
+    
     import Alert from "../content/Alert.vue";
+    import EyeOutline from "vue-material-design-icons/EyeOutline.vue";
 
     const props = defineProps<{
         property: JSONProperty
@@ -162,9 +164,7 @@
 
     const enumValues = ref(extractEnumValues(props.property));
 
-    const codeSanitizer = (str: string): string => {
-        return str.replace(/(```)(?:bash|yaml|js|console|json)(\n) *([\s\S]*?```)/g, "$1$2$3").replace(/(?<!:):(?![: /])/g, ": ");
-    }
+    const codeSanitizer = sanitizeForMarkdown;
 </script>
 
 <style lang="scss" scoped>

package/src/components/plugins/SchemaToHtml.vue

@@ -160,9 +160,13 @@
             return;
         }
 
-        const definitionKey = hash.includes("#") ? hash.split("#").pop()?.split(".").pop() : hash;
+        const cleanHash = hash.replace(/-body$/, "");
+        
+        const definitionKey = Object.keys(props.schema.definitions).find(defKey => 
+            cleanHash === defKey || cleanHash.startsWith(defKey + "_")
+        );
 
-        if (definitionKey && definitionKey in props.schema.definitions) {
+        if (definitionKey) {
             definitionsExpanded.value = true;
             forceExpandKey.value += 1;
             expandedDefinitions.value.clear();
@@ -174,7 +178,7 @@
             const maxAttempts = 30;
 
             const attemptScroll = () => {
-                const element = document.getElementById(definitionKey);
+                const element = document.getElementById(cleanHash);
                 if (element) {
                     element.scrollIntoView({behavior: "smooth", block: "start"});
                 } else if (attempts < maxAttempts) {