├── .gitignore ├── .babelrc ├── src ├── index.js └── components │ └── App.vue ├── webpack.config.js ├── package.json ├── README.md └── dist └── 89889688147bd7575d6327160d64e760.svg /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import VuePaginateAl from './components/App.vue' 2 | 3 | const plugin = { 4 | install: Vue => { 5 | Vue.component(VuePaginateAl.name, VuePaginateAl) 6 | } 7 | } 8 | 9 | VuePaginateAl.install = plugin.install 10 | 11 | export default VuePaginateAl 12 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | var webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry : './src/index.js', 6 | output : { 7 | path : path.resolve(__dirname, 'dist'), 8 | filename : 'bundle.js', 9 | library : 'VuePaginateAl', 10 | libraryTarget : 'umd' 11 | }, 12 | resolve: { 13 | alias: { 14 | vue: 'vue/dist/vue.js' 15 | } 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.js$/, 21 | exclude: /node_modules/, 22 | loader: "babel-loader" 23 | }, 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.css$/, 30 | use: [ 'style-loader', 'css-loader' ] 31 | }, 32 | { 33 | test: /\.(png|woff|woff2|eot|ttf|svg)$/, 34 | loader: 'url-loader?limit=100000' 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.ProvidePlugin({ 40 | $: "jquery", 41 | jquery: "jquery", 42 | "window.jQuery": "jquery", 43 | jQuery:"jquery" 44 | }) 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-paginate-al", 3 | "version": "1.1.6", 4 | "description": "paginate for vue js", 5 | "main": "dist/bundle.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [ 11 | "paginate", 12 | "vuejs", 13 | "vuepaginat" 14 | ], 15 | "author": "Alziqziq", 16 | "license": "MIT", 17 | "devDependencies": { 18 | "babel-core": "^6.26.0", 19 | "babel-loader": "^7.1.2", 20 | "babel-preset-env": "^1.6.0", 21 | "bootstrap": "^3.3.7", 22 | "css-loader": "^0.28.7", 23 | "file-loader": "^1.1.4", 24 | "jquery": "^3.2.1", 25 | "style-loader": "^0.18.2", 26 | "url-loader": "^0.5.9", 27 | "vue": "^2.4.4", 28 | "vue-loader": "^13.0.5", 29 | "vue-template-compiler": "^2.4.4", 30 | "webpack": "^3.6.0" 31 | }, 32 | "dependencies": { 33 | "babel-core": "^6.26.0", 34 | "babel-loader": "^7.1.2", 35 | "babel-preset-env": "^1.6.0", 36 | "css-loader": "^0.28.7", 37 | "vue": "^2.4.4", 38 | "vue-loader": "^13.0.5", 39 | "vue-template-compiler": "^2.4.4", 40 | "webpack": "^3.6.0" 41 | }, 42 | "repository": { 43 | "type": "git", 44 | "url": "git+https://github.com/alziqziq/vue-paginate-al.git" 45 | }, 46 | "bugs": { 47 | "url": "https://github.com/alziqziq/vue-paginate-al/issues" 48 | }, 49 | "homepage": "https://github.com/alziqziq/vue-paginate-al#readme" 50 | } 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Demo 2 | [Click here](https://alziqziq.github.io/demo-vuepaginate-al/dist/index.html). 3 | 4 | ## Install via NPM 5 | ```js 6 | npm install --save vue-paginate-al 7 | ``` 8 | 9 | #### Register as Plugin 10 | ```js 11 | import Vue from 'vue' 12 | import VuePaginateAl from 'vue-paginate-al' 13 | 14 | Vue.component('vue-paginate-al', VuePaginateAl) 15 | ``` 16 | 17 | #### Usage 18 | ```vue 19 | 34 | 35 | 61 | ``` 62 | #### Props 63 | |Props|Description|Type|Required|Example| 64 | |-----|-----------|----|--------|-------| 65 | |totalPage|Total paginate|Number|true|10| 66 | |currentPage|Current page|Number|false|2| 67 | |myData|For callback data without process|String|false|'myname'| 68 | |withNextPrev|To show or hide button next/prev|Boolean|false|true| 69 | |nextText|Text for button Next|String|false|'Next'| 70 | |prevText|Text for button Prev|String|false|'Prev'| 71 | |activeBGColor|Background color|String|false|'primary'| 72 | |customActiveBGColor|Background color custom|String|false|'#bb06a9'| 73 | -------------------------------------------------------------------------------- /src/components/App.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 189 | 190 | 191 | 230 | -------------------------------------------------------------------------------- /dist/89889688147bd7575d6327160d64e760.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | --------------------------------------------------------------------------------