card component

components.json

@@ -10,5 +10,7 @@
   "dialog": "./packages/dialog/index.js",
   "picker": "./packages/picker/index.js",
   "radio-group": "./packages/radio-group/index.js",
-  "loading": "./packages/loading/index.js"
+  "loading": "./packages/loading/index.js",
+  "panel": "./packages/panel/index.js",
+  "card": "./packages/card/index.js"
 }

docs/examples-docs/card.md

@@ -0,0 +1,60 @@
+## Card 图文组件
+
+### 基础用法
+
+当没有底部按钮时，右侧内容会居中显示。
+
+:::demo 不带底部按钮时，右侧内容会居中显示。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="描述"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</z-card>
+
+```
+:::
+
+### 高级用法
+
+可以使用具名`slot`自定义对应的内容。
+
+:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="商品SKU1，商品SKU2"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="z-card__row" slot="title">
+    <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="z-card__price">¥ 2.00</span>
+  </div>
+  <div class="z-card__row" slot="desc">
+    <h4 class="z-card__desc">商品sku</h4>
+    <span class="z-card__num">x 2</span>
+  </div>
+  <div class="z-card__footer" slot="footer">
+    <z-button size="mini">按钮一</z-button>
+    <z-button size="mini">按钮二</z-button>
+  </div>
+</z-card>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| thumb | 左侧图片 | string  | ''          | ''          |
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| title | 自定义标题 |
+| desc | 自定义描述 |
+| tags | 自定义tags |
+| footer | 自定义footer |

docs/nav.config.json

@@ -14,10 +14,6 @@
               "path": "/cell",
               "title": "Cell"
             },
-            {
-              "path": "/loading",
-              "title": "Loading"
-            },
             {
               "path": "/progress",
               "title": "Progress"

packages/card/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/card/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)

packages/card/index.js

@@ -0,0 +1,3 @@
+import Card from './src/card';
+
+export default Card;

packages/card/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/card/src/card.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="z-card">
+    <img :src="thumb" alt="" class="z-card__img">
+    <div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
+      <div class="z-card__info">
+        <slot name="title">
+          <h4 v-text="title" class="z-card__title"></h4>
+        </slot>
+        <slot name="desc">
+          <p v-if="desc" v-text="desc" class="z-card__title"></p>
+        </slot>
+        <slot name="tags"></slot>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-card',
+  props: {
+    thumb: {
+      type: String,
+      required: true
+    },
+    title: String,
+    desc: String
+  }
+};
+</script>

packages/panel/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/panel/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)

packages/panel/index.js

@@ -0,0 +1,3 @@
+import Panel from './src/panel';
+
+export default Panel;

packages/panel/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/z-panel",
+  "version": "0.0.1",
+  "description": "picker component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/panel/src/panel.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="z-panel">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-panel',
+  props: []
+};
+</script>

packages/radio/src/radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <z-cell
+  <div
     class="z-radio"
     :class="{
       'is-disabled': disabled
@@ -11,19 +11,13 @@
     <span class="z-radio__label">
       <slot></slot>
     </span>
-  </z-cell>
+  </div>
 </template>
 
 <script>
-import zCell from 'packages/cell';
-
 export default {
   name: 'z-radio',
 
-  components: {
-    zCell
-  },
-
   props: {
     disabled: Boolean,
     value: {},

packages/zanui-css/src/button.css

@@ -1,4 +1,4 @@
-@import "./common/var.pcss";
+@import "./common/var.css";
 
 @component-namespace z {
   @b button {

packages/zanui-css/src/card.css

@@ -0,0 +1,82 @@
+@import "./mixins/ellipsis.css";
+
+@component-namespace z {
+  @b card {
+    padding: 5px 15px;
+    background: #FAFAFA;
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 10px;
+
+    @e img {
+      float: left;
+      width: 90px;
+      height: 90px;
+      border: 0;
+    }
+
+    @e content {
+      margin-left: 100px;
+      display: table;
+
+      @when center {
+        display: table;
+        height: 90px;
+
+        .z-card__info {
+          display: table-cell;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    @e row {
+      overflow: hidden;
+      padding-right: 80px;
+      position: relative;
+    }
+
+    @e title {
+      line-height: 20px;
+      color: #333;
+      max-height: 40px;
+      margin-bottom: 5px;
+      @mixin multi-ellipsis 2;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e price {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e num {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e footer {
+      position: absolute;
+      right: 15px;
+      bottom: 5px;
+
+      .z-button {
+        margin-left: 5px;
+      }
+    }
+  }
+}

packages/zanui-css/src/cell.css

@@ -1,5 +1,5 @@
-@import "./common/var.pcss";
+@import "./common/var.css";
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
   @b cell-group {

packages/zanui-css/src/dialog.css

@@ -1,4 +1,4 @@
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
   @b dialog-wrapper {

packages/zanui-css/src/field.css

@@ -1,5 +1,5 @@
-@import "./common/var.pcss";
+@import "./common/var.css";
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
   @b field {

packages/zanui-css/src/index.css

@@ -4,6 +4,7 @@
 @import './button.css';
 @import './button_group.css';
 @import './cell.css';
+@import './card.css';
 @import './dialog.css';
 @import './field.css';
 @import './icon.css';
@@ -12,3 +13,4 @@
 @import './popup.css';
 @import './radio.css';
 @import './switch.css';
+@import './panel.css';

packages/zanui-css/src/mixins/ellipsis.css

@@ -0,0 +1,7 @@
+@define-mixin multi-ellipsis $lines {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}

packages/zanui-css/src/panel.css

@@ -0,0 +1,7 @@
+@component-namespace z {
+  @b panel {
+    padding: 5px 15px;
+    background: #D8D8D8;
+    overflow: hidden;
+  }
+}

src/index.js

@@ -10,6 +10,8 @@ import Dialog from '../packages/dialog/index.js';
 import Picker from '../packages/picker/index.js';
 import RadioGroup from '../packages/radio-group/index.js';
 import Loading from '../packages/loading/index.js';
+import Panel from '../packages/panel/index.js';
+import Card from '../packages/card/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -25,6 +27,8 @@ const install = function(Vue) {
   Vue.component(Picker.name, Picker);
   Vue.component(RadioGroup.name, RadioGroup);
   Vue.component(Loading.name, Loading);
+  Vue.component(Panel.name, Panel);
+  Vue.component(Card.name, Card);
 };
 
 // auto install
@@ -46,5 +50,7 @@ module.exports = {
   Dialog,
   Picker,
   RadioGroup,
-  Loading
+  Loading,
+  Panel,
+  Card
 };