Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

2025-04-06 03:57:59 +08:00 · 2017-03-05 16:58:18 +08:00 · 2017-03-05 16:58:18 +08:00 · 6f3f98c601
commit 6f3f98c601
parent 8856af91fd 5e976c8e20
23 changed files with 338 additions and 124 deletions
--- a/components.json
+++ b/components.json
@ -22,5 +22,7 @@
  "badge": "./packages/badge/index.js",
  "search": "./packages/search/index.js",
  "step": "./packages/step/index.js",
-  "image-preview": "./packages/image-preview/index.js"
+  "image-preview": "./packages/image-preview/index.js",
+  "col": "./packages/col/index.js",
+  "row": "./packages/row/index.js"
 }
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@ -64,6 +64,21 @@
 </div>
 ```

+### loading按钮
+
+表示loading状态
+
+```html 
+<div class="zan-button-group">
+  <div class="zan-button-1">
+    <zan-button type="primary" loading>111</zan-button>
+  </div>
+  <div class="zan-button-1">
+    <zan-button loading>222</zan-button>
+  </div>
+</div>
+```
+
 ### button group

 一组按钮。
--- a/docs/examples-docs/layout.md
+++ b/docs/examples-docs/layout.md
--- a/docs/examples/button.vue
+++ b/docs/examples/button.vue
@ -2,52 +2,62 @@
  <div class="page-button">
    <h1 class="page-title">Button</h1>
    <h2 class="page-sub-title">按钮功能</h2>
-    <div class="zan-button-group">
-      <div class="zan-button-1">
-        <zan-button>default</zan-button>
-      </div>
-      <div class="zan-button-1">
-        <zan-button type="primary">primary</zan-button>
-      </div>
-      <div class="zan-button-1">
-        <zan-button type="danger">danger</zan-button>
-      </div>
-    </div>
+    <zan-row>
+      <zan-col span="24">
+        <zan-button block>default</zan-button>
+      </zan-col>
+      <zan-col span="24">
+        <zan-button type="primary" block>primary</zan-button>
+      </zan-col>
+      <zan-col span="24">
+        <zan-button type="danger" block>danger</zan-button>
+      </zan-col>
+    </zan-row>

    <h2 class="page-sub-title">禁用状态</h2>
-    <div class="zan-button-group">
-      <div class="zan-button-1">
-        <zan-button disabled>diabled</zan-button>
-      </div>
-    </div>
+    <zan-row>
+      <zan-col span="24">
+        <zan-button disabled block>diabled</zan-button>
+      </zan-col>
+    </zan-row>

    <h2 class="page-sub-title">按钮尺寸</h2>
-    <div class="zan-button-group">
-      <div class="zan-button-1">
+    <zan-row>
+      <zan-col span="24">
        <zan-button size="large">large</zan-button>
-      </div>
-    </div>
-    <div class="zan-button-group">
-      <div class="zan-button-3">
-        <zan-button type="primary">normal</zan-button>
-      </div>
-      <div class="zan-button-3">
-        <zan-button size="small">small</zan-button>
-      </div>
-      <div class="zan-button-3">
-        <zan-button size="mini">mini</zan-button>
-      </div>
-    </div>
+      </zan-col>
+    </zan-row>
+    <zan-row gutter="10">
+      <zan-col span="8">
+        <zan-button type="primary" block>normal</zan-button>
+      </zan-col>
+      <zan-col span="8">
+        <zan-button size="small" block>small</zan-button>
+      </zan-col>
+      <zan-col span="8">
+        <zan-button size="mini" block>mini</zan-button>
+      </zan-col>
+    </zan-row>

    <h2 class="page-sub-title">自定义按钮标签</h2>
-    <div class="zan-button-group">
-      <div class="zan-button-1">
+    <zan-row>
+      <zan-col span="24">
        <zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
-      </div>
-    </div>
+      </zan-col>
+    </zan-row>
+
+    <h2 class="page-sub-title">loading</h2>
+    <zan-row>
+      <zan-col span="24">
+        <zan-button type="primary" loading block>loading</zan-button>
+      </zan-col>
+      <zan-col span="24">
+        <zan-button loading block></zan-button>
+      </zan-col>
+    </zan-row>

    <h2 class="page-sub-title">button group</h2>
-    <div class="zan-button-group">
+    <div class="button-group">
      <zan-button type="primary" size="small">确认付款</zan-button>
      <zan-button size="small">确认收货</zan-button>
      <zan-button size="small">取消订单</zan-button>
@ -62,11 +72,11 @@
    }
  }
  @component-namespace zan {
-    @b button-group {
-      .zan-button-1 {
-        margin-bottom: 10px;
-      }
+    @b col {
+      margin-bottom: 10px;
    }
  }
-
+  .button-group {
+    font-size: 0;
+  }
 </style>
--- a/docs/examples/layout.vue
+++ b/docs/examples/layout.vue
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@ -61,17 +61,23 @@ export default {
          'zan-button--' + type,
          'zan-button--' + size,
          {
-            'z-button--disabled': disabled,
-            'z-button--loading': loading,
-            'z-button--block': block
+            'zan-button--disabled': disabled,
+            'zan-button--loading': loading,
+            'zan-button--block': block
          }
        ]}
        onClick={this.handleClick}
      >
        {
-          loading ? <i class="zan-icon-loading"></i> : null
+          loading ?
+            <zan-loading
+              class="zan-button__icon-loading"
+              type="circle"
+              color={type === 'default' ? 'black' : 'white'}>
+            </zan-loading> :
+            null
        }
-        <span class="zan-button-text">{this.$slots.default}</span>
+        <span class="zan-button__text">{this.$slots.default}</span>
      </Tag>
    );
  }
--- a/packages/col/CHANGELOG.md
+++ b/packages/col/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/col/README.md
+++ b/packages/col/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)
--- a/packages/col/index.js
+++ b/packages/col/index.js
@ -0,0 +1,3 @@
+import Col from './src/col';
+
+export default Col;
--- a/packages/col/package.json
+++ b/packages/col/package.json
@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/col/src/col.vue
+++ b/packages/col/src/col.vue
@ -0,0 +1,38 @@
+<template>
+  <div
+    :class="[
+      `${prefix}-col`,
+      {
+        [`${prefix}-col-${span}`]: span,
+        [`${prefix}-col-offset-${offset}`]: offset,
+      }
+    ]"
+    :style="style">
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'zan-col',
+    props: {
+      span: [Number, String],
+      offset: [Number, String],
+      prefix: {
+        type: String,
+        default: 'zan'
+      }
+    },
+    computed: {
+      gutter() {
+        return Number(this.$parent.gutter);
+      },
+      style() {
+        const padding = `${this.gutter / 2}px`;
+        return this.gutter ?
+          { paddingLeft: padding, paddingRight: padding } :
+          null;
+      }
+    }
+  };
+</script>
--- a/packages/row/CHANGELOG.md
+++ b/packages/row/CHANGELOG.md
@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
--- a/packages/row/README.md
+++ b/packages/row/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)
--- a/packages/row/index.js
+++ b/packages/row/index.js
@ -0,0 +1,3 @@
+import Row from './src/row';
+
+export default Row;
--- a/packages/row/package.json
+++ b/packages/row/package.json
@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
--- a/packages/row/src/row.vue
+++ b/packages/row/src/row.vue
@ -0,0 +1,29 @@
+<template>
+  <div
+    :class="`${prefix}-row`"
+    :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'zan-row',
+    props: {
+      prefix: {
+        type: String,
+        default: 'zan'
+      },
+      gutter: [Number, String]
+    },
+    computed: {
+      style() {
+        const gutter = Number(this.gutter);
+        const margin = `-${gutter / 2}px`;
+        return gutter ?
+          { marginLeft: margin, marginRight: margin } :
+          {};
+      }
+    }
+  };
+</script>
--- a/packages/zanui-css/src/button.css
+++ b/packages/zanui-css/src/button.css
@ -1,4 +1,5 @@
-@import "./common/var.css";
+@import './common/var';
+@import './loading';

@component-namespace zan {
  @b button {
@ -27,6 +28,10 @@
      opacity: .3;
    }

+    & + .zan-button {
+      margin-left: 10px;
+    }
+
    @m default {
      color: $button-default-color;
      background-color: $button-default-background-color;
@ -73,6 +78,10 @@
      height: 22px;
      line-height: 20px;
      font-size: 10px;
+
+      & + .zan-button--mini {
+        margin-left: 5px;
+      }
    }

    @m disabled {
@ -83,6 +92,20 @@

    @m block {
      display: block;
+      width: 100%;
+    }
+
+    @m loading {
+      .zan-button__text {
+        display: none;
+      }
+    }
+
+    @e icon-loading {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
    }
  }
 }
--- a/packages/zanui-css/src/button_group.css
+++ b/packages/zanui-css/src/button_group.css
@ -15,12 +15,7 @@
  @b button-group {
    font-size: 0;

-    > .zan-button {
-      margin-right: 10px;
-      &::last-child {
-        margin-right: 0;
-      }
-    }
+
  }
  @b button-1 {
    @mixin button-wrap;
--- a/packages/zanui-css/src/col.css
+++ b/packages/zanui-css/src/col.css
@ -0,0 +1,52 @@
+.zan-col {
+  float: left;
+  box-sizing: border-box;
+}
+.zan-col-1 { width: 4.166666666666667%; }
+.zan-col-2 { width: 8.333333333333334%; }
+.zan-col-3 { width: 12.5%; }
+.zan-col-4 { width: 16.666666666666668%; }
+.zan-col-5 { width: 20.833333333333336%; }
+.zan-col-6 { width: 25%; }
+.zan-col-7 { width: 29.166666666666668%; }
+.zan-col-8 { width: 33.333333333333336%; }
+.zan-col-9 { width: 37.5%; }
+.zan-col-10 { width: 41.66666666666667%; }
+.zan-col-11 { width: 45.833333333333336%; }
+.zan-col-12 { width: 50%; }
+.zan-col-13 { width: 54.16666666666667%; }
+.zan-col-14 { width: 58.333333333333336%; }
+.zan-col-15 { width: 62.50000000000001%; }
+.zan-col-16 { width: 66.66666666666667%; }
+.zan-col-17 { width: 70.83333333333334%; }
+.zan-col-18 { width: 75%; }
+.zan-col-19 { width: 79.16666666666667%; }
+.zan-col-20 { width: 83.33333333333334%; }
+.zan-col-21 { width: 87.5%; }
+.zan-col-22 { width: 91.66666666666667%; }
+.zan-col-23 { width: 95.83333333333334%; }
+.zan-col-24 { width: 100%; }
+.zan-col-offset-1 { margin-left: 4.166666666666667%; }
+.zan-col-offset-2 { margin-left: 8.333333333333334%; }
+.zan-col-offset-3 { margin-left: 12.5%; }
+.zan-col-offset-4 { margin-left: 16.666666666666668%; }
+.zan-col-offset-5 { margin-left: 20.833333333333336%; }
+.zan-col-offset-6 { margin-left: 25%; }
+.zan-col-offset-7 { margin-left: 29.166666666666668%; }
+.zan-col-offset-8 { margin-left: 33.333333333333336%; }
+.zan-col-offset-9 { margin-left: 37.5%; }
+.zan-col-offset-10 { margin-left: 41.66666666666667%; }
+.zan-col-offset-11 { margin-left: 45.833333333333336%; }
+.zan-col-offset-12 { margin-left: 50%; }
+.zan-col-offset-13 { margin-left: 54.16666666666667%; }
+.zan-col-offset-14 { margin-left: 58.333333333333336%; }
+.zan-col-offset-15 { margin-left: 62.50000000000001%; }
+.zan-col-offset-16 { margin-left: 66.66666666666667%; }
+.zan-col-offset-17 { margin-left: 70.83333333333334%; }
+.zan-col-offset-18 { margin-left: 75%; }
+.zan-col-offset-19 { margin-left: 79.16666666666667%; }
+.zan-col-offset-20 { margin-left: 83.33333333333334%; }
+.zan-col-offset-21 { margin-left: 87.5%; }
+.zan-col-offset-22 { margin-left: 91.66666666666667%; }
+.zan-col-offset-23 { margin-left: 95.83333333333334%; }
+.zan-col-offset-24 { margin-left: 100%; }
--- a/packages/zanui-css/src/common/var.css
+++ b/packages/zanui-css/src/common/var.css
@ -20,9 +20,11 @@ $c-background: #f8f8f8;
 $button-primary-color: $c-white;
 $button-primary-background-color: $c-green-wx;
 $button-primary-border-color: #0a0;
+
 $button-default-color: $c-black;
 $button-default-background-color: $c-white;
 $button-default-border-color: #bbb;
+
 $button-danger-color: $c-white;
 $button-danger-background-color: #f44;
 $button-danger-border-color: #e33;
@ -30,71 +32,3 @@ $button-danger-border-color: #e33;
 $button-disabled-color: $c-gray-dark;
 $button-disabled-background-color: $c-gray-light;
 $button-disabled-border-color: #cacaca;
-
-:root{
-
-  /* zan-index
- -------------------------- */
-  --index-normal: 1;
-  --index-top: 1000;
-  --index-popper: 2000;
-
-  /* Link
-  -------------------------- */
-  --link-color: #475669;
-  --link-hover-color: var(--color-primary);
-
-  /* Border
-  -------------------------- */
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-color-base: var(--color-grey);
-  --border-color-hover: #8492a6;
-  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
-  --border-radius-base: 4px;
-  --border-radius-small: 2px;
-  --border-radius-circle: 100%;
-  --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
-
-  /* Box-shadow
-  -------------------------- */
-  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
-  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
-
-  /* Fill
-  -------------------------- */
-  --fill-base: var(--color-white);
-
-  /* Font
-  -------------------------- */
-  --font-size-base: 14px;
-  --font-color-base: #1f2d3d;
-  --font-color-disabled-base: #bbb;
-
-  /* Size
-  -------------------------- */
-  --size-base: 14px;
-
-
-  /* Disable base
-  -------------------------- */
-  --disabled-fill-base: #EFF2F7;
-  --disabled-color-base: #bbb;
-  --disabled-border-base: #D3DCE6;
-
-  /* Icon
-  -------------------------- */
-  --icon-color: #666;
-
-  /* Button
-  -------------------------- */
-
-  --button-default-color: #656b79;
-  --button-default-background-color: #f6f8fa;
-  --button-default-plain-color: #5a5a5a;
-  --button-default-box-shadow: 0 0 1px #b8bbbf;
-  --button-primary-color: #fff;
-  --button-primary-background-color: #06BF04;
-  --button-danger-color: #fff;
-  --button-danger-background-color: #ef4f4f;
-}
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@ -2,7 +2,6 @@
  css组件库入口，组装成css组件库
 */
@import './button.css';
-@import './button_group.css';
@import './cell.css';
@import './card.css';
@import './dialog.css';
@ -19,4 +18,6 @@
@import './steps.css';
@import './tag.css';
@import './checkbox.css';
+@import './col.css';
+@import './row.css';
@import './image_preview.css';
--- a/packages/zanui-css/src/row.css
+++ b/packages/zanui-css/src/row.css
@ -0,0 +1,8 @@
+.zan-row {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  zoom: 1;
+}
--- a/src/index.js
+++ b/src/index.js
@ -22,6 +22,8 @@ import Badge from '../packages/badge/index.js';
 import Search from '../packages/search/index.js';
 import Step from '../packages/step/index.js';
 import ImagePreview from '../packages/image-preview/index.js';
+import Col from '../packages/col/index.js';
+import Row from '../packages/row/index.js';

 const install = function(Vue) {
  if (install.installed) return;
@ -47,6 +49,9 @@ const install = function(Vue) {
  Vue.component(Badge.name, Badge);
  Vue.component(Search.name, Search);
  Vue.component(Step.name, Step);
+  Vue.component(ImagePreview.name, ImagePreview);
+  Vue.component(Col.name, Col);
+  Vue.component(Row.name, Row);
 };

 // auto install
@ -80,5 +85,7 @@ module.exports = {
  Badge,
  Search,
  Step,
-  ImagePreview
+  ImagePreview,
+  Col,
+  Row
 };