toggle-components-library 1.16.0 → 1.18.0

package/package.json

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

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/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/components/tables/ToggleTable.vue

@@ -102,12 +102,16 @@ export default {
                 return this.fields;
             },
 
-            searchActive() {
+            searchActive() { 
                 if(this.editingInput) {
                     return true;
                 }
                 for(let col in this.searchModels){
-                    if (col == 'date') {if(this.searchModels[col].start) return true;}
+                    if(!this.searchModels[col])
+                        return false;
+                    if (this.searchModels[col].start !== undefined) {
+                        return true;
+                    }
                     else if(this.searchModels[col]) return true;
                 }
                 return false;

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");
+          }
         
 
       }

package/src/sass/includes/_as_text.scss

@@ -5,7 +5,7 @@
 
 .toggle-helper-text-small{
   font-size:12px;
-  color: #202C38;
+  color: $toggle-dark-blue;
   font-family: "Lato", sans-serif;
   line-height: 1.4; 
   -webkit-font-smoothing: antialiased;