zui 0.0.1

data/Components/Builtins/ExpansionPanel.qml

@@ -0,0 +1,157 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Control {
+  id: panelRoot
+
+  required property var renderer
+  readonly property bool requestedExpanded: renderer.prop("expanded", false) === true
+  readonly property real headerHeight: Number(renderer.prop("header_height", 64))
+  readonly property real contentNaturalHeight: contentColumn.implicitHeight
+    + Number(renderer.prop("padding", Style.spacing.lg)) * 2
+  property bool expanded: false
+  property bool synchronizing: false
+
+  function syncExpanded() {
+    if (expanded === requestedExpanded) return
+    synchronizing = true
+    expanded = requestedExpanded
+    synchronizing = false
+  }
+
+  function activate() {
+    if (!enabled) return
+    expanded = !expanded
+    var payload = { value: expanded, expanded: expanded }
+    if (renderer.subscribed("toggle"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "toggle", payload)
+    if (renderer.subscribed("change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+    var direction = expanded ? "expand" : "collapse"
+    if (renderer.subscribed(direction))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, direction, payload)
+  }
+
+  implicitWidth: Number(renderer.prop("width", 560))
+  implicitHeight: renderer.prop("height", null) === null
+    ? headerHeight + (expanded ? contentNaturalHeight : 0)
+    : Number(renderer.prop("height", headerHeight + contentNaturalHeight))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+
+  background: Rectangle {
+    color: panelRoot.expanded
+      ? renderer.prop("expanded_background", renderer.prop("background", Color.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.ToolButton {
+      id: headerButton
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.top: parent.top
+      height: panelRoot.headerHeight
+      enabled: panelRoot.enabled
+      hoverEnabled: true
+      onClicked: panelRoot.activate()
+
+      contentItem: Item {
+        Text {
+          id: titleText
+          anchors.left: parent.left
+          anchors.right: indicator.left
+          anchors.top: String(renderer.prop("subtitle", "")).length > 0
+            ? parent.top : undefined
+          anchors.verticalCenter: String(renderer.prop("subtitle", "")).length === 0
+            ? parent.verticalCenter : undefined
+          text: String(renderer.prop("title", ""))
+          color: renderer.prop("foreground", renderer.foreground)
+          font.family: String(renderer.prop("font_family", renderer.fontFamily))
+          font.pixelSize: Number(renderer.prop("title_size",
+            renderer.prop("font_size", Style.font.body)))
+          font.bold: true
+          elide: Text.ElideRight
+        }
+
+        Text {
+          anchors.left: parent.left
+          anchors.right: indicator.left
+          anchors.top: titleText.bottom
+          text: String(renderer.prop("subtitle", ""))
+          visible: text.length > 0
+          color: renderer.prop("muted", Color.muted)
+          font.family: String(renderer.prop("font_family", renderer.fontFamily))
+          font.pixelSize: Number(renderer.prop("subtitle_size", Style.font.caption))
+          elide: Text.ElideRight
+        }
+
+        Text {
+          id: indicator
+          anchors.right: parent.right
+          anchors.verticalCenter: parent.verticalCenter
+          text: renderer.iconGlyph("chevron_down")
+          color: renderer.prop("accent", Color.accent)
+          font.family: renderer.fontFamily
+          font.pixelSize: Number(renderer.prop("indicator_size", Style.font.icon))
+          rotation: panelRoot.expanded ? 180 : 0
+          Behavior on rotation {
+            enabled: renderer.prop("animated", true) !== false
+            NumberAnimation {
+              duration: Number(renderer.prop("duration", 200))
+              easing.type: renderer.easingType(renderer.prop("easing", "in_out_quad"))
+            }
+          }
+        }
+      }
+
+      background: Rectangle {
+        color: renderer.prop("header_background", "transparent")
+        radius: Number(renderer.prop("radius", Style.cornerRadius))
+      }
+    }
+
+    Item {
+      id: revealedContent
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.top: headerButton.bottom
+      height: panelRoot.expanded ? panelRoot.contentNaturalHeight : 0
+      clip: true
+      opacity: panelRoot.expanded ? 1 : 0
+
+      Behavior on height {
+        enabled: renderer.prop("animated", true) !== false
+        NumberAnimation {
+          duration: Number(renderer.prop("duration", 200))
+          easing.type: renderer.easingType(renderer.prop("easing", "in_out_quad"))
+        }
+      }
+      Behavior on opacity {
+        enabled: renderer.prop("animated", true) !== false
+        NumberAnimation { duration: Number(renderer.prop("duration", 120)) }
+      }
+
+      Column {
+        id: contentColumn
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: Number(renderer.prop("padding", Style.spacing.lg))
+        spacing: Number(renderer.prop("spacing", Style.spacing.md))
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }
+  }
+
+  onRequestedExpandedChanged: syncExpanded()
+  Component.onCompleted: syncExpanded()
+  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/FilePicker.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Dialogs
+import "../../Theme"
+
+QQC.Button {
+  id: picker
+
+  required property var renderer
+  readonly property string mode: String(renderer.prop("mode", "open"))
+  readonly property bool folderMode: mode === "folder" || mode === "directory"
+
+  function fileUrl(path) {
+    var value = String(path || "")
+    if (!value.length) return ""
+    if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(value)) return value
+    return "file://" + encodeURI(value.charAt(0) === "/" ? value : "/" + value)
+  }
+
+  function localPath(url) {
+    var value = String(url || "")
+    if (value.indexOf("file://") === 0) value = value.substring(7)
+    return decodeURIComponent(value)
+  }
+
+  function selectedPaths() {
+    var paths = renderer.prop("paths", [])
+    if (Array.isArray(paths) && paths.length) return paths
+    var path = String(renderer.prop("path", ""))
+    return path.length ? [path] : []
+  }
+
+  function displayText() {
+    var paths = selectedPaths()
+    if (!paths.length) return String(renderer.prop("placeholder", folderMode ? "Choose a folder" : "Choose a file"))
+    if (paths.length > 1) return paths.length + " files"
+    var parts = String(paths[0]).split("/")
+    return parts[parts.length - 1] || String(paths[0])
+  }
+
+  function emitSelection(paths) {
+    var multiple = renderer.prop("multiple", false) === true
+    var payload = multiple ? { values: paths, value: paths.length ? paths[0] : "" }
+                           : { value: paths.length ? paths[0] : "" }
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", payload)
+  }
+
+  implicitWidth: Number(renderer.prop("width", 240))
+  implicitHeight: Number(renderer.prop("height", 40))
+  enabled: renderer.prop("enabled", true) !== false
+  onClicked: folderMode ? folderDialog.open() : fileDialog.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
+      width: Math.max(0, picker.availableWidth - x)
+      text: picker.displayText()
+      elide: Text.ElideMiddle
+      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))
+    }
+  }
+
+  FileDialog {
+    id: fileDialog
+    title: String(renderer.prop("title", mode === "save" ? "Save file" : "Choose file"))
+    fileMode: mode === "save" ? FileDialog.SaveFile
+      : (renderer.prop("multiple", false) === true ? FileDialog.OpenFiles : FileDialog.OpenFile)
+    currentFile: picker.fileUrl(renderer.prop("path", ""))
+    currentFiles: {
+      var result = []
+      var paths = renderer.prop("paths", [])
+      if (Array.isArray(paths)) for (var index = 0; index < paths.length; index++) result.push(picker.fileUrl(paths[index]))
+      return result
+    }
+    currentFolder: picker.fileUrl(renderer.prop("current_folder", ""))
+    nameFilters: renderer.prop("filters", [])
+    defaultSuffix: String(renderer.prop("default_suffix", ""))
+    acceptLabel: String(renderer.prop("accept_text", ""))
+    rejectLabel: String(renderer.prop("cancel_text", ""))
+    visible: !folderMode && renderer.prop("opened", false) === true
+    options: renderer.prop("native_dialog", true) === false ? FileDialog.DontUseNativeDialog : 0
+
+    onAccepted: {
+      var paths = []
+      for (var index = 0; index < selectedFiles.length; index++) paths.push(picker.localPath(selectedFiles[index]))
+      if (!paths.length && String(selectedFile).length) paths.push(picker.localPath(selectedFile))
+      picker.emitSelection(paths)
+    }
+    onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {})
+    onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      visible ? "open" : "close", {})
+    onCurrentFolderChanged: {
+      var value = picker.localPath(currentFolder)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "folder_change", { value: value })
+    }
+  }
+
+  FolderDialog {
+    id: folderDialog
+    title: String(renderer.prop("title", "Choose folder"))
+    currentFolder: picker.fileUrl(renderer.prop("current_folder", renderer.prop("path", "")))
+    selectedFolder: picker.fileUrl(renderer.prop("path", ""))
+    acceptLabel: String(renderer.prop("accept_text", ""))
+    rejectLabel: String(renderer.prop("cancel_text", ""))
+    visible: folderMode && renderer.prop("opened", false) === true
+    options: renderer.prop("native_dialog", true) === false ? FolderDialog.DontUseNativeDialog : 0
+
+    onAccepted: picker.emitSelection([picker.localPath(selectedFolder)])
+    onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {})
+    onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      visible ? "open" : "close", {})
+    onCurrentFolderChanged: {
+      var value = picker.localPath(currentFolder)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "folder_change", { value: value })
+    }
+  }
+}

data/Components/Builtins/FittedBox.qml

@@ -0,0 +1,40 @@
+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
+      implicitWidth: Number(renderer.prop("width", fittedContent.implicitWidth))
+      implicitHeight: Number(renderer.prop("height", fittedContent.implicitHeight))
+      clip: renderer.prop("clip", true) !== false
+
+      readonly property real sourceWidth: Math.max(0.000001, fittedContent.implicitWidth)
+      readonly property real sourceHeight: Math.max(0.000001, fittedContent.implicitHeight)
+      readonly property real availableXScale: width / sourceWidth
+      readonly property real availableYScale: height / sourceHeight
+      readonly property string fitMode: String(renderer.prop("fit", "contain"))
+      readonly property real fittedXScale: fitMode === "fill" ? availableXScale
+        : (fitMode === "none" ? 1
+        : (fitMode === "cover" ? Math.max(availableXScale, availableYScale)
+        : (fitMode === "scale_down" ? Math.min(1, Math.min(availableXScale, availableYScale))
+        : Math.min(availableXScale, availableYScale))))
+      readonly property real fittedYScale: fitMode === "fill" ? availableYScale : fittedXScale
+      readonly property string contentAlignment: String(renderer.prop("alignment", "center"))
+
+      Item {
+        id: fittedContent
+        implicitWidth: childrenRect.width
+        implicitHeight: childrenRect.height
+        x: contentAlignment.indexOf("left") >= 0 || contentAlignment === "start" ? 0
+          : (contentAlignment.indexOf("right") >= 0 || contentAlignment === "end" ? parent.width - implicitWidth * fittedXScale : (parent.width - implicitWidth * fittedXScale) / 2)
+        y: contentAlignment.indexOf("top") >= 0 || contentAlignment === "start" ? 0
+          : (contentAlignment.indexOf("bottom") >= 0 || contentAlignment === "end" ? parent.height - implicitHeight * fittedYScale : (parent.height - implicitHeight * fittedYScale) / 2)
+        transformOrigin: Item.TopLeft
+        transform: Scale { xScale: fittedXScale; yScale: fittedYScale }
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/Flickable.qml

@@ -0,0 +1,40 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Flickable {
+  required property var renderer
+      implicitWidth: Number(renderer.prop("width", 320))
+      implicitHeight: Number(renderer.prop("height", 240))
+      contentWidth: Number(renderer.prop("content_width", flickContent.implicitWidth))
+      contentHeight: Number(renderer.prop("content_height", flickContent.implicitHeight))
+      flickableDirection: {
+        var direction = String(renderer.prop("direction", "vertical"))
+        if (direction === "horizontal") return Flickable.HorizontalFlick
+        if (direction === "both") return Flickable.HorizontalAndVerticalFlick
+        if (direction === "auto") return Flickable.AutoFlickDirection
+        return Flickable.VerticalFlick
+      }
+      boundsBehavior: String(renderer.prop("bounds_behavior", "stop")) === "overshoot"
+        ? Flickable.DragAndOvershootBounds : Flickable.StopAtBounds
+      interactive: renderer.prop("interactive", true) !== false
+      clip: renderer.prop("clip", true) !== false
+      function positionPayload() { return { x: contentX, y: contentY } }
+      onContentXChanged: {
+        if (renderer.subscribed("scroll")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "scroll", positionPayload())
+      }
+      onContentYChanged: {
+        if (renderer.subscribed("scroll")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "scroll", positionPayload())
+      }
+      onMovementStarted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "flick_start", positionPayload())
+      onMovementEnded: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "flick_end", positionPayload())
+      Column {
+        id: flickContent
+        spacing: Style.spacing.panelGap
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/Flipable.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Flipable {
+  required property var renderer
+      id: nativeFlipable
+      implicitWidth: Number(renderer.prop("width", Math.max(frontFace.implicitWidth, backFace.implicitWidth)))
+      implicitHeight: Number(renderer.prop("height", Math.max(frontFace.implicitHeight, backFace.implicitHeight)))
+      readonly property bool flipped: renderer.prop("flipped", false) === true
+      readonly property bool verticalAxis: String(renderer.prop("axis", "vertical")) === "vertical"
+      front: Loader {
+        id: frontFace
+        source: renderer.node && renderer.node.children && renderer.node.children.length > 0 ? Qt.resolvedUrl("../../ControlNode.qml") : ""
+        onLoaded: renderer.configureFace(item, renderer.node.children[0])
+      }
+      back: Loader {
+        id: backFace
+        source: renderer.node && renderer.node.children && renderer.node.children.length > 1 ? Qt.resolvedUrl("../../ControlNode.qml") : ""
+        onLoaded: renderer.configureFace(item, renderer.node.children[1])
+      }
+      transform: Rotation {
+        id: flipRotation
+        origin.x: nativeFlipable.width / 2
+        origin.y: nativeFlipable.height / 2
+        axis.x: nativeFlipable.verticalAxis ? 0 : 1
+        axis.y: nativeFlipable.verticalAxis ? 1 : 0
+        axis.z: 0
+        angle: nativeFlipable.flipped ? 180 : 0
+        Behavior on angle {
+          NumberAnimation {
+            duration: Number(renderer.prop("duration", 300))
+            easing.type: renderer.easingType(renderer.prop("easing", "in_out_quad"))
+          }
+        }
+      }
+      TapHandler {
+        enabled: renderer.prop("interactive", false) === true
+        onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: !nativeFlipable.flipped })
+      }
+    }

data/Components/Builtins/Flow.qml

@@ -0,0 +1,16 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Flow {
+  required property var renderer
+      width: Number(renderer.prop("width", 420))
+      height: renderer.prop("height", null) === null ? childrenRect.height : Number(renderer.prop("height", childrenRect.height))
+      spacing: Number(renderer.prop("spacing", Style.spacing.controlGap))
+      flow: String(renderer.prop("orientation", "horizontal")) === "vertical" ? Flow.TopToBottom : Flow.LeftToRight
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }

data/Components/Builtins/FocusScope.qml

@@ -0,0 +1,29 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+FocusScope {
+  required property var renderer
+      id: nativeFocusScope
+      implicitWidth: Number(renderer.prop("width", focusContent.implicitWidth))
+      implicitHeight: Number(renderer.prop("height", focusContent.implicitHeight))
+      focus: renderer.prop("focus", false) === true
+      function syncRequestedFocus() {
+        if (renderer.prop("active_focus", false) === true) forceActiveFocus()
+      }
+      onActiveFocusChanged: {
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, activeFocus ? "focus" : "blur", { value: activeFocus })
+      }
+      Component.onCompleted: syncRequestedFocus()
+      Connections { target: root; function onNodeChanged() { nativeFocusScope.syncRequestedFocus() } }
+      Item {
+        id: focusContent
+        implicitWidth: childrenRect.width
+        implicitHeight: childrenRect.height
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/FolderListModel.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import Qt.labs.folderlistmodel
+
+Item {
+  id:folderRoot;property var renderer:null;property alias model:nativeModel
+  function sortField(){var value=String(renderer?renderer.prop("sort_field","name"):"name");if(value==="time")return FolderListModel.Time;if(value==="size")return FolderListModel.Size;if(value==="type")return FolderListModel.Type;if(value==="unsorted")return FolderListModel.Unsorted;return FolderListModel.Name}
+  function entries(){var result=[];for(var i=0;i<nativeModel.count;i++)result.push({name:nativeModel.get(i,"fileName"),base_name:nativeModel.get(i,"fileBaseName"),url:String(nativeModel.get(i,"fileUrl")),path:nativeModel.get(i,"filePath"),size:nativeModel.get(i,"fileSize"),modified:String(nativeModel.get(i,"fileModified")),is_dir:nativeModel.get(i,"fileIsDir")});return result}
+  FolderListModel{id:nativeModel;folder:renderer?renderer.assetUrl(renderer.prop("folder","")):"";rootFolder:renderer?renderer.assetUrl(renderer.prop("root_folder","")):"";nameFilters:renderer?renderer.prop("name_filters",[]):[];showFiles:!renderer||renderer.prop("show_files",true)!==false;showDirs:!renderer||renderer.prop("show_dirs",true)!==false;showDirsFirst:!renderer||renderer.prop("show_dirs_first",true)!==false;showDotAndDotDot:renderer&&renderer.prop("show_dot_and_dot_dot",false)===true;showHidden:renderer&&renderer.prop("show_hidden",false)===true;showOnlyReadable:!renderer||renderer.prop("show_only_readable",true)!==false;sortField:folderRoot.sortField();sortReversed:renderer&&renderer.prop("sort_reversed",false)===true;caseSensitive:renderer&&renderer.prop("case_sensitive",false)===true;onCountChanged:if(renderer){renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"count_change",{value:count});renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"change",{values:folderRoot.entries()})} onFolderChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"folder_change",{value:String(folder),parent:String(parentFolder)});onStatusChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"status",{value:status})}
+}

data/Components/Builtins/FolderPicker.qml

@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Dialogs
+import "../../Theme"
+
+QQC.Button {
+  id: picker
+
+  required property var renderer
+
+  function folderUrl(path) {
+    var value = String(path || "")
+    if (!value.length) return ""
+    if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(value)) return value
+    return "file://" + encodeURI(value.charAt(0) === "/" ? value : "/" + value)
+  }
+
+  function localPath(url) {
+    var value = String(url || "")
+    if (value.indexOf("file://") === 0) value = value.substring(7)
+    return decodeURIComponent(value)
+  }
+
+  function displayText() {
+    var path = String(renderer.prop("path", ""))
+    if (!path.length) return String(renderer.prop("placeholder", "Choose a folder"))
+    var parts = path.split("/")
+    return parts[parts.length - 1] || path
+  }
+
+  function emitSelection(path) {
+    var payload = { value: path }
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", payload)
+  }
+
+  implicitWidth: Number(renderer.prop("width", 240))
+  implicitHeight: Number(renderer.prop("height", 40))
+  enabled: renderer.prop("enabled", true) !== false
+  onClicked: folderDialog.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
+      width: Math.max(0, picker.availableWidth - x)
+      text: picker.displayText()
+      elide: Text.ElideMiddle
+      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))
+    }
+  }
+
+  FolderDialog {
+    id: folderDialog
+    title: String(renderer.prop("title", "Choose folder"))
+    currentFolder: picker.folderUrl(renderer.prop("current_folder", renderer.prop("path", "")))
+    selectedFolder: picker.folderUrl(renderer.prop("path", ""))
+    acceptLabel: String(renderer.prop("accept_text", ""))
+    rejectLabel: String(renderer.prop("cancel_text", ""))
+    visible: renderer.prop("opened", false) === true
+    options: renderer.prop("native_dialog", true) === false ? FolderDialog.DontUseNativeDialog : 0
+
+    onAccepted: picker.emitSelection(picker.localPath(selectedFolder))
+    onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {})
+    onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      visible ? "open" : "close", {})
+    onCurrentFolderChanged: {
+      var value = picker.localPath(currentFolder)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "folder_change", { value: value })
+    }
+  }
+}

data/Components/Builtins/FontLoader.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
+
+Item {
+  required property var renderer
+      implicitWidth: 0
+      implicitHeight: 0
+      FontLoader {
+        source: String(renderer.prop("source", ""))
+        onStatusChanged: {
+          if (renderer.subscribed("status")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "status", { value: status, name: name })
+          if (status === FontLoader.Ready && renderer.subscribed("loaded")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "loaded", { name: name })
+          if (status === FontLoader.Error) renderer.componentError("font_load_failed", "Unable to load the declared font", { source: String(source) })
+        }
+      }
+    }