goodteditor-ui 1.0.23 → 1.0.25

package/src/components/ui/Datalist.md

@@ -1,41 +1,41 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-datalist class="d-block w-f2" v-bind="props" v-on="events"></ui-datalist>
-        <pre>{{ selected }}</pre>
-    </div>
-</template>
-<script>
-import UiDatalist from './Datalist.vue';
-
-let options = [
-    'angular',
-    'aurelia',
-    'backbone',
-    'ember',
-    'meteor',
-    'react',
-    'riot',
-    'stencil',
-    'svelte',
-    'vue',
-];
-
-export default {
-    components: { UiDatalist },
-    data() {
-        return {
-            selected: null,
-            props: {
-                options,
-            },
-            events: {
-                'select-option': data => {
-                    this.selected = data;
-                },
-            },
-        };
-    },
-};
-</script>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-datalist class="d-block w-f2" v-bind="props" v-on="events"></ui-datalist>
+        <pre>{{ selected }}</pre>
+    </div>
+</template>
+<script>
+import UiDatalist from './Datalist.vue';
+
+let options = [
+    'angular',
+    'aurelia',
+    'backbone',
+    'ember',
+    'meteor',
+    'react',
+    'riot',
+    'stencil',
+    'svelte',
+    'vue',
+];
+
+export default {
+    components: { UiDatalist },
+    data() {
+        return {
+            selected: null,
+            props: {
+                options,
+            },
+            events: {
+                'select-option': data => {
+                    this.selected = data;
+                },
+            },
+        };
+    },
+};
+</script>
+```

package/src/components/ui/Datalist.vue

@@ -1,157 +1,164 @@
-<template>
-    <div class="ui-datalist dropdown" :class="cssClass">
-        <!-- 
-        @slot Dropdown header slot
-        -->
-        <slot name="header"></slot>
-        <ul ref="ul">
-            <!-- 
-            @slot Label slot for single mode
-            @binding {Object} option             option
-            @binding {Number} index              option's index
-            @binding {Number} cursorIndex        cursor index
-            @binding {Function} setCursorIndex   sets cursor index
-            -->
-            <slot
-                name="option"
-                v-for="(option, index) in options"
-                v-bind="{
-                    option,
-                    index,
-                    cursorIndex,
-                    setCursorIndex,
-                }"
-            >
-                <li
-                    :class="{ active: index == cursorIndex }"
-                    :key="index"
-                    @click="onOptionClick(option, index)"
-                >
-                    <div class="text-truncate" style="min-height: calc(var(--line-height)*1rem)">
-                        {{ option }}
-                    </div>
-                </li>
-            </slot>
-        </ul>
-        <!-- 
-        @slot Dropdown footer slot
-        -->
-        <slot name="footer"></slot>
-    </div>
-</template>
-<style lang="less" scoped>
-.dropdown {
-    outline: none;
-    ul {
-        scroll-behavior: smooth;
-    }
-    &.no-scroll-animation {
-        ul {
-            scroll-behavior: auto;
-        }
-    }
-}
-</style>
-<script>
-import { scrollIntoView, Key } from './utils/Helpers';
-
-export default {
-    props: {
-        /**
-         * Options
-         */
-        options: {
-            type: Array,
-            default() {
-                return [];
-            },
-        },
-        /**
-         * Defines the size of the component
-         * @values '', small, large
-         */
-        size: {
-            type: String,
-            default: '',
-            validator: function(value) {
-                return ['', 'small', 'large'].indexOf(value) >= 0;
-            },
-        },
-        /**
-         * The current cursor index position (.sync)
-         */
-        cursorIndex: {
-            type: Number,
-            default: -1,
-        },
-    },
-    data() {
-        return { useScrollAnimation: true };
-    },
-    computed: {
-        cssClass() {
-            let { size, useScrollAnimation } = this;
-            let o = [];
-            size && o.push(`dropdown-${this.size}`);
-            !useScrollAnimation && o.push('no-scroll-animation');
-            return o;
-        },
-    },
-    watch: {
-        cursorIndex: {
-            handler(val) {
-                this.useScrollAnimation = false;
-                setTimeout(() => {
-                    let c = this.$refs.ul ? this.$refs.ul.children[val] : null;
-                    scrollIntoView(c);
-                    this.useScrollAnimation = true;
-                });
-            },
-            immediate: true,
-        },
-    },
-    methods: {
-        onOptionClick(option, index) {
-            /**
-             * Select option event
-             * @property {Object} { option, index }
-             */
-            this.$emit('select-option', { option, index });
-        },
-        setCursorIndex(index) {
-            if (index < 0 || index >= this.options.length) {
-                return;
-            }
-            /**
-             * Update cursor index event (.sync)
-             * @property {Number} index
-             */
-            this.$emit('update:cursorIndex', index);
-        },
-        onKeyDown(e) {
-            if (e.key === Key.UP) {
-                if (this.cursorIndex > 0) {
-                    e.preventDefault();
-                    this.setCursorIndex(this.cursorIndex - 1);
-                }
-            } else if (e.key === Key.DOWN) {
-                if (this.cursorIndex < this.options.length - 1) {
-                    e.preventDefault();
-                    this.setCursorIndex(this.cursorIndex + 1);
-                }
-            } else if (e.key === Key.ENTER && this.options.length) {
-                e.preventDefault();
-                let option = this.options[this.cursorIndex];
-                if (!option) {
-                    return;
-                }
-                /**
-                 * Select option event
-                 * @property {Object} { option, index }
-                 */
-                this.$emit('select-option', { option, index: this.cursorIndex });
-            }
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-datalist dropdown" :class="cssClass">
+        <!-- 
+        @slot Dropdown header slot
+        -->
+        <slot name="header"></slot>
+        <ul ref="ul" :style="{ maxHeight }">
+            <!-- 
+            @slot Label slot for single mode
+            @binding {Object} option             option
+            @binding {Number} index              option's index
+            @binding {Number} cursorIndex        cursor index
+            @binding {Function} setCursorIndex   sets cursor index
+            -->
+            <slot
+                name="option"
+                v-for="(option, index) in options"
+                v-bind="{
+                    option,
+                    index,
+                    cursorIndex,
+                    setCursorIndex,
+                }"
+            >
+                <li
+                    :class="{ active: index == cursorIndex }"
+                    :key="index"
+                    @click="onOptionClick(option, index)"
+                >
+                    <div class="text-truncate" style="min-height: calc(var(--line-height) * 1rem)">
+                        {{ option }}
+                    </div>
+                </li>
+            </slot>
+        </ul>
+        <!-- 
+        @slot Dropdown footer slot
+        -->
+        <slot name="footer"></slot>
+    </div>
+</template>
+<style lang="less" scoped>
+.dropdown {
+    outline: none;
+    ul {
+        scroll-behavior: smooth;
+    }
+    &.no-scroll-animation {
+        ul {
+            scroll-behavior: auto;
+        }
+    }
+}
+</style>
+<script>
+import { scrollIntoView, Key } from './utils/Helpers';
+
+export default {
+    props: {
+        /**
+         * Options
+         */
+        options: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        /**
+         * Defines the size of the component
+         * @values '', small, large
+         */
+        size: {
+            type: String,
+            default: '',
+            validator: function (value) {
+                return ['', 'small', 'large'].indexOf(value) >= 0;
+            },
+        },
+        /**
+         * Defines the max-height of the dropdown list (value may be any css unit/expression)
+         */
+        maxHeight: {
+            type: String,
+            default: '',
+        },
+        /**
+         * The current cursor index position (.sync)
+         */
+        cursorIndex: {
+            type: Number,
+            default: -1,
+        },
+    },
+    data() {
+        return { useScrollAnimation: true };
+    },
+    computed: {
+        cssClass() {
+            let { size, useScrollAnimation } = this;
+            let o = [];
+            size && o.push(`dropdown-${this.size}`);
+            !useScrollAnimation && o.push('no-scroll-animation');
+            return o;
+        },
+    },
+    watch: {
+        cursorIndex: {
+            handler(val) {
+                this.useScrollAnimation = false;
+                setTimeout(() => {
+                    let c = this.$refs.ul ? this.$refs.ul.children[val] : null;
+                    scrollIntoView(c);
+                    this.useScrollAnimation = true;
+                });
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        onOptionClick(option, index) {
+            /**
+             * Select option event
+             * @property {Object} { option, index }
+             */
+            this.$emit('select-option', { option, index });
+        },
+        setCursorIndex(index) {
+            if (index < 0 || index >= this.options.length) {
+                return;
+            }
+            /**
+             * Update cursor index event (.sync)
+             * @property {Number} index
+             */
+            this.$emit('update:cursorIndex', index);
+        },
+        onKeyDown(e) {
+            if (e.key === Key.UP) {
+                if (this.cursorIndex > 0) {
+                    e.preventDefault();
+                    this.setCursorIndex(this.cursorIndex - 1);
+                }
+            } else if (e.key === Key.DOWN) {
+                if (this.cursorIndex < this.options.length - 1) {
+                    e.preventDefault();
+                    this.setCursorIndex(this.cursorIndex + 1);
+                }
+            } else if (e.key === Key.ENTER && this.options.length) {
+                e.preventDefault();
+                let option = this.options[this.cursorIndex];
+                if (!option) {
+                    return;
+                }
+                /**
+                 * Select option event
+                 * @property {Object} { option, index }
+                 */
+                this.$emit('select-option', { option, index: this.cursorIndex });
+            }
+        },
+    },
+};
+</script>