goodteditor-ui 1.0.2 → 1.0.6

package/package.json

@@ -1,20 +1,24 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.2",
+    "version": "1.0.6",
     "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",

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.vue

@@ -21,6 +21,7 @@
     &-input {
         cursor: pointer;
         overflow: hidden;
+        opacity: 0;
         &::file-selector-button {
             width: 100%;
             height: 100%;

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/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/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>