goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/InputUnits.vue

@@ -1,257 +1,257 @@
-<template>
-    <div
-        class="ui-input-units form-elem"
-        :class="cssClass"
-        :data-popover="popoverTargetId"
-        @focus="onRootFocus"
-        tabindex="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: model.value, inputBinds, inputEvents }">
-            <input
-                :id="inputId"
-                class="ui-input-units-input text-right w-100"
-                v-model.number="model.value"
-                v-bind="inputBinds"
-                v-on="inputEvents"
-            />
-        </slot>
-        <div>
-            <span class="ui-input-units-link link" @click.stop="togglePopover">
-                {{ model.unit }}
-            </span>
-        </div>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <ui-datalist
-                class="pull-left w-100"
-                ref="datalist"
-                v-bind="{ options: units, size }"
-                :cursorIndex.sync="dataListCursorIndex"
-                @select-option="onUnitChange"
-            >
-                <template #header>
-                    <!--
-                    @slot Dropdown header content
-                    -->
-                    <slot name="dropdown-header"></slot>
-                </template>
-                <template
-                    #option="{
-                        option,
-                        index,
-                        cursorIndex,
-                        setCursorIndex,
-                    }"
-                >
-                    <!--
-                    @slot Dropdown option
-                    @binding {String} option         option
-                    @binding {Number} index          option index
-                    @binding {String} selectedOption current selected option
-                    @binding {Number} cursorIndex    current dropdown selection index
-                    @binding {Function} selectOption    function that select's the option
-                    @binding {Function} setCursorIndex  function that sets the cursor index
-                    -->
-                    <slot
-                        name="option"
-                        v-bind="{
-                            option,
-                            index,
-                            selectedOption: model.unit,
-                            cursorIndex,
-                            select: selectUnit,
-                            setCursorIndex,
-                        }"
-                    ></slot>
-                </template>
-                <template #footer>
-                    <slot name="dropdown-footer"></slot>
-                </template>
-            </ui-datalist>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-input-units {
-    display: inline-flex;
-    align-items: center;
-    &-input {
-        line-height: 1.5;
-        border: none;
-        outline: none;
-        appearance: none;
-        margin: 0;
-        padding: 0;
-        color: inherit;
-        background: transparent;
-        outline: none;
-        -moz-appearance: textfield;
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-        &:invalid {
-            box-shadow: none;
-        }
-    }
-    &-link {
-        margin-left: 0.125em;
-    }
-    &.valid,
-    &.invalid,
-    &.disabled {
-        .ui-input-units-link {
-            color: inherit;
-            border-color: inherit;
-        }
-    }
-}
-</style>
-<script>
-import FormComponent from './utils/FormComponent';
-import WithPopover from './utils/WithPopover';
-import UiDatalist from './Datalist.vue';
-import UiPopover from './Popover.vue';
-import { Key, Position } from './utils/Helpers';
-
-const withUnitRegExp = /^(-?[\d.]*)(\D+)$/i;
-
-export default {
-    mixins: [FormComponent, WithPopover],
-    components: { UiDatalist, UiPopover },
-    props: {
-        /**
-         * Unit options String[]
-         */
-        units: {
-            type: Array,
-            default() {
-                return [];
-            },
-        },
-        position: {
-            type: String,
-            default: `${Position.BOTTOM}-${Position.END}`,
-        },
-    },
-    data() {
-        return {
-            model: {
-                value: '',
-                unit: '',
-            },
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly,
-                type: 'number',
-                step: 'none',
-            },
-            inputEvents: {
-                change: this.onInputChange,
-                input: this.onInputInput,
-                focus: this.onInputFocus,
-                blur: this.onInputBlur,
-                keydown: this.onInputKeydown,
-            },
-            dataListCursorIndex: -1,
-        };
-    },
-    computed: {
-        valuePrivate() {
-            const { value, unit } = this.model;
-            return `${value}${unit}`;
-        },
-        isModelValid() {
-            const { value, unit } = this.model;
-            return !isNaN(value) && value !== '' && !!unit;
-        },
-    },
-    watch: {
-        value: {
-            handler(v) {
-                const a = String(v).match(withUnitRegExp);
-                const { units } = this;
-                let unit = units.length ? units[0] : '';
-                let value = '';
-
-                if (!a) {
-                    value = v;
-                } else {
-                    const [_, n, u] = a;
-                    if (units.includes(u)) {
-                        value = n;
-                        unit = u;
-                    }
-                }
-                this.dataListCursorIndex = units.indexOf(unit);
-                this.model = { value, unit };
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        emitInput() {
-            const value = this.isModelValid ? this.valuePrivate : '';
-            /**
-             * Change event
-             * @property {String} value
-             */
-            this.$emit('input', value);
-        },
-        emitChange() {
-            const value = this.isModelValid ? this.valuePrivate : '';
-            /**
-             * Input event
-             * @property {String} value
-             */
-            this.$emit('change', value);
-        },
-        selectUnit(unit) {
-            this.popoverShow = false;
-            if (this.model.unit == unit) {
-                return;
-            }
-            this.model.unit = unit;
-            this.emitInput();
-            this.emitChange();
-        },
-        onRootFocus(e) {
-            let input = this.getInputRef();
-            input && input.focus();
-        },
-        onInputBlur(e) {
-            this.rootHasFocus = false;
-        },
-        onInputFocus(e) {
-            this.rootHasFocus = true;
-            /**
-             * Input focus event
-             * @property {Node} node
-             */
-            this.$emit('focus', e.target);
-        },
-        onInputChange(e) {
-            this.emitChange();
-        },
-        onInputInput(e) {
-            this.emitInput();
-        },
-        onInputKeydown(e) {
-            const { key } = e;
-            if (key === Key.ESC) {
-                this.popoverShow = false;
-            }
-        },
-        onUnitChange({ option }) {
-            this.selectUnit(option);
-        },
-    },
-};
-</script>
+<template>
+    <div
+        class="ui-input-units form-elem"
+        :class="cssClass"
+        :data-popover="popoverTargetId"
+        @focus="onRootFocus"
+        tabindex="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: model.value, inputBinds, inputEvents }">
+            <input
+                :id="inputId"
+                class="ui-input-units-input text-right w-100"
+                v-model.number="model.value"
+                v-bind="inputBinds"
+                v-on="inputEvents"
+            />
+        </slot>
+        <div>
+            <span class="ui-input-units-link link" @click.stop="togglePopover">
+                {{ model.unit }}
+            </span>
+        </div>
+        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <ui-datalist
+                class="pull-left w-100"
+                ref="datalist"
+                v-bind="{ options: units, size }"
+                :cursorIndex.sync="dataListCursorIndex"
+                @select-option="onUnitChange"
+            >
+                <template #header>
+                    <!--
+                    @slot Dropdown header content
+                    -->
+                    <slot name="dropdown-header"></slot>
+                </template>
+                <template
+                    #option="{
+                        option,
+                        index,
+                        cursorIndex,
+                        setCursorIndex,
+                    }"
+                >
+                    <!--
+                    @slot Dropdown option
+                    @binding {String} option         option
+                    @binding {Number} index          option index
+                    @binding {String} selectedOption current selected option
+                    @binding {Number} cursorIndex    current dropdown selection index
+                    @binding {Function} selectOption    function that select's the option
+                    @binding {Function} setCursorIndex  function that sets the cursor index
+                    -->
+                    <slot
+                        name="option"
+                        v-bind="{
+                            option,
+                            index,
+                            selectedOption: model.unit,
+                            cursorIndex,
+                            select: selectUnit,
+                            setCursorIndex,
+                        }"
+                    ></slot>
+                </template>
+                <template #footer>
+                    <slot name="dropdown-footer"></slot>
+                </template>
+            </ui-datalist>
+        </ui-popover>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-input-units {
+    display: inline-flex;
+    align-items: center;
+    &-input {
+        line-height: 1.5;
+        border: none;
+        outline: none;
+        appearance: none;
+        margin: 0;
+        padding: 0;
+        color: inherit;
+        background: transparent;
+        outline: none;
+        -moz-appearance: textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        &:invalid {
+            box-shadow: none;
+        }
+    }
+    &-link {
+        margin-left: 0.125em;
+    }
+    &.valid,
+    &.invalid,
+    &.disabled {
+        .ui-input-units-link {
+            color: inherit;
+            border-color: inherit;
+        }
+    }
+}
+</style>
+<script>
+import FormComponent from './utils/FormComponent';
+import WithPopover from './utils/WithPopover';
+import UiDatalist from './Datalist.vue';
+import UiPopover from './Popover.vue';
+import { Key, Position } from './utils/Helpers';
+
+const withUnitRegExp = /^(-?[\d.]*)(\D+)$/i;
+
+export default {
+    mixins: [FormComponent, WithPopover],
+    components: { UiDatalist, UiPopover },
+    props: {
+        /**
+         * Unit options String[]
+         */
+        units: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        position: {
+            type: String,
+            default: `${Position.BOTTOM}-${Position.END}`,
+        },
+    },
+    data() {
+        return {
+            model: {
+                value: '',
+                unit: '',
+            },
+            inputBinds: {
+                placeholder: this.placeholder,
+                readonly: this.readonly,
+                type: 'number',
+                step: 'none',
+            },
+            inputEvents: {
+                change: this.onInputChange,
+                input: this.onInputInput,
+                focus: this.onInputFocus,
+                blur: this.onInputBlur,
+                keydown: this.onInputKeydown,
+            },
+            dataListCursorIndex: -1,
+        };
+    },
+    computed: {
+        valuePrivate() {
+            const { value, unit } = this.model;
+            return `${value}${unit}`;
+        },
+        isModelValid() {
+            const { value, unit } = this.model;
+            return !isNaN(value) && value !== '' && !!unit;
+        },
+    },
+    watch: {
+        value: {
+            handler(v) {
+                const a = String(v).match(withUnitRegExp);
+                const { units } = this;
+                let unit = units.length ? units[0] : '';
+                let value = '';
+
+                if (!a) {
+                    value = v;
+                } else {
+                    const [_, n, u] = a;
+                    if (units.includes(u)) {
+                        value = n;
+                        unit = u;
+                    }
+                }
+                this.dataListCursorIndex = units.indexOf(unit);
+                this.model = { value, unit };
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        emitInput() {
+            const value = this.isModelValid ? this.valuePrivate : '';
+            /**
+             * Change event
+             * @property {String} value
+             */
+            this.$emit('input', value);
+        },
+        emitChange() {
+            const value = this.isModelValid ? this.valuePrivate : '';
+            /**
+             * Input event
+             * @property {String} value
+             */
+            this.$emit('change', value);
+        },
+        selectUnit(unit) {
+            this.popoverShow = false;
+            if (this.model.unit == unit) {
+                return;
+            }
+            this.model.unit = unit;
+            this.emitInput();
+            this.emitChange();
+        },
+        onRootFocus(e) {
+            let input = this.getInputRef();
+            input && input.focus();
+        },
+        onInputBlur(e) {
+            this.rootHasFocus = false;
+        },
+        onInputFocus(e) {
+            this.rootHasFocus = true;
+            /**
+             * Input focus event
+             * @property {Node} node
+             */
+            this.$emit('focus', e.target);
+        },
+        onInputChange(e) {
+            this.emitChange();
+        },
+        onInputInput(e) {
+            this.emitInput();
+        },
+        onInputKeydown(e) {
+            const { key } = e;
+            if (key === Key.ESC) {
+                this.popoverShow = false;
+            }
+        },
+        onUnitChange({ option }) {
+            this.selectUnit(option);
+        },
+    },
+};
+</script>

package/src/components/ui/Lazy.md

@@ -1,37 +1,37 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <p>Lazy list: {{ numItems }} items (see devtools)</p>
-        <div id="lazy-container" class="tile">
-            <ui-lazy v-bind="props" v-for="i in numItems" :key="`lazy` + i">
-                <test-component>lazy #{{ i }}</test-component>
-            </ui-lazy>
-        </div>
-    </div>
-</template>
-<script>
-import UiLazy from './Lazy.vue';
-
-const TestComponent = {
-    template: `<div class="pad-h-l1 pad-v-3"><slot></slot></div>`,
-};
-export default {
-    components: { UiLazy, TestComponent },
-    data() {
-        return {
-            props: {
-                root: '#lazy-container',
-                minHeight: '2rem',
-            },
-            numItems: 1000,
-        };
-    },
-};
-</script>
-<style scoped>
-#lazy-container {
-    overflow: auto;
-    max-height: 10rem;
-}
-</style>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <p>Lazy list: {{ numItems }} items (see devtools)</p>
+        <div id="lazy-container" class="tile">
+            <ui-lazy v-bind="props" v-for="i in numItems" :key="`lazy` + i">
+                <test-component>lazy #{{ i }}</test-component>
+            </ui-lazy>
+        </div>
+    </div>
+</template>
+<script>
+import UiLazy from './Lazy.vue';
+
+const TestComponent = {
+    template: `<div class="pad-h-l1 pad-v-3"><slot></slot></div>`,
+};
+export default {
+    components: { UiLazy, TestComponent },
+    data() {
+        return {
+            props: {
+                root: '#lazy-container',
+                minHeight: '2rem',
+            },
+            numItems: 1000,
+        };
+    },
+};
+</script>
+<style scoped>
+#lazy-container {
+    overflow: auto;
+    max-height: 10rem;
+}
+</style>
+```