js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
konnorrogers
2024-06-11 17:08:34 -04:00
parent fb33dd7036
commit dbbe580ef1
1 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/copy-button/copy-button.ts
View File

@@ -55,6 +55,18 @@ export default class WaCopyButton extends WebAwesomeElement {
@state() isCopying = false;
@state() status: 'rest' | 'success' | 'error' = 'rest';
private get currentLabel() {
if (this.status === 'success') {
return this.successLabel || this.localize.term('copied');
}
if (this.status === 'error') {
return this.errorLabel || this.localize.term('error');
}
return this.copyLabel || this.localize.term('copy');
}
/** The text value to copy. */
@property() value = '';
@@ -156,13 +168,8 @@ export default class WaCopyButton extends WebAwesomeElement {
}
private async showStatus(status: 'success' | 'error') {
const copyLabel = this.copyLabel || this.localize.term('copy');
const successLabel = this.successLabel || this.localize.term('copied');
const errorLabel = this.errorLabel || this.localize.term('error');
const iconToShow = status === 'success' ? this.successIcon : this.errorIcon;
this.tooltip.content = status === 'success' ? successLabel : errorLabel;
// Show the feedback icon
await animateWithClass(this.copyIcon, 'hide');
this.copyIcon.hidden = true;
@@ -178,50 +185,48 @@ export default class WaCopyButton extends WebAwesomeElement {
this.copyIcon.hidden = false;
await animateWithClass(this.copyIcon, 'show');
this.tooltip.content = copyLabel;
this.isCopying = false;
}, this.feedbackDuration);
}
render() {
const copyLabel = this.copyLabel || this.localize.term('copy');
return html`
<wa-tooltip
class=${classMap({
'copy-button': true,
'copy-button--success': this.status === 'success',
'copy-button--error': this.status === 'error'
})}
content=${copyLabel}
placement=${this.tooltipPlacement}
<button
class="copy-button__button"
part="button"
type="button"
id="copy-button"
?disabled=${this.disabled}
?hoist=${this.hoist}
exportparts="
base:tooltip__base,
base__popup:tooltip__base__popup,
base__arrow:tooltip__base__arrow,
body:tooltip__body
"
@click=${this.handleCopy}
>
<button
class="copy-button__button"
part="button"
type="button"
<slot part="copy-icon" name="copy-icon">
<wa-icon library="system" name="copy" variant="regular"></wa-icon>
</slot>
<slot part="success-icon" name="success-icon" variant="solid" hidden>
<wa-icon library="system" name="check"></wa-icon>
</slot>
<slot part="error-icon" name="error-icon" variant="solid" hidden>
<wa-icon library="system" name="xmark"></wa-icon>
</slot>
<wa-tooltip
class=${classMap({
'copy-button': true,
'copy-button--success': this.status === 'success',
'copy-button--error': this.status === 'error'
})}
for="copy-button"
placement=${this.tooltipPlacement}
?disabled=${this.disabled}
@click=${this.handleCopy}
?hoist=${this.hoist}
exportparts="
base:tooltip__base,
base__popup:tooltip__base__popup,
base__arrow:tooltip__base__arrow,
body:tooltip__body
"
>${this.currentLabel}</wa-tooltip
>
<slot part="copy-icon" name="copy-icon">
<wa-icon library="system" name="copy" variant="regular"></wa-icon>
</slot>
<slot part="success-icon" name="success-icon" variant="solid" hidden>
<wa-icon library="system" name="check"></wa-icon>
</slot>
<slot part="error-icon" name="error-icon" variant="solid" hidden>
<wa-icon library="system" name="xmark"></wa-icon>
</slot>
</button>
</wa-tooltip>
</button>
`;
}
}