goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/TimePicker.md

@@ -1,50 +1,50 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>
-            <input
-                class="input input-small"
-                type="number"
-                v-model.number="model.h"
-                v-bind="inputs.h"
-                style="width:4rem"
-            />
-            <span>:</span>
-            <input
-                class="input input-small"
-                type="number"
-                v-model.number="model.m"
-                v-bind="inputs.m"
-                style="width:4rem"
-            />
-        </p>
-        <p>value: {{ model }}</p>
-        <time-picker v-model="model" v-bind="props" style="width:10rem"></time-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: { h: 18, m: 50 },
-            props: {
-                step: { h: 1, m: 10 },
-                min: { h: 10, m: 0 },
-                max: { h: 18, m: 59 },
-            },
-        };
-    },
-    computed: {
-        inputs() {
-            const { step, min, max } = this.props;
-            return {
-                h: { step: step.h, min: min.h, max: max.h },
-                m: { step: step.m, min: min.m, max: max.m },
-            };
-        },
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>
+            <input
+                class="input input-small"
+                type="number"
+                v-model.number="model.h"
+                v-bind="inputs.h"
+                style="width:4rem"
+            />
+            <span>:</span>
+            <input
+                class="input input-small"
+                type="number"
+                v-model.number="model.m"
+                v-bind="inputs.m"
+                style="width:4rem"
+            />
+        </p>
+        <p>value: {{ model }}</p>
+        <time-picker v-model="model" v-bind="props" style="width:10rem"></time-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: { h: 18, m: 50 },
+            props: {
+                step: { h: 1, m: 10 },
+                min: { h: 10, m: 0 },
+                max: { h: 18, m: 59 },
+            },
+        };
+    },
+    computed: {
+        inputs() {
+            const { step, min, max } = this.props;
+            return {
+                h: { step: step.h, min: min.h, max: max.h },
+                m: { step: step.m, min: min.m, max: max.m },
+            };
+        },
+    },
+};
+</script>
+```

package/src/components/ui/TimePicker.vue

@@ -1,252 +1,252 @@
-<template>
-    <div class="ui-time-picker panel">
-        <ui-datalist
-            class="ui-time-picker-datalist shadow-none radius-none w-6-12"
-            v-bind="{ cursorIndex: hCursorIndex, options: hourOptions }"
-        >
-            <template #header>
-                <!--
-                @slot Hour label slot
-                -->
-                <slot name="hour-label">
-                    <div class="bg-primary color-white text-small text-center pad-3">Час</div>
-                </slot>
-            </template>
-            <template #option="{ option, index, cursorIndex }">
-                <!--
-                @slot Hour option slot
-                @binding {Boolean} isActive     whether the option is active (selected)
-                @binding {Number} option        the hour option
-                @binding {Number} index         options' index
-                @binding {Number} cursorIndex   the current cursor index position
-                @binding {Function} select      function which selects the option function(option)
-                -->
-                <slot
-                    name="hour-option"
-                    v-bind="{
-                        isActive: option === h,
-                        option,
-                        index,
-                        cursorIndex,
-                        select: selectHour,
-                    }"
-                >
-                    <li :class="{ active: option === h }" @click="selectHour(option)">
-                        <div class="text-small text-center text-truncate">{{ lz(option) }}</div>
-                    </li>
-                </slot>
-            </template>
-        </ui-datalist>
-        <ui-datalist
-            class="ui-time-picker-datalist shadow-none radius-none w-6-12"
-            v-bind="{ cursorIndex: mCursorIndex, options: minOptions }"
-        >
-            <template #header>
-                <!--
-                @slot Minute label slot
-                -->
-                <slot name="min-label">
-                    <div class="bg-primary color-white text-small text-center pad-3">Мин</div>
-                </slot>
-            </template>
-            <template #option="{ option, index, cursorIndex }">
-                <!--
-                @slot Minute option slot
-                @binding {Boolean} isActive     whether the option is active (selected)
-                @binding {Number} option        the min option
-                @binding {Number} index         options' index
-                @binding {Number} cursorIndex   the current cursor index position
-                @binding {Function} select      function which selects the option function(option)
-                -->
-                <slot
-                    name="min-option"
-                    v-bind="{
-                        isActive: option === m,
-                        option,
-                        index,
-                        cursorIndex,
-                        select: selectMin,
-                    }"
-                >
-                    <li :class="{ active: option === m }" @click="selectMin(option)">
-                        <div class="text-small text-center text-truncate">{{ lz(option) }}</div>
-                    </li>
-                </slot>
-            </template>
-        </ui-datalist>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-time-picker {
-    --ui-time-picker-item-size: calc(1rem + var(--font-size-smaller) * 1.5);
-    --ui-time-picker-datalist-min-items: 3;
-    --ui-time-picker-datalist-max-items: 5;
-    display: inline-flex;
-    overflow: hidden;
-    &-datalist {
-        z-index: auto;
-        min-width: 3em;
-        ::v-deep > ul {
-            min-height: calc(
-                var(--ui-time-picker-item-size) * var(--ui-time-picker-datalist-min-items)
-            );
-            max-height: calc(
-                var(--ui-time-picker-item-size) * var(--ui-time-picker-datalist-max-items)
-            );
-            scroll-behavior: smooth;
-        }
-    }
-}
-</style>
-<script>
-import UiDatalist from './Datalist.vue';
-
-export default {
-    components: { UiDatalist },
-    props: {
-        /**
-         * @model Object { h:Number, m:Number } where h stands for 'hour'; m stands for 'minute'
-         */
-        value: {
-            type: Object,
-            default() {
-                return null;
-            },
-        },
-        /**
-         * Hour/minute step size Object (works similar to how input step attribute works)
-         * { h:Number, m:Number } where h stands for 'hour step'; m stands for 'minute step'
-         */
-        step: {
-            type: Object,
-            default() {
-                return { h: 1, m: 15 };
-            },
-        },
-        /**
-         * Hour/minute min limit Object (works similar to how input min attribute works)
-         * { h:Number, m:Number } where h stands for 'min hour'; m stands for 'min minute'
-         */
-        min: {
-            type: Object,
-            default() {
-                return { h: 0, m: 0 };
-            },
-        },
-        /**
-         * Hour/minute max limit Object (works similar to how input max attribute works)
-         * { h:Number, m:Number } where h stands for 'max hour'; m stands for 'max minute'
-         */
-        max: {
-            type: Object,
-            default() {
-                return { h: 23, m: 59 };
-            },
-        },
-        /**
-         * Hour/minute cursor indexes Object
-         * { h:Number, m:Number } where h stands for 'hour cursor index'; m stands for 'minute cursor index'
-         */
-        cursorIndex: {
-            type: Object,
-            default() {
-                return { h: 0, m: 0 };
-            },
-        },
-    },
-    data() {
-        return {
-            h: -1,
-            m: -1,
-            hCursorIndex: -1,
-            mCursorIndex: -1,
-            lz(n) {
-                return n < 10 ? `0${n}` : `${n}`;
-            },
-        };
-    },
-    watch: {
-        value: {
-            handler(val) {
-                this.$nextTick(() => {
-                    this.m = val ? val.m : -1;
-                    this.h = val ? val.h : -1;
-                });
-            },
-            immediate: true,
-            deep: true,
-        },
-        h: {
-            handler(val) {
-                this.hCursorIndex = this.hourOptions.findIndex(i => i === val);
-            },
-            immediate: true,
-        },
-        m: {
-            handler(val) {
-                this.mCursorIndex = this.minOptions.findIndex(i => i === val);
-            },
-            immediate: true,
-        },
-        cursorIndex: {
-            handler({ h, m }) {
-                h = parseInt(h);
-                m = parseInt(m);
-                this.hCursorIndex = isNaN(h) ? this.hCursorIndex : h;
-                this.mCursorIndex = isNaN(m) ? this.mCursorIndex : m;
-            },
-            immediate: true,
-            deep: true,
-        },
-    },
-    computed: {
-        hourOptions() {
-            let a = [];
-            let n = Math.floor(24 / this.step.h);
-            for (let i = 0; i < n; ++i) {
-                let v = i * this.step.h;
-                if (v >= this.min.h && v <= this.max.h) {
-                    a.push(v);
-                }
-            }
-            return a;
-        },
-        minOptions() {
-            let a = [];
-            let n = Math.floor(60 / this.step.m);
-            for (let i = 0; i < n; ++i) {
-                let v = i * this.step.m;
-                if (v >= this.min.m && v <= this.max.m) {
-                    a.push(v);
-                }
-            }
-            return a;
-        },
-    },
-    methods: {
-        selectHour(val) {
-            this.h = val;
-            this._triggerValueChange();
-        },
-        selectMin(val) {
-            this.m = val;
-            this._triggerValueChange();
-        },
-        _triggerValueChange() {
-            if (this.h >= 0 && this.m >= 0) {
-                let obj = { h: this.h, m: this.m };
-                /**
-                 * Input event
-                 * @property {Object} option
-                 */
-                this.$emit('input', obj);
-                /**
-                 * Change event
-                 * @property {Object} option
-                 */
-                this.$emit('change', obj);
-            }
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-time-picker panel">
+        <ui-datalist
+            class="ui-time-picker-datalist shadow-none radius-none w-6-12"
+            v-bind="{ cursorIndex: hCursorIndex, options: hourOptions }"
+        >
+            <template #header>
+                <!--
+                @slot Hour label slot
+                -->
+                <slot name="hour-label">
+                    <div class="bg-primary color-white text-small text-center pad-3">Час</div>
+                </slot>
+            </template>
+            <template #option="{ option, index, cursorIndex }">
+                <!--
+                @slot Hour option slot
+                @binding {Boolean} isActive     whether the option is active (selected)
+                @binding {Number} option        the hour option
+                @binding {Number} index         options' index
+                @binding {Number} cursorIndex   the current cursor index position
+                @binding {Function} select      function which selects the option function(option)
+                -->
+                <slot
+                    name="hour-option"
+                    v-bind="{
+                        isActive: option === h,
+                        option,
+                        index,
+                        cursorIndex,
+                        select: selectHour,
+                    }"
+                >
+                    <li :class="{ active: option === h }" @click="selectHour(option)">
+                        <div class="text-small text-center text-truncate">{{ lz(option) }}</div>
+                    </li>
+                </slot>
+            </template>
+        </ui-datalist>
+        <ui-datalist
+            class="ui-time-picker-datalist shadow-none radius-none w-6-12"
+            v-bind="{ cursorIndex: mCursorIndex, options: minOptions }"
+        >
+            <template #header>
+                <!--
+                @slot Minute label slot
+                -->
+                <slot name="min-label">
+                    <div class="bg-primary color-white text-small text-center pad-3">Мин</div>
+                </slot>
+            </template>
+            <template #option="{ option, index, cursorIndex }">
+                <!--
+                @slot Minute option slot
+                @binding {Boolean} isActive     whether the option is active (selected)
+                @binding {Number} option        the min option
+                @binding {Number} index         options' index
+                @binding {Number} cursorIndex   the current cursor index position
+                @binding {Function} select      function which selects the option function(option)
+                -->
+                <slot
+                    name="min-option"
+                    v-bind="{
+                        isActive: option === m,
+                        option,
+                        index,
+                        cursorIndex,
+                        select: selectMin,
+                    }"
+                >
+                    <li :class="{ active: option === m }" @click="selectMin(option)">
+                        <div class="text-small text-center text-truncate">{{ lz(option) }}</div>
+                    </li>
+                </slot>
+            </template>
+        </ui-datalist>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-time-picker {
+    --ui-time-picker-item-size: calc(1rem + var(--font-size-smaller) * 1.5);
+    --ui-time-picker-datalist-min-items: 3;
+    --ui-time-picker-datalist-max-items: 5;
+    display: inline-flex;
+    overflow: hidden;
+    &-datalist {
+        z-index: auto;
+        min-width: 3em;
+        ::v-deep > ul {
+            min-height: calc(
+                var(--ui-time-picker-item-size) * var(--ui-time-picker-datalist-min-items)
+            );
+            max-height: calc(
+                var(--ui-time-picker-item-size) * var(--ui-time-picker-datalist-max-items)
+            );
+            scroll-behavior: smooth;
+        }
+    }
+}
+</style>
+<script>
+import UiDatalist from './Datalist.vue';
+
+export default {
+    components: { UiDatalist },
+    props: {
+        /**
+         * @model Object { h:Number, m:Number } where h stands for 'hour'; m stands for 'minute'
+         */
+        value: {
+            type: Object,
+            default() {
+                return null;
+            },
+        },
+        /**
+         * Hour/minute step size Object (works similar to how input step attribute works)
+         * { h:Number, m:Number } where h stands for 'hour step'; m stands for 'minute step'
+         */
+        step: {
+            type: Object,
+            default() {
+                return { h: 1, m: 15 };
+            },
+        },
+        /**
+         * Hour/minute min limit Object (works similar to how input min attribute works)
+         * { h:Number, m:Number } where h stands for 'min hour'; m stands for 'min minute'
+         */
+        min: {
+            type: Object,
+            default() {
+                return { h: 0, m: 0 };
+            },
+        },
+        /**
+         * Hour/minute max limit Object (works similar to how input max attribute works)
+         * { h:Number, m:Number } where h stands for 'max hour'; m stands for 'max minute'
+         */
+        max: {
+            type: Object,
+            default() {
+                return { h: 23, m: 59 };
+            },
+        },
+        /**
+         * Hour/minute cursor indexes Object
+         * { h:Number, m:Number } where h stands for 'hour cursor index'; m stands for 'minute cursor index'
+         */
+        cursorIndex: {
+            type: Object,
+            default() {
+                return { h: 0, m: 0 };
+            },
+        },
+    },
+    data() {
+        return {
+            h: -1,
+            m: -1,
+            hCursorIndex: -1,
+            mCursorIndex: -1,
+            lz(n) {
+                return n < 10 ? `0${n}` : `${n}`;
+            },
+        };
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.$nextTick(() => {
+                    this.m = val ? val.m : -1;
+                    this.h = val ? val.h : -1;
+                });
+            },
+            immediate: true,
+            deep: true,
+        },
+        h: {
+            handler(val) {
+                this.hCursorIndex = this.hourOptions.findIndex(i => i === val);
+            },
+            immediate: true,
+        },
+        m: {
+            handler(val) {
+                this.mCursorIndex = this.minOptions.findIndex(i => i === val);
+            },
+            immediate: true,
+        },
+        cursorIndex: {
+            handler({ h, m }) {
+                h = parseInt(h);
+                m = parseInt(m);
+                this.hCursorIndex = isNaN(h) ? this.hCursorIndex : h;
+                this.mCursorIndex = isNaN(m) ? this.mCursorIndex : m;
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    computed: {
+        hourOptions() {
+            let a = [];
+            let n = Math.floor(24 / this.step.h);
+            for (let i = 0; i < n; ++i) {
+                let v = i * this.step.h;
+                if (v >= this.min.h && v <= this.max.h) {
+                    a.push(v);
+                }
+            }
+            return a;
+        },
+        minOptions() {
+            let a = [];
+            let n = Math.floor(60 / this.step.m);
+            for (let i = 0; i < n; ++i) {
+                let v = i * this.step.m;
+                if (v >= this.min.m && v <= this.max.m) {
+                    a.push(v);
+                }
+            }
+            return a;
+        },
+    },
+    methods: {
+        selectHour(val) {
+            this.h = val;
+            this._triggerValueChange();
+        },
+        selectMin(val) {
+            this.m = val;
+            this._triggerValueChange();
+        },
+        _triggerValueChange() {
+            if (this.h >= 0 && this.m >= 0) {
+                let obj = { h: this.h, m: this.m };
+                /**
+                 * Input event
+                 * @property {Object} option
+                 */
+                this.$emit('input', obj);
+                /**
+                 * Change event
+                 * @property {Object} option
+                 */
+                this.$emit('change', obj);
+            }
+        },
+    },
+};
+</script>