Skip to content

Commit 52d8c53

Browse files
anburocky3anburocky3
committed
v0.0.1 - Initial feature build
1 parent a7c3b60 commit 52d8c53

15 files changed

+40034
-0
lines changed

‎.browserslistrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
current node
2+
last 2 versions and > 2%
3+
ie > 10

‎.gitignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules/
3+
/dist/
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw*

‎README.md

+88
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,90 @@
11
# vue-pagination-tw
2+
3+
[![npm version](https://badge.fury.io/js/vue-pagination-tw.svg)](https://badge.fury.io/js/vue-pagination-tw) [![Build Status](https://travis-ci.org/anburocky3/vue-pagination-tw.svg?branch=main)](https://travis-ci.org/anburocky3/vue-pagination-tw) [![Code Climate](https://codeclimate.com/github/anburocky3/vue-pagination-tw/badges/gpa.svg)](https://codeclimate.com/github/anburocky3/vue-pagination-tw)
4+
5+
[![NPM](https://nodei.co/npm/vue-pagination-tw.png)](https://nodei.co/npm/vue-pagination-tw/)
6+
27
Simple Vue Pagination component that can be used in any project with range & ui customization.
8+
9+
[Online demo](#) (will be updated shortly)
10+
11+
## Installation
12+
13+
### NPM
14+
15+
Install the npm package.
16+
17+
```js
18+
$ npm install vue-pagination-tw --save
19+
```
20+
21+
Register the component.
22+
23+
- ES5
24+
25+
```js
26+
var VuePaginationTw = require("vue-pagination-tw");
27+
Vue.component("VuePaginationTw", VuePaginationTw);
28+
```
29+
30+
- ES6
31+
32+
```js
33+
import VuePaginationTw from "vue-pagination-tw";
34+
Vue.component("VuePaginationTw", VuePaginationTw);
35+
```
36+
37+
### CDN
38+
39+
Include the source file.
40+
41+
```html
42+
<!-- use the latest release -->
43+
<script src="https://unpkg.com/vue-pagination-tw@latest"></script>
44+
<!-- or use the specify version -->
45+
<script src="https://unpkg.com/[email protected]"></script>
46+
```
47+
48+
Register the component.
49+
50+
```js
51+
Vue.component("VuePaginationTw", VuePaginationTw);
52+
```
53+
54+
## Usage
55+
56+
### In Vue Template
57+
58+
**Basic Usage**
59+
60+
```html
61+
<VuePaginationTw
62+
:total-items="20"
63+
:current-page="1"
64+
:per-page="6"
65+
@page-changed="functionName"
66+
:go-button="false"
67+
styled="centered"
68+
/>
69+
```
70+
71+
_Note_: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop `total-items` or `totalItems`. They are leading to the same result.
72+
73+
So this is also avaliable
74+
75+
```html
76+
<VuePaginationTw
77+
:totalItems="20"
78+
:currentPage="1"
79+
:perPage="6"
80+
@pageChanged="functionName"
81+
:goButton="false"
82+
styled="centered"
83+
/>
84+
```
85+
86+
#### roadmaps
87+
88+
- [ ] Make different versions of paginations (xs, md, lg, xlg)
89+
- [ ] Change Pagination ui templates directly from initialization.
90+
- [ ] Support for make different ui styles by default.

‎babel.config.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const devPresets = ['@vue/babel-preset-app'];
2+
const buildPresets = [
3+
[
4+
'@babel/preset-env',
5+
// Config for @babel/preset-env
6+
{
7+
// Example: Always transpile optional chaining/nullish coalescing
8+
// include: [
9+
// /(optional-chaining|nullish-coalescing)/
10+
// ],
11+
},
12+
],
13+
'@babel/preset-typescript',
14+
];
15+
module.exports = {
16+
presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
17+
};

‎build/rollup.config.js

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
// rollup.config.js
2+
import fs from "fs";
3+
import path from "path";
4+
import vue from "rollup-plugin-vue";
5+
import alias from "@rollup/plugin-alias";
6+
import commonjs from "@rollup/plugin-commonjs";
7+
import resolve from "@rollup/plugin-node-resolve";
8+
import replace from "@rollup/plugin-replace";
9+
import babel from "@rollup/plugin-babel";
10+
import PostCSS from "rollup-plugin-postcss";
11+
import { terser } from "rollup-plugin-terser";
12+
import ttypescript from "ttypescript";
13+
import typescript from "rollup-plugin-typescript2";
14+
import minimist from "minimist";
15+
16+
// Get browserslist config and remove ie from es build targets
17+
const esbrowserslist = fs
18+
.readFileSync("./.browserslistrc")
19+
.toString()
20+
.split("\n")
21+
.filter((entry) => entry && entry.substring(0, 2) !== "ie");
22+
23+
// Extract babel preset-env config, to combine with esbrowserslist
24+
const babelPresetEnvConfig = require("../babel.config").presets.filter(
25+
(entry) => entry[0] === "@babel/preset-env"
26+
)[0][1];
27+
28+
const argv = minimist(process.argv.slice(2));
29+
30+
const projectRoot = path.resolve(__dirname, "..");
31+
32+
const baseConfig = {
33+
input: "src/entry.ts",
34+
plugins: {
35+
preVue: [
36+
alias({
37+
entries: [
38+
{
39+
find: "@",
40+
replacement: `${path.resolve(projectRoot, "src")}`,
41+
},
42+
],
43+
}),
44+
],
45+
replace: {
46+
"process.env.NODE_ENV": JSON.stringify("production"),
47+
},
48+
vue: {},
49+
postVue: [
50+
resolve({
51+
extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
52+
}),
53+
// Process only `<style module>` blocks.
54+
PostCSS({
55+
modules: {
56+
generateScopedName: "[local]___[hash:base64:5]",
57+
},
58+
include: /&module=.*\.css$/,
59+
}),
60+
// Process all `<style>` blocks except `<style module>`.
61+
PostCSS({ include: /(?<!&module=.*)\.css$/ }),
62+
commonjs(),
63+
],
64+
babel: {
65+
exclude: "node_modules/**",
66+
extensions: [".js", ".jsx", ".ts", ".tsx", ".vue"],
67+
babelHelpers: "bundled",
68+
},
69+
},
70+
};
71+
72+
// ESM/UMD/IIFE shared settings: externals
73+
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
74+
const external = [
75+
// list external dependencies, exactly the way it is written in the import statement.
76+
// eg. 'jquery'
77+
"vue",
78+
];
79+
80+
// UMD/IIFE shared settings: output.globals
81+
// Refer to https://rollupjs.org/guide/en#output-globals for details
82+
const globals = {
83+
// Provide global variable names to replace your external imports
84+
// eg. jquery: '$'
85+
vue: "Vue",
86+
};
87+
88+
// Customize configs for individual targets
89+
const buildFormats = [];
90+
if (!argv.format || argv.format === "es") {
91+
const esConfig = {
92+
...baseConfig,
93+
input: "src/entry.esm.ts",
94+
external,
95+
output: {
96+
file: "dist/vue-pagination-tw.esm.js",
97+
format: "esm",
98+
exports: "named",
99+
},
100+
plugins: [
101+
// replace(baseConfig.plugins.replace),
102+
replace({
103+
preventAssignment: true,
104+
...baseConfig.plugins.replace,
105+
}),
106+
...baseConfig.plugins.preVue,
107+
vue(baseConfig.plugins.vue),
108+
...baseConfig.plugins.postVue,
109+
// Only use typescript for declarations - babel will
110+
// do actual js transformations
111+
typescript({
112+
typescript: ttypescript,
113+
useTsconfigDeclarationDir: true,
114+
emitDeclarationOnly: true,
115+
}),
116+
babel({
117+
...baseConfig.plugins.babel,
118+
presets: [
119+
[
120+
"@babel/preset-env",
121+
{
122+
...babelPresetEnvConfig,
123+
targets: esbrowserslist,
124+
},
125+
],
126+
],
127+
}),
128+
],
129+
};
130+
buildFormats.push(esConfig);
131+
}
132+
133+
if (!argv.format || argv.format === "cjs") {
134+
const umdConfig = {
135+
...baseConfig,
136+
external,
137+
output: {
138+
compact: true,
139+
file: "dist/vue-pagination-tw.ssr.js",
140+
format: "cjs",
141+
name: "VuePaginationTw",
142+
exports: "auto",
143+
globals,
144+
},
145+
plugins: [
146+
// replace(baseConfig.plugins.replace),
147+
replace({
148+
preventAssignment: true,
149+
...baseConfig.plugins.replace,
150+
}),
151+
...baseConfig.plugins.preVue,
152+
vue(baseConfig.plugins.vue),
153+
...baseConfig.plugins.postVue,
154+
babel(baseConfig.plugins.babel),
155+
],
156+
};
157+
buildFormats.push(umdConfig);
158+
}
159+
160+
if (!argv.format || argv.format === "iife") {
161+
const unpkgConfig = {
162+
...baseConfig,
163+
external,
164+
output: {
165+
compact: true,
166+
file: "dist/vue-pagination-tw.min.js",
167+
format: "iife",
168+
name: "VuePaginationTw",
169+
exports: "auto",
170+
globals,
171+
},
172+
plugins: [
173+
// replace(baseConfig.plugins.replace),
174+
replace({
175+
preventAssignment: true,
176+
...baseConfig.plugins.replace,
177+
}),
178+
...baseConfig.plugins.preVue,
179+
vue(baseConfig.plugins.vue),
180+
...baseConfig.plugins.postVue,
181+
babel(baseConfig.plugins.babel),
182+
terser({
183+
output: {
184+
ecma: 5,
185+
},
186+
}),
187+
],
188+
};
189+
buildFormats.push(unpkgConfig);
190+
}
191+
192+
// Export config
193+
export default buildFormats;

‎dev/serve.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue';
2+
import Dev from './serve.vue';
3+
4+
const app = createApp(Dev);
5+
app.mount('#app');

‎dev/serve.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script lang="ts">
2+
import { defineComponent } from 'vue';
3+
import VuePaginationTw from '@/components/vue-pagination-tw.vue';
4+
5+
export default defineComponent({
6+
name: 'ServeDev',
7+
components: {
8+
VuePaginationTw
9+
},
10+
data() {
11+
return {
12+
customClass: {
13+
'ul': 'ad'
14+
}
15+
}
16+
},
17+
mounted() {
18+
let externalScript = document.createElement('script')
19+
externalScript.setAttribute('src', 'https://cdn.tailwindcss.com')
20+
document.head.appendChild(externalScript)
21+
}
22+
});
23+
</script>
24+
25+
<template>
26+
<div id="app" class="min-h-screen bg-gray-200 flex items-center">
27+
<div class="container mx-auto bg-white rounded shadow-sm p-10">
28+
<div class="text-center">
29+
<vue-pagination-tw
30+
:total-items="20"
31+
:current-page="1"
32+
:per-page="6"
33+
@page-changed="console.log('s')"
34+
:go-button="false"
35+
/>
36+
</div>
37+
</div>
38+
</div>
39+
</template>
40+
41+
42+
<style scoped>
43+
</style>

0 commit comments

Comments
 (0)