97 lines
2 KiB
JavaScript
97 lines
2 KiB
JavaScript
const { LitElement, html, css } = require('lit')
|
|
|
|
class EditBox extends LitElement {
|
|
static get styles () {
|
|
return css`
|
|
.edit-container {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 20px;
|
|
background: black;
|
|
border: 1px solid grey;
|
|
}
|
|
|
|
.edit-container:hover,
|
|
.edit-container:focus-within {
|
|
border-color: white;
|
|
}
|
|
|
|
.edit-container label {
|
|
position: absolute;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
bottom: 21px;
|
|
left: 0;
|
|
font-size: 10px;
|
|
color: rgb(206, 206, 206);
|
|
text-shadow: 1px 1px black;
|
|
}
|
|
|
|
.edit-box {
|
|
position: relative;
|
|
outline: none;
|
|
border: none;
|
|
background: none;
|
|
left: 1px;
|
|
width: calc(100% - 2px);
|
|
height: 100%;
|
|
font-family: minecraft, mojangles, monospace;
|
|
font-size: 10px;
|
|
color: white;
|
|
text-shadow: 1px 1px #222;
|
|
}
|
|
`
|
|
}
|
|
|
|
constructor () {
|
|
super()
|
|
this.width = '200px'
|
|
this.id = ''
|
|
this.value = ''
|
|
this.label = ''
|
|
}
|
|
|
|
static get properties () {
|
|
return {
|
|
width: {
|
|
type: String,
|
|
attribute: 'pmui-width'
|
|
},
|
|
id: {
|
|
type: String,
|
|
attribute: 'pmui-id'
|
|
},
|
|
label: {
|
|
type: String,
|
|
attribute: 'pmui-label'
|
|
},
|
|
value: {
|
|
type: String,
|
|
attribute: 'pmui-value'
|
|
}
|
|
}
|
|
}
|
|
|
|
render () {
|
|
return html`
|
|
<div
|
|
class="edit-container"
|
|
style="width: ${this.width};"
|
|
>
|
|
<label for="${this.id}">${this.label}</label>
|
|
<input
|
|
id="${this.id}"
|
|
type="text"
|
|
name=""
|
|
spellcheck="false"
|
|
required=""
|
|
autocomplete="off"
|
|
value="${this.value}"
|
|
@input=${(e) => { this.value = e.target.value }}
|
|
class="edit-box">
|
|
</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
window.customElements.define('pmui-editbox', EditBox)
|