toggle-components-library 1.37.1 → 1.38.0

package/package.json

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

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/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;
+    }
 }