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

package/package.json

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

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -3,9 +3,11 @@
     <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="updateContent($event);"
+          @input="handleInput"
+          @keypress="handleKeypress"
           @keydown.enter.prevent="handleEnterKey"
           @paste.prevent="handlePaste"
         >{{ crumb.name }}</span>
@@ -22,7 +24,6 @@
 
 <script>
 export default {
-  mixins: [],
   props: {
     isNuxt: {
       type: Boolean,
@@ -44,75 +45,105 @@ export default {
     }
   },
 
-  data: function () {
+  data() {
     return {
-      content: ''
-    };
+      lastValidContent: ''
+    }
   },
 
   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) {
-      // Get plain text from clipboard and clean it
+      event.preventDefault();
       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 range = selection.getRangeAt(0);
+      const currentLength = this.$refs.editableSpan.textContent.length;
       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);
+      const availableSpace = this.maxChars - (currentLength - selectionLength);
+      if (availableSpace > 0) {
+        const truncatedText = cleanText.slice(0, availableSpace);
         range.deleteContents();
-        range.insertNode(document.createTextNode(cleanText));
-        
-        // Move cursor to end of inserted text
+        range.insertNode(document.createTextNode(truncatedText));
         range.collapse(false);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        
-        // Update content
-        this.content = event.target.innerText;
-        this.$emit('update:lastCrumb', this.content);
+        this.lastValidContent = this.$refs.editableSpan.textContent;
+        this.$emit('update:lastCrumb', this.lastValidContent);
       }
     },
 
     handleEnterKey(event) {
       event.preventDefault();
       event.target.blur();
-    },
-
-    
-    updateContent(event) {
-      const newText = event.target.innerText;
-      
-      // If text exceeds maxChars, prevent the change
-      if (newText.length > this.maxChars) {
-        // Save current selection
-        const selection = window.getSelection();
-        const range = selection.getRangeAt(0);
-        const cursorOffset = range.startOffset;
-
-        // Restore previous content
-        event.target.innerText = this.content;
+    }
+  },
 
-        // Restore cursor position
-        const newRange = document.createRange();
-        newRange.setStart(event.target.firstChild || event.target, Math.min(cursorOffset, this.content.length));
-        newRange.collapse(true);
-        selection.removeAllRanges();
-        selection.addRange(newRange);
-      } else {
-        this.content = newText;
-        this.$emit('update:lastCrumb', this.content);
-      }
+  watch: {
+    'breadcrumb_computed': {
+      handler() {
+        this.$nextTick(this.updateContent);
+      },
+      deep: true
     }
   }
 }