@lemonadejs/switch 1.1.4 → 1.3.2

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;
 
@@ -18,12 +19,21 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
+        self.onload = function() {
+            if (self.width) {
+                self.el.style.width = self.width;
+            }
+        }
+
         return `<label class="lm-switch" position="{{self.position}}">
             <input type="checkbox" name="{{self.name}}" disabled="{{self.disabled}}" :bind="self.value" /> <span>{{self.text}}</span>
         </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 Props = IntrinsicAttributes & Component.Options & Switch;
 
-export default Switch;
+declare function Switch<Switch>(props: Props): any;
+
+export default Switch;

package/dist/style.css

@@ -1,6 +1,6 @@
 .lm-switch {
-    position: relative !important;
-    display: inline-flex !important;
+    position: relative;
+    display: inline-flex;
     z-index: 0;
     align-items: center;
 }
@@ -63,15 +63,20 @@
 
 .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:not(:checked) {
+    left: -10px;
+    background-color: var(--lm-secondary-color, #6A6A6A);
 }
 
 .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 +100,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 +112,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.3"
     },
     "main": "dist/index.js",
-    "version": "1.1.4"
+    "types": "dist/index.d.ts",
+    "version": "1.3.2"
 }