Warning, /maui/mauikit/src/controls.6/SectionItem.qml is written in an unsupported language. File is not indexed.

0001 /*
0002  *   Copyright 2018 Camilo Higuita <milo.h@aol.com>
0003  *
0004  *   This program is free software; you can redistribute it and/or modify
0005  *   it under the terms of the GNU Library General Public License as
0006  *   published by the Free Software Foundation; either version 2, or
0007  *   (at your option) any later version.
0008  *
0009  *   This program is distributed in the hope that it will be useful,
0010  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
0011  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
0012  *   GNU General Public License for more details
0013  *
0014  *   You should have received a copy of the GNU Library General Public
0015  *   License along with this program; if not, write to the
0016  *   Free Software Foundation, Inc.,
0017  *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
0018  */
0019 
0020 import QtQuick
0021 import QtQuick.Controls
0022 import QtQuick.Layouts
0023 
0024 import org.mauikit.controls 1.3 as Maui
0025 
0026 /**
0027  * @inherit QtQuick.Controls.ItemDelegate
0028  * @since org.mauikit.controls
0029  * @brief An item used for holding information in a vertical column layout.
0030  * 
0031  * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-itemdelegate.html">This control inherits from QQC2 ItemDelegate, to checkout its inherited properties refer to the Qt Docs.</a>
0032  * 
0033  * Although it is similar to the SectionGroup (an information header with the children in a vertical layout) this control has some functionality differences, like being interactive and a different styling of the information labels. It is commonly use as the children elements of the SectionGroup.
0034  * 
0035  * @note There is also the FlexSectionItem, which uses a dynamic layout for wrapping the content that does not fit.
0036  * @see FlexSectionItem
0037  * 
0038  * @image html Misc/sectionitem.png "Three types of sections inside a SectionGroup"
0039  * 
0040  * If the first and single child element of this control is `checkable`, then the state of such control will be toggled by clicking on the area of the SectionItem.
0041  * 
0042  * @code
0043  * Maui.SectionGroup
0044  * {
0045  *    title: "Section with Children"
0046  *    description: "The description label can be a bit longer explaining something important. Maybe?"
0047  * 
0048  *    Maui.SectionItem
0049  *    {
0050  *        label1.text: "Checkable section item"
0051  *        iconSource: "folder"
0052  * 
0053  *        Switch
0054  *        {
0055  *            onToggled: checked = !checked
0056  *        }
0057  *    }
0058  * 
0059  *    Maui.SectionItem
0060  *    {
0061  *        label1.text: "Single section item"
0062  *        iconSource: "anchor"
0063  *    }
0064  * 
0065  *    Maui.SectionItem
0066  *    {
0067  *        label1.text: "Hello this is a two line section item"
0068  *        label2.text : "Subtitle text"
0069  * 
0070  *        TextArea
0071  *        {
0072  *            Layout.fillWidth: true
0073  *        }
0074  *    }
0075  * }
0076  * @endcode
0077  * 
0078  * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/SectionItem.qml">You can find a more complete example at this link.</a> 
0079  */
0080 ItemDelegate
0081 {
0082   id: control
0083   
0084   padding: Maui.Style.defaultPadding
0085   spacing: Maui.Style.space.small
0086   
0087   Layout.fillWidth: true
0088   implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0089   
0090   /**
0091    * @brief The items declared as the children of this element will wrap into a new line on constrained spaces. 
0092    * @note The content is handled by a RowLayout, so to position items use the Layout attached properties.
0093    * @property list<QtObject> FlexListItem::content
0094    */
0095   default property alias content : _layout.data
0096     
0097     /**
0098      * @brief An alias to the template element handling the information labels and image/icon. 
0099      * @see ListItemTemplate
0100      * @property ListItemTemplate FlexListItem::template
0101      */
0102     property alias template: _template
0103     
0104     /**
0105      * @see ListItemTemplate::label1
0106      */
0107     property alias label1 : _template.label1
0108     
0109     /**
0110      * @see ListItemTemplate::label2
0111      */
0112     property alias label2 : _template.label2
0113     
0114     /**
0115      * @see ListItemTemplate::label3
0116      */
0117     property alias label3 : _template.label3
0118     
0119     /**
0120      * @see ListItemTemplate::label4
0121      */
0122     property alias label4 : _template.label4
0123     
0124     /**
0125      * @see ListItemTemplate::iconSource
0126      */
0127     property alias iconSource : _template.iconSource
0128     
0129     /**
0130      * @see ListItemTemplate::imageSource
0131      */
0132     property alias imageSource : _template.imageSource
0133     
0134     /**
0135      * @see ListItemTemplate::iconSizeHint
0136      */
0137     property alias iconSizeHint : _template.iconSizeHint
0138     
0139     /**
0140      * @brief Whether the control should be styled as flat, as in not having a background or hover/pressed visual effect hints.
0141      * By default this is set to `!Handy.isMobile`
0142      * @see Handy::isMobile
0143      */
0144     property bool flat : !Maui.Handy.isMobile
0145     
0146     /**
0147      * @brief Whether the first children element from the `content` is checkable. 
0148      * If it is the the control will have a hover effect to hint about the item being checkable.
0149      */ 
0150     readonly property bool childCheckable : control.content.length >= 2 && control.content[1].hasOwnProperty("checkable") ? control.content[1].checkable : false
0151     
0152     hoverEnabled: !Maui.Handy.isMobile
0153     
0154     background: Rectangle
0155     {       
0156       color: control.enabled ? ( control.childCheckable && control.hovered ? Maui.Theme.hoverColor : (control.flat ? "transparent" : Maui.Theme.alternateBackgroundColor)) : "transparent"        
0157       radius: Maui.Style.radiusV   
0158       
0159       Behavior on color
0160       {
0161         enabled: !control.flat
0162         Maui.ColorTransition{}
0163       }
0164     }
0165     
0166     contentItem: ColumnLayout
0167     {
0168       id: _layout
0169       
0170       spacing: control.spacing
0171       
0172       Maui.ListItemTemplate
0173       {
0174         id: _template
0175         Layout.fillWidth: true
0176         iconSizeHint: Maui.Style.iconSizes.medium
0177         label2.wrapMode: Text.WordWrap
0178         label1.font.weight: Font.Medium
0179         label1.text: control.text
0180         iconSource: control.icon.name
0181       }
0182     }
0183     
0184     onClicked:
0185     {
0186       if(control.childCheckable)
0187       { 
0188         console.log("Trying to toggle")
0189         control.content[1].toggled()
0190       }        
0191     }
0192 }