toggle-components-library 1.37.0-beta.5 → 1.37.0-beta.7

package/package.json

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

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -1,29 +1,19 @@
 <template>
   <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="updateContent($event)"
-          @keydown.enter.prevent="handleEnterKey"
-          @paste.prevent="handlePaste"
-          v-text="initialContent"
-        ></span>
-      </template>
-      <template v-else>
-        <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
-        <NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
-        <i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
-        <h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
-      </template>
+      <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
+      <NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
+      <i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
+      <h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
     </div>
   </div>
 </template>
 
 <script>
+
+
 export default {
+
   mixins: [],
   props: {
     isNuxt: {
@@ -33,124 +23,21 @@ export default {
     breadcrumb: {
       type: Array,
       required: false
-    },
-    editable: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    maxChars: {
-      type: Number,
-      default: 50,
-      required: false
     }
   },
 
-  data() {
-    return {
-      content: '',
-      initialContent: '',
-      lastSelection: null
-    };
-  },
+  data: function () {
 
-  computed: {
-    breadcrumb_computed() {
-      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb;
-    }
-  },
 
-  mounted() {
-    if (this.breadcrumb_computed && this.breadcrumb_computed.length > 0) {
-      const lastCrumb = this.breadcrumb_computed[this.breadcrumb_computed.length - 1];
-      this.content = lastCrumb.name;
-      this.initialContent = lastCrumb.name;
-    }
+    return {};
   },
 
-  methods: {
-    saveSelection() {
-      if (window.getSelection) {
-        const sel = window.getSelection();
-        if (sel.getRangeAt && sel.rangeCount) {
-          const range = sel.getRangeAt(0);
-          this.lastSelection = {
-            start: range.startOffset,
-            end: range.endOffset
-          };
-        }
-      }
-    },
-
-    restoreSelection() {
-      if (!this.lastSelection || !this.$refs.editableSpan) return;
-      
-      const el = this.$refs.editableSpan;
-      if (!el.firstChild && typeof el.textContent === 'string') {
-        el.textContent = this.content || '';
-      }
-      
-      try {
-        const range = document.createRange();
-        const sel = window.getSelection();
-        const textNode = el.firstChild || el;
-        
-        // Ensure we don't exceed the text length
-        const start = Math.min(this.lastSelection.start, textNode.length);
-        const end = Math.min(this.lastSelection.end, textNode.length);
-        
-        range.setStart(textNode, start);
-        range.setEnd(textNode, end);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      } catch (e) {
-        console.warn('Failed to restore selection:', e);
-      }
-    },
-
-    handlePaste(event) {
-      const text = (event.clipboardData || window.clipboardData).getData('text');
-      const cleanText = text.replace(/[\r\n\s]+/g, ' ').trim();
-      
-      this.saveSelection();
-      const selection = window.getSelection();
-      const selectionLength = selection.toString().length;
-      const currentLength = this.content.length;
-      
-      if (currentLength - selectionLength + cleanText.length <= this.maxChars && selection.rangeCount) {
-        const range = selection.getRangeAt(0);
-        range.deleteContents();
-        range.insertNode(document.createTextNode(cleanText));
-        
-        range.collapse(false);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        
-        this.content = event.target.innerText;
-        this.$emit('update:lastCrumb', this.content);
-      }
-    },
+  computed: {
 
-    handleEnterKey(event) {
-      event.preventDefault();
-      event.target.blur();
+    breadcrumb_computed() {
+      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
     },
-
-    updateContent(event) {
-      this.saveSelection();
-      const newText = event.target.innerText;
-      
-      if (newText.length > this.maxChars) {
-        event.target.innerText = this.content;
-        this.restoreSelection();
-      } else {
-        this.content = newText;
-        this.$emit('update:lastCrumb', this.content);
-        this.$nextTick(() => {
-          this.restoreSelection();
-        });
-      }
-    }
   }
-};
+
+}
 </script>

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;

package/dist/img/edit-icon.9a5af324.svg

@@ -1 +0,0 @@
-<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>