@lemonadejs/tabs 1.0.0 → 1.0.4

package/README.md

@@ -1,4 +1,4 @@
-# Javascript Modal
+# LemonadeJS Tabs
 
 [Official website and documentation is here](https://lemonadejs.net/components/tabs)
 
@@ -8,8 +8,7 @@ The LemonadeJS JavaScript Tabs is a responsive and reactive component that creat
 
 ## 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;
+-   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
@@ -26,16 +25,49 @@ $ npm install @lemonadejs/tabs
 
 ### CDN
 
-To use data grid via a CDN, include the following script tags in your HTML file:
+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.
+The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
 
 ## Other Tools
 

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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;

package/dist/index.js

@@ -65,7 +65,12 @@ if (!lemonade && typeof (require) === 'function') {
 
     return function (root, options) {
         if (typeof (root) === 'object') {
-            lemonade.render(Tabs, root, options)
+            // 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/package.json

@@ -16,5 +16,5 @@
         "lemonadejs": "^3.3.1"
     },
     "main": "dist/index.js",
-    "version": "1.0.0"
+    "version": "1.0.4"
 }

package/src/index.html

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