toggle-components-library 1.25.2 → 1.25.4

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.25.2",
+  "version": "1.25.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

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

package/src/components/buttons/ToggleLoginButton.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="toggle-button-container">
+
+        <button :type="type"
+            :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }]" @click="click">
+
+            <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" 
+            v-if="loading"></div>
+
+            <div class="toggle-login-button-text" v-else>
+                {{ buttonText }}
+            </div>
+
+        </button>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ButtonLogin',
+    props: {
+        /**
+         * The test to display in side the button
+         */
+        buttonText: {
+            type: String,
+            default: "Let's go!"
+        },
+        /**
+         * The HTML button type i.e. `submit` or `button`
+         */
+        type: {
+            type: String,
+            default: "submit"
+        },
+        /**
+         * Is the button in a loading state?
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+        * Is the button being used on toggle or airship? use `toggle` or `airship`
+        */
+        platform: {
+            type: String,
+            default: "toggle",
+            validator: function (value) {
+                return ['toggle', 'airship'].indexOf(value) !== -1;
+            },
+        }
+    },
+    methods: {
+        click() {
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
+    }
+}
+</script>

package/src/components/forms/ToggleInputImage.vue

@@ -15,7 +15,7 @@
             tag="ul"
             v-model="inputVal"
             v-bind="dragOptions"
-     
+
         >
             <transition-group type="transition" >
             <li
@@ -25,7 +25,7 @@
                 :style="{marginRight:thumbnailWidth / 8 + 'px'}"
 
             >
-                <div class="toggle-item-img toggle-dark-grey toggle-center"
+                <div class="toggle-item-img toggle-dark-grey toggle-center" :class="moveIconClass"
                      :style="{  background: `rgb(243, 237, 237) url(${image.url}) no-repeat center top`,
                                 height: previewRatio == 'letterbox' ? thumbnailWidth / 2 + 'px': thumbnailWidth+'px',
                                 width: thumbnailWidth+'px'}"
@@ -49,7 +49,7 @@
                     :id="'dropzone'+_uid" 
                     :options="dropzoneOptions" 
                     @vdropzone-file-added="fileAdded" 
-                
+
                 />
             </div>
         </div>
@@ -142,6 +142,11 @@ export default {
                 animation: 200,
                 group: "images",
             };
+        },
+        moveIconClass() {
+            return {
+                'toggle-move-icon' : this.images.length > 1
+            }
         },
           inputVal: {
             get: function (){
@@ -155,8 +160,8 @@ export default {
     },
     methods: {
 
-   
-       
+
+
     }
 }
 
@@ -164,5 +169,4 @@ export default {
 </script>
 <style lang="scss">
 
-
 </style>

package/src/components/navs/multitiersidenav/ToggleMultiTierSideNav.vue

@@ -14,7 +14,7 @@
 
 
         <div class="toggle-multi-tier-sidenav-select-container">
-            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptions" v-model="unitOptionVal" />
+            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptionsSorted" v-model="unitOptionVal" />
         </div>
 
         <div  v-if="userMenuOpen" class="toggle-multi-tier-sidenav-user-menu-container">
@@ -82,7 +82,19 @@ export default {
             set: function (value) {
                 this.$emit('input', value);
             }
+        },
+
+        unitOptionsSorted() {
+            // Create a new array and populate it with the elements from the original unitOptions array
+            const sortedUnitOptions = [...this.unitOptions];
+
+            // Sort the new array in ascending alphabetical order according to the label property of each element
+            sortedUnitOptions.sort((a, b) => a.label.localeCompare(b.label));
+
+            // Return the new sorted array
+            return sortedUnitOptions;
         }
+        
     },
     components: {
         ToggleHeaderTextLarge,

package/src/components/text/ToggleTextClipboardCopy.vue

@@ -45,7 +45,16 @@ export default {
                 window.getSelection().removeAllRanges();
                 window.getSelection().addRange(range);
                 document.execCommand("copy");
-      }
+                this.click();
+      },
+      click(){
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
     }
 };
 </script>

package/src/index.js

@@ -25,6 +25,7 @@ import ToggleModal from "./components/modals/ToggleModal.vue";
 import ToggleInputSearch from "./components/forms/ToggleInputSearch.vue";
 import ToggleInputRadioButtonGroup from "./components/forms/ToggleInputRadioButtonGroup.vue";
 import ToggleButton from "./components/buttons/ToggleButton.vue";
+import ToggleLoginButton from "./components/buttons/ToggleLoginButton.vue";
 import ToggleFillLoader from "./components/loaders/ToggleFillLoader.vue";
 
 
@@ -90,6 +91,7 @@ const Components = {
     ToggleFillLoader,
     ToggleInputImage,
     ToggleButton,
+    ToggleLoginButton,
     ToggleInputGroup,
     ToggleHeaderTextLarge,
     ToggleInputNumber,

package/src/sass/includes/_as_buttons.scss

@@ -237,3 +237,58 @@
     }
 
 }
+
+// 
+// Toggle and Airship Login Buttons
+// 
+
+.toggle-login-button {
+    background-color: #3180FF;
+    border: 0;
+    border-radius: 23px;
+    width: 120px;
+    height: 46px;
+    color: #ffffff;
+    cursor: pointer;
+    font: normal normal 600 15px/18px Lato;
+    position: relative;
+    transition: box-shadow .3s, transform .3s, background-color .3s, -webkit-transform .3s;
+}
+
+.toggle-login-button--airship {
+    background-color: #FF7175 !important;
+}
+
+.toggle-login-button:hover {
+    background-color: #1571dd;
+    box-shadow: 0 10px 30px -10px #2cc1ff;
+    -webkit-transform: translate(0, -3px);
+    -ms-transform: translate(0, -3px);
+    transform: translate(0, -3px);
+    color: #fff;
+}
+
+.toggle-login-button--airship:hover {
+    background-color: #ff463f !important;
+    box-shadow: 0 10px 30px -10px rgb(254 108 102 / 50%) !important;
+}
+
+.toggle-login-button-loader {
+    border-radius: 50%;
+    border: .25rem solid #fff;
+    border-top-color: #3180FF;
+    animation: spin 1s infinite linear;
+    margin: 0 auto;
+    width: 0.5rem;
+    height: 0.5rem;
+    position: absolute;
+    left: 50%;
+    margin-left: -0.5rem;
+    top: 50%;
+    margin-top: -0.5rem;
+    box-sizing: content-box;
+}
+
+.toggle-login-button-loader--airship {
+    border-top-color: #FF7175;
+}

package/src/sass/includes/_as_inputs.scss

@@ -507,20 +507,20 @@ $iconWidth:20px;
                     background-size: cover !important;
                     background-position: center;
                     border-radius:4px;
-                    cursor: move;
                 }
-                .toggle-item-img::after{
+                .toggle-center {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .toggle-move-icon::after {
                     position: absolute;
                     content:'';
                     height: 100%;
                     width: 100%;
+                    background-size: $iconWidth!important;
                     background: url('../assets/icons/draggable.svg') no-repeat center center;
-                    background-size: $iconWidth;
-                }
-                .toggle-center {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
+                    cursor: move;
                 }
               
             }

package/src/sass/includes/_as_text.scss

@@ -51,7 +51,7 @@ a {
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat;
-      cursor:pointer;
+      cursor:copy;
     }
   }
 }