@lemonadejs/tabs 2.0.4 → 2.1.0

package/README.md

@@ -54,6 +54,47 @@ export default function App() {
 }
 ```
 
+Quick example with React
+
+```jsx
+import React, { useRef } from "react";
+import Tabs from "@lemonadejs/tabs/dist/react";
+import '@lemonadejs/tabs/dist/style.css';
+
+const data = [{ title: 'Tab 1', content: 'Content of first tab' }, { title: 'Tab 2', content: 'Content of second tab' }]
+export default function App() {
+    const tabs = useRef();
+    return (
+        <>
+            <Tabs selected={0} ref={tabs} data={data}/>
+        </>
+    );
+}
+```
+
+Quick example with React
+
+```vue
+<template>
+  <Tabs :selected="0">
+      <div title="Tab 1">Content of the first tab</div>
+      <div title="Tab 2">Content of the second tab</div>
+  </Tabs>
+</template>
+
+<script>
+import Tabs from '@lemonadejs/tabs/dist/vue';
+import '@lemonadejs/tabs/dist/style.css';
+
+export default {
+  name: 'App',
+  components: {
+      Tabs,
+  },
+};
+</script>
+```
+
 [You can find more examples here in the official documentation.](https://lemonadejs.net/components/tabs)
 
 ### Configuration

package/dist/index.js

@@ -1,4 +1,4 @@
-if (!lemonade && typeof (require) === 'function') {
+if (! lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -10,29 +10,47 @@ if (!lemonade && typeof (require) === 'function') {
 
     const Tabs = function (html) {
         let self = this
+        let elements = [];
 
-        let content = html;
+        if (this.tagName) {
+            // Remove elements from the DOM
+            elements = removeElements(this);
+        }
 
         if (self.data) {
             for (let i = 0; i < self.data.length; i++) {
-                content += `<div title="${self.data[i].title}">${self.data[i].content}</div>`;
+                let d = document.createElement('div');
+                d.title = self.data[i].title;
+                d.innerHTML = self.data[i].content;
+                elements.push(d);
             }
         }
 
+        if (! html) {
+            html = '';
+        }
+
         self.tabs = [];
 
         const select = function (index) {
             index = parseInt(index);
 
-            for (let i = 0; i < self.content.children.length; i++) {
-                self.headers.children[i].classList.remove('selected');
-                self.content.children[i].classList.remove('selected');
+            if (index >= 0 && index < self.tabs.length) {
+                for (let i = 0; i < self.content.children.length; i++) {
+                    self.headers.children[i].classList.remove('selected');
+                    self.content.children[i].classList.remove('selected');
+                }
+                self.headers.children[index].classList.add('selected');
+                self.content.children[index].classList.add('selected');
+
+                self.position = index;
             }
-            self.headers.children[index].classList.add('selected');
-            self.content.children[index].classList.add('selected');
         }
 
         self.onload = function () {
+            // Append elements to the container
+            appendElements(self.el.children[1], elements);
+
             for (let i = 0; i < self.content.children.length; i++) {
                 self.tabs.push({ title: self.content.children[i].title });
             }
@@ -43,8 +61,29 @@ if (!lemonade && typeof (require) === 'function') {
                 index = parseInt(self.selected);
             }
             select(index);
+            
+            /**
+             * Handler keyboard
+             * @param {object} e - event
+            */
+            self.headers.addEventListener('keydown', function(e){
+                let prevent = false;
+                if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                    select(self.position - 1);
+                    prevent = true;
+                } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                    select(self.position + 1);
+                    prevent = true;
+                }
+    
+                if (prevent) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                }
+            });
         }
 
+
         self.onchange = function (property) {
             if (property === 'selected') {
                 select(self.selected);
@@ -62,24 +101,49 @@ if (!lemonade && typeof (require) === 'function') {
         }
 
         return `<div class="lm-tabs" data-position="{{self.position}}" data-round="{{self.round}}">
-            <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="self.click"><li class="lm-tab-list-item">{{self.title}}</li></ul>
-            <div :ref="self.content" class="lm-tabs-content">${content}</div>
+            <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="self.click" tabindex="0"><li class="lm-tab-list-item">{{self.title}}</li></ul>
+            <div :ref="self.content" class="lm-tabs-content">${html}</div>
         </div>`
     }
 
-    lemonade.setComponents({ Tabs: Tabs });
+    const removeElements = function(root) {
+        // Keep the DOM elements
+        let elements = [];
+        if (root) {
+            while (root.firstChild) {
+                elements.push(root.firstChild);
+                root.firstChild.remove();
+            }
+        }
+        return elements;
+    }
 
-    return function (root, options) {
+    const appendElements = function(root, elements) {
+        if (elements && elements.length) {
+            while (elements[0]) {
+                root.appendChild(elements.shift());
+            }
+        }
+    }
+
+    const Component = function (root, options) {
         if (typeof (root) === 'object') {
-            // Get HTML inside the wrapper element then empty it
-            const template = root.innerHTML
-            root.innerHTML = ''
+            // Remove elements from the DOM
+            let elements = removeElements(root);
+            // Create the modal
+            let e = lemonade.render(Tabs, root, options);
+            // Add elements to the container
+            appendElements(e.children[1], elements);
 
-            // Send Template as a parameter for the Lemonade component
-            lemonade.render(Tabs, root, options, template)
             return options;
         } else {
-            return Tabs.call(this, root);
+            return Tabs.call(this);
         }
     }
+
+    lemonade.setComponents({ Tabs: Tabs });
+
+    lemonade.createWebComponent('tabs', Tabs);
+
+    return Component;
 })));

package/dist/react.d.ts

@@ -6,10 +6,13 @@
 import Component from './index';
 
 interface Tabs {
+    ref?: MutableRefObject<undefined>;
     (): any
     [key: string]: any
 }
 
-declare function Tabs<Tabs>(props: Component.Options): any;
+type Props = IntrinsicAttributes & Component.Options & Tabs;
+
+declare function Tabs<Tabs>(props: Props): any;
 
 export default Tabs;

package/dist/style.css

@@ -21,6 +21,11 @@
 
 .lm-tabs > ul > li.selected {
   background-color: #eee;
+  color: #000;
+}
+
+.lm-tabs > ul:focus {
+    outline: none;
 }
 
 .lm-tabs[data-round="true"] > ul > li:first-child {

package/package.json

@@ -13,8 +13,8 @@
         "tabs js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.0.7"
+        "lemonadejs": "^4.3.1"
     },
     "main": "dist/index.js",
-    "version": "2.0.4"
+    "version": "2.1.0"
 }