FluentUI/example/qml-Qt6/component/CodeExpander.qml

145 lines
4.5 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
FluExpander{
id:control
property string code: ""
2024-03-09 15:35:48 +08:00
headerText: qsTr("Source")
2023-08-24 15:50:37 +08:00
contentHeight:content.height
focus: false
2024-02-24 23:20:12 +08:00
FluCopyableText{
2023-08-24 15:50:37 +08:00
id:content
width:parent.width
text:highlightQmlCode(code)
textFormat: FluMultilineTextBox.RichText
2024-02-24 23:20:12 +08:00
padding: 10
topPadding: 10
leftPadding: 10
rightPadding: 10
bottomPadding: 10
2023-08-24 15:50:37 +08:00
}
FluIconButton{
iconSource:FluentIcons.Copy
anchors{
right: parent.right
top: parent.top
rightMargin: 5
topMargin: 5
}
onClicked:{
FluTools.clipText(FluTools.html2PlantText(content.text))
2024-03-09 15:35:48 +08:00
showSuccess(qsTr("The Copy is Successful"))
2023-08-24 15:50:37 +08:00
}
}
function htmlEncode(e){
var i,s;
for(i in s={
"&":/&/g,//""//":/"/g,"'":/'/g,
"<":/</g,">":/>/g,"<br/>":/\n/g,
" ":/ /g," ":/\t/g
})e=e.replace(s[i],i);
return e;
}
function highlightQmlCode(code) {
var qmlKeywords = [
"FluTextButton",
"FluAppBar",
"FluAutoSuggestBox",
"FluBadge",
"FluButton",
"FluCalendarPicker",
"FluCalendarView",
"FluCarousel",
"FluCheckBox",
"FluColorPicker",
"FluColorView",
"FluComboBox",
"FluContentDialog",
"FluContentPage",
"FluDatePicker",
"FluDivider",
"FluDropDownButton",
"FluExpander",
"FluFilledButton",
"FluFlipView",
"FluFocusRectangle",
"FluIcon",
"FluIconButton",
"FluInfoBar",
"FluMediaPlayer",
"FluMenu",
"FluMenuItem",
"FluMultilineTextBox",
"FluNavigationView",
"FluObject",
"FluPaneItem",
"FluPaneItemExpander",
"FluPaneItemHeader",
"FluPaneItemSeparator",
"FluPivot",
"FluPivotItem",
"FluProgressBar",
"FluProgressRing",
"FluRadioButton",
"FluRectangle",
"FluScrollablePage",
"FluScrollBar",
"FluShadow",
"FluSlider",
"FluTabView",
"FluText",
"FluTextArea",
"FluTextBox",
"FluTextBoxBackground",
"FluTextBoxMenu",
"FluTextButton",
"FluTextFiled",
"FluTimePicker",
"FluToggleSwitch",
"FluTooltip",
"FluTreeView",
"FluWindow",
"FluWindowResize",
"FluToggleButton",
"FluTableView",
"FluColors",
"FluTheme",
2024-02-23 12:26:10 +08:00
"FluStatusLayout",
2023-08-24 15:50:37 +08:00
"FluRatingControl",
"FluPasswordBox",
"FluBreadcrumbBar",
"FluCopyableText",
"FluAcrylic",
"FluRemoteLoader",
"FluMenuBar",
"FluPagination",
"FluRadioButtons",
"FluImage",
"FluSpinBox",
"FluWatermark",
"FluTour",
"FluQRCode",
"FluTimeline",
2023-08-27 12:40:02 +08:00
"FluChart",
2023-08-30 17:18:49 +08:00
"FluRangeSlider",
2024-01-29 16:36:30 +08:00
"FluStaggeredLayout",
2023-09-11 18:10:50 +08:00
"FluProgressButton",
2023-09-27 15:18:10 +08:00
"FluLoadingButton",
2023-11-29 21:35:06 +08:00
"FluClip",
2023-12-01 18:14:10 +08:00
"FluNetwork",
"FluShortcutPicker"
2023-08-24 15:50:37 +08:00
];
code = code.replace(/\n/g, "<br>");
code = code.replace(/ /g, "&nbsp;");
return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
}
}