src/qml/TagInput.qml

0001 /* SPDX-FileCopyrightText: 2021 Noah Davis <noahadvs@gmail.com>
0002  * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0003  */
0004
0005 import QtQuick 2.15
0006 import QtQuick.Controls 2.15 as QQC2
0007 import QtQuick.Layouts 1.15
0008 import QtQml.Models 2.15
0009 import org.kde.kirigami 2.15 as Kirigami
0010 import org.kde.koko 0.1 as Koko
0011
0012 QQC2.ComboBox {
0013     id: comboBox
0014     required property Koko.Exiv2Extractor extractor
0015
0016     editable: true
0017     model: tagsListModel
0018
0019     Koko.ImageTagsModel {
0020         id: imageTagsModel
0021         onTagsChanged: if (tagsListModel.count > 0) {
0022             tagsListModel.clear()
0023             imageTagsModel.tags.forEach((element) => {
0024                 if (!comboBox.extractor.tags.includes(element)) {
0025                     tagsListModel.append({ tag: element })
0026                 }
0027             })
0028         }
0029     }
0030
0031     // For some reason, using an array as a model directly causes the
0032     // contentItem to show the first item when created instead of being blank.
0033     ListModel {
0034         id: tagsListModel
0035         Component.onCompleted: imageTagsModel.tags.forEach((element) => {
0036             if (!comboBox.extractor.tags.includes(element)) {
0037                 tagsListModel.append({ tag: element })
0038             }
0039         })
0040     }
0041
0042     Connections {
0043         target: comboBox.extractor
0044         function onTagsChanged() {
0045             tagsListModel.clear()
0046             imageTagsModel.tags.forEach((element) => {
0047                 if (!comboBox.extractor.tags.includes(element)) {
0048                     tagsListModel.append({ tag: element })
0049                 }
0050             })
0051         }
0052     }
0053
0054     QQC2.Label {
0055         id: placeholder
0056         x: comboBox.contentItem.x + comboBox.contentItem.leftPadding
0057         y: comboBox.contentItem.y + comboBox.contentItem.topPadding
0058         width: comboBox.contentItem.width - comboBox.contentItem.leftPadding - comboBox.contentItem.rightPadding
0059         height: comboBox.contentItem.height - comboBox.contentItem.topPadding - comboBox.contentItem.bottomPadding
0060         text: i18n("Add new tag…")
0061         font: comboBox.font
0062         opacity: 0.5
0063         horizontalAlignment: Text.AlignLeft
0064         verticalAlignment: Text.AlignVCenter
0065         visible: !comboBox.editText
0066         elide: Text.ElideRight
0067     }
0068
0069     onAccepted: {
0070         const text = comboBox.editText.trim()
0071         if (text.length > 0) {
0072             comboBox.extractor.tags.push(text)
0073         }
0074         comboBox.editText = ""
0075     }
0076 }