toggle-components-library 1.37.0-beta.1 → 1.37.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.37.0-beta.1",
+    "version": "1.37.0-beta.11",
     "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,13 +1,11 @@
 <template>
-  <div class="toggle-breadcrumb" v-if="breadcrumb_computed">
+  <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">
-        <input
-          class="toggle-breadcrumb-editable-input"
-          v-model="crumb.name"
-          maxlength="50"
-          @input="autoResizeInput($event.target); updateContent($event);"
-        />
+        <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>
@@ -21,7 +19,6 @@
 
 <script>
 export default {
-  mixins: [],
   props: {
     isNuxt: {
       type: Boolean,
@@ -36,24 +33,14 @@ export default {
       default: false
     }
   },
-
-  data: function () {
-    return {};
-  },
-
   computed: {
     breadcrumb_computed() {
-      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
-    },
+      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
+    }
   },
-
   methods: {
-    autoResizeInput(input) {
-      input.style.width = input.value.length * 11 + "px";
-    }, 
-    updateContent(event) {
-      const newContent = event.target.value;
-      this.$emit('update:lastCrumb', newContent);
+    editClicked() {
+      this.$emit('edit-clicked')
     }
   }
 }

package/src/components/forms/ToggleInputRadioButtonMini.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <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}]">

package/src/sass/includes/_as_breadcrumb.scss

@@ -10,37 +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: 10rem !important;
-        max-width: 31rem !important;
-        height: 2rem;
-        width: 15rem;
-        padding-right: 0.5rem;
-        border: none;
-        border-radius: 4px;
-        white-space: nowrap;
-        overflow: hidden;
-        line-height: 1;
-        border: 1px solid transparent;
-        margin: -1px 0 0 0;
-      }
-      .toggle-breadcrumb-editable-input:hover {
-        border: 1px solid #ccc;
-        background-color: $toggle-off-white;
-      }
-
-      .toggle-breadcrumb-editable-input:focus {
-        border: 1px solid #ccc;
-        outline: none;
-      }
-
-
     a {
 
         font-size: $toggle-font-size-extra-large;
@@ -67,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

@@ -1221,80 +1221,84 @@ $iconWidth:20px;
 }
 
 // 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;
+.toggle-input-radio-button-mini-switch-wrapper{
     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;
+    .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;
+    }
 }