add Qt6 QML files for example 'clog demo'

examples/Qt6/clog-demo/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

examples/Qt6/clog-demo/qml/ext/Browser.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Controls
+import QtWebView
+import "." as Ext
+
+Item {
+  Ext.Server {}
+
+  WebView {
+    id: browser
+    objectName: "browser"
+    width: parent.width
+    height: parent.height - reload.height
+    visible: !busy.visible
+  }
+
+  Button {
+    id: reload
+    anchors.bottom: parent.bottom
+    font.pixelSize: 18
+    text: "Reload"
+    onClicked: {
+      browser.reload()
+    }
+  }
+
+  Button {
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+    font.pixelSize: 18
+    text: "log/REPL"
+    onClicked: view.currentIndex = 1
+  }
+
+  Rectangle {
+    id: busy
+    objectName: "busy"
+    color: "white"
+    anchors.fill: parent
+
+    Image {
+      anchors.centerIn: parent
+      source: "../img/busy.png"
+    }
+  }
+}

examples/Qt6/clog-demo/qml/ext/Log.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls
+import "." as Ext
+
+Rectangle {
+  color: "lavender"
+
+  Ext.Repl {}
+
+  function log(message) {
+    logModel.append({ message: message })
+    listView.positionViewAtEnd()
+  }
+
+  ListView {
+    id: listView
+    anchors.fill: parent
+    model: ListModel { id: logModel }
+    delegate: Text {
+      font.pixelSize: 14
+      text: message
+    }
+  }
+}

examples/Qt6/clog-demo/qml/ext/Repl.qml

@@ -0,0 +1,161 @@
+import QtQuick
+import QtQuick.Controls
+
+Item {
+  id: repl
+  z: 1
+  anchors.fill: parent
+
+  Row {
+    anchors.right: parent.right
+    z: 1
+
+    Text {
+      font.pixelSize: 18
+      text: "REPL"
+      anchors.verticalCenter: show.verticalCenter
+      visible: !show.checked
+    }
+
+    Switch {
+      id: show
+
+      onCheckedChanged: container.enabled = checked
+    }
+  }
+
+  Column {
+    id: container
+    opacity: 0
+
+    Rectangle {
+      width: repl.parent.width
+      height: repl.parent.height / 4
+      color: "#101010"
+
+      ListView {
+        id: replOutput
+        objectName: "repl_output"
+        anchors.fill: parent
+        contentWidth: parent.width * 4
+        clip: true
+        model: replModel
+        flickableDirection: Flickable.HorizontalAndVerticalFlick
+
+        delegate: Column {
+          Rectangle {
+            width: replOutput.contentWidth
+            height: 1
+            color: "#707070"
+            visible: mLine
+          }
+
+          Text {
+            x: 2
+            padding: 2
+            textFormat: Text.PlainText
+            font.family: fontHack.name
+            font.bold: mBold
+            text: mText
+            color: mColor
+          }
+        }
+      }
+
+      ListModel {
+        id: replModel
+        objectName: "repl_model"
+
+        function appendText(data) {
+          append(data)
+          replOutput.contentX = 0
+          replOutput.positionViewAtEnd()
+        }
+      }
+    }
+
+    Row {
+      width: repl.parent.width
+
+      TextField {
+        id: input
+        objectName: "repl_input"
+        width: repl.parent.width - 2 * back.width
+        font.family: fontHack.name
+        font.bold: true
+        color: "#c0c0c0"
+        inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
+        focus: show.checked
+        palette {
+          highlight: "#e0e0e0"
+          highlightedText: "#101010"
+        }
+
+        background: Rectangle {
+          color: "#101010"
+          border.width: 2
+          border.color: "gray"
+        }
+
+        onAccepted: Lisp.call("eval:eval-in-thread", text)
+      }
+
+      Button {
+        id: back
+        objectName: "history_back"
+        width: 40
+        height: input.height
+        focusPolicy: Qt.NoFocus
+        font.family: fontIcons.name
+        font.pixelSize: 26
+        text: "\uf100"
+
+        onClicked: Lisp.call("eval:history-move", "back")
+      }
+
+      Rectangle {
+        width: 1
+        height: input.height
+        color: "#101010"
+      }
+
+      Button {
+        id: forward
+        objectName: "history_forward"
+        width: back.width
+        height: input.height
+        focusPolicy: Qt.NoFocus
+        font.family: fontIcons.name
+        font.pixelSize: 26
+        text: "\uf101"
+
+        onClicked: Lisp.call("eval:history-move", "forward")
+      }
+    }
+
+    Rectangle {
+      width: repl.parent.width
+      height: 1
+      color: "#101010"
+    }
+  }
+
+  ProgressBar {
+    objectName: "progress"
+    anchors.top: container.bottom
+    width: repl.width
+    z: 1
+    indeterminate: true
+    enabled: visible
+    visible: false
+  }
+
+  states: [
+    State { when: show.checked;  PropertyChanges { target: container; opacity: 0.9; y: 0 }},
+    State { when: !show.checked; PropertyChanges { target: container; opacity: 0.0; y: -height }}
+  ]
+
+  transitions: [
+    Transition { NumberAnimation { properties: "opacity,y"; duration: 250; easing.type: Easing.InCubic }}
+  ]
+}

examples/Qt6/clog-demo/qml/ext/Server.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import QtWebSockets
+import "." as Ext
+
+Item {
+  WebSocketServer {
+    id: server
+    objectName: "server"
+    port: 8080
+    listen: true
+
+    property int counter: 0
+    property var client
+
+    function send(message) {
+      client.sendTextMessage(message)
+    }
+
+    onClientConnected: (webSocket) => {
+      client = webSocket
+      webSocket.objectName = ++counter
+      main.log("[new] " + counter)
+      Lisp.call("clog:webview/on-new-connection")
+
+      webSocket.onTextMessageReceived.connect(function(message) {
+        main.log(message)
+        Lisp.call("clog:webview/on-message", message)
+      })
+
+      webSocket.onStatusChanged.connect(function(status) {
+        var state
+        switch (status) {
+          case WebSocket.Closed: state = "close"; break
+          case WebSocket.Error:  state = "error"; break
+          default: return
+        }
+        main.log("[status] " + state)
+      })
+    }
+
+    onErrorStringChanged: {
+      main.log("[server error] " + errorString)
+    }
+  }
+}

examples/Qt6/clog-demo/qml/main.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import QtQuick.Controls
+import "ext/" as Ext
+
+Rectangle {
+  width: 400
+  height: 650
+  id: main
+  objectName: "main"
+  color: "#bbb"
+
+  function log(message) {
+    logPage.log(message)
+  }
+
+  SwipeView {
+    id: view
+    objectName: "view"
+    anchors.fill: parent
+
+    // page 1: webview (native on mobile)
+    Ext.Browser {}
+
+    // page 2: log, repl
+    Ext.Log { id: logPage }
+  }
+
+  PageIndicator {
+    anchors.bottom: view.bottom
+    anchors.bottomMargin: 10
+    anchors.horizontalCenter: parent.horizontalCenter
+    count: view.count
+    currentIndex: view.currentIndex
+  }
+
+  Keys.onPressed: {
+    if (event.key === Qt.Key_Back) {
+      event.accepted = true
+      if (view.currentIndex === 0) {
+        Lisp.call("qml:qquit")
+      } else {
+        view.currentIndex--
+      }
+    }
+  }
+
+  FontLoader { id: fontIcons;    source: "fonts/fontawesome-webfont.ttf" }
+  FontLoader { id: fontHack;     source: "fonts/Hack-Regular.ttf" }
+  FontLoader { id: fontHackBold; source: "fonts/Hack-Bold.ttf" }
+}