goodteditor-ui 1.0.21 → 1.0.23

package/src/components/ui/Avatar.vue

@@ -1,177 +1,180 @@
-<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>
+<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: {
+            handler(val) {
+                this.state = val ? State.LOADING : State.ERROR;
+            },
+            immediate: true,
+        },
+    },
+    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>