Warning, /maui/mauikit/src/controls.6/TextFieldPopup.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 * Copyright 2023 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 import Qt5Compat.GraphicalEffects
0024 import QtQuick.Window
0025
0026 import org.mauikit.controls 1.3 as Maui
0027
0028 /**
0029 * @inherit QtQuick.Controls.AbstractButton
0030 * @brief A TextField control with an attached popup surface.
0031 *
0032 * @image html Misc/textfieldpopup.gif
0033 *
0034 * This control groups a text field box and a popup page together - the popup surface can be used to display any data content that might be related to the text field input.
0035 *
0036 * The text field control is handled by a QQC2 TextField control, which is exposed as `textField`, and the popup surface is hanlded by a QQC2 Popup control, also exposed as an alias `popup`. With those alias you can fine tune the properties of said controls.
0037 * @see textField
0038 * @see popup
0039 *
0040 * @code
0041 * Maui.Page
0042 * {
0043 * anchors.fill: parent
0044 *
0045 * Maui.Controls.showCSD: true
0046 * Maui.Theme.colorSet: Maui.Theme.Window
0047 *
0048 * footBar.middleContent: Maui.TextFieldPopup
0049 * {
0050 * position: ToolBar.Footer
0051 *
0052 * Layout.fillWidth: true
0053 * Layout.maximumWidth: 500
0054 * Layout.alignment: Qt.AlignHCenter
0055 *
0056 * placeholderText: "Search for Something."
0057 *
0058 * Maui.Holder
0059 * {
0060 * anchors.fill: parent
0061 *
0062 * visible: true
0063 * title: "Something Here"
0064 * body: "List whatever in here."
0065 * emoji: "edit-find"
0066 * }
0067 * }
0068 * }
0069 * @endcode
0070 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/TextFieldPopup.qml">You can find a more complete example at this link.</a>
0071 */
0072 AbstractButton
0073 {
0074 id: control
0075
0076 Maui.Theme.colorSet: Maui.Theme.Button
0077 Maui.Theme.inherit: false
0078
0079 property int minimumWidth: 400
0080 property int minimumHeight: 500
0081
0082 implicitWidth: 200
0083 implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0084
0085 hoverEnabled: true
0086
0087 /**
0088 * @brief The children elements are placed inside the popup surface. The elements have to be positioned manually.
0089 * The popup surface is open once the text field bar is focused.
0090 * @property list<QtObject> TextFieldPopup::content
0091 */
0092 default property alias content: _page.content
0093
0094 /**
0095 * @brief An alias to the QQC2 control handling the popup surface.
0096 * Exposed to access its properties. See Qt documentation on the Popup control.
0097 * @property Popup TextFieldPopup::popup
0098 */
0099 readonly property alias popup: _popup
0100
0101 /**
0102 * @brief An alias to the TextField control handling the text field box.
0103 * Exposed to access its properties. See Qt documentation on the TextField control.
0104 * @property TextField TextFieldPopup::popup
0105 */
0106 readonly property alias textField : _textField
0107
0108 /**
0109 * @brief Whether the popup surface is currently visible
0110 * @property bool TextFieldPopup::popupVisible
0111 */
0112 readonly property alias popupVisible: _popup.visible
0113
0114 /**
0115 * @brief The Popup close policy.
0116 * by default this is set to ` Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent`
0117 * @property enum TextFieldPopup::closePolicy
0118 */
0119 property alias closePolicy: _popup.closePolicy
0120
0121 /**
0122 * @brief The position of the control. This will make the popup go in either of the picked position: top or bottom.
0123 * By default this is set to `ToolBar.Header`
0124 * Possible values are:
0125 * - ToolBar.Header
0126 * - ToolBar.Footer
0127 */
0128 property int position: ToolBar.Header
0129
0130 /**
0131 * @brief The text to be used as the placeholder in the text field box.
0132 * @property string TextFieldPopup::placeholderText
0133 */
0134 property alias placeholderText: _textField.placeholderText
0135
0136 /**
0137 * @brief The input method hints for the text field.
0138 * refer to the Qt TextField documentation for further information.
0139 * @property enum TextFieldPopup::inputMethodHints
0140 */
0141 property alias inputMethodHints: _textField.inputMethodHints
0142
0143 /**
0144 * @brief Whether the text field box gets focused on pressed.
0145 * By default this is set to `true`
0146 * @property bool TextFieldPopup::activeFocusOnPress
0147 */
0148 property alias activeFocusOnPress: _textField.activeFocusOnPress
0149
0150 /**
0151 * @brief The wrap mode for the text in the text field box.
0152 * By default this is set to `Text.NoWrap`.
0153 * @property enum TextFieldPopup::wrapMode
0154 */
0155 property alias wrapMode :_textField.wrapMode
0156
0157 /**
0158 * @brief The color fo the text in the text field.
0159 * @property color TextFieldPopup::color
0160 */
0161 property alias color: _textField.color
0162
0163 /**
0164 * @brief The vertical alignment of the text in the text field box.
0165 * By default his is set to `Qt.AlignVCenter`
0166 * @property enum TextFieldPopup::verticalAlignment
0167 */
0168 property alias verticalAlignment: _textField.verticalAlignment
0169
0170 onClicked:
0171 {
0172 _popup.open()
0173 }
0174
0175 text: _textField.text
0176 icon.name: "edit-find"
0177
0178 Keys.onEscapePressed: control.close()
0179
0180 /**
0181 * @brief Emitted when the text entered has been accepted, either by pressing Enter, or manually accepted.
0182 */
0183 signal accepted()
0184
0185 /**
0186 * @brief Emitted when the text in the text field box has been cleared using the clear button or clear action.
0187 */
0188 signal cleared()
0189
0190 /**
0191 * @brief Emitted when the popup surface has been activated and is visible.
0192 */
0193 signal opened()
0194
0195 /**
0196 * @brief Emitted when the popup surfaced has been dismissed.
0197 */
0198 signal closed()
0199
0200 /**
0201 * @brief Forces to open the popup surface.
0202 */
0203 function open()
0204 {
0205 _popup.open()
0206 }
0207
0208 /**
0209 * @brief Forces to close the popup surface.
0210 */
0211 function close()
0212 {
0213 _popup.close()
0214 }
0215
0216 /**
0217 * @brief Forces to clear the text in the text field box.
0218 */
0219 function clear()
0220 {
0221 _textField.clear()
0222 }
0223
0224 padding: Maui.Style.defaultPadding
0225 spacing: Maui.Style.space.small
0226
0227 contentItem: Item
0228 {
0229 RowLayout
0230 {
0231 id: _layout
0232 anchors.fill: parent
0233 spacing: control.spacing
0234
0235 Maui.Icon
0236 {
0237 visible: source ? true : false
0238 source: control.icon.name
0239 implicitHeight: visible ? 16 : 0
0240 implicitWidth: height
0241 color: control.color
0242 }
0243
0244 Item
0245 {
0246 Layout.fillWidth: true
0247 visible: !placeholder.visible
0248 }
0249
0250 Label
0251 {
0252 id: placeholder
0253 Layout.fillWidth: true
0254 text: control.text.length > 0 ? control.text : control.placeholderText
0255 font: control.font
0256 color: control.color
0257 verticalAlignment: control.verticalAlignment
0258 elide: Text.ElideRight
0259 wrapMode: Text.NoWrap
0260
0261 opacity: control.text.length > 0 ? 1 : 0.5
0262
0263 Behavior on opacity
0264 {
0265 NumberAnimation
0266 {
0267 duration: Maui.Style.units.longDuration
0268 easing.type: Easing.InOutQuad
0269 }
0270 }
0271 }
0272 }
0273
0274 Loader
0275 {
0276 asynchronous: true
0277 anchors.fill: parent
0278 sourceComponent: DropArea
0279 {
0280 onDropped: (drop) =>
0281 {
0282 if (drop.hasText)
0283 {
0284 control.text += drop.text
0285
0286 }else if(drop.hasUrls)
0287 {
0288 control.text = drop.urls
0289 }
0290 }
0291 }
0292 }
0293
0294 }
0295
0296 data: Popup
0297 {
0298 id: _popup
0299
0300 parent: control
0301
0302 closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
0303 modal: false
0304
0305 y: control.position === ToolBar.Header ? 0 : (0 - (height) + control.height)
0306 x: width === control.width ? 0 : 0 - ((width - control.width)/2)
0307
0308 width: Math.min(Math.max(control.minimumWidth, parent.width), control.Window.window.width - Maui.Style.defaultPadding*2)
0309 height: Math.min(control.Window.window.height- Maui.Style.defaultPadding*2, control.minimumHeight)
0310
0311 anchors.centerIn: undefined
0312
0313 margins: 0
0314 padding: 0
0315
0316 onClosed:
0317 {
0318 // _textField.clear()
0319 control.closed()
0320 }
0321
0322 onOpened:
0323 {
0324 _textField.forceActiveFocus()
0325 _textField.selectAll()
0326 control.opened()
0327 }
0328
0329 Maui.Page
0330 {
0331 id:_page
0332 anchors.fill: parent
0333 altHeader: control.position === ToolBar.Footer
0334
0335 headBar.visible: false
0336 headerColumn: TextField
0337 {
0338 implicitHeight: control.height
0339 width: parent.width
0340
0341 id: _textField
0342 text: control.text
0343
0344 icon.source: control.icon.name
0345
0346 onTextChanged: control.text = text
0347 onAccepted:
0348 {
0349 control.text = text
0350 control.accepted()
0351 }
0352
0353 onCleared:
0354 {
0355 control.cleared()
0356 }
0357
0358 Keys.enabled: true
0359 Keys.forwardTo: control
0360 Keys.onEscapePressed: control.close()
0361
0362 background: Rectangle
0363 {
0364 color: Maui.Theme.backgroundColor
0365
0366
0367 Maui.Separator
0368 {
0369 id: _border
0370 anchors.left: parent.left
0371 anchors.right: parent.right
0372 weight: Maui.Separator.Weight.Light
0373 opacity: 0.4
0374
0375 Behavior on color
0376 {
0377 Maui.ColorTransition{}
0378 }
0379 }
0380
0381 states: [ State
0382 {
0383 when: control.position === ToolBar.Header
0384
0385 AnchorChanges
0386 {
0387 target: _border
0388 anchors.top: undefined
0389 anchors.bottom: parent.bottom
0390 }
0391 },
0392
0393 State
0394 {
0395 when: control.position === ToolBar.Footer
0396
0397 AnchorChanges
0398 {
0399 target: _border
0400 anchors.top: parent.top
0401 anchors.bottom: undefined
0402 }
0403 }
0404 ]
0405 }
0406 }
0407 }
0408
0409 background: Rectangle
0410 {
0411 color: Maui.Theme.backgroundColor
0412
0413 radius: Maui.Style.radiusV
0414 layer.enabled: true
0415 layer.effect: DropShadow
0416 {
0417 horizontalOffset: 0
0418 verticalOffset: 0
0419 radius: 8
0420 samples: 16
0421 color: "#80000000"
0422 transparentBorder: true
0423 }
0424
0425 Behavior on color
0426 {
0427 Maui.ColorTransition{}
0428 }
0429 }
0430 }
0431
0432 background: Rectangle
0433 {
0434 color: control.enabled ? (control.hovered ? Maui.Theme.hoverColor : Maui.Theme.backgroundColor) : "transparent"
0435
0436 radius: Maui.Style.radiusV
0437
0438 Behavior on color
0439 {
0440 Maui.ColorTransition{}
0441 }
0442 }
0443
0444 /**
0445 * @brief Force the focus to go on the text field box and open up the popup surface.
0446 */
0447 function forceActiveFocus()
0448 {
0449 control.open()
0450 }
0451 }