fix(StatusListPicker/StatusItemPicker/StatusPickerButton): Added some properties / signals (#624)

Added property `textPixelSize` to be configurable in `StatusPickerButton`.

Added signal `itemPickerChanged` to be directly notified when an item changes its selected property value.

Updated `selected` property properly in `StatusListPicker`.

Added new property `enableSelectableItem` to highlight an item when hovering.

Some documentation improvements.

ui/StatusQ/sandbox/pages/StatusListPickerPage.qml

@@ -47,6 +47,7 @@ GridLayout {
             searchText: qsTr("Search Currencies")
             multiSelection: true
             printSymbol: true
+            enableSelectableItem: false
         }
     }
 

ui/StatusQ/src/StatusQ/Components/StatusListPicker.qml

@@ -11,7 +11,7 @@ import StatusQ.Controls 0.1
    \inherits Item
    \inqmlmodule StatusQ.Components
    \since StatusQ.Components 0.1
-   \brief It is a combination of StatusPickerButton and a drop-down list component that provides a way of presenting a list of selectable options to the user.
+   \brief It is a combination of StatusPickerButton and a drop-down list component that provides a way of presenting a list of selectable options to the user. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
 
    The \c StatusListPicker is populated with a data model. The data model is commonly a JavaScript array or a ListModel object.
 
@@ -95,6 +95,12 @@ Item {
     */
     property int maxPickerHeight: 718
 
+    /*!
+       \qmlproperty string StatusListPicker::enableSelectableItem
+       This property holds if the item in the list will be highlighted when hovering and clickable in its complete area or just not highlighted and able to be selected by clicking only the checbox or radiobutton area.
+    */
+    property bool enableSelectableItem: true
+
     /*
         \qmlmethod StatusListPicker::close()
         It can be used to force to close the drop-down picker list whenever the consumer needs it. For example by adding an outside MouseArea to close the picker when user clicks outsite the component:
@@ -107,7 +113,13 @@ Item {
             }
        \endqml
     */
-    function close() { if(picker.visible) picker.visible = false }
+    function close() { picker.visible = false }
+
+    /*!
+        \qmlsignal StatusListPicker::itemPickerChanged(string key, bool selected)
+        This signal is emitted when an item changes its selected value.
+    */
+    signal itemPickerChanged(string key, bool selected)
 
     QtObject {
         id: d
@@ -198,6 +210,7 @@ Item {
         bgColor: Theme.palette.primaryColor3
         contentColor: Theme.palette.primaryColor1
         text: picker.selectedItemsText
+        textPixelSize: 13
         type: StatusPickerButton.Type.Down
 
         onClicked: {
@@ -272,6 +285,7 @@ Item {
             delegate: StatusItemPicker {
                 width: content.itemWidth
                 height: content.itemHeight
+                color: mouseArea.containsMouse? Theme.palette.baseColor4 : "transparent"
                 image: StatusImageSettings {
                     source: model.imageSource ? model.imageSource : ""
                     width: 15
@@ -294,6 +308,18 @@ Item {
                         // Update selected items text (multiple selection, text chain).
                         picker.selectedItemsText = d.getSelectedItemsText()
                     }
+
+                    // Used to notify selected property changes in the specific item picker.
+                    itemPickerChanged(model.key, checked)
+                }
+
+                MouseArea {
+                    id: mouseArea
+                    enabled: root.enableSelectableItem
+                    anchors.fill: parent
+                    cursorShape: root.enableSelectableItem ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    hoverEnabled: true
+                    onClicked: { selected = !selected }
                 }
             }
             section.property: "category"
@@ -318,7 +344,7 @@ Item {
             // Not visual element to control mutual-exclusion of radiobuttons that are not sharing the same parent (inside list view)
             ButtonGroup {
                 id: radioBtnGroup
-            }
+            }           
         }// End of Content        
     }// End of Rectangle picker
 }

ui/StatusQ/src/StatusQ/Controls/StatusItemPicker.qml

@@ -10,7 +10,7 @@ import StatusQ.Controls 0.1
    \inherits Item
    \inqmlmodule StatusQ.Controls
    \since StatusQ.Controls 0.1
-   \brief It presents a selectable item to the user.
+   \brief It presents a selectable item to the user. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-rectangle.html}{Rectangle}.
 
    The \c StatusItemPicker is populated with the given properties data.
 
@@ -35,7 +35,7 @@ import StatusQ.Controls 0.1
    \endqml
    For a list of components available see StatusQ.
 */
-Item {
+Rectangle {
     id: root
 
     /*!
@@ -169,7 +169,10 @@ Item {
         StatusRadioButton {
             ButtonGroup.group: root.radioGroup
             checked: root.selected
-            onCheckedChanged: root.checkedChanged(checked)
+            onCheckedChanged: {
+                root.selected = checked
+                root.checkedChanged(checked)
+            }
         }
     }
 
@@ -177,7 +180,10 @@ Item {
         id: checkbox
         StatusCheckBox {
             checked: root.selected
-            onCheckedChanged: root.checkedChanged(checked)
+            onCheckedChanged: {
+                root.selected = checked
+                root.checkedChanged(checked)
+            }
         }
     }
 }// End of Content item

ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml

@@ -13,6 +13,7 @@ Button {
     property color contentColor: Theme.palette.baseColor1
     property var type: StatusPickerButton.Type.Next
     property int lateralMargins: 16
+    property int textPixelSize: 15
 
     enum Type {
         Next,
@@ -38,7 +39,7 @@ Button {
             anchors.verticalCenter: parent.verticalCenter
             width: parent.width - icon.width - anchors.rightMargin - anchors.leftMargin - icon.anchors.rightMargin - icon.anchors.leftMargin
             verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 15
+            font.pixelSize: root.textPixelSize
             color: root.contentColor
             text: root.text
             clip: true