Skip to content

Commit 97a1f87

Browse files
thecodejackthecodejack
committed
initial commit
0 parents  commit 97a1f87

File tree

12 files changed

+8439
-0
lines changed

12 files changed

+8439
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
storybook-static

‎.storybook/main.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
stories: ["../stories/**/*.stories.js"],
3+
addons: [
4+
"@storybook/addon-actions",
5+
"@storybook/addon-links",
6+
"@storybook/addon-storysource",
7+
"@storybook/addon-notes/register",
8+
],
9+
};

‎README.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# svelte-pagination
2+
3+
[![NPM](https://img.shields.io/npm/v/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)
4+
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)
5+
6+
SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.
7+
8+
## Demo
9+
10+
[Click here for Storybook link](https://svelte-pagination.netlify.app/)
11+
12+
[REPL Link](https://svelte.dev/repl/72a37aee9ae24705b7d874def7e1f270)
13+
14+
## Installation
15+
16+
```
17+
npm install svelte-pagination
18+
19+
or
20+
21+
yarn add svelte-pagination
22+
```
23+
24+
## Usage
25+
26+
```
27+
28+
29+
```
30+
31+
## API
32+
33+
### Props
34+
35+
| Prop Name | Description | Default Value |
36+
| --------------- | -------------- | ------------------ |
37+
| checked | Required field | undefined |
38+
| disabled | | false |
39+
| offColor | | "#888" |
40+
| onColor | | "#080" |
41+
| offHandleColor | | "#fff" |
42+
| onHandleColor | | "#fff" |
43+
| handleDiameter | | 0 |
44+
| boxShadow | | null |
45+
| activeBoxShadow | | "0 0 2px 3px #3bf" |
46+
| height | | 28 |
47+
| width | | 56 |
48+
| id | | '' |
49+
| containerClass | | '' |
50+
51+
### Slots
52+
53+
| Slot Name | Description | Default Set? |
54+
| ------------- | ----------- | ------------ |
55+
| checkedIcon | | Yes |
56+
| unCheckedIcon | | Yes |
57+
58+
### Events
59+
60+
| Event Name | Description | `event.detail` info |
61+
| ---------- | ----------- | ------------------------- |
62+
| change | | `{event: event, checked}` |
63+
64+
### Examples
65+
66+
[Click here](https://github.com/thecodejack/svelte-pagination/tree/master/stories/views) to view stories implementation
67+
68+
## Credits
69+
70+
TBD
71+
72+
## License
73+
74+
MIT

‎package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "svelte-pagination",
3+
"version": "0.0.1-beta.0",
4+
"description": "Svelte raw component for pagination",
5+
"svelte": "src/index.js",
6+
"module": "dist/index.mjs",
7+
"main": "dist/index.js",
8+
"scripts": {
9+
"build": "rollup -c",
10+
"prepublishOnly": "npm run build",
11+
"test": "echo \"Error: no test specified\" && exit 1",
12+
"storybook": "start-storybook -p 6006",
13+
"build-storybook": "build-storybook"
14+
},
15+
"author": "thecodejack",
16+
"license": "MIT",
17+
"dependencies": {},
18+
"devDependencies": {
19+
"@babel/core": "^7.10.2",
20+
"@rollup/plugin-commonjs": "^13.0.0",
21+
"@rollup/plugin-node-resolve": "^8.0.1",
22+
"@storybook/addon-actions": "^5.3.19",
23+
"@storybook/addon-links": "^5.3.19",
24+
"@storybook/addon-notes": "^5.3.19",
25+
"@storybook/addon-storysource": "^5.3.19",
26+
"@storybook/addons": "^5.3.19",
27+
"@storybook/svelte": "^5.3.19",
28+
"babel-loader": "^8.1.0",
29+
"rollup": "^2.16.1",
30+
"rollup-plugin-svelte": "^5.2.2",
31+
"svelte": "^3.23.2",
32+
"svelte-loader": "^2.13.6"
33+
},
34+
"keywords": [
35+
"svelte",
36+
"svelte3",
37+
"svelte-components",
38+
"svelte-paginate",
39+
"pagination",
40+
"svelte-pagination",
41+
"sveltejs"
42+
],
43+
"files": [
44+
"src",
45+
"dist"
46+
]
47+
}

‎rollup.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import svelte from "rollup-plugin-svelte";
2+
import resolve from "@rollup/plugin-node-resolve";
3+
import commonjs from "@rollup/plugin-commonjs";
4+
import pkg from "./package.json";
5+
6+
const name = pkg.name
7+
.replace(/^(@\S+\/)?(svelte-)?(\S+)/, "$3")
8+
.replace(/^\w/, (m) => m.toUpperCase())
9+
.replace(/-\w/g, (m) => m[1].toUpperCase());
10+
11+
export default {
12+
input: "src/index.js",
13+
output: [
14+
{ file: pkg.module, format: "es" },
15+
{ file: pkg.main, format: "umd", name },
16+
],
17+
plugins: [svelte(), resolve(), commonjs()],
18+
};

‎src/components/BreakView.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script>
2+
export let breakLabel = "";
3+
export let breakClassName = "";
4+
export let breakLinkClassName = "";
5+
export let onClick = null;
6+
7+
let className = "";
8+
9+
$: className = breakClassName || "break";
10+
</script>
11+
12+
<style>
13+
li {
14+
display: inline-block;
15+
}
16+
</style>
17+
18+
<li class={className}>
19+
<a
20+
class={breakLinkClassName}
21+
on:click
22+
role="button"
23+
tabIndex="0"
24+
on:keypress={onClick}>
25+
{breakLabel}
26+
</a>
27+
</li>

‎src/components/PageView.svelte‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script>
2+
export let onClick = null;
3+
export let selected = false;
4+
export let pageClassName = "";
5+
export let pageLinkClassName = "";
6+
export let activeClassName = "";
7+
export let activeLinkClassName = "";
8+
export let extraAriaContext = "";
9+
export let href = "";
10+
export let ariaLabel = "";
11+
export let page = 0;
12+
13+
$: ariaLabel =
14+
ariaLabel ||
15+
"Page " + page + (extraAriaContext ? " " + extraAriaContext : "");
16+
17+
let ariaCurrent = null;
18+
19+
$: if (selected) {
20+
ariaCurrent = "page";
21+
ariaLabel = ariaLabel || "Page " + page + " is your current page";
22+
23+
if (typeof pageClassName !== "undefined") {
24+
pageClassName = pageClassName + " " + activeClassName;
25+
} else {
26+
pageClassName = activeClassName;
27+
}
28+
29+
if (typeof pageLinkClassName !== "undefined") {
30+
if (typeof activeLinkClassName !== "undefined") {
31+
pageLinkClassName = pageLinkClassName + " " + activeLinkClassName;
32+
}
33+
} else {
34+
pageLinkClassName = activeLinkClassName;
35+
}
36+
}
37+
</script>
38+
39+
<style>
40+
li {
41+
display: inline-block;
42+
}
43+
</style>
44+
45+
<li class={pageClassName}>
46+
<a
47+
on:click
48+
role="button"
49+
class={pageLinkClassName}
50+
{href}
51+
tabIndex="0"
52+
aria-label={ariaLabel}
53+
aria-current={ariaCurrent}
54+
on:keypress={onClick}>
55+
{page}
56+
</a>
57+
</li>

0 commit comments

Comments
 (0)