zui 0.0.1

data/Components/Builtins/TableView.qml

@@ -0,0 +1,388 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQml.Models
+import "../../Theme"
+
+Rectangle {
+  id: tableRoot
+
+  required property var renderer
+  readonly property var sourceRows: renderer.prop("rows", [])
+  readonly property var requestedColumns: renderer.prop("columns", [])
+  readonly property var effectiveColumns: inferColumns()
+  readonly property real tablePadding: Number(renderer.prop("padding", 0))
+  property var tableModel: null
+
+  function inferColumns() {
+    if (requestedColumns && requestedColumns.length > 0) return requestedColumns
+    if (!sourceRows || sourceRows.length === 0) return []
+    var first = sourceRows[0]
+    if (Array.isArray(first)) {
+      var arrayColumns = []
+      for (var index = 0; index < first.length; index++) arrayColumns.push(String(index + 1))
+      return arrayColumns
+    }
+    if (first !== null && typeof first === "object") return Object.keys(first)
+    return ["Value"]
+  }
+
+  function columnProperty(column, name, fallback) {
+    if (column !== null && typeof column === "object" && !Array.isArray(column)) {
+      var value = column[name]
+      return value === undefined || value === null ? fallback : value
+    }
+    return fallback
+  }
+
+  function columnKey(index) {
+    var column = effectiveColumns[index]
+    if (column !== null && typeof column === "object" && !Array.isArray(column))
+      return String(column.key === undefined ? (column.field === undefined ? index : column.field) : column.key)
+    if (Array.isArray(sourceRows[0])) return index
+    return String(column)
+  }
+
+  function columnLabel(index) {
+    var column = effectiveColumns[index]
+    if (column !== null && typeof column === "object" && !Array.isArray(column))
+      return String(column.label === undefined ? columnKey(index) : column.label)
+    return String(column)
+  }
+
+  function columnWidth(index) {
+    return Number(columnProperty(effectiveColumns[index], "width",
+      renderer.prop("column_width", 160)))
+  }
+
+  function columnAlignment(index) {
+    var name = String(columnProperty(effectiveColumns[index], "alignment", "left"))
+    if (name === "center") return Text.AlignHCenter
+    if (name === "right" || name === "end") return Text.AlignRight
+    return Text.AlignLeft
+  }
+
+  function columnEditable(index) {
+    return renderer.prop("editable", false) === true
+      && columnProperty(effectiveColumns[index], "editable", true) !== false
+  }
+
+  function cellValue(row, column) {
+    if (row < 0 || row >= sourceRows.length) return null
+    var rowData = sourceRows[row]
+    if (Array.isArray(rowData)) return rowData[column]
+    if (rowData !== null && typeof rowData === "object") return rowData[columnKey(column)]
+    return column === 0 ? rowData : null
+  }
+
+  function normalizedRows() {
+    var normalized = []
+    for (var row = 0; row < sourceRows.length; row++) {
+      var item = {}
+      for (var column = 0; column < effectiveColumns.length; column++)
+        item["_c" + column] = cellValue(row, column)
+      normalized.push(item)
+    }
+    return normalized
+  }
+
+  function modelSource() {
+    var source = "import Qt.labs.qmlmodels 1.0\nTableModel {\n"
+    for (var column = 0; column < effectiveColumns.length; column++) {
+      source += "  TableModelColumn { display: \"_c" + column
+        + "\"; edit: \"_c" + column + "\" }\n"
+    }
+    return source + "}"
+  }
+
+  function rebuildModel() {
+    var previous = tableModel
+    tableModel = null
+    if (previous) previous.destroy()
+    if (effectiveColumns.length === 0) return
+    var created = Qt.createQmlObject(modelSource(), tableRoot, "ZuiDynamicTableModel")
+    created.rows = normalizedRows()
+    tableModel = created
+    Qt.callLater(syncSelection)
+  }
+
+  function syncRows() {
+    if (!tableModel) {
+      rebuildModel()
+      return
+    }
+    tableModel.rows = normalizedRows()
+    Qt.callLater(syncSelection)
+  }
+
+  function syncSelection() {
+    if (!tableModel || sourceRows.length === 0 || effectiveColumns.length === 0) return
+    var row = Math.max(0, Math.min(sourceRows.length - 1,
+      Number(renderer.prop("selected_row", 0))))
+    var column = Math.max(0, Math.min(effectiveColumns.length - 1,
+      Number(renderer.prop("selected_column", 0))))
+    tableSelection.setCurrentIndex(tableModel.index(row, column), ItemSelectionModel.ClearAndSelect)
+  }
+
+  function selectionBehaviorValue(value) {
+    var name = String(value || "cells")
+    if (name === "none" || name === "disabled") return TableView.SelectionDisabled
+    if (name === "rows") return TableView.SelectRows
+    if (name === "columns") return TableView.SelectColumns
+    return TableView.SelectCells
+  }
+
+  function selectionModeValue(value) {
+    var name = String(value || "single")
+    if (name === "contiguous") return TableView.ContiguousSelection
+    if (name === "extended" || name === "multiple") return TableView.ExtendedSelection
+    return TableView.SingleSelection
+  }
+
+  function editTriggersValue(value) {
+    if (renderer.prop("editable", false) !== true) return TableView.NoEditTriggers
+    var names = Array.isArray(value) ? value : [value || "double_tap_and_key"]
+    var result = TableView.NoEditTriggers
+    for (var index = 0; index < names.length; index++) {
+      var name = String(names[index])
+      if (name === "single_tap") result |= TableView.SingleTapped
+      if (name === "double_tap" || name === "double_tap_and_key") result |= TableView.DoubleTapped
+      if (name === "selected_tap") result |= TableView.SelectedTapped
+      if (name === "edit_key" || name === "double_tap_and_key") result |= TableView.EditKeyPressed
+      if (name === "any_key") result |= TableView.AnyKeyPressed
+    }
+    return result
+  }
+
+  function cellPayload(row, column, value) {
+    return {
+      row: row,
+      column: column,
+      key: column >= 0 && column < effectiveColumns.length ? columnKey(column) : null,
+      value: value,
+      row_data: row >= 0 && row < sourceRows.length ? sourceRows[row] : null
+    }
+  }
+
+  implicitWidth: Number(renderer.prop("width", 720))
+  implicitHeight: Number(renderer.prop("height", 440))
+  color: renderer.prop("background", Color.background)
+  radius: Number(renderer.prop("radius", Style.cornerRadius))
+  border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+  border.color: renderer.prop("border_color", "transparent")
+  enabled: renderer.prop("enabled", true) !== false
+  clip: renderer.prop("clip", true) !== false
+  Accessible.name: String(renderer.prop("accessible_name", "Table"))
+  Accessible.role: Accessible.Table
+
+  ItemSelectionModel {
+    id: tableSelection
+    model: tableRoot.tableModel
+  }
+
+  Rectangle {
+    id: headerClip
+    x: tableRoot.tablePadding
+    y: tableRoot.tablePadding
+    width: Math.max(0, parent.width - tableRoot.tablePadding * 2)
+    height: renderer.prop("show_header", true) !== false
+      ? Number(renderer.prop("header_height", 42)) : 0
+    visible: height > 0
+    color: renderer.prop("header_background", Color.popups.background)
+    clip: true
+
+    Row {
+      x: -tableControl.contentX
+      height: parent.height
+      Repeater {
+        model: tableRoot.effectiveColumns
+        Rectangle {
+          required property int index
+          width: tableRoot.columnWidth(index)
+          height: headerClip.height
+          color: "transparent"
+          border.width: Style.normalBorderWidth
+          border.color: renderer.prop("grid_color", Qt.rgba(renderer.foreground.r,
+            renderer.foreground.g, renderer.foreground.b, 0.18))
+          Text {
+            anchors.fill: parent
+            anchors.leftMargin: Style.spacing.md
+            anchors.rightMargin: Style.spacing.md
+            text: tableRoot.columnLabel(index)
+            color: renderer.prop("header_foreground", renderer.prop("foreground", renderer.foreground))
+            font.family: String(renderer.prop("font_family", renderer.fontFamily))
+            font.pixelSize: Number(renderer.prop("header_size", Style.font.body))
+            font.bold: true
+            horizontalAlignment: tableRoot.columnAlignment(index)
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+          }
+        }
+      }
+    }
+  }
+
+  TableView {
+    id: tableControl
+    x: tableRoot.tablePadding
+    y: tableRoot.tablePadding + headerClip.height
+    width: Math.max(0, parent.width - tableRoot.tablePadding * 2)
+    height: Math.max(0, parent.height - tableRoot.tablePadding * 2 - headerClip.height)
+    model: tableRoot.tableModel
+    selectionModel: tableSelection
+    selectionBehavior: tableRoot.selectionBehaviorValue(renderer.prop("selection_behavior", "cells"))
+    selectionMode: tableRoot.selectionModeValue(renderer.prop("selection_mode", "single"))
+    editTriggers: tableRoot.editTriggersValue(renderer.prop("edit_triggers", "double_tap_and_key"))
+    alternatingRows: renderer.prop("alternating_rows", true) !== false
+    animate: renderer.prop("animate", true) !== false
+    reuseItems: renderer.prop("reuse_items", true) !== false
+    keyNavigationEnabled: renderer.prop("key_navigation_enabled", true) !== false
+    pointerNavigationEnabled: renderer.prop("pointer_navigation_enabled", true) !== false
+    interactive: renderer.prop("interactive", true) !== false
+    clip: true
+    focus: true
+    rowSpacing: Number(renderer.prop("row_spacing", 1))
+    columnSpacing: Number(renderer.prop("column_spacing", 1))
+    rowHeightProvider: function(row) { return Number(renderer.prop("row_height", 42)) }
+    columnWidthProvider: function(column) { return tableRoot.columnWidth(column) }
+
+    delegate: QQC.ItemDelegate {
+      id: cellDelegate
+      required property int row
+      required property int column
+      required property var model
+      property bool selected: false
+      property bool current: false
+
+      function refreshSelection() {
+        if (!tableRoot.tableModel) {
+          selected = false
+          current = false
+          return
+        }
+        var modelIndex = tableRoot.tableModel.index(row, column)
+        selected = tableSelection.isSelected(modelIndex)
+        current = tableSelection.currentIndex.valid
+          && tableSelection.currentIndex.row === row
+          && tableSelection.currentIndex.column === column
+      }
+
+      text: String(model.display === undefined || model.display === null ? "" : model.display)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      padding: Style.spacing.md
+
+      background: Rectangle {
+        color: cellDelegate.selected
+          ? renderer.prop("selected_background", Color.popups.background)
+          : (tableControl.alternatingRows && cellDelegate.row % 2 === 1
+            ? renderer.prop("alternate_background", renderer.prop("cell_background", "transparent"))
+            : renderer.prop("cell_background", "transparent"))
+        border.width: cellDelegate.current ? Style.normalBorderWidth : 0
+        border.color: renderer.prop("accent", Color.accent)
+      }
+
+      contentItem: Text {
+        text: cellDelegate.text
+        color: cellDelegate.selected
+          ? renderer.prop("selected_foreground", renderer.prop("foreground", renderer.foreground))
+          : renderer.prop("foreground", renderer.foreground)
+        font: cellDelegate.font
+        horizontalAlignment: tableRoot.columnAlignment(cellDelegate.column)
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+      }
+
+      TableView.editDelegate: FocusScope {
+        width: parent.width
+        height: parent.height
+
+        TableView.onCommit: {
+          if (!tableRoot.columnEditable(cellDelegate.column)) return
+          var index = tableRoot.tableModel.index(cellDelegate.row, cellDelegate.column)
+          if (tableRoot.tableModel.setData(index, editor.text, Qt.EditRole)) {
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "edit",
+              tableRoot.cellPayload(cellDelegate.row, cellDelegate.column, editor.text))
+          }
+        }
+
+        QQC.TextField {
+          id: editor
+          anchors.fill: parent
+          text: String(cellDelegate.model.edit === undefined
+            ? cellDelegate.model.display : cellDelegate.model.edit)
+          enabled: tableRoot.columnEditable(cellDelegate.column)
+          focus: true
+          Component.onCompleted: selectAll()
+        }
+      }
+
+      onClicked: {
+        var modelIndex = tableRoot.tableModel.index(row, column)
+        tableSelection.setCurrentIndex(modelIndex, ItemSelectionModel.ClearAndSelect)
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+          "cell_click", tableRoot.cellPayload(row, column, model.display))
+      }
+      onDoubleClicked: {
+        var payload = tableRoot.cellPayload(row, column, model.display)
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "cell_double_click", payload)
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", payload)
+      }
+      Component.onCompleted: refreshSelection()
+      onRowChanged: refreshSelection()
+      onColumnChanged: refreshSelection()
+      Connections {
+        target: tableSelection
+        function onSelectionChanged(selected, deselected) { cellDelegate.refreshSelection() }
+        function onCurrentChanged(current, previous) { cellDelegate.refreshSelection() }
+      }
+    }
+
+    onRowsChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "row_count_change", { value: rows })
+    onColumnsChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "column_count_change", { value: columns })
+    onContentXChanged: {
+      if (moving) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+        "scroll", { x: contentX, y: contentY })
+    }
+    onContentYChanged: {
+      if (moving) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+        "scroll", { x: contentX, y: contentY })
+    }
+    onMovementStarted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "movement_start", { x: contentX, y: contentY })
+    onMovementEnded: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "movement_end", { x: contentX, y: contentY })
+    onActiveFocusChanged: {
+      if (renderer && renderer.bridge)
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+          activeFocus ? "focus" : "blur", {})
+    }
+  }
+
+  Connections {
+    target: tableSelection
+    function onCurrentChanged(current, previous) {
+      if (!current.valid) return
+      var payload = tableRoot.cellPayload(current.row, current.column,
+        tableRoot.cellValue(current.row, current.column))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "current_change", payload)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "selection_change", payload)
+    }
+  }
+
+  Text {
+    anchors.centerIn: tableControl
+    visible: tableRoot.sourceRows.length === 0
+    text: String(renderer.prop("empty_text", "No rows"))
+    color: renderer.prop("muted", Color.muted)
+    font.family: String(renderer.prop("font_family", renderer.fontFamily))
+    font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+  }
+
+  Component.onCompleted: rebuildModel()
+  onEffectiveColumnsChanged: rebuildModel()
+  onSourceRowsChanged: syncRows()
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/TableViewDelegate.qml

@@ -0,0 +1,17 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.ItemDelegate {
+  id: delegateRoot
+  property var renderer: null
+  text: renderer ? String(renderer.prop("text", "")) : ""
+  implicitWidth: Number(renderer ? renderer.prop("width", 160) : 160); implicitHeight: Number(renderer ? renderer.prop("height", 42) : 42)
+  highlighted: renderer && (renderer.prop("selected", false) === true || renderer.prop("current", false) === true)
+  enabled: !renderer || renderer.prop("enabled", true) !== false
+  font.family: renderer ? renderer.prop("font_family", renderer.fontFamily) : ""; font.pixelSize: Number(renderer ? renderer.prop("font_size", Style.font.body) : Style.font.body)
+  background: Rectangle { color: delegateRoot.highlighted ? renderer.prop("selected_background", Color.popups.background) : renderer.prop("background", "transparent"); border.color: renderer.prop("border_color", "transparent") }
+  contentItem: Text { text: delegateRoot.text; opacity: renderer.prop("editing", false) === true ? 0.45 : 1; color: delegateRoot.highlighted ? renderer.prop("selected_foreground", renderer.foreground) : renderer.prop("foreground", renderer.foreground); font: delegateRoot.font; verticalAlignment: Text.AlignVCenter; elide: Text.ElideRight }
+  onClicked: { var payload={row:renderer.prop("row",-1),column:renderer.prop("column",-1),value:renderer.prop("value",null)};renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"click",payload);if(renderer.prop("editing",false)===true)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"edit",payload) }
+  onDoubleClicked: { var payload={row:renderer.prop("row",-1),column:renderer.prop("column",-1),value:renderer.prop("value",null)};renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"double_click",payload);renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"activate",payload) }
+}

data/Components/Builtins/Tabs.qml

@@ -0,0 +1,138 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import "../../Theme"
+
+QQC.Control {
+  id: tabsRoot
+
+  required property var renderer
+  readonly property int pageCount: renderer.node && Array.isArray(renderer.node.children)
+    ? renderer.node.children.length : 0
+  readonly property int requestedIndex: Number(renderer.prop("current_index", 0))
+  readonly property bool barAtBottom: String(renderer.prop("position", "top")) === "bottom"
+  property int currentIndex: 0
+  property bool synchronizing: false
+
+  function boundedIndex(value) {
+    return pageCount === 0 ? -1 : Math.max(0, Math.min(pageCount - 1, Number(value)))
+  }
+
+  function labelAt(index) {
+    var labels = renderer.prop("labels", [])
+    if (Array.isArray(labels) && index < labels.length) {
+      var label = labels[index]
+      return label !== null && typeof label === "object" && label.label !== undefined
+        ? String(label.label) : String(label)
+    }
+    var child = renderer.node.children[index]
+    return child && child.props && child.props.title !== undefined
+      ? String(child.props.title) : "Tab " + String(index + 1)
+  }
+
+  function syncSelection() {
+    var next = boundedIndex(requestedIndex)
+    if (currentIndex === next) return
+    synchronizing = true
+    currentIndex = next
+    synchronizing = false
+  }
+
+  implicitWidth: Number(renderer.prop("width", 640))
+  implicitHeight: Number(renderer.prop("height", 420))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+  LayoutMirroring.childrenInherit: true
+
+  background: Rectangle {
+    color: renderer.prop("content_background", renderer.prop("background", Color.background))
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  contentItem: Item {
+    QQC.TabBar {
+      id: nativeBar
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.top: tabsRoot.barAtBottom ? undefined : parent.top
+      anchors.bottom: tabsRoot.barAtBottom ? parent.bottom : undefined
+      implicitWidth: 0
+      height: Number(renderer.prop("tab_height", 44))
+      currentIndex: tabsRoot.currentIndex
+
+      background: Rectangle {
+        color: renderer.prop("background", Color.background)
+      }
+
+      Repeater {
+        model: tabsRoot.pageCount
+        QQC.TabButton {
+          required property int index
+          width: Number(renderer.prop("tab_width", 0)) > 0
+            ? Number(renderer.prop("tab_width", 0))
+            : Math.max(1, nativeBar.width / Math.max(1, tabsRoot.pageCount))
+          height: nativeBar.height
+          text: tabsRoot.labelAt(index)
+          font.family: String(renderer.prop("font_family", renderer.fontFamily))
+          font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+          contentItem: Text {
+            text: parent.text
+            color: parent.checked ? renderer.prop("accent", Color.accent)
+              : renderer.prop("foreground", renderer.foreground)
+            font: parent.font
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+          }
+          background: Rectangle {
+            property bool selected: parent.checked
+            color: "transparent"
+            Rectangle {
+              anchors.left: parent.left
+              anchors.right: parent.right
+              anchors.bottom: parent.bottom
+              height: parent.selected ? 2 : 0
+              color: renderer.prop("accent", Color.accent)
+            }
+          }
+          onClicked: {
+            tabsRoot.currentIndex = index
+            if (renderer.subscribed("tab_click"))
+              renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                "tab_click", { value: index, label: text })
+          }
+        }
+      }
+    }
+
+    StackLayout {
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.top: tabsRoot.barAtBottom ? parent.top : nativeBar.bottom
+      anchors.bottom: tabsRoot.barAtBottom ? nativeBar.top : parent.bottom
+      currentIndex: tabsRoot.currentIndex
+      Repeater {
+        model: renderer.node.children || []
+        delegate: renderer.layoutChildDelegateComponent
+      }
+    }
+  }
+
+  onRequestedIndexChanged: syncSelection()
+  onPageCountChanged: syncSelection()
+  Component.onCompleted: syncSelection()
+  onCurrentIndexChanged: {
+    if (synchronizing || currentIndex < 0) return
+    if (renderer.subscribed("input"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: currentIndex })
+    if (renderer.subscribed("change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: currentIndex })
+  }
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+}

data/Components/Builtins/Text.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Text {
+  required property var renderer
+      text: String(renderer.prop("text", ""))
+      textFormat: Text.PlainText
+      color: renderer.prop("color", renderer.foreground)
+      font.family: renderer.fontFamily
+      font.pixelSize: {
+        var style = String(renderer.prop("style", "body"))
+        if (style === "heading") return Style.font.heading
+        if (style === "caption") return Style.font.caption
+        return Number(renderer.prop("size", Style.font.body))
+      }
+      font.bold: renderer.prop("bold", false) || String(renderer.prop("style", "body")) === "heading"
+      wrapMode: renderer.prop("wrap", true) ? Text.Wrap : Text.NoWrap
+      width: Number(renderer.prop("width", implicitWidth))
+    }

data/Components/Builtins/TextArea.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.ScrollView {
+  required property var renderer
+      implicitWidth: Number(renderer.prop("width", 320))
+      implicitHeight: Number(renderer.prop("height", 140))
+      clip: true
+      QQC.TextArea {
+        id: nativeTextArea
+        readonly property bool supportsTextEditedSignal: nativeTextArea["textEdited"] !== undefined
+        function sendInputEvent() {
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: text })
+        }
+        text: String(renderer.prop("text", ""))
+        placeholderText: String(renderer.prop("placeholder", ""))
+        readOnly: renderer.prop("read_only", false) === true
+        readonly property int maximumLengthValue: Number(renderer.prop("maximum_length", 32767))
+        wrapMode: String(renderer.prop("wrap", "word")) === "none" ? TextEdit.NoWrap
+          : (String(renderer.prop("wrap", "word")) === "anywhere" ? TextEdit.WrapAnywhere : TextEdit.Wrap)
+        color: renderer.prop("foreground", renderer.foreground)
+        selectionColor: renderer.prop("selection_tint", renderer.prop("accent", Color.accent))
+        selectedTextColor: Color.background
+        placeholderTextColor: Color.muted
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        padding: Number(renderer.prop("padding", Style.spacing.inputPaddingY))
+        background: Rectangle {
+          color: renderer.prop("background", Color.popups.background)
+          radius: Style.cornerRadius
+          border.width: Style.normalBorderWidth
+          border.color: nativeTextArea.activeFocus ? renderer.prop("accent", Color.accent) : renderer.prop("foreground", renderer.foreground)
+        }
+        onTextChanged: {
+          if (text.length > maximumLengthValue) {
+            remove(maximumLengthValue, text.length)
+            return
+          }
+          if (!supportsTextEditedSignal && activeFocus) sendInputEvent()
+        }
+        onActiveFocusChanged: {
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, activeFocus ? "focus" : "blur", { value: text })
+          if (!activeFocus && renderer.subscribed("change")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: text })
+        }
+        onSelectedTextChanged: {
+          if (renderer.subscribed("selection")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "selection", { start: selectionStart, end: selectionEnd, text: selectedText })
+        }
+        Connections {
+          target: nativeTextArea
+          ignoreUnknownSignals: true
+          function onTextEdited() { nativeTextArea.sendInputEvent() }
+        }
+      }
+    }

data/Components/Builtins/TextField.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.TextField {
+  required property var renderer
+      text: String(renderer.prop("text", "")); placeholderText: String(renderer.prop("placeholder", ""))
+      password: renderer.prop("password", false) === true
+      implicitWidth: Number(renderer.prop("width", 240)); foreground: renderer.prop("foreground", renderer.foreground)
+      accent: renderer.prop("accent", Color.accent); selectionTint: renderer.prop("selection_tint", Style.selectionFillFor(foreground, accent))
+      horizontalPadding: Number(renderer.prop("horizontal_padding", Style.spacing.controlPaddingX))
+      verticalPadding: Number(renderer.prop("vertical_padding", Style.spacing.inputPaddingY)); hasCursor: renderer.prop("cursor", false) === true
+      onTextEdited: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: text })
+      onEditingFinished: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: text })
+      onAccepted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "submit", { value: text })
+      onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, activeFocus ? "focus" : "blur", { value: text })
+    }