@lemonadejs/tabs 2.2.0 → 2.3.0

package/dist/index.d.ts

@@ -7,14 +7,18 @@ declare function Tabs(el: HTMLElement, options?: Tabs.Options): Tabs.Instance;
 
 declare namespace Tabs {
 
-    interface Items {
+    interface Item {
+        // Reference to an external DOM
+        el: HTMLElement,
+        // Tab header
         title: string,
+        // HTML template
         content: string,
     }
 
     interface Options {
         /** Programmatically content */
-        data?: Items[];
+        data?: Item[];
         /** Selected tab */
         selected?: number;
         /** Tabs position */
@@ -22,12 +26,16 @@ declare namespace Tabs {
         /** Activate round borders */
         round?: boolean;
         /** On open event */
-        onopen?: (index: number) => void;
+        onopen?: (instance: object, index: number) => void;
+        /** Allow to create new tab button */
+        allowCreate?: boolean;
     }
 
     interface Instance {
+        /** Create a new option */
+        create: (item: Item, position?: number, select?: boolean) => void;
         /** Programmatically content */
-        data?: Items[];
+        data: Item[];
         /** Selected tab */
         selected: number;
         /** Tabs position */
@@ -35,7 +43,7 @@ declare namespace Tabs {
         /** Activate round borders */
         round?: boolean;
         /** On open event */
-        onopen?: (index: number) => void;
+        onopen?: (instance: object, index: number) => void;
     }
 }
 

package/dist/index.js

@@ -17,76 +17,140 @@ if (! lemonade && typeof (require) === 'function') {
         }
     }
 
-    const Tabs = function (html) {
+    const extract = function(root, self) {
+        if (! Array.isArray(self.data)) {
+            self.data = [];
+        }
+
+        if (root.tagName) {
+            for (let i = 0; i < root.children.length; i++) {
+                self.data.push({
+                    el: root.children[i],
+                })
+            }
+        } else {
+            root.forEach((child) => {
+                self.data.push({
+                    el: child.element,
+                })
+            });
+        }
+    }
+
+    const Tabs = function(children) {
         let self = this
-        let elements = [];
 
+        // Add new tab
+        let createButton;
+
+        // Get the references from the root web component
+        let root;
         if (this.tagName) {
-            // Remove elements from the DOM
-            elements = removeElements(this);
+            root = this;
+        } else {
+            // References from LemonadeJS
+            if (typeof(children) === 'string') {
+                // Version 4
+                root = document.createElement('div');
+                root.innerHTML = children;
+            } else if (children && children.length) {
+                // Version 5
+                root = children;
+            }
+        }
+
+        if (root) {
+            extract(root, self);
         }
 
+        // Process the data
         if (self.data) {
             for (let i = 0; i < self.data.length; i++) {
-                let d = document.createElement('div');
-                d.title = self.data[i].title;
-                d.innerHTML = self.data[i].content;
-                elements.push(d);
+                if (self.data[i].el) {
+                    if (! self.data[i].title) {
+                        self.data[i].title = self.data[i].el.getAttribute('title');
+                    }
+                    if (! self.data[i].selected) {
+                        self.data[i].selected = self.data[i].el.getAttribute('selected');
+                    }
+                } else {
+                    // Create element
+                    self.data[i].el = document.createElement('div');
+                    // Create from content
+                    if (self.data[i].content) {
+                        self.data[i].el.innerHTML = self.data[i].content;
+                    }
+                }
             }
         }
 
-        if (! html) {
-            html = '';
-        }
-
-        self.tabs = [];
-
         const select = function (index) {
+            // Make sure the index is a number
             index = parseInt(index);
-
             // Do not select tabs that does not exist
-            if (index >= 0 && index < self.tabs.length) {
-                for (let i = 0; i < self.content.children.length; i++) {
+            if (index >= 0 && index < self.data.length) {
+                for (let i = 0; i < self.root.children.length; i++) {
                     self.headers.children[i].classList.remove('selected');
-                    self.content.children[i].classList.remove('selected');
+                    self.root.children[i].classList.remove('selected');
                 }
                 self.headers.children[index].classList.add('selected');
-                self.content.children[index].classList.add('selected');
+                self.root.children[index].classList.add('selected');
             }
         }
 
-        self.onload = function () {
-            // Append elements to the container
-            appendElements(self.el.children[1], elements);
+        const init = function(selected) {
+            let tabs = [];
+            for (let i = 0; i < self.data.length; i++) {
+                // Create tabs object
+                tabs[i] = {
+                    title: self.data[i].title,
+                }
+                // Which one is selected by default
+                if (self.data[i].selected) {
+                    selected = i;
+                }
 
-            for (let i = 0; i < self.content.children.length; i++) {
-                self.tabs.push({ title: self.content.children[i].title });
+                self.root.appendChild(self.data[i].el)
             }
-            self.refresh('tabs');
-
-            let index = 0;
-            if (! isNaN(parseInt(self.selected))) {
-                index = parseInt(self.selected);
+            // Create headers
+            self.tabs = tabs;
+            // Default selected
+            if (typeof(selected) !== 'undefined') {
+                self.selected = selected;
+            }
+            // Add create new tab button
+            if (createButton) {
+                self.headers.appendChild(createButton);
             }
-            select(index);
         }
 
-
-        self.onchange = function (property) {
-            if (property === 'selected') {
-                select(self.selected);
-
-                Dispatch.call(self, 'onopen', self, self.selected);
-            }
+        self.onload = function () {
+            init(self.selected || 0);
         }
 
-        self.keydown = function(e) {
+        self.keydown = function(e, s) {
+            let index = null;
             if (e.key === 'Enter') {
-                self.click(e);
+                self.click(e, s);
+            } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+                index = self.selected - 1;
+                if (index < 0) {
+                    index = 0;
+                }
+            } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+                index = self.selected + 1;
+                if (index > self.tabs.length-1) {
+                    index = self.tabs.length-1;
+                }
+            }
+
+            // Make selection
+            if (index !== null) {
+                self.tabs[index].el.focus();
             }
         }
 
-        self.click = function (e) {
+        self.open = function (e) {
             if (e.target.tagName === 'LI') {
                 // Avoid select something already selected
                 let index = Array.prototype.indexOf.call(e.target.parentNode.children, e.target);
@@ -96,50 +160,78 @@ if (! lemonade && typeof (require) === 'function') {
             }
         }
 
-        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" onkeydown="self.keydown" role="tabs"><li class="lm-tab-list-item" tabindex="0" role="tab">{{self.title}}</li></ul>
-            <div :ref="self.content" class="lm-tabs-content">${html}</div>
-        </div>`
-    }
+        self.create = function(item, position, select) {
+            // Create element
+            if (typeof(item) !== 'object') {
+                console.error('Item must be an object');
+            } else {
+                // Create DOM
+                item.el = document.createElement('div');
+                // Create from content
+                if (item.content) {
+                    item.el.innerHTML = item.content;
+                }
 
-    const removeElements = function(root) {
-        // Keep the DOM elements
-        let elements = [];
-        if (root) {
-            while (root.firstChild) {
-                elements.push(root.firstChild);
-                root.firstChild.remove();
+                // Add the new item in the end
+                if (typeof(position) === 'undefined' || position === null) {
+                    // Mew item
+                    position = self.data.length;
+                    // Add in the end
+                    self.data.push(item);
+                } else {
+                    self.data.splice(position, 0, item);
+                }
+                // New position
+                if (select) {
+                    // Refresh
+                    init(self.data.indexOf(item));
+                } else {
+                    init(self.selected);
+                }
             }
         }
-        return elements;
-    }
 
-    const appendElements = function(root, elements) {
-        if (elements && elements.length) {
-            while (elements[0]) {
-                root.appendChild(elements.shift());
-            }
+        self.click = function() {
+            // Create a new item
+            self.create({ title: 'Untitled' }, null, true);
         }
-    }
 
-    const Component = function (root, options) {
-        if (typeof (root) === 'object') {
-            // Remove elements from the DOM
-            let elements = removeElements(root);
-            // Create the modal
-            let e = lemonade.render(Tabs, root, options);
-            // Add elements to the container
-            appendElements(e.children[1], elements);
+        self.onchange = function (property) {
+            if (property === 'selected') {
+                select(self.selected);
 
-            return options;
-        } else {
-            return Tabs.call(this);
+                Dispatch.call(self, 'onopen', self, self.selected);
+            }
         }
+
+        self.allowCreate = !! self.allowCreate;
+
+        return `<div class="lm-tabs" data-position="{{self.position}}" data-round="{{self.round}}">
+            <div role="tabs" class="lm-tabs-headers">
+                <ul :ref="self.headers" :loop="self.tabs" :selected="self.selected" onclick="self.open" onkeydown="self.keydown" onfocusin="self.open"><li class="lm-tab" tabindex="0" role="tab">{{self.title}}</li></ul>
+                <div data-visible="{{self.allowCreate}}" class="lm-tabs-insert-tab material-icons" role="insert-tab" onclick="self.click">add</div>
+            </div>
+            <div :ref="self.root" class="lm-tabs-content"></div>
+        </div>`
     }
 
     lemonade.setComponents({ Tabs: Tabs });
 
     lemonade.createWebComponent('tabs', Tabs);
 
-    return Component;
+    return function (root, options) {
+        if (typeof (root) === 'object') {
+            if (typeof(options) !== 'object') {
+                options = {};
+            }
+            // Extract DOM references
+            extract(root, options);
+            // Create the modal
+            lemonade.render(Tabs, root, options);
+            // Return self
+            return options;
+        } else {
+            return Tabs.call(this);
+        }
+    };
 })));

package/dist/style.css

@@ -1,48 +1,59 @@
 .lm-tabs .lm-tabs-content > div {
-  padding: 15px 5px;
+  padding: 6px;
 }
 
-.lm-tabs > ul {
+.lm-tabs .lm-tabs-headers {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.lm-tabs[data-position="center"] .lm-tabs-headers {
+  margin: 0 auto;
+  justify-content: center;
+}
+
+.lm-tabs .lm-tabs-headers > ul {
   list-style-type: none;
   display: flex;
   margin: 0;
   padding: 0;
-  width: 100%;
+  align-items: center;
 }
 
-.lm-tabs > ul > li {
+.lm-tabs .lm-tabs-headers > ul > li {
   cursor: pointer;
   user-select: none;
-  padding: 6px 24px;
+  padding: 4px 24px;
   border: 1px solid #ccc;
   background-position: center;
   transition: background 0.8s;
 }
 
-.lm-tabs > ul > li.selected {
+.lm-tabs .lm-tabs-headers > ul > li.selected {
   background-color: #eee;
   color: #000;
 }
 
-.lm-tabs[data-round="true"] > ul > li:first-child {
+.lm-tabs[data-round="true"] .lm-tabs-headers > ul > li:first-of-type {
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
-.lm-tabs[data-round="true"] > ul > li:last-child {
+.lm-tabs[data-round="true"] .lm-tabs-headers > ul > li:last-of-type {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
-.lm-tabs > ul > li:not(:first-child) {
-  border-left: 0;
+.lm-tabs .lm-tabs-headers > ul > li:not(:first-child) {
+  border-left: 1px solid transparent;
 }
 
-.lm-tabs > ul > li:hover {
+.lm-tabs .lm-tabs-headers > ul > li:hover {
   background: #eee radial-gradient(circle, transparent 1%, #eee 1%) center/15000%;
 }
 
-.lm-tabs > ul > li:active {
+.lm-tabs .lm-tabs-headers > ul > li:active {
   background-color: #ddd;
   background-size: 100%;
   transition: background 0s;
@@ -56,7 +67,12 @@
   display: block;
 }
 
-.lm-tabs[data-position="center"] > ul {
-  margin: 0 auto;
-  justify-content: center;
+.lm-tabs-insert-tab {
+  margin-left: 5px;
+  color: #555;
+  cursor: pointer;
+}
+
+.lm-tabs div[data-visible='false'] {
+  display: none;
 }

package/package.json

@@ -16,5 +16,5 @@
         "lemonadejs": "^4.3.3"
     },
     "main": "dist/index.js",
-    "version": "2.2.0"
+    "version": "2.3.0"
 }