toggle-components-library 1.27.6 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.27.6",
+  "version": "1.28.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/forms/ToggleInputEditableText.vue

@@ -0,0 +1,174 @@
+<template>
+
+    <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled, 'toggle-input-is-editable':editable}"  v-on:click="focusClosestInput">
+        <label 
+            v-if="label"
+            :for="name ? name : 'InputText' " 
+            class="toggle-input-label"
+        > {{ label }} 
+        </label>
+        <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
+        <input
+            :type="type"
+            :name="name ? name : 'ToggleInputText' " 
+            :class="['toggle-input', size]"
+            :placeholder="placeholder ? placeholder : ''"
+            :required="required"
+            v-model="inputVal"
+            :maxlength="maxLength"
+            :disabled="disabled"
+            :editable="editable"
+            ref="toggle-input"
+        />
+        <ToggleButton
+            v-if="editable"
+            buttonStyle="mini_edit"
+            @click="editText"
+        />
+        <label
+            class="toggle-input-label-error" 
+            v-if="isInvalid"
+            :for="name ? name : 'ToggleInputText' "
+        >
+            {{ errorMessage }}
+        </label>
+    </div>
+    </template>
+    
+    <script>
+    
+    import { mixins } from '../mixins/mixins'
+    
+    import ToggleButton from '../buttons/ToggleButton.vue';
+    
+    export default {
+        mixins:[mixins],
+        components:{ToggleButton},
+        data: function() {
+            return {
+                disabled: true
+            };
+        },
+        props: {
+            value: {
+                type: [Number,String]
+            },
+            type: {
+                type: String,
+                required: true,
+                validator: function (value) {
+                    return ['text', 'email', 'number', 'password'].indexOf(value) !== -1
+                }
+            },
+            name: {
+                type: String,
+                default: "ToggleInputText"
+            },
+            label: {
+                type: String,
+                required: false
+            },
+            placeholder: {
+                type: String,
+                required: false
+            },
+            size: {
+                type: String,
+                validator: function (value) {
+                    return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
+                }
+            },
+            required: {
+                type: Boolean,
+                default: false
+            },
+            isInvalid: {
+                type: Boolean,
+                default: false
+            },
+            errorMessage: {
+                type: String,
+                required: false
+            },
+            maxLength:{
+                type: Number,
+                required:false
+            },
+            includeEmojiEntitiesInCharCount: {
+                descripion: "If true, emoji's are counted as the length of their HTML entities rather than a signle character length",
+                type: Boolean,
+                required: false,
+                default: false
+            },
+            readonly: {
+              type: Boolean,
+              required: false,
+              default: false
+            },
+            editable: {
+              type: Boolean,
+              required: false,
+              default: false
+            }
+        },
+    
+        created : function(){
+        },
+        computed: {
+            inputVal: {
+                get: function (){
+                    return this.value;
+                },
+    
+                set: function (value){
+                    this.$emit('input', value);
+                }
+            }
+        },
+        methods: {
+    
+            /*
+            * Concat message for count characters
+            * @return string
+            */
+            messageLength(msg, maxLength)
+            {
+                let message = msg;
+                let mcount = 0;
+    
+                // If the emoji flag is set, make sure the character count takes account of the decoded emoji characters (this will include £ signs)
+                if (this.includeEmojiEntitiesInCharCount && msg) {
+    
+                    message = this.convertEmojis(msg);
+                    mcount = message ? message.length : 0;
+    
+                } else {
+                    mcount = message ? message.length : 0;
+                }
+    
+                return mcount+' / '+maxLength;
+            },
+    
+            editText() {
+                this.disabled = !this.disabled;
+
+                if(!this.disabled){
+                    this.$nextTick( () => {
+                        this.$refs["toggle-input"].focus();
+                    });
+                }
+            },
+    
+            onFocus() {
+                this.$emit('onFocus');
+            },
+    
+            onBlur(){
+                this.$emit('onBlur');
+            },
+        }
+    }
+    
+    
+    </script>
+    

package/src/components/forms/ToggleInputMultiSelect.vue

@@ -6,7 +6,7 @@
     </label>
 
     <div class="input-holder">
-      <multiselect v-model="inputVal" :options="options" :multiple="true" :close-on-select="true" :clear-on-select="false" :preserve-search="true" :placeholder="placeholder" label="label" track-by="value" :preselect-first="false">
+      <multiselect v-model="inputVal" :options="options" :multiple="multiple" :close-on-select="true" :clear-on-select="false" :preserve-search="true" :placeholder="placeholder" label="label" track-by="value" :preselect-first="false">
       </multiselect>
     </div>
 
@@ -50,6 +50,11 @@ export default {
       errorMessage: {
         type: String,
         required: false
+      },
+      multiple: {
+        type: Boolean,
+        default: true,
+        required: false
       }
     },
     computed: {

package/src/components/text/ToggleTextClipboardCopy.vue

@@ -1,10 +1,9 @@
 <template>
    <div class="toggle-copy-text">
         <p @click="copyLink($refs.copyLink)"><label>{{copy}}</label><br v-if="copy"/>
-          <strong>
-            <a :style="{fontSize}" ref="copyLink">{{ link }}</a>
-          </strong>
-          <span class="product-link-icon"></span>
+          <a :class="{loading:loading, done:done}" :style="{fontSize}" ref="copyLink">
+              {{ link }}
+            </a>
         </p>
    </div>
 </template>
@@ -12,6 +11,12 @@
 <script>
 export default {
   name: 'ToggleTextClipboardCopy',
+  data: function() {
+      return {
+        loading: false,
+        done: false
+      };
+  },
   props: {
     fontSize: {
       type:String,
@@ -29,32 +34,38 @@ export default {
     link: {
       type: String,
       required: true
-    },
-    /**
-     * The url for the link
-     */
-    url: {
-      type: String,
-      required: true
-    },
+    }
   },
      methods:{
       copyLink(el) {
                 let range = document.createRange();
-                range.selectNode(el);
+                range.selectNode(el.firstChild);
                 window.getSelection().removeAllRanges();
                 window.getSelection().addRange(range);
                 document.execCommand("copy");
                 this.click();
+                this.loadingDoneAnimation();
       },
       click(){
-            /**
-             * Emitted when the button is clicked.
-             * @event click
-             * @type {Event}
-             */
-            this.$emit('click');
-        }
+          /**
+           * Emitted when the button is clicked.
+           * @event click
+           * @type {Event}
+           */
+          this.$emit('click');
+      },
+      loadingDoneAnimation() {
+        this.done = false; // Reset
+        this.loading = false; // Reset
+        this.loading = true;
+        setTimeout(() => {
+          this.loading = false;
+          this.done = true;
+          setTimeout(() => {
+            this.done = false;
+          }, 1500);
+        }, 500);
+      },
     }
 };
 </script>

package/src/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 
 import ToggleInputText from "./components/forms/ToggleInputText.vue";
+import ToggleInputEditableText from "./components/forms/ToggleInputEditableText.vue";
 import ToggleInputWebsite from "./components/forms/ToggleInputWebsite.vue";
 import ToggleDatePicker from "./components/forms/ToggleDatePicker.vue";
 import ToggleDateRangePicker from "./components/forms/ToggleDateRangePicker.vue";
@@ -82,6 +83,7 @@ const Components = {
     ToggleBadge,
     ToggleTableColumn,
     ToggleInputText,
+    ToggleInputEditableText,
     ToggleInputWebsite,
     ToggleDatePicker,
     ToggleDateRangePicker,

package/src/sass/includes/_as_inputs.scss

@@ -926,6 +926,14 @@ $iconWidth:20px;
 
 }
 
-
-
-
+.toggle-input-is-editable{
+    .toggle-input{
+        width: 90%;
+    }
+    .toggle-button-container{
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+}

package/src/sass/includes/_as_text.scss

@@ -39,19 +39,57 @@ a {
     margin: 0.25rem 0;
   }
   a {
-   font-weight: bold;
+    display: block;
+    padding: 0 3rem 0 0;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all 0.1s ease;
     &::after{
       background-image: url("../assets/icons/clipboard.svg");
-      content:'';
-      position: static;
-      padding-right: 1.5rem;
-      width: $toggle-font-size-regular;
-      height: $toggle-font-size-regular;
-      margin-right: 1rem;
+      content: '';
+      position: absolute;
+      width: 1.5rem;
+      right: 0;
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat;
-      cursor:copy;
+      cursor: pointer;
+      height: 1.2rem;
+      top: 0;
+    }
+    &.loading{
+      &:after{
+        background: none transparent;
+        outline: none;
+        border-radius: 50% !important;
+        border: 0.25rem solid rgba(0, 0, 0, 0.1);
+        border-top-color: white;
+        height: 0.7rem;
+        width: 0.7rem;
+        top: 0;
+        animation: spin 0.6s infinite linear;
+      }
+    }
+    &.done{
+      &:after{
+        background-image: url("../assets/icons/tick_circle.svg");
+      }
+    }
+    .tooltip {
+      width: 30%;
+      background-color: #3ea8d5;
+      color: #fff;
+      text-align: center;
+      border-radius: 4px;
+      padding: 5px 0;
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
     }
   }
 }