WIP: MduiCustomTextArea

client/init.ts

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

client/ui/MduiPatchedTextAreaElement.ts

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

client/ui/chat-fragment/ChatFragment.tsx

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

mdui_patched/components/text-field/index.js

@@ -528,6 +528,11 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
             ? 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>`;
     }
+    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 hasHelper 是否含 helper 属性或 helper slot