ivyforms / frontend / src / views / _components / html-editor / components / IvyFontFamilyPopover.vue

IvyFontFamilyPopover.vue in The Innovative Form Builder – IvyForms 0.7, at frontend/src/views/_components/html-editor/components/IvyFontFamilyPopover.vue

45 lines 1.2 KB

Raw Download Zip

1	<template>
2	<IvySelectInput
3	ref="elInputRef"
4	v-model="selectedFontFamily"
5	:placeholder="'Select font'"
6	:clearable="false"
7	:disabled="false"
8	:multiple="false"
9	:class="{ 'is-secondary': isSecondary }"
10	:aria-label="props.ariaLabel \|\| getLabel('font_family')"
11	@change="setFontFamily"
12	>
13	<IvySelectOption
14	v-for="font in fonts"
15	:key="font"
16	:value="font"
17	:label="font"
18	:class="{ 'is-secondary': isSecondary }"
19	>
20	<span :style="{ fontFamily: font }">{{ font }}</span>
21	</IvySelectOption>
22	</IvySelectInput>
23	</template>
24
25	<script setup lang="ts">
26	import { Editor } from '@tiptap/vue-3'
27	import { ref } from 'vue'
28	import { useLabels } from '@/composables/useLabels'
29	const { getLabel } = useLabels()
30
31	const isSecondary = ref(true)
32	const props = defineProps<{
33	editor: Editor
34	ariaLabel?: string
35	}>()
36
37	const fonts = ['Inter', 'Comic Sans MS', 'Sans Serif', 'serif', 'monospace', 'cursive']
38	const selectedFontFamily = ref<string>('Sans Serif')
39
40	// Funkcija koja postavlja fontFamily u editor
41	const setFontFamily = (fontFamily: string) => {
42	props.editor.chain().focus().setFontFamily(fontFamily).run()
43	}
44	</script>
45