goodteditor-ui 1.0.1 → 1.0.5

package/index.js

@@ -3,6 +3,8 @@ import Collapse from './src/components/ui/Collapse.vue';
 import ColorPicker from './src/components/ui/ColorPicker.vue';
 import Datalist from './src/components/ui/Datalist.vue';
 import DatePicker from './src/components/ui/DatePicker.vue';
+import FileSelector from './src/components/ui/FileSelector.vue';
+import Image from './src/components/ui/Image.vue';
 import InputAutocomplete from './src/components/ui/InputAutocomplete.vue';
 import InputColorPicker from './src/components/ui/InputColorPicker.vue';
 import InputDatePicker from './src/components/ui/InputDatePicker.vue';
@@ -23,6 +25,8 @@ export {
     ColorPicker,
     Datalist,
     DatePicker,
+    FileSelector,
+    Image,
     InputAutocomplete,
     InputColorPicker,
     InputDatePicker,

package/package.json

@@ -1,28 +1,33 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.1",
+    "version": "1.0.5",
     "main": "index.js",
+    "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint",
-        "styleguide": "vue-styleguidist server",
-        "styleguide:build": "set NODE_ENV=development && vue-styleguidist build",
-        "deploy:docs": "npx netlify deploy --dir=docs --prod"
+        "dev": "vue-styleguidist server",
+        "docs:build": "set NODE_ENV=development && vue-styleguidist build",
+        "docs:deploy": "npx netlify deploy --dir=docs --prod",
+        "notify": "node ./ci/teams-notify.js",
+        "publish": "npm publish && npm run docs:build && npm run docs:deploy && npm run notify"
     },
     "devDependencies": {
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@vue/cli-plugin-babel": "^4.5.11",
         "@vue/cli-plugin-eslint": "^4.5.11",
         "@vue/cli-service": "^4.5.11",
+        "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",
         "goodt-framework-css": "^1.1.1",
         "less": "^3.13.1",
         "less-loader": "^5.0.0",
+        "netlify-cli": "^5.0.1",
         "vue-styleguidist": "4.35.0",
-        "vue-template-compiler": "^2.6.12",
-        "netlify-cli": "^5.0.1"
+        "vue-template-compiler": "^2.6.12"
     },
     "peerDependencies": {
         "vue": "^2.6.12"

package/src/components/ui/Datalist.vue

@@ -139,7 +139,7 @@ export default {
                     e.preventDefault();
                     this.setCursorIndex(this.cursorIndex + 1);
                 }
-            } else if (e.key === Key.ENTER) {
+            } else if (e.key === Key.ENTER && this.options.length) {
                 e.preventDefault();
                 let option = this.options[this.cursorIndex];
                 if (!option) {

package/src/components/ui/FileSelector.md

@@ -0,0 +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>
+```

package/src/components/ui/FileSelector.vue

@@ -0,0 +1,78 @@
+<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: {
+        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

@@ -0,0 +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>
+```

package/src/components/ui/Grid.vue

@@ -0,0 +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>

package/src/components/ui/Image.md

@@ -0,0 +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>
+```

package/src/components/ui/Image.vue

@@ -0,0 +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>

package/src/components/ui/InputTags.vue

@@ -23,13 +23,21 @@
         @slot Custom input slot
         @binding {String} id            input id attribute value
         @binding {String} value         input value
+        @binding {Function} addTag      function to add tag
         @binding {Function} setValue    function to set the 'value' function(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: newTag, setValue: setNewTag, inputBinds, inputEvents }"
+            v-bind="{
+                id: inputId,
+                value: newTag,
+                addTag,
+                setValue: setNewTag,
+                inputBinds,
+                inputEvents,
+            }"
         >
             <input
                 :id="inputId"

package/src/components/ui/InputUnits.vue

@@ -6,7 +6,7 @@
         @focus="onRootFocus"
         tabindex="0"
     >
-        <!-- 
+        <!--
         @slot Custom input slot
         @binding {String} id            input id attribute value
         @binding {String} value         input value
@@ -36,7 +36,7 @@
                 @select-option="onUnitChange"
             >
                 <template #header>
-                    <!-- 
+                    <!--
                     @slot Dropdown header content
                     -->
                     <slot name="dropdown-header"></slot>
@@ -49,12 +49,12 @@
                         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 {Number} cursorIndex    current dropdown selection index
                     @binding {Function} selectOption    function that select's the option
                     @binding {Function} setCursorIndex  function that sets the cursor index
                     -->
@@ -121,7 +121,7 @@ import UiDatalist from './Datalist.vue';
 import UiPopover from './Popover.vue';
 import { Key, Position } from './utils/Helpers';
 
-const withUnitRegExp = /^([\d.]*)(\D+)$/i;
+const withUnitRegExp = /^(-?[\d.]*)(\D+)$/i;
 
 export default {
     mixins: [FormComponent, WithPopover],

package/src/components/ui/Popover.vue

@@ -97,17 +97,10 @@ export default {
             default: false,
         },
     },
+    data() {
+        return { cssStyle: {} };
+    },
     computed: {
-        cssStyle() {
-            const { zIndex, autoWidth } = this;
-            const obj = { zIndex };
-            const target = this.getTarget();
-            if (autoWidth && target) {
-                const b = target.getBoundingClientRect();
-                obj.width = `${b.width}px`;
-            }
-            return obj;
-        },
         placement() {
             const { position } = this;
             const map = { t: Position.TOP, l: Position.START, r: Position.END, b: Position.BOTTOM };
@@ -146,7 +139,10 @@ export default {
                                 },
                             ],
                         });
-                        this.$nextTick(() => this.popper.update());
+                        this.$nextTick(() => {
+                            this.calcStyle();
+                            this.popper.update();
+                        });
                     } else {
                         this.removeEventListeners();
                         this.destroyPopper();
@@ -172,6 +168,16 @@ export default {
             window.removeEventListener('blur', this.onWinBlur);
             document.removeEventListener('mousedown', this.onDocMouseDown);
         },
+        calcStyle() {
+            const { zIndex, autoWidth } = this;
+            const target = this.getTarget();
+            const style = { zIndex };
+            if (autoWidth && target) {
+                const b = target.getBoundingClientRect();
+                style.width = `${b.width}px`;
+            }
+            this.cssStyle = style;
+        },
         getTarget() {
             let { target } = this;
             return isElem(target) ? target : document.querySelector(target);

package/src/components/ui/Select.md

@@ -132,3 +132,56 @@ export default {
 };
 </script>
 ```
+
+Runtime options
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-select class="w-6-12 p" v-model="model" v-bind="props"></ui-select>
+        <p>
+            <label>
+                <input class="checkbox checkbox-small" type="checkbox" v-model="props.multiple" />
+                <span class="pad-left-2 v-mid">multiple</span>
+            </label>
+        </p>
+        <p><div class="btn btn-primary" @click="toggleOptions">toggle options</div></p>
+        <p>model: {{ model }}</p>
+    </div>
+</template>
+<script>
+import UiSelect from './Select.vue';
+
+let options = [
+    'angular',
+    'aurelia',
+    'backbone',
+    'ember',
+    'meteor',
+    'react',
+    'riot',
+    'stencil',
+    'svelte',
+    'vue',
+];
+
+export default {
+    components: { UiSelect },
+    data() {
+        return {
+            model: 'vue',
+            props: {
+                options: [],
+                multiple: false,
+            },
+            overflow: false,
+        };
+    },
+    methods: {
+        toggleOptions() {
+            this.props.options = this.props.options.length ? [] : options;
+        },
+    },
+};
+</script>
+```

package/src/components/ui/Select.vue

@@ -292,27 +292,15 @@ export default {
             },
             immediate: true,
         },
-        /*
-        @TODO refactor
         options() {
-            let n = this.optionsSelected.length;
-            if (n) {
-                this.optionsSelected = [];
-                this.dataListCursorIndex = -1;
-                this.triggerModelChange();
-            }
+            this.importModel(this.value);
         },
-        */
     },
     methods: {
         importModel(model) {
-            // if (model == null) {
-            //     this.optionsSelected = [];
-            //     return;
-            // }
             let ci = -1;
             let tmp = [];
-            model = this.multiple ? model : [model];
+            model = this.multiple ? (Array.isArray(model) ? model : [model]) : [model];
             model.forEach(modelItem => {
                 let modelItemValue = this.valueObjects ? this.getOptionValue(modelItem) : modelItem;
                 let optionIndex = this.options.findIndex(optionItem => {

package/styleguide.config.js

@@ -1,10 +1,16 @@
+const path = require('path');
+const { version } = require('./package.json');
 
 module.exports = {
     components: 'src/components/ui/[A-Z]*.vue',
     require: ['goodt-framework-css'],
     title: 'UI',
-    version: require('./package.json').version,
+    version,
     styleguideDir: 'docs',
+    getComponentPathLine(componentPath) {
+        const name = path.basename(componentPath, '.vue');
+        return `import { ${name} } from 'goodteditor-ui';`;
+    },
     template: {
         head: {
             links: [

package/public/index.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <link rel="stylesheet" href="https://goodt-css.netlify.app/css/all.css" />
-        <link
-            rel="stylesheet"
-            href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
-        />
-        <link
-            rel="stylesheet"
-            href="http://cdn.materialdesignicons.com/light/0.2.63/css/materialdesignicons-light.min.css"
-        />
-        <title><%= htmlWebpackPlugin.options.title %></title>
-    </head>
-
-    <body>
-        <noscript>
-            <strong
-                >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly
-                without JavaScript enabled. Please enable it to continue.</strong
-            >
-        </noscript>
-        <div id="app"></div>
-        <!-- built files will be auto injected -->
-    </body>
-</html>