@bryntum/core-vue-3-thin 7.1.1

package/src/components/BryntumDemoHeader.vue

@@ -0,0 +1,131 @@
+<template>
+    <header class="demo-header b-bryntum">
+        <a
+            id="title"
+            class="title"
+            :href="link"
+        >
+            <h1>
+                <svg
+                    viewBox="0 0 354.9 144.52"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <g><path d="m305.63 144.52c-12.47 0-23.53-4.83-31.58-13.28v11.06h-25.54v-142.3h26.75v48.58c7.84-7.64 18.5-12.07 30.37-12.07 27.15 0 49.28 23.33 49.28 54.1s-22.12 53.9-49.28 53.9zm-3.82-83.47c-14.68 0-26.55 13.27-26.55 29.77s11.87 29.16 26.55 29.16 26.55-12.67 26.55-29.16-11.87-29.77-26.55-29.77z" /><path d="m148.02 0h74.01v29.78h-74.01z" /><path d="m0 56.26h222.03v29.78h-222.03z" /><path d="m74.01 112.52h148.02v29.6h-148.02z" /></g>
+                </svg>
+                {{ headerTitle }}
+            </h1>
+        </a>
+        <slot />
+        <div
+            id="tools"
+            class="tools"
+        >
+            <bryntum-button
+                text="Download Trial"
+                :href="downloadLink"
+                rendition="filled"
+            />
+            <bryntum-button
+                ref="codeButtonRef"
+                icon="b-icon-code"
+                tooltip="Click to show the code viewer"
+                rendition="text"
+                :hidden="hiddenEditor"
+                @click="toggleCodeEditor"
+            />
+            <bryntum-button
+                ref="downloadButtonRef"
+                icon="b-icon-download"
+                tooltip="Download this demo zip archive"
+                rendition="text"
+                href="#"
+                :hidden="true"
+            />
+            <bryntum-fullscreen-button />
+        </div>
+    </header>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, onMounted, ref } from 'vue';
+import BryntumFullscreenButton from './BryntumFullscreenButton.vue';
+import BryntumButton from './BryntumButton.vue';
+import { AjaxHelper, CSSHelper, DemoCodeEditor } from '@bryntum/core-thin';
+
+defineProps<{
+    title?: string;
+}>();
+
+const codeButtonRef = ref<typeof BryntumButton | null>(null);
+
+const downloadButtonRef = ref<typeof BryntumButton | null>(null);
+
+const headerTitle = document.title.split(' - ')[1] || document.title;
+
+const isTest = document.location.search.includes('test');
+
+const demoProduct = document.location.href.match(/\/(\w+)(-trial)?\/[-\w]*examples\//)?.[1]?.toLowerCase() || 'core';
+
+const downloadLink = `https://bryntum.com/download/?product=${demoProduct}`;
+
+const appFolder = '../';
+
+const hiddenEditor = !Boolean(DemoCodeEditor.monacoCodePath);
+
+let codeEditor: DemoCodeEditor | undefined;
+
+const link = computed(() => {
+    const match = /(.*?\/)(examples.*?\/frameworks\/.*?)\/dist/.exec(document.location.href);
+    return (match?.[1] && match?.[2])
+        ? `${match[1]}examples/#example-${match[2].replace(/\//gm, '-').replace('examples-frameworks', 'frameworks')}`
+        : '#';
+});
+
+const toggleCodeEditor = async() => {
+    codeEditor = await DemoCodeEditor.toggleCodeEditor(
+        codeEditor,
+        codeButtonRef.value!.instance.value,
+        {
+            appFolder,
+            preferredSources : [
+                /App\.vue/,
+                /\w+Config\.[tj]s/
+            ]
+        }
+    );
+};
+
+const initDownload = async() => {
+    const appConfig = (await AjaxHelper.get(`${appFolder}app.config.json`, { parseJson : true })).parsedJson;
+    if (appConfig.zip || isTest) {
+        const downloadButton  = downloadButtonRef.value!.instance.value;
+        downloadButton.hidden = false;
+        downloadButton.href   = `${appFolder}${appConfig.zip}`;
+    }
+};
+
+onMounted(() => {
+    if (!hiddenEditor) {
+        CSSHelper.insertRule('body { flex-direction : row !important }');
+        CSSHelper.insertRule('#__nuxt, #container, #app { flex : 1 !important; overflow : hidden !important }');
+        CSSHelper.insertRule('.b-codeeditor-header { padding : 0.5em !important }');
+        initDownload();
+    }
+
+    // Enables special styling when generating screenshots
+    const params = new URLSearchParams(window.location.search);
+    if (params.has('screenshot')) {
+        document.body.classList.add('b-screenshot');
+        (window.bryntum as any).noAnimations = true;
+    }
+});
+
+defineExpose({
+    link,
+    headerTitle,
+    hiddenEditor,
+    downloadLink,
+    toggleCodeEditor
+});
+
+</script>