diff --git a/components.json b/components.json index 3b1dc2789..902276d41 100644 --- a/components.json +++ b/components.json @@ -13,5 +13,6 @@ "waterfall": "./packages/waterfall/index.js", "loading": "./packages/loading/index.js", "panel": "./packages/panel/index.js", - "card": "./packages/card/index.js" + "card": "./packages/card/index.js", + "steps": "./packages/steps/index.js" } diff --git a/docs/ExamplesApp.vue b/docs/ExamplesApp.vue index e69de29bb..efa0bb765 100644 --- a/docs/ExamplesApp.vue +++ b/docs/ExamplesApp.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue index 648a9b356..b0cac2d5a 100644 --- a/docs/ExamplesDocsApp.vue +++ b/docs/ExamplesDocsApp.vue @@ -1,9 +1,10 @@ @@ -24,9 +25,8 @@ export default { @import './assets/docs.css'; .page-container { - width: 1140px; - padding: 0 30px; - margin: 0 auto; + height: 100%; + min-width: 960px; h2 { font-size: 28px; @@ -34,10 +34,12 @@ export default { margin: 20px 0; line-height: 40px; } + h3 { font-size: 22px; margin: 23px 0; } + h2, h3, h4, h5 { font-weight: normal; color: #1f2f3d; @@ -57,6 +59,7 @@ export default { } } } + p { font-size: 14px; color: #5e6d82; @@ -65,8 +68,32 @@ export default { } .page-content { - width: 75%; + width: 52%; + box-sizing: border-box; float: left; + padding: 0 15px; + overflow: auto; + height: inherit; + } + + .mobile-wrapper { + float: left; + width: 30%; + height: 300px; + position: relative; + } + + .mobile { + margin: 20px 20px 0; + height: 100%; + box-sizing: border-box; + width: 365px; + } + + .demo-page { + width: 100%; + border: 5px solid #f5f5f5; + height: 580px; } .table { @@ -77,16 +104,16 @@ export default { font-size: 14px; margin-bottom: 45px; - th:first-child { - padding-left: 10px; - } - th { text-align: left; border-top: 1px solid #eaeefb; border-bottom: 1px solid #eaeefb; background-color: #eff2f7; padding: 10px; + + &:first-child { + padding-left: 10px; + } } td { diff --git a/docs/assets/docs.css b/docs/assets/docs.css index 2f038afb2..7f9ccf66c 100644 --- a/docs/assets/docs.css +++ b/docs/assets/docs.css @@ -18,11 +18,16 @@ time, mark, audio, video { vertical-align: baseline; } +html { + height: 100%; +} + body { font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; - overflow: auto; + overflow: hidden; font-weight: 400; -webkit-font-smoothing: antialiased; + height: 100%; } a { @@ -53,4 +58,16 @@ ul { -webkit-font-smoothing: auto; } +.clearfix { + &::before { + display: table; + content: ""; + } + + &::after { + display: table; + content: ""; + clear: both; + } +} diff --git a/docs/components/demo-list.vue b/docs/components/demo-list.vue new file mode 100644 index 000000000..0c457e14a --- /dev/null +++ b/docs/components/demo-list.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/docs/components/mobile.vue b/docs/components/mobile.vue new file mode 100644 index 000000000..8685d2452 --- /dev/null +++ b/docs/components/mobile.vue @@ -0,0 +1,7 @@ + diff --git a/docs/components/side-nav.vue b/docs/components/side-nav.vue index 50f7e1099..17e0c9f01 100644 --- a/docs/components/side-nav.vue +++ b/docs/components/side-nav.vue @@ -62,10 +62,13 @@ - ## Button组件 ### 按钮功能 -:::demo 只接受primary, default, danger三种类型，默认default +只接受primary, default, danger三种类型，默认default。 + ```html
@@ -26,11 +17,9 @@
``` -::: ### 禁用状态 -:::demo ```html
@@ -38,11 +27,11 @@
``` -::: ### 按钮尺寸 -:::demo 只接受large, normal, small, mini四种尺寸，默认normal +只接受large, normal, small, mini四种尺寸，默认normal。 + ```html
@@ -62,11 +51,11 @@
``` -::: ### 自定义按钮标签 -:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签 +按钮默认是button标签，可以使用tag属性修改为一个a标签。 + ```html
@@ -74,10 +63,11 @@
``` -::: ### button group -:::demo 一组按钮 + +一组按钮。 + ```html
确认付款 @@ -85,8 +75,6 @@ 取消订单
``` -::: - ### API diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md index 01e8995ce..0796791ce 100644 --- a/docs/examples-docs/card.md +++ b/docs/examples-docs/card.md @@ -4,7 +4,6 @@ 当没有底部按钮时，右侧内容会居中显示。 -:::demo 不带底部按钮时，右侧内容会居中显示。 ```html ``` -::: ### 高级用法 -可以使用具名`slot`自定义对应的内容。 +可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。 -:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。 ```html ``` -::: ### API diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md index b59859f8c..52a33786f 100644 --- a/docs/examples-docs/cell.md +++ b/docs/examples-docs/cell.md @@ -20,53 +20,50 @@ export default { ### 基础用法 -:::demo 样例代码 ```html ``` -::: ### 标题带描述信息 -:::demo 传入`label`属性，属性值为描述信息的值。 +传入`label`属性，属性值为描述信息的值。 + ```html ``` -::: ### 带图标 -:::demo 传入`icon`属性 +传入`icon`属性。 + ```html ``` -::: ### 可点击的链接 -:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。 +传入`url`属性，传入`isLink`属性则会在右侧显示箭头。 + ```html ``` -::: ### 高级用法 -如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。 +如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。 -:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。 ```html @@ -78,7 +75,6 @@ export default { ``` -::: ### API diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md index c3869ccb9..9a592ef0f 100644 --- a/docs/examples-docs/dialog.md +++ b/docs/examples-docs/dialog.md @@ -30,13 +30,39 @@ export default { ### 基础用法 -:::demo ```html alert confirm + + ``` -::: ### API diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md index 915a87123..6b879b5f8 100644 --- a/docs/examples-docs/field.md +++ b/docs/examples-docs/field.md @@ -1,26 +1,11 @@ - - ## Field组件 表单中`input`或`textarea`的输入框。 ### 基础用法 -:::demo 根据`type`属性显示不同的输入框。 +根据`type`属性显示不同的输入框。 + ```html @@ -28,27 +13,26 @@ export default { ``` -::: ### 无label的输入框 -:::demo 不传入`label`属性即可。 +不传入`label`属性即可。 + ```html ``` -::: ### 监听change事件 -:::demo 监听组件的`change`事件。 +监听组件的`change`事件。 + ```html ``` -::: ### API diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md index 7a7064979..559699dab 100644 --- a/docs/examples-docs/panel.md +++ b/docs/examples-docs/panel.md @@ -1,33 +1,9 @@ - - ## Panel 面板 面板只是一个容器，里面可以放入自定义的内容。 ### 基础用法 -:::demo ```html ``` -::: ### 高级用法 使用具名`slot`自定义内容。 -:::demo ```html ``` -::: ### API diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md index cbd242a8a..1e72ad062 100644 --- a/docs/examples-docs/picker.md +++ b/docs/examples-docs/picker.md @@ -1,45 +1,12 @@ - - ## Picker组件 模仿iOS中的`UIPickerView`。 ### 基础用法 -:::demo 基础用法 ```html ``` -::: ### API diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md index 924edf591..2b481fd3b 100644 --- a/docs/examples-docs/popup.md +++ b/docs/examples-docs/popup.md @@ -1,3 +1,36 @@ +## Popup组件 + +### 基础用法 + +```html +
+ 从下方弹出popup +
+ + xxxx + + +
+ 从上方方弹出popup +
+ + 更新成功 + + +
+ 从右方弹出popup +
+ + 关闭 popup + + +
+ 从中间弹出popup +
+ + 一些内容 + + - - - -## Popup组件 - -### 基础用法 - -:::demo -```html -从下方弹出popup - - xxxx - - -从上方方弹出popup - - 更新成功 - - -从右方弹出popup - - 关闭 popup - - -从中间弹出popup - - 一些内容 - ``` -::: ### API diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md new file mode 100644 index 000000000..42b0bef2f --- /dev/null +++ b/docs/examples-docs/steps.md @@ -0,0 +1,4 @@ +## Steps 步骤条 + + + diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md index b77773cb3..926b71ab7 100644 --- a/docs/examples-docs/switch.md +++ b/docs/examples-docs/switch.md @@ -1,46 +1,7 @@ - - - ## Switch组件 ### 基础用法 -:::demo 样例代码 ```html
@@ -56,10 +17,8 @@ export default {
OFF, DISABLED
-``` - -```javascript + ``` -::: ### API diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md index 49420db32..3e2b527c3 100644 --- a/docs/examples-docs/waterfall.md +++ b/docs/examples-docs/waterfall.md @@ -1,3 +1,28 @@ +## Waterfall 瀑布流 + +### 基础用法 + +```html +
+
+
+ {{ item }} +
+
+ loading +
+
+
+ - - -## Waterfall组件 - -### 基础用法 - -:::demo 样例代码 -```html -
-
-
- {{ item }} -
-
- loading -
-
-
``` -::: ### API diff --git a/docs/examples.js b/docs/examples.js index e69de29bb..20d9fb575 100644 --- a/docs/examples.js +++ b/docs/examples.js @@ -0,0 +1,48 @@ +import Vue from 'vue'; +import VueRouter from 'vue-router'; +import App from './ExamplesApp'; +import navConfig from './nav.config.json'; +import routes from './router.config'; +import ZanUI from '../src/index'; + +import 'packages/zanui-css/src/index.css'; + +Vue.use(ZanUI); +Vue.use(VueRouter); + +let routesConfig = routes(navConfig, true); +routesConfig.push({ + path: '/', + component: function(resolve) { + require(['./components/demo-list.vue'], resolve); + } +}); +const router = new VueRouter({ + mode: 'hash', + base: __dirname, + routes: routesConfig +}); + +let indexScrollTop = 0; +router.beforeEach((route, redirect, next) => { + if (route.path !== '/') { + indexScrollTop = document.body.scrollTop; + } + document.title = route.meta.title || document.title; + next(); +}); + +router.afterEach(route => { + if (route.path !== '/') { + document.body.scrollTop = 0; + } else { + Vue.nextTick(() => { + document.body.scrollTop = indexScrollTop; + }); + } +}); + +new Vue({ // eslint-disable-line + render: h => h(App), + router +}).$mount('#app-container'); diff --git a/docs/examples/button.vue b/docs/examples/button.vue index 3574db362..6409ccc46 100644 --- a/docs/examples/button.vue +++ b/docs/examples/button.vue @@ -1,10 +1,70 @@ - + @e group { + .z-button-1 { + margin-bottom: 10px; + } + } + } + } + diff --git a/docs/examples/card.vue b/docs/examples/card.vue new file mode 100644 index 000000000..e4b99abf0 --- /dev/null +++ b/docs/examples/card.vue @@ -0,0 +1,37 @@ + + + diff --git a/docs/examples/cell.vue b/docs/examples/cell.vue new file mode 100644 index 000000000..c9f823609 --- /dev/null +++ b/docs/examples/cell.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/docs/examples/dialog.vue b/docs/examples/dialog.vue new file mode 100644 index 000000000..dd6a8b30d --- /dev/null +++ b/docs/examples/dialog.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/docs/examples/field.vue b/docs/examples/field.vue new file mode 100644 index 000000000..15ab52a08 --- /dev/null +++ b/docs/examples/field.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/docs/examples/panel.vue b/docs/examples/panel.vue new file mode 100644 index 000000000..6f1e1c270 --- /dev/null +++ b/docs/examples/panel.vue @@ -0,0 +1,80 @@ + + + diff --git a/docs/examples/picker.vue b/docs/examples/picker.vue new file mode 100644 index 000000000..a4fa84148 --- /dev/null +++ b/docs/examples/picker.vue @@ -0,0 +1,39 @@ + + + diff --git a/docs/examples/popup.vue b/docs/examples/popup.vue new file mode 100644 index 000000000..063276627 --- /dev/null +++ b/docs/examples/popup.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/docs/examples/switch.vue b/docs/examples/switch.vue new file mode 100644 index 000000000..4e8c6b519 --- /dev/null +++ b/docs/examples/switch.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/docs/examples/waterfall.vue b/docs/examples/waterfall.vue new file mode 100644 index 000000000..113f639e6 --- /dev/null +++ b/docs/examples/waterfall.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/docs/index.js b/docs/index.js index 212561ff8..2a4b794d1 100644 --- a/docs/index.js +++ b/docs/index.js @@ -1,9 +1,11 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './ExamplesDocsApp'; +import navConfig from './nav.config.json'; import routes from './router.config'; import demoBlock from './components/demo-block'; import SideNav from './components/side-nav'; +import Mobile from './components/mobile'; import Oxygen from '../src/index'; import 'packages/zanui-css/src/index.css'; @@ -12,11 +14,12 @@ Vue.use(Oxygen); Vue.use(VueRouter); Vue.component('demo-block', demoBlock); Vue.component('side-nav', SideNav); +Vue.component('mobile', Mobile); const router = new VueRouter({ mode: 'hash', base: __dirname, - routes + routes: routes(navConfig) }); let indexScrollTop = 0; diff --git a/docs/nav.config.json b/docs/nav.config.json index c7e8e536f..79637c177 100644 --- a/docs/nav.config.json +++ b/docs/nav.config.json @@ -1,7 +1,7 @@ { "zh-CN": [ { - "name": "oxygen组件", + "name": "ZanUI组件", "groups": [ { "groupName": "CSS组件", diff --git a/docs/router.config.js b/docs/router.config.js index 6bc6286cf..0c63c8439 100644 --- a/docs/router.config.js +++ b/docs/router.config.js @@ -1,6 +1,4 @@ -import navConfig from './nav.config.json'; - -const registerRoute = (navConfig) => { +const registerRoute = (navConfig, isExample) => { let route = []; let navs = navConfig['zh-CN']; navs.forEach(nav => { @@ -23,14 +21,14 @@ const registerRoute = (navConfig) => { route.push({ path: '/component' + page.path, component: function(resolve) { - require([`./examples-docs${page.path}.md`], resolve); + require([isExample ? `./examples${page.path}.vue` : `./examples-docs${page.path}.md`], resolve); } }); } + // console.log(route); + return route; }; -let route = registerRoute(navConfig); - -export default route; +export default registerRoute; diff --git a/examples.html b/examples.html index 3de3e8494..908ff24d3 100644 --- a/examples.html +++ b/examples.html @@ -2,8 +2,8 @@ - - Oxygen + + ZanUI diff --git a/index.html b/index.html index b44af6e28..5b0f386b1 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Oxygen + ZanUI diff --git a/packages/card/package.json b/packages/card/package.json index 7dbfa2900..79afd27c5 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -1,10 +1,10 @@ { - "name": "<%= name %>", - "version": "<%= version %>", - "description": "<%= description %>", - "main": "./lib/index.js", - "author": "<%= author %>", - "license": "<%= license %>", + "name": "@youzan/z-card", + "version": "0.0.1", + "description": "card component", + "main": "./index.js", + "author": "zhangmin ", + "license": "MIT", "devDependencies": {}, "dependencies": {} } diff --git a/packages/panel/package.json b/packages/panel/package.json index 1da2d27ee..1c9bb7c54 100644 --- a/packages/panel/package.json +++ b/packages/panel/package.json @@ -1,7 +1,7 @@ { "name": "@youzan/z-panel", "version": "0.0.1", - "description": "picker component", + "description": "panel component", "main": "./index.js", "author": "zhangmin ", "license": "MIT", diff --git a/packages/steps/CHANGELOG.md b/packages/steps/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/steps/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/steps/README.md b/packages/steps/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/steps/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/steps/index.js b/packages/steps/index.js new file mode 100644 index 000000000..aaf50e801 --- /dev/null +++ b/packages/steps/index.js @@ -0,0 +1,3 @@ +import Steps from './src/steps'; + +export default Steps; diff --git a/packages/steps/package.json b/packages/steps/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/steps/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/steps/src/steps.vue b/packages/steps/src/steps.vue new file mode 100644 index 000000000..0d2c38ebd --- /dev/null +++ b/packages/steps/src/steps.vue @@ -0,0 +1,18 @@ + + + diff --git a/packages/zanui-css/src/button.css b/packages/zanui-css/src/button.css index ec35e2f45..80a471c1f 100644 --- a/packages/zanui-css/src/button.css +++ b/packages/zanui-css/src/button.css @@ -53,6 +53,7 @@ } @m normal { + padding: 0 10px; font-size: 14px; } diff --git a/packages/zanui-css/src/button_group.css b/packages/zanui-css/src/button_group.css index e2e74cd6f..855a0cdf2 100644 --- a/packages/zanui-css/src/button_group.css +++ b/packages/zanui-css/src/button_group.css @@ -23,6 +23,7 @@ } @b button-1 { @mixin button-wrap; + padding-right: 0; width: 100%; } @b button-2 { diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css index a4233691b..00f54ad47 100644 --- a/packages/zanui-css/src/index.css +++ b/packages/zanui-css/src/index.css @@ -14,3 +14,4 @@ @import './radio.css'; @import './switch.css'; @import './panel.css'; +@import './steps.css'; diff --git a/packages/zanui-css/src/steps.css b/packages/zanui-css/src/steps.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/index.js b/src/index.js index 12bab1ca2..ae6b13247 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ import Waterfall from '../packages/waterfall/index.js'; import Loading from '../packages/loading/index.js'; import Panel from '../packages/panel/index.js'; import Card from '../packages/card/index.js'; +import Steps from '../packages/steps/index.js'; const install = function(Vue) { if (install.installed) return; @@ -30,6 +31,7 @@ const install = function(Vue) { Vue.component(Loading.name, Loading); Vue.component(Panel.name, Panel); Vue.component(Card.name, Card); + Vue.component(Steps.name, Steps); }; // auto install @@ -54,5 +56,6 @@ module.exports = { Waterfall, Loading, Panel, - Card + Card, + Steps };