@lemonadejs/switch 1.3.2 → 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,8 +1,45 @@
+: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-width: 36px;
+}
+
+label.lm-switch {
+    display: inline-flex;
+}
+
+.lm-switch:before {
+    content: '';
+    min-height: 1em;
 }
 
 .lm-switch > input {
@@ -14,10 +51,10 @@
     margin: 0;
     display: block;
     border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    max-width: 40px;
-    max-height: 40px;
+    width: 30px;
+    height: 30px;
+    max-width: 30px;
+    max-height: 30px;
     outline: none;
     opacity: 0;
     transform: scale(1);
@@ -32,6 +69,8 @@
     cursor: pointer;
     margin: 0 0 0 45px;
     align-items: center;
+    box-sizing: border-box;
+    max-width: -webkit-fill-available;
 }
 
 .lm-switch > span:empty {
@@ -45,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;
 }
 
@@ -56,27 +95,27 @@
     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: 6px;
-    background-color: var(--lm-main-color, #2196f3);
+    left: 11px;
+    background-color: var(--lm-switch-main-color);
 }
 
 .lm-switch > input:not(:checked) {
-    left: -10px;
+    left: -5px;
     background-color: var(--lm-secondary-color, #6A6A6A);
 }
 
 .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);
 }
 
@@ -100,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 {
@@ -112,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 {
@@ -131,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.3.2"
+    "version": "5.0.0"
 }