pull/5161/head
Cagatay Civici 2024-01-24 14:29:47 +03:00
commit 2d09cbe43a
4 changed files with 64 additions and 6 deletions

View File

@ -132,11 +132,11 @@ export default {
},
highlightOnSelect: {
type: Boolean,
default: false
default: true
},
showTick: {
type: Boolean,
default: true
default: false
},
filterMessage: {
type: String,

View File

@ -436,12 +436,12 @@ export interface DropdownProps {
focusOnHover?: boolean | undefined;
/**
* Whether the selected option will be add highlight class.
* @defaultValue false
* @defaultValue true
*/
highlightOnSelect?: boolean | undefined;
/**
* Whether the selected option will be shown with a tick.
* @defaultValue true
* @defaultValue false
*/
showTick?: boolean | undefined;
/**

View File

@ -24267,7 +24267,7 @@
"optional": true,
"readonly": false,
"type": "boolean",
"default": "false",
"default": "true",
"description": "Whether the selected option will be add highlight class."
},
{
@ -24275,7 +24275,7 @@
"optional": true,
"readonly": false,
"type": "boolean",
"default": "true",
"default": "false",
"description": "Whether the selected option will be shown with a tick."
},
{

View File

@ -14,3 +14,61 @@
</NuxtLayout>
</div>
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
watch: {
$route: {
handler(to) {
if (to.name === 'index') {
this.themeChangeListener({ theme: this.$appState.darkTheme ? 'aura-dark-green' : 'aura-light-green', dark: this.$appState.darkTheme });
}
}
}
},
created() {
useServerHead({
link: [
{
id: 'theme-link',
rel: 'stylesheet',
href: '/themes/aura-light-green/theme.css'
}
]
});
},
mounted() {
const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
this.applyTheme({ theme: 'aura-dark-green', dark: true });
}
EventBus.on('theme-change', this.themeChangeListener);
},
beforeUnmount() {
EventBus.off('theme-change', this.themeChangeListener);
},
methods: {
themeChangeListener(event) {
if (!document.startViewTransition) {
this.applyTheme(event);
return;
}
document.startViewTransition(() => this.applyTheme(event));
},
applyTheme(event) {
this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
this.$appState.theme = event.theme;
this.$appState.darkTheme = event.dark;
EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark });
});
}
}
};
</script>