zui 0.0.1

data/Components/Builtins/ReorderableList.qml

@@ -0,0 +1,204 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+Rectangle {
+  id: reorderRoot
+
+  property var renderer: null
+  readonly property var items: renderer ? renderer.prop("items", []) : []
+  readonly property real outerPadding: Number(renderer ? renderer.prop("padding", 0) : 0)
+
+  implicitWidth: Number(renderer ? renderer.prop("width", 360) : 360)
+  implicitHeight: Number(renderer ? renderer.prop("height", 420) : 420)
+  color: renderer ? renderer.prop("background", "transparent") : "transparent"
+  radius: Number(renderer ? renderer.prop("radius", 0) : 0)
+  border.color: renderer ? renderer.prop("border_color", "transparent") : "transparent"
+
+  function field(item, name, fallback) {
+    if (item !== null && typeof item === "object" && !Array.isArray(item)) {
+      var key = String(renderer.prop(name, fallback))
+      return item[key] === undefined ? null : item[key]
+    }
+    return item
+  }
+
+  function payload(index, item) {
+    return { index: index, item: item, value: field(item, "key_field", "id") }
+  }
+
+  function send(name, payload) {
+    if (renderer.subscribed(name))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, name, payload || {})
+  }
+
+  ListView {
+    id: listControl
+
+    anchors.fill: parent
+    anchors.margins: reorderRoot.outerPadding
+    model: reorderRoot.items
+    orientation: String(renderer.prop("orientation", "vertical")) === "horizontal"
+      ? ListView.Horizontal : ListView.Vertical
+    spacing: Number(renderer.prop("spacing", 4))
+    clip: true
+    boundsBehavior: Flickable.StopAtBounds
+    displaced: Transition {
+      NumberAnimation {
+        properties: "x,y"
+        duration: Number(renderer.prop("drag_transition_duration", 180))
+        easing.type: Easing.OutCubic
+      }
+    }
+
+    delegate: QQC.ItemDelegate {
+      id: rowDelegate
+
+      required property int index
+      required property var modelData
+      property real dragOffsetX: dragHandler.active ? dragHandler.translation.x : 0
+      property real dragOffsetY: dragHandler.active ? dragHandler.translation.y : 0
+
+      width: listControl.orientation === ListView.Vertical
+        ? listControl.width : Number(renderer.prop("item_height", 58)) * 3.2
+      height: listControl.orientation === ListView.Horizontal
+        ? listControl.height : Number(renderer.prop("item_height", 58))
+      highlighted: renderer.prop("selected", null) === reorderRoot.field(modelData, "key_field", "id")
+      z: dragHandler.active ? 20 : 0
+      scale: dragHandler.active ? Number(renderer.prop("drag_scale", 1.025)) : 1
+      opacity: dragHandler.active ? Number(renderer.prop("drag_opacity", 0.94)) : 1
+      leftPadding: Number(renderer.prop("item_padding", 12))
+      rightPadding: Number(renderer.prop("item_padding", 12))
+      topPadding: 7
+      bottomPadding: 7
+      transform: Translate { x: rowDelegate.dragOffsetX; y: rowDelegate.dragOffsetY }
+
+      Behavior on dragOffsetX {
+        NumberAnimation {
+          duration: Number(renderer.prop("drag_transition_duration", 180))
+          easing.type: Easing.OutCubic
+        }
+      }
+      Behavior on dragOffsetY {
+        NumberAnimation {
+          duration: Number(renderer.prop("drag_transition_duration", 180))
+          easing.type: Easing.OutCubic
+        }
+      }
+      Behavior on scale { NumberAnimation { duration: 130; easing.type: Easing.OutCubic } }
+      Behavior on opacity { NumberAnimation { duration: 130 } }
+
+      background: Rectangle {
+        color: rowDelegate.highlighted
+          ? renderer.prop("selected_background", Color.popups.background)
+          : renderer.prop("item_background", "transparent")
+        radius: Number(renderer.prop("radius", 0))
+        border.width: dragHandler.active ? 1 : 0
+        border.color: renderer.prop("selected_foreground", renderer.foreground)
+      }
+
+      contentItem: Item {
+        Text {
+          id: handle
+          anchors.right: parent.right
+          anchors.verticalCenter: parent.verticalCenter
+          visible: renderer.prop("drag_enabled", true) !== false
+          text: "⋮⋮"
+          color: dragHandler.active
+            ? renderer.prop("selected_foreground", renderer.foreground)
+            : renderer.prop("muted", Color.muted)
+          font.pixelSize: Number(renderer.prop("font_size", Style.font.body)) + 2
+          verticalAlignment: Text.AlignVCenter
+        }
+
+        Column {
+          anchors.left: parent.left
+          anchors.right: handle.left
+          anchors.rightMargin: 14
+          anchors.verticalCenter: parent.verticalCenter
+          spacing: 2
+
+          Text {
+            width: parent.width
+            text: String(reorderRoot.field(rowDelegate.modelData, "label_field", "label") || "")
+            color: rowDelegate.highlighted
+              ? renderer.prop("selected_foreground", renderer.foreground)
+              : renderer.prop("foreground", renderer.foreground)
+            font.family: renderer.prop("font_family", renderer.fontFamily)
+            font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+            font.weight: Font.DemiBold
+            elide: Text.ElideRight
+          }
+
+          Text {
+            width: parent.width
+            text: String(reorderRoot.field(rowDelegate.modelData, "description_field", "description") || "")
+            color: renderer.prop("muted", Color.muted)
+            font.family: renderer.prop("font_family", renderer.fontFamily)
+            font.pixelSize: Math.max(9, Number(renderer.prop("font_size", Style.font.body)) - 2)
+            elide: Text.ElideRight
+          }
+        }
+      }
+
+      onClicked: {
+        var eventPayload = reorderRoot.payload(index, modelData)
+        reorderRoot.send("activate", eventPayload)
+        reorderRoot.send("change", eventPayload)
+      }
+
+      DragHandler {
+        id: dragHandler
+
+        enabled: renderer.prop("drag_enabled", true) !== false
+        target: null
+        xAxis.enabled: listControl.orientation === ListView.Horizontal
+        yAxis.enabled: listControl.orientation === ListView.Vertical
+
+        onTranslationChanged: {
+          if (!active) return
+          var point = rowDelegate.mapToItem(listControl.contentItem,
+                                            rowDelegate.width / 2 + translation.x,
+                                            rowDelegate.height / 2 + translation.y)
+          var targetIndex = listControl.indexAt(point.x, point.y)
+          reorderRoot.send("drag_move", {
+            from: rowDelegate.index,
+            to: targetIndex,
+            x: point.x,
+            y: point.y,
+            item: rowDelegate.modelData
+          })
+        }
+
+        onActiveChanged: {
+          if (active) {
+            reorderRoot.send("drag_start", reorderRoot.payload(rowDelegate.index, rowDelegate.modelData))
+            return
+          }
+          var point = rowDelegate.mapToItem(listControl.contentItem,
+                                            rowDelegate.width / 2 + translation.x,
+                                            rowDelegate.height / 2 + translation.y)
+          var targetIndex = listControl.indexAt(point.x, point.y)
+          if (targetIndex < 0) targetIndex = Math.max(0, reorderRoot.items.length - 1)
+          reorderRoot.send("reorder", {
+            from: rowDelegate.index,
+            to: targetIndex,
+            item: rowDelegate.modelData
+          })
+          reorderRoot.send("drag_end", {
+            from: rowDelegate.index,
+            to: targetIndex,
+            item: rowDelegate.modelData
+          })
+        }
+      }
+    }
+
+    Text {
+      anchors.centerIn: parent
+      visible: reorderRoot.items.length === 0
+      text: renderer.prop("empty_text", "No items")
+      color: renderer.prop("muted", Color.muted)
+    }
+  }
+}

data/Components/Builtins/RichText.qml

@@ -0,0 +1,23 @@
+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.RichText
+      color: renderer.prop("color", renderer.foreground)
+      linkColor: renderer.prop("link_color", Color.accent)
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("size", Style.font.body))
+      font.bold: renderer.prop("bold", false) === true
+      width: Number(renderer.prop("width", implicitWidth))
+      wrapMode: renderer.prop("wrap", true) !== false ? Text.Wrap : Text.NoWrap
+      maximumLineCount: Number(renderer.prop("maximum_lines", 2147483647))
+      onLinkActivated: function(link) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "link", { value: link }) }
+      HoverHandler { cursorShape: parent.hoveredLink.length > 0 ? Qt.PointingHandCursor : Qt.ArrowCursor }
+    }

data/Components/Builtins/RotationAnimation.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.AnimationDriver { renderer: null; animationType: "rotation" }

data/Components/Builtins/RotationAnimator.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.AnimationDriver { renderer: null; animationType: "rotation_animator" }

data/Components/Builtins/RoundButton.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.RoundButton {
+  required property var renderer
+      id: nativeRoundButton
+      text: String(renderer.prop("text", ""))
+      checkable: renderer.prop("checkable", false) === true
+      checked: renderer.prop("checked", false) === true
+      enabled: renderer.prop("enabled", true) !== false
+      implicitWidth: Number(renderer.prop("diameter", 44))
+      implicitHeight: implicitWidth
+      background: Rectangle {
+        radius: width / 2
+        color: nativeRoundButton.checked
+          ? renderer.prop("checked_background", renderer.prop("accent", Color.accent))
+          : renderer.prop("background", Color.popups.background)
+        border.width: Style.normalBorderWidth
+        border.color: nativeRoundButton.activeFocus ? renderer.prop("accent", Color.accent) : renderer.prop("foreground", renderer.foreground)
+        opacity: nativeRoundButton.down ? 0.75 : (nativeRoundButton.hovered ? 0.9 : 1)
+      }
+      contentItem: Text {
+        text: String(renderer.prop("icon", "")).length > 0 ? renderer.iconGlyph(renderer.prop("icon", "")) : nativeRoundButton.text
+        textFormat: Text.PlainText
+        color: nativeRoundButton.checked ? Color.background : renderer.prop("foreground", renderer.foreground)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(String(renderer.prop("icon", "")).length > 0 ? renderer.prop("icon_size", Style.font.icon) : renderer.prop("font_size", Style.font.body))
+        font.bold: true
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+      }
+      onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { checked: checked })
+      onToggled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: checked })
+      onPressed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", {})
+      onReleased: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", {})
+      onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: hovered })
+    }

data/Components/Builtins/Row.qml

@@ -0,0 +1,17 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Row {
+  required property var renderer
+      spacing: Number(renderer.prop("spacing", Style.spacing.controlGap))
+
+      Repeater {
+        model: renderer.node && Array.isArray(renderer.node.children) ? renderer.node.children : []
+        delegate: renderer.rowChildDelegateComponent
+      }
+    }

data/Components/Builtins/RowLayout.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+RowLayout {
+  required property var renderer
+      spacing: Number(renderer.prop("spacing", Style.spacing.controlGap))
+      Repeater { model: renderer.node.children || []; delegate: renderer.layoutChildDelegateComponent }
+    }

data/Components/Builtins/ScaleAnimator.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.AnimationDriver { renderer: null; animationType: "scale_animator" }

data/Components/Builtins/ScatterChart.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.ChartCanvas { renderer: null; chartType: "scatter" }

data/Components/Builtins/ScreenCapture.qml

@@ -0,0 +1,78 @@
+import QtMultimedia
+import QtQuick
+
+Item {
+    id: screenRoot
+
+    property var renderer: null
+    property alias screenCapture: nativeCapture
+    property int handledCommandRevision: -1
+
+    function selectedScreen() {
+        var screens = Application.screens || [];
+        var requested = renderer ? renderer.prop("screen", 0) : 0;
+        if (typeof requested === "number") {
+            if (requested >= 0 && requested < screens.length)
+                return screens[requested];
+            if (renderer)
+                renderer.componentError("screen_not_found", "The declared screen does not exist", {
+                    "screen": String(requested)
+                });
+            return null;
+        }
+
+        for (var index = 0; index < screens.length; index++) if (screens[index].name === String(requested)) {
+            return screens[index];
+        }
+        if (renderer)
+            renderer.componentError("screen_not_found", "The declared screen does not exist", {
+                "screen": String(requested)
+            });
+        return null;
+    }
+
+    function command() {
+        if (!renderer)
+            return ;
+
+        var revision = Number(renderer.prop("command_revision", 0));
+        if (revision === handledCommandRevision)
+            return ;
+
+        handledCommandRevision = revision;
+        var value = String(renderer.prop("command", ""));
+        if (value === "start")
+            nativeCapture.start();
+        else if (value === "stop")
+            nativeCapture.stop();
+    }
+
+    Component.onCompleted: command()
+
+    ScreenCapture {
+        id: nativeCapture
+
+        screen: screenRoot.selectedScreen()
+        active: renderer && renderer.prop("active", false) === true && screenRoot.selectedScreen() !== null
+        onActiveChanged: {
+            if (renderer) {
+                renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, active ? "start" : "stop", {
+            });
+            }
+        }
+        onErrorOccurred: function(error, errorString) {
+            renderer.componentError("screen_capture_failed", errorString, {
+                "native_code": error
+            });
+        }
+    }
+
+    Connections {
+        function onNodeChanged() {
+            screenRoot.command();
+        }
+
+        target: renderer
+    }
+
+}

data/Components/Builtins/ScriptAction.qml

@@ -0,0 +1,15 @@
+import QtQuick
+
+Item {
+  id: actionRoot
+  property var renderer: null
+  property int handledRevision: -1
+  function run() {
+    if (!renderer) return
+    var revision = Number(renderer.prop("revision", 0)); if (revision === handledRevision || renderer.prop("trigger", true) === false) return
+    handledRevision = revision; nativeAction.start()
+  }
+  ScriptAction { id: nativeAction; script: function() { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "trigger", { action: renderer.prop("action", null), revision: actionRoot.handledRevision }); renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "finish", {}) } }
+  Component.onCompleted: run()
+  Connections { target: renderer; function onNodeChanged() { actionRoot.run() } }
+}

data/Components/Builtins/Scroll.qml

@@ -0,0 +1,18 @@
+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", 240))
+      clip: renderer.prop("clip", true) !== false
+      Column {
+        spacing: Style.spacing.panelGap
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/ScrollBar.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls as QQC
+
+QQC.ScrollBar {
+  id: barRoot
+  property var renderer: null
+  readonly property var scrollTarget: renderer ? renderer.findRenderedItem(renderer.prop("target", "")) : null
+  orientation: String(renderer ? renderer.prop("orientation", "vertical") : "vertical") === "horizontal" ? Qt.Horizontal : Qt.Vertical
+  policy: { var value=String(renderer ? renderer.prop("policy", "as_needed") : "as_needed"); if(value==="always")return QQC.ScrollBar.AlwaysOn;if(value==="never")return QQC.ScrollBar.AlwaysOff;return QQC.ScrollBar.AsNeeded }
+  position: scrollTarget && scrollTarget.visibleArea ? (orientation === Qt.Vertical ? scrollTarget.visibleArea.yPosition : scrollTarget.visibleArea.xPosition) : Number(renderer ? renderer.prop("position", 0) : 0)
+  size: scrollTarget && scrollTarget.visibleArea ? (orientation === Qt.Vertical ? scrollTarget.visibleArea.heightRatio : scrollTarget.visibleArea.widthRatio) : Number(renderer ? renderer.prop("size", 0.2) : 0.2)
+  active: renderer && renderer.prop("active", false) === true
+  interactive: !renderer || renderer.prop("interactive", true) !== false
+  stepSize: Number(renderer ? renderer.prop("step_size", 0.1) : 0.1); minimumSize: Number(renderer ? renderer.prop("minimum_size", 0) : 0)
+  implicitWidth: Number(renderer ? renderer.prop("width", orientation === Qt.Vertical ? 12 : 160) : 12); implicitHeight: Number(renderer ? renderer.prop("height", orientation === Qt.Vertical ? 160 : 12) : 160)
+  onPositionChanged: { if (pressed && scrollTarget) { if (orientation === Qt.Vertical) scrollTarget.contentY = position * Math.max(0, scrollTarget.contentHeight); else scrollTarget.contentX = position * Math.max(0, scrollTarget.contentWidth) } renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, pressed ? "input" : "change", { value: position, size: size }) }
+  onActiveChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "active_change", { value: active })
+}

data/Components/Builtins/ScrollIndicator.qml

@@ -0,0 +1,15 @@
+import QtQuick
+import QtQuick.Controls as QQC
+
+QQC.ScrollIndicator {
+  id: indicatorRoot
+  property var renderer: null
+  readonly property var scrollTarget: renderer ? renderer.findRenderedItem(renderer.prop("target", "")) : null
+  orientation: String(renderer ? renderer.prop("orientation", "vertical") : "vertical") === "horizontal" ? Qt.Horizontal : Qt.Vertical
+  position: scrollTarget && scrollTarget.visibleArea ? (orientation === Qt.Vertical ? scrollTarget.visibleArea.yPosition : scrollTarget.visibleArea.xPosition) : Number(renderer ? renderer.prop("position", 0) : 0)
+  size: scrollTarget && scrollTarget.visibleArea ? (orientation === Qt.Vertical ? scrollTarget.visibleArea.heightRatio : scrollTarget.visibleArea.widthRatio) : Number(renderer ? renderer.prop("size", 0.2) : 0.2)
+  active: renderer && renderer.prop("active", false) === true
+  minimumSize: Number(renderer ? renderer.prop("minimum_size", 0) : 0)
+  implicitWidth: Number(renderer ? renderer.prop("width", orientation === Qt.Vertical ? 6 : 160) : 6); implicitHeight: Number(renderer ? renderer.prop("height", orientation === Qt.Vertical ? 160 : 6) : 160)
+  onActiveChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "active_change", { value: active })
+}

data/Components/Builtins/SearchField.qml

@@ -0,0 +1,178 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.TextField {
+  id: nativeSearchField
+  required property var renderer
+
+  readonly property var suggestionModel: renderer.prop("suggestions", [])
+  readonly property string textRole: String(renderer.prop("text_role", ""))
+  readonly property bool live: renderer.prop("live", false) === true
+  property int highlightedIndex: Number(renderer.prop("current_index", -1))
+
+  function suggestionText(entry) {
+    if (entry !== null && typeof entry === "object") {
+      if (textRole.length > 0 && entry[textRole] !== undefined) return String(entry[textRole])
+      if (entry.label !== undefined) return String(entry.label)
+      if (entry.text !== undefined) return String(entry.text)
+      if (entry.value !== undefined) return String(entry.value)
+    }
+    return String(entry === null || entry === undefined ? "" : entry)
+  }
+
+  function sendSearch() {
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "search", { value: text })
+  }
+
+  function highlightSuggestion(index) {
+    if (!Array.isArray(suggestionModel) || suggestionModel.length === 0) return
+    highlightedIndex = Math.max(0, Math.min(suggestionModel.length - 1, index))
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "highlight",
+      { index: highlightedIndex, value: suggestionText(suggestionModel[highlightedIndex]) })
+    suggestionList.positionViewAtIndex(highlightedIndex, ListView.Contain)
+  }
+
+  function activateSuggestion(index) {
+    if (!Array.isArray(suggestionModel) || index < 0 || index >= suggestionModel.length) return
+    highlightedIndex = index
+    text = suggestionText(suggestionModel[index])
+    suggestionPopup.close()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate",
+      { index: index, value: text })
+  }
+
+  function synchronizePopup() {
+    if (activeFocus && Array.isArray(suggestionModel) && suggestionModel.length > 0)
+      suggestionPopup.open()
+    else
+      suggestionPopup.close()
+  }
+
+  text: String(renderer.prop("text", ""))
+  enabled: renderer.prop("enabled", true) !== false
+  implicitWidth: Number(renderer.prop("width", 260))
+  leftPadding: 38
+  rightPadding: text.length > 0 ? 38 : 12
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+  color: renderer.prop("foreground", renderer.foreground)
+  selectionColor: renderer.prop("accent", Color.accent)
+  selectedTextColor: Color.background
+  background: Rectangle {
+    color: renderer.prop("background", Color.popups.background)
+    radius: Style.cornerRadius
+    border.width: Style.normalBorderWidth
+    border.color: nativeSearchField.activeFocus
+      ? renderer.prop("accent", Color.accent)
+      : renderer.prop("foreground", renderer.foreground)
+  }
+
+  onTextEdited: {
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: text })
+    if (live) sendSearch()
+    synchronizePopup()
+  }
+  onAccepted: {
+    if (suggestionPopup.opened && highlightedIndex >= 0)
+      activateSuggestion(highlightedIndex)
+    else
+      suggestionPopup.close()
+    sendSearch()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "submit", { value: text })
+  }
+  onActiveFocusChanged: {
+    synchronizePopup()
+    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 })
+  }
+  onSuggestionModelChanged: synchronizePopup()
+
+  Keys.onDownPressed: function(event) {
+    highlightSuggestion(highlightedIndex < 0 ? 0 : highlightedIndex + 1)
+    suggestionPopup.open()
+    event.accepted = true
+  }
+  Keys.onUpPressed: function(event) {
+    highlightSuggestion(highlightedIndex < 0 ? suggestionModel.length - 1 : highlightedIndex - 1)
+    suggestionPopup.open()
+    event.accepted = true
+  }
+  Keys.onEscapePressed: function(event) {
+    suggestionPopup.close()
+    event.accepted = true
+  }
+
+  QQC.ToolButton {
+    id: searchButton
+    anchors.left: parent.left
+    anchors.verticalCenter: parent.verticalCenter
+    width: 34
+    height: parent.height
+    text: "⌕"
+    focusPolicy: Qt.NoFocus
+    palette.buttonText: renderer.prop("foreground", renderer.foreground)
+    onClicked: nativeSearchField.sendSearch()
+  }
+
+  QQC.ToolButton {
+    anchors.right: parent.right
+    anchors.verticalCenter: parent.verticalCenter
+    width: 34
+    height: parent.height
+    visible: nativeSearchField.text.length > 0
+    text: "×"
+    focusPolicy: Qt.NoFocus
+    palette.buttonText: renderer.prop("foreground", renderer.foreground)
+    onClicked: {
+      nativeSearchField.text = ""
+      nativeSearchField.forceActiveFocus()
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "clear", {})
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: "" })
+      if (nativeSearchField.live) nativeSearchField.sendSearch()
+    }
+  }
+
+  QQC.Popup {
+    id: suggestionPopup
+    parent: nativeSearchField
+    x: 0
+    y: nativeSearchField.height + 4
+    width: nativeSearchField.width
+    height: Math.min(contentItem.implicitHeight + topPadding + bottomPadding, 280)
+    padding: 4
+    closePolicy: QQC.Popup.CloseOnEscape | QQC.Popup.CloseOnPressOutsideParent
+    background: Rectangle {
+      color: renderer.prop("background", Color.popups.background)
+      radius: Style.cornerRadius
+      border.width: Style.normalBorderWidth
+      border.color: renderer.prop("accent", Color.accent)
+    }
+    contentItem: ListView {
+      id: suggestionList
+      implicitHeight: contentHeight
+      clip: true
+      model: Array.isArray(nativeSearchField.suggestionModel) ? nativeSearchField.suggestionModel : []
+      currentIndex: nativeSearchField.highlightedIndex
+      delegate: QQC.ItemDelegate {
+        required property int index
+        required property var modelData
+        width: suggestionList.width
+        text: nativeSearchField.suggestionText(modelData)
+        highlighted: index === nativeSearchField.highlightedIndex
+        font.family: nativeSearchField.font.family
+        font.pixelSize: nativeSearchField.font.pixelSize
+        palette.text: renderer.prop("foreground", renderer.foreground)
+        palette.highlightedText: Color.background
+        palette.highlight: renderer.prop("accent", Color.accent)
+        onHoveredChanged: {
+          if (hovered && index !== nativeSearchField.highlightedIndex)
+            nativeSearchField.highlightSuggestion(index)
+        }
+        onClicked: nativeSearchField.activateSuggestion(index)
+      }
+    }
+  }
+}