@nuralyui/tabs 0.0.18 → 0.0.19
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/bundle.js +392 -7
- package/package.json +1 -1
package/bundle.js
CHANGED
|
@@ -1,9 +1,331 @@
|
|
|
1
|
-
import{css as t,LitElement as a,html as
|
|
1
|
+
import{css as t,LitElement as a,html as r,nothing as e}from"lit";import{property as i,customElement as o}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";const l=t`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
height: 100%;
|
|
5
|
+
|
|
6
|
+
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
7
|
+
color: var(--nuraly-color-text);
|
|
8
|
+
background-color: var(--nuraly-color-background);
|
|
9
|
+
|
|
10
|
+
/* Minimal transitions for better performance */
|
|
11
|
+
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Force re-evaluation of theme-dependent properties on theme change */
|
|
15
|
+
:host([data-theme]) {
|
|
16
|
+
color: inherit;
|
|
17
|
+
background-color: inherit;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.tabs-container {
|
|
21
|
+
display: flex;
|
|
22
|
+
height: 100%;
|
|
23
|
+
background-color: var(--nuraly-color-background);
|
|
24
|
+
border-radius: var(--nuraly-border-radius-tabs, var(--nuraly-border-radius-medium, 0));
|
|
25
|
+
box-shadow: var(--nuraly-shadow-tabs);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.tab-labels {
|
|
29
|
+
display: flex;
|
|
30
|
+
background-color: var(--nuraly-color-tabs-header-background);
|
|
31
|
+
border: var(--nuraly-border-tabs-header);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Tab label base styles */
|
|
35
|
+
.tab-label {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
gap: var(--nuraly-spacing-2);
|
|
40
|
+
position: relative;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
padding: var(--nuraly-spacing-tabs-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));
|
|
43
|
+
border: var(--nuraly-border-tabs-label);
|
|
44
|
+
border-bottom: var(--nuraly-border-width-medium, 2px) solid transparent;
|
|
45
|
+
background-color: var(--nuraly-color-tabs-label-background);
|
|
46
|
+
color: var(--nuraly-color-tabs-label-text);
|
|
47
|
+
font-family: var(--nuraly-font-family);
|
|
48
|
+
font-size: var(--nuraly-font-size-body);
|
|
49
|
+
font-weight: var(--nuraly-font-weight-regular);
|
|
50
|
+
user-select: none;
|
|
51
|
+
white-space: nowrap;
|
|
52
|
+
|
|
53
|
+
&:hover {
|
|
54
|
+
color: var(--nuraly-color-tabs-label-text-hover);
|
|
55
|
+
background-color: var(--nuraly-color-tabs-label-background-hover);
|
|
56
|
+
border-color: var(--nuraly-color-tabs-label-border-hover);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&:focus {
|
|
60
|
+
outline: var(--nuraly-focus-outline);
|
|
61
|
+
outline-offset: var(--nuraly-focus-outline-offset);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.active {
|
|
65
|
+
color: var(--nuraly-color-tabs-label-text-active);
|
|
66
|
+
background-color: var(--nuraly-color-tabs-label-background-active);
|
|
67
|
+
border-color: var(--nuraly-color-tabs-label-border-active);
|
|
68
|
+
font-weight: var(--nuraly-font-weight-semibold);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Positioning-specific border radius for horizontal tabs */
|
|
72
|
+
&.first-tab {
|
|
73
|
+
border-radius: var(--nuraly-border-radius-tabs-first);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&.middle-tab {
|
|
77
|
+
border-radius: var(--nuraly-border-radius-tabs-middle);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.last-tab {
|
|
81
|
+
border-radius: var(--nuraly-border-radius-tabs-last);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&.single-tab {
|
|
85
|
+
border-radius: var(--nuraly-border-radius-tabs-single);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&.disabled {
|
|
89
|
+
cursor: not-allowed;
|
|
90
|
+
color: var(--nuraly-color-text-disabled);
|
|
91
|
+
background-color: var(--nuraly-color-background-disabled);
|
|
92
|
+
|
|
93
|
+
&:hover {
|
|
94
|
+
color: var(--nuraly-color-text-disabled);
|
|
95
|
+
background-color: var(--nuraly-color-background-disabled);
|
|
96
|
+
border-color: transparent;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Tab icon styling */
|
|
102
|
+
.tab-icon {
|
|
103
|
+
flex-shrink: 0;
|
|
104
|
+
width: var(--nuraly-tabs-icon-size, 1rem);
|
|
105
|
+
height: var(--nuraly-tabs-icon-size, 1rem);
|
|
106
|
+
color: inherit;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Tab text styling */
|
|
110
|
+
.tab-text {
|
|
111
|
+
flex: 1;
|
|
112
|
+
color: inherit;
|
|
113
|
+
|
|
114
|
+
&[contenteditable="true"] {
|
|
115
|
+
cursor: text;
|
|
116
|
+
outline: none;
|
|
117
|
+
|
|
118
|
+
&:focus {
|
|
119
|
+
background-color: var(--nuraly-color-tabs-edit-background);
|
|
120
|
+
border-radius: var(--nuraly-border-radius-small);
|
|
121
|
+
padding: var(--nuraly-spacing-1);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Close/delete icon styling */
|
|
127
|
+
.close-icon {
|
|
128
|
+
flex-shrink: 0;
|
|
129
|
+
width: var(--nuraly-tabs-close-icon-size, 0.875rem);
|
|
130
|
+
height: var(--nuraly-tabs-close-icon-size, 0.875rem);
|
|
131
|
+
color: var(--nuraly-color-tabs-close-icon);
|
|
132
|
+
cursor: pointer;
|
|
133
|
+
padding: var(--nuraly-spacing-1);
|
|
134
|
+
border-radius: var(--nuraly-border-radius-small);
|
|
135
|
+
|
|
136
|
+
&:hover {
|
|
137
|
+
color: var(--nuraly-color-tabs-close-icon-hover);
|
|
138
|
+
background-color: var(--nuraly-color-tabs-close-icon-background-hover);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&:active {
|
|
142
|
+
color: var(--nuraly-color-tabs-close-icon-active);
|
|
143
|
+
background-color: var(--nuraly-color-tabs-close-icon-background-active);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Add tab button styling */
|
|
148
|
+
.add-tab-label {
|
|
149
|
+
min-width: auto;
|
|
150
|
+
width: var(--nuraly-tabs-add-button-size, 2.5rem);
|
|
151
|
+
color: var(--nuraly-color-tabs-add-icon);
|
|
152
|
+
|
|
153
|
+
&:hover {
|
|
154
|
+
color: var(--nuraly-color-tabs-add-icon-hover);
|
|
155
|
+
background-color: var(--nuraly-color-tabs-add-background-hover);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.add-tab-icon {
|
|
160
|
+
width: var(--nuraly-tabs-add-icon-size, 1rem);
|
|
161
|
+
height: var(--nuraly-tabs-add-icon-size, 1rem);
|
|
162
|
+
color: inherit;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Tab content area */
|
|
166
|
+
.tab-content {
|
|
167
|
+
flex: 1;
|
|
168
|
+
padding: var(--nuraly-spacing-tabs-content-padding, var(--nuraly-spacing-4));
|
|
169
|
+
background-color: var(--nuraly-color-tabs-content-background);
|
|
170
|
+
border: var(--nuraly-border-tabs-content);
|
|
171
|
+
border-top: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
172
|
+
overflow-y: auto;
|
|
173
|
+
overflow-x: hidden;
|
|
174
|
+
max-height: 100vh;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* Orientation specific styles */
|
|
178
|
+
.vertical-align {
|
|
179
|
+
flex-direction: row;
|
|
180
|
+
|
|
181
|
+
.tab-labels {
|
|
182
|
+
flex-direction: column;
|
|
183
|
+
min-width: var(--nuraly-tabs-vertical-width, 12rem);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.tab-content {
|
|
187
|
+
border-top: none;
|
|
188
|
+
border-left: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.tab-label {
|
|
192
|
+
border-bottom: var(--nuraly-border-tabs-label);
|
|
193
|
+
border-right: var(--nuraly-border-width-medium, 2px) solid transparent;
|
|
194
|
+
|
|
195
|
+
&:hover,
|
|
196
|
+
&.active {
|
|
197
|
+
border-right-color: var(--nuraly-color-tabs-label-border-active);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.vertical-align.right-align {
|
|
203
|
+
flex-direction: row-reverse;
|
|
204
|
+
|
|
205
|
+
.tab-content {
|
|
206
|
+
border-left: none;
|
|
207
|
+
border-right: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.tab-label {
|
|
211
|
+
border-right: var(--nuraly-border-tabs-label);
|
|
212
|
+
border-left: var(--nuraly-border-width-medium, 2px) solid transparent;
|
|
213
|
+
|
|
214
|
+
&:hover,
|
|
215
|
+
&.active {
|
|
216
|
+
border-left-color: var(--nuraly-color-tabs-label-border-active);
|
|
217
|
+
border-right-color: transparent;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* Alignment specific styles */
|
|
223
|
+
.right-align > .tab-labels {
|
|
224
|
+
flex-direction: row-reverse;
|
|
225
|
+
align-self: flex-end;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.center-align > .tab-labels {
|
|
229
|
+
align-self: center;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.horizontal-align {
|
|
233
|
+
flex-direction: column;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* Size variations */
|
|
237
|
+
:host([data-size="small"]) {
|
|
238
|
+
.tab-label {
|
|
239
|
+
padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);
|
|
240
|
+
font-size: var(--nuraly-font-size-small);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.tab-content {
|
|
244
|
+
padding: var(--nuraly-spacing-3);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
:host([data-size="large"]) {
|
|
249
|
+
.tab-label {
|
|
250
|
+
padding: var(--nuraly-spacing-4) var(--nuraly-spacing-6);
|
|
251
|
+
font-size: var(--nuraly-font-size-large);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.tab-content {
|
|
255
|
+
padding: var(--nuraly-spacing-6);
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* Type variations */
|
|
260
|
+
:host([data-type="card"]) {
|
|
261
|
+
.tab-label {
|
|
262
|
+
border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
263
|
+
border-radius: var(--nuraly-border-radius-medium);
|
|
264
|
+
margin: 0 var(--nuraly-spacing-1);
|
|
265
|
+
|
|
266
|
+
&.active {
|
|
267
|
+
background-color: var(--nuraly-color-primary);
|
|
268
|
+
color: var(--nuraly-color-primary-text);
|
|
269
|
+
border-color: var(--nuraly-color-primary);
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
:host([data-type="bordered"]) {
|
|
275
|
+
.tabs-container {
|
|
276
|
+
border: var(--nuraly-border-width-thin, 1px) solid var(--nuraly-color-border);
|
|
277
|
+
border-radius: var(--nuraly-border-radius-medium);
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* Drag and drop states */
|
|
282
|
+
.tab-label.dragging-start {
|
|
283
|
+
opacity: 0.7;
|
|
284
|
+
border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-border-strong);
|
|
285
|
+
background-color: var(--nuraly-color-background-hover);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.tab-label.dragging {
|
|
289
|
+
border: var(--nuraly-border-width-thin, 1px) dashed var(--nuraly-color-primary);
|
|
290
|
+
background-color: var(--nuraly-color-primary-background);
|
|
291
|
+
opacity: 0.8;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* Minimal animation support for better performance */
|
|
295
|
+
|
|
296
|
+
@keyframes fadeIn {
|
|
297
|
+
from {
|
|
298
|
+
opacity: 0;
|
|
299
|
+
transform: translateY(var(--nuraly-spacing-2));
|
|
300
|
+
}
|
|
301
|
+
to {
|
|
302
|
+
opacity: 1;
|
|
303
|
+
transform: translateY(0);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/* Accessibility improvements */
|
|
308
|
+
@media (prefers-reduced-motion: reduce) {
|
|
309
|
+
* {
|
|
310
|
+
transition: none !important;
|
|
311
|
+
animation: none !important;
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Focus management for keyboard navigation */
|
|
316
|
+
.tab-label[tabindex="0"] {
|
|
317
|
+
position: relative;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.tab-label:focus-visible {
|
|
321
|
+
z-index: 1;
|
|
322
|
+
}
|
|
323
|
+
`
|
|
2
324
|
/**
|
|
3
325
|
* @license
|
|
4
326
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
327
|
* SPDX-License-Identifier: MIT
|
|
6
|
-
*/,d="",
|
|
328
|
+
*/,d="",c="",b=0,h="label";
|
|
7
329
|
/**
|
|
8
330
|
* @license
|
|
9
331
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
@@ -14,24 +336,87 @@ class u{constructor(t){this._host=t,this._host.addController(this)}get host(){re
|
|
|
14
336
|
* @license
|
|
15
337
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
16
338
|
* SPDX-License-Identifier: MIT
|
|
17
|
-
*/class v extends u{constructor(t){super(t),this._host=t,this.keyboardHandler=t=>this.handleKeyDown(t)}get host(){return this._host}hostConnected(){super.hostConnected(),this._host.addEventListener("keydown",this.keyboardHandler)}hostDisconnected(){super.hostDisconnected(),this._host.removeEventListener("keydown",this.keyboardHandler)}handleKeyDown(t){try{if(this.host.disabled)return;const a=t.target.closest(".tab-label");if(!a)return;const
|
|
339
|
+
*/class v extends u{constructor(t){super(t),this._host=t,this.keyboardHandler=t=>this.handleKeyDown(t)}get host(){return this._host}hostConnected(){super.hostConnected(),this._host.addEventListener("keydown",this.keyboardHandler)}hostDisconnected(){super.hostDisconnected(),this._host.removeEventListener("keydown",this.keyboardHandler)}handleKeyDown(t){try{if(this.host.disabled)return;const a=t.target.closest(".tab-label");if(!a)return;const r=parseInt(a.getAttribute("data-index")||"0");if(!this.isValidTabIndex(r))return;this.handleTabKeyDown(t,r)}catch(t){this.handleError(t,"handleKeyDown")}}handleTabKeyDown(t,a){try{const r="vertical"!==this.host.orientation;switch(t.key){case"Enter":case" ":t.preventDefault(),this.activateTab(a,t);break;case"ArrowLeft":r&&(t.preventDefault(),this.navigateToPreviousTab(a));break;case"ArrowRight":r&&(t.preventDefault(),this.navigateToNextTab(a));break;case"ArrowUp":r||(t.preventDefault(),this.navigateToPreviousTab(a));break;case"ArrowDown":r||(t.preventDefault(),this.navigateToNextTab(a));break;case"Home":t.preventDefault(),this.navigateToFirstTab();break;case"End":t.preventDefault(),this.navigateToLastTab()}}catch(t){this.handleError(t,"handleTabKeyDown")}}isActivationKey(t){return"Enter"===t.key||" "===t.key}isArrowKey(t){return["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(t.key)}activateTab(t,a){try{this.host.setActiveTab(t,a),this.dispatchEvent(new CustomEvent("tabs-keyboard-activation",{detail:{tabIndex:t,tab:this.host.tabs[t],key:a.key,timestamp:Date.now()},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"activateTab")}}navigateToPreviousTab(t){try{const a=this.getEnabledTabIndices(),r=a.indexOf(t);if(r>0){const t=a[r-1];this.focusTab(t)}else if(a.length>0){const t=a[a.length-1];this.focusTab(t)}}catch(t){this.handleError(t,"navigateToPreviousTab")}}navigateToNextTab(t){try{const a=this.getEnabledTabIndices(),r=a.indexOf(t);if(r<a.length-1){const t=a[r+1];this.focusTab(t)}else if(a.length>0){const t=a[0];this.focusTab(t)}}catch(t){this.handleError(t,"navigateToNextTab")}}navigateToFirstTab(){try{const t=this.getEnabledTabIndices();t.length>0&&this.focusTab(t[0])}catch(t){this.handleError(t,"navigateToFirstTab")}}navigateToLastTab(){try{const t=this.getEnabledTabIndices();t.length>0&&this.focusTab(t[t.length-1])}catch(t){this.handleError(t,"navigateToLastTab")}}focusTab(t){try{const a=this.getTabElement(t);a&&a.focus()}catch(t){this.handleError(t,"focusTab")}}getEnabledTabIndices(){return this.host.tabs.map(((t,a)=>({tab:t,index:a}))).filter((({tab:t})=>!t.disabled)).map((({index:t})=>t))}}
|
|
18
340
|
/**
|
|
19
341
|
* @license
|
|
20
342
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
21
343
|
* SPDX-License-Identifier: MIT
|
|
22
|
-
*/class g extends u{constructor(t){super(t),this._host=t,this.dragOverHandler=t=>this.handleDragOver(t)}get host(){return this._host}hostConnected(){super.hostConnected(),this._host.addEventListener("dragover",this.dragOverHandler)}hostDisconnected(){super.hostDisconnected(),this._host.removeEventListener("dragover",this.dragOverHandler)}handleDragStart(t){try{if(!t.dataTransfer)return;const a=t.currentTarget,
|
|
344
|
+
*/class g extends u{constructor(t){super(t),this._host=t,this.dragOverHandler=t=>this.handleDragOver(t)}get host(){return this._host}hostConnected(){super.hostConnected(),this._host.addEventListener("dragover",this.dragOverHandler)}hostDisconnected(){super.hostDisconnected(),this._host.removeEventListener("dragover",this.dragOverHandler)}handleDragStart(t){try{if(!t.dataTransfer)return;const a=t.currentTarget,r=a.dataset.index||"";if(!this.isValidTabIndex(parseInt(r)))return;t.dataTransfer.setData("text/plain",r),t.dataTransfer.effectAllowed="move",a.classList.add("dragging-start"),this.dispatchEvent(new CustomEvent("tabs-drag-start",{detail:{tabIndex:parseInt(r),tab:this.host.tabs[parseInt(r)],timestamp:Date.now()},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleDragStart")}}handleDragOver(t){try{t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move")}catch(t){this.handleError(t,"handleDragOver")}}handleDragEnter(t){try{t.preventDefault();const a=t.currentTarget;if(a.contains(t.relatedTarget))return;a.classList.add("dragging")}catch(t){this.handleError(t,"handleDragEnter")}}handleDragLeave(t){try{t.preventDefault();const a=t.currentTarget;if(a.contains(t.relatedTarget))return;a.classList.contains("dragging")&&a.classList.remove("dragging")}catch(t){this.handleError(t,"handleDragLeave")}}handleDrop(t){try{if(t.preventDefault(),!t.dataTransfer)return;const a=t.currentTarget,r=parseInt(t.dataTransfer.getData("text/plain")),e=parseInt(a.dataset.index||"0");this.isValidTabReorder(r,e)&&this.performTabReorder(r,e),this.cleanupDragClasses()}catch(t){this.handleError(t,"handleDrop")}}canMoveTab(){var t,a;return null!==(a=null===(t=this.host.editable)||void 0===t?void 0:t.canMove)&&void 0!==a&&a}isValidTabReorder(t,a){return t!==a&&this.isValidTabIndex(t)&&this.isValidTabIndex(a)&&this.canMoveTab()}performTabReorder(t,a){try{const r=this.host.tabs[t],e=this.host.tabs[a];this.host.dispatchEventWithMetadata("nr-tab-order-change",{sourceIndex:t,targetIndex:a,sourceTab:r,targetTab:e}),this.dispatchEvent(new CustomEvent("tabs-drag-complete",{detail:{sourceIndex:t,targetIndex:a,sourceTab:r,targetTab:e,timestamp:Date.now()},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"performTabReorder")}}cleanupDragClasses(){var t,a;try{const r=this.host.shadowRoot;r&&(null===(t=r.querySelector(".dragging"))||void 0===t||t.classList.remove("dragging"),null===(a=r.querySelector(".dragging-start"))||void 0===a||a.classList.remove("dragging-start"))}catch(t){this.handleError(t,"cleanupDragClasses")}}getDraggableState(){return this.canMoveTab()}}
|
|
23
345
|
/**
|
|
24
346
|
* @license
|
|
25
347
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
26
348
|
* SPDX-License-Identifier: MIT
|
|
27
|
-
*/class
|
|
349
|
+
*/class y extends u{constructor(t){super(t),this._host=t}get host(){return this._host}handleAddTab(){try{if(!this.canAddTab())return void console.warn("[TabsEditableController] Cannot add tab - permission denied");this.host.dispatchEventWithMetadata("nr-tab-add",{}),this.dispatchEvent(new CustomEvent("tabs-add-tab",{detail:{timestamp:Date.now(),totalTabs:this.host.tabs.length},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleAddTab")}}handleRemoveTab(t){try{if(!this.isValidTabIndex(t))return void console.warn(`[TabsEditableController] Invalid tab index: ${t}`);const a=this.host.tabs[t];if(!this.canDeleteTab(a))return void console.warn("[TabsEditableController] Cannot delete tab - permission denied");this.host.dispatchEventWithMetadata("nr-tab-remove",{index:t,tab:a}),this.dispatchEvent(new CustomEvent("tabs-remove-tab",{detail:{tabIndex:t,tab:a,timestamp:Date.now(),remainingTabs:this.host.tabs.length-1},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleRemoveTab")}}handleEditTab(t,a){try{if(!this.isValidTabIndex(t))return void console.warn(`[TabsEditableController] Invalid tab index: ${t}`);const r=this.host.tabs[t],e=r.label;if(!this.canEditTabTitle(r))return void console.warn("[TabsEditableController] Cannot edit tab title - permission denied");if(a.trim()===e.trim())return;if(!this.isValidTabLabel(a))return void console.warn("[TabsEditableController] Invalid tab label provided");this.host.dispatchEventWithMetadata("nr-tab-edit",{index:t,tab:Object.assign(Object.assign({},r),{label:a.trim()}),oldLabel:e,newLabel:a.trim()}),this.dispatchEvent(new CustomEvent("tabs-edit-tab",{detail:{tabIndex:t,tab:r,oldLabel:e,newLabel:a.trim(),timestamp:Date.now()},bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"handleEditTab")}}canAddTab(){var t,a;return null!==(a=null===(t=this.host.editable)||void 0===t?void 0:t.canAddTab)&&void 0!==a&&a}canDeleteTab(t){var a,r,e,i,o,n,s;return t?null!==(o=null!==(e=null!==(a=t.closable)&&void 0!==a?a:null===(r=t.editable)||void 0===r?void 0:r.canDeleteTab)&&void 0!==e?e:null===(i=this.host.editable)||void 0===i?void 0:i.canDeleteTab)&&void 0!==o&&o:null!==(s=null===(n=this.host.editable)||void 0===n?void 0:n.canDeleteTab)&&void 0!==s&&s}canEditTabTitle(t){var a,r,e,i,o,n;return t?null!==(i=null!==(r=null===(a=t.editable)||void 0===a?void 0:a.canEditTabTitle)&&void 0!==r?r:null===(e=this.host.editable)||void 0===e?void 0:e.canEditTabTitle)&&void 0!==i&&i:null!==(n=null===(o=this.host.editable)||void 0===o?void 0:o.canEditTabTitle)&&void 0!==n&&n}canMoveTab(){var t,a;return null!==(a=null===(t=this.host.editable)||void 0===t?void 0:t.canMove)&&void 0!==a&&a}getTabEditableState(t){return{canDelete:this.canDeleteTab(t),canEdit:this.canEditTabTitle(t),canMove:this.canMoveTab()}}isValidTabLabel(t){return"string"==typeof t&&t.trim().length>0&&t.trim().length<=100}getContentEditableAttribute(t){return this.canEditTabTitle(t)?"true":void 0}handleTabTitleBlur(t,a){var r;try{const e=t.target,i=(null===(r=e.textContent)||void 0===r?void 0:r.trim())||"";if(i)this.handleEditTab(a,i);else{const t=this.host.tabs[a];e.textContent=t.label}}catch(t){this.handleError(t,"handleTabTitleBlur")}}handleTabTitleKeyDown(t,a){try{if("Enter"===t.key){t.preventDefault();t.target.blur()}else if("Escape"===t.key){t.preventDefault();const r=this.host.tabs[a],e=t.target;e.textContent=r.label,e.blur()}}catch(t){this.handleError(t,"handleTabTitleKeyDown")}}}
|
|
28
350
|
/**
|
|
29
351
|
* @license
|
|
30
352
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
31
353
|
* SPDX-License-Identifier: MIT
|
|
32
|
-
*/class
|
|
354
|
+
*/class p extends u{constructor(t){super(t),this._host=t}get host(){return this._host}handleTabClick(t,a){try{if(!this.isValidTabIndex(t))return void console.warn(`[TabsEventController] Invalid tab index: ${t}`);const r=this.host.tabs[t];if(r.disabled)return void a.preventDefault();a.preventDefault(),this.host.setActiveTab(t,a),this.host.dispatchEventWithMetadata("nr-tab-click",{index:t,tab:r,originalEvent:a}),this.dispatchTabEvent("tabs-interaction",{type:"click",tabIndex:t,tab:r,timestamp:Date.now(),modifierKeys:{ctrl:a.ctrlKey,shift:a.shiftKey,alt:a.altKey,meta:a.metaKey}})}catch(t){this.handleError(t,"handleTabClick")}}handleTabFocus(t,a){try{if(!this.isValidTabIndex(t))return;const r=this.host.tabs[t];this.dispatchTabEvent("tabs-focus",{tabIndex:t,tab:r,timestamp:Date.now(),originalEvent:a})}catch(t){this.handleError(t,"handleTabFocus")}}handleTabBlur(t,a){try{if(!this.isValidTabIndex(t))return;const r=this.host.tabs[t];this.dispatchTabEvent("tabs-blur",{tabIndex:t,tab:r,timestamp:Date.now(),originalEvent:a})}catch(t){this.handleError(t,"handleTabBlur")}}dispatchTabEvent(t,a){try{this.dispatchEvent(new CustomEvent(t,{detail:a,bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"dispatchTabEvent")}}handleTabChange(t,a,r){try{if(!this.isValidTabIndex(t))return void console.warn(`[TabsEventController] Invalid new tab index: ${t}`);const e=this.host.tabs[t],i=this.isValidTabIndex(a)?this.host.tabs[a]:null;this.dispatchTabEvent("tabs-change",{newTabIndex:t,previousTabIndex:a,newTab:e,previousTab:i,timestamp:Date.now(),originalEvent:r})}catch(t){this.handleError(t,"handleTabChange")}}handleTabActivation(t,a,r){try{if(!this.isValidTabIndex(t))return;const e=this.host.tabs[t];this.dispatchTabEvent("tabs-activation",{tabIndex:t,tab:e,activationType:a,timestamp:Date.now(),originalEvent:r})}catch(t){this.handleError(t,"handleTabActivation")}}handleTabHover(t,a,r){try{if(!this.isValidTabIndex(t))return;const e=this.host.tabs[t];this.dispatchTabEvent(r?"tabs-hover-enter":"tabs-hover-leave",{tabIndex:t,tab:e,timestamp:Date.now(),originalEvent:a})}catch(t){this.handleError(t,"handleTabHover")}}getTabEventListeners(t){return{click:a=>this.handleTabClick(t,a),focus:a=>this.handleTabFocus(t,a),blur:a=>this.handleTabBlur(t,a),mouseenter:a=>this.handleTabHover(t,a,!0),mouseleave:a=>this.handleTabHover(t,a,!1)}}canActivateTab(t){return!t.disabled}getTabInteractionState(t){var a;const r=this.host.tabs[t];return{isActive:t===this.host.activeTab,isDisabled:null!==(a=r.disabled)&&void 0!==a&&a,canActivate:this.canActivateTab(r)}}}
|
|
33
355
|
/**
|
|
34
356
|
* @license
|
|
35
357
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
36
358
|
* SPDX-License-Identifier: MIT
|
|
37
|
-
*/var m=function(t,a,e
|
|
359
|
+
*/var m=function(t,a,r,e){for(var i,o=arguments.length,n=o<3?a:null===e?e=Object.getOwnPropertyDescriptor(a,r):e,s=t.length-1;s>=0;s--)(i=t[s])&&(n=(o<3?i(n):o>3?i(a,r,n):i(a,r))||n);return o>3&&n&&Object.defineProperty(a,r,n),n};let f=class extends(s(a)){constructor(){super(...arguments),this.activeTab=0,this.orientation="horizontal",this.align="left",this.tabSize="medium",this.variant="default",this.tabs=[],this.animated=!0,this.destroyInactiveTabPane=!1,this.tabsAriaLabel="",this.requiredComponents=["nr-icon"],this.keyboardController=new v(this),this.dragDropController=new g(this),this.editableController=new y(this),this.eventController=new p(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies(),this.observeChildrenChanges(),this.keyboardController,this.dragDropController,this.editableController,this.eventController}render(){return r`
|
|
360
|
+
<div
|
|
361
|
+
class=${n({"tabs-container":!0,"vertical-align":"vertical"===this.orientation,"horizontal-align":"horizontal"===this.orientation,"right-align":"right"===this.align,"left-align":"left"===this.align,"center-align":"center"===this.align})}
|
|
362
|
+
role="tablist"
|
|
363
|
+
aria-label="${this.tabsAriaLabel||e}"
|
|
364
|
+
data-theme="${this.currentTheme}"
|
|
365
|
+
data-size="${this.tabSize}"
|
|
366
|
+
data-type="${this.variant}"
|
|
367
|
+
>
|
|
368
|
+
<div
|
|
369
|
+
class="tab-labels"
|
|
370
|
+
style="flex-direction: ${"vertical"===this.orientation?"column":"row"}"
|
|
371
|
+
>
|
|
372
|
+
<div></div>
|
|
373
|
+
${this.renderTabs()}
|
|
374
|
+
<div></div>
|
|
375
|
+
</div>
|
|
376
|
+
<div class="tab-content" role="tabpanel">
|
|
377
|
+
${this.renderActiveTab()}
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
`}observeChildrenChanges(){new MutationObserver((()=>{this.requestUpdate()})).observe(this,{childList:!0})}renderDeleteIcon(t,a){return this.editableController.canDeleteTab(t)?this.isComponentAvailable("nr-icon")?r`
|
|
381
|
+
<nr-icon
|
|
382
|
+
name="window-close"
|
|
383
|
+
class="close-icon"
|
|
384
|
+
@mousedown=${t=>{t.stopPropagation(),this.editableController.handleRemoveTab(a)}}
|
|
385
|
+
></nr-icon>
|
|
386
|
+
`:(console.warn("[nr-tabs] Icon component not available. Delete icon will not render."),e):e}renderTabs(){const t=[];for(let a=0;a<this.tabs.length;a++){const i=this.tabs[a],o=a===this.activeTab,s=0===a,l=a===this.tabs.length-1,d=1===this.tabs.length,c=!s&&!l&&!d,b=r`
|
|
387
|
+
<div
|
|
388
|
+
data-index=${a}
|
|
389
|
+
draggable=${this.dragDropController.getDraggableState()?"true":"false"}
|
|
390
|
+
@dragenter=${t=>this.dragDropController.handleDragEnter(t)}
|
|
391
|
+
@dragleave=${t=>this.dragDropController.handleDragLeave(t)}
|
|
392
|
+
@dragstart=${t=>this.dragDropController.handleDragStart(t)}
|
|
393
|
+
@drop=${t=>this.dragDropController.handleDrop(t)}
|
|
394
|
+
class=${n({"tab-label":!0,active:o,disabled:!!i.disabled,"first-tab":s&&"horizontal"===this.orientation,"middle-tab":c&&"horizontal"===this.orientation,"last-tab":l&&"horizontal"===this.orientation,"single-tab":d&&"horizontal"===this.orientation})}
|
|
395
|
+
role="tab"
|
|
396
|
+
aria-selected=${o?"true":"false"}
|
|
397
|
+
aria-disabled=${i.disabled?"true":"false"}
|
|
398
|
+
tabindex=${o?"0":"-1"}
|
|
399
|
+
@click=${t=>this.eventController.handleTabClick(a,t)}
|
|
400
|
+
>
|
|
401
|
+
${i.icon&&this.isComponentAvailable("nr-icon")?r`<nr-icon name=${i.icon} class="tab-icon"></nr-icon>`:e}
|
|
402
|
+
|
|
403
|
+
<span class="tab-text"
|
|
404
|
+
contenteditable=${this.editableController.getContentEditableAttribute(i)||e}
|
|
405
|
+
@blur=${t=>this.editableController.handleTabTitleBlur(t,a)}
|
|
406
|
+
@keydown=${t=>this.editableController.handleTabTitleKeyDown(t,a)}
|
|
407
|
+
>${i.label}</span>
|
|
408
|
+
|
|
409
|
+
${this.renderDeleteIcon(i,a)}
|
|
410
|
+
</div>
|
|
411
|
+
`;t.push(b)}if(this.editableController.canAddTab()){const a=r`
|
|
412
|
+
<div
|
|
413
|
+
class="tab-label add-tab-label"
|
|
414
|
+
role="button"
|
|
415
|
+
aria-label="Add new tab"
|
|
416
|
+
tabindex="0"
|
|
417
|
+
@mousedown=${()=>{this.editableController.handleAddTab()}}
|
|
418
|
+
@keydown=${t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.editableController.handleAddTab())}}
|
|
419
|
+
>
|
|
420
|
+
${this.isComponentAvailable("nr-icon")?r`<nr-icon name="plus" class="add-tab-icon"></nr-icon>`:r`<span>+</span>`}
|
|
421
|
+
</div>
|
|
422
|
+
`;t.push(a)}return t}updated(t){super.updated(t),this.activeTab>=this.tabs.length?this.activeTab=Math.max(0,this.tabs.length-1):this.activeTab<0&&(this.activeTab=0)}renderActiveTab(){if(0===this.tabs.length||this.activeTab<0||this.activeTab>=this.tabs.length)return e;const t=this.tabs[this.activeTab];return r`${t.content||e}`}setActiveTab(t,a){var r,e;if(a instanceof MouseEvent){null!==(e=null===(r=this.editable)||void 0===r?void 0:r.canMove)&&void 0!==e&&e||a.preventDefault()}if(t<0||t>=this.tabs.length||this.tabs[t].disabled)return;const i=this.activeTab,o=this.tabs[t];this.activeTab=t,this.dispatchEventWithMetadata("nr-tab-click",{index:t,tab:o,previousIndex:i}),i!==t&&this.dispatchEventWithMetadata("nr-tab-change",{index:t,tab:o,previousIndex:i})}};f.styles=l,m([i({type:Number})],f.prototype,"activeTab",void 0),m([i({type:String})],f.prototype,"orientation",void 0),m([i({type:String})],f.prototype,"align",void 0),m([i({type:String,attribute:"size"})],f.prototype,"tabSize",void 0),m([i({type:String,attribute:"type"})],f.prototype,"variant",void 0),m([i({type:Object})],f.prototype,"editable",void 0),m([i({type:Array})],f.prototype,"tabs",void 0),m([i({type:Boolean})],f.prototype,"animated",void 0),m([i({type:Boolean})],f.prototype,"destroyInactiveTabPane",void 0),m([i({type:String})],f.prototype,"tabsAriaLabel",void 0),f=m([o("nr-tabs")],f);export{b as DEFAULT_ACTIVE_TAB,d as EMPTY_STRING,h as LABEL_ATTRIBUTES,c as NOTHING_STRING,f as NrTabsElement,f as TabsComponent};
|
package/package.json
CHANGED