@lemonadejs/tabs 1.0.4 → 1.1.2

package/README.md

@@ -1,75 +1,80 @@
-# 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 Tabs from "@lemonadejs/tabs";
-import "@lemonadejs/tabs/dist/style.css"
-
-export default function Component() {
-    const self = this;
-
-    return `<Tabs>
-        <div title="Tab 1">Content of the first tab</div>
-        <div title="Tab 2">Content of the second tab</div>
-    </Tabs>`;
-}
-```
-
-[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.
-
-#### Tabs Properties
-
-| Property | Type | Description |
-| -------- | ---- | ----------- |
-| data? | array | An optional alternative method to provide the title and content that will serve as the basis for rendering the tabs. |
-| 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. |
-
-## License
-
-The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
-
-## Other Tools
-
--   [jSuites](https://jsuites.net/v4/)
--   [Jspreadsheet](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 Tabs from "@lemonadejs/tabs";
+import "@lemonadejs/tabs/dist/style.css"
+
+export default function Component() {
+    const self = this;
+
+    self.open = (index) => {
+        console.log(index)
+    }
+    
+    return `<Tabs :onopen="self.open">
+        <div title="Tab 1">Content of the first tab</div>
+        <div title="Tab 2">Content of the second tab</div>
+    </Tabs>`;
+}
+```
+
+[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.
+
+#### Tabs Properties
+
+| Property  | Type     | Description                                                                                                          |
+|-----------|----------|----------------------------------------------------------------------------------------------------------------------|
+| data?     | array    | An optional alternative method to provide the title and content that will serve as the basis for rendering the tabs. |
+| 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.                       |
+| onopen?   | function | When a new tabs is opened.                                                                                           |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -1,24 +1,25 @@
-/**
- * Official Type definitions for LemonadeJS plugins
- * https://lemonadejs.net
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-
-interface Tabs {
-    (): any
-    [key: string]: any
-}
-
-interface options {
-    data?: object[];
-    selected?: number;
-    position?: number;
-}
-
-interface instance {
-    data: object[];
-    selected: number;
-    position: number;
-}
-
-export declare function Tabs(el: HTMLElement, options?: options): instance;
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+interface Tabs {
+    (): any
+    [key: string]: any
+}
+
+interface options {
+    data?: object[];
+    selected?: number;
+    position?: number;
+    onopen?: (index: number) => void;
+}
+
+interface instance {
+    data: object[];
+    selected: number;
+    position: number;
+}
+
+export declare function Tabs(el: HTMLElement, options?: options): instance;

package/dist/index.js

@@ -1,79 +1,85 @@
-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 content = html;
-
-        if (self.data) {
-            for (let i = 0; i < self.data.length; i++) {
-                content += `<div title="${self.data[i].title}">${self.data[i].content}</div>`;
-            }
-        }
-
-        self.tabs = [];
-
-        self.onload = function () {
-            for (let i = 0; i < self.content.children.length; i++) {
-                self.tabs.push({ title: self.content.children[i].title });
-            }
-            self.refresh('tabs');
-
-            if (! isNaN(parseInt(self.selected))) {
-                select(self.selected);
-            }
-        }
-
-        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');
-            }
-            self.headers.children[index].classList.add('selected');
-            self.content.children[index].classList.add('selected');
-        }
-
-        self.onchange = function (property) {
-            if (property === 'selected') {
-                select(self.selected);
-            }
-        }
-
-        self.click = function (ev, el) {
-            if (ev.target.tagName === 'LI') {
-                self.selected = Array.prototype.indexOf.call(el.children, ev.target);
-            }
-        }
-
-        return `<div class="lm-tabs" position="{{self.position||''}}">
-            <ul :ref="self.headers" :loop="self.tabs" onclick="self.click(e, this)" :selected="self.selected"><li class="lm-tab-list-item">{{self.title}}</li></ul>
-            <div :ref="self.content" class="lm-tabs-content">${content}</div>
-        </div>`
-    }
-
-    lemonade.setComponents({ Tabs: Tabs });
-
-    return function (root, options) {
-        if (typeof (root) === 'object') {
-            // Get HTML inside the wrapper element then empty it
-            const template = root.innerHTML
-            root.innerHTML = ''
-
-            // Send Template as a parameter for the Lemonade component
-            lemonade.render(Tabs, root, options, template)
-            return options;
-        } else {
-            return Tabs.call(this, root)
-        }
-    }
+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 content = html;
+
+        if (self.data) {
+            for (let i = 0; i < self.data.length; i++) {
+                content += `<div title="${self.data[i].title}">${self.data[i].content}</div>`;
+            }
+        }
+
+        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');
+            }
+            self.headers.children[index].classList.add('selected');
+            self.content.children[index].classList.add('selected');
+        }
+
+        self.onload = function () {
+            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);
+        }
+
+        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" :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>
+        </div>`
+    }
+
+    lemonade.setComponents({ Tabs: Tabs });
+
+    return function (root, options) {
+        if (typeof (root) === 'object') {
+            // Get HTML inside the wrapper element then empty it
+            const template = root.innerHTML
+            root.innerHTML = ''
+
+            // Send Template as a parameter for the Lemonade component
+            lemonade.render(Tabs, root, options, template)
+            return options;
+        } else {
+            return Tabs.call(this, root)
+        }
+    }
 })));

package/dist/style.css

@@ -1,46 +1,62 @@
-.lm-tabs {
-}
-
-.lm-tabs .lm-tabs-content > div {
-  padding: 10px;
-}
-
-.lm-tabs > ul {
-  list-style-type: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-  margin-bottom: 5px;
-  width: fit-content;
-  align-self: center;
-}
-
-.lm-tabs > ul > li {
-  cursor: pointer;
-  user-select: none;
-  padding: 2px 12px;
-  outline: 1px solid rgba(0, 0, 0, 0.2);
-  background-position: center;
-  transition: background 0.8s;
-}
-
-.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[position="center"] > ul {
-  margin: 0 auto;
+.lm-tabs .lm-tabs-content > div {
+  padding: 10px;
+}
+
+.lm-tabs > ul {
+  list-style-type: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  width: fit-content;
+  align-self: center;
+}
+
+.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;
+}
+
+.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[position="center"] > ul {
+  margin: 0 auto;
 }

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": "^3.3.1"
-    },
-    "main": "dist/index.js",
-    "version": "1.0.4"
-}
+{
+    "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": "^3.4.0"
+    },
+    "main": "dist/index.js",
+    "version": "1.1.2"
+}

package/src/index.html

@@ -1,16 +1,16 @@
-<script src="https://cdn.jsdelivr.net/npm/lemonadejs@3.3.1/dist/lemonade.min.js"></script>
-<script src="../dist/index.js"></script>
-<link rel="stylesheet" href="../dist/style.css" />
-
-<div id="tabs">
-    <div title="Tab 1">Content of the first tab</div>
-    <div title="Tab 2">Content of the second tab</div>
-</div>
-
-<script>
-const root = document.getElementById("tabs");
- 
-Tabs(root, {
-  selected: 0
-});
+<script src="https://cdn.jsdelivr.net/npm/lemonadejs@3.3.1/dist/lemonade.min.js"></script>
+<script src="../dist/index.js"></script>
+<link rel="stylesheet" href="../dist/style.css" />
+
+<div id="tabs">
+    <div title="Tab 1">Content of the first tab</div>
+    <div title="Tab 2">Content of the second tab</div>
+</div>
+
+<script>
+const root = document.getElementById("tabs");
+ 
+Tabs(root, {
+  selected: 0
+});
 </script>