goodteditor-ui 1.0.11 → 1.0.12

package/src/components/ui/Avatar.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="ui-avatar" :style="cssStyle">
+        <img
+            class="ui-avatar__img"
+            :src="src"
+            :alt="isDoneState ? alt : ''"
+            @error="onImageError"
+            @load="onImageLoad"
+            v-if="isLoadingState || isDoneState"
+        />
+        <div class="ui-avatar__alt" v-if="isErrorState">
+            <!--
+            @slot Alternative content slot (displayed if no image provided)
+            @binding {string} alt       alternative text
+            @binding {string} abbr      alternative text abbr
+            -->
+            <slot v-bind="{ alt, abbr }">
+                <b class="ui-avatar__abbr">{{ abbr }}</b>
+            </slot>
+        </div>
+        <div class="ui-avatar__loading" v-else-if="isLoadingState">
+            <!--
+            @slot Loading content slot 
+            -->
+            <slot name="loading">
+                <div class="preloader color-inherit"></div>
+            </slot>
+        </div>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-avatar {
+    --size: 2rem;
+    --alt-scale: 0.4;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    &__abbr {
+        font-size: calc(var(--size) * var(--alt-scale));
+        line-height: 1;
+    }
+    &__img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    &__alt,
+    &__loading {
+        position: absolute;
+    }
+}
+</style>
+<script>
+const State = {
+    LOADING: 'loading',
+    ERROR: 'error',
+    DONE: 'done',
+};
+export default {
+    props: {
+        /**
+         * Avatar src url
+         */
+        src: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Alternative text
+         */
+        alt: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Color (any web color format)
+         */
+        color: {
+            type: String,
+            default: '#fff',
+        },
+        /**
+         * Background color (any web color format)
+         */
+        background: {
+            type: String,
+            default: '#999',
+        },
+        /**
+         * Whether the avatar should be around
+         */
+        round: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Defines avatar's size (any web size)
+         */
+        size: {
+            type: String,
+            default: '2rem',
+        },
+    },
+    data: () => ({ state: State.LOADING }),
+    computed: {
+        /**
+         * @return {boolean}
+         */
+        isLoadingState() {
+            return this.state === State.LOADING;
+        },
+        /**
+         * @return {boolean}
+         */
+        isErrorState() {
+            return this.state === State.ERROR;
+        },
+        /**
+         * @return {boolean}
+         */
+        isDoneState() {
+            return this.state === State.DONE;
+        },
+        /**
+         * @return {object}
+         */
+        cssClass() {
+            return { 'ui-avatar--round': this.round };
+        },
+        /**
+         * @return {object}
+         */
+        cssStyle() {
+            const { size, color, round, background } = this;
+            const borderRadius = round ? '50%' : 0;
+            return { '--size': size, height: size, color, background, borderRadius };
+        },
+        /**
+         * @return {string}
+         */
+        abbr() {
+            const str = this.alt ?? '';
+            return str
+                .split(' ')
+                .map(s => (s.length ? s[0].toUpperCase() : ''))
+                .join('');
+        },
+    },
+    watch: {
+        src() {
+            this.state = State.LOADING;
+        },
+    },
+    methods: {
+        onImageError(event) {
+            this.state = State.ERROR;
+            /**
+             * Error event
+             * @property {Event} event
+             */
+            this.$emit('error', event);
+        },
+        onImageLoad(event) {
+            this.state = State.DONE;
+            /**
+             * Load event
+             * @property {Event} event
+             */
+            this.$emit('load', event);
+        },
+    },
+};
+</script>

package/src/components/ui/Badge.md

@@ -1,20 +1,20 @@
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-badge>badge</ui-badge>
-        <ui-badge theme="success" removable @remove="onRemove">badge</ui-badge>
-    </div>
-</template>
-<script>
-import UiBadge from './Badge.vue';
-
-export default {
-    components: { UiBadge },
-    methods: {
-        onRemove() {
-            alert('remove badge');
-        },
-    },
-};
-</script>
-```
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-badge>badge</ui-badge>
+        <ui-badge theme="success" removable @remove="onRemove">badge</ui-badge>
+    </div>
+</template>
+<script>
+import UiBadge from './Badge.vue';
+
+export default {
+    components: { UiBadge },
+    methods: {
+        onRemove() {
+            alert('remove badge');
+        },
+    },
+};
+</script>
+```

package/src/components/ui/Badge.vue

@@ -1,75 +1,75 @@
-<template>
-    <div class="ui-badge badge" :class="cssClass">
-        <!-- @slot Content slot -->
-        <slot></slot>
-        <!-- 
-        @slot Custom 'remove' content (icon, button etc)
-        @binding {function} remove  remove function 
-        -->
-        <slot name="remove" v-if="removable" :remove="onRemove">
-            <i class="mdi mdi-close text-small mar-left-2 cursor-pointer" @click="onRemove"></i>
-        </slot>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-badge {
-    white-space: normal;
-    overflow-wrap: break-word;
-    word-break: break-word;
-}
-</style>
-<script>
-export default {
-    props: {
-        /**
-         * Size of the badge
-         * @values '', xsmall, small, large
-         */
-        size: {
-            type: String,
-            default: '',
-            validator(val) {
-                return ['', 'xsmall', 'small', 'large'].indexOf(val) >= 0;
-            },
-        },
-        /**
-         * Theme of the badge
-         * @values '', primary, success, warn, error, misc
-         */
-        theme: {
-            type: String,
-            default: '',
-            validator(val) {
-                return ['', 'primary', 'success', 'warn', 'error', 'misc'].indexOf(val) >= 0;
-            },
-        },
-        /**
-         * Whether the badge has a remove <slot>
-         */
-        removable: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    computed: {
-        cssClass() {
-            let o = {};
-            if (this.size) {
-                o[`text-${this.size}`] = true;
-            }
-            if (this.theme) {
-                o[`badge-${this.theme}`] = true;
-            }
-            return o;
-        },
-    },
-    methods: {
-        onRemove() {
-            /**
-             * Remove event, emitted when close method is invoked
-             */
-            this.$emit('remove');
-        },
-    },
-};
-</script>
+<template>
+    <div class="ui-badge badge" :class="cssClass">
+        <!-- @slot Content slot -->
+        <slot></slot>
+        <!-- 
+        @slot Custom 'remove' content (icon, button etc)
+        @binding {function} remove  remove function 
+        -->
+        <slot name="remove" v-if="removable" :remove="onRemove">
+            <i class="mdi mdi-close text-small mar-left-2 cursor-pointer" @click="onRemove"></i>
+        </slot>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-badge {
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+</style>
+<script>
+export default {
+    props: {
+        /**
+         * Size of the badge
+         * @values '', xsmall, small, large
+         */
+        size: {
+            type: String,
+            default: '',
+            validator(val) {
+                return ['', 'xsmall', 'small', 'large'].indexOf(val) >= 0;
+            },
+        },
+        /**
+         * Theme of the badge
+         * @values '', primary, success, warn, error, misc
+         */
+        theme: {
+            type: String,
+            default: '',
+            validator(val) {
+                return ['', 'primary', 'success', 'warn', 'error', 'misc'].indexOf(val) >= 0;
+            },
+        },
+        /**
+         * Whether the badge has a remove <slot>
+         */
+        removable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        cssClass() {
+            let o = {};
+            if (this.size) {
+                o[`text-${this.size}`] = true;
+            }
+            if (this.theme) {
+                o[`badge-${this.theme}`] = true;
+            }
+            return o;
+        },
+    },
+    methods: {
+        onRemove() {
+            /**
+             * Remove event, emitted when close method is invoked
+             */
+            this.$emit('remove');
+        },
+    },
+};
+</script>

package/src/components/ui/Collapse.md

@@ -1,90 +1,90 @@
-Example using <mark>header</mark> <mark>icon-\*</mark> slots
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-collapse v-bind="props">
-            <template #header="{ toggle }">
-                <h3 class="last cursor-pointer" @click="toggle">My header</h3>
-            </template>
-            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</div>
-        </ui-collapse>
-    </div>
-</template>
-<script>
-import UiCollapse from './Collapse.vue';
-
-export default {
-    components: { UiCollapse },
-    data() {
-        return {
-            props: {
-                visible: true,
-                icon: true,
-            },
-        };
-    },
-};
-</script>
-```
-
-Example using <mark>heading</mark> slot
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-collapse class="ui-collapse-custom" v-bind="props">
-            <template #heading="{ isOpen, toggle }">
-                <div
-                    class="ui-collapse-custom-heading pad-v-3 pad-h-5 cursor-pointer u-select-none pos-rel"
-                    :class="{ 'color-primary': isOpen, 'bg-primary-focus': isOpen }"
-                    @click="toggle"
-                >
-                    <div class="row row-collapse">
-                        <div class="col col-vmid">My header</div>
-                        <div class="col col-auto col-vmid">
-                            <div class="icon w-auto pull-left">
-                                <i
-                                    class="mdi mdi-chevron-right"
-                                    :class="{ 'mdi-rotate-90': isOpen }"
-                                ></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-            <div class="pad-5">
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
-                <p class="last">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.
-                </p>
-            </div>
-        </ui-collapse>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-collapse-custom {
-    overflow: hidden;
-    border-radius: var(--border-radius);
-    border: 1px solid var(--color-grey-light);
-}
-.ui-collapse-custom-heading {
-    transition: all 0.5s ease;
-}
-</style>
-<script>
-import UiCollapse from './Collapse.vue';
-
-export default {
-    components: { UiCollapse },
-    data() {
-        return {
-            props: {},
-        };
-    },
-};
-</script>
-```
+Example using <mark>header</mark> <mark>icon-\*</mark> slots
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-collapse v-bind="props">
+            <template #header="{ toggle }">
+                <h3 class="last cursor-pointer" @click="toggle">My header</h3>
+            </template>
+            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</div>
+        </ui-collapse>
+    </div>
+</template>
+<script>
+import UiCollapse from './Collapse.vue';
+
+export default {
+    components: { UiCollapse },
+    data() {
+        return {
+            props: {
+                visible: true,
+                icon: true,
+            },
+        };
+    },
+};
+</script>
+```
+
+Example using <mark>heading</mark> slot
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-collapse class="ui-collapse-custom" v-bind="props">
+            <template #heading="{ isOpen, toggle }">
+                <div
+                    class="ui-collapse-custom-heading pad-v-3 pad-h-5 cursor-pointer u-select-none pos-rel"
+                    :class="{ 'color-primary': isOpen, 'bg-primary-focus': isOpen }"
+                    @click="toggle"
+                >
+                    <div class="row row-collapse">
+                        <div class="col col-vmid">My header</div>
+                        <div class="col col-auto col-vmid">
+                            <div class="icon w-auto pull-left">
+                                <i
+                                    class="mdi mdi-chevron-right"
+                                    :class="{ 'mdi-rotate-90': isOpen }"
+                                ></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <div class="pad-5">
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.</p>
+                <p class="last">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, natus.
+                </p>
+            </div>
+        </ui-collapse>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-collapse-custom {
+    overflow: hidden;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--color-grey-light);
+}
+.ui-collapse-custom-heading {
+    transition: all 0.5s ease;
+}
+</style>
+<script>
+import UiCollapse from './Collapse.vue';
+
+export default {
+    components: { UiCollapse },
+    data() {
+        return {
+            props: {},
+        };
+    },
+};
+</script>
+```