toggle-components-library 1.25.3 → 1.25.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.25.3",
+  "version": "1.25.5",
   "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/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/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

@@ -154,8 +154,8 @@
     font-size: $toggle-font-size-small;
     color    : $toggle-error-red !important;
     display  : block;
-    position : absolute;
-    bottom   : 0.3rem;
+    margin-top: 1rem;
+    margin-bottom: -1.1rem;
 }
 
 // date picker
@@ -893,6 +893,8 @@ $iconWidth:20px;
     }
 
     .toggle-input-label-error  {
+        margin-top: 0rem;
+        margin-bottom: 0rem;
         position: absolute;
         bottom:-17px;
     }