soft-components
Version:
Simple soft flexible set of web components
389 lines (388 loc) • 10 kB
JavaScript
import { Component, Element, Event, Host, Prop, h, } from '@stencil/core';
/**
* @slot - Content is placed between the named slots if provided without a slot.
*/
export class ScButton {
constructor() {
/**
* If `true`, the user cannot interact with the button.
*/
this.disabled = false;
/**
* Make button `display: block`
*/
this.block = false;
/**
* Icon only button
*/
this.icon = false;
/**
* If prop exists, button will have an engraved-styled border
*/
this.bordered = false;
/**
* The type of the button.
*/
this.type = 'button';
/**
* If this button has both icon and text
*/
this.iconText = false;
/**
* Set active state for the button
*/
this.active = false;
/**
* Make button flat
*/
this.flat = false;
/**
* Make button circle shaped
*/
this.circle = false;
/**
* Use mouse as the light source (ray-tracing)
*/
this.rayTracing = false;
this.onFocus = () => {
this.focusEvent.emit();
};
this.onBlur = () => {
this.blurEvent.emit();
};
this.onClick = () => {
this.clickEvent.emit();
};
}
render() {
const { type, disabled, rel, target, href, icon, block, bordered, iconText, flat, circle, } = this;
const TagType = href === undefined ? 'button' : 'a';
const attrs = TagType === 'button'
? { type }
: {
download: this.download,
href,
rel,
target,
};
return (h(Host, { "aria-disabled": disabled ? 'true' : null, role: "button", class: {
icon,
block,
bordered,
'icon-text': iconText,
flat,
circle,
disabled,
} },
this.rayTracing && h("sc-ray-tracer", { element: this.el }),
h(TagType, Object.assign({}, attrs, { disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }),
h("span", { class: "button-inner" },
h("slot", { name: "start" }),
h("slot", null),
h("slot", { name: "end" })))));
}
static get is() { return "sc-button"; }
static get originalStyleUrls() { return {
"$": ["sc-button.scss"]
}; }
static get styleUrls() { return {
"$": ["sc-button.css"]
}; }
static get properties() { return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the user cannot interact with the button."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"download": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
},
"attribute": "download",
"reflect": false
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
},
"attribute": "href",
"reflect": false
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
},
"attribute": "rel",
"reflect": false
},
"block": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean | undefined",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Make button `display: block`"
},
"attribute": "block",
"reflect": true,
"defaultValue": "false"
},
"icon": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean | undefined",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Icon only button"
},
"attribute": "icon",
"reflect": true,
"defaultValue": "false"
},
"bordered": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean | undefined",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If prop exists, button will have an engraved-styled border"
},
"attribute": "bordered",
"reflect": true,
"defaultValue": "false"
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
},
"attribute": "target",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The type of the button."
},
"attribute": "type",
"reflect": false,
"defaultValue": "'button'"
},
"iconText": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean | undefined",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If this button has both icon and text"
},
"attribute": "icon-text",
"reflect": false,
"defaultValue": "false"
},
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set active state for the button"
},
"attribute": "active",
"reflect": false,
"defaultValue": "false"
},
"flat": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Make button flat"
},
"attribute": "flat",
"reflect": false,
"defaultValue": "false"
},
"circle": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Make button circle shaped"
},
"attribute": "circle",
"reflect": false,
"defaultValue": "false"
},
"rayTracing": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Use mouse as the light source (ray-tracing)"
},
"attribute": "ray-tracing",
"reflect": false,
"defaultValue": "false"
}
}; }
static get events() { return [{
"method": "focusEvent",
"name": "focusEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the button has focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "blurEvent",
"name": "blurEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the button loses focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "clickEvent",
"name": "clickEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the button is clicked."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}]; }
static get elementRef() { return "el"; }
}