[Doc] add toast preview (#439)

dist/button/index.js

@@ -36,6 +36,10 @@ Component({
     block: {
       type: Boolean,
       observer
+    },
+    square: {
+      type: Boolean,
+      observer
     }
   },
 
@@ -51,11 +55,12 @@ Component({
     },
 
     setClasses() {
-      const { type, size, plain, disabled, loading, block } = this.data;
+      const { type, size, plain, disabled, loading, square, block } = this.data;
       this.setData({
         classes: classnames(`van-button--${type}`, `van-button--${size}`, {
           'van-button--block': block,
           'van-button--plain': plain,
+          'van-button--square': square,
           'van-button--loading': loading,
           'van-button--disabled': disabled,
           'van-button--unclickable': disabled || loading

dist/button/index.wxss

@@ -1 +1 @@
-.van-button{position:relative;padding:0;display:inline-block;height:44px;line-height:42px;border-radius:3px;box-sizing:border-box;font-size:16px;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button::after{content:" ";position:absolute;top:50%;left:50%;opacity:0;width:100%;height:100%;border:inherit;border-color:#000;background-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button:active::after{opacity:.3}.van-button--unclickable::after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #e5e5e5}.van-button--primary{color:#fff;background-color:#4b0;border:1px solid #4b0}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#f85;border:1px solid #f85}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#4b0}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#f85}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;padding:0 8px;min-width:60px;font-size:12px;line-height:28px}.van-button--loading .van-loading{display:inline-block}.van-button--loading .van-button__text{display:none}.van-button--mini{display:inline-block;width:50px;height:22px;line-height:20px;font-size:10px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{width:100%;display:block}.van-button--disabled{color:#999;background-color:#e8e8e8;border:1px solid #e5e5e5}
+.van-button{position:relative;padding:0;display:inline-block;height:44px;line-height:42px;border-radius:3px;box-sizing:border-box;font-size:16px;text-align:center;vertical-align:middle;-webkit-appearance:none;-webkit-text-size-adjust:100%}.van-button::after{content:" ";position:absolute;top:50%;left:50%;opacity:0;width:100%;height:100%;border:inherit;border-color:#000;background-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-button:active::after{opacity:.3}.van-button--unclickable::after{display:none}.van-button--default{color:#333;background-color:#fff;border:1px solid #e5e5e5}.van-button--primary{color:#fff;background-color:#4b0;border:1px solid #4b0}.van-button--danger{color:#fff;background-color:#f44;border:1px solid #f44}.van-button--warning{color:#fff;background-color:#f85;border:1px solid #f85}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#4b0}.van-button--plain.van-button--danger{color:#f44}.van-button--plain.van-button--warning{color:#f85}.van-button--large{width:100%;height:50px;line-height:48px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:30px;padding:0 8px;min-width:60px;font-size:12px;line-height:28px}.van-button--loading .van-loading{display:inline-block}.van-button--loading .van-button__text{display:none}.van-button--mini{display:inline-block;width:50px;height:22px;line-height:20px;font-size:10px}.van-button--mini+.van-button--mini{margin-left:5px}.van-button--block{width:100%;display:block}.van-button--square{border-radius:0}.van-button--disabled{color:#999;background-color:#e8e8e8;border:1px solid #e5e5e5}

dist/field/index.js

@@ -30,6 +30,7 @@ Component({
     errorMessage: String,
     placeholder: String,
     customStyle: String,
+    useIconSlot: Boolean,
     useButtonSlot: Boolean,
     placeholderClass: String,
     cursorSpacing: {

dist/overlay/index.js

@@ -0,0 +1,11 @@
+Component({
+  properties: {
+    show: Boolean
+  },
+
+  methods: {
+    onClickOverlay() {
+
+    }
+  }
+});

dist/overlay/index.json

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

dist/overlay/index.wxml

@@ -0,0 +1,5 @@
+<view
+  class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
+  style="{{ overlayStyle }}"
+  bind:tap="onClickOverlay"
+/>

dist/switch/index.wxml

@@ -1,7 +1,7 @@
 <view
   class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
   style="font-size: {{ size }};"
-  bind:tap="Click"
+  bind:tap="onClick"
 >
   <view class="van-switch__node node-class">
     <van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />

dist/tabbar-item/index.js

@@ -0,0 +1,36 @@
+const TABBAR_PATH = '../tabbar/index';
+
+Component({
+  name: 'tabbar-item',
+
+  properties: {
+    info: null,
+    icon: String,
+    dot: Boolean
+  },
+
+  options: {
+    multipleSlots: true
+  },
+
+  relations: {
+    [TABBAR_PATH]: {
+      type: 'ancestor'
+    }
+  },
+
+  data: {
+    active: false,
+    count: 0
+  },
+
+  methods: {
+    onClick() {
+      const parent = this.getRelationNodes(TABBAR_PATH)[0];
+      if (parent) {
+        parent.onChange(this);
+      }
+      this.triggerEvent('click');
+    }
+  }
+});

dist/tabbar-item/index.json

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

dist/tabbar-item/index.wxml

@@ -0,0 +1,18 @@
+<view
+  class="van-tabbar-item {{ active ? 'van-tabbar-item--active' : '' }}"
+  style="{{ count ? 'width: ' + 100 / count + '%' : '' }}"
+  bind:tap="onClick"
+>
+  <view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}">
+    <block wx:if="{{ active }}">
+      <slot name="icon-active" />
+    </block>
+    <block wx:else>
+      <slot name="icon" />
+    </block>
+    <van-icon wx:if="{{ icon }}" name="{{ icon }}" info="{{ info }}" />
+  </view>
+  <view class="van-tabbar-item__text">
+    <slot />
+  </view>
+</view>

dist/tabbar-item/index.wxss

@@ -0,0 +1 @@
+.van-tabbar-item{float:left;color:#666;height:100%;display:-webkit-box;display:-webkit-flex;display:flex;line-height:1;font-size:12px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.van-tabbar-item__icon{font-size:18px;margin-bottom:5px;position:relative}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon--dot::after{top:0;right:-8px;width:8px;height:8px;content:' ';position:absolute;border-radius:100%;background-color:#f44}.van-tabbar-item__icon image{width:50px;height:18px}.van-tabbar-item--active{color:#38f}

dist/tabbar/index.js

@@ -0,0 +1,68 @@
+const ITEM_PATH = '../tabbar-item/index';
+
+Component({
+  externalClasses: ['custom-class'],
+
+  properties: {
+    active: {
+      type: Number,
+      observer(active) {
+        this.setData({ currentActive: active });
+        this.setActiveItem();
+      }
+    },
+    fixed: {
+      type: Boolean,
+      value: true
+    },
+    zIndex: {
+      type: Number,
+      value: 1
+    }
+  },
+
+  data: {
+    items: [],
+    currentActive: -1
+  },
+
+  attached() {
+    this.setData({ currentActive: this.data.active });
+  },
+
+  relations: {
+    [ITEM_PATH]: {
+      type: 'descendant',
+
+      linked(target) {
+        this.data.items.push(target);
+        this.setActiveItem();
+      },
+
+      unlinked(target) {
+        this.data.items = this.data.items.filter(item => item !== target);
+        this.setActiveItem();
+      }
+    }
+  },
+
+  methods: {
+    setActiveItem() {
+      this.data.items.forEach((item, index) => {
+        item.setData({
+          active: index === this.data.currentActive,
+          count: this.data.items.length
+        });
+      });
+    },
+
+    onChange(child) {
+      const active = this.data.items.indexOf(child);
+      if (active !== this.data.currentActive && active !== -1) {
+        this.triggerEvent('change', active);
+        this.setData({ currentActive: active });
+        this.setActiveItem();
+      }
+    }
+  }
+});

dist/tabbar/index.json

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

dist/tabbar/index.wxml

@@ -0,0 +1,6 @@
+<view
+  class="custom-class van-tabbar van-hairline--top-bottom {{ fixed ? 'van-tabbar--fixed' : '' }}"
+  style="{{ zIndex ? 'style: ' + this.zIndex : '' }}"
+>
+  <slot />
+</view>

dist/tabbar/index.wxss

@@ -0,0 +1 @@
+.van-tabbar{width:100%;height:50px;background-color:#fff}.van-tabbar--fixed{left:0;bottom:0;position:fixed}

dist/toast/index.js

@@ -0,0 +1,32 @@
+import Toast from './toast';
+
+Component({
+  properties: {
+    show: Boolean,
+    mask: Boolean,
+    message: String,
+    forbidClick: Boolean,
+    type: {
+      type: String,
+      value: 'text'
+    },
+    loadingType: {
+      type: String,
+      value: 'circular'
+    },
+    position: {
+      type: String,
+      value: 'middle'
+    }
+  },
+
+  methods: {
+    clear() {
+      this.setData({
+        show: false
+      });
+    }
+  }
+});
+
+export default Toast;

dist/toast/index.json

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

dist/toast/index.wxml

@@ -0,0 +1,23 @@
+<view
+  wx:if="{{ show && (mask || forbidClick) }}"
+  class="van-toast__overlay {{ mask ? 'van-toast__overlay--mask' : '' }}"
+/>
+<view
+  wx:if="{{ show }}"
+  class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}"
+>
+  <!-- text only -->
+  <view wx:if="{{ type === 'text' }}">{{ message }}</view>
+
+  <!-- with icon -->
+  <block wx:else>
+    <van-loading
+      wx:if="{{ type === 'loading' }}"
+      color="white"
+      type="{{ loadingType }}"
+      custom-class="van-toast__loading"
+    />
+    <van-icon wx:else class="van-toast__icon" name="{{ type }}" />
+    <view wx:if="{{ message }}" class="van-toast__text">{{ message }}</view>
+  </block>
+</view>

dist/toast/index.wxss

@@ -0,0 +1 @@
+.van-toast{top:50%;left:50%;display:-webkit-box;display:-webkit-flex;display:flex;position:fixed;color:#fff;font-size:12px;line-height:1.2;border-radius:5px;word-break:break-all;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:rgba(0,0,0,.7);z-index:3001}.van-toast__overlay{z-index:3000;position:fixed;top:0;left:0;right:0;bottom:0}.van-toast__overlay--mask{background-color:rgba(0,0,0,.7)}.van-toast--text{padding:12px;min-width:220px}.van-toast--icon{width:120px;min-height:120px;padding:15px}.van-toast--icon .van-toast__icon{height:1em;font-size:50px}.van-toast--icon .van-toast__text{font-size:14px;padding-top:10px}.van-toast__loading{margin:10px 0 5px}.van-toast--top{top:50px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.van-toast--bottom{top:auto;bottom:50px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}

dist/toast/toast.js

@@ -0,0 +1,68 @@
+import { isObj } from '../utils/index';
+
+const defaultOptions = {
+  type: 'text',
+  mask: false,
+  message: '',
+  show: true,
+  duration: 3000,
+  position: 'middle',
+  forbidClick: false,
+  loadingType: 'circular',
+  selector: '#van-toast'
+};
+const parseOptions = message => isObj(message) ? message : { message };
+
+let queue = [];
+let currentOptions = { ...defaultOptions };
+
+function Toast(options = {}) {
+  options = {
+    ...currentOptions,
+    ...parseOptions(options)
+  };
+
+  const pages = getCurrentPages();
+  const ctx = pages[pages.length - 1];
+
+  const toast = ctx.selectComponent(options.selector);
+  delete options.selector;
+
+  queue.push(toast);
+  toast.setData(options);
+  clearTimeout(toast.timer);
+
+  if (options.duration > 0) {
+    toast.timer = setTimeout(() => {
+      toast.clear();
+      queue = queue.filter(item => item !== toast);
+    }, options.duration);
+  }
+
+  return toast;
+};
+
+const createMethod = type => options => Toast({
+  type, ...parseOptions(options)
+});
+
+['loading', 'success', 'fail'].forEach(method => {
+  Toast[method] = createMethod(method);
+});
+
+Toast.clear = all => {
+  queue.forEach(toast => {
+    toast.clear();
+  });
+  queue = [];
+};
+
+Toast.setDefaultOptions = options => {
+  Object.assign(currentOptions, options);
+};
+
+Toast.resetDefaultOptions = () => {
+  currentOptions = { ...defaultOptions };
+};
+
+export default Toast;

dist/utils/index.js

@@ -7,7 +7,7 @@ function isObj(x) {
   return x !== null && (type === 'object' || type === 'function');
 }
 
-export {
+module.exports = {
   isObj,
   isDef
 };

docs/src/Preview.vue

@@ -34,6 +34,7 @@ const MAP = {
   switch: 'switch-201808092138.png',
   tag: 'tag-201808092138.png',
   tabbar: 'tabbar-201808160922.png',
+  toast: 'toast-201808191046.png',
   'tree-select': 'tree-select-201808092138.png'
 };