@bulmil/core
Version:
234 lines (233 loc) • 8.49 kB
JavaScript
/*!
* Bulmil - MIT License
*/
import { h } from "@stencil/core";
export class FileInput {
constructor() {
this.handleFileChange = (event) => {
this.file = event.target.files[0];
};
this.name = '';
this.placeholder = 'Choose a file…';
this.color = undefined;
this.size = undefined;
this.alignment = undefined;
this.hasName = false;
this.isRight = false;
this.isFullwidth = false;
this.file = undefined;
this.isBoxed = false;
}
get fileName() {
return this.file && this.file.name;
}
get displayName() {
return this.hasName && Boolean(this.fileName);
}
render() {
return (h("div", { key: 'f3eec4d9b6fc133c7da3d944d2cfde2eef933372', class: {
file: true,
[this.size]: Boolean(this.size),
[this.color]: Boolean(this.color),
[this.alignment]: Boolean(this.alignment),
'has-name': this.displayName,
'is-right': this.isRight,
'is-fullwidth': this.isFullwidth,
'is-boxed': this.isBoxed,
} }, h("label", { key: 'fbdbda44685cc706db00e8cd806ab1571f4fbbaf', class: "file-label" }, h("input", { key: '852e6564788eb78cf7ee353c3fca5301406ea34e', onChange: this.handleFileChange, class: "file-input", type: "file", name: this.name }), h("span", { key: 'fd1a527e1e4c344b30bec5bf6c992463f7e55065', class: "file-cta" }, h("span", { key: 'c11e986c682b3e64bba5d9ff322f0b1b52abfe04', class: "file-icon" }, h("i", { key: '33e7d7c2465ac660100395afcc777347e55366be', class: "fas fa-upload" })), h("span", { key: 'a53ebd921892faf1b7ceb6787ff4101db39564aa', class: "file-label" }, this.placeholder)), this.displayName && h("span", { key: 'a69e9d84777680645cde26581f4950961a12e307', class: "file-name" }, this.fileName))));
}
static get is() { return "bm-file"; }
static get originalStyleUrls() {
return {
"$": ["file.scss"]
};
}
static get styleUrls() {
return {
"$": ["file.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name"
},
"attribute": "name",
"reflect": false,
"defaultValue": "''"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Placeholder"
},
"attribute": "placeholder",
"reflect": false,
"defaultValue": "'Choose a file\u2026'"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "| 'is-white'\n | 'is-black'\n | 'is-light'\n | 'is-dark'\n | 'is-primary'\n | 'is-link'\n | 'is-info'\n | 'is-success'\n | 'is-warning'\n | 'is-danger'",
"resolved": "\"is-black\" | \"is-danger\" | \"is-dark\" | \"is-info\" | \"is-light\" | \"is-link\" | \"is-primary\" | \"is-success\" | \"is-warning\" | \"is-white\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Color"
},
"attribute": "color",
"reflect": false
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'is-small' | 'is-medium' | 'is-large'",
"resolved": "\"is-large\" | \"is-medium\" | \"is-small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Size"
},
"attribute": "size",
"reflect": false
},
"alignment": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'is-centered' | 'is-right'",
"resolved": "\"is-centered\" | \"is-right\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Alignment"
},
"attribute": "alignment",
"reflect": false
},
"hasName": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Add a placeholder for the selected file name"
},
"attribute": "has-name",
"reflect": false,
"defaultValue": "false"
},
"isRight": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Move the CTA to the right side"
},
"attribute": "is-right",
"reflect": false,
"defaultValue": "false"
},
"isFullwidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Expand the name to fill up the space"
},
"attribute": "is-fullwidth",
"reflect": false,
"defaultValue": "false"
},
"file": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "File",
"resolved": "File",
"references": {
"File": {
"location": "global",
"id": "global::File"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "File"
}
},
"isBoxed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Boxed block"
},
"attribute": "is-boxed",
"reflect": false,
"defaultValue": "false"
}
};
}
}