<template>
  <div>
    <group
      title="Form"
      title-color="#5890ff"
    >
      <cell
        title="address"
        link="component/x-address"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe61b;</span>
      </cell>
      <cell
        title="calendar"
        link="component/calendar"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe62b;</span>
      </cell>
      <cell
        title="cell"
        link="component/cell"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe62a;</span>
      </cell>
      <cell
        title="checkIcon"
        link="component/checkIcon"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe61d;</span>
      </cell>
      <cell
        title="checklist"
        link="component/checklist"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe61d;</span>
      </cell>
      <cell
        title="checker"
        link="component/checker"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe655;</span>
      </cell>
      <cell
        title="color-picker"
        link="component/color-picker"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="color:#f2c400;"
        >&#xe63f;</span>
      </cell>
      <cell
        title="datetime"
        link="component/datetime"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe60a;</span>
      </cell>
      <cell
        title="inline-calendar"
        link="component/inline-calendar"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe62b;</span>
      </cell>
      <cell
        title="radio"
        link="component/radio"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe60f;</span>
      </cell>
      <cell
        title="range"
        link="component/range"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe60b;</span>
      </cell>
      <cell
        title="rater"
        link="component/rater"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe606;</span>
      </cell>
      <cell
        title="selector"
        link="component/selector"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe607;</span>
      </cell>
      <cell
        title="selector-list"
        link="component/selector-list"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe63b;</span>
      </cell>
      <cell
        title="switch"
        link="component/switch"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe61c;</span>
      </cell>
      <cell
        title="x-button"
        link="component/x-button"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe616;</span>
      </cell>
      <cell
        title="x-input"
        link="component/x-input"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe614;</span>
      </cell>
      <cell
        title="x-textarea"
        link="component/textarea"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe611;</span>
      </cell>
      <cell
        title="x-number"
        link="component/number"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe605;</span>
      </cell>
      <cell
        title="upload-pic"
        link="component/upload-pic"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe602;</span>
      </cell>
    </group>

    <group
      title="Message && Tip"
      title-color="#5890ff"
    >
      <cell
        title="x-alert"
        link="component/x-alert"
        value="Based on Dialog"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe603;</span>
      </cell>
      <cell
        title="confirm"
        link="component/confirm"
        value="Based on Dialog"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe608;</span>
      </cell>
      <cell
        title="x-dialog"
        link="component/x-dialog"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe608;</span>
      </cell>
      <cell
        title="loading"
        link="component/loading"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe610;</span>
      </cell>
      <cell
        title="toast"
        link="component/toast"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe625;</span>
      </cell>
      <cell
        title="popover"
        link="component/popover"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe65f;</span>
      </cell>
      <cell
        title="actionsheet"
        link="component/actionsheet"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe624;</span>
      </cell>
    </group>

    <group
      title="UI"
      title-color="#5890ff"
    >
      <cell
        title="badge"
        link="component/badge"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="color:#f74c31;"
        >&#xe65b;</span>
      </cell>
      <cell
        title="blur"
        link="component/blur"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe640;</span>
      </cell>
      <cell
        title="button-tab"
        link="component/button-tab"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="font-size: 15px;vertical-align: 6px;"
        >&#xe659;</span>
      </cell>
      <cell
        title="circle"
        link="component/circle"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe63d;</span>
      </cell>
      <cell
        title="countup"
        link="component/countup"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe63e;</span>
      </cell>
      <cell
        title="countdown"
        link="component/countdown"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe653;</span>
      </cell>
      <cell
        title="number-roller"
        link="component/number-roller"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe653;</span>
      </cell>
      <cell
        title="clocker"
        link="component/clocker"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe620;</span>
      </cell>
      <cell
        title="flexbox"
        link="component/flexbox"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe61f;</span>
      </cell>
      <cell
        title="icon"
        link="component/icon"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe619;</span>
      </cell>
      <cell
        title="divider"
        link="component/divider"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe65d;</span>
      </cell>
      <cell
        title="panel"
        link="component/panel"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe658;</span>
      </cell>
      <cell
        title="card"
        link="component/card"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe658;</span>
      </cell>
      <cell
        title="previewer"
        link="component/previewer"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe65c;</span>
      </cell>
      <cell
        title="picker"
        link="component/picker"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe627;</span>
      </cell>
      <cell
        title="popup"
        link="component/popup"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe61e;</span>
      </cell>
      <cell
        title="popup-picker"
        link="component/popup-picker"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe626;</span>
      </cell>
      <!--<cell title="progress" link="component/progress">
        <span class="demo-icon" slot="icon">&#xe618;</span>
      </cell>-->
      <cell
        title="x-progress"
        link="component/x-progress"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe618;</span>
      </cell>
      <cell
        title="reddot"
        link="component/reddot"
      >
        <span
          slot="icon"
          class="demo-icon"
          style="color:#f74c31;"
        >&#xe63f;</span>
      </cell>
      <cell
        title="swiper"
        link="component/swiper"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe612;</span>
      </cell>
      <cell
        title="sticky"
        link="component/sticky"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe623;</span>
      </cell>
      <cell
        title="search"
        link="component/search"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe63b;</span>
      </cell>
      <cell
        title="spinner"
        link="component/spinner"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe610;</span>
      </cell>
      <cell
        title="tab"
        link="component/tab"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe615;</span>
      </cell>
      <cell
        title="tabbar"
        link="component/tabbar"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe657;</span>
      </cell>
      <cell
        title="tabbar with link"
        link="component/tabbar-link"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe657;</span>
      </cell>
      <cell
        title="timeline"
        link="component/timeline"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe656;</span>
      </cell>
      <cell
        title="steps"
        link="component/steps"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe65e;</span>
      </cell>
      <cell
        title="x-header"
        link="component/x-header"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe654;</span>
      </cell>
      <cell
        title="verify-code"
        link="component/verify-code"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe610;</span>
      </cell>
    </group>

    <group
      title="Scroller"
      title-color="#5890ff"
    >
      <cell
        title="pulldown"
        link="component/pulldown"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe64f;</span>
      </cell>
      <cell
        title="pullup"
        link="component/pullup"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe650;</span>
      </cell>
      <cell
        title="pulldown & pullup"
        link="component/pulldown-pullup"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe64f;</span>
      </cell>
      <cell
        title="scroller"
        link="component/scroller"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe641;</span>
      </cell>
      <cell
        title="scroller-page"
        link="component/scroller-page"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe641;</span>
      </cell>
      <cell
        title="multi full-height scroller"
        link="component/scroller/full"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe641;</span>
      </cell>
      <cell
        title="Swiper within Scroller"
        link="component/scroller-swiper"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe641;</span>
      </cell>
      <cell
        title="Scroller with XHeader"
        link="component/scroller/header"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe641;</span>
      </cell>
    </group>

    <group
      title="Other"
      title-color="#5890ff"
    >
      <cell
        title="comment"
        value="评论"
        link="component/comment"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe652;</span>
      </cell>
      <cell
        title="emotion"
        value="微信表情"
        link="component/emotion"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe63c;</span>
      </cell>
      <cell
        title="masker"
        link="component/masker"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe651;</span>
      </cell>
      <cell
        title="orientation"
        value="横竖屏切换提示"
        link="component/orientation"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe628;</span>
      </cell>
      <cell
        title="shake"
        value="摇一摇"
        link="component/shake"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe629;</span>
      </cell>
      <cell
        title="x-img"
        value="延迟加载及webp切换支持"
        link="component/x-img"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe602;</span>
      </cell>
      <cell
        title="qrcode"
        link="component/qrcode"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe65a;</span>
      </cell>
    </group>

    <group
      title="CSS Utils"
      title-color="#5890ff"
    >
      <cell
        title="1px"
        value="1px解决方案(FrozenUI)"
        link="component/1px"
      />
      <cell
        title="Center(Based on Flexbox)"
        value="水平垂直居中"
        link="component/center"
      />
      <cell
        title="Close icon"
        value="关闭字符"
        link="component/close"
      />
    </group>

    <group
      title="Plugins"
      title-color="#5890ff"
    >
      <cell
        title="Device"
        value="简单设备信息检测"
        link="plugin/device"
      />
    </group>

    <group
      v-if="showTodo"
      title="TODO"
      title-color="#5890ff"
    >
      <cell
        title="短信验证组件"
        link="component/address"
      />
      <cell
        title="图片验证码"
        link="component/rater"
      />
      <cell
        title="Calendar"
        link="component/calendar"
      />
    </group>

    <group
      title="Demo"
      title-color="#5890ff"
    >
      <cell
        title="微信设置页面"
        link="demo/wechat"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe600;</span>
      </cell>
      <cell
        title="小蚁摄像设置"
        link="demo/yi"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe622;</span>
      </cell>
      <cell
        title="键盘"
        link="component/keyboard"
      />
      <cell
        title="搜索"
        link="component/Search"
      />
    </group>

    <group
      title="Todo"
      title-color="#5890ff"
      style="display: none;"
    >
      <cell
        title="Step"
        link="component/step"
      >
        <span
          slot="icon"
          class="demo-icon"
        >&#xe62c;</span>
      </cell>
    </group>
  </div>
</template>

<script>
import { Cell, Group } from '../components/_index'

/**
* fix firefox cell bottom border missing
*/

if (/firefox/i.test(navigator.userAgent)) {
  document.querySelector('body').classList.add('firefox')
}

export default {
  components: {
    Cell,
    Group
  },
  data () {
    return {
      showTodo: true
    }
  }
}
</script>

<style lang="less">
@import './style.less';
.center {
  margin-top: 15px;
  text-align: center;
}

body {
  font-family: Helvetica, sans-serif;
  background-color: #eee;
}

.firefox .weui_cells:after {
  transform-origin: 50% 50%;
}
</style>
