@lemonadejs/tabs 1.0.0

package/README.md

@@ -0,0 +1,43 @@
+# Javascript Modal
+
+[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 Modal is only about 2 KBytes;
+-   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
+-   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 data grid 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>
+```
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) tabs is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet](https://jspreadsheet.com)

package/dist/index.js

@@ -0,0 +1,74 @@
+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') {
+            lemonade.render(Tabs, root, options)
+            return options;
+        } else {
+            return Tabs.call(this, root)
+        }
+    }
+})));

package/dist/style.css

@@ -0,0 +1,46 @@
+.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;
+}

package/package.json

@@ -0,0 +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.0"
+}