From 522830aac5846e9853cd554bd5cb81213a145a35 Mon Sep 17 00:00:00 2001
From: zhuxiang <zhuxiang@qima-inc.com>
Date: Fri, 3 Mar 2017 14:08:33 +0800
Subject: [PATCH] tabs almost

---
 components.json                  |   4 +-
 docs/examples-docs/tab.md        |  60 +++++++++++++++++++
 docs/examples/tab.vue            |  49 +++++++++++++++
 packages/tab/CHANGELOG.md        |   8 +++
 packages/tab/README.md           |  26 ++++++++
 packages/tab/index.js            |   2 +
 packages/tab/package.json        |  10 ++++
 packages/tab/src/tab.vue         |  37 ++++++++++++
 packages/tab/src/tabs.vue        |  86 ++++++++++++++++++++++++++
 packages/tabs/index.js           |   3 +
 packages/zanui-css/src/index.css |   1 +
 packages/zanui-css/src/tab.css   | 100 +++++++++++++++++++++++++++++++
 src/index.js                     |   8 ++-
 13 files changed, 392 insertions(+), 2 deletions(-)
 create mode 100644 docs/examples-docs/tab.md
 create mode 100644 docs/examples/tab.vue
 create mode 100644 packages/tab/CHANGELOG.md
 create mode 100644 packages/tab/README.md
 create mode 100644 packages/tab/index.js
 create mode 100644 packages/tab/package.json
 create mode 100644 packages/tab/src/tab.vue
 create mode 100644 packages/tab/src/tabs.vue
 create mode 100644 packages/tabs/index.js
 create mode 100644 packages/zanui-css/src/tab.css

diff --git a/components.json b/components.json
index 4cd925021..0f7b1a387 100644
--- a/components.json
+++ b/components.json
@@ -21,5 +21,7 @@
   "badge-group": "./packages/badge-group/index.js",
   "badge": "./packages/badge/index.js",
   "search": "./packages/search/index.js",
-  "step": "./packages/step/index.js"
+  "step": "./packages/step/index.js",
+  "tabs": "./packages/tabs/index.js",
+  "tab": "./packages/tab/index.js"
 }
diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md
new file mode 100644
index 000000000..a6f3f2735
--- /dev/null
+++ b/docs/examples-docs/tab.md
@@ -0,0 +1,60 @@
+## Tab 组件
+
+### 基础用法
+
+```html
+<zan-tabs>
+  <zan-tab tab-key="0" title="选项一">内容一</zan-tab>
+  <zan-tab tab-key="1" title="选项二">内容二</zan-tab>
+  <zan-tab tab-key="2" title="选项三">内容三</zan-tab>
+  <zan-tab tab-key="3" title="选项四">内容四</zan-tab>
+  <zan-tab tab-key="4" title="选项五">内容五</zan-tab>
+</zan-tabs>
+```
+
+### 自定义样式用法
+
+```html
+<zan-tabs active-tab-key="2" tabs-class-name="custom-tabwrap" tab-class-name="custom-tab">
+    <zan-tab tab-key="0" title="选项一" tab-pane-class-name="custom-pane">内容一</zan-tab>
+    <zan-tab tab-key="1" title="选项二" tab-pane-class-name="custom-pane">内容二</zan-tab>
+    <zan-tab tab-key="2" title="选项三" tab-pane-class-name="custom-pane">内容三</zan-tab>
+    <zan-tab tab-key="3" title="选项四" tab-pane-class-name="custom-pane">内容四</zan-tab>
+    <zan-tab tab-key="4" title="选项五" tab-pane-class-name="custom-pane">内容五</zan-tab>
+</zan-tabs>
+<style>
+  .page-tab {
+    padding: 0 15px;
+  }
+  .custom-tabwrap .zan-tab-active{
+    color: #20a0ff;
+  }
+  .custom-tabwrap .zan-tabs-nav-bar{
+    background: #20a0ff;
+  }
+  .custom-tab {
+    font-weight: bold;
+  }
+  .custom-pane {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+</style>
+```
+
+
+### zan-tabs 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/tab.vue b/docs/examples/tab.vue
new file mode 100644
index 000000000..789d1210d
--- /dev/null
+++ b/docs/examples/tab.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="page-tab">
+    <h1 class="page-title">Tab</h1>
+    
+    <h2 class="page-sub-title">基础用法line</h2>
+    <zan-tabs>
+      <zan-tab tab-key="0" title="选项一">内容一</zan-tab>
+      <zan-tab tab-key="1" title="选项二">内容二</zan-tab>
+      <zan-tab tab-key="2" title="选项三">内容三</zan-tab>
+      <zan-tab tab-key="3" title="选项四">内容四</zan-tab>
+      <zan-tab tab-key="4" title="选项五">内容五</zan-tab>
+    </zan-tabs>
+
+    <h2 class="page-sub-title" style="margin-top: 50px;">基础用法card</h2>
+    <zan-tabs class-type="card">
+      <zan-tab tab-key="0" title="选项一">内容一</zan-tab>
+      <zan-tab tab-key="1" title="选项二">内容二</zan-tab>
+      
+    </zan-tabs>
+    
+    <h2 class="page-sub-title" style="margin-top: 50px;">自定义样式用法</h2>
+    <zan-tabs active-tab-key="2" tabs-class-name="custom-tabwrap" tab-class-name="custom-tab">
+      <zan-tab tab-key="0" title="选项一" tab-pane-class-name="custom-pane"><div class="test">内容一</div></zan-tab>
+      <zan-tab tab-key="1" title="选项二" tab-pane-class-name="custom-pane">内容二</zan-tab>
+      <zan-tab tab-key="2" title="选项三" tab-pane-class-name="custom-pane">内容三</zan-tab>
+      <zan-tab tab-key="3" title="选项四" tab-pane-class-name="custom-pane">内容四</zan-tab>
+      <zan-tab tab-key="4" title="选项五" tab-pane-class-name="custom-pane">内容五</zan-tab>
+    </zan-tabs>
+  </div>
+</template>
+<style>
+  .page-tab {
+    padding: 0 15px;
+  }
+  .custom-tabwrap .zan-tab-active{
+    color: #20a0ff;
+  }
+  .custom-tabwrap .zan-tabs-nav-bar{
+    background: #20a0ff;
+  }
+  .custom-tab {
+    font-weight: bold;
+  }
+  .custom-pane {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/tab/CHANGELOG.md b/packages/tab/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/tab/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/tab/README.md b/packages/tab/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/tab/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/tab/index.js b/packages/tab/index.js
new file mode 100644
index 000000000..551749afb
--- /dev/null
+++ b/packages/tab/index.js
@@ -0,0 +1,2 @@
+import Tab from './src/tab';
+export default Tab;
diff --git a/packages/tab/package.json b/packages/tab/package.json
new file mode 100644
index 000000000..7dbfa2900
--- /dev/null
+++ b/packages/tab/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/tab/src/tab.vue b/packages/tab/src/tab.vue
new file mode 100644
index 000000000..ed9dd328b
--- /dev/null
+++ b/packages/tab/src/tab.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="zan-tabs-pane" :class="classNames">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'zan-tab',
+    props: {
+      // 对应 Tabs 组件的 activeKey
+      tabKey: {
+        type: [Number, String],
+        required: true
+      },
+      // 选项卡头显示文字
+      title: {
+        type: String,
+        required: true
+      },
+      tabPaneClassName: {
+        type: String
+      }
+    },
+    computed: {
+      classNames() {
+        return [
+          {'is-select': this.tabKey == this.$parent.switchActiveTabKey},
+          this.tabPaneClassName
+        ];
+      }
+    },
+    created () {
+      this.$parent.tabCreate(this.tabKey, this.title);
+    }
+  };
+</script>
diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue
new file mode 100644
index 000000000..ac87fe140
--- /dev/null
+++ b/packages/tab/src/tabs.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="zan-tabs">
+    <div class="zan-tabs-nav" :class="classNames">
+      <div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
+      <div
+        v-for="tab in tabs"
+        class="zan-tab J-tab-key"
+        :class="[{'zan-tab-active': tab.tabKey == switchActiveTabKey}, tabClassName]"
+        :data-key="tab.tabKey"
+        @click="handleTabClick(tab.tabKey)"
+      >
+        {{ tab.title }}
+      </div>
+    </div>
+    <div class="zan-tabs-content"><slot></slot></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'zan-tabs',
+    props: {
+      // 外部传入的激活的tab标签
+      activeTabKey: {
+        type: [Number, String],
+        default: 0
+      },
+      // 是默认的line还是card
+      classType: {
+        type: String,
+        default: 'line'
+      },
+      // nav的wrap的样式
+      tabsClassName: {
+        type: String,
+        default: ''
+      },
+      // 每个nav里tab的样式
+      tabClassName: {
+        type: String
+      }
+    },
+    data() {
+      return {
+        tabs: [],
+        isReady: false,
+        switchActiveTabKey: this.activeTabKey
+      };
+    },
+    computed: {
+      classNames () {
+        return [ `zan-tabs-${this.classType}`, this.tabsClassName ]
+      },
+      navBarStyle () {
+        if(!this.isReady) return;
+        let tabKey = this.switchActiveTabKey;
+        let selectors = `.J-tab-key[data-key="${tabKey}"]`;
+        let elem = this.$el.querySelector(selectors) || {};
+        let w = `${elem.offsetWidth || 0}px`;
+        let x = `${elem.offsetLeft || 0}px`;
+        return {
+          width: w,
+          transform: `translate3d(${x}, 0px, 0px)`
+        }
+      }
+    },
+    methods: {
+      tabCreate (tabKey, title) {
+        this.tabs.push({
+          tabKey: tabKey,
+          title: title
+        });
+      },
+      handleTabClick(tabKey) {
+        this.switchActiveTabKey = tabKey;
+      }
+    },
+    mounted () {
+      //页面载入完成
+      this.$nextTick(() => {
+        // 可以开始触发在computed中关于nav-bar的css动画
+        this.isReady = true;
+      })
+    }
+  };
+</script>
diff --git a/packages/tabs/index.js b/packages/tabs/index.js
new file mode 100644
index 000000000..5db150464
--- /dev/null
+++ b/packages/tabs/index.js
@@ -0,0 +1,3 @@
+import Tabs from '../tab/src/tabs';
+
+export default Tabs;
diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css
index 3f89bef3c..3584e581d 100644
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@@ -19,3 +19,4 @@
 @import './steps.css';
 @import './tag.css';
 @import './checkbox.css';
+@import './tab.css';
diff --git a/packages/zanui-css/src/tab.css b/packages/zanui-css/src/tab.css
new file mode 100644
index 000000000..9286383c4
--- /dev/null
+++ b/packages/zanui-css/src/tab.css
@@ -0,0 +1,100 @@
+@import "./common/var.css";
+@import "./mixins/border_retina.css";
+@component-namespace zan {
+    @b tabs {
+        position: relative;
+    }
+    @b tabs-line {
+        height: 44px;
+        background-color: $c-white;
+        &::after {
+            @mixin border-retina (top);
+            @mixin border-retina (bottom);
+        }
+        @b tabs-nav-bar {
+            display: block;
+        }
+    }
+    @b tabs-card {
+        height: 28px;
+        margin: 0 15px;
+        background-color: $c-white;
+        border-radius: 2px;
+        border: 1px solid #666666;
+        overflow: hidden;
+        .zan-tabs-nav-bar {
+            display: none;
+        }
+        .zan-tab {
+            color: #666666;
+            line-height: 28px;
+            border-right: 1px solid #666666;
+            &:last-child {
+                border-right: none;
+            }
+            &.zan-tab-active {
+                background-color: #666666;
+                color: $c-white;
+            }
+        }
+    }
+    @b tabs-nav {
+        display: flex;
+        transition: transform .5s cubic-bezier(.645, .045, .355, 1);
+        position: relative;
+        /*float: left*/
+        &::after, &::before {
+            display: table;
+            content: " "
+        }
+        &::after {
+            clear: both
+        }
+    }
+    @b tabs-nav-bar {
+        z-index: 1;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 2px;
+        background-color: #f13e3a;
+        transition: transform .3s cubic-bezier(.645, .045, .355, 1);
+        transform-origin: 0 0;
+    }
+    @b tab {
+        color: $c-black;
+        font-size: 14px;
+        line-height: 44px;
+        flex: 1;
+        display: inline-block;
+        box-sizing: border-box;
+        transition: color .3s cubic-bezier(.645, .045, .355, 1);
+        cursor: pointer;
+        text-align: center;
+    }
+    @b tab-active {
+        color: #FF4444;
+    }
+    @b tabs-pane {
+        display: none;
+        @when select {
+            display: block;
+        }   
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
index bd9ebdc0c..5d8b0566b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,6 +21,8 @@ import BadgeGroup from '../packages/badge-group/index.js';
 import Badge from '../packages/badge/index.js';
 import Search from '../packages/search/index.js';
 import Step from '../packages/step/index.js';
+import Tabs from '../packages/tabs/index.js';
+import Tab from '../packages/tab/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -46,6 +48,8 @@ const install = function(Vue) {
   Vue.component(Badge.name, Badge);
   Vue.component(Search.name, Search);
   Vue.component(Step.name, Step);
+  Vue.component(Tabs.name, Tabs);
+  Vue.component(Tab.name, Tab);
 };
 
 // auto install
@@ -78,5 +82,7 @@ module.exports = {
   BadgeGroup,
   Badge,
   Search,
-  Step
+  Step,
+  Tabs,
+  Tab
 };