@lemonadejs/switch 1.1.3 → 1.3.0

package/README.md

@@ -51,6 +51,41 @@ export default function App() {
 }
 ```
 
+```jsx
+import React, { useRef } from "react";
+import Switch from "@lemonadejs/switch/dist/react";
+import '@lemonadejs/switch/dist/style.css';
+
+export default function App() {
+    const switchRef = useRef();
+    return (
+        <>
+            <Switch text='On/Off' ref={switchRef} />
+        </>
+    );
+}
+```
+
+Quick example with Lemonade
+
+```vue
+<template>
+  <Switch text='On/Off' />
+</template>
+
+<script>
+import Switch from '@lemonadejs/switch/dist/vue';
+import '@lemonadejs/switch/dist/style.css';
+
+export default {
+  name: 'App',
+  components: {
+    Switch,
+  },
+};
+</script>
+```
+
 [You can find more examples here in the official documentation.](https://lemonadejs.net/components/switch)
 
 #### Settings
@@ -69,5 +104,5 @@ The [LemonadeJS](https://lemonadejs.net) Switch is released under the MIT.
 
 ## Other Tools
 
--   [jSuites](https://jsuites.net/v4/)
+-   [jSuites](https://jsuites.net/docs)
 -   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -30,4 +30,11 @@ declare namespace Switch {
     }
 }
 
+// Extend the global custom elements map
+declare global {
+    interface HTMLElementTagNameMap {
+        'lm-switch': Switch.Options;
+    }
+}
+
 export default Switch;

package/dist/index.js

@@ -7,6 +7,7 @@ if (!lemonade && typeof (require) === 'function') {
     typeof define === 'function' && define.amd ? define(factory) :
     global.Switch = factory();
 }(this, (function () {
+
     const Switch = function () {
         let self = this;
 
@@ -14,7 +15,7 @@ if (!lemonade && typeof (require) === 'function') {
 
         self.onchange = function(prop, elements, s, oldValue, newValue) {
             if (oldValue !== newValue && typeof(onchange) === 'function') {
-                onchange.call(self, self.value);
+                onchange.call(self, self, self.value);
             }
         }
 
@@ -23,7 +24,10 @@ if (!lemonade && typeof (require) === 'function') {
         </label>`
     }
 
+    // Create LemonadeJS references
     lemonade.setComponents({ Switch: Switch });
+    // Create web-component
+    lemonade.createWebComponent('switch', Switch);
 
     return function (root, options) {
         if (typeof (root) === 'object') {

package/dist/react.d.ts

@@ -1,15 +1,18 @@
 /**
  * Official Type definitions for the LemonadeJS plugins
- * https://lemonadejs.net
+ * https://lemonadejs.net/docs/plugins/switch
  * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  */
 import Component from './index';
 
 interface Switch {
+    ref?: MutableRefObject<undefined>;
     (): any
     [key: string]: any
 }
 
-declare function Switch<Switch>(props: Component.Options): any;
+type SwitchProps = IntrinsicAttributes & Component.Options & Switch;
 
-export default Switch;
+declare function Switch<Switch>(props: SwitchProps): any;
+
+export default Switch;

package/dist/style.css

@@ -63,15 +63,15 @@
 
 .lm-switch > input:checked {
     left: 6px;
-    background-color: rgb(var(--pure-material-primary-rgb, 33,150,243));
+    background-color: var(--lm-main-color, #2196f3);
 }
 
 .lm-switch > input:checked + span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33,150,243), 0.6);
+    background-color: var(--lm-main-color-alpha, #2196f388);
 }
 
 .lm-switch > input:checked + span::after {
-    background-color: rgb(var(--pure-material-primary-rgb, 33,150,243));
+    background-color: var(--lm-main-color, #2196f3);
     transform: translateX(16px);
 }
 
@@ -95,11 +95,11 @@
 }
 
 .lm-switch > input:active + span::before {
-    background-color: rgba(var(--pure-material-primary-rgb, 33,150,243), 0.6);
+    background-color: var(--lm-main-color-alpha, #2196f388);
 }
 
 .lm-switch > input:checked:active + span::before {
-    background-color: rgba(var(--lm-switch-front-color, 0,0,0), 0.38);
+    background-color: rgba(var(--lm-front-color, 0,0,0), 0.38);
 }
 
 .lm-switch > input:disabled {
@@ -107,17 +107,17 @@
 }
 
 .lm-switch > input:disabled + span {
-    color: rgb(var(--lm-switch-front-color,0,0,0));
-    opacity: 0.38;
+    color: rgb(var(--lm-front-color,0,0,0));
+    opacity: 0.50;
     cursor: default;
 }
 
 .lm-switch > input:disabled + span::before {
-    background-color: rgba(var(--lm-switch-front-color,0,0,0), 0.38);
+    background-color: rgba(var(--lm-front-color,0,0,0), 0.38);
 }
 
 .lm-switch > input:checked:disabled + span::before {
-    background-color: rgba(var(--pure-material-primary-rgb,33,150,243), 0.6);
+    background-color: var(--lm-main-color-alpha, #2196f388);
 }
 
 .lm-switch[position="right"] > span {

package/package.json

@@ -13,8 +13,9 @@
         "switch js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.1.1"
+        "lemonadejs": "^4.3.0"
     },
     "main": "dist/index.js",
-    "version": "1.1.3"
+    "types": "dist/index.d.ts",
+    "version": "1.3.0"
 }