web-component-stencil-test
Version:
Stencil Component Starter
186 lines (185 loc) • 6.07 kB
JavaScript
import { h, Host } from "@stencil/core";
// import styles from './grid-row.scss';
export class GridRow {
constructor() {
/**
*Justify content
*/
this.justifyContent = '';
/**
* Align Items
*/
this.alignItems = '';
/**
* Is centered
*/
this.isCentered = false;
/**
* Is centered on the x axis
*/
this.isXCentered = false;
/**
* Is centered on the y axis
*/
this.isYCentered = false;
/**
* Is reversed
*/
this.isReversed = false;
}
validateJustifyContent(newValue) {
const classnames = ['initial', 'start', 'end', 'flex-start', 'flex-end', 'baseline', 'left', 'right', 'center', 'safe', 'stretch', 'space-around', 'space-between', 'space-evenly', 'center-only-mobile'];
const justifyContentIsValidate = classnames.indexOf(newValue) > -1;
if (!justifyContentIsValidate && newValue.length) {
console.info('justify-content: not a valid value');
}
}
validateAlignItems(newValue) {
const classnames = ['initial', 'start', 'end', 'flex-start', 'flex-end', 'baseline', 'left', 'right', 'center', 'safe', 'stretch', 'space-around', 'space-between', 'space-evenly'];
const alignItemsIsValidate = classnames.indexOf(newValue) > -1;
if (!alignItemsIsValidate && newValue.length) {
console.info('align-items: not a valid value');
}
}
render() {
const justifyContent = this.justifyContent ? `jc-${this.justifyContent}` : '';
const alignItems = this.alignItems ? `ai-${this.alignItems}` : '';
const isCentered = this.isCentered ? `grid-row-center` : '';
const isXCentered = this.isXCentered ? `x-center` : '';
const isYCentered = this.isYCentered ? `y-center` : '';
const isReversed = this.isReversed ? `grid-row-reverse` : '';
return h(Host, { class: `grid-row
${justifyContent}
${alignItems}
${isCentered}
${isXCentered}
${isYCentered}
${isReversed}
` },
h("slot", null));
}
static get is() { return "grid-row"; }
static get originalStyleUrls() { return {
"$": ["grid-row.scss"]
}; }
static get styleUrls() { return {
"$": ["grid-row.css"]
}; }
static get properties() { return {
"justifyContent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Justify content"
},
"attribute": "justify-content",
"reflect": false,
"defaultValue": "''"
},
"alignItems": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Align Items"
},
"attribute": "align-items",
"reflect": false,
"defaultValue": "''"
},
"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"
},
"isXCentered": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is centered on the x axis"
},
"attribute": "x-center",
"reflect": false,
"defaultValue": "false"
},
"isYCentered": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is centered on the y axis"
},
"attribute": "y-center",
"reflect": false,
"defaultValue": "false"
},
"isReversed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Is reversed"
},
"attribute": "reverse",
"reflect": false,
"defaultValue": "false"
}
}; }
static get watchers() { return [{
"propName": "justifyContent",
"methodName": "validateJustifyContent"
}, {
"propName": "alignItems",
"methodName": "validateAlignItems"
}]; }
}