Skip to content

Commit cda5184

Browse files
thecodejackthecodejack
committed
initial commit
0 parents  commit cda5184

19 files changed

+8617
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
storybook-static

‎.storybook/main.js

+9
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

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# svelte-switch
2+
3+
[![NPM](https://img.shields.io/npm/v/svelte-switch.svg)](https://www.npmjs.com/package/svelte-switch)
4+
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-switch.svg)](https://www.npmjs.com/package/svelte-switch)
5+
6+
SvelteJS component for switch or toggle a boolean.The component is Svelte implementation of [react-switch](https://github.com/markusenglund/react-switch).
7+
8+
## Demo
9+
10+
[Click here for Storybook link](https://svelte-switch.netlify.app/)
11+
12+
## Installation
13+
14+
```
15+
npm install svelte-switch
16+
17+
or
18+
19+
yarn add svelte-switch
20+
```
21+
22+
## Usage
23+
24+
```
25+
<script>
26+
import Switch from "./../../src";
27+
28+
let checkedValue = true;
29+
30+
function handleChange(e) {
31+
const { checked } = e.detail;
32+
checkedValue = checked;
33+
}
34+
</script>
35+
36+
<h1>Simple usage</h1>
37+
Switch with default style
38+
<Switch on:change={handleChange} checked={checkedValue} />
39+
<br />
40+
The switch is {checkedValue ? 'on' : 'off'}.
41+
42+
```
43+
44+
## API
45+
46+
### Props
47+
48+
| Prop Name | Description | Default Value |
49+
| --------------------- | ---------------------------------------------------------------------------------------- | ------------- |
50+
| accept | Set accepted file types. See https://github.com/okonet/attr-accept for more information. | undefined |
51+
| disabled | | false |
52+
| maxSize | | Infinity |
53+
| minSize | | 0 |
54+
| multiple | if true, multiple files can be selected at once | true |
55+
| preventDropOnDocument | 1231 | true |
56+
| noClick | disable click events | false |
57+
| noKeyboard | disable keyboard events | false |
58+
| noDrag | disable drag events | false |
59+
| containerClasses | custom container classes | "" |
60+
| containerStyles | custom inline container styles | "" |
61+
| disableDefaultStyles | don't apply default styles to container | false |
62+
63+
### Events
64+
65+
| Event Name | Description | `event.detail` info |
66+
| ---------- | ----------- | ------------------------- |
67+
| change | | `{event: event, checked}` |
68+
69+
### Examples
70+
71+
[Click here](https://github.com/thecodejack/svelte-switch/tree/master/stories/views) to view stories implementation
72+
73+
## Credits
74+
75+
Component is reimplementation [react-switch](https://github.com/markusenglund/react-switch). Complete credit goes to author and contributors of [react-dropzone](https://github.com/markusenglund/react-switch).
76+
77+
## License
78+
79+
MIT

‎TODO

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
Todo:
3+
☐ Git repo
4+
☐ npm initial publish
5+
☐ setup netlify
6+
☐ Fix README.md
7+
☐ Add README.md to Notes of storybook
8+
☐ Build setup
9+
☐ Advanced Examples
10+
☐ Custom Dropzone with delete file etc
11+
☐ CustomDropzone with different drop behaviour
12+

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "svelte-switch",
3+
"version": "0.0.1",
4+
"description": "Svelte component for toggle button",
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+
"toggle",
39+
"svelte-switch",
40+
"sveltejs"
41+
],
42+
"files": [
43+
"src",
44+
"dist"
45+
]
46+
}

‎rollup.config.js

+18
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/CheckedIcon.svelte

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<svg
2+
height="100%"
3+
width="100%"
4+
viewBox="-2 -5 17 21"
5+
style="position: absolute; top: 0">
6+
<path
7+
d="M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0"
8+
fill="#fff"
9+
fillRule="evenodd" />
10+
</svg>

0 commit comments

Comments
 (0)