toggle-components-library 1.10.1

package/src/components/forms/ToggleInputWebsite.vue

@@ -0,0 +1,163 @@
+<template>
+
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+    <label 
+        v-if="label"
+        :for="name ? name : 'InputWebsite' " 
+        class="toggle-input-label"
+    > {{ label }} 
+    </label>
+    <select class="toggle-input toggle-input-protocol" name="protocol" v-model="protocol" :required="required">
+        <option value="http://">http://</option>
+        <option value="https://">https://</option>
+    </select>
+    <input
+        :type="type"
+        :name="name ? name : 'ToggleInputwebsite' " 
+        :class="[ 'toggle-input toggle-input-website', size]"
+        :placeholder="placeholder ? placeholder : '' "
+        :autocomplete="autocomplete ? 'on' : 'off' "
+        :required="required"
+        v-model="website"
+        :maxlength="maxLength"
+        v-on:blur="setWebsite"
+    />
+    <label
+        class="toggle-input-label-error" 
+        v-if="isInvalid"
+        :for="name ? name : 'ToggleInputwebsite' "
+    >
+        {{ errorMessage }}
+    </label>
+</div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: [Number,String]
+        },
+        type: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['text', 'email', 'number', 'password'].indexOf(value) !== -1
+            }
+        },
+        name: {
+            type: String,
+            default: "ToggleInputWebsite"
+        },
+        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
+        },
+        maxLength:{
+            type: Number,
+            required:false
+        }
+    },
+    data : function(){
+        return {
+            protocol : "https://",
+            website : ""
+        };
+    },
+    created : function(){
+    },
+    computed: {
+        inputVal: {
+            get: function (){
+                return this.value;
+            },
+
+            set: function (value){
+                this.$emit('input', value);
+            }
+        }
+    },
+    watch:{
+
+        website : function()
+        {
+            this.inputVal = this.protocol + this.website;
+        },
+        protocol : function()
+        {
+            this.inputVal = this.protocol + this.website;
+        }
+
+    },
+    methods: {
+
+        /*
+        * Concat message for count characters
+        * @return string
+        */
+        messageLength(count, maxLenght)
+        {
+            let mcount = count ? count.length : 0;
+            return mcount+' / '+maxLenght;
+        },
+
+        onFocus() {
+            this.$emit('onFocus');
+        },
+
+        onBlur(){
+            this.$emit('onBlur');
+        },
+
+        setWebsite(){
+            if(this.inputVal) {
+
+                this.website = this.website.replace(/(^\w+:|^)\/\//, '');
+                var arr = this.inputVal.split("/");
+
+                if(arr[2] === 'http:' || arr[2] === 'https:'){
+                    this.protocol = arr[2] + "//";
+                } else {
+                    this.protocol = arr[0] + "//";
+                }
+
+            } else {
+                this.protocol = 'https://';
+                this.website = '';
+            }
+        },
+    }
+}
+
+
+</script>

package/src/components/forms/ToggleInternationalPhoneInputSelect.vue

@@ -0,0 +1,166 @@
+<template>
+<div class="toggle-country-wrapper" >
+    <div class="toggle-country-selector">
+        <label
+            v-if="label"
+            :for="name ? name : 'InternationalPhone' "
+            class="toggle-input-label"
+        > {{ label }}
+        </label>
+        <select
+            class="toggle-input-select-country select"
+            v-model="countrySelectormodel"
+            aria-placeholder="Select country"
+
+        >
+            <option
+                value=""
+                selected
+                data-default
+                :required="required"
+            >
+                {{placeholder ? placeholder : 'Country'}}
+            </option>
+            <option
+                v-bind:value="country"
+                v-for="country in countries"
+                :key="country.name"
+            >
+            {{ country.name + ' ' + country.emoji }}
+            </option>
+        </select>
+        <div class="toggle-selected-wraper">
+         
+          <div class="selected_number_code">
+            {{ ' (+'+inputVal.areaCode+')' }}
+          </div>
+          <div class="toggle-selected-country-emoji">
+             {{ countrySelectormodel.emoji }}
+          </div>
+        </div>
+    </div>
+    <input
+        type="tel"
+        class="toggle-input-select-country toggle-number"
+        :class="{'toggle-invalid-number':isInvalid }"
+        :name="name ? name : 'InputTel' "
+        :placeholder="placeholder ? placeholder : 'Mobile Number' "
+        :required="required"
+        v-model="inputVal.lineNumber"
+    />
+    <label
+        class="toggle-input-label-error "
+        v-if="isInvalid"
+        :for="name ? name : 'InternationalPhone' "
+    >
+        {{ componentError }}
+    </label>
+</div>
+</template>
+
+<script>
+import 'countries-list';
+
+export default {
+    data() {
+        return {
+            InternationalPhoneVal: '',
+            countries: {},
+            countrySelectormodel:''
+        }
+    },
+    props: {
+        value: {
+            type: Object,
+            default: {
+                areaCode: '44',
+                lineNumber: ''
+            }
+        },
+        name: {
+            type: String,
+            default: "InternationalPhone"
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        placeholder: {
+            type: String,
+            required: false
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        componentError: {
+            type: String,
+            required: false
+        }
+    },
+    computed: {
+        inputVal: {
+            get: function (){
+                return this.value
+            },
+
+            set: function (value){
+                this.$emit('input', value)
+            }
+        }
+    },
+    watch:{
+        countrySelectormodel(newVal){
+            this.inputVal.areaCode = newVal.phone;
+        }
+
+    },
+    mounted(){
+        const {countries,getUnicode } = require('countries-list');
+        this.setDefaultContry(countries);
+    },
+    methods: {
+
+        // Sets the selected country on page load
+        setDefaultContry(countries){
+
+            // convert the counties object into a sensible payload (array of objects) so that it can be sorted alphabetically.
+            let co = Object.keys(countries).map(function(key, index) {
+                countries[key].code = key;
+                return (countries[key]);
+            });
+
+            // sort the countires by name, alphabetically
+            this.countries = co.sort(function(a, b) {
+                if(a.name < b.name) return -1;
+                if(a.name > b.name) return 1;
+                return 0;
+            });
+
+            // if a value hasn't been set, lets select UK as default
+            if(!this.value.areaCode){
+                this.value.areaCode = '44';
+            }
+
+            // some provinces share phone country codes, including the UK, if it's a 44 number, let's select United Kingdom by default
+            // otherwise just select the first country found that's a match.
+            let possibleCountries = this.countries.filter(country => country.phone == this.value.areaCode);
+            let gb = possibleCountries.filter(country => country.code == 'GB');
+            this.countrySelectormodel = gb.length ? gb[0] : possibleCountries.length ? possibleCountries[0] : '';
+        },
+
+        onFocus() {
+            this.$emit('onFocus');
+        },
+
+        onBlur(){
+            this.$emit('onBlur');
+        },
+    }
+}
+
+</script>

package/src/components/loaders/ToggleFillLoader.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="toggle-fill-loader-container">
+        <div class="toggle-fill-loader-container-background">
+            <div class="toggle-fill-loader" ></div>
+        </div>
+    </div>
+</template>
+ 
+<script>
+export default {
+    name: 'ButtonPrimary',
+    props: {
+        buttonText: {
+            type: String,
+            default: "button"
+        },
+        type: {
+            type: String,
+            default: "text"
+        },
+        disabled: {
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        buttonStyle:{
+            type:String,
+            default:'confirm'
+        }
+    }
+}
+</script>

package/src/components/mixins/mixins.js

@@ -0,0 +1,48 @@
+
+export const mixins = {
+    data(){
+        return {}
+    },
+    methods:{
+
+        // When a container is clicked, the cosest internal input is focused.
+        focusClosestInput(event)
+        {
+            if(event.target.querySelector('input, textarea') !== null)
+                event.target.querySelector('input, textarea').focus();
+        },
+
+        // Pass in a string date YYYY-MM-DD and returned as DD/MM/YYYY
+        dateRangeView(date)
+        {
+          let formattedDate = ''
+          if (date) {
+            let splitdate = date.split("-");
+            formattedDate = splitdate[2]+'/'+splitdate[1]+'/'+splitdate[0];
+          }
+          return formattedDate
+        },
+
+        // Pass in a Javascript Date object and return as a string YYYY-MM-DD
+        formatDate(date)
+        {
+
+            if(!date)
+                return '';
+
+            let dd   = date.getDate();
+            let mm   = date.getMonth()+1; 
+            let yyyy = date.getFullYear();
+
+            // add zeros to single figures
+            if(dd<10) 
+                dd='0'+dd;
+            if(mm<10) 
+                mm='0'+mm;
+
+            return yyyy+'-'+mm+'-'+dd;
+
+        },
+
+    }
+}

package/src/components/modals/ToggleModal.vue

@@ -0,0 +1,83 @@
+<template>
+        <transition name="toggle-modal">
+            <div class="toggle-modal-mask toggle-modal-close" v-if="showModal" @click="backgroundClick">
+              <div class="toggle-modal-wrapper toggle-modal-close" >
+                <div class="toggle-modal-container" :style="{'max-width':maxwidth}" >
+
+                    <span class="toggle-modal-close-button" @click="showModal = false"></span>
+
+                    <slot></slot>
+
+                </div>
+              </div>
+          </div>
+        </transition>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+
+
+export default {
+    mixins:[mixins],
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        maxwidth: {
+            type:[String]
+        }
+    },
+
+    components: {
+
+
+    },
+
+    data : function(){
+        return {
+            showModal:false
+        }; 
+    },
+    created : function(){
+        this.$toggle_event.$on('modal_show', this.show);
+        this.$toggle_event.$on('modal_hide', this.hide);
+
+    },
+    beforeDestroy() {
+        this.$toggle_event.$off('modal_show', this.show);
+        this.$toggle_event.$off('modal_hide', this.hide);
+    },
+    computed: {
+       
+    },
+    methods: {
+
+        show(payload)
+        {
+            if(payload == this.name)
+                this.showModal = true;
+        },
+        hide(payload)
+        {
+            if(payload == this.name)
+                this.showModal = false;
+        },
+
+        backgroundClick(e)
+        {
+            if(e.target.classList.contains('toggle-modal-close'))
+                this.showModal = false;
+        }
+
+      
+
+       
+    }
+}
+
+
+</script>

package/src/components/navs/sidenav/ToggleSideNav.vue

@@ -0,0 +1,45 @@
+<template>
+  <nav class="toggle-sidenav-container">
+    <img
+      :src="logo.src"
+      :alt="logo.alt"
+      class="toggle-sidenav-logo"
+    >
+    <ToggleHeaderTextLarge class="toggle-sidenav-title">
+      {{ title }}
+    </ToggleHeaderTextLarge>
+      <ul class="toggle-sidenav-ul">
+        <!-- @slot For ToggleSideNavItems -->
+        <slot></slot>
+      </ul>
+  </nav>
+</template>
+
+<script>
+
+import ToggleHeaderTextLarge from '../../text/ToggleHeaderTextLarge.vue';
+
+export default {
+    name: 'ToggleSideNav',
+    props: {
+        /**
+         * For the logo that is displayed at the top of the nav
+         */
+        logo: {
+          type: Object,
+          required: true
+        },
+        /**
+         * The main title, displayed below logo
+         */
+        title: {
+          type: String,
+          default: 'toggle'
+        },
+    },
+    components: {
+        ToggleHeaderTextLarge,
+    },
+};
+</script>
+

package/src/components/navs/sidenav/ToggleSideNavItem.vue

@@ -0,0 +1,32 @@
+<template>
+  <li :class="['toggle-sidenav-item', icon, {'active':active, 'toggle-icon':icon,}]">
+
+    <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
+    <slot name="item"></slot>
+    <!--    @slot For sub nav component-->
+    <slot name="sub-nav"></slot>
+  </li>
+</template>
+
+<script>
+
+  
+export default {
+  name: 'ToggleSideNavItem',
+  props: {
+    /**
+     * Set whether an item is active
+     */
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Icon to use `toggle-graph-icon`, `toggle-orders-icon`, `toggle-card-icon`, `toggle-megaphone-icon`
+     */
+    icon: {
+      type: String,
+    },
+  }
+};
+</script>

package/src/components/navs/sidenav/ToggleSideSubNav.vue

@@ -0,0 +1,24 @@
+<template>
+  <ul
+    class="toggle-sidenav-sub-ul"
+    v-if="expanded"
+  >
+    <!--    @slot For nav-item link (either regular a tag or vue-router link)-->
+    <slot></slot>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'ToggleSideSubNav',
+  props: {
+    /**
+     * Should the subnav display expanded?
+     */
+    expanded: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>

package/src/components/notifications/ToggleNotifications.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="toggle-notifications-messagebox" :class="{active:active, error:isError}">
+      <span class="message">{{ message }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToggleNotifications',
+  mixins: [],
+  props: [],
+
+  data: function() {
+    return {
+
+      message: '', // the message to show
+      queuedMessages: 0, // number of messages being/waiting to be displayed
+      showAlertsFor: 3000, // how long should each error display for?
+      isError: false, // is it an error? true for yes, false for now
+
+    };
+  },
+  computed: {
+
+    active() // is the message showing?
+    {
+      return this.queuedMessages > 0;
+    },
+
+    timeout()  // timeouts ensure that when there are multiple errors, they are shown in order rather than all at once.
+    {
+      return this.queuedMessages * this.showAlertsFor;
+    },
+
+  },
+  watch: {},
+  created: function() {
+    this.$toggle_event.$on('success_message', this.showBox);
+    this.$toggle_event.$on('error_message', this.showErrorBox);
+  },
+  beforeDestroy() {
+    this.$toggle_event.$off('success_message', this.showBox);
+    this.$toggle_event.$off('error_message', this.showErrorBox);
+  },
+  mounted: function() {
+  },
+  destroyed() {
+  },
+  methods: {
+
+    // trigger an error alert
+    showErrorBox(message) {
+      setTimeout(() => {  // timeouts ensure that when there are multiple errors, they are shown in order rather than all at once.
+        this.isError = true;
+        this.message = message;
+      }, this.timeout);
+      this.queuedMessages++;
+      setTimeout(() => {
+        this.hideBox();
+      }, this.timeout);
+    },
+
+    // trigger a success alert
+    showBox(message) {
+      setTimeout(() => { // timeouts ensure that when there are multiple errors, they are shown in order rather than all at once.
+        this.isError = false;
+        this.message = message;
+      }, this.timeout);
+      this.queuedMessages++;
+      setTimeout(() => {
+        this.hideBox();
+      }, this.timeout);
+    },
+
+    // remove a queued message and remove the box if none remaining
+    hideBox() {
+      this.queuedMessages--;
+
+      if (this.queuedMessages == 0) {
+        setTimeout(() => {
+          this.message = '';
+          this.isError = false;
+        }, 1000); // wait for the box to transition out of the page before resetting the message
+      }
+    },
+
+  },
+};
+</script>
+
+