toggle-components-library 1.25.18 → 1.25.20

package/package.json

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

package/src/assets/icons/delete-trash.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92.67" height="75.812" viewBox="0 0 92.67 75.812">
+  <g id="Group_218" data-name="Group 218" transform="translate(-804.783 -4099.451)">
+    <g id="Group_182" data-name="Group 182" transform="translate(804.783 4110.5)">
+      <path id="Union_2" data-name="Union 2" d="M4.528,13.346a4.528,4.528,0,1,1,0-9.056h5.979A4.529,4.529,0,0,1,15.029,0H28.346a4.528,4.528,0,0,1,4.522,4.29h5.979a4.528,4.528,0,1,1,0,9.056Z" transform="translate(0.642 0)" fill="#3e4a5b"/>
+      <path id="Subtraction_1" data-name="Subtraction 1" d="M35.318,44.4H9.638c-2.749,0-4.519-2.437-4.845-4.844L0,4.85A4.853,4.853,0,0,1,4.848,0H40.112A4.852,4.852,0,0,1,44.957,4.85L40.166,39.555C39.792,42.406,37.8,44.4,35.318,44.4ZM22.331,26.917l0,0,4.716,4.716a3.335,3.335,0,0,0,4.715-4.719L27.046,22.2l4.719-4.716a3.335,3.335,0,1,0-4.715-4.719l-4.719,4.719-4.72-4.719a3.337,3.337,0,1,0-4.719,4.719L17.611,22.2l-4.719,4.719a3.337,3.337,0,1,0,4.719,4.719l4.716-4.716Z" transform="translate(0 20.364)" fill="#354B64"/>
+    </g>
+    <g id="Group_216" data-name="Group 216" transform="translate(850.432 4110.5)">
+      <path id="Union_2-2" data-name="Union 2" d="M4.528,13.346a4.528,4.528,0,1,1,0-9.056h5.979A4.529,4.529,0,0,1,15.029,0H28.346a4.528,4.528,0,0,1,4.522,4.29h5.979a4.528,4.528,0,1,1,0,9.056Z" transform="translate(5.541 -11.049) rotate(17)" fill="#f58686"/>
+      <path id="Subtraction_1-2" data-name="Subtraction 1" d="M35.318,44.4H9.638c-2.749,0-4.519-2.437-4.845-4.844L0,4.85A4.853,4.853,0,0,1,4.848,0H40.112A4.852,4.852,0,0,1,44.957,4.85L40.166,39.555C39.792,42.406,37.8,44.4,35.318,44.4ZM22.331,26.917l0,0,4.716,4.716a3.335,3.335,0,0,0,4.715-4.719L27.046,22.2l4.719-4.716a3.335,3.335,0,1,0-4.715-4.719l-4.719,4.719-4.72-4.719a3.337,3.337,0,1,0-4.719,4.719L17.611,22.2l-4.719,4.719a3.337,3.337,0,1,0,4.719,4.719l4.716-4.716Z" transform="translate(0 20.364)" fill="#f58686"/>
+    </g>
+  </g>
+</svg>

package/src/components/forms/ToggleInputSelect.vue

@@ -1,6 +1,6 @@
 <template>
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'ToggleInputSelect' " 
@@ -15,6 +15,7 @@
             v-model="inputVal" 
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
+            :disabled="disabled"
             :style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
             >
                 <option value="">Select an option</option>
@@ -77,6 +78,11 @@ export default {
         fontFamily: {
             type: String,
             required: false
+        },
+        disabled: {
+          type: Boolean,
+          required: false,
+          default: false
         }
     },
 

package/src/components/threedots/ToggleThreeDots.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="toggle-three-dots-container">
+        <button class="toggle-three-dots" :class="{active:active}" @click="toggleActive">
+            <div class="toggle-three-dots-circle"></div>
+            <div class="toggle-three-dots-circle"></div>
+            <div class="toggle-three-dots-circle"></div>
+        </button>
+        <ul class="toggle-three-dots-list">
+            <div class="toggle-three-dots-list-tab"></div>
+            <slot></slot>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ThreeDots',
+    data: function() {
+        return {
+            active: false
+        };
+    },
+    created : function(){
+        window.addEventListener('click', this.windowClick, true);
+        this.$toggle_event.$on('threedots_active', this.removeActive);
+    },
+    beforeDestroy(){
+        window.removeEventListener('click', this.windowClick, true);
+        this.$toggle_event.$off('threedots_active', this.removeActive);
+    },
+    methods: {
+        removeActive(){
+            this.active = false;
+        },
+        toggleActive() {
+            if(this.active){
+                this.$toggle_event.$emit('threedots_active', true);
+            }
+            else{
+                this.$toggle_event.$emit('threedots_active', true);
+                this.active = true;
+            }
+        },
+        windowClick(e) {
+            if (!e.target.matches('.toggle-three-dots-container, .toggle-three-dots-container *')) {
+                this.active = false;
+            }
+        }
+    },
+}
+</script>

package/src/components/threedots/ToggleThreeDotsButton.vue

@@ -0,0 +1,56 @@
+<template>
+    <li class="toggle-three-dots-list-item" :class="{'toggle-three-dots-list-item--delete' : buttonDelete}">
+        <hr v-if="buttonDelete">
+        <button
+            :type="type"
+            :disabled="disabled"
+            @click="click">
+            <slot>{{ buttonText }}</slot>
+        </button>
+    </li>
+</template>
+
+<script>
+export default {
+    name: 'ThreeDotsButton',
+    props: {
+        /**
+         * The test to display in side the button
+         */
+        buttonText: {
+            type: String,
+            default: "button"
+        },
+        /**
+         * The HTML button type i.e. `submit` or `button`
+         */
+        type: {
+            type: String,
+            default: "button"
+        },
+        /**
+         * Should the button be disabled?
+         */
+        disabled: {
+            default: false
+        },
+        /**
+         * Is this button a 'Delete' button?
+         */
+        buttonDelete:{
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        click(){
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
+    }
+}
+</script>

package/src/index.js

@@ -68,6 +68,11 @@ import ToggleMetricBarChart from "./components/metrics/ToggleMetricBarChart.vue"
 import ToggleMetricPieChart from "./components/metrics/ToggleMetricPieChart.vue";
 import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChart.vue";
 
+
+import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
+import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
+
+
 import './sass/main.scss';
 
 const Components = {
@@ -124,7 +129,10 @@ const Components = {
     ToggleMetricSparkLine,
     ToggleMetricBarChart,
     ToggleMetricPieChart,
-    ToggleMetricFunnelChart
+    ToggleMetricFunnelChart,
+    ToggleThreeDots,
+    ToggleThreeDotsButton
+
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_table.scss

@@ -110,6 +110,11 @@ table.toggle-table {
         max-width: 80px;
         border: none;
         text-align: left;
+
+        &:has(.toggle-three-dots-container) {
+            overflow: inherit;
+            text-align: right;
+        }
     }
 
 

package/src/sass/includes/_as_threedots.scss

@@ -0,0 +1,133 @@
+// Toggle Three Dots
+.toggle-three-dots-container{
+    position: relative;
+    display: inline-block;
+    cursor: default;
+    z-index: 9; // To sit behind Modal window
+    top: 2px;
+    font-size: 0;
+    .toggle-three-dots-list{
+        position: absolute;
+        top: 0;
+        right: 100%;
+        background-color: #FFF;
+        min-width: max-content;
+        padding: 13px;
+        text-align: left;
+        border-radius: 15px 0 15px 15px;
+        margin-right: 15px;
+        display: none;
+        box-shadow: 0px 0px 20px rgba(171, 183, 197, 0.2);
+        .toggle-three-dots-list-tab{
+            position: absolute;
+            top: 0;
+            right: -20px;
+            height: 60px;
+            width: 40px;
+            &:before, &:after{
+                content: '';
+                height: 25px;
+                width: 12px;
+                position: absolute;
+                top: 0;
+                right: 12px;
+                background-color: #FFF;
+                border-radius: 0 15px 15px 0;
+            }
+            &:after{
+                box-shadow: 0px 0px 20px rgba(171, 183, 197, 0.2);
+                z-index: -1;
+            }
+        }
+        .toggle-three-dots-list-item{
+            min-width: 200px;
+            button{
+                padding: 8px;
+                width: 100%;
+                border-radius: 3px;
+                background-color: transparent;
+                color: #354B64;
+                cursor: pointer;
+                text-align: left;
+                font: normal normal 900 14px/18px Lato;
+                display: block;
+                box-sizing: border-box;
+                border: none;
+                &:hover{
+                    background-color: #F2F5F6;
+                }
+                &:disabled, &[disabled]{
+                    background-color: #FFF;
+                    color: #afb3b7;
+                }
+            }
+            &--delete{
+                button{
+                    color: #354B64;
+                    padding: 6px 8px 10px 8px;
+                    &:before{
+                        content: "";
+                        height: 18px;
+                        width: 11px;
+                        background-image: url("../assets/icons/delete-trash.svg");
+                        background-position: center left;
+                        background-size: cover;
+                        position: relative;
+                        display: inline-block;
+                        margin-right: 9px;
+                        top: 2px;
+                    }
+                    &:hover{
+                        color: #F58686;
+                        &:before{
+                            background-position: center right;
+                        }
+                    }
+                }
+            }
+            hr{
+                border: none;
+                background-color: #F2F5F6;
+                height: 1px;
+                margin: 10px;
+            }
+            &:nth-of-type(2){
+                hr{
+                    display: none;
+                }
+            }
+        }
+    }
+    .toggle-three-dots{
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        display: inline-block;
+        border: none;
+        background-color: transparent;
+        outline: none;
+        .toggle-three-dots-circle{
+            height: 5px;
+            width: 5px;
+            background-color: #A8BFD3;
+            border-radius: 50%;
+            margin-bottom: 3px;
+            transition: background-color 0.4s ease;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+        &:hover{
+            .toggle-three-dots-circle{
+                background-color: #687B8D;
+            }
+        }
+        &.active +.toggle-three-dots-list{
+            display: block;
+            .toggle-three-dots{
+                .toggle-three-dots-circle{
+                    background-color: #687B8D;
+                }
+            }
+        }
+    }
+} // .toggle-three-dots-container

package/src/sass/main.scss

@@ -19,3 +19,4 @@
 @import "./includes/_as_elements.scss";
 @import "./includes/_as_notifications.scss";
 @import "./includes/_as_metrics.scss";
+@import "./includes/_as_threedots.scss";