@kestra-io/ui-libs 0.0.78 → 0.0.80

package/dist/style.css

@@ -1 +1 @@
-.tooltip-custom .tooltip-inner{max-width:none}.circle-button[data-v-c86183e9]{border-radius:1rem;width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;pointer-events:auto!important}.button-icon[data-v-c86183e9]{font-size:.75rem}.badge[data-v-c86183e9]{top:-3px;position:relative;left:-3px;display:inline-block;max-width:100%}.text-color[data-v-c86183e9]{color:var(--bs-white);font-size:.5rem;font-weight:700;padding:.25rem .5rem}.top-button-div[data-v-c86183e9]{position:absolute;top:-.5rem;right:-.5rem;justify-content:center;padding-right:3px;display:flex}.custom-handle[data-v-00cf8c59]{visibility:hidden}.dot[data-v-00cf8c59]{display:flex;flex-direction:column;align-items:center;font-size:5px}.add-task-div[data-v-2bdfbc4f]{margin:.2rem;width:25px;height:25px;border:.4px solid var(--bs-border-color);background-color:var(--bs-white)}html.dark .add-task-div[data-v-2bdfbc4f]{background-color:var(--card-bg)}.add-task-div.text-danger[data-v-2bdfbc4f]{border-color:#e36065}.wrapper[data-v-d741b593]{display:inline-block;width:100%;height:100%;position:relative}.wrapper[data-v-d741b593] span{position:absolute;padding:1px;left:0;display:block;width:100%;height:100%}.wrapper[data-v-d741b593] .icon{width:100%;height:100%;display:block;background-size:contain;background-repeat:no-repeat;background-position:center center}.node-wrapper[data-v-aa670693]{background-color:var(--bs-white);width:184px;height:44px;margin:0;padding:8px;display:flex;z-index:150000;align-items:center;box-shadow:0 12px 12px #82679e1a}html.dark .node-wrapper[data-v-aa670693]{background-color:var(--bs-gray-300)}.node-wrapper.execution-no-taskrun[data-v-aa670693],.node-wrapper.disabled[data-v-aa670693]{background-color:var(--bs-gray-200)}html.dark .node-wrapper.execution-no-taskrun[data-v-aa670693],html.dark .node-wrapper.disabled[data-v-aa670693]{background-color:var(--bs-gray-500)}.node-wrapper.disabled .task-title[data-v-aa670693]{color:var(--bs-gray-500);text-decoration:line-through}html.dark .node-wrapper.disabled .task-title[data-v-aa670693]{color:var(--bs-gray-600)}.node-wrapper .icon[data-v-aa670693]{margin:.2rem;width:25px;height:25px;border:.4px solid var(--bs-border-color)}.node-content[data-v-aa670693]{display:flex;flex-direction:column;justify-content:center;margin-left:.7rem}.node-content>.node-title[data-v-aa670693]{width:125px}.description-button[data-v-aa670693]{color:var(--bs-gray-700);cursor:pointer}.material-design-icon.icon-rounded[data-v-aa670693]{border-radius:1rem;padding:1px}.circle-button[data-v-aa670693]{border-radius:1rem;width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;margin-left:.25rem}.button-icon[data-v-aa670693]{font-size:.75rem}.task-title[data-v-aa670693]{font-size:.75rem;font-weight:700;color:var(--bs-black);flex-grow:1}html.dark .task-title[data-v-aa670693]{color:var(--bs-white)}.status-div[data-v-aa670693]{width:8px;height:100%;position:absolute;left:-.04438rem;border-radius:.5rem 0 0 .5rem}.duration-tt{text-align:left;white-space:nowrap;max-width:none}.duration-tt .square{display:inline-block;width:10px;height:10px;margin-right:5px}.content[data-v-9bea95bb]{color:var(--bs-gray-700)}.content-children[data-v-9bea95bb]{font-size:.7rem}.collapsed-cluster-node[data-v-e12d4062]{width:150px;height:44px;padding:8px}.node-text[data-v-e12d4062]{color:#000;font-size:.9rem;display:flex;align-items:center}html.dark .node-text[data-v-e12d4062]{color:#fff}.circle-button[data-v-e12d4062]{border-radius:1rem;width:1rem;height:1rem;display:flex;justify-content:center;align-items:center}.button-icon[data-v-e12d4062]{font-size:.75rem}.dependency-node-wrapper[data-v-cff03edd]{background-color:var(--bs-white);color:var(--bs-black);width:184px;height:44px;margin:0;padding:8px 18px 8px 6px;display:flex;align-items:center;box-shadow:0 12px 12px #82679e1a}html.dark .dependency-node-wrapper[data-v-cff03edd]{background-color:var(--card-bg);color:var(--bs-white)}.wrapper[data-v-cff03edd]{width:26px}.dependency-text[data-v-cff03edd]{margin-left:.5rem}.dependency-flow-text[data-v-cff03edd]{font-size:.85rem;font-weight:700;max-width:121px}.dependency-namespace-text[data-v-cff03edd]{font-size:.625rem;font-weight:400;color:#564a75;max-width:121px}html.dark .dependency-namespace-text[data-v-cff03edd]{color:#e3dbff}svg[data-v-084c51e6]{transform:scale(1.5)}svg[data-v-c77c1469]{transform:scale(1.5)}[data-v-d7b42e22] .unused-path{opacity:.3}.icon[data-v-6e5cce27]{margin-right:.3rem}.code-block[data-v-a201d833]{background-color:#161617;border:1px solid #252526;padding:1.25rem 1.5rem;border-radius:var(--bs-border-radius-lg);color:var(--bs-white);position:relative}.code-block .language[data-v-a201d833]{position:absolute;right:.35rem;top:.25rem;color:var(--bs-gray-600);font-size:.75rem}.code-block[data-v-a201d833] pre{margin-bottom:0}.code-block[data-v-a201d833] .github-dark{background-color:transparent!important}.code-block[data-v-a201d833] .github-dark code{display:flex;flex-direction:column}.code-block .copy[data-v-a201d833]{position:absolute;right:0;bottom:.1rem;color:#7081b9;border:none;background:none}.code-block #copied-tooltip[data-v-a201d833]{border-radius:.25rem;background:#8997bd;padding:4px 8px;font-size:.75rem;margin-right:.2rem!important}.code-block #copied-tooltip #arrow[data-v-a201d833],.code-block #copied-tooltip #arrow[data-v-a201d833]:before{position:absolute;width:8px;height:8px;background:inherit}.code-block #copied-tooltip #arrow[data-v-a201d833]{visibility:hidden;right:-4px}.code-block #copied-tooltip #arrow[data-v-a201d833]:before{visibility:visible;content:"";transform:rotate(45deg)}[data-v-a201d833] pre code .line{display:block;min-height:1rem}.bd-markdown p code[data-v-ea128188]{background:#161617;border:1px solid #252526;border-radius:var(--bs-border-radius);color:#b9b9ba;padding:0 .25rem}
+.tooltip-custom .tooltip-inner{max-width:none}.circle-button[data-v-c86183e9]{border-radius:1rem;width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;pointer-events:auto!important}.button-icon[data-v-c86183e9]{font-size:.75rem}.badge[data-v-c86183e9]{top:-3px;position:relative;left:-3px;display:inline-block;max-width:100%}.text-color[data-v-c86183e9]{color:var(--bs-white);font-size:.5rem;font-weight:700;padding:.25rem .5rem}.top-button-div[data-v-c86183e9]{position:absolute;top:-.5rem;right:-.5rem;justify-content:center;padding-right:3px;display:flex}.custom-handle[data-v-00cf8c59]{visibility:hidden}.dot[data-v-00cf8c59]{display:flex;flex-direction:column;align-items:center;font-size:5px}.add-task-div[data-v-2bdfbc4f]{margin:.2rem;width:25px;height:25px;border:.4px solid var(--bs-border-color);background-color:var(--bs-white)}html.dark .add-task-div[data-v-2bdfbc4f]{background-color:var(--card-bg)}.add-task-div.text-danger[data-v-2bdfbc4f]{border-color:#e36065}.wrapper[data-v-d741b593]{display:inline-block;width:100%;height:100%;position:relative}.wrapper[data-v-d741b593] span{position:absolute;padding:1px;left:0;display:block;width:100%;height:100%}.wrapper[data-v-d741b593] .icon{width:100%;height:100%;display:block;background-size:contain;background-repeat:no-repeat;background-position:center center}.node-wrapper[data-v-aa670693]{background-color:var(--bs-white);width:184px;height:44px;margin:0;padding:8px;display:flex;z-index:150000;align-items:center;box-shadow:0 12px 12px #82679e1a}html.dark .node-wrapper[data-v-aa670693]{background-color:var(--bs-gray-300)}.node-wrapper.execution-no-taskrun[data-v-aa670693],.node-wrapper.disabled[data-v-aa670693]{background-color:var(--bs-gray-200)}html.dark .node-wrapper.execution-no-taskrun[data-v-aa670693],html.dark .node-wrapper.disabled[data-v-aa670693]{background-color:var(--bs-gray-500)}.node-wrapper.disabled .task-title[data-v-aa670693]{color:var(--bs-gray-500);text-decoration:line-through}html.dark .node-wrapper.disabled .task-title[data-v-aa670693]{color:var(--bs-gray-600)}.node-wrapper .icon[data-v-aa670693]{margin:.2rem;width:25px;height:25px;border:.4px solid var(--bs-border-color)}.node-content[data-v-aa670693]{display:flex;flex-direction:column;justify-content:center;margin-left:.7rem}.node-content>.node-title[data-v-aa670693]{width:125px}.description-button[data-v-aa670693]{color:var(--bs-gray-700);cursor:pointer}.material-design-icon.icon-rounded[data-v-aa670693]{border-radius:1rem;padding:1px}.circle-button[data-v-aa670693]{border-radius:1rem;width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;margin-left:.25rem}.button-icon[data-v-aa670693]{font-size:.75rem}.task-title[data-v-aa670693]{font-size:.75rem;font-weight:700;color:var(--bs-black);flex-grow:1}html.dark .task-title[data-v-aa670693]{color:var(--bs-white)}.status-div[data-v-aa670693]{width:8px;height:100%;position:absolute;left:-.04438rem;border-radius:.5rem 0 0 .5rem}.duration-tt{text-align:left;white-space:nowrap;max-width:none}.duration-tt .square{display:inline-block;width:10px;height:10px;margin-right:5px}.content[data-v-9bea95bb]{color:var(--bs-gray-700)}.content-children[data-v-9bea95bb]{font-size:.7rem}.collapsed-cluster-node[data-v-e12d4062]{width:150px;height:44px;padding:8px}.node-text[data-v-e12d4062]{color:#000;font-size:.9rem;display:flex;align-items:center}html.dark .node-text[data-v-e12d4062]{color:#fff}.circle-button[data-v-e12d4062]{border-radius:1rem;width:1rem;height:1rem;display:flex;justify-content:center;align-items:center}.button-icon[data-v-e12d4062]{font-size:.75rem}.dependency-node-wrapper[data-v-cff03edd]{background-color:var(--bs-white);color:var(--bs-black);width:184px;height:44px;margin:0;padding:8px 18px 8px 6px;display:flex;align-items:center;box-shadow:0 12px 12px #82679e1a}html.dark .dependency-node-wrapper[data-v-cff03edd]{background-color:var(--card-bg);color:var(--bs-white)}.wrapper[data-v-cff03edd]{width:26px}.dependency-text[data-v-cff03edd]{margin-left:.5rem}.dependency-flow-text[data-v-cff03edd]{font-size:.85rem;font-weight:700;max-width:121px}.dependency-namespace-text[data-v-cff03edd]{font-size:.625rem;font-weight:400;color:#564a75;max-width:121px}html.dark .dependency-namespace-text[data-v-cff03edd]{color:#e3dbff}svg[data-v-084c51e6]{transform:scale(1.5)}svg[data-v-c77c1469]{transform:scale(1.5)}[data-v-d7b42e22] .unused-path{opacity:.3}.icon[data-v-6e5cce27]{margin-right:.3rem}.code-block[data-v-12f137e4]{background-color:#161617;border:1px solid #252526;padding:1.25rem 1.5rem;border-radius:var(--bs-border-radius-lg);color:var(--bs-white);position:relative}.code-block .language[data-v-12f137e4]{position:absolute;right:.35rem;top:.25rem;color:var(--bs-gray-600);font-size:.75rem}.code-block[data-v-12f137e4] pre{margin-bottom:0}.code-block[data-v-12f137e4] .github-dark{background-color:transparent!important}.code-block[data-v-12f137e4] .github-dark code{display:flex;flex-direction:column}.code-block .copy[data-v-12f137e4]{position:absolute;right:0;bottom:.1rem;color:#7081b9;border:none;background:none}.code-block #copied-tooltip[data-v-12f137e4]{border-radius:.25rem;background:#8997bd;padding:4px 8px;font-size:.75rem;margin-right:.2rem!important}.code-block #copied-tooltip #arrow[data-v-12f137e4],.code-block #copied-tooltip #arrow[data-v-12f137e4]:before{position:absolute;width:8px;height:8px;background:inherit}.code-block #copied-tooltip #arrow[data-v-12f137e4]{visibility:hidden;right:-4px}.code-block #copied-tooltip #arrow[data-v-12f137e4]:before{visibility:visible;content:"";transform:rotate(45deg)}[data-v-12f137e4] pre code .line{display:block;min-height:1rem}.bd-markdown code[data-v-a70b272d]{background:#161617;border:1px solid #252526;border-radius:var(--bs-border-radius);color:#b9b9ba;padding:0 .25rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "type": "module",
   "files": [
     "dist",
@@ -21,7 +21,10 @@
         "production": "./dist/kestra-ui.umd.cjs"
       }
     },
-    "./style.css": "./dist/style.css",
+    "./style.css": {
+      "development": "./src/placeholder.css",
+      "production": "./dist/style.css"
+    },
     "./src/*": "./src/*"
   },
   "scripts": {
@@ -60,6 +63,6 @@
     "@nuxtjs/mdc": "^0.9.0",
     "@popperjs/core": "^2.11.8",
     "mermaid": "^11.2.1",
-    "shiki": "^1.22.0"
+    "shiki": "^1.24.4"
   }
 }

package/src/components/misc/Tooltip.vue

@@ -12,7 +12,7 @@
     // conditional import is required for website not to crash due to
     // bootstrap launching some init upon import that is incompatible with SSR
     let bootstrap;
-    if (document) {
+    if (typeof document !== "undefined") {
         bootstrap = import("bootstrap");
     }
 
@@ -33,7 +33,7 @@
             }
         },
         async mounted() {
-            if (document) {
+            if (typeof document !== "undefined") {
                 this.tooltip = new (await bootstrap).Tooltip(this.$refs.tooltip, {
                     trigger: "hover",
                     html: true,

package/src/components/plugins/PropertyDetail.vue

@@ -0,0 +1,130 @@
+<template>
+    <PropertyType :property="property" />
+
+    <li v-if="showDynamic">
+        <strong>Dynamic: </strong> {{ dynamicText(property) }}
+    </li>
+
+    <li>
+        <strong>Required: </strong> {{ requiredText(property) }}
+    </li>
+
+    <li v-if="property.default !== undefined">
+        <strong>Default: </strong>
+        <code>{{ property.default }}</code>
+    </li>
+
+    <li v-if="property.pattern !== undefined">
+        <strong>Validation RegExp: </strong>
+        <code> {{ property.pattern }} </code>
+    </li>
+
+    <li v-if="property.minLength !== undefined">
+        <strong>Min length: </strong>
+        <code>{{ property.minLength }}</code>
+    </li>
+
+    <li v-if="property.maxLength !== undefined">
+        <strong>Max length: </strong>
+        <code>{{ property.maxLength }}</code>
+    </li>
+
+    <li v-if="property.minItems !== undefined">
+        <strong>Min items: </strong>
+        <code> {{ property.minItems }} </code>
+    </li>
+
+    <li v-if="property.maxItems !== undefined">
+        <strong>Max items: </strong>
+        <code> {{ property.maxItems }} </code>
+    </li>
+
+    <li v-if="property.minimum !== undefined">
+        <strong>Minimum: </strong>
+        <code>&rsaquo;= {{ property.minimum }} </code>
+    </li>
+
+    <li v-if="property.exclusiveMinimum !== undefined">
+        <strong>Minimum: </strong>
+        <code>&rsaquo; {{ property.minimum }} </code>
+    </li>
+
+    <li v-if="property.maximum !== undefined">
+        <strong>Maximum: </strong>
+        <code>&lsaquo;= {{ property.maximum }} </code>
+    </li>
+
+    <li v-if="property.exclusiveMaximum !== undefined">
+        <strong>Maximum: </strong>
+        <code>&lsaquo; {{ property.maximum }} </code>
+    </li>
+
+    <li v-if="property.format !== undefined">
+        <strong>Format: </strong>
+        <code> {{ property.format }} </code>
+    </li>
+
+    <li v-if="property.enum !== undefined">
+        <strong>Possible Values:</strong>
+        <ul>
+            <li v-for="(possibleValue, index) in property.enum" :key="index">
+                <code>{{ possibleValue }}</code>
+            </li>
+        </ul>
+    </li>
+
+    <div class="mt-3" v-if="property.title !== undefined || property.description !== undefined">
+        <div class="nested-fw-bold" v-if="property.title !== undefined">
+            <slot :content="textSanitizer(property.title)" name="markdown" />
+        </div>
+
+        <blockquote v-if="property.description !== undefined" class="blockquote">
+            <slot :content="textSanitizer(property.description)" name="markdown" />
+        </blockquote>
+    </div>
+</template>
+
+<script setup>
+    import PropertyType from "./PropertyType.vue";
+
+    defineProps({
+        property: {
+            type: Object,
+            required: true,
+        },
+        textSanitizer: {
+            type: Function,
+            required: false,
+            default: (text) => text
+        },
+        showDynamic: {
+            type: Boolean,
+            required: false,
+            default: true
+        }
+    });
+
+    function dynamicText(property) {
+        if (property["$dynamic"] === true) {
+            return "✔️";
+        }
+
+        if (property["$dynamic"] === true) {
+            return "❌";
+        }
+
+        if (property.oneOf?.some(prop => prop["$dynamic"] === true)) {
+            return "✔️";
+        }
+
+        return "❌";
+    }
+
+    function requiredText(property) {
+        if (property["$required"] === true) {
+            return "✔️";
+        }
+
+        return property["$required"] === false ? "❌" : "❓";
+    }
+</script>

package/src/components/plugins/PropertyType.vue

@@ -0,0 +1,70 @@
+<template>
+    <li>
+        <strong>Type: </strong>
+        <mark v-if="property.type" class="type-mark type-mark-default">
+            {{ property.type }}
+        </mark>
+        <a
+            aria-current="page"
+            v-else-if="property['$ref']"
+            :href="generateTaskHref(property['$ref'])"
+            class="router-link-active router-link-exact-active"
+        >
+            <mark class="type-mark type-mark-default">
+                {{ property['$ref']?.split('.').reverse()[0] }}
+            </mark>
+        </a>
+        <ul v-else-if="property.oneOf">
+            <li v-for="(oneOf, index) in property.oneOf" :key="index">
+                <mark class="type-mark type-mark-default">{{ oneOf.type }}</mark>
+            </li>
+        </ul>
+        <mark v-else class="type-mark type-mark-default">object</mark>
+    </li>
+
+    <li v-if="property.items ?? property.additionalProperties">
+        <strong>SubType: </strong>
+        <template v-if="property.items">
+            <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] }}
+                </mark>
+            </a>
+            <mark v-else class="type-mark type-mark-default">{{ property.items.type }}</mark>
+        </template>
+        <template v-else-if="property.additionalProperties">
+            <a
+                aria-current="page"
+                v-if="property.additionalProperties['$ref']"
+                :href="generateTaskHref(property.additionalProperties['$ref'])"
+                class="router-link-active router-link-exact-active"
+            >
+                <mark class="type-mark type-mark-default">
+                    {{ property.additionalProperties['$ref'].split('.').reverse()[0] }}
+                </mark>
+            </a>
+            <mark v-else class="type-mark type-mark-default">{{ property.additionalProperties.type }}</mark>
+        </template>
+    </li>
+</template>
+
+<script setup>
+    defineProps({
+        property: {
+            type: Object,
+            required: true,
+        }
+    });
+
+    const generateTaskHref = (href) => {
+        if (href) {
+            const taskHref = href?.split("/");
+            return `#${taskHref[taskHref?.length - 1]}`;
+        }
+    };
+</script>

package/src/components/plugins/SchemaToCode.vue

@@ -21,17 +21,16 @@
 
 <script>
     import {createPopper} from "@popperjs/core";
-    import {createOnigurumaEngine} from "@shikijs/engine-oniguruma";
-    import {createHighlighterCore} from "shiki/core";
-    import yaml from "shiki/langs/yaml.mjs";
-    import python from "shiki/langs/python.mjs";
-    import javascript from "shiki/langs/javascript.mjs";
     import ContentCopy from "vue-material-design-icons/ContentCopy.vue";
     import Check from "vue-material-design-icons/Check.vue";
     import {defineComponent, nextTick, shallowRef} from "vue";
 
     export default defineComponent({
         props: {
+            highlighter: {
+                type: Object,
+                required: true
+            },
             code: {
                 type: String,
                 default: ""
@@ -67,19 +66,8 @@
         },
         async created() {
             this.copyIcon = this.icons.ContentCopy;
-            const highlighter = await createHighlighterCore({
-                themes: [
-                    import("shiki/themes/github-dark.mjs")
-                ],
-                langs: [
-                    yaml,
-                    python,
-                    javascript
-                ],
-                // `shiki/wasm` contains the wasm binary inlined as base64 string.
-                engine: createOnigurumaEngine(() => import("shiki/wasm"))
-            })
-            this.codeData = highlighter.codeToHtml(this.code, {
+
+            this.codeData = this.highlighter.codeToHtml(this.code, {
                 lang: this.language,
                 theme: "github-dark",
             });