初始化，换框架

src/App.vue

@@ -1,166 +0,0 @@
-<template>
-  <div id="app">
-    <router-view></router-view>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "app",
-  components: {},
-  methods: {}
-};
-</script>
-
-<style lang='less'>
-.cube-switch .cube-switch-input:checked + .cube-switch-ui{
-  border-color: #005395!important;
-  background-color: #005395!important;
-}
-.cube-picker-wheel-item{
-  font-size: 12px!important;
-}
-.cube-popup_mask{
-  margin: 0 auto;
-}
-.overflowHidden{
-  overflow: hidden!important;
-}
-* {
-  font-family: "微软雅黑";
-  max-width: 750px;
-}
-.fl {
-  float: left;
-}
-.fr {
-  float: right;
-}
-.fontBold{
-  font-weight: bold;
-}
-.overflowEllipsis2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical !important;
-  text-overflow: -o-ellipsis-lastline;
-}
-.btn {
-  display: inline-block;
-  height: 0.36rem;
-  line-height: 0.36rem;
-  font-size: 0.24rem;
-  text-align: center;
-  border-radius: 0.3rem;
-  border-width: 0.01rem;
-  border-style: solid;
-  padding: 0 0.16rem;
-  &.daipingjia {
-    border-color: #e0872c;
-    color: #e0872c;
-    background: #fbf3e9;
-  }
-  &.daiqiangdan {
-    border-color: #991f00;
-    color: #991f00;
-    background: #f4e8e5;
-  }
-  &.yiguanbi {
-    border-color: #333;
-    color: #333;
-    background: #eee;
-  }
-  &.daishenhe {
-    border-color: #825b00;
-    color: #825b00;
-    background: #f2eee5;
-  }
-  &.chulizhong {
-    border-color: #003057;
-    color: #003057;
-    background: #e5eaee;
-  }
-  &.yijiejue {
-    border-color: #40a19c;
-    color: #40a19c;
-    background: #ebf5f5;
-  }
-  &.chongxinzhipai {
-    border-color: #48a843;
-    color: #48a843;
-    background: #ecf6ec;
-  }
-  &.daijiedan {
-    border-color: #c2654e;
-    color: #c2654e;
-    background: #faf4f2;
-  }
-  &.zhixingzhong {
-    border-color: #005395;
-    color: #005395;
-    background: #e5edf4;
-  }
-  &.yiwancheng {
-    border-color: #056b00;
-    color: #056b00;
-    background: #e6f0e5;
-  }
-}
-
-// 巡检详情按钮
-.inspedtionDetail {
-  .cube-switch-ui {
-    border-color: #ccc !important;
-    background-color: green !important;
-  }
-  .abnormal {
-    .cube-switch-ui::before{
-      border-color: #ccc !important;
-      background-color: red !important;
-    }
-  }
-}
-// 新建事件按钮
-.newIncident {
-  .cube-btn.cube-btn_active,
-  .cube-btn:active {
-    background-color: #fff !important;
-  }
-}
-
-// font-color 字体颜色
-i.iconfont {
-  &.icon-yiyuqi {
-    color: #991f00;
-  }
-  &.icon-jijiang {
-    color: #a37200;
-  }
-  &.icon-zhengchang {
-    color: #056a00;
-  }
-}
-.hcTable {
-  padding: 0.1rem 0.24rem;
-  table {
-    border-collapse: collapse;
-    border: 0.01rem solid #ccc;
-    width: 100%;
-    td {
-      border: 0.01rem solid #ccc;
-      text-align: center;
-    }
-  }
-}
-.dash-dianbohuifang{
-  font-size: 0.4rem;
-  margin-right: 0.1rem;
-}
-.flex{
-  display: flex;
-  justify-content: center;
-  align-content: center;
-}
-</style>

src/common/helpers/create-api.js

@@ -1,7 +0,0 @@
-import createAPIComponent from 'vue-create-api'
-
-export default function createAPI (Vue, Component, events, single) {
-  Vue.use(createAPIComponent, {componentPrefix: 'cube-'})
-  const api = Vue.createAPI(Component, events, single)
-  return api
-}

src/common/helpers/debug.js

@@ -1,14 +0,0 @@
-export const warn = function (msg, componentName) {
-   /* istanbul ignore if */
-  if (process.env.NODE_ENV !== 'production') {
-    const component = componentName ? `<${componentName}> ` : ''
-    console.error(`[Cube warn]: ${component}${msg}`)
-  }
-}
-
-export const tip = function (msg, componentName) {
-  if (process.env.NODE_ENV !== 'production') {
-    const component = componentName ? `<${componentName}> ` : ''
-    console.warn(`[Cube tip]: ${component}${msg}`)
-  }
-}

src/common/helpers/dom.js

@@ -1,98 +0,0 @@
-import { inBrowser } from './env'
-
-export function hasClass(el, className) {
-  const reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
-  return reg.test(el.className)
-}
-
-export function addClass(el, className) {
-  /* istanbul ignore if */
-  if (hasClass(el, className)) {
-    return
-  }
-
-  const newClass = el.className.split(' ')
-  newClass.push(className)
-  el.className = newClass.join(' ')
-}
-
-export function removeClass(el, className) {
-  /* istanbul ignore if */
-  if (!hasClass(el, className)) {
-    return
-  }
-
-  const reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g')
-  el.className = el.className.replace(reg, ' ')
-}
-
-export function getData(el, name) {
-  const prefix = 'data-'
-  return el.getAttribute(prefix + name)
-}
-
-export function getRect(el) {
-  return {
-    top: el.offsetTop,
-    left: el.offsetLeft,
-    width: el.offsetWidth,
-    height: el.offsetHeight
-  }
-}
-
-let vendor = (() => {
-  /* istanbul ignore if */
-  if (!inBrowser) {
-    return false
-  }
-  let elementStyle = document.createElement('div').style
-  let transformNames = {
-    standard: 'transform',
-    webkit: 'webkitTransform',
-    Moz: 'MozTransform',
-    O: 'OTransform',
-    ms: 'msTransform'
-  }
-
-  for (let key in transformNames) {
-    if (elementStyle[transformNames[key]] !== undefined) {
-      return key
-    }
-  }
-
-  /* istanbul ignore next */
-  return false
-})()
-
-export function prefixStyle(style) {
-  /* istanbul ignore if */
-  if (vendor === false) {
-    return false
-  }
-
-  if (vendor === 'standard') {
-    if (style === 'transitionEnd') {
-      return 'transitionend'
-    }
-    return style
-  }
-
-  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
-}
-
-export function getMatchedTarget(e, targetClassName) {
-  let el = e.target
-
-  while (el && !hasClass(el, targetClassName)) {
-    if (el === e.currentTarget) return null
-    el = el.parentNode
-  }
-
-  return el
-}
-
-export function dispatchEvent(ele, name, { type = 'Event', bubbles = true, cancelable = true } = {}) {
-  const e = document.createEvent(type)
-  e.initEvent(name, bubbles, cancelable)
-  ele.dispatchEvent(e)
-}

src/common/helpers/ease.js

@@ -1,3 +0,0 @@
-export const easeOutBack = 'cubic-bezier(0.18, 0.89, 0.32, 1.28)'
-export const easeOutQuart = 'cubic-bezier(0.165, 0.84, 0.44, 1)'
-export const easeOutCubic = 'cubic-bezier(0.22, 0.61, 0.36, 1)'

src/common/helpers/env.js

@@ -1,4 +0,0 @@
-// ssr support
-export const inBrowser = typeof window !== 'undefined'
-export const ua = inBrowser && navigator.userAgent.toLowerCase()
-export const isAndroid = ua && ua.indexOf('android') > 0

src/common/helpers/instantiate-component.js

@@ -1,4 +0,0 @@
-import createAPI from 'vue-create-api'
-const { instantiateComponent } = createAPI
-
-export default instantiateComponent

src/common/helpers/raf.js

@@ -1,43 +0,0 @@
-import { inBrowser } from './env'
-
-const DEFAULT_INTERVAL = 100 / 60
-
-function noop() {
-}
-
-export const requestAnimationFrame = (() => {
-  /* istanbul ignore next */
-  if (!inBrowser) {
-    return noop
-  }
-  return window.requestAnimationFrame ||
-    /* istanbul ignore next */
-    window.webkitRequestAnimationFrame ||
-    /* istanbul ignore next */
-    window.mozRequestAnimationFrame ||
-    /* istanbul ignore next */
-    window.oRequestAnimationFrame ||
-    // if all else fails, use setTimeout
-    /* istanbul ignore next */
-    function (callback) {
-      return window.setTimeout(callback, (callback.interval || DEFAULT_INTERVAL) / 2) // make interval as precise as possible.
-    }
-})()
-
-export const cancelAnimationFrame = (() => {
-  /* istanbul ignore next */
-  if (!inBrowser) {
-    return noop
-  }
-  return window.cancelAnimationFrame ||
-    /* istanbul ignore next */
-    window.webkitCancelAnimationFrame ||
-    /* istanbul ignore next */
-    window.mozCancelAnimationFrame ||
-    /* istanbul ignore next */
-    window.oCancelAnimationFrame ||
-    /* istanbul ignore next */
-    function (id) {
-      window.clearTimeout(id)
-    }
-})()

src/common/helpers/string-template.js

@@ -1,50 +0,0 @@
-import { isFunc } from './util'
-import { warn } from './debug'
-import Locale from '../../modules/locale'
-const stringRE = /\{\{((?:.|\n)+?)\}\}/g
-const quoteRe = /['"]/g
-const INVALID_INDEX = -1
-
-function format (string, config = '') {
-  return string.replace(stringRE, (match, group1, index) => {
-    const helpersArr = group1.split('|').slice(1).map(_ => _.trim())
-    const hasHelpers = helpersArr.length
-    let result = config
-
-    if (hasHelpers) {
-      helpersArr.forEach((helperString) => {
-        let { fnName, args } = resolveHelperFnString(helperString)
-        args.unshift(result)
-        /* istanbul ignore else */
-        if (isFunc(Locale.helpers[fnName])) {
-          result = Locale.helpers[fnName].apply(null, args)
-        } else {
-          warn(`A helper function named "${fnName}" is not registered, ` +
-               `please register it by Validator.addHelper()`)
-          result = ''
-        }
-      })
-    }
-
-    return result
-  })
-}
-
-function resolveHelperFnString (helperString) {
-  const leftBracketsIndex = helperString.indexOf('(')
-  const rightBracketsIndex = helperString.indexOf(')')
-  let fnName = ''
-  let args = []
-  /* istanbul ignore if */
-  if (leftBracketsIndex === INVALID_INDEX) {
-    args = []
-    fnName = helperString
-  } else if (leftBracketsIndex !== INVALID_INDEX && rightBracketsIndex !== INVALID_INDEX) {
-    const argsStr = helperString.slice(leftBracketsIndex + 1, rightBracketsIndex)
-    args = argsStr.split(',').map(_ => _.trim().replace(quoteRe, ''))
-    fnName = helperString.slice(0, leftBracketsIndex)
-  }
-  return { fnName, args }
-}
-
-export default format

src/common/helpers/util.js

@@ -1,207 +0,0 @@
-import { camelize } from '../lang/string'
-
-function findIndex(ary, fn) {
-  if (ary.findIndex) {
-    return ary.findIndex(fn)
-  }
-  /* istanbul ignore next */
-  let index = -1
-  /* istanbul ignore next */
-  ary.some(function (item, i, ary) {
-    const ret = fn.call(this, item, i, ary)
-    if (ret) {
-      index = i
-      return ret
-    }
-  })
-  /* istanbul ignore next */
-  return index
-}
-
-function deepAssign(to, from) {
-  for (let key in from) {
-    if (!to[key] || typeof to[key] !== 'object') {
-      to[key] = from[key]
-    } else {
-      deepAssign(to[key], from[key])
-    }
-  }
-}
-
-function createAddAPI(baseObj) {
-  return function add(...args) {
-    if (typeof args[0] === 'string') {
-      args[0] = {
-        [args[0]]: args[1]
-      }
-    }
-    deepAssign(baseObj, args[0])
-  }
-}
-
-function judgeTypeFnCreator (type) {
-  const toString = Object.prototype.toString
-  return function isType (o) {
-    return toString.call(o) === `[object ${type}]`
-  }
-}
-
-const typesReset = {
-  _set(obj, key, value) {
-    obj[key] = value
-  },
-  string(obj, key) {
-    typesReset._set(obj, key, '')
-  },
-  number(obj, key) {
-    typesReset._set(obj, key, 0)
-  },
-  boolean(obj, key) {
-    typesReset._set(obj, key, false)
-  },
-  object(obj, key, value) {
-    if (Array.isArray(value)) {
-      typesReset._set(obj, key, [])
-    } else {
-      typesReset._set(obj, key, {})
-    }
-  }
-}
-function resetTypeValue(obj, key, defVal) {
-  if (defVal !== undefined) {
-    return typesReset._set(obj, key, defVal)
-  }
-  if (key) {
-    const value = obj[key]
-    const resetHandler = typesReset[typeof value]
-    resetHandler && resetHandler(obj, key, value)
-  } else {
-    Object.keys(obj).forEach((key) => {
-      resetTypeValue(obj, key)
-    })
-  }
-}
-
-function parallel(tasks, cb) {
-  let doneCount = 0
-  let results = []
-  const tasksLen = tasks.length
-  if (!tasksLen) {
-    return cb(results)
-  }
-  tasks.forEach((task, i) => {
-    task((ret) => {
-      doneCount += 1
-      results[i] = ret
-      if (doneCount === tasksLen) {
-        // all tasks done
-        cb(results)
-      }
-    })
-  })
-}
-
-function cb2PromiseWithResolve(cb) {
-  let promise
-  if (typeof window.Promise !== 'undefined') {
-    const _cb = cb
-    promise = new window.Promise((resolve) => {
-      cb = (data) => {
-        _cb && _cb(data)
-        resolve(data)
-      }
-    })
-    promise.resolve = cb
-  }
-  return promise
-}
-
-function debounce(func, wait, immediate, initValue) {
-  let timeout
-  let result = initValue
-
-  const later = function (context, args) {
-    timeout = null
-    if (args) {
-      result = func.apply(context, args)
-    }
-  }
-
-  const debounced = function (...args) {
-    if (timeout) {
-      clearTimeout(timeout)
-    }
-    if (immediate) {
-      const callNow = !timeout
-      timeout = setTimeout(later, wait)
-      if (callNow) {
-        result = func.apply(this, args)
-      }
-    } else {
-      timeout = setTimeout(() => {
-        later(this, args)
-      }, wait)
-    }
-
-    return result
-  }
-
-  debounced.cancel = function () {
-    clearTimeout(timeout)
-    timeout = null
-  }
-
-  return debounced
-}
-
-function processComponentName(Component, { prefix = '', firstUpperCase = false } = {}) {
-  const name = Component.name
-  const pureName = name.replace(/^cube-/i, '')
-  let camelizeName = `${camelize(`${prefix}${pureName}`)}`
-   /* istanbul ignore if */
-  if (firstUpperCase) {
-    camelizeName = camelizeName.charAt(0).toUpperCase() + camelizeName.slice(1)
-  }
-  return camelizeName
-}
-
-function parsePath (obj, path = '') {
-  const segments = path.split('.')
-  let result = obj
-  for (let i = 0; i < segments.length; i++) {
-    const key = segments[i]
-     /* istanbul ignore if */
-    if (isUndef(result[key])) {
-      result = ''
-      break
-    } else {
-      result = result[key]
-    }
-  }
-  return result
-}
-
-const isFunc = judgeTypeFnCreator('Function')
-const isUndef = judgeTypeFnCreator('Undefined')
-const isArray = judgeTypeFnCreator('Array')
-const isString = judgeTypeFnCreator('String')
-const isObject = judgeTypeFnCreator('Object')
-const isNumber = judgeTypeFnCreator('Number')
-
-export {
-  findIndex,
-  deepAssign,
-  createAddAPI,
-  resetTypeValue,
-  parallel,
-  cb2PromiseWithResolve,
-  debounce,
-  processComponentName,
-  parsePath,
-  isUndef,
-  isFunc,
-  isArray,
-  isString,
-  isObject,
-  isNumber
-}

src/common/helpers/validator/index.js

@@ -1,3 +0,0 @@
-export { rules, addRule } from './rules'
-export { addMessage } from './messages'
-export { types, addType } from './types'

src/common/helpers/validator/language/chinese.js

@@ -1,44 +0,0 @@
-import { toLocaleDateString } from '../../util'
-
-export default {
-  required: '此为必填项',
-  type: {
-    string: '请输入字符',
-    number: '请输入数字',
-    array: '数据类型应为数组',
-    date: '请选择有效日期',
-    email: '请输入有效邮箱',
-    tel: '请输入有效的手机号码',
-    url: '请输入有效网址'
-  },
-  min: {
-    string: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`,
-    number: /* istanbul ignore next */ (config) => `不得小于 ${config}`,
-    array: /* istanbul ignore next */ (config) => `请选择至少 ${config} 项`,
-    date: /* istanbul ignore next */ (config) => `请选择 ${toLocaleDateString(config, 'zh')} 之后的时间`,
-    email: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`,
-    tel: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`,
-    url: /* istanbul ignore next */ (config) => `至少输入 ${config} 位字符`
-  },
-  max: {
-    string: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`,
-    number: /* istanbul ignore next */ (config) => `请勿大于 ${config}`,
-    array: /* istanbul ignore next */ (config) => `最多选择 ${config} 项`,
-    date: /* istanbul ignore next */ (config) => `请选择 ${toLocaleDateString(config, 'zh')} 之前的时间`,
-    email: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`,
-    tel: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`,
-    url: /* istanbul ignore next */ (config) => `请勿超过 ${config} 位字符`
-  },
-  len: {
-    string: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`,
-    number: /* istanbul ignore next */ (config) => `长度应等于 ${config}`,
-    array: /* istanbul ignore next */ (config) => `请选择 ${config} 项`,
-    date: /* istanbul ignore next */ (config) => `请选择 ${toLocaleDateString(config, 'zh')}`,
-    email: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`,
-    tel: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`,
-    url: /* istanbul ignore next */ (config) => `请输入 ${config} 位字符`
-  },
-  pattern: '格式错误',
-  custom: '未通过校验',
-  notWhitespace: '空白内容无效'
-}

src/common/helpers/validator/language/english.js

@@ -1,44 +0,0 @@
-import { toLocaleDateString } from '../../util'
-
-export default {
-  required: 'Required.',
-  type: {
-    string: 'Please input characters.',
-    number: 'Please input numbers.',
-    array: 'The data type should be array.',
-    date: 'Please select a valid date.',
-    email: 'Please input a valid E-mail.',
-    tel: 'Please input a valid telphone number.',
-    url: 'Please input a valid web site.'
-  },
-  min: {
-    string: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`,
-    number: /* istanbul ignore next */ (config) => `The number could not smaller than ${config}.`,
-    array: /* istanbul ignore next */ (config) => `Please select at least ${config} items.`,
-    date: /* istanbul ignore next */ (config) => `Please select a date after ${toLocaleDateString(config, 'en')}`,
-    email: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`,
-    tel: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`,
-    url: /* istanbul ignore next */ (config) => `Please input at least ${config} characters.`
-  },
-  max: {
-    string: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`,
-    number: /* istanbul ignore next */ (config) => `The number could not bigger than ${config}`,
-    array: /* istanbul ignore next */ (config) => `Please select no more than  ${config} items`,
-    date: /* istanbul ignore next */ (config) => `Please select a date before ${toLocaleDateString(config, 'en')}`,
-    email: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`,
-    tel: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`,
-    url: /* istanbul ignore next */ (config) => `Please input no more than ${config} characters.`
-  },
-  len: {
-    string: /* istanbul ignore next */ (config) => `Please input ${config} characters.`,
-    number: /* istanbul ignore next */ (config) => `The length should equal ${config}`,
-    array: /* istanbul ignore next */ (config) => `Please select ${config} items`,
-    date: /* istanbul ignore next */ (config) => `Please select ${toLocaleDateString(config, 'en')}`,
-    email: /* istanbul ignore next */ (config) => `Please input ${config} characters.`,
-    tel: /* istanbul ignore next */ (config) => `Please input ${config} characters.`,
-    url: /* istanbul ignore next */ (config) => `Please input ${config} characters.`
-  },
-  pattern: 'The input don"t match pattern.',
-  custom: 'Invalid.',
-  notWhitespace: 'Whitespace is invalid.'
-}

src/common/helpers/validator/messages.js

@@ -1,18 +0,0 @@
-import { deepAssign } from '../util'
-
-function addMessage (...args) {
-  const NAMESPACE = 'validator'
-  const vueProto = this._base.prototype
-  const lang = vueProto.$cubeLang
-  const baseMessages = vueProto.$cubeMessages[lang][NAMESPACE]
-
-  if (typeof args[0] === 'string') {
-    args[0] = {
-      [args[0]]: args[1]
-    }
-  }
-
-  deepAssign(baseMessages, args[0])
-}
-
-export { addMessage }

src/common/helpers/validator/rules.js

@@ -1,52 +0,0 @@
-import { createAddAPI } from '../util'
-import { types } from './types'
-
-const rules = {
-  required: (val, required, type) => {
-    type = type || (Array.isArray(val) ? 'array' : typeof val)
-    if (type === 'array' && Array.isArray(val)) {
-      return val.length > 0
-    }
-    return val !== '' && val !== undefined && val !== null
-  },
-  type: (val, type) => {
-    return !types[type] || types[type](val)
-  },
-  min: (val, min, type) => {
-    type = type || (typeof val)
-    if (type === 'number' || type === 'date') {
-      return Number(val) >= min
-    } else {
-      return val.length >= min
-    }
-  },
-  max: (val, max, type) => {
-    type = type || (typeof val)
-    if (type === 'number' || type === 'date') {
-      return Number(val) <= max
-    } else {
-      return val.length <= max
-    }
-  },
-  len: (val, len, type) => {
-    type = type || (typeof val)
-    let target = val
-    if (target.length === undefined) {
-      target = type === 'object' ? Object.keys(target) : String(target)
-    }
-    return target.length === len
-  },
-  notWhitespace: (val, config, type) => {
-    return !/^\s+$/.test(val)
-  },
-  pattern: (val, pattern, type) => {
-    return pattern.test(val)
-  },
-  custom: (val, custom, type) => {
-    return custom(val)
-  }
-}
-
-const addRule = createAddAPI(rules)
-
-export { rules, addRule }

src/common/helpers/validator/types.js

@@ -1,31 +0,0 @@
-import { createAddAPI } from '../util'
-
-const DATE_RE = /^(1|2)\d{3}[.\-/]\d{1,2}[.\-/]\d{1,2}$/
-
-const types = {
-  string: (val) => {
-    return typeof val === 'string'
-  },
-  number: (val) => {
-    return !isNaN(Number(val))
-  },
-  array: (val) => {
-    return Array.isArray(val)
-  },
-  date: (val) => {
-    return !isNaN(Number(val)) || DATE_RE.test(val)
-  },
-  email: (val) => {
-    return typeof val === 'string' && /^[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)+$/i.test(val)
-  },
-  tel: (val) => {
-    return typeof val === 'string' && /^(11|13|14|15|17|18|19)[0-9]{9}$/.test(val)
-  },
-  url: (val) => {
-    return typeof val === 'string' && /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/.test(val)
-  }
-}
-
-const addType = createAddAPI(types)
-
-export { types, addType }

src/common/icon/cube-icon.styl

@@ -1,208 +0,0 @@
-@font-face
-  font-family: "cube-icon"
-  src:
-    url("./cubeic.woff") format("woff"),
-    url("./cubeic.ttf") format("truetype")
-
-[class^="cubeic-"], [class*=" cubeic-"]
-  font-family: "cube-icon"!important
-  font-size: 100%
-  font-style: normal
-  -webkit-font-smoothing: antialiased
-  -webkit-text-stroke-width: 0.2px
-  -moz-osx-font-smoothing: grayscale
-
-.cubeic-eye-invisible::before
-  content: "\e624"
-
-.cubeic-eye-visible::before
-  content: "\e625"
-
-.cubeic-square-right::before
-  content: "\e67d"
-
-.cubeic-select::before
-  content: "\e609"
-
-.cubeic-pulldown::before
-  content: "\e603"
-
-.cubeic-pullup::before
-  content: "\e604"
-
-.cubeic-more::before
-  content: "\e607"
-
-.cubeic-back::before
-  content: "\e608"
-
-.cubeic-arrow::before
-  content: "\e60b"
-
-.cubeic-close::before
-  content: "\e60d"
-
-.cubeic-warn::before
-  content: "\e614"
-
-.cubeic-question::before
-  content: "\e616"
-
-.cubeic-right::before
-  content: "\e617"
-
-.cubeic-wrong::before
-  content: "\e618"
-
-.cubeic-info::before
-  content: "\e619"
-
-.cubeic-remove::before
-  content: "\e61a"
-
-.cubeic-add::before
-  content: "\e61c"
-
-.cubeic-share::before
-  content: "\e631"
-
-.cubeic-no-wifi::before
-  content: "\e632"
-
-.cubeic-smile::before
-  content: "\e634"
-
-.cubeic-sad::before
-  content: "\e636"
-
-.cubeic-email::before
-  content: "\e637"
-
-.cubeic-game::before
-  content: "\e638"
-
-.cubeic-wifi::before
-  content: "\e639"
-
-.cubeic-hot::before
-  content: "\e63b"
-
-.cubeic-notification::before
-  content: "\e63d"
-
-.cubeic-delete::before
-  content: "\e63e"
-
-.cubeic-vip::before
-  content: "\e63f"
-
-.cubeic-mute::before
-  content: "\e640"
-
-.cubeic-danger::before
-  content: "\e641"
-
-.cubeic-volume::before
-  content: "\e642"
-
-.cubeic-bad::before
-  content: "\e643"
-
-.cubeic-mobile-phone::before
-  content: "\e644"
-
-.cubeic-aim::before
-  content: "\e645"
-
-.cubeic-navigation::before
-  content: "\e64d"
-
-.cubeic-safe-pay::before
-  content: "\e64e"
-
-.cubeic-tag::before
-  content: "\e64f"
-
-.cubeic-lock::before
-  content: "\e651"
-
-.cubeic-unlock::before
-  content: "\e652"
-
-.cubeic-edit::before
-  content: "\e653"
-
-.cubeic-scan::before
-  content: "\e654"
-
-.cubeic-qr-code::before
-  content: "\e655"
-
-.cubeic-calendar::before
-  content: "\e659"
-
-.cubeic-time::before
-  content: "\e65f"
-
-.cubeic-red-packet::before
-  content: "\e664"
-
-.cubeic-star::before
-  content: "\e668"
-
-.cubeic-setting::before
-  content: "\e669"
-
-.cubeic-home::before
-  content: "\e66d"
-
-.cubeic-credit-card::before
-  content: "\e66e"
-
-.cubeic-mall::before
-  content: "\e670"
-
-.cubeic-microphone::before
-  content: "\e673"
-
-.cubeic-search::before
-  content: "\e674"
-
-.cubeic-good::before
-  content: "\e675"
-
-.cubeic-alert::before
-  content: "\e676"
-
-.cubeic-picture::before
-  content: "\e677"
-
-.cubeic-message::before
-  content: "\e678"
-
-.cubeic-phone::before
-  content: "\e67a"
-
-.cubeic-location::before
-  content: "\e67b"
-
-.cubeic-like::before
-  content: "\e67c"
-
-.cubeic-camera::before
-  content: "\e67e"
-
-.cubeic-person::before
-  content: "\e67f"
-
-.cubeic-round-border::before
-  content: "\e683"
-
-.cubeic-important::before
-  content: "\e68b"
-
-.cubeic-ok::before
-  content: "\e68c"
-
-.cubeic-square-border::before
-  content: "\e990"

src/common/js/date.js

@@ -1,23 +0,0 @@
-export function formatDate (date, fmt) {
-    if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-    }
-    let o = {
-    'M+': date.getMonth() + 1,
-    'd+': date.getDate(),
-    'h+': date.getHours(),
-    'm+': date.getMinutes(),
-    's+': date.getSeconds()
-    };
-    for (let k in o) {
-    if (new RegExp(`(${k})`).test(fmt)) {
-    let str = o[k] + '';
-    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
-    }
-    }
-    return fmt;
-    };
-    
-    function padLeftZero (str) {
-    return ('00' + str).substr(str.length);
-    };

src/common/js/util.js

@@ -1,61 +0,0 @@
-var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
-var DEFAULT_PATTERN = 'yyyy-MM-dd';
-function padding(s, len) {
-    var len = len - (s + '').length;
-    for (var i = 0; i < len; i++) { s = '0' + s; }
-    return s;
-};
-
-export default {
-    getQueryStringByName: function (name) {
-        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-        var r = window.location.search.substr(1).match(reg);
-        var context = "";
-        if (r != null)
-            context = r[2];
-        reg = null;
-        r = null;
-        return context == null || context == "" || context == "undefined" ? "" : context;
-    },
-    formatDate: {
-
-
-        format: function (date, pattern) {
-            pattern = pattern || DEFAULT_PATTERN;
-            return pattern.replace(SIGN_REGEXP, function ($0) {
-                switch ($0.charAt(0)) {
-                    case 'y': return padding(date.getFullYear(), $0.length);
-                    case 'M': return padding(date.getMonth() + 1, $0.length);
-                    case 'd': return padding(date.getDate(), $0.length);
-                    case 'w': return date.getDay() + 1;
-                    case 'h': return padding(date.getHours(), $0.length);
-                    case 'm': return padding(date.getMinutes(), $0.length);
-                    case 's': return padding(date.getSeconds(), $0.length);
-                }
-            });
-        },
-        parse: function (dateString, pattern) {
-            var matchs1 = pattern.match(SIGN_REGEXP);
-            var matchs2 = dateString.match(/(\d)+/g);
-            if (matchs1.length == matchs2.length) {
-                var _date = new Date(1970, 0, 1);
-                for (var i = 0; i < matchs1.length; i++) {
-                    var _int = parseInt(matchs2[i]);
-                    var sign = matchs1[i];
-                    switch (sign.charAt(0)) {
-                        case 'y': _date.setFullYear(_int); break;
-                        case 'M': _date.setMonth(_int - 1); break;
-                        case 'd': _date.setDate(_int); break;
-                        case 'h': _date.setHours(_int); break;
-                        case 'm': _date.setMinutes(_int); break;
-                        case 's': _date.setSeconds(_int); break;
-                    }
-                }
-                return _date;
-            }
-            return null;
-        }
-
-    }
-
-};

src/common/lang/date.js

@@ -1,109 +0,0 @@
-const DAY_TIMESTAMP = 60 * 60 * 24 * 1000
-const HOUR_TIMESTAMP = 60 * 60 * 1000
-const MINUTE_TIMESTAMP = 60 * 1000
-
-function formatType(type, format, value, regExpAttributes) {
-  const regExpMap = {
-    year: '(Y+)',
-    month: '(M+)',
-    date: '(D+)',
-    hour: '(h+)',
-    minute: '(m+)',
-    second: '(s+)',
-    quarter: '(q+)',
-    millisecond: '(S)'
-  }
-
-  if (new RegExp(regExpMap[type], regExpAttributes).test(format)) {
-    const replaceStr = type === 'year'
-                       ? value.toString().substr(4 - RegExp.$1.length)
-                       : (RegExp.$1.length === 1) ? value : pad(value)
-    format = format.replace(RegExp.$1, replaceStr)
-  }
-
-  return format
-}
-
-function pad(value) {
-  return ('00' + value).substr(('' + value).length)
-}
-
-function formatDate(date, format) {
-  const map = {
-    year: {
-      value: date.getFullYear(),
-      regExpAttributes: 'i'
-    },
-    month: {
-      value: date.getMonth() + 1
-    },
-    date: {
-      value: date.getDate(),
-      regExpAttributes: 'i'
-    },
-    hour: {
-      value: date.getHours(),
-      regExpAttributes: 'i'
-    },
-    minute: {
-      value: date.getMinutes()
-    },
-    second: {
-      value: date.getSeconds()
-    },
-    quarter: {
-      value: Math.floor((date.getMonth() + 3) / 3),
-      regExpAttributes: 'i'
-    },
-    millisecond: {
-      value: date.getMilliseconds()
-    }
-  }
-
-  for (const key in map) {
-    format = formatType(key, format, map[key].value, map[key].regExpAttributes)
-  }
-
-  return format
-}
-
-function getZeroStamp(date) {
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-  return +new Date(year + '/' + month + '/' + day + ' 00:00:00')
-}
-
-function getDayDiff(date1, date2) {
-  return Math.floor((getZeroStamp(date1) - getZeroStamp(date2)) / DAY_TIMESTAMP)
-}
-
-function getNow() {
-  return window.performance && window.performance.now ? (window.performance.now() + window.performance.timing.navigationStart) : +new Date()
-}
-
-function computeNatureMaxDay(month, year) {
-  let natureMaxDay = 30
-  if ([1, 3, 5, 7, 8, 10, 12].indexOf(month) > -1) {
-    natureMaxDay = 31
-  } else {
-    if (month === 2) {
-      natureMaxDay = !year || (!(year % 400) || (!(year % 4) && year % 100)) ? 29 : 28
-    }
-  }
-
-  return natureMaxDay
-}
-
-export {
-  DAY_TIMESTAMP,
-  HOUR_TIMESTAMP,
-  MINUTE_TIMESTAMP,
-  pad,
-  formatType,
-  formatDate,
-  getZeroStamp,
-  getDayDiff,
-  getNow,
-  computeNatureMaxDay
-}

src/common/lang/string.js

@@ -1,12 +0,0 @@
-const camelizeRE = /-(\w)/g
-export function camelize (str) {
-  str = String(str)
-  return str.replace(camelizeRE, function (m, c) {
-    return c ? c.toUpperCase() : ''
-  })
-}
-
-export function kebab (str) {
-  str = String(str)
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
-}

src/common/locale/index.js

@@ -1,51 +0,0 @@
-import defaultMessages from '../../locale/lang/zh-CN'
-import { warn } from '../helpers/debug'
-import { isUndef, isNumber } from '../helpers/util'
-import { formatDate } from '../lang/date'
-
-let proto
-
-const DEFAULT_LANG = 'zh-CN'
-
-const locale = {
-  name: 'locale',
-  install (Vue) {
-    if (locale.installed) return
-    proto = Vue.prototype
-    Vue.util.defineReactive(proto, '$cubeLang', DEFAULT_LANG)
-    proto['$cubeMessages'] = { [DEFAULT_LANG]: defaultMessages }
-    locale.installed = true
-  },
-  use (lang, messages) {
-    proto['$cubeLang'] = lang
-    const cubeMessages = proto['$cubeMessages']
-    // if messages have never been stored in vue.prototye
-    if (!(lang in cubeMessages)) {
-      cubeMessages[[lang]] = messages
-    }
-  },
-  helpers: {
-    toLocaleDateString (config, formatRules) {
-      /**
-       * Safari don't support formatRules like
-       * 'yyyy-MM-dd hh:mm:ss', so transfer it to 'yyyy/MM/dd hh:mm:ss'
-       */
-      const compatibleConfig = isNumber(config) ? config : config.replace(/-/g, '/')
-      const date = new Date(compatibleConfig)
-      /* istanbul ignore if */
-      if (isUndef(formatRules)) return date.toDateString()
-      return formatDate(date, formatRules)
-    }
-  },
-  addHelper (fnName, fn) {
-    // check existed helper fn
-    /* istanbul ignore if */
-    if (fnName in locale.helpers) {
-      warn(`${fnName} has already been registered on helpers function, please change another name`)
-      return
-    }
-    locale.helpers[fnName] = fn
-  }
-}
-
-export default locale

src/common/mixins/basic-picker.js

@@ -1,44 +0,0 @@
-const DEFAULT_KEYS = {
-  value: 'value',
-  text: 'text'
-}
-
-export default {
-  props: {
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    selectedIndex: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    alias: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  computed: {
-    valueKey() {
-      return this.alias.value || DEFAULT_KEYS.value
-    },
-    textKey() {
-      return this.alias.text || DEFAULT_KEYS.text
-    },
-    merge() {
-      return [this.data, this.selectedIndex]
-    }
-  },
-  watch: {
-    // Merge the watch handlers of data and selectedIndex into one.
-    merge(newVal) {
-      this.setData(newVal[0], newVal[1])
-    }
-  }
-}

src/common/mixins/deprecated.js

@@ -1,22 +0,0 @@
-import { tip } from '../../common/helpers/debug'
-import { kebab } from '../../common/lang/string'
-
-export default {
-  methods: {
-    _checkDeprecated() {
-      const props = this.$options.props
-      const componentName = this.$options.name
-
-      Object.entries(props).forEach(([key, prop]) => {
-        const deprecated = prop.deprecated
-
-        if (deprecated && this[key] !== undefined) {
-          tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "${deprecated.replacedBy}" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/${componentName.substr(5)}#cube-Propsconfiguration-anchor`, componentName)
-        }
-      })
-    }
-  },
-  mounted() {
-    this._checkDeprecated()
-  }
-}

src/common/mixins/locale.js

@@ -1,25 +0,0 @@
-import locale from '../locale'
-import { parsePath, isUndef } from '../helpers/util'
-import { warn } from '../helpers/debug'
-
-const TRANSLATION_ABSENT = `Translation is not registered correctly, ` +
-                           `you can call Locale.use() to install it.`
-
-export default {
-  computed: {
-    $t () {
-      const lang = this.$cubeLang
-      const messages = this.$cubeMessages[lang]
-      if (isUndef(messages)) {
-        warn(TRANSLATION_ABSENT)
-        return ''
-      }
-      return (path) => {
-        return parsePath(messages, path)
-      }
-    }
-  },
-  beforeCreate() {
-    locale.install(this.$root.constructor)
-  }
-}

src/common/mixins/picker.js

@@ -1,34 +0,0 @@
-export default {
-  props: {
-    title: {
-      type: String
-    },
-    subtitle: {
-      type: String
-    },
-    cancelTxt: {
-      type: String,
-      default: ''
-    },
-    confirmTxt: {
-      type: String,
-      default: ''
-    },
-    swipeTime: {
-      type: Number,
-      default: 2500
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    _cancelTxt () {
-      return this.cancelTxt || this.$t('cancel')
-    },
-    _confirmTxt () {
-      return this.confirmTxt || this.$t('ok')
-    }
-  }
-}

src/common/mixins/popup.js

@@ -1,12 +0,0 @@
-export default {
-  props: {
-    zIndex: {
-      type: Number,
-      default: 100
-    },
-    maskClosable: {
-      type: Boolean,
-      default: false
-    }
-  }
-}

src/common/mixins/scroll.js

@@ -1,11 +0,0 @@
-export default {
-  props: {
-    // the options of BetterScroll
-    options: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  }
-}

src/common/mixins/visibility.js

@@ -1,45 +0,0 @@
-const EVENT_TOGGLE = 'toggle'
-
-export default {
-  model: {
-    prop: 'visible',
-    event: EVENT_TOGGLE
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      // If use the prop visible directly, the toggle will failed when user haven't set v-model as a reactive property.
-      // So we use the data isVisible instead.
-      isVisible: false
-    }
-  },
-  watch: {
-    isVisible(newVal) {
-      this.$emit(EVENT_TOGGLE, newVal)
-    }
-  },
-  mounted() {
-    this.$watch('visible', (newVal, oldVal) => {
-      if (newVal) {
-        this.show()
-      } else if (oldVal && !this._createAPI_reuse) {
-        this.hide()
-      }
-    }, {
-      immediate: true
-    })
-  },
-  methods: {
-    show() {
-      this.isVisible = true
-    },
-    hide() {
-      this.isVisible = false
-    }
-  }
-}

src/common/stylus/base.styl

@@ -1,93 +0,0 @@
-@require "./variable.styl"
-@require "./mixin.styl"
-
-body, html
-  line-height: 1
-  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
-  user-select: none
-  -webkit-tap-highlight-color: transparent
-
-.clear-fix
-  &::after
-    content: ""
-    display: table
-    clear: both
-
-.border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px
-  position: relative
-  &::before, &::after
-    content: ""
-    display: block
-    position: absolute
-    transform-origin: 0 0
-
-.border-top-1px
-  &::before
-    border-top: 1PX solid $color-row-line
-    left: 0
-    top: 0
-    width: 100%
-    transform-origin: 0 top
-
-.border-right-1px
-  &::after
-    border-right: 1PX solid $color-col-line
-    top: 0
-    right: 0
-    height: 100%
-    transform-origin: right 0
-
-.border-bottom-1px
-  &::after
-    border-bottom: 1PX solid $color-row-line
-    left: 0
-    bottom: 0
-    width: 100%
-    transform-origin: 0 bottom
-
-.border-left-1px
-  &::before
-    border-left: 1PX solid $color-col-line
-    top: 0
-    left: 0
-    height: 100%
-    transform-origin: left 0
-
-.cube-safe-area-pb
-  safe-area-mixin(padding-bottom, bottom, true)
-
-@media (min-resolution: 2dppx)
-  .border-top-1px
-    &::before
-      width: 200%
-      transform: scale(.5)
-  .border-right-1px
-    &::after
-      height: 200%
-      transform: scale(.5)
-  .border-bottom-1px
-    &::after
-      width: 200%
-      transform: scale(.5)
-  .border-left-1px
-    &::before
-      height: 200%
-      transform: scale(.5)
-
-@media (min-resolution: 3dppx)
-  .border-top-1px
-    &::before
-      width: 300%
-      transform: scale(.333)
-  .border-right-1px
-    &::after
-      height: 300%
-      transform: scale(.333)
-  .border-bottom-1px
-    &::after
-      width: 300%
-      transform: scale(.333)
-  .border-left-1px
-    &::before
-      height: 300%
-      transform: scale(.333)

src/common/stylus/index.styl

@@ -1,5 +0,0 @@
-@require "./variable.styl"
-@require "./mixin.styl"
-@require "./reset.styl"
-@require "./base.styl"
-@require "../icon/cube-icon.styl"

src/common/stylus/mixin.styl

@@ -1,63 +0,0 @@
-border-1px($color = #ccc, $radius = 2PX, $style = solid)
-  position: relative
-  &::after
-    content: ""
-    pointer-events: none
-    display: block
-    position: absolute
-    left: 0
-    top: 0
-    transform-origin: 0 0
-    border: 1PX $style $color
-    border-radius: $radius
-    box-sizing border-box
-    width 100%
-    height 100%
-    @media (min-resolution: 2dppx)
-      width: 200%
-      height: 200%
-      border-radius: $radius * 2
-      transform: scale(.5)
-    @media (min-resolution: 3dppx)
-      width: 300%
-      height: 300%
-      border-radius: $radius * 3
-      transform: scale(.333)
-
-border-none()
-  &::before
-    display: none
-  &::after
-    display: none
-
-flex-fix()
-  flex: 1
-  flex-basis: 0.000000001px
-  width: 1%
-
-touch-active(type = orange)
-  if (type == orange)
-    &:active
-      color: #fcc1a6
-      background-color: rgba(250, 143, 84, .04)
-  else
-    &:active
-      color: #c6c6c6
-      background-color: rgba(0, 0, 0, .04)
-
-hide-scrollbar()
-  &::-webkit-scrollbar
-    width: 0
-    height: 0
-
-bg-image($url, $ext = ".png")
-  background-image: url($url + "@2x" + $ext)
-  @media (min-resolution: 3dppx)
-    background-image: url($url + "@3x" + $ext)
-
-functions = constant env
-safe-area-fn(fn, position)
-  s("%s(safe-area-inset-%s)", fn, position)
-safe-area-mixin(property, position, important = false)
-  for fn in functions
-    {property} safe-area-fn(fn, position) important == true ? !important : unquote("")

src/common/stylus/reset.styl

@@ -1,55 +0,0 @@
-/**
- * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
- * http://cssreset.com
- */
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video, input
-  margin: 0
-  padding: 0
-  border: 0
-  font-size: 100%
-  font-weight: normal
-  vertical-align: baseline
-
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, menu, nav, section
-  display: block
-
-body
-  line-height: 1
-
-blockquote, q
-  quotes: none
-
-blockquote:before, blockquote:after,
-q:before, q:after
-  content: none
-
-table
-  border-collapse: collapse
-  border-spacing: 0
-
-/* custom */
-
-a
-  color: #7e8c8d
-  text-decoration: none
-
-li
-  list-style: none
-
-body
-  -webkit-text-size-adjust: none
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

src/common/stylus/theme/default.styl

@@ -1,224 +0,0 @@
-@require "../var/color.styl"
-
-// action-sheet
-$action-sheet-color := $color-grey
-$action-sheet-active-color := $color-orange
-$action-sheet-bgc := $color-white
-$action-sheet-active-bgc := $color-light-grey-opacity
-$action-sheet-title-color := $color-dark-grey
-$action-sheet-space-bgc := $color-mask-bg
-/// picker style
-$action-sheet-picker-cancel-color := $color-light-grey
-$action-sheet-picker-cancel-active-color := $color-light-grey-s
-
-// bubble
-
-// button
-$btn-color := $color-white
-$btn-bgc := $color-regular-blue
-$btn-active-bgc := $color-blue
-/// primary
-$btn-primary-color := $color-white
-$btn-primary-bgc := $color-orange
-$btn-primary-active-bgc := $color-dark-orange
-/// light
-$btn-light-color := $color-grey
-$btn-light-bgc := $color-light-grey-sss
-$btn-light-active-bgc := $color-active-grey
-/// outline
-$btn-outline-color := $color-grey
-$btn-outline-bgc := transparent
-$btn-outline-bdc := $color-grey
-$btn-outline-active-bgc := $color-grey-opacity
-$btn-outline-active-bdc := $color-grey
-/// outline-primary
-$btn-outline-primary-color := $color-orange
-$btn-outline-primary-bgc := transparent
-$btn-outline-primary-bdc := $color-orange
-$btn-outline-primary-active-bgc := $color-orange-opacity
-$btn-outline-primary-active-bdc := $color-dark-orange
-/// disabled
-$btn-disabled-color := $color-white
-$btn-disabled-bgc := $color-light-grey-s
-$btn-disabled-bdc := $color-light-grey-s
-
-// toolbar
-$toolbar-bgc := $color-light-grey-sss
-$toolbar-active-bgc := $color-active-grey
-
-// checkbox
-$checkbox-color := $color-grey
-$checkbox-icon-color := $color-light-grey-s
-/// checked
-$checkbox-checked-icon-color := $color-orange
-$checkbox-checked-icon-bgc := $color-white
-/// disabled
-$checkbox-disabled-icon-color := $color-light-grey-ss
-$checkbox-disabled-icon-bgc := $color-light-grey-ss
-// checkbox hollow
-$checkbox-hollow-checked-icon-color := $color-orange
-$checkbox-hollow-disabled-icon-color := $color-light-grey-ss
-// checkbox-group
-$checkbox-group-bgc := $color-white
-$checkbox-group-horizontal-bdc := $color-light-grey-s
-
-// radio
-$radio-group-bgc := $color-white
-$radio-group-horizontal-bdc := $color-light-grey-s
-$radio-color := $color-grey
-$radio-icon-color := $color-light-grey-s
-/// selected
-$radio-selected-icon-color := $color-white
-$radio-selected-icon-bgc := $color-orange
-/// disabled
-$radio-disabled-icon-bgc := $color-light-grey-ss
-// radio hollow
-$radio-hollow-selected-icon-color := $color-orange
-$radio-hollow-disabled-icon-color := $color-light-grey-ss
-
-//checker
-$checker-item-color := $color-grey
-$checker-item-bdc := $color-light-grey-sss
-$checker-item-bgc := $color-white
-$checker-item-active-color := $color-orange
-$checker-item-active-bdc := $color-orange
-$checker-item-active-bgc := $color-light-orange-opacity
-
-// dialog
-$dialog-color := $color-grey
-$dialog-bgc := $color-white
-$dialog-icon-color := $color-regular-blue
-$dialog-icon-bgc := $color-background
-$dialog-title-color := $color-dark-grey
-$dialog-close-color := $color-light-grey
-$dialog-btn-color := $color-light-grey
-$dialog-btn-bgc := $color-white
-$dialog-btn-active-bgc := $color-light-grey-opacity
-$dialog-btn-highlight-color := $color-orange
-$dialog-btn-highlight-active-bgc := $color-light-orange-opacity
-$dialog-btn-disabled-color := $color-light-grey
-$dialog-btn-disabled-active-bgc := transparent
-$dialog-btns-split-color := $color-row-line
-
-// index-list
-$index-list-bgc := $color-white
-$index-list-title-color := $color-dark-grey
-$index-list-anchor-color := $color-light-grey
-$index-list-anchor-bgc := #f7f7f7
-$index-list-item-color := $color-dark-grey
-$index-list-item-active-bgc := $color-light-grey-opacity
-$index-list-nav-color := $color-grey
-$index-list-nav-active-color := $color-orange
-
-// loading
-
-// picker
-$picker-bgc := $color-white
-$picker-title-color := $color-dark-grey
-$picker-subtitle-color := $color-light-grey
-$picker-confirm-btn-color := $color-orange
-$picker-confirm-btn-active-color := $color-light-orange
-$picker-cancel-btn-color := $color-light-grey
-$picker-cancel-btn-active-color := $color-light-grey-s
-$picker-item-color := $color-dark-grey
-
-// popup
-$popup-mask-bgc := rgb(37, 38, 45)
-$popup-mask-opacity := .4
-
-//scroll
-
-// slide
-$slide-dot-bgc := $color-light-grey-s
-$slide-dot-active-bgc := $color-orange
-
-// time-picker
-
-// tip
-$tip-color := $color-white
-$tip-bgc := $color-dark-grey-opacity
-
-// toast
-$toast-color := $color-light-grey-s
-$toast-bgc := rgba(37, 38, 45, 0.9)
-
-// upload
-$upload-btn-color := $color-grey
-$upload-btn-bgc := $color-white
-$upload-btn-active-bgc := $color-light-grey-opacity
-$upload-btn-box-shadow := 0 0 6px 2px $color-grey-opacity
-$upload-btn-border-color := #e5e5e5
-$upload-file-bgc := $color-white
-$upload-file-remove-color := rgba(0, 0, 0, .8)
-$upload-file-remove-bgc := $color-white
-$upload-file-state-bgc := $color-mask-bg
-$upload-file-success-color := $color-orange
-$upload-file-error-color := #f43530
-$upload-file-status-bgc := $color-white
-$upload-file-progress-color := $color-white
-
-// switch
-$switch-on-bgc := $color-orange
-$switch-off-bgc := $color-white
-$switch-off-border-color := #e4e4e4
-
-// input
-$input-color := $color-grey
-$input-bgc := $color-white
-$input-border-color := $color-row-line
-$input-focus-border-color := $color-orange
-$input-placeholder-color := $color-light-grey-s
-$input-clear-icon-color := $color-light-grey
-
-//textarea
-$textarea-color := $color-grey
-$textarea-bgc := $color-white
-$textarea-border-color := $color-row-line
-$textarea-focus-border-color := $color-orange
-$textarea-outline-color := $color-orange
-$textarea-placeholder-color := $color-light-grey-s
-$textarea-indicator-color := $color-light-grey-s
-
-// validator
-$validator-msg-def-color := #e64340
-
-// select
-$select-color := $color-grey
-$select-bgc := $color-white
-$select-disabled-color := #b8b8b8
-$select-disabled-bgc := $color-light-grey-opacity
-$select-border-color := $color-light-grey-s
-$select-border-active-color := $color-orange
-$select-icon-color := $color-light-grey
-$select-placeholder-color := $color-light-grey-s
-
-// swipe
-$swipe-btn-color := $color-white
-
-// form
-$form-color := $color-grey
-$form-bgc := $color-white
-$form-invalid-color := #e64340
-$form-group-legend-color := $color-light-grey
-$form-group-legend-bgc := $color-background
-$form-label-required-color := #e64340
-
-// drawer
-$drawer-color := $color-dark-grey
-$drawer-title-bdc := $color-light-grey-ss
-$drawer-title-bgc := $color-white
-$drawer-panel-bgc := $color-white
-$drawer-item-active-bgc := $color-light-grey-opacity
-
-// scroll-nav
-$scroll-nav-bgc := $color-white
-$scroll-nav-color := $color-grey
-$scroll-nav-active-color := $color-orange
-
-// image-preview
-$image-preview-counter-color := $color-white
-
-// tab-bar & tab-panel
-$tab-color := $color-grey
-$tab-active-color := $color-dark-orange
-$tab-slider-bgc := $color-dark-orange

src/common/stylus/var/box-shadow.styl

@@ -1,3 +0,0 @@
-// box-shadow
-
-$box-shadow-content = 0 1px 3px rgba(0, 0, 0, .1)

src/common/stylus/var/color.styl

@@ -1,36 +0,0 @@
-// color vars
-//// basic
-$color-orange = #fc9153
-$color-regular-blue = #4a4c5b
-$color-background = #f3f4f5
-$color-white = #fff
-
-//// gray
-$color-dark-grey = #333
-$color-grey = #666
-$color-light-grey = #999
-$color-light-grey-s = #ccc
-$color-light-grey-ss = #eee
-$color-light-grey-sss = #fcfcfc
-$color-active-grey = #e8e8e8
-
-$color-dark-grey-opacity = rgba(74, 76, 91, 0.8)
-$color-grey-opacity = rgba(0, 0, 0, .08)
-$color-light-grey-opacity = rgba(0, 0, 0, .04)
-
-//// orange
-$color-dark-orange = #e8864c
-$color-light-orange = #fdc2a5
-$color-orange-opacity = rgba(252, 145, 83, .08)
-$color-light-orange-opacity = rgba(252, 145, 83, .04)
-
-//// blue
-$color-blue = #444654
-
-//// row line
-$color-row-line = #ebebeb
-//// column line
-$color-col-line = #f5f5f5
-
-/// mask
-$color-mask-bg = rgba(37, 38, 45, .4)

src/common/stylus/var/size.styl

@@ -1,12 +0,0 @@
-// font-size vars
-$fontsize-large-xxxx = 30px
-$fontsize-large-xxx = 24px
-$fontsize-large-xx = 20px
-$fontsize-large-x = 18px
-$fontsize-large = 16px
-$fontsize-medium = 14px
-$fontsize-small = 12px
-$fontsize-small-s = 10px
-
-// radius-size
-$radius-size-medium = 5px

src/common/stylus/variable.styl

@@ -1,4 +0,0 @@
-@require "./var/color.styl"
-@require "./var/size.styl"
-@require "./var/box-shadow.styl"
-@require "./theme/default.styl"

src/components/ConsumableMaterial/index.vue

@@ -1,315 +0,0 @@
-<template>
-  <div class="eventInformation" @click="showModal(model)">
-    <div class="head">
-      <p>
-        <span>{{ model.consumableName }}{{ model.consumableBrandModel }}</span>
-        <span class="textRight">单价：<strong class="fontBold">{{ model.consumableEndPrice }}元</strong></span>
-      </p>
-    </div>
-    <p>
-      <span class="fl"></span>
-      <span class="fr"><strong class="fontBold">×{{ model.consumablesNum }}</strong>&emsp;&emsp;<span class="totalPrice">总价：<strong class="fontBold">{{model.consumablesNum * model.consumableEndPrice}}元</strong></span></span>
-    </p>
-    <!-- 弹窗 -->
-    <showModel
-      v-if="models.disjunctor"
-      :title="models.title"
-      :icon="models.icon"
-      :disjunctor="models.disjunctor"
-      @ok="ok"
-      @cancel="cancel"
-      @remove="remove"
-      :operate="models.operate"
-      selectName="hc_edit"
-      :data="hcData"
-    ></showModel>
-  </div>
-</template>
-
-<script>
-import showModel from "../showModel/showModel.vue";
-export default {
-  name: "ConsumableMaterial",
-  data() {
-    return {
-      hcData: {},
-      loadShow: true,
-      // 弹窗model
-      models: {
-        disjunctor: false
-      },
-    };
-  },
-  props: ["model", "id", "summaryId", "incidentId", "noClick"],
-  components: {
-    showModel,
-  },
-  methods: {
-    // 移除
-    remove(data) {
-      console.log(data);
-      const toast = this.$createToast({
-        txt: "Loading...",
-        mask: true
-      });
-      toast.show();
-      this.$http
-        .post("service/bpm/data/addSummaryDoc", {
-            "consumableList": [
-                {
-                    "consumablesId": data.hc.id,
-                    "consumablesNum": data.consumablesNum
-                }
-            ],
-            "summaryId": this.summaryId,
-            "remove": 'remove',
-        })
-        .then(res => {
-          toast.hide();
-          this.models.disjunctor = false;
-          if (res.data.status == 200) {
-            this.$createDialog({
-              type: "alert",
-              title: "操作成功",
-              icon: "cubeic-right",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          } else {
-            this.$createDialog({
-              type: "alert",
-              title: "系统错误,请稍后再试!",
-              icon: "cubeic-wrong",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          }
-        });
-    },
-    //确定
-    ok(data) {
-      console.log(data);
-      const reg = /(^[1-9][0-9]*$)/;
-      if(!reg.test(data.consumablesNum)){
-          this.$createDialog({
-            type: "alert",
-            title: "请输入大于0的正整数!",
-            icon: "cubeic-warn"
-          }).show();
-          return;
-      }
-      const toast = this.$createToast({
-        txt: "Loading...",
-        mask: true
-      });
-      toast.show();
-      this.$http
-        .post("service/bpm/data/addSummaryDoc", {
-            "consumableList": [
-                {
-                    "consumablesId": data.hc.id,
-                    "consumablesNum": data.consumablesNum
-                }
-            ],
-            "summaryId": this.summaryId,
-            "modifyNum": 'edit',
-        })
-        .then(res => {
-          toast.hide();
-          this.models.disjunctor = false;
-          if (res.data.status == 200) {
-            this.$createDialog({
-              type: "alert",
-              title: "操作成功",
-              icon: "cubeic-right",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          } else {
-            this.$createDialog({
-              type: "alert",
-              title: "系统错误,请稍后再试!",
-              icon: "cubeic-wrong",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          }
-        });
-    },
-    //取消
-    cancel() {
-      this.models.disjunctor = false;
-    },
-    // 弹窗
-    showModal(item) {
-      if(this.noClick){
-        return;
-      }
-      console.log(item)
-      this.modelsData = item;
-      this.hcData = {
-        hc: {
-          endPrice: item.consumableEndPrice,
-          brandModel: item.consumableBrandModel,
-          name: item.consumableName,
-          id: item.consumableId,
-        },
-        incidentId: this.incidentId,
-        summaryId: this.summaryId,
-        consumablesNum: item.consumablesNum,
-      }
-      this.models = {
-        disjunctor: true,
-        title: "提示",
-        icon: "warn",
-        operate: {
-          ok: "确定",
-          cancel: "取消",
-          remove: '移除'
-        }
-      };
-    },
-  },
-  created() {
-    console.log(this.model);
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.eventInformation {
-  .totalPrice{
-    display: inline-block;
-    width: 2rem;
-    text-align: right;
-  }
-  .boeder_B {
-    border-bottom: 0.01rem solid #ccc;
-  }
-  .shows {
-    display: none;
-  }
-  .head {
-    border-bottom: 0.01rem solid #e6e6e6;
-    p {
-      padding: 0.24rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      i {
-        color: #00559d;
-      }
-      span {
-        flex: 1;
-        flex-shrink: 0;
-        width: 50%;
-        &.textRight{
-          text-align: right;
-        }
-      }
-    }
-  }
-  p {
-    line-height: 0.4rem;
-    padding: 0.1rem 0.24rem;
-    overflow: hidden;
-    .overflowEllipsis2 {
-      margin-left: 1.96rem;
-    }
-  }
-  .info_hide {
-    padding: 0.2rem 0.24rem;
-    border-bottom: 0.01rem solid #e6e6e6;
-    .hide {
-      color: #00559d;
-    }
-  }
-  .imgs-container {
-    a {
-      color: #03c !important;
-      &:visited {
-        color: #551a8b !important;
-      }
-    }
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-      margin-right: 0.7rem;
-      &:nth-child(1) {
-        margin-left: 0.75rem;
-      }
-    }
-  }
-  .progress {
-    padding: 0.2rem 0.2rem;
-    overflow: hidden;
-    transition-duration: 0.2s;
-    transition-timing-function: linear;
-    &.progressHide {
-      height: 1.7rem;
-    }
-    .progress_info {
-      overflow: hidden;
-      margin-bottom: 0.1rem;
-      &:nth-last-child(1) {
-        .cont {
-          border: none !important;
-        }
-      }
-      .progress_info_L {
-        float: left;
-        color: #333;
-        max-width: 18%;
-      }
-      .progress_info_R {
-        float: right;
-        margin-left: 0.09rem;
-        width: 80%;
-        font-size: 0.25rem;
-        .time {
-          i {
-            margin-left: -0.15rem;
-            &.icon-icon_weizuo {
-              color: #005495;
-            }
-            &.icon-icon_zhengzaijinx {
-              color: #48a843;
-              font-size: 0.37rem;
-            }
-          }
-          span {
-            margin-left: 0.15rem;
-          }
-        }
-        .cont {
-          border-left: 1px solid #999;
-          padding-left: 0.4rem;
-          min-height: 0.4rem;
-          &.blue {
-            border-left: 1px solid #005395;
-          }
-        }
-
-        .text1 {
-          font-size: 0.15rem;
-        }
-        .text2 {
-          color: #666;
-          word-break: break-all;
-        }
-        p {
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/EventInformation/index.vue

@@ -1,283 +0,0 @@
-<template>
-  <div class="eventInformation">
-    <div class="head">
-      <p>
-        <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
-        事件单号：{{ model.incident.incidentsign }}
-        <span
-          :class="{
-            fr: true,
-            btn: true,
-            daijiedan:
-              model.incident.state.value == 'pending' &&
-              model.incident.handlerUser &&
-              !model.incident.candidateGroups,
-            daiqiangdan:
-              model.incident.state.value == 'pending' &&
-              !model.incident.handlerUser &&
-              model.incident.candidateGroups
-          }"
-          >{{
-            model.incident.state.value == "pending"
-              ? model.incident.handlerUser && !model.incident.candidateGroups
-                ? "待接单"
-                : "待接单"
-              : model.incident.state.name
-          }}</span
-        >
-      </p>
-    </div>
-    <p>
-      <span class="fl">故障现象</span>
-      <span class="fr">{{ model.incident.category.category }}</span>
-    </p>
-    <p class="desc">
-      <span class="fl">故障描述</span>
-      <span class="grayFont fr" v-html="model.incident.description"></span>
-    </p>
-    <div class="shows" id="shows">
-      <p v-if="valConfig == 2">
-        <span class="fl">报修科室</span>
-        <span class="fr">{{
-          model.incident.department ? model.incident.department.dept : ""
-        }}</span>
-      </p>
-      <p v-if="valConfig == 1">
-        <span class="fl">报修人</span>
-        <span class="fr">{{ model.incident.requester.name }}</span>
-      </p>
-      <p v-if="valConfig == 2">
-        <span class="fl">联系人</span>
-        <span class="fr">{{ model.incident.contacts }}</span>
-      </p>
-      <p>
-        <span class="fl">联系电话</span>
-        <span class="fr" v-if="!model.incident.contactsInformation"></span>
-        <span class="fr" v-if="model.incident.contactsInformation"
-          ><a :href="'tel:' + model.incident.contactsInformation"
-            ><i class="iconfont icon-shouji"></i
-            >{{ model.incident.contactsInformation }}</a
-          ></span
-        >
-      </p>
-      <p>
-        <span class="fl">预约时间</span>
-        <span class="fr">{{ model.incident.yyTime || "" }}</span>
-      </p>
-      <p class="boeder_B">
-        <span class="fl">事件来源</span>
-        <span class="fr">{{ model.incident.source.name }}</span>
-      </p>
-      <p>
-        <span class="fl">受理人</span>
-        <span class="fr">{{
-          model.incident.acceptUser ? model.incident.acceptUser.name : ""
-        }}</span>
-      </p>
-      <p>
-        <span class="fl">处理人</span>
-        <span class="fr">{{
-          model.incident.handlerUser ? model.incident.handlerUser.name : ""
-        }}</span>
-      </p>
-      <p>
-        <span class="fl">处理人电话</span>
-        <span class="fr" v-if="!model.incident.handlerUser"></span>
-        <span class="fr" v-if="model.incident.handlerUser"
-          ><a :href="'tel:' + model.incident.handlerUser.phone"
-            ><i class="iconfont icon-shouji"></i
-            >{{ model.incident.handlerUser.phone }}</a
-          ></span
-        >
-      </p>
-      <p>
-        <span class="fl">优先级</span>
-        <span class="fr">{{
-          model.incident.priority ? model.incident.priority.name : ""
-        }}</span>
-      </p>
-      <p>
-        <span class="fl">逾期响应时间</span>
-        <span class="fr">{{ model.incident.overdueResponseDate }}</span>
-      </p>
-      <p>
-        <span class="fl">逾期解决时间</span>
-        <span class="fr">{{ model.incident.overdueTime }}</span>
-      </p>
-      <p class="boeder_B">
-        <span class="fl">详细地址</span>
-        <span class="fr" v-if="model.incident.place">{{ model.incident.branchName }} {{ model.incident.place.area.area }} {{ model.incident.place.place }} {{ model.incident.houseNumber }}</span>
-        <span class="fr" v-else>{{ model.incident.branchName }}</span>
-      </p>
-      <div v-if="hcsjList.length">
-        <p>耗材</p>
-        <div class="hcTable">
-          <table>
-            <tr>
-              <td>耗材名称</td>
-              <td>价格</td>
-              <td>数量</td>
-            </tr>
-            <tr v-for="(item, i) in hcsjList" :key="i">
-              <td>{{ item.consumable.name }}</td>
-              <td>{{ item.extra1 }}</td>
-              <td>{{ item.consumablesSum }}</td>
-            </tr>
-          </table>
-        </div>
-      </div>
-      <p v-if="wxIncidentWithCmdb == 1">
-        <span class="fl">资产</span>
-        <span class="fr">{{ model.incident.assetId || "无" }}</span>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "EventInformation",
-  data() {
-    return {
-      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
-      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
-      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
-      hcsjList: [] //绑定的耗材列表，展示
-    };
-  },
-  props: ["model", "id"],
-  methods: {
-    // 获取事件上绑定的耗材
-    getHcBySj() {
-      this.$http
-        .post("service/cmdb/storeList", {
-          data: { type: 2, source: "1627", sourceId: this.id }
-        })
-        .then(result => {
-          if (result.data.status == 200) {
-            this.hcsjList = result.data.data;
-          }
-        });
-    }
-  },
-  created() {
-    if (this.incidentWithConsumable == 1) {
-      this.getHcBySj();
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.eventInformation {
-  .boeder_B {
-    border-bottom: 0.01rem solid #ccc;
-  }
-  .shows {
-    display: none;
-  }
-  .head {
-    border-bottom: 0.01rem solid #e6e6e6;
-    p {
-      padding: 0.24rem 0.3rem;
-      i {
-        color: #00559d;
-      }
-    }
-  }
-  p {
-    line-height: 0.4rem;
-    padding: 0.1rem 0.24rem;
-    overflow: hidden;
-    .overflowEllipsis2 {
-      margin-left: 1.96rem;
-    }
-  }
-  .info_hide {
-    padding: 0.2rem 0.24rem;
-    border-bottom: 0.01rem solid #e6e6e6;
-    .hide {
-      color: #00559d;
-    }
-  }
-  .imgs-container {
-    a {
-      color: #03c !important;
-      &:visited {
-        color: #551a8b !important;
-      }
-    }
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-      margin-right: 0.7rem;
-      &:nth-child(1) {
-        margin-left: 0.75rem;
-      }
-    }
-  }
-  .progress {
-    padding: 0.2rem 0.2rem;
-    overflow: hidden;
-    transition-duration: 0.2s;
-    transition-timing-function: linear;
-    &.progressHide {
-      height: 1.7rem;
-    }
-    .progress_info {
-      overflow: hidden;
-      margin-bottom: 0.1rem;
-      &:nth-last-child(1) {
-        .cont {
-          border: none !important;
-        }
-      }
-      .progress_info_L {
-        float: left;
-        color: #333;
-        max-width: 18%;
-      }
-      .progress_info_R {
-        float: right;
-        margin-left: 0.09rem;
-        width: 80%;
-        font-size: 0.25rem;
-        .time {
-          i {
-            margin-left: -0.15rem;
-            &.icon-icon_weizuo {
-              color: #005495;
-            }
-            &.icon-icon_zhengzaijinx {
-              color: #48a843;
-              font-size: 0.37rem;
-            }
-          }
-          span {
-            margin-left: 0.15rem;
-          }
-        }
-        .cont {
-          border-left: 1px solid #999;
-          padding-left: 0.4rem;
-          min-height: 0.4rem;
-          &.blue {
-            border-left: 1px solid #005395;
-          }
-        }
-
-        .text1 {
-          font-size: 0.15rem;
-        }
-        .text2 {
-          color: #666;
-          word-break: break-all;
-        }
-        p {
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/WorkHourManagement/index.vue

@@ -1,380 +0,0 @@
-<template>
-  <div class="eventInformation" @click="showModal(model)">
-    <div class="head">
-      <p>
-        <span>{{ model.workName }}</span>
-        <span class="textRight">单价：<strong class="fontBold">{{ model.wage }}元</strong></span>
-      </p>
-    </div>
-    <p>
-      <span class="fl"></span>
-      <span class="fr"><strong class="fontBold">×{{ model.workHourNum2 }}{{ model.workUnit }}</strong>&emsp;&emsp;<span class="totalPrice">总价：<strong class="fontBold">{{model.workHourNum2 * model.wage}}元</strong></span></span>
-    </p>
-    <!-- 弹窗 -->
-    <showModel
-      v-if="models.disjunctor"
-      :title="models.title"
-      :icon="models.icon"
-      :disjunctor="models.disjunctor"
-      @ok="ok"
-      @cancel="cancel"
-      @remove="remove"
-      :operate="models.operate"
-      selectName="gs_edit"
-      :data="gsData"
-    ></showModel>
-  </div>
-</template>
-
-<script>
-import showModel from "../showModel/showModel.vue";
-export default {
-  name: "WorkHourManagement",
-  data() {
-    return {
-      gsData: {},
-      loadShow: true,
-      // 弹窗model
-      models: {
-        disjunctor: false
-      },
-    };
-  },
-  props: ["model", "id", "summaryId", "incidentId", "summaryObj", "noClick"],
-  components: {
-    showModel,
-  },
-  methods: {
-    // 移除
-    remove(data) {
-      console.log(data);
-      const toast = this.$createToast({
-        txt: "Loading...",
-        mask: true
-      });
-      toast.show();
-      this.$http
-        .post("service/bpm/data/addSummaryDoc", {
-            "workHourManagementList": [
-                {
-                    "workHourId": data.gs.id,
-                    "workHourNum": data.workHourNum2,
-                }
-            ],
-            "summaryId": this.summaryId,
-            "remove": 'remove',
-        })
-        .then(res => {
-          toast.hide();
-          this.models.disjunctor = false;
-          if (res.data.status == 200) {
-            this.$createDialog({
-              type: "alert",
-              title: "操作成功",
-              icon: "cubeic-right",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          } else {
-            this.$createDialog({
-              type: "alert",
-              title: "系统错误,请稍后再试!",
-              icon: "cubeic-wrong",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          }
-        });
-    },
-    //确定
-    ok(data) {
-      console.log(data);
-      const reg = /(^[1-9][0-9]*$)/;
-      if(!reg.test(data.workHourNum2)){
-          this.$createDialog({
-            type: "alert",
-            title: "请输入大于0的正整数!",
-            icon: "cubeic-warn"
-          }).show();
-          return;
-      }
-      const toast = this.$createToast({
-        txt: "Loading...",
-        mask: true
-      });
-      toast.show();
-      this.$http
-        .post("service/bpm/data/addSummaryDoc", {
-            "workHourManagementList": [
-                {
-                    "workHourId": data.gs.id,
-                    "workHourNum": data.workHourNum2,
-                }
-            ],
-            "summaryId": this.summaryId,
-            "modifyNum": 'edit',
-        })
-        .then(res => {
-          toast.hide();
-          this.models.disjunctor = false;
-          if (res.data.status == 200) {
-            this.$createDialog({
-              type: "alert",
-              title: "操作成功",
-              icon: "cubeic-right",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          } else {
-            this.$createDialog({
-              type: "alert",
-              title: "系统错误,请稍后再试!",
-              icon: "cubeic-wrong",
-              onConfirm: (e, promptValue) => {
-                this.loadShow = false;
-                this.$emit("refresh");
-              }
-            }).show();
-          }
-        });
-    },
-    //取消
-    cancel() {
-      this.models.disjunctor = false;
-    },
-    // 移除
-    // remove(data) {
-    //   console.log(data);
-    //   console.log(String(this.summaryObj.workHourManagementList.map(v => v.id).filter(v => v != this.id)))
-    //   const toast = this.$createToast({
-    //     txt: "Loading...",
-    //     mask: true
-    //   });
-    //   toast.show();
-    //   this.$http
-    //     .post("service/bpm/data/addSummaryDoc", {
-    //         "workHourIds": String(this.summaryObj.workHourManagementList.map(v => v.id).filter(v => v != this.id)),
-    //         "summaryId": this.summaryId,
-    //     })
-    //     .then(res => {
-    //       toast.hide();
-    //       if (res.data.status == 200) {
-    //         this.$createDialog({
-    //           type: "alert",
-    //           icon: "cubeic-right",
-    //           title: "操作成功",
-    //           onConfirm: (e, promptValue) => {
-    //             this.loadShow = false;
-    //             this.$emit("refresh");
-    //           },
-    //         }).show();
-    //       } else {
-    //         this.$createDialog({
-    //           type: "alert",
-    //           title: "系统错误,请稍后再试!",
-    //           icon: "cubeic-wrong",
-    //           onConfirm: (e, promptValue) => {
-    //             this.loadShow = false;
-    //             this.$emit("refresh");
-    //           }
-    //         }).show();
-    //       }
-    //     });
-    // },
-    // 弹窗
-    showModal(item) {
-      if(this.noClick){
-        return;
-      }
-      console.log(item)
-      this.modelsData = item;
-      this.gsData = {
-        gs: {
-          wage: item.wage,
-          workName: item.workName,
-          workUnit: item.workUnit,
-          id: item.id,
-        },
-        incidentId: this.incidentId,
-        summaryId: this.summaryId,
-        workHourNum2: item.workHourNum2,
-      }
-      this.models = {
-        disjunctor: true,
-        title: "提示",
-        icon: "warn",
-        operate: {
-          ok: "确定",
-          cancel: "取消",
-          remove: '移除'
-        }
-      };
-    },
-    // 弹窗
-    // showModal(item){
-    //   this.$createDialog({
-    //     type: "confirm",
-    //     title: "提示",
-    //     content: `您确认要移除工时【${item.workName}${item.workUnit}】吗`,
-    //     icon: "cubeic-right",
-    //     confirmBtn: {
-    //       text: "确定",
-    //       active: true,
-    //       disabled: false,
-    //       href: "javascript:;"
-    //     },
-    //     cancelBtn: {
-    //       text: "取消",
-    //       active: false,
-    //       disabled: false,
-    //       href: "javascript:;"
-    //     },
-    //     onConfirm: (e, promptValue) => {
-    //       this.loadShow = true;
-    //       this.remove(item);
-    //     },
-    //     onCancel: () => {}
-    //   }).show();
-    // }
-  },
-  created() {
-    console.log(this.model);
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.eventInformation {
-  .totalPrice{
-    display: inline-block;
-    width: 2rem;
-    text-align: right;
-  }
-  .boeder_B {
-    border-bottom: 0.01rem solid #ccc;
-  }
-  .shows {
-    display: none;
-  }
-  .head {
-    border-bottom: 0.01rem solid #e6e6e6;
-    p {
-      padding: 0.24rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      i {
-        color: #00559d;
-      }
-      span {
-        flex: 1;
-        flex-shrink: 0;
-        width: 50%;
-        &.textRight{
-          text-align: right;
-        }
-      }
-    }
-  }
-  p {
-    line-height: 0.4rem;
-    padding: 0.1rem 0.24rem;
-    overflow: hidden;
-    .overflowEllipsis2 {
-      margin-left: 1.96rem;
-    }
-  }
-  .info_hide {
-    padding: 0.2rem 0.24rem;
-    border-bottom: 0.01rem solid #e6e6e6;
-    .hide {
-      color: #00559d;
-    }
-  }
-  .imgs-container {
-    a {
-      color: #03c !important;
-      &:visited {
-        color: #551a8b !important;
-      }
-    }
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-      margin-right: 0.7rem;
-      &:nth-child(1) {
-        margin-left: 0.75rem;
-      }
-    }
-  }
-  .progress {
-    padding: 0.2rem 0.2rem;
-    overflow: hidden;
-    transition-duration: 0.2s;
-    transition-timing-function: linear;
-    &.progressHide {
-      height: 1.7rem;
-    }
-    .progress_info {
-      overflow: hidden;
-      margin-bottom: 0.1rem;
-      &:nth-last-child(1) {
-        .cont {
-          border: none !important;
-        }
-      }
-      .progress_info_L {
-        float: left;
-        color: #333;
-        max-width: 18%;
-      }
-      .progress_info_R {
-        float: right;
-        margin-left: 0.09rem;
-        width: 80%;
-        font-size: 0.25rem;
-        .time {
-          i {
-            margin-left: -0.15rem;
-            &.icon-icon_weizuo {
-              color: #005495;
-            }
-            &.icon-icon_zhengzaijinx {
-              color: #48a843;
-              font-size: 0.37rem;
-            }
-          }
-          span {
-            margin-left: 0.15rem;
-          }
-        }
-        .cont {
-          border-left: 1px solid #999;
-          padding-left: 0.4rem;
-          min-height: 0.4rem;
-          &.blue {
-            border-left: 1px solid #005395;
-          }
-        }
-
-        .text1 {
-          font-size: 0.15rem;
-        }
-        .text2 {
-          color: #666;
-          word-break: break-all;
-        }
-        p {
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/action-sheet/action-sheet.vue

@@ -1,188 +0,0 @@
-<template>
-  <transition name="cube-action-sheet-fade">
-    <cube-popup
-      type="action-sheet"
-      :class="{'cube-action-sheet_picker': pickerStyle}"
-      :center="false"
-      :mask="true"
-      :z-index="zIndex"
-      v-show="isVisible"
-      @mask-click="maskClick">
-      <transition name="cube-action-sheet-move">
-        <div class="cube-action-sheet-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
-          <h1 class="cube-action-sheet-title border-bottom-1px" v-show="pickerStyle || title">{{title}}</h1>
-          <div class="cube-action-sheet-content">
-            <ul class="cube-action-sheet-list">
-              <li
-                class="cube-action-sheet-item border-bottom-1px"
-                v-for="(item, index) in data"
-                :data-align="item.align"
-                :class="[
-                  item.class || '',
-                  index === active ? 'cube-action-sheet-item_active': ''
-                ]"
-                v-html="item.content"
-                @click="itemClick(item, index)"></li>
-            </ul>
-          </div>
-          <div class="cube-action-sheet-space"></div>
-          <div class="cube-action-sheet-cancel" @click="cancel"><span>{{_cancelTxt}}</span></div>
-        </div>
-      </transition>
-    </cube-popup>
-  </transition>
-</template>
-
-<script type="text/ecmascript-6">
-  import CubePopup from '../popup/popup.vue'
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-  import localeMixin from '../../common/mixins/locale'
-
-  const COMPONENT_NAME = 'cube-action-sheet'
-  const EVENT_SELECT = 'select'
-  const EVENT_CANCEL = 'cancel'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin, localeMixin],
-    props: {
-      data: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      active: {
-        type: Number,
-        default: -1
-      },
-      title: {
-        type: String,
-        default: ''
-      },
-      pickerStyle: {
-        type: Boolean,
-        default: false
-      },
-      maskClosable: {
-        type: Boolean,
-        default: true
-      },
-      cancelTxt: {
-        type: String,
-        default: ''
-      }
-    },
-    computed: {
-      _cancelTxt () {
-        return this.cancelTxt || this.$t('cancel')
-      }
-    },
-    methods: {
-      maskClick() {
-        this.maskClosable && this.cancel()
-      },
-      cancel() {
-        this.hide()
-        this.$emit(EVENT_CANCEL)
-      },
-      itemClick(item, index) {
-        this.hide()
-        this.$emit(EVENT_SELECT, item, index)
-      }
-    },
-    components: {
-      CubePopup
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/mixin.styl"
-  @require "../../common/stylus/variable.styl"
-
-  .cube-action-sheet-fade-enter, .cube-action-sheet-fade-leave-active
-    opacity: 0
-  .cube-action-sheet-fade-enter-active, .cube-action-sheet-fade-leave-active
-    transition: all .3s ease-in-out
-
-  .cube-action-sheet-panel
-    text-align: center
-    font-size: $fontsize-medium
-    background-color: $action-sheet-bgc
-  .cube-action-sheet-move-enter, .cube-action-sheet-move-leave-active
-    transform: translate3d(0, 100%, 0)
-  .cube-action-sheet-move-enter-active, .cube-action-sheet-move-leave-active
-    transition: all .3s ease-in-out
-  .cube-action-sheet-cancel
-    background-color: $action-sheet-bgc
-  .cube-action-sheet-cancel span, .cube-action-sheet-title, .cube-action-sheet-item
-    display: block
-    padding: 17px 16px
-    margin: 0
-    text-align: center
-    overflow: hidden
-    white-space: nowrap
-    font-size: $fontsize-large
-    font-weight: normal
-    line-height: 1
-    color: $action-sheet-color
-    background-color: $action-sheet-bgc
-
-  .cube-action-sheet-cancel span, .cube-action-sheet-item
-    &:active
-      background-color: $action-sheet-active-bgc
-
-  .cube-action-sheet-title
-    padding-top: 16px
-    padding-bottom: 16px
-    color: $action-sheet-title-color
-    font-size: $fontsize-large-x
-
-  .cube-action-sheet-content
-    overflow: hidden
-    background: $action-sheet-bgc
-
-  .cube-action-sheet-list
-    list-style: none
-
-  .cube-action-sheet-item
-    list-style: none
-    user-select: none
-    &:last-of-type
-      border-none()
-    &[data-align="left"]
-      text-align: left
-    &[data-align="right"]
-      text-align: right
-
-  .cube-action-sheet-space
-    height: 6px
-    background-color: $action-sheet-space-bgc
-
-  .cube-action-sheet-item_active
-    color: $action-sheet-active-color
-
-  .cube-action-sheet_picker
-    .cube-action-sheet-space
-      height: 0
-    .cube-action-sheet-title
-      height: 1em
-      padding-top: 21px
-      padding-bottom: 21px
-
-    .cube-action-sheet-cancel
-      position: absolute
-      top: 0
-      background-color: transparent
-      span
-        padding-top: 23px
-        padding-bottom: 23px
-        color: $action-sheet-picker-cancel-color
-        font-size: $fontsize-medium
-        background-color: transparent
-        &:active
-          color: $action-sheet-picker-cancel-active-color
-          background-color: transparent
-</style>

src/components/bubble/bubble.vue

@@ -1,137 +0,0 @@
-<template>
-  <canvas ref="bubble" :width="width" :height="height" :style="style"></canvas>
-</template>
-
-<script type="text/ecmascript-6">
-  export default {
-    props: {
-      y: {
-        type: Number,
-        default: 0
-      }
-    },
-    data() {
-      return {
-        width: 50,
-        height: 80
-      }
-    },
-    computed: {
-      distance() {
-        return Math.max(0, Math.min(this.y * this.ratio, this.maxDistance))
-      },
-      style() {
-        return `width:${this.width / this.ratio}px;height:${this.height / this.ratio}px`
-      }
-    },
-    mounted() {
-      this.ratio = window.devicePixelRatio
-      this.width *= this.ratio
-      this.height *= this.ratio
-      this.initRadius = 18 * this.ratio
-      this.minHeadRadius = 12 * this.ratio
-      this.minTailRadius = 5 * this.ratio
-      this.initArrowRadius = 10 * this.ratio
-      this.minArrowRadius = 6 * this.ratio
-      this.arrowWidth = 3 * this.ratio
-      this.maxDistance = 40 * this.ratio
-      this.initCenterX = 25 * this.ratio
-      this.initCenterY = 25 * this.ratio
-      this.headCenter = {
-        x: this.initCenterX,
-        y: this.initCenterY
-      }
-      this._draw()
-    },
-    methods: {
-      _draw() {
-        const bubble = this.$refs.bubble
-        let ctx = bubble.getContext('2d')
-        ctx.clearRect(0, 0, bubble.width, bubble.height)
-
-        this._drawBubble(ctx)
-
-        this._drawArrow(ctx)
-      },
-      _drawBubble(ctx) {
-        ctx.save()
-        ctx.beginPath()
-
-        const rate = this.distance / this.maxDistance
-        const headRadius = this.initRadius - (this.initRadius - this.minHeadRadius) * rate
-
-        this.headCenter.y = this.initCenterY - (this.initRadius - this.minHeadRadius) * rate
-
-        // upper semicircle
-        ctx.arc(this.headCenter.x, this.headCenter.y, headRadius, 0, Math.PI, true)
-
-        // left bessel
-        const tailRadius = this.initRadius - (this.initRadius - this.minTailRadius) * rate
-        const tailCenter = {
-          x: this.headCenter.x,
-          y: this.headCenter.y + this.distance
-        }
-
-        const tailPointL = {
-          x: tailCenter.x - tailRadius,
-          y: tailCenter.y
-        }
-        const controlPointL = {
-          x: tailPointL.x,
-          y: tailPointL.y - this.distance / 2
-        }
-
-        ctx.quadraticCurveTo(controlPointL.x, controlPointL.y, tailPointL.x, tailPointL.y)
-
-        // lower semicircle
-        ctx.arc(tailCenter.x, tailCenter.y, tailRadius, Math.PI, 0, true)
-
-        // right bessel
-        const headPointR = {
-          x: this.headCenter.x + headRadius,
-          y: this.headCenter.y
-        }
-        const controlPointR = {
-          x: tailCenter.x + tailRadius,
-          y: headPointR.y + this.distance / 2
-        }
-        ctx.quadraticCurveTo(controlPointR.x, controlPointR.y, headPointR.x, headPointR.y)
-
-        ctx.fillStyle = 'rgb(170,170,170)'
-        ctx.fill()
-        ctx.strokeStyle = 'rgb(153,153,153)'
-        ctx.stroke()
-        ctx.restore()
-      },
-      _drawArrow(ctx) {
-        ctx.save()
-        ctx.beginPath()
-
-        const rate = this.distance / this.maxDistance
-        const arrowRadius = this.initArrowRadius - (this.initArrowRadius - this.minArrowRadius) * rate
-
-        // inner circle
-        ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius - (this.arrowWidth - rate), -Math.PI / 2, 0, true)
-
-        // outer circle
-        ctx.arc(this.headCenter.x, this.headCenter.y, arrowRadius, 0, Math.PI * 3 / 2, false)
-
-        ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius - this.arrowWidth / 2 + rate)
-        ctx.lineTo(this.headCenter.x + this.arrowWidth * 2 - rate * 2, this.headCenter.y - arrowRadius + this.arrowWidth / 2)
-
-        ctx.lineTo(this.headCenter.x, this.headCenter.y - arrowRadius + this.arrowWidth * 3 / 2 - rate)
-
-        ctx.fillStyle = 'rgb(255,255,255)'
-        ctx.fill()
-        ctx.strokeStyle = 'rgb(170,170,170)'
-        ctx.stroke()
-        ctx.restore()
-      }
-    },
-    watch: {
-      y() {
-        this._draw()
-      }
-    }
-  }
-</script>

src/components/button/button.vue

@@ -1,148 +0,0 @@
-<template>
-  <button
-    class="cube-btn"
-    :type="type"
-    :class="btnClass"
-    @click="handleClick">
-    <i :class="icon" v-if="icon"></i>
-    <slot></slot>
-  </button>
-</template>
-
-<script>
-  const COMPONENT_NAME = 'cube-button'
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      icon: {
-        type: String,
-        default: ''
-      },
-      active: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      inline: {
-        type: Boolean,
-        default: false
-      },
-      primary: {
-        type: Boolean,
-        default: false
-      },
-      outline: {
-        type: Boolean,
-        default: false
-      },
-      light: {
-        type: Boolean,
-        default: false
-      },
-      type: {
-        type: String,
-        default: 'button'
-      }
-    },
-    computed: {
-      btnClass() {
-        return {
-          'cube-btn_active': this.active,
-          'cube-btn_disabled': this.disabled,
-          'cube-btn-inline': this.inline,
-          'cube-btn-primary': this.primary,
-          'cube-btn-outline': this.outline,
-          'cube-btn-outline-primary': this.outline && this.primary,
-          'cube-btn-light': this.light
-        }
-      }
-    },
-    methods: {
-      handleClick(event) {
-        if (this.disabled) {
-          event.preventDefault()
-          event.stopPropagation()
-          return
-        }
-        this.$emit('click', event)
-      }
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-  btn-active($bg, $border = null)
-    &.cube-btn_active, &:active
-      background: $bg
-      if $border != null
-        border-1px($border)
-
-  .cube-btn
-    display: block
-    margin: 0
-    padding: 17px 16px
-    width: 100%
-    text-align: center
-    white-space: nowrap
-    cursor: pointer
-    font-size: $fontsize-large
-    line-height: 1
-    color: $btn-color
-    background: $btn-bgc
-    outline: none
-    border: none
-    border-radius: 2px
-    box-sizing: border-box
-    -webkit-tap-highlight-color: transparent
-    btn-active($btn-active-bgc)
-    > i
-      display: inline-block
-      margin-right: 4px
-      font-size: 100%
-      transform: scale(1.13)
-      transform-origin: right center
-
-  .cube-btn-inline
-    width: auto
-    display: inline-block
-    vertical-align: middle
-    padding: 9px 10px
-    font-size: $fontsize-small
-    > i
-      margin-right: 2px
-      transform: scale(1.14)
-
-  .cube-btn-primary
-    color: $btn-primary-color
-    background: $btn-primary-bgc
-    btn-active($btn-primary-active-bgc)
-
-  .cube-btn-light
-    color: $btn-light-color
-    background: $btn-light-bgc
-    box-shadow: $box-shadow-content
-    btn-active($btn-light-active-bgc)
-
-  .cube-btn-outline
-    color: $btn-outline-color
-    background: $btn-outline-bgc
-    border-1px($btn-outline-bdc)
-    btn-active($btn-outline-active-bgc, $btn-outline-active-bdc)
-
-  .cube-btn-outline-primary
-    color: $btn-outline-primary-color
-    background: $btn-outline-primary-bgc
-    border-1px($btn-outline-primary-bdc)
-    btn-active($btn-outline-primary-active-bgc, $btn-outline-primary-active-bdc)
-
-  .cube-btn_disabled
-    color: $btn-disabled-color
-    background: $btn-disabled-bgc
-    border-1px($btn-disabled-bdc)
-    btn-active($btn-disabled-bgc, $btn-disabled-bdc)
-</style>

src/components/cascade-picker/cascade-picker.vue

@@ -1,110 +0,0 @@
-<template>
-  <cube-picker
-    ref="picker"
-    v-model="isVisible"
-    :data="pickerData"
-    :selected-index="pickerSelectedIndex"
-    :pending="pending"
-    :title="title"
-    :subtitle="subtitle"
-    :z-index="zIndex"
-    :cancel-txt="_cancelTxt"
-    :confirm-txt="_confirmTxt"
-    :swipe-time="swipeTime"
-    :mask-closable="maskClosable"
-    @select="_pickerSelect"
-    @cancel="_pickerCancel"
-    @change="_pickerChange">
-  </cube-picker>
-</template>
-
-<script type="text/ecmascript-6">
-  import CubePicker from '../picker/picker.vue'
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-  import basicPickerMixin from '../../common/mixins/basic-picker'
-  import pickerMixin from '../../common/mixins/picker'
-  import localeMixin from '../../common/mixins/locale'
-
-  const COMPONENT_NAME = 'cube-cascade-picker'
-  const EVENT_SELECT = 'select'
-  const EVENT_CANCEL = 'cancel'
-  const EVENT_CHANGE = 'change'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin, localeMixin],
-    props: {
-      async: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data () {
-      return {
-        cascadeData: this.data.slice(),
-        pickerSelectedIndex: this.selectedIndex.slice(),
-        pickerData: [],
-        pending: false
-      }
-    },
-    created() {
-      this._updatePickerData()
-    },
-    methods: {
-      setData(data, selectedIndex = []) {
-        this.pending = false
-        this.cascadeData = data.slice()
-        this.pickerSelectedIndex = selectedIndex.slice()
-        this._updatePickerData()
-      },
-      _pickerSelect(selectedVal, selectedIndex, selectedText) {
-        this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
-      },
-      _pickerCancel() {
-        this.$emit(EVENT_CANCEL)
-      },
-      _pickerChange(i, newIndex) {
-        if (newIndex !== this.pickerSelectedIndex[i]) {
-          this.pickerSelectedIndex.splice(i, 1, newIndex)
-          this.async
-            ? (this.pending = i !== this.pickerData.length - 1)
-            : this._updatePickerData(i + 1)
-        }
-        this.$emit(EVENT_CHANGE, i, newIndex)
-      },
-      _updatePickerData(fromColumn = 0) {
-        let data = this.cascadeData
-        let i = 0
-        while (data) {
-          if (i >= fromColumn) {
-            let columnData = []
-            data.forEach((item) => {
-              columnData.push({
-                value: item[this.valueKey],
-                text: item[this.textKey]
-              })
-            })
-            this.pickerData[i] = columnData
-            /* refillColumn could only be called after show() */
-            this.pickerSelectedIndex[i] = fromColumn === 0
-              ? (this.pickerSelectedIndex[i] < data.length ? this.pickerSelectedIndex[i] || 0 : 0)
-              : this.$refs.picker.refillColumn(i, columnData)
-          }
-          data = data.length ? data[this.pickerSelectedIndex[i]].children : null
-
-          i++
-        }
-
-        if (i < this.pickerData.length) {
-          this.pickerData.splice(i, this.pickerData.length - i)
-        }
-
-        this.pickerData = this.pickerData.slice()
-      }
-    },
-    components: {
-      CubePicker
-    }
-  }
-</script>

src/components/checkbox-group/checkbox-group.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="cube-checkbox-group" ref="group" :class="groupClass" :data-horz="horizontal">
-    <slot>
-      <cube-checkbox
-        v-for="(option, index) in options"
-        :key="index"
-        :option="option"
-        :shape="shape"
-        :position="position"
-        :hollow-style="hollowStyle" />
-    </slot>
-  </div>
-</template>
-<script type="text/ecmascript-6">
-  import CubeCheckbox from '../checkbox/checkbox.vue'
-  const COMPONENT_NAME = 'cube-checkbox-group'
-
-  const EVENT_INPUT = 'input'
-  const EVENT_CHECKED = 'checked'
-  const EVENT_CANCLE_CHECKED = 'cancel-checked'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      value: {
-        type: Array
-      },
-      horizontal: {
-        type: Boolean,
-        default: false
-      },
-      shape: {
-        type: String,
-        default: 'circle'
-      },
-      position: {
-        type: String,
-        default: 'left'
-      },
-      hollowStyle: {
-        type: Boolean,
-        default: false
-      },
-      options: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      min: {
-        type: Number,
-        default: 0
-      },
-      max: {
-        type: Number,
-        default: Infinity
-      }
-    },
-    data () {
-      return {
-        _value: [],
-        _checkboxGroup: true
-      }
-    },
-    computed: {
-      groupClass() {
-        if (!this.horizontal) {
-          return 'border-top-1px border-bottom-1px'
-        }
-      }
-    },
-    watch: {
-      value: {
-        immediate: true,
-        handler (newValue, oldValue) {
-          this._value = this.value.concat()
-        }
-      }
-    },
-    mounted () {
-      this.$on(EVENT_CHECKED, (value) => {
-        if (this._value.length < this.max) {
-          this._value.push(value)
-        }
-        this.$emit(EVENT_INPUT, this._value)
-      })
-      this.$on(EVENT_CANCLE_CHECKED, (value) => {
-        if (this._value.length > this.min) {
-          const index = this._value.indexOf(value)
-          this._value.splice(index, 1)
-        }
-        this.$emit(EVENT_INPUT, this._value)
-      })
-    },
-    components: {
-      CubeCheckbox
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-checkbox-group
-    z-index: 1
-    overflow: hidden
-    background-color: $checkbox-group-bgc
-    .cube-checkbox
-      &:last-child
-        .cube-checkbox-wrap
-          border-none()
-  .cube-checkbox-group[data-horz="true"]
-    display: flex
-    padding-left: 0
-    border-1px($checkbox-group-horizontal-bdc, 2px)
-    border-radius: 2px
-    .cube-checkbox
-      flex-fix()
-      text-align: center
-      padding-left: 10px
-      padding-right: 10px
-      &:after
-        border-color: $checkbox-group-horizontal-bdc
-      &:last-child
-        border-none()
-      &[data-pos="right"]
-        .cube-checkbox-ui
-          position: relative
-          margin-left: .42em
-          order: 1
-        .cube-checkbox-label
-          margin-right: 0
-    .cube-checkbox-wrap
-      justify-content: center
-</style>

src/components/checkbox/checkbox.vue

@@ -1,237 +0,0 @@
-<template>
-  <div class="cube-checkbox" :class="_containerClass" :data-pos="position">
-    <label class="cube-checkbox-wrap" :class="_wrapClass">
-      <input class="cube-checkbox-input" type="checkbox" :disabled="computedOption.disabled" v-model="checkValue">
-      <span class="cube-checkbox-ui" :class="_borderIconClass">
-        <i :class="_rightIconClass"></i>
-      </span>
-      <span class="cube-checkbox-label">
-        <slot>{{computedOption.label}}</slot>
-      </span>
-    </label>
-  </div>
-</template>
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'cube-checkbox'
-
-  const EVENT_INPUT = 'input'
-  const EVENT_CHECKED = 'checked'
-  const EVENT_CANCLE_CHECKED = 'cancel-checked'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      value: {
-        type: [Boolean, String]
-      },
-      label: {
-        type: [Boolean, String]
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      option: {
-        type: [Boolean, String, Object],
-        default () {
-          return {
-            _def_option: true
-          }
-        }
-      },
-      position: {
-        type: String,
-        default: 'left'
-      },
-      shape: {
-        type: String,
-        default: 'circle'
-      },
-      hollowStyle: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data () {
-      const parent = this.$parent
-      const isInGroup = parent.$data._checkboxGroup
-      const isInHorizontalGroup = isInGroup && parent.$props.horizontal
-      return {
-        isInGroup,
-        isInHorizontalGroup
-      }
-    },
-    computed: {
-      computedOption() {
-        let option = this.option
-        const label = this.label
-        const disabled = this.disabled
-        if (option._def_option === true) {
-          option = {
-            label,
-            value: label,
-            disabled
-          }
-        } else if (typeof option === 'string') {
-          option = {
-            label: option,
-            value: option,
-            disabled: false
-          }
-        }
-        return option
-      },
-      checkValue: {
-        get () {
-          if (this.isInGroup) {
-            return this.$parent.value.indexOf(this.computedOption.value) > -1
-          } else {
-            return Boolean(this.value)
-          }
-        },
-        set (newValue) {
-          const value = this.computedOption.value
-          const emitValue = value && newValue ? value : newValue
-          const parentEmitEvent = newValue ? EVENT_CHECKED : EVENT_CANCLE_CHECKED
-          this.$emit(EVENT_INPUT, emitValue)
-          if (this.isInGroup) {
-            this.$parent.$emit(parentEmitEvent, value || newValue)
-          }
-        }
-      },
-      _containerClass() {
-        return {
-          'cube-checkbox-hollow': this.hollowStyle,
-          'cube-checkbox_checked': this.checkValue,
-          'cube-checkbox_disabled': this.computedOption.disabled,
-          'border-right-1px': this.isInHorizontalGroup
-        }
-      },
-      _wrapClass() {
-        if (this.isInGroup && !this.isInHorizontalGroup) {
-          return 'border-bottom-1px'
-        }
-      },
-      isSquare() {
-        return this.shape === 'square' || this.hollowStyle
-      },
-      _borderIconClass() {
-        return this.isSquare ? 'cubeic-square-border' : 'cubeic-round-border'
-      },
-      _rightIconClass() {
-        return this.isSquare ? 'cubeic-square-right' : 'cubeic-right'
-      }
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  $ui-width = 1.42em
-  .cube-checkbox
-    position: relative
-    padding: 0 16px
-    text-align: left
-    font-size: 100%
-    color: $checkbox-color
-    &[data-pos="right"]
-      .cube-checkbox-ui
-        margin-right: 0
-        position: absolute
-        right: 0
-      .cube-checkbox-label
-        margin-right: $ui-width
-  .cube-checkbox-wrap
-    position: relative
-    display: flex
-    align-items: center
-    box-sizing: border-box
-    width: 100%
-    height: 100%
-    padding: 11px 0
-    line-height: 1.5
-    word-break: break-word
-    word-wrap: break-word
-  .cube-checkbox-input
-    z-index: 1
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    opacity: 0
-  .cube-checkbox-ui
-    position: relative
-    width: 1em
-    height: 1em
-    margin-right: $ui-width - 1em
-    line-height: 1
-    border-radius: 50%
-    &.cubeic-square-border
-      border-radius: 2px
-    &::before, i
-      transition: all .2s
-    &::before
-      color: $checkbox-icon-color
-      display: inline-block
-      transform: scale(1.24)
-    i
-      position: absolute
-      top: 0
-      left: 0
-      color: transparent
-      transform: scale(.4)
-  .cube-checkbox_checked
-    .cube-checkbox-ui
-      &::before
-        color: transparent
-      i
-        color: $checkbox-checked-icon-color
-        transform: scale(1.23)
-  .cube-checkbox_disabled
-    .cube-checkbox-ui
-      background-color: $checkbox-disabled-icon-bgc
-      &::before, i
-        transition: none
-      &::before
-        color: transparent
-      i
-        color: $checkbox-disabled-icon-color
-  .cube-checkbox_checked.cube-checkbox_disabled
-    .cube-checkbox-ui
-      background-color: $checkbox-checked-icon-bgc
-  .cube-checkbox-hollow
-    i
-      width: 100%
-      height: 100%
-      &::before
-        content: ""
-        position: absolute
-        top: 50%
-        left: 50%
-        width: 50%
-        height: 50%
-        transform: translate(-50%, -50%)
-        background-color: currentColor
-        border-radius: 2px
-    &.cube-checkbox_checked
-      .cube-checkbox-ui
-        &::before
-          color: $checkbox-hollow-checked-icon-color
-        i
-          transform: scale(1)
-          color: $checkbox-hollow-checked-icon-color
-    &.cube-checkbox_disabled
-      .cube-checkbox-ui
-        background-color: transparent
-        &::before
-          color: $checkbox-hollow-disabled-icon-color
-        i
-          transform: scale(1)
-          color: transparent
-      &.cube-checkbox_checked
-        .cube-checkbox-ui
-          i
-            color: $checkbox-hollow-disabled-icon-color
-</style>

src/components/checker/checker-item.vue

@@ -1,59 +0,0 @@
-<template>
-  <li
-    class="cube-checker-item"
-    :class="{'cube-checker-item_active': isActive}"
-    @click="clickHandler"
-  >
-    <slot>
-      <span v-html="option.text"></span>
-    </slot>
-  </li>
-</template>
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'cube-checker-item'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      option: {
-        type: Object,
-        default() {
-          /* istanbul ignore next */
-          return {}
-        }
-      }
-    },
-    computed: {
-      isActive() {
-        const isRadio = this.$parent.isRadio
-        const currentValue = this.$parent.currentValue
-        const value = this.option.value
-        return isRadio ? currentValue === value : currentValue.indexOf(value) >= 0
-      }
-    },
-    methods: {
-      clickHandler() {
-        this.$parent.check(this.option)
-      }
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-  .cube-checker-item
-    display: inline-block
-    vertical-align: top
-    text-align: center
-    padding: 8px 10px
-    margin-right: 10px
-    color: $checker-item-color
-    background: $checker-item-bgc
-    border-radius: 4px
-    border-1px($checker-item-bdc, 4px)
-  .cube-checker-item_active
-    color: $checker-item-active-color
-    background: $checker-item-active-bgc
-    border-1px($checker-item-active-bdc, 4px)
-
-</style>

src/components/checker/checker.vue

@@ -1,91 +0,0 @@
-<template>
-  <ul class="cube-checker">
-    <slot>
-      <cube-checker-item
-        v-for="(option, index) in options"
-        :option="option"
-        :key="index" />
-    </slot>
-  </ul>
-</template>
-<script type="text/ecmascript-6">
-  import CubeCheckerItem from './checker-item.vue'
-  const COMPONENT_NAME = 'cube-checker'
-  const EVENT_INPUT = 'input'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      value: [String, Number, Array],
-      options: {
-        type: Array,
-        default() {
-          /* istanbul ignore next */
-          return []
-        }
-      },
-      type: {
-        type: String,
-        default: 'checkbox'
-      },
-      min: {
-        type: Number,
-        default: 0
-      },
-      max: {
-        type: Number,
-        default() {
-          return this.options.length
-        }
-      }
-    },
-    data () {
-      return {
-        currentValue: this.value
-      }
-    },
-    computed: {
-      isRadio() {
-        return this.type === 'radio'
-      }
-    },
-    watch: {
-      value (newValue) {
-        this.currentValue = newValue
-      },
-      currentValue (val) {
-        this.$emit(EVENT_INPUT, val)
-      }
-    },
-    methods: {
-      check(option) {
-        if (this.isRadio) {
-          this.checkRadio(option)
-        } else {
-          this.checkCheckbox(option)
-        }
-      },
-      checkRadio(option) {
-        this.currentValue = option.value
-      },
-      checkCheckbox(option) {
-        const value = option.value
-        const currentValue = this.currentValue
-        const valueLen = currentValue.length
-        const min = this.min
-        const max = this.max
-
-        const index = currentValue.indexOf(value)
-
-        if (index > -1) {
-          (valueLen > min) && currentValue.splice(index, 1)
-        } else {
-          (valueLen < max) && currentValue.push(value)
-        }
-      }
-    },
-    components: {
-      CubeCheckerItem
-    }
-  }
-</script>

src/components/cube-button-group.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="cube-btn-group" :class="direction"><slot></slot></div>
-</template>
-
-<script>
-  export default {
-    props: {
-      direction: {
-        type: String,
-        default: 'column'
-      }
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  .cube-btn-group
-    > button
-      margin: 10px 0
-    &.row > button
-      display: inline-block
-      width: auto
-      margin: 10px 5px
-      &:first-child
-        margin-left: 0
-      &:last-child
-        margin-right: 0
-</style>

src/components/cube-page.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="cube-page" :class="type">
-    <header class="header">
-      <h1>{{title}}</h1>
-      <i @click="back" class="cubeic-back"></i>
-    </header>
-    <div class="wrapper">
-      <section v-show="desc" class="desc"><slot name="desc">{{desc}}</slot></section>
-      <main class="content">
-        <slot name="content">{{content}}</slot>
-      </main>
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  export default {
-    props: {
-      title: {
-        type: String,
-        default: '',
-        required: true
-      },
-      type: {
-        type: String,
-        default: ''
-      },
-      desc: {
-        type: String,
-        default: ''
-      },
-      content: {
-        type: String,
-        default: ''
-      }
-    },
-    methods: {
-      back() {
-        this.$router.back()
-      }
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @import "~@/common/stylus/variable.styl"
-
-  .cube-page
-    position: absolute
-    z-index: 10
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    background: #efeff4
-    .header
-      position: relative
-      height: 44px
-      line-height: 44px
-      text-align: center
-      background-color: #edf0f4
-      box-shadow: 0 1px 6px #ccc
-      -webkit-backface-visibility: hidden
-      backface-visibility: hidden
-      z-index: 5
-      h1
-        font-size: 16px
-        font-weight: 700
-      .cubeic-back
-        position: absolute
-        top: 0
-        left: 0
-        padding: 0 15px
-        color: #fc9153
-    >.wrapper
-      height: calc(100% - 44px)
-      overflow-x: hidden
-      overflow-y: auto
-      // -webkit-overflow-scrolling: touch
-      .desc
-        padding: 10px
-        margin: 10px 0
-        line-height: 20px
-        font-size: 14px
-      .content
-        margin: 10px
-
-    &.option-demo
-      .wrapper
-        background-color: $color-white
-      .title
-        font-size: $fontsize-large
-        font-weight: 500
-        color: $color-dark-grey
-        padding: 15px
-        border-bottom: 1px solid rgba(0, 0, 0, .1)
-        margin-bottom: 15px
-      .options
-        margin-bottom: 15px
-      .option-list
-        .group
-          margin-bottom: 15px
-          border: 1px solid rgba(0, 0, 0, .1)
-          border-radius: $radius-size-medium
-        .item
-          height: 52px
-          border-bottom: 1px solid rgba(0, 0, 0, .1)
-          &.sub
-            font-size: $fontsize-medium
-            background-color: $color-light-grey-opacity
-            &.first
-              box-shadow: 0 1px 1px 1px #eee inset
-            &.last
-              border-bottom: none
-      .demo
-        margin-bottom: 15px
-      .methods
-        .method-list
-          .group
-            margin-bottom: 15px
-            border: 1px solid rgba(0, 0, 0, .1)
-            border-radius: $radius-size-medium
-          .item
-          button
-            height: 40px
-            font-size: $fontsize-large
-          .item
-            background-color: $color-active-light-gray
-            border-bottom: 1px solid rgba(0, 0, 0, .1)
-          button
-            width: 100%
-            border-bottom-left-radius: $radius-size-medium
-            border-bottom-right-radius: $radius-size-medium
-            background-color: $color-orange
-            box-shadow: 0 0 0 1px $color-orange
-            border: none
-            outline: none
-            color: $color-white
-</style>

src/components/cube-view.vue

@@ -1,16 +0,0 @@
-<template>
-  <transition name="page-move">
-    <router-view class="cube-view"></router-view>
-  </transition>
-</template>
-
-<script type="text/ecmascript-6">
-  export default {}
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  .page-move-enter, .page-move-leave-active
-    transform: translate(100%, 0)
-  .page-move-enter-active, .page-move-leave-active
-    transition: transform .3s
-</style>

src/components/date-picker.vue

@@ -1,99 +0,0 @@
-<template>
-  <cube-cascade-picker
-    ref="cascadePicker"
-    title="Date Picker"
-    :data="data"
-    :selectedIndex="selectedIndex"
-    @select="select"
-    @cancel="cancel">
-  </cube-cascade-picker>
-</template>
-
-<script>
-  const COMPONENT_NAME = 'date-picker'
-  const EVENT_SELECT = 'select'
-  const EVENT_CANCEL = 'cancel'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      min: {
-        type: Array,
-        default() {
-          return [2010, 2, 1]
-        }
-      },
-      max: {
-        type: Array,
-        default() {
-          return [2020, 2, 1]
-        }
-      },
-      selectedIndex: {
-        type: Array,
-        default() {
-          return [0, 0, 0]
-        }
-      }
-    },
-    data() {
-      return {
-      }
-    },
-    computed: {
-      data() {
-        let data = range(this.min[0], this.max[0], false, '年')
-
-        data.forEach(year => {
-          let minMonth = year.value === this.min[0] ? this.min[1] : 1
-          let maxMonth = year.value === this.max[0] ? this.max[1] : 12
-
-          year.children = range(minMonth, maxMonth, false, '月')
-          year.children.forEach(month => {
-            let day = 30
-            if ([1, 3, 5, 7, 8, 10, 12].indexOf(month.value) > -1) {
-              day = 31
-            } else {
-              if (month.value === 2) {
-                day = !(year.value % 400) || (!(year.value % 4) && year.value % 100) ? 29 : 28
-              }
-            }
-
-            let minDay = year.value === this.min[0] && month.value === this.min[1] ? this.min[2] : 1
-            let maxDay = year.value === this.max[0] && month.value === this.max[1] ? this.max[2] : day
-
-            month.children = range(minDay, maxDay, false, '日')
-          })
-        })
-
-        return data
-      }
-    },
-    methods: {
-      show() {
-        this.$refs.cascadePicker.show()
-      },
-      hide() {
-        this.$refs.cascadePicker.hide()
-      },
-      select(selectedVal, selectedIndex, selectedText) {
-        this.$emit(EVENT_SELECT, selectedVal, selectedIndex, selectedText)
-      },
-      cancel() {
-        this.$emit(EVENT_CANCEL)
-      }
-    }
-  }
-
-  function range(n, m, polyfill = false, unit = '') {
-    let arr = []
-    for (let i = n; i <= m; i++) {
-      let value = (polyfill && i < 10 ? '0' + i : i) + unit
-      arr.push({
-        text: value,
-        value: i
-      })
-    }
-    return arr
-  }
-</script>

src/components/date-picker/date-picker.vue

@@ -1,246 +0,0 @@
-<template>
-  <cube-cascade-picker
-    v-model="isVisible"
-    :data="data"
-    :selected-index="selectedIndex"
-    :title="title"
-    :subtitle="subtitle"
-    :cancel-txt="_cancelTxt"
-    :confirm-txt="_confirmTxt"
-    :swipe-time="swipeTime"
-    :z-index="zIndex"
-    :mask-closable="maskClosable"
-    @select="_select"
-    @cancel="_cancel"
-    @change="_change">
-  </cube-cascade-picker>
-</template>
-
-<script>
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-  import pickerMixin from '../../common/mixins/picker'
-  import localeMixin from '../../common/mixins/locale'
-  import { deepAssign, findIndex } from '../../common/helpers/util'
-  import { computeNatureMaxDay, formatType } from '../../common/lang/date'
-
-  const COMPONENT_NAME = 'cube-date-picker'
-  const EVENT_SELECT = 'select'
-  const EVENT_CANCEL = 'cancel'
-  const EVENT_CHANGE = 'change'
-
-  const TYPE_LIST = ['year', 'month', 'date', 'hour', 'minute', 'second']
-  const NATURE_BOUNDARY_MAP = {
-    month: {
-      natureMin: 1,
-      natureMax: 12
-    },
-    date: {
-      natureMin: 1,
-      natureMax: 31
-    },
-    hour: {
-      natureMin: 0,
-      natureMax: 23
-    },
-    minute: {
-      natureMin: 0,
-      natureMax: 59
-    },
-    second: {
-      natureMin: 0,
-      natureMax: 59
-    }
-  }
-
-  const DEFAULT_FORMAT = {
-    year: 'YYYY',
-    month: 'M',
-    date: 'D',
-    hour: 'hh',
-    minute: 'mm',
-    second: 'ss'
-  }
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin, pickerMixin, localeMixin],
-    props: {
-      min: {
-        type: [Date, Array],
-        default() {
-          return new Date(2010, 1, 1)
-        }
-      },
-      max: {
-        type: [Date, Array],
-        default() {
-          return new Date(2020, 12, 31)
-        }
-      },
-      startColumn: {
-        type: String,
-        default() {
-          return 'year'
-        }
-      },
-      columnCount: {
-        type: Number,
-        default: 3
-      },
-      format: {
-        type: Object,
-        default() {
-          return {}
-        }
-      },
-      value: {
-        type: [Date, Array],
-        default() {
-          return this.min
-        }
-      }
-    },
-    computed: {
-      formatConfig() {
-        const formatConfig = Object.assign({}, DEFAULT_FORMAT)
-        deepAssign(formatConfig, this.format)
-
-        return formatConfig
-      },
-      natureRangeCache() {
-        const natureRangeCache = {
-          hour: [],
-          minute: [],
-          second: []
-        }
-
-        Object.keys(natureRangeCache).forEach((key) => {
-          natureRangeCache[key] = this._range(key, NATURE_BOUNDARY_MAP[key].natureMin, NATURE_BOUNDARY_MAP[key].natureMax)
-        })
-
-        return natureRangeCache
-      },
-      startIndex() {
-        const startIndex = TYPE_LIST.indexOf(this.startColumn)
-        return startIndex < 0 ? 0 : startIndex
-      },
-      minArray() {
-        return this.min instanceof Date
-                ? dateToArray(this.min).slice(this.startIndex, this.startIndex + this.columnCount)
-                : this.min
-      },
-      maxArray() {
-        return this.max instanceof Date
-                ? dateToArray(this.max).slice(this.startIndex, this.startIndex + this.columnCount)
-                : this.max
-      },
-      valueArray() {
-        return this.value instanceof Date
-                ? dateToArray(this.value).slice(this.startIndex, this.startIndex + this.columnCount)
-                : this.value
-      },
-      data() {
-        const data = []
-        this._generateData(this.startIndex, 0, data)
-        return data
-      },
-      selectedIndex() {
-        const selectedIndex = []
-        let data = this.data
-        let index
-
-        for (let i = 0; i < this.columnCount && i < 6 - this.startIndex; i++) {
-          index = findIndex(data, (item) => {
-            return this.valueArray[i] && item.value === this.valueArray[i]
-          })
-          selectedIndex[i] = index !== -1 ? index : 0
-          data = data[selectedIndex[i]] && data[selectedIndex[i]].children
-        }
-
-        return selectedIndex
-      }
-    },
-    methods: {
-      _select(selectedVal, selectedIndex, selectedText) {
-        this.$emit(EVENT_SELECT, this._arrayToDate(selectedVal), selectedVal, selectedText)
-      },
-      _cancel() {
-        this.$emit(EVENT_CANCEL)
-      },
-      _change(i, newIndex) {
-        this.$emit(EVENT_CHANGE, i, newIndex)
-      },
-      _generateData(i, count, item) {
-        if (count === 0) {
-          const min = i === 0 ? this.minArray[0] : Math.max(this.minArray[0], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin)
-          const max = i === 0 ? this.maxArray[0] : Math.min(this.maxArray[0], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMax)
-          item.push.apply(item, this._range(TYPE_LIST[i], min, max, true, true))
-        } else {
-          if (i < 3 || item.isMin || item.isMax) {
-            const natureMax = i === 2 ? computeNatureMaxDay(item.value, item.year) : NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMax
-            const min = item.isMin ? Math.max(this.minArray[count], NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin) : NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin
-            const max = item.isMax ? Math.min(this.maxArray[count], natureMax) : natureMax
-
-            const storageYear = i === 1 && this.startIndex === 0 && this.columnCount >= 3 && item.value
-            item.children = this._range(TYPE_LIST[i], min, max, item.isMin, item.isMax, storageYear)
-          } else {
-            item.children = this.natureRangeCache[TYPE_LIST[i]]
-          }
-        }
-        if (count < this.columnCount - 1 && i < 5) {
-          (item.children || item).forEach(subItem => {
-            (!subItem.children || subItem.isMin || subItem.isMax) && this._generateData(i + 1, count + 1, subItem)
-          })
-        }
-      },
-      _arrayToDate(selectedVal) {
-        const args = []
-        const defaultDateArray = dateToArray(new Date(0))
-
-        for (let i = 0; i < 6; i++) {
-          if (i < this.startIndex) {
-            args[i] = defaultDateArray[i]
-          } else if (i >= this.startIndex + this.columnCount) {
-            args[i] = NATURE_BOUNDARY_MAP[TYPE_LIST[i]].natureMin
-          } else {
-            args[i] = selectedVal[i - this.startIndex]
-          }
-        }
-        // Month need to subtract 1.
-        args[1]--
-
-        return new Date(...args)
-      },
-      _range(type, min, max, fatherIsMin, fatherIsMax, year = 0) {
-        if (!this._rangeCache) {
-          this._rangeCache = {}
-        }
-        const k = type + year + min + max + fatherIsMin + fatherIsMax
-        if (this._rangeCache[k]) {
-          return this._rangeCache[k]
-        }
-        const arr = []
-        const format = this.formatConfig[type]
-        for (let i = min; i <= max; i++) {
-          const object = {
-            text: formatType(type, format, i, 'i'),
-            value: i
-          }
-
-          if (fatherIsMin && i === min) object.isMin = true
-          if (fatherIsMax && i === max) object.isMax = true
-          if (year) object.year = year
-
-          arr.push(object)
-        }
-        this._rangeCache[k] = arr
-        return arr
-      }
-    }
-  }
-
-  function dateToArray(date) {
-    return [date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()]
-  }
-</script>

src/components/dialog/dialog.vue

@@ -1,310 +0,0 @@
-<template>
-  <transition name="cube-dialog-fade">
-    <cube-popup
-      type="dialog"
-      :z-index="zIndex"
-      :mask="true"
-      :center="true"
-      v-show="isVisible"
-      @mask-click="maskClick"
-      >
-      <div class="cube-dialog-main">
-        <span class="cube-dialog-close" v-show="showClose" @click="close"><i class="cubeic-close"></i></span>
-        <div :class="containerClass">
-          <p class="cube-dialog-icon" v-if="icon"><i :class="icon"></i></p>
-          <h2 v-if="title || $slots.title" class="cube-dialog-title">
-            <slot name="title">
-              <p class="cube-dialog-title-def">{{title}}</p>
-            </slot>
-          </h2>
-          <div class="cube-dialog-content">
-            <slot name="content">
-              <div class="cube-dialog-content-def">
-                <p v-html="content" v-if="content"></p>
-                <cube-input v-bind="prompt" v-model="promptValue" v-if="isPrompt" />
-              </div>
-            </slot>
-          </div>
-          <div class="cube-dialog-btns" :class="{'border-right-1px': isConfirm || isPrompt}">
-            <slot name="btns">
-              <a :href="_cancelBtn.href" class="cube-dialog-btn border-top-1px" :class="{'cube-dialog-btn_highlight': _cancelBtn.active, 'cube-dialog-btn_disabled': _cancelBtn.disabled}" v-if="isConfirm || isPrompt" @click="cancel">{{_cancelBtn.text}}</a>
-              <a :href="_confirmBtn.href" class="cube-dialog-btn border-top-1px" :class="{'cube-dialog-btn_highlight': _confirmBtn.active, 'cube-dialog-btn_disabled': _confirmBtn.disabled}" @click="confirm">{{_confirmBtn.text}}</a>
-            </slot>
-          </div>
-        </div>
-      </div>
-    </cube-popup>
-  </transition>
-</template>
-
-<script type="text/ecmascript-6">
-  import CubePopup from '../popup/popup.vue'
-  import CubeInput from '../input/input.vue'
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-  import localeMixin from '../../common/mixins/locale'
-
-  const COMPONENT_NAME = 'cube-dialog'
-  const EVENT_CONFIRM = 'confirm'
-  const EVENT_CANCEL = 'cancel'
-  const EVENT_CLOSE = 'close'
-
-  const defHref = 'javascript:;'
-  const defConfirmBtn = {
-    textType: 'ok',
-    active: true,
-    disabled: false,
-    href: defHref
-  }
-  const defCancelBtn = {
-    textType: 'cancel',
-    active: false,
-    disabled: false,
-    href: defHref
-  }
-  const parseBtn = function (btn, defBtn) {
-    if (typeof btn === 'string') {
-      btn = {
-        text: btn
-      }
-    }
-    const text = defBtn && this.$t(defBtn.textType)
-    return Object.assign({}, defBtn, { text }, btn)
-  }
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin, localeMixin],
-    props: {
-      type: {
-        type: String,
-        default: 'alert'
-      },
-      prompt: {
-        type: Object,
-        default() {
-          return {
-            value: '',
-            placeholder: ''
-          }
-        }
-      },
-      icon: {
-        type: String,
-        default: ''
-      },
-      title: {
-        type: String,
-        default: ''
-      },
-      content: {
-        type: String,
-        default: ''
-      },
-      showClose: {
-        type: Boolean,
-        default: false
-      },
-      confirmBtn: {
-        type: [Object, String],
-        default() {
-          return {
-            ...defConfirmBtn
-          }
-        }
-      },
-      cancelBtn: {
-        type: [Object, String],
-        default() {
-          return {
-            ...defCancelBtn
-          }
-        }
-      }
-    },
-    data() {
-      return {
-        defHref,
-        promptValue: this.prompt.value
-      }
-    },
-    computed: {
-      _confirmBtn() {
-        return parseBtn.call(this, this.confirmBtn, defConfirmBtn)
-      },
-      _cancelBtn() {
-        return parseBtn.call(this, this.cancelBtn, defCancelBtn)
-      },
-      isConfirm() {
-        return this.type === 'confirm'
-      },
-      isPrompt() {
-        return this.type === 'prompt'
-      },
-      containerClass() {
-        return `cube-dialog-${this.type}`
-      }
-    },
-    watch: {
-      'prompt.value': {
-        handler: function (newVal) {
-          this.promptValue = newVal
-        }
-      }
-    },
-    methods: {
-      maskClick(e) {
-        this.maskClosable && this.cancel(e)
-      },
-      confirm(e) {
-        if (this._confirmBtn.disabled) {
-          return
-        }
-        this.hide()
-        this.$emit(EVENT_CONFIRM, e, this.promptValue)
-      },
-      cancel(e) {
-        if (this._cancelBtn.disabled) {
-          return
-        }
-        this.hide()
-        this.$emit(EVENT_CANCEL, e)
-      },
-      close(e) {
-        this.hide()
-        this.$emit(EVENT_CLOSE, e)
-      }
-    },
-    components: {
-      CubePopup,
-      CubeInput
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-dialog-main
-    width: 270px
-    padding: 0
-    text-align: center
-    overflow: hidden
-    border-radius: 2px
-    background-color: $dialog-bgc
-  .cube-dialog-confirm, .cube-dialog-alert
-    position: relative
-    overflow: hidden
-  .cube-dialog-icon
-    margin-top: 20px
-    margin-bottom: 16px
-    line-height: 1
-    color: $dialog-icon-color
-    font-size: $fontsize-large-xxxx
-    i
-      display: inline-block
-      width: 30px
-      height: 30px
-      padding: 10px
-      box-sizing: content-box
-      border-radius: 50%
-      background-color: $dialog-icon-bgc
-    +
-      .cube-dialog-title
-        .cube-dialog-title-def
-          margin-top: 0
-    +
-      .cube-dialog-content
-        margin-top: -4px
-  .cube-dialog-title
-    color: $dialog-title-color
-    font-size: $fontsize-large
-    line-height: 1
-    +
-      .cube-dialog-content
-        margin-top: 12px
-  .cube-dialog-title-def
-    margin: 30px 16px 0
-    overflow: hidden
-    white-space: nowrap
-  .cube-dialog-content
-    margin: 16px 0
-    text-align: left
-    color: $dialog-color
-    font-size: $fontsize-medium
-    line-height: 22px
-  .cube-dialog-content-def
-    padding: 0 16px
-    > p
-      display: table
-      margin: auto
-      + .cube-input
-        margin-top: 12px
-  .cube-dialog-confirm, .cube-dialog-prompt
-    .cube-dialog-btns
-      .cube-dialog-btn
-        width: 50%
-        float: left
-      &.border-right-1px
-        &::after
-          right: 50%
-          border-color: $dialog-btns-split-color
-  .cube-dialog-close
-    display: flex
-    align-items: center
-    justify-content: center
-    z-index: 1
-    position: absolute
-    top: 0
-    right: 0
-    width: 32px
-    height: 32px
-    color: $dialog-close-color
-    font-size: $fontsize-large-x
-  .cube-dialog-btns
-    overflow: hidden
-    width: 100%
-    font-size: 0
-  .cube-dialog-btn
-    display: inline-block
-    width: 100%
-    padding: 17px 10px
-    margin: 0
-    font-size: $fontsize-large
-    line-height: 1
-    text-align: center
-    text-decoration: none
-    color: $dialog-btn-color
-    background-color: $dialog-btn-bgc
-    background-clip: padding-box
-    box-sizing: border-box
-    &:active
-      background-color: $dialog-btn-active-bgc
-  .cube-dialog-btn_highlight
-    color: $dialog-btn-highlight-color
-    &:active
-      background-color: $dialog-btn-highlight-active-bgc
-  .cube-dialog-btn_disabled
-    color: $dialog-btn-disabled-color
-    &:active
-      background-color: $dialog-btn-disabled-active-bgc
-
-  .cube-dialog-fade-enter-active
-    animation: dialog-fadein .4s
-    .cube-dialog-main
-      animation: dialog-zoom .4s
-
-  @keyframes dialog-fadein
-    0%
-      opacity: 0
-    100%
-      opacity: 1
-  @keyframes dialog-zoom
-    0%
-      transform: scale(0)
-    50%
-      transform: scale(1.1)
-    100%
-      transform: scale(1)
-</style>

src/components/drawer/drawer-item.vue

@@ -1,61 +0,0 @@
-<template>
-  <li
-    class="cube-drawer-item border-bottom-1px"
-    :class="itemClass"
-    @click="clickItem(item)"
-  >
-    <slot>
-      {{item.text || item}}
-    </slot>
-  </li>
-</template>
-
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'cube-drawer-item'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      item: {
-        type: [String, Object],
-        default: ''
-      },
-      index: {
-        type: Number,
-        default: -1
-      }
-    },
-    computed: {
-      itemClass() {
-        return this.$parent.$parent.selectedIndex === this.index ? 'cube-drawer-item_active' : ''
-      }
-    },
-    methods: {
-      clickItem(item) {
-        this.$parent.$parent.itemClickHandler(item, this.index)
-      }
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-drawer-item
-    padding: 0 20px
-    height: 50px
-    line-height: 50px
-    white-space: nowrap
-    overflow: hidden
-    font-size: 15px
-    &::after
-      left: 20px
-    &:last-child
-      &::after
-        display: none
-    &:first-child
-      &::after
-        display: block
-  .cube-drawer-item_active
-    background: $drawer-item-active-bgc
-</style>

src/components/drawer/drawer-panel.vue

@@ -1,108 +0,0 @@
-<template>
-  <transition name="cube-drawer-move">
-    <div class="cube-drawer-panel" v-show="isVisible">
-      <div class="cube-drawer-scroll-wrapper">
-        <cube-scroll ref="scroll" :data="data">
-          <ul class="cube-drawer-list">
-            <slot>
-              <cube-drawer-item v-for="(item, i) in data" :item="item" :key="i" :index="i" />
-            </slot>
-          </ul>
-        </cube-scroll>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script type="text/ecmascript-6">
-  import visibilityMixin from '../../common/mixins/visibility'
-  import CubeScroll from '../scroll/scroll.vue'
-  import CubeDrawerItem from './drawer-item.vue'
-
-  const COMPONENT_NAME = 'cube-drawer-panel'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin],
-    props: {
-      data: {
-        type: Array,
-        default() {
-          /* istanbul ignore next */
-          return []
-        }
-      },
-      index: {
-        type: Number,
-        default: -1
-      }
-    },
-    computed: {
-      selectedIndex() {
-        const selectedIndex = this.$parent.selected[this.index]
-        return selectedIndex === undefined ? -1 : selectedIndex
-      }
-    },
-    watch: {
-      data() {
-        this.scrollToTop()
-      },
-      isVisible() {
-        this.$nextTick(() => {
-          this.refresh()
-        })
-      }
-    },
-    mounted() {
-      this.$parent.addPanel(this)
-    },
-    beforeDestroy() {
-      this.$parent.removePanel(this)
-    },
-    methods: {
-      refresh() {
-        this.$refs.scroll.refresh()
-      },
-      scrollToTop() {
-        this.$refs.scroll.scroll && this.$refs.scroll.scroll.scrollTo(0, 0, 0)
-      },
-      itemClickHandler(item, index) {
-        if (this.selectedIndex !== index) {
-          this.$parent.changeHandler(this.index, item, index)
-        }
-      }
-    },
-    components: {
-      CubeScroll,
-      CubeDrawerItem
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-drawer-panel
-    position: relative
-    z-index: 1
-    flex: 1
-    width: 170px
-    overflow: hidden
-    background-color: $drawer-panel-bgc
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
-    + .cube-drawer-panel
-      margin-left: -67px
-    &:first-child
-      box-shadow: none
-  .cube-drawer-scroll-wrapper // fix flex item height: 100% bug in android
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-
-  .cube-drawer-move-enter, .cube-drawer-move-leave-to
-    transform: translate(67px, 0)
-  .cube-drawer-move-enter-active, .cube-drawer-move-leave-active
-    transition: transform .3s ease-in-out
-</style>

src/components/drawer/drawer.vue

@@ -1,226 +0,0 @@
-<template>
-  <div class="cube-drawer" @click="drawerClick" v-show="isVisible">
-    <div class="cube-drawer-main" :style="slideStyle" @click.stop @transitionend="transitionend">
-      <div class="cube-drawer-title" v-show="$slots.title || title">
-        <slot name="title">{{title}}</slot>
-      </div>
-      <div class="cube-drawer-panels" @transitionend.stop>
-        <slot>
-          <cube-drawer-panel
-            v-for="(panel, index) in data"
-            :key="index"
-            :index="index"
-            :data="panel" />
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  import { prefixStyle } from '../../common/helpers/dom'
-  import CubeDrawerPanel from './drawer-panel.vue'
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-
-  const COMPONENT_NAME = 'cube-drawer'
-  const EVENT_CHANGE = 'change'
-  const EVENT_SELECT = 'select'
-  const EVENT_CANCEL = 'cancel'
-
-  const transform = prefixStyle('transform')
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin],
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      data: {
-        type: Array,
-        default() {
-          /* istanbul ignore next */
-          return []
-        }
-      },
-      selectedIndex: {
-        type: Array,
-        default() {
-          /* istanbul ignore next */
-          return []
-        }
-      }
-    },
-    data() {
-      return {
-        index: -1,
-        selectedVal: [],
-        selectedText: [],
-        selected: [...this.selectedIndex],
-        slideStyle: {
-          [transform]: 'translate3d(0, 0, 0)'
-        }
-      }
-    },
-    watch: {
-      selectedIndex(newVal) {
-        this.selected = [...newVal]
-      },
-      index(newIndex, oldIndex) {
-        this.showPanel()
-        if (newIndex < oldIndex) {
-          this.hidePanel()
-        }
-      }
-    },
-    created() {
-      this.panels = []
-    },
-    methods: {
-      show() {
-        if (this.isVisible) {
-          return
-        }
-        this.isVisible = true
-
-        let len = this.data.length
-        for (let i = 0; i < len; i++) {
-          this.index = i
-          if (this.selected[i] < 0 || this.selected[i] === undefined) {
-            if (i > 0) {
-              const lastIndex = i - 1
-              const index = this.selected[lastIndex]
-              this.changeHandler(lastIndex, this.data[lastIndex][index], index)
-            }
-            break
-          }
-        }
-        this.computedStyle()
-      },
-      hide() {
-        this.slideStyle[transform] = 'translate3d(0, 0, 0)'
-        this.shouldHide = true
-      },
-      addPanel(panel) {
-        this.panels.push(panel)
-      },
-      removePanel(panel) {
-        const i = this.panels.indexOf(panel)
-        this.panels.splice(i, 1)
-      },
-      transitionend() {
-        if (this.shouldHide) {
-          this.isVisible = false
-          this.shouldHide = false
-        }
-      },
-      refill(panelIndex, data, index) {
-        this.$set(this.data, panelIndex, data)
-        this.index = panelIndex
-        this.selected = this.selected.slice(0, panelIndex)
-        this.selectedVal = this.selectedVal.slice(0, panelIndex)
-        this.selectedText = this.selectedText.slice(0, panelIndex)
-        if (index >= 0) {
-          this.$set(this.selected, panelIndex, index)
-          this.changeHandler(panelIndex, this.data[panelIndex][index], index)
-        }
-      },
-      showPanel() {
-        const index = this.index
-        let i = 0
-        while (i <= index) {
-          this.panels[i].show()
-          i++
-        }
-        this.computedStyle()
-      },
-      hidePanel() {
-        const len = this.data.length
-        let i = this.index + 1
-        while (i < len) {
-          this.panels[i].hide()
-          i++
-        }
-      },
-      computedStyle() {
-        this.$nextTick(() => {
-          let allWidth = 0
-          let i = 0
-          const index = this.index
-          while (i <= index) {
-            const el = this.panels[i].$el
-            allWidth += el.offsetWidth
-            const elStyle = window.getComputedStyle(el)
-            allWidth += parseInt(elStyle.marginLeft)
-            allWidth += parseInt(elStyle.marginRight)
-            i++
-          }
-          this.slideStyle[transform] = `translate3d(-${allWidth}px, 0, 0)`
-        })
-      },
-      changeHandler(panelIndex, item, index) {
-        if (typeof item === 'string') {
-          this.selectedVal[panelIndex] = item
-          this.selectedText[panelIndex] = item
-        } else {
-          this.selectedVal[panelIndex] = item.value
-          this.selectedText[panelIndex] = item.text
-        }
-        this.$set(this.selected, panelIndex, index)
-        if (panelIndex === (this.data.length - 1)) {
-          // last column
-          this.$emit(EVENT_SELECT, this.selectedVal, this.selected, this.selectedText)
-          this.hide()
-        } else {
-          this.$emit(EVENT_CHANGE, panelIndex, item, this.selectedVal, this.selected, this.selectedText)
-        }
-      },
-      drawerClick() {
-        this.hide()
-        this.$emit(EVENT_CANCEL)
-      }
-    },
-    components: {
-      CubeDrawerPanel
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-drawer
-    position: absolute
-    z-index: 5
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    overflow: hidden
-    color: $drawer-color
-  .cube-drawer-main
-    position: absolute
-    top: 0
-    left: 100%
-    bottom: 0
-    max-width: 90%
-    display: flex
-    flex-direction: column
-    overflow: hidden
-    transform: translate3d(0, 0, 0)
-    transition: transform .3s ease-in-out
-    box-shadow: -2px 0 2px rgba(0, 0, 0, .2)
-  .cube-drawer-title
-    position: relative
-    padding: 0 20px
-    height: 50px
-    line-height: 50px
-    border-bottom: 1px solid $drawer-title-bdc
-    font-size: $fontsize-large
-    background-color: $drawer-title-bgc
-  .cube-drawer-panels
-    display: flex
-    flex: 1
-</style>

src/components/extend-popup.vue

@@ -1,34 +0,0 @@
-<template>
-  <cube-popup type="extend-popup" ref="popup">
-    <div class="cube-extend-popup-content" @click="hide">
-      <slot>{{content}}</slot>
-    </div>
- </cube-popup>
-</template>
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'cube-extend-popup'
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      content: {
-        type: String
-      }
-    },
-    methods: {
-      show() {
-        this.$refs.popup.show()
-      },
-      hide() {
-        this.$refs.popup.hide()
-        this.$emit('hide')
-      }
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  .cube-extend-popup
-    .cube-extend-popup-content
-      padding: 20px
-      color: #fff
-      background-color: rgba(0, 0, 0, .8)
-</style>

src/components/form/components.js

@@ -1,34 +0,0 @@
-import CubeButton from '../button/button.vue'
-import CubeCheckbox from '../checkbox/checkbox.vue'
-import CubeCheckboxGroup from '../checkbox-group/checkbox-group.vue'
-import CubeChecker from '../checker/checker.vue'
-import CubeInput from '../input/input.vue'
-import CubeRadio from '../radio/radio.vue'
-import CubeRadioGroup from '../radio/radio-group.vue'
-import CubeRate from '../rate/rate.vue'
-import CubeSelect from '../select/select.vue'
-import CubeSwitch from '../switch/switch.vue'
-import CubeTextarea from '../textarea/textarea.vue'
-import CubeUpload from '../upload/upload.vue'
-
-const allComponents = [
-  CubeButton,
-  CubeCheckbox,
-  CubeCheckboxGroup,
-  CubeChecker,
-  CubeInput,
-  CubeRadio,
-  CubeRadioGroup,
-  CubeRate,
-  CubeSelect,
-  CubeSwitch,
-  CubeTextarea,
-  CubeUpload
-]
-
-const components = {}
-allComponents.forEach((Component) => {
-  components[Component.name] = Component
-})
-
-export default components

src/components/form/fields/index.js

@@ -1,11 +0,0 @@
-import processTypes from './types'
-
-function processField(field) {
-  const _field = {
-    ...field
-  }
-  processTypes(_field)
-  return _field
-}
-
-export { processField }

src/components/form/fields/props.js

@@ -1,11 +0,0 @@
-const toButtonHandler = (field, type) => {
-  field.type = 'button'
-  if (!field.props) {
-    field.props = {}
-  }
-  field.props.type = type
-}
-
-export {
-  toButtonHandler
-}

src/components/form/fields/reset.js

@@ -1,18 +0,0 @@
-const typesResetMap = {
-  checkbox() {
-    /* istanbul ignore next */
-    return false
-  },
-  select() {
-    /* istanbul ignore next */
-    return null
-  }
-}
-function getResetValueByType(type) {
-  const resetHandler = typesResetMap[type]
-  return resetHandler && resetHandler()
-}
-
-export {
-  getResetValueByType
-}

src/components/form/fields/types.js

@@ -1,31 +0,0 @@
-import {
-  boolRequiredHandler,
-  numberGT0RequiredHandler
-} from './validate'
-import {
-  toButtonHandler
-} from './props'
-
-const typesMap = {
-  submit(field) {
-    toButtonHandler(field, 'submit')
-  },
-  reset(field) {
-    toButtonHandler(field, 'reset')
-  },
-  checkbox(field) {
-    boolRequiredHandler(field)
-  },
-  switch(field) {
-    boolRequiredHandler(field)
-  },
-  rate(field) {
-    numberGT0RequiredHandler(field)
-  }
-}
-export default function processTypes(field) {
-  const typeFn = typesMap[field.type]
-  if (typeFn) {
-    typeFn(field)
-  }
-}

src/components/form/fields/validate.js

@@ -1,28 +0,0 @@
-const handleValidateRule = (field, type, custom) => {
-  const ruleValue = field.rules && field.rules[type]
-  if (type !== 'custom' && ruleValue && typeof ruleValue !== 'function') {
-    field.rules[type] = custom
-  }
-}
-const createHandler = (type) => {
-  return (field, custom) => {
-    return handleValidateRule(field, type, custom)
-  }
-}
-
-const handleRequired = createHandler('required')
-const boolRequiredHandler = (field) => {
-  return handleRequired(field, (val) => {
-    return val !== false
-  })
-}
-const numberGT0RequiredHandler = (field) => {
-  return handleRequired(field, (val) => {
-    return val > 0
-  })
-}
-
-export {
-  boolRequiredHandler,
-  numberGT0RequiredHandler
-}

src/components/form/form-group.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="cube-form-group">
-    <p class="cube-form-group-legend">{{legend}}</p>
-    <div class="cube-form-group-content">
-      <slot>
-        <cube-form-item
-          v-for="(field, index) in fields"
-          :key="index"
-          :field="field"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-  import CubeFormItem from './form-item.vue'
-
-  const COMPONENT_NAME = 'cube-form-group'
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      legend: {
-        type: String,
-        default: ''
-      },
-      fields: {
-        type: Array,
-        default() {
-          /* istanbul ignore next */
-          return []
-        }
-      }
-    },
-    beforeCreate() {
-      this.form = this.$parent.form
-    },
-    beforeDestroy() {
-      this.form = null
-    },
-    components: {
-      CubeFormItem
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-form-group
-    overflow: hidden
-  .cube-form-group-legend
-    font-size: $fontsize-medium
-    color: $form-group-legend-color
-    background-color: $form-group-legend-bgc
-</style>

src/components/form/form-item.vue

@@ -1,310 +0,0 @@
-<template>
-  <div class="cube-form-item border-bottom-1px" ref="formItem" :class="itemClass">
-    <template v-if="!isBtnField">
-      <slot name="label">
-        <div class="cube-form-label" v-show="fieldValue.label"><span>{{fieldValue.label}}</span></div>
-      </slot>
-      <cube-validator
-        class="cube-form-field"
-        v-if="hasRules"
-        ref="validator"
-        v-model="originValid"
-        :disabled="validatorDisabled"
-        :model="validatorModel"
-        :model-key="validatorModelKey"
-        :rules="fieldValue.rules"
-        :messages="fieldValue.messages"
-        @input="validatorChangeHandler"
-        @validating="validatingHandler"
-        @validated="validatedHandler"
-        @msg-click="msgClick"
-      >
-        <slot>
-          <component :is="componentName" v-model="modelValue" v-bind="fieldValue.props" v-on="fieldValue.events"></component>
-        </slot>
-      </cube-validator>
-      <div class="cube-form-field" v-else>
-        <slot>
-          <component :is="componentName" v-model="modelValue" v-bind="fieldValue.props" v-on="fieldValue.events"></component>
-        </slot>
-      </div>
-    </template>
-    <cube-button v-bind="fieldValue.props" v-else>{{fieldValue.label}}</cube-button>
-  </div>
-</template>
-
-<script>
-  import { processField } from './fields/index'
-  import { resetTypeValue, cb2PromiseWithResolve, debounce } from '../../common/helpers/util'
-  import CubeValidator from '../validator/validator.vue'
-  import LAYOUTS from './layouts'
-  import { getResetValueByType } from './fields/reset'
-  import mixin from './mixin'
-  import components from './components'
-  components.CubeValidator = CubeValidator
-
-  const COMPONENT_NAME = 'cube-form-item'
-  const EVENT_FOCUSIN = 'focusin'
-  const EVENT_FOCUSOUT = 'focusout'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [mixin],
-    props: {
-      field: {
-        type: Object,
-        default() {
-          /* istanbul ignore next */
-          return {}
-        }
-      }
-    },
-    data() {
-      const validatorModelKey = 'value'
-      const modelKey = this.field.modelKey
-      const modelValue = modelKey ? this.form.model[modelKey] : null
-      return {
-        validatorDisabled: false,
-        validatorModelKey,
-        modelValue: modelValue,
-        validatorModel: {
-          [validatorModelKey]: modelValue
-        }
-      }
-    },
-    computed: {
-      fieldValue() {
-        return processField(this.field)
-      },
-      hasRules() {
-        return Object.keys(this.fieldValue.rules || {}).length > 0
-      },
-      isBtnField() {
-        return this.fieldValue.type === 'button'
-      },
-      itemClass() {
-        const rules = this.fieldValue.rules
-        return {
-          // only handle required rule for now
-          'cube-form-item_required': rules && rules.required,
-          'cube-form-item_btn': this.isBtnField,
-          'cube-form-item_validating': this.validating,
-          'cube-form-item_pending': this.pending,
-          'cube-form-item_valid': this.valid,
-          'cube-form-item_invalid': this.invalid
-        }
-      },
-      modelVal() {
-        return this.form.model[this.fieldValue.modelKey]
-      },
-      componentName() {
-        const fieldValue = this.fieldValue
-        const component = fieldValue.component
-        if (component) {
-          return component
-        }
-        const type = fieldValue.type
-        const cubeType = `cube-${type}`
-        if (components[cubeType]) {
-          return cubeType
-        }
-        return type
-      }
-    },
-    watch: {
-      modelVal(newModel) {
-        if (this.modelValue !== newModel) {
-          this.modelValue = newModel
-        }
-      },
-      modelValue: {
-        handler(newModel) {
-          // update form model
-          this.form.model[this.fieldValue.modelKey] = newModel
-          this.updateValidatorModel()
-        },
-        sync: true
-      },
-      originValid(newVal) {
-        this.lastOriginValid = newVal
-      }
-    },
-    beforeCreate() {
-      this.form = this.$parent.form
-    },
-    created() {
-      this.form.addField(this)
-      this.getValidatorModel = (modelValue) => {
-        this.pending = false
-        return modelValue
-      }
-    },
-    mounted() {
-      this.initDebounce()
-      this.initFocusEvents()
-    },
-    methods: {
-      initDebounce() {
-        let debounceTime = this.fieldValue.debounce
-        if (debounceTime === true) {
-          debounceTime = 200
-        }
-        if ((!debounceTime && debounceTime !== 0) || debounceTime < 0 || this.fieldValue.trigger === 'blur') return
-        this.getValidatorModel = debounce((modelValue) => {
-          this.pending = false
-          this.validatorModel[this.validatorModelKey] = modelValue
-          this.form.updatePending()
-          this.validate()
-          return modelValue
-        }, debounceTime, false, this.validatorModel[this.validatorModelKey])
-      },
-      focusInHandler() {
-        this.focused = true
-      },
-      focusOutHandler() {
-        this.focused = false
-        this.updateValidatorModel()
-        this.validate()
-      },
-      initFocusEvents() {
-        if (this.fieldValue.trigger === 'blur') {
-          const formItem = this.$refs.formItem
-          formItem.addEventListener(EVENT_FOCUSIN, this.focusInHandler, false)
-          formItem.addEventListener(EVENT_FOCUSOUT, this.focusOutHandler, false)
-          this.getValidatorModel = (modelValue) => {
-            if (this.focused) {
-              return this.validatorModel[this.validatorModelKey]
-            } else {
-              this.pending = false
-              this.form.updatePending()
-              return modelValue
-            }
-          }
-        }
-      },
-      removeFocusEvents() {
-        const formItem = this.$refs.formItem
-        formItem.removeEventListener(EVENT_FOCUSIN, this.focusInHandler, false)
-        formItem.removeEventListener(EVENT_FOCUSOUT, this.focusOutHandler, false)
-      },
-      updateValidatorModel() {
-        this.pending = true
-        this.validatorModel[this.validatorModelKey] = this.getValidatorModel(this.modelValue)
-        if (this.pending) {
-          this.form.setPending(this.pending)
-          this.originValid = undefined
-        }
-      },
-      validatorChangeHandler() {
-        // disabled or true to true no update validity
-        if (this.validatorDisabled || (this.originValid && this.lastOriginValid)) {
-          return
-        }
-        this.updateValidity()
-      },
-      validatingHandler() {
-        this.validating = true
-        this.form.setValidating(true)
-      },
-      validatedHandler() {
-        this.validating = false
-        this.form.updateValidating()
-      },
-      updateValidity() {
-        const validator = this.$refs.validator
-        if (validator) {
-          // sync update validaty
-          this.form.updateValidity(this.fieldValue.modelKey, validator.valid, validator.result, validator.dirty)
-        }
-      },
-      validate(cb) {
-        const promise = cb2PromiseWithResolve(cb)
-        if (promise) {
-          cb = promise.resolve
-        }
-        const validator = this.$refs.validator
-        if (validator) {
-          validator.validate(() => {
-            this.validatorDisabled = true
-            this.updateValidity()
-            cb && cb()
-            this.$nextTick(() => {
-              this.validatorDisabled = false
-            })
-          })
-        } else {
-          cb && cb()
-        }
-        return promise
-      },
-      reset() {
-        const fieldValue = this.fieldValue
-        if (fieldValue.modelKey) {
-          const defValue = getResetValueByType(fieldValue.type)
-          this.validatorDisabled = true
-          resetTypeValue(this, 'modelValue', defValue)
-          this.$refs.validator && this.$refs.validator.reset()
-          this.$nextTick(() => {
-            this.validatorDisabled = false
-          })
-        }
-        this.validating = false
-        this.pending = false
-      },
-      msgClick() {
-        /* istanbul ignore if */
-        if (this.form.layout !== LAYOUTS.STANDARD) {
-          return
-        }
-        /* istanbul ignore next */
-        this.$createToast && this.$createToast({
-          type: 'warn',
-          txt: this.$refs.validator.msg,
-          time: 1000
-        }).show()
-      }
-    },
-    beforeDestroy() {
-      this.removeFocusEvents()
-      this.form.destroyField(this)
-      this.form = null
-    },
-    components
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-form-item
-    position: relative
-    display: flex
-    align-items: center
-    padding: 0 15px
-    &:last-child
-      &::after
-        display: none
-    .cube-checkbox-group, .cube-radio-group
-      background-color: transparent
-    .cube-checkbox, .cube-radio
-      padding-left: 0
-      padding-right: 0
-  .cube-form-item_btn
-    margin: 15px 0
-    &::after
-      display: none
-  .cube-form-label
-    display: flex
-    align-items: center
-    word-wrap: break-word
-    word-break: break-word
-  .cube-form-item_required
-    .cube-form-label
-      &::before
-        content: "*"
-        display: block
-        margin-top: 1px
-        margin-right: .3em
-        color: $form-label-required-color
-</style>

src/components/form/form.vue

@@ -1,427 +0,0 @@
-<template>
-  <form ref="form" class="cube-form" :class="formClass" :action="action" @submit="submitHandler" @reset="resetHandler">
-    <slot>
-      <cube-form-group v-for="(group, index) in groups" :fields="group.fields" :legend="group.legend" :key="index" />
-    </slot>
-  </form>
-</template>
-
-<script>
-  import { dispatchEvent } from '../../common/helpers/dom'
-  import { cb2PromiseWithResolve } from '../../common/helpers/util'
-  import CubeFormGroup from './form-group.vue'
-  import LAYOUTS from './layouts'
-  import mixin from './mixin'
-
-  const COMPONENT_NAME = 'cube-form'
-  const EVENT_SUBMIT = 'submit'
-  const EVENT_RESET = 'reset'
-  const EVENT_VALIDATE = 'validate'
-  const EVENT_VALID = 'valid'
-  const EVENT_INVALID = 'invalid'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [mixin],
-    props: {
-      action: String,
-      model: {
-        type: Object,
-        default() {
-          /* istanbul ignore next */
-          return {}
-        }
-      },
-      schema: {
-        type: Object,
-        default() {
-          /* istanbul ignore next */
-          return {}
-        }
-      },
-      options: {
-        type: Object,
-        default() {
-          return {
-            scrollToInvalidField: false,
-            layout: LAYOUTS.STANDARD
-          }
-        }
-      },
-      immediateValidate: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        validatedCount: 0,
-        dirty: false,
-        firstInvalidField: null,
-        firstInvalidFieldIndex: -1
-      }
-    },
-    computed: {
-      groups() {
-        const schema = this.schema
-        const groups = schema.groups || []
-        if (schema.fields) {
-          groups.unshift({
-            fields: schema.fields
-          })
-        }
-        return groups
-      },
-      layout() {
-        const options = this.options
-        const layout = (options && options.layout) || LAYOUTS.STANDARD
-        return layout
-      },
-      formClass() {
-        const invalid = this.invalid
-        const valid = this.valid
-        const layout = this.layout
-        return {
-          'cube-form_standard': layout === LAYOUTS.STANDARD,
-          'cube-form_groups': this.groups.length > 1,
-          'cube-form_validating': this.validating,
-          'cube-form_pending': this.pending,
-          'cube-form_valid': valid,
-          'cube-form_invalid': invalid,
-          'cube-form_classic': layout === LAYOUTS.CLASSIC,
-          'cube-form_fresh': layout === LAYOUTS.FRESH
-        }
-      }
-    },
-    watch: {
-      validatedCount() {
-        this.$emit(EVENT_VALIDATE, {
-          validity: this.validity,
-          valid: this.valid,
-          invalid: this.invalid,
-          dirty: this.dirty,
-          firstInvalidFieldIndex: this.firstInvalidFieldIndex
-        })
-      }
-    },
-    beforeCreate() {
-      this.form = this
-      this.fields = []
-      this.validity = {}
-    },
-    mounted() {
-      if (this.immediateValidate) {
-        this.validate()
-      }
-    },
-    methods: {
-      submit(skipValidate = false) {
-        this.skipValidate = skipValidate
-        dispatchEvent(this.$refs.form, 'submit')
-        this.skipValidate = false
-      },
-      reset() {
-        dispatchEvent(this.$refs.form, 'reset')
-      },
-      submitHandler(e) {
-        if (this.skipValidate) {
-          this.$emit(EVENT_SUBMIT, e, this.model)
-          return
-        }
-        const submited = (submitResult) => {
-          if (submitResult) {
-            this.$emit(EVENT_VALID, this.validity)
-            this.$emit(EVENT_SUBMIT, e, this.model)
-          } else {
-            e.preventDefault()
-            this.$emit(EVENT_INVALID, this.validity)
-          }
-        }
-        if (this.valid === undefined) {
-          this._submit(submited)
-          if (this.validating || this.pending) {
-            // async validate
-            e.preventDefault()
-          }
-        } else {
-          submited(this.valid)
-        }
-      },
-      resetHandler(e) {
-        this._reset()
-        this.$emit(EVENT_RESET, e)
-      },
-      _submit(cb) {
-        this.validate(() => {
-          if (this.invalid) {
-            if (this.options.scrollToInvalidField && this.firstInvalidField) {
-              this.firstInvalidField.$el.scrollIntoView()
-            }
-          }
-          cb && cb(this.valid)
-        })
-      },
-      _reset() {
-        this.fields.forEach((fieldComponent) => {
-          fieldComponent.reset()
-        })
-        this.setValidity()
-        this.setValidating()
-        this.setPending()
-      },
-      validate(cb) {
-        const promise = cb2PromiseWithResolve(cb)
-        if (promise) {
-          cb = promise.resolve
-        }
-        let doneCount = 0
-        const len = this.fields.length
-        this.originValid = undefined
-        this.fields.forEach((fieldComponent) => {
-          fieldComponent.validate(() => {
-            doneCount++
-            if (doneCount === len) {
-              // all done
-              cb && cb(this.valid)
-            }
-          })
-        })
-        return promise
-      },
-      updateValidating() {
-        const validating = this.fields.some((fieldComponent) => fieldComponent.validating)
-        this.setValidating(validating)
-      },
-      updatePending() {
-        const pending = this.fields.some((fieldComponent) => fieldComponent.pending)
-        this.setPending(pending)
-      },
-      setValidating(validating = false) {
-        this.validating = validating
-      },
-      setPending(pending = false) {
-        this.pending = pending
-      },
-      updateValidity(modelKey, valid, result, dirty) {
-        const curResult = this.validity[modelKey]
-        if (curResult && curResult.valid === valid && curResult.result === result && curResult.dirty === dirty) {
-          return
-        }
-        this.setValidity(modelKey, {
-          valid,
-          result,
-          dirty
-        })
-      },
-      setValidity(key, val) {
-        let validity = {}
-        if (key) {
-          Object.assign(validity, this.validity)
-          if (val === undefined) {
-            delete validity[key]
-          } else {
-            validity[key] = val
-          }
-        }
-
-        let dirty = false
-        let invalid = false
-        let valid = true
-        let firstInvalidFieldKey = ''
-        this.fields.forEach((fieldComponent) => {
-          const modelKey = fieldComponent.fieldValue.modelKey
-          if (modelKey) {
-            const retVal = validity[modelKey]
-            if (retVal) {
-              if (retVal.dirty) {
-                dirty = true
-              }
-              if (retVal.valid === false) {
-                valid = false
-              } else if (valid && !retVal.valid) {
-                valid = retVal.valid
-              }
-
-              if (!invalid && retVal.valid === false) {
-                // invalid
-                invalid = true
-                firstInvalidFieldKey = modelKey
-              }
-            } else if (fieldComponent.hasRules) {
-              if (valid) {
-                valid = undefined
-              }
-              validity[modelKey] = {
-                valid: undefined,
-                result: {},
-                dirty: false
-              }
-            }
-          }
-        })
-        this.validity = validity
-        this.dirty = dirty
-        this.originValid = valid
-        this.setFirstInvalid(firstInvalidFieldKey)
-        this.validatedCount++
-      },
-      setFirstInvalid(key) {
-        if (!key) {
-          this.firstInvalidField = null
-          this.firstInvalidFieldIndex = -1
-          return
-        }
-        this.fields.some((fieldComponent, index) => {
-          if (fieldComponent.fieldValue.modelKey === key) {
-            this.firstInvalidField = fieldComponent
-            this.firstInvalidFieldIndex = index
-            return true
-          }
-        })
-      },
-      addField(fieldComponent) {
-        this.fields.push(fieldComponent)
-      },
-      destroyField(fieldComponent) {
-        const i = this.fields.indexOf(fieldComponent)
-        this.fields.splice(i, 1)
-        this.setValidity(fieldComponent.fieldValue.modelKey)
-      }
-    },
-    beforeDestroy() {
-      this.form = null
-      this.firstInvalidField = null
-    },
-    components: {
-      CubeFormGroup
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-form
-    position: relative
-    font-size: $fontsize-large
-    line-height: 1.429
-    color: $form-color
-    background-color: $form-bgc
-  .cube-form_groups
-    .cube-form-group-legend
-      padding: 10px 15px
-      &:empty
-        padding-top: 5px
-        padding-bottom: 5px
-  .cube-form_standard
-    .cube-form-item
-      min-height: 46px
-    .cube-form-field
-      flex: 1
-      font-size: $fontsize-medium
-    .cube-validator
-      display: flex
-      align-items: center
-      position: relative
-    .cube-validator_invalid
-      color: $form-invalid-color
-    .cube-validator-content
-      flex: 1
-    .cube-validator-msg-def
-      font-size: 0
-    .cube-validator_invalid
-      .cube-validator-msg
-        &::before
-          content: "\e614"
-          padding-left: 5px
-          font-family: "cube-icon"!important
-          font-size: $fontsize-large-xx
-          font-style: normal
-          -webkit-font-smoothing: antialiased
-          -webkit-text-stroke-width: 0.2px
-          -moz-osx-font-smoothing: grayscale
-    .cube-form-label
-      width: 125px
-      padding-right: 10px
-    .cube-checkbox-group, .cube-radio-group
-      &::before, &::after
-        display: none
-    .cube-input
-      input
-        padding: 13px 0
-        background-color: transparent
-      &::after
-        display: none
-    .cube-textarea-wrapper
-      padding: 13px 0
-      height: 20px
-      &.cube-textarea_expanded
-        height: 60px
-        padding-bottom: 20px
-        .cube-textarea-indicator
-          bottom: 2px
-      .cube-textarea
-        padding: 0
-        background-color: transparent
-      &::after
-        display: none
-    .cube-select
-      padding-left: 0
-      background-color: transparent
-      &::after
-        display: none
-    .cube-upload-def
-      padding: 5px 0
-      .cube-upload-btn, .cube-upload-file
-        margin: 5px 10px 5px 0
-  .cube-form_classic
-    .cube-form-item
-      display: block
-      padding: 15px
-      &:last-child
-        padding-bottom: 30px
-      &::after
-        display: none
-      .cube-validator-msg
-        position: absolute
-        margin-top: 3px
-        &::before
-          display: none
-      .cube-validator-msg-def
-        font-size: $fontsize-small
-    .cube-form-item_btn
-      padding-top: 0
-      padding-bottom: 0
-      &:last-child
-        padding-bottom: 0
-    .cube-form-label
-      padding-bottom: 15px
-  .cube-form_fresh
-    .cube-form-item
-      display: block
-      padding: 2em 15px 10px
-      &::after
-        display: none
-      .cube-validator-msg
-        position: absolute
-        top: 1em
-        right: 15px
-        bottom: auto
-        margin-top: -.4em
-        font-size: $fontsize-small
-        &::before
-          display: none
-      .cube-validator-msg-def
-        font-size: 100%
-    .cube-form-item_btn
-      padding-top: 0
-      padding-bottom: 0
-      &:last-child
-        padding-bottom: 0
-    .cube-form-label
-      position: absolute
-      top: 1em
-      margin-top: -.4em
-      font-size: $fontsize-small
-</style>

src/components/form/layouts.js

@@ -1,7 +0,0 @@
-const LAYOUTS = {
-  STANDARD: 'standard',
-  CLASSIC: 'classic',
-  FRESH: 'fresh'
-}
-
-export default LAYOUTS

src/components/form/mixin.js

@@ -1,21 +0,0 @@
-export default {
-  data() {
-    return {
-      validating: false,
-      pending: false,
-      originValid: undefined
-    }
-  },
-  computed: {
-    valid() {
-      const originValid = this.originValid
-      const pending = this.pending
-      const validating = this.validating
-      return (pending || validating) ? undefined : originValid
-    },
-    invalid() {
-      const valid = this.valid
-      return valid === undefined ? valid : !valid
-    }
-  }
-}

src/components/image-preview/image-preview.vue

@@ -1,327 +0,0 @@
-<template>
-  <transition name="cube-image-preview-fade">
-    <cube-popup type="image-preview" :z-index="zIndex" :center="false" v-show="isVisible">
-      <div class="cube-image-preview-container">
-        <div class="cube-image-preview-header">
-          <slot name="header" :current="currentPageIndex"></slot>
-        </div>
-        <cube-slide
-          ref="slide"
-          v-if="isVisible"
-          :data="imgs"
-          :initial-index="currentPageIndex"
-          :auto-play="false"
-          :loop="loop"
-          :speed="speed"
-          :options="options"
-          @change="slideChangeHandler"
-        >
-          <cube-slide-item
-            v-for="(img, index) in imgs"
-            :key="index"
-          >
-            <div class="cube-image-preview-item" @click="itemClickHandler">
-              <cube-scroll
-                ref="items"
-                :options="scrollOptions"
-                @dblclick.native="dblclickHandler(index, $event)"
-              >
-                <img class="cube-image-preview-img" :src="img" @load="imgLoad(index)">
-              </cube-scroll>
-            </div>
-          </cube-slide-item>
-          <template slot="dots"><i></i></template>
-        </cube-slide>
-        <div class="cube-image-preview-footer">
-          <slot name="footer" :current="currentPageIndex">
-            <span class="cube-image-preview-counter">{{currentPageIndex + 1}}/{{imgs.length}}</span>
-          </slot>
-        </div>
-      </div>
-    </cube-popup>
-  </transition>
-</template>
-<script type="text/ecmascript-6">
-  import CubePopup from '../popup/popup.vue'
-  import CubeSlide from '../slide/slide.vue'
-  import CubeSlideItem from '../slide/slide-item.vue'
-  import CubeScroll from '../scroll/scroll.vue'
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-  import { isAndroid } from '../../common/helpers/env'
-
-  const COMPONENT_NAME = 'cube-image-preview'
-  const EVENT_CHANGE = 'change'
-  const EVENT_HIDE = 'hide'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin],
-    props: {
-      initialIndex: {
-        type: Number,
-        default: 0
-      },
-      imgs: {
-        type: Array,
-        default() {
-          /* istanbul ignore next */
-          return []
-        }
-      },
-      loop: {
-        type: Boolean,
-        default: true
-      },
-      speed: {
-        type: Number,
-        default: 400
-      },
-      preventDefault: {
-        type: Boolean,
-        default: true
-      }
-    },
-    data() {
-      return {
-        currentPageIndex: this.initialIndex,
-        options: {
-          observeDOM: false,
-          bounce: {
-            left: true,
-            right: true
-          },
-          useTransition: !isAndroid,
-          probeType: 3,
-          preventDefault: this.preventDefault
-        },
-        scrollOptions: {
-          HWCompositing: isAndroid,
-          observeDOM: false,
-          zoom: true,
-          bindToWrapper: true,
-          freeScroll: true,
-          scrollX: true,
-          scrollY: true,
-          probeType: 3,
-          bounce: false,
-          click: false,
-          dblclick: true,
-          bounceTime: 300,
-          preventDefault: this.preventDefault
-        }
-      }
-    },
-    watch: {
-      initialIndex(newIndex) {
-        this.setPageIndex(newIndex)
-      }
-    },
-    methods: {
-      show() {
-        this.isVisible = true
-        this.$nextTick(() => {
-          this._listenSlide()
-          this._listenScroll()
-        })
-      },
-      _listenSlide() {
-        // waiting slide initial
-        this.$nextTick(() => {
-          const slide = this.$refs.slide.slide
-          slide.on('scrollStart', this.slideScrollStartHandler)
-          slide.on('scrollEnd', this.slideScrollEndHandler)
-        })
-      },
-      _listenScroll() {
-        // waiting scroll initial
-        this.$nextTick(() => {
-          this.$refs.items.forEach((scrollItem) => {
-            const scroll = scrollItem.scroll
-            scroll.on('zoomStart', this.zoomStartHandler.bind(this, scroll))
-            scroll.on('beforeScrollStart', this.beforeScrollHandler)
-            scroll.on('scroll', this.checkBoundary.bind(this, scroll))
-            scroll.on('scrollEnd', this.scrollEndHandler.bind(this, scroll))
-          })
-        })
-      },
-      hide() {
-        this.isVisible = false
-        this.$emit(EVENT_HIDE)
-      },
-      prev() {
-        const slide = this.$refs.slide.slide
-        slide && slide.prev()
-      },
-      next() {
-        const slide = this.$refs.slide.slide
-        slide && slide.next()
-      },
-      goTo(index) {
-        const slide = this.$refs.slide.slide
-        slide && slide.goToPage(index, 0)
-      },
-      imgLoad(i) {
-        /* istanbul ignore if */
-        if (this.isVisible && this.$refs.items) {
-          this.$refs.items[i].scroll.refresh()
-        }
-      },
-      setPageIndex(currentPageIndex) {
-        if (this.currentPageIndex >= 0 && this.currentPageIndex !== currentPageIndex) {
-          const item = this.$refs.items[this.currentPageIndex]
-          if (item) {
-            const scroll = item.scroll
-            /* istanbul ignore if */
-            if (scroll.scale !== 1) {
-              scroll.scale = 1
-              scroll.lastcale = 1
-              scroll.refresh()
-            }
-          }
-        }
-        this.currentPageIndex = currentPageIndex
-      },
-      slideChangeHandler(currentPageIndex) {
-        this.setPageIndex(currentPageIndex)
-        this.slideScrollEndHandler()
-        this.$emit(EVENT_CHANGE, currentPageIndex)
-      },
-      slideScrollStartHandler() {
-        const slide = this.$refs.slide.slide
-        if (this._scrolling && !this._hasEnableSlide) {
-          slide.disable()
-        } else {
-          slide.enable()
-        }
-      },
-      slideScrollEndHandler() {
-        this.$refs.items.forEach((scrollItem) => {
-          this.scrollEndHandler(scrollItem.scroll)
-        })
-      },
-      _scroll(scroll) {
-        const slide = this.$refs.slide.slide
-        slide.disable()
-        slide.refresh()
-        scroll.enable()
-      },
-      _slide(scroll) {
-        this.$refs.slide.slide.enable()
-        scroll.disable()
-      },
-      beforeScrollHandler() {
-        // for touchstart scrollEnd
-        // cancel it, do not enable slide
-        clearTimeout(this.enableSlideTid)
-      },
-      scrollEndHandler(scroll) {
-        clearTimeout(this.enableSlideTid)
-        if (this.dblZooming) {
-          this.dblZooming = false
-          clearTimeout(this.clickTid)
-        }
-        this._hasEnableSlide = false
-        this._scrolling = false
-        scroll.enable()
-        this.enableSlideTid = setTimeout(() => {
-          this.$refs.slide.slide.enable()
-        })
-      },
-      checkBoundary(scroll, pos) {
-        if (scroll.distX && Math.abs(scroll.distX) > Math.abs(scroll.distY)) {
-          this._scrolling = true
-          const reached = scroll.distX > 0 ? pos.x >= scroll.minScrollX : pos.x <= scroll.maxScrollX
-          if (reached) {
-            this._hasEnableSlide = true
-            this._slide(scroll)
-          } else {
-            if (!this._hasEnableSlide) {
-              this._scroll(scroll)
-            }
-          }
-        } else if (scroll.distY) {
-          this._scrolling = true
-          this._scroll(scroll)
-        }
-      },
-      zoomStartHandler(scroll) {
-        this._scroll(scroll)
-      },
-      dblclickHandler(index, e) {
-        const scroll = this.$refs.items[index].scroll
-        this.dblZooming = true
-        this.zoomTo(scroll, scroll.scale > 1 ? 1 : 2, e)
-        scroll.disable()
-      },
-      itemClickHandler() {
-        clearTimeout(this.clickTid)
-        this.clickTid = setTimeout(() => {
-          !this.dblZooming && this.hide()
-        }, this.scrollOptions.bounceTime)
-      },
-      zoomTo(scroll, scale, e) {
-        scroll.zoomTo(scale, e.pageX, e.pageY)
-      }
-    },
-    components: {
-      CubePopup,
-      CubeSlide,
-      CubeSlideItem,
-      CubeScroll
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-
-  .cube-image-preview-fade-enter, .cube-image-preview-fade-leave-active
-    opacity: 0
-  .cube-image-preview-fade-enter-active, .cube-image-preview-fade-leave-active
-    transition: all .3s ease-in-out
-
-  .cube-image-preview
-    .cube-popup-mask
-      opacity: .6
-    .cube-popup-content
-      width: 100%
-      height: 100%
-    .cube-slide-item
-      display: flex
-      align-items: center
-      justify-content: center
-      overflow: hidden
-  .cube-image-preview-container
-    height: 100%
-    margin: 0 -10px
-  .cube-image-preview-header,
-  .cube-image-preview-footer
-    position: absolute
-    left: 0
-    right: 0
-  .cube-image-preview-header
-    top: 0
-  .cube-image-preview-footer
-    bottom: 0
-  .cube-image-preview-counter
-    position: absolute
-    bottom: 50px
-    width: 100%
-    text-align: center
-    font-size: $fontsize-medium
-    color: $image-preview-counter-color
-  .cube-image-preview-item
-    position: relative
-    padding: 0 10px
-    width: 100%
-    height: 100%
-    .cube-scroll-wrapper
-      display: flex
-      align-items: center
-      justify-content: center
-    .cube-image-preview-img
-      display: block
-      height: auto
-      max-width: 100%
-      max-height: 100%
-</style>

src/components/index-list/index-list-group.vue

@@ -1,37 +0,0 @@
-<template>
-  <li class="cube-index-list-group">
-    <h2 class="cube-index-list-anchor" v-html="group.name"></h2>
-    <ul>
-      <slot>
-        <cube-index-list-item v-for="(item, index) in group.items" :key="index" :item="item" @select="selectItem"></cube-index-list-item>
-      </slot>
-    </ul>
-  </li>
-</template>
-
-<script type="text/ecmascript-6">
-  import CubeIndexListItem from './index-list-item.vue'
-
-  const COMPONENT_NAME = 'cube-index-list-group'
-  const EVENT_SELECT = 'select'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      group: {
-        type: Object,
-        default() {
-          return {}
-        }
-      }
-    },
-    methods: {
-      selectItem(item) {
-        this.$emit(EVENT_SELECT, item)
-      }
-    },
-    components: {
-      CubeIndexListItem
-    }
-  }
-</script>

src/components/index-list/index-list-item.vue

@@ -1,70 +0,0 @@
-<template>
-  <li
-    class="cube-index-list-item"
-    :class="itemClass"
-    @touchstart="addActiveCls"
-    @touchend="removeActiveCls"
-    @click="selectItem()">
-    <slot>
-      <div class="cube-index-list-item-def border-bottom-1px">
-        {{item.name}}
-      </div>
-    </slot>
-  </li>
-</template>
-
-<script type="text/ecmascript-6">
-  import {
-    addClass,
-    removeClass
-  } from '../../common/helpers/dom'
-
-  const COMPONENT_NAME = 'cube-index-list-item'
-  const ACTIVE_CLS = 'cube-index-list-item_active'
-  const EVENT_SELECT = 'select'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      item: {
-        type: Object,
-        default() {
-          return {}
-        }
-      }
-    },
-    computed: {
-      itemClass() {
-        return this.item.active ? ACTIVE_CLS : ''
-      }
-    },
-    methods: {
-      addActiveCls(e) {
-        addClass(e.currentTarget, ACTIVE_CLS)
-      },
-      removeActiveCls(e) {
-        removeClass(e.currentTarget, ACTIVE_CLS)
-      },
-      selectItem() {
-        this.$emit(EVENT_SELECT, this.item)
-      }
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-index-list-item-def
-    position: relative
-    height: 50px
-    line-height: 50px
-    padding: 0 16px
-    font-size: $fontsize-medium
-    color: $index-list-item-color
-    &:last-child
-      border-none()
-  .cube-index-list-item_active
-    background: $index-list-item-active-bgc
-</style>

src/components/index-list/index-list.vue

@@ -1,335 +0,0 @@
-<template>
-  <div class="cube-index-list">
-    <cube-scroll
-      ref="scroll"
-      :scroll-events="scrollEvents"
-      :options="scrollOptions"
-      :data="data"
-      @scroll="scroll"
-      @pulling-down="onPullingDown"
-      @pulling-up="onPullingUp">
-      <div class="cube-index-list-content" ref="content">
-        <h1 class="cube-index-list-title" v-if="title" ref="title" @click="titleClick">
-          {{ title }}
-        </h1>
-        <ul>
-          <slot>
-            <cube-index-list-group v-for="(group, index) in data" :key="index" :group="group" @select="selectItem">
-            </cube-index-list-group>
-          </slot>
-        </ul>
-      </div>
-      <template v-if="$slots.pullup || $scopedSlots.pullup" slot="pullup" slot-scope="props">
-        <slot name="pullup"
-          :pullUpLoad="props.pullUpLoad"
-          :isPullUpLoad="props.isPullUpLoad">
-        </slot>
-      </template>
-      <template v-if="$slots.pulldown || $scopedSlots.pulldown" slot="pulldown" slot-scope="props">
-        <slot name="pulldown"
-          :pullDownRefresh="props.pullDownRefresh"
-          :pullDownStyle="props.pullDownStyle"
-          :beforePullDown="props.beforePullDown"
-          :isPullingDown="props.isPullingDown"
-          :bubbleY="props.bubbleY">
-        </slot>
-      </template>
-    </cube-scroll>
-    <div v-if="navbar" class="cube-index-list-nav" @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove">
-      <ul class="cube-index-list-nav-list">
-        <li
-          v-for="(item, index) in shortcutList"
-          :key="index"
-          :data-index="index"
-          class="cube-index-list-nav-item"
-          :class="{active: currentIndex === index}"
-        >
-          <slot name="nav-item" :item="item">{{ item }}</slot>
-        </li>
-      </ul>
-    </div>
-    <div ref="fixed"
-      v-show="fixedTitle"
-      v-html="fixedTitle"
-      class="cube-index-list-fixed cube-index-list-anchor">
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  import {
-    getData,
-    getRect,
-    prefixStyle,
-    getMatchedTarget
-  } from '../../common/helpers/dom'
-  import { inBrowser } from '../../common/helpers/env'
-
-  import CubeScroll from '../scroll/scroll.vue'
-  import CubeIndexListGroup from './index-list-group.vue'
-  import scrollMixin from '../../common/mixins/scroll'
-  import deprecatedMixin from '../../common/mixins/deprecated'
-
-  const COMPONENT_NAME = 'cube-index-list'
-  const EVENT_SELECT = 'select'
-  const EVENT_TITLE_CLICK = 'title-click'
-  const EVENT_PULLING_UP = 'pulling-up'
-  const EVENT_PULLING_DOWN = 'pulling-down'
-
-  const ANCHOR_HEIGHT = inBrowser ? window.innerHeight <= 480 ? 17 : 18 : 18
-  const transformStyleKey = prefixStyle('transform')
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [scrollMixin, deprecatedMixin],
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      data: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      speed: {
-        type: Number,
-        default: 0
-      },
-      navbar: {
-        type: Boolean,
-        default: true
-      },
-      pullDownRefresh: {
-        type: [Object, Boolean],
-        default: undefined,
-        deprecated: {
-          replacedBy: 'options'
-        }
-      },
-      pullUpLoad: {
-        type: [Object, Boolean],
-        default: undefined,
-        deprecated: {
-          replacedBy: 'options'
-        }
-      }
-    },
-    data() {
-      return {
-        scrollEvents: ['scroll'],
-        currentIndex: 0,
-        scrollY: -1,
-        diff: -1,
-        titleHeight: 0
-      }
-    },
-    computed: {
-      fixedTitle() {
-        this.title && !this.titleHeight && this._caculateTitleHeight()
-
-        return this.scrollY <= -this.titleHeight && this.data[this.currentIndex] ? this.data[this.currentIndex].name : ''
-      },
-      shortcutList() {
-        return this.data.map((group) => {
-          return group ? group.shortcut || group.name.substr(0, 1) : ''
-        })
-      },
-      scrollOptions() {
-        return Object.assign({}, {
-          pullDownRefresh: this.pullDownRefresh,
-          pullUpLoad: this.pullUpLoad
-        }, this.options)
-      }
-    },
-    created() {
-      this.groupList = []
-      this.listHeight = []
-      this.touch = {}
-      this.subTitleHeight = 0
-    },
-    mounted() {
-      this.$nextTick(() => {
-        this.title && this._caculateTitleHeight()
-        this._calculateHeight()
-      })
-    },
-    methods: {
-      /* TODO: remove refresh next minor version */
-      refresh() {
-        this.$refs.scroll.refresh()
-      },
-      selectItem(item) {
-        this.$emit(EVENT_SELECT, item)
-      },
-      scroll(pos) {
-        this.scrollY = pos.y
-      },
-      titleClick() {
-        this.$emit(EVENT_TITLE_CLICK, this.title)
-      },
-      forceUpdate() {
-        this.$refs.scroll.forceUpdate()
-      },
-      onShortcutTouchStart(e) {
-        const target = getMatchedTarget(e, 'cube-index-list-nav-item')
-        if (!target) return
-        let anchorIndex = getData(target, 'index')
-        let firstTouch = e.touches[0]
-        this.touch.y1 = firstTouch.pageY
-        this.touch.anchorIndex = anchorIndex
-
-        this._scrollTo(anchorIndex)
-      },
-      onShortcutTouchMove(e) {
-        let firstTouch = e.touches[0]
-        this.touch.y2 = firstTouch.pageY
-        let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0
-        let anchorIndex = parseInt(this.touch.anchorIndex) + delta
-
-        this._scrollTo(anchorIndex)
-      },
-      onPullingUp() {
-        this.$emit(EVENT_PULLING_UP)
-      },
-      onPullingDown() {
-        this.$emit(EVENT_PULLING_DOWN)
-      },
-      _caculateTitleHeight() {
-        this.titleHeight = this.$refs.title ? getRect(this.$refs.title).height : 0
-      },
-      _calculateHeight() {
-        this.groupList = this.$el.getElementsByClassName('cube-index-list-group')
-        const subTitleEl = this.$el.getElementsByClassName('cube-index-list-anchor')[0]
-        this.subTitleHeight = subTitleEl ? getRect(subTitleEl).height : 0
-        this.listHeight = []
-
-        if (!this.groupList) {
-          return
-        }
-
-        let height = this.titleHeight
-        this.listHeight.push(height)
-        for (let i = 0; i < this.groupList.length; i++) {
-          let item = this.groupList[i]
-          height += item.clientHeight
-          this.listHeight.push(height)
-        }
-      },
-      _scrollTo(index) {
-        if (index < 0) {
-          index = 0
-        } else if (index > this.listHeight.length - 2) {
-          index = this.listHeight.length - 2
-        }
-        this.$refs.scroll.scrollToElement(this.groupList[index], this.speed)
-        this.scrollY = this.$refs.scroll.scroll.y
-      }
-    },
-    watch: {
-      data() {
-        this.$nextTick(() => {
-          this._calculateHeight()
-        })
-      },
-      title(newVal) {
-        this.$nextTick(() => {
-          this._caculateTitleHeight()
-          this._calculateHeight()
-        })
-      },
-      diff(newVal) {
-        let fixedTop = (newVal > 0 && newVal < this.subTitleHeight) ? newVal - this.subTitleHeight : 0
-        if (this.fixedTop === fixedTop) {
-          return
-        }
-        this.fixedTop = fixedTop
-        this.$refs.fixed.style[transformStyleKey] = `translate3d(0,${fixedTop}px,0)`
-      },
-      scrollY(newY) {
-        const listHeight = this.listHeight
-        // top
-        if (newY > -this.titleHeight) {
-          this.currentIndex = 0
-          return
-        }
-        // midd
-        for (let i = 0; i < listHeight.length - 1; i++) {
-          let height1 = listHeight[i]
-          let height2 = listHeight[i + 1]
-          if (-newY >= height1 && -newY < height2) {
-            this.currentIndex = i
-            this.diff = height2 + newY
-            return
-          }
-        }
-        // bottom
-        this.currentIndex = listHeight.length - 2
-      }
-    },
-    components: {
-      CubeScroll,
-      CubeIndexListGroup
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-index-list
-    position: relative
-    height: 100%
-    overflow: hidden
-    .cube-scroll-wrapper
-      position: absolute
-      left: 0
-      top: 0
-      right: 0
-      bottom: 0
-      overflow: hidden
-  .cube-index-list-content
-    background: $index-list-bgc
-    border-radius: 2px
-  .cube-index-list-title
-    padding: 14px 16px
-    font-size: $fontsize-medium
-    line-height: 1.6
-    color: $index-list-title-color
-  .cube-index-list-anchor
-    padding: 16px 16px 10px 16px
-    line-height: 1
-    font-size: $fontsize-medium
-    color: $index-list-anchor-color
-    background: $index-list-anchor-bgc
-  .cube-index-list-fixed
-    z-index: 1
-    position: absolute
-    top: 0
-    left: 0
-    right: 0
-  .cube-index-list-nav
-    position: absolute
-    z-index: 30
-    right: 0
-    top: 50%
-    transform: translateY(-50%)
-    font-family: Helvetica
-    > ul
-      padding: 0
-      margin: 0
-      > li
-        padding: 6px 16px 0 16px
-        line-height: 1
-        text-align: center
-        box-sizing(border-box)
-        font-size: $fontsize-small
-        color: $index-list-nav-color
-        &.active
-          color: $index-list-nav-active-color
-        @media (max-height: 480px)
-          &
-            padding-top: 3px
-</style>

src/components/input-option.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="input-option">
-    <span class="name">{{ name }}</span>
-    <input type="text" v-model="inputValue">
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'input-option'
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      name: {
-        type: String
-      },
-      value: null,
-      minValue: null
-    },
-    data() {
-      return {
-        inputValue: this.value
-      }
-    },
-    watch: {
-      inputValue: function (newValue) {
-        this.$emit('update:value', this.minValue ? Math.max(newValue, this.minValue) : newValue)
-      }
-    }
-  }
-</script>
-
-<style scoped lang="stylus" rel="stylesheet/stylus">
-  @import "~@/common/stylus/variable.styl"
-
-  .input-option
-    display: flex
-    height: 100%
-    justify-content space-between
-    align-items stretch
-    transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
-    overflow: hidden
-    .name
-      flex: 0 0 120px
-      padding-left: 10px
-      display inline-flex
-      align-items center
-    input
-      flex: 1 1 auto
-      min-width: 1px // fix padding把width撑开的问题
-      padding: 0 10px
-      background-color: $color-white
-      border-left: 1px solid rgba(0, 0, 0, .1)
-      box-shadow: 0 0 1px 1px #eee inset
-      outline: none
-      &:focus
-        outline: #fc9153 solid 1px;
-        outline-offset: -1px;
-
-</style>

src/components/input/input.vue

@@ -1,230 +0,0 @@
-<template>
-  <div class="cube-input" :class="{'cube-input_active': isFocus}">
-    <div class="cube-input-prepend" v-if="$slots.prepend">
-      <slot name="prepend"></slot>
-    </div>
-    <input
-      class="cube-input-field"
-      ref="input"
-      v-model="inputValue"
-      v-bind="$props"
-      :type="_type"
-      :disabled="disabled"
-      :readonly="readonly"
-      :autocomplete="autocomplete"
-      :autofocus="autofocus"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @change="changeHander"
-    >
-    <div class="cube-input-append" v-if="$slots.append || _showClear || _showPwdEye">
-      <div class="cube-input-clear" v-if="_showClear" @click="handleClear">
-        <i class="cubeic-wrong"></i>
-      </div>
-      <div class="cube-input-eye" v-if="_showPwdEye" @click="handlePwdEye">
-        <i :class="eyeClass"></i>
-      </div>
-      <slot name="append"></slot>
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'cube-input'
-  const EVENT_INPUT = 'input'
-  const EVENT_CHANGE = 'change'
-  const EVENT_BLUR = 'blur'
-  const EVENT_FOCUS = 'focus'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      value: [String, Number],
-      type: {
-        type: String,
-        default: 'text'
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      placeholder: String,
-      readonly: {
-        type: Boolean,
-        default: false
-      },
-      autofocus: {
-        type: Boolean,
-        default: false
-      },
-      autocomplete: {
-        type: [Boolean, String],
-        default: false
-      },
-      name: String,
-      id: String,
-      form: String,
-      minlength: Number,
-      maxlength: Number,
-      resize: String,
-      min: Number,
-      max: Number,
-      step: Number,
-      tabindex: String,
-      clearable: {
-        type: [Boolean, Object],
-        default: false
-      },
-      eye: {
-        type: [Boolean, Object],
-        default: false
-      }
-    },
-    data() {
-      return {
-        inputValue: this.value,
-        isFocus: false,
-        formatedClearable: {
-          visible: false,
-          blurHidden: true
-        },
-        formatedEye: {
-          open: false,
-          reverse: false
-        }
-      }
-    },
-    computed: {
-      _type() {
-        const type = this.type
-        if (type === 'password' && this.eye && this.pwdVisible) {
-          return 'text'
-        }
-        return type
-      },
-      _showClear() {
-        let visible = this.formatedClearable.visible && this.inputValue && !this.readonly && !this.disabled
-        if (this.formatedClearable.blurHidden && !this.isFocus) {
-          visible = false
-        }
-        return visible
-      },
-      _showPwdEye() {
-        return this.type === 'password' && this.eye && !this.disabled
-      },
-      pwdVisible() {
-        const eye = this.formatedEye
-        return eye.reverse ? !eye.open : eye.open
-      },
-      eyeClass() {
-        return this.formatedEye.open ? 'cubeic-eye-visible' : 'cubeic-eye-invisible'
-      }
-    },
-    watch: {
-      value(newValue) {
-        this.inputValue = newValue
-      },
-      inputValue(newValue) {
-        this.$emit(EVENT_INPUT, newValue)
-      },
-      clearable: {
-        handler() {
-          this.formatClearable()
-        },
-        deep: true,
-        immediate: true
-      },
-      eye: {
-        handler() {
-          this.formateEye()
-        },
-        deep: true,
-        immediate: true
-      }
-    },
-    methods: {
-      changeHander(e) {
-        this.$emit(EVENT_CHANGE, e)
-      },
-      formatClearable() {
-        if (typeof this.clearable === 'boolean') {
-          this.formatedClearable.visible = this.clearable
-        } else {
-          Object.assign(this.formatedClearable, this.clearable)
-        }
-      },
-      formateEye() {
-        if (typeof this.eye === 'boolean') {
-          this.formatedEye.open = this.eye
-        } else {
-          Object.assign(this.formatedEye, this.eye)
-        }
-      },
-      handleFocus(e) {
-        this.$emit(EVENT_FOCUS, e)
-        this.isFocus = true
-      },
-      handleBlur(e) {
-        this.$emit(EVENT_BLUR, e)
-        this.isFocus = false
-      },
-      handleClear(e) {
-        this.inputValue = ''
-        this.$refs.input.focus()
-      },
-      handlePwdEye() {
-        this.formatedEye.open = !this.formatedEye.open
-      }
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-input
-    display: flex
-    align-items: center
-    font-size: $fontsize-medium
-    line-height: 1.429
-    background-color: $input-bgc
-    border-1px($input-border-color)
-  .cube-input-field
-    display: block
-    flex: 1
-    width: 100%
-    padding: 10px
-    box-sizing: border-box
-    color: $input-color
-    line-height: inherit
-    background-color: inherit
-    border-radius: 2px
-    outline: none
-    &::-webkit-input-placeholder
-      color: $input-placeholder-color
-      text-overflow: ellipsis
-    + .cube-input-append
-      .cube-input-clear, .cube-input-eye
-        &:first-child
-          margin-left: -5px
-  .cube-input_active
-    &::after
-      border-color: $input-focus-border-color
-  .cube-input-prepend, .cube-input-append
-    display: flex
-    align-items: center
-  .cube-input-clear, .cube-input-eye
-    width: 1em
-    height: 1em
-    line-height: 1
-    padding: 10px
-    box-sizing: content-box
-    color: $input-clear-icon-color
-    > i
-      display: inline-block
-      transform: scale(1.2)
-  .cube-input-eye
-    >
-      .cubeic-eye-invisible, .cubeic-eye-visible
-        transform: scale(1.4)
-</style>

src/components/js/date.js

@@ -1,23 +0,0 @@
-export function formatDate (date, fmt) {
-    if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-    }
-    let o = {
-    'M+': date.getMonth() + 1,
-    'd+': date.getDate(),
-    'h+': date.getHours(),
-    'm+': date.getMinutes(),
-    's+': date.getSeconds()
-    };
-    for (let k in o) {
-    if (new RegExp(`(${k})`).test(fmt)) {
-    let str = o[k] + '';
-    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
-    }
-    }
-    return fmt;
-    };
-    
-    function padLeftZero (str) {
-    return ('00' + str).substr(str.length);
-    };

src/components/json-view.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="cube-json-view">
-    <h3>{{title}}</h3>
-    <pre v-if="changed">
-      <code ref="code">{{data}}</code>
-    </pre>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  import hljs from 'highlight.js/lib/highlight'
-  import json from 'highlight.js/lib/languages/json'
-  import 'highlight.js/styles/solarized-dark.css'
-  hljs.registerLanguage('json', json)
-
-  export default {
-    props: {
-      data: {
-        type: Object,
-        default() {
-          return {}
-        }
-      },
-      title: {
-        type: String,
-        default: ''
-      }
-    },
-    data() {
-      return {
-        changed: true
-      }
-    },
-    watch: {
-      data: {
-        handler() {
-          this.changed = false
-          this.$nextTick(() => {
-            this.changed = true
-            this.$nextTick(() => {
-              this.$refs.code && hljs.highlightBlock(this.$refs.code)
-            })
-          })
-        },
-        deep: true
-      }
-    },
-    mounted() {
-      this.$refs.code && hljs.highlightBlock(this.$refs.code)
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @import "~@/common/stylus/variable.styl"
-  .cube-json-view
-    h3
-      margin-top: 15px
-      font-size: $fontsize-large
-</style>

src/components/loading/loading.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="cube-loading">
-    <span class="cube-loading-spinners" :style="style">
-      <i class="cube-loading-spinner" v-for="item in balde"></i>
-    </span>
-  </div>
-</template>
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'cube-loading'
-
-  export default {
-    name: COMPONENT_NAME,
-    data() {
-      return {
-        balde: 12
-      }
-    },
-    props: {
-      size: {
-        type: Number
-      }
-    },
-    computed: {
-      style() {
-        if (!this.size) {
-          return
-        }
-        const value = `${this.size}px`
-        return {
-          width: value,
-          height: value
-        }
-      }
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-
-  .cube-loading
-    font-size: $fontsize-large-xxx
-  .cube-loading-spinners
-    position: relative
-    display: block
-    width: 1em
-    height: 1em
-  .cube-loading-spinner
-    position: absolute
-    left: 44.5%
-    top: 37%
-    width: 2PX // for rem
-    height: 25%
-    border-radius: 50%/20%
-    opacity: .25
-    background-color: currentColor
-    animation: spinner-fade 1s linear infinite
-    for num in (1..12)
-      &:nth-child({num})
-        animation-delay: ((num - 1) / 12)s
-        transform: rotate(30deg * (num - 6)) translateY(-150%)
-  @keyframes spinner-fade
-    0%
-      opacity: .85
-    50%
-      opacity: .25
-    100%
-      opacity: .25
-
-</style>

src/components/picker/picker.vue

@@ -1,383 +0,0 @@
-<template>
-  <transition name="cube-picker-fade">
-    <!-- Transition animation need use with v-show in the same template. -->
-    <cube-popup
-      type="picker"
-      :mask="true"
-      :center="false"
-      :z-index="zIndex"
-      v-show="isVisible"
-      @touchmove.prevent
-      @mask-click="maskClick">
-      <transition name="cube-picker-move">
-        <div class="cube-picker-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
-          <div class="cube-picker-choose border-bottom-1px">
-            <span class="cube-picker-cancel" @click="cancel">{{_cancelTxt}}</span>
-            <span class="cube-picker-confirm" @click="confirm">{{_confirmTxt}}</span>
-            <div class="cube-picker-title-group">
-              <h1 class="cube-picker-title" v-html="title"></h1>
-              <h2 v-if="subtitle" class="cube-picker-subtitle" v-html="subtitle"></h2>
-            </div>
-          </div>
-
-          <div class="cube-picker-content">
-            <i class="border-bottom-1px"></i>
-            <i class="border-top-1px"></i>
-            <div class="cube-picker-wheel-wrapper" ref="wheelWrapper">
-              <div v-for="(data,index) in finalData" :key="index">
-                <!-- The class name of the ul and li need be configured to BetterScroll. -->
-                <ul class="cube-picker-wheel-scroll">
-                  <li v-for="(item,index) in data" class="cube-picker-wheel-item" :key="index" v-html="item[textKey]">
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <div class="cube-picker-footer"></div>
-        </div>
-      </transition>
-    </cube-popup>
-  </transition>
-</template>
-
-<script type="text/ecmascript-6">
-  import BScroll from 'better-scroll'
-  import CubePopup from '../popup/popup.vue'
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-  import basicPickerMixin from '../../common/mixins/basic-picker'
-  import pickerMixin from '../../common/mixins/picker'
-  import localeMixin from '../../common/mixins/locale'
-
-  const COMPONENT_NAME = 'cube-picker'
-
-  const EVENT_SELECT = 'select'
-  const EVENT_VALUE_CHANGE = 'value-change'
-  const EVENT_CANCEL = 'cancel'
-  const EVENT_CHANGE = 'change'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin, basicPickerMixin, pickerMixin, localeMixin],
-    props: {
-      pending: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        finalData: this.data.slice()
-      }
-    },
-    created() {
-      this._values = []
-      this._indexes = this.selectedIndex
-    },
-    methods: {
-      confirm() {
-        if (!this._canConfirm()) {
-          return
-        }
-        this.hide()
-
-        let changed = false
-        let pickerSelectedText = []
-
-        const length = this.finalData.length
-        const oldLength = this._values.length
-
-        // when column count has changed.
-        if (oldLength !== length) {
-          changed = true
-          oldLength > length && (this._values.length = this._indexes.length = length)
-        }
-
-        for (let i = 0; i < length; i++) {
-          let index = this.wheels[i].getSelectedIndex()
-          this._indexes[i] = index
-
-          let value = null
-          let text = ''
-          if (this.finalData[i].length) {
-            value = this.finalData[i][index][this.valueKey]
-            text = this.finalData[i][index][this.textKey]
-          }
-          if (this._values[i] !== value) {
-            changed = true
-          }
-          this._values[i] = value
-          pickerSelectedText[i] = text
-        }
-
-        this.$emit(EVENT_SELECT, this._values, this._indexes, pickerSelectedText)
-
-        if (changed) {
-          this.$emit(EVENT_VALUE_CHANGE, this._values, this._indexes, pickerSelectedText)
-        }
-      },
-      maskClick() {
-        this.maskClosable && this.cancel()
-      },
-      cancel() {
-        this.hide()
-        this.$emit(EVENT_CANCEL)
-      },
-      show() {
-        if (this.isVisible) {
-          return
-        }
-
-        this.isVisible = true
-        if (!this.wheels || this.dirty) {
-          this.$nextTick(() => {
-            this.wheels = this.wheels || []
-            let wheelWrapper = this.$refs.wheelWrapper
-            for (let i = 0; i < this.finalData.length; i++) {
-              this._createWheel(wheelWrapper, i).enable()
-              this.wheels[i].wheelTo(this._indexes[i])
-            }
-            this.dirty && this._destroyExtraWheels()
-            this.dirty = false
-          })
-        } else {
-          for (let i = 0; i < this.finalData.length; i++) {
-            this.wheels[i].enable()
-            this.wheels[i].wheelTo(this._indexes[i])
-          }
-        }
-      },
-      hide() {
-        if (!this.isVisible) {
-          return
-        }
-        this.isVisible = false
-
-        for (let i = 0; i < this.finalData.length; i++) {
-          this.wheels[i].disable()
-        }
-      },
-      setData(data, selectedIndex) {
-        this._indexes = selectedIndex ? [...selectedIndex] : []
-        this.finalData = data.slice()
-        if (this.isVisible) {
-          this.$nextTick(() => {
-            const wheelWrapper = this.$refs.wheelWrapper
-            this.finalData.forEach((item, i) => {
-              this._createWheel(wheelWrapper, i)
-              this.wheels[i].wheelTo(this._indexes[i])
-            })
-            this._destroyExtraWheels()
-          })
-        } else {
-          this.dirty = true
-        }
-      },
-      refill(datas) {
-        let ret = []
-        if (!datas.length) {
-          return ret
-        }
-        datas.forEach((data, index) => {
-          ret[index] = this.refillColumn(index, data)
-        })
-        return ret
-      },
-      refillColumn(index, data) {
-        const wheelWrapper = this.$refs.wheelWrapper
-        let scroll = wheelWrapper.children[index].querySelector('.cube-picker-wheel-scroll')
-        let wheel = this.wheels ? this.wheels[index] : false
-        let dist = 0
-        if (scroll && wheel) {
-          let oldData = this.finalData[index]
-          this.$set(this.finalData, index, data)
-          let selectedIndex = wheel.getSelectedIndex()
-          if (oldData.length) {
-            let oldValue = oldData[selectedIndex][this.valueKey]
-            for (let i = 0; i < data.length; i++) {
-              if (data[i][this.valueKey] === oldValue) {
-                dist = i
-                break
-              }
-            }
-          }
-          this._indexes[index] = dist
-          this.$nextTick(() => {
-            // recreate wheel so that the wrapperHeight will be correct.
-            wheel = this._createWheel(wheelWrapper, index)
-            wheel.wheelTo(dist)
-          })
-        }
-        return dist
-      },
-      scrollTo(index, dist) {
-        const wheel = this.wheels[index]
-        this._indexes[index] = dist
-        wheel.wheelTo(dist)
-      },
-      refresh() {
-        this.$nextTick(() => {
-          this.wheels.forEach((wheel) => {
-            wheel.refresh()
-          })
-        })
-      },
-      _createWheel(wheelWrapper, i) {
-        if (!this.wheels[i]) {
-          const wheel = this.wheels[i] = new BScroll(wheelWrapper.children[i], {
-            wheel: {
-              selectedIndex: this._indexes[i] || 0,
-              wheelWrapperClass: 'cube-picker-wheel-scroll',
-              wheelItemClass: 'cube-picker-wheel-item'
-            },
-            swipeTime: this.swipeTime,
-            observeDOM: false
-          })
-          wheel.on('scrollEnd', () => {
-            this.$emit(EVENT_CHANGE, i, wheel.getSelectedIndex())
-          })
-        } else {
-          this.wheels[i].refresh()
-        }
-        return this.wheels[i]
-      },
-      _destroyExtraWheels() {
-        const dataLength = this.finalData.length
-        if (this.wheels.length > dataLength) {
-          const extraWheels = this.wheels.splice(dataLength)
-          extraWheels.forEach((wheel) => {
-            wheel.destroy()
-          })
-        }
-      },
-      _canConfirm() {
-        return !this.pending && this.wheels.every((wheel) => {
-          return !wheel.isInTransition
-        })
-      }
-    },
-    beforeDestroy() {
-      this.wheels && this.wheels.forEach((wheel) => {
-        wheel.destroy()
-      })
-      this.wheels = null
-    },
-    components: {
-      CubePopup
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/mixin.styl"
-  @require "../../common/stylus/variable.styl"
-
-  $picker-lr-padding = 16px
-
-  .cube-picker-fade-enter, .cube-picker-fade-leave-active
-    opacity: 0
-
-  .cube-picker-fade-enter-active, .cube-picker-fade-leave-active
-    transition: all .3s ease-in-out
-
-  .cube-picker-panel
-    height: 273px
-    text-align: center
-    font-size: $fontsize-medium
-    background: $picker-bgc
-
-  .cube-picker-move-enter, .cube-picker-move-leave-active
-    transform: translate3d(0, 100%, 0)
-
-  .cube-picker-move-enter-active, .cube-picker-move-leave-active
-    transition: all .3s ease-in-out
-
-  .cube-picker-choose
-    position: relative
-    height: 60px
-
-  .cube-picker-confirm, .cube-picker-cancel
-    font-size: $fontsize-medium
-    line-height: 60px
-    padding: 0 $picker-lr-padding
-    box-sizing: content-box
-    font-size: $fontsize-medium
-
-  .cube-picker-confirm
-    position: absolute
-    right: 0
-    color: $picker-confirm-btn-color
-    &:active
-      color: $picker-confirm-btn-active-color
-
-  .cube-picker-cancel
-    position: absolute
-    left: 0
-    color: $picker-cancel-btn-color
-    &:active
-      color: $picker-cancel-btn-active-color
-
-  .cube-picker-title-group
-    padding: 0 60px
-    display: flex
-    height: 100%
-    flex-flow: column
-    justify-content: center
-    text-align: center
-
-  .cube-picker-title
-    font-size: $fontsize-large-x
-    line-height: 25px
-    font-weight: normal
-    color: $picker-title-color
-
-  .cube-picker-subtitle
-    margin-top: 2px
-    line-height: 16px
-    font-size: $fontsize-small
-    color: $picker-subtitle-color
-
-  .cube-picker-content
-    position: relative
-    top: 20px
-    > i
-      position: absolute
-      z-index: 10
-      left: 0
-      width: 100%
-      height: 68px
-      pointer-events: none
-      transform: translateZ(0)
-    > .border-bottom-1px
-      top: 0
-      background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
-    > .border-top-1px
-      bottom: 0
-      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
-
-  .cube-picker-wheel-wrapper
-    display: flex
-    padding: 0 $picker-lr-padding
-    > div
-      flex-fix()
-      height: 173px
-      overflow: hidden
-      font-size: $fontsize-large-xx
-
-  .cube-picker-wheel-scroll
-    padding: 0
-    margin-top: 68px
-    line-height: 36px
-    list-style: none
-
-  .cube-picker-wheel-item
-    list-style: none
-    height: 36px
-    overflow: hidden
-    white-space: nowrap
-    color: $picker-item-color
-
-  .cube-picker-footer
-    height: 20px
-</style>

src/components/popup/popup.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="cube-popup" :style="{'z-index': zIndex}" :class="rootClass" v-show="isVisible">
-    <div class="cube-popup-mask" @touchmove.prevent @click="maskClick">
-      <slot name="mask"></slot>
-    </div>
-    <div class="cube-popup-container" @touchmove.prevent :class="containerClass">
-      <div class="cube-popup-content" v-if="$slots.default">
-        <slot></slot>
-      </div>
-      <div class="cube-popup-content" v-else v-html="content">
-      </div>
-    </div>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-  import visibilityMixin from '../../common/mixins/visibility'
-  import popupMixin from '../../common/mixins/popup'
-  const COMPONENT_NAME = 'cube-popup'
-  const EVENT_MASK_CLICK = 'mask-click'
-
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [visibilityMixin, popupMixin],
-    props: {
-      type: {
-        type: String,
-        default: ''
-      },
-      mask: {
-        type: Boolean,
-        default: true
-      },
-      content: {
-        type: String,
-        default: ''
-      },
-      center: {
-        type: Boolean,
-        default: true
-      },
-      position: {
-        type: String,
-        default: ''
-      }
-    },
-    computed: {
-      rootClass() {
-        const cls = {
-          'cube-popup_mask': this.mask
-        }
-        if (this.type) {
-          cls[`cube-${this.type}`] = true
-        }
-        return cls
-      },
-      containerClass() {
-        const center = this.center
-        const position = this.position
-        if (position) {
-          return {
-            [`cube-popup-${position}`]: true
-          }
-        }
-        if (center) {
-          return {
-            'cube-popup-center': true
-          }
-        }
-      }
-    },
-    methods: {
-      maskClick(e) {
-        this.$emit(EVENT_MASK_CLICK, e)
-        if (this.maskClosable) {
-          this.hide()
-        }
-      }
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  .cube-popup
-    position: fixed
-    left: 0
-    right:0
-    top: 0
-    bottom: 0
-    z-index: 100
-    pointer-events: none
-  .cube-popup_mask
-    pointer-events: auto
-    .cube-popup-mask
-      display: block
-  .cube-popup-mask, .cube-popup-container
-    position: absolute
-    width: 100%
-    height: 100%
-  .cube-popup-mask
-    display: none
-    overflow: hidden
-    background-color: $popup-mask-bgc
-    opacity: $popup-mask-opacity
-    pointer-events: auto
-    // fix some android webview opacity render bug
-    &::before
-      content: "."
-      display: block
-      width: 1px
-      height: 1px
-      background-color: rgba(0, 0, 0, .1)
-      margin-left: -10px
-  .cube-popup-container
-    transform: translate(100%, 100%)
-  .cube-popup-content
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    box-sizing: border-box
-    transform: translate(-100%, -100%)
-    pointer-events: auto
-  .cube-popup-center,
-  .cube-popup-right,
-  .cube-popup-left
-    .cube-popup-content
-      top: -50%
-      left: -50%
-      width: auto
-      max-width: 100%
-      transform: translate(0, 0)
-  .cube-popup-right,
-  .cube-popup-left
-    .cube-popup-content
-      height: 100%
-      top: -100%
-  .cube-popup-center
-      .cube-popup-content
-        transform: translate(-50%, -50%)
-  .cube-popup-top
-    .cube-popup-content
-      top: -100%
-      left: -100%
-      transform: translate(0, 0)
-  .cube-popup-right
-    .cube-popup-content
-      top: -100%
-      right: 100%
-  .cube-popup-left
-    .cube-popup-content
-      left: -100%
-</style>

src/components/radio/radio-group.vue

@@ -1,106 +0,0 @@
-<template>
-  <div class="cube-radio-group" :class="_groupClass" :data-horz="horizontal">
-    <slot>
-      <cube-radio
-        v-for="(option, index) in options"
-        :key="index"
-        :option="option"
-        :position="position"
-        :hollow-style="hollowStyle"
-        v-model="radioValue">
-      </cube-radio>
-    </slot>
-  </div>
-</template>
-<script type="text/ecmascript-6">
-  import CubeRadio from './radio.vue'
-  const COMPONENT_NAME = 'cube-radio-group'
-
-  const EVENT_INPUT = 'input'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      value: [String, Number],
-      options: {
-        type: Array,
-        default() {
-          return []
-        }
-      },
-      position: {
-        type: String,
-        default: 'left'
-      },
-      horizontal: {
-        type: Boolean,
-        default: false
-      },
-      hollowStyle: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        radioValue: this.value
-      }
-    },
-    watch: {
-      value(newV) {
-        this.radioValue = newV
-      },
-      radioValue(newV) {
-        this.$emit(EVENT_INPUT, newV)
-      }
-    },
-    computed: {
-      _groupClass() {
-        if (!this.horizontal) {
-          return 'border-top-1px border-bottom-1px'
-        }
-      }
-    },
-    components: {
-      CubeRadio
-    }
-  }
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-radio-group
-    z-index: 1
-    overflow: hidden
-    background-color: $radio-group-bgc
-    .cube-radio
-      &:last-child
-        .cube-radio-wrap
-          border-none()
-  .cube-radio-group[data-horz="true"]
-    display: flex
-    padding-left: 0
-    border-1px($radio-group-horizontal-bdc, 2px)
-    border-radius: 2px
-    .cube-radio
-      flex-fix()
-      text-align: center
-      padding-left: 10px
-      padding-right: 10px
-      &:after
-        border-color: $radio-group-horizontal-bdc
-      &:last-child
-        border-none()
-      &:last-child
-        border-none()
-      &[data-pos="right"]
-        .cube-radio-ui
-          position: relative
-          margin-left: .42em
-          order: 1
-        .cube-radio-label
-          margin-right: 0
-    .cube-radio-wrap
-      justify-content: center
-</style>

src/components/radio/radio.vue

@@ -1,190 +0,0 @@
-<template>
-  <div class="cube-radio" :class="_containerClass" :data-pos="position">
-    <label class="cube-radio-wrap" :class="_wrapClass">
-      <input class="cube-radio-input" type="radio" :disabled="option.disabled" v-model="radioValue" :value="computedOption.value">
-      <span class="cube-radio-ui cubeic-round-border">
-        <i></i>
-      </span>
-      <slot>
-        <span class="cube-radio-label">{{computedOption.label}}</span>
-      </slot>
-    </label>
-  </div>
-</template>
-
-<script type="text/ecmascript-6">
-const COMPONENT_NAME = 'cube-radio'
-const EVENT_INPUT = 'input'
-
-export default {
-  name: COMPONENT_NAME,
-  props: {
-    value: [String, Number],
-    option: {
-      type: [String, Object],
-      required: true
-    },
-    position: {
-      type: String,
-      default: 'left'
-    },
-    hollowStyle: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      radioValue: this.value
-    }
-  },
-  watch: {
-    value(newV) {
-      this.radioValue = newV
-    },
-    radioValue(newV) {
-      if (typeof this.value === 'number') {
-        newV = Number(newV)
-      }
-      this.$emit(EVENT_INPUT, newV)
-    }
-  },
-  computed: {
-    computedOption() {
-      const option = this.option
-      if (typeof option === 'string') {
-        return {
-          value: option,
-          label: option
-        }
-      }
-      return option
-    },
-    _containerClass() {
-      const option = this.computedOption
-      return {
-        'cube-radio-hollow': this.hollowStyle,
-        'cube-radio_selected': this.radioValue === option.value,
-        'cube-radio_disabled': option.disabled,
-        'border-right-1px': this.$parent.horizontal
-      }
-    },
-    _wrapClass() {
-      if (!this.$parent.horizontal) {
-        return 'border-bottom-1px'
-      }
-    }
-  }
-}
-</script>
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
-  $ui-width = 1.42em
-  .cube-radio
-    position: relative
-    padding: 0 16px
-    text-align: left
-    font-size: 100%
-    color: $radio-color
-    &[data-pos="right"]
-      .cube-radio-ui
-        margin-right: 0
-        position: absolute
-        right: 0
-      .cube-radio-label
-        margin-right: $ui-width
-  .cube-radio-wrap
-    position: relative
-    display: flex
-    align-items: center
-    box-sizing: border-box
-    width: 100%
-    height: 100%
-    padding: 11px 0
-    line-height: 1.5
-    word-break: break-word
-    word-wrap: break-word
-  .cube-radio-input
-    z-index: 1
-    position: absolute
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    opacity: 0
-  .cube-radio-ui
-    position: relative
-    width: 1em
-    height: 1em
-    margin-right: $ui-width - 1em
-    line-height: 1
-    color: transparent
-    background-color: transparent
-    border-radius: 50%
-    &::before, i
-      transition: all .2s
-    &::before
-      color: $radio-icon-color
-      display: inline-block
-      transform: scale(1.24)
-    i
-      position: absolute
-      top: 0
-      left: 0
-      overflow: hidden
-      width: 100%
-      height: 100%
-      border-radius: 50%
-      transform: scale(.4)
-      &::before
-        content: ""
-        position: absolute
-        top: 50%
-        left: 50%
-        width: 50%
-        height: 50%
-        transform: translate(-50%, -50%) scale(.8)
-        // background-color: transparent
-        border-radius: 50%
-  .cube-radio_selected
-    .cube-radio-ui
-      background-color: $radio-selected-icon-bgc
-      &::before
-        color: transparent
-      i
-        transform: scale(1)
-        // color: $radio-selected-icon-color
-        &::before
-          background-color: $radio-selected-icon-color
-  .cube-radio_disabled
-    .cube-radio-ui
-      background-color: $radio-disabled-icon-bgc
-      &::before, i
-        transition: none
-      &::before
-        color: transparent
-  .cube-radio-hollow
-    &.cube-radio_selected, &.cube-radio_disabled
-      .cube-radio-ui
-        background-color: transparent
-        i::before
-          transform: translate(-50%, -50%) scale(1)
-    &.cube-radio_selected
-      .cube-radio-ui
-        &::before
-          color: $radio-hollow-selected-icon-color
-        i
-          &::before
-            background-color: $radio-hollow-selected-icon-color
-    &.cube-radio_disabled
-      .cube-radio-ui
-        &::before
-          color: $radio-hollow-disabled-icon-color
-      &.cube-radio_selected
-        .cube-radio-ui
-          i
-            &::before
-              background-color: $radio-hollow-disabled-icon-color
-</style>
-

src/components/rate/rate-item.vue

@@ -1,47 +0,0 @@
-<template>
-  <li class="cube-rate-item" :class="{ 'cube-rate-item_active': index <= $parent.tempValue }">
-    <slot>
-      <div class="cube-rate-item-def"></div>
-    </slot>
-  </li>
-</template>
-
-<script type="text/ecmascript-6">
-  const COMPONENT_NAME = 'cube-rate-item'
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      index: {
-        type: Number,
-        default: 0
-      }
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/mixin.styl"
-
-  .cube-rate-item
-    position: relative
-    width: 32px
-    flex: 0 1 auto
-    margin-right: 6px
-    &::after
-      content: ""
-      display: block
-      padding: 50% 0
-    &:last-child
-      margin-right: 0
-    .cube-rate-item-def
-      position: absolute
-      width: 100%
-      height: 100%
-      background-size: 100%
-      background-repeat: no-repeat
-      background-position: center
-      bg-image("evaluation_icon_star_gray")
-  .cube-rate-item_active
-    .cube-rate-item-def
-      bg-image("evaluation_icon_star")
-</style>

src/components/rate/rate.vue

@@ -1,123 +0,0 @@
-<template>
-  <!-- the preventDefault of touchmove is to prevent any default action caused by any touchmove event associated with the same active touch point, such as scrolling. -->
-  <ul ref="rateContainer"
-      class="cube-rate"
-      :class="rateClass"
-      @touchstart.stop="handleStart"
-      @touchmove.stop.prevent="handleMove"
-      @touchend.stop="handleEnd"
-      @mousedown.stop="handleStart"
-      @mousemove.stop="handleMove"
-      @mouseup.stop="handleEnd">
-      <slot>
-        <cube-rate-item v-for="n in max" :key="n" :index="n"></cube-rate-item>
-      </slot>
-    </ul>
-</template>
-
-<script type="text/ecmascript-6">
-  import CubeRateItem from './rate-item.vue'
-  const COMPONENT_NAME = 'cube-rate'
-  const EVENT_INPUT = 'input'
-
-  const EVENT_TYPE_MOUSE = 'mouse'
-
-  export default {
-    name: COMPONENT_NAME,
-    props: {
-      value: {
-        type: Number,
-        default: 0
-      },
-      max: {
-        type: Number,
-        default: 5
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      justify: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data() {
-      return {
-        tempValue: this.value
-      }
-    },
-    created() {
-      this.mousePressed = false
-    },
-    computed: {
-      rateClass() {
-        return this.justify && 'cube-rate-justify'
-      }
-    },
-    watch: {
-      value(val) {
-        if (val !== this.tempValue) {
-          this.tempValue = val
-        }
-      }
-    },
-    methods: {
-      handleStart(e) {
-        if (!this.disabled) {
-          if (e.type.indexOf(EVENT_TYPE_MOUSE) > -1) {
-            this.mousePressed = true
-            document.addEventListener('mouseup', this.handleEnd)
-            document.addEventListener('mousemove', this.handleMove)
-          }
-          const rect = this.$refs.rateContainer.getBoundingClientRect()
-          this.left = rect.left
-          this.containerWidth = rect.width
-        }
-      },
-      handleMove(e) {
-        if (!this.disabled && (e.type.indexOf(EVENT_TYPE_MOUSE) === -1 || this.mousePressed)) {
-          this.computeTempValue(e.type.indexOf(EVENT_TYPE_MOUSE) === -1 ? e.touches[0] : e)
-        }
-      },
-      handleEnd(e) {
-        if (!this.disabled && (e.type.indexOf(EVENT_TYPE_MOUSE) === -1 || this.mousePressed)) {
-          if (e.type.indexOf(EVENT_TYPE_MOUSE) > -1) {
-            this.mousePressed = false
-            document.removeEventListener('mouseup', this.handleEnd)
-            document.removeEventListener('mousemove', this.handleMove)
-          }
-          this.computeTempValue(e.type.indexOf(EVENT_TYPE_MOUSE) > -1 ? e : e.changedTouches[0])
-          this.$emit(EVENT_INPUT, this.tempValue)
-        }
-      },
-      computeTempValue(touch) {
-        let leftAmount = Math.ceil((touch.clientX - this.left) / this.containerWidth * this.max)
-        if (leftAmount > 0 && leftAmount <= this.max) {
-          this.tempValue = leftAmount
-        } else if (leftAmount <= 0) {
-          this.tempValue = 0
-        } else {
-          this.tempValue = this.max
-        }
-      }
-    },
-    components: {
-      CubeRateItem
-    }
-  }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-
-  .cube-rate
-    list-style: none
-    display: inline-flex
-    vertical-align: top
-    flex-wrap: nowrap
-    max-width: 100%
-  .cube-rate-justify
-    width: 100%
-    justify-content: space-between
-</style>