@kestra-io/ui-libs 0.0.59 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "type": "module",
   "files": [
     "src",
@@ -18,26 +18,32 @@
   "peerDependencies": {
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/controls": "^1.1.1",
-    "@vue-flow/core": "^1.39.3",
+    "@vue-flow/core": "^1.41.1",
     "bootstrap": "^5.3.3",
     "dagre": "^0.8.5",
     "humanize-duration": "^3.31.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
-    "vue": "^3.5.3",
+    "vue": "^3.5.5",
     "vue-material-design-icons": "^5.3.0",
     "vuex": "^4.1.0",
     "yaml": "^2.5.1"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^8.4.0",
+    "@esbuild/linux-x64": "^0.23.1",
+    "@nuxtjs/mdc": "^0.9.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "@vitejs/plugin-vue": "^5.1.3",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.28.0",
-    "sass": "^1.77.8",
-    "shiki": "^1.12.1",
-    "vite": "^5.4.3",
+    "sass": "^1.78.0",
+    "shiki": "^1.17.6",
+    "vite": "^5.4.5",
     "vite-plugin-static-copy": "^1.0.6"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8",
+    "mermaid": "^11.2.1"
   }
 }

package/src/components/content/Alert.vue

@@ -0,0 +1,34 @@
+<template>
+    <div :class="'doc-alert alert alert-' + type" role="alert">
+        <slot />
+    </div>
+</template>
+
+<script>
+    export default {
+        components: {},
+        props: {
+            type: {
+                type: String,
+                required: true
+            },
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    .doc-alert {
+        --bs-alert-padding-x: var(--spacer);
+        --bs-alert-padding-y: var(--spacer);
+        --bs-alert-margin-bottom: var(--spacer);
+
+        background-color: #18131f;
+        border: 1px solid #3a3c55;
+        padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+        margin-bottom: var(--bs-alert-margin-bottom);
+
+        > * {
+            margin: 0;
+        }
+    }
+</style>

package/src/components/content/Collapse.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="mb-4">
+        <div class="show-button" @click="toggleShow">
+            <ChevronDown v-if="show" class="icon-2x" />
+            <ChevronRight v-else class="icon-2x" />
+            <span v-if="title" class="title">{{ title }}</span>
+        </div>
+    </div>
+    <div v-if="show">
+        <slot />
+    </div>
+</template>
+
+<script>
+    import ChevronDown from "vue-material-design-icons/ChevronDown.vue"
+    import ChevronRight from "vue-material-design-icons/ChevronRight.vue"
+
+    export default {
+        components: {
+            ChevronDown,
+            ChevronRight
+        },
+        props: {
+            title: {
+                type: String,
+                required: true,
+                default: "Details"
+            },
+        },
+        data() {
+            return {
+                show: false
+            }
+        },
+        methods: {
+            toggleShow() {
+                this.show = !this.show
+            }
+
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "../../scss/variables";
+
+    .show-button {
+        cursor: pointer;
+        font-size: 1.30em;
+        color: var(--bs-white);
+        display: inline-block;
+        padding-right: 0.1em;
+    }
+
+    .show-button:hover {
+        color: $purple-36;
+        background-color: #252526;
+        border-radius: 4px;
+    }
+
+    .title {
+        margin-left: 0.25em;
+    }
+
+</style>
+

package/src/components/content/ConfigPropertyCard.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="config-property-card">
+        <table class="table table-dark">
+            <tbody>
+                <tr>
+                    <td class="label">
+                        Type
+                    </td>
+                    <td>{{ type }}</td>
+                </tr>
+                <tr>
+                    <td class="label">
+                        Default
+                    </td>
+                    <td>
+                        <prose-code>{{ defaultValue }}</prose-code>
+                    </td>
+                </tr>
+                <tr v-if="validValues">
+                    <td class="label">
+                        Valid values:
+                    </td>
+                    <td>
+                        <prose-code>[ {{ validValues }} ]</prose-code>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+<script>
+    import {defineComponent} from "vue";
+    import ProseCode from "./ProseCode.vue";
+
+    export default defineComponent({
+        components: {ProseCode},
+        props: {
+            type: {
+                type: String,
+                default: undefined,
+                required: true
+            },
+            defaultValue: {
+                type: [String, Boolean, Number, Array, Object],
+                default: ""
+            },
+            validValues: {
+                type: String,
+                default: ""
+            },
+        },
+    });
+</script>
+
+<style lang="scss" scoped>
+    .config-property-card {
+        table {
+            min-width: 50%;
+        }
+
+        tr td:first-child {
+            width: 10em;
+            min-width: 10em;
+            max-width: 10em;
+            word-break: break-all;
+        }
+
+        td {
+            font-size: 1rem;
+            padding: 0.6rem 1rem;
+        }
+
+        td.label {
+            font-weight: bold;
+            padding-right: 1em;
+        }
+    }
+</style>

package/src/components/content/MDCRenderer.vue

@@ -0,0 +1,8 @@
+<template>
+    <Suspense>
+        <NuxtMDCRenderer v-bind="$attrs" :prose="true" />
+    </Suspense>
+</template>
+<script setup>
+    import NuxtMDCRenderer from "@nuxtjs/mdc/runtime/components/MDCRenderer.vue";
+</script>

package/src/components/content/Mermaid.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="mermaid" v-if="show">
+        <slot />
+    </div>
+</template>
+
+<script setup>
+    import mermaid from "mermaid/dist/mermaid.esm.mjs";
+    import {nextTick, onMounted, ref} from "vue";
+
+    let show = ref(false);
+
+    onMounted(async () => {
+        show.value = true
+        await mermaid.initialize({startOnLoad: true})
+        await nextTick()
+        await mermaid.init();
+    })
+</script>

package/src/components/content/NextLink.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="text-end mt-3 mb-3">
+        <div class="btn btn-outline-primary">
+            <ChevronRight />
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import ChevronRight from "vue-material-design-icons/ChevronRight.vue"
+</script>
+
+<script>
+    export default {
+
+    }
+</script>
+
+<style lang="scss" scoped>
+    div {
+        .material-design-icon {
+            color: var(--bs-purple);
+        }
+
+        &:hover {
+            :deep(a), :deep(a:hover) {
+                color: var(--bs-white) !important;
+            }
+        }
+
+        :deep(p) {
+            display: inline;
+            margin-bottom: 0 !important;
+        }
+    }
+
+
+</style>

package/src/components/content/ProseBlockquote.vue

@@ -0,0 +1,8 @@
+<template>
+    <blockquote class="blockquote">
+        <slot />
+    </blockquote>
+</template>
+
+<script setup lang="ts">
+</script>

package/src/components/content/ProseCode.vue

@@ -0,0 +1,19 @@
+<template>
+    <code>
+        <slot />
+    </code>
+</template>
+
+
+<style lang="scss" scoped>
+    @import "../../scss/variables";
+
+    code {
+        color: $white-3;
+        background: $black-2;
+        border: 1px solid $black-3;
+        border-radius: var(--bs-border-radius);
+        padding: 0 0.25rem;
+    }
+
+</style>

package/src/components/content/ProsePre.vue

@@ -0,0 +1,164 @@
+<script>
+    import {createPopper} from "@popperjs/core";
+
+    import ContentCopy from "vue-material-design-icons/ContentCopy.vue";
+    import Check from "vue-material-design-icons/Check.vue";
+    import {defineComponent, nextTick, shallowRef} from "vue";
+    import Mermaid from "./Mermaid.vue";
+
+    export default defineComponent({
+        components: {Mermaid},
+        props: {
+            code: {
+                type: String,
+                default: ""
+            },
+            language: {
+                type: String,
+                default: null
+            },
+            filename: {
+                type: String,
+                default: null
+            },
+            highlights: {
+                type: Array,
+                default: () => []
+            },
+            meta: {
+                type: String,
+                default: null
+            }
+        },
+        data() {
+            return {
+                icons: shallowRef({
+                    ContentCopy: shallowRef(ContentCopy),
+                    Check: shallowRef(Check)
+                }),
+                copyIcon: undefined,
+                copyIconResetTimer: undefined,
+                isHoveringCode: false
+            }
+        },
+        created() {
+            this.copyIcon = this.icons.ContentCopy;
+        },
+        methods: {
+            hoverCode(){
+                this.isHoveringCode = true;
+                if(this.copyIconResetTimer) {
+                    nextTick(() => {
+                        createPopper(this.$refs.copyButton, this.$refs.copyTooltip, {
+                            placement: "left",
+                        });
+                    });
+                }
+            },
+            copyToClipboard() {
+                clearTimeout(this.copyIconResetTimer);
+
+                navigator.clipboard.writeText(this.code.trimEnd())
+
+                this.copyIcon = this.icons.Check;
+
+                this.copyIconResetTimer = setTimeout(() => {
+                    this.copyIcon = this.icons.ContentCopy;
+                    this.copyIconResetTimer = undefined;
+                }, 2000)
+            }
+        }
+    });
+</script>
+
+<template>
+    <template v-if="language === 'mermaid'">
+        <Mermaid>
+            {{ code }}
+        </Mermaid>
+    </template>
+    <div class="code-block mb-3" @mouseover="hoverCode" @mouseleave="isHoveringCode = false" v-else>
+        <div class="language" v-if="language">
+            {{ language }}
+        </div>
+        <template v-if="isHoveringCode">
+            <button ref="copyButton" class="copy">
+                <component
+                    :is="copyIcon"
+                    @click="copyToClipboard"
+                />
+            </button>
+            <div ref="copyTooltip" v-if="!!copyIconResetTimer" id="copied-tooltip" role="tooltip">
+                Copied!
+                <div id="arrow" data-popper-arrow />
+            </div>
+        </template>
+        <slot />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    @import "../../scss/variables";
+
+    .code-block {
+        background-color: $black-2;
+        border: $block-border;
+        padding: 1.25rem 1.5rem;
+        border-radius: var(--bs-border-radius-lg);
+        color: var(--bs-white);
+        position: relative;
+
+        .language {
+            position: absolute;
+            right: 0.35rem;
+            top: 0.25rem;
+            color: var(--bs-gray-600);
+            font-size: calc($font-size-base * .75);
+        }
+
+        :deep(pre) {
+            margin-bottom: 0;
+        }
+
+        .copy {
+            position: absolute;
+            right: 0;
+            bottom: 0.1rem;
+            color: $gray-600;
+            border: none;
+            background: none;
+        }
+
+        #copied-tooltip {
+            border-radius: $border-radius;
+            background: $gray-500;
+            padding: 4px 8px;
+            font-size: $font-size-xs;
+            margin-right: $popper-margin !important;
+
+            #arrow,
+            #arrow::before {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background: inherit;
+            }
+
+            #arrow {
+                visibility: hidden;
+                right: -4px;
+            }
+
+            #arrow::before {
+                visibility: visible;
+                content: '';
+                transform: rotate(45deg);
+            }
+        }
+    }
+
+    :deep(pre code .line) {
+        display: block;
+        min-height: 1rem;
+    }
+</style>

package/src/components/content/ProseTable.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="container table-responsive">
+        <table class="table table-dark">
+            <slot />
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+    @import "../../scss/variables";
+
+    .table-responsive {
+        padding: 0;
+        margin: calc($spacer * 2) 0 calc($spacer * 4);
+    }
+
+    :deep(thead) {
+        border-bottom: none !important;
+        th {
+            font-size: $font-size-md;
+            font-weight: 600;
+            line-height: 1.25rem;
+            padding: calc($spacer * 0.5) $spacer $spacer;
+            background-color: transparent;
+            border-bottom: 4px solid #8B8B8D !important;
+            border-top: none;
+            color: $white;
+        }
+    }
+
+    :deep(tbody) {
+        tr {
+            td {
+                font-size: $font-size-sm;
+                padding: calc($spacer * 1.5) $spacer $spacer !important;
+                font-weight: 400;
+                color: $white;
+            }
+        }
+    }
+
+    .table-dark {
+        --bs-table-bg: $black-2 !important;
+        color: transparent !important;
+        outline: none !important;
+    }
+</style>

package/src/composables/useMarkdownParser.js

@@ -0,0 +1,78 @@
+import {createMarkdownParser, createShikiHighlighter, rehypeHighlight,} from "@nuxtjs/mdc/runtime";
+import GithubDark from "shiki/themes/github-dark.mjs";
+
+export default function useMarkdownParser() {
+    let parser;
+
+    return async (markdown) => {
+        if (!parser) {
+            const {bundledLanguagesInfo} = await import("shiki/langs");
+
+            const langsMap = {};
+            const langs = [
+                "bash",
+                "c",
+                "cpp",
+                "csv",
+                "dockerfile",
+                "go",
+                "groovy",
+                "handlebars",
+                "hcl",
+                "ini",
+                "java",
+                "javascript",
+                "json",
+                "markdown",
+                "mermaid",
+                "perl",
+                "php",
+                "python",
+                "r",
+                "ruby",
+                "rust",
+                "scala",
+                "sql",
+                "systemd",
+                "twig",
+                "typescript",
+                "xml",
+                "yaml"
+            ]
+            langs.forEach(lang => {
+                const info = bundledLanguagesInfo.find(i => i.aliases?.includes?.(lang) || i.id === lang);
+                if (!info) {
+                    throw new Error(`[@nuxtjs/mdc] Could not find shiki language: ${lang}`);
+                }
+                const langImport = () => import(`../../node_modules/shiki/dist/langs/${info.id}.mjs`);
+                langsMap[info.id] = langImport;
+                for (const alias of info.aliases || []) {
+                    langsMap[alias] = langImport;
+                }
+            });
+
+            parser = await createMarkdownParser({
+                rehype: {
+                    plugins: {
+                        highlight: {
+                            instance: rehypeHighlight,
+                            options: {
+                                // Pass in your desired theme(s)
+                                theme: "github-dark",
+                                // Create the Shiki highlighter
+                                highlighter: createShikiHighlighter({
+                                    bundledThemes: {
+                                        "github-dark": GithubDark,
+                                    },
+                                    // Configure the bundled languages
+                                    bundledLangs: langsMap,
+                                }),
+                            },
+                        }
+                    },
+                },
+            })
+        }
+        return parser(markdown)
+    }
+}

package/src/scss/_variables.scss

@@ -7,6 +7,7 @@ $tertiary: #2F3342 !default;
 $blue: #1761FD !default;
 $indigo: #8405FF !default;
 $purple: #9F9DFF !default;
+$purple-36: #9CA1DE;
 $pink: #FD3C97 !default;
 $red: #E36065 !default;
 $red-light: #FF9D9D !default;
@@ -32,11 +33,21 @@ $black: #26282D !default;
 $light: $gray-200 !default;
 $dark: $gray-900 !default;
 
+$white-3:  #B9B9BA;
+
+$black-2 : #161617;
+$black-3 : #252526;
+
 // fonts
 $font-size-base: 1rem !default;
 $font-family-sans-serif: "Public Sans", sans-serif;
 $font-family-monospace: "Source Code Pro", monospace;
 $font-size-xs: $font-size-base * 0.75 !default;
+$font-size-md : $font-size-base * 1;
+$font-size-xl: $font-size-base * 1.375;
+
+// border
+$block-border: 1px solid $black-3;
 
 // border radius
 $border-radius: 0.25rem !default;
@@ -97,6 +108,8 @@ $element-colors: (
         ),
 );
 
+$popper-margin: .2rem;
+
 $baseline-max-width: 730px;
 
 // bootstrap