riot tag component 'message' and 'pagination', basic style support by bootstrap 3

riot-message.tag

<message>
  <div class="msg-box bg-{ opts.type || 'info' } fade-{ fadeMode }" if={ opts.text }>
    <button type="button" class="close" onclick={ closeBox } if={ opts.close }>
      <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
    </button>

    <h4 class="msg-title" if={ opts.title }>{ opts.title }</h4>

    <ul class="msg-body">
      <!-- <li><yield/></li> -->
      <li>{ opts.text || '' }</li>
    </ul>
  </div>
  <script>
    this.doClose = false
    this.fadeMode = 'in' // in/out

    /**
     * @usage:
     * ```
     *   this.message = {
     *     type: 'danger',
     *     title: 'OO,出错啦！',
     *     text: 'An error ...'
     *   }
     *   <message type={ message.type } title={ message.title } text={ message.text } close={ 5 }></message>
     * ```
     * @param string opts.title Message title text
     * @param string opts.type Allow setting 'info' 'success' 'warning' 'danger'
     * @param string opts.text  Message text
     * @param boolean|int opts.close  Can close message box. If is int(0~10), will auto close by timeout 'opts.close'
     */

    this.on('update', function () {
      // enable auto close box
      if ( !this.doClose && opts.text && typeof opts.close == 'number' && opts.close > 0 && opts.close < 10 ) {
        const tag = this
        setTimeout(function(){
          tag.doClose = true
          // tag.fadeMode = 'out'
          tag.update()
        }, opts.close * 1000)
      }

      // do close box, rest data
      if (this.doClose && opts.text) {
        opts.title = ''
        opts.text = ''
        this.fadeMode = 'in'
        this.doClose = false
      }
    })

    this.closeBox = (e) => {
      this.doClose = true
    }
  </script>

  <style>
    @-webkit-keyframes fadeIn {
      0%   {opacity: 0; }   /*初始状态 透明度为0*/
      50%  {opacity: 0.5; } /*中间状态 透明度为0.5*/
      100% {opacity: 1; }   /*结尾状态 透明度为1*/
    }
    @-webkit-keyframes fadeOut {
      0%   {opacity: 1;}
      70%  {opacity: 1;}
      90%  {opacity: 1; -webkit-transform: translateY(0px);}
      100% {opacity: 0; -webkit-transform: translateY(-30px);}
    }

    .fade-in {
      animation-name: fadeIn; /*动画名称*/
      animation-duration: 1s; /*动画持续时间*/
      animation-iteration-count: 1; /*动画次数*/
      /* 以上相当于 animation:fadeIn 2s 1; */
      animation-delay: 0s; /*延迟时间*/

      -webkit-animation-name: fadeIn;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-delay: 0s;
    }
    .fade-out {
      animation:fadeOut 0.5s 1;
      animation-fill-mode: forwards;
      animation-delay:1s;

      -webkit-animation:fadeOut 0.5s 1;
      -webkit-animation-delay:1s; /* Safari and Chrome */
      -webkit-animation-fill-mode: forwards;
    }

    :scope {
      margin-bottom: 15px;
    }
    div.msg-box {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    h4.msg-title {
      padding-left: 15px;
    }
    button.close {
      margin-right: 10px;
    }
  </style>
</message>

riot-pagination.tag

<pagination>
  <nav class="table-nav { opts.right ? 'pull-right' : '' }">
    <!--
    <a href="#" class="btn btn-sm btn-default {'disabled':opts.current===1}" onclick="{ page.bind(null, opts.current-1) }">{ opts.firstText || 'Prev' }</a>
    <a href="#" class="btn btn-sm btn-default {'disabled':opts.current===opts.pages}" onclick="{ page.bind(null, opts.current+1) }">{ opts.nextText || 'Next' }</a>
 -->
    <ul class="pagination-sm pagination">
      <li if="{ opts.pages>0 && opts.current>1 }" onclick="{ page.bind(null, 1) }">
          <a href="#">1</a>
      </li>
      <li if="{ opts.pages>3 && opts.current>3 }">
          <span>...</span>
      </li>
      <li if="{ opts.pages>0 && opts.current>2 }" onclick="{ page.bind(null, opts.current-1) }">
          <a href="#">{ opts.current-1 }</a>
      </li>
      <!-- onclick="{ page.bind(null, opts.current) }" -->
      <li class="active" if="{ opts.pages>0 }" >
          <a href="javascript:void(0);" class="{ 'is-loading': opts.loading }">{ opts.loading ? 'loading ...' : opts.current }</a>
      </li>
      <li if="{ opts.current<opts.pages }" onclick="{ page.bind(null, opts.current+1) }">
          <a href="#">{ opts.current+1 }</a>
      </li>
      <li if="{ (opts.current+2)<opts.pages }">
          <span>...</span>
      </li>
      <li if="{ (opts.current+1)<opts.pages }" onclick="{ page.bind(null, opts.pages) }">
          <a href="#">{ opts.pages }</a>
      </li>
    </ul>
  </nav>

  <div class="pagination-info { opts.right ? 'pull-right' : '' }" if={ opts.showInfo }>
    总计 { opts.total } 条, 每页 { opts.size } 条, 共 { opts.pages } 页 &nbsp;
  </div>

  <script>
      /**
       * USAGE:
       * ```
       *  // html
       *  <pagination
       *   show-info={ true } right={ true } loading={ pageLoading }
       *   total={ pageInfo.total } pages={ pageInfo.pages }
       *   size={ pageInfo.size } current={ pageInfo.current } change-page={ changePage }
       *   ></pagination>
       *
       * // script
       * this.pageLoading = false
       * this.pageInfo = {
       *   total: 0,
       *   size: 15,
       *   pages: 1,
       *   current: 1
       * }
       * this.changePage = function(index) {
       *   const params = $('#search-form').serializeArray()
       *   tag.fetchData(index, params)
       * }
       *
       * ```
       * @param {Number} opts.total optional 总记录数
       * @param {Number} opts.pages required 总页数
       * @param {Number} opts.current required 当前页码
       *
       * @param {(index)=>void} opts.changePage required 设置点击页码时的回调
       *
       * @param {Boolean} opts.showInfo optional
       * @param {Boolean} opts.loading optional
       *
       * @param {string} opts.firstText optional
       * @param {string} opts.lastText optional
       */
      this.page = function(index, e){
          e.preventDefault()
          if(typeof opts.changePage === 'function'){
              opts.changePage(index)
          }
      }

  </script>
  <style>
    a.is-loading {
    }
  </style>
</pagination>