@lemonadejs/switch 5.0.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,33 +8,65 @@ if (!lemonade && typeof (require) === 'function') {
     global.Switch = factory();
 }(this, (function () {
 
-    const Switch = function () {
-        let self = this;
-
-        const onchange = self.onchange;
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
 
-        self.onchange = function(prop, a, b, c, d) {
-            if (typeof(c) !== 'undefined') {
-                // Version 4
-                if (c !== d && typeof(onchange) === 'function') {
-                    onchange.call(self, self, self.value);
-                }
-            } else {
-                // Version 5
-                if (a !== b && typeof(onchange) === 'function') {
-                    onchange.call(self, self, self.value);
+            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));
+        }
+    }
 
-        self.onload = function() {
-            if (self.width) {
-                self.el.style.width = self.width;
+    const Switch = function (children, { onchange, onload }) {
+        let self = this;
+
+        // Event
+        let change = self.onchange;
+        self.onchange = null;
+
+        const state = () => {
+            let s = self.el.firstChild.checked;
+            if (s !== self.checked) {
+                self.checked = s;
             }
         }
 
-        return `<label class="lm-switch" position="{{self.position}}" data-color="{{self.color}}">
-            <input type="checkbox" name="{{self.name}}" disabled="{{self.disabled}}" :bind="self.value" /> <span>{{self.text}}</span>
+        onchange((prop, a, b, c, d) => {
+            if (a !== b) {
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: self.value,
+                });
+            }
+
+            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

@@ -6,23 +6,23 @@
 }
 
 .lm-switch[data-color="green"] {
-    --lm-switch-main-color: var(--lm-main-color, #2E7D32);
-    --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #2E7D3288);
+    --lm-switch-main-color: #2E7D32;
+    --lm-switch-main-color-alpha: #2E7D3288;
 }
 
 .lm-switch[data-color="orange"] {
-    --lm-switch-main-color: var(--lm-main-color, #EF6C00);
-    --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #EF6C0088);
+    --lm-switch-main-color: #EF6C00;
+    --lm-switch-main-color-alpha: #EF6C0088;
 }
 
 .lm-switch[data-color="red"] {
-    --lm-switch-main-color: var(--lm-main-color, #C62828);
-    --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #C6282888);
+    --lm-switch-main-color: #C62828;
+    --lm-switch-main-color-alpha: #C6282888;
 }
 
 .lm-switch[data-color="purple"] {
-    --lm-switch-main-color: var(--lm-main-color, #6A1B9A);
-    --lm-switch-main-color-alpha: var(--lm-main-color-alpha, #6A1B9A88);
+    --lm-switch-main-color: #6A1B9A;
+    --lm-switch-main-color-alpha: #6A1B9A88;
 }
 
 .lm-switch {
@@ -31,10 +31,9 @@
     z-index: 0;
     align-items: center;
     min-width: 36px;
-}
-
-label.lm-switch {
-    display: inline-flex;
+    min-height: 20px;
+    cursor: pointer;
+    user-select: none;
 }
 
 .lm-switch:before {
@@ -44,8 +43,6 @@ label.lm-switch {
 
 .lm-switch > input {
     appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     position: absolute;
     left: 0;
     margin: 0;

package/package.json

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