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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.37.0-beta.1",
+    "version": "1.37.0-beta.3",
     "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

@@ -2,12 +2,13 @@
   <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
+        <span
+          contenteditable="true"
           class="toggle-breadcrumb-editable-input"
-          v-model="crumb.name"
-          maxlength="50"
-          @input="autoResizeInput($event.target); updateContent($event);"
-        />
+          @input="updateContent($event);"
+          @keydown.enter.prevent="handleEnterKey"
+          @paste.prevent="handlePaste"
+        >{{ 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>
@@ -33,12 +34,20 @@ export default {
     },
     editable: {
       type: Boolean,
-      default: false
+      default: false,
+      required: false
+    },
+    maxChars: {
+      type: Number,
+      default: 50,
+      required: false
     }
   },
 
   data: function () {
-    return {};
+    return {
+      content: ''
+    };
   },
 
   computed: {
@@ -48,12 +57,51 @@ export default {
   },
 
   methods: {
-    autoResizeInput(input) {
-      input.style.width = input.value.length * 11 + "px";
-    }, 
+    handlePaste(event) {
+      // Get plain text from clipboard and clean it
+      const text = (event.clipboardData || window.clipboardData).getData('text');
+      const cleanText = text.replace(/[\r\n\s]+/g, ' ').trim();
+      
+      // Get current selection information
+      const selection = window.getSelection();
+      const selectionLength = selection.toString().length;
+      const currentLength = this.content.length;
+      
+      // Check if adding the pasted text would exceed maxChars
+      if (currentLength - selectionLength + cleanText.length <= this.maxChars && selection.rangeCount) {
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode(cleanText));
+        
+        // Move cursor to end of inserted text
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        
+        // Update content
+        this.content = event.target.innerText;
+        this.$emit('update:lastCrumb', this.content);
+      }
+    },
+
+    handleEnterKey(event) {
+      event.preventDefault();
+      event.target.blur();
+    },
+
+    
     updateContent(event) {
-      const newContent = event.target.value;
-      this.$emit('update:lastCrumb', newContent);
+      // 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);
+      }
     }
   }
 }

package/src/sass/includes/_as_breadcrumb.scss

@@ -17,19 +17,19 @@
         background-color: transparent;
         display: inline-flex;
         align-items: center;
-        min-width: 10rem !important;
-        max-width: 31rem !important;
+        min-width: 5rem !important;
         height: 2rem;
-        width: 15rem;
         padding-right: 0.5rem;
+        padding-left: 10px;
         border: none;
         border-radius: 4px;
         white-space: nowrap;
-        overflow: hidden;
         line-height: 1;
         border: 1px solid transparent;
-        margin: -1px 0 0 0;
+        margin: -1px 0 0 -10px;
+        white-space: nowrap
       }
+
       .toggle-breadcrumb-editable-input:hover {
         border: 1px solid #ccc;
         background-color: $toggle-off-white;
@@ -37,9 +37,20 @@
 
       .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 {