goodteditor-ui 1.0.26 → 1.0.27

package/src/components/ui/InputTimePicker.vue

@@ -1,253 +1,253 @@
-<template>
-    <div
-        class="ui-input-time-picker form-elem"
-        :class="cssClass"
-        @focus="onRootFocus"
-        tabindex="0"
-        :data-popover="popoverTargetId"
-    >
-        <div class="ui-input-time-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 {Object} inputBinds    input props (use v-bind)
-                @binding {Object} inputEvents    input events (use v-on)
-                -->
-                <slot name="input" v-bind="{ id: inputId, value, inputBinds, inputEvents }">
-                    <input
-                        :id="inputId"
-                        class="ui-input-time-picker-input w-100"
-                        type="text"
-                        :value="value"
-                        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 && 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-clock-outline"></i>
-                </div>
-            </slot>
-        </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <time-picker
-                class="ui-input-time-picker-tp w-100"
-                :value="time"
-                @change="onTpChange"
-                v-bind="{ ...timepicker }"
-            >
-                <template #hour-label="scope">
-                    <!--
-                    @slot @see [TimePicker.slots.hour-label](#timepicker)
-                    -->
-                    <slot name="hour-label" v-bind="scope"></slot>
-                </template>
-                <template #min-label="scope">
-                    <!--
-                    @slot @see [TimePicker.slots.min-label](#timepicker)
-                    -->
-                    <slot name="min-label" v-bind="scope"></slot>
-                </template>
-                <template #hour-option="scope">
-                    <!--
-                    @slot @see [TimePicker.slots.hour-option](#timepicker)
-                    -->
-                    <slot name="hour-option" v-bind="scope"></slot>
-                </template>
-                <template #min-option="scope">
-                    <!--
-                    @slot @see [TimePicker.slots.hour-option](#timepicker)
-                    -->
-                    <slot name="min-option" v-bind="scope"></slot>
-                </template>
-            </time-picker>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-input-time-picker {
-    display: inline-flex;
-    &-input {
-        border: none;
-        margin: 0;
-        padding: 0;
-        line-height: 1.5;
-        color: inherit;
-        background: transparent;
-        outline: none;
-    }
-}
-</style>
-<script>
-import TimePicker from './TimePicker.vue';
-import UiPopover from './Popover.vue';
-import FormComponent from './utils/FormComponent';
-import WithPopover from './utils/WithPopover';
-
-let lz = n => (n < 10 ? `0${n}` : `${n}`);
-export default {
-    mixins: [FormComponent, WithPopover],
-    components: { TimePicker, UiPopover },
-    props: {
-        /**
-         * Whether the input is editable
-         */
-        editable: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Allow clearing the time
-         */
-        allowClear: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * TimePicker options
-         * @see [TimePicker.props](#timepicker)
-         */
-        timepicker: {
-            type: Object,
-            default() {
-                return {};
-            },
-        },
-        /**
-         * Function which formats time String -> Object { h:Number, m:Number }
-         * function(str:String):Object
-         */
-        toTime: {
-            type: Function,
-            default(val) {
-                if (!val) {
-                    return null;
-                }
-                let mt = val.match(/^(\d{1,2}):(\d{1,2})$/);
-                if (mt && mt.length == 3) {
-                    let h = parseInt(mt[1]);
-                    let m = parseInt(mt[2]);
-                    if (h >= 0 && h < 24 && m >= 0 && m < 60) {
-                        return { h, m };
-                    }
-                }
-                return null;
-            },
-        },
-        /**
-         * Function which formats time { h:Number, m:Number } Object -> String
-         * function(time:Object):String
-         */
-        toValue: {
-            type: Function,
-            default(time) {
-                if (!time) {
-                    return '';
-                }
-                let { h, m } = time;
-                return h != null && m != null ? `${lz(h)}:${lz(m)}` : '';
-            },
-        },
-        autoWidth: {
-            default: true,
-        },
-    },
-    data() {
-        return {
-            time: null,
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly || !this.editable,
-            },
-            inputEvents: {
-                change: this.onInputChange,
-                input: this.onInputInput,
-                focus: this.onInputFocus,
-                blur: this.onInputBlur,
-            },
-        };
-    },
-    watch: {
-        value: {
-            handler(val) {
-                this.time = this.toTime(val);
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        clear() {
-            /**
-             * Input event
-             * @property {String} time
-             */
-            this.$emit('input', '');
-            /**
-             * Clear event
-             */
-            this.$emit('clear');
-        },
-        onRootFocus(e) {
-            let input = this.getInputRef();
-            input && input.focus();
-        },
-        onInputChange(e) {
-            let data = this.toValue(this.time);
-            /**
-             * Input event
-             * @property {String} time
-             */
-            this.$emit('input', data);
-            /**
-             * Change event
-             * @property {String} time
-             */
-            this.$emit('change', data);
-        },
-        onInputInput(e) {
-            let val = e.target.value;
-            /**
-             * Input event
-             * @property {String} time
-             */
-            this.$emit('input', val);
-        },
-        onInputFocus(e) {
-            this.rootHasFocus = true;
-        },
-        onInputBlur(e) {
-            this.rootHasFocus = false;
-        },
-        onTpChange(time) {
-            this.time = time;
-            let data = this.toValue(time);
-            /**
-             * Input event
-             * @property {String} time
-             */
-            this.$emit('input', data);
-            /**
-             * Change event
-             * @property {String} time
-             */
-            this.$emit('change', data);
-        },
-    },
-};
-</script>
+<template>
+    <div
+        class="ui-input-time-picker form-elem"
+        :class="cssClass"
+        @focus="onRootFocus"
+        tabindex="0"
+        :data-popover="popoverTargetId"
+    >
+        <div class="ui-input-time-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 {Object} inputBinds    input props (use v-bind)
+                @binding {Object} inputEvents    input events (use v-on)
+                -->
+                <slot name="input" v-bind="{ id: inputId, value, inputBinds, inputEvents }">
+                    <input
+                        :id="inputId"
+                        class="ui-input-time-picker-input w-100"
+                        type="text"
+                        :value="value"
+                        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 && 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-clock-outline"></i>
+                </div>
+            </slot>
+        </div>
+        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <time-picker
+                class="ui-input-time-picker-tp w-100"
+                :value="time"
+                @change="onTpChange"
+                v-bind="{ ...timepicker }"
+            >
+                <template #hour-label="scope">
+                    <!--
+                    @slot @see [TimePicker.slots.hour-label](#timepicker)
+                    -->
+                    <slot name="hour-label" v-bind="scope"></slot>
+                </template>
+                <template #min-label="scope">
+                    <!--
+                    @slot @see [TimePicker.slots.min-label](#timepicker)
+                    -->
+                    <slot name="min-label" v-bind="scope"></slot>
+                </template>
+                <template #hour-option="scope">
+                    <!--
+                    @slot @see [TimePicker.slots.hour-option](#timepicker)
+                    -->
+                    <slot name="hour-option" v-bind="scope"></slot>
+                </template>
+                <template #min-option="scope">
+                    <!--
+                    @slot @see [TimePicker.slots.hour-option](#timepicker)
+                    -->
+                    <slot name="min-option" v-bind="scope"></slot>
+                </template>
+            </time-picker>
+        </ui-popover>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-input-time-picker {
+    display: inline-flex;
+    &-input {
+        border: none;
+        margin: 0;
+        padding: 0;
+        line-height: 1.5;
+        color: inherit;
+        background: transparent;
+        outline: none;
+    }
+}
+</style>
+<script>
+import TimePicker from './TimePicker.vue';
+import UiPopover from './Popover.vue';
+import FormComponent from './utils/FormComponent';
+import WithPopover from './utils/WithPopover';
+
+let lz = n => (n < 10 ? `0${n}` : `${n}`);
+export default {
+    mixins: [FormComponent, WithPopover],
+    components: { TimePicker, UiPopover },
+    props: {
+        /**
+         * Whether the input is editable
+         */
+        editable: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Allow clearing the time
+         */
+        allowClear: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * TimePicker options
+         * @see [TimePicker.props](#timepicker)
+         */
+        timepicker: {
+            type: Object,
+            default() {
+                return {};
+            },
+        },
+        /**
+         * Function which formats time String -> Object { h:Number, m:Number }
+         * function(str:String):Object
+         */
+        toTime: {
+            type: Function,
+            default(val) {
+                if (!val) {
+                    return null;
+                }
+                let mt = val.match(/^(\d{1,2}):(\d{1,2})$/);
+                if (mt && mt.length == 3) {
+                    let h = parseInt(mt[1]);
+                    let m = parseInt(mt[2]);
+                    if (h >= 0 && h < 24 && m >= 0 && m < 60) {
+                        return { h, m };
+                    }
+                }
+                return null;
+            },
+        },
+        /**
+         * Function which formats time { h:Number, m:Number } Object -> String
+         * function(time:Object):String
+         */
+        toValue: {
+            type: Function,
+            default(time) {
+                if (!time) {
+                    return '';
+                }
+                let { h, m } = time;
+                return h != null && m != null ? `${lz(h)}:${lz(m)}` : '';
+            },
+        },
+        autoWidth: {
+            default: true,
+        },
+    },
+    data() {
+        return {
+            time: null,
+            inputBinds: {
+                placeholder: this.placeholder,
+                readonly: this.readonly || !this.editable,
+            },
+            inputEvents: {
+                change: this.onInputChange,
+                input: this.onInputInput,
+                focus: this.onInputFocus,
+                blur: this.onInputBlur,
+            },
+        };
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.time = this.toTime(val);
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        clear() {
+            /**
+             * Input event
+             * @property {String} time
+             */
+            this.$emit('input', '');
+            /**
+             * Clear event
+             */
+            this.$emit('clear');
+        },
+        onRootFocus(e) {
+            let input = this.getInputRef();
+            input && input.focus();
+        },
+        onInputChange(e) {
+            let data = this.toValue(this.time);
+            /**
+             * Input event
+             * @property {String} time
+             */
+            this.$emit('input', data);
+            /**
+             * Change event
+             * @property {String} time
+             */
+            this.$emit('change', data);
+        },
+        onInputInput(e) {
+            let val = e.target.value;
+            /**
+             * Input event
+             * @property {String} time
+             */
+            this.$emit('input', val);
+        },
+        onInputFocus(e) {
+            this.rootHasFocus = true;
+        },
+        onInputBlur(e) {
+            this.rootHasFocus = false;
+        },
+        onTpChange(time) {
+            this.time = time;
+            let data = this.toValue(time);
+            /**
+             * Input event
+             * @property {String} time
+             */
+            this.$emit('input', data);
+            /**
+             * Change event
+             * @property {String} time
+             */
+            this.$emit('change', data);
+        },
+    },
+};
+</script>

package/src/components/ui/InputUnits.md

@@ -1,20 +1,20 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-units v-model="model" v-bind="props"></input-units>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: '100px',
-            props: {
-                units: ['%', 'px', 'rem', 'em', 'fr', '$', '€'],
-            },
-        };
-    },
-};
-</script>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-units v-model="model" v-bind="props"></input-units>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: '100px',
+            props: {
+                units: ['%', 'px', 'rem', 'em', 'fr', '$', '€'],
+            },
+        };
+    },
+};
+</script>
+```