goodteditor-ui 1.0.12 → 1.0.13

package/src/components/ui/FileSelector.md

@@ -1,105 +1,105 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-file-selector v-bind="props" @change="onFileSelect">
-            <div class="btn btn-primary btn-small">select file</div>
-        </ui-file-selector>
-        <pre>{{ files }}</pre>
-    </div>
-</template>
-<script>
-import UiFileSelector from './FileSelector.vue';
-
-export default {
-    components: { UiFileSelector },
-    data() {
-        return {
-            files: [],
-            props: {
-                multiple: false,
-                accept: '',
-            },
-        };
-    },
-    methods: {
-        onFileSelect(files) {
-            this.files = files.map(({ name, type, size }) => ({ name, type, size }));
-        },
-    },
-};
-</script>
-```
-
-Advanced demo: multiple image selection with preview
-
-```vue
-<template>
-    <div class="pad-l5">
-        <div class="d-flex block">
-            <ui-file-selector ref="file-selector" v-bind="props" @change="onFileSelect">
-                <div class="btn btn-primary btn-small">
-                    <template v-if="files.length">images selected: ({{ files.length }})</template>
-                    <template v-else>select images</template>
-                </div>
-            </ui-file-selector>
-            <div class="btn btn-outline btn-small mar-h-3" v-if="files.length" @click="resetFiles">
-                reset
-            </div>
-        </div>
-        <table class="table table-vmid w-6-12">
-            <tr v-for="meta in filesMeta" :key="meta.name">
-                <td class="table-w-auto">
-                    <ui-image :src="meta.preview" style="display:block; width:2rem">
-                        <div><i class="preloader"></i></div>
-                    </ui-image>
-                </td>
-                <td>{{ meta.name }}</td>
-                <td>
-                    <small>({{ meta.size }}kb)</small>
-                </td>
-            </tr>
-        </table>
-    </div>
-</template>
-<script>
-import UiFileSelector from './FileSelector.vue';
-import UiImage from './Image.vue';
-
-// b -> kb util
-const toKb = n => Math.round((n / 1024) * 10) / 10;
-
-export default {
-    components: { UiFileSelector, UiImage },
-    data() {
-        return {
-            files: [],
-            props: {
-                multiple: true,
-                accept: 'image/png,image/jpeg,image/gif',
-            },
-        };
-    },
-    computed: {
-        filesMeta() {
-            return this.files.map(file => {
-                const { name, type, size } = file;
-                return {
-                    name,
-                    type,
-                    size: toKb(size),
-                    preview: file,
-                };
-            });
-        },
-    },
-    methods: {
-        resetFiles() {
-            this.files = [];
-        },
-        onFileSelect(files) {
-            this.files = files;
-        },
-    },
-};
-</script>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-file-selector v-bind="props" @change="onFileSelect">
+            <div class="btn btn-primary btn-small">select file</div>
+        </ui-file-selector>
+        <pre>{{ files }}</pre>
+    </div>
+</template>
+<script>
+import UiFileSelector from './FileSelector.vue';
+
+export default {
+    components: { UiFileSelector },
+    data() {
+        return {
+            files: [],
+            props: {
+                multiple: false,
+                accept: '',
+            },
+        };
+    },
+    methods: {
+        onFileSelect(files) {
+            this.files = files.map(({ name, type, size }) => ({ name, type, size }));
+        },
+    },
+};
+</script>
+```
+
+Advanced demo: multiple image selection with preview
+
+```vue
+<template>
+    <div class="pad-l5">
+        <div class="d-flex block">
+            <ui-file-selector ref="file-selector" v-bind="props" @change="onFileSelect">
+                <div class="btn btn-primary btn-small">
+                    <template v-if="files.length">images selected: ({{ files.length }})</template>
+                    <template v-else>select images</template>
+                </div>
+            </ui-file-selector>
+            <div class="btn btn-outline btn-small mar-h-3" v-if="files.length" @click="resetFiles">
+                reset
+            </div>
+        </div>
+        <table class="table table-vmid w-6-12">
+            <tr v-for="meta in filesMeta" :key="meta.name">
+                <td class="table-w-auto">
+                    <ui-image :src="meta.preview" style="display:block; width:2rem">
+                        <div><i class="preloader"></i></div>
+                    </ui-image>
+                </td>
+                <td>{{ meta.name }}</td>
+                <td>
+                    <small>({{ meta.size }}kb)</small>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>
+<script>
+import UiFileSelector from './FileSelector.vue';
+import UiImage from './Image.vue';
+
+// b -> kb util
+const toKb = n => Math.round((n / 1024) * 10) / 10;
+
+export default {
+    components: { UiFileSelector, UiImage },
+    data() {
+        return {
+            files: [],
+            props: {
+                multiple: true,
+                accept: 'image/png,image/jpeg,image/gif',
+            },
+        };
+    },
+    computed: {
+        filesMeta() {
+            return this.files.map(file => {
+                const { name, type, size } = file;
+                return {
+                    name,
+                    type,
+                    size: toKb(size),
+                    preview: file,
+                };
+            });
+        },
+    },
+    methods: {
+        resetFiles() {
+            this.files = [];
+        },
+        onFileSelect(files) {
+            this.files = files;
+        },
+    },
+};
+</script>
+```

package/src/components/ui/FileSelector.vue

@@ -1,82 +1,82 @@
-<template>
-    <div class="ui-file-selector">
-        <!--
-        @slot default slot
-        @binding {File[]} files  selected files 
-        -->
-        <slot v-bind="{ files }">select files</slot>
-        <input
-            class="ui-file-selector-input pos-abs pos-top-left w-100 h-100"
-            type="file"
-            v-bind="{ accept, multiple }"
-            @change="onFilesChanged"
-        />
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-file-selector {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    &-input {
-        cursor: pointer;
-        overflow: hidden;
-        opacity: 0;
-        &::file-selector-button {
-            width: 100%;
-            height: 100%;
-            visibility: hidden;
-        }
-        &::file-selector-label {
-            display: none;
-        }
-    }
-}
-</style>
-<script>
-export default {
-    props: {
-        /**
-         * html5 accept attr (a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.)
-         */
-        accept: {
-            type: String,
-            default: '',
-        },
-        /**
-         * html5 miltiple attr (single/multiple file selection)
-         */
-        multiple: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            files: [],
-        };
-    },
-    methods: {
-        /**
-         * @public
-         * Resets selected files (emits 'change' event)
-         */
-        reset() {
-            this.files = [];
-            this.emitChange();
-        },
-        emitChange() {
-            /**
-             * Files change event (dispatched whenever files change)
-             * @property {File[]} files
-             */
-            this.$emit('change', this.files);
-        },
-        onFilesChanged(e) {
-            const files = [...e.target.files];
-            this.files = files;
-            this.emitChange();
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-file-selector">
+        <!--
+        @slot default slot
+        @binding {File[]} files  selected files 
+        -->
+        <slot v-bind="{ files }">select files</slot>
+        <input
+            class="ui-file-selector-input pos-abs pos-top-left w-100 h-100"
+            type="file"
+            v-bind="{ accept, multiple }"
+            @change="onFilesChanged"
+        />
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-file-selector {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    &-input {
+        cursor: pointer;
+        overflow: hidden;
+        opacity: 0;
+        &::file-selector-button {
+            width: 100%;
+            height: 100%;
+            visibility: hidden;
+        }
+        &::file-selector-label {
+            display: none;
+        }
+    }
+}
+</style>
+<script>
+export default {
+    props: {
+        /**
+         * html5 accept attr (a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.)
+         */
+        accept: {
+            type: String,
+            default: '',
+        },
+        /**
+         * html5 miltiple attr (single/multiple file selection)
+         */
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            files: [],
+        };
+    },
+    methods: {
+        /**
+         * @public
+         * Resets selected files (emits 'change' event)
+         */
+        reset() {
+            this.files = [];
+            this.emitChange();
+        },
+        emitChange() {
+            /**
+             * Files change event (dispatched whenever files change)
+             * @property {File[]} files
+             */
+            this.$emit('change', this.files);
+        },
+        onFilesChanged(e) {
+            const files = [...e.target.files];
+            this.files = files;
+            this.emitChange();
+        },
+    },
+};
+</script>

package/src/components/ui/Grid.md

@@ -1,130 +1,130 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <div class="tile">
-            <ui-grid class="tile-body" v-bind="props">
-                <template #avatar="{ style }">
-                    <img
-                        class="avatar avatar-3 round"
-                        src="https://picsum.photos/150/150"
-                        :style="style"
-                    />
-                </template>
-                <template #info="{ style }">
-                    <div :style="style">
-                        <div class="text-bold">John Wick</div>
-                        <div class="text-xsmall">john.wick@site.com</div>
-                    </div>
-                </template>
-                <template #status="{ style }">
-                    <div class="text-xsmall color-green" :style="style">online</div>
-                </template>
-            </ui-grid>
-        </div>
-    </div>
-</template>
-<script>
-import UiGrid from './Grid.vue';
-
-export default {
-    components: { UiGrid },
-    data() {
-        return {
-            props: {
-                areas: [['avatar', 'info', 'status']],
-                cols: ['auto', '1fr', 'auto'],
-                rows: ['1fr'],
-                gap: ['1rem'],
-            },
-        };
-    },
-};
-</script>
-```
-
-Using wrapper element
-
-```vue
-<template>
-    <div class="pad-l5">
-        <div class="tile">
-            <ui-grid class="tile-body" v-bind="props">
-                <template #avatar>
-                    <img class="avatar avatar-3 round" src="https://picsum.photos/150/150" />
-                </template>
-                <template #info>
-                    <div class="text-bold">John Wick</div>
-                    <div class="text-xsmall">john.wick@site.com</div>
-                </template>
-                <template #status>
-                    <div class="text-xsmall color-green">online</div>
-                </template>
-            </ui-grid>
-        </div>
-    </div>
-</template>
-<script>
-import UiGrid from './Grid.vue';
-
-export default {
-    components: { UiGrid },
-    data() {
-        return {
-            props: {
-                areas: [['avatar', 'info', 'status']],
-                cols: ['auto', '1fr', 'auto'],
-                rows: ['1fr'],
-                gap: ['1rem'],
-                wrapTag: 'div',
-            },
-        };
-    },
-};
-</script>
-```
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-grid v-bind="props">
-            <template v-for="name in areaNames" v-slot:[name]="{ style }">
-                <div class="box" :style="style">
-                    <code>{{ name }}</code>
-                </div>
-            </template>
-        </ui-grid>
-    </div>
-</template>
-<script>
-import UiGrid from './Grid.vue';
-
-export default {
-    components: { UiGrid },
-    data() {
-        return {
-            props: {
-                areas: [
-                    ['area1', 'area3', 'area5'],
-                    ['area1', 'area4', 'area5'],
-                    ['area1', 'area2', 'area2'],
-                ],
-                cols: ['auto', '1fr', 'auto'],
-                rows: ['1fr'],
-                gap: ['1rem'],
-            },
-        };
-    },
-    computed: {
-        areaNames() {
-            return [...new Set(this.props.areas.flat())];
-        },
-    },
-};
-</script>
-<style scopped>
-.box {
-    padding: 1rem;
-    background: #eee;
-}
-</style>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <div class="tile">
+            <ui-grid class="tile-body" v-bind="props">
+                <template #avatar="{ style }">
+                    <img
+                        class="avatar avatar-3 round"
+                        src="https://picsum.photos/150/150"
+                        :style="style"
+                    />
+                </template>
+                <template #info="{ style }">
+                    <div :style="style">
+                        <div class="text-bold">John Wick</div>
+                        <div class="text-xsmall">john.wick@site.com</div>
+                    </div>
+                </template>
+                <template #status="{ style }">
+                    <div class="text-xsmall color-green" :style="style">online</div>
+                </template>
+            </ui-grid>
+        </div>
+    </div>
+</template>
+<script>
+import UiGrid from './Grid.vue';
+
+export default {
+    components: { UiGrid },
+    data() {
+        return {
+            props: {
+                areas: [['avatar', 'info', 'status']],
+                cols: ['auto', '1fr', 'auto'],
+                rows: ['1fr'],
+                gap: ['1rem'],
+            },
+        };
+    },
+};
+</script>
+```
+
+Using wrapper element
+
+```vue
+<template>
+    <div class="pad-l5">
+        <div class="tile">
+            <ui-grid class="tile-body" v-bind="props">
+                <template #avatar>
+                    <img class="avatar avatar-3 round" src="https://picsum.photos/150/150" />
+                </template>
+                <template #info>
+                    <div class="text-bold">John Wick</div>
+                    <div class="text-xsmall">john.wick@site.com</div>
+                </template>
+                <template #status>
+                    <div class="text-xsmall color-green">online</div>
+                </template>
+            </ui-grid>
+        </div>
+    </div>
+</template>
+<script>
+import UiGrid from './Grid.vue';
+
+export default {
+    components: { UiGrid },
+    data() {
+        return {
+            props: {
+                areas: [['avatar', 'info', 'status']],
+                cols: ['auto', '1fr', 'auto'],
+                rows: ['1fr'],
+                gap: ['1rem'],
+                wrapTag: 'div',
+            },
+        };
+    },
+};
+</script>
+```
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-grid v-bind="props">
+            <template v-for="name in areaNames" v-slot:[name]="{ style }">
+                <div class="box" :style="style">
+                    <code>{{ name }}</code>
+                </div>
+            </template>
+        </ui-grid>
+    </div>
+</template>
+<script>
+import UiGrid from './Grid.vue';
+
+export default {
+    components: { UiGrid },
+    data() {
+        return {
+            props: {
+                areas: [
+                    ['area1', 'area3', 'area5'],
+                    ['area1', 'area4', 'area5'],
+                    ['area1', 'area2', 'area2'],
+                ],
+                cols: ['auto', '1fr', 'auto'],
+                rows: ['1fr'],
+                gap: ['1rem'],
+            },
+        };
+    },
+    computed: {
+        areaNames() {
+            return [...new Set(this.props.areas.flat())];
+        },
+    },
+};
+</script>
+<style scopped>
+.box {
+    padding: 1rem;
+    background: #eee;
+}
+</style>
+```