diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js index 2fc6e1d92..2419df433 100644 --- a/build/bin/build-entry.js +++ b/build/bin/build-entry.js @@ -8,8 +8,8 @@ var OUTPUT_PATH = path.join(__dirname, '../../src/index.js'); var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';'; var ISNTALL_COMPONENT_TEMPLATE = ' Vue.component({{name}}.name, {{name}});'; var MAIN_TEMPLATE = `{{include}} -// zenui -import '../packages/zenui/src/index.pcss'; +// zanui +import '../packages/zanui/src/index.pcss'; const install = function(Vue) { if (install.installed) return; diff --git a/build/webpack.config.js b/build/webpack.config.js index 2e07a3c81..b5d758f6a 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -40,7 +40,8 @@ module.exports = { alias: { 'vue$': 'vue/dist/vue.runtime.common.js', 'oxygen': path.join(__dirname, '..'), - 'src': path.join(__dirname, '../src') + 'src': path.join(__dirname, '../src'), + 'packages': path.join(__dirname, '../packages') } }, module: { @@ -62,10 +63,6 @@ module.exports = { test: /\.pcss$/, loader: 'style-loader!css-loader!postcss-loader' }, - { - test: /\.less$/, - loader: 'style-loader!css-loader!less-loader' - }, { test: /\.md/, loader: 'vue-markdown-loader' diff --git a/components.json b/components.json index 8fcccc5c1..fa7c0daea 100644 --- a/components.json +++ b/components.json @@ -1,8 +1,9 @@ { - "sample": "./packages/sample/index.js", "button": "./packages/button/index.js", "switch": "./packages/switch/index.js", "field": "./packages/field/index.js", "radio": "./packages/radio/index.js", - "cell": "./packages/cell/index.js" + "cell": "./packages/cell/index.js", + "icon": "./packages/icon/index.js", + "cell-group": "./packages/cell-group/index.js" } diff --git a/docs/App.vue b/docs/App.vue index 93fd41e5c..c0b8380c3 100644 --- a/docs/App.vue +++ b/docs/App.vue @@ -20,76 +20,76 @@ export default { }; - diff --git a/docs/assets/docs.less b/docs/assets/docs.css similarity index 70% rename from docs/assets/docs.less rename to docs/assets/docs.css index 16cbf50c1..2f038afb2 100644 --- a/docs/assets/docs.less +++ b/docs/assets/docs.css @@ -53,18 +53,4 @@ ul { -webkit-font-smoothing: auto; } -// 操作类图标 - 导出 -@font-face { - font-family: "handle"; - src: url("./fonts/iconfont.eot"); /* IE9*/ - src: url("./fonts/iconfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ - url("./fonts/iconfont.woff") format("woff"), /* chrome、firefox */ - url("./fonts/iconfont.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ - url("./fonts/iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */ -} -.iconhandle { - font-family: "handle"; - font-size: 16px; - font-style: normal; -} diff --git a/docs/assets/fonts/iconfont.eot b/docs/assets/fonts/iconfont.eot deleted file mode 100644 index d7067e210..000000000 Binary files a/docs/assets/fonts/iconfont.eot and /dev/null differ diff --git a/docs/assets/fonts/iconfont.svg b/docs/assets/fonts/iconfont.svg deleted file mode 100644 index 97301945b..000000000 --- a/docs/assets/fonts/iconfont.svg +++ /dev/null @@ -1,326 +0,0 @@ - - - - -Created by FontForge 20120731 at Fri Sep 23 11:54:25 2016 - By admin - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/assets/fonts/iconfont.ttf b/docs/assets/fonts/iconfont.ttf deleted file mode 100644 index 6519546fb..000000000 Binary files a/docs/assets/fonts/iconfont.ttf and /dev/null differ diff --git a/docs/assets/fonts/iconfont.woff b/docs/assets/fonts/iconfont.woff deleted file mode 100644 index 763033714..000000000 Binary files a/docs/assets/fonts/iconfont.woff and /dev/null differ diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue index 17f06f8cc..4831e123f 100644 --- a/docs/components/demo-block.vue +++ b/docs/components/demo-block.vue @@ -67,7 +67,7 @@ }; - diff --git a/docs/examples/cell.md b/docs/examples/cell.md index 344456778..20696bcdf 100644 --- a/docs/examples/cell.md +++ b/docs/examples/cell.md @@ -1,15 +1,100 @@ + + + + ## Cell 组件 +### 基础用法 + +:::demo 样例代码 +```html + + + + +``` +::: + +### 标题带描述信息 + +:::demo 传入`label`属性，属性值为描述信息的值。 +```html + + + + +``` +::: + +### 带图标 + +:::demo 传入`icon`属性 +```html + + + + +``` +::: + +### 可点击的链接 + +:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。 +```html + + + + +``` +::: + +### 高级用法 + +如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。 + +:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。 +```html + + + + + + +``` +::: + ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| className | 自定义额外类名 | string | '' | '' | +| icon | 左侧图标 | string | '' | '' | +| title | 左侧标题 | string | '' | '' | +| value | 右侧内容 | string | '' | '' | +| isLink | 是否为链接，链接会在右侧出现箭头 | boolean | '' | '' | +| url | 跳转链接 | string | '' | '' | +| label | 描述信息，显示在标题下方 | string | '' | '' | ### Slot | name | 描述 | |-----------|-----------| | - | 自定义显示内容 | -| icon | | -| name | | +| icon | 自定义icon | +| title | 自定义title | diff --git a/docs/examples/field.md b/docs/examples/field.md index 9aa26efa9..18deac1cd 100644 --- a/docs/examples/field.md +++ b/docs/examples/field.md @@ -1 +1,64 @@ + + ## Field组件 + +表单中`input`或`textarea`的输入框。 + +### 基础用法 + +:::demo 根据`type`属性显示不同的输入框。 +```html + + + + + +``` +::: + +### 无label的输入框 + +:::demo 不传入`label`属性即可。 +```html + + + +``` +::: + +### 监听change事件 + +:::demo 监听组件的`change`事件。 +```html + + + +``` +::: + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| type | 输入框类型 | string | text | text, number, email, url, tel, date, datetime, password, textarea | +| placeholder | 输入框placeholder | string | '' | | +| value | 输入框的值 | string | '' | | +| label | 输入框标签 | string | '' | | +| disabled | 是否禁用输入框 | boolean | false | | +| readonly | 输入框是否只读 | boolean | false | | +| maxlength | 输入框maxlength | [String, Number] | '' | | + diff --git a/docs/examples/radio.md b/docs/examples/radio.md index 75a86f5f0..47fdbd35f 100644 --- a/docs/examples/radio.md +++ b/docs/examples/radio.md @@ -1 +1,25 @@ + + ## Radio组件 + +### 基础用法 + +:::demo +```html + +``` +::: + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| disabled | 是否禁用单选框 | Boolean | false | | diff --git a/docs/examples/sample.md b/docs/examples/sample.md deleted file mode 100644 index 5ae3ac3a8..000000000 --- a/docs/examples/sample.md +++ /dev/null @@ -1,28 +0,0 @@ - - -## sample组件 - -### 基础用法 - -author设置为test - -:::demo 样例代码 -```html - -``` -::: - - -### API - -| 参数 | 说明 | 类型 | 默认值 | 可选值 | -|-----------|-----------|-----------|-------------|-------------| -| className | 自定义额外类名 | string | '' | '' | diff --git a/docs/index.js b/docs/index.js index 7874cc66f..dfbaf47a3 100644 --- a/docs/index.js +++ b/docs/index.js @@ -1,4 +1,4 @@ -import './assets/docs.less'; +import './assets/docs.css'; import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; diff --git a/docs/nav.config.json b/docs/nav.config.json index 88eefc099..28b555022 100644 --- a/docs/nav.config.json +++ b/docs/nav.config.json @@ -1,27 +1,30 @@ { "zh-CN": [ { - "name": "基础组件", + "name": "oxygen组件", "groups": [ - { - "groupName": "Basic", - "list": [ - { - "path": "/sample", - "title": "Sample" - }, - { - "path": "/button", - "title": "Button" - } - ] - }, { "groupName": "CSS组件", "list": [ + { + "path": "/button", + "title": "Button" + }, { "path": "/cell", "title": "Cell" + }, + { + "path": "/loading", + "title": "Loading" + }, + { + "path": "/progress", + "title": "Progress" + }, + { + "path": "/card", + "title": "Card" } ] }, @@ -45,6 +48,55 @@ "title": "Checkbox" } ] + }, + { + "groupName": "JS组件", + "list": [ + { + "path": "/tab", + "title": "Tab" + }, + { + "path": "/toast", + "title": "Toast" + }, + { + "path": "/img-uploader", + "title": "Img Uploader" + }, + { + "path": "/picker", + "title": "Picker" + }, + { + "path": "/datetime-picker", + "title": "Datetime Picker" + }, + { + "path": "/lazyload", + "title": "Lazyload" + }, + { + "path": "/pop", + "title": "Pop" + }, + { + "path": "/swipe", + "title": "Swipe" + }, + { + "path": "/waterfall", + "title": "Waterfall" + }, + { + "path": "/dialog", + "title": "Dialog" + }, + { + "path": "/img-preview", + "title": "Img Preview" + } + ] } ] } diff --git a/package.json b/package.json index 447de6783..1c17dd150 100644 --- a/package.json +++ b/package.json @@ -73,13 +73,10 @@ "json-loader": "^0.5.4", "json-templater": "^1.0.4", "lerna": "2.0.0-beta.31", - "less": "^2.7.0", - "less-loader": "^2.2.3", "lolex": "^1.5.1", "markdown-it": "^6.1.1", "markdown-it-anchor": "^2.5.0", "markdown-it-container": "^2.0.0", - "node-sass": "^3.10.1", "pixrem": "^3.0.0", "postcss": "^5.1.2", "postcss-calc": "^5.0.0", diff --git a/packages/button/index.pcss b/packages/button/index.pcss deleted file mode 100644 index 6dd330220..000000000 --- a/packages/button/index.pcss +++ /dev/null @@ -1 +0,0 @@ -@import "./src/button.pcss"; diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js new file mode 100644 index 000000000..ccbfd514e --- /dev/null +++ b/packages/cell-group/index.js @@ -0,0 +1,3 @@ +import CellGroup from '../cell/src/cell-group'; + +export default CellGroup; diff --git a/packages/cell/src/cell-group.vue b/packages/cell/src/cell-group.vue new file mode 100644 index 000000000..6b9bcee43 --- /dev/null +++ b/packages/cell/src/cell-group.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue index 03fb7c6cf..910284e2c 100644 --- a/packages/cell/src/cell.vue +++ b/packages/cell/src/cell.vue @@ -1,19 +1,21 @@ diff --git a/packages/field/src/field.vue b/packages/field/src/field.vue index ca9543abe..4c26b3db0 100644 --- a/packages/field/src/field.vue +++ b/packages/field/src/field.vue @@ -1,11 +1,79 @@ diff --git a/packages/sample/CHANGELOG.md b/packages/icon/CHANGELOG.md similarity index 100% rename from packages/sample/CHANGELOG.md rename to packages/icon/CHANGELOG.md diff --git a/packages/sample/README.md b/packages/icon/README.md similarity index 100% rename from packages/sample/README.md rename to packages/icon/README.md diff --git a/packages/icon/index.js b/packages/icon/index.js new file mode 100644 index 000000000..cf234f6f0 --- /dev/null +++ b/packages/icon/index.js @@ -0,0 +1,3 @@ +import Icon from './src/icon'; + +export default Icon; diff --git a/packages/icon/package.json b/packages/icon/package.json new file mode 100644 index 000000000..775e75514 --- /dev/null +++ b/packages/icon/package.json @@ -0,0 +1,9 @@ +{ + "name": "o2-icon", + "version": "0.0.1", + "description": "o2-icon", + "main": "index.js", + "author": "zhangmin ", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/icon/src/icon.vue b/packages/icon/src/icon.vue new file mode 100644 index 000000000..7969ad3df --- /dev/null +++ b/packages/icon/src/icon.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue new file mode 100644 index 000000000..1e8417089 --- /dev/null +++ b/packages/radio/src/radio-group.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue index 789b41ee4..642e1e5a6 100644 --- a/packages/radio/src/radio.vue +++ b/packages/radio/src/radio.vue @@ -1,11 +1,28 @@ diff --git a/packages/sample/index.js b/packages/sample/index.js deleted file mode 100644 index 59bd195b2..000000000 --- a/packages/sample/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import SampleComponent from './src/main'; - -export default SampleComponent; diff --git a/packages/sample/package.json b/packages/sample/package.json deleted file mode 100644 index 87ec1b163..000000000 --- a/packages/sample/package.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "name": "@youzan/your-component-name", - "version": "0.0.1", - "description": "vue component", - "main": "./lib/index.js", - "author": "who r u", - "license": "MIT", - "devDependencies": {}, - "dependencies": {} -} diff --git a/packages/sample/src/main.vue b/packages/sample/src/main.vue deleted file mode 100644 index 0d2c38ebd..000000000 --- a/packages/sample/src/main.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/packages/switch/index.pcss b/packages/switch/index.pcss deleted file mode 100644 index 617bc489f..000000000 --- a/packages/switch/index.pcss +++ /dev/null @@ -1 +0,0 @@ -@import "./src/switch.pcss"; diff --git a/packages/zenui/README.md b/packages/zanui/README.md similarity index 100% rename from packages/zenui/README.md rename to packages/zanui/README.md diff --git a/packages/zenui/package.json b/packages/zanui/package.json similarity index 100% rename from packages/zenui/package.json rename to packages/zanui/package.json diff --git a/packages/button/src/button.pcss b/packages/zanui/src/button.pcss similarity index 96% rename from packages/button/src/button.pcss rename to packages/zanui/src/button.pcss index 2549e72ac..e701524f0 100644 --- a/packages/button/src/button.pcss +++ b/packages/zanui/src/button.pcss @@ -1,4 +1,4 @@ -@import "../../zenui/src/common/var.pcss"; +@import "./common/var.pcss"; @component-namespace o2 { @component button { diff --git a/packages/zanui/src/cell.pcss b/packages/zanui/src/cell.pcss new file mode 100644 index 000000000..42812f194 --- /dev/null +++ b/packages/zanui/src/cell.pcss @@ -0,0 +1,66 @@ +@import "./common/var.pcss"; +@import "./mixins/border_retina.pcss"; + +@component-namespace o2 { + @component cell-group { + padding-left: 10px; + position: relative; + + &::after { + @mixin border-retina (top, bottom); + } + } + + @component cell { + display: block; + overflow: hidden; + position: relative; + padding: 10px 10px 10px 0; + box-sizing: border-box; + line-height: 22px; + background-color: $c-white; + color: #333; + font-size: 14px; + text-decoration: none; + + &::after { + @mixin border-retina (bottom); + } + + &:last-child { + &::after { + border-bottom: 0; + } + } + + @descendent title { + float: left; + overflow: hidden; + } + + @descendent label { + display: block; + font-size: 12px; + line-height: 1.2; + color: #666; + } + + @descendent value { + float: right; + overflow: hidden; + + @when link { + margin-right: 20px; + } + } + + .zui-icon-arrow { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + color: #999; + font-size: 12px; + } + } +} diff --git a/packages/zenui/src/common/var.pcss b/packages/zanui/src/common/var.pcss similarity index 100% rename from packages/zenui/src/common/var.pcss rename to packages/zanui/src/common/var.pcss diff --git a/packages/zanui/src/field.pcss b/packages/zanui/src/field.pcss new file mode 100644 index 000000000..cc09b9943 --- /dev/null +++ b/packages/zanui/src/field.pcss @@ -0,0 +1,54 @@ +@import "./common/var.pcss"; +@import "./mixins/border_retina.pcss"; + +@component-namespace o2 { + @component field { + width: 100%; + overflow: hidden; + + @when textarea { + .o2-field-control { + min-height: 60px; + } + } + + @when nolabel { + .o2-cell-title { + display: none; + } + + .o2-cell-value { + width: 100%; + padding-left: 0; + } + } + + .o2-cell-title, + .o2-cell-value { + float: none; + box-sizing: border-box; + } + + .o2-cell-title { + width: 90px; + position: absolute; + top: 10px; + left: 0; + } + + .o2-cell-value { + width: 100%; + padding-left: 90px; + } + + @descendent control { + border: 0; + font-size: 14px; + line-height: 22px; + display: block; + width: 100%; + resize: none; + outline: 0; + } + } +} diff --git a/packages/zanui/src/icon.pcss b/packages/zanui/src/icon.pcss new file mode 100644 index 000000000..afdc91bc2 --- /dev/null +++ b/packages/zanui/src/icon.pcss @@ -0,0 +1,66 @@ +/* DO NOT EDIT! Generated by fount */ + +@font-face { + font-family: 'zuiicon'; + src: url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.eot'); + src: url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.eot?#iefix') format('embedded-opentype'), + url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.woff2') format('woff2'), + url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.woff') format('woff'), + url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype') +} + +.zui-icon { + display: inline-block; +} +.zui-icon::before { + font-family: "zuiicon" !important; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + /* margin-left: .2em; */ + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} +/* DO NOT EDIT! Generated by fount */ + + +.zui-icon-album:before { content: '\e800'; } /* '' */ +.zui-icon-arrow:before { content: '\e801'; } /* '' */ +.zui-icon-camera:before { content: '\e802'; } /* '' */ +.zui-icon-certificate:before { content: '\e803'; } /* '' */ +.zui-icon-check:before { content: '\e804'; } /* '' */ +.zui-icon-checked:before { content: '\e805'; } /* '' */ +.zui-icon-close:before { content: '\e806'; } /* '' */ +.zui-icon-gift:before { content: '\e807'; } /* '' */ +.zui-icon-home:before { content: '\e808'; } /* '' */ +.zui-icon-location:before { content: '\e809'; } /* '' */ +.zui-icon-message:before { content: '\e80a'; } /* '' */ +.zui-icon-send:before { content: '\e80b'; } /* '' */ +.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */ +.zui-icon-sign:before { content: '\e80d'; } /* '' */ +.zui-icon-store:before { content: '\e80e'; } /* '' */ +.zui-icon-topay:before { content: '\e80f'; } /* '' */ +.zui-icon-tosend:before { content: '\e810'; } /* '' */ \ No newline at end of file diff --git a/packages/zanui/src/index.pcss b/packages/zanui/src/index.pcss new file mode 100644 index 000000000..469e089fc --- /dev/null +++ b/packages/zanui/src/index.pcss @@ -0,0 +1,8 @@ +/** + css组件库入口，组装成css组件库 + */ +@import './button.pcss'; +@import './cell.pcss'; +@import './field.pcss'; +@import './icon.pcss'; +@import './switch.pcss'; diff --git a/packages/zanui/src/mixins/border_retina.pcss b/packages/zanui/src/mixins/border_retina.pcss new file mode 100644 index 000000000..404c323e5 --- /dev/null +++ b/packages/zanui/src/mixins/border_retina.pcss @@ -0,0 +1,20 @@ +$border-poses: top, right, bottom, left; + +@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 { + content: ''; + position: absolute; + top: 0; + left: 0; + box-sizing: border-box; + width: 200%; + height: 200%; + transform: scale(.5); + transform-origin: left top; + -webkit-perspective: 1000; + -webkit-backface-visibility: hidden; + pointer-events: none; + + @each $pos in $poses { + border-$(pos): 1px solid $border-retina-color; + } +} \ No newline at end of file diff --git a/packages/switch/src/switch.pcss b/packages/zanui/src/switch.pcss similarity index 96% rename from packages/switch/src/switch.pcss rename to packages/zanui/src/switch.pcss index 0ac3f03e4..3ed604d34 100644 --- a/packages/switch/src/switch.pcss +++ b/packages/zanui/src/switch.pcss @@ -1,5 +1,4 @@ - -@component-namespace o2{ +@component-namespace o2 { @component switch { height: 29px; width: 49px; @@ -45,4 +44,4 @@ border-color: rgba(0, 0, 0, .1); } } -} \ No newline at end of file +} diff --git a/packages/zenui/src/index.pcss b/packages/zenui/src/index.pcss deleted file mode 100644 index 15f7ab28b..000000000 --- a/packages/zenui/src/index.pcss +++ /dev/null @@ -1,5 +0,0 @@ -/** - css组件库 入口,从各个地方拿css文件，组装成css组件库 - */ -@import '../../button/index.pcss'; -@import '../../switch/index.pcss'; diff --git a/src/index.js b/src/index.js index fa6aedd6a..3ffa774fd 100644 --- a/src/index.js +++ b/src/index.js @@ -1,21 +1,23 @@ -import Sample from '../packages/sample/index.js'; import Button from '../packages/button/index.js'; import Switch from '../packages/switch/index.js'; import Field from '../packages/field/index.js'; import Radio from '../packages/radio/index.js'; import Cell from '../packages/cell/index.js'; -// zenui -import '../packages/zenui/src/index.pcss'; +import Icon from '../packages/icon/index.js'; +import CellGroup from '../packages/cell-group/index.js'; +// zanui +import '../packages/zanui/src/index.pcss'; const install = function(Vue) { if (install.installed) return; - Vue.component(Sample.name, Sample); Vue.component(Button.name, Button); Vue.component(Switch.name, Switch); Vue.component(Field.name, Field); Vue.component(Radio.name, Radio); Vue.component(Cell.name, Cell); + Vue.component(Icon.name, Icon); + Vue.component(CellGroup.name, CellGroup); }; // auto install @@ -26,10 +28,11 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { install, version: '0.0.1', - Sample, Button, Switch, Field, Radio, - Cell + Cell, + Icon, + CellGroup };