@lemonadejs/tabs 2.3.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +21 -11
- package/dist/style.css +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -45,14 +45,14 @@ if (! lemonade && typeof (require) === 'function') {
|
|
|
45
45
|
|
|
46
46
|
// Get the references from the root web component
|
|
47
47
|
let root;
|
|
48
|
+
let template = '';
|
|
48
49
|
if (this.tagName) {
|
|
49
50
|
root = this;
|
|
50
51
|
} else {
|
|
51
52
|
// References from LemonadeJS
|
|
52
53
|
if (typeof(children) === 'string') {
|
|
53
54
|
// Version 4
|
|
54
|
-
|
|
55
|
-
root.innerHTML = children;
|
|
55
|
+
template = children;
|
|
56
56
|
} else if (children && children.length) {
|
|
57
57
|
// Version 5
|
|
58
58
|
root = children;
|
|
@@ -66,14 +66,7 @@ if (! lemonade && typeof (require) === 'function') {
|
|
|
66
66
|
// Process the data
|
|
67
67
|
if (self.data) {
|
|
68
68
|
for (let i = 0; i < self.data.length; i++) {
|
|
69
|
-
if (self.data[i].el) {
|
|
70
|
-
if (! self.data[i].title) {
|
|
71
|
-
self.data[i].title = self.data[i].el.getAttribute('title');
|
|
72
|
-
}
|
|
73
|
-
if (! self.data[i].selected) {
|
|
74
|
-
self.data[i].selected = self.data[i].el.getAttribute('selected');
|
|
75
|
-
}
|
|
76
|
-
} else {
|
|
69
|
+
if (! self.data[i].el) {
|
|
77
70
|
// Create element
|
|
78
71
|
self.data[i].el = document.createElement('div');
|
|
79
72
|
// Create from content
|
|
@@ -101,6 +94,19 @@ if (! lemonade && typeof (require) === 'function') {
|
|
|
101
94
|
const init = function(selected) {
|
|
102
95
|
let tabs = [];
|
|
103
96
|
for (let i = 0; i < self.data.length; i++) {
|
|
97
|
+
// Extract meta information from the DOM
|
|
98
|
+
if (! self.data[i].title) {
|
|
99
|
+
let ret = self.data[i].el.getAttribute('title');
|
|
100
|
+
if (ret != null) {
|
|
101
|
+
self.data[i].title = ret;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
if (! self.data[i].selected) {
|
|
105
|
+
let ret = self.data[i].el.getAttribute('selected');
|
|
106
|
+
if (ret != null) {
|
|
107
|
+
self.data[i].selected = ret;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
104
110
|
// Create tabs object
|
|
105
111
|
tabs[i] = {
|
|
106
112
|
title: self.data[i].title,
|
|
@@ -125,6 +131,10 @@ if (! lemonade && typeof (require) === 'function') {
|
|
|
125
131
|
}
|
|
126
132
|
|
|
127
133
|
self.onload = function () {
|
|
134
|
+
if (template) {
|
|
135
|
+
extract(self.root, self);
|
|
136
|
+
}
|
|
137
|
+
|
|
128
138
|
init(self.selected || 0);
|
|
129
139
|
}
|
|
130
140
|
|
|
@@ -211,7 +221,7 @@ if (! lemonade && typeof (require) === 'function') {
|
|
|
211
221
|
<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>
|
|
212
222
|
<div data-visible="{{self.allowCreate}}" class="lm-tabs-insert-tab material-icons" role="insert-tab" onclick="self.click">add</div>
|
|
213
223
|
</div>
|
|
214
|
-
<div :ref="self.root" class="lm-tabs-content"
|
|
224
|
+
<div :ref="self.root" class="lm-tabs-content">${template}</div>
|
|
215
225
|
</div>`
|
|
216
226
|
}
|
|
217
227
|
|
package/dist/style.css
CHANGED