goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/InputDatePicker.vue

@@ -1,310 +1,310 @@
-<template>
-    <div
-        class="ui-input-date-picker form-elem"
-        :class="cssClass"
-        @focus="onRootFocus"
-        tabindex="0"
-        :data-popover="popoverTargetId"
-    >
-        <div class="ui-input-date-picker-wrapper d-flex flex-v-center w-100">
-            <div style="flex: 1 0 0">
-                <!--
-                @slot Custom input slot
-                @binding {String} id    input id attribute value
-                @binding {String} value    input value
-                @binding {String} valueLabel    input value label
-                @binding {Object} inputBinds    input props (use v-bind)
-                @binding {Object} inputEvents    input events (use v-on)
-                -->
-                <slot
-                    name="input"
-                    v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }"
-                >
-                    <input
-                        :id="inputId"
-                        class="ui-input-date-picker-input w-100"
-                        type="text"
-                        :value="valueLabel"
-                        v-bind="inputBinds"
-                        v-on="inputEvents"
-                    />
-                </slot>
-            </div>
-            <!--
-            @slot Custom clear icon slot
-            @binding {Function} clear    function that clears the value
-            -->
-            <slot name="clear" v-bind="{ clear }" v-if="value && value.length && allowClear">
-                <div class="icon cursor-pointer w-auto h-auto mar-left-2" @click="clear">
-                    <i class="mdi mdi-close"></i>
-                </div>
-            </slot>
-            <!--
-            @slot Icon slot
-            @binding {Function} toggle  function that toggles the datepicker
-            -->
-            <slot name="icon" v-bind="{ toggle: togglePopover }">
-                <div class="icon cursor-pointer w-auto h-auto mar-left-2" @click="togglePopover">
-                    <i class="mdi mdi-calendar"></i>
-                </div>
-            </slot>
-        </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <date-picker
-                class="ui-input-date-picker-dp pull-left"
-                @change="onDpChange"
-                @set-date="onDpSetDate"
-                v-bind="{ value: date, ...datepicker }"
-            >
-                <template #header="scope">
-                    <!--
-                    @slot @see [DatePicker.slots.header](#datepicker)
-                    -->
-                    <slot name="dp-header" v-bind="scope"></slot>
-                </template>
-                <template #cell-day="scope">
-                    <!--
-                    @slot @see [DatePicker.slots.cell-day](#datepicker)
-                    -->
-                    <slot name="dp-cell-day" v-bind="scope"></slot>
-                </template>
-                <template #cell-date="scope">
-                    <!--
-                    @slot @see [DatePicker.slots.cell-date](#datepicker)
-                    -->
-                    <slot name="dp-cell-date" v-bind="scope"></slot>
-                </template>
-                <template #left>
-                    <!--
-                    @slot @see [DatePicker.slots.left](#datepicker)
-                    -->
-                    <slot name="dp-left"></slot>
-                </template>
-                <template #right>
-                    <!--
-                    @slot @see [DatePicker.slots.right](#datepicker)
-                    -->
-                    <slot name="dp-right"></slot>
-                </template>
-            </date-picker>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-input-date-picker {
-    display: inline-flex;
-    &-input {
-        border: none;
-        margin: 0;
-        padding: 0;
-        line-height: 1.5;
-        color: inherit;
-        background: transparent;
-        outline: none;
-    }
-}
-</style>
-<script>
-import DatePicker from './DatePicker.vue';
-import UiPopover from './Popover.vue';
-import FormComponent from './utils/FormComponent';
-import WithPopover from './utils/WithPopover';
-import { isDateValid } from './utils/Helpers';
-
-let lz = n => (n < 10 ? `0${n}` : `${n}`);
-export default {
-    mixins: [FormComponent, WithPopover],
-    components: { DatePicker, UiPopover },
-    props: {
-        /**
-         * @model
-         */
-        value: {
-            type: [String, Array],
-            default: '',
-        },
-        /**
-         * Whether the input is editable
-         */
-        editable: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Allow clearing the date
-         */
-        allowClear: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Datepicker options
-         * @see [DatePicker.props](#datepicker)
-         */
-        datepicker: {
-            type: Object,
-            default() {
-                return {};
-            },
-        },
-        /**
-         * Date range delimiter (only if datepicker.range = true)
-         */
-        delimiter: {
-            type: String,
-            default: ' – ',
-        },
-        /**
-         * Function which parses date String -> Date
-         * function(str:String):Date
-         */
-        toDate: {
-            type: Function,
-            default(str) {
-                if (!str) {
-                    return null;
-                }
-                let mt = str.match(/^(\d{1,}).(\d{1,}).(\d{1,})$/);
-                if (mt) {
-                    mt.shift();
-                    let [d, m, y] = mt.map(v => parseInt(v));
-                    if (d > 0 && m > 0 && y >= 0) {
-                        return new Date(y, m - 1, d);
-                    }
-                }
-                return null;
-            },
-        },
-        /**
-         * Function which formats date Date -> String
-         * function(date:Date):String
-         */
-        toValue: {
-            type: Function,
-            default(date) {
-                if (!isDateValid(date)) {
-                    return '';
-                }
-                return `${lz(date.getDate())}.${lz(date.getMonth() + 1)}.${lz(date.getFullYear())}`;
-            },
-        },
-    },
-    data() {
-        return {
-            date: null,
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly || !this.editable,
-            },
-            inputEvents: {
-                change: this.onInputChange,
-                focus: this.onInputFocus,
-                blur: this.onInputBlur,
-            },
-        };
-    },
-    watch: {
-        value: {
-            handler(val) {
-                if (this.isRange) {
-                    let d = Array.isArray(val) ? val.map(this.toDate) : [];
-                    let [s, e] = d;
-                    if (s && e && isDateValid(s) && isDateValid(e) && s < e) {
-                        this.date = d;
-                    } else {
-                        this.date = [];
-                    }
-                } else {
-                    let d = this.toDate(val);
-                    this.date = isDateValid(d) ? d : null;
-                }
-            },
-            immediate: true,
-        },
-        isRange(val) {
-            /**
-             * Input event
-             * @property {String} date
-             */
-            this.$emit('input', val ? [] : '');
-        },
-        placeholder(placeholder) {
-            this.inputBinds = { ...this.inputBinds, placeholder };
-        },
-    },
-    computed: {
-        isRange() {
-            return !!this.datepicker.range;
-        },
-        valueLabel() {
-            return Array.isArray(this.value) ? this.value.join(this.delimiter) : this.value;
-        },
-    },
-    methods: {
-        clear() {
-            /**
-             * Input event
-             * @property {String} date
-             */
-            this.$emit('input', this.isRange ? [] : '');
-            /**
-             * Clear event
-             */
-            this.$emit('clear');
-        },
-        onRootFocus(e) {
-            let input = this.getInputRef();
-            input && input.focus();
-        },
-        onInputChange(e) {
-            let val = e.target.value;
-            let data = null;
-
-            if (this.isRange) {
-                let d = val.split(this.delimiter).map(this.toDate);
-                let [s, e] = d;
-                data = isDateValid(s) && isDateValid(e) && s < e ? d.map(this.toValue) : [];
-            } else {
-                let d = this.toDate(val);
-                data = isDateValid(d) ? this.toValue(d) : '';
-            }
-            /**
-             * Input event
-             * @property {String|Array} value
-             */
-            this.$emit('input', data);
-            /**
-             * Change event
-             * @property {String|Array} value
-             */
-            this.$emit('change', data);
-        },
-        onInputFocus(e) {
-            this.rootHasFocus = true;
-        },
-        onInputBlur(e) {
-            this.rootHasFocus = false;
-        },
-        onDpChange(date) {
-            let data = Array.isArray(date) ? date.map(this.toValue) : this.toValue(date);
-            /**
-             * Input event
-             * @property {String} date
-             */
-            this.$emit('input', data);
-            /**
-             * Change event
-             * @property {String} date
-             */
-            this.$emit('change', data);
-        },
-        onDpSetDate(date) {
-            /**
-             * Set date event
-             * @property {Date} date
-             */
-            this.$emit('set-date', date);
-        },
-    },
-};
-</script>
+<template>
+    <div
+        class="ui-input-date-picker form-elem"
+        :class="cssClass"
+        @focus="onRootFocus"
+        tabindex="0"
+        :data-popover="popoverTargetId"
+    >
+        <div class="ui-input-date-picker-wrapper d-flex flex-v-center w-100">
+            <div style="flex: 1 0 0">
+                <!--
+                @slot Custom input slot
+                @binding {String} id    input id attribute value
+                @binding {String} value    input value
+                @binding {String} valueLabel    input value label
+                @binding {Object} inputBinds    input props (use v-bind)
+                @binding {Object} inputEvents    input events (use v-on)
+                -->
+                <slot
+                    name="input"
+                    v-bind="{ id: inputId, value, valueLabel, inputBinds, inputEvents }"
+                >
+                    <input
+                        :id="inputId"
+                        class="ui-input-date-picker-input w-100"
+                        type="text"
+                        :value="valueLabel"
+                        v-bind="inputBinds"
+                        v-on="inputEvents"
+                    />
+                </slot>
+            </div>
+            <!--
+            @slot Custom clear icon slot
+            @binding {Function} clear    function that clears the value
+            -->
+            <slot name="clear" v-bind="{ clear }" v-if="value && value.length && allowClear">
+                <div class="icon cursor-pointer w-auto h-auto mar-left-2" @click="clear">
+                    <i class="mdi mdi-close"></i>
+                </div>
+            </slot>
+            <!--
+            @slot Icon slot
+            @binding {Function} toggle  function that toggles the datepicker
+            -->
+            <slot name="icon" v-bind="{ toggle: togglePopover }">
+                <div class="icon cursor-pointer w-auto h-auto mar-left-2" @click="togglePopover">
+                    <i class="mdi mdi-calendar"></i>
+                </div>
+            </slot>
+        </div>
+        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <date-picker
+                class="ui-input-date-picker-dp pull-left"
+                @change="onDpChange"
+                @set-date="onDpSetDate"
+                v-bind="{ value: date, ...datepicker }"
+            >
+                <template #header="scope">
+                    <!--
+                    @slot @see [DatePicker.slots.header](#datepicker)
+                    -->
+                    <slot name="dp-header" v-bind="scope"></slot>
+                </template>
+                <template #cell-day="scope">
+                    <!--
+                    @slot @see [DatePicker.slots.cell-day](#datepicker)
+                    -->
+                    <slot name="dp-cell-day" v-bind="scope"></slot>
+                </template>
+                <template #cell-date="scope">
+                    <!--
+                    @slot @see [DatePicker.slots.cell-date](#datepicker)
+                    -->
+                    <slot name="dp-cell-date" v-bind="scope"></slot>
+                </template>
+                <template #left>
+                    <!--
+                    @slot @see [DatePicker.slots.left](#datepicker)
+                    -->
+                    <slot name="dp-left"></slot>
+                </template>
+                <template #right>
+                    <!--
+                    @slot @see [DatePicker.slots.right](#datepicker)
+                    -->
+                    <slot name="dp-right"></slot>
+                </template>
+            </date-picker>
+        </ui-popover>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-input-date-picker {
+    display: inline-flex;
+    &-input {
+        border: none;
+        margin: 0;
+        padding: 0;
+        line-height: 1.5;
+        color: inherit;
+        background: transparent;
+        outline: none;
+    }
+}
+</style>
+<script>
+import DatePicker from './DatePicker.vue';
+import UiPopover from './Popover.vue';
+import FormComponent from './utils/FormComponent';
+import WithPopover from './utils/WithPopover';
+import { isDateValid } from './utils/Helpers';
+
+let lz = n => (n < 10 ? `0${n}` : `${n}`);
+export default {
+    mixins: [FormComponent, WithPopover],
+    components: { DatePicker, UiPopover },
+    props: {
+        /**
+         * @model
+         */
+        value: {
+            type: [String, Array],
+            default: '',
+        },
+        /**
+         * Whether the input is editable
+         */
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Allow clearing the date
+         */
+        allowClear: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Datepicker options
+         * @see [DatePicker.props](#datepicker)
+         */
+        datepicker: {
+            type: Object,
+            default() {
+                return {};
+            },
+        },
+        /**
+         * Date range delimiter (only if datepicker.range = true)
+         */
+        delimiter: {
+            type: String,
+            default: ' – ',
+        },
+        /**
+         * Function which parses date String -> Date
+         * function(str:String):Date
+         */
+        toDate: {
+            type: Function,
+            default(str) {
+                if (!str) {
+                    return null;
+                }
+                let mt = str.match(/^(\d{1,}).(\d{1,}).(\d{1,})$/);
+                if (mt) {
+                    mt.shift();
+                    let [d, m, y] = mt.map(v => parseInt(v));
+                    if (d > 0 && m > 0 && y >= 0) {
+                        return new Date(y, m - 1, d);
+                    }
+                }
+                return null;
+            },
+        },
+        /**
+         * Function which formats date Date -> String
+         * function(date:Date):String
+         */
+        toValue: {
+            type: Function,
+            default(date) {
+                if (!isDateValid(date)) {
+                    return '';
+                }
+                return `${lz(date.getDate())}.${lz(date.getMonth() + 1)}.${lz(date.getFullYear())}`;
+            },
+        },
+    },
+    data() {
+        return {
+            date: null,
+            inputBinds: {
+                placeholder: this.placeholder,
+                readonly: this.readonly || !this.editable,
+            },
+            inputEvents: {
+                change: this.onInputChange,
+                focus: this.onInputFocus,
+                blur: this.onInputBlur,
+            },
+        };
+    },
+    watch: {
+        value: {
+            handler(val) {
+                if (this.isRange) {
+                    let d = Array.isArray(val) ? val.map(this.toDate) : [];
+                    let [s, e] = d;
+                    if (s && e && isDateValid(s) && isDateValid(e) && s < e) {
+                        this.date = d;
+                    } else {
+                        this.date = [];
+                    }
+                } else {
+                    let d = this.toDate(val);
+                    this.date = isDateValid(d) ? d : null;
+                }
+            },
+            immediate: true,
+        },
+        isRange(val) {
+            /**
+             * Input event
+             * @property {String} date
+             */
+            this.$emit('input', val ? [] : '');
+        },
+        placeholder(placeholder) {
+            this.inputBinds = { ...this.inputBinds, placeholder };
+        },
+    },
+    computed: {
+        isRange() {
+            return !!this.datepicker.range;
+        },
+        valueLabel() {
+            return Array.isArray(this.value) ? this.value.join(this.delimiter) : this.value;
+        },
+    },
+    methods: {
+        clear() {
+            /**
+             * Input event
+             * @property {String} date
+             */
+            this.$emit('input', this.isRange ? [] : '');
+            /**
+             * Clear event
+             */
+            this.$emit('clear');
+        },
+        onRootFocus(e) {
+            let input = this.getInputRef();
+            input && input.focus();
+        },
+        onInputChange(e) {
+            let val = e.target.value;
+            let data = null;
+
+            if (this.isRange) {
+                let d = val.split(this.delimiter).map(this.toDate);
+                let [s, e] = d;
+                data = isDateValid(s) && isDateValid(e) && s < e ? d.map(this.toValue) : [];
+            } else {
+                let d = this.toDate(val);
+                data = isDateValid(d) ? this.toValue(d) : '';
+            }
+            /**
+             * Input event
+             * @property {String|Array} value
+             */
+            this.$emit('input', data);
+            /**
+             * Change event
+             * @property {String|Array} value
+             */
+            this.$emit('change', data);
+        },
+        onInputFocus(e) {
+            this.rootHasFocus = true;
+        },
+        onInputBlur(e) {
+            this.rootHasFocus = false;
+        },
+        onDpChange(date) {
+            let data = Array.isArray(date) ? date.map(this.toValue) : this.toValue(date);
+            /**
+             * Input event
+             * @property {String} date
+             */
+            this.$emit('input', data);
+            /**
+             * Change event
+             * @property {String} date
+             */
+            this.$emit('change', data);
+        },
+        onDpSetDate(date) {
+            /**
+             * Set date event
+             * @property {Date} date
+             */
+            this.$emit('set-date', date);
+        },
+    },
+};
+</script>