@lemonadejs/tabs 5.0.0 → 5.8.0

package/README.md

@@ -1,129 +1,131 @@
-# LemonadeJS Tabs
-
-[Official website and documentation is here](https://lemonadejs.net/components/tabs)
-
-Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
-
-The LemonadeJS JavaScript Tabs is a responsive and reactive component that creates selected tabs.
-
-## Features
-
--   Lightweight: The JavaScript Tabs 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/tabs
-```
-
-### 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/tabs/dist/index.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
-```
-
-### Usage
-
-Quick example with Lemonade
-
-```javascript
-import lemonade from 'lemonadejs'
-import Tabs from '@lemonadejs/tabs';
-import '@lemonadejs/tabs/dist/style.css';
-
-export default function App() {
-    const self = this;
-
-    return `<div>
-        <Tabs :selected="0">
-            <div title="Tab 1">Content of the first tab</div>
-            <div title="Tab 2">Content of the second tab</div>
-        </Tabs>
-    </div>`
-}
-```
-
-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
-
-You can configure things such as tabs titles, tabs contents and selected tab.
-
-#### Settings
-
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| selected? | number | The index of the initially selected tab. Starts from 0. |
-| position? | string | The position of the tabs bar within the parent element. Use 'center' to center-align the tabs. |
-| data? | tabItem[] | An optional alternative method to provide the title and content that will serve as the basis for rendering the tabs. See more about the `tabItem` object in the Tab Item section below. |
-| round? | boolean | Dictates whether the tab style will feature rounded corners. |
-| onopen? | function | When a new tabs is opened. |
-
-#### Tab Item
-
-| Property | Description |
-| -------- | ----------- |
-| title    | The title of the tab, serving as the label displayed on the tab options. |
-| content  | The HTML content intended for this specific tab. |
-
-
-## License
-
-The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
-
-## Other Tools
-
--   [jSuites](https://jsuites.net)
--   [Jspreadsheet Data Grid](https://jspreadsheet.com)
+# LemonadeJS Tabs
+
+[Official website and documentation is here](https://lemonadejs.net/components/tabs)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS JavaScript Tabs is a responsive and reactive component that creates selected tabs.
+
+## Features
+
+-   Lightweight: The JavaScript Tabs 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/tabs
+```
+
+### 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/tabs/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+import lemonade from 'lemonadejs';
+import Tabs from '@lemonadejs/tabs';
+import '@lemonadejs/tabs/dist/style.css';
+
+export default function App() {
+    const self = this;
+
+    return `<div>
+        <Tabs :selected="0">
+            <div title="Tab 1">Content of the first tab</div>
+            <div title="Tab 2">Content of the second tab</div>
+        </Tabs>
+    </div>`;
+}
+```
+
+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
+
+You can configure things such as tabs titles, tabs contents and selected tab.
+
+#### Settings
+
+| Property  | Type      | Description                                                                                                                                                                             |
+| --------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| selected? | number    | The index of the initially selected tab. Starts from 0.                                                                                                                                 |
+| position? | string    | The position of the tabs bar within the parent element. Use 'center' to center-align the tabs.                                                                                          |
+| data?     | tabItem[] | An optional alternative method to provide the title and content that will serve as the basis for rendering the tabs. See more about the `tabItem` object in the Tab Item section below. |
+| round?    | boolean   | Dictates whether the tab style will feature rounded corners.                                                                                                                            |
+| onopen?   | function  | When a new tabs is opened.                                                                                                                                                              |
+
+#### Tab Item
+
+| Property | Description                                                              |
+| -------- | ------------------------------------------------------------------------ |
+| title    | The title of the tab, serving as the label displayed on the tab options. |
+| content  | The HTML content intended for this specific tab.                         |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -10,6 +10,8 @@ declare namespace Tabs {
     interface Item {
         // Reference to an external DOM
         el: HTMLElement,
+        /** Material icon keyword */
+        icon?: string;
         // Tab header
         title: string,
         // HTML template
@@ -22,13 +24,21 @@ declare namespace Tabs {
         /** Selected tab */
         selected?: number;
         /** Tabs position */
-        position?: 'center' | undefined;
+        position?: 'default' | 'center' | 'bottom' | undefined;
         /** Activate round borders */
         round?: boolean;
-        /** On open event */
-        onopen?: (instance: object, index: number) => void;
         /** Allow to create new tab button */
         allowCreate?: boolean;
+        /** Change tabs */
+        onchange?: (instance: object, value: number) => void;
+        /** On open event */
+        onopen?: (instance: object, index: number) => void;
+        /** Before create new tab */
+        onbeforecreate?: (instance: object, item: Item, position: number) => boolean | void;
+        /** On create new tab event */
+        oncreate?: (instance: object, item: Item, position: number) => void;
+        /** On change tab position event */
+        onchangeposition: (instance: object, fromIndex: number, toIndex: number) => void;
     }
 
     interface Instance {
@@ -42,8 +52,8 @@ declare namespace Tabs {
         position?: 'center' | undefined;
         /** Activate round borders */
         round?: boolean;
-        /** On open event */
-        onopen?: (instance: object, index: number) => void;
+        /** Allow to create new tab button */
+        allowCreate?: boolean;
     }
 }
 

package/dist/index.js

@@ -8,12 +8,33 @@ if (! lemonade && typeof (require) === 'function') {
     global.Tabs = factory();
 }(this, (function () {
 
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
     // Dispatcher
-    const Dispatch = function(type){
-        if (typeof this[type] === 'function') {
-            let args = Array.from(arguments);
-            args.shift();
-            this[type](...args)
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            this.dispatchEvent(new CustomEvents(type, options));
         }
     }
 
@@ -37,9 +58,109 @@ if (! lemonade && typeof (require) === 'function') {
         }
     }
 
-    const Tabs = function(children) {
+    const sorting = function(el, options) {
+        const obj = {};
+
+        let dragElement = null;
+
+        el.addEventListener('dragstart', function(e) {
+            let target = e.target;
+            if (target.nodeType === 3) {
+                if (target.parentNode.getAttribute('draggable') === 'true') {
+                    target = target.parentNode;
+                } else {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
+            }
+
+            if (target.getAttribute('draggable') === 'true') {
+                let position = Array.prototype.indexOf.call(target.parentNode.children, target);
+                dragElement = {
+                    element: target,
+                    o: position,
+                    d: position
+                }
+                target.style.opacity = '0.25';
+                e.dataTransfer.setDragImage(target,0,0);
+            }
+        });
+
+        el.addEventListener('dragover', function(e) {
+            e.preventDefault();
+
+            if (dragElement && getElement(e.target) && e.target.getAttribute('draggable') == 'true' && dragElement.element != e.target) {
+                let element = e.target.clientWidth / 2 > e.offsetX ? e.target : e.target.nextSibling;
+                e.target.parentNode.insertBefore(dragElement.element, element);
+                dragElement.d = Array.prototype.indexOf.call(e.target.parentNode.children, dragElement.element);
+            }
+        });
+
+        el.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+        });
+
+        el.addEventListener('dragend', function(e) {
+            e.preventDefault();
+
+            if (dragElement) {
+                let element = dragElement.o < dragElement.d ? e.target.parentNode.children[dragElement.o] : e.target.parentNode.children[dragElement.o].nextSibling
+                e.target.parentNode.insertBefore(dragElement.element, element);
+                dragElement.element.style.opacity = '';
+                dragElement = null;
+            }
+        });
+
+        el.addEventListener('drop', function(e) {
+            e.preventDefault();
+
+            if (dragElement) {
+                if (dragElement.o !== dragElement.d) {
+                    if (typeof(options.ondrop) == 'function') {
+                        options.ondrop(el, dragElement.o, dragElement.d, dragElement.element, e.target, e);
+                    }
+                }
+
+                dragElement.element.style.opacity = '';
+                dragElement = null;
+            }
+        });
+
+        const getElement = function(element) {
+            var sorting = false;
+
+            function path (element) {
+                if (element === el) {
+                    sorting = true;
+                }
+
+                if (! sorting) {
+                    path(element.parentNode);
+                }
+            }
+
+            path(element);
+
+            return sorting;
+        }
+
+        for (let i = 0; i < el.children.length; i++) {
+            if (! el.children[i].hasAttribute('draggable')) {
+                el.children[i].setAttribute('draggable', 'true');
+            }
+        }
+
+        return el;
+    }
+
+    const Tabs = function(children, { onchange, onload }) {
         let self = this
 
+        // Event
+        let change = self.onchange;
+        self.onchange = null;
+
         // Add new tab
         let createButton;
 
@@ -77,7 +198,9 @@ if (! lemonade && typeof (require) === 'function') {
             }
         }
 
-        const select = function (index) {
+        let props = ['title', 'selected', 'data-icon'];
+
+        const select = function(index) {
             // Make sure the index is a number
             index = parseInt(index);
             // Do not select tabs that does not exist
@@ -93,19 +216,19 @@ if (! lemonade && typeof (require) === 'function') {
 
         const init = function(selected) {
             let tabs = [];
+
             for (let i = 0; i < self.data.length; i++) {
                 // Extract meta information from the DOM
-                if (! self.data[i].title) {
-                    let ret = self.data[i].el.getAttribute('title');
-                    if (ret != null) {
-                        self.data[i].title = ret;
-                    }
-                }
-                if (! self.data[i].selected) {
-                    let ret = self.data[i].el.getAttribute('selected');
-                    if (ret != null) {
-                        self.data[i].selected = ret;
-                    }
+                if (props) {
+                    props.forEach((prop) => {
+                        let short = prop.replace('data-', '');
+                        if (! self.data[i][short]) {
+                            let ret = self.data[i].el.getAttribute(prop);
+                            if (ret != null) {
+                                self.data[i][short] = ret;
+                            }
+                        }
+                    });
                 }
                 // Create tabs object
                 tabs[i] = {
@@ -115,30 +238,68 @@ if (! lemonade && typeof (require) === 'function') {
                 if (self.data[i].selected) {
                     selected = i;
                 }
+                if (self.data[i].icon) {
+                    tabs[i].icon = self.data[i].icon;
+                }
 
-                self.root.appendChild(self.data[i].el)
+                self.root.appendChild(self.data[i].el);
             }
+
             // Create headers
             self.tabs = tabs;
+
             // Default selected
             if (typeof(selected) !== 'undefined') {
                 self.selected = selected;
             }
-            // Add create new tab button
-            if (createButton) {
-                self.headers.appendChild(createButton);
+
+            if (props) {
+                // Add create new tab button
+                if (createButton) {
+                    self.headers.appendChild(createButton);
+                }
+                // Add sorting
+                sorting(self.el.firstChild.firstChild, {
+                    ondrop: (el, fromIndex, toIndex) => {
+                        // Remove the item from its original position
+                        const [movedItem] = self.data.splice(fromIndex, 1);
+                        // Insert it into the new position
+                        self.data.splice(toIndex, 0, movedItem);
+                        // Make sure correct order
+                        for (let i = 0; i < self.data.length; i++) {
+                            self.root.appendChild(self.data[i].el);
+                        }
+                        // Select new position
+                        self.selected = toIndex;
+                        // Dispatch event
+                        Dispatch.call(self, self.onchangeposition, 'changeposition', {
+                            instance: self,
+                            fromIndex: fromIndex,
+                            toIndex: toIndex,
+                        });
+                    }
+                })
             }
+
+            props = null;
         }
 
-        self.onload = function () {
-            if (template) {
-                extract(self.root, self);
-            }
+        const create = function() {
+            // Create a new item
+            self.create({ title: 'Untitled' }, null, true);
+        }
 
-            init(self.selected || 0);
+        const open = function(e) {
+            if (e.target.tagName === 'LI') {
+                // Avoid select something already selected
+                let index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
+                if (index !== self.selected) {
+                    self.selected = index;
+                }
+            }
         }
 
-        self.keydown = function(e, s) {
+        const keydown = function(e, s) {
             let index = null;
             if (e.key === 'Enter') {
                 self.click(e, s);
@@ -160,14 +321,32 @@ if (! lemonade && typeof (require) === 'function') {
             }
         }
 
-        self.open = function (e) {
-            if (e.target.tagName === 'LI') {
-                // Avoid select something already selected
-                let index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
-                if (index !== self.selected) {
-                    self.selected = index;
-                }
+        onload(() => {
+            if (template) {
+                extract(self.root, self);
             }
+
+            init(self.selected || 0);
+        })
+
+        onchange((property) => {
+            if (property === 'selected') {
+                select(self.selected);
+
+                Dispatch.call(self, self.onopen, 'open', {
+                    instance: self,
+                    selected: self.selected,
+                });
+
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: self.selected,
+                });
+            }
+        })
+
+        self.open = function (index) {
+            self.selected = index;
         }
 
         self.create = function(item, position, select) {
@@ -175,6 +354,17 @@ if (! lemonade && typeof (require) === 'function') {
             if (typeof(item) !== 'object') {
                 console.error('Item must be an object');
             } else {
+
+                let ret = Dispatch.call(self, self.onbeforecreate, 'beforecreate', {
+                    instance: self,
+                    item: item,
+                    position: position,
+                });
+
+                if (ret === false) {
+                    return false;
+                }
+
                 // Create DOM
                 item.el = document.createElement('div');
                 // Create from content
@@ -198,28 +388,25 @@ if (! lemonade && typeof (require) === 'function') {
                 } else {
                     init(self.selected);
                 }
-            }
-        }
-
-        self.click = function() {
-            // Create a new item
-            self.create({ title: 'Untitled' }, null, true);
-        }
 
-        self.onchange = function (property) {
-            if (property === 'selected') {
-                select(self.selected);
+                self.tabs.forEach(item => {
+                    item.el.setAttribute('draggable', 'true');
+                })
 
-                Dispatch.call(self, 'onopen', self, self.selected);
+                Dispatch.call(self, self.oncreate, 'create', {
+                    instance: self,
+                    item: item,
+                    position: position,
+                });
             }
         }
 
         self.allowCreate = !! self.allowCreate;
 
-        return `<div class="lm-tabs" data-position="{{self.position}}" data-round="{{self.round}}">
+        return render => render`<div class="lm-tabs" data-position="{{self.position}}" data-round="{{self.round}}">
             <div role="tabs" class="lm-tabs-headers">
-                <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="self.open" onkeydown="self.keydown" onfocusin="self.open"><li class="lm-tab" tabindex="0" role="tab">{{self.title}}</li></ul>
-                <div data-visible="{{self.allowCreate}}" class="lm-tabs-insert-tab material-icons" role="insert-tab" onclick="self.click">add</div>
+                <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="${open}" onkeydown="${keydown}" onfocusin="${open}"><li class="lm-tab" tabindex="0" role="tab" data-icon="{{self.icon}}">{{self.title}}</li></ul>
+                <div data-visible="{{self.allowCreate}}" class="lm-tabs-insert-button" role="insert-tab" onclick="${create}">add</div>
             </div>
             <div :ref="self.root" class="lm-tabs-content">${template}</div>
         </div>`

package/dist/style.css

@@ -1,78 +1,104 @@
+.lm-tabs[data-position="bottom"] {
+    display: flex;
+    justify-content: center;
+    flex-direction: column-reverse;
+}
+
 .lm-tabs .lm-tabs-content > div {
-  padding: 15px 5px;
+    padding: 15px 5px;
 }
 
 .lm-tabs .lm-tabs-headers {
-  display: flex;
-  align-items: center;
-  width: 100%;
+    display: flex;
+    align-items: center;
+    width: 100%;
 }
 
 .lm-tabs[data-position="center"] .lm-tabs-headers {
-  margin: 0 auto;
-  justify-content: center;
+    margin: 0 auto;
+    justify-content: center;
 }
 
 .lm-tabs .lm-tabs-headers > ul {
-  list-style-type: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-  align-items: center;
+    list-style-type: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    align-items: center;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li {
-  cursor: pointer;
-  user-select: none;
-  padding: 4px 24px;
-  border: 1px solid #ccc;
-  background-position: center;
-  transition: background 0.8s;
+    cursor: pointer;
+    user-select: none;
+    padding: 4px 24px;
+    border: 1px solid #ccc;
+    background-position: center;
+    transition: background 0.8s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li.selected {
-  background-color: #eee;
-  color: #000;
+    background-color: #eee;
+    color: #000;
+}
+
+.lm-tabs .lm-tabs-headers > ul > li[data-icon]:before {
+    content: attr(data-icon);
+    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    color: var(--lm-icon-color, #777);
+    margin-bottom: 5px;
 }
 
 .lm-tabs[data-round="true"] .lm-tabs-headers > ul > li:first-of-type {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
 }
 
 .lm-tabs[data-round="true"] .lm-tabs-headers > ul > li:last-of-type {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li:not(:first-child) {
-  border-left: 1px solid transparent;
+    border-left: 1px solid transparent;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li:hover {
-  background: #eee radial-gradient(circle, transparent 1%, #eee 1%) center/15000%;
+    background: #eee radial-gradient(circle, transparent 1%, #eee 1%) center/15000%;
 }
 
 .lm-tabs .lm-tabs-headers > ul > li:active {
-  background-color: #ddd;
-  background-size: 100%;
-  transition: background 0s;
+    background-color: #ddd;
+    background-size: 100%;
+    transition: background 0s;
 }
 
 .lm-tabs .lm-tabs-content > div {
-  display: none;
+    display: none;
 }
 
 .lm-tabs .lm-tabs-content > div.selected {
-  display: block;
+    display: block;
 }
 
-.lm-tabs-insert-tab {
-  margin-left: 5px;
-  color: #555;
-  cursor: pointer;
+.lm-tabs-insert-button {
+    margin-left: 5px;
+    color: #555;
+    cursor: pointer;
+    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 24px;
 }
 
-.lm-tabs div[data-visible='false'] {
-  display: none;
-}
+.lm-tabs div[data-visible="false"] {
+    display: none;
+}

package/package.json

@@ -1,20 +1,20 @@
-{
-    "name": "@lemonadejs/tabs",
-    "title": "JavaScript Tabs",
-    "description": "LemonadeJS tabs is a JavaScript component to create tabs.",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript tabs",
-        "lemonadejs tabs",
-        "js tabs",
-        "tabs js"
-    ],
-    "dependencies": {
-        "lemonadejs": "^5.0.3"
-    },
-    "main": "dist/index.js",
-    "version": "5.0.0"
-}
+{
+    "name": "@lemonadejs/tabs",
+    "title": "JavaScript Tabs",
+    "description": "LemonadeJS tabs is a JavaScript component to create tabs.",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript tabs",
+        "lemonadejs tabs",
+        "js tabs",
+        "tabs js"
+    ],
+    "dependencies": {
+        "lemonadejs": "^5.3.2"
+    },
+    "main": "dist/index.js",
+    "version": "5.8.0"
+}