@lemonadejs/switch 5.0.0 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +108 -108
  2. package/dist/index.d.ts +15 -1
  3. package/dist/index.js +51 -19
  4. package/dist/style.css +12 -15
  5. package/package.json +21 -21
package/README.md CHANGED
@@ -1,108 +1,108 @@
1
- # LemonadeJS Switch
2
-
3
- [Official website and documentation is here](https://lemonadejs.net/components/switch)
4
-
5
- Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
6
-
7
- The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.
8
-
9
- ## Features
10
-
11
- - Lightweight: The JavaScript Switch is only about 2 KBytes;
12
- - Integration: It can be used as a standalone library or integrated with any modern framework;
13
-
14
- ## Getting Started
15
-
16
- You can install using NPM or using directly from a CDN.
17
-
18
- ### npm Installation
19
-
20
- To install it in your project using npm, run the following command:
21
-
22
- ```bash
23
- $ npm install @lemonadejs/switch
24
- ```
25
-
26
- ### CDN
27
-
28
- To use tabs via a CDN, include the following script tags in your HTML file:
29
-
30
- ```html
31
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
32
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
33
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
34
- ```
35
-
36
- ### Usage
37
-
38
- Quick example with Lemonade
39
-
40
- ```javascript
41
- import lemonade from 'lemonadejs'
42
- import Switch from '@lemonadejs/switch';
43
- import '@lemonadejs/switch/dist/style.css';
44
-
45
- export default function App() {
46
- const self = this;
47
-
48
- return `<div>
49
- <Switch text="On/Off" />
50
- </div>`
51
- }
52
- ```
53
-
54
- ```jsx
55
- import React, { useRef } from "react";
56
- import Switch from "@lemonadejs/switch/dist/react";
57
- import '@lemonadejs/switch/dist/style.css';
58
-
59
- export default function App() {
60
- const switchRef = useRef();
61
- return (
62
- <>
63
- <Switch text='On/Off' ref={switchRef} />
64
- </>
65
- );
66
- }
67
- ```
68
-
69
- Quick example with Lemonade
70
-
71
- ```vue
72
- <template>
73
- <Switch text='On/Off' />
74
- </template>
75
-
76
- <script>
77
- import Switch from '@lemonadejs/switch/dist/vue';
78
- import '@lemonadejs/switch/dist/style.css';
79
-
80
- export default {
81
- name: 'App',
82
- components: {
83
- Switch,
84
- },
85
- };
86
- </script>
87
- ```
88
-
89
- [You can find more examples here in the official documentation.](https://lemonadejs.net/components/switch)
90
-
91
- #### Settings
92
-
93
- | Attribute | Description |
94
- |-----------|-------------|
95
- | text?: string | The displayed text. |
96
- | value?: any | The current value of the component. |
97
- | name?: string | The attribute `name` assigned to the switch element. |
98
- | disabled?: boolean | Disables the functionality of the switch. |
99
- | onopen? | function | When a new tabs is opened. |
100
-
101
- ## License
102
-
103
- The [LemonadeJS](https://lemonadejs.net) Switch is released under the MIT.
104
-
105
- ## Other Tools
106
-
107
- - [jSuites](https://jsuites.net/docs)
108
- - [Jspreadsheet Data Grid](https://jspreadsheet.com)
1
+ # LemonadeJS Switch
2
+
3
+ [Official website and documentation is here](https://lemonadejs.net/components/switch)
4
+
5
+ Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
6
+
7
+ The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.
8
+
9
+ ## Features
10
+
11
+ - Lightweight: The JavaScript Switch is only about 2 KBytes;
12
+ - Integration: It can be used as a standalone library or integrated with any modern framework;
13
+
14
+ ## Getting Started
15
+
16
+ You can install using NPM or using directly from a CDN.
17
+
18
+ ### npm Installation
19
+
20
+ To install it in your project using npm, run the following command:
21
+
22
+ ```bash
23
+ $ npm install @lemonadejs/switch
24
+ ```
25
+
26
+ ### CDN
27
+
28
+ To use tabs via a CDN, include the following script tags in your HTML file:
29
+
30
+ ```html
31
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
32
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
34
+ ```
35
+
36
+ ### Usage
37
+
38
+ Quick example with Lemonade
39
+
40
+ ```javascript
41
+ import lemonade from 'lemonadejs';
42
+ import Switch from '@lemonadejs/switch';
43
+ import '@lemonadejs/switch/dist/style.css';
44
+
45
+ export default function App() {
46
+ const self = this;
47
+
48
+ return `<div>
49
+ <Switch text="On/Off" />
50
+ </div>`;
51
+ }
52
+ ```
53
+
54
+ ```jsx
55
+ import React, { useRef } from 'react';
56
+ import Switch from '@lemonadejs/switch/dist/react';
57
+ import '@lemonadejs/switch/dist/style.css';
58
+
59
+ export default function App() {
60
+ const switchRef = useRef();
61
+ return (
62
+ <>
63
+ <Switch text="On/Off" ref={switchRef} />
64
+ </>
65
+ );
66
+ }
67
+ ```
68
+
69
+ Quick example with Lemonade
70
+
71
+ ```vue
72
+ <template>
73
+ <Switch text="On/Off" />
74
+ </template>
75
+
76
+ <script>
77
+ import Switch from '@lemonadejs/switch/dist/vue';
78
+ import '@lemonadejs/switch/dist/style.css';
79
+
80
+ export default {
81
+ name: 'App',
82
+ components: {
83
+ Switch,
84
+ },
85
+ };
86
+ </script>
87
+ ```
88
+
89
+ [You can find more examples here in the official documentation.](https://lemonadejs.net/components/switch)
90
+
91
+ #### Settings
92
+
93
+ | Attribute | Description |
94
+ | ------------------ | ---------------------------------------------------- | -------------------------- |
95
+ | text?: string | The displayed text. |
96
+ | value?: any | The current value of the component. |
97
+ | name?: string | The attribute `name` assigned to the switch element. |
98
+ | disabled?: boolean | Disables the functionality of the switch. |
99
+ | onopen? | function | When a new tabs is opened. |
100
+
101
+ ## License
102
+
103
+ The [LemonadeJS](https://lemonadejs.net) Switch is released under the MIT.
104
+
105
+ ## Other Tools
106
+
107
+ - [jSuites](https://jsuites.net/docs)
108
+ - [Jspreadsheet Data Grid](https://jspreadsheet.com)
package/dist/index.d.ts CHANGED
@@ -12,6 +12,10 @@ declare namespace Switch {
12
12
  text?: string;
13
13
  /** Value will hold the current switch internal state value */
14
14
  value?: boolean;
15
+ /** Checked state */
16
+ checked?: boolean;
17
+ /** Color **/
18
+ color?: 'green' | 'orange' | 'red' | 'purple';
15
19
  /** Identification name */
16
20
  name?: string;
17
21
  /** Determines whether the switch can be toggled or not */
@@ -19,14 +23,24 @@ declare namespace Switch {
19
23
  /** Text position. Default undefined */
20
24
  position?: 'right' | undefined;
21
25
  /** Onchange event */
22
- onchange: (value: string) => void;
26
+ onchange: (instance: object, value: string) => void;
23
27
  }
24
28
 
25
29
  interface Instance {
30
+ /** The 'Text' serves as the label displayed on the switch side, indicating the information associated with the switch */
31
+ text?: string;
26
32
  /** Value will hold the current switch internal state value */
27
33
  value?: boolean;
34
+ /** Checked state */
35
+ checked?: boolean;
36
+ /** Color **/
37
+ color?: 'green' | 'orange' | 'red' | 'purple';
38
+ /** Identification name */
39
+ name?: string;
28
40
  /** Determines whether the switch can be toggled or not */
29
41
  disabled?: boolean;
42
+ /** Text position. Default undefined */
43
+ position?: 'right' | undefined;
30
44
  }
31
45
  }
32
46
 
package/dist/index.js CHANGED
@@ -8,33 +8,65 @@ if (!lemonade && typeof (require) === 'function') {
8
8
  global.Switch = factory();
9
9
  }(this, (function () {
10
10
 
11
- const Switch = function () {
12
- let self = this;
13
-
14
- const onchange = self.onchange;
11
+ class CustomEvents extends Event {
12
+ constructor(type, props, options) {
13
+ super(type, {
14
+ bubbles: true,
15
+ composed: true,
16
+ ...options,
17
+ });
15
18
 
16
- self.onchange = function(prop, a, b, c, d) {
17
- if (typeof(c) !== 'undefined') {
18
- // Version 4
19
- if (c !== d && typeof(onchange) === 'function') {
20
- onchange.call(self, self, self.value);
21
- }
22
- } else {
23
- // Version 5
24
- if (a !== b && typeof(onchange) === 'function') {
25
- onchange.call(self, self, self.value);
19
+ if (props) {
20
+ for (const key in props) {
21
+ // Avoid assigning if property already exists anywhere on `this`
22
+ if (! (key in this)) {
23
+ this[key] = props[key];
24
+ }
26
25
  }
27
26
  }
28
27
  }
28
+ }
29
+
30
+ // Dispatcher
31
+ const Dispatch = function(method, type, options) {
32
+ // Try calling the method directly if provided
33
+ if (typeof method === 'function') {
34
+ let a = Object.values(options);
35
+ return method(...a);
36
+ } else if (this.tagName) {
37
+ this.dispatchEvent(new CustomEvents(type, options));
38
+ }
39
+ }
29
40
 
30
- self.onload = function() {
31
- if (self.width) {
32
- self.el.style.width = self.width;
41
+ const Switch = function (children, { onchange, onload }) {
42
+ let self = this;
43
+
44
+ // Event
45
+ let change = self.onchange;
46
+ self.onchange = null;
47
+
48
+ const state = () => {
49
+ let s = self.el.firstChild.checked;
50
+ if (s !== self.checked) {
51
+ self.checked = s;
33
52
  }
34
53
  }
35
54
 
36
- return `<label class="lm-switch" position="{{self.position}}" data-color="{{self.color}}">
37
- <input type="checkbox" name="{{self.name}}" disabled="{{self.disabled}}" :bind="self.value" /> <span>{{self.text}}</span>
55
+ onchange((prop, a, b, c, d) => {
56
+ if (a !== b) {
57
+ Dispatch.call(self, change, 'change', {
58
+ instance: self,
59
+ value: self.value,
60
+ });
61
+ }
62
+
63
+ state();
64
+ })
65
+
66
+ onload(state);
67
+
68
+ return render => render`<label class="lm-switch" position="{{self.position}}" data-color="{{self.color}}">
69
+ <input type="checkbox" name="{{self.name}}" disabled="{{self.disabled}}" checked="{{self.checked}}" :bind="self.value" /> <span>{{self.text}}</span>
38
70
  </label>`
39
71
  }
40
72
 
package/dist/style.css CHANGED
@@ -1,28 +1,28 @@
1
1
  :root {
2
- --lm-switch-front-color: 0,0,0;
2
+ --lm-switch-front-color: 127,127,127;
3
3
  --lm-switch-primary-color: 255,255,255;
4
4
  --lm-switch-main-color: var(--lm-main-color, #1565C0);
5
5
  --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #1565C088);
6
6
  }
7
7
 
8
8
  .lm-switch[data-color="green"] {
9
- --lm-switch-main-color: var(--lm-main-color, #2E7D32);
10
- --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #2E7D3288);
9
+ --lm-switch-main-color: #2E7D32;
10
+ --lm-switch-main-color-alpha: #2E7D3288;
11
11
  }
12
12
 
13
13
  .lm-switch[data-color="orange"] {
14
- --lm-switch-main-color: var(--lm-main-color, #EF6C00);
15
- --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #EF6C0088);
14
+ --lm-switch-main-color: #EF6C00;
15
+ --lm-switch-main-color-alpha: #EF6C0088;
16
16
  }
17
17
 
18
18
  .lm-switch[data-color="red"] {
19
- --lm-switch-main-color: var(--lm-main-color, #C62828);
20
- --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #C6282888);
19
+ --lm-switch-main-color: #C62828;
20
+ --lm-switch-main-color-alpha: #C6282888;
21
21
  }
22
22
 
23
23
  .lm-switch[data-color="purple"] {
24
- --lm-switch-main-color: var(--lm-main-color, #6A1B9A);
25
- --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #6A1B9A88);
24
+ --lm-switch-main-color: #6A1B9A;
25
+ --lm-switch-main-color-alpha: #6A1B9A88;
26
26
  }
27
27
 
28
28
  .lm-switch {
@@ -31,10 +31,9 @@
31
31
  z-index: 0;
32
32
  align-items: center;
33
33
  min-width: 36px;
34
- }
35
-
36
- label.lm-switch {
37
- display: inline-flex;
34
+ min-height: 20px;
35
+ cursor: pointer;
36
+ user-select: none;
38
37
  }
39
38
 
40
39
  .lm-switch:before {
@@ -44,8 +43,6 @@ label.lm-switch {
44
43
 
45
44
  .lm-switch > input {
46
45
  appearance: none;
47
- -moz-appearance: none;
48
- -webkit-appearance: none;
49
46
  position: absolute;
50
47
  left: 0;
51
48
  margin: 0;
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
- {
2
- "name": "@lemonadejs/switch",
3
- "title": "JavaScript Switch",
4
- "description": "LemonadeJS JavaScript reactive material switch",
5
- "author": {
6
- "name": "Contact <contact@lemonadejs.net>",
7
- "url": "https://lemonadejs.net"
8
- },
9
- "keywords": [
10
- "javascript switch",
11
- "lemonadejs switch",
12
- "js switch",
13
- "switch js"
14
- ],
15
- "dependencies": {
16
- "lemonadejs": "^5.0.3"
17
- },
18
- "main": "dist/index.js",
19
- "types": "dist/index.d.ts",
20
- "version": "5.0.0"
21
- }
1
+ {
2
+ "name": "@lemonadejs/switch",
3
+ "title": "JavaScript Switch",
4
+ "description": "LemonadeJS JavaScript reactive material switch",
5
+ "author": {
6
+ "name": "Contact <contact@lemonadejs.net>",
7
+ "url": "https://lemonadejs.net"
8
+ },
9
+ "keywords": [
10
+ "javascript switch",
11
+ "lemonadejs switch",
12
+ "js switch",
13
+ "switch js"
14
+ ],
15
+ "dependencies": {
16
+ "lemonadejs": "^5.3.2"
17
+ },
18
+ "main": "dist/index.js",
19
+ "types": "dist/index.d.ts",
20
+ "version": "5.8.0"
21
+ }