CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(wip): 自定义编辑框

Browse Source
This commit is contained in:
CrescentLeaf
2026-01-04 23:28:09 +08:00
parent 3bada7c431
commit 82de2eff42
4 changed files with 100 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/style.css
View File

@@ -70,4 +70,4 @@ html {
a { a {
color: rgb(var(--mdui-color-primary)); color: rgb(var(--mdui-color-primary));
} }

72
client/ui/MduiPatchedTextAreaElement.ts
View File

@@ -1,8 +1,10 @@
import { $ } from "mdui" import { $ } from "mdui"
export default class MduiPatchedTextAreaElement extends HTMLElement { export default class MduiPatchedTextAreaElement extends HTMLElement {
static observedAttributes = ['user-id'] static observedAttributes = ['value', 'placeholder']
declare inputDiv: HTMLDivElement declare inputDiv?: HTMLDivElement
declare inputPlaceHolderDiv?: HTMLDivElement
declare inputContainerDiv?: HTMLDivElement
constructor() { constructor() {
super() super()
@@ -13,11 +15,51 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
connectedCallback() { connectedCallback() {
const shadow = this.shadowRoot as ShadowRoot const shadow = this.shadowRoot as ShadowRoot
this.inputDiv = new DOMParser().parseFromString(` this.inputContainerDiv = new DOMParser().parseFromString(`
<div contentEditable="true" style="outline: none !important; color: rgb(var(--mdui-color-on-surface-variant)); display: inline-block; word-wrap: break-word; white-space: pre-wrap;"></div> <div style="overflow-y: auto; height: 100%;">
`, 'text/html').body.firstChild as HTMLDivElement <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>
this.inputDiv.contentEditable = 'true' <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', () => { this.inputDiv.addEventListener('blur', () => {
if (this._lastValue !== this.value) { if (this._lastValue !== this.value) {
this._lastValue = this.value || '' this._lastValue = this.value || ''
@@ -31,7 +73,7 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
this.inputDiv.style.width = '100%' this.inputDiv.style.width = '100%'
shadow.appendChild(this.inputDiv) shadow.appendChild(this.inputContainerDiv)
} }
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) { attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
switch (name) { switch (name) {
@@ -39,19 +81,27 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
this.value = newValue || '' this.value = newValue || ''
break break
} }
case 'placeholder': {
this.inputPlaceHolderDiv && (this.inputPlaceHolderDiv.innerText = newValue || '')
break
}
} }
} }
focus() { focus() {
this.inputDiv.focus() this.inputDiv?.focus()
} }
blur() { blur() {
this.inputDiv.blur() this.inputDiv?.blur()
}
checkValidity() {
// TODO: implment this method
return true
} }
get value() { get value() {
return this.inputDiv.textContent return this.inputDiv?.textContent || ''
} }
set value(v) { set value(v) {
this.inputDiv.textContent = v this.inputDiv && (this.inputDiv.textContent = v)
} }
} }

2
client/ui/chat-fragment/ChatFragment.tsx
View File

@@ -160,7 +160,7 @@ export default function ChatFragment({
}} onDrop={(e) => { }} onDrop={(e) => {
// 文件拽入 // 文件拽入
}}> }}>
<mdui-text-field variant="outlined" use-patched-textarea placeholder="(｡･ω･｡)" autosize ref={inputRef} /* max-rows={6} */ onChange={() => { <mdui-text-field variant="outlined" use-patched-textarea placeholder="(｡･ω･｡)" autosize ref={inputRef} max-rows={6} onChange={() => {
if (inputRef.current?.value.trim() == '') { if (inputRef.current?.value.trim() == '') {
// 清空缓存的文件 // 清空缓存的文件
} }

68
mdui_patched/components/text-field/index.js vendored
View File

@@ -398,9 +398,15 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
'is-firefox': navigator.userAgent.includes('Firefox'), 'is-firefox': navigator.userAgent.includes('Firefox'),
...invalidClassNameObj, ...invalidClassNameObj,
}); });
return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${!hasInputSlot ? (this.isTextarea return html`<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${!hasInputSlot ? (
? this.renderTextArea(hasInputSlot) this.getAttribute("use-patched-textarea")
: this.renderInput(hasInputSlot)) : ''} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderSuffix()}${this.renderClearButton(hasClearButton)} ${this.renderTogglePasswordButton(hasTogglePasswordButton)} ${this.renderRightIcon(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`; ? this.renderPatchedTextArea(hasInputSlot)
: (
this.isTextarea
? this.renderTextArea(hasInputSlot)
: this.renderInput(hasInputSlot)
)
) : ''} ${when(hasInputSlot, () => html`<slot name="input" class="input"></slot>`)}</div>${this.renderSuffix()}${this.renderClearButton(hasClearButton)} ${this.renderTogglePasswordButton(hasTogglePasswordButton)} ${this.renderRightIcon(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html`<div part="supporting" class="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
} }
setCustomValidityInternal(message) { setCustomValidityInternal(message) {
this.inputRef.value.setCustomValidity(message); this.inputRef.value.setCustomValidity(message);
@@ -482,54 +488,54 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
} }
renderLabel() { renderLabel() {
return this.label return this.label
? html `<label part="label" class="label">${this.label}</label>` ? html`<label part="label" class="label">${this.label}</label>`
: nothingTemplate; : nothingTemplate;
} }
renderPrefix() { renderPrefix() {
return html `<slot name="icon" part="icon" class="icon">${this.icon return html`<slot name="icon" part="icon" class="icon">${this.icon
? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>` ? html`<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
: nothingTemplate}</slot><slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`; : nothingTemplate}</slot><slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`;
} }
renderSuffix() { renderSuffix() {
return html `<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>`; return html`<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>`;
} }
renderRightIcon(hasErrorIcon) { renderRightIcon(hasErrorIcon) {
return hasErrorIcon return hasErrorIcon
? html `<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon ? html`<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon
? html `<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>` ? html`<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>`
: html `<mdui-icon-error class="i"></mdui-icon-error>`}</slot>` : html`<mdui-icon-error class="i"></mdui-icon-error>`}</slot>`
: html `<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon : html`<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon
? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>` ? html`<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
: nothingTemplate}</slot>`; : nothingTemplate}</slot>`;
} }
renderClearButton(hasClearButton) { renderClearButton(hasClearButton) {
return when(hasClearButton, () => html `<slot name="clear-button" part="clear-button" class="action" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon return when(hasClearButton, () => html`<slot name="clear-button" part="clear-button" class="action" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon
? html `<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>` ? html`<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>`
: html `<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`); : html`<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`);
} }
renderTogglePasswordButton(hasTogglePasswordButton) { renderTogglePasswordButton(hasTogglePasswordButton) {
return when(hasTogglePasswordButton, () => html `<slot name="toggle-password-button" part="toggle-password-button" class="action" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible return when(hasTogglePasswordButton, () => html`<slot name="toggle-password-button" part="toggle-password-button" class="action" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible
? html `<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon ? html`<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon
? html `<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>` ? html`<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>`
: html `<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>` : html`<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>`
: html `<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon : html`<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon
? html `<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>` ? html`<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>`
: html `<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`); : html`<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`);
} }
renderInput(hasInputSlot) { renderInput(hasInputSlot) {
return html `<input ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" type="${this.type === 'password' && this.isPasswordVisible return html`<input ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" type="${this.type === 'password' && this.isPasswordVisible
? 'text' ? 'text'
: this.type}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue : this.type}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
? this.placeholder ? this.placeholder
: undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${this.autocomplete}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`; : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${this.autocomplete}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
} }
renderTextArea(hasInputSlot) { renderTextArea(hasInputSlot) {
return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue return html`<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
? this.placeholder ? this.placeholder
: undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`; : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
} }
renderPatchedTextArea(hasInputSlot) { renderPatchedTextArea(hasInputSlot) {
return html `<mdui-patched-textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue return html`<mdui-patched-textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
? this.placeholder ? this.placeholder
: undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`; : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${this.rows ?? 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
} }
@@ -539,15 +545,15 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
*/ */
renderHelper(hasError, hasHelper) { renderHelper(hasError, hasHelper) {
return hasError return hasError
? html `<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>` ? html`<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>`
: hasHelper : hasHelper
? html `<slot name="helper" part="helper" class="helper">${this.helper}</slot>` ? html`<slot name="helper" part="helper" class="helper">${this.helper}</slot>`
: // 右边有 counter，需要占位 : // 右边有 counter，需要占位
html `<span></span>`; html`<span></span>`;
} }
renderCounter(hasCounter) { renderCounter(hasCounter) {
return hasCounter return hasCounter
? html `<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>` ? html`<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>`
: nothingTemplate; : nothingTemplate;
} }
}; };