toggle-components-library 1.33.0-beta.10 → 1.33.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.33.0-beta.10",
+    "version": "1.33.0-beta.12",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",
@@ -38,6 +38,7 @@
         "vue-moment": "^4.1.0",
         "vue-multiselect": "^2.0.8",
         "vue-router": "^3.6.4",
+        "vue2-datepicker": "^3.11.1",
         "vue2-dropzone": "^3.6.0",
         "vuedraggable": "^2.24.3",
         "webfontloader": "^1.6.28"

package/src/components/forms/ToggleDatePicker.vue

@@ -1,162 +1,167 @@
 <template>
 
-<div class="toggle-date-container" :class="['datepicker-trigger',{'toggle-input-is-invalid':isInvalid }]">
-
-
-        <label class="toggle-input-label">{{label}}</label>
-
-        <div class="toggle-date-input-container">
-            <div :class="['toggle-date-input-calendar-icon', {'calendar-icon-disabled' :disabled}]">
-                <input type="text" class="toggle-input"  :name="name" :disabled="disabled" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()" />
-            </div>
-            <button type="button" class="toggle-clear" v-on:click="clearDate" v-if="displayValue"></button>
-        </div>
-
-        <AirbnbStyleDatepicker
-            :trigger-element-id="'toggle-date-input'+_uid"
-            :trigger="datePickerOpen"
-            :mode="'single'"
-            :date-one="displayValue"
-            @date-one-selected="val => { displayValue = val}"
-            @closed="toggleDatePickerState(false)"
-            @cancelled="toggleDatePickerState(false)"
-            :monthsToShow="1"
-            :showShortcutsMenuTrigger="false"
-        />
-        <label
-            class="toggle-input-label-error" 
-            v-if="isInvalid"
-            :for="name ? name : 'ToggleInputText' "
-        >
-            {{ errorMessage }}
-        </label>
+  <div class="toggle-date-container" :class="[{'visible': show}, 'datepicker-trigger',{'toggle-input-is-invalid':isInvalid }, { 'toggle-input-is-disabled': disabled }]">
 
+    <label class="toggle-input-label">{{label}}</label>
+
+    <div :class="['toggle-date-input-container', 'toggle-date-input-container-' + size, {'toggle-date-input-disabled': disabled} ]">
+      <date-picker v-model="inputVal" prefix-class="toggle-mxdatepicker" :formatter="momentFormat" :range="range" :type="type" :disabled="disabled">
+      </date-picker>
     </div>
+
+    <label
+        class="toggle-input-label-error"
+        v-if="isInvalid"
+        :for="name ? name : 'ToggleInputText' "
+    >
+      {{ errorMessage }}
+    </label>
+
+  </div>
 </template>
 
 <script>
 
-    import Vue from "vue";
-    import { mixins } from '../mixins/mixins'
-    import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'
-    import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker';
-    import variables from '../../sass/includes/_as_variables.scss';
-  
-    Vue.use(AirbnbStyleDatepicker, {
-        colors: {
-            selected     : variables.toggleblue,
-            inRange      : variables.togglelightblue,
-            selectedText : variables.togglewhite,
-            text         : variables.toggleinputcolour,
-            inRangeBorder: variables.togglewhite,
-            disabled     : variables.togglewhite,
-        },
-        texts: {
-            apply: 'Done'
-        },
-    });
+import { mixins } from '../mixins/mixins'
+import moment from 'moment';
+import DatePicker from 'vue2-datepicker';
 
 export default {
-    mixins:[mixins],
-    components:{},
-    props: {
-        value: {
-            type: [Boolean,Date]
-        },
-        
-        name: {
-            type: String,
-            default: "ToggleInputText"
-        },
-        label: {
-            type: String,
-            required: false
-        },
-        placeholder: {
-            type: String,
-            required: false
-        },
-        autocomplete: {
-            type: Boolean,
-            default: true
-        },
-        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
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
+  mixins:[mixins],
+  components:{
+    DatePicker
+  },
+  props: {
+    set_value: {
+      type: [Boolean,Date,Object]
     },
-
-    created : function(){
+    value: {},
+    // datepicker mode, see: https://www.npmjs.com/package/vue2-datepicker#props
+    type: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ['date', 'datetime', 'year', 'month', 'time', 'week'].indexOf(value) !== -1
+      }
     },
-    data : function(){
-        return {
-            datePickerOpen: false,
-        };
+    // singular date or range between 2 dates
+    range: {
+      type: Boolean,
+      default: false
     },
-    watch :{
-
-        datePickerOpen(newVal){
-            let state = newVal ? 'open' : 'closed';
-            this.$emit('state', state);
-        }
-       
+    name: {
+      type: String,
+      default: "ToggleInputText"
     },
-    computed: {
-        date() {
-            return this.dateRangeView(this.displayValue)
-        },
-
-        // plugin only accepts MM/DD/YYYY, so change this so that it excepts and outputs JS dates
-        displayValue: {
-            get: function() {
-                return this.formatDate(this.value)
-            },
-            set: function(modifiedValue) {
-                if(modifiedValue){
-                    modifiedValue = new Date(new Date(modifiedValue+' 00:00:00').toISOString());
-                }
-                else modifiedValue = false;
-                this.$emit('input', modifiedValue);
-            }
-        }
+    label: {
+      type: String,
+      required: false
     },
-    methods: {
-        
-        clearDate()
-        {
-            this.displayValue = '';
-        },
+    placeholder: {
+      type: String,
+      required: false
+    },
+    autocomplete: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium'].indexOf(value) !== -1
+      },
+      default: 'medium'
+    },
+    displayFormat: {
+        type: String,
+        default: 'DD/MM/Y'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false
+    },
+    errorMessage: {
+      type: String,
+      required: false
+    },
+    maxLength:{
+      type: Number,
+      required:false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // in toggle-table context, if search bar height expand transition has finished
+    searchIsOpen: {
+      type: Boolean,
+      required: false,
+      default: null
+    }
+  },
+  data : function(){
+    return {
+      show: false,
 
-        toggleDatePickerState(state){
-            this.$nextTick( () => {
-                if(typeof state === 'boolean')
-                    this.datePickerOpen = state;
-                else this.datePickerOpen = !this.datePickerOpen;
-            });
+      momentFormat: {
+        //[optional] Date to String
+        stringify: (date) => {
+          return date ? moment(date).format(this.displayFormat) : ''
         },
+        //[optional]  String to Date
+        parse: (value) => {
+          return value ? moment(value, this.displayFormat).toDate() : null
+        }
+      }
+    };
+  },
+  created : function(){
+    // in table mode, has search bar expand transition finished?
+    if(this.searchIsOpen === null || this.searchIsOpen){
+      this.show = true;
+    }
+
+  },
+  watch :{
+    // search bar expand transition / if in table context
+    searchIsOpen(new_value){
+      if(new_value){
+        this.show = true;
+      }
     }
+  },
+  computed: {
+
+    inputVal: {
+      get: function (){
+        return this.convertRangeObject(this.value);
+      },
+      set: function (value){
+        this.$emit('input', this.convertRangeObject(value));
+      }
+    },
+
+  },
+  methods: {
+    // convert singular date to range. Plugin uses array with 2 values / parents in Toggle dash expect object with start & end keys
+    convertRangeObject(input)
+    {
+      if(!this.range){
+        return input
+      }
+      return Array.isArray(input) ? {
+        start: input[0],
+        end: input[1]
+      } : [
+        input.start,
+        input.end
+      ];
+    },
+  }
 }
 
 
@@ -164,7 +169,88 @@ export default {
 
 <style lang="scss">
 
-   
+$namespace: 'toggle-mxdatepicker';
+
+@import '~vue2-datepicker/scss/index.scss';
+
+.toggle-date-container {
+  display: none;
+  &.visible {
+    display: block;
+  }
+}
+
+.toggle-mxdatepicker-datepicker, .toggle-mxdatepicker-datepicker-range {
+  width: 100%;
+}
+.toggle-mxdatepicker-input {
+  padding: 0.5rem 3.5rem 0.5rem 1rem;
+  background-color: #F4F6F7 !important;
+  height: 2.8rem;
+  width: 100%;
+  box-shadow: none;
+  border: 0;
+  color: #354b64 !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+}
+
+i.toggle-mxdatepicker-icon-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url('../../assets/icons/delete.svg');
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+i.toggle-mxdatepicker-icon-calendar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url("../../assets/icons/calendar.svg");
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+.toggle-date-input-container-small {
+  .toggle-mxdatepicker-input {
+    background-color: transparent;
+    margin-top: 11px;
+    padding: 1px 1.65rem 1px 3px;
+    font-size: 0.9rem !important;
+    height: 1.5rem;
+  }
+  i.toggle-mxdatepicker-icon-calendar, i.toggle-mxdatepicker-icon-clear {
+    margin-top: 6px;
+    width: 1em;
+    height: 1em;
+    &:after{
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
+.toggle-mxdatepicker-calendar-content {
+  height: auto;
+}
 
 </style>
 

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,7 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled': disabled }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'InputText' " 
@@ -16,7 +16,6 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
-        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -92,12 +91,8 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        },
-        disabled: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
+        }
+       
     },
 
     created : function(){

package/src/index.js

@@ -4,7 +4,6 @@ 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";
 import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
 import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
 import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
@@ -83,8 +82,6 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
 
-import ToggleStatusBar from "./components/statusbar/ToggleStatusBar.vue";
-
 import ToggleCarousel from "./components/carousel/ToggleCarousel.vue";
 import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
 
@@ -106,14 +103,13 @@ const Components = {
     ToggleInputEditableText,
     ToggleInputWebsite,
     ToggleDatePicker,
-    ToggleDateRangePicker,
     ToggleInputSelect,
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
-    ToggleInputCheckbox, 
+    ToggleInputCheckbox,
     ToggleInputCheckboxInline,
     ToggleFillLoader,
     ToggleProgressLoader,
@@ -160,7 +156,6 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
-    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,