@blockquote-web-components/blockquote-tabs 1.0.4 → 1.1.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/README.md +240 -103
- package/define/blockquote-tab.js +1 -1
- package/define/blockquote-tabpanel.js +1 -1
- package/define/blockquote-tabs.js +1 -1
- package/package.json +22 -12
- package/src/BlockquoteTabs.js +62 -58
- package/src/styles/blockquote-tabs-styles.css.js +1 -2
- package/src/tab/BlockquoteTab.js +15 -7
- package/src/tabpanel/BlockquoteTabPanel.js +14 -6
package/README.md
CHANGED
|
@@ -1,140 +1,277 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[ARIA patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|------------------------|------------|-----------|------------------------------------------|---------------------------------------|
|
|
9
|
-
| `globalRootAttributes` | | `object` | {"role":"tab","slot":"tab","tabindex":0} | |
|
|
10
|
-
| `selected` | `selected` | `boolean` | false | Whether or not the tab is `selected`. |
|
|
7
|
+
## Usage
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
```html
|
|
10
|
+
<blockquote-tabs label="List of tabs">
|
|
11
|
+
<blockquote-tab id="tab-1">Tab 1</blockquote-tab>
|
|
12
|
+
<blockquote-tab id="tab-2">Tab 2</blockquote-tab>
|
|
13
|
+
<blockquote-tab id="tab-3">Tab 3</blockquote-tab>
|
|
14
|
+
<blockquote-tab id="tab-4">Tab 4</blockquote-tab>
|
|
15
|
+
<blockquote-tab id="tab-5">Tab 5</blockquote-tab>
|
|
16
|
+
<blockquote-tab id="tab-6">Tab 6</blockquote-tab>
|
|
17
|
+
<blockquote-tab id="tab-7">Tab 7</blockquote-tab>
|
|
18
|
+
<blockquote-tab id="tab-8">Tab 8</blockquote-tab>
|
|
19
|
+
<blockquote-tab id="tab-9">Tab 9</blockquote-tab>
|
|
20
|
+
<blockquote-tab id="tab-10">Tab 10</blockquote-tab>
|
|
21
|
+
<blockquote-tabpanel aria-labelledby="tab-1"><p>Panel 1</p></blockquote-tabpanel>
|
|
22
|
+
<blockquote-tabpanel aria-labelledby="tab-2"><p>Panel 2</p></blockquote-tabpanel>
|
|
23
|
+
<blockquote-tabpanel aria-labelledby="tab-3"><p>Panel 3</p></blockquote-tabpanel>
|
|
24
|
+
<blockquote-tabpanel aria-labelledby="tab-4"><p>Panel 4</p></blockquote-tabpanel>
|
|
25
|
+
<blockquote-tabpanel aria-labelledby="tab-5"><p>Panel 5</p></blockquote-tabpanel>
|
|
26
|
+
<blockquote-tabpanel aria-labelledby="tab-6"><p>Panel 6</p></blockquote-tabpanel>
|
|
27
|
+
<blockquote-tabpanel aria-labelledby="tab-7"><p>Panel 7</p></blockquote-tabpanel>
|
|
28
|
+
<blockquote-tabpanel aria-labelledby="tab-8"><p>Panel 8</p></blockquote-tabpanel>
|
|
29
|
+
<blockquote-tabpanel aria-labelledby="tab-9"><p>Panel 9</p></blockquote-tabpanel>
|
|
30
|
+
<blockquote-tabpanel aria-labelledby="tab-10"><p>Panel 10</p></blockquote-tabpanel>
|
|
31
|
+
</blockquote-tabs>
|
|
32
|
+
```
|
|
13
33
|
|
|
14
|
-
| Event | Type |
|
|
15
|
-
|---------------|--------------------------------------------------|
|
|
16
|
-
| `slotchanges` | `CustomEvent<{ assignedSlotContent: { slotName: any; assignedSlot: any; }; assignedNodesContent: { assignedNodesByNode: any[]; assignedNodes: any[]; }; flattenedNodesContent: { assignedNodesByNode: any[]; assignedNodes: any[]; }; originalEvent: { ...; }; }>` |
|
|
17
34
|
|
|
35
|
+
### `src/BlockquoteTabs.js`:
|
|
36
|
+
|
|
37
|
+
#### class: `BlockquoteTabs`, `blockquote-tabs`
|
|
18
38
|
|
|
19
|
-
|
|
39
|
+
##### Mixins
|
|
20
40
|
|
|
21
|
-
|
|
41
|
+
| Name | Module | Package |
|
|
42
|
+
| ---------------------------- | ------ | -------------------------------------------------------- |
|
|
43
|
+
| `BlockquoteMixinSlotContent` | | @blockquote-web-components/blockquote-mixin-slot-content |
|
|
22
44
|
|
|
23
|
-
|
|
24
|
-
|------------------------|------------|-----------|--------------------------------------------------|--------------------------------------------|
|
|
25
|
-
| `globalRootAttributes` | | `object` | {"role":"tabpanel","slot":"tabpanel","tabindex":0} | |
|
|
26
|
-
| `selected` | `selected` | `boolean` | false | Whether or not the tabpanel is `selected`. |
|
|
45
|
+
##### Fields
|
|
27
46
|
|
|
47
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
48
|
+
| --------------------------- | ------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------- |
|
|
49
|
+
| `_selectedTab` | | | | | |
|
|
50
|
+
| `_selectedTabIndex` | | | | | |
|
|
51
|
+
| `_selectedTabIndexFromOne` | | | | | |
|
|
52
|
+
| `_getTabListLength` | | | | | |
|
|
53
|
+
| `_scrollContentTpl` | | | | | |
|
|
54
|
+
| `_tablistTpl` | | | | | |
|
|
55
|
+
| `_separatorTpl` | | | | | |
|
|
56
|
+
| `_indicatorsTpl` | | | | | |
|
|
57
|
+
| `_holdTpl` | | | | | |
|
|
58
|
+
| `_tabpanelTpl` | | | | | |
|
|
59
|
+
| `autofocus` | public | `boolean` | `false` | If present, the tab automatically have focus | |
|
|
60
|
+
| `label` | public | `string` | `''` | \`aria-label\` for tabs group | |
|
|
61
|
+
| `selected` | public | `number` | `1` | The tab selected. | |
|
|
62
|
+
| `_tabList` | | `array` | `[]` | | |
|
|
63
|
+
| `_tabpanelList` | | `array` | `[]` | | |
|
|
64
|
+
| `_selectTabLast` | | | `undefined` | | |
|
|
65
|
+
| `_selectTabpanelLast` | | | `undefined` | | |
|
|
66
|
+
| `_observedFocus` | | `boolean` | `false` | | |
|
|
67
|
+
| `_observeScrollBehavior` | | `boolean` | `false` | | |
|
|
68
|
+
| `_slotChangesCount` | | `number` | `0` | | |
|
|
69
|
+
| `_slotNodesCount` | | | `undefined` | | |
|
|
70
|
+
| `_scrollContentRef` | | | | | |
|
|
71
|
+
| `_resizeControllerObserver` | | | `new ResizeController(this, { callback: () => { this._onResizeObserverChange(); }, skipInitial: true, })` | | |
|
|
72
|
+
| `_hasScrollLeftIndicator` | public | `boolean` | | | |
|
|
73
|
+
| `_hasScrollRightIndicator` | public | `boolean` | | | |
|
|
28
74
|
|
|
29
|
-
|
|
75
|
+
##### Methods
|
|
30
76
|
|
|
31
|
-
|
|
77
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
78
|
+
| --------------------------- | ------- | ----------- | ------------------------------------------- | ------ | -------------- |
|
|
79
|
+
| `_selectedIsInRange` | | | `idx` | | |
|
|
80
|
+
| `_onSlotChanges` | | | `ev` | | |
|
|
81
|
+
| `_scrollEdge` | | | `{ target = this._scrollContentRef.value }` | | |
|
|
82
|
+
| `_onTabClick` | | | `ev` | | |
|
|
83
|
+
| `_onTabKeyDown` | | | `ev` | | |
|
|
84
|
+
| `_selectTab` | | | | | |
|
|
85
|
+
| `_moveFocusSelectedTab` | | | `selectedTab` | | |
|
|
86
|
+
| `_requestFocusUpdate` | | | | | |
|
|
87
|
+
| `_scrollIntoView` | | | | | |
|
|
88
|
+
| `_scrollIntoViewWithOffset` | | | `tabScroller, behavior` | | |
|
|
89
|
+
| `_requestPropertyUpdate` | | | `prop` | | |
|
|
90
|
+
| `_onResizeObserverChange` | | | | | |
|
|
32
91
|
|
|
33
|
-
|
|
92
|
+
##### Events
|
|
34
93
|
|
|
35
|
-
|
|
94
|
+
| Name | Type | Description | Inherited From |
|
|
95
|
+
| ---------------- | ---- | ----------- | -------------- |
|
|
96
|
+
| `selectedchange` | | | |
|
|
36
97
|
|
|
37
|
-
|
|
98
|
+
##### Attributes
|
|
38
99
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<blockquote-tab id="tab-6">Tab 6</blockquote-tab>
|
|
47
|
-
<blockquote-tab id="tab-7">Tab 7</blockquote-tab>
|
|
48
|
-
<blockquote-tab id="tab-8">Tab 8</blockquote-tab>
|
|
49
|
-
<blockquote-tab id="tab-9">Tab 9</blockquote-tab>
|
|
50
|
-
<blockquote-tab id="tab-10">Tab 10</blockquote-tab>
|
|
51
|
-
<blockquote-tabpanel aria-labelledby="tab-1"><p>Panel 1</p></blockquote-tabpanel>
|
|
52
|
-
<blockquote-tabpanel aria-labelledby="tab-2"><p>Panel 2</p></blockquote-tabpanel>
|
|
53
|
-
<blockquote-tabpanel aria-labelledby="tab-3"><p>Panel 3</p></blockquote-tabpanel>
|
|
54
|
-
<blockquote-tabpanel aria-labelledby="tab-4"><p>Panel 4</p></blockquote-tabpanel>
|
|
55
|
-
<blockquote-tabpanel aria-labelledby="tab-5"><p>Panel 5</p></blockquote-tabpanel>
|
|
56
|
-
<blockquote-tabpanel aria-labelledby="tab-6"><p>Panel 6</p></blockquote-tabpanel>
|
|
57
|
-
<blockquote-tabpanel aria-labelledby="tab-7"><p>Panel 7</p></blockquote-tabpanel>
|
|
58
|
-
<blockquote-tabpanel aria-labelledby="tab-8"><p>Panel 8</p></blockquote-tabpanel>
|
|
59
|
-
<blockquote-tabpanel aria-labelledby="tab-9"><p>Panel 9</p></blockquote-tabpanel>
|
|
60
|
-
<blockquote-tabpanel aria-labelledby="tab-10"><p>Panel 10</p></blockquote-tabpanel>
|
|
61
|
-
</blockquote-tabs>
|
|
62
|
-
```
|
|
100
|
+
| Name | Field | Inherited From |
|
|
101
|
+
| -------------------------- | ------------------------- | -------------- |
|
|
102
|
+
| `autofocus` | autofocus | |
|
|
103
|
+
| `label` | label | |
|
|
104
|
+
| `selected` | selected | |
|
|
105
|
+
| `_hasScrollLeftIndicator` | \_hasScrollLeftIndicator | |
|
|
106
|
+
| `_hasScrollRightIndicator` | \_hasScrollRightIndicator | |
|
|
63
107
|
|
|
64
|
-
|
|
108
|
+
<hr/>
|
|
65
109
|
|
|
66
|
-
|
|
110
|
+
#### Exports
|
|
67
111
|
|
|
68
|
-
|
|
112
|
+
| Kind | Name | Declaration | Module | Package |
|
|
113
|
+
| ---- | ---------------- | -------------- | --------------------- | ------- |
|
|
114
|
+
| `js` | `BlockquoteTabs` | BlockquoteTabs | src/BlockquoteTabs.js | |
|
|
69
115
|
|
|
70
|
-
|
|
116
|
+
### `src/styles/blockquote-tabs-styles.css.js`:
|
|
71
117
|
|
|
72
|
-
|
|
73
|
-
|-------------|-------------|-----------|---------|----------------------------------------------|
|
|
74
|
-
| `autofocus` | `autofocus` | `Boolean` | false | If present, the tab automatically have focus |
|
|
75
|
-
| `label` | `label` | `String` | "" | `aria-label` for tabs group |
|
|
76
|
-
| `selected` | `selected` | `Number` | 1 | The tab selected. |
|
|
118
|
+
#### Variables
|
|
77
119
|
|
|
78
|
-
|
|
120
|
+
| Name | Description | Type |
|
|
121
|
+
| -------- | ----------- | ---- |
|
|
122
|
+
| `styles` | | |
|
|
79
123
|
|
|
80
|
-
|
|
81
|
-
|------------------|--------------------------------------------------|
|
|
82
|
-
| `selectedchange` | `CustomEvent<{ selected: number; tab: any; tabpanel: any; }>` |
|
|
83
|
-
| `slotchanges` | `CustomEvent<{ assignedSlotContent: { slotName: any; assignedSlot: any; }; assignedNodesContent: { assignedNodesByNode: any[]; assignedNodes: any[]; }; flattenedNodesContent: { assignedNodesByNode: any[]; assignedNodes: any[]; }; originalEvent: { ...; }; }>` |
|
|
124
|
+
<hr/>
|
|
84
125
|
|
|
126
|
+
#### Exports
|
|
85
127
|
|
|
86
|
-
|
|
128
|
+
| Kind | Name | Declaration | Module | Package |
|
|
129
|
+
| ---- | -------- | ----------- | ---------------------------------------- | ------- |
|
|
130
|
+
| `js` | `styles` | styles | src/styles/blockquote-tabs-styles.css.js | |
|
|
87
131
|
|
|
88
|
-
|
|
89
133
|
|
|
90
|
-
|
|
134
|
+
`<blockquote-tab>`
|
|
135
|
+
A tab element that can be used inside a `blockquote-tabs` element.
|
|
91
136
|
|
|
92
|
-
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
|
|
93
137
|
|
|
94
|
-
|
|
138
|
+
### `src/tab/BlockquoteTab.js`:
|
|
95
139
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
140
|
+
#### class: `BlockquoteTab`, `blockquote-tab`
|
|
141
|
+
|
|
142
|
+
##### Mixins
|
|
143
|
+
|
|
144
|
+
| Name | Module | Package |
|
|
145
|
+
| ---------------------------- | ------ | -------------------------------------------------------- |
|
|
146
|
+
| `BlockquoteMixinSlotContent` | | @blockquote-web-components/blockquote-mixin-slot-content |
|
|
147
|
+
|
|
148
|
+
##### Fields
|
|
149
|
+
|
|
150
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
151
|
+
| ---------------------- | ------- | --------- | -------------------------------------------------------------- | --------------------------------------- | -------------- |
|
|
152
|
+
| `selected` | public | `boolean` | `false` | Whether or not the tab is \`selected\`. | |
|
|
153
|
+
| `globalRootAttributes` | | `object` | `{ role: 'tab', slot: 'tab', tabindex: 0, }` | | |
|
|
154
|
+
|
|
155
|
+
##### Methods
|
|
156
|
+
|
|
157
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
158
|
+
| -------------------- | ------- | ------------------------------- | ----------------------- | ------ | -------------- |
|
|
159
|
+
| `_onSlotChanges` | | | `ev` | | |
|
|
160
|
+
| `__setArrayAttibute` | | Sets attributes on the element. | `entries: Record<*, *>` | | |
|
|
161
|
+
|
|
162
|
+
##### Attributes
|
|
163
|
+
|
|
164
|
+
| Name | Field | Inherited From |
|
|
165
|
+
| ---------- | -------- | -------------- |
|
|
166
|
+
| `selected` | selected | |
|
|
167
|
+
|
|
168
|
+
<hr/>
|
|
169
|
+
|
|
170
|
+
#### Exports
|
|
171
|
+
|
|
172
|
+
| Kind | Name | Declaration | Module | Package |
|
|
173
|
+
| ---- | --------------- | ------------- | ------------------------ | ------- |
|
|
174
|
+
| `js` | `BlockquoteTab` | BlockquoteTab | src/tab/BlockquoteTab.js | |
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
`<blockquote-tabpanel>`
|
|
179
|
+
A tab element that can be used inside a `blockquote-tabs` element.
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
### `src/tabpanel/BlockquoteTabPanel.js`:
|
|
183
|
+
|
|
184
|
+
#### class: `BlockquoteTabPanel`, `blockquote-tabpanel`
|
|
185
|
+
|
|
186
|
+
##### Fields
|
|
187
|
+
|
|
188
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
189
|
+
| ---------------------- | ------- | --------- | ------------------------------------------------------------------------ | -------------------------------------------- | -------------- |
|
|
190
|
+
| `selected` | public | `boolean` | `false` | Whether or not the tabpanel is \`selected\`. | |
|
|
191
|
+
| `globalRootAttributes` | | `object` | `{ role: 'tabpanel', slot: 'tabpanel', tabindex: 0, }` | | |
|
|
192
|
+
|
|
193
|
+
##### Methods
|
|
194
|
+
|
|
195
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
196
|
+
| -------------------- | ------- | ------------------------------- | ----------------------- | ------ | -------------- |
|
|
197
|
+
| `__setArrayAttibute` | | Sets attributes on the element. | `entries: Record<*, *>` | | |
|
|
198
|
+
|
|
199
|
+
##### Attributes
|
|
200
|
+
|
|
201
|
+
| Name | Field | Inherited From |
|
|
202
|
+
| ---------- | -------- | -------------- |
|
|
203
|
+
| `selected` | selected | |
|
|
204
|
+
|
|
205
|
+
<hr/>
|
|
206
|
+
|
|
207
|
+
#### Exports
|
|
208
|
+
|
|
209
|
+
| Kind | Name | Declaration | Module | Package |
|
|
210
|
+
| ---- | -------------------- | ------------------ | ---------------------------------- | ------- |
|
|
211
|
+
| `js` | `BlockquoteTabPanel` | BlockquoteTabPanel | src/tabpanel/BlockquoteTabPanel.js | |
|
|
212
|
+
|
|
213
|
+
### `src/tab/styles/blockquote-tab-styles.css.js`:
|
|
214
|
+
|
|
215
|
+
#### Variables
|
|
216
|
+
|
|
217
|
+
| Name | Description | Type |
|
|
218
|
+
| -------- | ----------- | ---- |
|
|
219
|
+
| `styles` | | |
|
|
220
|
+
|
|
221
|
+
<hr/>
|
|
222
|
+
|
|
223
|
+
#### Exports
|
|
224
|
+
|
|
225
|
+
| Kind | Name | Declaration | Module | Package |
|
|
226
|
+
| ---- | -------- | ----------- | ------------------------------------------- | ------- |
|
|
227
|
+
| `js` | `styles` | styles | src/tab/styles/blockquote-tab-styles.css.js | |
|
|
228
|
+
|
|
229
|
+
### `src/tabpanel/styles/blockquote-tabpanel-styles.css.js`:
|
|
230
|
+
|
|
231
|
+
#### Variables
|
|
232
|
+
|
|
233
|
+
| Name | Description | Type |
|
|
234
|
+
| -------- | ----------- | ---- |
|
|
235
|
+
| `styles` | | |
|
|
236
|
+
|
|
237
|
+
<hr/>
|
|
238
|
+
|
|
239
|
+
#### Exports
|
|
240
|
+
|
|
241
|
+
| Kind | Name | Declaration | Module | Package |
|
|
242
|
+
| ---- | -------- | ----------- | ----------------------------------------------------- | ------- |
|
|
243
|
+
| `js` | `styles` | styles | src/tabpanel/styles/blockquote-tabpanel-styles.css.js | |
|
|
244
|
+
|
|
245
|
+
### `define/blockquote-tab.js`:
|
|
246
|
+
|
|
247
|
+
#### Exports
|
|
248
|
+
|
|
249
|
+
| Kind | Name | Declaration | Module | Package |
|
|
250
|
+
| --------------------------- | ---------------- | ------------- | ------------------------- | ------- |
|
|
251
|
+
| `custom-element-definition` | `blockquote-tab` | BlockquoteTab | /src/tab/BlockquoteTab.js | |
|
|
252
|
+
|
|
253
|
+
### `define/blockquote-tabpanel.js`:
|
|
254
|
+
|
|
255
|
+
#### Exports
|
|
120
256
|
|
|
121
|
-
|
|
257
|
+
| Kind | Name | Declaration | Module | Package |
|
|
258
|
+
| --------------------------- | --------------------- | ------------------ | ----------------------------------- | ------- |
|
|
259
|
+
| `custom-element-definition` | `blockquote-tabpanel` | BlockquoteTabPanel | /src/tabpanel/BlockquoteTabPanel.js | |
|
|
122
260
|
|
|
123
|
-
|
|
261
|
+
### `define/blockquote-tabs.js`:
|
|
124
262
|
|
|
125
|
-
|
|
263
|
+
#### Exports
|
|
126
264
|
|
|
127
|
-
|
|
265
|
+
| Kind | Name | Declaration | Module | Package |
|
|
266
|
+
| --------------------------- | ----------------- | -------------- | ---------------------- | ------- |
|
|
267
|
+
| `custom-element-definition` | `blockquote-tabs` | BlockquoteTabs | /src/BlockquoteTabs.js | |
|
|
128
268
|
|
|
129
|
-
|
|
130
|
-
|-------------|-------------|-----------|---------|----------------------------------------------|
|
|
131
|
-
| `autofocus` | `autofocus` | `Boolean` | false | If present, the tab automatically have focus |
|
|
132
|
-
| `label` | `label` | `String` | "" | `aria-label` for tabs group |
|
|
133
|
-
| `selected` | `selected` | `Number` | 1 | The tab selected. |
|
|
269
|
+
### `index.js`:
|
|
134
270
|
|
|
135
|
-
|
|
271
|
+
#### Exports
|
|
136
272
|
|
|
137
|
-
|
|
|
138
|
-
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
273
|
+
| Kind | Name | Declaration | Module | Package |
|
|
274
|
+
| ---- | -------------------- | ------------------ | ------------------------------------ | ------- |
|
|
275
|
+
| `js` | `BlockquoteTabs` | BlockquoteTabs | ./src/BlockquoteTabs.js | |
|
|
276
|
+
| `js` | `BlockquoteTab` | BlockquoteTab | ./src/tab/BlockquoteTab.js | |
|
|
277
|
+
| `js` | `BlockquoteTabPanel` | BlockquoteTabPanel | ./src/tabpanel/BlockquoteTabPanel.js | |
|
package/define/blockquote-tab.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-tabs",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Webcomponent blockquote-tabs following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -108,15 +108,23 @@
|
|
|
108
108
|
"parserOptions": {
|
|
109
109
|
"ecmaVersion": "latest"
|
|
110
110
|
},
|
|
111
|
-
"plugins": [
|
|
112
|
-
"log-filenames"
|
|
113
|
-
],
|
|
114
111
|
"extends": [
|
|
115
112
|
"@open-wc",
|
|
116
113
|
"prettier"
|
|
117
114
|
],
|
|
118
115
|
"rules": {
|
|
119
116
|
"class-methods-use-this": "off",
|
|
117
|
+
"indent": [
|
|
118
|
+
"error",
|
|
119
|
+
2,
|
|
120
|
+
{
|
|
121
|
+
"SwitchCase": 1,
|
|
122
|
+
"ignoredNodes": [
|
|
123
|
+
"PropertyDefinition",
|
|
124
|
+
"TemplateLiteral > *"
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
],
|
|
120
128
|
"no-unused-expressions": [
|
|
121
129
|
"error",
|
|
122
130
|
{
|
|
@@ -143,7 +151,9 @@
|
|
|
143
151
|
}
|
|
144
152
|
],
|
|
145
153
|
"import/no-unresolved": "off",
|
|
146
|
-
"import/prefer-default-export": "off"
|
|
154
|
+
"import/prefer-default-export": "off",
|
|
155
|
+
"lit/no-classfield-shadowing": "off",
|
|
156
|
+
"lit/no-native-attributes": "off"
|
|
147
157
|
}
|
|
148
158
|
},
|
|
149
159
|
"stylelint": {
|
|
@@ -157,19 +167,19 @@
|
|
|
157
167
|
}
|
|
158
168
|
},
|
|
159
169
|
"dependencies": {
|
|
160
|
-
"@blockquote-web-components/blockquote-mixin-slot-content": "^1.
|
|
170
|
+
"@blockquote-web-components/blockquote-mixin-slot-content": "^1.3.0",
|
|
161
171
|
"@juggle/resize-observer": "^3.4.0",
|
|
162
|
-
"@lit-labs/observers": "^
|
|
163
|
-
"lit": "^
|
|
172
|
+
"@lit-labs/observers": "^2.0.0",
|
|
173
|
+
"lit": "^3.1.0"
|
|
164
174
|
},
|
|
165
175
|
"devDependencies": {
|
|
166
|
-
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.
|
|
167
|
-
"@blockquote-web-components/blockquote-base-embedded-webview": "^1.
|
|
168
|
-
"@blockquote-web-components/blockquote-foundations-sass": "^1.
|
|
176
|
+
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.6.0",
|
|
177
|
+
"@blockquote-web-components/blockquote-base-embedded-webview": "^1.6.0",
|
|
178
|
+
"@blockquote-web-components/blockquote-foundations-sass": "^1.1.1"
|
|
169
179
|
},
|
|
170
180
|
"publishConfig": {
|
|
171
181
|
"access": "public"
|
|
172
182
|
},
|
|
173
183
|
"customElements": "custom-elements.json",
|
|
174
|
-
"gitHead": "
|
|
184
|
+
"gitHead": "c65690b8e735c0607858f3a14a381088721dc807"
|
|
175
185
|
}
|
package/src/BlockquoteTabs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { html, LitElement, nothing } from 'lit';
|
|
2
2
|
import { ref, createRef } from 'lit/directives/ref.js';
|
|
3
3
|
import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
|
|
4
|
-
import { ResizeController } from '@lit-labs/observers/
|
|
4
|
+
import { ResizeController } from '@lit-labs/observers/resize-controller.js';
|
|
5
5
|
import { BlockquoteMixinSlotContent } from '@blockquote-web-components/blockquote-mixin-slot-content';
|
|
6
6
|
import { styles } from './styles/blockquote-tabs-styles.css.js';
|
|
7
7
|
|
|
@@ -11,52 +11,47 @@ window.ResizeObserver || /* c8 ignore next */ (window.ResizeObserver = ResizeObs
|
|
|
11
11
|
// https://gist.github.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b
|
|
12
12
|
// https://darn.es/building-tabs-in-web-components/
|
|
13
13
|
// https://slides.com/daviddarnes/tabs-web-components
|
|
14
|
+
|
|
14
15
|
/**
|
|
15
|
-
|
|
18
|
-
|
|
19
|
-
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
|
|
20
|
-
|
|
21
|
-
## Usage
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
@element blockquote-tabs
|
|
54
|
-
*/
|
|
16
|
+
* 
|
|
17
|
+
*
|
|
18
|
+
* [ARIA patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)
|
|
19
|
+
*
|
|
20
|
+
* Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
|
|
21
|
+
*
|
|
22
|
+
* ## Usage
|
|
23
|
+
*
|
|
24
|
+
* ```html
|
|
25
|
+
* <blockquote-tabs label="List of tabs">
|
|
26
|
+
* <blockquote-tab id="tab-1">Tab 1</blockquote-tab>
|
|
27
|
+
* <blockquote-tab id="tab-2">Tab 2</blockquote-tab>
|
|
28
|
+
* <blockquote-tab id="tab-3">Tab 3</blockquote-tab>
|
|
29
|
+
* <blockquote-tab id="tab-4">Tab 4</blockquote-tab>
|
|
30
|
+
* <blockquote-tab id="tab-5">Tab 5</blockquote-tab>
|
|
31
|
+
* <blockquote-tab id="tab-6">Tab 6</blockquote-tab>
|
|
32
|
+
* <blockquote-tab id="tab-7">Tab 7</blockquote-tab>
|
|
33
|
+
* <blockquote-tab id="tab-8">Tab 8</blockquote-tab>
|
|
34
|
+
* <blockquote-tab id="tab-9">Tab 9</blockquote-tab>
|
|
35
|
+
* <blockquote-tab id="tab-10">Tab 10</blockquote-tab>
|
|
36
|
+
* <blockquote-tabpanel aria-labelledby="tab-1"><p>Panel 1</p></blockquote-tabpanel>
|
|
37
|
+
* <blockquote-tabpanel aria-labelledby="tab-2"><p>Panel 2</p></blockquote-tabpanel>
|
|
38
|
+
* <blockquote-tabpanel aria-labelledby="tab-3"><p>Panel 3</p></blockquote-tabpanel>
|
|
39
|
+
* <blockquote-tabpanel aria-labelledby="tab-4"><p>Panel 4</p></blockquote-tabpanel>
|
|
40
|
+
* <blockquote-tabpanel aria-labelledby="tab-5"><p>Panel 5</p></blockquote-tabpanel>
|
|
41
|
+
* <blockquote-tabpanel aria-labelledby="tab-6"><p>Panel 6</p></blockquote-tabpanel>
|
|
42
|
+
* <blockquote-tabpanel aria-labelledby="tab-7"><p>Panel 7</p></blockquote-tabpanel>
|
|
43
|
+
* <blockquote-tabpanel aria-labelledby="tab-8"><p>Panel 8</p></blockquote-tabpanel>
|
|
44
|
+
* <blockquote-tabpanel aria-labelledby="tab-9"><p>Panel 9</p></blockquote-tabpanel>
|
|
45
|
+
* <blockquote-tabpanel aria-labelledby="tab-10"><p>Panel 10</p></blockquote-tabpanel>
|
|
46
|
+
* </blockquote-tabs>
|
|
47
|
+
* ```
|
|
48
|
+
*
|
|
49
|
+
* @attribute autofocus
|
|
50
|
+
* @attribute label
|
|
51
|
+
* @attribute selected
|
|
52
|
+
* @fires selectedchange
|
|
53
|
+
*/
|
|
55
54
|
export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
56
|
-
static get is() {
|
|
57
|
-
return 'blockquote-tabs';
|
|
58
|
-
}
|
|
59
|
-
|
|
60
55
|
static get styles() {
|
|
61
56
|
return [styles];
|
|
62
57
|
}
|
|
@@ -65,16 +60,13 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
65
60
|
return {
|
|
66
61
|
/**
|
|
67
62
|
* If present, the tab automatically have focus
|
|
68
|
-
* @type {Boolean}
|
|
69
63
|
*/
|
|
70
|
-
// eslint-disable-next-line lit/no-native-attributes
|
|
71
64
|
autofocus: {
|
|
72
65
|
type: Boolean,
|
|
73
66
|
},
|
|
74
67
|
|
|
75
68
|
/**
|
|
76
69
|
* `aria-label` for tabs group
|
|
77
|
-
* @type {String}
|
|
78
70
|
*/
|
|
79
71
|
label: {
|
|
80
72
|
type: String,
|
|
@@ -82,7 +74,6 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
82
74
|
|
|
83
75
|
/**
|
|
84
76
|
* The tab selected.
|
|
85
|
-
* @type {Number}
|
|
86
77
|
*/
|
|
87
78
|
selected: {
|
|
88
79
|
type: Number,
|
|
@@ -123,6 +114,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
123
114
|
this._onTabClick = this._onTabClick.bind(this);
|
|
124
115
|
this._onTabKeyDown = this._onTabKeyDown.bind(this);
|
|
125
116
|
|
|
117
|
+
// @ts-ignore
|
|
126
118
|
this._resizeControllerObserver = new ResizeController(this, {
|
|
127
119
|
callback: () => {
|
|
128
120
|
this._onResizeObserverChange();
|
|
@@ -153,18 +145,18 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
153
145
|
|
|
154
146
|
connectedCallback() {
|
|
155
147
|
super.connectedCallback && super.connectedCallback();
|
|
156
|
-
this.shadowRoot
|
|
148
|
+
this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges.bind(this));
|
|
157
149
|
}
|
|
158
150
|
|
|
159
151
|
firstUpdated(props) {
|
|
160
152
|
super.firstUpdated && super.firstUpdated(props);
|
|
161
|
-
const tabSlot = this.shadowRoot
|
|
162
|
-
const tabpanelSlot = this.shadowRoot
|
|
153
|
+
const tabSlot = this.shadowRoot?.querySelector('[name="tab"]');
|
|
154
|
+
const tabpanelSlot = this.shadowRoot?.querySelector('[name="tabpanel"]');
|
|
163
155
|
|
|
164
|
-
this._slotNodesCount = this.shadowRoot
|
|
165
|
-
this._tabList = tabSlot
|
|
166
|
-
this._tabpanelList = tabpanelSlot
|
|
167
|
-
this._indicators = this.shadowRoot
|
|
156
|
+
this._slotNodesCount = this.shadowRoot?.querySelectorAll('slot');
|
|
157
|
+
this._tabList = /** @type {HTMLSlotElement} */ (tabSlot)?.assignedElements();
|
|
158
|
+
this._tabpanelList = /** @type {HTMLSlotElement} */ (tabpanelSlot)?.assignedElements();
|
|
159
|
+
this._indicators = this.shadowRoot?.querySelectorAll('.indicator');
|
|
168
160
|
}
|
|
169
161
|
|
|
170
162
|
updated(props) {
|
|
@@ -204,7 +196,10 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
204
196
|
this._tabpanelList = assignedNodesList;
|
|
205
197
|
}
|
|
206
198
|
|
|
207
|
-
if (
|
|
199
|
+
if (
|
|
200
|
+
Array.isArray(this._slotNodesCount) &&
|
|
201
|
+
this._slotChangesCount > this._slotNodesCount.length
|
|
202
|
+
) {
|
|
208
203
|
this._requestPropertyUpdate('selected');
|
|
209
204
|
}
|
|
210
205
|
}
|
|
@@ -257,6 +252,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
257
252
|
}
|
|
258
253
|
|
|
259
254
|
_scrollEdge({ target = this._scrollContentRef.value } = {}) {
|
|
255
|
+
// @ts-ignore
|
|
260
256
|
const { scrollLeft, scrollWidth, offsetWidth } = target;
|
|
261
257
|
const overflowingWidth = scrollWidth - offsetWidth;
|
|
262
258
|
this._hasScrollLeftIndicator = scrollLeft > 0;
|
|
@@ -283,12 +279,16 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
283
279
|
switch (ev.key) {
|
|
284
280
|
case 'ArrowLeft':
|
|
285
281
|
ev.preventDefault();
|
|
282
|
+
// @ts-ignore
|
|
286
283
|
idx = this._selectedTabIndexFromOne - 1;
|
|
284
|
+
// @ts-ignore
|
|
287
285
|
this.selected = idx <= 0 ? this._getTabListLength : idx;
|
|
288
286
|
break;
|
|
289
287
|
case 'ArrowRight':
|
|
290
288
|
ev.preventDefault();
|
|
289
|
+
// @ts-ignore
|
|
291
290
|
idx = this._selectedTabIndexFromOne + 1;
|
|
291
|
+
// @ts-ignore
|
|
292
292
|
this.selected = idx > this._getTabListLength ? 1 : idx;
|
|
293
293
|
break;
|
|
294
294
|
case 'Home':
|
|
@@ -346,8 +346,11 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
346
346
|
tabScroller = this._selectedTab,
|
|
347
347
|
behavior = this._observeScrollBehavior ? 'smooth' : 'auto',
|
|
348
348
|
) {
|
|
349
|
-
const [rootA, rootB] = this._indicators;
|
|
350
349
|
const scrollContentNode = this._scrollContentRef.value;
|
|
350
|
+
if (!scrollContentNode) {
|
|
351
|
+
return;
|
|
352
|
+
}
|
|
353
|
+
const [rootA, rootB] = this._indicators || [];
|
|
351
354
|
const { right: boundaryight } = scrollContentNode.getBoundingClientRect();
|
|
352
355
|
const { offsetLeft: scrollerLeft } = tabScroller;
|
|
353
356
|
const {
|
|
@@ -367,6 +370,7 @@ export class BlockquoteTabs extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
367
370
|
|
|
368
371
|
scrollContentNode.scroll({
|
|
369
372
|
left,
|
|
373
|
+
// @ts-ignore
|
|
370
374
|
behavior,
|
|
371
375
|
});
|
|
372
376
|
}
|
package/src/tab/BlockquoteTab.js
CHANGED
|
@@ -2,16 +2,19 @@ import { html, LitElement } from 'lit';
|
|
|
2
2
|
import { BlockquoteMixinSlotContent } from '@blockquote-web-components/blockquote-mixin-slot-content';
|
|
3
3
|
import { styles } from './styles/blockquote-tab-styles.css.js';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* 
|
|
7
|
+
*
|
|
8
|
+
* `<blockquote-tab>`
|
|
9
|
+
* A tab element that can be used inside a `blockquote-tabs` element.
|
|
10
|
+
*
|
|
11
|
+
* @attribute selected
|
|
12
|
+
*/
|
|
5
13
|
export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
|
|
6
|
-
static get is() {
|
|
7
|
-
return 'blockquote-tab';
|
|
8
|
-
}
|
|
9
|
-
|
|
10
14
|
static get properties() {
|
|
11
15
|
return {
|
|
12
16
|
/**
|
|
13
17
|
* Whether or not the tab is `selected`.
|
|
14
|
-
* @type {boolean}
|
|
15
18
|
*/
|
|
16
19
|
selected: {
|
|
17
20
|
type: Boolean,
|
|
@@ -35,7 +38,7 @@ export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
35
38
|
|
|
36
39
|
connectedCallback() {
|
|
37
40
|
super.connectedCallback && super.connectedCallback();
|
|
38
|
-
this.shadowRoot
|
|
41
|
+
this.shadowRoot?.addEventListener('slotchanges', this._onSlotChanges.bind(this));
|
|
39
42
|
|
|
40
43
|
this.__setArrayAttibute(this.globalRootAttributes);
|
|
41
44
|
}
|
|
@@ -67,7 +70,12 @@ export class BlockquoteTab extends BlockquoteMixinSlotContent(LitElement) {
|
|
|
67
70
|
return html`<slot></slot>`;
|
|
68
71
|
}
|
|
69
72
|
|
|
70
|
-
|
|
73
|
+
/**
|
|
74
|
+
* Sets attributes on the element.
|
|
75
|
+
*
|
|
76
|
+
* @param {Record<*, *>} entries
|
|
77
|
+
*/
|
|
78
|
+
__setArrayAttibute(entries = {}) {
|
|
71
79
|
Object.entries(entries).forEach(([key, value]) => {
|
|
72
80
|
this.setAttribute(key, value);
|
|
73
81
|
});
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
import { html, LitElement } from 'lit';
|
|
2
2
|
import { styles } from './styles/blockquote-tabpanel-styles.css.js';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* 
|
|
6
|
+
*
|
|
7
|
+
* `<blockquote-tabpanel>`
|
|
8
|
+
* A tab element that can be used inside a `blockquote-tabs` element.
|
|
9
|
+
*
|
|
10
|
+
* @attribute selected
|
|
11
|
+
*/
|
|
4
12
|
export class BlockquoteTabPanel extends LitElement {
|
|
5
|
-
static get is() {
|
|
6
|
-
return 'blockquote-tabpanel';
|
|
7
|
-
}
|
|
8
|
-
|
|
9
13
|
static get properties() {
|
|
10
14
|
return {
|
|
11
15
|
/**
|
|
12
16
|
* Whether or not the tabpanel is `selected`.
|
|
13
|
-
* @type {boolean}
|
|
14
17
|
*/
|
|
15
18
|
selected: {
|
|
16
19
|
type: Boolean,
|
|
@@ -57,7 +60,12 @@ export class BlockquoteTabPanel extends LitElement {
|
|
|
57
60
|
return html` <slot></slot> `;
|
|
58
61
|
}
|
|
59
62
|
|
|
60
|
-
|
|
63
|
+
/**
|
|
64
|
+
* Sets attributes on the element.
|
|
65
|
+
*
|
|
66
|
+
* @param {Record<*, *>} entries
|
|
67
|
+
*/
|
|
68
|
+
__setArrayAttibute(entries = {}) {
|
|
61
69
|
Object.entries(entries).forEach(([key, value]) => {
|
|
62
70
|
this.setAttribute(key, value);
|
|
63
71
|
});
|