toggle-components-library 1.11.1 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.11.1",
+  "version": "1.15.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/elements/ToggleLineBreak.vue

@@ -1,9 +1,27 @@
 <template>
-  <hr class="toggle-line-break"/>
+  <hr :class="classes"/>
 </template>
 
 <script>
 export default {
-name: "LineBreak"
+name: "LineBreak",
+props: {
+    colour: {
+      type: String,
+      default: 'blue',
+      validator: (value) => [
+        'blue',
+        'grey'
+      ].includes(value.toLowerCase())
+    },
+  },
+computed: {
+  classes() {
+    return {
+      'toggle-line-break': this.colour == 'blue',
+      'toggle-line-break-grey': this.colour == 'grey'
+    };
+  },
+}
 }
 </script>

package/src/components/forms/ToggleFontPicker.vue

@@ -0,0 +1,113 @@
+<template>
+  <ToggleInputSelect :options="fontOptions" :label="label" :name="name" :fontFamily="inputVal" v-model="inputVal" size="medium" :style="`font-family: ${inputVal};`"/>
+</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: {
+        value: {
+          type: String
+        },
+        /**
+         * 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 {
+        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
+          }
+        })
+      },
+      inputVal: {
+          get() {
+              return this.value;
+          },
+
+          set(value) {
+              this.$emit('input', value);
+          }
+      }
+    },
+
+    methods: {
+      getFonts() {
+        WebFont.load({
+            google: {
+                families: this.fonts
+            }
+        });
+      }
+    }
+  }
+</script>

package/src/components/forms/ToggleInputNumberUnit.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }" @click="focusClosestInput">
+      <label v-if="label" :for="name ? name : 'ToggleInputNumberUnit' " class="toggle-input-label" > 
+        {{ label }} 
+      </label>
+      <input
+          :name="name ? name : 'ToggleInputNumberUnit' " 
+          :class="[ 'toggle-input', size]"
+          :placeholder="placeholder ? placeholder : '' "
+          :autocomplete="autocomplete ? 'on' : 'off' "
+          :required="required"
+          v-model="inputVal"
+          @blur="onBlur" 
+          @focus="onFocus"
+          @keyup="onKeyup"
+      />
+      <label class="toggle-input-label-error" v-if="isInvalid" :for="name ? name : 'ToggleInputNumberUnit' ">
+          {{ errorMessage }}
+      </label>
+  </div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: [Number, String]
+        },
+        allowBlank:{
+            type:Boolean,
+            default:false
+        },
+        name: {
+            type: String,
+            default: "ToggleInputNumberUnit"
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        placeholder: {
+            type: String,
+            required: false
+        },
+        autocomplete: {
+            type: Boolean,
+            default: true
+        },
+        size: {
+            type: String,
+            validator: function (value) {
+                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
+            }
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        },
+        appendString: {
+          type: String,
+          required: false
+        },
+        prependString: {
+          type: String,
+          required: false
+        }
+    },
+
+    data() {       
+        return {
+            inputActive: false 
+        };
+    },
+    computed: {
+        inputVal: {
+            get() {
+              if (this.inputActive) {
+                if((this.value === '' || this.value === null) && this.allowBlank)
+                        return '';
+                        
+                    return this.value;
+              } else {
+                  if(this.value === '' || this.value == null || this.value === 0)
+                      return '';
+
+                  return this.value;
+              }
+            },
+            set(modifiedValue) {
+                this.$emit('input', modifiedValue);
+            }
+        },
+        appendStringLength() {
+         return this.appendString.length ?? 0;
+        },
+        prependStringLength() {
+         return this.prependString.length ?? 0;
+        }
+    },
+    methods: {
+        onKeyup() {
+          // Remove any non-numbers from the input value
+          this.$emit('input', this.value.replace(/[^0-9]/g,''))
+        },
+
+        onFocus() {
+          this.inputActive = true;
+          // When the user clicks in the box, remove the append and/or prepend values
+          if ((this.value != 0) && (this.value != '')) {
+            let tempValue = this.value;
+            if (this.appendString) {
+              // First take off the appended string
+              tempValue = this.value.slice(0, -this.appendStringLength)
+            }
+            if (this.prependString) {
+              // Then take off the prepended string
+              tempValue = tempValue.slice(this.prependStringLength, this.value.length)
+            }
+            this.$emit('input', tempValue);
+          }
+        },
+
+        onBlur(){
+          this.inputActive = false;
+
+          // Don't add the unit if the value is left empty
+          if (this.value != '') {
+            // When the user clicks out of the box, add the prepend and/or append values
+            let tempValue = this.value;
+            if (this.appendString) {
+              // First add the append string
+              tempValue += this.appendString; 
+            }
+            if (this.prependString) {
+              // Then add the prepend string
+              tempValue = this.prependString + tempValue;
+            }
+            this.$emit('input', tempValue)
+          }
+        },
+    }
+}
+
+
+
+</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,10 @@ 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 ToggleInputNumberUnit from "./components/forms/ToggleInputNumberUnit.vue";
+
 import './sass/main.scss';
 
 const Components = {
@@ -92,7 +96,9 @@ const Components = {
     ToggleFeatureButton,
     ToggleHelperTextSmall,
     ToggleInfoText,
-    ToggleInternationalPhoneInputSelect
+    ToggleInternationalPhoneInputSelect,
+    ToggleFontPicker,
+    ToggleInputNumberUnit
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_elements.scss

@@ -1,6 +1,9 @@
 .toggle-line-break {
   border-bottom: 1px solid $toggle-blue;
 }
+.toggle-line-break-grey {
+  border-bottom: 1px solid #D1D1D1;
+}
 .toggle-section-collapse {
   .toggle-section-collapse-header {
     width: 100%;

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;
 }