61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { attribute, Component, WebElement, cls, html } from '..';
|
|
@Component('butt-on')
|
|
export default class Button extends WebElement {
|
|
@attribute('boolean')
|
|
public block?: boolean;
|
|
@attribute()
|
|
public iconLeft?: any;
|
|
@attribute()
|
|
public iconRight?: any;
|
|
@attribute('boolean')
|
|
public outline?: boolean;
|
|
@attribute('boolean')
|
|
public outlineR?: boolean;
|
|
@attribute('boolean')
|
|
public outlineG?: boolean;
|
|
@attribute('boolean')
|
|
public ghost?: boolean;
|
|
@attribute('boolean')
|
|
public disabled?: boolean | undefined;
|
|
@attribute()
|
|
public name?: string;
|
|
@attribute()
|
|
public value?: string;
|
|
@attribute()
|
|
public tag?: string;
|
|
@attribute()
|
|
public enctype?: string;
|
|
@attribute()
|
|
public class?: string;
|
|
@attribute()
|
|
public href?: string;
|
|
public override async render() {
|
|
const classes = [
|
|
'button',
|
|
'no-link-style',
|
|
'focus:ring',
|
|
{ 'w-full': this.block },
|
|
{ outline: this.outline },
|
|
{ outlineR: this.outlineR && !this.disabled },
|
|
{ outlineG: this.outlineG && !this.disabled },
|
|
{ ghost: this.ghost },
|
|
{ disabled: this.disabled },
|
|
this.class,
|
|
];
|
|
const tag = this.tag ?? this.href ? 'a' : 'button';
|
|
return html `
|
|
<${tag} ${{ ...this.getProps() }} class="${cls(classes)}">
|
|
${this.iconLeft}
|
|
<slot />
|
|
${this.iconRight}
|
|
</${tag}>
|
|
`;
|
|
}
|
|
private onClick = () => {
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
console.log('Button clicked');
|
|
};
|
|
}
|