Skip to content

Commit

Permalink
fixes #907 - provide css part for tab-panel, tab-btn-row, tab-btn, an…
Browse files Browse the repository at this point in the history 
…d tab-content
  • Loading branch information
@mrin9
mrin9 committed Oct 3, 2024
1 parent 7c33b5b commit aacb096
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 34 deletions.
7 changes: 7 additions & 0 deletions docs/css-parts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,13 @@ <h2>CSS Parts</h2>
</td>
</tr>

<tr> <td class="blue" style="border:none">Tab Panels</td></tr>
<tr>
<td class="mono">
tab-panel, tab-btn, tab-btn-row, tab-content
</td>
</tr>

<tr> <td class="blue" style="border:none">Checkboxes/ Toggles</td></tr>
<tr>
<td class="mono">
Expand Down
42 changes: 21 additions & 21 deletions src/components/api-request.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -438,19 +438,19 @@ export default class ApiRequest extends LitElement {
</tag-input>`
: paramSchema.type === 'object'
? html`
<div class="tab-panel col" style="border-width:0 0 1px 0;">
<div class="tab-buttons row" @click="${(e) => {
<div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
<div part="tab-btn-row" class="tab-buttons row" @click="${(e) => {
if (e.target.tagName.toLowerCase() === 'button') {
const newState = { ...this.activeParameterSchemaTabs };
newState[param.name] = e.target.dataset.tab;
this.activeParameterSchemaTabs = newState;
}
}}">
<button class="tab-btn ${this.activeParameterSchemaTabs[param.name] === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
<button class="tab-btn ${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
<button part="tab-btn" class="tab-btn ${this.activeParameterSchemaTabs[param.name] === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
<button part="tab-btn" class="tab-btn ${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
</div>
${html`<div class="tab-content col" data-tab = 'example' style="display:${this.activeParameterSchemaTabs[param.name] === 'example' ? 'block' : 'none'}; padding-left:5px; width:100%">
${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%">
<textarea
id = "textarea-request-param-${param.name}"
class = "textarea request-param"
Expand All @@ -472,7 +472,7 @@ export default class ApiRequest extends LitElement {
></textarea>
</div>`
}
${html`<div class="tab-content col" data-tab = 'schema' style="display:${this.activeParameterSchemaTabs[param.name] !== 'example' ? 'block' : 'none'}; padding-left:5px; width:100%;">
${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%;">
<schema-tree
class = 'json'
style = 'display: block'
Expand Down Expand Up @@ -790,13 +790,13 @@ export default class ApiRequest extends LitElement {
${(this.selectedRequestBodyType.includes('json') || this.selectedRequestBodyType.includes('xml') || this.selectedRequestBodyType.includes('text') || this.selectedRequestBodyType.includes('jose'))
? html`
<div class="tab-panel col" style="border-width:0 0 1px 0;">
<div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
<button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
<div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
<div part="tab-btn-row" class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}">
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE</button>
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema'>SCHEMA</button>
</div>
${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
${html`<div class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
${html`<div part="tab-content" class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'block' : 'none'};"> ${reqBodyExampleHtml}</div>`}
${html`<div part="tab-content" class="tab-content col" style="display:${this.activeSchemaTab === 'example' ? 'none' : 'block'};"> ${reqBodySchemaHtml}</div>`}
</div>`
: html`
${reqBodyFileInputHtml}
Expand All @@ -821,7 +821,7 @@ export default class ApiRequest extends LitElement {
);

return html`
<div class="tab-panel row" style="min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
<div part="tab-panel" class="tab-panel row" style="min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
<div style="width:24px; background-color:var(--light-border-color)">
<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) => {
if (e.target.classList.contains('v-tab-btn')) {
Expand Down Expand Up @@ -1055,20 +1055,20 @@ export default class ApiRequest extends LitElement {
<div style="flex:1"></div>
<button class="m-btn" part="btn btn-outline btn-clear-response" @click="${this.clearResponseData}">CLEAR RESPONSE</button>
</div>
<div class="tab-panel col" style="border-width:0 0 1px 0;">
<div id="tab_buttons" class="tab-buttons row" @click="${(e) => {
<div part="tab-panel" class="tab-panel col" style="border-width:0 0 1px 0;">
<div id="tab_buttons" part="tab-btn-row" class="tab-buttons row" @click="${(e) => {
if (e.target.classList.contains('tab-btn') === false) { return; }
this.activeResponseTab = e.target.dataset.tab;
}}">
<button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
<button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab = 'headers' > RESPONSE HEADERS</button>
<button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab = 'response' > RESPONSE</button>
<button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab = 'headers' > RESPONSE HEADERS</button>
${this.showCurlBeforeTry === 'true'
? ''
: html`<button class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
: html`<button part="tab-btn" class="tab-btn ${this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab = 'curl'>CURL</button>`}
</div>
${this.responseIsBlob
? html`
<div class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
<div part="tab-content" class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
${this.responseBlobType === 'image'
? html`<img style="max-height:var(--resp-area-height, 400px); object-fit:contain;" class="mar-top-8" src="${ifDefined(this.responseBlobUrl)}"></img>`
: ''
Expand All @@ -1082,12 +1082,12 @@ export default class ApiRequest extends LitElement {
}
</div>`
: html`
<div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
<div part="tab-content" class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
<button class="toolbar-btn" style="position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part="btn btn-fill"> Copy </button>
<pre style="white-space:pre; min-height:50px; height:var(--resp-area-height, 400px); resize:vertical; overflow:auto">${responseContent}</pre>
</div>`
}
<div class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
<div part="tab-content" class="tab-content col m-markdown" style="flex:1; display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};" >
<button class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part="btn btn-fill"> Copy </button>
<pre style="white-space:pre"><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/api-response.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,21 +181,21 @@ export default class ApiResponse extends LitElement {
${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0
? ''
: html`
<div class="tab-panel col">
<div class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
<button class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
<button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
<div part="tab-panel" class="tab-panel col">
<div part="tab-btn-row" class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
<button part="tab-btn" class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
<div style="flex:1"></div>
${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1
? html`<span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>`
: html`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`
}
</div>
${this.activeSchemaTab === 'example'
? html`<div class ='tab-content col' style = 'flex:1;'>
? html`<div part="tab-content" class ='tab-content col' style = 'flex:1;'>
${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
</div>`
: html`<div class ='tab-content col' style = 'flex:1;'>
: html`<div part="tab-content" class ='tab-content col' style = 'flex:1;'>
${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
</div>`
}
Expand Down
4 changes: 3 additions & 1 deletion src/templates/callback-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export default function callbackTemplate(callbacks) {
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : 'true'}"
fetch-credentials = "${this.fetchCredentials}"
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,
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
> </api-request>
Expand All @@ -58,7 +59,8 @@ export default function callbackTemplate(callbacks) {
schema-hide-read-only = "${this.schemaHideReadOnly === 'never' ? 'false' : 'true'}"
schema-hide-write-only = "false"
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,
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
> </api-response>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/templates/code-samples-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { copyToClipboard } from '~/utils/common-utils';
export default function codeSamplesTemplate(xCodeSamples) {
return html`
<section class="table-title" style="margin-top:24px;">CODE SAMPLES</div>
<div class="tab-panel col"
<div part="tab-panel" class="tab-panel col"
@click="${
(e) => {
if (!e.target.classList.contains('tab-btn')) { return; }
Expand All @@ -19,8 +19,8 @@ export default function codeSamplesTemplate(xCodeSamples) {
tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });
}
}">
<div class="tab-buttons row" style="width:100; overflow">
${xCodeSamples.map((v, i) => html`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab = '${v.lang}${i}'> ${v.label || v.lang} </button>`)}
<div part="tab-btn-row" class="tab-buttons row" style="width:100; overflow">
${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>`)}
</div>
${xCodeSamples.map((v, i) => html`
<div class="tab-content m-markdown" style= "display:${i === 0 ? 'block' : 'none'}" data-tab = '${v.lang}${i}'>
Expand Down
6 changes: 4 additions & 2 deletions src/templates/endpoint-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ function endpointBodyTemplate(path) {
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
fetch-credentials = "${this.fetchCredentials}"
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,
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
> </api-request>
Expand All @@ -177,8 +178,9 @@ function endpointBodyTemplate(path) {
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input,
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,
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
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,
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
> </api-response>
</div>
</div>`;
Expand Down
4 changes: 3 additions & 1 deletion src/templates/expanded-endpoint-template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'true' : 'false'}"
fetch-credentials = "${this.fetchCredentials}"
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,
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
> </api-request>
Expand All @@ -164,7 +165,8 @@ export function expandedEndpointBodyTemplate(path, tagName = '', tagDescription
schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : path.isWebhook ? 'false' : 'true'}"
selected-status = "${Object.keys(path.responses || {})[0] || ''}"
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,
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
tab-panel:tab-panel, tab-btn:tab-btn, tab-btn-row:tab-btn-row, tab-coontent:tab-content,
schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
> </api-response>
</div>
</div>
Expand Down

0 comments on commit aacb096

Please sign in to comment.