diff --git a/components.json b/components.json index 624ba63fa..0e25f11b5 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" ], @@ -149,6 +146,9 @@ "message": [ "./packages/message/index.js" ], + "badge": [ + "./packages/badge/index.js" + ], "card": [ "./packages/card/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..0935abe02 --- /dev/null +++ b/examples/docs/badge.md @@ -0,0 +1,139 @@ +## 基础用法 +展示新消息数量 + + + + + 评论 + + + 回复 + + + + + + 评论 + + + + 回复 + + + + + + +```html + + 评论 + + + 回复 + + + + + 评论 + + + + 回复 + + + +``` + +## 最大值 +可自定义最大值 + + + + + 评论 + + + 回复 + + + + +```html + + 评论 + + + 回复 + +``` + + +## 自定义内容 +可以显示数字外的文本内容 + + + + + 评论 + + + 回复 + + + + +```html + + 评论 + + + 回复 + +``` + +## 小红点 +以红点的形式标注需要关注的内容 + + + + 数据查询 + + + + + + +```html +数据查询 + + + +``` + + + +## API +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | 显示值 | string, number | | | +| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | | | +| is-dot | 小圆点 | boolean | | false | 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/examples/nav.config.json b/examples/nav.config.json index 80f04002d..1478a721d 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -233,6 +233,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..e42aa79e6 --- /dev/null +++ b/packages/badge/src/main.vue @@ -0,0 +1,36 @@ + + + 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/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/badge.css b/packages/theme-default/src/badge.css new file mode 100644 index 000000000..1ee409e7f --- /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 34823f896..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; @@ -354,6 +354,14 @@ --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; + /*Card --------------------------*/ --card-border-color: var(--disabled-border-base); diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css index 57429fc72..da952da9e 100644 --- a/packages/theme-default/src/index.css +++ b/packages/theme-default/src/index.css @@ -32,5 +32,6 @@ @import "./row.css"; @import "./col.css"; @import "./spinner.css"; +@import "./badge.css"; @import "./card.css"; @import "./rate.css"; 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 5505492c2..0fcf681a1 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'; @@ -50,6 +49,7 @@ import Spinner from '../packages/spinner/index.js'; import Message from '../packages/message/index.js'; import Card from '../packages/card/index.js'; import Rate from '../packages/rate/index.js'; +import Badge from '../packages/badge/index.js'; const install = function(Vue) { if (install.installed) return; @@ -65,7 +65,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); @@ -103,6 +102,7 @@ const install = function(Vue) { Vue.component(Message.name, Message); Vue.component(Card.name, Card); Vue.component(Rate.name, Rate); + Vue.component(Badge.name, Badge); Vue.use(Loading); @@ -132,7 +132,6 @@ module.exports = { MenuItem, Input, InputNumber, - InputGroup, Radio, RadioGroup, RadioButton, @@ -170,7 +169,8 @@ module.exports = { Upload, Progress, Spinner, - Message, Card, - Rate + Rate, + Message, + Badge };