@lemonadejs/switch 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,73 @@
+# LemonadeJS Switch
+
+[Official website and documentation is here](https://lemonadejs.net/components/switch)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.
+
+## Features
+
+-   Lightweight: The JavaScript Switch is only about 2 KBytes;
+-   Integration: It can be used as a standalone library or integrated with any modern framework;
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/switch
+```
+
+### CDN
+
+To use tabs via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+import lemonade from 'lemonadejs'
+import Switch from '@lemonadejs/switch';
+import '@lemonadejs/switch/dist/style.css';
+
+export default function App() {
+    const self = this;
+
+    return `<div>
+        <Switch text="On/Off" />
+    </div>`
+}
+```
+
+[You can find more examples here in the official documentation.](https://lemonadejs.net/components/switch)
+
+#### Settings
+
+| Attribute | Description |
+|-----------|-------------|
+| text?: string | The displayed text. |
+| value?: any | The current value of the component. |
+| name?: string | The attribute `name` assigned to the switch element. |
+| disabled?: boolean | Disables the functionality of the switch. |
+| onopen? | function | When a new tabs is opened. |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) Switch is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Official Type definitions for the JavaScript Switch
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Switch(el: HTMLElement, options?: Switch.Options): Switch.Instance;
+
+declare namespace Switch {
+    interface Options {
+        /** 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;
+        /** Identification name */
+        name?: string;
+        /** Determines whether the switch can be toggled or not */
+        disabled?: boolean;
+    }
+
+    interface Instance {
+        /** Value will hold the current switch internal state value */
+        value?: boolean;
+        /** Determines whether the switch can be toggled or not */
+        disabled?: boolean;
+    }
+}
+
+export default Switch;

package/dist/index.js

@@ -10,8 +10,8 @@ if (!lemonade && typeof (require) === 'function') {
     const Switch = function () {
         let self = this;
 
-        return `<label class="lm-switch">
-          <input type="checkbox" name="{{self.name}}" disabled="{{self.disabled}}" :checked="self.checked" :value="self.value"> <span>{{self.text}}</span>
+        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>`
     }
 
@@ -19,7 +19,7 @@ if (!lemonade && typeof (require) === 'function') {
 
     return function (root, options) {
         if (typeof (root) === 'object') {
-            lemonade.render(Tabs, root, options, template)
+            lemonade.render(Switch, root, options)
             return options;
         } else {
             return Switch.call(this, root);

package/dist/react.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Switch {
+    (): any
+    [key: string]: any
+}
+
+declare function Switch<Switch>(props: Component.Options): any;
+
+export default Switch;

package/dist/react.js

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect } from "react";
+import Component from './index';
+
+
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        if (!Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options);
+        }
+    }, []);
+
+    useEffect(() => {
+        for (let key in props) {
+            if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
+                if (props[key] !== mainReference.current[key]) {
+                    mainReference.current[key] = props[key];
+                }
+            }
+        }
+    }, [props])
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
+})

package/dist/style.css

@@ -1,22 +1,23 @@
 .lm-switch {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
     z-index: 0;
+    align-items: center;
 }
 
 .lm-switch > input {
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
-    z-index: -1;
     position: absolute;
-    right: 6px;
-    top: -8px;
-    display: block;
+    left: 0;
     margin: 0;
+    display: block;
     border-radius: 50%;
     width: 40px;
     height: 40px;
+    max-width: 40px;
+    max-height: 40px;
     outline: none;
     opacity: 0;
     transform: scale(1);
@@ -25,11 +26,12 @@
 }
 
 .lm-switch > span {
-    display: inline-block;
+    display: inline-flex;
     width: 100%;
     line-height: 24px;
     cursor: pointer;
-    margin: 0 5px 0 0;
+    margin: 0 0 0 45px;
+    align-items: center;
 }
 
 .lm-switch > span:empty {
@@ -38,22 +40,19 @@
 
 .lm-switch > span::before {
     content: "";
-    float: right;
-    display: inline-block;
-    margin: 5px 0 5px 0;
+    position: absolute;
+    left: 0;
     border-radius: 7px;
     width: 36px;
     height: 14px;
     background-color: rgba(var(--lm-switch-front-color, 0,0,0), 0.38);
-    vertical-align: top;
     transition: background-color 0.2s, opacity 0.2s;
 }
 
 .lm-switch > span::after {
     content: "";
     position: absolute;
-    top: 2px;
-    right: 16px;
+    left: 0;
     border-radius: 50%;
     width: 20px;
     height: 20px;
@@ -63,7 +62,7 @@
 }
 
 .lm-switch > input:checked {
-    right: -10px;
+    left: 6px;
     background-color: rgb(var(--pure-material-primary-rgb, 33,150,243));
 }
 
@@ -120,3 +119,22 @@
 .lm-switch > input:checked:disabled + span::before {
     background-color: rgba(var(--pure-material-primary-rgb,33,150,243), 0.6);
 }
+
+.lm-switch[position="right"] > span {
+    margin: 0 45px 0 0;
+}
+
+.lm-switch[position="right"] > input {
+    left: initial;
+    right: -11px;
+}
+
+.lm-switch[position="right"] > span::before {
+    left: initial;
+    right: 0;
+}
+
+.lm-switch[position="right"] > span::after {
+    left: initial;
+    right: 16px;
+}

package/dist/vue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Switch {
+    (): any
+    [key: string]: any
+}
+
+declare function Switch<Switch>(props: Component.Options): any;
+
+export default Switch;

package/dist/vue.js

@@ -0,0 +1,45 @@
+import { h } from 'vue';
+import component from "./index";
+
+
+export default {
+    inheritAttrs: false,
+    mounted() {
+        let options = {
+            ...this.$attrs
+        };
+
+        this.el = this.$refs.container;
+
+        this.current = component(this.$refs.container, options);
+    },
+    setup() {
+        let containerProps = {
+            ref: 'container',
+            style: {
+                width: '100%',
+                height: '100%',
+            }
+        };
+        return () => h('div', containerProps);
+    },
+    watch: {
+        $attrs: {
+            deep: true,
+            handler() {
+                this.updateState();
+            }
+        }
+    },
+    methods: {
+        updateState() {
+            for (let key in this.$attrs) {
+                if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
+                    if (this.$attrs[key] !== this.current[key]) {
+                        this.current[key] = this.$attrs[key];
+                    }
+                }
+            }
+        }
+    }
+}

package/package.json

@@ -16,5 +16,5 @@
         "lemonadejs": "^4.0.7"
     },
     "main": "dist/index.js",
-    "version": "1.0.0"
+    "version": "1.0.2"
 }