@lemonadejs/tabs 1.0.2 → 1.1.0

package/README.md

@@ -44,7 +44,11 @@ import "@lemonadejs/tabs/dist/style.css"
 export default function Component() {
     const self = this;
 
-    return `<Tabs>
+    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>`;
@@ -59,17 +63,18 @@ 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. |
+| 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.
+The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
 
 ## Other Tools
 
 -   [jSuites](https://jsuites.net/v4/)
--   [Jspreadsheet](https://jspreadsheet.com)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -13,6 +13,7 @@ interface options {
     data?: object[];
     selected?: number;
     position?: number;
+    onopen?: (index: number) => void;
 }
 
 interface instance {

package/dist/index.js

@@ -1,4 +1,4 @@
-if (!lemonade && typeof (require) === 'function') {
+if (! lemonade && typeof(require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -46,6 +46,10 @@ if (!lemonade && typeof (require) === 'function') {
         self.onchange = function (property) {
             if (property === 'selected') {
                 select(self.selected);
+
+                if (typeof(self.onopen) === 'function') {
+                    self.onopen.call(self, self.selected);
+                }
             }
         }
 
@@ -55,8 +59,8 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        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>
+        return `<div class="lm-tabs" :position="self.position">
+            <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="self.click(e, this)"><li class="lm-tab-list-item">{{self.title}}</li></ul>
             <div :ref="self.content" class="lm-tabs-content">${content}</div>
         </div>`
     }
@@ -65,7 +69,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/dist/style.css

@@ -1,6 +1,3 @@
-.lm-tabs {
-}
-
 .lm-tabs .lm-tabs-content > div {
   padding: 10px;
 }

package/package.json

@@ -13,8 +13,8 @@
         "tabs js"
     ],
     "dependencies": {
-        "lemonadejs": "^3.3.1"
+        "lemonadejs": "^3.4.0"
     },
     "main": "dist/index.js",
-    "version": "1.0.2"
+    "version": "1.1.0"
 }

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>