Update

components/BMd3TextField.tsx

@@ -0,0 +1,146 @@
+import { Component, ComponentChildren, ContextType } from "preact";
+import { BCtx } from "./BContext.tsx";
+import { Ref, useRef, useState } from "preact/hooks";
+import type _TextField from "../server/md3/md-outlined-text-field.ts";
+import type { MdOutlinedTextField as _TextFieldE } from "../server/md3/md-outlined-text-field.ts";
+import { MdOutlinedTextField } from "../server/dmodule.ts";
+import List from "preact-material-components/List";
+
+interface TextType {
+    text: string;
+    password: string;
+    number: number;
+}
+
+interface DataType {
+    text: never;
+    password: never;
+    number: number;
+}
+
+type Props<T extends keyof TextType> = {
+    /**@default {true} */
+    clear_cache?: boolean;
+    label?: string;
+    description?: string;
+    value?: TextType[T];
+    name?: string;
+    type: T;
+    disabled?: boolean;
+    children?: ComponentChildren;
+    set_value?: (v?: TextType[T]) => void;
+    min?: DataType[T];
+    max?: DataType[T];
+    id?: string;
+    list?: string;
+    datalist?: { value: TextType[T]; label?: string }[];
+};
+
+export default class BMd3TextField<T extends keyof TextType>
+    extends Component<Props<T>, unknown> {
+    static contextType = BCtx;
+    ref: Ref<typeof _TextField | null> | undefined;
+    declare context: ContextType<typeof BCtx>;
+    get clear_cache() {
+        return this.props.clear_cache !== undefined
+            ? this.props.clear_cache
+            : true;
+    }
+    get_value(e: _TextFieldE): TextType[T] | undefined {
+        const type = this.props.type;
+        if (!e.value.length) return undefined;
+        // @ts-ignore Checked
+        if (type === "text" || type === "password") return e.value;
+        // @ts-ignore Checked
+        return e.valueAsNumber;
+    }
+    render() {
+        this.ref = useRef(null);
+        if (!MdOutlinedTextField.value) return null;
+        let datalist_div = null;
+        const [display_datalist, set_display_datalist] = useState(false);
+        let cn = "b-text-field md3 text";
+        if (this.props.label) cn += " label";
+        if (this.props.datalist && this.props.datalist.length) {
+            cn += " datalist";
+            let cn2 = "datalist";
+            if (display_datalist) cn2 += " open";
+            const v = this.props.value?.toString();
+            datalist_div = (
+                <List class={cn2}>
+                    {this.props.datalist.map((d) => {
+                        if (v !== undefined) {
+                            if (!d.value.toString().startsWith(v)) return null;
+                        }
+                        let label_div = null;
+                        if (d.label) {
+                            label_div = <div class="label">{d.label}</div>;
+                        }
+                        return (
+                            <List.Item
+                                onMousedown={() => {
+                                    this.set_value(d.value);
+                                }}
+                            >
+                                <div class="value">{d.value}</div>
+                                {label_div}
+                            </List.Item>
+                        );
+                    })}
+                </List>
+            );
+        }
+        const TextField = MdOutlinedTextField.value;
+        let desc = null;
+        if (this.props.description) {
+            desc = <label>{this.props.description}</label>;
+        }
+        let value: string | undefined;
+        if (this.props.value !== undefined) {
+            if (typeof this.props.value === "string") {
+                value = this.props.value;
+            } else {
+                value = this.props.value.toString();
+            }
+        } else if (this.clear_cache) {
+            value = "";
+        }
+        return (
+            <div class={cn} id={this.props.id}>
+                {desc}
+                <TextField
+                    /**@ts-ignore */
+                    ref={this.ref}
+                    value={value}
+                    type={this.props.type}
+                    label={this.props.label}
+                    disabled={this.props.disabled}
+                    min={this.props.min ? this.props.min.toString() : undefined}
+                    max={this.props.max ? this.props.max.toString() : undefined}
+                    list={this.props.list}
+                    /**@ts-ignore */
+                    onInput={(ev: InputEvent) => {
+                        if (ev.target) {
+                            const e = ev.target as _TextFieldE;
+                            this.set_value(this.get_value(e));
+                        }
+                    }}
+                    onFocus={() => set_display_datalist(true)}
+                    onBlur={() => set_display_datalist(false)}
+                />
+                {datalist_div}
+                {this.props.children}
+            </div>
+        );
+    }
+    set_value(value?: TextType[T]) {
+        if (this.props.set_value) {
+            this.props.set_value(value);
+        } else if (this.context) {
+            this.context.set_value((v) => {
+                v[this.props.name || ""] = value;
+                return v;
+            });
+        }
+    }
+}

components/CreateRootUser.tsx

@@ -1,6 +1,8 @@
 import { Component, ContextType } from "preact";
 import { GlobalCtx } from "./GlobalContext.tsx";
-import { MdOutlinedTextField } from "../server/dmodule.ts";
+import BMd3TextField from "./BMd3TextField.tsx";
+import t from "../server/i18n.ts";
+import { useState } from "preact/hooks";
 
 type Props = {
     show: boolean;
@@ -10,12 +12,17 @@ export default class CreateRootUser extends Component<Props> {
     static contextType = GlobalCtx;
     declare context: ContextType<typeof GlobalCtx>;
     render() {
-        if (!MdOutlinedTextField.value) return null;
         if (!this.props.show) return null;
-        const OutlinedTextField = MdOutlinedTextField.value;
+        const [username, set_username] = useState<string>();
+        console.log(username);
         return (
             <div>
-                <OutlinedTextField />
+                <BMd3TextField
+                    label={t("user.username")}
+                    type="text"
+                    value={username}
+                    set_value={set_username}
+                />
             </div>
         );
     }