zui 0.0.1

data/Components/Builtins/ColorPicker.qml

@@ -0,0 +1,70 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Dialogs
+import "../../Theme"
+
+QQC.Button {
+  id: picker
+
+  required property var renderer
+  readonly property color selectedColor: dialog.selectedColor
+
+  implicitWidth: Number(renderer.prop("width", 180))
+  implicitHeight: Number(renderer.prop("height", 40))
+  enabled: renderer.prop("enabled", true) !== false
+  onClicked: dialog.open()
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.popups.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Style.normalBorderWidth
+    border.color: picker.activeFocus
+      ? Color.accent
+      : renderer.prop("border_color", renderer.prop("foreground", renderer.foreground))
+    opacity: picker.down ? 0.72 : 1
+  }
+
+  contentItem: Row {
+    spacing: Style.spacing.controlGap
+    Rectangle {
+      width: Math.max(20, picker.height - Style.spacing.controlPaddingY * 2)
+      height: width
+      radius: Math.min(Number(renderer.prop("radius", Style.cornerRadius)), width / 2)
+      color: picker.selectedColor
+      border.width: Style.normalBorderWidth
+      border.color: renderer.prop("border_color", renderer.foreground)
+    }
+    Text {
+      anchors.verticalCenter: parent.verticalCenter
+      text: String(renderer.prop("label", picker.selectedColor.toString()))
+      textFormat: Text.PlainText
+      color: renderer.prop("foreground", renderer.foreground)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+    }
+  }
+
+  ColorDialog {
+    id: dialog
+    title: String(renderer.prop("title", "Choose a color"))
+    selectedColor: renderer.prop("color", "#ffffff")
+    visible: renderer.prop("opened", false) === true
+    options: (renderer.prop("show_alpha", false) === true ? ColorDialog.ShowAlphaChannel : 0)
+      | (renderer.prop("no_buttons", false) === true ? ColorDialog.NoButtons : 0)
+      | (renderer.prop("native_dialog", true) === false ? ColorDialog.DontUseNativeDialog : 0)
+
+    onSelectedColorChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", {
+      value: selectedColor.toString()
+    })
+    onAccepted: {
+      var value = selectedColor.toString()
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value })
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", { value: value })
+    }
+    onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {
+      value: selectedColor.toString()
+    })
+    onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      visible ? "open" : "close", { value: selectedColor.toString() })
+  }
+}

data/Components/Builtins/Colorize.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  required property var renderer
+  implicitWidth: Number(renderer.prop("width", 240)); implicitHeight: Number(renderer.prop("height", 160))
+  Item { id: sourceHost; anchors.fill: parent; Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent } }
+  ShaderEffectSource { id: sourceTexture; anchors.fill: parent; sourceItem: sourceHost; hideSource: true; visible: false }
+  MultiEffect {
+    anchors.fill: parent; source: sourceTexture
+    colorization: Number(renderer.prop("amount", 1)); colorizationColor: renderer.prop("color", "white")
+    brightness: Number(renderer.prop("brightness", 0)); contrast: Number(renderer.prop("contrast", 0)); saturation: Number(renderer.prop("saturation", 0))
+  }
+}

data/Components/Builtins/Column.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
+
+Column {
+  required property var renderer
+      spacing: Number(renderer.prop("spacing", Style.spacing.panelGap))
+
+      Repeater {
+        model: renderer.node && Array.isArray(renderer.node.children) ? renderer.node.children : []
+        delegate: renderer.columnChildDelegateComponent
+      }
+    }

data/Components/Builtins/ColumnLayout.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
+
+ColumnLayout {
+  required property var renderer
+      spacing: Number(renderer.prop("spacing", Style.spacing.panelGap))
+      Repeater { model: renderer.node.children || []; delegate: renderer.layoutChildDelegateComponent }
+    }

data/Components/Builtins/ConfirmDialog.qml

@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.ConfirmDialog {
+  required property var renderer
+      opened: renderer.prop("opened", false) === true; message: String(renderer.prop("message", ""))
+      cancelText: String(renderer.prop("cancel_text", "Cancel")); confirmText: String(renderer.prop("confirm_text", "Confirm"))
+      selectedIndex: Number(renderer.prop("selected_index", 1)); visible: renderer.prop("visible", true) !== false
+      background: renderer.prop("background", Color.background); foreground: renderer.prop("foreground", renderer.foreground)
+      scrim: renderer.prop("scrim", Util.alpha(Color.background, 0.7)); selectedBackground: renderer.prop("selected_background", Util.alpha(renderer.foreground, 0.08))
+      selectedText: renderer.prop("selected_text", Color.accent); fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+      cornerRadius: Number(renderer.prop("corner_radius", Style.cornerRadius))
+      onCanceled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "cancel", {})
+      onConfirmed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "confirm", {})
+    }

data/Components/Builtins/ConstrainedBox.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Item {
+  required property var renderer
+      function bounded(value, minimum, maximum) {
+        return Math.max(Number(minimum), Math.min(Number(maximum), Number(value)))
+      }
+      readonly property real naturalWidth: constrainedContent.implicitWidth
+      readonly property real naturalHeight: constrainedContent.implicitHeight
+      readonly property real desiredWidth: Number(renderer.prop("width", naturalWidth))
+      readonly property real desiredHeight: Number(renderer.prop("height", naturalHeight))
+      implicitWidth: bounded(desiredWidth, renderer.prop("min_width", 0), renderer.prop("max_width", Number.MAX_VALUE))
+      implicitHeight: bounded(desiredHeight, renderer.prop("min_height", 0), renderer.prop("max_height", Number.MAX_VALUE))
+      clip: renderer.prop("clip", false) === true
+      Item {
+        id: constrainedContent
+        anchors.centerIn: parent
+        implicitWidth: childrenRect.width
+        implicitHeight: childrenRect.height
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/Container.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.BorderSurface {
+  required property var renderer
+      readonly property int innerPadding: Number(renderer.prop("padding", 0))
+      implicitWidth: content.implicitWidth + innerPadding * 2
+      implicitHeight: content.implicitHeight + innerPadding * 2
+      color: "transparent"
+      borderSpec: renderer.prop("bordered", false)
+        ? Border.controlSpec("normal", renderer.foreground, Color.accent)
+        : Border.none()
+      radius: Style.cornerRadius
+
+      Column {
+        id: content
+        anchors.centerIn: parent
+        spacing: Number(renderer.prop("spacing", Style.spacing.panelGap))
+
+        Repeater {
+          model: renderer.node && Array.isArray(renderer.node.children) ? renderer.node.children : []
+          delegate: renderer.childDelegateComponent
+        }
+      }
+    }

data/Components/Builtins/ContextMenu.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import Qt.labs.qmlmodels
+import "../../Theme"
+
+Item {
+  id: contextRoot
+
+  required property var renderer
+  readonly property var menuEntries: renderer.prop("items", [])
+  readonly property string targetId: String(renderer.prop("target", ""))
+  readonly property var targetItem: targetId.length > 0 ? renderer.findRenderedItem(targetId) : null
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+
+  function entryValue(entry, name, fallback) {
+    return entry !== null && typeof entry === "object" && entry[name] !== undefined
+      ? entry[name] : fallback
+  }
+
+  function entryLabel(entry) {
+    return entry !== null && typeof entry === "object"
+      ? String(entry.label === undefined ? (entry.text === undefined ? "" : entry.text) : entry.label)
+      : String(entry === null ? "" : entry)
+  }
+
+  function entryPayload(index, entry, item) {
+    var label = entryLabel(entry)
+    return {
+      index: index,
+      label: label,
+      value: entryValue(entry, "value", label),
+      checked: item ? item.checked : false
+    }
+  }
+
+  function closePolicyValue(value) {
+    var names = Array.isArray(value) ? value : [value || "escape_and_outside"]
+    var result = 0
+    for (var index = 0; index < names.length; index++) {
+      var name = String(names[index])
+      if (name === "escape" || name === "escape_and_outside") result |= QQC.Popup.CloseOnEscape
+      if (name === "outside" || name === "escape_and_outside") result |= QQC.Popup.CloseOnPressOutside
+      if (name === "outside_parent") result |= QQC.Popup.CloseOnPressOutsideParent
+      if (name === "release_outside") result |= QQC.Popup.CloseOnReleaseOutside
+      if (name === "release_outside_parent") result |= QQC.Popup.CloseOnReleaseOutsideParent
+    }
+    return result
+  }
+
+  function syncOpenState() {
+    if (requestedOpen === nativeMenu.opened) return
+    if (requestedOpen) {
+      nativeMenu.x = Number(renderer.prop("x", 0))
+      nativeMenu.y = Number(renderer.prop("y", 0))
+      nativeMenu.open()
+    } else nativeMenu.close()
+  }
+
+  width: Number(renderer.prop("activation_width", 0))
+  height: Number(renderer.prop("activation_height", 0))
+  visible: renderer.prop("visible", true) !== false
+
+  TapHandler {
+    id: contextHandler
+    parent: contextRoot.targetItem || contextRoot
+    enabled: contextRoot.visible && renderer.prop("enabled", true) !== false
+    acceptedButtons: Qt.RightButton
+    onTapped: function(eventPoint, button) {
+      var host = contextRoot.targetItem || contextRoot
+      var localPoint = host === contextRoot
+        ? eventPoint.position : host.mapToItem(contextRoot, eventPoint.position)
+      if (renderer.subscribed("request"))
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "request",
+          { x: localPoint.x, y: localPoint.y, button: button })
+      nativeMenu.popup(localPoint)
+    }
+  }
+
+  QQC.Menu {
+    id: nativeMenu
+    width: Number(renderer.prop("width", 240))
+    modal: renderer.prop("modal", false) === true
+    closePolicy: contextRoot.closePolicyValue(renderer.prop("close_policy", "escape_and_outside"))
+    enabled: renderer.prop("enabled", true) !== false
+
+    background: Rectangle {
+      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")
+    }
+
+    Instantiator {
+      model: Array.isArray(contextRoot.menuEntries) ? contextRoot.menuEntries : []
+      delegate: DelegateChooser {
+        role: "separator"
+        DelegateChoice { roleValue: true; QQC.MenuSeparator {} }
+        DelegateChoice {
+          QQC.MenuItem {
+            required property int index
+            required property var modelData
+            text: contextRoot.entryLabel(modelData)
+            enabled: nativeMenu.enabled && contextRoot.entryValue(modelData, "enabled", true) !== false
+            checkable: contextRoot.entryValue(modelData, "checkable", false) === true
+            checked: contextRoot.entryValue(modelData, "checked", false) === true
+            font.family: String(renderer.prop("font_family", renderer.fontFamily))
+            font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+            icon.name: String(contextRoot.entryValue(modelData, "icon", ""))
+            icon.source: String(contextRoot.entryValue(modelData, "icon_source", ""))
+            icon.color: checked ? renderer.prop("accent", Color.accent)
+              : renderer.prop("foreground", renderer.foreground)
+            onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+              "trigger", contextRoot.entryPayload(index, modelData, this))
+            onToggled: {
+              if (renderer.subscribed("toggle"))
+                renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                  "toggle", contextRoot.entryPayload(index, modelData, this))
+            }
+            onHighlightedChanged: {
+              if (highlighted && renderer.subscribed("highlight"))
+                renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                  "highlight", contextRoot.entryPayload(index, modelData, this))
+            }
+          }
+        }
+      }
+      onObjectAdded: function(index, object) { nativeMenu.insertItem(index, object) }
+      onObjectRemoved: function(index, object) { nativeMenu.removeItem(object) }
+    }
+
+    onOpened: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open", {})
+    onClosed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {})
+    onAboutToShow: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_show", {})
+    onAboutToHide: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_hide", {})
+  }
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+}

data/Components/Builtins/CursorSurface.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
+
+ZuiControls.CursorSurface {
+  required property var renderer
+      implicitWidth: Number(renderer.prop("width", contentItem.implicitWidth)); implicitHeight: Number(renderer.prop("height", contentItem.implicitHeight))
+      current: renderer.prop("current", false) === true; outline: renderer.prop("outline", false) === true; bordered: renderer.prop("bordered", false) === true
+      hasCursor: renderer.prop("cursor", false) === true; foreground: renderer.prop("foreground", renderer.foreground)
+      accent: renderer.prop("accent", Color.accent); fill: renderer.prop("fill", Style.hoverFillFor(foreground, accent))
+      currentFill: renderer.prop("current_fill", Style.selectedFillFor(foreground, accent))
+      Column { id: contentItem; anchors.centerIn: parent; Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent } }
+      MouseArea { anchors.fill: parent; onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {}) }
+    }

data/Components/Builtins/DataTable.qml

@@ -0,0 +1,69 @@
+import QtQuick
+import "." as Builtins
+
+Item {
+  id: dataRoot
+  property var renderer: null
+  implicitWidth: Number(renderer ? renderer.prop("width", 720) : 720)
+  implicitHeight: Number(renderer ? renderer.prop("height", 440) : 440)
+
+  function valueFor(row, field) {
+    if (row === null || typeof row !== "object") return row
+    return row[String(field || "")]
+  }
+  function processedRows() {
+    if (!renderer) return []
+    var rows = renderer.prop("rows", []).slice()
+    var filter = String(renderer.prop("filter", "")).toLowerCase()
+    if (filter !== "") rows = rows.filter(function(row) { return JSON.stringify(row).toLowerCase().indexOf(filter) >= 0 })
+    var columns = renderer.prop("columns", [])
+    var sortColumn = Number(renderer.prop("sort_column", -1))
+    if (sortColumn >= 0 && sortColumn < columns.length) {
+      var column = columns[sortColumn]
+      var key = column && typeof column === "object" ? (column.key === undefined ? column.field : column.key) : column
+      var descending = String(renderer.prop("sort_order", "ascending")) === "descending"
+      rows.sort(function(left, right) {
+        var a = dataRoot.valueFor(left, key); var b = dataRoot.valueFor(right, key)
+        if (a === b) return 0
+        var result = a === null || a === undefined ? -1 : (b === null || b === undefined ? 1 : (a < b ? -1 : 1))
+        return descending ? -result : result
+      })
+    }
+    var pageSize = Math.max(0, Number(renderer.prop("page_size", 0)))
+    if (pageSize > 0) {
+      var page = Math.max(1, Number(renderer.prop("page", 1)))
+      rows = rows.slice((page - 1) * pageSize, page * pageSize)
+    }
+    return rows
+  }
+
+  QtObject {
+    id: proxyRenderer
+    readonly property var bridge: dataRoot.renderer ? dataRoot.renderer.bridge : null
+    readonly property string surfaceName: dataRoot.renderer ? dataRoot.renderer.surfaceName : ""
+    readonly property string controlId: dataRoot.renderer ? dataRoot.renderer.controlId : ""
+    readonly property color foreground: dataRoot.renderer ? dataRoot.renderer.foreground : "white"
+    readonly property string fontFamily: dataRoot.renderer ? dataRoot.renderer.fontFamily : ""
+    function prop(name, fallback) { return name === "rows" ? dataRoot.processedRows() : dataRoot.renderer.prop(name, fallback) }
+  }
+  Builtins.TableView { anchors.fill: parent; renderer: proxyRenderer }
+
+  TapHandler {
+    enabled: renderer && renderer.subscribed("sort") && renderer.prop("show_header", true) !== false
+    onTapped: function(eventPoint) {
+      var columns = renderer.prop("columns", [])
+      var x = eventPoint.position.x - Number(renderer.prop("padding", 0))
+      var cursor = 0
+      for (var index = 0; index < columns.length; index++) {
+        var width = Number(columns[index] && columns[index].width !== undefined ? columns[index].width : renderer.prop("column_width", 160))
+        if (x >= cursor && x < cursor + width) {
+          var current = Number(renderer.prop("sort_column", -1))
+          var order = current === index && String(renderer.prop("sort_order", "ascending")) === "ascending" ? "descending" : "ascending"
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "sort", { column: index, order: order })
+          break
+        }
+        cursor += width
+      }
+    }
+  }
+}

data/Components/Builtins/DatePicker.qml

@@ -0,0 +1,180 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Controls.Basic as Basic
+import "../../Theme"
+
+QQC.Button {
+  id: picker
+
+  required property var renderer
+  property string externalDate: String(renderer.prop("date", ""))
+  property var selectedDate: parseDate(externalDate)
+  property int shownMonth: selectedDate ? selectedDate.getMonth() : new Date().getMonth()
+  property int shownYear: selectedDate ? selectedDate.getFullYear() : new Date().getFullYear()
+
+  function parseDate(value) {
+    var match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value || ""))
+    if (!match) return null
+    var parsed = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]), 12, 0, 0)
+    return isNaN(parsed.getTime()) ? null : parsed
+  }
+
+  function isoDate(value) {
+    function pad(number) { return number < 10 ? "0" + number : String(number) }
+    return value.getFullYear() + "-" + pad(value.getMonth() + 1) + "-" + pad(value.getDate())
+  }
+
+  function sameDate(left, right) {
+    return left && right && left.getFullYear() === right.getFullYear()
+      && left.getMonth() === right.getMonth() && left.getDate() === right.getDate()
+  }
+
+  function withinBounds(value) {
+    var minimum = parseDate(renderer.prop("minimum", ""))
+    var maximum = parseDate(renderer.prop("maximum", ""))
+    return (!minimum || value >= minimum) && (!maximum || value <= maximum)
+  }
+
+  function navigate(offset) {
+    var next = new Date(shownYear, shownMonth + offset, 1, 12, 0, 0)
+    shownMonth = next.getMonth()
+    shownYear = next.getFullYear()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "navigate", {
+      month: shownMonth + 1, year: shownYear
+    })
+  }
+
+  onExternalDateChanged: {
+    var parsed = parseDate(externalDate)
+    selectedDate = parsed
+    if (parsed) {
+      shownMonth = parsed.getMonth()
+      shownYear = parsed.getFullYear()
+    }
+  }
+
+  implicitWidth: Number(renderer.prop("width", 200))
+  implicitHeight: Number(renderer.prop("height", 40))
+  enabled: renderer.prop("enabled", true) !== false
+  onClicked: calendarPopup.open()
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.popups.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Style.normalBorderWidth
+    border.color: picker.activeFocus
+      ? renderer.prop("accent", Color.accent)
+      : renderer.prop("border_color", renderer.foreground)
+    opacity: picker.down ? 0.72 : 1
+  }
+
+  contentItem: Row {
+    spacing: Style.spacing.controlGap
+    Text {
+      anchors.verticalCenter: parent.verticalCenter
+      text: String(renderer.prop("label", ""))
+      visible: text.length > 0
+      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))
+    }
+    Text {
+      anchors.verticalCenter: parent.verticalCenter
+      text: picker.selectedDate
+        ? Qt.formatDate(picker.selectedDate, String(renderer.prop("format", "yyyy-MM-dd")))
+        : String(renderer.prop("placeholder", "Choose a date"))
+      color: renderer.prop("foreground", renderer.foreground)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+    }
+  }
+
+  QQC.Popup {
+    id: calendarPopup
+    width: Number(renderer.prop("popup_width", 320))
+    height: calendarColumn.implicitHeight + topPadding + bottomPadding
+    visible: renderer.prop("opened", false) === true
+    closePolicy: QQC.Popup.CloseOnEscape | QQC.Popup.CloseOnPressOutside
+    padding: Style.spacing.md
+
+    onOpened: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open", {})
+    onClosed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {})
+
+    background: Rectangle {
+      color: renderer.prop("popup_background", Color.popups.background)
+      radius: Number(renderer.prop("radius", Style.cornerRadius))
+      border.width: Style.normalBorderWidth
+      border.color: renderer.prop("border_color", renderer.foreground)
+    }
+
+    contentItem: Column {
+      id: calendarColumn
+      spacing: Style.spacing.sm
+
+      Row {
+        width: parent.width
+        spacing: Style.spacing.sm
+        QQC.ToolButton {
+          text: "‹"
+          onClicked: picker.navigate(-1)
+        }
+        Text {
+          width: parent.width - parent.spacing * 2 - 80
+          height: 40
+          horizontalAlignment: Text.AlignHCenter
+          verticalAlignment: Text.AlignVCenter
+          text: Qt.formatDate(new Date(picker.shownYear, picker.shownMonth, 1), "MMMM yyyy")
+          color: renderer.prop("foreground", renderer.foreground)
+          font.family: String(renderer.prop("font_family", renderer.fontFamily))
+          font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+          font.bold: true
+        }
+        QQC.ToolButton {
+          text: "›"
+          onClicked: picker.navigate(1)
+        }
+      }
+
+      Basic.DayOfWeekRow {
+        width: parent.width
+        locale: monthGrid.locale
+      }
+
+      Basic.MonthGrid {
+        id: monthGrid
+        width: parent.width
+        month: picker.shownMonth
+        year: picker.shownYear
+
+        delegate: Rectangle {
+          required property var model
+          implicitWidth: 36
+          implicitHeight: 32
+          radius: Number(renderer.prop("radius", Style.cornerRadius)) / 2
+          color: picker.sameDate(model.date, picker.selectedDate)
+            ? renderer.prop("accent", Color.accent) : "transparent"
+          opacity: model.month === monthGrid.month ? 1 : 0.35
+
+          Text {
+            anchors.centerIn: parent
+            text: model.day
+            color: picker.sameDate(model.date, picker.selectedDate)
+              ? renderer.prop("background", Color.popups.background)
+              : renderer.prop("foreground", renderer.foreground)
+            font.family: String(renderer.prop("font_family", renderer.fontFamily))
+            font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+          }
+        }
+
+        onClicked: function(date) {
+          if (!picker.withinBounds(date)) return
+          picker.selectedDate = date
+          var value = picker.isoDate(date)
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: value })
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value })
+          if (renderer.prop("close_on_select", true) !== false) calendarPopup.close()
+        }
+      }
+    }
+  }
+}

data/Components/Builtins/DayOfWeekRow.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.DayOfWeekRow {
+  id: dayRoot
+  property var renderer: null
+  implicitWidth: Number(renderer ? renderer.prop("width", 320) : 320); implicitHeight: Number(renderer ? renderer.prop("height", 36) : 36)
+  locale: Qt.locale(String(renderer ? renderer.prop("locale", Qt.locale().name) : Qt.locale().name))
+  delegate: Rectangle { required property var model; color: renderer.prop("background", "transparent"); Text { anchors.fill: parent; text: model.shortName; color: renderer.prop("foreground", renderer.prop("muted", renderer.foreground)); font.family: renderer.prop("font_family", renderer.fontFamily); font.pixelSize: Number(renderer.prop("font_size", Style.font.body)); horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter } TapHandler { onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "day_click", { day: model.day, name: model.longName }) } }
+}

data/Components/Builtins/DelayButton.qml

@@ -0,0 +1,47 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.DelayButton {
+  required property var renderer
+      id: nativeDelayButton
+      text: String(renderer.prop("text", ""))
+      delay: Number(renderer.prop("delay", 1000))
+      enabled: renderer.prop("enabled", true) !== false
+      implicitWidth: Number(renderer.prop("width", 140))
+      implicitHeight: Number(renderer.prop("height", 40))
+      background: Rectangle {
+        radius: Style.cornerRadius
+        color: renderer.prop("background", Color.popups.background)
+        border.width: Style.normalBorderWidth
+        border.color: nativeDelayButton.activeFocus ? renderer.prop("accent", Color.accent) : renderer.prop("foreground", renderer.foreground)
+        Rectangle {
+          width: parent.width * nativeDelayButton.progress
+          height: parent.height
+          radius: parent.radius
+          color: renderer.prop("progress_background", renderer.prop("accent", Color.accent))
+          opacity: 0.45
+        }
+      }
+      contentItem: Text {
+        text: nativeDelayButton.text
+        textFormat: Text.PlainText
+        color: renderer.prop("foreground", renderer.foreground)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        font.bold: true
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+      }
+      onActivated: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", {})
+      onProgressChanged: {
+        if (renderer.subscribed("progress")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "progress", { value: progress })
+      }
+      onPressed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", {})
+      onReleased: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", {})
+      onCanceled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "cancel", {})
+    }