@lemonadejs/tabs 2.1.0 → 2.3.0

package/README.md

@@ -1,129 +1,129 @@
-# 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

@@ -1,42 +1,50 @@
-/**
- * Official Type definitions for LemonadeJS plugins
- * https://lemonadejs.net
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-declare function Tabs(el: HTMLElement, options?: Tabs.Options): Tabs.Instance;
-
-declare namespace Tabs {
-
-    interface Items {
-        title: string,
-        content: string,
-    }
-
-    interface Options {
-        /** Programmatically content */
-        data?: Items[];
-        /** Selected tab */
-        selected?: number;
-        /** Tabs position */
-        position?: 'center' | undefined;
-        /** Activate round borders */
-        round?: boolean;
-        /** On open event */
-        onopen?: (index: number) => void;
-    }
-
-    interface Instance {
-        /** Programmatically content */
-        data?: Items[];
-        /** Selected tab */
-        selected: number;
-        /** Tabs position */
-        position?: 'center' | undefined;
-        /** Activate round borders */
-        round?: boolean;
-        /** On open event */
-        onopen?: (index: number) => void;
-    }
-}
-
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+declare function Tabs(el: HTMLElement, options?: Tabs.Options): Tabs.Instance;
+
+declare namespace Tabs {
+
+    interface Item {
+        // Reference to an external DOM
+        el: HTMLElement,
+        // Tab header
+        title: string,
+        // HTML template
+        content: string,
+    }
+
+    interface Options {
+        /** Programmatically content */
+        data?: Item[];
+        /** Selected tab */
+        selected?: number;
+        /** Tabs position */
+        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;
+    }
+
+    interface Instance {
+        /** Create a new option */
+        create: (item: Item, position?: number, select?: boolean) => void;
+        /** Programmatically content */
+        data: Item[];
+        /** Selected tab */
+        selected: number;
+        /** Tabs position */
+        position?: 'center' | undefined;
+        /** Activate round borders */
+        round?: boolean;
+        /** On open event */
+        onopen?: (instance: object, index: number) => void;
+    }
+}
+
 export default Tabs;

package/dist/index.js

@@ -1,149 +1,237 @@
-if (! lemonade && typeof (require) === 'function') {
-    var lemonade = require('lemonadejs');
-}
-
-; (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.Tabs = factory();
-}(this, (function () {
-
-    const Tabs = function (html) {
-        let self = this
-        let elements = [];
-
-        if (this.tagName) {
-            // Remove elements from the DOM
-            elements = removeElements(this);
-        }
-
-        if (self.data) {
-            for (let i = 0; i < self.data.length; i++) {
-                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);
-
-            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.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 });
-            }
-            self.refresh('tabs');
-
-            let index = 0;
-            if (! isNaN(parseInt(self.selected))) {
-                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);
-
-                if (typeof(self.onopen) === 'function') {
-                    self.onopen.call(self, self.selected);
-                }
-            }
-        }
-
-        self.click = function (e) {
-            if (e.target.tagName === 'LI') {
-                self.selected = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
-            }
-        }
-
-        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" tabindex="0"><li class="lm-tab-list-item">{{self.title}}</li></ul>
-            <div :ref="self.content" class="lm-tabs-content">${html}</div>
-        </div>`
-    }
-
-    const removeElements = function(root) {
-        // Keep the DOM elements
-        let elements = [];
-        if (root) {
-            while (root.firstChild) {
-                elements.push(root.firstChild);
-                root.firstChild.remove();
-            }
-        }
-        return elements;
-    }
-
-    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') {
-            // 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);
-
-            return options;
-        } else {
-            return Tabs.call(this);
-        }
-    }
-
-    lemonade.setComponents({ Tabs: Tabs });
-
-    lemonade.createWebComponent('tabs', Tabs);
-
-    return Component;
+if (! lemonade && typeof (require) === 'function') {
+    var lemonade = require('lemonadejs');
+}
+
+; (function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Tabs = factory();
+}(this, (function () {
+
+    // Dispatcher
+    const Dispatch = function(type){
+        if (typeof this[type] === 'function') {
+            let args = Array.from(arguments);
+            args.shift();
+            this[type](...args)
+        }
+    }
+
+    const extract = function(root, self) {
+        if (! Array.isArray(self.data)) {
+            self.data = [];
+        }
+
+        if (root.tagName) {
+            for (let i = 0; i < root.children.length; i++) {
+                self.data.push({
+                    el: root.children[i],
+                })
+            }
+        } else {
+            root.forEach((child) => {
+                self.data.push({
+                    el: child.element,
+                })
+            });
+        }
+    }
+
+    const Tabs = function(children) {
+        let self = this
+
+        // Add new tab
+        let createButton;
+
+        // Get the references from the root web component
+        let root;
+        if (this.tagName) {
+            root = this;
+        } else {
+            // References from LemonadeJS
+            if (typeof(children) === 'string') {
+                // Version 4
+                root = document.createElement('div');
+                root.innerHTML = children;
+            } else if (children && children.length) {
+                // Version 5
+                root = children;
+            }
+        }
+
+        if (root) {
+            extract(root, self);
+        }
+
+        // Process the data
+        if (self.data) {
+            for (let i = 0; i < self.data.length; i++) {
+                if (self.data[i].el) {
+                    if (! self.data[i].title) {
+                        self.data[i].title = self.data[i].el.getAttribute('title');
+                    }
+                    if (! self.data[i].selected) {
+                        self.data[i].selected = self.data[i].el.getAttribute('selected');
+                    }
+                } else {
+                    // Create element
+                    self.data[i].el = document.createElement('div');
+                    // Create from content
+                    if (self.data[i].content) {
+                        self.data[i].el.innerHTML = self.data[i].content;
+                    }
+                }
+            }
+        }
+
+        const select = function (index) {
+            // Make sure the index is a number
+            index = parseInt(index);
+            // Do not select tabs that does not exist
+            if (index >= 0 && index < self.data.length) {
+                for (let i = 0; i < self.root.children.length; i++) {
+                    self.headers.children[i].classList.remove('selected');
+                    self.root.children[i].classList.remove('selected');
+                }
+                self.headers.children[index].classList.add('selected');
+                self.root.children[index].classList.add('selected');
+            }
+        }
+
+        const init = function(selected) {
+            let tabs = [];
+            for (let i = 0; i < self.data.length; i++) {
+                // Create tabs object
+                tabs[i] = {
+                    title: self.data[i].title,
+                }
+                // Which one is selected by default
+                if (self.data[i].selected) {
+                    selected = i;
+                }
+
+                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);
+            }
+        }
+
+        self.onload = function () {
+            init(self.selected || 0);
+        }
+
+        self.keydown = function(e, s) {
+            let index = null;
+            if (e.key === 'Enter') {
+                self.click(e, s);
+            } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                index = self.selected - 1;
+                if (index < 0) {
+                    index = 0;
+                }
+            } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                index = self.selected + 1;
+                if (index > self.tabs.length-1) {
+                    index = self.tabs.length-1;
+                }
+            }
+
+            // Make selection
+            if (index !== null) {
+                self.tabs[index].el.focus();
+            }
+        }
+
+        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;
+                }
+            }
+        }
+
+        self.create = function(item, position, select) {
+            // Create element
+            if (typeof(item) !== 'object') {
+                console.error('Item must be an object');
+            } else {
+                // Create DOM
+                item.el = document.createElement('div');
+                // Create from content
+                if (item.content) {
+                    item.el.innerHTML = item.content;
+                }
+
+                // Add the new item in the end
+                if (typeof(position) === 'undefined' || position === null) {
+                    // Mew item
+                    position = self.data.length;
+                    // Add in the end
+                    self.data.push(item);
+                } else {
+                    self.data.splice(position, 0, item);
+                }
+                // New position
+                if (select) {
+                    // Refresh
+                    init(self.data.indexOf(item));
+                } 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);
+
+                Dispatch.call(self, 'onopen', self, self.selected);
+            }
+        }
+
+        self.allowCreate = !! self.allowCreate;
+
+        return `<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>
+            </div>
+            <div :ref="self.root" class="lm-tabs-content"></div>
+        </div>`
+    }
+
+    lemonade.setComponents({ Tabs: Tabs });
+
+    lemonade.createWebComponent('tabs', Tabs);
+
+    return function (root, options) {
+        if (typeof (root) === 'object') {
+            if (typeof(options) !== 'object') {
+                options = {};
+            }
+            // Extract DOM references
+            extract(root, options);
+            // Create the modal
+            lemonade.render(Tabs, root, options);
+            // Return self
+            return options;
+        } else {
+            return Tabs.call(this);
+        }
+    };
 })));

package/dist/react.d.ts

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

package/dist/react.js

@@ -1,37 +1,37 @@
-import React, { useRef, useEffect } from "react";
-import { renderToStaticMarkup } from 'react-dom/server';
-import Component from './index';
-
-
-export default React.forwardRef((props, mainReference) => {
-    // Dom element
-    const Ref = useRef(null);
-
-    const template = renderToStaticMarkup(props.children)
-
-    // Get the properties for the spreadsheet
-    let options = { ...props };
-
-    useEffect(() => {
-        if (!Ref.current.innerHTML) {
-            mainReference.current = Component(Ref.current, options, template);
-        }
-    }, []);
-
-    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);
+import React, { useRef, useEffect } from "react";
+import { renderToStaticMarkup } from 'react-dom/server';
+import Component from './index';
+
+
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    const template = renderToStaticMarkup(props.children)
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        if (!Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options, template);
+        }
+    }, []);
+
+    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,66 +1,78 @@
-.lm-tabs .lm-tabs-content > div {
-  padding: 10px;
-}
-
-.lm-tabs > ul {
-  list-style-type: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-
-.lm-tabs > ul > li {
-  cursor: pointer;
-  user-select: none;
-  padding: 4px 12px 4px 12px;
-  border: 1px solid #ccc;
-  background-position: center;
-  transition: background 0.8s;
-}
-
-.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 {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-
-.lm-tabs[data-round="true"] > ul > li:last-child {
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.lm-tabs > ul > li:not(:first-child) {
-  border-left: 0;
-}
-
-.lm-tabs > ul > li:hover {
-  background: #eee radial-gradient(circle, transparent 1%, #eee 1%) center/15000%;
-}
-
-.lm-tabs > ul > li:active {
-  background-color: #ddd;
-  background-size: 100%;
-  transition: background 0s;
-}
-
-.lm-tabs .lm-tabs-content > div {
-  display: none;
-}
-
-.lm-tabs .lm-tabs-content > div.selected {
-  display: block;
-}
-
-.lm-tabs[data-position="center"] > ul {
-  margin: 0 auto;
-  justify-content: center;
+.lm-tabs .lm-tabs-content > div {
+  padding: 6px;
+}
+
+.lm-tabs .lm-tabs-headers {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.lm-tabs[data-position="center"] .lm-tabs-headers {
+  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;
+}
+
+.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;
+}
+
+.lm-tabs .lm-tabs-headers > ul > li.selected {
+  background-color: #eee;
+  color: #000;
+}
+
+.lm-tabs[data-round="true"] .lm-tabs-headers > ul > li:first-of-type {
+  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;
+}
+
+.lm-tabs .lm-tabs-headers > ul > li:not(:first-child) {
+  border-left: 1px solid transparent;
+}
+
+.lm-tabs .lm-tabs-headers > ul > li:hover {
+  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;
+}
+
+.lm-tabs .lm-tabs-content > div {
+  display: none;
+}
+
+.lm-tabs .lm-tabs-content > div.selected {
+  display: block;
+}
+
+.lm-tabs-insert-tab {
+  margin-left: 5px;
+  color: #555;
+  cursor: pointer;
+}
+
+.lm-tabs div[data-visible='false'] {
+  display: none;
 }

package/dist/vue.d.ts

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

package/dist/vue.js

@@ -1,54 +1,54 @@
-import { h } from 'vue';
-import component from "./index.js";
-
-export const Tabs = {
-        inheritAttrs: false,
-        mounted() {
-            let options = {
-                ...this.$attrs
-            };
-    
-            this.el = this.$refs.container;
-    
-            this.current = component(this.el, options);
-
-        },
-        setup(_, context) {
-            let containerProps = {
-                ref: 'container',
-                style: {
-                    width: '100%',
-                    height: '100%',
-                }
-            };
-    
-            let vnode = []; 
-    
-            if (context.slots.default && typeof(context.slots.default) === 'function') {
-                vnode = context.slots.default()
-            }
-    
-            return () =>  h('div', containerProps, vnode);
-        },
-        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];
-                        }
-                    }
-                }
-            }
-        }
-};
-
+import { h } from 'vue';
+import component from "./index.js";
+
+export const Tabs = {
+        inheritAttrs: false,
+        mounted() {
+            let options = {
+                ...this.$attrs
+            };
+    
+            this.el = this.$refs.container;
+    
+            this.current = component(this.el, options);
+
+        },
+        setup(_, context) {
+            let containerProps = {
+                ref: 'container',
+                style: {
+                    width: '100%',
+                    height: '100%',
+                }
+            };
+    
+            let vnode = []; 
+    
+            if (context.slots.default && typeof(context.slots.default) === 'function') {
+                vnode = context.slots.default()
+            }
+    
+            return () =>  h('div', containerProps, vnode);
+        },
+        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];
+                        }
+                    }
+                }
+            }
+        }
+};
+
 export default Tabs;

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": "^4.3.1"
-    },
-    "main": "dist/index.js",
-    "version": "2.1.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": "^4.3.3"
+    },
+    "main": "dist/index.js",
+    "version": "2.3.0"
+}