toggle-components-library 1.11.1 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -34,7 +34,8 @@
     "vue-moment": "^4.1.0",
     "vue-router": "^3.4.3",
     "vue2-dropzone": "^3.6.0",
-    "vuedraggable": "^2.24.3"
+    "vuedraggable": "^2.24.3",
+    "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",

package/src/components/forms/ToggleFontPicker.vue

@@ -0,0 +1,102 @@
+<template>
+  <ToggleInputSelect :options="fontOptions" :label="label" :name="name" :fontFamily="fontValue" v-model="fontValue" size="medium" :style="`font-family: ${fontValue};`"/>
+</template>
+
+<script>
+import { mixins } from '../mixins/mixins';
+import ToggleInputSelect from './ToggleInputSelect.vue';
+var WebFont = require('webfontloader');
+ 
+export default {
+    mixins:[mixins],
+    components:{ ToggleInputSelect },
+    name: 'FontPicker',
+    props: {
+        /**
+         * The name of the fontpicker component
+         */
+        name: {
+            type: String,
+            default: "ToggleFontPicker"
+        },
+        /**
+         * The label that will be displayed
+         */
+        label: {
+            type: String,
+            required: false,
+            default: "Font picker"
+        },
+        /**
+         * Whether this is a required field or not
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+      return {
+        fontValue: '',
+        fonts: [
+            'Abril Fatface',
+            'Alpha Slab One',
+            'Anton',
+            'Arvo',
+            'Bodoni Moda',
+            'EB Garamond',
+            'Fredoka One',
+            'IBM Plex Mono',
+            'Lato',
+            'Libre Baskerville',
+            'Lora',
+            'Merriweather',
+            'Montserrat',
+            'Nunito',
+            'Open Sans',
+            'Open Sans Condensed',
+            'Oswald',
+            'Poppins',
+            'Prata',
+            'PT Serif',
+            'Quicksand',
+            'Roboto',
+            'Roboto Mono',
+            'Roboto Slab',
+            'Rubik',
+            'Sacramento',
+            'Source Sans Pro',
+            'Source Serif Pro',
+            'Volkhov',
+            'Work Sans Pro',
+            'Space Mono'
+          ],
+      }
+    },
+    created() {
+      this.getFonts();
+    },
+
+    computed: {
+      fontOptions() {
+        // Format font list into value/label object for select input
+        return this.fonts.map(font => {
+          return {
+            value: font,
+            label: font
+          }
+        })
+      }
+    },
+
+    methods: {
+      getFonts() {
+          WebFont.load({
+              google: {
+                  families: this.fonts
+              }
+          });
+      }
+    }
+  }
+</script>

package/src/components/forms/ToggleInputSelect.vue

@@ -15,6 +15,7 @@
             v-model="inputVal" 
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
+            :style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
             >
                 <option value="">Select an option</option>
                 <option :value="option.value" v-for="(option, key) in options" v-bind:key="key">{{option.label}}</option>
@@ -72,6 +73,10 @@ export default {
         errorMessage: {
             type: String,
             required: false
+        },
+        fontFamily: {
+            type: String,
+            required: false
         }
     },
 

package/src/index.js

@@ -49,6 +49,8 @@ import ToggleHeaderTextLarge from "./components/text/ToggleHeaderTextLarge.vue";
 import ToggleHelperTextSmall from "./components/text/ToggleHelperTextSmall.vue";
 import ToggleInfoText from "./components/text/ToggleInfoText.vue";
 
+import ToggleFontPicker from "./components/forms/ToggleFontPicker.vue";
+
 import './sass/main.scss';
 
 const Components = {
@@ -92,7 +94,8 @@ const Components = {
     ToggleFeatureButton,
     ToggleHelperTextSmall,
     ToggleInfoText,
-    ToggleInternationalPhoneInputSelect
+    ToggleInternationalPhoneInputSelect,
+    ToggleFontPicker
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_inputs.scss

@@ -642,7 +642,7 @@ $iconWidth:20px;
     float: left;
     outline: 1px solid ;
     outline-offset: -1px;
-    padding: 0 0 0 1rem;
+    padding: 0 0 0 1rem !important;
 }