web-component-stencil-test
Version:
Stencil Component Starter
413 lines (412 loc) • 13.9 kB
JavaScript
import { h, Host } from "@stencil/core";
import { COLUMNS } from '../grid/constants';
export class GridCol {
constructor() {
/**
* Number of columns - As it's mobile first, that's the default size.
*/
this.col = 0;
/**
*Number of columns - S
*/
this.colS = 0;
/**
*Number of columns - M
*/
this.colM = 0;
/**
*Number of columns - L
*/
this.colL = 0;
/**
*Number of columns - XL
*/
this.colXL = 0;
/**
* Offset
*/
this.offset = 0;
/**
* Offset - S
*/
this.offsetS = 0;
/**
* Offset - M
*/
this.offsetM = 0;
/**
* Offset - L
*/
this.offsetL = 0;
/**
* Offset - XL
*/
this.offsetXL = 0;
/**
* Offset right
*/
this.offsetRight = 0;
/**
* Offset right - S
*/
this.offsetRightS = 0;
/**
* Offset right - M
*/
this.offsetRightM = 0;
/**
* Offset right - L
*/
this.offsetRightL = 0;
/**
* Offset right - XL
*/
this.offsetRightXL = 0;
/**
* Is centered
*/
this.isCentered = false;
this.getColClassnames = () => {
const col = this.col;
const colS = this.colS ? this.colS : col;
const colM = this.colM ? this.colM : colS;
const colL = this.colL ? this.colL : colM;
const colXL = this.colXL ? this.colXL : colL;
const colClassname = col ? `col-xs-${col}` : '';
const colSClassname = (colS && colS !== col) || (COLUMNS.S !== COLUMNS.XS) && colS > 0 ? `col-s-${colS}` : '';
const colMClassname = (colM && colM !== colS) || (COLUMNS.M !== COLUMNS.S) && colM > 0 ? `col-m-${colM}` : '';
const colLClassname = (colL && colL !== colM) || (COLUMNS.L !== COLUMNS.M) && colL > 0 ? `col-l-${colL}` : '';
const colXLClassname = (colXL && colXL !== colL) || (COLUMNS.XL !== COLUMNS.L) && colXL > 0 ? `col-xl-${colXL}` : '';
return `${colClassname} ${colSClassname} ${colMClassname} ${colLClassname} ${colXLClassname}`;
};
this.getOffsetClassnames = () => {
// if no offset at all, no need for classes
if (!this.offset && !this.offsetS && !this.offsetM && !this.offsetL && !this.offsetXL)
return '';
const offsetClassname = this.offset > 0 ? `col-offset-xs-${this.offset}` : '';
const offsetSClassname = (this.offsetS !== this.offset) || (COLUMNS.S !== COLUMNS.XS) ? `col-offset-s-${this.offsetS}` : '';
const offsetMClassname = (this.offsetM !== this.offsetS) || (COLUMNS.M !== COLUMNS.S) ? `col-offset-m-${this.offsetM}` : '';
const offsetLClassname = (this.offsetL !== this.offsetM) || (COLUMNS.L !== COLUMNS.M) ? `col-offset-l-${this.offsetL}` : '';
const offsetXLClassname = (this.offsetXL !== this.offsetL) || (COLUMNS.XL !== COLUMNS.L) ? `col-offset-xl-${this.offsetXL}` : '';
return `${offsetClassname} ${offsetSClassname} ${offsetMClassname} ${offsetLClassname} ${offsetXLClassname}`;
};
this.getOffsetRightClassnames = () => {
// if no offset Right at all, no need for classes
if (!this.offsetRight && !this.offsetRightS && !this.offsetRightM && !this.offsetRightL && !this.offsetRightXL)
return '';
const offsetRightClassname = this.offsetRight > 0 ? `col-offset-right-xs-${this.offsetRight}` : '';
const offsetRightSClassname = (this.offsetRightS !== this.offsetRight) || (COLUMNS.S !== COLUMNS.XS) ? `col-offset-right-s-${this.offsetRightS}` : '';
const offsetRightMClassname = (this.offsetRightM !== this.offsetRightS) || (COLUMNS.M !== COLUMNS.S) ? `col-offset-right-m-${this.offsetRightM}` : '';
const offsetRightLClassname = (this.offsetRightL !== this.offsetRightM) || (COLUMNS.L !== COLUMNS.M) ? `col-offset-right-l-${this.offsetRightL}` : '';
const offsetRightXLClassname = (this.offsetRightXL !== this.offsetRightL) || (COLUMNS.XL !== COLUMNS.L) ? `col-offset-right-xl-${this.offsetRightXL}` : '';
return `${offsetRightClassname} ${offsetRightSClassname} ${offsetRightMClassname} ${offsetRightLClassname} ${offsetRightXLClassname}`;
};
}
render() {
const isCentered = this.isCentered ? `grid-col-center` : '';
return h(Host, { class: `grid-col
${isCentered}
${this.getColClassnames()}
${this.getOffsetClassnames()}
${this.getOffsetRightClassnames()}
` },
h("slot", null));
}
static get is() { return "grid-col"; }
static get originalStyleUrls() { return {
"$": ["grid-col.scss"]
}; }
static get styleUrls() { return {
"$": ["grid-col.css"]
}; }
static get properties() { return {
"col": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of columns - As it's mobile first, that's the default size."
},
"attribute": "col",
"reflect": false,
"defaultValue": "0"
},
"colS": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of columns - S"
},
"attribute": "col-s",
"reflect": false,
"defaultValue": "0"
},
"colM": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of columns - M"
},
"attribute": "col-m",
"reflect": false,
"defaultValue": "0"
},
"colL": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of columns - L"
},
"attribute": "col-l",
"reflect": false,
"defaultValue": "0"
},
"colXL": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Number of columns - XL"
},
"attribute": "col-xl",
"reflect": false,
"defaultValue": "0"
},
"offset": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset"
},
"attribute": "offset",
"reflect": false,
"defaultValue": "0"
},
"offsetS": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset - S"
},
"attribute": "offset-s",
"reflect": false,
"defaultValue": "0"
},
"offsetM": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset - M"
},
"attribute": "offset-m",
"reflect": false,
"defaultValue": "0"
},
"offsetL": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset - L"
},
"attribute": "offset-l",
"reflect": false,
"defaultValue": "0"
},
"offsetXL": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset - XL"
},
"attribute": "offset-xl",
"reflect": false,
"defaultValue": "0"
},
"offsetRight": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset right"
},
"attribute": "offset-right",
"reflect": false,
"defaultValue": "0"
},
"offsetRightS": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset right - S"
},
"attribute": "offset-right-s",
"reflect": false,
"defaultValue": "0"
},
"offsetRightM": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset right - M"
},
"attribute": "offset-right-m",
"reflect": false,
"defaultValue": "0"
},
"offsetRightL": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset right - L"
},
"attribute": "offset-right-l",
"reflect": false,
"defaultValue": "0"
},
"offsetRightXL": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Offset right - XL"
},
"attribute": "offset-right-xl",
"reflect": false,
"defaultValue": "0"
},
"isCentered": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is centered"
},
"attribute": "center",
"reflect": false,
"defaultValue": "false"
}
}; }
}