Skip to content

Commit beacaeb

Browse files
coderdiazcoderdiaz
committed
Initial commit
0 parents  commit beacaeb

14 files changed

+710
-0
lines changed

Diff for: ‎.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"stage-3"
5+
]
6+
}

Diff for: ‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

Diff for: ‎.gitignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
public/
5+
npm-debug.log
6+
yarn-error.log
7+
8+
# Editor directories and files
9+
.idea
10+
*.suo
11+
*.ntvs*
12+
*.njsproj
13+
*.sln

Diff for: ‎README.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<p align="center">
2+
<a href="https://github.com/coderdiaz/vue-tiny-pagination">
3+
<img src="https://vuejs.org/images/logo.png" width="120">
4+
</a>
5+
<h2 align="center">&lt;vue-tiny-pagination /&gt;</h2>
6+
</p>
7+
8+
<p align="center">
9+
a Vue component for create a tiny pagination
10+
</p>
11+
12+
<p align="center">
13+
<a href="https://npmjs.com/package/vue-tiny-pagination"><img src="https://img.shields.io/npm/dt/vue-tiny-pagination.svg?style=flat-square"></a>
14+
<a href="https://github.com/coderdiaz/vue-tiny-pagination/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square"></a>
15+
<a href="https://github.com/coderdiaz/vue-tiny-pagination/stargazers"><img src="https://img.shields.io/github/stars/coderdiaz/vue-tiny-pagination.svg?style=flat-square"></a>
16+
<a href="http://npmjs.com/package/vue-tiny-pagination"><img src="https://img.shields.io/npm/v/vue-tiny-pagination.svg?style=flat-square"></a>
17+
<a href="http://npmjs.com/package/vue-tiny-pagination"><img src="https://img.shields.io/npm/dm/vue-tiny-pagination.svg?style=flat-square"></a>
18+
<a href="https://www.paypal.me/coderdiaz"><img src="https://img.shields.io/badge/invite-coffee-red.svg?style=flat-square"></a>
19+
</p>
20+
21+
---
22+
23+
### Install/Usage
24+
25+
```
26+
$ npm i -S vue-tiny-pagination
27+
```
28+
29+
```html
30+
<div id="#app">
31+
<tiny-pagination
32+
:total="currentTotal"
33+
@tiny:change-page="changePage"></tiny-pagination>
34+
</div>
35+
```
36+
37+
```javascript
38+
import {TinyPagination} from 'vue-datasource'
39+
40+
new Vue({
41+
el: '#app',
42+
data() {
43+
return {
44+
currentTotal: 100,
45+
currentPage: 1
46+
}
47+
},
48+
methods: {
49+
changePage (pagination) {
50+
this.currentPage = pagination.page
51+
}
52+
},
53+
components: {
54+
TinyPagination
55+
}
56+
});
57+
```
58+
59+
### Documentation
60+
61+
For see the complete documentation go to the [official website](https://coderdiaz.me/vue-tiny-pagination).
62+
63+
64+
### Development
65+
66+
``` bash
67+
# install dependencies
68+
npm install
69+
70+
# serve with hot reload at localhost:8080
71+
npm run dev
72+
73+
# build for production with minification
74+
npm run build
75+
```
76+
77+
### What's Included
78+
79+
- `npm run dev`: Webpack + `vue-loader` with proper config for source maps & hot-reload.
80+
81+
- `npm run build`: build with HTML/CSS/JS minification.
82+
83+
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). Also check out the [breaking changes in [email protected]](https://github.com/vuejs/vue-loader/releases/tag/v9.0.0).
84+
85+
### Contributions
86+
All contributions are welcome send your PR and Issues.
87+
88+
### License
89+
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/LICENSE)
90+
91+
##### Crafted by Javier Diaz

Diff for: ‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
6+
<link rel="icon" href="https://vuejs.org/images/logo.png" type="image/png">
7+
<title>Vue Tiny Pagination</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script src="/dist/build.js"></script>
12+
</body>
13+
</html>

Diff for: ‎src/App.vue

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<template>
2+
<div id="app">
3+
<section class="section-hero">
4+
<div class="grid-hero container grid-lg text-center">
5+
<img src="./assets/logo.png">
6+
<h1>&lt;vue-tiny-pagination /&gt;</h1>
7+
<h2>a Vue component for create a <u>tiny</u> pagination</h2>
8+
<p class="text-gray">
9+
<a href="https://github.com/coderdiaz/vue-tiny-pagination" target="_blank">GitHub</a> | Latest version: <span class="version">0.1.0</span>
10+
</p>
11+
</div>
12+
</section>
13+
<section class="section-features bg-primary text-center">
14+
<div class="container grid-lg">
15+
<h2>Introduction</h2>
16+
<div class="columns">
17+
<div class="column col-10 col-sm-12 col-mx-auto">
18+
<p class="text-secondary">
19+
This component provides a basic styles for pagination and a minimalistic design. This pagination can be used for paginate tables, data lists, etc.
20+
</p>
21+
</div>
22+
</div>
23+
</div>
24+
</section>
25+
<section class="section-usage bg-gray">
26+
<div class="container grid-lg">
27+
<h2>Installation</h2>
28+
<p class="h5">Install with NPM</p>
29+
<pre class="code" data-lang="Bash"><code><span class="tag">$</span>npm install <span class="atv">vue-tiny-pagination</span> --save</code></pre>
30+
<p class="h5">Install with Yarn</p>
31+
<pre class="code" data-lang="Bash"><code><span class="tag">$</span>yarn add <span class="atv">vue-tiny-pagination</span></code></pre>
32+
<p class="h5">Install with Bower</p>
33+
<pre class="code" data-lang="Bash"><code><span class="tag">$</span>bower install <span class="atv">vue-tiny-pagination</span></code></pre>
34+
<br>
35+
<h2>Basic usage</h2>
36+
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> id=<span class="atv">"app"</span>&gt;
37+
&lt;<span class="tag">tiny-pagination</span>&gt;
38+
<span class="tag">:total</span>=<span class="atv">"total"</span>
39+
<span class="tag">@tiny:change-page</span>=<span class="atv">"changePage"</span>&gt;&lt;/<span class="tag">tiny-pagination</span>&gt;
40+
&lt;/<span class="tag">div</span>&gt;</code></pre>
41+
<pre class="code" data-lang="Javascript"><code><span class="tag">import</span> Vue <span class="tag">from</span> <span class="atv">'vue'</span>
42+
<span class="tag">import</span> TinyPagination <span class="tag">from</span> <span class="atv">'vue-tiny-pagination'</span>
43+
44+
<span class="tag">new</span> <span class="tag">Vue</span>({
45+
<span class="tag">el</span>: <span class="atv">'#app'</span>,
46+
<span class="tag">data ()</span> {
47+
<span class="tag">return</span> {
48+
total: <span class="atv">100</span>,
49+
currentPage: <span class="atv">1</span>
50+
}
51+
},
52+
<span class="tag">methods</span>: {
53+
<span class="tag">changePage</span> (pagination) {
54+
console.log(pagination.page)
55+
}
56+
},
57+
<span class="tag">components</span>: {
58+
TinyPagination
59+
}
60+
})</code></pre>
61+
<br>
62+
<h2>Example</h2>
63+
<div class="pagination centered bg-primary">
64+
<tiny-pagination
65+
:total="currentTotal"
66+
custom-class="custom-tiny-class"
67+
@tiny:change-page="changePage"></tiny-pagination>
68+
</div>
69+
<br>
70+
<kbd>Current page: {{currentPage}}</kbd>
71+
<br><br>
72+
<kbd>Total items: {{currentTotal}}</kbd>
73+
<br>
74+
<br>
75+
<h2>Documentation</h2>
76+
<h5>Props</h5>
77+
<table class="table table-stripe">
78+
<thead>
79+
<tr>
80+
<th>Prop</th>
81+
<th>Type</th>
82+
<th>Default</th>
83+
<th>Description</th>
84+
</tr>
85+
</thead>
86+
<tbody>
87+
<tr>
88+
<td>total <i>(required)</i></td>
89+
<td>Number</td>
90+
<td>-</td>
91+
<td>A number of total items.</td>
92+
</tr>
93+
<tr>
94+
<td>page</td>
95+
<td>Number</td>
96+
<td>1</td>
97+
<td>A number for set a default page.</td>
98+
</tr>
99+
<tr>
100+
<td>lang</td>
101+
<td>String</td>
102+
<td>en</td>
103+
<td>Default language to show (<i>Available: en, es</i>).</td>
104+
</tr>
105+
<tr>
106+
<td>customClass</td>
107+
<td>String</td>
108+
<td></td>
109+
<td>A prop for set a custom class.</td>
110+
</tr>
111+
</tbody>
112+
</table>
113+
<br>
114+
<h5>Events</h5>
115+
<table class="table table-stripe">
116+
<thead>
117+
<tr>
118+
<th>Event</th>
119+
<th>Description</th>
120+
</tr>
121+
</thead>
122+
<tbody>
123+
<tr>
124+
<td>tiny:change-page</td>
125+
<td>Get the current page from pagination <code>payload: {page: 1}</code>.</td>
126+
</tr>
127+
</tbody>
128+
</table>
129+
<br>
130+
<br>
131+
<div class="divider text-center" data-content="WHAT'S NEW"></div>
132+
<br>
133+
<div class="timeline">
134+
<div class="timeline-item" id="timeline-example-1">
135+
<div class="timeline-left">
136+
<a href="#timeline-example-1" class="timeline-icon tooltip" data-tooltip="March 2016"></a>
137+
</div>
138+
<div class="timeline-content">
139+
<div class="tile">
140+
<div class="tile-content">
141+
<p class="tile-subtitle">February 10, 2017</p>
142+
<p class="tile-title">Initial commit and first release.</p>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</section>
150+
<footer class="section-footer">
151+
<div class="grid-footer container grid-lg">
152+
<p><a href="https://dribbble.com/coderdiaz" target="_blank">Dribbble</a> | <a href="https://github.com/coderdiaz/vue-tiny-pagination" target="_blank">GitHub</a> | Version <span class="version">0.1.0</span></p>
153+
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/coderdiaz" target="_blank">Javier Diaz</a>. Licensed under the <a href="https://github.com/coderdiaz/vue-tiny-pagination/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
154+
</div>
155+
</footer>
156+
</div>
157+
</template>
158+
159+
<script>
160+
import TinyPagination from "./components/TinyPagination";
161+
export default {
162+
name: "app",
163+
data() {
164+
return {
165+
currentTotal: 100,
166+
currentPage: 1,
167+
message: "A Vue component for create tiny pagination"
168+
};
169+
},
170+
methods: {
171+
changePage(pagination) {
172+
this.currentPage = pagination.page
173+
}
174+
},
175+
components: {
176+
TinyPagination
177+
}
178+
};
179+
</script>
180+
181+
<style lang="scss" src="./_scss/main.scss"></style>

0 commit comments

Comments
 (0)