update

example/qml-Qt6/component/CodeExpander.qml

@@ -139,7 +139,8 @@ FluExpander{
                     "FluChart",
                     "FluRangeSlider",
                     "FluStaggeredView",
-                    "FluProgressButton"
+                    "FluProgressButton",
+                    "FluLoadingButton"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml-Qt6/page/T_Buttons.qml

@@ -213,6 +213,45 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluLoadingButton{
+            id:btn_loading
+            loading:loading_button_switch.checked
+            text:"Loading Button"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+
+            }
+        }
+        FluToggleSwitch{
+            id:loading_button_switch
+            checked: true
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Loading"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluLoadingButton{
+    text:"Loading Button"
+    onClicked: {
+
+    }
+}'
+    }
+
 
     FluArea{
         Layout.fillWidth: true

example/qml-Qt6/page/T_Settings.qml

@@ -10,6 +10,49 @@ FluScrollablePage{
 
     title:"Settings"
 
+
+    FluEvent{
+        id:event_checkupdate_finish
+        name: "checkUpdateFinish"
+        onTriggered: {
+            btn_checkupdate.loading = false
+        }
+    }
+
+    Component.onCompleted: {
+        FluEventBus.registerEvent(event_checkupdate_finish)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate_finish)
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+        Row{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text:"当前版本 v%1".arg(appInfo.version)
+                font: FluTextStyle.Body
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluLoadingButton{
+                id:btn_checkupdate
+                text:"检查更新"
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    loading = true
+                    FluEventBus.post("checkUpdate")
+                }
+            }
+        }
+    }
+
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20

example/qml-Qt6/window/MainWindow.qml

@@ -25,10 +25,23 @@ CustomWindow {
         event.accepted = false
     }
 
+    FluEvent{
+        id:event_checkupdate
+        name: "checkUpdate"
+        onTriggered: {
+            checkUpdate(false)
+        }
+    }
+
     Component.onCompleted: {
         FluTools.setQuitOnLastWindowClosed(false)
         tour.open()
-        checkUpdate()
+        checkUpdate(true)
+        FluEventBus.registerEvent(event_checkupdate)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate)
     }
 
     SystemTrayIcon {
@@ -311,11 +324,13 @@ CustomWindow {
 
     HttpCallable{
         id:callable
+        property bool silent: true
         onStart: {
             console.debug("satrt check update...")
         }
         onFinish: {
             console.debug("check update finish")
+            FluEventBus.post("checkUpdateFinish");
         }
         onSuccess:
             (result)=>{
@@ -326,15 +341,23 @@ CustomWindow {
                     dialog_update.newVerson =  data.tag_name
                     dialog_update.body = data.body
                     dialog_update.open()
+                }else{
+                    if(!silent){
+                        showInfo("当前版本已经是最新版")
+                    }
                 }
             }
         onError:
             (status,errorString)=>{
+                if(!silent){
+                    showError("网络异常!")
+                }
                 console.debug(status+";"+errorString)
             }
     }
 
-    function checkUpdate(){
+    function checkUpdate(silent){
+        callable.silent = silent
         var request = http.newRequest("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
         http.get(request,callable);
     }

example/qml/component/CodeExpander.qml

@@ -139,7 +139,8 @@ FluExpander{
                     "FluChart",
                     "FluRangeSlider",
                     "FluStaggeredView",
-                    "FluProgressButton"
+                    "FluProgressButton",
+                    "FluLoadingButton"
                 ];
         code = code.replace(/\n/g, "<br>");
         code = code.replace(/ /g, "&nbsp;");

example/qml/page/T_Buttons.qml

@@ -213,6 +213,45 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 68
+        Layout.topMargin: 20
+        paddings: 10
+
+        FluLoadingButton{
+            id:btn_loading
+            loading:loading_button_switch.checked
+            text:"Loading Button"
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+            onClicked: {
+
+            }
+        }
+        FluToggleSwitch{
+            id:loading_button_switch
+            checked: true
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Loading"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluLoadingButton{
+    text:"Loading Button"
+    onClicked: {
+
+    }
+}'
+    }
+
 
     FluArea{
         Layout.fillWidth: true

example/qml/page/T_Settings.qml

@@ -11,6 +11,49 @@ FluScrollablePage{
 
     title:"Settings"
 
+
+    FluEvent{
+        id:event_checkupdate_finish
+        name: "checkUpdateFinish"
+        onTriggered: {
+            btn_checkupdate.loading = false
+        }
+    }
+
+    Component.onCompleted: {
+        FluEventBus.registerEvent(event_checkupdate_finish)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate_finish)
+    }
+
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 60
+        paddings: 10
+        Row{
+            spacing: 20
+            anchors.verticalCenter: parent.verticalCenter
+            FluText{
+                text:"当前版本 v%1".arg(appInfo.version)
+                font: FluTextStyle.Body
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            FluLoadingButton{
+                id:btn_checkupdate
+                text:"检查更新"
+                anchors.verticalCenter: parent.verticalCenter
+                onClicked: {
+                    loading = true
+                    FluEventBus.post("checkUpdate")
+                }
+            }
+        }
+    }
+
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -107,3 +150,4 @@ FluScrollablePage{
     }
 
 }
+

example/qml/window/MainWindow.qml

@@ -26,10 +26,23 @@ CustomWindow {
         event.accepted = false
     }
 
+    FluEvent{
+        id:event_checkupdate
+        name: "checkUpdate"
+        onTriggered: {
+            checkUpdate(false)
+        }
+    }
+
     Component.onCompleted: {
         FluTools.setQuitOnLastWindowClosed(false)
         tour.open()
-        checkUpdate()
+        checkUpdate(true)
+        FluEventBus.registerEvent(event_checkupdate)
+    }
+
+    Component.onDestruction: {
+        FluEventBus.unRegisterEvent(event_checkupdate)
     }
 
     SystemTrayIcon {
@@ -312,11 +325,13 @@ CustomWindow {
 
     HttpCallable{
         id:callable
+        property bool silent: true
         onStart: {
             console.debug("satrt check update...")
         }
         onFinish: {
             console.debug("check update finish")
+            FluEventBus.post("checkUpdateFinish");
         }
         onSuccess:
             (result)=>{
@@ -327,15 +342,23 @@ CustomWindow {
                     dialog_update.newVerson =  data.tag_name
                     dialog_update.body = data.body
                     dialog_update.open()
+                }else{
+                    if(!silent){
+                        showInfo("当前版本已经是最新版")
+                    }
                 }
             }
         onError:
             (status,errorString)=>{
+                if(!silent){
+                    showError("网络异常!")
+                }
                 console.debug(status+";"+errorString)
             }
     }
 
-    function checkUpdate(){
+    function checkUpdate(silent){
+        callable.silent = silent
         var request = http.newRequest("https://api.github.com/repos/zhuzichu520/FluentUI/releases/latest")
         http.get(request,callable);
     }

src/FluEventBus.cpp

@@ -0,0 +1,40 @@
+#include "FluEventBus.h"
+
+FluEventBus* FluEventBus::m_instance = nullptr;
+
+FluEvent::FluEvent(QObject *parent)
+    : QObject{parent}
+{
+
+}
+
+FluEventBus *FluEventBus::getInstance()
+{
+    if(FluEventBus::m_instance == nullptr){
+        FluEventBus::m_instance = new FluEventBus;
+    }
+    return FluEventBus::m_instance;
+}
+
+FluEventBus::FluEventBus(QObject *parent)
+    : QObject{parent}
+{
+
+}
+
+void FluEventBus::registerEvent(FluEvent* event){
+    eventData.append(event);
+}
+
+
+void FluEventBus::unRegisterEvent(FluEvent* event){
+    eventData.removeOne(event);
+}
+
+void FluEventBus::post(const QString& name,const QMap<QString, QVariant>& data){
+    foreach (auto event, eventData) {
+        if(event->name()==name){
+            Q_EMIT event->triggered(data);
+        }
+    }
+}

src/FluEventBus.h

@@ -0,0 +1,38 @@
+#ifndef FLUEVENTBUS_H
+#define FLUEVENTBUS_H
+
+#include <QObject>
+#include <QtQml/qqml.h>
+#include "stdafx.h"
+
+class FluEvent : public QObject{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,name);
+    QML_NAMED_ELEMENT(FluEvent)
+public:
+    explicit FluEvent(QObject *parent = nullptr);
+    Q_SIGNAL void triggered(QMap<QString, QVariant> data);
+};
+
+class FluEventBus : public QObject
+{
+    Q_OBJECT
+    QML_NAMED_ELEMENT(FluEventBus)
+    QML_SINGLETON
+private:
+    static FluEventBus* m_instance;
+    explicit FluEventBus(QObject *parent = nullptr);
+public:
+    static FluEventBus *getInstance();
+    static FluEventBus *create(QQmlEngine *qmlEngine, QJSEngine *jsEngine)
+    {
+        return getInstance();
+    }
+    Q_INVOKABLE void registerEvent(FluEvent* event);
+    Q_INVOKABLE void unRegisterEvent(FluEvent* event);
+    Q_INVOKABLE void post(const QString& name,const QMap<QString, QVariant>& params = {});
+private:
+    QList<FluEvent*> eventData;
+};
+
+#endif // FLUEVENTBUS_H

src/FluentUI.cpp

@@ -12,6 +12,7 @@
 #include "FluHttpInterceptor.h"
 #include "FluWatermark.h"
 #include "FluCaptcha.h"
+#include "FluEventBus.h"
 #include "Screenshot.h"
 #include "QRCode.h"
 
@@ -49,6 +50,7 @@ void FluentUI::registerTypes(const char *uri){
     qmlRegisterType<FluHttp>(uri,major,minor,"FluHttp");
     qmlRegisterType<HttpCallable>(uri,major,minor,"HttpCallable");
     qmlRegisterType<HttpRequest>(uri,major,minor,"HttpRequest");
+    qmlRegisterType<FluEvent>(uri,major,minor,"FluEvent");
 
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/ColorPicker.qml"),uri,major,minor,"ColorPicker");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/ColorPicker/Content/Checkerboard.qml"),uri,major,minor,"Checkerboard");
@@ -143,6 +145,7 @@ void FluentUI::registerTypes(const char *uri){
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluRangeSlider.qml"),uri,major,minor,"FluRangeSlider");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluStaggeredView.qml"),uri,major,minor,"FluStaggeredView");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluProgressButton.qml"),uri,major,minor,"FluProgressButton");
+    qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluLoadingButton.qml"),uri,major,minor,"FluLoadingButton");
 
     qmlRegisterUncreatableMetaObject(Fluent_Awesome::staticMetaObject,  uri,major,minor,"FluentIcons", "Access to enums & flags only");
     qmlRegisterUncreatableMetaObject(FluHttpType::staticMetaObject,  uri,major,minor,"FluHttpType", "Access to enums & flags only");
@@ -178,5 +181,7 @@ void FluentUI::initializeEngine(QQmlEngine *engine, const char *uri){
     engine->rootContext()->setContextProperty("FluTools",tools);
     FluTextStyle* textStyle = FluTextStyle::getInstance();
     engine->rootContext()->setContextProperty("FluTextStyle",textStyle);
+    FluEventBus* eventBus = FluEventBus::getInstance();
+    engine->rootContext()->setContextProperty("FluEventBus",eventBus);
     engine->addImportPath("qrc:/qt/qml");
 }

src/Qt5/imports/FluentUI/Controls/FluLoadingButton.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluButton {
+    property bool loading: false
+    id: control
+    disabled: loading
+    contentItem: Row{
+        spacing: 6
+        FluText {
+            text: control.text
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font: control.font
+            color: control.textColor
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        Item{
+            width: control.loading ? 16 : 0
+            height: 16
+            anchors.verticalCenter: parent.verticalCenter
+            visible: width!==0
+            clip: true
+            Behavior on width {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+            FluProgressRing{
+                width: 16
+                height: 16
+                strokeWidth:3
+                anchors.centerIn: parent
+            }
+        }
+    }
+}

src/Qt5/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -27,28 +27,31 @@ Button {
     Accessible.name: control.text
     Accessible.description: contentDescription
     Accessible.onPressAction: control.clicked()
-    height: 20
     enabled: !disabled
-    implicitHeight: height
     focusPolicy:Qt.TabFocus
     onClicked: clickListener()
+    padding: 0
+    horizontalPadding: 0
     onCheckableChanged: {
         if(checkable){
             checkable = false
         }
     }
-    contentItem: Item{}
+    background : Item{
-    background : RowLayout{
+        implicitHeight: 20
+        implicitWidth: 40
+    }
+    contentItem: RowLayout{
         spacing: control.textSpacing
         layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
         Rectangle {
             id:control_backgound
-            width: 40
+            width: background.width
-            height: control.height
+            height: background.height
             radius: height / 2
             FluFocusRectangle{
                 visible: control.activeFocus
-                radius: 20
+                radius: parent.radius
             }
             color: {
                 if(!enabled){
@@ -73,10 +76,10 @@ Button {
                 return borderNormalColor
             }
             Rectangle {
-                width:  20
+                width:  parent.height
                 x:checked ? control_backgound.width-width : 0
-                height: 20
+                height: width
-                radius: 10
+                radius: width/2
                 scale: hovered&enabled ? 7/10 : 6/10
                 color: {
                     if(!enabled){

src/Qt5/imports/FluentUI/qmldir

@@ -95,4 +95,5 @@ FluWindow 1.0 Controls/FluWindow.qml
 FluRangeSlider 1.0 Controls/FluRangeSlider.qml
 FluStaggeredView 1.0 Controls/FluStaggeredView.qml
 FluProgressButton 1.0 Controls/FluProgressButton.qml
+FluLoadingButton 1.0 Controls/FluLoadingButton.qml
 plugin fluentuiplugin

src/Qt5/imports/fluentui.qrc

@@ -95,5 +95,6 @@
         <file>FluentUI/Controls/ColorPicker/Content/NumberBox.qml</file>
         <file>FluentUI/Controls/ColorPicker/Content/PanelBorder.qml</file>
         <file>FluentUI/Controls/ColorPicker/Content/SBPicker.qml</file>
+        <file>FluentUI/Controls/FluLoadingButton.qml</file>
     </qresource>
 </RCC>

src/Qt6/imports/FluentUI/Controls/FluLoadingButton.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import FluentUI
+
+FluButton {
+    property bool loading: false
+    id: control
+    disabled: loading
+    contentItem: Row{
+        spacing: 6
+        FluText {
+            text: control.text
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font: control.font
+            color: control.textColor
+            anchors.verticalCenter: parent.verticalCenter
+        }
+        Item{
+            width: control.loading ? 16 : 0
+            height: 16
+            anchors.verticalCenter: parent.verticalCenter
+            visible: width!==0
+            clip: true
+            Behavior on width {
+                enabled: FluTheme.enableAnimation
+                NumberAnimation{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
+            FluProgressRing{
+                width: 16
+                height: 16
+                strokeWidth:3
+                anchors.centerIn: parent
+            }
+        }
+    }
+}

src/Qt6/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -28,23 +28,31 @@ Button {
     Accessible.name: control.text
     Accessible.description: contentDescription
     Accessible.onPressAction: control.clicked()
-    height: 20
     enabled: !disabled
-    implicitHeight: height
     focusPolicy:Qt.TabFocus
     onClicked: clickListener()
-    contentItem: Item{}
+    padding: 0
-    background : RowLayout{
+    horizontalPadding: 0
+    onCheckableChanged: {
+        if(checkable){
+            checkable = false
+        }
+    }
+    background : Item{
+        implicitHeight: 20
+        implicitWidth: 40
+    }
+    contentItem: RowLayout{
         spacing: control.textSpacing
         layoutDirection:control.textRight ? Qt.LeftToRight : Qt.RightToLeft
         Rectangle {
             id:control_backgound
-            width: 40
+            width: background.width
-            height: control.height
+            height: background.height
             radius: height / 2
             FluFocusRectangle{
                 visible: control.activeFocus
-                radius: 20
+                radius: parent.radius
             }
             color: {
                 if(!enabled){
@@ -69,10 +77,10 @@ Button {
                 return borderNormalColor
             }
             Rectangle {
-                width:  20
+                width:  parent.height
                 x:checked ? control_backgound.width-width : 0
-                height: 20
+                height: width
-                radius: 10
+                radius: width/2
                 scale: hovered&enabled ? 7/10 : 6/10
                 color: {
                     if(!enabled){