@kestra-io/ui-libs 0.0.263 → 0.0.264

package/src/components/plugins_v2/CollapsiblePropertiesV2.vue

@@ -0,0 +1,183 @@
+<template>
+    <Collapsible class="section-collapsible" :title="sectionName" :href="href" @expand="emit('expand')" :initially-expanded="initiallyExpanded || autoExpanded" :no-url-change="noUrlChange">
+        <template v-if="Object.keys(properties ?? {}).length > 0" #content>
+            <div class="border overflow-hidden">
+                <Collapsible
+                    class="property"
+                    v-for="(property, propertyKey) in sortedAndAggregated(properties)"
+                    :key="propertyKey"
+                    :title="propertyKey"
+                    :href="href + '_' + propertyKey"
+                    @expand="autoExpanded = true"
+                    :no-url-change
+                    :class="sectionClass"
+                >
+                    <template #right>
+                        <PropertyBadges :property="property" :show-dynamic="showDynamic" />
+                    </template>
+                    <template #content>
+                        <PropertyDetail :property="property" :definitions="definitions" :section="sectionName.toLowerCase()">
+                            <template #markdown="{content}">
+                                <slot :content="content" name="markdown" />
+                            </template>
+                        </PropertyDetail>
+                    </template>
+                </Collapsible>
+            </div>
+        </template>
+    </Collapsible>
+</template>
+
+<script setup lang="ts">
+    import {
+        type JSONProperty,
+        type JSONSchema,
+        aggregateAllOf
+    } from "../../utils/schemaUtils";
+    import Collapsible from "./CollapsibleV2.vue";
+    import PropertyDetail from "../plugins_v2/PropertyDetailV2.vue";
+    import PropertyBadges from "../plugins_v2/PropertyBadges.vue";
+    import {ref, watch, computed} from "vue";
+
+    const props = withDefaults(defineProps<{ 
+        href?: string, 
+        sectionName: string, 
+        properties?: Record<string, JSONProperty>, 
+        showDynamic?: boolean, 
+        initiallyExpanded?: boolean, 
+        forceInclude?: string[],
+        noUrlChange?: boolean,
+        definitions?: Record<string, JSONSchema>
+    }>(), {
+        properties: undefined,
+        href: Math.random().toString(36).substring(2, 5),
+        showDynamic: true,
+        initiallyExpanded: false,
+        forceInclude: () => [] as string[],
+        noUrlChange: false,
+        definitions: undefined
+    });
+
+    const emit = defineEmits(["expand"]);
+
+    const sectionClass = computed(() => {
+        const name = props.sectionName.toLowerCase();
+        if (name === "properties") return "section-properties";
+        if (name === "outputs") return "section-outputs";
+        if (name === "metrics") return "section-metrics";
+        return "";
+    });
+
+    const autoExpanded = ref(false);
+
+    watch(
+        autoExpanded,
+        newInitiallyExpanded => {
+            if (newInitiallyExpanded) {
+                emit("expand");
+            }
+        }
+    );
+
+    function sortedAndAggregated(schema: Record<string, JSONProperty>): Record<string, JSONProperty> {
+        const requiredKeys = [];
+        const nonRequiredKeys = [];
+
+        for (const key in schema) {
+            if (typeof schema[key] === "object") {
+                schema[key] = aggregateAllOf(schema[key]);
+                if (schema[key].$required) {
+                    requiredKeys.push(key);
+                } else {
+                    nonRequiredKeys.push(key);
+                }
+            }
+        }
+
+        const sortedKeys = [...requiredKeys.sort(), ...nonRequiredKeys.sort()];
+
+        const sortedSchema = {} as Record<string, JSONProperty>;
+        sortedKeys.forEach(key => {
+            if (!schema[key].$deprecated || props.forceInclude?.includes(key)) {
+                sortedSchema[key] = schema[key];
+            }
+        });
+
+        return sortedSchema;
+    }
+</script>
+
+<style lang="scss" scoped>
+    @use "../../scss/variables" as variables;
+    @use "../../scss/color-palette" as color-palette;
+
+    .border {
+        border-radius: .5rem;
+    }
+
+    .property {
+
+        &:deep(> button) {
+            font-size: 1rem !important;
+            line-height: 1.5rem;
+        }
+
+        :deep(> .collapse-button) {
+            padding: 9px 16px;
+            border: 1px solid variables.$black-6;
+            border-radius: 12px;
+            background-color: variables.$black-9;
+            transition: border-radius 150ms ease;
+        }
+
+        &[open] {
+            :deep(> .collapse-button) {
+                border-radius: 12px 12px 0 0;
+            }
+        }
+
+        &:not([open]) {
+            :deep(> .collapse-button) {
+                margin-bottom: 1rem;
+            }
+        }
+
+        :deep(> .collapsible-body:not(.collapsed)) {
+            padding-top: .75rem;
+            padding-bottom: .75rem;
+        }
+
+        :deep(.property-detail) {
+            border: 1px solid variables.$black-6;
+            margin-bottom: 1rem;
+            border-radius: 0 0 12px 12px;
+
+            &:first-child {
+                border-top: none;
+            }
+        }
+
+        :deep(.property-detail > *) {
+            padding: 1rem 2rem;
+        }
+    }
+
+    $section-colors: (
+        properties: color-palette.$base-blue-300,
+        outputs: color-palette.$base-green-300,
+        metrics: color-palette.$base-orange-400
+    );
+
+
+    @each $section, $color in $section-colors {
+        .section-#{$section} {
+            :deep(.collapse-button span:not(.type-box)) {
+                color: $color;
+                font-size: 1rem;
+                font-weight: normal;
+                font-family: "source code pro", monospace;
+            }
+        }
+    }
+
+</style>

package/src/components/plugins_v2/CollapsibleV2.vue

@@ -0,0 +1,121 @@
+<template>
+    <details :id="href" :open="open">
+        <summary
+            class="d-flex align-items-center justify-content-between fw-bold gap-2 collapse-button"
+            :class="{collapsed}"
+            @click="handleToggle"
+        >
+            <span>{{ title }}<slot name="additional" /></span>
+            <slot name="right" />
+            <span v-if="arrow" class="chevron">
+                <component :is="collapsed ? ChevronRight : ChevronDown" />
+            </span>
+        </summary>
+        <div v-if="$slots.content" :id="href + '-body'">
+            <div>
+                <slot name="content" />
+            </div>
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+    import {ref, watch, computed} from "vue";
+    import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
+    import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
+    import {useBrowserLocation} from "@vueuse/core";
+
+    const props = withDefaults(defineProps<{
+        href?: string,
+        title: string,
+        arrow?: boolean,
+        initiallyExpanded?: boolean
+        noUrlChange?: boolean
+    }>(), {
+        href: Math.random().toString(36).substring(2, 5),
+        arrow: true,
+        initiallyExpanded: false,
+        noUrlChange: false
+    });
+
+    const collapsed = ref(true);
+
+    const location = useBrowserLocation();
+
+    const emit = defineEmits(["expand"]);
+
+    const getHash = computed(() => `#${props.href}-body`);
+    
+    const handleToggle = (event: Event) => {
+        event.preventDefault();
+        collapsed.value = !collapsed.value;
+        open.value = !collapsed.value;
+        if(!collapsed.value) {
+            emit("expand");
+        }
+        if (props.noUrlChange) return;
+
+        const newUrl = window.location.pathname + window.location.search + (!collapsed.value ? getHash.value : "");
+        
+        try {
+            window.history.pushState(null, "", newUrl);
+        } catch {
+            try {
+                if (!collapsed.value) window.location.hash = getHash.value;
+                else window.history.replaceState(null, "", window.location.pathname + window.location.search);
+            } catch {
+                void 0;
+            }
+        }
+    };
+
+    const open = ref(false);
+
+    watch(
+        () => props.initiallyExpanded,
+        (initiallyExpanded) => {
+            if (initiallyExpanded !== undefined) {
+                open.value = initiallyExpanded;
+                collapsed.value = !initiallyExpanded;
+            }
+        }
+        , {immediate: true});
+
+    watch(
+        () => location.value.hash,
+        (hash) => {
+            if (hash === getHash.value && collapsed.value) {
+                open.value = true;
+                collapsed.value = false;
+            }
+        }
+        , {immediate: true});
+</script>
+
+<style scoped lang="scss">
+    details{
+        overflow: hidden;
+    }
+
+    details::details-content{
+        block-size: 0%;
+        transition: block-size 150ms,
+        content-visibility 150ms;
+        transition-behavior: allow-discrete;
+    }
+
+    details[open]::details-content{
+        block-size: auto;
+    }
+
+    .collapse-button {
+        padding: 0;
+        border: none;
+        background: none;
+
+        &:focus {
+            outline: none;
+            box-shadow: none;
+        }
+    }
+</style>

package/src/components/plugins_v2/DefinitionCollapsible.vue

@@ -0,0 +1,208 @@
+<template>
+    <Collapsible
+        :title="definition.title"
+        :href="`def-${definition.key}`"
+        class="def-collapsible"
+        :class="`section-${section}`"
+        arrow
+        no-url-change
+    >
+        <template #content>
+            <div class="def-content">
+                <div v-for="(prop, propKey) in definition.properties" :key="propKey" class="def-property">
+                    <div class="d-flex align-items-center justify-content-between gap-2">
+                        <span>{{ propKey }}</span>
+                        <PropertyBadges :property="prop" :show-dynamic="false" section-class="section-properties" />
+                    </div>
+
+                    <PropertyMeta :property="prop" :subtype="getSubtype(prop)" :enum-values="getEnumValues(prop)" />
+
+                    <div v-if="prop.title !== undefined || prop.description !== undefined" class="property-desc mt-2">
+                        <slot v-if="prop.title" :content="codeSanitizer(prop.title)" name="markdown" />
+                        <slot v-if="prop.description" :content="codeSanitizer(prop.description)" name="markdown" />
+                    </div>
+
+                    <div v-if="depth < maxDepth && getDefs(prop).length" class="mt-3 nested-defs">
+                        <DefinitionCollapsible
+                            v-for="nested in getDefs(prop)"
+                            :key="`${definition.key}-${nested.key}`"
+                            :definition="nested"
+                            :definitions="definitions"
+                            :visited-keys="visitedKeysWithCurrent"
+                            :depth="depth + 1"
+                            :max-depth="maxDepth"
+                        >
+                            <template #markdown="{content}">
+                                <slot :content="content" name="markdown" />
+                            </template>
+                        </DefinitionCollapsible>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Collapsible>
+</template>
+
+<script setup lang="ts">
+    import {computed} from "vue";
+    import {
+        extractEnumValues, 
+        extractTypeInfo, 
+        extractReferencedDefinitions, 
+        type JSONProperty, 
+        type JSONSchema
+    } from "../../utils/schemaUtils.ts";
+    import {sanitizeForMarkdown} from "../../utils/Utils";
+    import Collapsible from "./CollapsibleV2.vue";
+    import PropertyBadges from "./PropertyBadges.vue";
+    import PropertyMeta from "./PropertyMeta.vue";
+
+    const props = withDefaults(defineProps<{
+        definition: {
+            key: string,
+            title: string,
+            properties: Record<string, 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"
+    });
+
+    defineSlots<{
+        markdown: { content: string }
+    }>();
+
+    const codeSanitizer = sanitizeForMarkdown;
+
+    const getSubtype = (p: JSONProperty) => {
+        const subtype = extractTypeInfo(p).subType;
+        return subtype && !subtype.startsWith("#") ? subtype : undefined;
+    }
+
+    const getEnumValues = (p: JSONProperty) => extractEnumValues(p);
+
+    const getDefs = (p: JSONProperty) => {
+        const defs = props.definitions;
+        const d = props.depth;
+        const max = props.maxDepth;
+        const visited = props.visitedKeys;
+        
+        if (!defs || d >= max) return [];
+        return extractReferencedDefinitions(p, defs, visited);
+    }
+
+    const visitedKeysWithCurrent = computed(() => {
+        const newSet = new Set(props.visitedKeys);
+        newSet.add(props.definition.key);
+        return newSet;
+    });
+</script>
+
+<style lang="scss" scoped>
+    @use "../../scss/variables" as variables;
+    @use "../../scss/color-palette" as color-palette;
+
+    $section-colors: (
+        properties: color-palette.$base-blue-300,
+        outputs: color-palette.$base-green-300,
+        metrics: color-palette.$base-orange-400
+    );
+
+    @each $section, $color in $section-colors {
+        .section-#{$section} {
+            .def-property span {
+                color: $color;
+            }
+        }
+    }
+
+    .def-collapsible {
+        margin-bottom: 0.875rem;
+
+        :deep(.collapse-button span:not(.type-box)) {
+            color: variables.$purple-37 !important;
+            font-weight: 500 !important;
+            font-size: 12px !important;
+            font-family: "Source code pro", monospace;
+            white-space: normal !important;
+            overflow-wrap: anywhere !important;
+            word-break: break-word !important;
+            display: inline-block !important;
+            max-width: 100%;
+        }
+
+        :deep(summary) {
+            padding: 9px 1.875rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+            background: variables.$black-9;
+            border: 1px solid variables.$black-6;
+            border-radius: 12px 12px 0 0;
+            transition: border-radius 150ms ease;
+        }
+
+        :deep(summary.collapsed) {
+            border-radius: 12px;
+        }
+
+        .def-content {
+            padding: 1rem 0;
+            background: variables.$black-4;
+            border: 1px solid variables.$black-6;
+            border-top: none;
+            border-radius: 0 0 12px 12px
+        }
+
+        .def-property {
+            padding: 9px 2rem;
+            border-bottom: 1px solid variables.$black-6;
+
+            &:last-child {
+                border-bottom: none;
+                padding-bottom: 0;
+            }
+
+            &:first-child {
+                padding-top: 0;
+            }
+
+            span {
+                font-size: 12px !important;
+                font-family: "Source code pro", monospace;
+            }
+        }
+
+        .property-desc {
+            font-size: 0.875rem;
+            color: var(--ks-content-secondary) !important;
+            line-height: 1.5;
+
+            :deep(p) {
+                margin: 0;
+                font-size: 0.875rem !important;
+                line-height: 22px;
+                font-weight: normal;
+            }
+
+            :deep(code) {
+                font-size: 0.8125rem;
+            }
+        }
+    }
+
+    .nested-defs {
+        .def-collapsible {
+            :deep(summary) {
+                padding-left: 1.5rem;
+            }
+        }
+    }
+</style>

package/src/components/plugins_v2/PropertyBadges.vue

@@ -0,0 +1,93 @@
+<template>
+    <span class="d-flex flex-grow-1 align-items-center">
+        <span class="d-flex gap-2 flex-wrap align-items-center" :class="sectionClass">
+            <Tooltip v-if="property && property['$required']" class="d-flex align-items-center" title="Required">
+                <span class="text-danger">*</span>
+            </Tooltip>
+            <Tooltip v-if="showDynamic && property && !isDynamic(property)" class="d-flex" title="Non-dynamic">
+                <Snowflake class="text-info" />
+            </Tooltip>
+            <Tooltip v-if="property && property['$beta']" class="d-flex" title="Beta">
+                <AlphaBBox class="text-warning" />
+            </Tooltip>
+            <Tooltip v-if="property && property['$deprecated']" class="d-flex" title="Deprecated">
+                <Alert class="text-warning" />
+            </Tooltip>
+            <template v-if="property">
+                <span v-for="type in getBaseTypes(property)" :key="type" class="type-box rounded fs-7 px-2 py-1">
+                    {{ type }}
+                </span>
+            </template>
+        </span>
+    </span>
+</template>
+
+<script setup lang="ts">
+    import {
+        extractTypeInfo,
+        type JSONProperty,
+        isDynamic
+    } from "../../utils/schemaUtils";
+    import Tooltip from "../misc/Tooltip.vue";
+    import Alert from "vue-material-design-icons/Alert.vue";
+    import Snowflake from "vue-material-design-icons/Snowflake.vue";
+    import AlphaBBox from "vue-material-design-icons/AlphaBBox.vue";
+
+    withDefaults(defineProps<{
+        property: JSONProperty,
+        showDynamic?: boolean,
+        sectionClass?: string
+    }>(), {
+        showDynamic: true,
+        sectionClass: ""
+    });
+
+
+    function getBaseTypes(property: JSONProperty): string[] {
+        const typeInfo = extractTypeInfo(property);
+        return typeInfo.types.filter(type => !type.startsWith("#"));
+    }
+</script>
+
+<style lang="scss" scoped>
+    @use "../../scss/color-palette" as color-palette;
+
+    $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;
+    }
+
+    @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>