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

package/dist/toggle-components-library.umd.js

@@ -48729,8 +48729,8 @@ var TogglePodiumBadge_component = normalizeComponent(
 )
 
 /* harmony default export */ var TogglePodiumBadge = (TogglePodiumBadge_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a48609c2-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/breadcrumb/ToggleBreadCrumb.vue?vue&type=template&id=d98b2612&
-var ToggleBreadCrumbvue_type_template_id_d98b2612_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"a48609c2-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/breadcrumb/ToggleBreadCrumb.vue?vue&type=template&id=521e5ac4&
+var ToggleBreadCrumbvue_type_template_id_521e5ac4_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _vm.breadcrumb_computed ? _c('div', {
@@ -48739,14 +48739,15 @@ var ToggleBreadCrumbvue_type_template_id_d98b2612_render = function render() {
     return _c('div', {
       key: index
     }, [index === _vm.breadcrumb_computed.length - 1 && _vm.editable ? [_c('span', {
+      ref: "editableSpan",
+      refInFor: true,
       staticClass: "toggle-breadcrumb-editable-input",
       attrs: {
         "contenteditable": "true"
       },
       on: {
-        "input": function ($event) {
-          return _vm.updateContent($event);
-        },
+        "input": _vm.handleInput,
+        "keypress": _vm.handleKeypress,
         "keydown": function ($event) {
           if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
           $event.preventDefault();
@@ -48778,13 +48779,12 @@ var ToggleBreadCrumbvue_type_template_id_d98b2612_render = function render() {
     }, [_vm._v(_vm._s(crumb.name))]) : _vm._e()]], 2);
   }), 0) : _vm._e();
 };
-var ToggleBreadCrumbvue_type_template_id_d98b2612_staticRenderFns = [];
+var ToggleBreadCrumbvue_type_template_id_521e5ac4_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/breadcrumb/ToggleBreadCrumb.vue?vue&type=template&id=d98b2612&
+// CONCATENATED MODULE: ./src/components/breadcrumb/ToggleBreadCrumb.vue?vue&type=template&id=521e5ac4&
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/breadcrumb/ToggleBreadCrumb.vue?vue&type=script&lang=js&
 /* harmony default export */ var ToggleBreadCrumbvue_type_script_lang_js_ = ({
-  mixins: [],
   props: {
     isNuxt: {
       type: Boolean,
@@ -48805,9 +48805,9 @@ var ToggleBreadCrumbvue_type_template_id_d98b2612_staticRenderFns = [];
       required: false
     }
   },
-  data: function () {
+  data() {
     return {
-      content: ''
+      lastValidContent: ''
     };
   },
   computed: {
@@ -48815,60 +48815,83 @@ var ToggleBreadCrumbvue_type_template_id_d98b2612_staticRenderFns = [];
       return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb;
     }
   },
+  mounted() {
+    this.updateContent();
+  },
   methods: {
+    updateContent() {
+      var _this$breadcrumb_comp;
+      if (this.$refs.editableSpan && (_this$breadcrumb_comp = this.breadcrumb_computed) !== null && _this$breadcrumb_comp !== void 0 && _this$breadcrumb_comp.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
     }
   }
 });
@@ -48884,8 +48907,8 @@ var ToggleBreadCrumbvue_type_template_id_d98b2612_staticRenderFns = [];
 
 var ToggleBreadCrumb_component = normalizeComponent(
   breadcrumb_ToggleBreadCrumbvue_type_script_lang_js_,
-  ToggleBreadCrumbvue_type_template_id_d98b2612_render,
-  ToggleBreadCrumbvue_type_template_id_d98b2612_staticRenderFns,
+  ToggleBreadCrumbvue_type_template_id_521e5ac4_render,
+  ToggleBreadCrumbvue_type_template_id_521e5ac4_staticRenderFns,
   false,
   null,
   null,