toggle-components-library 1.37.0-beta.6 → 1.37.0-beta.8

package/package.json

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

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -1,16 +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">
-        <span
-          ref="editableSpan"
-          contenteditable="true"
-          class="toggle-breadcrumb-editable-input"
-          @input="handleInput"
-          @keypress="handleKeypress"
-          @keydown.enter.prevent="handleEnterKey"
-          @paste.prevent="handlePaste"
-        >{{ crumb.name }}</span>
+        <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>
@@ -35,115 +30,17 @@ export default {
     },
     editable: {
       type: Boolean,
-      default: false,
-      required: false
-    },
-    maxChars: {
-      type: Number,
-      default: 50,
-      required: false
-    }
-  },
-
-  data() {
-    return {
-      lastValidContent: ''
+      default: false
     }
   },
-
   computed: {
     breadcrumb_computed() {
-      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb;
+      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
     }
   },
-
-  mounted() {
-    this.updateContent();
-  },
-
   methods: {
-    updateContent() {
-      if (this.$refs.editableSpan && this.breadcrumb_computed?.length) {
-        const lastCrumb = this.breadcrumb_computed[this.breadcrumb_computed.length - 1];
-        if (this.$refs.editableSpan.textContent !== lastCrumb.name) {
-          this.$refs.editableSpan.textContent = lastCrumb.name;
-          this.lastValidContent = lastCrumb.name;
-        }
-      }
-    },
-
-    handleKeypress(event) {
-      if (event.key.length !== 1) return;
-
-      const currentLength = this.$refs.editableSpan.textContent.length;
-      const selection = window.getSelection();
-      const selectedLength = selection.toString().length;
-
-      if (currentLength - selectedLength >= this.maxChars) {
-        event.preventDefault();
-        return false;
-      }
-    },
-
-    handleInput(event) {
-      const newText = event.target.textContent;
-      
-      if (newText.length <= this.maxChars) {
-        this.lastValidContent = newText;
-        this.$emit('update:lastCrumb', newText);
-      } else {
-        // Get cursor position before restoring text
-        const selection = window.getSelection();
-        const cursorPosition = selection.getRangeAt(0).startOffset;
-
-        // Restore previous content
-        event.target.textContent = this.lastValidContent;
-
-        // Restore cursor position
-        const range = document.createRange();
-        const textNode = event.target.firstChild;
-        if (textNode) {
-          range.setStart(textNode, Math.min(cursorPosition, this.lastValidContent.length));
-          range.collapse(true);
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-      }
-    },
-
-    handlePaste(event) {
-      event.preventDefault();
-      const text = (event.clipboardData || window.clipboardData).getData('text');
-      const cleanText = text.replace(/[\r\n\s]+/g, ' ').trim();
-      
-      const selection = window.getSelection();
-      const range = selection.getRangeAt(0);
-      const currentLength = this.$refs.editableSpan.textContent.length;
-      const selectionLength = selection.toString().length;
-      
-      const availableSpace = this.maxChars - (currentLength - selectionLength);
-      if (availableSpace > 0) {
-        const truncatedText = cleanText.slice(0, availableSpace);
-        range.deleteContents();
-        range.insertNode(document.createTextNode(truncatedText));
-        range.collapse(false);
-        this.lastValidContent = this.$refs.editableSpan.textContent;
-        this.$emit('update:lastCrumb', this.lastValidContent);
-      }
-    },
-
-    handleEnterKey(event) {
-      event.preventDefault();
-      event.target.blur();
-    }
-  },
-
-  watch: {
-    'breadcrumb_computed': {
-      handler() {
-        this.$nextTick(this.updateContent);
-      },
-      deep: true
+    editClicked() {
+      this.$emit('edit-clicked')
     }
   }
 }

package/src/sass/includes/_as_breadcrumb.scss

@@ -10,48 +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;
-        white-space: nowrap
-      }
-
-      .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;
@@ -78,4 +36,26 @@
         transform: rotate(-45deg);
         -webkit-transform: rotate(-45deg);
     }
-}
+    .toggle-breadcrumb-last-element-container {
+      display: flex;
+
+      .toggle-breadcrumb-last-element {
+        margin: 0;
+      }
+      .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;
+        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.1) rotate(-10deg);
+      }
+    }
+}