toggle-components-library 1.37.0 → 1.38.0

package/package.json

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

package/src/assets/icons/bolt-solid-toggle.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.922" height="12.381" viewBox="0 0 6.922 12.381">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.343" y1="-0.06" x2="0.923" y2="2.008" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#3180FF"/>
+      <stop offset="1" stop-color="#38ABFF"/>
+    </linearGradient>
+  </defs>
+  <path id="bolt-solid" d="M37.679,1.07a.944.944,0,0,0-.191-.931.469.469,0,0,0-.719.044L32.156,5.6a.961.961,0,0,0-.16.854.616.616,0,0,0,.541.5h2.009L33.16,11.294a.944.944,0,0,0,.191.931.469.469,0,0,0,.719-.044l4.613-5.417a.961.961,0,0,0,.16-.854.612.612,0,0,0-.541-.5H36.293Z" transform="translate(-31.959 0.009)" fill="url(#linear-gradient)"/>
+</svg>

package/src/assets/icons/edit-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#abb7c5"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -1,20 +1,24 @@
 <template>
   <div class="toggle-breadcrumb" v-if="breadcrumb_computed">
     <div v-for="(crumb, index) in breadcrumb_computed" :key="index">
-      <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
-      <NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
-      <i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
-      <h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
+      <template v-if="index === breadcrumb_computed.length - 1 && editable">
+        <div class="toggle-breadcrumb-last-element-container">
+          <h1 class="toggle-breadcrumb-h1 toggle-breadcrumb-last-element">{{ crumb.name }}</h1>
+          <div v-if="editable" class="toggle-breadcrumb-edit-icon" @click="editClicked"></div>
+        </div>
+      </template>
+      <template v-else>
+        <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
+        <NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
+        <i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
+        <h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-
-
 export default {
-
-  mixins: [],
   props: {
     isNuxt: {
       type: Boolean,
@@ -23,21 +27,21 @@ export default {
     breadcrumb: {
       type: Array,
       required: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
     }
   },
-
-  data: function () {
-
-
-    return {};
-  },
-
   computed: {
-
     breadcrumb_computed() {
       return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
-    },
+    }
+  },
+  methods: {
+    editClicked() {
+      this.$emit('edit-clicked')
+    }
   }
-
 }
 </script>

package/src/components/forms/ToggleInputRadioButtonMini.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="toggle-input-radio-button-mini-switch-wrapper">
+        <label :class="['toggle-input-radio-button-mini-switch', {'toggle-input-radio-button-mini-switch-disabled': disabled}]">
+            <input type="checkbox" :value="value" v-model="value" :disabled="disabled">
+            <span :class="['toggle-input-radio-button-mini-slider', {'toggle-input-radio-button-mini-slider-disabled': disabled}]"
+            :style="value == false ? ('background-color: ' + inactiveStyles.backgroundColor) : ('background-color: ' + activeStyles.backgroundColor)">
+                <span class="toggle-input-radio-button-mini-text-on" :style="'color: ' + activeStyles.color">On</span>
+                <span class="toggle-input-radio-button-mini-text-off" :style="'color: ' + inactiveStyles.color">Off</span>
+            </span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ToggleInputRadioButtonMini',
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        // Allows for the passing of background colour and text colour for active and inactive states
+        styles : {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    computed: {
+        value: {
+            get() {
+                return this.$attrs.value
+            },
+            set(value) {
+                this.$emit('input', value)
+            }
+        },
+        activeStyles () {
+            return {
+                backgroundColor: this.styles.active?.backgroundColor ? this.styles.active.backgroundColor : '#2196F3',
+                color: this.styles.active?.color ? this.styles.active.color : '#ffffff'
+            }
+        },
+        inactiveStyles () {
+            return {
+                backgroundColor: this.styles.inactive?.backgroundColor ? this.styles.inactive.backgroundColor : '#ccc',
+                color: this.styles.inactive?.color ? this.styles.inactive.color : '#3A4A62'
+            }
+        }
+    },
+    watch: {
+        value: function (val) {
+            this.$emit('input', val)
+        }
+    }
+}
+</script>

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
+        <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere || toggle}]">{{label}}</h3>
         <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
-        <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere }, { 'metric-value-small': small}]" v-else>{{metricValue}}
+        <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere || toggle }, { 'metric-value-small': small}]" v-else>{{metricValue}}
             <span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
-            <span v-if="atmosphere && live == true" class="toggle-metric-live-icon"></span>
+            <span v-if="(atmosphere || toggle) && live == true" :class="['toggle-metric-live-icon', {'toggle-metric-live-icon-toggle': toggle}]"></span>
         </h1>
     </div>
 </template>
@@ -82,7 +82,7 @@ export default {
             type: String,
             default: "default",
             validator: function (value) {
-                return ['default', 'atmosphere'].indexOf(value) !== -1
+                return ['default', 'atmosphere', 'toggle'].indexOf(value) !== -1
             }
         },
         metricSize: {
@@ -128,6 +128,9 @@ export default {
         atmosphere() {
             return this.metricStyle === 'atmosphere';
         },
+        toggle() {
+            return this.metricStyle === 'toggle';
+        },
         small() {
             return this.metricSize === 'small';
         }

package/src/index.js

@@ -8,6 +8,7 @@ import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
 import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
 import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
 import ToggleInputRadioButtons from "./components/forms/ToggleInputRadioButtons.vue";
+import ToggleInputRadioButtonMini from "./components/forms/ToggleInputRadioButtonMini.vue";
 import ToggleInputTextArea from "./components/forms/ToggleInputTextArea.vue";
 import ToggleInputCheckboxContainer from "./components/forms/ToggleInputCheckboxContainer.vue";
 import ToggleInternationalPhoneInputSelect from "./components/forms/ToggleInternationalPhoneInputSelect.vue";
@@ -112,6 +113,7 @@ const Components = {
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
+    ToggleInputRadioButtonMini,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
     ToggleInputCheckbox,

package/src/sass/includes/_as_breadcrumb.scss

@@ -36,4 +36,30 @@
         transform: rotate(-45deg);
         -webkit-transform: rotate(-45deg);
     }
-}
+    .toggle-breadcrumb-last-element-container {
+      display: flex;
+
+      .toggle-breadcrumb-last-element {
+        margin: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .toggle-breadcrumb-edit-icon {
+        margin: 4px 0 0 0;
+        background-image: url('../assets/icons/edit-icon.svg');
+        background-repeat:no-repeat;
+        background-size:contain;
+        height: 22px;
+        width: 22px;
+        min-width: 22px;
+        margin-left: 15px;
+        cursor: pointer;
+        transition: 0.2s;
+      }
+      .toggle-breadcrumb-edit-icon:hover {
+        filter: invert(0.5) sepia(1) saturate(3) hue-rotate(180deg);
+        transform: scale(1.07) rotate(-6deg);
+      }
+    }
+}

package/src/sass/includes/_as_inputs.scss

@@ -1218,4 +1218,71 @@ $iconWidth:20px;
 .drop-down-leave-to {
     overflow: hidden;
     max-height: 0;
+}
+
+// Radio button mini
+.toggle-input-radio-button-mini-switch-wrapper{
+    display: flex;
+    align-items: center;
+
+    .toggle-input-radio-button-mini-switch {
+        position: relative;
+        display: inline-block;
+        width: 52px;
+        height: 28px;
+    }
+
+    .toggle-input-radio-button-mini-switch input { 
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .toggle-input-radio-button-mini-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        -webkit-transition: .4s;
+        transition: .4s;
+        display: flex;
+        align-items: center;
+        border-radius: 34px;
+    }
+
+    .toggle-input-radio-button-mini-slider:before {
+        position: absolute;
+        content: "";
+        height: 22px;
+        width: 22px;
+        left: 4px;
+        bottom: 3px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s;
+        border-radius: 50%;
+    }
+
+    input:checked + .toggle-input-radio-button-mini-slider:before {
+        -webkit-transform: translateX(22px);
+        -ms-transform: translateX(22px);
+        transform: translateX(22px);
+    }
+
+    .toggle-input-radio-button-mini-text-on {
+        font-family: $toggle-font-family;
+        font-size: 12px;
+        margin-left: 7px;
+    }
+    .toggle-input-radio-button-mini-text-off {
+        font-family: $toggle-font-family;
+        font-size: 12px;
+        margin-left: 6px;
+    }
+    .toggle-input-radio-button-mini-switch-disabled {
+        cursor: default !important;
+        opacity: 0.5;
+    }
 }

package/src/sass/includes/_as_metrics.scss

@@ -164,4 +164,8 @@
     height: 19px;
     width: 19px;
     margin: 17px 0 0 5px;
+}
+
+.toggle-metric-live-icon-toggle {
+    background-image: url('../assets/icons/bolt-solid-toggle.svg') !important;
 }