zui 0.0.1

data/Components/Builtins/SwitchDelegate.qml

@@ -0,0 +1,140 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import "../../Theme"
+
+QQC.SwitchDelegate {
+  id: switchRoot
+
+  required property var renderer
+  readonly property bool selected: renderer.prop("selected", false) === true
+  readonly property real indicatorWidth: Number(renderer.prop("indicator_width", 44))
+  readonly property real indicatorHeight: Number(renderer.prop("indicator_height", 24))
+
+  function eventPayload() {
+    return {
+      text: text,
+      value: renderer.prop("value", text),
+      checked: checked,
+      selected: selected
+    }
+  }
+
+  text: String(renderer.prop("text", ""))
+  checked: renderer.prop("checked", false) === true
+  highlighted: renderer.prop("highlighted", selected) === true
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  hoverEnabled: true
+  implicitWidth: Number(renderer.prop("width", 320))
+  implicitHeight: Number(renderer.prop("height", 56))
+  padding: Number(renderer.prop("padding", Style.spacing.md))
+  rightPadding: padding + indicatorWidth + Number(renderer.prop("spacing", Style.spacing.md))
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+  Accessible.name: String(renderer.prop("accessible_name", text))
+
+  background: Rectangle {
+    color: switchRoot.highlighted
+      ? renderer.prop("highlighted_background", renderer.prop("selected_background", Color.popups.background))
+      : (switchRoot.selected
+        ? renderer.prop("selected_background", Color.popups.background)
+        : renderer.prop("background", "transparent"))
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Number(renderer.prop("border_width",
+      String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0))
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  contentItem: ColumnLayout {
+    spacing: Style.spacing.xs
+
+    Text {
+      Layout.fillWidth: true
+      text: switchRoot.text
+      textFormat: Text.PlainText
+      color: switchRoot.selected
+        ? renderer.prop("selected_foreground", renderer.prop("foreground", renderer.foreground))
+        : renderer.prop("foreground", renderer.foreground)
+      font: switchRoot.font
+      elide: Text.ElideRight
+    }
+
+    Text {
+      Layout.fillWidth: true
+      visible: text.length > 0
+      text: String(renderer.prop("description", ""))
+      textFormat: Text.PlainText
+      color: renderer.prop("muted", Color.muted)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("description_size", Style.font.caption))
+      elide: Text.ElideRight
+    }
+  }
+
+  indicator: Rectangle {
+    x: switchRoot.width - switchRoot.rightPadding + Number(renderer.prop("spacing", Style.spacing.md))
+    y: (switchRoot.height - height) / 2
+    width: switchRoot.indicatorWidth
+    height: switchRoot.indicatorHeight
+    radius: height / 2
+    color: switchRoot.checked
+      ? renderer.prop("checked_track_color", renderer.prop("accent", Color.accent))
+      : renderer.prop("track_color", Qt.rgba(renderer.foreground.r,
+          renderer.foreground.g, renderer.foreground.b, 0.24))
+    border.width: Style.normalBorderWidth
+    border.color: switchRoot.checked
+      ? renderer.prop("checked_track_color", renderer.prop("accent", Color.accent))
+      : renderer.prop("track_color", renderer.foreground)
+
+    Behavior on color {
+      enabled: renderer.prop("animated", true) !== false
+      ColorAnimation { duration: Number(renderer.prop("duration", 140)) }
+    }
+
+    Rectangle {
+      id: switchThumb
+      readonly property real thumbSize: Math.min(parent.height - 4,
+        Number(renderer.prop("thumb_size", parent.height - 4)))
+      x: switchRoot.checked ? parent.width - width - 2 : 2
+      y: (parent.height - height) / 2
+      width: thumbSize
+      height: thumbSize
+      radius: width / 2
+      color: switchRoot.checked
+        ? renderer.prop("checked_thumb_color", Color.background)
+        : renderer.prop("thumb_color", renderer.foreground)
+
+      Behavior on x {
+        enabled: renderer.prop("animated", true) !== false
+        NumberAnimation {
+          duration: Number(renderer.prop("duration", 140))
+          easing.type: Easing.OutCubic
+        }
+      }
+      Behavior on color {
+        enabled: renderer.prop("animated", true) !== false
+        ColorAnimation { duration: Number(renderer.prop("duration", 140)) }
+      }
+    }
+  }
+
+  onClicked: {
+    var payload = eventPayload()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", payload)
+  }
+  onToggled: {
+    var payload = eventPayload()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "toggle", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+  }
+  onPressed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", eventPayload())
+  onReleased: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", eventPayload())
+  onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    "hover", { value: hovered })
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/TabBar.qml

@@ -0,0 +1,117 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.TabBar {
+  id: barRoot
+
+  required property var renderer
+  readonly property var tabItems: renderer.prop("items", [])
+  readonly property int requestedIndex: Number(renderer.prop("current_index", 0))
+  property bool synchronizing: false
+
+  function itemAt(index) {
+    return Array.isArray(tabItems) && index < tabItems.length ? tabItems[index] : null
+  }
+
+  function itemValue(index, name, fallback) {
+    var item = itemAt(index)
+    return item !== null && typeof item === "object" && item[name] !== undefined
+      ? item[name] : fallback
+  }
+
+  function itemLabel(index) {
+    var item = itemAt(index)
+    return item !== null && typeof item === "object"
+      ? String(item.label === undefined ? (item.text === undefined ? "" : item.text) : item.label)
+      : String(item === null ? "" : item)
+  }
+
+  function boundedIndex(value) {
+    return count === 0 ? -1 : Math.max(0, Math.min(count - 1, Number(value)))
+  }
+
+  function syncSelection() {
+    var next = boundedIndex(requestedIndex)
+    if (currentIndex === next) return
+    synchronizing = true
+    currentIndex = next
+    synchronizing = false
+  }
+
+  implicitWidth: Number(renderer.prop("width", 480))
+  implicitHeight: Number(renderer.prop("height", 44))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  spacing: Number(renderer.prop("spacing", 0))
+  position: String(renderer.prop("position", "top")) === "bottom"
+    ? QQC.TabBar.Footer : QQC.TabBar.Header
+  LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+  LayoutMirroring.childrenInherit: true
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.background)
+    radius: Number(renderer.prop("radius", 0))
+    border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  Repeater {
+    model: Array.isArray(barRoot.tabItems) ? barRoot.tabItems.length : 0
+    QQC.TabButton {
+      required property int index
+      width: Number(renderer.prop("tab_width", 0)) > 0
+        ? Number(renderer.prop("tab_width", 0))
+        : Math.max(1, barRoot.width / Math.max(1, barRoot.count))
+      height: barRoot.height
+      text: barRoot.itemLabel(index)
+      enabled: barRoot.itemValue(index, "enabled", true) !== false
+      icon.name: String(barRoot.itemValue(index, "icon", ""))
+      icon.source: String(barRoot.itemValue(index, "icon_source", ""))
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      contentItem: Text {
+        text: parent.text
+        color: parent.checked ? renderer.prop("accent", Color.accent)
+          : (parent.enabled ? renderer.prop("foreground", renderer.foreground)
+            : renderer.prop("muted", Color.muted))
+        font: parent.font
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+      }
+      background: Rectangle {
+        property bool selected: parent.checked
+        color: "transparent"
+        Rectangle {
+          anchors.left: parent.left
+          anchors.right: parent.right
+          anchors.bottom: barRoot.position === QQC.TabBar.Header ? parent.bottom : undefined
+          anchors.top: barRoot.position === QQC.TabBar.Footer ? parent.top : undefined
+          height: parent.selected ? 2 : 0
+          color: renderer.prop("accent", Color.accent)
+        }
+      }
+      onClicked: {
+        if (renderer.subscribed("tab_click"))
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+            "tab_click", { value: index, label: text })
+      }
+    }
+  }
+
+  onRequestedIndexChanged: syncSelection()
+  onCountChanged: syncSelection()
+  Component.onCompleted: syncSelection()
+  onCurrentIndexChanged: {
+    if (synchronizing || currentIndex < 0) return
+    if (renderer.subscribed("input"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: currentIndex })
+    if (renderer.subscribed("change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: currentIndex })
+  }
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+}

data/Components/Builtins/TabButton.qml

@@ -0,0 +1,105 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.TabButton {
+  id: buttonRoot
+
+  required property var renderer
+
+  text: String(renderer.prop("text", ""))
+  checked: renderer.prop("checked", false) === true
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  autoExclusive: renderer.prop("auto_exclusive", true) !== false
+  hoverEnabled: renderer.subscribed("hover")
+  implicitWidth: Number(renderer.prop("width", 140))
+  implicitHeight: Number(renderer.prop("height", 44))
+  icon.name: String(renderer.prop("icon", ""))
+  icon.source: String(renderer.prop("icon_source", ""))
+  icon.color: renderer.prop("icon_color", renderer.prop("foreground", renderer.foreground))
+  icon.width: Number(renderer.prop("icon_width", Style.font.body))
+  icon.height: Number(renderer.prop("icon_height", Style.font.body))
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+
+  contentItem: Row {
+    spacing: Style.spacing.sm
+    anchors.centerIn: parent
+
+    Image {
+      visible: source.toString().length > 0
+      source: String(renderer.prop("icon_source", ""))
+      width: Number(renderer.prop("icon_width", Style.font.body))
+      height: Number(renderer.prop("icon_height", Style.font.body))
+      fillMode: Image.PreserveAspectFit
+      onStatusChanged: {
+        if (status === Image.Error)
+          renderer.componentError("tab_button_icon_failed",
+            "Unable to load the declared tab button icon image", { source: String(source) })
+      }
+    }
+
+    Text {
+      visible: String(renderer.prop("icon", "")).length > 0
+        && String(renderer.prop("icon_source", "")).length === 0
+      text: renderer.iconGlyph(renderer.prop("icon", ""))
+      color: renderer.prop("icon_color", renderer.prop("foreground", renderer.foreground))
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("icon_width", Style.font.body))
+      anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Text {
+      text: buttonRoot.text
+      color: !buttonRoot.enabled ? renderer.prop("muted", Color.muted)
+        : (buttonRoot.checked ? renderer.prop("checked_foreground", renderer.prop("accent", Color.accent))
+          : renderer.prop("foreground", renderer.foreground))
+      font: buttonRoot.font
+      anchors.verticalCenter: parent.verticalCenter
+      elide: Text.ElideRight
+    }
+  }
+
+  background: Rectangle {
+    color: buttonRoot.checked
+      ? renderer.prop("checked_background", renderer.prop("background", "transparent"))
+      : renderer.prop("background", "transparent")
+    radius: Number(renderer.prop("radius", 0))
+    border.width: Number(renderer.prop("border_width",
+      String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0))
+    border.color: renderer.prop("border_color", "transparent")
+    Rectangle {
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.bottom: parent.bottom
+      height: buttonRoot.checked ? 2 : 0
+      color: renderer.prop("accent", Color.accent)
+    }
+  }
+
+  Shortcut {
+    sequence: String(renderer.prop("shortcut", ""))
+    enabled: buttonRoot.enabled && sequence.toString().length > 0
+    onActivated: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click",
+      { checked: buttonRoot.checked, text: buttonRoot.text, shortcut: true })
+  }
+
+  onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click",
+    { checked: checked, text: text })
+  onToggled: {
+    var payload = { value: checked, checked: checked, text: text }
+    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)
+  }
+  onPressed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", {})
+  onReleased: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", {})
+  onHoveredChanged: {
+    if (renderer.subscribed("hover"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: hovered })
+  }
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+}