@bryntum/scheduler-vue-3-thin 7.2.3 → 7.3.0

package/src/components/BryntumThemeCombo.vue

@@ -0,0 +1,60 @@
+<template>
+    <div ref="refElement" />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { Combo, DomHelper, BrowserHelper } from '@bryntum/core-thin';
+
+const refElement = ref<HTMLElement | null>(null);
+let combo: Combo | null = null;
+
+onMounted(() => {
+    combo = new Combo({
+        appendTo : refElement.value as HTMLElement,
+        store    : {
+            data : [
+                { id : 'svalbard-light', text : 'Svalbard Light' },
+                { id : 'svalbard-dark', text : 'Svalbard Dark' },
+                { id : 'visby-light', text : 'Visby Light' },
+                { id : 'visby-dark', text : 'Visby Dark' },
+                { id : 'stockholm-light', text : 'Stockholm Light' },
+                { id : 'stockholm-dark', text : 'Stockholm Dark' },
+                { id : 'material3-light', text : 'Material3 Light' },
+                { id : 'material3-dark', text : 'Material3 Dark' },
+                { id : 'fluent2-light', text : 'Fluent2 Light' },
+                { id : 'fluent2-dark', text : 'Fluent2 Dark' },
+                { id : 'high-contrast-light', text : 'High Contrast Light' },
+                { id : 'high-contrast-dark', text : 'High Contrast Dark' }
+            ]
+        },
+        label         : 'Theme',
+        width         : '16em',
+        value         : 'svalbard-light',
+        editable      : false,
+        labelPosition : 'before',
+        ref           : 'themeCombo',
+        listeners     : {
+            change({ value }: { value: string }) {
+                DomHelper.setTheme(value).then((context: any) => {
+                    if (context) {
+                        const { theme, prev } = context;
+                        document.body.classList.remove(`b-theme-${prev}`);
+                        document.body.classList.add(`b-theme-${theme}`);
+                    }
+                });
+            }
+        }
+    });
+
+    // Apply from search param
+    const theme = BrowserHelper.searchParam('theme');
+    if (theme) {
+        combo.value = theme;
+    }
+});
+
+onBeforeUnmount(() => {
+    combo?.destroy();
+});
+</script>