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

WIP: MduiCustomTextArea

Browse Source
This commit is contained in:
CrescentLeaf
2026-01-04 17:39:22 +08:00
parent d4557ca0ae
commit 3bada7c431
4 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/init.ts
View File

@@ -14,7 +14,7 @@ import './ui/chat-elements/chat-text.ts'
import './ui/chat-elements/chat-mention.ts' import './ui/chat-elements/chat-mention.ts'
import './ui/chat-elements/chat-text-container.ts' import './ui/chat-elements/chat-text-container.ts'
import './ui/chat-elements/chat-quote.ts' import './ui/chat-elements/chat-quote.ts'
import './ui/InputElement.ts' import './ui/MduiPatchedTextAreaElement.ts'
import './ui/InnerTextContainerElement.ts' import './ui/InnerTextContainerElement.ts'
import Main from "./ui/Main.tsx" import Main from "./ui/Main.tsx"

4
client/ui/InputElement.ts → client/ui/MduiPatchedTextAreaElement.ts
View File

@@ -1,6 +1,6 @@
import { $ } from "mdui" import { $ } from "mdui"
export default class InputElement extends HTMLElement { export default class MduiPatchedTextAreaElement extends HTMLElement {
static observedAttributes = ['user-id'] static observedAttributes = ['user-id']
declare inputDiv: HTMLDivElement declare inputDiv: HTMLDivElement
constructor() { constructor() {
@@ -55,4 +55,4 @@ export default class InputElement extends HTMLElement {
} }
} }
customElements.define('input-element', InputElement) customElements.define('mdui-patched-textarea', MduiPatchedTextAreaElement)

6
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" 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() == '') {
// 清空缓存的文件 // 清空缓存的文件
} }
@@ -182,10 +182,6 @@ export default function ChatFragment({
marginTop: '3px', marginTop: '3px',
marginBottom: '3px', marginBottom: '3px',
}}> }}>
{
// @ts-ignore
<input-element slot="input" />
}
</mdui-text-field> </mdui-text-field>
<mdui-button-icon slot="end-icon" icon="attach_file" style={{ <mdui-button-icon slot="end-icon" icon="attach_file" style={{
marginRight: '6px', marginRight: '6px',

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

@@ -528,6 +528,11 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
? 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) {
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
: 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>`;
}
/** /**
* @param hasError 是否包含错误提示 * @param hasError 是否包含错误提示
* @param hasHelper 是否含 helper 属性或 helper slot * @param hasHelper 是否含 helper 属性或 helper slot