diff --git a/components.json b/components.json index 9375aa786..0e25f11b5 100644 --- a/components.json +++ b/components.json @@ -151,5 +151,8 @@ ], "card": [ "./packages/card/index.js" + ], + "rate": [ + "./packages/rate/index.js" ] } diff --git a/examples/app.vue b/examples/app.vue index 6ba1d6c38..7d328be04 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -4,6 +4,7 @@ @import '../node_modules/purecss/build/menus.css'; @import '../node_modules/highlight.js/styles/color-brewer.css'; @import 'assets/styles/common.css'; + @import 'assets/styles/fonts/style.css'; html, body { margin: 0; diff --git a/examples/assets/styles/fonts/icomoon.eot b/examples/assets/styles/fonts/icomoon.eot new file mode 100755 index 000000000..9aed42ade Binary files /dev/null and b/examples/assets/styles/fonts/icomoon.eot differ diff --git a/examples/assets/styles/fonts/icomoon.svg b/examples/assets/styles/fonts/icomoon.svg new file mode 100755 index 000000000..ccf388c02 --- /dev/null +++ b/examples/assets/styles/fonts/icomoon.svg @@ -0,0 +1,14 @@ + + + +Generated by IcoMoon + + + + + + + + + + \ No newline at end of file diff --git a/examples/assets/styles/fonts/icomoon.ttf b/examples/assets/styles/fonts/icomoon.ttf new file mode 100755 index 000000000..e17987da8 Binary files /dev/null and b/examples/assets/styles/fonts/icomoon.ttf differ diff --git a/examples/assets/styles/fonts/icomoon.woff b/examples/assets/styles/fonts/icomoon.woff new file mode 100755 index 000000000..16695e138 Binary files /dev/null and b/examples/assets/styles/fonts/icomoon.woff differ diff --git a/examples/assets/styles/fonts/style.css b/examples/assets/styles/fonts/style.css new file mode 100755 index 000000000..598c8e372 --- /dev/null +++ b/examples/assets/styles/fonts/style.css @@ -0,0 +1,39 @@ +@font-face { + font-family: 'icomoon'; + src: url('assets/styles/fonts/icomoon.eot?h6xgdm'); + src: url('assets/styles/fonts/icomoon.eot?h6xgdm#iefix') format('embedded-opentype'), + url('assets/styles/fonts/icomoon.ttf?h6xgdm') format('truetype'), + url('assets/styles/fonts/icomoon.woff?h6xgdm') format('woff'), + url('assets/styles/fonts/icomoon.svg?h6xgdm#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-rate-face-off:before { + content: "\e900"; +} +.icon-rate-face-1:before { + content: "\e901"; +} +.icon-rate-face-2:before { + content: "\e902"; +} +.icon-rate-face-3:before { + content: "\e903"; +} + diff --git a/examples/docs/rate.md b/examples/docs/rate.md new file mode 100644 index 000000000..438b60739 --- /dev/null +++ b/examples/docs/rate.md @@ -0,0 +1,102 @@ + + +## 基础用法 + +
+ +
+ +``` html + +``` + +## 区分颜色 + +利用颜色对分数及情感倾向进行分级。分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。 + +
+ +
+ +``` html + +``` + +## 辅助文字 + +为组件设置 `show-text` 属性会在右侧显示辅助文字。通过设置 `texts` 可以为每一个分值指定对应的辅助文字。`texts` 为一个数组，长度应等于最大值 `max`。 + +
+ +
+ +``` html + +``` + +## 其他 icon + +
+ +
+ +``` html + + +``` + +## 只读 +为组件设置 `disabled` 属性表示组件为只读，支持小数分值。此时若设置 `show-text`，则会在右侧显示目前的分值。可以提供 `text-template` 作为显示模板，模板为一个包含了 `{value}` 的字符串，`{value}` 会被解析为分值。 + +
+ +
+ +``` html + +``` +## Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|---------- |-------- |---------- |------------- |-------- | +| v-model | 绑定值 | Number | | 0 | +| max | 最大分值 | Number | | 5 | +| disabled | 是否为只读 | Boolean | | false | +| allow-half | 是否允许半选 | Boolean | | false | +| low-threshold | 低分和中等分数的界限值，值本身被划分在低分中 | Number | | 2 | +| high-threshold | 高分和中等分数的界限值，值本身被划分在高分中 | Number | | 4 | +| colors | icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色 | Array | | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | +| void-color | 未选中 icon 的颜色 | String | | '#C6D1DE' | +| disabled-void-color | 只读时未选中 icon 的颜色 | String | | '#EFF2F7' | +| icon-classes | icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名 | Array | | ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'] | +| void-icon-class | 未选中 icon 的类名 | String | | 'el-icon-star-off' | +| disabled-void-icon-class | 只读时未选中 icon 的类名 | String | | 'el-icon-star-on' | +| show-text | 是否显示辅助文字 | Boolean | | false | +| text-color | 辅助文字的颜色 | String | | '1F2D3D' | +| texts | 辅助文字数组 | Array | | ['极差', '失望', '一般', '满意', '惊喜'] | +| text-template | 只读时的辅助文字模板 | String | | '{value}' | + +## Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| change | 分值改变时触发 | 改变后的分值 | + diff --git a/examples/icon.json b/examples/icon.json index a186b92d7..e9aaaa391 100644 --- a/examples/icon.json +++ b/examples/icon.json @@ -1 +1 @@ -["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","angle-left","angle-right","truck"] \ No newline at end of file +["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"] \ No newline at end of file diff --git a/examples/nav.config.json b/examples/nav.config.json index 1474698f4..1478a721d 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -178,6 +178,11 @@ "name": "滑块 (slider)", "title": "slider 滑块", "description": "通过拖动滑块在一个固定区间内进行选择" + }, + { + "path": "/rate", + "name": "评分 (rate)", + "title": "评分组件" } ] }, diff --git a/packages/rate/cooking.conf.js b/packages/rate/cooking.conf.js new file mode 100644 index 000000000..6de801ab0 --- /dev/null +++ b/packages/rate/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: 'ElRate', + 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/rate/index.js b/packages/rate/index.js new file mode 100644 index 000000000..ca7d3d916 --- /dev/null +++ b/packages/rate/index.js @@ -0,0 +1,7 @@ +const Rate = require('./src/main'); + +Rate.install = function(Vue) { + Vue.component(Rate.name, Rate); +}; + +module.exports = Rate; diff --git a/packages/rate/package.json b/packages/rate/package.json new file mode 100644 index 000000000..111d54f7d --- /dev/null +++ b/packages/rate/package.json @@ -0,0 +1,15 @@ +{ + "name": "el-rate", + "version": "0.0.0", + "description": "A rate component for Vue.js.", + "keywords": [ + "element", + "vue", + "component" + ], + "main": "./lib/index.js", + "repository": "https://github.com/element-component/element/tree/master/packages/rate", + "author": "elemefe", + "license": "MIT", + "dependencies": {} +} diff --git a/packages/rate/src/main.vue b/packages/rate/src/main.vue new file mode 100644 index 000000000..fd54bc009 --- /dev/null +++ b/packages/rate/src/main.vue @@ -0,0 +1,272 @@ + + + diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index bff1ef3e0..f903a8434 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -190,8 +190,6 @@ }, value(val) { - this.$emit('input', val); - this.$emit('change', val); if (this.valueChangeBySelected) { this.valueChangeBySelected = false; return; @@ -486,6 +484,7 @@ this.selected = {}; this.selectedLabel = ''; this.$emit('input', ''); + this.$emit('change', ''); this.visible = false; }, diff --git a/packages/theme-default/src/fonts/element-icons.svg b/packages/theme-default/src/fonts/element-icons.svg index 5a3ec43c2..6472ce196 100755 --- a/packages/theme-default/src/fonts/element-icons.svg +++ b/packages/theme-default/src/fonts/element-icons.svg @@ -39,9 +39,8 @@ - + - - - + + \ No newline at end of file diff --git a/packages/theme-default/src/fonts/element-icons.ttf b/packages/theme-default/src/fonts/element-icons.ttf index 87d83d546..1ca9f4ea5 100755 Binary files a/packages/theme-default/src/fonts/element-icons.ttf and b/packages/theme-default/src/fonts/element-icons.ttf differ diff --git a/packages/theme-default/src/fonts/element-icons.woff b/packages/theme-default/src/fonts/element-icons.woff index ae127ac0c..08268fafa 100755 Binary files a/packages/theme-default/src/fonts/element-icons.woff and b/packages/theme-default/src/fonts/element-icons.woff differ diff --git a/packages/theme-default/src/icon.css b/packages/theme-default/src/icon.css index 7256b7eca..31e10b98c 100644 --- a/packages/theme-default/src/icon.css +++ b/packages/theme-default/src/icon.css @@ -1,9 +1,9 @@ @font-face { font-family: 'element-icons'; src: - url('fonts/element-icons.ttf?deq2r7') format('truetype'), - url('fonts/element-icons.woff?deq2r7') format('woff'), - url('fonts/element-icons.svg?deq2r7#element-icons') format('svg'); + url('fonts/element-icons.ttf?ld8k1a') format('truetype'), + url('fonts/element-icons.woff?ld8k1a') format('woff'), + url('fonts/element-icons.svg?ld8k1a#element-icons') format('svg'); font-weight: normal; font-style: normal; } @@ -127,15 +127,12 @@ .el-icon-minus:before { content: "\e921"; } -.el-icon-angle-left:before { - content: "\f104"; -} -.el-icon-angle-right:before { - content: "\f105"; -} -.el-icon-truck:before { +.el-icon-star-off:before { content: "\e922"; } +.el-icon-star-on:before { + content: "\e923"; +} .el-icon-loading { animation: rotating 1s linear infinite; diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css index 4eefc067a..da952da9e 100644 --- a/packages/theme-default/src/index.css +++ b/packages/theme-default/src/index.css @@ -34,3 +34,4 @@ @import "./spinner.css"; @import "./badge.css"; @import "./card.css"; +@import "./rate.css"; diff --git a/packages/theme-default/src/input.css b/packages/theme-default/src/input.css index b2ab99ccf..9c4a41b32 100644 --- a/packages/theme-default/src/input.css +++ b/packages/theme-default/src/input.css @@ -19,6 +19,7 @@ border-radius: 4px; transition: var(--border-transition-base); outline: none; + font-size: inherit; &::placeholder { color: var(--input-placeholder-color); diff --git a/packages/theme-default/src/rate.css b/packages/theme-default/src/rate.css new file mode 100644 index 000000000..fde86c6bc --- /dev/null +++ b/packages/theme-default/src/rate.css @@ -0,0 +1,46 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + + @b rate { + height: 20px; + @e item { + display: inline-block; + position: relative; + font-size: 0; + vertical-align: middle; + } + + @e icon { + position: relative; + display: inline-block; + font-size: 18px; + margin-right: 6px; + color: #C6D1DE; + transition: .3s; + &.hover { + transform: scale(1.15); + } + + .path2 { + position: absolute; + left: 0; + top: 0; + } + } + + @e decimal { + position: absolute; + top: 0; + left: 0; + display: inline-block; + overflow: hidden; + } + + @e text { + font-size: 14px; + vertical-align: middle; + } + } +} diff --git a/src/index.js b/src/index.js index 3c95aa92c..0fcf681a1 100644 --- a/src/index.js +++ b/src/index.js @@ -47,8 +47,9 @@ 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'; +import Rate from '../packages/rate/index.js'; +import Badge from '../packages/badge/index.js'; const install = function(Vue) { if (install.installed) return; @@ -99,8 +100,9 @@ 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.component(Rate.name, Rate); + Vue.component(Badge.name, Badge); Vue.use(Loading); @@ -167,7 +169,8 @@ module.exports = { Upload, Progress, Spinner, + Card, + Rate, Message, - Badge, - Card + Badge };