bulmil
Version:
179 lines (178 loc) • 5.28 kB
JavaScript
import { Component, Prop, h } from '@stencil/core';
export class Field {
constructor() {
/**
* Has addons
*/
this.hasAddons = false;
/**
* Horizontal field
*/
this.isHorizontal = false;
/**
* Grouped field
*/
this.isGrouped = false;
/**
* Grouped, on multiline
*/
this.isGroupedMultiline = false;
}
render() {
const fieldClass = {
field: true,
'has-addons': this.hasAddons,
'is-horizontal': this.isHorizontal,
'is-grouped': this.isGrouped,
'is-grouped-multiline': this.isGroupedMultiline,
};
if (this.isHorizontal) {
return (h("div", { class: fieldClass },
h("div", { class: `field-label ${this.size || ''}` },
h("label", { class: "label" }, this.label)),
h("div", { class: "field-body" },
h("div", { class: "field" },
h("slot", null)))));
}
else {
return (h("div", { class: fieldClass },
h("label", { class: "label" }, this.label),
h("slot", null),
this.message && (h("p", { class: {
help: true,
} }, this.message))));
}
}
static get is() { return "bm-field"; }
static get originalStyleUrls() { return {
"$": ["field.scss"]
}; }
static get styleUrls() { return {
"$": ["field.css"]
}; }
static get properties() { return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label"
},
"attribute": "label",
"reflect": false
},
"message": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Help or error message"
},
"attribute": "message",
"reflect": false
},
"hasAddons": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Has addons"
},
"attribute": "has-addons",
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'is-small' | 'is-normal' | 'is-medium' | 'is-large'",
"resolved": "\"is-large\" | \"is-medium\" | \"is-normal\" | \"is-small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Field size"
},
"attribute": "size",
"reflect": false
},
"isHorizontal": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Horizontal field"
},
"attribute": "is-horizontal",
"reflect": false,
"defaultValue": "false"
},
"isGrouped": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Grouped field"
},
"attribute": "is-grouped",
"reflect": false,
"defaultValue": "false"
},
"isGroupedMultiline": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Grouped, on multiline"
},
"attribute": "is-grouped-multiline",
"reflect": false,
"defaultValue": "false"
}
}; }
}