@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
36 lines (34 loc) • 2.34 kB
JavaScript
import*as EmulationModel from"../../../models/emulation/emulation.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as UILegacy from"../../../ui/legacy/legacy.js";class SizeChangedEvent extends Event{size;static eventName="sizechanged";constructor(e){super(SizeChangedEvent.eventName),this.size=e}}function getInputValue(e){return Number(e.target.value)}export class SizeInputElement extends HTMLElement{#e=this.attachShadow({mode:"open"});#t=!1;#i="0";#n="";#l;static litTagName=LitHtml.literal`device-mode-emulation-size-input`;constructor(e){super(),this.#l=e}connectedCallback(){this.render()}set disabled(e){this.#t=e,this.render()}set size(e){this.#i=e,this.render()}set placeholder(e){this.#n=e,this.render()}render(){LitHtml.render(LitHtml.html`
<style>
input {
/*
* 4 characters for the maximum size of the value,
* 2 characters for the width of the step-buttons,
* 2 pixels padding between the characters and the
* step-buttons.
*/
width: calc(4ch + 2ch + 2px);
max-height: 18px;
margin: 0 2px;
text-align: center;
font-size: inherit;
font-family: inherit;
}
input:disabled {
user-select: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
</style>
<input type="number"
max=${EmulationModel.DeviceModeModel.MaxDeviceSize}
min=${EmulationModel.DeviceModeModel.MinDeviceSize}
maxlength="4"
title=${this.#l}
placeholder=${this.#n}
?disabled=${this.#t}
.value=${this.#i}
@change=${this.#a}
@keydown=${this.#s} />
`,this.#e,{host:this})}#a(e){this.dispatchEvent(new SizeChangedEvent(getInputValue(e)))}#s(e){let t=UILegacy.UIUtils.modifiedFloatNumber(getInputValue(e),e);null!==t&&(t=Math.min(t,EmulationModel.DeviceModeModel.MaxDeviceSize),t=Math.max(t,EmulationModel.DeviceModeModel.MinDeviceSize),e.preventDefault(),e.target.value=String(t),this.dispatchEvent(new SizeChangedEvent(t)))}}ComponentHelpers.CustomElements.defineComponent("device-mode-emulation-size-input",SizeInputElement);