pagination@v0.0.1

components/index.js

@@ -11,3 +11,5 @@ export { default as Grid } from './grid'
 export { default as Rate } from './rate'
 
 export { default as ToolTip } from './tooltip'
+
+export { default as Pagination } from './pagination'

components/pagination/KeyCode.js

@@ -0,0 +1,14 @@
+export default {
+  ZERO: 48,
+  NINE: 57,
+
+  NUMPAD_ZERO: 96,
+  NUMPAD_NINE: 105,
+
+  BACKSPACE: 8,
+  DELETE: 46,
+  ENTER: 13,
+
+  ARROW_UP: 38,
+  ARROW_DOWN: 40,
+}

components/pagination/Pager.vue

@@ -0,0 +1,44 @@
+<template>
+  <li
+    :class="classes"
+    @click="handleClick"
+    @keyPress="handleKeyPress"
+    :title="showTitle ? 'page' : null">
+    <a>{{page}}</a>
+  </li>
+</template>
+<script>
+export default {
+  name: 'Page',
+  props: {
+    rootPrefixCls: String,
+    page: Number,
+    active: Boolean,
+    showTitle: Boolean,
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    classes () {
+      const prefixCls = `${this.rootPrefixCls}-item`
+      let cls = `${prefixCls} ${prefixCls}-${this.page}`
+      if (this.active) {
+        cls = `${cls} ${prefixCls}-active`
+      }
+      if (this.className) {
+        cls = `${cls} ${this.className}`
+      }
+      return cls
+    },
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click', this.page)
+    },
+    handleKeyPress (event) {
+      this.$emit('keyPress', event, this.handleClick, this.page)
+    },
+  },
+}
+</script>

components/pagination/demo/pagination.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div style="margin-bottom:10px">
+      <pagination :simple="simple" :current="current" :total="total"></pagination>
+    </div>
+    <div style="margin-bottom:10px">
+      <pagination :current="current" :total="total"></pagination>
+      <vc-button @click="changeValue">改值</vc-button>
+    </div>
+    <div>
+      <pagination v-model="current" :total="total"></pagination>
+      <vc-button @click="changeValue">改值</vc-button>
+      <vc-button @click="getValue">当前值</vc-button>
+    </div>
+  </div>
+</template>
+<script>
+import '../style'
+import { Pagination, Button } from 'antd/index'
+export default {
+  data () {
+    return {
+      simple: true,
+      current: 1,
+      total: 500,
+    }
+  },
+  methods: {
+    changeValue () {
+      this.current = 4
+    },
+    getValue () {
+      alert(this.current)
+    },
+  },
+  components: {
+    Pagination,
+    vcButton: Button,
+  },
+}
+</script>

components/pagination/index.js

@@ -0,0 +1,3 @@
+import Pagination from './Pagination'
+
+export default Pagination

components/pagination/locale/ar_EG.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ الصفحة',
+  jump_to: 'الذهاب إلى',
+  jump_to_confirm: 'تأكيد',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'الصفحة السابقة',
+  next_page: 'الصفحة التالية',
+  prev_5: 'خمس صفحات سابقة',
+  next_5: 'خمس صفحات تالية',
+  prev_3: 'ثلاث صفحات سابقة',
+  next_3: 'ثلاث صفحات تالية',
+};

components/pagination/locale/bg_BG.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ страница',
+  jump_to: 'Към',
+  jump_to_confirm: 'потвърждавам',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Предишна страница',
+  next_page: 'Следваща страница',
+  prev_5: 'Предишни 5 страници',
+  next_5: 'Следващи 5 страници',
+  prev_3: 'Предишни 3 страници',
+  next_3: 'Следващи 3 страници',
+};

components/pagination/locale/ca_ES.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pàgina',
+  jump_to: 'Anar a',
+  jump_to_confirm: 'Confirma',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Pàgina prèvia',
+  next_page: 'Pàgina següent',
+  prev_5: '5 pàgines prèvies',
+  next_5: '5 pàgines següents',
+  prev_3: '3 pàgines prèvies',
+  next_3: '3 pàgines següents',
+};

components/pagination/locale/cs_CZ.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ strana',
+  jump_to: 'Přejít',
+  jump_to_confirm: 'potvrdit',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Předchozí strana',
+  next_page: 'Následující strana',
+  prev_5: 'Předchozích 5 stran',
+  next_5: 'Následujících 5 stran',
+  prev_3: 'Předchozí 3 strany',
+  next_3: 'Následující 3 strany',
+};

components/pagination/locale/da_DK.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ side',
+  jump_to: 'Gå til',
+  jump_to_confirm: 'bekræft',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Forrige Side',
+  next_page: 'Næste Side',
+  prev_5: 'Forrige 5 Sider',
+  next_5: 'Næste 5 Sider',
+  prev_3: 'Forrige 3 Sider',
+  next_3: 'Næste 3 Sider',
+};

components/pagination/locale/de_DE.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ Seite',
+  jump_to: 'Gehe zu',
+  jump_to_confirm: 'bestätigen',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Vorherige Seite',
+  next_page: 'Nächste Seite',
+  prev_5: '5 Seiten zurück',
+  next_5: '5 Seiten vor',
+  prev_3: '3 Seiten zurück',
+  next_3: '3 Seiten vor',
+};

components/pagination/locale/el_GR.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ σελίδα',
+  jump_to: 'Μετάβαση',
+  jump_to_confirm: 'επιβεβαιώνω',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Προηγούμενη Σελίδα',
+  next_page: 'Επόμενη Σελίδα',
+  prev_5: 'Προηγούμενες 5 Σελίδες',
+  next_5: 'Επόμενες 5 σελίδες',
+  prev_3: 'Προηγούμενες 3 Σελίδες',
+  next_3: 'Επόμενες 3 Σελίδες',
+};

components/pagination/locale/en_GB.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Goto',
+  jump_to_confirm: 'confirm',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Previous Page',
+  next_page: 'Next Page',
+  prev_5: 'Previous 5 Pages',
+  next_5: 'Next 5 Pages',
+  prev_3: 'Previous 3 Pages',
+  next_3: 'Next 3 Pages',
+};

components/pagination/locale/en_US.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Goto',
+  jump_to_confirm: 'confirm',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Previous Page',
+  next_page: 'Next Page',
+  prev_5: 'Previous 5 Pages',
+  next_5: 'Next 5 Pages',
+  prev_3: 'Previous 3 Pages',
+  next_3: 'Next 3 Pages',
+};

components/pagination/locale/es_ES.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ página',
+  jump_to: 'Ir a',
+  jump_to_confirm: 'confirmar',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Página anterior',
+  next_page: 'Página siguiente',
+  prev_5: '5 páginas previas',
+  next_5: '5 páginas siguientes',
+  prev_3: '3 páginas previas',
+  next_3: '3 páginas siguientes',
+};

components/pagination/locale/et_EE.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ leheküljel',
+  jump_to: 'Hüppa',
+  jump_to_confirm: 'Kinnitage',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Eelmine leht',
+  next_page: 'Järgmine leht',
+  prev_5: 'Eelmised 5 lehekülge',
+  next_5: 'Järgmised 5 lehekülge',
+  prev_3: 'Eelmised 3 lehekülge',
+  next_3: 'Järgmised 3 lehekülge',
+};

components/pagination/locale/fa_IR.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ صفحه',
+  jump_to: 'برو به',
+  jump_to_confirm: 'تایید',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'صفحه قبلی',
+  next_page: 'صفحه بعدی',
+  prev_5: '۵ صفحه قبلی',
+  next_5: '۵ صفحه بعدی',
+  prev_3: '۳ صفحه قبلی',
+  next_3: '۳ صفحه بعدی',
+};

components/pagination/locale/fi_FI.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ sivu',
+  jump_to: 'Mene',
+  jump_to_confirm: 'Potvrdite',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Edellinen sivu',
+  next_page: 'Seuraava sivu',
+  prev_5: 'Edelliset 5 sivua',
+  next_5: 'Seuraavat 5 sivua',
+  prev_3: 'Edelliset 3 sivua',
+  next_3: 'Seuraavat 3 sivua',
+};

components/pagination/locale/fr_BE.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Aller à',
+  jump_to_confirm: 'confirmer',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Page précédente',
+  next_page: 'Page suivante',
+  prev_5: '5 Pages précédentes',
+  next_5: '5 Pages suivantes',
+  prev_3: '3 Pages précédentes',
+  next_3: '3 Pages suivantes',
+};

components/pagination/locale/fr_FR.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ page',
+  jump_to: 'Aller à',
+  jump_to_confirm: 'confirmer',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Page précédente',
+  next_page: 'Page suivante',
+  prev_5: '5 Pages précédentes',
+  next_5: '5 Pages suivantes',
+  prev_3: '3 Pages précédentes',
+  next_3: '3 Pages suivantes',
+};

components/pagination/locale/is_IS.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ síðu',
+  jump_to: 'Síða',
+  jump_to_confirm: 'staðfest',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Fyrri síða',
+  next_page: 'Næsta síða',
+  prev_5: 'Til baka 5 síður',
+  next_5: 'Áfram 5 síður',
+  prev_3: 'Til baka 3 síður',
+  next_3: 'Áfram 3 síður',
+};

components/pagination/locale/it_IT.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pagina',
+  jump_to: 'vai a',
+  jump_to_confirm: 'Conferma',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Pagina precedente',
+  next_page: 'Pagina successiva',
+  prev_5: 'Precedente 5 pagine',
+  next_5: 'Prossime 5 pagine',
+  prev_3: 'Precedente 3 pagine',
+  next_3: 'Prossime 3 pagine',
+};

components/pagination/locale/ja_JP.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ ページ',
+  jump_to: '移動',
+  jump_to_confirm: '確認する',
+  page: 'ページ',
+
+  // Pagination.jsx
+  prev_page: '前のページ',
+  next_page: '次のページ',
+  prev_5: '前 5ページ',
+  next_5: '次 5ページ',
+  prev_3: '前 3ページ',
+  next_3: '次 3ページ',
+};

components/pagination/locale/ko_KR.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ 쪽',
+  jump_to: '이동하기',
+  jump_to_confirm: '확인하다',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: '이전 페이지',
+  next_page: '다음 페이지',
+  prev_5: '이전 5 페이지',
+  next_5: '다음 5 페이지',
+  prev_3: '이전 3 페이지',
+  next_3: '다음 3 페이지',
+};

components/pagination/locale/nb_NO.js

@@ -0,0 +1,14 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ side',
+  jump_to: 'Gå til side',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Forrige side',
+  next_page: 'Neste side',
+  prev_5: '5 forrige',
+  next_5: '5 neste',
+  prev_3: '3 forrige',
+  next_3: '3 neste',
+};

components/pagination/locale/nl_BE.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pagina',
+  jump_to: 'Ga naar',
+  jump_to_confirm: 'bevestigen',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Vorige pagina',
+  next_page: 'Volgende pagina',
+  prev_5: 'Vorige 5 pagina\'s',
+  next_5: 'Volgende 5 pagina\'s',
+  prev_3: 'Vorige 3 pagina\'s',
+  next_3: 'Volgende 3 pagina\'s',
+};

components/pagination/locale/nl_NL.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ pagina',
+  jump_to: 'Ga naar',
+  jump_to_confirm: 'bevestigen',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Vorige pagina',
+  next_page: 'Volgende pagina',
+  prev_5: 'Vorige 5 pagina\'s',
+  next_5: 'Volgende 5 pagina\'s',
+  prev_3: 'Vorige 3 pagina\'s',
+  next_3: 'Volgende 3 pagina\'s',
+};

components/pagination/locale/pl_PL.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ stronę',
+  jump_to: 'Idź do',
+  jump_to_confirm: 'potwierdzać',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Poprzednia strona',
+  next_page: 'Następna strona',
+  prev_5: 'Poprzednie 5 stron',
+  next_5: 'Następne 5 stron',
+  prev_3: 'Poprzednie 3 strony',
+  next_3: 'Następne 3 strony',
+};

components/pagination/locale/pt_BR.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ páginas',
+  jump_to: 'Vá até',
+  jump_to_confirm: 'confirme',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Página anterior',
+  next_page: 'Próxima página',
+  prev_5: '5 páginas anteriores',
+  next_5: '5 próximas páginas',
+  prev_3: '3 páginas anteriores',
+  next_3: '3 próximas páginas',
+};

components/pagination/locale/pt_PT.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ página',
+  jump_to: 'Saltar',
+  jump_to_confirm: 'confirmar',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Página Anterior',
+  next_page: 'Página Seguinte',
+  prev_5: 'Recuar 5 Páginas',
+  next_5: 'Avançar 5 Páginas',
+  prev_3: 'Recuar 3 Páginas',
+  next_3: 'Avançar 3 Páginas',
+};

components/pagination/locale/ru_RU.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/странице',
+  jump_to: 'Перейти',
+  jump_to_confirm: 'подтвердить',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Назад',
+  next_page: 'Вперед',
+  prev_5: 'Предыдущие 5',
+  next_5: 'Следующие 5',
+  prev_3: 'Предыдущие 3',
+  next_3: 'Следующие 3',
+};

components/pagination/locale/sk_SK.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ strana',
+  jump_to: 'Choď na',
+  jump_to_confirm: 'potvrdit',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Predchádzajúca strana',
+  next_page: 'Nasledujúca strana',
+  prev_5: 'Predchádzajúcich 5 strán',
+  next_5: 'Nasledujúcich 5 strán',
+  prev_3: 'Predchádzajúce 3 strany',
+  next_3: 'Nasledujúce 3 strany',
+};

components/pagination/locale/sr_RS.js

@@ -0,0 +1,14 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ strani',
+  jump_to: 'Idi na',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Prethodna strana',
+  next_page: 'Sledeća strana',
+  prev_5: 'Prethodnih 5 Strana',
+  next_5: 'Sledećih 5 Strana',
+  prev_3: 'Prethodnih 3 Strane',
+  next_3: 'Sledećih 3 Strane',
+};

components/pagination/locale/sv_SE.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ sida',
+  jump_to: 'Gå till',
+  jump_to_confirm: 'bekräfta',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Föreg sida',
+  next_page: 'Nästa sida',
+  prev_5: 'Föreg 5 sidor',
+  next_5: 'Nästa 5 sidor',
+  prev_3: 'Föreg 3 sidor',
+  next_3: 'Nästa 3 sidor',
+};

components/pagination/locale/th_TH.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ หน้า',
+  jump_to: 'ไปยัง',
+  jump_to_confirm: 'ยืนยัน',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'หน้าก่อนหน้า',
+  next_page: 'หน้าถัดไป',
+  prev_5: 'ย้อนกลับ 5 หน้า',
+  next_5: 'ถัดไป 5 หน้า',
+  prev_3: 'ย้อนกลับ 3 หน้า',
+  next_3: 'ถัดไป 3 หน้า',
+};

components/pagination/locale/uk_UA.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ сторінці',
+  jump_to: 'Перейти',
+  jump_to_confirm: 'підтвердити',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Попередня сторінка',
+  next_page: 'Наступна сторінка',
+  prev_5: 'Попередні 5 сторінок',
+  next_5: 'Наступні 5 сторінок',
+  prev_3: 'Попередні 3 сторінки',
+  next_3: 'Наступні 3 сторінки',
+};

components/pagination/locale/vi_VN.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ trang',
+  jump_to: 'Đến',
+  jump_to_confirm: 'xác nhận',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Trang Trước',
+  next_page: 'Trang Kế',
+  prev_5: 'Về 5 Trang Trước',
+  next_5: 'Đến 5 Trang Kế',
+  prev_3: 'Về 3 Trang Trước',
+  next_3: 'Đến 3 Trang Kế',
+};

components/pagination/locale/zh_CN.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '条/页',
+  jump_to: '跳至',
+  jump_to_confirm: '确定',
+  page: '页',
+
+  // Pagination.jsx
+  prev_page: '上一页',
+  next_page: '下一页',
+  prev_5: '向前 5 页',
+  next_5: '向后 5 页',
+  prev_3: '向前 3 页',
+  next_3: '向后 3 页',
+};

components/pagination/locale/zh_TW.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '條/頁',
+  jump_to: '跳至',
+  jump_to_confirm: '確定',
+  page: '頁',
+
+  // Pagination.jsx
+  prev_page: '上一頁',
+  next_page: '下一頁',
+  prev_5: '向前 5 頁',
+  next_5: '向後 5 頁',
+  prev_3: '向前 3 頁',
+  next_3: '向後 3 頁',
+};

components/pagination/pagination.vue

@@ -0,0 +1,436 @@
+<script>
+import Button from '../button/index'
+import Pager from './Pager'
+import locale from './locale/zh_CN'
+import KEYCODE from './KeyCode'
+
+export default {
+  name: 'Pagination',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pagination',
+    },
+    current: {
+      type: Number,
+      default: 1,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+    onChange: {
+      type: Function,
+      default: () => {},
+    },
+    showSizeChanger: {
+      type: Boolean,
+      default: false,
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => ['10', '20', '30', '40'],
+    },
+    onShowSizeChange: {
+      type: Function,
+      default: () => {},
+    },
+    showQuickJumper: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+    simple: Boolean,
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  model: {
+    prop: 'current',
+  },
+  data () {
+    const { current } = this
+    return {
+      stateCurrent: current,
+    }
+  },
+  methods: {
+    isInteger (value) {
+      return typeof value === 'number' &&
+        isFinite(value) &&
+        Math.floor(value) === value
+    },
+    isValid (page) {
+      return this.isInteger(page) && page >= 1 && page !== this.stateCurrent
+    },
+    calculatePage (p) {
+      let pageSize = p
+      if (typeof pageSize === 'undefined') {
+        pageSize = this.pageSize
+      }
+      return Math.floor((this.total - 1) / pageSize) + 1
+    },
+    handleGoTO (event) {
+      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
+        this.handleChange(this.stateCurrent)
+      }
+    },
+    prev () {
+      if (this.hasPrev()) {
+        this.handleChange(this.stateCurrent - 1)
+      }
+    },
+    next () {
+      if (this.hasNext()) {
+        this.handleChange(this.stateCurrent + 1)
+      }
+    },
+    hasPrev () {
+      return this.stateCurrent > 1
+    },
+    hasNext () {
+      return this.stateCurrent < this.calculatePage()
+    },
+    handleKeyDown (event) {
+      if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
+        event.preventDefault()
+      }
+    },
+    handleKeyUp (event) {
+      const inputValue = event.target.value
+      const stateCurrent = this.stateCurrent
+      let value
+
+      if (inputValue === '') {
+        value = inputValue
+      } else if (isNaN(Number(inputValue))) {
+        value = stateCurrent
+      } else {
+        value = Number(inputValue)
+      }
+      event.target.value = value
+
+      if (event.keyCode === KEYCODE.ENTER) {
+        this.handleChange(value)
+      } else if (event.keyCode === KEYCODE.ARROW_UP) {
+        this.handleChange(value - 1)
+      } else if (event.keyCode === KEYCODE.ARROW_DOWN) {
+        this.handleChange(value + 1)
+      }
+    },
+    handleChange (p) {
+      let page = p
+      if (this.isValid(page)) {
+        const allTotal = this.calculatePage()
+        if (page > allTotal) {
+          page = allTotal
+        }
+        this.stateCurrent = page
+        this.$emit('input', page)
+        this.$emit('onChange', page, this.pageSize)
+        return page
+      }
+      return this.stateCurrent
+    },
+    runIfEnter (event, callback, ...restParams) {
+      if (event.key === 'Enter' || event.charCode === 13) {
+        callback(...restParams)
+      }
+    },
+    runIfEnterPrev (event) {
+      this.runIfEnter(event, this.prev)
+    },
+    runIfEnterNext (event) {
+      this.runIfEnter(event, this.next)
+    },
+    runIfEnterJumpPrev (event) {
+      this.runIfEnter(event, this.jumpPrev)
+    },
+    runIfEnterJumpNext (event) {
+      this.runIfEnter(event, this.jumpNext)
+    },
+    getJumpPrevPage () {
+      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
+    },
+    getJumpNextPage () {
+      return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
+    },
+    jumpPrev () {
+      this.handleChange(this.getJumpPrevPage())
+    },
+    jumpNext () {
+      this.handleChange(this.getJumpNextPage())
+    },
+  },
+  watch: {
+    current (val) {
+      this.stateCurrent = val
+    },
+  },
+  components: {
+    vcButton: Button,
+    Pager,
+  },
+  render () {
+    const prefixCls = this.prefixCls
+    const allPages = this.calculatePage()
+    const pagerList = []
+    let jumpPrev = null
+    let jumpNext = null
+    let firstPager = null
+    let lastPager = null
+    let gotoButton = null
+
+    const goButton = this.showQuickJumper
+    const pageBufferSize = this.showLessItems ? 1 : 2
+    const { stateCurrent, pageSize } = this
+
+    if (this.simple) {
+      if (goButton) {
+        if (typeof goButton === 'boolean') {
+          gotoButton = (
+            <li
+              title={this.showTitle ? `${locale.jump_to}${stateCurrent}/${allPages}` : null}
+              class={`${prefixCls}-simple-pager`}
+            >
+              <vc-button
+                onClick={this.handleGoTO}
+                onKeyup={this.handleGoTO}
+              >
+                {locale.jump_to_confirm}
+              </vc-button>
+            </li>
+          )
+        } else {
+          gotoButton = goButton
+        }
+      }
+      return (
+        <ul class={`${prefixCls} ${prefixCls}-simple`}>
+          <li
+            title={this.showTitle ? locale.prev_page : null}
+            onClick={this.prev}
+            tabIndex='0'
+            onKeypress={this.runIfEnterPrev}
+            class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+            aria-disabled={!this.hasPrev()}
+          >
+            <a class={`${prefixCls}-item-link`} />
+          </li>
+          <li
+            title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
+            class={`${prefixCls}-simple-pager`}
+          >
+            <input
+              type='text'
+              value={this.stateCurrent}
+              onKeydown={this.handleKeyDown}
+              onKeyup={this.handleKeyUp}
+              onChange={this.handleKeyUp}
+              size='3'
+            />
+            <span class={`${prefixCls}-slash`}>／</span>
+            {allPages}
+          </li>
+          <li
+            title={this.showTitle ? locale.next_page : null}
+            onClick={this.next}
+            tabIndex='0'
+            onKeypress={this.runIfEnterNext}
+            class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+            aria-disabled={!this.hasNext()}
+          >
+            <a class={`${prefixCls}-item-link`} />
+          </li>
+          {gotoButton}
+        </ul>
+      )
+    }
+
+    if (allPages <= 5 + pageBufferSize * 2) {
+      for (let i = 1; i <= allPages; i++) {
+        const active = stateCurrent === i
+        pagerList.push(
+          <Pager
+            rootPrefixCls={this.prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={i}
+            page={i}
+            active={active}
+            showTitle={this.showTitle}
+          />
+        )
+      }
+    } else {
+      const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5
+      const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5
+      jumpPrev = (
+        <li
+          title={this.showTitle ? prevItemTitle : null}
+          key='prev'
+          onClick={this.jumpPrev}
+          tabIndex='0'
+          onKeypress={this.runIfEnterJumpPrev}
+          class={`${prefixCls}-jump-prev`}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+      )
+      jumpNext = (
+        <li
+          title={this.showTitle ? nextItemTitle : null}
+          key='next'
+          tabIndex='0'
+          onClick={this.jumpNext}
+          onKeypress={this.runIfEnterJumpNext}
+          class={`${prefixCls}-jump-next`}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+      )
+      lastPager = (
+        <Pager
+          rootPrefixCls={prefixCls}
+          onClick={this.handleChange}
+          onKeypress={this.runIfEnter}
+          key={allPages}
+          page={allPages}
+          active={false}
+          showTitle={this.showTitle}
+        />
+      )
+      firstPager = (
+        <Pager
+          rootPrefixCls={prefixCls}
+          onClick={this.handleChange}
+          onKeypress={this.runIfEnter}
+          key={1}
+          page={1}
+          active={false}
+          showTitle={this.showTitle}
+        />
+      )
+
+      let left = Math.max(1, stateCurrent - pageBufferSize)
+      let right = Math.min(stateCurrent + pageBufferSize, allPages)
+
+      if (stateCurrent - 1 <= pageBufferSize) {
+        right = 1 + pageBufferSize * 2
+      }
+
+      if (allPages - stateCurrent <= pageBufferSize) {
+        left = allPages - pageBufferSize * 2
+      }
+
+      for (let i = left; i <= right; i++) {
+        const active = stateCurrent === i
+        pagerList.push(
+          <Pager
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={i}
+            page={i}
+            active={active}
+            showTitle={this.showTitle}
+          />
+        )
+      }
+
+      if (stateCurrent - 1 >= pageBufferSize * 2 && stateCurrent !== 1 + 2) {
+        pagerList[0] = (
+          <Pager
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={left}
+            page={left}
+            className={`${prefixCls}-item-after-jump-prev`}
+            active={false}
+            showTitle={this.showTitle}
+          />
+        )
+        pagerList.unshift(jumpPrev)
+      }
+      if (allPages - stateCurrent >= pageBufferSize * 2 && stateCurrent !== allPages - 2) {
+        pagerList[pagerList.length - 1] = (
+          <Pager
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={right}
+            page={right}
+            className={`${prefixCls}-item-before-jump-next`}
+            active={false}
+            showTitle={this.showTitle}
+          />
+        )
+        pagerList.push(jumpNext)
+      }
+
+      if (left !== 1) {
+        pagerList.unshift(firstPager)
+      }
+      if (right !== allPages) {
+        pagerList.push(lastPager)
+      }
+    }
+
+    let totalText = null
+
+    if (this.showTotal) {
+      totalText = (
+        <li class={`${prefixCls}-total-text`}>
+          {this.showTotal(
+            this.total,
+            [
+              (stateCurrent - 1) * pageSize + 1,
+              stateCurrent * pageSize > this.total ? this.total : stateCurrent * pageSize,
+            ]
+          )}
+        </li>
+      )
+    }
+    const prevDisabled = !this.hasPrev()
+    const nextDisabled = !this.hasNext()
+    return (
+      <ul
+        class={`${prefixCls} ${this.className}`}
+        unselectable='unselectable'
+      >
+        {totalText}
+        <li
+          title={this.showTitle ? locale.prev_page : null}
+          onClick={this.prev}
+          tabIndex='0'
+          onKeypress={this.runIfEnterPrev}
+          class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+          aria-disabled={prevDisabled}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+        {pagerList}
+        <li
+          title={this.showTitle ? locale.next_page : null}
+          onClick={this.next}
+          tabIndex='0'
+          onKeypress={this.runIfEnterNext}
+          class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+          aria-disabled={nextDisabled}
+        >
+          <a class={`${prefixCls}-item-link`} />
+        </li>
+      </ul>
+    )
+  },
+}
+</script>

components/pagination/style/index.less

@@ -1,6 +1,5 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
-@import "../../input/style/mixin";
 
 @pagination-prefix-cls: ~"@{ant-prefix}-pagination";
 
@@ -222,11 +221,8 @@
 
     &-quick-jumper {
       display: inline-block;
-      height: @input-height-base;
-      line-height: @input-height-base;
 
       input {
-        .input;
         margin: 0 8px;
         width: 50px;
       }
@@ -316,7 +312,6 @@
       line-height: 20px;
 
       input {
-        .input-sm;
         width: 44px;
       }
     }

components/tooltip/tooltip.vue

@@ -9,7 +9,7 @@ export default {
     },
     placement: {
       default: 'top',
-      validator: val => ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'].includes(val)
+      validator: val => ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'].includes(val),
     },
     transitionName: {
       default: 'zoom-big-fast',
@@ -45,8 +45,8 @@ export default {
     },
   },
   methods: {
-    checkPosition(popup, text, placement) {
-      let { top, left, bottom, right } = text
+    checkPosition (popup, text, placement) {
+      const { top, left, bottom, right } = text
       const reg = /(top|bottom|left|right)(.*)/
       const [, abstractPos, suffix] = placement.match(reg)
       let ret = placement
@@ -57,7 +57,7 @@ export default {
       if (abstractPos === 'bottom' && document.documentElement.clientHeight - bottom < popup.height) ret = 'left' + suffix
       return ret
     },
-    mountNode(callback) {
+    mountNode (callback) {
       if (this.vnode) {
         callback()
         return
@@ -66,30 +66,30 @@ export default {
       document.body.appendChild(div)
       const that = this
       const vnode = new Vue({
-        data() {
+        data () {
           return {
             left: 0,
             top: 0,
           }
         },
-        render(h) {
+        render (h) {
           return (
-            <transition name="zoom-big">
+            <transition name='zoom-big'>
               <div
                 v-show={that.visible}
                 class={`ant-tooltip ant-tooltip-placement-${that.realPlacement}`}
                 style={{ left: this.left + 'px', top: this.top + 'px' }}
               >
-                <div class="ant-tooltip-content">
-                  <div class="ant-tooltip-arrow"/>
-                  <div class="ant-tooltip-inner">
+                <div class='ant-tooltip-content'>
+                  <div class='ant-tooltip-arrow'/>
+                  <div class='ant-tooltip-inner'>
                     <span>{that.title}</span>
                   </div>
                 </div>
               </div>
             </transition>
           )
-        }
+        },
       }).$mount(div)
       this.$nextTick(() => {
         this.vnode = vnode
@@ -98,27 +98,27 @@ export default {
     },
     onPopupAlign: (placement, domNode, target, align) => {
       if (!placement) {
-        return;
+        return
       }
       // 根据当前坐标设置动画点
       const rect = domNode.getBoundingClientRect()
       const transformOrigin = {
         top: '50%',
         left: '50%',
-      };
+      }
       if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
-        transformOrigin.top = `${rect.height - align.offset[1]}px`;
+        transformOrigin.top = `${rect.height - align.offset[1]}px`
       } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
-        transformOrigin.top = `${-align.offset[1]}px`;
+        transformOrigin.top = `${-align.offset[1]}px`
       }
       if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
-        transformOrigin.left = `${rect.width - align.offset[0]}px`;
+        transformOrigin.left = `${rect.width - align.offset[0]}px`
       } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
-        transformOrigin.left = `${-align.offset[0]}px`;
+        transformOrigin.left = `${-align.offset[0]}px`
       }
-      target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
+      target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
     },
-    addEventHandle(old, fn) {
+    addEventHandle (old, fn) {
       if (!old) {
         return fn
       } else if (Array.isArray(old)) {
@@ -127,7 +127,7 @@ export default {
         return old === fn ? old : [old, fn]
       }
     },
-    computeOffset(popup, text, placement) {
+    computeOffset (popup, text, placement) {
       let { width, height, top, left } = text
       //  you cant change the properties of DOMRect
       top += window.scrollY
@@ -140,20 +140,20 @@ export default {
       if (/right/.test(placement)) ret.left += width + 5
 
       if (/Left/.test(placement)) {
-      } else if(/Right/.test(placement)) {
+      } else if (/Right/.test(placement)) {
         ret.left += (width - popup.width)
-      } else if(/(top)|(bottom)/.test(placement)) {
+      } else if (/(top)|(bottom)/.test(placement)) {
         ret.left += (width - popup.width) / 2
       }
       if (/Top/.test(placement)) {
-      } else if(/Bottom/.test(placement)) {
+      } else if (/Bottom/.test(placement)) {
         ret.top += (height - popup.height)
-      } else if(/(left)|(right)/.test(placement)) {
+      } else if (/(left)|(right)/.test(placement)) {
         ret.top += (height - popup.height) / 2
       }
       return ret
     },
-    showNode() {
+    showNode () {
       this.mountNode(() => {
         this.visible = true
         this.$nextTick(() => {
@@ -165,14 +165,14 @@ export default {
           this.vnode.left = left
           this.vnode.top = top
         })
-        this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0,0] })
+        this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0, 0] })
       })
     },
-    hideNode() {
+    hideNode () {
       this.visible = false
-    }
+    },
   },
-  render(h) {
+  render (h) {
     const inner = this.$slots.default[0]
     inner.data = inner.data || {}
     inner.data.on = inner.data.on || {}
@@ -181,7 +181,7 @@ export default {
 
     return this.$slots.default[0]
   },
-  updated() {
+  updated () {
     if (!this.vnode) return
     const popup = this.vnode.$el.getBoundingClientRect()
     const content = this.$el.getBoundingClientRect()
@@ -189,10 +189,10 @@ export default {
     this.vnode.left = left
     this.vnode.top = top
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (!this.vnode) return
     this.vnode.$el.remove()
-    this.vnode.$destroy();
-  }
+    this.vnode.$destroy()
+  },
 }
 </script>