neiam /neiam-devices

import QtQuick 2.15

Item {
    id: field

    property real unit: 16
    property color fg: "#fef3c7"
    property string placeholder
    property alias text: input.text
    property alias echoMode: input.echoMode

    signal accepted()

    height: unit * 2.4

    // Focus requests land on the input, not on this wrapper.
    function forceActiveFocus() { input.forceActiveFocus() }
    onActiveFocusChanged: if (activeFocus) input.forceActiveFocus()

    TextInput {
        id: input
        anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
        horizontalAlignment: TextInput.AlignHCenter
        color: field.fg
        selectionColor: field.fg
        selectedTextColor: "#651d1d"
        font.pixelSize: field.unit * 1.1
        passwordCharacter: "•"
        clip: true
        focus: true
        onAccepted: field.accepted()
    }

    Text {
        anchors.fill: input
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        color: field.fg
        opacity: 0.45
        font: input.font
        text: field.placeholder
        visible: input.text === "" && !input.activeFocus
    }

    Rectangle {
        anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
        height: Math.max(1, field.unit / 12)
        color: field.fg
        opacity: input.activeFocus ? 0.9 : 0.4
    }
}