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

package/package.json

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

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -1,27 +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
-          contenteditable="true"
-          class="toggle-breadcrumb-editable-input"
-          @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>
-        <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: {
@@ -31,78 +23,21 @@ export default {
     breadcrumb: {
       type: Array,
       required: false
-    },
-    editable: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    maxChars: {
-      type: Number,
-      default: 50,
-      required: false
     }
   },
 
   data: function () {
-    return {
-      content: ''
-    };
-  },
 
-  computed: {
-    breadcrumb_computed() {
-      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
-    },
+
+    return {};
   },
 
-  methods: {
-    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);
-      }
-    },
+  computed: {
 
-    handleEnterKey(event) {
-      event.preventDefault();
-      event.target.blur();
+    breadcrumb_computed() {
+      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
     },
-
-    
-    updateContent(event) {
-      // 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);
-      }
-    }
   }
+
 }
 </script>

package/src/components/forms/ToggleInputCurrency.vue

@@ -21,7 +21,8 @@
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
-    />
+    >
+    <div v-if="size == 'table'" class="toggle-input-currency-table-hover-pencil"></div>
     <label
         class="toggle-input-label-error" 
         v-if="isInvalid"
@@ -75,7 +76,7 @@ export default {
         size: {
             type: String,
             validator: function (value) {
-                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
+                return ['extra-small', 'small', 'medium', 'large', 'full', 'table'].indexOf(value) !== -1
             }
         },
         required: {

package/src/index.js

@@ -8,7 +8,6 @@ import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
 import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
 import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
 import ToggleInputRadioButtons from "./components/forms/ToggleInputRadioButtons.vue";
-import ToggleInputRadioButtonMini from "./components/forms/ToggleInputRadioButtonMini.vue";
 import ToggleInputTextArea from "./components/forms/ToggleInputTextArea.vue";
 import ToggleInputCheckboxContainer from "./components/forms/ToggleInputCheckboxContainer.vue";
 import ToggleInternationalPhoneInputSelect from "./components/forms/ToggleInternationalPhoneInputSelect.vue";
@@ -113,7 +112,6 @@ const Components = {
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
-    ToggleInputRadioButtonMini,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
     ToggleInputCheckbox,

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/src/sass/includes/_as_inputs.scss

@@ -51,8 +51,27 @@
     &.height-extra-large {
         height: 15rem;
     }
+    &.table {
+        margin-top: 0 !important;
+    }
+    &.table:focus + .toggle-input-currency-table-hover-pencil {
+        display:none;
+   }
 
 }
+.toggle-input-currency-table-hover-pencil{
+    display: block;
+    background: url('../assets/icons/edit-icon.svg') no-repeat;
+    background-size: 1.25rem;
+    background-position: center;
+    cursor: pointer;
+    width: 1.25rem;
+    height: 1.25rem;
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+}
 
 .toggle-input-search-options-container{
     position:relative;
@@ -1218,83 +1237,4 @@ $iconWidth:20px;
 .drop-down-leave-to {
     overflow: hidden;
     max-height: 0;
-}
-
-// Radio button mini
-
-.toggle-input-radio-button-mini-switch {
-    position: relative;
-    display: inline-block;
-    width: 52px;
-    height: 28px;
-  }
-  
-  .toggle-input-radio-button-mini-switch input { 
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  
-  .toggle-input-radio-button-mini-slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: .4s;
-    transition: .4s;
-    display: flex;
-    align-items: center;
-    border-radius: 34px;
-  }
-  
-  .toggle-input-radio-button-mini-slider:before {
-    position: absolute;
-    content: "";
-    height: 22px;
-    width: 22px;
-    left: 4px;
-    bottom: 3px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-    border-radius: 50%;
-  }
-  
-  input:checked + .toggle-input-radio-button-mini-slider {
-    background-color: #2196F3;
-  }
-  
-  input:focus + .toggle-input-radio-button-mini-slider {
-    box-shadow: 0 0 1px #2196F3;
-  }
-  
-  input:checked + .toggle-input-radio-button-mini-slider:before {
-    -webkit-transform: translateX(22px);
-    -ms-transform: translateX(22px);
-    transform: translateX(22px);
-  }
-
-  .toggle-input-radio-button-mini-text-on {
-    font-family: $toggle-font-family;
-    font-size: 12px;
-    color: #ffffff;
-    margin-left: 7px;
-  }
-  .toggle-input-radio-button-mini-text-off {
-    font-family: $toggle-font-family;
-    font-size: 12px;
-    color: #3A4A62;
-    margin-left: 6px;
-  }
-.toggle-input-radio-button-mini-switch-disabled {
-    cursor: default !important;
-    opacity: 0.5;
-}
-
-.toggle-input-radio-button-mini-slider-disabled {
-    cursor: default !important;
-    opacity: 0.5;
 }

package/src/components/forms/ToggleInputRadioButtonMini.vue

@@ -1,38 +0,0 @@
-<template>
-    <div>
-        <label :class="['toggle-input-radio-button-mini-switch', {'toggle-input-radio-button-mini-switch-disabled': disabled}]">
-            <input type="checkbox" :value="value" v-model="value" :disabled="disabled">
-            <span :class="['toggle-input-radio-button-mini-slider', {'toggle-input-radio-button-mini-slider-disabled': disabled}]">
-                <span class="toggle-input-radio-button-mini-text-on">On</span>
-                <span class="toggle-input-radio-button-mini-text-off">Off</span>
-            </span>
-        </label>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToggleInputRadioButtonMini',
-    props: {
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    },
-    computed: {
-        value: {
-            get() {
-                return this.$attrs.value
-            },
-            set(value) {
-                this.$emit('input', value)
-            }
-        }
-    },
-    watch: {
-        value: function (val) {
-            this.$emit('input', val)
-        }
-    }
-}
-</script>