diff --git a/components.json b/components.json index 5827ed020..eded4963f 100644 --- a/components.json +++ b/components.json @@ -17,5 +17,8 @@ "steps": "./packages/steps/index.js", "tag": "./packages/tag/index.js", "checkbox": "./packages/checkbox/index.js", - "checkbox-group": "./packages/checkbox-group/index.js" + "checkbox-group": "./packages/checkbox-group/index.js", + "badge-group": "./packages/badge-group/index.js", + "badge": "./packages/badge/index.js", + "search": "./packages/search/index.js" } diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md new file mode 100644 index 000000000..b8e450bee --- /dev/null +++ b/docs/examples-docs/badge.md @@ -0,0 +1,27 @@ +## Badge 组件 + +### 基础用法 + +```html + + + + + + +``` + +### z-badge-group API + +| 参数 | 说明 | 类型 | 默认值 | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | | + + +### z-badge API +| 参数 | 说明 | 类型 | 默认值 | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| mark | badge的唯一key值 | string | '' | required | +| title | badge的文案标题 | string | '' | required | +| info | 当前badge的提示消息数量 | string | '' | | +| url | 跳转链接 | string | 全连接直接跳转或者hash | | diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md new file mode 100644 index 000000000..644bfb416 --- /dev/null +++ b/docs/examples-docs/search.md @@ -0,0 +1,28 @@ +## Search 组件 + +### 基础用法 + + +```html + + +``` + +```javascript +export default { + methods: { + goSearch(value) { + alert(value) + } + } +}; +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| placeholder | input的placeholder文案 | string | | | \ No newline at end of file diff --git a/docs/examples/badge.vue b/docs/examples/badge.vue new file mode 100644 index 000000000..27b6f12b1 --- /dev/null +++ b/docs/examples/badge.vue @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/docs/examples/search.vue b/docs/examples/search.vue new file mode 100644 index 000000000..41391b5ae --- /dev/null +++ b/docs/examples/search.vue @@ -0,0 +1,23 @@ + + + \ No newline at end of file diff --git a/package.json b/package.json index 2c9fea68a..16273447c 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ ], "scripts": { "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com", - "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js", + "dev": "npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js", "build:file": "node build/bin/build-entry.js", "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js", "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css", @@ -39,6 +39,7 @@ "vue": "^2.1.8" }, "devDependencies": { + "autoprefixer": "^6.7.5", "babel-cli": "^6.14.0", "babel-core": "^6.17.0", "babel-eslint": "^6.1.2", @@ -50,6 +51,7 @@ "babel-plugin-transform-vue-jsx": "^3.3.0", "babel-preset-es2015": "^6.16.0", "babel-runtime": "^6.11.0", + "cheerio": "^0.22.0", "copy-webpack-plugin": "^4.0.1", "cp-cli": "^1.0.2", "cross-env": "^3.1.3", @@ -68,6 +70,7 @@ "gulp": "^3.9.1", "gulp-cssmin": "^0.1.7", "gulp-postcss": "^6.1.1", + "gulp-util": "^3.0.8", "highlight.js": "^9.8.0", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.22.0", diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js new file mode 100644 index 000000000..2bff2f50d --- /dev/null +++ b/packages/badge-group/index.js @@ -0,0 +1,3 @@ +import BadgeGroup from '../badge/src/badge-group'; + +export default BadgeGroup; diff --git a/packages/badge/CHANGELOG.md b/packages/badge/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/badge/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/badge/README.md b/packages/badge/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/badge/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/badge/index.js b/packages/badge/index.js new file mode 100644 index 000000000..dc8381205 --- /dev/null +++ b/packages/badge/index.js @@ -0,0 +1,3 @@ +import Badge from './src/badge'; + +export default Badge; diff --git a/packages/badge/package.json b/packages/badge/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/badge/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue new file mode 100644 index 000000000..e6998998e --- /dev/null +++ b/packages/badge/src/badge-group.vue @@ -0,0 +1,25 @@ + + + diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue new file mode 100644 index 000000000..919324666 --- /dev/null +++ b/packages/badge/src/badge.vue @@ -0,0 +1,40 @@ + + \ No newline at end of file diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue index ad7d3e3a6..80118093a 100644 --- a/packages/radio/src/radio.vue +++ b/packages/radio/src/radio.vue @@ -49,7 +49,7 @@ export default { set(val) { if (this.isGroup && this.parentGroup) { - this.parentGroup.$emit('input', val); + this.parentGroup.$emit('input', val); } else { this.$emit('input', val); } diff --git a/packages/search/CHANGELOG.md b/packages/search/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/search/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/search/README.md b/packages/search/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/search/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/search/index.js b/packages/search/index.js new file mode 100644 index 000000000..716a43c6e --- /dev/null +++ b/packages/search/index.js @@ -0,0 +1,3 @@ +import Search from './src/search'; + +export default Search; diff --git a/packages/search/package.json b/packages/search/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/search/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue new file mode 100644 index 000000000..e88c67ec9 --- /dev/null +++ b/packages/search/src/search.vue @@ -0,0 +1,55 @@ + + + diff --git a/packages/zanui-css/src/badge.css b/packages/zanui-css/src/badge.css new file mode 100644 index 000000000..57b8eb99e --- /dev/null +++ b/packages/zanui-css/src/badge.css @@ -0,0 +1,71 @@ +@import "./common/var.css"; +@import "./mixins/border_retina.css"; + +@component-namespace zan { + @b badge-group { + position: relative; + width: 85px; + &::after { + @mixin border-retina (top); + } + } + @b badge { + display: block; + overflow: hidden; + position: relative; + padding: 20px 15px; + box-sizing: border-box; + line-height: 14px; + background-color: $c-background; + color: $c-gray-darker; + font-size: 14px; + text-decoration: none; + white-space: nowrap; + @e active { + display: none; + position: absolute; + left: 0; + top: 0; + width: 3px; + height: 100%; + background-color: #FF4444; + } + @e info { + position: absolute; + top: 2px; + right: 2px; + font-size: 10px; + transform:scale(0.8); + text-align: center; + box-sizing: border-box; + padding: 0 6px; + min-width: 18px; + height: 18px; + line-height: 18px; + border-radius: 9px; + background-color: #FF4444; + color: $c-white; + } + @when select { + font-weight: bold; + color: $c-black; + background-color: $c-white; + .zan-badge__active { + display: block; + } + &::after { + @mixin border-retina (top); + @mixin border-retina (right); + @mixin border-retina (left); + } + } + &::after { + @mixin border-retina (bottom); + } + &:last-child { + &::after { + border-bottom: 0; + } + } + } +} \ No newline at end of file diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css index b8c02e927..3f89bef3c 100644 --- a/packages/zanui-css/src/index.css +++ b/packages/zanui-css/src/index.css @@ -13,6 +13,8 @@ @import './popup.css'; @import './radio.css'; @import './switch.css'; +@import './badge.css'; +@import './search.css'; @import './panel.css'; @import './steps.css'; @import './tag.css'; diff --git a/packages/zanui-css/src/search.css b/packages/zanui-css/src/search.css new file mode 100644 index 000000000..2d8bafd04 --- /dev/null +++ b/packages/zanui-css/src/search.css @@ -0,0 +1,53 @@ +@import "./common/var.css"; + +@component-namespace zan { + @b search { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + position: relative; + box-sizing: border-box; + padding: 4px 15px; + background-color: #F2F2F2; + @when focus { + .zan-search__input-wrap { + width: 82%; + } + span { + display: inline-block; + } + } + @e input-wrap { + position: relative; + width: 90%; + padding: 8px 24px 8px 35px; + border: 1px solid $c-gray-light; + border-radius: 4px; + background-color: $c-white; + span { + display: none; + position: absolute; + right: 5px; + top: 8px; + } + input { + width: 100%; + height: 14px; + font-size: 14px; + color: $c-gray-dark; + border: none; + outline: none; + } + } + @e cancel { + display: none; + color: #44BB00; + font-size: 14px; + white-space: nowrap; + @when focus { + display: block; + } + } + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index b124b77fc..4455a8cb0 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,9 @@ import Steps from '../packages/steps/index.js'; import Tag from '../packages/tag/index.js'; import Checkbox from '../packages/checkbox/index.js'; import CheckboxGroup from '../packages/checkbox-group/index.js'; +import BadgeGroup from '../packages/badge-group/index.js'; +import Badge from '../packages/badge/index.js'; +import Search from '../packages/search/index.js'; const install = function(Vue) { if (install.installed) return; @@ -38,6 +41,9 @@ const install = function(Vue) { Vue.component(Tag.name, Tag); Vue.component(Checkbox.name, Checkbox); Vue.component(CheckboxGroup.name, CheckboxGroup); + Vue.component(BadgeGroup.name, BadgeGroup); + Vue.component(Badge.name, Badge); + Vue.component(Search.name, Search); }; // auto install @@ -66,5 +72,8 @@ module.exports = { Steps, Tag, Checkbox, - CheckboxGroup + CheckboxGroup, + BadgeGroup, + Badge, + Search };