Vue jQuery Wrapper Components

Datepicker.vue

<!--
    Wrapper Component for: https://bootstrap-datepicker.readthedocs.io/en/latest/
    usage:
    import Datepicker from './Datepicker';
    Vue.component(Datepicker.name, Datepicker);

    <datepicker type="text"
                class="form-control"
                name="birthdate"
                placeholder="Birth Date"
                v-model="form.birthdate"
                :settings="settings" @see https://bootstrap-datepicker.readthedocs.io/en/latest/options.html for more options
    ></datepicker>
    
    You can edit the defaultSettings on the data() property to fit your default needs
 -->
 
<template>
    <input type="text">
</template>

<script type="text/babel">
    import Vue from 'vue';

    export default{
        name: 'datepicker',
        props: [
            'settings',
            'value',
        ],
        data(){
            return {
                defaultSettings: {
                    autoclose: true,
                    clearBtn: true,
                }
            }
        },

        mounted: function () {
            this.reInitializeDaterangePicker();
        },
        methods: {
            /**
             * Initializes the datepicker
             */
            reInitializeDaterangePicker(){
                let vm = this;
                let input = $(this.$el);
                let settings = _.extend(this.defaultSettings, this.settings);
                let initialValue = this.value;

                this.$nextTick(function () {
                    input.datepicker(settings).on('changeDate', function (e) {
                        vm.$emit('input', this.value);
                    });

                   input.datepicker('update', new Date(initialValue));
                })
            },
        },
        watch: {
            'value': function (value) {
                $(this.$el).datepicker('update', new Date(value));
            },
            /**
             * Watch the value of settings then we will re-initialize the datepicker settings
             *
             * @param settings
             */
            'settings': function (settings) {
                this.reInitializeDaterangePicker();
            }
        }
    }
</script>

Select2.vue

<!--
    Wrapper Component for: https://select2.github.io/
    usage:


    <template>
       <select2 v-model="selected"
            :options="options"
            settings="settings" @see https://select2.github.io/options.html for more settings
            style="width: 100%"
        ></select2>
    </template>

    <script>
        import Select2 from './Select2';
        Vue.component(Select2.name, Select2);

        export default {
                data(){
                    return {
                        options: [
                            {
                                id: 1,
                                text: 'Chris'
                            },
                             {
                                id: 2,
                                text: 'John'
                            }
                        ]
                    }
                },
        }
    </script>

 -->
<template>
    <select>
        <slot></slot>
    </select>
</template>

<script type="text/babel">
    import Vue from 'vue';

    export default{
        name: 'select2',
        props: {
            value: {},
            settings: {
                type: Object,
                required: false
            },
            options: {
                type: Array,
                required: false
            }
        },
        data(){
            return {
                /**
                 * Default select2 settings, can be overridden
                 */
                defaultSettings: {
                    allowClear: true,
                    placeholder: 'Select'
                }

            }
        },

        mounted: function () {
            let vm = this;
            let settings = this.prepareSettings();

            $(this.$el)
                .select2(settings)
                .val(this.value)
                .trigger('change')
                // emit event on change.
                .on('change', function () {
                    vm.$emit('input', this.value)
                });

            this.$nextTick(() => {
                $(this.$el).val(vm.value).trigger('change');
            })
        },

        methods: {
            /**
             * Prepare the settings to be pass to select 2
             * @returns {Object}
             */
            prepareSettings() {
                let settings = _.extend(this.defaultSettings, this.settings);
                settings.data = this.options;
                return settings;
            }
        },

        watch: {
            /**
             * Watch the model value then trigger an update to select2 element
             *
             * @param value
             */
            value: function (value) {
                // update value
                $(this.$el).val(value).trigger('change');
            },
            /**
             * Watch the options prop and update the select2 settings
             *
             * @param options
             */
            options: function (options) {
                let settings = this.prepareSettings();
                $(this.$el).select2(settings)
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    }
</script>