From f843b88d272605f4c9bff36227a0657774c4826c Mon Sep 17 00:00:00 2001 From: cl199793 Date: Wed, 19 Jun 2019 19:26:39 +0800 Subject: [PATCH 01/10] add avatar component --- components.json | 3 +- examples/demo-styles/avatar.scss | 29 ++++++ examples/demo-styles/index.scss | 2 + examples/docs/en-US/avatar.md | 122 ++++++++++++++++++++++ examples/docs/es/avatar.md | 122 ++++++++++++++++++++++ examples/docs/fr-FR/avatar.md | 122 ++++++++++++++++++++++ examples/docs/zh-CN/avatar.md | 125 +++++++++++++++++++++++ examples/nav.config.json | 16 +++ examples/play/index.vue | 29 +++++- packages/avatar/index.js | 8 ++ packages/avatar/src/main.vue | 97 ++++++++++++++++++ packages/theme-chalk/src/avatar.scss | 49 +++++++++ packages/theme-chalk/src/common/var.scss | 10 ++ packages/theme-chalk/src/index.scss | 1 + src/index.js | 5 +- test/unit/specs/avatar.spec.js | 15 +++ types/avatar.d.ts | 5 + types/element-ui.d.ts | 4 + 18 files changed, 760 insertions(+), 4 deletions(-) create mode 100644 examples/demo-styles/avatar.scss create mode 100644 examples/docs/en-US/avatar.md create mode 100644 examples/docs/es/avatar.md create mode 100644 examples/docs/fr-FR/avatar.md create mode 100644 examples/docs/zh-CN/avatar.md create mode 100644 packages/avatar/index.js create mode 100644 packages/avatar/src/main.vue create mode 100644 packages/theme-chalk/src/avatar.scss create mode 100644 test/unit/specs/avatar.spec.js create mode 100644 types/avatar.d.ts diff --git a/components.json b/components.json index 191b7bdc6e7..c5445d74259 100644 --- a/components.json +++ b/components.json @@ -77,5 +77,6 @@ "backtop": "./packages/backtop/index.js", "infiniteScroll": "./packages/infiniteScroll/index.js", "page-header": "./packages/page-header/index.js", - "cascader-panel": "./packages/cascader-panel/index.js" + "cascader-panel": "./packages/cascader-panel/index.js", + "avatar": "./packages/avatar/index.js" } diff --git a/examples/demo-styles/avatar.scss b/examples/demo-styles/avatar.scss new file mode 100644 index 00000000000..ac3eb54f3cb --- /dev/null +++ b/examples/demo-styles/avatar.scss @@ -0,0 +1,29 @@ +.demo-avatar { + + &.demo-basic { + text-align: center; + } + + .sub-title { + margin-bottom: 10px; + font-size: 14px; + color: #8492a6; + } + + .el-col:not(:last-child) { + border-right: 1px solid rgba(224,230,237,.5); + } + + .demo-type { + display: flex; + + >div { + flex: 1; + text-align: center; + } + + >div:not(:last-child) { + border-right: 1px solid rgba(224,230,237,.5); + } + } +} diff --git a/examples/demo-styles/index.scss b/examples/demo-styles/index.scss index f8d200f6ece..1684fb852b7 100644 --- a/examples/demo-styles/index.scss +++ b/examples/demo-styles/index.scss @@ -42,3 +42,5 @@ @import "./divider.scss"; @import "./image.scss"; @import "./infiniteScroll.scss"; +@import "./avatar.scss"; + diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md new file mode 100644 index 00000000000..d7670d136f6 --- /dev/null +++ b/examples/docs/en-US/avatar.md @@ -0,0 +1,122 @@ +## Avatar avatar + +Avatars can be used to represent people or objects. It supports images, Icons, or characters. + +### Basic + +use `shape` and `size` prop to set avatar's shape and size + +:::demo +```html + +``` +::: + +### Types + +It supports images, Icons, or characters + +:::demo +```html + +``` +::: + +### Fallback when image load error + +fallback when image load error + +:::demo +```html + + + +``` +::: + +### Customize style + +:::demo +```html + + + +``` +::: + +### Attributes + +| Attribute | Description | Type | Accepted Values | Default | +| ----------------- | -------------------------------- | --------------- | ------ | ------ | +| icon | set representation type to Icon, more info on Icon Component | string | | | +| size | set avatar size | number/string | number/large/medium/small | large | +| shape | set avatar shape | string | circle/square | circle | +| src | the address of the image for an image avatar | string | | | + +### Events + +| Event Name | Description | Parameters | +| ------ | ------------------ | -------- | +| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) | + +### Slot + +| Slot Name | Description | +| default | customize avatar content | diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md new file mode 100644 index 00000000000..d7670d136f6 --- /dev/null +++ b/examples/docs/es/avatar.md @@ -0,0 +1,122 @@ +## Avatar avatar + +Avatars can be used to represent people or objects. It supports images, Icons, or characters. + +### Basic + +use `shape` and `size` prop to set avatar's shape and size + +:::demo +```html + +``` +::: + +### Types + +It supports images, Icons, or characters + +:::demo +```html + +``` +::: + +### Fallback when image load error + +fallback when image load error + +:::demo +```html + + + +``` +::: + +### Customize style + +:::demo +```html + + + +``` +::: + +### Attributes + +| Attribute | Description | Type | Accepted Values | Default | +| ----------------- | -------------------------------- | --------------- | ------ | ------ | +| icon | set representation type to Icon, more info on Icon Component | string | | | +| size | set avatar size | number/string | number/large/medium/small | large | +| shape | set avatar shape | string | circle/square | circle | +| src | the address of the image for an image avatar | string | | | + +### Events + +| Event Name | Description | Parameters | +| ------ | ------------------ | -------- | +| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) | + +### Slot + +| Slot Name | Description | +| default | customize avatar content | diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md new file mode 100644 index 00000000000..d7670d136f6 --- /dev/null +++ b/examples/docs/fr-FR/avatar.md @@ -0,0 +1,122 @@ +## Avatar avatar + +Avatars can be used to represent people or objects. It supports images, Icons, or characters. + +### Basic + +use `shape` and `size` prop to set avatar's shape and size + +:::demo +```html + +``` +::: + +### Types + +It supports images, Icons, or characters + +:::demo +```html + +``` +::: + +### Fallback when image load error + +fallback when image load error + +:::demo +```html + + + +``` +::: + +### Customize style + +:::demo +```html + + + +``` +::: + +### Attributes + +| Attribute | Description | Type | Accepted Values | Default | +| ----------------- | -------------------------------- | --------------- | ------ | ------ | +| icon | set representation type to Icon, more info on Icon Component | string | | | +| size | set avatar size | number/string | number/large/medium/small | large | +| shape | set avatar shape | string | circle/square | circle | +| src | the address of the image for an image avatar | string | | | + +### Events + +| Event Name | Description | Parameters | +| ------ | ------------------ | -------- | +| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) | + +### Slot + +| Slot Name | Description | +| default | customize avatar content | diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md new file mode 100644 index 00000000000..e52cba32a22 --- /dev/null +++ b/examples/docs/zh-CN/avatar.md @@ -0,0 +1,125 @@ +## Avatar 头像 + +用图标、图片或者字符的形式展示用户或事物信息 + +### 基本用法 + +通过 `shape` 和 `size` 设置头像的形状和大小。 + +:::demo +```html + +``` +::: + +### 展示类型 + +支持三种类型:图标、图标和字符 + +:::demo +```html + +``` +::: + +### 图片加载失败的 fallback 行为 + +当展示类型为图片的时候,图片加载失败的 fallback 行为 + +:::demo +```html + + + +``` +::: + +### 通过 style 自定义样式 + +当展示类型为图片的时候,图片加载失败的 fallback 行为 + +:::demo +```html + + + +``` +::: + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------------- | -------------------------------- | --------------- | ------ | ------ | +| icon | 设置头像的图标类型,参考 Icon 组件 | string | | | +| size | 设置头像的大小 | number/string | number/large/medium/small | large | +| shape | 设置头像的形状 | string | circle/square | circle | +| src | 图片头像的资源地址 | string | | | + +### Events + +| 事件名 | 说明 | 回调参数 | +| ------ | ------------------ | -------- | +| error | 图片类头像加载失败的回调, 返回 false 会关闭组件默认的 fallback 行为 |(e: Event) | + +### Slot + +| 名称 | 说明 | +| ------ | ------------------ | +| default | 自定义头像展示内容 | diff --git a/examples/nav.config.json b/examples/nav.config.json index 21cd5c814d2..81fc2f020df 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -279,6 +279,10 @@ { "path": "/infiniteScroll", "title": "InfiniteScroll 无限滚动" + }, + { + "path": "/avatar", + "title": "Avatar" } ] } @@ -565,6 +569,10 @@ { "path": "/infiniteScroll", "title": "InfiniteScroll" + }, + { + "path": "/avatar", + "title": "Avatar" } ] } @@ -851,6 +859,10 @@ { "path": "/infiniteScroll", "title": "InfiniteScroll" + }, + { + "path": "/avatar", + "title": "Avatar" } ] } @@ -1137,6 +1149,10 @@ { "path": "/infiniteScroll", "title": "InfiniteScroll" + }, + { + "path": "/avatar", + "title": "Avatar" } ] } diff --git a/examples/play/index.vue b/examples/play/index.vue index 2370097d61f..c370abd920b 100644 --- a/examples/play/index.vue +++ b/examples/play/index.vue @@ -1,6 +1,19 @@ @@ -8,8 +21,20 @@ export default { data() { return { - input: 'Hello Element UI!' + input: 'Hello Element UI!', + fits: ['fill', 'contain', 'cover', 'none', 'scale-down'], + url: 'https://fuss', + user: 'lucky' }; + }, + methods: { + handler() { + return true; + }, + change() { + const { user } = this; + this.user = user === 'lucky' ? 'user' : 'lucky' + } } }; diff --git a/packages/avatar/index.js b/packages/avatar/index.js new file mode 100644 index 00000000000..36589e34d8e --- /dev/null +++ b/packages/avatar/index.js @@ -0,0 +1,8 @@ +import Avatar from './src/main'; + +/* istanbul ignore next */ +Avatar.install = function(Vue) { + Vue.component(Avatar.name, Avatar); +}; + +export default Avatar; diff --git a/packages/avatar/src/main.vue b/packages/avatar/src/main.vue new file mode 100644 index 00000000000..a58f63770e4 --- /dev/null +++ b/packages/avatar/src/main.vue @@ -0,0 +1,97 @@ + diff --git a/packages/theme-chalk/src/avatar.scss b/packages/theme-chalk/src/avatar.scss new file mode 100644 index 00000000000..151cc2095d9 --- /dev/null +++ b/packages/theme-chalk/src/avatar.scss @@ -0,0 +1,49 @@ +@import "mixins/mixins"; +@import "common/var"; + +@include b(avatar) { + display: inline-block; + box-sizing: border-box; + text-align: center; + overflow: hidden; + color: $--avatar-color; + background: $--avatar-background; + width: $--avatar-size; + height: $--avatar-size; + line-height: $--avatar-size; + + >img { + width: 100%; + height: 100%; + } + + @include m(circle) { + border-radius: 50%; + } + + @include m(square) { + border-radius: 4px; + } + + @include m(icon) { + font-size: 18px; + } + + @include m(large) { + width: $--avatar-large-size; + height: $--avatar-large-size; + line-height: $--avatar-large-size; + } + + @include m(medium) { + width: $--avatar-medium-size; + height: $--avatar-medium-size; + line-height: $--avatar-medium-size; + } + + @include m(small) { + width: $--avatar-mini-size; + height: $--avatar-mini-size; + line-height: $--avatar-mini-size; + } +} diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 38550c03e26..0bc1ac6420f 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -939,6 +939,16 @@ $--calendar-border: $--table-border !default; $--calendar-selected-background-color: #F2F8FE !default; $--calendar-cell-width: 85px !default; +/* Avatar +--------------------------*/ +$--avatar-color: #fff; +$--avatar-background: #ddd; +$--avatar-border-color-base: $--border-color-base; +$--avatar-size: 40px; +$--avatar-large-size: $--avatar-size; +$--avatar-medium-size: 36px; +$--avatar-mini-size: 28px; + /* Break-point --------------------------*/ $--sm: 768px !default; diff --git a/packages/theme-chalk/src/index.scss b/packages/theme-chalk/src/index.scss index 6ba2f6c8e33..73e2505d3a1 100644 --- a/packages/theme-chalk/src/index.scss +++ b/packages/theme-chalk/src/index.scss @@ -75,3 +75,4 @@ @import "./infiniteScroll.scss"; @import "./page-header.scss"; @import "./cascader-panel.scss"; +@import "./avatar.scss"; diff --git a/src/index.js b/src/index.js index e9f9bf2b9ac..8f2ebae2ad7 100644 --- a/src/index.js +++ b/src/index.js @@ -79,6 +79,7 @@ import Backtop from '../packages/backtop/index.js'; import InfiniteScroll from '../packages/infiniteScroll/index.js'; import PageHeader from '../packages/page-header/index.js'; import CascaderPanel from '../packages/cascader-panel/index.js'; +import Avatar from '../packages/avatar/index.js'; import locale from 'element-ui/src/locale'; import CollapseTransition from 'element-ui/src/transitions/collapse-transition'; @@ -157,6 +158,7 @@ const components = [ Backtop, PageHeader, CascaderPanel, + Avatar, CollapseTransition ]; @@ -275,5 +277,6 @@ export default { Backtop, InfiniteScroll, PageHeader, - CascaderPanel + CascaderPanel, + Avatar }; diff --git a/test/unit/specs/avatar.spec.js b/test/unit/specs/avatar.spec.js new file mode 100644 index 00000000000..df10cbe2c68 --- /dev/null +++ b/test/unit/specs/avatar.spec.js @@ -0,0 +1,15 @@ +import { createTest, destroyVM } from '../util'; +import Avatar from 'packages/avatar'; + +describe('Avatar', () => { + let vm; + afterEach(() => { + destroyVM(vm); + }); + + it('create', () => { + vm = createTest(Avatar, true); + expect(vm.$el).to.exist; + }); +}); + diff --git a/types/avatar.d.ts b/types/avatar.d.ts new file mode 100644 index 00000000000..62c4521cb0f --- /dev/null +++ b/types/avatar.d.ts @@ -0,0 +1,5 @@ +import { ElementUIComponent } from './component' + +/** Avatar Component */ +export declare class ElAvatar extends ElementUIComponent { +} diff --git a/types/element-ui.d.ts b/types/element-ui.d.ts index 072ae910266..9dbe2ef7a7b 100644 --- a/types/element-ui.d.ts +++ b/types/element-ui.d.ts @@ -77,6 +77,7 @@ import { ElImage } from './image' import { ElBacktop } from './backtop' import { ElInfiniteScroll } from './infiniteScroll' import { ElPageHeader } from './page-header' +import { ElAvatar } from './avatar' export interface InstallationOptions { locale: any, @@ -332,3 +333,6 @@ export const InfiniteScroll: PluginObject; /** PageHeader Component */ export class PageHeader extends ElPageHeader {} + +/** Avatar Component */ +export class Avatar extends ElAvatar {} From ad0115c8baf77178d79b2573225b3956a888e775 Mon Sep 17 00:00:00 2001 From: cl199793 Date: Thu, 20 Jun 2019 11:24:40 +0800 Subject: [PATCH 02/10] 1. add test 2. add types 3. refine doc 4. add img attr --- examples/docs/en-US/avatar.md | 9 --- examples/docs/es/avatar.md | 9 --- examples/docs/fr-FR/avatar.md | 9 --- examples/docs/zh-CN/avatar.md | 11 +--- examples/play/index.vue | 29 +-------- packages/avatar/src/main.vue | 6 +- packages/theme-chalk/src/avatar.scss | 6 +- packages/theme-chalk/src/common/var.scss | 2 +- test/unit/specs/avatar.spec.js | 83 +++++++++++++++++++++++- types/avatar.d.ts | 9 +++ 10 files changed, 101 insertions(+), 72 deletions(-) diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md index d7670d136f6..fe2b199f492 100644 --- a/examples/docs/en-US/avatar.md +++ b/examples/docs/en-US/avatar.md @@ -66,15 +66,6 @@ fallback when image load error fallback - ``` ::: diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md index d7670d136f6..fe19b006522 100644 --- a/examples/docs/es/avatar.md +++ b/examples/docs/es/avatar.md @@ -88,15 +88,6 @@ fallback when image load error - ``` ::: diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md index d7670d136f6..fe19b006522 100644 --- a/examples/docs/fr-FR/avatar.md +++ b/examples/docs/fr-FR/avatar.md @@ -88,15 +88,6 @@ fallback when image load error - ``` ::: diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md index e52cba32a22..30d500f5194 100644 --- a/examples/docs/zh-CN/avatar.md +++ b/examples/docs/zh-CN/avatar.md @@ -35,7 +35,7 @@ ### 展示类型 -支持三种类型:图标、图标和字符 +支持三种类型:图标、图片和字符 :::demo ```html @@ -90,15 +90,6 @@ - ``` ::: diff --git a/examples/play/index.vue b/examples/play/index.vue index c370abd920b..2370097d61f 100644 --- a/examples/play/index.vue +++ b/examples/play/index.vue @@ -1,19 +1,6 @@ @@ -21,20 +8,8 @@ export default { data() { return { - input: 'Hello Element UI!', - fits: ['fill', 'contain', 'cover', 'none', 'scale-down'], - url: 'https://fuss', - user: 'lucky' + input: 'Hello Element UI!' }; - }, - methods: { - handler() { - return true; - }, - change() { - const { user } = this; - this.user = user === 'lucky' ? 'user' : 'lucky' - } } }; diff --git a/packages/avatar/src/main.vue b/packages/avatar/src/main.vue index a58f63770e4..028830de65d 100644 --- a/packages/avatar/src/main.vue +++ b/packages/avatar/src/main.vue @@ -22,6 +22,8 @@ export default { }, icon: String, src: String, + alt: String, + srcSet: String, error: Function }, @@ -61,10 +63,10 @@ export default { } }, renderAvatar() { - const { icon, src, alt, isImageExist } = this; + const { icon, src, alt, isImageExist, srcSet } = this; if (isImageExist && src) { - return {alt}; + return {alt}; } if (icon) { diff --git a/packages/theme-chalk/src/avatar.scss b/packages/theme-chalk/src/avatar.scss index 151cc2095d9..dc57ec7beb6 100644 --- a/packages/theme-chalk/src/avatar.scss +++ b/packages/theme-chalk/src/avatar.scss @@ -42,8 +42,8 @@ } @include m(small) { - width: $--avatar-mini-size; - height: $--avatar-mini-size; - line-height: $--avatar-mini-size; + width: $--avatar-small-size; + height: $--avatar-small-size; + line-height: $--avatar-small-size; } } diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 0bc1ac6420f..968cf3151d6 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -947,7 +947,7 @@ $--avatar-border-color-base: $--border-color-base; $--avatar-size: 40px; $--avatar-large-size: $--avatar-size; $--avatar-medium-size: 36px; -$--avatar-mini-size: 28px; +$--avatar-small-size: 28px; /* Break-point --------------------------*/ diff --git a/test/unit/specs/avatar.spec.js b/test/unit/specs/avatar.spec.js index df10cbe2c68..1bb24bc60d8 100644 --- a/test/unit/specs/avatar.spec.js +++ b/test/unit/specs/avatar.spec.js @@ -1,4 +1,4 @@ -import { createTest, destroyVM } from '../util'; +import {createTest, createVue, destroyVM} from '../util'; import Avatar from 'packages/avatar'; describe('Avatar', () => { @@ -8,8 +8,87 @@ describe('Avatar', () => { }); it('create', () => { - vm = createTest(Avatar, true); + vm = createTest(Avatar); expect(vm.$el).to.exist; }); + + it('size is number', () => { + vm = createVue({ + template: ` + + + ` + }, true); + const avatarElm = vm.$el; + expect(avatarElm.style.height).to.equal('50px'); + }); + + it('size is string', () => { + vm = createVue({ + template: ` + + user + + ` + }, true); + const avatarElm = vm.$el; + expect(avatarElm.classList.contains('el-avatar--small')).to.be.true; + }); + + it('shape', () => { + vm = createVue({ + template: ` + + user + + ` + }, true); + const avatarElm = vm.$el; + expect(avatarElm.classList.contains('el-avatar--square')).to.be.true; + }); + + it('icon avatar', () => { + vm = createVue({ + template: ` + + + ` + }, true); + const avatarElm = vm.$el; + const iconELm = avatarElm.children[0]; + expect(avatarElm.classList.contains('el-avatar--icon')).to.be.true; + expect(iconELm.classList.contains('el-icon-user-solid')).to.be.true; + }); + + it('image avatar', () => { + vm = createVue({ + template: ` + + ` + }, true); + const imgElm = vm.$el.children[0]; + expect(imgElm.tagName.toUpperCase()).to.equal('IMG'); + expect(imgElm.src).to.equal('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'); + }); + + it('image fallback', (done) => { + vm = createVue({ + template: ` + + fallback + + `, + methods: { + errorHandler() { + return true; + } + } + }, true); + setTimeout(() => { + const avatarElm = vm.$el; + expect(avatarElm.textContent.trim()).to.equal('fallback'); + done(); + }, 3000); + }); }); diff --git a/types/avatar.d.ts b/types/avatar.d.ts index 62c4521cb0f..943dc2d3701 100644 --- a/types/avatar.d.ts +++ b/types/avatar.d.ts @@ -2,4 +2,13 @@ import { ElementUIComponent } from './component' /** Avatar Component */ export declare class ElAvatar extends ElementUIComponent { + icon: string; + + size: string | number; + + shape: string; + + src: string; + + error: () => false; } From a1157d02d8774e0e51ef28d79487f2b32550fd0a Mon Sep 17 00:00:00 2001 From: cl199793 Date: Thu, 20 Jun 2019 11:36:47 +0800 Subject: [PATCH 03/10] add props in types and doc --- examples/docs/en-US/avatar.md | 3 +++ examples/docs/es/avatar.md | 2 ++ examples/docs/fr-FR/avatar.md | 2 ++ examples/docs/zh-CN/avatar.md | 5 ++++- examples/nav.config.json | 8 ++++---- types/avatar.d.ts | 4 ++++ 6 files changed, 19 insertions(+), 5 deletions(-) diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md index fe2b199f492..c26179e349c 100644 --- a/examples/docs/en-US/avatar.md +++ b/examples/docs/en-US/avatar.md @@ -100,6 +100,9 @@ fallback when image load error | size | set avatar size | number/string | number/large/medium/small | large | | shape | set avatar shape | string | circle/square | circle | | src | the address of the image for an image avatar | string | | | +| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | +| alt | This attribute defines an alternative text description of the image | string | | | + ### Events diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md index fe19b006522..936bb29c734 100644 --- a/examples/docs/es/avatar.md +++ b/examples/docs/es/avatar.md @@ -100,6 +100,8 @@ fallback when image load error | size | set avatar size | number/string | number/large/medium/small | large | | shape | set avatar shape | string | circle/square | circle | | src | the address of the image for an image avatar | string | | | +| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | +| alt | This attribute defines an alternative text description of the image | string | | | ### Events diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md index fe19b006522..936bb29c734 100644 --- a/examples/docs/fr-FR/avatar.md +++ b/examples/docs/fr-FR/avatar.md @@ -100,6 +100,8 @@ fallback when image load error | size | set avatar size | number/string | number/large/medium/small | large | | shape | set avatar shape | string | circle/square | circle | | src | the address of the image for an image avatar | string | | | +| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | +| alt | This attribute defines an alternative text description of the image | string | | | ### Events diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md index 30d500f5194..c6d7ccb578e 100644 --- a/examples/docs/zh-CN/avatar.md +++ b/examples/docs/zh-CN/avatar.md @@ -1,6 +1,6 @@ ## Avatar 头像 -用图标、图片或者字符的形式展示用户或事物信息 +用图标、图片或者字符的形式展示用户或事物信息。 ### 基本用法 @@ -102,6 +102,9 @@ | size | 设置头像的大小 | number/string | number/large/medium/small | large | | shape | 设置头像的形状 | string | circle/square | circle | | src | 图片头像的资源地址 | string | | | +| srcSet | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 | string | | | +| alt | 描述图像的替换文本 | string | | | + ### Events diff --git a/examples/nav.config.json b/examples/nav.config.json index 81fc2f020df..36e3d3ac851 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -172,6 +172,10 @@ { "path": "/badge", "title": "Badge 标记" + }, + { + "path": "/avatar", + "title": "Avatar 头像" } ] }, @@ -279,10 +283,6 @@ { "path": "/infiniteScroll", "title": "InfiniteScroll 无限滚动" - }, - { - "path": "/avatar", - "title": "Avatar" } ] } diff --git a/types/avatar.d.ts b/types/avatar.d.ts index 943dc2d3701..1ffbf3cf4a3 100644 --- a/types/avatar.d.ts +++ b/types/avatar.d.ts @@ -11,4 +11,8 @@ export declare class ElAvatar extends ElementUIComponent { src: string; error: () => false; + + srcSet: string; + + alt: string; } From a6f34df653d6af4bb2edc97771627e6bf9cb0a4e Mon Sep 17 00:00:00 2001 From: cl199793 Date: Fri, 21 Jun 2019 11:08:32 +0800 Subject: [PATCH 04/10] refine how image fit its container --- examples/demo-styles/avatar.scss | 33 ++++++++++++++ examples/docs/en-US/avatar.md | 74 ++++++++++++++++++++++++++------ examples/docs/es/avatar.md | 73 +++++++++++++++++++++++++------ examples/docs/fr-FR/avatar.md | 73 +++++++++++++++++++++++++------ examples/docs/zh-CN/avatar.md | 69 +++++++++++++++++++++++------ packages/avatar/src/main.vue | 16 +++++-- test/unit/specs/avatar.spec.js | 29 +++++++++++++ types/avatar.d.ts | 2 + 8 files changed, 312 insertions(+), 57 deletions(-) diff --git a/examples/demo-styles/avatar.scss b/examples/demo-styles/avatar.scss index ac3eb54f3cb..d655db787af 100644 --- a/examples/demo-styles/avatar.scss +++ b/examples/demo-styles/avatar.scss @@ -2,6 +2,20 @@ &.demo-basic { text-align: center; + + .demo-basic--circle, .demo-basic--square { + display: flex; + justify-content: space-between; + align-items: center; + .block { + flex: 1; + } + + .block:not(:last-child) { + border-right: 1px solid rgba(224, 230, 237, 0.5); + } + } + } .sub-title { @@ -26,4 +40,23 @@ border-right: 1px solid rgba(224,230,237,.5); } } + + .demo-fit { + display: flex; + text-align: center; + justify-content: space-between; + + .block { + flex: 1; + display: flex; + flex-direction: column; + flex-grow: 0; + } + + .title { + margin-bottom: 10px; + font-size: 14px; + color: #8492a6; + } + } } diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md index c26179e349c..3a6da5d1649 100644 --- a/examples/docs/en-US/avatar.md +++ b/examples/docs/en-US/avatar.md @@ -12,24 +12,36 @@ use `shape` and `size` prop to set avatar's shape and size
circle
-
- - - - +
+
+
+ +
square
-
- - - - +
+
+
+ +
+ + ``` ::: @@ -63,9 +75,18 @@ fallback when image load error ```html + ``` ::: @@ -92,17 +113,42 @@ fallback when image load error ``` ::: +### How the image fit its container + +Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). + +:::demo +```html + + + ### Attributes | Attribute | Description | Type | Accepted Values | Default | | ----------------- | -------------------------------- | --------------- | ------ | ------ | | icon | set representation type to Icon, more info on Icon Component | string | | | -| size | set avatar size | number/string | number/large/medium/small | large | -| shape | set avatar shape | string | circle/square | circle | +| size | set avatar size | number/string | number / large / medium / small | large | +| shape | set avatar shape | string | circle / square | circle | | src | the address of the image for an image avatar | string | | | | srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | | alt | This attribute defines an alternative text description of the image | string | | | - +| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover | ### Events diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md index 936bb29c734..3a6da5d1649 100644 --- a/examples/docs/es/avatar.md +++ b/examples/docs/es/avatar.md @@ -12,24 +12,36 @@ use `shape` and `size` prop to set avatar's shape and size
circle
-
- - - - +
+
+
+ +
square
-
- - - - +
+
+
+ +
+ + ``` ::: @@ -63,7 +75,7 @@ fallback when image load error ```html ``` ::: +### How the image fit its container + +Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). + +:::demo +```html + + + ### Attributes | Attribute | Description | Type | Accepted Values | Default | | ----------------- | -------------------------------- | --------------- | ------ | ------ | | icon | set representation type to Icon, more info on Icon Component | string | | | -| size | set avatar size | number/string | number/large/medium/small | large | -| shape | set avatar shape | string | circle/square | circle | +| size | set avatar size | number/string | number / large / medium / small | large | +| shape | set avatar shape | string | circle / square | circle | | src | the address of the image for an image avatar | string | | | | srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | | alt | This attribute defines an alternative text description of the image | string | | | +| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover | ### Events diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md index 936bb29c734..3a6da5d1649 100644 --- a/examples/docs/fr-FR/avatar.md +++ b/examples/docs/fr-FR/avatar.md @@ -12,24 +12,36 @@ use `shape` and `size` prop to set avatar's shape and size
circle
-
- - - - +
+
+
+ +
square
-
- - - - +
+
+
+ +
+ + ``` ::: @@ -63,7 +75,7 @@ fallback when image load error ```html ``` ::: +### How the image fit its container + +Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). + +:::demo +```html + + + ### Attributes | Attribute | Description | Type | Accepted Values | Default | | ----------------- | -------------------------------- | --------------- | ------ | ------ | | icon | set representation type to Icon, more info on Icon Component | string | | | -| size | set avatar size | number/string | number/large/medium/small | large | -| shape | set avatar shape | string | circle/square | circle | +| size | set avatar size | number/string | number / large / medium / small | large | +| shape | set avatar shape | string | circle / square | circle | | src | the address of the image for an image avatar | string | | | | srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | | | alt | This attribute defines an alternative text description of the image | string | | | +| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover | ### Events diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md index c6d7ccb578e..4f7ac9d1a15 100644 --- a/examples/docs/zh-CN/avatar.md +++ b/examples/docs/zh-CN/avatar.md @@ -12,24 +12,36 @@
circle
-
- - - - +
+
+
+ +
square
-
- - - - +
+
+
+ +
+ + ``` ::: @@ -63,7 +75,9 @@ ```html + +``` +::: + ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | -------------------------------- | --------------- | ------ | ------ | | icon | 设置头像的图标类型,参考 Icon 组件 | string | | | -| size | 设置头像的大小 | number/string | number/large/medium/small | large | -| shape | 设置头像的形状 | string | circle/square | circle | +| size | 设置头像的大小 | number/string | number / large / medium / small | large | +| shape | 设置头像的形状 | string | circle / square | circle | | src | 图片头像的资源地址 | string | | | | srcSet | 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像 | string | | | | alt | 描述图像的替换文本 | string | | | +| fit | 当展示类型为图片的时候,设置图片如何适应容器框 | string | fill / contain / cover / none / scale-down | cover | ### Events diff --git a/packages/avatar/src/main.vue b/packages/avatar/src/main.vue index 028830de65d..3c306287b46 100644 --- a/packages/avatar/src/main.vue +++ b/packages/avatar/src/main.vue @@ -9,7 +9,6 @@ export default { if (typeof val === 'string') { return ['large', 'medium', 'small'].includes(val); } - return typeof val === 'number'; } }, @@ -24,7 +23,11 @@ export default { src: String, alt: String, srcSet: String, - error: Function + error: Function, + fit: { + type: String, + default: 'cover' + } }, data() { @@ -63,10 +66,15 @@ export default { } }, renderAvatar() { - const { icon, src, alt, isImageExist, srcSet } = this; + const { icon, src, alt, isImageExist, srcSet, fit } = this; if (isImageExist && src) { - return {alt}; + return {alt}; } if (icon) { diff --git a/test/unit/specs/avatar.spec.js b/test/unit/specs/avatar.spec.js index 1bb24bc60d8..aabcd422765 100644 --- a/test/unit/specs/avatar.spec.js +++ b/test/unit/specs/avatar.spec.js @@ -90,5 +90,34 @@ describe('Avatar', () => { done(); }, 3000); }); + + it('image fit', (done) => { + vm = createVue({ + template: ` +
+ + +
+ + `, + data() { + return { + fits: ['fill', 'contain', 'cover', 'none', 'scale-down'], + url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' + }; + } + }, true); + setTimeout(() => { + const containerElm = vm.$el; + expect(containerElm.children[0].children[0].style.objectFit).to.equal('cover'); + expect(containerElm.children[1].children[0].style.objectFit).to.equal('fill'); + expect(containerElm.children[2].children[0].style.objectFit).to.equal('contain'); + expect(containerElm.children[3].children[0].style.objectFit).to.equal('cover'); + expect(containerElm.children[4].children[0].style.objectFit).to.equal('none'); + expect(containerElm.children[5].children[0].style.objectFit).to.equal('scale-down'); + + done(); + }, 3000); + }); }); diff --git a/types/avatar.d.ts b/types/avatar.d.ts index 1ffbf3cf4a3..4002e0e3108 100644 --- a/types/avatar.d.ts +++ b/types/avatar.d.ts @@ -15,4 +15,6 @@ export declare class ElAvatar extends ElementUIComponent { srcSet: string; alt: string; + + fit: string; } From ff72c689a6ab53245678254f0dfb6b3d33e61e7b Mon Sep 17 00:00:00 2001 From: cl199793 Date: Fri, 21 Jun 2019 11:19:54 +0800 Subject: [PATCH 05/10] fix doc --- examples/docs/en-US/avatar.md | 4 ++-- examples/docs/es/avatar.md | 4 ++-- examples/docs/fr-FR/avatar.md | 4 ++-- examples/docs/zh-CN/avatar.md | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md index 3a6da5d1649..e803bf3ed37 100644 --- a/examples/docs/en-US/avatar.md +++ b/examples/docs/en-US/avatar.md @@ -22,9 +22,9 @@ use `shape` and `size` prop to set avatar's shape and size
square
-
+
- +
diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md index 3a6da5d1649..e803bf3ed37 100644 --- a/examples/docs/es/avatar.md +++ b/examples/docs/es/avatar.md @@ -22,9 +22,9 @@ use `shape` and `size` prop to set avatar's shape and size
square
-
+
- +
diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md index 3a6da5d1649..e803bf3ed37 100644 --- a/examples/docs/fr-FR/avatar.md +++ b/examples/docs/fr-FR/avatar.md @@ -22,9 +22,9 @@ use `shape` and `size` prop to set avatar's shape and size
square
-
+
- +
diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md index 4f7ac9d1a15..9a21799ccf3 100644 --- a/examples/docs/zh-CN/avatar.md +++ b/examples/docs/zh-CN/avatar.md @@ -22,9 +22,9 @@
square
-
+
- +
From fe23e894442018c10e2b9dadf461c76b276c6eea Mon Sep 17 00:00:00 2001 From: cl199793 Date: Fri, 21 Jun 2019 12:04:43 +0800 Subject: [PATCH 06/10] refine doc --- examples/docs/en-US/avatar.md | 11 ++++++++--- examples/docs/es/avatar.md | 11 ++++++++--- examples/docs/fr-FR/avatar.md | 11 ++++++++--- examples/docs/zh-CN/avatar.md | 6 +++--- 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md index e803bf3ed37..f6562080c5a 100644 --- a/examples/docs/en-US/avatar.md +++ b/examples/docs/en-US/avatar.md @@ -34,8 +34,8 @@ use `shape` and `size` prop to set avatar's shape and size export default { data () { return { - circleUrl: "https://cube.elemecdn.com/4/c5/0e76b9bac7cbc1c9434e4388988a1png.png", - squareUrl: "https://cube.elemecdn.com/1/97/ddb837f503784988e9e34fa7febe8png.png", + circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", + squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png", sizeList: ["large", "medium", "small"] } } @@ -75,7 +75,9 @@ fallback when image load error ```html +``` +::: + ### Attributes | Attribute | Description | Type | Accepted Values | Default | diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md index e803bf3ed37..f6562080c5a 100644 --- a/examples/docs/es/avatar.md +++ b/examples/docs/es/avatar.md @@ -34,8 +34,8 @@ use `shape` and `size` prop to set avatar's shape and size export default { data () { return { - circleUrl: "https://cube.elemecdn.com/4/c5/0e76b9bac7cbc1c9434e4388988a1png.png", - squareUrl: "https://cube.elemecdn.com/1/97/ddb837f503784988e9e34fa7febe8png.png", + circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", + squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png", sizeList: ["large", "medium", "small"] } } @@ -75,7 +75,9 @@ fallback when image load error ```html +``` +::: + ### Attributes | Attribute | Description | Type | Accepted Values | Default | diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md index e803bf3ed37..f6562080c5a 100644 --- a/examples/docs/fr-FR/avatar.md +++ b/examples/docs/fr-FR/avatar.md @@ -34,8 +34,8 @@ use `shape` and `size` prop to set avatar's shape and size export default { data () { return { - circleUrl: "https://cube.elemecdn.com/4/c5/0e76b9bac7cbc1c9434e4388988a1png.png", - squareUrl: "https://cube.elemecdn.com/1/97/ddb837f503784988e9e34fa7febe8png.png", + circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", + squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png", sizeList: ["large", "medium", "small"] } } @@ -75,7 +75,9 @@ fallback when image load error ```html +``` +::: + ### Attributes | Attribute | Description | Type | Accepted Values | Default | diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md index 9a21799ccf3..7df594d5459 100644 --- a/examples/docs/zh-CN/avatar.md +++ b/examples/docs/zh-CN/avatar.md @@ -34,8 +34,8 @@ export default { data () { return { - circleUrl: "https://cube.elemecdn.com/4/c5/0e76b9bac7cbc1c9434e4388988a1png.png", - squareUrl: "https://cube.elemecdn.com/1/97/ddb837f503784988e9e34fa7febe8png.png", + circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", + squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png", sizeList: ["large", "medium", "small"] } } @@ -76,7 +76,7 @@ From ea23d489c321058bea52d35e82226a0985e75af5 Mon Sep 17 00:00:00 2001 From: cl199793 Date: Fri, 21 Jun 2019 14:16:04 +0800 Subject: [PATCH 07/10] change default background color --- packages/theme-chalk/src/common/var.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 968cf3151d6..95e34716d19 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -942,7 +942,7 @@ $--calendar-cell-width: 85px !default; /* Avatar --------------------------*/ $--avatar-color: #fff; -$--avatar-background: #ddd; +$--avatar-background: #C0C4CC; $--avatar-border-color-base: $--border-color-base; $--avatar-size: 40px; $--avatar-large-size: $--avatar-size; From 4e8597508cea7ff2c961dee556757cca3d794f85 Mon Sep 17 00:00:00 2001 From: cl199793 Date: Fri, 21 Jun 2019 15:58:05 +0800 Subject: [PATCH 08/10] remote style demo from doc --- examples/docs/en-US/avatar.md | 22 ---------------------- examples/docs/es/avatar.md | 22 ---------------------- examples/docs/fr-FR/avatar.md | 22 ---------------------- examples/docs/zh-CN/avatar.md | 15 --------------- 4 files changed, 81 deletions(-) diff --git a/examples/docs/en-US/avatar.md b/examples/docs/en-US/avatar.md index f6562080c5a..99e91980d85 100644 --- a/examples/docs/en-US/avatar.md +++ b/examples/docs/en-US/avatar.md @@ -93,28 +93,6 @@ fallback when image load error ``` ::: -### Customize style - -:::demo -```html - - - -``` -::: - ### How the image fit its container Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/examples/docs/es/avatar.md b/examples/docs/es/avatar.md index f6562080c5a..99e91980d85 100644 --- a/examples/docs/es/avatar.md +++ b/examples/docs/es/avatar.md @@ -93,28 +93,6 @@ fallback when image load error ``` ::: -### Customize style - -:::demo -```html - - - -``` -::: - ### How the image fit its container Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/examples/docs/fr-FR/avatar.md b/examples/docs/fr-FR/avatar.md index f6562080c5a..99e91980d85 100644 --- a/examples/docs/fr-FR/avatar.md +++ b/examples/docs/fr-FR/avatar.md @@ -93,28 +93,6 @@ fallback when image load error ``` ::: -### Customize style - -:::demo -```html - - - -``` -::: - ### How the image fit its container Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/examples/docs/zh-CN/avatar.md b/examples/docs/zh-CN/avatar.md index 7df594d5459..e0b5d2f6b1d 100644 --- a/examples/docs/zh-CN/avatar.md +++ b/examples/docs/zh-CN/avatar.md @@ -93,21 +93,6 @@ ``` ::: -### 通过 style 自定义样式 - -当展示类型为图片的时候,图片加载失败的 fallback 行为 - -:::demo -```html - - -``` -::: - ### 图片如何适应容器框 当展示类型为图片的时候,使用 `fit` 属性定义图片如何适应容器框,同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。 From 74c4623cf983dbd0772ae62eb26414247a6b13c9 Mon Sep 17 00:00:00 2001 From: cl199793 Date: Mon, 24 Jun 2019 15:20:40 +0800 Subject: [PATCH 09/10] add theme --- examples/components/theme/components-preview.vue | 6 +++++- packages/theme-chalk/src/common/var.scss | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/examples/components/theme/components-preview.vue b/examples/components/theme/components-preview.vue index 5e84f3050a6..6eaa4274445 100644 --- a/examples/components/theme/components-preview.vue +++ b/examples/components/theme/components-preview.vue @@ -140,7 +140,7 @@

Rate

- + +

Avatar

+ + +