抖音小程序改用全局组件注册模式

src/pages.json

@@ -263,19 +263,7 @@
     ]
   },
   // #ifdef MP-TOUTIAO
-  "easycom": {
-    "autoscan": true,
-    "custom": {
-      "van-button":"vant-weapp-convert-uniapp/components/van-button/van-button",
-      "van-overlay": "vant-weapp-convert-uniapp/components/van-overlay/van-overlay",
-      "van-icon": "vant-weapp-convert-uniapp/components/van-icon/van-icon",
-      "van-transition": "vant-weapp-convert-uniapp/components/van-transition/van-transition",
-      "van-cell": "vant-weapp-convert-uniapp/components/van-cell/van-cell",
-      "van-tab": "vant-weapp-convert-uniapp/components/van-tab/van-tab",
-      "van-tabs": "vant-weapp-convert-uniapp/components/van-cell-tabs/van-cell-tabs"
 
-    }
-  },
   // #endif
   "globalStyle": {
     "navigationBarTextStyle": "black",
@@ -324,7 +312,32 @@
     "a": ""
     // #endif
     // #ifdef MP-TOUTIAO
-    "usingComponents": {}
+    "usingComponents": {
+      "van-overlay": "/ttcomponents/van-overlay/van-overlay",
+      "van-icon": "/ttcomponents/van-icon/van-icon",
+      "van-transition": "/ttcomponents/van-transition/van-transition",
+      "van-image": "/ttcomponents/van-image/van-image",
+      "van-checkbox": "/ttcomponents/van-checkbox/van-checkbox",
+      "van-checkbox-group": "/ttcomponents/van-checkbox-group/van-checkbox-group",
+      "van-radio": "/ttcomponents/van-radio/van-radio",
+      "van-radio-group": "/ttcomponents/van-radio-group/van-radio-group",
+      "van-cell": "/ttcomponents/van-cell/van-cell",
+      "van-cell-group": "/ttcomponents/van-cell-group/van-cell-group",
+      "van-switch": "/ttcomponents/van-switch/van-switch",
+      "van-popup": "/ttcomponents/van-popup/van-popup",
+      "van-field": "/ttcomponents/van-field/van-field",
+      "van-button": "/ttcomponents/van-button/van-button",
+      "van-divider": "/ttcomponents/van-divider/van-divider",
+      "van-count-down": "/ttcomponents/van-count-down/van-count-down",
+      "van-dialog": "/ttcomponents/van-dialog/van-dialog",
+      "van-tab": "/ttcomponents/van-tab/van-tab",
+      "van-sticky":"/ttcomponents/van-sticky/van-sticky",
+      "van-tabs": "/ttcomponents/van-tabs/van-tabs",
+      "van-stepper": "/ttcomponents/van-stepper/van-stepper",
+      "van-grid": "/ttcomponents/van-grid/van-grid",
+      "van-grid-item": "/ttcomponents/van-grid-item/van-grid-item",
+      "van-nav-bar": "/ttcomponents/van-nav-bar/van-nav-bar"
+    }
     // #endif
   },
   "condition": {

src/ttcomponents/common/README.md

@@ -0,0 +1,71 @@
+# 内置样式
+
+### 介绍
+
+Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
+
+### 引入
+
+在 app.wxss 中引入内置样式
+
+```css
+@import '@vant/weapp/common/index.wxss';
+```
+
+## 代码演示
+
+### 文字省略
+
+当文本内容长度超过容器最大宽度时，自动省略多余的文本。
+
+```xml
+<view class="van-ellipsis">
+  这是一段宽度限制 250px 的文字，后面的内容会省略
+</view>
+
+<!-- 最多显示两行 -->
+<view class="van-multi-ellipsis--l2">
+  这是一段最多显示两行的文字，后面的内容会省略
+</view>
+
+<!-- 最多显示三行 -->
+<view class="van-multi-ellipsis--l3">
+  这是一段最多显示三行的文字，后面的内容会省略
+</view>
+```
+
+### 1px 边框
+
+为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
+
+```xml
+<!-- 上边框 -->
+<view class="van-hairline--top"></view>
+
+<!-- 下边框 -->
+<view class="van-hairline--bottom"></view>
+
+<!-- 左边框 -->
+<view class="van-hairline--left"></view>
+
+<!-- 右边框 -->
+<view class="van-hairline--right"></view>
+
+<!-- 上下边框 -->
+<view class="van-hairline--top-bottom"></view>
+
+<!-- 全边框 -->
+<view class="van-hairline--surround"></view>
+```
+
+### 全局字体
+
+推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。
+
+```css
+page {
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
+    Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei',
+    sans-serif;
+}
+```

src/ttcomponents/common/color.js

@@ -0,0 +1,7 @@
+export const RED = '#ee0a24'
+export const BLUE = '#1989fa'
+export const WHITE = '#ffffff'
+export const GREEN = '#07c160'
+export const ORANGE = '#ff976a'
+export const GRAY = '#323233'
+export const GRAY_DARK = '#969799'

src/ttcomponents/common/component.js

@@ -0,0 +1,59 @@
+import { basic } from '../mixins/basic'
+import { getCamelCase } from '../utils'
+
+function VantComponent(vantOptions = {}) {
+  vantOptions.externalClasses = vantOptions.classes
+  // add default externalClasses
+  vantOptions.externalClasses = vantOptions.externalClasses || []
+  vantOptions.externalClasses.push('custom-class')
+
+  vantOptions.externalStyles = vantOptions.externalStyles || []
+  vantOptions.externalStyles.push('custom-style')
+
+  const externalProps = {}
+  // 将 externalClasses 转化成 props
+  vantOptions.externalClasses.map(item => {
+    const classProp = getCamelCase(item)
+    externalProps[classProp] = {
+      type: String,
+      default: ''
+    }
+  })
+  // 将 externalStyles 转化成 props
+  vantOptions.externalStyles.map(item => {
+    const styleProp = getCamelCase(item)
+    externalProps[styleProp] = {
+      type: String,
+      default: ''
+    }
+  })
+  vantOptions.props = {
+    ...externalProps,
+    ...vantOptions.props
+  }
+
+  // add default mixins
+  const mixins = vantOptions.mixins || []
+  mixins.push(basic)
+  // #ifdef MP-ALIPAY
+  // 支付宝小程序中 vue 不支持 mixins 带 props 的对象
+  vantOptions.mixins = mixins.map(item => ({ ...item, props: {} }))
+  vantOptions.props = {
+    ...mixins.reduce((prev, curr) => ({ ...prev, ...(curr.props || {}) }), {}),
+    ...vantOptions.props
+  }
+  // #endif
+  // #ifndef MP-ALIPAY
+  vantOptions.mixins = mixins
+  // #endif
+
+  // add default options
+  vantOptions.options = {
+    multipleSlots: true,
+    addGlobalClass: true
+  }
+
+  return vantOptions
+}
+
+export { VantComponent }

src/ttcomponents/common/demo.js

@@ -1 +0,0 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["packages/common/demo"],{"141e":function(n,e,t){"use strict";(function(n){t("6cdc");u(t("66fd"));var e=u(t("ebf0"));function u(n){return n&&n.__esModule?n:{default:n}}n(e.default)}).call(this,t("f266")["createPage"])},"82a2":function(n,e,t){"use strict";t.d(e,"b",(function(){return c})),t.d(e,"c",(function(){return o})),t.d(e,"a",(function(){return u}));var u={demoBlock:function(){return t.e("components/demo-block/demo-block").then(t.bind(null,"e29a"))}},c=function(){var n=this,e=n.$createElement;n._self._c},o=[]},a50b:function(n,e,t){},ab28:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var u={};e.default=u},c662:function(n,e,t){"use strict";var u=t("a50b"),c=t.n(u);c.a},dfe8:function(n,e,t){"use strict";t.r(e);var u=t("ab28"),c=t.n(u);for(var o in u)"default"!==o&&function(n){t.d(e,n,(function(){return u[n]}))}(o);e["default"]=c.a},ebf0:function(n,e,t){"use strict";t.r(e);var u=t("82a2"),c=t("dfe8");for(var o in c)"default"!==o&&function(n){t.d(e,n,(function(){return c[n]}))}(o);t("c662");var a,r=t("f0c5"),f=Object(r["a"])(c["default"],u["b"],u["c"],!1,null,null,null,!1,u["a"],a);e["default"]=f.exports}},[["141e","common/runtime","common/vendor"]]]);

src/ttcomponents/common/demo.json

@@ -1,6 +0,0 @@
-{
-  "navigationBarTitleText": "Style",
-  "usingComponents": {
-    "demo-block": "/components/demo-block/demo-block"
-  }
-}

src/ttcomponents/common/demo.ttml

@@ -1 +0,0 @@
-<view class="demo-style _div"><demo-block vue-id="092eabd2-1" title="文字省略" bind:__l="__l" vue-slots="{{['default']}}"><view class="van-ellipsis _div">这是一段最多显示一行的文字，后面的内容会省略</view><view class="van-multi-ellipsis--l2 _div">这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略</view></demo-block><demo-block vue-id="092eabd2-2" title="1px 边框" bind:__l="__l" vue-slots="{{['default']}}"><view class="van-hairline--top _div"></view></demo-block></view>

src/ttcomponents/common/demo.ttss

@@ -1,2 +0,0 @@
-.demo-style .van-ellipsis,
-.demo-style .van-multi-ellipsis--l2{max-width:300px;margin-left:16px;font-size:14px;line-height:18px}.demo-style .van-ellipsis{margin-bottom:16px}.demo-style .van-hairline--top{height:30px;background-color:#fff}.demo-style .van-hairline--top::after{top:5px}

src/ttcomponents/common/demo.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="demo-style">
+    <demo-block title="文字省略">
+      <div class="van-ellipsis">这是一段最多显示一行的文字，后面的内容会省略</div>
+      <div class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略</div>
+    </demo-block>
+
+    <demo-block title="1px 边框">
+      <div class="van-hairline--top" />
+    </demo-block>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="less">
+@import './style/var';
+.demo-style {
+  .van-ellipsis,
+  .van-multi-ellipsis--l2 {
+    max-width: 300px;
+    margin-left: @padding-md;
+    font-size: 14px;
+    line-height: 18px;
+  }
+  .van-ellipsis {
+    margin-bottom: @padding-md;
+  }
+  .van-hairline--top {
+    height: 30px;
+    background-color: @white;
+    &::after {
+      top: 5px;
+    }
+  }
+}
+</style>

src/ttcomponents/common/index.less

@@ -0,0 +1,27 @@
+/**
+ * Entry of basic styles
+ */
+
+@import './style/var.less';
+@import './style/ellipsis.less';
+@import './style/clearfix.less';
+@import './style/hairline.less';
+
+// 不引入会导致异常的
+// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
+@import '../van-overlay/index.less';
+@import '../van-toast/index.less';
+// #endif
+// #ifndef MP-ALIPAY || MP-TOUTIAO || APP-PLUS
+@import '../van-dialog/index.less';
+// #endif
+
+// #ifdef MP-WEIXIN
+@import '../van-tabs/index.less';
+@import '../van-goods-action-button/index.less';
+@import '../van-goods-action-icon/index.less';
+// #endif
+
+// 相关组件的 host
+@import '../van-tab/host.less';
+@import '../van-goods-action-button/host.less';

src/ttcomponents/common/style/clearfix.less

@@ -0,0 +1,5 @@
+@import './mixins/clearfix.less';
+
+.van-clearfix {
+  .clearfix();
+}

src/ttcomponents/common/style/ellipsis.less

@@ -0,0 +1,13 @@
+@import './mixins/ellipsis.less';
+
+.van-ellipsis {
+  .ellipsis();
+}
+
+.van-multi-ellipsis--l2 {
+  .multi-ellipsis(2);
+}
+
+.van-multi-ellipsis--l3 {
+  .multi-ellipsis(3);
+}

src/ttcomponents/common/style/hairline.less

@@ -0,0 +1,41 @@
+@import './mixins/hairline.less';
+
+.van-hairline,
+.van-hairline--top,
+.van-hairline--left,
+.van-hairline--right,
+.van-hairline--bottom,
+.van-hairline--top-bottom,
+.van-hairline--surround {
+  position: relative;
+
+  &::after {
+    .hairline();
+  }
+}
+
+.van-hairline {
+  &--top::after {
+    border-top-width: 1px;
+  }
+
+  &--left::after {
+    border-left-width: 1px;
+  }
+
+  &--right::after {
+    border-right-width: 1px;
+  }
+
+  &--bottom::after {
+    border-bottom-width: 1px;
+  }
+
+  &--top-bottom::after {
+    border-width: 1px 0;
+  }
+
+  &--surround::after {
+    border-width: 1px;
+  }
+}

src/ttcomponents/common/style/mixins/clearfix.less

@@ -0,0 +1,7 @@
+.clearfix() {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

src/ttcomponents/common/style/mixins/ellipsis.less

@@ -0,0 +1,15 @@
+.multi-ellipsis(@lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: @lines;
+
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+.ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

src/ttcomponents/common/style/mixins/hairline.less

@@ -0,0 +1,40 @@
+@import '../var.less';
+
+.hairline-common() {
+  position: absolute;
+  box-sizing: border-box;
+  transform-origin: center; /* cover wechat button:after default transforn-origin */
+  content: ' ';
+  pointer-events: none;
+}
+
+.hairline(@color: @border-color) {
+  .hairline-common();
+
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid @color;
+  transform: scale(0.5);
+}
+
+.hairline-top(@color: @border-color, @left: 0, @right: 0) {
+  .hairline-common();
+
+  top: 0;
+  right: @right;
+  left: @left;
+  border-top: 1px solid @color;
+  transform: scaleY(0.5);
+}
+
+.hairline-bottom(@color: @border-color, @left: 0, @right: 0) {
+  .hairline-common();
+
+  right: @right;
+  bottom: 0;
+  left: @left;
+  border-bottom: 1px solid @color;
+  transform: scaleY(0.5);
+}

src/ttcomponents/common/style/theme.less

@@ -0,0 +1,6 @@
+@import (reference) './var.less';
+
+.theme(@property, @imp) {
+  @{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig'));
+  @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig'));
+}

src/ttcomponents/common/style/var.less

@@ -0,0 +1,656 @@
+// Color Palette
+@black: #000;
+@white: #fff;
+@gray-1: #f7f8fa;
+@gray-2: #f2f3f5;
+@gray-3: #ebedf0;
+@gray-4: #dcdee0;
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@gray-7: #646566;
+@gray-8: #323233;
+@red: #ee0a24;
+@blue: #1989fa;
+@orange: #ff976a;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #07c160;
+
+// Gradient Colors
+@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
+// Component Colors
+@text-color: @gray-8;
+@active-color: @gray-2;
+@active-opacity: 0.7;
+@disabled-opacity: 0.5;
+@background-color: @gray-1;
+@background-color-light: #fafafa;
+@text-link-color: #576b95;
+
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-weight-bold: 500;
+@line-height-xs: 14px;
+@line-height-sm: 18px;
+@line-height-md: 20px;
+@line-height-lg: 22px;
+@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
+  'Microsoft Yahei', sans-serif;
+@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
+  sans-serif;
+
+// Animation
+@animation-duration-base: 0.3s;
+@animation-duration-fast: 0.2s;
+
+// Border
+@border-color: @gray-3;
+@border-width-base: 1px;
+@border-radius-sm: 2px;
+@border-radius-md: 4px;
+@border-radius-lg: 8px;
+@border-radius-max: 999px;
+
+//ActionSheet
+@action-sheet-max-height: 90%;
+@action-sheet-header-height: 44px;
+@action-sheet-header-font-size: @font-size-lg;
+@action-sheet-description-color: @gray-7;
+@action-sheet-description-font-size: @font-size-md;
+@action-sheet-description-line-height: 20px;
+@action-sheet-item-height: 50px;
+@action-sheet-item-background: @white;
+@action-sheet-item-font-size: @font-size-lg;
+@action-sheet-item-text-color: @text-color;
+@action-sheet-item-disabled-text-color: @gray-5;
+@action-sheet-subname-color: @gray-7;
+@action-sheet-subname-font-size: @font-size-sm;
+@action-sheet-close-icon-size: 18px;
+@action-sheet-close-icon-color: @gray-6;
+@action-sheet-close-icon-padding: 0 @padding-sm;
+@action-sheet-cancel-padding-top: @padding-xs;
+@action-sheet-cancel-padding-color: @background-color;
+
+// Button
+@button-mini-height: 22px;
+@button-mini-min-width: 50px;
+@button-mini-font-size: @font-size-xs;
+@button-small-height: 30px;
+@button-small-font-size: @font-size-sm;
+@button-small-min-width: 60px;
+@button-normal-font-size: @font-size-md;
+@button-large-height: 50px;
+@button-default-color: @text-color;
+@button-default-height: 44px;
+@button-default-font-size: @font-size-lg;
+@button-default-background-color: @white;
+@button-default-border-color: @border-color;
+@button-primary-color: @white;
+@button-primary-background-color: @green;
+@button-primary-border-color: @green;
+@button-info-color: @white;
+@button-info-background-color: @blue;
+@button-info-border-color: @blue;
+@button-danger-color: @white;
+@button-danger-background-color: @red;
+@button-danger-border-color: @red;
+@button-warning-color: @white;
+@button-warning-background-color: @orange;
+@button-warning-border-color: @orange;
+@button-line-height: 20px;
+@button-border-width: 1px;
+@button-border-radius: @border-radius-sm;
+@button-round-border-radius: @border-radius-max;
+@button-plain-background-color: @white;
+@button-disabled-opacity: @disabled-opacity;
+
+// Calendar
+@calendar-height: 100%;
+@calendar-background-color: @white;
+@calendar-popup-height: 80%;
+@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
+@calendar-header-title-height: 44px;
+@calendar-header-title-font-size: @font-size-lg;
+@calendar-header-subtitle-font-size: @font-size-md;
+@calendar-weekdays-height: 30px;
+@calendar-weekdays-font-size: @font-size-sm;
+@calendar-month-title-font-size: @font-size-md;
+@calendar-month-mark-color: fade(@gray-2, 80%);
+@calendar-month-mark-font-size: 160px;
+@calendar-day-height: 64px;
+@calendar-day-font-size: @font-size-lg;
+@calendar-range-edge-color: @white;
+@calendar-range-edge-background-color: @red;
+@calendar-range-middle-color: @red;
+@calendar-range-middle-background-opacity: 0.1;
+@calendar-selected-day-size: 54px;
+@calendar-selected-day-color: @white;
+@calendar-info-font-size: @font-size-xs;
+@calendar-info-line-height: 14px;
+@calendar-selected-day-background-color: @red;
+@calendar-day-disabled-color: @gray-5;
+@calendar-confirm-button-height: 36px;
+@calendar-confirm-button-margin: 7px 0;
+@calendar-confirm-button-line-height: 34px;
+
+// Card
+@card-padding: @padding-xs @padding-md;
+@card-font-size: @font-size-sm;
+@card-text-color: @text-color;
+@card-background-color: @background-color-light;
+@card-thumb-size: 88px;
+@card-title-line-height: 16px;
+@card-desc-color: @gray-7;
+@card-desc-line-height: 20px;
+@card-price-color: @red;
+@card-origin-price-color: @gray-7;
+@card-origin-price-font-size: @font-size-xs;
+@card-price-font-size: @font-size-sm;
+@card-price-integer-font-size: @font-size-lg;
+@card-price-font-family: @price-integer-font-family;
+
+// Cell
+@cell-font-size: @font-size-md;
+@cell-line-height: 24px;
+@cell-vertical-padding: 10px;
+@cell-horizontal-padding: @padding-md;
+@cell-text-color: @text-color;
+@cell-background-color: @white;
+@cell-border-color: @border-color;
+@cell-active-color: @active-color;
+@cell-required-color: @red;
+@cell-label-color: @gray-6;
+@cell-label-font-size: @font-size-sm;
+@cell-label-line-height: 18px;
+@cell-label-margin-top: 3px;
+@cell-value-color: @gray-6;
+@cell-icon-size: 16px;
+@cell-right-icon-color: @gray-6;
+@cell-large-vertical-padding: @padding-sm;
+@cell-large-title-font-size: @font-size-lg;
+@cell-large-value-font-size: @font-size-lg;
+@cell-large-label-font-size: @font-size-md;
+
+// CellGroup
+@cell-group-background-color: @white;
+@cell-group-title-color: @gray-6;
+@cell-group-title-padding: @padding-md @padding-md @padding-xs;
+@cell-group-title-font-size: @font-size-md;
+@cell-group-title-line-height: 16px;
+
+// Checkbox
+@checkbox-size: 20px;
+@checkbox-border-color: @gray-5;
+@checkbox-transition-duration: 0.2s;
+@checkbox-label-margin: 10px;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray-5;
+@checkbox-disabled-label-color: @gray-5;
+@checkbox-disabled-background-color: @border-color;
+
+// Circle
+@circle-text-color: @text-color;
+
+// Collapse
+@collapse-item-transition-duration: 0.3s;
+@collapse-item-content-padding: 15px;
+@collapse-item-content-font-size: 13px;
+@collapse-item-content-line-height: 1.5;
+@collapse-item-content-text-color: @gray-6;
+@collapse-item-content-background-color: @white;
+@collapse-item-title-disabled-color: @gray-5;
+
+// CountDown
+@count-down-text-color: @text-color;
+@count-down-font-size: @font-size-md;
+@count-down-line-height: 20px;
+
+// Dialog
+@dialog-width: 320px;
+@dialog-small-screen-width: 90%;
+@dialog-font-size: @font-size-lg;
+@dialog-border-radius: 16px;
+@dialog-background-color: @white;
+@dialog-header-font-weight: @font-weight-bold;
+@dialog-header-line-height: 24px;
+@dialog-header-padding-top: @padding-lg;
+@dialog-header-isolated-padding: @padding-lg 0;
+@dialog-message-padding: @padding-lg;
+@dialog-message-font-size: @font-size-md;
+@dialog-message-line-height: 20px;
+@dialog-message-max-height: 60vh;
+@dialog-has-title-message-text-color: @gray-7;
+@dialog-has-title-message-padding-top: @padding-xs;
+
+// Field
+@field-label-color: @gray-7;
+@field-input-text-color: @text-color;
+@field-input-error-text-color: @red;
+@field-input-disabled-text-color: @gray-5;
+@field-placeholder-text-color: @gray-5;
+@field-icon-size: 16px;
+@field-clear-icon-size: 16px;
+@field-clear-icon-color: @gray-5;
+@field-icon-container-color: @gray-6;
+@field-error-message-color: @red;
+@field-error-message-text-font-size: @font-size-sm;
+@field-text-area-min-height: 18px;
+@field-word-limit-color: @gray-7;
+@field-word-limit-font-size: @font-size-sm;
+@field-word-limit-line-height: 16px;
+@field-word-num-full-color: @red;
+@field-disabled-text-color: @gray-5;
+
+// GoodsAction
+@goods-action-background-color: @white;
+@goods-action-height: 50px;
+@goods-action-icon-width: 48px;
+@goods-action-icon-height: @goods-action-height;
+@goods-action-icon-color: @text-color;
+@goods-action-icon-size: 18px;
+@goods-action-icon-font-size: @font-size-xs;
+@goods-action-icon-text-color: @gray-7;
+@goods-action-button-height: 40px;
+@goods-action-button-line-height: @button-line-height;
+@goods-action-button-border-radius: @goods-action-button-height / 2;
+@goods-action-button-warning-color: @gradient-orange;
+@goods-action-button-danger-color: @gradient-red;
+@goods-action-button-plain-color: @white;
+
+// Image
+@image-placeholder-text-color: @gray-6;
+@image-placeholder-font-size: @font-size-md;
+@image-placeholder-background-color: @background-color;
+
+// Info
+@info-size: 16px;
+@info-color: @white;
+@info-padding: 0 3px;
+@info-font-size: 12px;
+@info-font-weight: 500;
+@info-border-width: 1px;
+@info-background-color: @red;
+@info-dot-color: @red;
+@info-dot-size: 8px;
+@info-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+
+// Loading
+@loading-text-color: @gray-6;
+@loading-text-font-size: @font-size-md;
+@loading-text-line-height: 20px;
+@loading-spinner-color: @gray-5;
+@loading-spinner-size: 30px;
+@loading-spinner-animation-duration: 0.8s;
+
+// NavBar
+@nav-bar-height: 46px;
+@nav-bar-background-color: @white;
+@nav-bar-arrow-size: 16px;
+@nav-bar-icon-color: @blue;
+@nav-bar-text-color: @blue;
+@nav-bar-title-font-size: @font-size-lg;
+@nav-bar-title-text-color: @text-color;
+
+// NoticeBar
+@notice-bar-height: 40px;
+@notice-bar-padding: 0 @padding-md;
+@notice-bar-wrapable-padding: @padding-xs @padding-md;
+@notice-bar-font-size: @font-size-md;
+@notice-bar-text-color: @orange-dark;
+@notice-bar-line-height: 24px;
+@notice-bar-background-color: @orange-light;
+@notice-bar-icon-size: 16px;
+@notice-bar-icon-min-width: 22px;
+
+// Notify
+@notify-padding: 6px 15px;
+@notify-font-size: 14px;
+@notify-line-height: 20px;
+@notify-primary-background-color: @blue;
+@notify-success-background-color: @green;
+@notify-danger-background-color: @red;
+@notify-warning-background-color: @orange;
+
+// Overlay
+@overlay-background-color: rgba(0, 0, 0, 0.7);
+
+// Panel
+@panel-background-color: @white;
+@panel-header-value-color: @red;
+@panel-footer-padding: @padding-xs @padding-md;
+
+// Picker
+@picker-background-color: @white;
+@picker-toolbar-height: 44px;
+@picker-title-font-size: @font-size-lg;
+@picker-action-padding: 0 @padding-md;
+@picker-action-font-size: @font-size-md;
+@picker-confirm-action-color: @text-link-color;
+@picker-cancel-action-color: @gray-6;
+@picker-option-font-size: @font-size-lg;
+@picker-option-text-color: @black;
+@picker-loading-icon-color: @blue;
+@picker-loading-mask-color: rgba(255, 255, 255, 0.9);
+@picker-option-disabled-opacity: 0.3;
+@picker-option-selected-text-color: @text-color;
+
+// Popup
+@popup-background-color: @white;
+@popup-round-border-radius: 20px;
+@popup-close-icon-size: 18px;
+@popup-close-icon-color: @gray-6;
+@popup-close-icon-margin: 16px;
+@popup-close-icon-z-index: 1;
+
+// Progress
+@progress-height: 4px;
+@progress-background-color: @gray-3;
+@progress-pivot-padding: 0 5px;
+@progress-color: @blue;
+@progress-pivot-font-size: @font-size-xs;
+@progress-pivot-line-height: 1.6;
+@progress-pivot-background-color: @blue;
+@progress-pivot-text-color: @white;
+
+// Radio
+@radio-size: 20px;
+@radio-border-color: @gray-5;
+@radio-transition-duration: 0.2s;
+@radio-label-margin: 10px;
+@radio-label-color: @text-color;
+@radio-checked-icon-color: @blue;
+@radio-disabled-icon-color: @gray-5;
+@radio-disabled-label-color: @gray-5;
+@radio-disabled-background-color: @border-color;
+
+// Rate
+@rate-horizontal-padding: 2px;
+@rate-icon-size: 20px;
+
+// Switch
+@switch-width: 2em;
+@switch-height: 1em;
+@switch-node-size: 1em;
+@switch-node-z-index: 1;
+@switch-node-background-color: @white;
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
+  0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+@switch-background-color: @white;
+@switch-on-background-color: @blue;
+@switch-transition-duration: 0.3s;
+@switch-disabled-opacity: 0.4;
+@switch-border: 1px solid rgba(0, 0, 0, 0.1);
+
+// ShareSheet
+@share-sheet-header-padding: @padding-sm @padding-md @padding-base;
+@share-sheet-title-color: @text-color;
+@share-sheet-title-font-size: @font-size-md;
+@share-sheet-title-line-height: @line-height-md;
+@share-sheet-description-color: @gray-6;
+@share-sheet-description-font-size: @font-size-sm;
+@share-sheet-description-line-height: 16px;
+@share-sheet-icon-size: 48px;
+@share-sheet-option-name-color: @gray-7;
+@share-sheet-option-name-font-size: @font-size-sm;
+@share-sheet-option-description-color: @gray-5;
+@share-sheet-option-description-font-size: @font-size-sm;
+@share-sheet-cancel-button-font-size: @font-size-lg;
+@share-sheet-cancel-button-height: 48px;
+@share-sheet-cancel-button-background: @white;
+
+// Search
+@search-background-color: @gray-1;
+@search-padding: 10px @padding-sm;
+@search-input-height: 34px;
+@search-label-padding: 0 5px;
+@search-label-color: @text-color;
+@search-label-font-size: @font-size-md;
+@search-left-icon-color: @gray-6;
+@search-action-padding: 0 @padding-xs;
+@search-action-text-color: @text-color;
+@search-action-font-size: @font-size-md;
+
+// Sidebar
+@sidebar-width: 85px;
+
+// SidebarItem
+@sidebar-font-size: @font-size-md;
+@sidebar-line-height: 20px;
+@sidebar-text-color: @text-color;
+@sidebar-disabled-text-color: @gray-5;
+@sidebar-padding: 20px @padding-sm 20px @padding-xs;
+@sidebar-active-color: @active-color;
+@sidebar-background-color: @background-color;
+@sidebar-selected-font-weight: @font-weight-bold;
+@sidebar-selected-text-color: @text-color;
+@sidebar-selected-border-color: @red;
+@sidebar-selected-background-color: @white;
+
+// Slider
+@slider-active-background-color: @blue;
+@slider-inactive-background-color: @gray-3;
+@slider-disabled-opacity: @disabled-opacity;
+@slider-button-width: 24px;
+@slider-button-height: 24px;
+@slider-button-border-radius: 50%;
+@slider-button-background-color: @white;
+@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+
+// Step
+@step-text-color: @gray-6;
+@step-process-text-color: @text-color;
+@step-font-size: @font-size-md;
+@step-line-color: @border-color;
+@step-finish-line-color: @green;
+@step-finish-text-color: @text-color;
+@step-icon-size: 12px;
+@step-circle-size: 5px;
+@step-circle-color: @gray-6;
+@step-horizontal-title-font-size: @font-size-sm;
+
+// Steps
+@steps-background-color: @white;
+
+// Stepper
+@stepper-active-color: #e8e8e8;
+@stepper-background-color: @gray-2;
+@stepper-button-icon-color: @text-color;
+@stepper-button-disabled-color: @gray-1;
+@stepper-button-disabled-icon-color: @gray-5;
+@stepper-input-width: 32px;
+@stepper-input-height: 28px;
+@stepper-input-font-size: @font-size-md;
+@stepper-input-text-color: @text-color;
+@stepper-input-disabled-text-color: @gray-5;
+@stepper-input-disabled-background-color: @gray-2;
+@stepper-border-radius: @border-radius-md;
+
+// SubmitBar
+@submit-bar-height: 50px;
+@submit-bar-z-index: 100;
+@submit-bar-background-color: @white;
+@submit-bar-button-width: 110px;
+@submit-bar-price-color: @red;
+@submit-bar-price-font-size: @font-size-sm;
+@submit-bar-currency-font-size: @font-size-sm;
+@submit-bar-text-color: @text-color;
+@submit-bar-text-font-size: 14px;
+@submit-bar-tip-padding: 10px;
+@submit-bar-tip-font-size: 12px;
+@submit-bar-tip-line-height: 1.5;
+@submit-bar-tip-color: #f56723;
+@submit-bar-tip-background-color: #fff7cc;
+@submit-bar-tip-icon-size: 12px;
+@submit-bar-button-height: 40px;
+@submit-bar-padding: 0 @padding-md;
+@submit-bar-price-integer-font-size: 20px;
+@submit-bar-price-font-family: @price-integer-font-family;
+
+// Tabbar
+@tabbar-height: 50px;
+@tabbar-background-color: @white;
+
+// TabbarItem
+@tabbar-item-font-size: @font-size-sm;
+@tabbar-item-text-color: @gray-7;
+@tabbar-item-active-color: @blue;
+@tabbar-item-line-height: 1;
+@tabbar-item-icon-size: 18px;
+@tabbar-item-margin-bottom: 5px;
+
+// Tab
+@tab-text-color: @gray-7;
+@tab-active-text-color: @text-color;
+@tab-disabled-text-color: @gray-5;
+@tab-font-size: @font-size-md;
+
+// Tabs
+@tabs-default-color: @red;
+@tabs-line-height: 44px;
+@tabs-card-height: 30px;
+@tabs-nav-background-color: @white;
+@tabs-bottom-bar-height: 3px;
+@tabs-bottom-bar-color: @tabs-default-color;
+
+// Tag
+@tag-padding: 0 @padding-base;
+@tag-text-color: @white;
+@tag-font-size: @font-size-sm;
+@tag-border-radius: 2px;
+@tag-line-height: 16px;
+@tag-medium-padding: 2px 6px;
+@tag-large-padding: @padding-base @padding-xs;
+@tag-large-border-radius: @border-radius-md;
+@tag-large-font-size: @font-size-md;
+@tag-round-border-radius: @border-radius-max;
+@tag-danger-color: @red;
+@tag-primary-color: @blue;
+@tag-success-color: @green;
+@tag-warning-color: @orange;
+@tag-default-color: @gray-6;
+@tag-plain-background-color: @white;
+
+// Toast
+@toast-max-width: 70%;
+@toast-font-size: 14px;
+@toast-text-color: @white;
+@toast-line-height: 20px;
+@toast-border-radius: @border-radius-lg;
+@toast-background-color: fade(@black, 70%);
+@toast-icon-size: 36px;
+@toast-text-min-width: 96px;
+@toast-text-padding: @padding-xs @padding-sm;
+@toast-default-padding: @padding-md;
+@toast-default-width: 88px;
+@toast-default-min-height: 88px;
+
+// GridItem
+@grid-item-content-padding: @padding-md @padding-xs;
+@grid-item-content-background-color: @white;
+@grid-item-content-active-color: @active-color;
+@grid-item-icon-size: 26px;
+@grid-item-text-color: @gray-7;
+@grid-item-text-font-size: @font-size-sm;
+
+// Divider
+@divider-margin: @padding-md 0;
+@divider-text-color: @gray-6;
+@divider-font-size: @font-size-md;
+@divider-line-height: 24px;
+@divider-border-color: @border-color;
+@divider-content-padding: @padding-md;
+@divider-content-left-width: 10%;
+@divider-content-right-width: 10%;
+
+// Empty
+@empty-padding: @padding-xl 0;
+@empty-image-size: 160px;
+@empty-description-margin-top: @padding-md;
+@empty-description-padding: 0 60px;
+@empty-description-color: @gray-6;
+@empty-description-font-size: 14px;
+@empty-description-line-height: 20px;
+@empty-bottom-margin-top: 24px;
+
+// TreeSelect
+@tree-select-font-size: @font-size-md;
+@tree-select-nav-background-color: @background-color;
+@tree-select-content-background-color: @white;
+@tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm;
+@tree-select-item-height: 44px;
+@tree-select-item-active-color: @red;
+@tree-select-item-disabled-color: @gray-5;
+
+// Uploader
+@uploader-size: 80px;
+@uploader-icon-size: 24px;
+@uploader-icon-color: @gray-4;
+@uploader-text-color: @gray-6;
+@uploader-text-font-size: @font-size-sm;
+@uploader-upload-background-color: @gray-1;
+@uploader-upload-active-color: @active-color;
+@uploader-delete-color: @white;
+@uploader-delete-icon-size: 14px;
+@uploader-delete-background-color: rgba(0, 0, 0, 0.7);
+@uploader-file-background-color: @background-color;
+@uploader-file-icon-size: 20px;
+@uploader-file-icon-color: @gray-7;
+@uploader-file-name-padding: 0 @padding-base;
+@uploader-file-name-margin-top: @padding-xs;
+@uploader-file-name-font-size: @font-size-sm;
+@uploader-file-name-text-color: @gray-7;
+@uploader-mask-background-color: fade(@gray-8, 88%);
+@uploader-mask-icon-size: 22px;
+@uploader-mask-message-font-size: @font-size-sm;
+@uploader-mask-message-line-height: 14px;
+@uploader-loading-icon-size: 22px;
+@uploader-loading-icon-color: @white;
+@uploader-disabled-opacity: @disabled-opacity;
+
+// DropdownMenu
+@dropdown-menu-height: 50px;
+@dropdown-menu-background-color: @white;
+@dropdown-menu-title-font-size: 15px;
+@dropdown-menu-title-text-color: @text-color;
+@dropdown-menu-title-active-text-color: @blue;
+@dropdown-menu-title-disabled-text-color: @gray-6;
+@dropdown-menu-title-padding: 0 @padding-xs;
+@dropdown-menu-title-line-height: 18px;
+@dropdown-menu-option-active-color: @blue;
+
+// IndexAnchor
+@index-anchor-padding: 0 @padding-md;
+@index-anchor-text-color: @text-color;
+@index-anchor-font-weight: 500;
+@index-anchor-font-size: @font-size-md;
+@index-anchor-line-height: 32px;
+@index-anchor-background-color: transparent;
+@index-anchor-active-background-color: @white;
+@index-anchor-active-text-color: @green;
+
+// IndexBar
+@index-bar-index-font-size: @font-size-xs;
+@index-bar-index-line-height: 14px;
+
+// skeleton
+@skeleton-padding: 0 @padding-md;
+@skeleton-row-height: 16px;
+@skeleton-row-background-color: @gray-2;
+@skeleton-row-margin-top: @padding-sm;
+@skeleton-avatar-background-color: @gray-2;
+@skeleton-animation-duration: 1.2s;

src/ttcomponents/common/utils.js

@@ -0,0 +1,68 @@
+import { isNumber, isPlainObject } from './validator';
+
+export function isDef(value) {
+  return value !== undefined && value !== null;
+}
+
+export function isObj(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+export function range(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+
+export function nextTick(fn) {
+  setTimeout(() => {
+    fn();
+  }, 1000 / 30);
+}
+
+let systemInfo = null;
+export function getSystemInfoSync() {
+  if (systemInfo == null) {
+    systemInfo = uni.getSystemInfoSync();
+  }
+
+  return systemInfo;
+}
+
+export function addUnit(value) {
+  if (!isDef(value)) {
+    return undefined;
+  }
+
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}
+
+export function requestAnimationFrame(cb) {
+  const systemInfo = getSystemInfoSync();
+
+  if (systemInfo.platform === 'devtools') {
+    return nextTick(cb);
+  }
+
+  return wx
+    .createSelectorQuery()
+    .selectViewport()
+    .boundingClientRect()
+    .exec(() => {
+      cb();
+    });
+}
+
+export function pickExclude(obj, keys) {
+  if (!isPlainObject(obj)) {
+    return {};
+  }
+
+  return Object.keys(obj).reduce((prev, key) => {
+    if (!keys.includes(key)) {
+      prev[key] = obj[key];
+    }
+
+    return prev;
+  }, {});
+}

src/ttcomponents/common/validator.js

@@ -0,0 +1,39 @@
+export function isFunction(val) {
+  return typeof val === 'function';
+}
+
+export function isPlainObject(val) {
+  return val !== null && typeof val === 'object' && !Array.isArray(val);
+}
+
+export function isPromise(val) {
+  return isPlainObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+export function isDef(value) {
+  return value !== undefined && value !== null;
+}
+
+export function isObj(x) {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+export function isNumber(value) {
+  return /^\d+(\.\d+)?$/.test(value);
+}
+
+export function isBoolean(value) {
+  return typeof value === 'boolean';
+}
+
+const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv)/i;
+
+export function isImageUrl(url) {
+  return IMAGE_REGEXP.test(url);
+}
+
+export function isVideoUrl(url) {
+  return VIDEO_REGEXP.test(url);
+}

src/ttcomponents/common/version.js

@@ -0,0 +1,38 @@
+import { getSystemInfoSync } from './utils';
+
+function compareVersion(v1, v2) {
+  v1 = v1.split('.');
+  v2 = v2.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0');
+  }
+  while (v2.length < len) {
+    v2.push('0');
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i], 10);
+    const num2 = parseInt(v2[i], 10);
+
+    if (num1 > num2) {
+      return 1;
+    }
+    if (num1 < num2) {
+      return -1;
+    }
+  }
+
+  return 0;
+}
+
+export function canIUseModel() {
+  const system = getSystemInfoSync();
+  return compareVersion(system.SDKVersion, '2.9.3') >= 0;
+}
+
+export function canIUseFormFieldButton() {
+  const system = getSystemInfoSync();
+  return compareVersion(system.SDKVersion, '2.10.3') >= 0;
+}

src/ttcomponents/dashboard/index.json

@@ -1,6 +0,0 @@
-{
-  "navigationBarTitleText": "Vant + Uniapp",
-  "usingComponents": {
-    "demo-home": "/components/demo-home/demo-home"
-  }
-}

src/ttcomponents/dashboard/index.ttml

@@ -1 +0,0 @@
-<demo-home vue-id="a3cc747c-1" list="{{list}}" bind:__l="__l"></demo-home>

src/ttcomponents/dashboard/index.ttss

@@ -1 +0,0 @@
-page{background:#fff}

src/ttcomponents/dashboard/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <demo-home :list="list" />
+</template>
+
+<script>
+import list from '@/config'
+const finishList = []
+list.map(item => {
+  const noEmpty = item.list.some(it => it.status === 'finish')
+  if (noEmpty) {
+    finishList.push({
+      ...item,
+      list: item.list.filter(it => it.status === 'finish')
+    })
+  }
+})
+export default {
+  data() {
+    return {
+      list: finishList
+    }
+  },
+  onLoad() {
+    // #ifdef MP-QQ
+    qq.showShareMenu({
+      showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
+    })
+    // #endif
+  }
+}
+</script>
+
+<style>
+page {
+  background: #fff;
+}
+</style>

src/ttcomponents/mixins/basic.js

@@ -0,0 +1,32 @@
+// eslint-disable-next-line no-undef
+export const basic = {
+  props: {
+    componentId: {
+      type: String,
+      default: 'vant-component'
+    }
+  },
+  methods: {
+    getRect(selector, all) {
+      return new Promise(resolve => {
+        let selectorQuery
+        // #ifndef MP-ALIPAY
+        selectorQuery = uni.createSelectorQuery().in(this)
+        // #endif
+        // #ifdef MP-ALIPAY
+        selectorQuery = uni.createSelectorQuery()
+        // #endif
+        selectorQuery[all ? 'selectAll' : 'select'](selector)
+        .boundingClientRect(rect => {
+          if (all && Array.isArray(rect) && rect.length) {
+            resolve(rect)
+          }
+          if (!all && rect) {
+            resolve(rect)
+          }
+        })
+        .exec()
+      })
+    }
+  }
+}

src/ttcomponents/mixins/button.js

@@ -0,0 +1,16 @@
+export const button = {
+  externalClasses: ['hover-class'],
+
+  props: {
+    id: String,
+    lang: String,
+    businessId: Number,
+    sessionFrom: String,
+    sendMessageTitle: String,
+    sendMessagePath: String,
+    sendMessageImg: String,
+    showMessageCard: Boolean,
+    appParameter: String,
+    ariaLabel: String
+  }
+}

src/ttcomponents/mixins/link.js

@@ -0,0 +1,18 @@
+export const link = {
+  props: {
+    url: String,
+    linkType: {
+      type: String,
+      default: 'navigateTo'
+    }
+  },
+
+  methods: {
+    jumpLink(urlKey = 'url') {
+      const url = this[urlKey]
+      if (url) {
+        uni[this.linkType]({ url })
+      }
+    }
+  }
+}

src/ttcomponents/mixins/open-type.js

@@ -0,0 +1,31 @@
+export const openType = {
+  props: {
+    openType: String
+  },
+
+  methods: {
+    bindGetUserInfo(event) {
+      this.$emit('getuserinfo', event)
+    },
+
+    bindContact(event) {
+      this.$emit('contact', event.detail)
+    },
+
+    bindGetPhoneNumber(event) {
+      this.$emit('getphonenumber', event.detail)
+    },
+
+    bindError(event) {
+      this.$emit('error', event.detail)
+    },
+
+    bindLaunchApp(event) {
+      this.$emit('launchapp', event.detail)
+    },
+
+    bindOpenSetting(event) {
+      this.$emit('opensetting', event.detail)
+    }
+  }
+}

src/ttcomponents/mixins/page-scroll.js

@@ -0,0 +1,39 @@
+function getCurrentPage() {
+  const pages = getCurrentPages()
+  return pages[pages.length - 1] || {}
+}
+
+function onPageScroll(event) {
+  console.log('页面滚动执行', event)
+  const { vanPageScroller = [] } = getCurrentPage()
+
+  vanPageScroller.forEach(scroller => {
+    if (typeof scroller === 'function') {
+      scroller(event)
+    }
+  })
+}
+
+export const pageScrollMixin = scroller => ({
+  created() {
+    const page = getCurrentPage()
+
+    if (Array.isArray(page.vanPageScroller)) {
+      page.vanPageScroller.push(scroller.bind(this))
+    } else {
+      page.vanPageScroller =
+        typeof page.onPageScroll === 'function'
+          ? [page.onPageScroll.bind(page), scroller.bind(this)]
+          : [scroller.bind(this)]
+    }
+
+    // page.onPageScroll = onPageScroll
+  },
+
+  destroyed() {
+    const page = getCurrentPage()
+    page.vanPageScroller = (page.vanPageScroller || []).filter(
+      item => item !== scroller
+    )
+  }
+})

src/ttcomponents/mixins/relation.js

@@ -0,0 +1,96 @@
+import { sortChildren } from '../utils'
+
+export function ChildrenMixin(parent, options = {}) {
+  const indexKey = options.indexKey || 'index'
+
+  return {
+    inject: {
+      [parent]: {
+        default: null
+      }
+    },
+
+    computed: {
+      [indexKey]() {
+        this.bindRelation()
+        if (this[parent]) {
+          const children = JSON.parse(this[parent].children)
+          return children.map(item => item._uid).indexOf(this._uid)
+        }
+
+        return null
+      },
+
+      parentChildren() {
+        if (!this[parent]) {
+          return []
+        }
+        const children = JSON.parse(this[parent].children)
+        return children
+      }
+    },
+
+    created() {
+      this.bindRelation()
+    },
+
+    beforeDestroy() {
+      if (this[parent]) {
+        let children = JSON.parse(this[parent].children)
+        children = children.filter(
+          item => item._uid !== this._uid
+        )
+        this[parent].children = JSON.stringify(children)
+      }
+    },
+
+    methods: {
+      bindRelation() {
+        if (!this[parent]) {
+          return
+        }
+        const _children = JSON.parse(this[parent].children)
+        if (_children.map(item => item._uid).indexOf(this._uid) !== -1) {
+          return
+        }
+
+        const children = [..._children, { ...this.$data, ...this.$props, _uid: this._uid }]
+
+        sortChildren(children)
+
+        this[parent].children = JSON.stringify(children)
+      },
+      _getIndex() {
+        if (this[parent]) {
+          const children = JSON.parse(this[parent].children)
+          return children.map(item => item._uid).indexOf(this._uid)
+        }
+
+        return null
+      },
+      _getParentChildren() {
+        if (!this[parent]) {
+          return []
+        }
+        const children = JSON.parse(this[parent].children)
+        return children
+      }
+    }
+  }
+}
+
+export function ParentMixin(parent) {
+  return {
+    provide() {
+      return {
+        [parent]: this
+      }
+    },
+
+    data() {
+      return {
+        children: '[]'
+      }
+    }
+  }
+}

src/ttcomponents/mixins/touch.js

@@ -0,0 +1,42 @@
+const MIN_DISTANCE = 10
+
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal'
+  }
+
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical'
+  }
+
+  return ''
+}
+
+export const touch = {
+  methods: {
+    resetTouchStatus() {
+      this.direction = ''
+      this.deltaX = 0
+      this.deltaY = 0
+      this.offsetX = 0
+      this.offsetY = 0
+    },
+
+    touchStart(event) {
+      this.resetTouchStatus()
+      const touch = event.touches[0]
+      this.startX = touch.clientX
+      this.startY = touch.clientY
+    },
+
+    touchMove(event) {
+      const touch = event.touches[0]
+      this.deltaX = touch.clientX - this.startX
+      this.deltaY = touch.clientY - this.startY
+      this.offsetX = Math.abs(this.deltaX)
+      this.offsetY = Math.abs(this.deltaY)
+      this.direction =
+        this.direction || getDirection(this.offsetX, this.offsetY)
+    }
+  }
+}

src/ttcomponents/mixins/transition.js

@@ -0,0 +1,188 @@
+import { isObj, requestAnimationFrame } from '../common/utils'
+
+const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30))
+
+export const transition = function(showDefaultValue) {
+  return {
+    props: {
+      customStyle: String,
+      show: {
+        type: Boolean,
+        default: showDefaultValue
+      },
+      duration: {
+        type: [String, Number, Object],
+        default: 300
+      },
+      name: {
+        type: String,
+        default: 'fade'
+      },
+      enterClass: String,
+      enterActiveClass: String,
+      enterToClass: String,
+      leaveActiveClass: String,
+      leaveClass: String,
+      leaveToClass: String
+    },
+
+    data() {
+      return {
+        type: '',
+        inited: false,
+        display: false,
+        classes: '',
+        currentName: ''
+      }
+    },
+
+    watch: {
+      show(value, old) {
+        this.observeShow(value, old)
+      },
+      duration() {
+        // this.observeDuration(value, old)
+      }
+    },
+
+    methods: {
+      observeShow(value, old) {
+        if (value === old) {
+          return
+        }
+        value ? this.enter() : this.leave()
+      },
+
+      getClassNames(name) {
+        return ({
+          enter: `van-${name}-enter van-${name}-enter-active ${this.enterClass} ${this.enterActiveClass}`,
+          'enter-to': `van-${name}-enter-to van-${name}-enter-active ${this.enterToClass} ${this.enterActiveClass}`,
+          leave: `van-${name}-leave van-${name}-leave-active ${this.leaveClass} ${this.leaveActiveClass}`,
+          'leave-to': `van-${name}-leave-to van-${name}-leave-active ${this.leaveToClass} ${this.leaveActiveClass}`
+        })
+      },
+
+      enter() {
+        const { duration, name, currentName } = this
+        const classNames = this.getClassNames(currentName || name)
+        const currentDuration = isObj(duration) ? duration.enter : duration
+
+        this.status = 'enter'
+        this.$emit('before-enter')
+
+        // #ifdef MP-WEIXIN
+        requestAnimationFrame(() => {
+          this.checkStatus('enter')
+          this.$emit('enter')
+
+          this.inited = true
+          this.display = true
+          this.classes = classNames.enter
+          this.currentDuration = currentDuration
+
+          requestAnimationFrame(() => {
+            this.checkStatus('enter')
+            this.transitionEnded = false
+
+            this.classes = classNames['enter-to']
+          })
+        })
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        Promise.resolve()
+          .then(nextTick)
+          .then(() => {
+            this.checkStatus('enter')
+            this.$emit('enter')
+
+            this.inited = true
+            this.display = true
+            this.classes = classNames.enter
+            this.currentDuration = currentDuration
+          })
+          .then(nextTick)
+          .then(() => {
+            this.checkStatus('enter')
+            this.transitionEnded = false
+
+            this.classes = classNames['enter-to']
+          })
+          .catch(() => {})
+        // #endif
+      },
+
+      leave() {
+        if (!this.display) {
+          return
+        }
+
+        const { duration, name, currentName } = this
+        const classNames = this.getClassNames(currentName || name)
+        const currentDuration = isObj(duration) ? duration.leave : duration
+
+        this.status = 'leave'
+        this.$emit('before-leave')
+
+        // #ifdef MP-WEIXIN
+        requestAnimationFrame(() => {
+          this.checkStatus('leave')
+          this.$emit('leave')
+
+          this.classes = classNames.leave
+          this.currentDuration = currentDuration
+
+          requestAnimationFrame(() => {
+            this.checkStatus('leave')
+            this.transitionEnded = false
+            setTimeout(() => this.onTransitionEnd(), currentDuration)
+
+            this.classes = classNames['leave-to']
+          })
+        })
+        // #endif
+
+        // #ifndef MP-WEIXIN
+        Promise.resolve()
+          .then(nextTick)
+          .then(() => {
+            this.checkStatus('leave')
+            this.$emit('leave')
+
+            this.classes = classNames.leave
+            this.currentDuration = currentDuration
+          })
+          .then(nextTick)
+          .then(() => {
+            this.checkStatus('leave')
+            this.transitionEnded = false
+            setTimeout(() => this.onTransitionEnd(), currentDuration)
+
+            this.classes = classNames['leave-to']
+          })
+          .catch(() => {})
+        // #endif
+      },
+
+      checkStatus(status) {
+        if (status !== this.status) {
+          throw new Error(`incongruent status: ${status}`)
+        }
+      },
+
+      onTransitionEnd() {
+        if (this.transitionEnded) {
+          return
+        }
+
+        this.transitionEnded = true
+        this.$emit(`after-${this.status}`)
+
+        const { show, display } = this
+        if (!show && display) {
+          this.display = false
+        }
+      }
+    }
+  }
+}

src/ttcomponents/utils/index.js

@@ -0,0 +1,19 @@
+// 驼峰转短横线
+// 来自：https://blog.csdn.net/Ttian6/article/details/100986106
+export function getKebabCase(str) {
+  return str.replace(/[A-Z]/g, function(item) {
+    return '-' + item.toLowerCase()
+  })
+}
+
+// 短横线转驼峰
+// 来自：https://blog.csdn.net/Ttian6/article/details/100986106
+export function getCamelCase(str) {
+  return str.replace(/-([a-z])/g, function(keb, item) {
+    return item.toUpperCase()
+  })
+}
+
+export function sortChildren(children) {
+  children.sort((a, b) => a._uid - b._uid)
+}

src/ttcomponents/van-action-sheet/README.md

@@ -0,0 +1,201 @@
+# ActionSheet 上拉菜单
+
+### 引入
+
+推荐使用 `easycom` 的方式引入，详细介绍见[快速上手](#/quickstart#easycom-mo-shi-tui-jian)
+
+## 代码演示
+
+### 基础用法
+
+需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
+
+```html
+<van-action-sheet
+  :show="show"
+  :actions="actions"
+  @close="onClose"
+  @select="onSelect"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return{
+      show: false,
+      actions: [
+        {
+          name: '选项',
+        },
+        {
+          name: '选项',
+        },
+        {
+          name: '选项',
+          subname: '副文本',
+          openType: 'share',
+        },
+      ],
+    }
+  },
+
+  methods: {
+    onClose() {
+      this.show = false;
+    },
+
+    onSelect(event) {
+      console.log(event.detail);
+    },
+  }
+}
+```
+
+### 选项状态
+
+选项可以设置为加载状态或禁用状态。
+
+```html
+<van-action-sheet
+  :show="show"
+  :actions="actions"
+  cancel-text="取消"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: '选项', color: '#07c160' },
+        { loading: true },
+        { name: '禁用选项', disabled: true },
+      ],
+    }
+  }
+}
+```
+
+### 展示取消按钮
+
+设置`cancel-text`属`性后，会在底部展示取消按钮，点击后关闭当前菜单
+
+```html
+<van-action-sheet
+  :show="show"
+  :actions="actions"
+  cancel-text="取消"
+/>
+```
+
+### 展示描述信息
+
+设置`description`属性后，会在选项上方显示描述信息
+
+```html
+<van-action-sheet
+  :show="show"
+  :actions="actions"
+  description="这是一段描述信息"
+/>
+```
+
+### 展示标题栏
+
+通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容
+
+```html
+<van-action-sheet :show="show" title="标题">
+  <view>内容</view>
+</van-action-sheet>
+```
+
+### 微信开放能力
+
+需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
+
+```html
+<van-action-sheet
+  :show="show"
+  :actions="actions"
+  @close="onClose"
+  @getuserinfo="onGetUserInfo"
+/>
+```
+
+```javascript
+export default {
+  data: {
+    show: false,
+    actions: [
+      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
+    ],
+  },
+
+  methods: {
+    onClose() {
+      this.show = false;
+    },
+
+    onGetUserInfo(e) {
+      console.log(e.detail);
+    },
+  }
+}
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| actions | 菜单选项 | _Array_ | `[]` | - |
+| title | 标题 | _string_ | - | - |
+| description | 选项上方的描述信息 | _string_ | - | 1.0.0 |
+| z-index | z-index 层级 | _number_ | `100` | - |
+| cancel-text | 取消按钮文字 | _string_ | - | - |
+| overlay | 是否显示遮罩层 | _boolean_ | - | - |
+| round | 是否显示圆角 | _boolean_ | `true` | 1.0.0 |
+| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` | - |
+| close-on-click-overlay | 点击遮罩是否关闭菜单 | _boolean_ | - | - |
+| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | - |
+
+### Events
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| @select | 选中选项时触发，禁用或加载状态下不会触发 | event.detail: 选项对应的对象 |
+| @close | 关闭时触发 | - |
+| @cancel | 取消按钮点击时触发 | - |
+| @click-overlay | 点击遮罩层时触发 | - |
+| @getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，<a href="#/action-sheet#actions">openType</a>="getUserInfo"时有效 | - |
+| @contact | 客服消息回调，<a href="#/action-sheet#actions">openType</a>="contact"时有效 | - |
+| @getphonenumber | 获取用户手机号回调，<a href="#/action-sheet#actions">openType</a>="getPhoneNumber"时有效 | - |
+| @error | 当使用开放能力时，发生错误的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
+| @launchapp | 打开 APP 成功的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
+| @opensetting | 在打开授权设置页后回调，<a href="#/action-sheet#actions">openType</a>="openSetting"时有效 | - |
+
+### actions
+
+`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+
+| 键名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 标题 | _string_ | - |
+| subname | 二级标题 | _string_ | - |
+| color | 选项文字颜色 | _string_ | - |
+| loading | 是否为加载状态 | _boolean_ | - |
+| disabled | 是否为禁用状态 | _boolean_ | - |
+| className | 为对应列添加额外的 class 类名 | _string_ | - |
+| openType | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - |
+| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | _string_ | `en` |
+| sessionFrom | 会话来源，openType="contact"时有效 | _string_ | - |
+| sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | _string_ | 当前标题 |
+| sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | _string_ | 当前分享路径 |
+| sendMessageImg | 会话内消息卡片图片，openType="contact"时有效 | _string_ | 截图 |
+| showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 | _string_ | `false` |
+| appParameter | 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 | _string_ | - |

src/ttcomponents/van-action-sheet/demo.json

@@ -1,8 +0,0 @@
-{
-  "navigationBarTitleText": "ActionSheet 上拉菜单",
-  "usingComponents": {
-    "demo-block": "/components/demo-block/demo-block",
-    "van-button": "/packages/van-button/van-button",
-    "van-action-sheet": "/packages/van-action-sheet/van-action-sheet"
-  }
-}

src/ttcomponents/van-action-sheet/demo.ttss

@@ -1 +0,0 @@
-.content{padding:20px}

src/ttcomponents/van-action-sheet/demo.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <demo-block title="基础用法" padding>
+      <van-button type="primary" @click="toggleActionSheet1">弹出菜单</van-button>
+      <van-action-sheet
+        :show="show1"
+        :actions="action1"
+        @close="toggleActionSheet1"
+        @select="toggleActionSheet1"
+      />
+    </demo-block>
+
+    <demo-block title="选项状态" padding>
+      <van-button type="primary" @click="toggleActionSheet2">弹出菜单</van-button>
+      <van-action-sheet
+        :show="show2"
+        :actions="action2"
+        @close="toggleActionSheet2"
+        @cancel="toggleActionSheet2"
+        @select="toggleActionSheet2"
+      />
+    </demo-block>
+
+    <demo-block title="展示取消按钮" padding>
+      <van-button type="primary" @click="toggleActionSheet3">弹出菜单</van-button>
+      <van-action-sheet
+        :show="show3"
+        :actions="action1"
+        cancel-text="取消"
+        @close="toggleActionSheet3"
+      >
+      </van-action-sheet>
+    </demo-block>
+
+    <demo-block title="展示描述信息" padding>
+      <van-button type="primary" @click="toggleActionSheet4">弹出菜单</van-button>
+      <van-action-sheet
+        :show="show4"
+        :actions="action1"
+        description="这是一段描述信息"
+        @close="toggleActionSheet4"
+      >
+      </van-action-sheet>
+    </demo-block>
+
+    <demo-block title="展示标题栏" padding>
+      <van-button type="primary" @click="toggleActionSheet5">弹出菜单</van-button>
+      <van-action-sheet
+        :show="show5"
+        title="标题"
+        @close="toggleActionSheet5"
+      >
+        <view class="content">内容</view>
+      </van-action-sheet>
+    </demo-block>
+
+    <demo-block title="微信开发能力" padding>
+      <van-button type="primary" @click="toggleActionSheet6">弹出菜单</van-button>
+      <van-action-sheet
+        :show="show6"
+        title="标题"
+        @close="toggleActionSheet6"
+        :actions="action6"
+        @getuserinfo="onGetUserInfo"
+      >
+      </van-action-sheet>
+    </demo-block>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false,
+      show4: false,
+      show5: false,
+      show6: false,
+      action1: [
+        { name: '选项' },
+        { name: '选项' },
+        { name: '选项', subname: '副文本' }
+      ],
+      action2: [
+        { name: '选项', color: '#07c160' },
+        { loading: true },
+        { name: '禁用选项', disabled: true }
+      ],
+      action6: [
+        { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' }
+      ]
+    }
+  },
+  methods: {
+    toggle(type) {
+      this[type] = !this[type]
+    },
+
+    toggleActionSheet1() {
+      this.toggle('show1')
+    },
+
+    toggleActionSheet2() {
+      this.toggle('show2')
+    },
+
+    toggleActionSheet3() {
+      this.toggle('show3')
+    },
+
+    toggleActionSheet4() {
+      this.toggle('show4')
+    },
+
+    toggleActionSheet5() {
+      this.toggle('show5')
+    },
+    toggleActionSheet6() {
+      this.toggle('show6')
+    },
+    onGetUserInfo(e) {
+      console.log(e)
+    }
+  }
+}
+</script>
+
+<style>
+.content {
+  padding: 20px;
+}
+</style>

src/ttcomponents/van-action-sheet/index.less

@@ -0,0 +1,74 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+@import '../common/style/hairline.less';
+
+.van-action-sheet {
+  .theme(max-height, '@action-sheet-max-height') !important;
+  .theme(color, '@action-sheet-item-text-color');
+
+  &__item,
+  &__cancel {
+    text-align: center;
+    border: none;
+    .theme(font-size, '@action-sheet-item-font-size');
+    .theme(line-height, '@action-sheet-item-height');
+    .theme(background-color, '@action-sheet-item-background');
+
+    &--hover {
+      .theme(background-color, '@active-color');
+    }
+  }
+
+  &__cancel {
+    &::before {
+      display: block;
+      content: ' ';
+      .theme(height, '@action-sheet-cancel-padding-top');
+      .theme(background-color, '@action-sheet-cancel-padding-color');
+    }
+  }
+
+  &__item--disabled {
+    .theme(color, '@action-sheet-item-disabled-text-color');
+  }
+
+  &__item--disabled&__item--hover {
+    .theme(background-color, '@action-sheet-item-background');
+  }
+
+  &__subname {
+    .theme(margin-left, '@padding-base');
+    .theme(font-size, '@action-sheet-subname-font-size');
+    .theme(color, '@action-sheet-subname-color');
+  }
+
+  &__header {
+    text-align: center;
+    .theme(font-weight, '@font-weight-bold');
+    .theme(font-size, '@action-sheet-header-font-size');
+    .theme(line-height, '@action-sheet-header-height');
+  }
+
+  &__description {
+    text-align: center;
+    .theme(padding, '@padding-md');
+    .theme(color, '@action-sheet-description-color');
+    .theme(font-size, '@action-sheet-description-font-size');
+    .theme(line-height, '@action-sheet-description-line-height');
+  }
+
+  &__close {
+    position: absolute !important;
+    top: 0;
+    right: 0;
+    line-height: inherit !important;
+    .theme(padding, '@action-sheet-close-icon-padding');
+    .theme(font-size, '@action-sheet-close-icon-size') !important;
+    .theme(color, '@action-sheet-close-icon-color');
+  }
+
+  &__loading {
+    display: flex !important;
+    .theme(height, '@action-sheet-item-height');
+  }
+}

src/ttcomponents/van-action-sheet/van-action-sheet.json

@@ -1,8 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-popup": "/packages/van-popup/van-popup",
-    "van-icon": "/packages/van-icon/van-icon",
-    "van-loading": "/packages/van-loading/van-loading"
-  }
-}

src/ttcomponents/van-action-sheet/van-action-sheet.ttss

@@ -1,15 +0,0 @@
-.van-hairline,
-.van-hairline--top,
-.van-hairline--left,
-.van-hairline--right,
-.van-hairline--bottom,
-.van-hairline--top-bottom,
-.van-hairline--surround{position:relative}.van-hairline::after,
-.van-hairline--top::after,
-.van-hairline--left::after,
-.van-hairline--right::after,
-.van-hairline--bottom::after,
-.van-hairline--top-bottom::after,
-.van-hairline--surround::after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}.van-action-sheet{max-height:90% !important;max-height:var(--action-sheet-max-height,90%) !important;color:#323233;color:var(--action-sheet-item-text-color,#323233)}.van-action-sheet__item,
-.van-action-sheet__cancel{text-align:center;border:none;font-size:16px;font-size:var(--action-sheet-item-font-size,16px);line-height:50px;line-height:var(--action-sheet-item-height,50px);background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__item--hover,
-.van-action-sheet__cancel--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-action-sheet__cancel::before{display:block;content:" ";height:8px;height:var(--action-sheet-cancel-padding-top,8px);background-color:#f7f8fa;background-color:var(--action-sheet-cancel-padding-color,#f7f8fa)}.van-action-sheet__item--disabled{color:#c8c9cc;color:var(--action-sheet-item-disabled-text-color,#c8c9cc)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{margin-left:4px;margin-left:var(--padding-base,4px);font-size:12px;font-size:var(--action-sheet-subname-font-size,12px);color:#646566;color:var(--action-sheet-subname-color,#646566)}.van-action-sheet__header{text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--action-sheet-header-font-size,16px);line-height:44px;line-height:var(--action-sheet-header-height,44px)}.van-action-sheet__description{text-align:center;padding:16px;padding:var(--padding-md,16px);color:#646566;color:var(--action-sheet-description-color,#646566);font-size:14px;font-size:var(--action-sheet-description-font-size,14px);line-height:20px;line-height:var(--action-sheet-description-line-height,20px)}.van-action-sheet__close{position:absolute !important;top:0;right:0;line-height:inherit !important;padding:0 12px;padding:var(--action-sheet-close-icon-padding,0 12px);font-size:18px !important;font-size:var(--action-sheet-close-icon-size,18px) !important;color:#969799;color:var(--action-sheet-close-icon-color,#969799)}.van-action-sheet__loading{display:-webkit-box !important;display:-webkit-flex !important;display:flex !important;height:50px;height:var(--action-sheet-item-height,50px)}

src/ttcomponents/van-action-sheet/van-action-sheet.vue

@@ -0,0 +1,155 @@
+<template>
+  <van-popup
+    :show="show"
+    position="bottom"
+    :round="round"
+    :z-index="zIndex"
+    :overlay="overlay"
+    custom-class="van-action-sheet"
+    :safe-area-inset-bottom="safeAreaInsetBottom"
+    :close-on-click-overlay="closeOnClickOverlay"
+    @close="onClickOverlay"
+  >
+    <view v-if="title" class="van-hairline--bottom van-action-sheet__header">
+      {{ title }}
+      <van-icon
+        name="close"
+        custom-class="van-action-sheet__close"
+        class="van-action-sheet__close"
+        @click="onClose"
+      />
+    </view>
+    <view v-if="description" class="van-action-sheet__description">
+      {{ description }}
+    </view>
+    <view v-if="actions && actions.length">
+      <!-- button外包一层view，防止actions动态变化，导致渲染时button被打散 -->
+      <button
+        v-for="(item, index) in currentActions"
+        :key="index"
+        :open-type="item.openType"
+        :style="[item.color ? { color: item.color } : {}]"
+        :class="item.buttonClass"
+        hover-class="van-action-sheet__item--hover"
+        @click="onSelect(index)"
+        @getuserinfo="bindGetUserInfo"
+        @contact="bindContact"
+        @getphonenumber="bindGetPhoneNumber"
+        @error="bindError"
+        @launchapp="bindLaunchApp"
+        @opensetting="bindOpenSetting"
+        :lang="lang"
+        :session-from="sessionFrom"
+        :send-message-title="sendMessageTitle"
+        :send-message-path="sendMessagePath"
+        :send-message-img="sendMessageImg"
+        :show-message-card="showMessageCard"
+        :app-parameter="appParameter"
+      >
+        <block v-if="!item.loading">
+          {{ item.name }}
+          <text v-if="item.subname" class="van-action-sheet__subname" >{{ item.subname }}</text>
+        </block>
+        <van-loading v-else custom-class="van-action-sheet__loading" size="20px" />
+      </button>
+    </view>
+    <slot />
+    <view
+      v-if="cancelText"
+      class="van-action-sheet__cancel"
+      hover-class="van-action-sheet__cancel--hover"
+      hover-stay-time="70"
+      @click="onCancel"
+    >
+      {{ cancelText }}
+    </view>
+  </van-popup>
+</template>
+
+<script>
+import utils from '../wxs/utils'
+import VanIcon from '../van-icon/van-icon'
+import VanPopup from '../van-popup/van-popup'
+import VanLoading from '../van-loading/van-loading'
+import { VantComponent } from '../common/component'
+import { button } from '../mixins/button'
+import { openType } from '../mixins/open-type'
+export default {
+  components: {
+    VanIcon,
+    VanPopup,
+    VanLoading
+  },
+  ...VantComponent({
+    mixins: [button, openType],
+    props: {
+      show: Boolean,
+      title: String,
+      cancelText: String,
+      description: String,
+      round: {
+        type: Boolean,
+        default: true,
+      },
+      zIndex: {
+        type: Number,
+        default: 100,
+      },
+      actions: {
+        type: Array,
+        default: () => [],
+      },
+      overlay: {
+        type: Boolean,
+        default: true,
+      },
+      closeOnClickOverlay: {
+        type: Boolean,
+        default: true,
+      },
+      closeOnClickAction: {
+        type: Boolean,
+        default: true,
+      },
+      safeAreaInsetBottom: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    computed: {
+      currentActions() {
+        return this.actions.map(item => ({ ...item, buttonClass: `${ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) } van-hairline--top ${ item.className || '' }` }))
+      }
+    },
+    methods: {
+      onSelect(index) {
+        const item = this.actions[index]
+        if (item && !item.disabled && !item.loading) {
+          this.$emit('select', item)
+
+          if (this.closeOnClickAction) {
+            this.onClose()
+          }
+        }
+      },
+
+      onCancel() {
+        this.$emit('cancel')
+      },
+
+      onClose() {
+        this.$emit('close')
+      },
+
+      onClickOverlay() {
+        this.$emit('click-overlay')
+        this.onClose()
+      },
+    }
+  })
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/ttcomponents/van-button/README.md

@@ -0,0 +1,159 @@
+# Button 按钮
+
+### 引入
+
+推荐使用 `easycom` 的方式引入，详细介绍见[快速上手](#/quickstart#easycom-mo-shi-tui-jian)
+
+## 代码演示
+
+### 按钮类型
+
+支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
+
+```html
+<van-button type="default">默认按钮</van-button>
+<van-button type="primary">主要按钮</van-button>
+<van-button type="info">信息按钮</van-button>
+<van-button type="warning">警告按钮</van-button>
+<van-button type="danger">危险按钮</van-button>
+```
+
+### 朴素按钮
+
+通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色
+
+```html
+<van-button plain type="primary">朴素按钮</van-button>
+<van-button plain type="info">朴素按钮</van-button>
+```
+
+### 细边框
+
+设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
+
+```html
+<van-button plain hairline type="primary">细边框按钮</van-button>
+<van-button plain hairline type="info">细边框按钮</van-button>
+```
+
+### 禁用状态
+
+通过`disabled`属性来禁用按钮，此时按钮的`bind:click`事件不会触发
+
+```html
+<van-button disabled type="primary">禁用状态</van-button>
+<van-button disabled type="info">禁用状态</van-button>
+```
+
+### 加载状态
+
+```html
+<van-button loading type="primary" />
+<van-button loading type="primary" loading-type="spinner" />
+<van-button loading type="info" loading-text="加载中..." />
+```
+
+### 按钮形状
+
+```html
+<van-button square type="primary">方形按钮</van-button>
+<van-button round type="info">圆形按钮</van-button>
+```
+
+### 图标按钮
+
+通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
+
+```html
+<van-button icon="star-o" type="primary" />
+<van-button icon="star-o" type="primary">按钮</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">
+  按钮
+</van-button>
+```
+
+### 按钮尺寸
+
+支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
+
+```html
+<van-button type="primary" size="large">大号按钮</van-button>
+<van-button type="primary" size="normal">普通按钮</van-button>
+<van-button type="primary" size="small">小型按钮</van-button>
+<van-button type="primary" size="mini">迷你按钮</van-button>
+```
+
+### 块级元素
+
+通过`block`属性可以将按钮的元素类型设置为块级元素
+
+```html
+<van-button type="primary" block>块级元素</van-button>
+```
+
+### 自定义颜色
+
+通过`color`属性可以自定义按钮的颜色
+
+```html
+<van-button color="#7232dd">单色按钮</van-button>
+<van-button color="#7232dd" plain>单色按钮</van-button>
+<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
+  渐变色按钮
+</van-button>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| id | 标识符 | _string_ | - | - |
+| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | - |
+| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | - |
+| color | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - | 1.0.0 |
+| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
+| class-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon) | _string_ | `van-icon` | - |
+| plain | 是否为朴素按钮 | _boolean_ | `false` | - |
+| block | 是否为块级元素 | _boolean_ | `false` | - |
+| round | 是否为圆形按钮 | _boolean_ | `false` | - |
+| square | 是否为方形按钮 | _boolean_ | `false` | - |
+| disabled | 是否禁用按钮 | _boolean_ | `false` | - |
+| hairline | 是否使用 0.5px 边框 | _boolean_ | `false` | - |
+| loading | 是否显示为加载状态 | _boolean_ | `false` | - |
+| loading-text | 加载状态提示文字 | _string_ | - | - |
+| loading-type | 加载状态图标类型，可选值为 `spinner` | _string_ | `circular` | - |
+| loading-size | 加载图标大小 | _string_ | `20px` | - |
+| custom-style | 自定义样式 | _string_ | - | - |
+| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | _string_ | - | - |
+| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | - |
+| lang | 指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文 | _string_ | `en` | - | - |
+| session-from | 会话来源 | _string_ | - | - |
+| business-id | 客服消息子商户 id | _number_ | - | - |
+| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | - |
+| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | - |
+| send-message-img | sendMessageImg | _string_ | 截图 | - |
+| show-message-card | 显示会话内消息卡片 | _string_ | `false` | - |
+| dataset | 按钮 dataset，open-type 为 `share` 时，可在 onShareAppMessage 事件的 `event.target.dataset.detail` 中看到传入的值 | _any_ | - | - |
+| form-type | 用于 form 组件，可选值为`submit` `reset`，点击分别会触发 form 组件的 submit/reset 事件 | _string_ | - | - |
+
+### Events
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| @click | 点击按钮，且按钮状态不为加载或禁用时触发 | - |
+| @getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
+| @contact | 客服消息回调 | - |
+| @getphonenumber | 获取用户手机号回调 | - |
+| @error | 当使用开放能力时，发生错误的回调 | - |
+| @opensetting | 在打开授权设置页后回调 | - |
+
+> Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。
+
+### 外部样式类
+
+| 类名          | 说明           |
+| ------------- | -------------- |
+| custom-class  | 根节点样式类   |
+| loading-class | 加载图标样式类 |

src/ttcomponents/van-button/demo.js

@@ -1 +0,0 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["packages/van-button/demo"],{"0286":function(n,t,e){"use strict";(function(n){e("6cdc");u(e("66fd"));var t=u(e("370e"));function u(n){return n&&n.__esModule?n:{default:n}}n(t.default)}).call(this,e("f266")["createPage"])},"0f35":function(n,t,e){"use strict";e.r(t);var u=e("f304"),o=e.n(u);for(var c in u)"default"!==c&&function(n){e.d(t,n,(function(){return u[n]}))}(c);t["default"]=o.a},"2de1":function(n,t,e){},"2e7d":function(n,t,e){"use strict";var u=e("2de1"),o=e.n(u);o.a},"370e":function(n,t,e){"use strict";e.r(t);var u=e("f1c0"),o=e("0f35");for(var c in o)"default"!==c&&function(n){e.d(t,n,(function(){return o[n]}))}(c);e("2e7d");var r,a=e("f0c5"),f=Object(a["a"])(o["default"],u["b"],u["c"],!1,null,null,null,!1,u["a"],r);t["default"]=f.exports},f1c0:function(n,t,e){"use strict";e.d(t,"b",(function(){return o})),e.d(t,"c",(function(){return c})),e.d(t,"a",(function(){return u}));var u={demoBlock:function(){return e.e("components/demo-block/demo-block").then(e.bind(null,"e29a"))},vanButton:function(){return Promise.all([e.e("common/vendor"),e.e("packages/van-button/van-button")]).then(e.bind(null,"9e06"))}},o=function(){var n=this,t=n.$createElement;n._self._c},c=[]},f304:function(n,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var u={};t.default=u}},[["0286","common/runtime","common/vendor"]]]);

src/ttcomponents/van-button/demo.json

@@ -1,7 +0,0 @@
-{
-  "navigationBarTitleText": "Button 按钮",
-  "usingComponents": {
-    "demo-block": "/components/demo-block/demo-block",
-    "van-button": "/packages/van-button/van-button"
-  }
-}

src/ttcomponents/van-button/demo.ttss

@@ -1 +0,0 @@
-.row{height:44px;margin-bottom:15px}

src/ttcomponents/van-button/demo.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <demo-block title="按钮类型" padding>
+      <view class="row">
+        <van-button id="im-id" custom-class="demo-margin-right">默认按钮</van-button>
+        <van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
+        <van-button type="info" custom-class="demo-margin-right">信息按钮</van-button>
+      </view>
+      <van-button type="danger" custom-class="demo-margin-right">危险按钮</van-button>
+      <van-button type="warning">警告按钮</van-button>
+    </demo-block>
+
+    <demo-block title="朴素按钮" padding>
+      <van-button type="primary" plain custom-class="demo-margin-right">朴素按钮</van-button>
+      <van-button type="info" plain>朴素按钮</van-button>
+    </demo-block>
+
+    <demo-block title="细边框" padding>
+      <van-button type="primary" plain hairline custom-class="demo-margin-right">细边框按钮</van-button>
+      <van-button type="info" plain hairline>细边框按钮</van-button>
+    </demo-block>
+
+    <demo-block title="禁用状态" padding>
+      <van-button type="primary" disabled custom-class="demo-margin-right">禁用状态</van-button>
+      <van-button type="info" disabled>禁用状态</van-button>
+    </demo-block>
+
+    <demo-block title="加载状态" padding>
+      <van-button loading type="primary" custom-class="demo-margin-right" />
+      <van-button loading type="primary" loading-type="spinner" custom-class="demo-margin-right" />
+      <van-button loading type="info" loading-text="加载中..." />
+    </demo-block>
+
+    <demo-block title="按钮形状" padding>
+      <van-button type="primary" square custom-class="demo-margin-right">方形按钮</van-button>
+      <van-button type="info" round>圆形按钮</van-button>
+    </demo-block>
+
+    <demo-block title="图标按钮" padding>
+      <van-button type="primary" icon="star-o" custom-class="demo-margin-right" />
+      <van-button type="primary" icon="star-o" custom-class="demo-margin-right">按钮</van-button>
+      <van-button plain type="primary" icon="https://img.yzcdn.cn/vant/logo.png">按钮</van-button>
+    </demo-block>
+
+    <demo-block title="按钮尺寸" padding>
+      <van-button type="primary" size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
+      <van-button type="primary" custom-class="demo-margin-right">普通按钮</van-button>
+      <van-button type="primary" size="small" custom-class="demo-margin-right">小型按钮</van-button>
+      <van-button type="primary" size="mini">迷你按钮</van-button>
+    </demo-block>
+
+    <demo-block title="块级元素" padding>
+      <van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
+      <van-button type="primary" block>块级元素</van-button>
+    </demo-block>
+
+    <demo-block title="自定义颜色" padding>
+      <van-button color="#7232dd" custom-class="demo-margin-right">单色按钮</van-button>
+      <van-button color="#7232dd" custom-class="demo-margin-right" plain>单色按钮</van-button>
+      <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
+    </demo-block>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+.row {
+  height: 44px;
+  margin-bottom: 15px;
+}
+</style>

src/ttcomponents/van-button/index.less

@@ -0,0 +1,180 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
+
+  .theme(height, '@button-default-height');
+  .theme(line-height, '@button-line-height');
+  .theme(font-size, '@button-default-font-size');
+  .theme(transition, 'opacity @animation-duration-fast');
+  .theme(border-radius, '@button-border-radius');
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    border-radius: inherit; /* inherit parent's border radius */
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+
+    .theme(background-color, '@black');
+    .theme(border-color, '@black');
+  }
+
+  // reset weapp default border
+  &::after {
+    border-width: 0;
+  }
+
+  &--active::before {
+    opacity: 0.15;
+  }
+
+  &--unclickable::after {
+    display: none;
+  }
+
+  &--default {
+    .theme(color, '@button-default-color');
+    .theme(background, '@button-default-background-color');
+    .theme(border, '@button-border-width solid @button-default-border-color');
+  }
+
+  &--primary {
+    .theme(color, '@button-primary-color');
+    .theme(background, '@button-primary-background-color');
+    .theme(border, '@button-border-width solid @button-primary-border-color');
+  }
+
+  &--info {
+    .theme(color, '@button-info-color');
+    .theme(background, '@button-info-background-color');
+    .theme(border, '@button-border-width solid @button-info-border-color');
+  }
+
+  &--danger {
+    .theme(color, '@button-danger-color');
+    .theme(background, '@button-danger-background-color');
+    .theme(border, '@button-border-width solid @button-danger-border-color');
+  }
+
+  &--warning {
+    .theme(color, '@button-warning-color');
+    .theme(background, '@button-warning-background-color');
+    .theme(border, '@button-border-width solid @button-warning-border-color');
+  }
+
+  &--plain {
+    .theme(background, '@button-plain-background-color');
+
+    &.van-button--primary {
+      .theme(color, '@button-primary-background-color');
+    }
+
+    &.van-button--info {
+      .theme(color, '@button-info-background-color');
+    }
+
+    &.van-button--danger {
+      .theme(color, '@button-danger-background-color');
+    }
+
+    &.van-button--warning {
+      .theme(color, '@button-warning-background-color');
+    }
+  }
+
+  &--large {
+    width: 100%;
+    .theme(height, '@button-large-height');
+  }
+
+  &--normal {
+    padding: 0 15px;
+    .theme(font-size, '@button-normal-font-size');
+  }
+
+  &--small {
+    .theme(min-width, '@button-small-min-width');
+    .theme(height, '@button-small-height');
+    .theme(padding, '0 @padding-xs');
+    .theme(font-size, '@button-small-font-size');
+  }
+
+  // mini图标默认宽度50px，文字不能超过4个
+  &--mini {
+    display: inline-block;
+    .theme(min-width, '@button-mini-min-width');
+    .theme(height, '@button-mini-height');
+    .theme(font-size, '@button-mini-font-size');
+
+    & + .van-button--mini {
+      margin-left: 5px;
+    }
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &--round {
+    .theme(border-radius, '@button-round-border-radius');
+  }
+
+  &--square {
+    border-radius: 0;
+  }
+
+  &--disabled {
+    .theme(opacity, '@button-disabled-opacity');
+  }
+
+  &__text {
+    display: inline;
+  }
+
+  &__loading-text,
+  &__icon + &__text:not(:empty) {
+    margin-left: @padding-base;
+  }
+
+  &__icon {
+    min-width: 1em;
+    line-height: inherit !important;
+    vertical-align: top;
+  }
+
+  &--hairline {
+    padding-top: 1px; // add 1px padding for text vertical align middle
+    border-width: 0;
+
+    &::after {
+      border-color: inherit;
+      border-width: 1px;
+      .theme(border-radius, 'calc(@button-border-radius * 2)');
+    }
+
+    &.van-button--round::after {
+      .theme(border-radius, '@button-round-border-radius');
+    }
+
+    &.van-button--square::after {
+      border-radius: 0;
+    }
+  }
+}

src/ttcomponents/van-button/van-button.json

@@ -1,7 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-loading": "/packages/van-loading/van-loading",
-    "van-icon": "/packages/van-icon/van-icon"
-  }
-}

src/ttcomponents/van-button/van-button.ttml

@@ -1 +0,0 @@
-<button class="{{(buttonClass)}}" style="{{(buttonStyle)}}" id="{{id}}" data-detail="{{dataset}}" hover-class="{{btnHoverClass}}" lang="{{lang}}" form-type="{{formType}}" open-type="{{disabled?'':openType}}" business-id="{{businessId}}" session-from="{{sessionFrom}}" send-message-title="{{sendMessageTitle}}" send-message-path="{{sendMessagePath}}" send-message-img="{{sendMessageImg}}" show-message-card="{{showMessageCard}}" app-parameter="{{appParameter}}" aria-label="{{ariaLabel}}" data-event-opts="{{[['tap',[['onClick',['$event']]]],['getuserinfo',[['bindGetUserInfo',['$event']]]],['contact',[['bindContact',['$event']]]],['getphonenumber',[['bindGetPhoneNumber',['$event']]]],['error',[['bindError',['$event']]]],['launchapp',[['bindLaunchApp',['$event']]]],['opensetting',[['bindOpenSetting',['$event']]]]]}}" bindtap="__e" bindgetuserinfo="__e" bindcontact="__e" bindgetphonenumber="__e" binderror="__e" bindlaunchapp="__e" bindopensetting="__e"><block tt:if="{{loading}}"><block><van-loading vue-id="500e5d6a-1" custom-class="{{loadingCustomClass}}" size="{{loadingSize}}" type="{{loadingType}}" color="{{$root.m0}}" bind:__l="__l"></van-loading><block tt:if="{{loadingText}}"><view class="van-button__loading-text">{{''+loadingText+''}}</view></block></block></block><block tt:else><block><block tt:if="{{icon}}"><van-icon class="van-button__icon" vue-id="500e5d6a-2" size="1.2em" name="{{icon}}" class-prefix="{{classPrefix}}" custom-class="van-button__icon" custom-style="line-height: inherit;" bind:__l="__l"></van-icon></block><view class="van-button__text"><slot></slot></view></block></block></button>

src/ttcomponents/van-button/van-button.vue

@@ -0,0 +1,174 @@
+<template>
+  <button
+    :id="id"
+    :data-detail="dataset"
+    :class="buttonClass"
+    :hover-class="btnHoverClass"
+    :lang="lang"
+    :form-type="formType"
+    :style="buttonStyle"
+    :open-type="disabled ? '' : openType"
+    :business-id="businessId"
+    :session-from="sessionFrom"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :send-message-img="sendMessageImg"
+    :show-message-card="showMessageCard"
+    :app-parameter="appParameter"
+    :aria-label="ariaLabel"
+    @click="onClick"
+    @getuserinfo="bindGetUserInfo"
+    @contact="bindContact"
+    @getphonenumber="bindGetPhoneNumber"
+    @error="bindError"
+    @launchapp="bindLaunchApp"
+    @opensetting="bindOpenSetting"
+  >
+    <block v-if="loading">
+      <van-loading
+        :custom-class="loadingCustomClass"
+        :size="loadingSize"
+        :type="loadingType"
+        :color="loadingColor(type, color, plain)"
+      />
+      <view v-if="loadingText" class="van-button__loading-text">
+        {{ loadingText }}
+      </view>
+    </block>
+    <block v-else>
+      <van-icon
+        v-if="icon"
+        size="1.2em"
+        :name="icon"
+        :class-prefix="classPrefix"
+        custom-class="van-button__icon"
+        class="van-button__icon"
+        custom-style="line-height: inherit;"
+      />
+      <view class="van-button__text">
+        <slot />
+      </view>
+    </block>
+  </button>
+</template>
+
+<script>
+import { VantComponent } from '../common/component'
+import { button } from '../mixins/button'
+import { openType } from '../mixins/open-type'
+import VanIcon from '../van-icon/van-icon'
+import VanLoading from '../van-loading/van-loading'
+const utils = require('../wxs/utils')
+export default {
+  // 组件必须这样子引入，不能放在 VantComponent 里面
+  components: {
+    VanIcon,
+    VanLoading
+  },
+  ...VantComponent({
+    classes: ['hover-class', 'loading-class'],
+    mixins: [button, openType],
+    props: {
+      formType: String,
+      icon: String,
+      classPrefix: {
+        type: String,
+        default: 'van-icon'
+      },
+      plain: Boolean,
+      block: Boolean,
+      round: Boolean,
+      square: Boolean,
+      loading: Boolean,
+      hairline: Boolean,
+      disabled: Boolean,
+      loadingText: String,
+      loadingType: {
+        type: String,
+        default: 'circular'
+      },
+      type: {
+        type: String,
+        default: 'default'
+      },
+      dataset: null,
+      size: {
+        type: String,
+        default: 'normal'
+      },
+      loadingSize: {
+        type: String,
+        default: '20px'
+      },
+      color: {
+        type: String
+      }
+    },
+    computed: {
+      baseStyle() {
+        let style = ''
+
+        const { color, plain } = this
+
+        if (color) {
+          style += `color: ${plain ? color : 'white'};`
+
+          if (!plain) {
+            // Use background instead of backgroundColor to make linear-gradient work
+            style += `background: ${color};`
+          }
+
+          // hide border when color is linear-gradient
+          if (color.indexOf('gradient') !== -1) {
+            style += 'border: 0;'
+          } else {
+            style += `border-color: ${color};`
+          }
+        }
+
+        return style
+      },
+      buttonClass() {
+        const { customClass, type, size, block, round, plain, square, loading, disabled, hairline } = this
+        const bemClass = utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }])
+        return `custom-class ${ customClass } ${ bemClass } ${ hairline ? 'van-hairline--surround' : '' }`
+      },
+      buttonStyle() {
+        const { baseStyle, customStyle } = this
+        return `${ baseStyle } ${ customStyle }`
+      },
+      btnHoverClass() {
+        return `van-button--active hover-class ${this.hoverClass}`
+      },
+      loadingCustomClass() {
+        return `loading-class ${this.loadingClass}`
+      }
+    },
+
+    methods: {
+      loadingColor(type, color, plain) {
+        if (plain) {
+          return color ? color : '#c9c9c9'
+        }
+
+        if (type === 'default') {
+          return '#c9c9c9'
+        }
+        return 'white'
+      },
+      onClick(e) {
+        if (this.disabled) {
+          return
+        }
+        if (!this.loading) {
+          this.$emit('click', e)
+        }
+      }
+    }
+  })
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/ttcomponents/van-cell-group/index.less

@@ -0,0 +1,11 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-cell-group {
+  &__title {
+    .theme(padding, '@cell-group-title-padding');
+    .theme(font-size, '@cell-group-title-font-size');
+    .theme(line-height, '@cell-group-title-line-height');
+    .theme(color, '@cell-group-title-color');
+  }
+}

src/ttcomponents/van-cell-group/van-cell-group.js

@@ -1,10 +0,0 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["packages/van-cell-group/van-cell-group"],{"052b":function(t,n,e){"use strict";var a;e.d(n,"b",(function(){return r})),e.d(n,"c",(function(){return u})),e.d(n,"a",(function(){return a}));var r=function(){var t=this,n=t.$createElement;t._self._c},u=[]},"0b26":function(t,n,e){},5707:function(t,n,e){"use strict";var a=e("0b26"),r=e.n(a);r.a},"875e":function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var a=e("a17f"),r=(0,a.VantComponent)({props:{title:String,border:{type:Boolean,default:!0}},computed:{groupClass:function(){var t=this.customClass,n=this.border;return"custom-class ".concat(t," van-cell-group ").concat(n?"van-hairline--top-bottom":"")}}});n.default=r},a0ae:function(t,n,e){"use strict";e.r(n);var a=e("875e"),r=e.n(a);for(var u in a)"default"!==u&&function(t){e.d(n,t,(function(){return a[t]}))}(u);n["default"]=r.a},df3e:function(t,n,e){"use strict";e.r(n);var a=e("052b"),r=e("a0ae");for(var u in r)"default"!==u&&function(t){e.d(n,t,(function(){return r[t]}))}(u);e("5707");var o,c=e("f0c5"),l=Object(c["a"])(r["default"],a["b"],a["c"],!1,null,null,null,!1,a["a"],o);n["default"]=l.exports}}]);
-;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
-    'packages/van-cell-group/van-cell-group-create-component',
-    {
-        'packages/van-cell-group/van-cell-group-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('f266')['createComponent'](__webpack_require__("df3e"))
-        })
-    },
-    [['packages/van-cell-group/van-cell-group-create-component']]
-]);

src/ttcomponents/van-cell-group/van-cell-group.json

@@ -1,4 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {}
-}

src/ttcomponents/van-cell-group/van-cell-group.ttml

@@ -1 +0,0 @@
-<view><block tt:if="{{title}}"><view class="van-cell-group__title">{{''+title+''}}</view></block><view class="{{(groupClass)}}"><slot></slot></view></view>

src/ttcomponents/van-cell-group/van-cell-group.ttss

@@ -1 +0,0 @@
-.van-cell-group__title{padding:16px 16px 8px;padding:var(--cell-group-title-padding,16px 16px 8px);font-size:14px;font-size:var(--cell-group-title-font-size,14px);line-height:16px;line-height:var(--cell-group-title-line-height,16px);color:#969799;color:var(--cell-group-title-color,#969799)}

src/ttcomponents/van-cell-group/van-cell-group.vue

@@ -0,0 +1,33 @@
+<template>
+  <view>
+    <view v-if="title" class="van-cell-group__title">
+      {{ title }}
+    </view>
+    <view :class="groupClass">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script>
+import { VantComponent } from '../common/component'
+export default VantComponent({
+  props: {
+    title: String,
+    border: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    groupClass() {
+      const { customClass, border } = this
+      return `custom-class ${customClass} van-cell-group ${ border ? 'van-hairline--top-bottom' : '' }`
+    }
+  }
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/ttcomponents/van-cell/README.md

@@ -0,0 +1,156 @@
+# Cell 单元格
+
+### 引入
+
+推荐使用 `easycom` 的方式引入，详细介绍见[快速上手](#/quickstart#easycom-mo-shi-tui-jian)
+
+## 代码演示
+
+### 基础用法
+
+`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。
+
+```html
+<van-cell-group>
+  <van-cell title="单元格" value="内容" />
+  <van-cell title="单元格" value="内容" label="描述信息" :border="false" />
+</van-cell-group>
+```
+
+### 单元格大小
+
+通过`size`属性可以控制单元格的大小
+
+```html
+<van-cell title="单元格" value="内容" size="large" />
+<van-cell title="单元格" value="内容" size="large" label="描述信息" />
+```
+
+### 展示图标
+
+通过`icon`属性在标题左侧展示图标
+
+```html
+<van-cell title="单元格" icon="location-o" />
+```
+
+### 展示箭头
+
+设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向
+
+```html
+<van-cell title="单元格" is-link />
+<van-cell title="单元格" is-link value="内容" />
+<van-cell title="单元格" is-link value="内容" arrow-direction="down" />
+```
+
+### 页面跳转
+
+可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型
+
+```html
+<van-cell
+  is-link
+  title="单元格"
+  link-type="navigateTo"
+  url="/pages/dashboard/index"
+/>
+```
+
+### 分组标题
+
+通过`CellGroup`的`title`属性可以指定分组标题
+
+```html
+<van-cell-group title="分组1">
+  <van-cell title="单元格" value="内容" />
+</van-cell-group>
+<van-cell-group title="分组2">
+  <van-cell title="单元格" value="内容" />
+</van-cell-group>
+```
+
+### 使用插槽
+
+如以上用法不能满足你的需求，可以使用插槽来自定义内容
+
+```html
+<van-cell value="内容" icon="shop-o" is-link>
+  <view slot="title">
+    <view class="van-cell-text">单元格</view>
+    <van-tag type="danger">标签</van-tag>
+  </view>
+</van-cell>
+<van-cell title="单元格">
+  <van-icon slot="right-icon" name="search" class="custom-icon" />
+</van-cell>
+```
+
+### 垂直居中
+
+通过`center`属性可以让`Cell`的左右内容都垂直居中
+
+```html
+<van-cell center title="单元格" value="内容" label="描述信息" />
+```
+
+## API
+
+### CellGroup Props
+
+| 参数   | 说明           | 类型      | 默认值 | 版本 |
+| ------ | -------------- | --------- | ------ | ---- |
+| title  | 分组标题       | _string_  | `-`    | -    |
+| border | 是否显示外边框 | _boolean_ | `true` | -    |
+
+### CellGroup 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### Cell Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
+| title | 左侧标题 | _string \| number_ | - |
+| title-width | 标题宽度，须包含单位 | _string_ | - | - |
+| value | 右侧内容 | _string \| number_ | - | - |
+| label | 标题下方的描述信息 | _string_ | - | - |
+| size | 单元格大小，可选值为 `large` | _string_ | - | - |
+| border | 是否显示下边框 | _boolean_ | `true` | - |
+| center | 是否使内容垂直居中 | _boolean_ | `false` | - |
+| url | 点击后跳转的链接地址 | _string_ | - | - |
+| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
+| clickable | 是否开启点击反馈 | _boolean_ | `false` | - |
+| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | - |
+| required | 是否显示表单必填星号 | _boolean_ | `false` | - |
+| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | - |
+| use-label-slot | 是否使用 label slot | _boolean_ | `false` | - |
+| title-style | 标题样式 | _string_ | - | 1.4.0 |
+
+### Cell Event
+
+| 事件名     | 说明             | 参数 |
+| ---------- | ---------------- | ---- |
+| @click | 点击单元格时触发 | -    |
+
+### Cell Slot
+
+| 名称       | 说明                                                           |
+| ---------- | -------------------------------------------------------------- |
+| -          | 自定义`value`显示内容，如果设置了`value`属性则不生效           |
+| title      | 自定义`title`显示内容，如果设置了`title`属性则不生效           |
+| label      | 自定义`label`显示内容，需要设置 `use-label-slot`属性           |
+| icon       | 自定义`icon`显示内容，如果设置了`icon`属性则不生效             |
+| right-icon | 自定义右侧按钮，默认是`arrow`，如果设置了`is-link`属性则不生效 |
+
+### Cell 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| custom-class | 根节点样式类   |
+| title-class  | 标题样式类     |
+| label-class  | 描述信息样式类 |
+| value-class  | 右侧内容样式类 |

src/ttcomponents/van-cell/demo.js

@@ -1 +0,0 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["packages/van-cell/demo"],{"1b5d":function(n,e,t){},"1e6d":function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var o={};e.default=o},"52f3":function(n,e,t){"use strict";(function(n){t("6cdc");o(t("66fd"));var e=o(t("9d32"));function o(n){return n&&n.__esModule?n:{default:n}}n(e.default)}).call(this,t("f266")["createPage"])},"6f09":function(n,e,t){"use strict";t.r(e);var o=t("1e6d"),c=t.n(o);for(var a in o)"default"!==a&&function(n){t.d(e,n,(function(){return o[n]}))}(a);e["default"]=c.a},8094:function(n,e,t){"use strict";var o=t("1b5d"),c=t.n(o);c.a},8393:function(n,e,t){"use strict";t.d(e,"b",(function(){return c})),t.d(e,"c",(function(){return a})),t.d(e,"a",(function(){return o}));var o={demoBlock:function(){return t.e("components/demo-block/demo-block").then(t.bind(null,"e29a"))},vanCellGroup:function(){return Promise.all([t.e("common/vendor"),t.e("packages/van-cell-group/van-cell-group")]).then(t.bind(null,"df3e"))},vanCell:function(){return Promise.all([t.e("common/vendor"),t.e("packages/van-cell/van-cell")]).then(t.bind(null,"8f3b"))},vanTag:function(){return Promise.all([t.e("common/vendor"),t.e("packages/van-tag/van-tag")]).then(t.bind(null,"344c"))},vanIcon:function(){return Promise.all([t.e("common/vendor"),t.e("packages/van-icon/van-icon")]).then(t.bind(null,"4817"))}},c=function(){var n=this,e=n.$createElement;n._self._c},a=[]},"9d32":function(n,e,t){"use strict";t.r(e);var o=t("8393"),c=t("6f09");for(var a in c)"default"!==a&&function(n){t.d(e,n,(function(){return c[n]}))}(a);t("8094");var u,l=t("f0c5"),r=Object(l["a"])(c["default"],o["b"],o["c"],!1,null,null,null,!1,o["a"],u);e["default"]=r.exports}},[["52f3","common/runtime","common/vendor"]]]);

src/ttcomponents/van-cell/demo.json

@@ -1,10 +0,0 @@
-{
-  "navigationBarTitleText": "Cell 单元格",
-  "usingComponents": {
-    "demo-block": "/components/demo-block/demo-block",
-    "van-cell-group": "/packages/van-cell-group/van-cell-group",
-    "van-cell": "/packages/van-cell/van-cell",
-    "van-tag": "/packages/van-tag/van-tag",
-    "van-icon": "/packages/van-icon/van-icon"
-  }
-}

src/ttcomponents/van-cell/demo.ttss

@@ -1 +0,0 @@
-.title{margin-right:5px;display:inline-block;vertical-align:middle}

src/ttcomponents/van-cell/demo.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <demo-block title="基础用法">
+      <van-cell-group>
+        <van-cell title="单元格" value="内容" title-style="color: red" />
+        <van-cell
+          title="单元格"
+          value="内容"
+          label="描述信息"
+          :border="false"
+        />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block title="单元格大小">
+      <van-cell-group>
+        <van-cell
+          title="单元格"
+          value="内容"
+          size="large"
+        />
+        <van-cell
+          title="单元格"
+          value="内容"
+          size="large"
+          use-label-slot
+          :border="false"
+        >
+          <view slot="label">描述信息</view>
+        </van-cell>
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block title="展示图标">
+      <van-cell
+        title="单元格"
+        value="内容"
+        icon="location-o"
+        :border="false"
+      />
+    </demo-block>
+
+    <demo-block title="展示箭头">
+      <van-cell title="单元格" is-link />
+      <van-cell
+        title="单元格"
+        value="内容"
+        is-link
+      />
+      <van-cell
+        title="单元格"
+        is-link
+        arrow-direction="down"
+        value="内容"
+        :border="false"
+      />
+    </demo-block>
+
+    <demo-block title="页面跳转">
+      <van-cell title="单元格" is-link url="/packages/dashboard/index" />
+      <van-cell title="单元格" is-link url="/packages/dashboard/index" link-type="redirectTo" />
+    </demo-block>
+
+    <demo-block title="分组标题">
+      <van-cell-group title="分组 1">
+        <van-cell title="单元格" value="内容" />
+      </van-cell-group>
+      <van-cell-group title="分组 2">
+        <van-cell title="单元格" value="内容" />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block title="使用插槽">
+      <van-cell value="内容" icon="shop-o" is-link>
+        <view slot="title">
+          <view class="title">单元格</view>
+          <van-tag type="danger">标签</van-tag>
+        </view>
+      </van-cell>
+      <van-cell title="单元格" :border="false">
+        <van-icon slot="right-icon" name="search" />
+      </van-cell>
+    </demo-block>
+
+    <demo-block title="垂直居中">
+      <van-cell
+        center
+        title="单元格"
+        value="内容"
+        label="描述信息"
+      />
+    </demo-block>
+
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+.title {
+  margin-right: 5px;
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

src/ttcomponents/van-cell/index.less

@@ -0,0 +1,113 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+@import '../common/style/mixins/hairline.less';
+
+.van-cell {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  .theme(padding, '@cell-vertical-padding @cell-horizontal-padding');
+  .theme(font-size, '@cell-font-size');
+  .theme(line-height, '@cell-line-height');
+  .theme(color, '@cell-text-color');
+  .theme(background-color, '@cell-background-color');
+
+  &::after {
+    .hairline-bottom(@border-color, @padding-md, @padding-md);
+  }
+
+  &--borderless::after {
+    display: none;
+  }
+
+  &-group {
+    .theme(background-color, '@cell-background-color');
+  }
+
+  &__label {
+    .theme(margin-top, '@cell-label-margin-top');
+    .theme(font-size, '@cell-label-font-size');
+    .theme(line-height, '@cell-label-line-height');
+    .theme(color, '@cell-label-color');
+  }
+
+  &__value {
+    overflow: hidden;
+    text-align: right;
+    vertical-align: middle;
+    .theme(color, '@cell-value-color');
+  }
+
+  &__title,
+  &__value {
+    flex: 1;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__left-icon-wrap,
+  &__right-icon-wrap {
+    display: flex;
+    align-items: center;
+    .theme(height, '@cell-line-height');
+    .theme(font-size, '@cell-icon-size');
+  }
+
+  &__left-icon-wrap {
+    margin-right: 5px;
+  }
+
+  &__right-icon-wrap {
+    margin-left: 5px;
+    .theme(color, '@cell-right-icon-color');
+  }
+
+  &__left-icon {
+    vertical-align: middle;
+    .theme(line-height, '@cell-line-height');
+  }
+
+  &__right-icon {
+    .theme(line-height, '@cell-line-height');
+  }
+
+  &--clickable&--hover {
+    .theme(background-color, '@cell-active-color');
+  }
+
+  &--required {
+    overflow: visible;
+
+    &::before {
+      position: absolute;
+      content: '*';
+      .theme(left, '@padding-xs');
+      .theme(font-size, '@cell-font-size');
+      .theme(color, '@cell-required-color');
+    }
+  }
+
+  &--center {
+    align-items: center;
+  }
+
+  &--large {
+    .theme(padding-top, '@cell-large-vertical-padding');
+    .theme(padding-bottom, '@cell-large-vertical-padding');
+
+    .van-cell__title {
+      .theme(font-size, '@cell-large-title-font-size');
+    }
+
+    .van-cell__value {
+      .theme(font-size, '@cell-large-value-font-size');
+    }
+
+    .van-cell__label {
+      .theme(font-size, '@cell-large-label-font-size');
+    }
+  }
+}

src/ttcomponents/van-cell/van-cell.json

@@ -1,6 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-icon": "/packages/van-icon/van-icon"
-  }
-}

src/ttcomponents/van-cell/van-cell.ttml

@@ -1 +0,0 @@
-<view class="{{(('custom-class')+' '+cellClass)}}" style="{{(customStyle)}}" hover-class="{{selfHoverClass}}" hover-stay-time="70" data-event-opts="{{[['tap',[['onClick',['$event']]]]]}}" bindtap="__e"><block tt:if="{{icon}}"><van-icon class="van-cell__left-icon-wrap" vue-id="543626ac-1" name="{{icon}}" custom-class="van-cell__left-icon-wrap van-cell__left-icon" bind:__l="__l"></van-icon></block><block tt:else><slot name="icon"></slot></block><view class="{{(('van-cell__title title-class')+' '+titleClass)}}" style="{{((titleWidth?'max-width:'+titleWidth+';min-width:'+titleWidth+';':'')+titleStyle)}}"><block tt:if="{{title}}"><block>{{title}}</block></block><block tt:else><slot name="title"></slot></block><block tt:if="{{label||useLabelSlot}}"><view class="{{(('van-cell__label label-class')+' '+labelClass)}}"><block tt:if="{{useLabelSlot}}"><slot name="label"></slot></block><block tt:else><block tt:if="{{label}}"><block>{{label}}</block></block></block></view></block></view><view class="{{(('van-cell__value value-class')+' '+valueClass)}}"><block tt:if="{{value||value===0}}"><block>{{value}}</block></block><block tt:else><slot></slot></block></view><block tt:if="{{isLink}}"><van-icon class="{{(selfRightIconClass)}}" vue-id="543626ac-2" name="{{arrowDirection?'arrow'+'-'+arrowDirection:'arrow'}}" custom-class="{{selfRightIconClass}}" bind:__l="__l"></van-icon></block><block tt:else><slot name="right-icon"></slot></block><slot name="extra"></slot></view>

src/ttcomponents/van-cell/van-cell.ttss

@@ -1,4 +0,0 @@
-.van-cell{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);font-size:14px;font-size:var(--cell-font-size,14px);line-height:24px;line-height:var(--cell-line-height,24px);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell::after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless::after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:3px;margin-top:var(--cell-label-margin-top,3px);font-size:12px;font-size:var(--cell-label-font-size,12px);line-height:18px;line-height:var(--cell-label-line-height,18px);color:#969799;color:var(--cell-label-color,#969799)}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,
-.van-cell__value{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-cell__title:empty,
-.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,
-.van-cell__right-icon-wrap{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:24px;height:var(--cell-line-height,24px);font-size:16px;font-size:var(--cell-icon-size,16px)}.van-cell__left-icon-wrap{margin-right:5px}.van-cell__right-icon-wrap{margin-left:5px;color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle;line-height:24px;line-height:var(--cell-line-height,24px)}.van-cell__right-icon{line-height:24px;line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5;background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required::before{position:absolute;content:"*";left:8px;left:var(--padding-xs,8px);font-size:14px;font-size:var(--cell-font-size,14px);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-box-align:center;-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-top:var(--cell-large-vertical-padding,12px);padding-bottom:12px;padding-bottom:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:16px;font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:16px;font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:14px;font-size:var(--cell-large-label-font-size,14px)}

src/ttcomponents/van-cell/van-cell.vue

@@ -0,0 +1,125 @@
+<template>
+  <view
+    class="custom-class"
+    :class="cellClass"
+    :hover-class="selfHoverClass"
+    hover-stay-time="70"
+    :style="customStyle"
+    @tap="onClick"
+  >
+    <van-icon
+      v-if="icon"
+      :name="icon"
+      class="van-cell__left-icon-wrap"
+      custom-class="van-cell__left-icon-wrap van-cell__left-icon"
+    />
+    <slot v-else name="icon" />
+
+    <view
+      :style="
+        (titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth + ';' : '') + titleStyle
+      "
+      class="van-cell__title title-class"
+      :class="titleClass"
+    >
+      <block v-if="title">{{ title }}</block>
+      <slot v-else name="title" />
+
+      <view v-if="label || useLabelSlot" class="van-cell__label label-class" :class="labelClass">
+        <slot v-if="useLabelSlot" name="label" />
+        <block v-else-if="label">{{ label }}</block>
+      </view>
+    </view>
+
+    <view class="van-cell__value value-class" :class="valueClass">
+      <block v-if="value || value === 0">{{ value }}</block>
+      <slot v-else />
+    </view>
+
+    <van-icon
+      v-if="isLink"
+      :name="arrowDirection ? 'arrow' + '-' + arrowDirection : 'arrow'"
+      :class="selfRightIconClass"
+      :custom-class="selfRightIconClass"
+    />
+    <slot v-else name="right-icon" />
+
+    <slot name="extra" />
+  </view>
+</template>
+
+<script>
+import { VantComponent } from '../common/component'
+import { link } from '../mixins/link'
+import VanIcon from '../van-icon/van-icon'
+const utils = require('../wxs/utils')
+export default {
+  components: {
+    VanIcon
+  },
+  ...VantComponent({
+    classes: [
+      'title-class',
+      'label-class',
+      'value-class',
+      'right-icon-class',
+      'hover-class',
+    ],
+    externalStyles: [
+      'title-style'
+    ],
+
+    mixins: [link],
+
+    props: {
+      title: null,
+      value: null,
+      icon: String,
+      size: String,
+      label: String,
+      center: Boolean,
+      isLink: Boolean,
+      required: Boolean,
+      clickable: Boolean,
+      titleWidth: String,
+      arrowDirection: String,
+      useLabelSlot: Boolean,
+      border: {
+        type: Boolean,
+        default: true
+      }
+    },
+    computed: {
+      cellClass() {
+        const { customClass, size, center, border, isLink, clickable, required } = this
+        const cellClass = utils.bem('cell', [
+          size,
+          {
+            center,
+            required,
+            borderless: !border,
+            clickable: isLink || clickable
+          }
+        ])
+        return `${customClass} ${cellClass}`
+      },
+      selfRightIconClass() {
+        return `van-cell__right-icon-wrap right-icon-class van-cell__right-icon ${this.rightIconClass}`
+      },
+      selfHoverClass() {
+        return `van-cell--hover hover-class ${this.hoverClass}`
+      }
+    },
+    methods: {
+      onClick(event) {
+        this.$emit('click', event.detail)
+        this.jumpLink()
+      }
+    }
+  })
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/ttcomponents/van-checkbox-group/index.less

@@ -0,0 +1 @@
+// empty

src/ttcomponents/van-checkbox-group/van-checkbox-group.js

@@ -1,10 +0,0 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["packages/van-checkbox-group/van-checkbox-group"],{1174:function(n,t,e){"use strict";e.r(t);var a=e("522f"),u=e.n(a);for(var i in a)"default"!==i&&function(n){e.d(t,n,(function(){return a[n]}))}(i);t["default"]=u.a},"2bbf":function(n,t,e){},"522f":function(n,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var a=e("a17f"),u=e("5826"),i=e("f22a"),r=(0,a.VantComponent)({mixins:[(0,i.ParentMixin)("vanCheckboxGroup")],props:{max:[Number,String],value:{type:Array,default:function(){return[]}},disabled:{type:Boolean,default:!1}},watch:{value:function(){this.updateChildren()},disabled:function(){this.updateChildren()}},methods:{updateChildren:function(){var n=this;this.$nextTick((function(){var t=(0,u.getComponentByOptionsName)(n,"VanCheckbox");t.forEach((function(t){n.updateChild(t)}))}))},updateChild:function(n){var t=this.value,e=this.disabled;n.currentValue=-1!==t.indexOf(n.name),n.parentDisabled=e}}});t.default=r},"8ebc3":function(n,t,e){"use strict";var a=e("2bbf"),u=e.n(a);u.a},dc22:function(n,t,e){"use strict";var a;e.d(t,"b",(function(){return u})),e.d(t,"c",(function(){return i})),e.d(t,"a",(function(){return a}));var u=function(){var n=this,t=n.$createElement;n._self._c},i=[]},f6ba:function(n,t,e){"use strict";e.r(t);var a=e("dc22"),u=e("1174");for(var i in u)"default"!==i&&function(n){e.d(t,n,(function(){return u[n]}))}(i);e("8ebc3");var r,c=e("f0c5"),o=Object(c["a"])(u["default"],a["b"],a["c"],!1,null,null,null,!1,a["a"],r);t["default"]=o.exports}}]);
-;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
-    'packages/van-checkbox-group/van-checkbox-group-create-component',
-    {
-        'packages/van-checkbox-group/van-checkbox-group-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('f266')['createComponent'](__webpack_require__("f6ba"))
-        })
-    },
-    [['packages/van-checkbox-group/van-checkbox-group-create-component']]
-]);

src/ttcomponents/van-checkbox-group/van-checkbox-group.json

@@ -1,4 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {}
-}

src/ttcomponents/van-checkbox-group/van-checkbox-group.ttml

@@ -1 +0,0 @@
-<view class="_div"><slot></slot></view>

src/ttcomponents/van-checkbox-group/van-checkbox-group.vue

@@ -0,0 +1,56 @@
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+import { VantComponent } from '../common/component'
+import { getComponentByOptionsName } from '../wxs/get-component'
+import { ParentMixin } from '../mixins/relation'
+export default VantComponent({
+  mixins: [ParentMixin('vanCheckboxGroup')],
+  props: {
+    max: [Number, String],
+    value: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  watch: {
+    // #ifdef MP-TOUTIAO
+    value() {
+      this.updateChildren()
+    },
+    disabled() {
+      this.updateChildren()
+    }
+    // #endif
+  },
+
+  methods: {
+    // #ifdef MP-TOUTIAO
+    updateChildren() {
+      this.$nextTick(() => {
+        const $children = getComponentByOptionsName(this, 'VanCheckbox')
+        $children.forEach(child => {
+          this.updateChild(child)
+        })
+      })
+    },
+    updateChild(child) {
+      const { value, disabled } = this
+      child.currentValue = value.indexOf(child.name) !== -1
+      child.parentDisabled = disabled
+    }
+    // #endif
+  }
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/ttcomponents/van-checkbox/README.md

@@ -0,0 +1,265 @@
+# Checkbox 复选框
+
+### 引入
+
+推荐使用 `easycom` 的方式引入，详细介绍见[快速上手](#/quickstart#easycom-mo-shi-tui-jian)
+
+## 代码演示
+
+### 基础用法
+
+通过`v-model/value`绑定复选框的勾选状态
+
+```html
+<template>
+  <van-checkbox v-model="checked" @change="onChange">复选框</van-checkbox>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  },
+
+  methods: {
+    onChange() {
+      console.log(this.checked)
+    }
+  }
+}
+</script>
+```
+
+### 禁用状态
+
+通过设置`disabled`属性可以禁用复选框
+
+```html
+<van-checkbox disabled v-model="checked" @change="onChange">
+  复选框
+</van-checkbox>
+```
+
+### 自定义形状
+
+将`shape`属性设置为`square`，复选框的形状会变成方形
+
+```html
+<van-checkbox v-model="checked" shape="square" @change="onChange">
+  复选框
+</van-checkbox>
+```
+
+### 自定义颜色
+
+通过`checked-color`属性可以自定义选中状态下的图标颜色
+
+```html
+<van-checkbox
+  v-model="checked"
+  checked-color="#07c160"
+  @change="onChange"
+>
+  复选框
+</van-checkbox>
+```
+
+### 自定义大小
+
+通过`icon-size`属性可以自定义图标的大小
+
+```html
+<van-checkbox v-model="checked" icon-size="25px">复选框</van-checkbox>
+```
+
+### 自定义图标
+
+通过 icon 插槽自定义图标
+
+```html
+<template>
+  <van-checkbox use-icon-slot v-model="checked" @change="onChange">
+    自定义图标
+    <image slot="icon" :src="checked ? activeIcon : inactiveIcon" />
+  </van-checkbox>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true,
+      activeIcon: '//img.yzcdn.cn/icon-active.png',
+      inactiveIcon: '//img.yzcdn.cn/icon-normal.png',
+    }
+  },
+
+  methods: {
+    onChange() {
+      console.log(this.checked)
+    }
+  }
+}
+</script>
+```
+
+### 禁用文本点击
+
+通过设置`label-disabled`属性可以禁用复选框文本点击
+
+```html
+<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
+```
+
+### 复选框组
+
+需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
+
+```html
+<template>
+  <van-checkbox-group v-model="result" @change="onChange">
+    <van-checkbox name="a">复选框 a</van-checkbox>
+    <van-checkbox name="b">复选框 b</van-checkbox>
+    <van-checkbox name="c">复选框 c</van-checkbox>
+  </van-checkbox-group>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      result: ['a', 'b']
+    }
+  },
+
+  methods: {
+    onChange() {
+      console.log(this.result)
+    }
+  }
+}
+</script>
+```
+
+### 限制最大可选数
+
+```html
+<van-checkbox-group v-model="result" @change="onChange" max="2">
+  <van-checkbox name="a">复选框 a</van-checkbox>
+  <van-checkbox name="b">复选框 b</van-checkbox>
+  <van-checkbox name="c">复选框 c</van-checkbox>
+</van-checkbox-group>
+```
+
+### 搭配单元格组件使用
+
+此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
+
+```html
+<template>
+  <van-checkbox-group v-model="result" @change="onChange">
+    <van-cell-group>
+      <van-cell
+        v-for="(item, index) in list"
+        :key="item"
+        :title="`复选框 ${ item }`"
+        value-class="value-class"
+        clickable
+        @click="toggle(index)"
+      >
+        <van-checkbox ref="checkboxes" readonly :name="item" />
+      </van-cell>
+    </van-cell-group>
+  </van-checkbox-group>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b']
+    }
+  },
+
+  methods: {
+    onChange() {
+      console.log(this.result)
+    }
+
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle()
+    }
+  }
+}
+</script>
+
+<style>
+.value-class {
+  flex: none !important;
+}
+</style>
+```
+
+## API
+
+### Checkbox Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| name | 标识 Checkbox 名称 | _string_ | - | - |
+| shape | 形状，可选值为 `round` `square` | _string_ | `round` | - |
+| value | 是否为选中状态 | _boolean_ | `false` | - |
+| disabled | 是否禁用单选框 | _boolean_ | `false` | - |
+| readonly | 是否为只读状态 | _boolean_ | `false` | - |
+| label-disabled | 是否禁用单选框内容点击 | _boolean_ | `false` | - |
+| label-position | 文本位置，可选值为 `left` | _string_ | `right` | - |
+| use-icon-slot | 是否使用 icon slot | _boolean_ | `false` | - |
+| checked-color | 选中状态颜色 | _string_ | `#1989fa` | - |
+| icon-size | icon 大小 | _string \| number_ | `20px` |
+
+### CheckboxGroup Props
+
+| 参数     | 说明                   | 类型      | 默认值        | 版本 |
+| -------- | ---------------------- | --------- | ------------- | ---- |
+| name     | 在表单内提交时的标识符 | _string_  | -             | -    |
+| value    | 所有选中项的 name      | _Array_   | -             | -    |
+| disabled | 是否禁用所有单选框     | _boolean_ | `false`       | -    |
+| max      | 设置最大可选数         | _number_  | `0`（无限制） | -    |
+
+### Checkbox Event
+
+| 事件名      | 说明                     | 回调参数     |
+| ----------- | ------------------------ | ------------ |
+| @change | 当绑定值变化时触发的事件 | 当前组件的值 |
+
+### Checkbox 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| custom-class | 根节点样式类   |
+| icon-class   | 图标样式类     |
+| label-class  | 描述信息样式类 |
+
+### CheckboxGroup Event
+
+| 事件名      | 说明                     | 回调参数     |
+| ----------- | ------------------------ | ------------ |
+| @change | 当绑定值变化时触发的事件 | 当前组件的值 |
+
+### Checkbox Slot
+
+| 名称 | 说明       |
+| ---- | ---------- |
+| -    | 自定义文本 |
+| icon | 自定义图标 |
+
+### Checkbox 方法
+
+通过 selectComponent 可以获取到 checkbox 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍         |
+| ------ | ---- | ------ | ------------ |
+| toggle | -    | -      | 切换选中状态 |

src/ttcomponents/van-checkbox/demo.json

@@ -1,10 +0,0 @@
-{
-  "navigationBarTitleText": "Checkbox 复选框",
-  "usingComponents": {
-    "demo-block": "/components/demo-block/demo-block",
-    "van-checkbox": "/packages/van-checkbox/van-checkbox",
-    "van-checkbox-group": "/packages/van-checkbox-group/van-checkbox-group",
-    "van-cell-group": "/packages/van-cell-group/van-cell-group",
-    "van-cell": "/packages/van-cell/van-cell"
-  }
-}

src/ttcomponents/van-checkbox/demo.ttss

@@ -1 +0,0 @@
-.demo-checkbox-group{margin:10px 0 0 20px}.demo-checkbox{margin:10px 0 0 20px}.value-class{-webkit-box-flex:0 !important;-webkit-flex:none !important;flex:none !important}.van-cell__value{-webkit-box-flex:0 !important;-webkit-flex:none !important;flex:none !important}.icon{width:20px}

src/ttcomponents/van-checkbox/demo.vue

@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <demo-block title="基本用法">
+      <van-checkbox
+        v-model="checkbox1"
+        custom-class="demo-checkbox"
+        @change="onChange"
+      >
+        复选框
+      </van-checkbox>
+    </demo-block>
+
+    <demo-block title="禁用状态">
+      <van-checkbox
+        disabled
+        :value="false"
+        custom-class="demo-checkbox"
+      >
+        复选框
+      </van-checkbox>
+      <van-checkbox
+        disabled
+        :value="true"
+        custom-class="demo-checkbox"
+      >
+        复选框
+      </van-checkbox>
+    </demo-block>
+
+    <demo-block title="自定义形状">
+      <van-checkbox
+        v-model="checkboxShape"
+        shape="square"
+        custom-class="demo-checkbox"
+        @change="onChange"
+      >
+        复选框
+      </van-checkbox>
+    </demo-block>
+
+    <demo-block title="自定义颜色">
+      <van-checkbox
+        v-model="checkbox2"
+        checked-color="#07c160"
+        custom-class="demo-checkbox"
+        @change="onChange"
+      >
+        复选框
+      </van-checkbox>
+    </demo-block>
+
+    <demo-block title="自定义大小">
+      <van-checkbox
+        icon-size="25px"
+        v-model="checkboxSize"
+        custom-class="demo-checkbox"
+        @change="onChange"
+      >
+        复选框
+      </van-checkbox>
+    </demo-block>
+
+    <demo-block title="自定义图标">
+      <van-checkbox
+        use-icon-slot
+        v-model="checkbox3"
+        custom-class="demo-checkbox"
+        @change="onChange"
+      >
+        自定义图标
+        <image
+          slot="icon"
+          class="icon"
+          mode="widthFix"
+          :src="checkbox3 ? activeIcon : inactiveIcon"
+        />
+      </van-checkbox>
+    </demo-block>
+
+    <demo-block title="禁用文本点击">
+      <van-checkbox
+        label-disabled
+        v-model="checkboxLabel"
+        custom-class="demo-checkbox"
+        @change="onChange"
+      >
+        复选框
+      </van-checkbox>
+    </demo-block>
+
+    <demo-block title="复选框组">
+      <van-checkbox-group v-model="result" @change="onChange">
+        <van-checkbox
+          v-for="item in list"
+          :key="item"
+          :name="item"
+          custom-class="demo-checkbox"
+        >
+          复选框 {{ item }}
+        </van-checkbox>
+      </van-checkbox-group>
+    </demo-block>
+
+    <demo-block title="限制最大可选数">
+      <van-checkbox-group v-model="result2" max="2" @change="onChange">
+        <van-checkbox
+          v-for="item in list"
+          :key="item"
+          :name="item"
+          custom-class="demo-checkbox"
+        >
+          复选框 {{ item }}
+        </van-checkbox>
+      </van-checkbox-group>
+    </demo-block>
+
+    <demo-block title="搭配单元格组件使用">
+      <van-checkbox-group v-model="result3" @change="onChange">
+        <van-cell-group >
+          <van-cell
+            v-for="(item, index) in list"
+            :key="item"
+            :title="`复选框 ${ item }`"
+            value-class="value-class"
+            clickable
+            @click="toggle(index)"
+          >
+            <van-checkbox slot="right-icon" ref="checkboxes" readonly :name="item" />
+          </van-cell>
+        </van-cell-group>
+      </van-checkbox-group>
+    </demo-block>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      checkbox3: true,
+      checkboxLabel: true,
+      checkboxSize: true,
+      checkboxShape: true,
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b'],
+      result2: [],
+      result3: [],
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+    }
+  },
+  methods: {
+    onChange() {
+      console.log('值改变了')
+    },
+
+    toggle(index) {
+      this.$refs.checkboxes[index].toggle()
+    },
+
+    noop() {}
+  }
+}
+</script>
+
+<style>
+.demo-checkbox-group {
+  margin: 10px 0 0 20px;
+}
+
+.demo-checkbox {
+  margin: 10px 0 0 20px;
+}
+
+.value-class {
+  flex: none !important;
+}
+
+.van-cell__value {
+  flex: none !important;
+}
+
+.icon {
+  width: 20px;
+}
+</style>

src/ttcomponents/van-checkbox/index.less

@@ -0,0 +1,73 @@
+@import '../common/style/var.less';
+@import '../common/style/theme.less';
+
+.van-checkbox {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  user-select: none;
+
+  &__icon-wrap,
+  &__label {
+    .theme(line-height, '@checkbox-size');
+  }
+
+  &__icon-wrap {
+    flex: none;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    color: transparent;
+    text-align: center;
+    transition-property: color, border-color, background-color;
+
+    .theme(font-size, '@checkbox-size');
+    .theme(border, '1px solid @checkbox-border-color');
+    .theme(transition-duration, '@checkbox-transition-duration');
+
+    &--round {
+      border-radius: 100%;
+    }
+
+    &--checked {
+      .theme(color, '@white');
+      .theme(background-color, '@checkbox-checked-icon-color');
+      .theme(border-color, '@checkbox-checked-icon-color');
+    }
+
+    &--disabled {
+      .theme(background-color, '@checkbox-disabled-background-color');
+      .theme(border-color, '@checkbox-disabled-icon-color');
+    }
+
+    &--disabled&--checked {
+      .theme(color, '@checkbox-disabled-icon-color');
+    }
+  }
+
+  &__label {
+    word-wrap: break-word;
+
+    .theme(margin-left, '@checkbox-label-margin');
+    .theme(color, '@checkbox-label-color');
+
+    &--left {
+      float: left;
+      .theme(margin, '0 @checkbox-label-margin 0 0');
+    }
+
+    &--disabled {
+      .theme(color, '@checkbox-disabled-label-color');
+    }
+
+    &:empty {
+      margin: 0;
+    }
+  }
+}

src/ttcomponents/van-checkbox/van-checkbox.json

@@ -1,6 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-icon": "/packages/van-icon/van-icon"
-  }
-}

src/ttcomponents/van-checkbox/van-checkbox.ttml

@@ -1 +0,0 @@
-<view class="{{(checkboxClass)}}"><view data-event-opts="{{[['tap',[['onIconClick',['$event']]]]]}}" class="van-checkbox__icon-wrap" bindtap="__e"><block tt:if="{{useIconSlot}}"><slot name="icon"></slot></block><block tt:else><van-icon class="{{(currentIconClass)}}" style="{{(iconStyle)}}" vue-id="56c0b88a-1" name="success" size="0.8em" custom-class="{{currentIconClass}}" custom-style="{{iconStyle}}" bind:__l="__l"></van-icon></block></view><view data-event-opts="{{[['tap',[['onClickLabel',['$event']]]]]}}" class="{{(currentLabelClass)}}" bindtap="__e"><slot></slot></view></view>

src/ttcomponents/van-checkbox/van-checkbox.ttss

@@ -1,2 +0,0 @@
-.van-checkbox{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox__icon-wrap,
-.van-checkbox__label{line-height:20px;line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{-webkit-box-flex:0;-webkit-flex:none;flex:none}.van-checkbox__icon{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:1em;height:1em;color:transparent;text-align:center;-webkit-transition-property:color,border-color,background-color;transition-property:color,border-color,background-color;font-size:20px;font-size:var(--checkbox-size,20px);border:1px solid #c8c9cc;border:1px solid var(--checkbox-border-color,#c8c9cc);-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-duration:var(--checkbox-transition-duration,.2s);transition-duration:var(--checkbox-transition-duration,.2s)}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{color:#fff;color:var(--white,#fff);background-color:#1989fa;background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:#1989fa;border-color:var(--checkbox-checked-icon-color,#1989fa)}.van-checkbox__icon--disabled{background-color:#ebedf0;background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:#c8c9cc;border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:#c8c9cc;color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;margin-left:10px;margin-left:var(--checkbox-label-margin,10px);color:#323233;color:var(--checkbox-label-color,#323233)}.van-checkbox__label--left{float:left;margin:0 10px 0 0;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:#c8c9cc;color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}

src/ttcomponents/van-checkbox/van-checkbox.vue

@@ -0,0 +1,196 @@
+<template>
+  <view :class="checkboxClass">
+    <view class="van-checkbox__icon-wrap" @click="onIconClick">
+      <slot v-if="useIconSlot" name="icon" />
+      <van-icon
+        v-else
+        name="success"
+        size="0.8em"
+        :class="currentIconClass"
+        :style="iconStyle"
+        :custom-class="currentIconClass"
+        :custom-style="iconStyle"
+      />
+    </view>
+    <view :class="currentLabelClass" @click="onClickLabel">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script>
+import utils from '../wxs/utils'
+import VanIcon from '../van-icon/van-icon'
+import { VantComponent } from '../common/component'
+import { ChildrenMixin } from '../mixins/relation'
+function emit(target, value) {
+  target.$emit('input', value)
+  target.$emit('change', value)
+}
+export default {
+  name: 'VanCheckbox',
+  components: {
+    VanIcon
+  },
+
+  ...VantComponent({
+    mixins: [ChildrenMixin('vanCheckboxGroup')],
+    classes: ['icon-class', 'label-class'],
+
+    props: {
+      value: Boolean,
+      name: String,
+      disabled: Boolean,
+      useIconSlot: Boolean,
+      checkedColor: String,
+      labelPosition: String,
+      labelDisabled: Boolean,
+      shape: {
+        type: String,
+        default: 'round'
+      },
+      iconSize: {
+        type: null,
+        default: 20
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        currentValue: false,
+        parentDisabled: false
+      }
+    },
+
+    computed: {
+      checkboxClass() {
+        return `van-checkbox custom-class ${this.customClass}`
+      },
+      currentIconClass() {
+        return `icon-class ${this.iconClass} ${utils.bem('checkbox__icon', [
+          this.shape,
+          {
+            disabled: this.disabled || this.parentDisabled,
+            checked: this.currentValue
+          }
+        ])}`
+      },
+      iconStyle() {
+        const { checkedColor, currentValue, disabled, parentDisabled, iconSize } = this
+        var styles = [
+          ['font-size', utils.addUnit(iconSize)],
+          ['line-height', '1.25em']
+        ]
+        if (checkedColor && currentValue && !disabled && !parentDisabled) {
+          styles.push(['border-color', checkedColor])
+          styles.push(['background-color', checkedColor])
+        }
+
+        return styles.map(item => item.join(':')).join(';')
+      },
+      currentLabelClass() {
+        return `label-class ${this.labelClass} ${utils.bem('checkbox__label', [
+          this.labelPosition,
+          { disabled: this.disabled || this.parentDisabled }
+        ])}`
+      },
+
+      groupValue() {
+        return this.vanCheckboxGroup ? this.vanCheckboxGroup.value : null
+      },
+      groupDisabled() {
+        return this.vanCheckboxGroup ? this.vanCheckboxGroup.disabled : null
+      }
+    },
+
+    watch: {
+      groupValue() {
+        this.updateChild()
+      },
+      groupDisabled() {
+        this.updateChild()
+      }
+    },
+
+    created() {
+      if (this.vanCheckboxGroup) {
+        this.updateChild()
+        return
+      }
+      this.currentValue = this.value
+    },
+
+    methods: {
+      emitChange(value) {
+        if (this.vanCheckboxGroup) {
+          this.setParentValue(value)
+        } else {
+          emit(this, value)
+          this.currentValue = value
+        }
+      },
+
+      onIconClick() {
+        if (this.readonly) {
+          return
+        }
+        this.toggle()
+      },
+
+      toggle() {
+        const { parentDisabled, disabled, currentValue } = this
+        if (!disabled && !parentDisabled) {
+          this.emitChange(!currentValue)
+        }
+      },
+
+      onClickLabel() {
+        const { readonly, labelDisabled, parentDisabled, disabled, currentValue } = this
+        if (!readonly && !disabled && !labelDisabled && !parentDisabled) {
+          this.emitChange(!currentValue)
+        }
+      },
+
+      setParentValue(value) {
+        const parentValue = this.vanCheckboxGroup.value.slice()
+        const { name } = this
+        const { max } = this.vanCheckboxGroup
+
+        if (value) {
+          if (max && parentValue.length >= max) {
+            return
+          }
+          if (parentValue.indexOf(name) === -1) {
+            parentValue.push(name)
+            emit(this.vanCheckboxGroup, parentValue)
+          }
+        } else {
+          const index = parentValue.indexOf(name)
+          if (index !== -1) {
+            parentValue.splice(index, 1)
+            emit(this.vanCheckboxGroup, parentValue)
+          }
+        }
+      },
+
+      updateChild() {
+        if (this.vanCheckboxGroup) {
+          const { value, disabled } = this.vanCheckboxGroup
+          const { name } = this
+          this.currentValue = value.indexOf(name) !== -1
+          emit(this, value.indexOf(name) !== -1)
+          this.parentDisabled = disabled
+        }
+      }
+    }
+  })
+}
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/ttcomponents/van-circle/README.md

@@ -0,0 +1,105 @@
+# Circle 环形进度条
+
+### 引入
+
+推荐使用 `easycom` 的方式引入，详细介绍见[快速上手](#/quickstart#easycom-mo-shi-tui-jian)
+
+## 代码演示
+
+### 基础用法
+
+`value/v-model`属性表示进度条的目标进度。
+
+```html
+<van-circle v-model="30" text="text" />
+```
+
+### 宽度定制
+
+通过`stroke-width`属性来控制进度条宽度
+
+```html
+<van-circle v-model="value" stroke-width="6" text="宽度定制" />
+```
+
+### 颜色定制
+
+通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色
+
+```html
+<van-circle
+  v-model="value"
+  layer-color="#eeeeee"
+  color="#ee0a24"
+  text="颜色定制"
+/>
+```
+
+### 渐变色
+
+`color`属性支持传入对象格式来定义渐变色
+
+```html
+<van-circle v-model="value" :color="gradientColor" text="渐变色" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 25,
+      gradientColor: {
+        '0%': '#ffd01e',
+        '100%': '#ee0a24',
+      },
+    }
+  },
+}
+```
+
+### 逆时针方向
+
+将`clockwise`设置为`false`，进度会从逆时针方向开始
+
+```html
+<van-circle
+  v-model="value"
+  color="#07c160"
+  :clockwise="false"
+  text="逆时针"
+/>
+```
+
+### 大小定制
+
+通过`size`属性设置圆环直径
+
+```html
+<van-circle v-model="value" size="120" text="大小定制" />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| circle-id | canvas 唯一 id | _string_ | `van-circle` | --- |
+| value/v-model | 目标进度 | _number_ | `0` | - |
+| type | 指定 canvas 类型，可选值为 `2d` | _string_ | - | - |
+| size | 圆环直径，默认单位为 `px` | _number_ | `100` | - |
+| color | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | - |
+| layer-color | 轨道颜色 | _string_ | `#fff` | - |
+| fill | 填充颜色 | _string_ | - | - |
+| speed | 动画速度（单位为 value/s） | _number_ | `50` | - |
+| text | 文字 | _string_ | - | - |
+| stroke-width | 进度条宽度 | _number_ | `4` | - |
+| clockwise | 是否顺时针增加 | _boolean_ | `true` | - |
+
+> 注意：当同一个页面中存在多个 `van-circle` 时，必须指定不同的 `circle-id` ，不然数据会串线。
+
+### Slots
+
+| 名称 | 说明                                                       |
+| ---- | ---------------------------------------------------------- |
+| -    | 自定义文字内容，如果设置了`fill`，插槽内容会被原生组件覆盖 |

src/ttcomponents/van-circle/canvas.js

@@ -0,0 +1,42 @@
+export function adaptor(ctx) {
+  return Object.assign(ctx, {
+    setStrokeStyle(val) {
+      ctx.strokeStyle = val
+    },
+    setLineWidth(val) {
+      ctx.lineWidth = val
+    },
+    setLineCap(val) {
+      ctx.lineCap = val
+    },
+    setFillStyle(val) {
+      ctx.fillStyle = val
+    },
+    setFontSize(val) {
+      ctx.font = String(val)
+    },
+    setGlobalAlpha(val) {
+      ctx.globalAlpha = val
+    },
+    setLineJoin(val) {
+      ctx.lineJoin = val
+    },
+    setTextAlign(val) {
+      ctx.textAlign = val
+    },
+    setMiterLimit(val) {
+      ctx.miterLimit = val
+    },
+    setShadow(offsetX, offsetY, blur, color) {
+      ctx.shadowOffsetX = offsetX
+      ctx.shadowOffsetY = offsetY
+      ctx.shadowBlur = blur
+      ctx.shadowColor = color
+    },
+    setTextBaseline(val) {
+      ctx.textBaseline = val
+    },
+    createCircularGradient() {},
+    draw() {}
+  })
+}

src/ttcomponents/van-circle/demo.js

@@ -1 +0,0 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["packages/van-circle/demo"],{1852:function(n,e,t){"use strict";t.d(e,"b",(function(){return o})),t.d(e,"c",(function(){return u})),t.d(e,"a",(function(){return c}));var c={demoBlock:function(){return t.e("components/demo-block/demo-block").then(t.bind(null,"e29a"))},vanCircle:function(){return Promise.all([t.e("common/vendor"),t.e("packages/van-circle/van-circle")]).then(t.bind(null,"e091"))},vanButton:function(){return Promise.all([t.e("common/vendor"),t.e("packages/van-button/van-button")]).then(t.bind(null,"9e06"))}},o=function(){var n=this,e=n.$createElement;n._self._c},u=[]},6921:function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var c=function(n){return Math.min(Math.max(n,0),100)},o={data:function(){return{value:25,gradientColor:{"0%":"#ffd01e","100%":"#ee0a24"},color:"#fa541c",colorList:["#fa541c","#13c2c2","#722ed1","#eb2f96"]}},methods:{run:function(n){this.value=c(this.value+=n)},changeColor:function(n){this.color=n}}};e.default=o},"82c5":function(n,e,t){"use strict";t.r(e);var c=t("1852"),o=t("a0c7");for(var u in o)"default"!==u&&function(n){t.d(e,n,(function(){return o[n]}))}(u);t("f019");var a,r=t("f0c5"),i=Object(r["a"])(o["default"],c["b"],c["c"],!1,null,null,null,!1,c["a"],a);e["default"]=i.exports},8727:function(n,e,t){"use strict";(function(n){t("6cdc");c(t("66fd"));var e=c(t("82c5"));function c(n){return n&&n.__esModule?n:{default:n}}n(e.default)}).call(this,t("f266")["createPage"])},a0c7:function(n,e,t){"use strict";t.r(e);var c=t("6921"),o=t.n(c);for(var u in c)"default"!==u&&function(n){t.d(e,n,(function(){return c[n]}))}(u);e["default"]=o.a},d4d8:function(n,e,t){},f019:function(n,e,t){"use strict";var c=t("d4d8"),o=t.n(c);o.a}},[["8727","common/runtime","common/vendor"]]]);

src/ttcomponents/van-circle/demo.json

@@ -1,8 +0,0 @@
-{
-  "navigationBarTitleText": "Circle 进度条",
-  "usingComponents": {
-    "demo-block": "/components/demo-block/demo-block",
-    "van-circle": "/packages/van-circle/van-circle",
-    "van-button": "/packages/van-button/van-button"
-  }
-}