toggle-components-library 1.13.1 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

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/index.js

@@ -51,6 +51,8 @@ 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 = {
@@ -95,7 +97,8 @@ const Components = {
     ToggleHelperTextSmall,
     ToggleInfoText,
     ToggleInternationalPhoneInputSelect,
-    ToggleFontPicker
+    ToggleFontPicker,
+    ToggleInputNumberUnit
 }
 
 Object.keys(Components).forEach(name => {