Skip to content

Commit aacb096

Browse files
mrin9mrin9
committed
fixes #907 - provide css part for tab-panel, tab-btn-row, tab-btn, and tab-content
1 parent 7c33b5b commit aacb096

File tree

7 files changed

+47
-34
lines changed

7 files changed

+47
-34
lines changed

‎docs/css-parts.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,13 @@ <h2>CSS Parts</h2>
269269
</td>
270270
</tr>
271271

272+
<tr> <td class="blue" style="border:none">Tab Panels</td></tr>
273+
<tr>
274+
<td class="mono">
275+
tab-panel, tab-btn, tab-btn-row, tab-content
276+
</td>
277+
</tr>
278+
272279
<tr> <td class="blue" style="border:none">Checkboxes/ Toggles</td></tr>
273280
<tr>
274281
<td class="mono">

‎src/components/api-request.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -438,19 +438,19 @@ export default class ApiRequest extends LitElement {
438438
</tag-input>`
439439
: paramSchema.type === 'object'
440440
? html`
441-
<div class="tab-panel col" style="border-width:0 0 1px 0;">
442-
<div class="tab-buttons row" @click="${(e) => {
441+
<div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
442+
<div part="tab-btn-row" class="tab-buttons row" @click="${(e) => {
443443
if (e.target.tagName.toLowerCase() === 'button') {
444444
const newState = { ...this.activeParameterSchemaTabs };
445445
newState[param.name] = e.target.dataset.tab;
446446
this.activeParameterSchemaTabs = newState;
447447
}
448448
}}">
449-
<button class="tab-btn ${this.activeParameterSchemaTabs[param.name] === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
450-
<button class="tab-btn ${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
449+
<button part="tab-btn" class="tab-btn ${this.activeParameterSchemaTabs[param.name] === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
450+
<button part="tab-btn" class="tab-btn ${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
451451
</div>
452452
453-
${html`<div class="tab-content col" data-tab = 'example' style="display:${this.activeParameterSchemaTabs[param.name] === 'example' ? 'block' : 'none'}; padding-left:5px; width:100%">
453+
${html`<div part="tab-content" class="tab-content col" data-tab = 'example' style="display:${this.activeParameterSchemaTabs[param.name] === 'example' ? 'block' : 'none'}; padding-left:5px; width:100%">
454454
<textarea
455455
id = "textarea-request-param-${param.name}"
456456
class = "textarea request-param"
@@ -472,7 +472,7 @@ export default class ApiRequest extends LitElement {
472472
></textarea>
473473
</div>`
474474
}
475-
${html`<div class="tab-content col" data-tab = 'schema' style="display:${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'block' : 'none'}; padding-left:5px; width:100%;">
475+
${html`<div part="tab-content" class="tab-content col" data-tab = 'schema' style="display:${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'block' : 'none'}; padding-left:5px; width:100%;">
476476
<schema-tree
477477
class = 'json'
478478
style = 'display: block'
@@ -790,13 +790,13 @@ export default class ApiRequest extends LitElement {
790790
791791
${(this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text') || this.selectedRequestBodyType.includes('jose'))
792792
? html`
793-
<div class="tab-panel col" style="border-width:0 0 1px 0;">
794-
<div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
795-
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
796-
<button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
793+
<div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
794+
<div part="tab-btn-row" class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
795+
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
796+
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
797797
</div>
798-
${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
799-
${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
798+
${html`<div part="tab-content" class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
799+
${html`<div part="tab-content" class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
800800
</div>`
801801
: html`
802802
${reqBodyFileInputHtml}
@@ -821,7 +821,7 @@ export default class ApiRequest extends LitElement {
821821
);
822822

823823
return html`
824-
<div class="tab-panel row" style="min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
824+
<div part="tab-panel" class="tab-panel row" style="min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
825825
<div style="width:24px; background-color:var(--light-border-color)">
826826
<div class="row" style="flex-direction:row-reverse; width:160px; height:24px; transform:rotate(270deg) translateX(-160px); transform-origin:top left; display:block;" @click="${(e) => {
827827
if (e.target.classList.contains('v-tab-btn')) {
@@ -1055,20 +1055,20 @@ export default class ApiRequest extends LitElement {
10551055
<div style="flex:1"></div>
10561056
<button class="m-btn" part="btn btn-outline btn-clear-response" @click="${this.clearResponseData}">CLEAR RESPONSE</button>
10571057
</div>
1058-
<div class="tab-panel col" style="border-width:0 0 1px 0;">
1059-
<div id="tab_buttons" class="tab-buttons row" @click="${(e) => {
1058+
<div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
1059+
<div id="tab_buttons" part="tab-btn-row" class="tab-buttons row" @click="${(e) => {
10601060
if (e.target.classList.contains('tab-btn') === false) { return; }
10611061
this.activeResponseTab = e.target.dataset.tab;
10621062
}}">
1063-
<button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
1064-
<button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab = 'headers' > RESPONSE HEADERS</button>
1063+
<button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
1064+
<button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab = 'headers' > RESPONSE HEADERS</button>
10651065
${this.showCurlBeforeTry === 'true'
10661066
? ''
1067-
: html`<button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
1067+
: html`<button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
10681068
</div>
10691069
${this.responseIsBlob
10701070
? html`
1071-
<div class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
1071+
<div part="tab-content" class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
10721072
${this.responseBlobType === 'image'
10731073
? html`<img style="max-height:var(--resp-area-height, 400px); object-fit:contain;" class="mar-top-8" src="${ifDefined(this.responseBlobUrl)}"></img>`
10741074
: ''
@@ -1082,12 +1082,12 @@ export default class ApiRequest extends LitElement {
10821082
}
10831083
</div>`
10841084
: html`
1085-
<div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
1085+
<div part="tab-content" class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
10861086
<button class="toolbar-btn" style="position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part="btn btn-fill"> Copy </button>
10871087
<pre style="white-space:pre; min-height:50px; height:var(--resp-area-height, 400px); resize:vertical; overflow:auto">${responseContent}</pre>
10881088
</div>`
10891089
}
1090-
<div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
1090+
<div part="tab-content" class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
10911091
<button class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part="btn btn-fill"> Copy </button>
10921092
<pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>
10931093
</div>

‎src/components/api-response.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -181,21 +181,21 @@ export default class ApiResponse extends LitElement {
181181
${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0
182182
? ''
183183
: html`
184-
<div class="tab-panel col">
185-
<div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
186-
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
187-
<button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
184+
<div part="tab-panel" class="tab-panel col">
185+
<div part="tab-btn-row" class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
186+
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
187+
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
188188
<div style="flex:1"></div>
189189
${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1
190190
? html`<span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>`
191191
: html`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`
192192
}
193193
</div>
194194
${this.activeSchemaTab === 'example'
195-
? html`<div class ='tab-content col' style = 'flex:1;'>
195+
? html`<div part="tab-content" class ='tab-content col' style = 'flex:1;'>
196196
${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
197197
</div>`
198-
: html`<div class ='tab-content col' style = 'flex:1;'>
198+
: html`<div part="tab-content" class ='tab-content col' style = 'flex:1;'>
199199
${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
200200
</div>`
201201
}

‎src/templates/callback-template.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export default function callbackTemplate(callbacks) {
4040
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : 'true'}"
4141
fetch-credentials = "${this.fetchCredentials}"
4242
exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
43+
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
4344
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
4445
anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
4546
> </api-request>
@@ -58,7 +59,8 @@ export default function callbackTemplate(callbacks) {
5859
schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : 'true'}"
5960
schema-hide-write-only = "false"
6061
exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
61-
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
62+
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
63+
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
6264
> </api-response>
6365
</div>
6466
</div>

‎src/templates/code-samples-template.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { copyToClipboard } from '~/utils/common-utils';
77
export default function codeSamplesTemplate(xCodeSamples) {
88
return html`
99
<section class="table-title" style="margin-top:24px;">CODE SAMPLES</div>
10-
<div class="tab-panel col"
10+
<div part="tab-panel" class="tab-panel col"
1111
@click="${
1212
(e) => {
1313
if (!e.target.classList.contains('tab-btn')) { return; }
@@ -19,8 +19,8 @@ export default function codeSamplesTemplate(xCodeSamples) {
1919
tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });
2020
}
2121
}">
22-
<div class="tab-buttons row" style="width:100; overflow">
23-
${xCodeSamples.map((v, i) => html`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
22+
<div part="tab-btn-row" class="tab-buttons row" style="width:100; overflow">
23+
${xCodeSamples.map((v, i) => html`<button part="tab-btn" class="tab-btn ${i === 0 ? 'active' : ''}" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
2424
</div>
2525
${xCodeSamples.map((v, i) => html`
2626
<div class="tab-content m-markdown" style= "display:${i === 0 ? 'block' : 'none'}" data-tab = '${v.lang}${i}'>

‎src/templates/endpoint-template.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ function endpointBodyTemplate(path) {
155155
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
156156
fetch-credentials = "${this.fetchCredentials}"
157157
exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
158+
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
158159
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
159160
anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
160161
> </api-request>
@@ -177,8 +178,9 @@ function endpointBodyTemplate(path) {
177178
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
178179
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
179180
exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input,
180-
textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
181-
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
181+
textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp,
182+
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
183+
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
182184
> </api-response>
183185
</div>
184186
</div>`;

‎src/templates/expanded-endpoint-template.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
143143
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
144144
fetch-credentials = "${this.fetchCredentials}"
145145
exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
146+
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
146147
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
147148
anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
148149
> </api-request>
@@ -164,7 +165,8 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
164165
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
165166
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
166167
exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy,
167-
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
168+
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
169+
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
168170
> </api-response>
169171
</div>
170172
</div>

0 commit comments

Comments
 (0)