@lemonadejs/tabs 1.1.0 → 2.0.0

package/dist/index.js

@@ -1,4 +1,4 @@
-if (! lemonade && typeof(require) === 'function') {
+if (!lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -21,17 +21,6 @@ if (! lemonade && typeof(require) === 'function') {
 
         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);
 
@@ -43,6 +32,19 @@ if (! lemonade && typeof(require) === 'function') {
             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);
@@ -53,14 +55,14 @@ if (! lemonade && typeof(require) === 'function') {
             }
         }
 
-        self.click = function (ev, el) {
-            if (ev.target.tagName === 'LI') {
-                self.selected = Array.prototype.indexOf.call(el.children, ev.target);
+        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">
-            <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>
+        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"><li class="lm-tab-list-item">{{self.title}}</li></ul>
             <div :ref="self.content" class="lm-tabs-content">${content}</div>
         </div>`
     }

package/dist/style.css

@@ -7,7 +7,6 @@
   display: flex;
   margin: 0;
   padding: 0;
-  margin-bottom: 5px;
   width: fit-content;
   align-self: center;
 }
@@ -15,15 +14,35 @@
 .lm-tabs > ul > li {
   cursor: pointer;
   user-select: none;
-  padding: 2px 12px;
-  outline: 1px solid rgba(0, 0, 0, 0.2);
+  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%;
@@ -38,6 +57,6 @@
   display: block;
 }
 
-.lm-tabs[position="center"] > ul {
+.lm-tabs[data-position="center"] > ul {
   margin: 0 auto;
 }

package/package.json

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