Warning, /maui/mauikit/src/controls.6/FlexListItem.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.labs 1.0
0029  *  @brief A template to position information next to a flexing right-content section, that wraps into a new line under constrained space conditions.
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  *  @image html Misc/flexlistitem.png "Expanded vs wrapped"
0034  *  
0035  * @code
0036  * Column
0037  * {
0038  *    anchors.centerIn: parent
0039  *    width: parent.width
0040  * 
0041  *    Maui.FlexListItem
0042  *    {
0043  *        id: _flexItem
0044  *        width: parent.width
0045  *        label1.text: "Flex List Item"
0046  *        label2.text: "This item is reposnive and will split into a column on a narrow space."
0047  *        iconSource: "love"
0048  * 
0049  *        Rectangle
0050  *        {
0051  *            color: "purple"
0052  *            radius: 4
0053  *            implicitHeight: 64
0054  *            implicitWidth: 140
0055  *            Layout.fillWidth: !_flexItem.wide
0056  *            Layout.minimumWidth: 140
0057  *        }
0058  * 
0059  *        Rectangle
0060  *        {
0061  *            color: "yellow"
0062  *            radius: 4
0063  *            implicitHeight: 64
0064  *            implicitWidth: 80
0065  *            Layout.fillWidth: !_flexItem.wide
0066  *        }
0067  *    }
0068  * }
0069  * @endcode
0070  *  
0071  *  @section notes Notes
0072  *  It is possible to manually set the number of columns to be used using the `columns` property, but this will break the auto wrapping functionality of the `wide` property. So consider using this property only if it is really needed to be forced. 
0073  *  
0074  *  <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/FlexLisItem.qml">You can find a more complete example at this link.</a>  
0075  */
0076 ItemDelegate
0077 {
0078   id: control
0079   
0080   /**
0081    * @brief The items declared as the children of this element will wrap into a new line on constrained spaces. 
0082    * @note The content is handled by a RowLayout, so to position items use the Layout attached properties.
0083    * @property list<QtObject> FlexListItem::content
0084    */
0085   default property alias content : _content.data
0086     
0087     /**
0088      * @brief An alias to the template element handling the information labels and image/icon. 
0089      * @see ListItemTemplate
0090      * @property ListItemTemplate FlexListItem::template
0091      */
0092     property alias template: _template
0093     
0094     /**
0095      * @brief The Label element for the title. 
0096      * @property Label FlexListItem::label1
0097      */
0098     property alias label1 : _template.label1
0099     
0100     /**
0101      * @brief The Label element for the message body. 
0102      * @property Label FlexListItem::label2
0103      */
0104     property alias label2 : _template.label2
0105     
0106     /**
0107      * @brief The Label element for extra information positioned on the right top side.. 
0108      * @property Label FlexListItem::label3
0109      */
0110     property alias label3 : _template.label3
0111     
0112     /**
0113      * @brief The Label element for extra information positioned on the right bottom side.. 
0114      * @property Label FlexListItem::label4
0115      */
0116     property alias label4 : _template.label4
0117     
0118     /**
0119      * @brief The icon name to be used in the information section.
0120      * @property string FlexListItem::iconSource
0121      */
0122     property alias iconSource : _template.iconSource
0123     
0124     /**
0125      * @brief The image source file to be used in the information section.
0126      * @property url FlexListItem::imageSource
0127      */
0128     property alias imageSource : _template.imageSource
0129     
0130     /**
0131      * @brief The size hint for the icon container.
0132      * @property int FlexListItem::iconSizeHint
0133      */
0134     property alias iconSizeHint : _template.iconSizeHint
0135     
0136     /**
0137      * @brief Whether the layout will be wrapped into a new line or not. If `wide: true` then a single line is used, but otherwise the layout is split into two lines, at the top the information labels and and the bottom all the children elements.
0138      * @see content
0139      */
0140     property bool wide : _content.implicitWidth < _layout.width*0.5 
0141     
0142     /**
0143      * @brief The spacing of the rows, when the layout is wrapped.
0144      * @property int FlexListItem::rowSpacing
0145      */
0146     property alias rowSpacing : _layout.rowSpacing
0147     
0148     /**
0149      * @brief The spacing of the columns, when the layout is not wrapped.
0150      * @property int FlexListItem::columnSpacing
0151      */
0152     property alias columnSpacing: _layout.columnSpacing    
0153     
0154     /**
0155      * @brief This allows to manually set the number of columns to be used.
0156      * By default his value is set to 2 when it is wide, and to 1 otherwise.
0157      * @warning Using this property will break the wrapping functionality via the `wide` property.
0158      */
0159     property alias columns: _layout.columns
0160     
0161     /**
0162      * @brief This allows to manually set the number of rows to be used. By default this uses maximum two [2] rows.
0163      * @warning Using this property will break the wrapping functionality via the `wide` property.
0164      */
0165     property alias rows: _layout.rows    
0166     
0167     implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0168     // implicitWidth: _layout.implicitWidth + topPadding + bottomPadding
0169     
0170     background: null
0171     
0172     spacing: Maui.Style.defaultSpacing
0173     
0174     contentItem: GridLayout
0175     {
0176       id: _layout
0177       
0178       rowSpacing: control.spacing
0179       columnSpacing: control.spacing
0180       
0181       columns: control.wide ? 2 : 1
0182       
0183       Maui.ListItemTemplate
0184       {
0185         id: _template
0186         Layout.fillWidth: true
0187         iconSizeHint: Maui.Style.iconSizes.medium
0188         label2.wrapMode: Text.WordWrap
0189         label1.font.weight: Font.Medium
0190       }
0191       
0192       RowLayout
0193       {
0194         id: _content 
0195         Layout.fillWidth: !control.wide
0196       }
0197     }
0198 }