toggle-components-library 1.37.0-beta.2 → 1.37.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.37.0-beta.2",
+    "version": "1.37.0-beta.20",
     "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/components/breadcrumb/ToggleBreadCrumb.vue

@@ -1,25 +1,19 @@
 <template>
   <div class="toggle-breadcrumb" v-if="breadcrumb_computed">
     <div v-for="(crumb, index) in breadcrumb_computed" :key="index">
-      <template v-if="index === breadcrumb_computed.length - 1 && editable">
-        <span
-          contenteditable="true"
-          class="toggle-breadcrumb-editable-input"
-          @input="updateContent($event);"
-        >{{ crumb.name }}</span>
-      </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>
+      <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>
     </div>
   </div>
 </template>
 
 <script>
+
+
 export default {
+
   mixins: [],
   props: {
     isNuxt: {
@@ -29,46 +23,21 @@ export default {
     breadcrumb: {
       type: Array,
       required: false
-    },
-    editable: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    maxChars: {
-      type: Number,
-      default: 50,
-      required: false
     }
   },
 
   data: function () {
-    return {
-      content: ''
-    };
+
+
+    return {};
   },
 
   computed: {
+
     breadcrumb_computed() {
-      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
+      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
     },
-  },
-
-  methods: {
-
-    updateContent(event) {
-      // Limit the input to 50 characters
-      if (event.target.innerText.length >= this.maxChars) {
-        event.target.innerText = this.content;
-        
-        // Move the cursor to the end of the input
-        document.getSelection().modify("move", "forward", "documentboundary");
-    
-      } else {
-        this.content = event.target.innerText;
-        this.$emit('update:lastCrumb', this.content);
-      }
-    }
   }
+
 }
 </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,7 +8,6 @@ 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";
@@ -113,7 +112,6 @@ const Components = {
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
-    ToggleInputRadioButtonMini,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
     ToggleInputCheckbox,

package/src/sass/includes/_as_breadcrumb.scss

@@ -10,47 +10,6 @@
 
     }
 
-    .toggle-breadcrumb-editable-input {
-        font-size: $toggle-font-size-extra-large;
-        font-family: "DIN-2014","Lato",sans-serif;
-        color: $toggle-black;
-        background-color: transparent;
-        display: inline-flex;
-        align-items: center;
-        min-width: 5rem !important;
-        height: 2rem;
-        padding-right: 0.5rem;
-        padding-left: 10px;
-        border: none;
-        border-radius: 4px;
-        white-space: nowrap;
-        line-height: 1;
-        border: 1px solid transparent;
-        margin: -1px 0 0 -10px;
-      }
-
-      .toggle-breadcrumb-editable-input:hover {
-        border: 1px solid #ccc;
-        background-color: $toggle-off-white;
-      }
-
-      .toggle-breadcrumb-editable-input:focus {
-        border: 1px solid #ccc;
-        background-color: $toggle-off-white;
-        outline: none;
-      }
-
-      .toggle-breadcrumb-editable-input::after {
-        content: '';
-        background-image: url('../assets/icons/edit-icon.svg');
-        background-repeat:no-repeat;
-        background-size:contain;
-        height: 22px;
-        width: 22px;
-        margin: 0 0 0 10px;
-        cursor: text;
-      }
-
     a {
 
         font-size: $toggle-font-size-extra-large;

package/src/sass/includes/_as_inputs.scss

@@ -1218,83 +1218,4 @@ $iconWidth:20px;
 .drop-down-leave-to {
     overflow: hidden;
     max-height: 0;
-}
-
-// Radio button mini
-
-.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;
-    background-color: #ccc;
-    -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 {
-    background-color: #2196F3;
-  }
-  
-  input:focus + .toggle-input-radio-button-mini-slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  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;
-    color: #ffffff;
-    margin-left: 7px;
-  }
-  .toggle-input-radio-button-mini-text-off {
-    font-family: $toggle-font-family;
-    font-size: 12px;
-    color: #3A4A62;
-    margin-left: 6px;
-  }
-.toggle-input-radio-button-mini-switch-disabled {
-    cursor: default !important;
-    opacity: 0.5;
-}
-
-.toggle-input-radio-button-mini-slider-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;
 }

package/dist/img/edit-icon.9a5af324.svg

@@ -1 +0,0 @@
-<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/assets/icons/edit-icon.svg

@@ -1 +0,0 @@
-<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/forms/ToggleInputRadioButtonMini.vue

@@ -1,38 +0,0 @@
-<template>
-    <div>
-        <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}]">
-                <span class="toggle-input-radio-button-mini-text-on">On</span>
-                <span class="toggle-input-radio-button-mini-text-off">Off</span>
-            </span>
-        </label>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToggleInputRadioButtonMini',
-    props: {
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    },
-    computed: {
-        value: {
-            get() {
-                return this.$attrs.value
-            },
-            set(value) {
-                this.$emit('input', value)
-            }
-        }
-    },
-    watch: {
-        value: function (val) {
-            this.$emit('input', val)
-        }
-    }
-}
-</script>