zui 0.0.1

data/Components/Builtins/DelegateModel.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtQml.Models
+
+Item {
+  id:modelRoot;property var renderer:null;property alias model:nativeDelegateModel
+  function rebuild(){sourceModel.clear();var items=renderer?renderer.prop("items",[]):[];for(var i=0;i<items.length;i++){var item=items[i];sourceModel.append(item!==null&&typeof item==="object"&&!Array.isArray(item)?item:{value:item})}if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"count_change",{value:nativeDelegateModel.count})}
+  ListModel{id:sourceModel}
+  DelegateModel{id:nativeDelegateModel;model:sourceModel;filterOnGroup:String(renderer?renderer.prop("filter_group","items"):"items");delegate:Item{required property int index;property var sourceIndex:index}}
+  Component.onCompleted:rebuild();Connections{target:renderer;function onNodeChanged(){modelRoot.rebuild()}}
+}

data/Components/Builtins/DelegateModelGroup.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtQml.Models
+
+Item {
+  id:groupRoot;property var renderer:null;property alias model:nativeDelegateModel;property alias group:nativeGroup
+  function rebuild(){sourceModel.clear();var items=renderer?renderer.prop("items",[]):[];for(var i=0;i<items.length;i++){var item=items[i];sourceModel.append(item!==null&&typeof item==="object"&&!Array.isArray(item)?item:{value:item})}if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"count_change",{value:nativeGroup.count})}
+  ListModel{id:sourceModel}
+  DelegateModel{id:nativeDelegateModel;model:sourceModel;delegate:Item{required property int index} groups:[DelegateModelGroup{id:nativeGroup;name:String(renderer?renderer.prop("name","group"):"group");includeByDefault:renderer&&renderer.prop("include_by_default",false)===true;onCountChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"change",{value:count})}]}
+  Component.onCompleted:rebuild();Connections{target:renderer;function onNodeChanged(){groupRoot.rebuild()}}
+}

data/Components/Builtins/Dial.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.Dial {
+  required property var renderer
+      id: nativeDial
+      from: Number(renderer.prop("minimum", 0))
+      to: Number(renderer.prop("maximum", 1))
+      value: Number(renderer.prop("value", from))
+      stepSize: Number(renderer.prop("step", 0))
+      startAngle: Number(renderer.prop("start_angle", -140))
+      endAngle: Number(renderer.prop("end_angle", 140))
+      snapMode: {
+        var mode = String(renderer.prop("snap", "none"))
+        if (mode === "always") return QQC.Dial.SnapAlways
+        if (mode === "release") return QQC.Dial.SnapOnRelease
+        return QQC.Dial.NoSnap
+      }
+      wrap: renderer.prop("wrap", false) === true
+      live: renderer.prop("live", true) !== false
+      inputMode: {
+        var mode = String(renderer.prop("input_mode", "circular"))
+        if (mode === "horizontal") return QQC.Dial.Horizontal
+        if (mode === "vertical") return QQC.Dial.Vertical
+        return QQC.Dial.Circular
+      }
+      implicitWidth: Number(renderer.prop("size", 100))
+      implicitHeight: implicitWidth
+      palette.windowText: renderer.prop("foreground", renderer.foreground)
+      palette.button: renderer.prop("background", Color.popups.background)
+      palette.highlight: renderer.prop("accent", Color.accent)
+      onMoved: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: value, angle: angle })
+      onPressedChanged: {
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, pressed ? "press" : "release", { value: value })
+        if (!pressed) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value })
+      }
+    }

data/Components/Builtins/Dialog.qml

@@ -0,0 +1,128 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Dialog {
+  id: dialogRoot
+
+  required property var renderer
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+  readonly property string contentLayout: String(renderer.prop("layout", "column"))
+  readonly property bool centered: renderer.prop("centered", true) !== false
+  readonly property bool hasExplicitX: renderer.node && renderer.node.props
+    && renderer.node.props.x !== undefined
+  readonly property bool hasExplicitY: renderer.node && renderer.node.props
+    && renderer.node.props.y !== undefined
+
+  function standardButtonsValue(value) {
+    var names = Array.isArray(value) ? value : (value === null || value === undefined ? [] : [value])
+    var result = QQC.Dialog.NoButton
+    for (var index = 0; index < names.length; index++) {
+      var name = String(names[index])
+      if (name === "ok") result |= QQC.Dialog.Ok
+      else if (name === "save") result |= QQC.Dialog.Save
+      else if (name === "save_all") result |= QQC.Dialog.SaveAll
+      else if (name === "open") result |= QQC.Dialog.Open
+      else if (name === "yes") result |= QQC.Dialog.Yes
+      else if (name === "yes_to_all") result |= QQC.Dialog.YesToAll
+      else if (name === "no") result |= QQC.Dialog.No
+      else if (name === "no_to_all") result |= QQC.Dialog.NoToAll
+      else if (name === "abort") result |= QQC.Dialog.Abort
+      else if (name === "retry") result |= QQC.Dialog.Retry
+      else if (name === "ignore") result |= QQC.Dialog.Ignore
+      else if (name === "close") result |= QQC.Dialog.Close
+      else if (name === "cancel") result |= QQC.Dialog.Cancel
+      else if (name === "discard") result |= QQC.Dialog.Discard
+      else if (name === "help") result |= QQC.Dialog.Help
+      else if (name === "apply") result |= QQC.Dialog.Apply
+      else if (name === "reset") result |= QQC.Dialog.Reset
+      else if (name === "restore_defaults") result |= QQC.Dialog.RestoreDefaults
+    }
+    return result
+  }
+
+  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
+    }
+    return result
+  }
+
+  function syncOpenState() {
+    if (requestedOpen === opened) return
+    if (requestedOpen) open()
+    else close()
+  }
+
+  title: String(renderer.prop("title", ""))
+  standardButtons: standardButtonsValue(renderer.prop("standard_buttons", ["ok", "cancel"]))
+  parent: QQC.Overlay.overlay
+  x: hasExplicitX ? Number(renderer.prop("x", 0))
+    : (centered && parent ? Math.round((parent.width - width) / 2) : 0)
+  y: hasExplicitY ? Number(renderer.prop("y", 0))
+    : (centered && parent ? Math.round((parent.height - height) / 2) : 0)
+  width: Number(renderer.prop("width", 480))
+  height: Number(renderer.prop("height", 320))
+  modal: renderer.prop("modal", true) !== false
+  dim: renderer.prop("dim", modal) !== false
+  focus: renderer.prop("focus", true) !== false
+  closePolicy: closePolicyValue(renderer.prop("close_policy", "escape_and_outside"))
+  enabled: renderer.prop("enabled", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.lg))
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+
+  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")
+  }
+
+  contentItem: Loader {
+    sourceComponent: dialogRoot.contentLayout === "row" ? rowContent
+      : (dialogRoot.contentLayout === "stack" ? stackContent : columnContent)
+  }
+
+  Component {
+    id: columnContent
+    Column {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+  Component {
+    id: rowContent
+    Row {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+  Component {
+    id: stackContent
+    Item { Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent } }
+  }
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+  onAccepted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", {})
+  onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {})
+  onApplied: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "apply", {})
+  onReset: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reset", {})
+  onDiscarded: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "discard", {})
+  onHelpRequested: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "help", {})
+  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", {})
+  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/DialogButtonBox.qml

@@ -0,0 +1,137 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.DialogButtonBox {
+  id: box
+
+  required property var renderer
+
+  function standardButtonValue(name) {
+    var key = String(name || "").toLowerCase()
+    if (key === "ok") return QQC.DialogButtonBox.Ok
+    if (key === "save") return QQC.DialogButtonBox.Save
+    if (key === "save_all") return QQC.DialogButtonBox.SaveAll
+    if (key === "open") return QQC.DialogButtonBox.Open
+    if (key === "yes") return QQC.DialogButtonBox.Yes
+    if (key === "yes_to_all") return QQC.DialogButtonBox.YesToAll
+    if (key === "no") return QQC.DialogButtonBox.No
+    if (key === "no_to_all") return QQC.DialogButtonBox.NoToAll
+    if (key === "abort") return QQC.DialogButtonBox.Abort
+    if (key === "retry") return QQC.DialogButtonBox.Retry
+    if (key === "ignore") return QQC.DialogButtonBox.Ignore
+    if (key === "close") return QQC.DialogButtonBox.Close
+    if (key === "cancel") return QQC.DialogButtonBox.Cancel
+    if (key === "discard") return QQC.DialogButtonBox.Discard
+    if (key === "help") return QQC.DialogButtonBox.Help
+    if (key === "apply") return QQC.DialogButtonBox.Apply
+    if (key === "reset") return QQC.DialogButtonBox.Reset
+    if (key === "restore_defaults") return QQC.DialogButtonBox.RestoreDefaults
+    return QQC.DialogButtonBox.NoButton
+  }
+
+  function standardButtonsValue(values) {
+    var result = QQC.DialogButtonBox.NoButton
+    var buttons = Array.isArray(values) ? values : [values]
+    for (var index = 0; index < buttons.length; index++) result |= standardButtonValue(buttons[index])
+    return result
+  }
+
+  function roleValue(value) {
+    var key = String(value || "action").toLowerCase()
+    if (key === "accept") return QQC.DialogButtonBox.AcceptRole
+    if (key === "reject") return QQC.DialogButtonBox.RejectRole
+    if (key === "destructive") return QQC.DialogButtonBox.DestructiveRole
+    if (key === "help") return QQC.DialogButtonBox.HelpRole
+    if (key === "yes") return QQC.DialogButtonBox.YesRole
+    if (key === "no") return QQC.DialogButtonBox.NoRole
+    if (key === "reset") return QQC.DialogButtonBox.ResetRole
+    if (key === "apply") return QQC.DialogButtonBox.ApplyRole
+    return QQC.DialogButtonBox.ActionRole
+  }
+
+  function alignmentValue(value) {
+    var key = String(value || "right")
+    if (key === "left" || key === "start") return Qt.AlignLeft
+    if (key === "center") return Qt.AlignHCenter
+    if (key === "justify") return Qt.AlignJustify
+    return Qt.AlignRight
+  }
+
+  function buttonPayload(button) {
+    return {
+      text: button ? button.text : "",
+      role: button ? buttonRole(button) : QQC.DialogButtonBox.InvalidRole,
+      standard_button: button ? standardButton(button) : QQC.DialogButtonBox.NoButton
+    }
+  }
+
+  standardButtons: standardButtonsValue(renderer.prop("buttons", []))
+  alignment: renderer.prop("centered", false) === true
+    ? Qt.AlignHCenter : alignmentValue(renderer.prop("alignment", "right"))
+  position: String(renderer.prop("position", "footer")) === "header"
+    ? QQC.DialogButtonBox.Header : QQC.DialogButtonBox.Footer
+  spacing: Number(renderer.prop("spacing", Style.spacing.sm))
+  implicitWidth: Number(renderer.prop("width", contentItem ? contentItem.implicitWidth : 240))
+  implicitHeight: Number(renderer.prop("height", contentItem ? contentItem.implicitHeight : 44))
+  enabled: renderer.prop("enabled", true) !== false
+
+  background: Rectangle {
+    color: renderer.prop("background", "transparent")
+  }
+
+  contentItem: ListView {
+    implicitWidth: orientation === ListView.Horizontal ? contentWidth : widestItem
+    implicitHeight: orientation === ListView.Vertical ? contentHeight : tallestItem
+    model: box.contentModel
+    spacing: box.spacing
+    orientation: String(renderer.prop("orientation", "horizontal")) === "vertical"
+      ? ListView.Vertical : ListView.Horizontal
+    boundsBehavior: Flickable.StopAtBounds
+    snapMode: ListView.SnapToItem
+    readonly property real widestItem: {
+      var result = 0
+      for (var index = 0; index < count; index++) {
+        var child = itemAtIndex(index)
+        if (child) result = Math.max(result, child.implicitWidth)
+      }
+      return result
+    }
+    readonly property real tallestItem: {
+      var result = 0
+      for (var index = 0; index < count; index++) {
+        var child = itemAtIndex(index)
+        if (child) result = Math.max(result, child.implicitHeight)
+      }
+      return result
+    }
+  }
+
+  delegate: QQC.Button {
+    id: standardDelegate
+    font.family: String(renderer.prop("font_family", renderer.fontFamily))
+    font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+    palette.buttonText: renderer.prop("foreground", renderer.foreground)
+    palette.highlight: renderer.prop("accent", Color.accent)
+  }
+
+  Repeater {
+    model: renderer.prop("custom_buttons", [])
+    delegate: QQC.Button {
+      required property var modelData
+      text: String(modelData && modelData.text !== undefined ? modelData.text : modelData)
+      QQC.DialogButtonBox.buttonRole: box.roleValue(modelData && modelData.role !== undefined ? modelData.role : "action")
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      palette.buttonText: renderer.prop("foreground", renderer.foreground)
+      palette.highlight: renderer.prop("accent", Color.accent)
+    }
+  }
+
+  onClicked: function(button) {
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", box.buttonPayload(button))
+  }
+  onAccepted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", {})
+  onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {})
+  onHelpRequested: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "help", {})
+}

data/Components/Builtins/Divider.qml

@@ -0,0 +1,26 @@
+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
+      readonly property bool vertical: String(renderer.prop("orientation", "horizontal")) === "vertical"
+      readonly property real lineLength: Number(renderer.prop("length", 240))
+      readonly property real lineThickness: Number(renderer.prop("thickness", Style.normalBorderWidth))
+      readonly property real leadingIndent: Number(renderer.prop("indent", 0))
+      readonly property real trailingIndent: Number(renderer.prop("end_indent", 0))
+      implicitWidth: vertical ? lineThickness : lineLength
+      implicitHeight: vertical ? lineLength : lineThickness
+      Rectangle {
+        x: parent.vertical ? 0 : parent.leadingIndent
+        y: parent.vertical ? parent.leadingIndent : 0
+        width: parent.vertical ? parent.lineThickness : Math.max(0, parent.width - parent.leadingIndent - parent.trailingIndent)
+        height: parent.vertical ? Math.max(0, parent.height - parent.leadingIndent - parent.trailingIndent) : parent.lineThickness
+        color: renderer.prop("color", renderer.foreground)
+        opacity: Number(renderer.prop("opacity", 0.2))
+      }
+    }

data/Components/Builtins/DonutChart.qml

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

data/Components/Builtins/DoubleSpinBox.qml

@@ -0,0 +1,58 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.SpinBox {
+  id: nativeDoubleSpinBox
+  required property var renderer
+
+  readonly property int decimalPlaces: Math.max(0, Math.min(9,
+    Number(renderer.prop("decimals", 2))))
+  readonly property real scaleFactor: Math.pow(10, decimalPlaces)
+  readonly property real realValue: value / scaleFactor
+
+  from: Math.round(Number(renderer.prop("minimum", 0)) * scaleFactor)
+  to: Math.round(Number(renderer.prop("maximum", 100)) * scaleFactor)
+  value: Math.round(Number(renderer.prop("value", from / scaleFactor)) * scaleFactor)
+  stepSize: Math.max(1, Math.round(Number(renderer.prop("step", 0.1)) * scaleFactor))
+  editable: renderer.prop("editable", true) !== false
+  wrap: renderer.prop("wrap", false) === true
+  enabled: renderer.prop("enabled", true) !== false
+  implicitWidth: Number(renderer.prop("width", 160))
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+  palette.text: renderer.prop("foreground", renderer.foreground)
+  palette.buttonText: renderer.prop("foreground", renderer.foreground)
+  palette.button: renderer.prop("background", Color.popups.background)
+  palette.highlight: renderer.prop("accent", Color.accent)
+
+  textFromValue: function(scaledValue, locale) {
+    return String(renderer.prop("prefix", ""))
+      + Number(scaledValue / scaleFactor).toLocaleString(locale, "f", decimalPlaces)
+      + String(renderer.prop("suffix", ""))
+  }
+
+  valueFromText: function(text, locale) {
+    var prefix = String(renderer.prop("prefix", ""))
+    var suffix = String(renderer.prop("suffix", ""))
+    var numeric = String(text)
+    if (prefix.length > 0 && numeric.indexOf(prefix) === 0)
+      numeric = numeric.slice(prefix.length)
+    if (suffix.length > 0 && numeric.lastIndexOf(suffix) === numeric.length - suffix.length)
+      numeric = numeric.slice(0, -suffix.length)
+    return Math.round(Number.fromLocaleString(locale, numeric) * scaleFactor)
+  }
+
+  onValueModified: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    "change", { value: realValue })
+  up.onPressedChanged: {
+    if (up.pressed)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+        "increase", { value: realValue })
+  }
+  down.onPressedChanged: {
+    if (down.pressed)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+        "decrease", { value: realValue })
+  }
+}

data/Components/Builtins/DragArea.qml

@@ -0,0 +1,43 @@
+import QtQuick
+
+Item {
+  id: dragRoot
+  property var renderer: null
+  function cursorShape(name) { var value=String(name||"size_all");if(value==="arrow")return Qt.ArrowCursor;if(value==="pointing_hand")return Qt.PointingHandCursor;if(value==="open_hand")return Qt.OpenHandCursor;if(value==="closed_hand")return Qt.ClosedHandCursor;if(value==="horizontal")return Qt.SizeHorCursor;if(value==="vertical")return Qt.SizeVerCursor;return Qt.SizeAllCursor }
+  implicitWidth: Number(renderer ? renderer.prop("width", contentHost.childrenRect.width) : 120)
+  implicitHeight: Number(renderer ? renderer.prop("height", contentHost.childrenRect.height) : 80)
+  property int resetRevision: Number(renderer ? renderer.prop("reset_revision", 0) : 0)
+  onResetRevisionChanged: {
+    var item = nativeDrag.target
+    if (item) { item.x = 0; item.y = 0 }
+  }
+  Item { id: contentHost; anchors.fill: parent; Repeater { model: renderer ? (renderer.node.children || []) : []; delegate: renderer.childDelegateComponent } }
+  TapHandler {
+    id: nativeTap
+    enabled: renderer && renderer.prop("enabled", true) !== false
+    onTapped: function(point, button) {
+      if (renderer.subscribed("click")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { x: point.position.x, y: point.position.y, button: button })
+    }
+    onDoubleTapped: function(point, button) {
+      if (renderer.subscribed("double_click")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "double_click", { x: point.position.x, y: point.position.y, button: button })
+    }
+  }
+  DragHandler {
+    id: nativeDrag
+    enabled: renderer && renderer.prop("enabled", true) !== false
+    target: { var id = renderer ? String(renderer.prop("target", "")) : ""; return id === "" ? contentHost : renderer.findRenderedItem(id) }
+    xAxis.enabled: !renderer || ["both", "horizontal", "x"].indexOf(String(renderer.prop("axis", "both"))) >= 0
+    yAxis.enabled: !renderer || ["both", "vertical", "y"].indexOf(String(renderer.prop("axis", "both"))) >= 0
+    xAxis.minimum: Number(renderer ? renderer.prop("minimum_x", -Infinity) : -Infinity); xAxis.maximum: Number(renderer ? renderer.prop("maximum_x", Infinity) : Infinity)
+    yAxis.minimum: Number(renderer ? renderer.prop("minimum_y", -Infinity) : -Infinity); yAxis.maximum: Number(renderer ? renderer.prop("maximum_y", Infinity) : Infinity)
+    dragThreshold: Number(renderer ? renderer.prop("threshold", 8) : 8)
+    cursorShape: dragRoot.cursorShape(renderer ? renderer.prop("cursor", "size_all") : "size_all")
+    onActiveChanged: {
+      var payload = { x: translation.x, y: translation.y, centroid_x: centroid.position.x, centroid_y: centroid.position.y }
+      if (!active && target) { var snapX=Number(renderer.prop("snap_x",0));var snapY=Number(renderer.prop("snap_y",0));if(snapX>0)target.x=Math.round(target.x/snapX)*snapX;if(snapY>0)target.y=Math.round(target.y/snapY)*snapY;payload.target_x=target.x;payload.target_y=target.y }
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, active ? "drag_start" : "drag_end", payload)
+    }
+    onTranslationChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "drag", { x: translation.x, y: translation.y, centroid_x: centroid.position.x, centroid_y: centroid.position.y })
+    onCanceled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "cancel", {})
+  }
+}

data/Components/Builtins/Drawer.qml

@@ -0,0 +1,107 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Drawer {
+  id: drawerRoot
+
+  required property var renderer
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+  readonly property string contentLayout: String(renderer.prop("layout", "column"))
+  property bool synchronizing: false
+
+  function edgeValue(value) {
+    var name = String(value || "left")
+    if (name === "right") return Qt.RightEdge
+    if (name === "top") return Qt.TopEdge
+    if (name === "bottom") return Qt.BottomEdge
+    return Qt.LeftEdge
+  }
+
+  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 === "none") continue
+      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 === opened) return
+    synchronizing = true
+    if (requestedOpen) open()
+    else close()
+    synchronizing = false
+  }
+
+  edge: edgeValue(renderer.prop("edge", "left"))
+  modal: renderer.prop("modal", true) !== false
+  dim: renderer.prop("dim", modal) !== false
+  interactive: renderer.prop("interactive", true) !== false
+  dragMargin: Number(renderer.prop("drag_margin", Qt.styleHints.startDragDistance))
+  closePolicy: closePolicyValue(renderer.prop("close_policy", "escape_and_outside"))
+  width: Number(renderer.prop("width", edge === Qt.LeftEdge || edge === Qt.RightEdge ? 360 : 640))
+  height: Number(renderer.prop("height", edge === Qt.TopEdge || edge === Qt.BottomEdge ? 280 : 640))
+  enabled: renderer.prop("enabled", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.lg))
+
+  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")
+  }
+
+  contentItem: Loader {
+    sourceComponent: drawerRoot.contentLayout === "row" ? rowContent
+      : (drawerRoot.contentLayout === "stack" ? stackContent : columnContent)
+  }
+
+  Component {
+    id: columnContent
+    Column {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: rowContent
+    Row {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: stackContent
+    Item {
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+  onOpened: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open",
+    { value: true, position: position })
+  onClosed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close",
+    { value: false, position: position })
+  onAboutToShow: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_show", {})
+  onAboutToHide: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_hide", {})
+  onPositionChanged: {
+    if (renderer.subscribed("position_change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "position_change", { value: position })
+  }
+  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/DropArea.qml

@@ -0,0 +1,19 @@
+import QtQuick
+
+Item {
+  id: dropRoot
+  property var renderer: null
+  implicitWidth: Number(renderer ? renderer.prop("width", contentHost.childrenRect.width) : 160)
+  implicitHeight: Number(renderer ? renderer.prop("height", contentHost.childrenRect.height) : 100)
+  Item { id: contentHost; anchors.fill: parent; Repeater { model: renderer ? (renderer.node.children || []) : []; delegate: renderer.childDelegateComponent } }
+  DropArea {
+    anchors.fill: parent
+    enabled: renderer && renderer.prop("enabled", true) !== false
+    keys: renderer ? renderer.prop("keys", []) : []
+    function payload(drag) { return { x: drag.x, y: drag.y, keys: drag.keys, formats: drag.formats, text: drag.hasText ? drag.text : null, urls: drag.hasUrls ? drag.urls.map(String) : [] } }
+    onEntered: function(drag) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "enter", payload(drag)) }
+    onPositionChanged: function(drag) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "move", payload(drag)) }
+    onExited: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "exit", {})
+    onDropped: function(drop) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "drop", payload(drop)); drop.acceptProposedAction() }
+  }
+}

data/Components/Builtins/DropShadow.qml

@@ -0,0 +1,16 @@
+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; shadowEnabled: true
+    shadowBlur: Number(renderer.prop("blur", 1)); blurMax: Number(renderer.prop("maximum", 32)); blurMultiplier: Number(renderer.prop("multiplier", 1))
+    shadowHorizontalOffset: Number(renderer.prop("horizontal_offset", 0)); shadowVerticalOffset: Number(renderer.prop("vertical_offset", 4))
+    shadowColor: renderer.prop("color", "black"); shadowOpacity: Number(renderer.prop("opacity", 0.6)); shadowScale: Number(renderer.prop("scale", 1))
+    autoPaddingEnabled: renderer.prop("auto_padding", true) !== false
+  }
+}

data/Components/Builtins/Dropdown.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.Dropdown {
+  required property var renderer
+      label: renderer.escapeAutoText(renderer.prop("label", "")); value: String(renderer.prop("value", "")); options: renderer.prop("options", [])
+      width: Number(renderer.prop("width", 240)); foreground: renderer.prop("foreground", renderer.foreground)
+      background: renderer.prop("background", Color.popups.background); popupBorder: renderer.prop("popup_border", Color.popups.border)
+      accent: renderer.prop("accent", Color.accent); fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+      rowHeight: Number(renderer.prop("row_height", Style.spacing.controlHeight)); popupRowHeight: Number(renderer.prop("popup_row_height", Style.spacing.popupRowHeight))
+      showLabel: renderer.prop("show_label", true) !== false; hasCursor: renderer.prop("cursor", false) === true
+      onChanged: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value }) }
+      onOptionHovered: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: value }) }
+    }