|
|
|
@ -1,13 +1,19 @@
|
|
|
|
|
import { set } from 'lodash'
|
|
|
|
|
import { set, clone } from 'lodash'
|
|
|
|
|
import Select from '../select/select.vue'
|
|
|
|
|
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
|
|
|
|
import Popover from 'src/components/popover/popover.vue'
|
|
|
|
|
|
|
|
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
|
|
|
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
|
import {
|
|
|
|
|
faExclamationTriangle,
|
|
|
|
|
faKeyboard,
|
|
|
|
|
faFont
|
|
|
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
|
|
|
|
|
|
library.add(
|
|
|
|
|
faExclamationTriangle
|
|
|
|
|
faExclamationTriangle,
|
|
|
|
|
faKeyboard,
|
|
|
|
|
faFont
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
|
|
|
|
@ -24,20 +30,38 @@ export default {
|
|
|
|
|
emits: ['update:modelValue'],
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
localValue: this.modelValue,
|
|
|
|
|
customFamily: '',
|
|
|
|
|
manualEntry: true,
|
|
|
|
|
localValue: clone(this.modelValue),
|
|
|
|
|
familyCustomLocal: null,
|
|
|
|
|
availableOptions: [
|
|
|
|
|
this.noInherit ? '' : 'inherit',
|
|
|
|
|
'local',
|
|
|
|
|
...(this.options || []),
|
|
|
|
|
'serif',
|
|
|
|
|
'sans-serif',
|
|
|
|
|
'monospace',
|
|
|
|
|
'sans-serif'
|
|
|
|
|
'local',
|
|
|
|
|
...(this.options || [])
|
|
|
|
|
].filter(_ => _)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeUpdate () {
|
|
|
|
|
this.localValue = this.modelValue
|
|
|
|
|
this.localValue = clone(this.modelValue)
|
|
|
|
|
if (this.familyCustomLocal === null && !this.isInvalidFamily(this.modelValue?.family)) {
|
|
|
|
|
this.familyCustomLocal = this.modelValue?.family
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
lookupLocalFonts () {
|
|
|
|
|
if (!this.fontsList) {
|
|
|
|
|
this.$store.dispatch('queryLocalFonts')
|
|
|
|
|
}
|
|
|
|
|
this.toggleManualEntry()
|
|
|
|
|
},
|
|
|
|
|
isInvalidFamily (value) {
|
|
|
|
|
return PRESET_FONTS.has(value) || (value === '')
|
|
|
|
|
},
|
|
|
|
|
toggleManualEntry () {
|
|
|
|
|
this.manualEntry = !this.manualEntry
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
present () {
|
|
|
|
@ -46,32 +70,39 @@ export default {
|
|
|
|
|
defaultValue () {
|
|
|
|
|
return this.localValue || this.fallback || {}
|
|
|
|
|
},
|
|
|
|
|
fontsListCapable () {
|
|
|
|
|
return this.$store.state.interface.browserSupport.localFonts
|
|
|
|
|
},
|
|
|
|
|
fontsList () {
|
|
|
|
|
return this.$store.state.interface.localFonts
|
|
|
|
|
},
|
|
|
|
|
family: {
|
|
|
|
|
get () {
|
|
|
|
|
return this.defaultValue.family
|
|
|
|
|
},
|
|
|
|
|
set (v) {
|
|
|
|
|
this.familyCustomLocal = ''
|
|
|
|
|
set(this.localValue, 'family', v)
|
|
|
|
|
this.$emit('update:modelValue', this.localValue)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
familyCustom: {
|
|
|
|
|
get () {
|
|
|
|
|
return this.customFamily
|
|
|
|
|
return this.familyCustomLocal
|
|
|
|
|
},
|
|
|
|
|
set (v) {
|
|
|
|
|
this.customFamily = v
|
|
|
|
|
if (!PRESET_FONTS.has(this.customFamily)) {
|
|
|
|
|
this.familyCustomLocal = v
|
|
|
|
|
if (!this.isInvalidFamily(v)) {
|
|
|
|
|
set(this.localValue, 'family', v)
|
|
|
|
|
this.$emit('update:modelValue', this.customFamily)
|
|
|
|
|
this.$emit('update:modelValue', this.localValue)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
invalidCustom () {
|
|
|
|
|
return PRESET_FONTS.has(this.customFamily)
|
|
|
|
|
return this.isInvalidFamily(this.familyCustomLocal)
|
|
|
|
|
},
|
|
|
|
|
isCustom () {
|
|
|
|
|
return !PRESET_FONTS.has(this.family)
|
|
|
|
|
return !PRESET_FONTS.has(this.defaultValue.family)
|
|
|
|
|
},
|
|
|
|
|
preset: {
|
|
|
|
|
get () {
|
|
|
|
|