toggle-components-library 1.16.2 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.16.2",
+  "version": "1.19.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -32,6 +32,7 @@
     "vue-airbnb-style-datepicker": "^2.7.1",
     "vue-color": "^2.7.1",
     "vue-moment": "^4.1.0",
+    "vue-multiselect": "^2.0.8",
     "vue-router": "^3.4.3",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.24.3",

package/src/assets/icons/form_icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.942" height="14.942" viewBox="0 0 14.942 14.942">
+  <g id="Group_207" data-name="Group 207" transform="translate(-162.057 -567.364)">
+    <rect id="Rectangle_890" data-name="Rectangle 890" width="14" height="14" rx="2" transform="matrix(0.998, -0.07, 0.07, 0.998, 162.057, 568.341)" fill="#e57936"/>
+    <path id="Rectangle_889_-_Outline" data-name="Rectangle 889 - Outline" d="M2,1A1,1,0,0,0,1,2V12a1,1,0,0,0,1,1H12a1,1,0,0,0,1-1V2a1,1,0,0,0-1-1H2M2,0H12a2,2,0,0,1,2,2V12a2,2,0,0,1-2,2H2a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0Z" transform="matrix(0.998, -0.07, 0.07, 0.998, 162.057, 568.341)" fill="#881212"/>
+    <path id="Line_290" data-name="Line 290" d="M4.641.5H0A.5.5,0,0,1-.5,0,.5.5,0,0,1,0-.5H4.641a.5.5,0,0,1,.5.5A.5.5,0,0,1,4.641.5Z" transform="matrix(0.998, -0.07, 0.07, 0.998, 165.198, 571.75)" fill="#881212"/>
+    <path id="Line_291" data-name="Line 291" d="M8.21.5H0A.5.5,0,0,1-.5,0,.5.5,0,0,1,0-.5H8.21a.5.5,0,0,1,.5.5A.5.5,0,0,1,8.21.5Z" transform="matrix(0.998, -0.07, 0.07, 0.998, 165.364, 574.125)" fill="#881212"/>
+    <path id="Line_292" data-name="Line 292" d="M1.685.5H0A.5.5,0,0,1-.5,0,.5.5,0,0,1,0-.5H1.685a.5.5,0,0,1,.5.5A.5.5,0,0,1,1.685.5Z" transform="matrix(0.998, -0.07, 0.07, 0.998, 171.588, 571.303)" fill="#881212"/>
+    <path id="Line_293" data-name="Line 293" d="M2.761.75H0A.75.75,0,0,1-.75,0,.75.75,0,0,1,0-.75H2.761a.75.75,0,0,1,.75.75A.75.75,0,0,1,2.761.75Z" transform="matrix(0.998, -0.07, 0.07, 0.998, 168.317, 577.306)" fill="#881212"/>
+  </g>
+</svg>

package/src/components/buttons/ToggleButton.vue

@@ -74,7 +74,29 @@ export default {
             return this.buttonStyle.includes('mini');
         }
     },
+    watch: {
+      disabled() {
+        if (this.$slots.default !== undefined){
+          this.disableLinks()
+        }
+      },
+      loading() {
+        if (this.$slots.default !== undefined){
+          this.disableLinks()
+        }
+      }
+    },
     methods: {
+  
+      /**
+       * set link href to null if button loading or disabled 
+       */
+      disableLinks() {
+        this.$slots.default.forEach(slot => {
+          slot.data.attrs.href = this.disabled || this.loading ? null : slot.data.attrs.href;
+        })
+      },
+      
         click(){
             /**
              * Emitted when the button is clicked.
@@ -83,6 +105,11 @@ export default {
              */
             this.$emit('click');
         }
+    },
+    created() {
+      if (this.$slots.default !== undefined){
+        this.disableLinks()
+      }
     }
 }
 </script>

package/src/components/forms/ToggleInputMultiSelect.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }" >
+
+    <label v-if="label" class="toggle-input-label toggle-float-none" :for="name ? name : 'ToggleInputMultiSelect' ">
+      {{label}}
+    </label>
+
+    <div class="input-holder">
+      <multiselect v-model="inputVal" :options="options" :multiple="true" :close-on-select="true" :clear-on-select="false" :preserve-search="true" :placeholder="placeholder" label="label" track-by="value" :preselect-first="false">
+      </multiselect>
+    </div>
+
+    <label class="toggle-input-label-error" v-if="isInvalid" :for="name ? name : 'ToggleInputMultiSelect' ">
+        {{ errorMessage }}
+    </label>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Multiselect from 'vue-multiselect';
+import 'vue-multiselect/dist/vue-multiselect.min.css';
+Vue.component('multi-select', Multiselect);
+
+export default {
+    components: { Multiselect },
+    props: {
+      value: {
+        type: Array
+      },
+      label: {
+        type: String
+      },
+      name: {
+        type: String,
+        required: false
+      },
+      options: {
+        type: Array,
+        required: true
+      },
+      placeholder: {
+        type: String,
+        required: false
+      },
+      isInvalid: {
+        type: Boolean,
+        required: false
+      },
+      errorMessage: {
+        type: String,
+        required: false
+      }
+    },
+    computed: {
+        inputVal: {
+            get(){
+                return this.value;
+            },
+
+            set(value){
+                this.$emit('input', value);
+            }
+        }
+    },
+}
+</script>
+<style>
+
+</style>

package/src/components/forms/ToggleInputTextArea.vue

@@ -16,6 +16,7 @@
         :required="required"
         v-model="inputVal"
         :maxlength="maxLength"
+        :disabled="disabled"
     />
     <label
         class="toggle-input-label-error" 
@@ -81,6 +82,10 @@ export default {
         maxLength:{
             type: Number,
             required:false
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
         }
     },
 

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

@@ -22,7 +22,7 @@ export default {
       default: false,
     },
     /**
-     * Icon to use `toggle-graph-icon`, `toggle-orders-icon`, `toggle-card-icon`, `toggle-megaphone-icon`
+     * Icon to use `toggle-graph-icon`, `toggle-orders-icon`, `toggle-card-icon`, `toggle-megaphone-icon`, `toggle-form-icon`
      */
     icon: {
       type: String,

package/src/index.js

@@ -53,6 +53,7 @@ import ToggleFontPicker from "./components/forms/ToggleFontPicker.vue";
 
 import ToggleInputNumberUnit from "./components/forms/ToggleInputNumberUnit.vue";
 import ToggleInputLabelLeft from "./components/forms/ToggleInputLabelLeft.vue";
+import ToggleInputMultiSelect from "./components/forms/ToggleInputMultiSelect.vue";
 
 import './sass/main.scss';
 
@@ -100,7 +101,8 @@ const Components = {
     ToggleInternationalPhoneInputSelect,
     ToggleFontPicker,
     ToggleInputNumberUnit,
-    ToggleInputLabelLeft
+    ToggleInputLabelLeft,
+    ToggleInputMultiSelect
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_globals.scss

@@ -1 +1,5 @@
 @import "_as_variables";
+
+.toggle-float-none {
+  float: none !important;
+}

package/src/sass/includes/_as_inputs.scss

@@ -158,8 +158,6 @@
     bottom   : 0.3rem;
 }
 
-
-
 // date picker
 
 .toggle-date-container{
@@ -248,7 +246,6 @@
     }
 }
 
-
  
 .toggle-input-select{
 

package/src/sass/includes/_as_navs.scss

@@ -81,6 +81,9 @@
           &.toggle-email-icon a::before {
             background-image: url("../assets/icons/email.svg");
           }
+          &.toggle-form-icon a::before {
+            background-image: url("../assets/icons/form_icon.svg");
+          }
         
 
       }