From f8549e90845fa7b28a38fb879dabdd024f68ed88 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 17 Aug 2016 13:53:56 +0800 Subject: [PATCH 1/4] Add badge component --- components.json | 3 + examples/app.vue | 5 +- examples/docs/badge.md | 139 ++++++++++++++++++++++ examples/nav.config.json | 6 + examples/route.config.js | 6 +- packages/badge/cooking.conf.js | 31 +++++ packages/badge/index.js | 7 ++ packages/badge/package.json | 15 +++ packages/badge/src/main.vue | 34 ++++++ packages/dropdown/src/dropdown.vue | 4 +- packages/theme-default/src/badge.css | 40 +++++++ packages/theme-default/src/common/var.css | 8 ++ packages/theme-default/src/index.css | 1 + 13 files changed, 292 insertions(+), 7 deletions(-) create mode 100644 examples/docs/badge.md create mode 100644 packages/badge/cooking.conf.js create mode 100644 packages/badge/index.js create mode 100644 packages/badge/package.json create mode 100644 packages/badge/src/main.vue create mode 100644 packages/theme-default/src/badge.css diff --git a/components.json b/components.json index 1aedb8f28..ea6cfbec6 100644 --- a/components.json +++ b/components.json @@ -148,5 +148,8 @@ ], "message": [ "./packages/message/index.js" + ], + "badge": [ + "./packages/badge/index.js" ] } diff --git a/examples/app.vue b/examples/app.vue index 8a9959f0a..6ba1d6c38 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -11,6 +11,7 @@ } body { + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; overflow: auto; } @@ -299,10 +300,10 @@
-

{{ $route.title || 'element 后台组件' }}

+

{{ $route.meta.title || 'element 后台组件' }}

-

{{ $route.description }}

+

{{ $route.meta.description }}

diff --git a/examples/docs/badge.md b/examples/docs/badge.md new file mode 100644 index 000000000..c5343ed46 --- /dev/null +++ b/examples/docs/badge.md @@ -0,0 +1,139 @@ +## 基础用法 +展示新消息数量 + + + + + 评论 + + + 回复 + + + + + + 评论 + + + + 回复 + + + + + + +```html + + 评论 + + + 回复 + + + + + 评论 + + + + 回复 + + + +``` + +## 最大值 +可自定义最大值 + + + + + 评论 + + + 回复 + + + + +```html + + 评论 + + + 回复 + +``` + + +## 自定义内容 +可以显示数字外的文本内容 + + + + + 评论 + + + 回复 + + + + +```html + + 评论 + + + 回复 + +``` + +## 小红点 +以红点的形式标注需要关注的内容 + + + + 数据查询 + + + + + + +```html +数据查询 + + + +``` + + + +## API +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | 显示值 | string|number | | | +| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | | | +| dot | 小圆点 | boolean | | false | diff --git a/examples/nav.config.json b/examples/nav.config.json index ed886eeb5..94e0f2e3d 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -222,6 +222,12 @@ "path": "/tree", "name": "tree (tree)", "title": "tree" + }, + { + "path": "/badge", + "name": "标记 (badge)", + "title": " Badge 标记", + "description": "出现在按钮、图标旁的数字或状态标记" } ] } diff --git a/examples/route.config.js b/examples/route.config.js index f9afe52d0..04f2b87a6 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -10,8 +10,10 @@ const registerRoute = (config) => { route.push({ path: page.path, - title: page.title || page.name, - description: page.description, + meta: { + title: page.title || page.name, + description: page.description + }, component: component.default || component }); }) diff --git a/packages/badge/cooking.conf.js b/packages/badge/cooking.conf.js new file mode 100644 index 000000000..780ce4ffe --- /dev/null +++ b/packages/badge/cooking.conf.js @@ -0,0 +1,31 @@ +var cooking = require('cooking'); +var path = require('path'); + +cooking.set({ + entry: { + index: path.join(__dirname, 'index.js') + }, + dist: path.join(__dirname, 'lib'), + template: false, + format: 'umd', + moduleName: 'ElBadge', + extractCSS: 'style.css', + + extends: ['vue', 'saladcss'] +}); + +cooking.add('resolve.alias', { + 'main': path.join(__dirname, '../../src'), + 'packages': path.join(__dirname, '../../packages') +}); + +cooking.add('externals', { + vue: { + root: 'Vue', + commonjs: 'vue', + commonjs2: 'vue', + amd: 'vue' + } +}); + +module.exports = cooking.resolve(); diff --git a/packages/badge/index.js b/packages/badge/index.js new file mode 100644 index 000000000..114c31467 --- /dev/null +++ b/packages/badge/index.js @@ -0,0 +1,7 @@ +const Badge = require('./src/main'); + +Badge.install = function(Vue) { + Vue.component(Badge.name, Badge); +}; + +module.exports = Badge; diff --git a/packages/badge/package.json b/packages/badge/package.json new file mode 100644 index 000000000..01c8ba404 --- /dev/null +++ b/packages/badge/package.json @@ -0,0 +1,15 @@ +{ + "name": "el-badge", + "version": "0.0.0", + "description": "A badge component for Vue.js.", + "keywords": [ + "element", + "vue", + "component" + ], + "main": "./lib/index.js", + "repository": "https://github.com/element-component/element/tree/master/packages/badge", + "author": "elemefe", + "license": "MIT", + "dependencies": {} +} diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue new file mode 100644 index 000000000..571716394 --- /dev/null +++ b/packages/badge/src/main.vue @@ -0,0 +1,34 @@ + + + diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue index 6cefa8340..b44b57578 100644 --- a/packages/dropdown/src/dropdown.vue +++ b/packages/dropdown/src/dropdown.vue @@ -23,11 +23,9 @@ + @mouseleave.native="handleMouseLeave"> diff --git a/packages/theme-default/src/badge.css b/packages/theme-default/src/badge.css new file mode 100644 index 000000000..e9c7af655 --- /dev/null +++ b/packages/theme-default/src/badge.css @@ -0,0 +1,40 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b badge { + position: relative; + vertical-align: middle; + display: inline-block; + + @e content { + background-color: var(--badge-fill); + border-radius: var(--badge-radius); + color: #fff; + display: inline-block; + font-size: var(--badge-font-size); + height: var(--badge-size); + line-height: var(--badge-size); + padding: 0 var(--badge-padding); + text-align: center; + white-space: nowrap; + border:1px solid #fff; + + @when fixed { + position: absolute 0 calc(var(--badge-size) / 2 + 1) * *; + transform: translateY(-50%) translateX(100%); + + @when dot { + right: 5px; + } + } + + @when dot { + size: 8px 8px; + padding: 0; + right: 0; + border-radius: 50%; + } + } + } +} diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css index 1eaf69414..cdf06b992 100644 --- a/packages/theme-default/src/common/var.css +++ b/packages/theme-default/src/common/var.css @@ -353,4 +353,12 @@ --dropdown-menu-box-shadow: 0 0 6px 0 rgba(0,0,0,.12), 0 2px 4px 0 rgba(0,0,0,.12); --dropdown-menuItem-hover-fill: #e5e9f2; --dropdown-menuItem-hover-color: #475669; + + /* Badge + -------------------------- */ + --badge-fill: var(--color-danger); + --badge-radius: 10px; + --badge-font-size: 12px; + --badge-padding: 6px; + --badge-size: 18px; } diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css index 806a04761..9473e9a02 100644 --- a/packages/theme-default/src/index.css +++ b/packages/theme-default/src/index.css @@ -32,3 +32,4 @@ @import "./row.css"; @import "./col.css"; @import "./spinner.css"; +@import "./badge.css"; From cc0934d89b4f4fb3f91857416f195b3d8b98c7e3 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 17 Aug 2016 14:03:40 +0800 Subject: [PATCH 2/4] Fix dot fix style --- packages/badge/src/main.vue | 2 ++ packages/theme-default/src/badge.css | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue index 571716394..6db749462 100644 --- a/packages/badge/src/main.vue +++ b/packages/badge/src/main.vue @@ -20,6 +20,8 @@ export default { computed: { content() { + if (this.dot) return; + const value = this.value; const max = this.max; diff --git a/packages/theme-default/src/badge.css b/packages/theme-default/src/badge.css index e9c7af655..1ee409e7f 100644 --- a/packages/theme-default/src/badge.css +++ b/packages/theme-default/src/badge.css @@ -18,7 +18,7 @@ padding: 0 var(--badge-padding); text-align: center; white-space: nowrap; - border:1px solid #fff; + border: 1px solid #fff; @when fixed { position: absolute 0 calc(var(--badge-size) / 2 + 1) * *; From f0503c87a3d577e5443942b2dcb6373540e1b2bb Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 17 Aug 2016 14:16:15 +0800 Subject: [PATCH 3/4] badge: dot => isDot --- examples/docs/badge.md | 12 ++++++------ packages/badge/src/main.vue | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/examples/docs/badge.md b/examples/docs/badge.md index c5343ed46..0935abe02 100644 --- a/examples/docs/badge.md +++ b/examples/docs/badge.md @@ -96,16 +96,16 @@ - 数据查询 - + 数据查询 + ```html -数据查询 - +数据查询 + ``` @@ -134,6 +134,6 @@ ## API | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | -| value | 显示值 | string|number | | | +| value | 显示值 | string, number | | | | max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | | | -| dot | 小圆点 | boolean | | false | +| is-dot | 小圆点 | boolean | | false | diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue index 6db749462..e42aa79e6 100644 --- a/packages/badge/src/main.vue +++ b/packages/badge/src/main.vue @@ -4,7 +4,7 @@ + :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }" />
@@ -15,12 +15,12 @@ export default { props: { value: {}, max: Number, - dot: Boolean + isDot: Boolean }, computed: { content() { - if (this.dot) return; + if (this.isDot) return; const value = this.value; const max = this.max; From 80ae8286392956939580c41ef92b40a0eaa15c13 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Wed, 17 Aug 2016 17:58:26 +0800 Subject: [PATCH 4/4] update input && input-group --- components.json | 3 - examples/docs/input.md | 100 ++++++------------ packages/input-group/index.js | 7 -- packages/input/index.js | 2 - packages/input/src/input-group.vue | 20 ---- packages/input/src/input.vue | 18 +++- packages/theme-default/src/common/var.css | 2 +- .../theme-default/src/input-recommend.css | 29 ----- packages/theme-default/src/input.css | 80 ++++++++------ src/index.js | 11 +- 10 files changed, 102 insertions(+), 170 deletions(-) delete mode 100644 packages/input-group/index.js delete mode 100644 packages/input/src/input-group.vue delete mode 100644 packages/theme-default/src/input-recommend.css diff --git a/components.json b/components.json index 11cf59d0b..9375aa786 100644 --- a/components.json +++ b/components.json @@ -32,9 +32,6 @@ "input-number": [ "./packages/input-number/index.js" ], - "input-group": [ - "./packages/input-group/index.js" - ], "radio": [ "./packages/radio/index.js" ], diff --git a/examples/docs/input.md b/examples/docs/input.md index b869f76e6..724f36466 100644 --- a/examples/docs/input.md +++ b/examples/docs/input.md @@ -9,7 +9,8 @@ input4: '', input5: '', input6: '', - textarea: '' + textarea: '', + select: '' }; } }; @@ -28,6 +29,9 @@ .el-textarea { width: 414px; } + .el-input-group { + min-width: 260px; + } .el-input-group + .el-input-group { margin-top: 15px; } @@ -82,22 +86,6 @@ ``` - - ## Input 图标
@@ -118,76 +106,54 @@ ## Input Group -前置和后置元素可以是任何东西， 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。 - ### 后置元素
- - - - .com - + + +
```html - - - - .com - + + + ``` ### 前置元素
- - 按钮 - - - + + +
```html - - 按钮 - - - + + + ``` ### 前置和后置元素
- - -
  • 选项一
    • -
  • 选项二
    • -
  • 选项三
    • -
  • 选项四
    • -     - - 搜索 -     + + + + + + + +
    ```html - - -
  • 选项一
    • -
  • 选项二
    • -
  • 选项三
    • -
  • 选项四
    • -     - - 搜索 -     + + + + + + + + ``` ## 尺寸 diff --git a/packages/input-group/index.js b/packages/input-group/index.js deleted file mode 100644 index 66500245c..000000000 --- a/packages/input-group/index.js +++ /dev/null @@ -1,7 +0,0 @@ -const ElInputGroup = require('../input/src/input-group'); - -ElInputGroup.install = function(Vue) { - Vue.component(ElInputGroup.name, ElInputGroup); -}; - -module.exports = ElInputGroup; diff --git a/packages/input/index.js b/packages/input/index.js index eaf673150..d57c96661 100644 --- a/packages/input/index.js +++ b/packages/input/index.js @@ -1,9 +1,7 @@ const ElInput = require('./src/input'); -const ElInputGroup = require('./src/input-group'); ElInput.install = function(Vue) { Vue.component(ElInput.name, ElInput); - Vue.component(ElInputGroup.name, ElInputGroup); }; module.exports = ElInput; diff --git a/packages/input/src/input-group.vue b/packages/input/src/input-group.vue deleted file mode 100644 index 0370addbe..000000000 --- a/packages/input/src/input-group.vue +++ /dev/null @@ -1,20 +0,0 @@ - - diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue index a8fc39e85..5f946975e 100644 --- a/packages/input/src/input.vue +++ b/packages/input/src/input.vue @@ -2,11 +2,16 @@
    diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css index 8bf6fddcc..0fd174f67 100644 --- a/packages/theme-default/src/common/var.css +++ b/packages/theme-default/src/common/var.css @@ -151,7 +151,7 @@ --input-large-height: 42px; --input-small-font-size: 13px; - --input-small-height: 28px; + --input-small-height: 30px; --input-mini-font-size: 12px; --input-mini-height: 22px; diff --git a/packages/theme-default/src/input-recommend.css b/packages/theme-default/src/input-recommend.css deleted file mode 100644 index f803bda50..000000000 --- a/packages/theme-default/src/input-recommend.css +++ /dev/null @@ -1,29 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; -/*@import "./core/dropdown.css";*/ -@import "./core/tag.css"; -@import "./core/input.css"; - -@component-namespace element { - @b input { - display: inline-block; - font-size: var(--input-font-size); - position: relative; - - @e placeholder { - background-color: #fff; - color: var(--input-border-color); - left: 4px; - padding: 0 2px; - position: absolute; - top: calc(var(--input-height) / 2 - var(--input-font-size) + 4); - transition: all 0.2s ease-out; - z-index: var(--index-normal); - - @when enter { - color: var(--input-border-color-hover); - top: calc((-var(--input-height) + var(--input-font-size)) / 2 + 1); - } - } - } -} diff --git a/packages/theme-default/src/input.css b/packages/theme-default/src/input.css index 8e6048fa3..b2ab99ccf 100644 --- a/packages/theme-default/src/input.css +++ b/packages/theme-default/src/input.css @@ -4,6 +4,7 @@ @component-namespace el { @b input { position: relative; + font-size: var(--font-size-base); @e inner { display: block; @@ -11,7 +12,6 @@ box-sizing: border-box; width: 100%; height: var(--input-height); - font-size: var(--font-size-base); color: var(--input-color); background-color: #fff; background-image: none; @@ -71,75 +71,87 @@ } @b input-large { + font-size: var(--input-large-font-size); + & .el-input__inner { - font-size: var(--input-large-font-size); height: var(--input-large-height); } } @b input-small { + font-size: var(--input-small-font-size); + & .el-input__inner { - font-size: var(--input-small-font-size); height: var(--input-small-height); } } @b input-mini { + font-size: var(--input-mini-font-size); + & .el-input__inner { - font-size: var(--input-mini-font-size); height: var(--input-mini-height); } } @b input-group { display: table; + border-collapse: separate; - & .el-input { + & > .el-input__inner { vertical-align: middle; display: table-cell; } - @e label { - padding: 0 10px; - font-size: 13px; - } - @e prepend { + @e append, prepend { + background-color: #f9fafc; + color: #99a9bf; vertical-align: middle; display: table-cell; position: relative; border: var(--border-base); - border-right: 0; border-radius: 4px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + padding: 0 10px; + width: 1%; + white-space: nowrap; - & .el-dropdown--text { - padding: 0 10px; + & .el-select, + & .el-button { + display: block; + margin: -10px; + } + + & .el-button, + & .el-select .el-input__inner, + & .el-select:hover .el-input__inner { + border-color: transparent; + background-color: transparent; + color: inherit; + border-top: 0; + border-bottom: 0; + } + & .el-button, + & .el-input { + font-size: inherit; } } + @e prepend { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } @e append { - vertical-align: middle; - display: table-cell; - position: relative; - border: var(--border-base); border-left: 0; - border-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; } - & .el-input:first-child { - .el-input__inner { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + & .el-input__inner:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } - & .el-input:last-child { - .el-input__inner { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } + & .el-input__inner:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } - & .el-input:not(:first-child):not(:last-child) { - .el-input__inner { - border-radius: 0; - } + & .el-input__inner:not(:first-child):not(:last-child) { + border-radius: 0; } } diff --git a/src/index.js b/src/index.js index fb956bc4f..3c95aa92c 100644 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,6 @@ import Submenu from '../packages/submenu/index.js'; import MenuItem from '../packages/menu-item/index.js'; import Input from '../packages/input/index.js'; import InputNumber from '../packages/input-number/index.js'; -import InputGroup from '../packages/input-group/index.js'; import Radio from '../packages/radio/index.js'; import RadioGroup from '../packages/radio-group/index.js'; import RadioButton from '../packages/radio-button/index.js'; @@ -48,6 +47,8 @@ import Upload from '../packages/upload/index.js'; import Progress from '../packages/progress/index.js'; import Spinner from '../packages/spinner/index.js'; import Message from '../packages/message/index.js'; +import Badge from '../packages/badge/index.js'; +import Card from '../packages/card/index.js'; const install = function(Vue) { if (install.installed) return; @@ -63,7 +64,6 @@ const install = function(Vue) { Vue.component(MenuItem.name, MenuItem); Vue.component(Input.name, Input); Vue.component(InputNumber.name, InputNumber); - Vue.component(InputGroup.name, InputGroup); Vue.component(Radio.name, Radio); Vue.component(RadioGroup.name, RadioGroup); Vue.component(RadioButton.name, RadioButton); @@ -99,6 +99,8 @@ const install = function(Vue) { Vue.component(Progress.name, Progress); Vue.component(Spinner.name, Spinner); Vue.component(Message.name, Message); + Vue.component(Badge.name, Badge); + Vue.component(Card.name, Card); Vue.use(Loading); @@ -128,7 +130,6 @@ module.exports = { MenuItem, Input, InputNumber, - InputGroup, Radio, RadioGroup, RadioButton, @@ -166,5 +167,7 @@ module.exports = { Upload, Progress, Spinner, - Message + Message, + Badge, + Card };