@kestra-io/ui-libs 0.0.79 → 0.0.80

package/src/components/plugins/SchemaToHtml.vue

@@ -1,200 +1,116 @@
 <template>
     <div class="bd-markdown">
-        <div class="doc-alert alert alert-warning" role="alert" v-if="page.deprecated">
-            <p>⚠ Deprecated</p>
+        <div class="doc-alert alert alert-info" 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>
 
-        <SchemaToCode language="yaml" :code="`type: &quot;${getPageName()}&quot;`" />
-        <p v-if="page.title">
-            <span style="font-size:1.5em;" v-html="replaceText(page.title)" />
+        <SchemaToCode :highlighter="highlighter" language="yaml" :code="`type: &quot;${pluginType}&quot;`" />
+        <p v-if="schema.properties?.title">
+            <span style="font-size:1.5em;" v-html="replaceText(schema.properties.title)" />
         </p>
-        <slot v-if="page.description" :content="page.description" name="markdown" />
-        <h2 id="examples" v-if="page.body.children['examples']">
-            <a href="#examples">Examples</a>
-        </h2>
-        <template
-            v-for="(example, index) in page?.body?.children?.['examples'] ?? []"
-            :key="index"
-        >
-            <slot v-if="example.title" :content="example.title" name="markdown" />
-            <SchemaToCode :language="example.lang" :code="generateExampleCode(example)" v-if="example.code" />
+
+        <slot v-if="schema.properties?.description" :content="schema.properties.description" name="markdown" />
+
+        <template v-if="schema.properties?.['$examples']">
+            <h2 id="examples">
+                <a href="#examples">Examples</a>
+            </h2>
+            <template
+                v-for="(example, index) in schema.properties['$examples']"
+                :key="index"
+            >
+                <slot v-if="example.title" :content="example.title" name="markdown" />
+                <SchemaToCode :highlighter="highlighter" :language="example.lang ?? 'yaml'" :code="generateExampleCode(example)" v-if="example.code" />
+            </template>
         </template>
-        <template v-for="(pageBlock, key) in page?.body?.children ?? []" :key="key">
-            <template v-if="key !== 'examples'">
-                <h2 :id="key">
-                    <a :href="`#${key}`">{{ capitalizeFirstLetter(key) }}</a>
-                </h2>
-                <template v-if="key !== 'definitions'">
-                    <template v-for="(property, propertyKey) in sortSchemaByRequired(pageBlock)" :key="propertyKey">
-                        <h3 :id="property.name || propertyKey">
-                            <a :href="`#${property.name || propertyKey}`">
-                                <code>{{ property.name || propertyKey }}</code>
-                            </a>
-                        </h3>
-                        <div
-                            class="doc-alert alert alert-warning"
-                            role="alert"
-                            v-if="property['$deprecated']"
-                        >
-                            <p>⚠ Deprecated</p>
-                        </div>
-                        <ul>
-                            <li>
-                                <strong>Type: </strong>
-                                <mark
-                                    class="type-mark type-mark-default"
-                                    v-if="property.type || property['$ref']"
-                                >
-                                    {{ property.type || property['$ref']?.split('.').reverse()[0] }}
-                                </mark>
-                                <ul v-else-if="property.anyOf">
-                                    <li v-for="(anyOf, index) in property.anyOf" :key="index">
-                                        <mark class="type-mark type-mark-default">{{ anyOf.type }}</mark>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li v-if="property.items">
-                                <strong>SubType: </strong>
-                                <a
-                                    aria-current="page"
-                                    v-if="property.items['$ref']"
-                                    :href="generateTaskHref(property.items['$ref'])"
-                                    class="router-link-active router-link-exact-active"
-                                >
-                                    <mark class="type-mark type-mark-default">
-                                        {{ property.items['$ref']?.split('.').reverse()[0] ||
-                                            property.items.type ||'String' }}
-                                    </mark>
-                                </a>
-                                <mark v-else class="type-mark type-mark-default">
-                                    {{ property.items['$ref']?.split('.').reverse()[0] || 
-                                        property.items.type ||'String' }}
-                                </mark>
-                            </li>
-                            <li v-if="property['$dynamic'] !== undefined">
-                                <strong>Dynamic: </strong>{{
-                                    property['$dynamic'] === true ? "✔️" :
-                                    (property['$dynamic'] === false ? "❌" : "❓") }}
-                            </li>
-                            <li v-if="property['$required'] !== undefined">
-                                <strong>Required: </strong> {{
-                                    property['$required'] === true ? "✔️" :
-                                    (property['$required'] === false ? "❌" : "❓") }}
-                            </li>
-                            <li v-if="property.default !== undefined">
-                                <strong>Default: </strong>
-                                <code>{{ property.default }}</code>
-                            </li>
-                            <li v-if="property.format">
-                                <strong>Format: </strong>
-                                <code> {{ property.format }} </code>
-                            </li>
-                            <li v-if="property.minItems">
-                                <strong>Min items: </strong>
-                                <code> {{ property.minItems }} </code>
-                            </li>
-                            <li v-if="property.minLength">
-                                <strong>Min length: </strong>
-                                <code>{{ property.minLength }}</code>
-                            </li>
-                            <li v-if="property.enum">
-                                <strong>Possible Values:</strong>
-                                <ul>
-                                    <li v-for="(possibleValue, index) in property.enum" :key="index">
-                                        <code data-v-c4861ad0="" class="">{{ possibleValue }}</code>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
 
-                        <slot v-if="property.title" :content="property.title" name="markdown" />
-                        <blockquote class="blockquote">
-                            <slot v-if="property.description" :content="property.description" name="markdown" />
-                        </blockquote>
-                    </template>
-                </template>
-                <template v-else-if="pageBlock">
-                    <template
-                        v-for="(item, childrenBlockKey) in pageBlock"
-                        :key="childrenBlockKey"
-                    >
-                        <h3 :id="childrenBlockKey">
-                            <a :href="`#${childrenBlockKey}`">
-                                <code>{{ childrenBlockKey }}</code>
-                            </a>
-                        </h3>
-                        <h4
-                            id="properties-1"
-                            v-if="item.properties"
-                        >
-                            <a href="#properties-1">Properties</a>
-                        </h4>
-                        <template
-                            v-for="(definition, propertyKey) in item.properties ?? []"
-                            :key="propertyKey"
-                        >
-                            <h5 :id="definition.name || propertyKey">
-                                <a :href="`#${definition.name || propertyKey}`">
-                                    <code>{{ definition.name || propertyKey }}</code>
-                                </a>
-                            </h5>
-                            <ul>
-                                <li>
-                                    <strong>Type: </strong>
-                                    <mark class="type-mark type-mark-default">
-                                        {{ definition.type ||
-                                            definition['$ref']?.split('.').reverse()[0] }}
-                                    </mark>
-                                </li>
-                                <li v-if="definition.items">
-                                    <strong>SubType: </strong>
-                                    <a
-                                        aria-current="page"
-                                        v-if="definition.items['$ref']"
-                                        :href="generateTaskHref(definition.items['$ref'])"
-                                        class="router-link-active router-link-exact-active"
-                                    >
-                                        <mark class="type-mark type-mark-default">
-                                            {{ definition.items?.type || 'Task' }}
-                                        </mark>
-                                    </a>
-                                    <mark v-else class="type-mark type-mark-default">
-                                        {{ definition.items?.type || 'Task' }}
-                                    </mark>
-                                </li>
-                                <li v-if="definition['$dynamic'] !== undefined">
-                                    <strong>Dynamic: </strong>
-                                    {{ definition['$dynamic'] === true ? "✔️" :
-                                        (definition['$dynamic'] === false ? "❌" : "❓") }}
-                                </li>
-                                <li v-if="definition['$required'] !== undefined">
-                                    <strong>Required: </strong>
-                                    {{
-                                        definition['$required'] === true ? "✔️" :
-                                        (definition['$required'] === false ? "❌" : "❓") }}
-                                </li>
-                                <li v-if="definition.default !== undefined">
-                                    <strong>Default: </strong>
-                                    <code>{{ definition.default }}</code>
-                                </li>
-                                <li v-if="definition.format">
-                                    <strong>Format: </strong>
-                                    <code>{{ definition.format }}</code>
-                                </li>
-                                <li v-if="definition.minItems">
-                                    <strong>Min items: </strong>
-                                    <code>{{ definition.minItems }}</code>
-                                </li>
-                            </ul>
-                            <p>
-                                <strong v-html="replaceText(definition.title)" />
-                            </p>
-                            <blockquote class="blockquote">
-                                <p v-html="replaceText(definition.description)" />
-                            </blockquote>
+        <template v-if="schema.properties?.properties">
+            <h2 id="properties">
+                <a href="#properties">Properties</a>
+            </h2>
+
+            <template v-for="(property, propertyKey) in sortSchemaByRequired(schema.properties.properties)" :key="propertyKey">
+                <h3 :id="propertyKey">
+                    <a :href="`#${propertyKey}`">
+                        <code>{{ propertyKey }}</code>
+                    </a>
+                </h3>
+                <div
+                    class="doc-alert alert alert-info"
+                    role="alert"
+                    v-if="property['$beta']"
+                >
+                    <p>This property 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>
+                <ul>
+                    <PropertyDetail :property="property" :text-sanitizer="replaceText">
+                        <template #markdown="{content}">
+                            <slot :content="content" name="markdown" />
                         </template>
+                    </PropertyDetail>
+                </ul>
+            </template>
+        </template>
+
+        <template v-if="schema.outputs?.properties">
+            <h2 id="outputs">
+                <a href="#outputs">Outputs</a>
+            </h2>
+
+            <template v-for="(output, outputKey) in sortSchemaByRequired(schema.outputs.properties)" :key="outputKey">
+                <h3 :id="outputKey">
+                    <a :href="`#${outputKey}`">
+                        <code>{{ outputKey }}</code>
+                    </a>
+                </h3>
+                <div
+                    class="doc-alert alert alert-warning"
+                    role="alert"
+                    v-if="output['$deprecated']"
+                >
+                    <p>⚠ Deprecated</p>
+                </div>
+                <div
+                    class="doc-alert alert alert-info"
+                    role="alert"
+                    v-if="output['$beta']"
+                >
+                    <p>This property 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>
+                <ul>
+                    <PropertyDetail :show-dynamic="false" :property="output" :text-sanitizer="replaceText" />
+                </ul>
+            </template>
+        </template>
+
+        <template v-if="schema.definitions">
+            <h2 id="definitions">
+                <a href="#definitions">Definitions</a>
+            </h2>
+
+            <template v-for="(definition, definitionKey) in schema.definitions" :key="definitionKey">
+                <h3 :id="definitionKey">
+                    <a :href="`#${definitionKey}`">
+                        <code>{{ definitionKey }}</code>
+                    </a>
+                </h3>
+                <h4 :id="'properties-' + definitionKey" v-if="(definition.properties?.length ?? 0) > 0">
+                    <a :href="`#properties-${definitionKey}`">
+                        Properties
+                    </a>
+                </h4>
+                <ul>
+                    <template v-for="(property, propertyKey) in sortSchemaByRequired(definition.properties)" :key="propertyKey">
+                        <h5 :id="definitionKey + '-' + propertyKey" v-if="definition.properties">
+                            <code>
+                                {{ propertyKey }}
+                            </code>
+                        </h5>
+                        <PropertyDetail :property="property" :text-sanitizer="replaceText" />
                     </template>
-                </template>
+                </ul>
             </template>
         </template>
     </div>
@@ -202,24 +118,26 @@
 
 <script setup>
     import SchemaToCode from "./SchemaToCode.vue";
+    import {createHighlighterCore} from "shiki/core";
+    import githubDark from "shiki/themes/github-dark.mjs";
+    import yaml from "shiki/langs/yaml.mjs";
+    import python from "shiki/langs/python.mjs";
+    import javascript from "shiki/langs/javascript.mjs";
     import {computed} from "vue";
+    import PropertyDetail from "./PropertyDetail.vue";
+    import {createJavaScriptRegexEngine} from "shiki/engine/javascript";
 
     const props = defineProps({
-        page: {
+        schema: {
             type: Object,
             required: true,
         },
-        getPageName: {
-            type: Function,
+        pluginType: {
+            type: String,
             required: true,
         }
     });
 
-
-    function capitalizeFirstLetter(str) {
-        return str.charAt(0).toUpperCase() + str.slice(1);
-    }
-
     const replaceText = (str) => {
         str = str?.split("```")[0]?.replace(/`([^`]*)`/g, "<code>$1</code>");
         str = str?.replace(
@@ -235,14 +153,8 @@
         return str?.split("```")[0];
     };
 
-    const generateTaskHref = (href) => {
-        if (href) {
-            const taskHref = href?.split("/");
-            return `#${taskHref[taskHref?.length - 1].toLowerCase()}`;
-        }
-    };
     computed(() => {
-        const textBlocks = props.page?.description.split("\n\n");
+        const textBlocks = props.schema?.description.split("\n\n");
         let content = "";
         textBlocks.forEach((text) => {
             const newText = replaceText(text);
@@ -284,7 +196,7 @@
             }
         }
 
-        const sortedKeys = [...requiredKeys, ...nonRequiredKeys];
+        const sortedKeys = [...requiredKeys.sort(), ...nonRequiredKeys.sort()];
 
         const sortedSchema = {};
         sortedKeys.forEach(key => {
@@ -309,26 +221,34 @@
 
     const generateExampleCode = (example) => {
         if (!example?.full) {
-            const firstCode = `id: "${props.getPageName()?.split(".").reverse()[0]?.toLowerCase()}"\ntype: "${props.getPageName()}"\n`;
-            return firstCode.concat(example.code)
+            const fullCode = `id: "${props.pluginType.split(".").reverse()[0]?.toLowerCase()}"\ntype: "${props.pluginType}"\n`;
+            return fullCode.concat(example.code)
         }
 
         return example.code;
     }
+
+    const highlighter = await createHighlighterCore({
+        themes: [
+            githubDark
+        ],
+        langs: [
+            yaml,
+            python,
+            javascript
+        ],
+        engine: createJavaScriptRegexEngine(),
+    });
 </script>
 
 <style lang="scss" scoped>
-    :deep(.bd-markdown) {
-        p {
-            strong {
-                code{
-                    background: #161617;
-                    border: 1px solid #252526;
-                    border-radius: var(--bs-border-radius);
-                    color: #b9b9ba;
-                    padding: 0 .25rem;
-                }
-            }
+    .bd-markdown {
+        code{
+            background: #161617;
+            border: 1px solid #252526;
+            border-radius: var(--bs-border-radius);
+            color: #b9b9ba;
+            padding: 0 .25rem;
         }
     }
 </style>

package/src/scss/bootstrap-overload.scss

@@ -54,3 +54,7 @@ $theme-colors: $custom-colors;
         --bs-tooltip-bg: var(--bs-gray-100);
     }
 }
+
+.nested-fw-bold * {
+    font-weight: bold !important;
+}

package/src/utils/YamlUtils.js

@@ -1,6 +1,6 @@
 import JsYaml from "js-yaml";
 import yaml, {Document, YAMLMap, isSeq, isMap, Pair, Scalar, YAMLSeq, LineCounter} from "yaml";
-import {cloneDeep} from "lodash"
+import cloneDeep from "lodash/cloneDeep"
 import {SECTIONS} from "./constants.js";
 
 const TOSTRING_OPTIONS = {lineWidth: 0};

package/src/utils/state.js

@@ -1,4 +1,4 @@
-import {mapValues} from "lodash";
+import mapValues from "lodash/mapValues";
 import PauseCircle from "vue-material-design-icons/PauseCircle.vue";
 import CheckCircle from "vue-material-design-icons/CheckCircle.vue";
 import PlayCircle from "vue-material-design-icons/PlayCircle.vue";
@@ -7,7 +7,6 @@ import StopCircle from "vue-material-design-icons/StopCircle.vue";
 import SkipPreviousCircle from "vue-material-design-icons/SkipPreviousCircle.vue";
 import AlertCircle from "vue-material-design-icons/AlertCircle.vue";
 import DotsVerticalCircle from "vue-material-design-icons/DotsVerticalCircle.vue";
-// import {cssVariable} from "./global"
 
 const STATE = Object.freeze({
     CREATED: {