How to use yox - 10 common examples

textareaStyle() {

      let size = this.get('size')
      let autoSize = this.get('autoSize')

      // 单行的高度
      const ROW_HEIGHT = fontSizes[size] * 1.5

      // 上下 padding + border
      const PADDING_VERTICAL = 2 * (1 + sizes[size])

      if (autoSize) {
        let rows = this.get('rows')
        let value = this.get('value')
        if (Yox.is.object(autoSize)) {
          rows = value ? value.split('\n').length : autoSize.minRows
          return `min-height: ${autoSize.minRows * ROW_HEIGHT + PADDING_VERTICAL}px;max-height: ${autoSize.maxRows * ROW_HEIGHT + PADDING_VERTICAL}px;height: ${rows * ROW_HEIGHT + PADDING_VERTICAL}px;`
        }

        rows = value ? value.split('\n').length : 1
        return `min-height: ${ROW_HEIGHT + PADDING_VERTICAL}px;height: ${rows * ROW_HEIGHT + PADDING_VERTICAL}px;`
      }

      return `height: ${this.get('rows') * ROW_HEIGHT + PADDING_VERTICAL}px;`

    }
  },

// import './style/Divider.styl'

import {
  FALSE,
  RAW_STRING,
  RAW_BOOLEAN,
  RAW_LEFT,
  RAW_RIGHT,
  RAW_CENTER,
} from '../constant'

import {
  oneOf,
} from '../util'

export default Yox.define({

  template,

  name: '${prefix}Divider',

  propTypes: {
    vertical: {
      type: RAW_BOOLEAN,
      value: FALSE,
    },
    dashed: {
      type: RAW_BOOLEAN,
      value: FALSE,
    },
    align: {
      type: oneOf([RAW_CENTER, RAW_LEFT, RAW_RIGHT]),

import Yox from 'yox'

import template from './template/Exception.hbs'
// import './style/Exception.styl'

import {
  RAW_STRING,
} from '../constant'

import {
  oneOf,
} from '../util'

export default Yox.define({

  template,

  name: '${prefix}Exception',

  propTypes: {
    title: {
      type: RAW_STRING,
    },
    subTitle: {
      type: RAW_STRING,
    },
    status: {
      type: oneOf([403, 404, 500]),
    },
    className: {

return
      }
      // 阻止事件默认行为，避免光标的跳动
      switch ((event.originalEvent as KeyboardEvent).keyCode) {
        case 38:
          me.up()
          event.prevent()
          break
        case 40:
          me.down()
          event.prevent()
          break
      }
    }

    Yox.dom.on(
      DOCUMENT,
      RAW_EVENT_KEYDOWN,
      onKeydown
    )

    me.on(
      RAW_EVENT_BEFORE_DESTROY,
      function (event) {
        if (event.phase === Yox.Event.PHASE_CURRENT) {
          Yox.dom.off(
            DOCUMENT,
            RAW_EVENT_KEYDOWN,
            onKeydown
          )
        }
      }

}
      }
      else {
        // 默认必传
        if (rule.required !== false) {
          errorReason = 'required'
        }
        else {
          continue
        }
      }

      if (errorReason) {

        let message = messages && messages[key] && messages[key][errorReason]
        if (Yox.is.string(message)) {
          errors[key] = message
        }
        else {
          errors[key] = errorReason
        }

      }

    }

    if (Object.keys(errors).length > 0) {
      return errors
    }

  }
}

function addNotification(status: string,  data: Data, onClose?: Function) {

  let props: Data = { status }

  // 先写 config，可支持 data 覆盖全局配置
  Yox.object.extend(props, config)

  if (Yox.is.string(data)) {
    props.content = data
  }
  else {
    Yox.object.extend(props, data)
  }

  const instance: any = new Yox(
    Yox.object.extend(
      {
        el: '#${prefix}notification-wrapper',
        props,
      },
      Notification
    )
  )

  instance.on('hide.notification', function () {
    if (onClose) {
      onClose()
    }

function addNotification(status: string,  data: Data, onClose?: Function) {

  let props: Data = { status }

  // 先写 config，可支持 data 覆盖全局配置
  Yox.object.extend(props, config)

  if (Yox.is.string(data)) {
    props.content = data
  }
  else {
    Yox.object.extend(props, data)
  }

  const instance: any = new Yox(
    Yox.object.extend(
      {
        el: '#${prefix}notification-wrapper',
        props,
      },
      Notification
    )

function addNotification(status: string,  data: Data, onClose?: Function) {

  let props: Data = { status }

  // 先写 config，可支持 data 覆盖全局配置
  Yox.object.extend(props, config)

  if (Yox.is.string(data)) {
    props.content = data
  }
  else {
    Yox.object.extend(props, data)
  }

  const instance: any = new Yox(
    Yox.object.extend(
      {
        el: '#${prefix}notification-wrapper',
        props,
      },
      Notification
    )
  )

  instance.on('hide.notification', function () {
    if (onClose) {
      onClose()
    }
    instance.destroy()
  })

LoadingBar
    )
  )

  return instance

}

function remove() {
  if (instance) {
    instance.destroy()
    instance = UNDEFINED
  }
}

(Yox.prototype as any).$loadingBar = {
  // 开始从 0 显示进度条，并自动加载进度
  start(options?: Config) {
    if (instance) {
      remove()
    }
    return add(options)
  },
  // 结束进度条，自动补全剩余进度
  finish() {
    if (instance) {
      instance.set('percent', 100)
      setTimeout(remove, 300)
    }
  },
  // 精确加载到指定的进度
  update(data: Config) {

export function onTransitionEnd(el: HTMLElement, callback: () => void) {
  // 如果 el 已经被隐藏，则直接调用 callback
  if (transitionEnd && (el.offsetWidth || el.offsetWidth)) {
    Yox.dom.on(
      el,
      transitionEnd,
      function (event: CustomEventInterface) {
        Yox.dom.off(el, transitionEnd, event.listener as Listener)
        callback()
      }
    )
  }
  else {
    Yox.nextTick(callback)
  }
}