├── .gitignore
├── .storybook
    └── main.js
├── README.md
├── package.json
├── renovate.json
├── rollup.config.js
├── src
    ├── components
    │   ├── CheckedIcon.svelte
    │   ├── Switch.svelte
    │   └── UncheckedIcon.svelte
    ├── index.js
    └── utils
    │   └── index.js
├── stories
    ├── 1-switch.stories.js
    └── views
    │   ├── BasicDefaultSwitchView.svelte
    │   ├── CustomIconsSwitchView.svelte
    │   ├── CustomStyleSwitchView.svelte
    │   ├── DisabledSwitchView.svelte
    │   └── SmallerHandleSwitchView.svelte
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | storybook-static
4 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 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 | };
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 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. User would be able to drag or click for toggling.
 7 | 
 8 | ## Demo
 9 | 
10 | [Click here for Storybook link](https://svelte-switch.netlify.app/)
11 | 
12 | [REPL Link](https://svelte.dev/repl/72a37aee9ae24705b7d874def7e1f270)
13 | 
14 | ## Installation
15 | 
16 | ```
17 | npm install svelte-switch
18 | 
19 | or
20 | 
21 | yarn add svelte-switch
22 | ```
23 | 
24 | ## Usage
25 | 
26 | ```svelte
27 | <script>
28 |   import Switch from "svelte-switch";
29 | 
30 |   let checkedValue = true;
31 | 
32 |   function handleChange(e) {
33 |     const { checked } = e.detail;
34 |     checkedValue = checked;
35 |   }
36 | </script>
37 | 
38 | <h1>Simple usage</h1>
39 | Switch with default style
40 | <Switch on:change={handleChange} checked={checkedValue} />
41 | <br />
42 | The switch is {checkedValue ? 'on' : 'off'}.
43 | 
44 | ```
45 | 
46 | ## API
47 | 
48 | ### Props
49 | 
50 | | Prop Name       | Description    | Default Value      |
51 | | --------------- | -------------- | ------------------ |
52 | | checked         | Required field | undefined          |
53 | | disabled        |                | false              |
54 | | offColor        |                | "#888"             |
55 | | onColor         |                | "#080"             |
56 | | offHandleColor  |                | "#fff"             |
57 | | onHandleColor   |                | "#fff"             |
58 | | handleDiameter  |                | 0                  |
59 | | boxShadow       |                | null               |
60 | | activeBoxShadow |                | "0 0 2px 3px #3bf" |
61 | | height          |                | 28                 |
62 | | width           |                | 56                 |
63 | | id              |                | ''                 |
64 | | containerClass  |                | ''                 |
65 | 
66 | ### Slots
67 | 
68 | | Slot Name     | Description | Default Set? |
69 | | ------------- | ----------- | ------------ |
70 | | checkedIcon   |             | Yes          |
71 | | unCheckedIcon |             | Yes          |
72 | 
73 | ### Events
74 | 
75 | | Event Name | Description | `event.detail` info       |
76 | | ---------- | ----------- | ------------------------- |
77 | | change     |             | `{event: event, checked}` |
78 | 
79 | ### Examples
80 | 
81 | [Click here](https://github.com/thecodejack/svelte-switch/tree/master/stories/views) to view stories implementation
82 | 
83 | ## Credits
84 | 
85 | Component is reimplementation [react-switch](https://github.com/markusenglund/react-switch). Complete credit goes to author and contributors of [react-switch](https://github.com/markusenglund/react-switch).
86 | 
87 | ## License
88 | 
89 | MIT
90 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-switch",
 3 |   "version": "0.0.4",
 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 |   "repository": {
18 |     "url": "https://github.com/thecodejack/svelte-switch"
19 |   },
20 |   "dependencies": {},
21 |   "devDependencies": {
22 |     "@babel/core": "7.12.10",
23 |     "@rollup/plugin-commonjs": "17.0.0",
24 |     "@rollup/plugin-node-resolve": "11.1.0",
25 |     "@storybook/addon-actions": "6.1.14",
26 |     "@storybook/addon-links": "6.1.14",
27 |     "@storybook/addon-notes": "5.3.21",
28 |     "@storybook/addon-storysource": "6.1.14",
29 |     "@storybook/addons": "6.1.14",
30 |     "@storybook/svelte": "6.1.14",
31 |     "babel-loader": "8.2.2",
32 |     "rollup": "2.36.2",
33 |     "rollup-plugin-svelte": "7.0.0",
34 |     "svelte": "3.31.2",
35 |     "svelte-loader": "2.13.6"
36 |   },
37 |   "keywords": [
38 |     "svelte",
39 |     "svelte3",
40 |     "svelte-components",
41 |     "toggle",
42 |     "svelte-switch",
43 |     "sveltejs"
44 |   ],
45 |   "files": [
46 |     "src",
47 |     "dist"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 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 | };
19 | 


--------------------------------------------------------------------------------
/src/components/CheckedIcon.svelte:
--------------------------------------------------------------------------------
 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>
11 | 


--------------------------------------------------------------------------------
/src/components/Switch.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onMount, onDestroy, createEventDispatcher } from "svelte";
  3 | 
  4 |   import defaultCheckedIcon from "./CheckedIcon.svelte";
  5 |   import defaultUncheckedIcon from "./UncheckedIcon.svelte";
  6 |   import getBackgroundColor from "./../utils";
  7 | 
  8 |   //props
  9 |   export let checked;
 10 |   export let disabled = false;
 11 |   export let offColor = "#888";
 12 |   export let onColor = "#080";
 13 |   export let offHandleColor = "#fff";
 14 |   export let onHandleColor = "#fff";
 15 |   export let handleDiameter;
 16 |   export let unCheckedIcon = defaultUncheckedIcon;
 17 |   export let checkedIcon = defaultCheckedIcon;
 18 |   export let boxShadow = null;
 19 |   export let activeBoxShadow = "0 0 2px 3px #3bf";
 20 |   export let height = 28;
 21 |   export let width = 56;
 22 |   export let id = "";
 23 |   export let containerClass = "";
 24 | 
 25 |   const dispatch = createEventDispatcher();
 26 | 
 27 |   //state
 28 |   let state = {
 29 |     handleDiameter: 0,
 30 |     checkedPos: 0,
 31 |     uncheckedPos: 0,
 32 |     pos: 0,
 33 |     lastDragAt: 0,
 34 |     lastKeyUpAt: 0,
 35 |     startX: null,
 36 |     hasOutline: null,
 37 |     dragStartingTime: null,
 38 |     checkedStateFromDragging: false
 39 |   };
 40 | 
 41 |   let inputRef = null;
 42 | 
 43 |   state.handleDiameter = handleDiameter || height - 2;
 44 |   state.checkedPos = Math.max(
 45 |     width - height,
 46 |     width - (height + state.handleDiameter) / 2
 47 |   );
 48 |   state.uncheckedPos = Math.max(0, (height - state.handleDiameter) / 2);
 49 | 
 50 |   state.pos = checked ? state.checkedPos : state.uncheckedPos;
 51 |   state.lastDragAt = 0;
 52 |   state.lastKeyUpAt = 0;
 53 | 
 54 |   //event handlers
 55 | 
 56 |   function onDragStart(clientX) {
 57 |     inputRef && inputRef.focus && inputRef.focus();
 58 |     state.startX = clientX;
 59 |     state.hasOutline = true;
 60 |     state.dragStartingTime = Date.now();
 61 |   }
 62 | 
 63 |   function onDrag(clientX) {
 64 |     let { startX, isDragging, pos } = state;
 65 |     const startPos = checked ? state.checkedPos : state.uncheckedPos;
 66 |     const mousePos = startPos + clientX - startX;
 67 |     // We need this check to fix a windows glitch where onDrag is triggered onMouseDown in some cases
 68 |     if (!isDragging && clientX !== startX) {
 69 |       state.isDragging = true;
 70 |     }
 71 |     const newPos = Math.min(
 72 |       state.checkedPos,
 73 |       Math.max(state.uncheckedPos, mousePos)
 74 |     );
 75 |     // Prevent unnecessary rerenders
 76 |     if (newPos !== pos) {
 77 |       state.pos = newPos;
 78 |     }
 79 |   }
 80 | 
 81 |   function onDragStop(event) {
 82 |     let { pos, isDragging, dragStartingTime } = state;
 83 |     const halfwayCheckpoint = (state.checkedPos + state.uncheckedPos) / 2;
 84 | 
 85 |     // Simulate clicking the handle
 86 |     const timeSinceStart = Date.now() - dragStartingTime;
 87 |     if (!isDragging || timeSinceStart < 250) {
 88 |       onChangeTrigger(event);
 89 | 
 90 |       // Handle dragging from checked position
 91 |     } else if (checked) {
 92 |       if (pos > halfwayCheckpoint) {
 93 |         state.pos = state.checkedPos;
 94 |       } else {
 95 |         onChangeTrigger(event);
 96 |       }
 97 |       // Handle dragging from unchecked position
 98 |     } else if (pos < halfwayCheckpoint) {
 99 |       state.pos = state.uncheckedPos;
100 |     } else {
101 |       onChangeTrigger(event);
102 |     }
103 | 
104 |     state.isDragging = false;
105 |     state.hasOutline = false;
106 |     state.lastDragAt = Date.now();
107 |   }
108 | 
109 |   function onMouseDown(event) {
110 |     event.preventDefault();
111 |     // Ignore right click and scroll
112 |     if (typeof event.button === "number" && event.button !== 0) {
113 |       return;
114 |     }
115 | 
116 |     onDragStart(event.clientX);
117 |     window.addEventListener("mousemove", onMouseMove);
118 |     window.addEventListener("mouseup", onMouseUp);
119 |   }
120 | 
121 |   function onMouseMove(event) {
122 |     event.preventDefault();
123 |     onDrag(event.clientX);
124 |   }
125 | 
126 |   function onMouseUp(event) {
127 |     onDragStop(event);
128 |     window.removeEventListener("mousemove", onMouseMove);
129 |     window.removeEventListener("mouseup", onMouseUp);
130 |   }
131 | 
132 |   function onTouchStart(event) {
133 |     state.checkedStateFromDragging = null;
134 |     onDragStart(event.touches[0].clientX);
135 |   }
136 | 
137 |   function onTouchMove(event) {
138 |     onDrag(event.touches[0].clientX);
139 |   }
140 | 
141 |   function onTouchEnd(event) {
142 |     event.preventDefault();
143 |     onDragStop(event);
144 |   }
145 | 
146 |   function onInputChange(event) {
147 |     // This condition is unfortunately needed in some browsers where the input's change event might get triggered
148 |     // right after the dragstop event is triggered (occurs when dropping over a label element)
149 |     if (Date.now() - state.lastDragAt > 50) {
150 |       onChangeTrigger(event);
151 |       // Prevent clicking label, but not key activation from setting outline to true - yes, this is absurd
152 |       if (Date.now() - state.lastKeyUpAt > 50) {
153 |         state.hasOutline = false;
154 |       }
155 |     }
156 |   }
157 | 
158 |   function onKeyUp() {
159 |     state.lastKeyUpAt = Date.now();
160 |   }
161 | 
162 |   function setHasOutline() {
163 |     state.hasOutline = true;
164 |   }
165 | 
166 |   function unsetHasOutline() {
167 |     state.hasOutline = false;
168 |   }
169 | 
170 |   function onClick(event) {
171 |     event.preventDefault();
172 |     inputRef.focus();
173 |     onChangeTrigger(event);
174 |     state.hasOutline = false;
175 |   }
176 | 
177 |   function onChangeTrigger(event) {
178 |     checked = !checked;
179 |     dispatch("change", {
180 |       checked: checked,
181 |       event,
182 |       id
183 |     });
184 |   }
185 | 
186 |   $: if (!state.isDragging) {
187 |     state.pos = checked ? state.checkedPos : state.uncheckedPos;
188 |   }
189 | 
190 |   //Hack since components should always to starting with Capital letter and props are camelCasing
191 |   let CIcon = checkedIcon;
192 |   let UIcon = unCheckedIcon;
193 | 
194 |   //styles
195 | 
196 |   let rootStyle = "";
197 | 
198 |   $: rootStyle = `
199 |     position: relative;
200 |     display: inline-block;
201 |     text-align: left;
202 |     opacity: ${disabled ? 0.5 : 1};
203 |     direction: ltr;
204 |     border-radius: ${height / 2}px;
205 |     transition: opacity 0.25s;
206 |     touch-action: none;
207 |     webkit-tap-highlight-color: rgba(0, 0, 0, 0);
208 |     user-select: none;
209 |   `;
210 | 
211 |   let backgroundStyle = "";
212 |   $: backgroundStyle = `
213 |     height: ${height}px;
214 |     width: ${width}px;
215 |     margin: ${Math.max(0, (state.handleDiameter - height) / 2)}px;
216 |     position: relative;
217 |     background: ${getBackgroundColor(
218 |       state.pos,
219 |       state.checkedPos,
220 |       state.uncheckedPos,
221 |       offColor,
222 |       onColor
223 |     )};
224 |     border-radius: ${height / 2}px;
225 |     cursor: ${disabled ? "default" : "pointer"};
226 |     transition: ${state.isDragging ? null : "background 0.25s"};
227 |   `;
228 | 
229 |   let checkedIconStyle = "";
230 |   $: checkedIconStyle = `
231 |     height: ${height}px;
232 |     width: ${Math.min(
233 |       height * 1.5,
234 |       width - (state.handleDiameter + height) / 2 + 1
235 |     )}px;
236 |     position: relative;
237 |     opacity:
238 |       ${(state.pos - state.uncheckedPos) /
239 |         (state.checkedPos - state.uncheckedPos)};
240 |     pointer-events: none;
241 |     transition: ${state.isDragging ? null : "opacity 0.25s"};
242 |   `;
243 | 
244 |   let uncheckedIconStyle = "";
245 |   $: uncheckedIconStyle = `
246 |     height: ${height}px;
247 |     width: ${Math.min(
248 |       height * 1.5,
249 |       width - (state.handleDiameter + height) / 2 + 1
250 |     )}px;
251 |     position: absolute;
252 |     opacity:
253 |       ${1 -
254 |         (state.pos - state.uncheckedPos) /
255 |           (state.checkedPos - state.uncheckedPos)};
256 |     right: 0px;
257 |     top: 0px;
258 |     pointer-events: none;
259 |     transition: ${state.isDragging ? null : "opacity 0.25s"};
260 |   `;
261 | 
262 |   let handleStyle = "";
263 |   $: handleStyle = `
264 |     height: ${state.handleDiameter}px;
265 |     width: ${state.handleDiameter}px;
266 |     background: ${getBackgroundColor(
267 |       state.pos,
268 |       state.checkedPos,
269 |       state.uncheckedPos,
270 |       offHandleColor,
271 |       onHandleColor
272 |     )};
273 |     display: inline-block;
274 |     cursor: ${disabled ? "default" : "pointer"};
275 |     border-radius: 50%;
276 |     position: absolute;
277 |     transform: translateX(${state.pos}px);
278 |     top: ${Math.max(0, (height - state.handleDiameter) / 2)}px;
279 |     outline: 0;
280 |     box-shadow: ${state.hasOutline ? activeBoxShadow : boxShadow};
281 |     border: 0;
282 |     transition: ${
283 |       state.isDragging
284 |         ? null
285 |         : "background-color 0.25s, transform 0.25s, box-shadow 0.15s"
286 |     };
287 |   `;
288 | 
289 |   let inputStyle = "";
290 |   $: inputStyle = `
291 |     border: 0px;
292 |     clip: rect(0 0 0 0);
293 |     height: 1px;
294 |     margin: -1px;
295 |     overflow: hidden;
296 |     padding: 0px;
297 |     position: absolute;
298 |     width: 1px;
299 |   `;
300 | </script>
301 | 
302 | <style>
303 | 
304 | </style>
305 | 
306 | <div class={containerClass} style={rootStyle}>
307 |   <div
308 |     class="react-switch-bg"
309 |     style={backgroundStyle}
310 |     on:click={disabled ? null : onClick}
311 |     onMouseDown={e => e.preventDefault()}>
312 |     <div style={checkedIconStyle}>
313 |       <slot name="checkedIcon">
314 |         <CIcon />
315 |       </slot>
316 |     </div>
317 |     <div style={uncheckedIconStyle}>
318 |       <slot name="unCheckedIcon">
319 |         <UIcon />
320 |       </slot>
321 |     </div>
322 |   </div>
323 |   <div
324 |     class="react-switch-handle"
325 |     style={handleStyle}
326 |     on:click={e => e.preventDefault()}
327 |     on:mousedown={disabled ? null : onMouseDown}
328 |     on:touchstart={disabled ? null : onTouchStart}
329 |     on:touchmove={disabled ? null : onTouchMove}
330 |     on:touchend={disabled ? null : onTouchEnd}
331 |     on:touchcancel={disabled ? null : unsetHasOutline} />
332 |   <input
333 |     type="checkbox"
334 |     role="switch"
335 |     {disabled}
336 |     style={inputStyle}
337 |     bind:this={inputRef}
338 |     on:focus={setHasOutline}
339 |     on:blur={unsetHasOutline}
340 |     on:keyup={onKeyUp}
341 |     on:change={onInputChange} />
342 | </div>
343 | 


--------------------------------------------------------------------------------
/src/components/UncheckedIcon.svelte:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   viewBox="-2 -5 14 20"
 3 |   height="100%"
 4 |   width="100%"
 5 |   style="position: absolute; top: 0;">
 6 |   <path
 7 |     d="M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9
 8 |     4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12"
 9 |     fill="#fff"
10 |     fillRule="evenodd" />
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Switch from "./components/Switch.svelte";
2 | 
3 | export default Switch;
4 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | function createBackgroundColor(
 2 |   pos,
 3 |   checkedPos,
 4 |   uncheckedPos,
 5 |   offColor,
 6 |   onColor
 7 | ) {
 8 |   const relativePos = (pos - uncheckedPos) / (checkedPos - uncheckedPos);
 9 |   if (relativePos === 0) {
10 |     return offColor;
11 |   }
12 |   if (relativePos === 1) {
13 |     return onColor;
14 |   }
15 | 
16 |   let newColor = "#";
17 |   for (let i = 1; i < 6; i += 2) {
18 |     const offComponent = parseInt(offColor.substr(i, 2), 16);
19 |     const onComponent = parseInt(onColor.substr(i, 2), 16);
20 |     const weightedValue = Math.round(
21 |       (1 - relativePos) * offComponent + relativePos * onComponent
22 |     );
23 |     let newComponent = weightedValue.toString(16);
24 |     if (newComponent.length === 1) {
25 |       newComponent = `0${newComponent}`;
26 |     }
27 |     newColor += newComponent;
28 |   }
29 |   return newColor;
30 | }
31 | 
32 | function convertShorthandColor(color) {
33 |   if (color.length === 7) {
34 |     return color;
35 |   }
36 |   let sixDigitColor = "#";
37 |   for (let i = 1; i < 4; i += 1) {
38 |     sixDigitColor += color[i] + color[i];
39 |   }
40 |   return sixDigitColor;
41 | }
42 | 
43 | export default function getBackgroundColor(
44 |   pos,
45 |   checkedPos,
46 |   uncheckedPos,
47 |   offColor,
48 |   onColor
49 | ) {
50 |   const sixDigitOffColor = convertShorthandColor(offColor);
51 |   const sixDigitOnColor = convertShorthandColor(onColor);
52 |   return createBackgroundColor(
53 |     pos,
54 |     checkedPos,
55 |     uncheckedPos,
56 |     sixDigitOffColor,
57 |     sixDigitOnColor
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/stories/1-switch.stories.js:
--------------------------------------------------------------------------------
 1 | import { action } from "@storybook/addon-actions";
 2 | 
 3 | import BasicDefaultSwitchView from "./views/BasicDefaultSwitchView.svelte";
 4 | import DisabledSwitchView from "./views/DisabledSwitchView.svelte";
 5 | import CustomStyleSwitchView from "./views/CustomStyleSwitchView.svelte";
 6 | import SmallerHandleSwitchView from "./views/SmallerHandleSwitchView.svelte";
 7 | import CustomIconsSwitchView from "./views/CustomIconsSwitchView.svelte";
 8 | 
 9 | import intro from "./../README.md";
10 | 
11 | export default {
12 |   title: "Examples",
13 |   parameters: {
14 |     notes: { Introduction: intro },
15 |   },
16 | };
17 | 
18 | export const BasicDefaultSwitch = () => ({
19 |   Component: BasicDefaultSwitchView,
20 |   props: {},
21 | });
22 | 
23 | export const DisabledSwitch = () => ({
24 |   Component: DisabledSwitchView,
25 |   props: {},
26 | });
27 | 
28 | export const CustomStyleSwitch = () => ({
29 |   Component: CustomStyleSwitchView,
30 |   props: {},
31 | });
32 | 
33 | export const SmallerHandleSwitch = () => ({
34 |   Component: SmallerHandleSwitchView,
35 |   props: {},
36 | });
37 | 
38 | export const CustomIconsSwitch = () => ({
39 |   Component: CustomIconsSwitchView,
40 |   props: {},
41 | });
42 | 


--------------------------------------------------------------------------------
/stories/views/BasicDefaultSwitchView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Switch from "./../../src";
 3 | 
 4 |   let checkedValue = true;
 5 | 
 6 |   function handleChange(e) {
 7 |     const { checked } = e.detail;
 8 |     checkedValue = checked;
 9 |   }
10 | </script>
11 | 
12 | <h1>Simple usage</h1>
13 | Switch with default style
14 | <Switch on:change={handleChange} checked={checkedValue} />
15 | <br />
16 | The switch is {checkedValue ? 'on' : 'off'}.
17 | 


--------------------------------------------------------------------------------
/stories/views/CustomIconsSwitchView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Switch from "./../../src";
 3 | 
 4 |   let checkedValue = true;
 5 | 
 6 |   function handleChange(e) {
 7 |     const { checked } = e.detail;
 8 |     checkedValue = checked;
 9 |   }
10 | </script>
11 | 
12 | <h1>Custom Icons</h1>
13 | Switch with default style
14 | <Switch on:change={handleChange} checked={checkedValue}>
15 |   <div
16 |     style=" display: flex; justify-content: center; align-items: center; height:
17 |     100%; font-size: 15px; color: orange; padding-right: 2px; "
18 |     slot="unCheckedIcon">
19 |     Off
20 |   </div>
21 |   <svg
22 |     viewBox="0 0 10 10"
23 |     height="100%"
24 |     width="100%"
25 |     fill="aqua"
26 |     slot="checkedIcon">
27 |     <circle r={3} cx={5} cy={5} />
28 |   </svg>
29 | </Switch>
30 | <br />
31 | The switch is {checkedValue ? 'on' : 'off'}.
32 | 


--------------------------------------------------------------------------------
/stories/views/CustomStyleSwitchView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Switch from "./../../src";
 3 | 
 4 |   let checkedValue = true;
 5 | 
 6 |   function handleChange(e) {
 7 |     const { checked } = e.detail;
 8 |     checkedValue = checked;
 9 |   }
10 | </script>
11 | 
12 | <h1>Custom styling</h1>
13 | Switch with style inspired by Material Design
14 | <Switch
15 |   checked={checkedValue}
16 |   on:change={handleChange}
17 |   onColor="#86d3ff"
18 |   onHandleColor="#2693e6"
19 |   handleDiameter={30}
20 |   unCheckedIcon={false}
21 |   boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
22 |   activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
23 |   height={20}
24 |   width={48}
25 |   containerClass="react-switch"
26 |   id="material-switch">
27 |   <span slot="checkedIcon" />
28 |   <span slot="unCheckedIcon" />
29 | </Switch>
30 | <br />
31 | The switch is {checkedValue ? 'on' : 'off'}.
32 | <br />
33 | <br />
34 | Icons are removed by passing empty named slots
35 | 


--------------------------------------------------------------------------------
/stories/views/DisabledSwitchView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Switch from "./../../src";
 3 | 
 4 |   let checkedValue = true;
 5 | 
 6 |   function handleChange(e) {
 7 |     const { checked } = e.detail;
 8 |     checkedValue = checked;
 9 |   }
10 | </script>
11 | 
12 | <h1>Disabled Switch</h1>
13 | <Switch disabled on:change={handleChange} checked={checkedValue} />
14 | <br />
15 | The switch is {checkedValue ? 'on' : 'off'}.
16 | 


--------------------------------------------------------------------------------
/stories/views/SmallerHandleSwitchView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Switch from "./../../src";
 3 | 
 4 |   let checkedValue = true;
 5 | 
 6 |   function handleChange(e) {
 7 |     const { checked } = e.detail;
 8 |     checkedValue = checked;
 9 |   }
10 | </script>
11 | 
12 | <h1>Smaller Handle</h1>
13 | Thick switch with smaller handle radius
14 | <Switch
15 |   on:change={handleChange}
16 |   checked={checkedValue}
17 |   handleDiameter={28}
18 |   offColor="#08f"
19 |   onColor="#0ff"
20 |   offHandleColor="#0ff"
21 |   onHandleColor="#08f"
22 |   height={40}
23 |   width={70}
24 |   className="react-switch"
25 |   id="small-radius-switch" />
26 | <br />
27 | The switch is {checkedValue ? 'on' : 'off'}.
28 | 


--------------------------------------------------------------------------------