@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 2.67 kB
JavaScript
import*as ComponentHelpers from"../components/helpers/helpers.js";export class XElement extends HTMLElement{static get observedAttributes(){return["flex","padding","padding-top","padding-bottom","padding-left","padding-right","margin","margin-top","margin-bottom","margin-left","margin-right","overflow","overflow-x","overflow-y","font-size","color","background","background-color","border","border-top","border-bottom","border-left","border-right","max-width","max-height"]}attributeChangedCallback(e,t,s){if("flex"!==e)if(null===s){if(this.style.removeProperty(e),e.startsWith("padding-")||e.startsWith("margin-")||e.startsWith("border-")||e.startsWith("background-")||e.startsWith("overflow-")){const t=e.substring(0,e.indexOf("-")),s=this.getAttribute(t);null!==s&&this.style.setProperty(t,s)}}else this.style.setProperty(e,s);else null===s?this.style.removeProperty("flex"):"initial"===s||"auto"===s||"none"===s||-1!==s.indexOf(" ")?this.style.setProperty("flex",s):this.style.setProperty("flex","0 0 "+s)}}class _XBox extends XElement{constructor(e){super(),this.style.setProperty("display","flex"),this.style.setProperty("flex-direction",e),this.style.setProperty("justify-content","flex-start")}static get observedAttributes(){return super.observedAttributes.concat(["x-start","x-center","x-stretch","x-baseline","justify-content"])}attributeChangedCallback(e,t,s){"x-start"!==e&&"x-center"!==e&&"x-stretch"!==e&&"x-baseline"!==e?super.attributeChangedCallback(e,t,s):null===s?this.style.removeProperty("align-items"):this.style.setProperty("align-items","x-start"===e?"flex-start":e.substr(2))}}class XVBox extends _XBox{constructor(){super("column")}}class XHBox extends _XBox{constructor(){super("row")}}class XCBox extends XElement{constructor(){super(),this.style.setProperty("display","flex"),this.style.setProperty("flex-direction","column"),this.style.setProperty("justify-content","center"),this.style.setProperty("align-items","center")}}class XDiv extends XElement{constructor(){super(),this.style.setProperty("display","block")}}class XSpan extends XElement{constructor(){super(),this.style.setProperty("display","inline")}}class XText extends XElement{constructor(){super(),this.style.setProperty("display","inline"),this.style.setProperty("white-space","pre")}}ComponentHelpers.CustomElements.defineComponent("x-vbox",XVBox),ComponentHelpers.CustomElements.defineComponent("x-hbox",XHBox),ComponentHelpers.CustomElements.defineComponent("x-cbox",XCBox),ComponentHelpers.CustomElements.defineComponent("x-div",XDiv),ComponentHelpers.CustomElements.defineComponent("x-span",XSpan),ComponentHelpers.CustomElements.defineComponent("x-text",XText);