better font control custom input

src/components/font_control/font_control.js

@@ -1,9 +1,22 @@
 import { set } 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'
+
+library.add(
+  faExclamationTriangle
+)
+
+const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
 
 export default {
   components: {
-    Select
+    Select,
+    Checkbox,
+    Popover
   },
   props: [
     'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
@@ -11,10 +24,11 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
-      lValue: this.modelValue,
+      localValue: this.modelValue,
+      customFamily: '',
       availableOptions: [
         this.noInherit ? '' : 'inherit',
-        'custom',
+        'local',
         ...(this.options || []),
         'serif',
         'monospace',
@@ -23,40 +37,52 @@ export default {
     }
   },
   beforeUpdate () {
-    this.lValue = this.modelValue
+    this.localValue = this.modelValue
   },
   computed: {
     present () {
-      return typeof this.lValue !== 'undefined'
+      return typeof this.localValue !== 'undefined'
     },
-    dValue () {
-      return this.lValue || this.fallback || {}
+    defaultValue () {
+      return this.localValue || this.fallback || {}
     },
     family: {
       get () {
-        return this.dValue.family
+        return this.defaultValue.family
       },
       set (v) {
-        set(this.lValue, 'family', v)
-        this.$emit('update:modelValue', this.lValue)
+        set(this.localValue, 'family', v)
+        this.$emit('update:modelValue', this.localValue)
       }
     },
+    familyCustom: {
+      get () {
+        return this.customFamily
+      },
+      set (v) {
+        this.customFamily = v
+        if (!PRESET_FONTS.has(this.customFamily)) {
+          set(this.localValue, 'family', v)
+          this.$emit('update:modelValue', this.customFamily)
+        }
+      }
+    },
+    invalidCustom () {
+      return PRESET_FONTS.has(this.customFamily)
+    },
     isCustom () {
-      return this.preset === 'custom'
+      return !PRESET_FONTS.has(this.family)
     },
     preset: {
       get () {
-        if (this.family === 'serif' ||
-            this.family === 'sans-serif' ||
-            this.family === 'monospace' ||
-            this.family === 'inherit') {
+        if (PRESET_FONTS.has(this.family)) {
           return this.family
         } else {
-          return 'custom'
+          return 'local'
         }
       },
       set (v) {
-        this.family = v === 'custom' ? '' : v
+        this.family = v === 'local' ? '' : v
       }
     }
   }