goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/Grid.vue

@@ -1,92 +1,92 @@
-<style lang="less" scoped>
-.ui-grid {
-    display: grid;
-}
-</style>
-<script>
-export default {
-    props: {
-        /**
-         * Grid areas defined as a 2d array, which describe the layout (areas are mapped to slot names)
-         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
-         */
-        areas: {
-            type: Array,
-            default() {
-                return [['default']];
-            },
-        },
-        /**
-         * Grid colum sizes array
-         * @see Possible values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values
-         */
-        cols: {
-            type: Array,
-            default() {
-                return ['1fr'];
-            },
-        },
-        /**
-         * Grid row sizes array
-         * @see Possible values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#values
-         */
-        rows: {
-            type: Array,
-            default() {
-                return ['1fr'];
-            },
-        },
-        /**
-         * Grid gaps array [<row-gap>, <column-gap>]
-         */
-        gap: {
-            type: Array,
-            default() {
-                return [0, 0];
-            },
-        },
-        /**
-         * Wrapper element tag name @default null
-         */
-        wrapTag: {
-            type: String,
-            default: null,
-        },
-    },
-    computed: {
-        gridStyle() {
-            const { areas, cols, rows, gap } = this;
-            const areasStr = areas.map(row => `"${row.join(' ')}"`).join(' ');
-            return {
-                'grid-template-areas': areasStr,
-                'grid-template-columns': cols.join(' '),
-                'grid-template-rows': rows.join(' '),
-                gap: gap.join(' '),
-            };
-        },
-        slotNames() {
-            const { areas } = this;
-            return [...new Set(areas.flat())].filter(val => val != '.');
-        },
-    },
-    methods: {
-        getSlotStyle(name) {
-            return { 'grid-area': name };
-        },
-    },
-    render(h) {
-        const { wrapTag, slotNames, gridStyle, getSlotStyle, $scopedSlots } = this;
-        const children = slotNames.map(name => {
-            const slot = $scopedSlots[name];
-            if (!slot) {
-                return null;
-            }
-            const slotChild = slot({ style: getSlotStyle(name) });
-            return wrapTag
-                ? h(wrapTag, { style: getSlotStyle(name), key: name }, [slotChild])
-                : slotChild;
-        });
-        return h('div', { class: 'ui-grid', style: gridStyle }, children);
-    },
-};
-</script>
+<style lang="less" scoped>
+.ui-grid {
+    display: grid;
+}
+</style>
+<script>
+export default {
+    props: {
+        /**
+         * Grid areas defined as a 2d array, which describe the layout (areas are mapped to slot names)
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+         */
+        areas: {
+            type: Array,
+            default() {
+                return [['default']];
+            },
+        },
+        /**
+         * Grid colum sizes array
+         * @see Possible values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns#values
+         */
+        cols: {
+            type: Array,
+            default() {
+                return ['1fr'];
+            },
+        },
+        /**
+         * Grid row sizes array
+         * @see Possible values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows#values
+         */
+        rows: {
+            type: Array,
+            default() {
+                return ['1fr'];
+            },
+        },
+        /**
+         * Grid gaps array [<row-gap>, <column-gap>]
+         */
+        gap: {
+            type: Array,
+            default() {
+                return [0, 0];
+            },
+        },
+        /**
+         * Wrapper element tag name @default null
+         */
+        wrapTag: {
+            type: String,
+            default: null,
+        },
+    },
+    computed: {
+        gridStyle() {
+            const { areas, cols, rows, gap } = this;
+            const areasStr = areas.map(row => `"${row.join(' ')}"`).join(' ');
+            return {
+                'grid-template-areas': areasStr,
+                'grid-template-columns': cols.join(' '),
+                'grid-template-rows': rows.join(' '),
+                gap: gap.join(' '),
+            };
+        },
+        slotNames() {
+            const { areas } = this;
+            return [...new Set(areas.flat())].filter(val => val != '.');
+        },
+    },
+    methods: {
+        getSlotStyle(name) {
+            return { 'grid-area': name };
+        },
+    },
+    render(h) {
+        const { wrapTag, slotNames, gridStyle, getSlotStyle, $scopedSlots } = this;
+        const children = slotNames.map(name => {
+            const slot = $scopedSlots[name];
+            if (!slot) {
+                return null;
+            }
+            const slotChild = slot({ style: getSlotStyle(name) });
+            return wrapTag
+                ? h(wrapTag, { style: getSlotStyle(name), key: name }, [slotChild])
+                : slotChild;
+        });
+        return h('div', { class: 'ui-grid', style: gridStyle }, children);
+    },
+};
+</script>

package/src/components/ui/Image.md

@@ -1,59 +1,59 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <div class="p">
-            <div class="row">
-                <div class="col">
-                    <div>String:</div>
-                    <input
-                        class="input input-small w-12-12 v-top"
-                        type="text"
-                        v-model="props.src"
-                    />
-                </div>
-                <div class="col">
-                    <div>File:</div>
-                    <ui-file-selector accept="image/*" @change="onFilesChange">
-                        <div class="btn btn-primary btn-small">select local image</div>
-                    </ui-file-selector>
-                </div>
-                <div class="col">
-                    <div>Promise:</div>
-                    <div class="btn btn-primary btn-small" @click="onImportImage">
-                        import() image
-                    </div>
-                </div>
-            </div>
-        </div>
-        <ui-image v-bind="props" style="max-height:3rem">
-            <i class="preloader"></i>
-        </ui-image>
-    </div>
-</template>
-<script>
-import UiFileSelector from './FileSelector.vue';
-import UiImage from './Image.vue';
-
-export default {
-    components: { UiFileSelector, UiImage },
-    data() {
-        return {
-            props: {
-                src: 'https://vuejs.org/images/logo.svg',
-            },
-        };
-    },
-    methods: {
-        onImportImage() {
-            // @NOTE async import() not working in demo previews
-            this.props.src = Promise.resolve(require('/public/js.png'));
-        },
-        onFilesChange(files) {
-            if (files.length) {
-                this.props.src = files[0];
-            }
-        },
-    },
-};
-</script>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <div class="p">
+            <div class="row">
+                <div class="col">
+                    <div>String:</div>
+                    <input
+                        class="input input-small w-12-12 v-top"
+                        type="text"
+                        v-model="props.src"
+                    />
+                </div>
+                <div class="col">
+                    <div>File:</div>
+                    <ui-file-selector accept="image/*" @change="onFilesChange">
+                        <div class="btn btn-primary btn-small">select local image</div>
+                    </ui-file-selector>
+                </div>
+                <div class="col">
+                    <div>Promise:</div>
+                    <div class="btn btn-primary btn-small" @click="onImportImage">
+                        import() image
+                    </div>
+                </div>
+            </div>
+        </div>
+        <ui-image v-bind="props" style="max-height:3rem">
+            <i class="preloader"></i>
+        </ui-image>
+    </div>
+</template>
+<script>
+import UiFileSelector from './FileSelector.vue';
+import UiImage from './Image.vue';
+
+export default {
+    components: { UiFileSelector, UiImage },
+    data() {
+        return {
+            props: {
+                src: 'https://vuejs.org/images/logo.svg',
+            },
+        };
+    },
+    methods: {
+        onImportImage() {
+            // @NOTE async import() not working in demo previews
+            this.props.src = Promise.resolve(require('/public/js.png'));
+        },
+        onFilesChange(files) {
+            if (files.length) {
+                this.props.src = files[0];
+            }
+        },
+    },
+};
+</script>
+```

package/src/components/ui/Image.vue

@@ -1,57 +1,57 @@
-<script>
-/**
- * @param {File} file
- * @return {Promise<string>}
- */
-const loadFile = file => {
-    return new Promise(resolve => {
-        const fr = new FileReader();
-        fr.addEventListener('load', ({ target }) => resolve(target.result));
-        fr.readAsDataURL(file);
-    });
-};
-
-export default {
-    props: {
-        /**
-         * Image source (String, File, Promise<Module>, Promise<File>)
-         */
-        src: {
-            type: [String, File, Promise],
-            default: null,
-        },
-    },
-    data() {
-        return {
-            source: null,
-        };
-    },
-    watch: {
-        src: {
-            handler(val) {
-                if (typeof val === 'string') {
-                    this.source = val;
-                } else if (val instanceof Promise) {
-                    val.then(data => {
-                        // async import()
-                        if (typeof data === 'object' && data.default) {
-                            this.source = data.default;
-                        } else if (typeof data === 'string') {
-                            this.source = data;
-                        } else if (data instanceof File) {
-                            loadFile(data).then(source => (this.source = source));
-                        }
-                    });
-                } else if (val instanceof File) {
-                    loadFile(val).then(source => (this.source = source));
-                }
-            },
-            immediate: true,
-        },
-    },
-    render(h) {
-        const { source } = this;
-        return source ? h('img', { attrs: { src: source } }) : this.$slots.default;
-    },
-};
-</script>
+<script>
+/**
+ * @param {File} file
+ * @return {Promise<string>}
+ */
+const loadFile = file => {
+    return new Promise(resolve => {
+        const fr = new FileReader();
+        fr.addEventListener('load', ({ target }) => resolve(target.result));
+        fr.readAsDataURL(file);
+    });
+};
+
+export default {
+    props: {
+        /**
+         * Image source (String, File, Promise<Module>, Promise<File>)
+         */
+        src: {
+            type: [String, File, Promise],
+            default: null,
+        },
+    },
+    data() {
+        return {
+            source: null,
+        };
+    },
+    watch: {
+        src: {
+            handler(val) {
+                if (typeof val === 'string') {
+                    this.source = val;
+                } else if (val instanceof Promise) {
+                    val.then(data => {
+                        // async import()
+                        if (typeof data === 'object' && data.default) {
+                            this.source = data.default;
+                        } else if (typeof data === 'string') {
+                            this.source = data;
+                        } else if (data instanceof File) {
+                            loadFile(data).then(source => (this.source = source));
+                        }
+                    });
+                } else if (val instanceof File) {
+                    loadFile(val).then(source => (this.source = source));
+                }
+            },
+            immediate: true,
+        },
+    },
+    render(h) {
+        const { source } = this;
+        return source ? h('img', { attrs: { src: source } }) : this.$slots.default;
+    },
+};
+</script>

package/src/components/ui/InputAutocomplete.md

@@ -1,115 +1,115 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-autocomplete class="w-6-12" v-model="model" v-bind="props"></input-autocomplete>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: '',
-            props: {
-                options: [
-                    'angular',
-                    'aurelia',
-                    'backbone',
-                    'ember',
-                    'meteor',
-                    'react',
-                    'riot',
-                    'stencil',
-                    'svelte',
-                    'vue',
-                ],
-                placeholder: 'New tag here',
-            },
-        };
-    },
-};
-</script>
-```
-
-Advanced example. Async filtering, debounce, slots
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>value: {{ model }}</p>
-        <input-autocomplete class="w-6-12" v-model="model" v-bind="props">
-            <template #loading>
-                <mark>loading</mark>
-            </template>
-            <template #input="{ id, value, inputBinds, inputEvents }">
-                <input
-                    class="w-100"
-                    :id="id"
-                    type="text"
-                    :value="value"
-                    v-bind="inputBinds"
-                    v-on="inputEvents"
-                    style="border:none; outline:none"
-                />
-            </template>
-            <template #dropdown-header>
-                <div class="pad-3">header</div>
-            </template>
-            <template #noresults>
-                <div class="pad-3 text-muted">Nothing found :(</div>
-            </template>
-            <template #option="{ option, optionIndex, valueLocal, selectOption, cursorIndex }">
-                <li
-                    :class="{ 'bg-yellow': optionIndex == cursorIndex }"
-                    @click="selectOption(option)"
-                >
-                    <div v-html="option.replace(valueLocal, '<b>' + valueLocal + '</b>')"></div>
-                </li>
-            </template>
-            <template #dropdown-footer>
-                <div class="pad-3">footer</div>
-            </template>
-        </input-autocomplete>
-    </div>
-</template>
-<script>
-// fake api
-const api = {
-    autocomplete(query) {
-        return new Promise(resolve => {
-            setTimeout(() => {
-                let arr = [
-                    'angular',
-                    'aurelia',
-                    'backbone',
-                    'ember',
-                    'meteor',
-                    'react',
-                    'riot',
-                    'stencil',
-                    'svelte',
-                    'vue',
-                ].filter(item => item.indexOf(query) === 0);
-                resolve(arr);
-            }, 500);
-        });
-    },
-};
-export default {
-    data() {
-        return {
-            model: '',
-            props: {
-                options: [],
-                placeholder: 'New tag here (min 1 letter)',
-                minLength: 1,
-                filter: api.autocomplete,
-                filterDebounce: 250,
-            },
-        };
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-autocomplete class="w-6-12" v-model="model" v-bind="props"></input-autocomplete>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: '',
+            props: {
+                options: [
+                    'angular',
+                    'aurelia',
+                    'backbone',
+                    'ember',
+                    'meteor',
+                    'react',
+                    'riot',
+                    'stencil',
+                    'svelte',
+                    'vue',
+                ],
+                placeholder: 'New tag here',
+            },
+        };
+    },
+};
+</script>
+```
+
+Advanced example. Async filtering, debounce, slots
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>value: {{ model }}</p>
+        <input-autocomplete class="w-6-12" v-model="model" v-bind="props">
+            <template #loading>
+                <mark>loading</mark>
+            </template>
+            <template #input="{ id, value, inputBinds, inputEvents }">
+                <input
+                    class="w-100"
+                    :id="id"
+                    type="text"
+                    :value="value"
+                    v-bind="inputBinds"
+                    v-on="inputEvents"
+                    style="border:none; outline:none"
+                />
+            </template>
+            <template #dropdown-header>
+                <div class="pad-3">header</div>
+            </template>
+            <template #noresults>
+                <div class="pad-3 text-muted">Nothing found :(</div>
+            </template>
+            <template #option="{ option, optionIndex, valueLocal, selectOption, cursorIndex }">
+                <li
+                    :class="{ 'bg-yellow': optionIndex == cursorIndex }"
+                    @click="selectOption(option)"
+                >
+                    <div v-html="option.replace(valueLocal, '<b>' + valueLocal + '</b>')"></div>
+                </li>
+            </template>
+            <template #dropdown-footer>
+                <div class="pad-3">footer</div>
+            </template>
+        </input-autocomplete>
+    </div>
+</template>
+<script>
+// fake api
+const api = {
+    autocomplete(query) {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                let arr = [
+                    'angular',
+                    'aurelia',
+                    'backbone',
+                    'ember',
+                    'meteor',
+                    'react',
+                    'riot',
+                    'stencil',
+                    'svelte',
+                    'vue',
+                ].filter(item => item.indexOf(query) === 0);
+                resolve(arr);
+            }, 500);
+        });
+    },
+};
+export default {
+    data() {
+        return {
+            model: '',
+            props: {
+                options: [],
+                placeholder: 'New tag here (min 1 letter)',
+                minLength: 1,
+                filter: api.autocomplete,
+                filterDebounce: 250,
+            },
+        };
+    },
+};
+</script>
+```