@lemonadejs/switch 1.4.0 → 5.0.0

package/dist/index.js

@@ -13,9 +13,17 @@ if (!lemonade && typeof (require) === 'function') {
 
         const onchange = self.onchange;
 
-        self.onchange = function(prop, elements, s, oldValue, newValue) {
-            if (oldValue !== newValue && typeof(onchange) === 'function') {
-                onchange.call(self, self, self.value);
+        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);
+                }
             }
         }
 
@@ -25,7 +33,7 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        return `<label class="lm-switch" position="{{self.position}}">
+        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>
         </label>`
     }

package/dist/style.css

@@ -1,10 +1,40 @@
+: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: var(--lm-main-color, #2E7D32);
+    --lm-switch-main-color-alpha: var(--lm-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[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[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 {
     position: relative;
     display: inline-flex;
     z-index: 0;
     align-items: center;
-    min-height: 40px;
-    min-width: 40px;
+    min-width: 36px;
+}
+
+label.lm-switch {
+    display: inline-flex;
 }
 
 .lm-switch:before {
@@ -54,7 +84,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 +95,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 +111,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 +139,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 +151,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 +170,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.0.3"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "1.4.0"
+    "version": "5.0.0"
 }