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

package/package.json

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

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -1,29 +1,20 @@
 <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="handleInput"
-          @keypress="handleKeypress"
-          @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>
-        <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: {
       type: Boolean,
@@ -32,119 +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 {
-      lastValidContent: ''
-    }
-  },
+  data: function () {
 
-  computed: {
-    breadcrumb_computed() {
-      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb;
-    }
-  },
 
-  mounted() {
-    this.updateContent();
+    return {};
   },
 
-  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);
-        }
-      }
-    },
+  computed: {
 
-    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);
-      }
+    breadcrumb_computed() {
+      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
     },
-
-    handleEnterKey(event) {
-      event.preventDefault();
-      event.target.blur();
-    }
-  },
-
-  watch: {
-    'breadcrumb_computed': {
-      handler() {
-        this.$nextTick(this.updateContent);
-      },
-      deep: true
-    }
   }
+
 }
 </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>