109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import { $ } from "mdui"
|
|
|
|
export default class MduiPatchedTextAreaElement extends HTMLElement {
|
|
static observedAttributes = ['value', 'placeholder']
|
|
declare inputDiv?: HTMLDivElement
|
|
declare inputPlaceHolderDiv?: HTMLDivElement
|
|
declare inputContainerDiv?: HTMLDivElement
|
|
constructor() {
|
|
super()
|
|
|
|
this.attachShadow({ mode: 'open' })
|
|
}
|
|
|
|
_lastValue = ''
|
|
connectedCallback() {
|
|
const shadow = this.shadowRoot as ShadowRoot
|
|
|
|
this.inputContainerDiv = new DOMParser().parseFromString(`
|
|
<div style="overflow-y: auto; height: 100%;">
|
|
<div role="textbox" aria-multiline="true" aria-labelledby="txtboxMultilineLabel" contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-break: break-word; white-space: pre-wrap;"></div>
|
|
<div style="display: none;"></div>
|
|
<style>
|
|
*::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 10px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
width: 6px;
|
|
background: rgba(#101f1c, 0.1);
|
|
-webkit-border-radius: 2em;
|
|
-moz-border-radius: 2em;
|
|
border-radius: 2em;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: rgba(144, 147, 153, 0.5);
|
|
background-clip: padding-box;
|
|
min-height: 28px;
|
|
-webkit-border-radius: 2em;
|
|
-moz-border-radius: 2em;
|
|
border-radius: 2em;
|
|
transition: background-color 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(144, 147, 153, 0.3);
|
|
}
|
|
</style>
|
|
</div>
|
|
`, 'text/html').body.firstChild as HTMLDivElement
|
|
|
|
console.log(this.inputContainerDiv.children)
|
|
this.inputDiv = this.inputContainerDiv.children[0] as HTMLDivElement
|
|
this.inputPlaceHolderDiv = this.inputContainerDiv.children[1] as HTMLDivElement
|
|
|
|
this.inputDiv.addEventListener('input', () => {
|
|
// TODO: 修复 placeholder
|
|
this.inputPlaceHolderDiv!.style.display = this.value == '' ? '' : 'none'
|
|
this.inputDiv!.style.display = this.value == '' ? 'none' : ''
|
|
})
|
|
this.inputDiv.addEventListener('blur', () => {
|
|
if (this._lastValue !== this.value) {
|
|
this._lastValue = this.value || ''
|
|
this.dispatchEvent(new Event('change', { bubbles: true }))
|
|
}
|
|
})
|
|
this.inputDiv.addEventListener('paste', (e: ClipboardEvent) => {
|
|
e.preventDefault()
|
|
document.execCommand('insertText', false, e.clipboardData?.getData("text/plain") || '')
|
|
})
|
|
|
|
this.inputDiv.style.width = '100%'
|
|
|
|
shadow.appendChild(this.inputContainerDiv)
|
|
}
|
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
|
switch (name) {
|
|
case 'value': {
|
|
this.value = newValue || ''
|
|
break
|
|
}
|
|
case 'placeholder': {
|
|
this.inputPlaceHolderDiv && (this.inputPlaceHolderDiv.innerText = newValue || '')
|
|
break
|
|
}
|
|
}
|
|
}
|
|
focus() {
|
|
this.inputDiv?.focus()
|
|
}
|
|
blur() {
|
|
this.inputDiv?.blur()
|
|
}
|
|
checkValidity() {
|
|
// TODO: implment this method
|
|
return true
|
|
}
|
|
get value() {
|
|
return this.inputDiv?.textContent || ''
|
|
}
|
|
set value(v) {
|
|
this.inputDiv && (this.inputDiv.textContent = v)
|
|
}
|
|
}
|
|
|
|
customElements.define('mdui-patched-textarea', MduiPatchedTextAreaElement)
|