vue-code-block/src/documentation/components/ThemeSelectComponent.vue at main · webdevnerdstuff/vue-code-block · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<template>
	<v-row>
		<v-col
			cols="12"
			lg="4"
			offset-lg="2"
			offset-xl="3"
			sm="12"
			xl="3"
		>
			<v-select
				v-model="library"
				density="comfortable"
				item-value="id"
				:items="libraries"
				label="Library Selection"
				variant="outlined"
				@update:model-value="changeLibrary"
			>
			</v-select>
		</v-col>

		<v-col
			cols="12"
			lg="4"
			sm="12"
			xl="3"
		>
			<v-select
				v-model="theme"
				density="comfortable"
				item-value="id"
				:items="items"
				label="Theme Selection"
				variant="outlined"
				@update:model-value="changeTheme"
			>
			</v-select>
		</v-col>

		<v-col
			v-if="!playground"
			cols="12"
			lg="8"
			offset-lg="2"
			offset-xl="3"
			sm="12"
			xl="6"
		>
			<v-alert
				color="success"
				density="compact"
			>
				<v-icon
					color="white"
					icon="mdi:mdi-information"
				/>
				This will also update the examples and documentation below.
			</v-alert>
		</v-col>
	</v-row>
</template>


<script setup>
import { useCoreStore } from '@/stores/index';

const emit = defineEmits(['changedLibrary', 'changedTheme']);

defineProps({
	playground: {
		type: Boolean,
		default: false,
	}
});

const store = useCoreStore();

const highlightThemes = store.highlightThemes;
const libraries = ref(store.libraries);
const library = ref(libraries.value[1]);
const neonBunnyThemes = store.neonBunnyThemes;
const prismThemes = store.prismThemes;
const theme = ref('neon-bunny');


onMounted(() => {
	const storedValue = store.getLocalStorage() ?? store.setLocalStorage('prismjs');

	changeLibrary(storedValue ?? library.value.id);
});


const items = computed(() => {
	if (library.value === 'prismjs') {
		return [...neonBunnyThemes, ...prismThemes];
	}

	return [...neonBunnyThemes, ...highlightThemes];
});

function changeLibrary(val) {
	const libraryObj = libraries.value.find((item) => item.id === val);
	library.value = val;
	store.setLocalStorage(library.value);

	emit('changedLibrary', libraryObj);
	changeTheme('neon-bunny');
}

function changeTheme(val = 'neon-bunny') {
	theme.value = val;
	emit('changedTheme', theme.value);
}

</script>