@lemonadejs/switch 1.4.0 → 5.2.0

package/dist/index.d.ts

@@ -12,6 +12,10 @@ declare namespace Switch {
         text?: string;
         /** Value will hold the current switch internal state value */
         value?: boolean;
+        /** Checked state */
+        checked?: boolean;
+        /** Color **/
+        color?: 'green' | 'orange' | 'red' | 'purple';
         /** Identification name */
         name?: string;
         /** Determines whether the switch can be toggled or not */
@@ -19,14 +23,24 @@ declare namespace Switch {
         /** Text position. Default undefined */
         position?: 'right' | undefined;
         /** Onchange event */
-        onchange: (value: string) => void;
+        onchange: (instance: object, value: string) => void;
     }
 
     interface Instance {
+        /** The 'Text' serves as the label displayed on the switch side, indicating the information associated with the switch */
+        text?: string;
         /** Value will hold the current switch internal state value */
         value?: boolean;
+        /** Checked state */
+        checked?: boolean;
+        /** Color **/
+        color?: 'green' | 'orange' | 'red' | 'purple';
+        /** Identification name */
+        name?: string;
         /** Determines whether the switch can be toggled or not */
         disabled?: boolean;
+        /** Text position. Default undefined */
+        position?: 'right' | undefined;
     }
 }
 

package/dist/index.js

@@ -8,25 +8,65 @@ if (!lemonade && typeof (require) === 'function') {
     global.Switch = factory();
 }(this, (function () {
 
-    const Switch = function () {
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
+    // Dispatcher
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            this.dispatchEvent(new CustomEvents(type, options));
+        }
+    }
+
+    const Switch = function (children, { onchange, onload }) {
         let self = this;
 
-        const onchange = self.onchange;
+        // Event
+        let change = self.onchange;
+        self.onchange = null;
 
-        self.onchange = function(prop, elements, s, oldValue, newValue) {
-            if (oldValue !== newValue && typeof(onchange) === 'function') {
-                onchange.call(self, self, self.value);
+        const state = () => {
+            let s = self.el.firstChild.checked;
+            if (s !== self.checked) {
+                self.checked = s;
             }
         }
 
-        self.onload = function() {
-            if (self.width) {
-                self.el.style.width = self.width;
+        onchange((prop, a, b, c, d) => {
+            if (a !== b) {
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: self.value,
+                });
             }
-        }
 
-        return `<label class="lm-switch" position="{{self.position}}">
-            <input type="checkbox" name="{{self.name}}" disabled="{{self.disabled}}" :bind="self.value" /> <span>{{self.text}}</span>
+            state();
+        })
+
+        onload(state);
+
+        return render => render`<label class="lm-switch" position="{{self.position}}" data-color="{{self.color}}">
+            <input type="checkbox" name="{{self.name}}" disabled="{{self.disabled}}" checked="{{self.checked}}" :bind="self.value" /> <span>{{self.text}}</span>
         </label>`
     }
 

package/dist/style.css

@@ -1,10 +1,39 @@
+:root {
+    --lm-switch-front-color: 0,0,0;
+    --lm-switch-primary-color: 255,255,255;
+    --lm-switch-main-color: var(--lm-main-color, #1565C0);
+    --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #1565C088);
+}
+
+.lm-switch[data-color="green"] {
+    --lm-switch-main-color: #2E7D32;
+    --lm-switch-main-color-alpha: #2E7D3288;
+}
+
+.lm-switch[data-color="orange"] {
+    --lm-switch-main-color: #EF6C00;
+    --lm-switch-main-color-alpha: #EF6C0088;
+}
+
+.lm-switch[data-color="red"] {
+    --lm-switch-main-color: #C62828;
+    --lm-switch-main-color-alpha: #C6282888;
+}
+
+.lm-switch[data-color="purple"] {
+    --lm-switch-main-color: #6A1B9A;
+    --lm-switch-main-color-alpha: #6A1B9A88;
+}
+
 .lm-switch {
     position: relative;
     display: inline-flex;
     z-index: 0;
     align-items: center;
-    min-height: 40px;
-    min-width: 40px;
+    min-width: 36px;
+    min-height: 20px;
+    cursor: pointer;
+    user-select: none;
 }
 
 .lm-switch:before {
@@ -14,8 +43,6 @@
 
 .lm-switch > input {
     appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     position: absolute;
     left: 0;
     margin: 0;
@@ -54,7 +81,7 @@
     border-radius: 7px;
     width: 36px;
     height: 14px;
-    background-color: rgba(var(--lm-switch-front-color, 0,0,0), 0.38);
+    background-color: rgba(var(--lm-switch-front-color), 0.38);
     transition: background-color 0.2s, opacity 0.2s;
 }
 
@@ -65,14 +92,14 @@
     border-radius: 50%;
     width: 20px;
     height: 20px;
-    background-color: rgb(var(---lm-switch-primary-color, 255,255,255));
+    background-color: rgb(var(--lm-switch-primary-color));
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
     transition: background-color 0.2s, transform 0.2s;
 }
 
 .lm-switch > input:checked {
     left: 11px;
-    background-color: var(--lm-main-color, #2196f3);
+    background-color: var(--lm-switch-main-color);
 }
 
 .lm-switch > input:not(:checked) {
@@ -81,11 +108,11 @@
 }
 
 .lm-switch > input:checked + span::before {
-    background-color: var(--lm-main-color-alpha, #2196f388);
+    background-color: var(--lm-switch-main-color-alpha);
 }
 
 .lm-switch > input:checked + span::after {
-    background-color: var(--lm-main-color, #2196f3);
+    background-color: var(--lm-switch-main-color);
     transform: translateX(16px);
 }
 
@@ -109,11 +136,11 @@
 }
 
 .lm-switch > input:active + span::before {
-    background-color: var(--lm-main-color-alpha, #2196f388);
+    background-color: var(--lm-switch-main-color-alpha);
 }
 
 .lm-switch > input:checked:active + span::before {
-    background-color: rgba(var(--lm-front-color, 0,0,0), 0.38);
+    background-color: rgba(var(--lm-switch-front-color), 0.38);
 }
 
 .lm-switch > input:disabled {
@@ -121,17 +148,17 @@
 }
 
 .lm-switch > input:disabled + span {
-    color: rgb(var(--lm-front-color,0,0,0));
+    color: rgb(var(--lm-switch-front-color));
     opacity: 0.50;
     cursor: default;
 }
 
 .lm-switch > input:disabled + span::before {
-    background-color: rgba(var(--lm-front-color,0,0,0), 0.38);
+    background-color: rgba(var(--lm-switch-front-color), 0.38);
 }
 
 .lm-switch > input:checked:disabled + span::before {
-    background-color: var(--lm-main-color-alpha, #2196f388);
+    background-color: var(--lm-switch-main-color-alpha);
 }
 
 .lm-switch[position="right"] > span {
@@ -140,7 +167,12 @@
 
 .lm-switch[position="right"] > input {
     left: initial;
-    right: -11px;
+    right: 11px;
+}
+
+.lm-switch[position="right"] > input:checked {
+    left: initial;
+    right: -5px;
 }
 
 .lm-switch[position="right"] > span::before {

package/package.json

@@ -13,9 +13,9 @@
         "switch js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.3.3"
+        "lemonadejs": "^5.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "1.4.0"
+    "version": "5.2.0"
 }