Make SpinBox a reusable component

Forgot to update Readonly `SpinBox`es to Qt 2 when implementing Cura
8684. As the spinbox is used in various places with the same
functionality it made sense to create a reusable component.

There is still a feature gap in the implementation; The `SpinBox`es
from QtControls 2.x value is defined as an integer. For some use-cases
we do require a fractional value in the `SpinBox`. The only two places
where this is required are the `material_diameter` and
`material_density` fields in the material prefference page.

Cura 8684

resources/qml/SpinBox.qml

@@ -0,0 +1,47 @@
+// Copyright (c) 2022 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 2.15
+
+SpinBox
+{
+    id: base
+
+    property string prefix: ""
+    property string suffix: ""
+    property int decimals: 0
+
+    signal editingFinished()
+
+    valueFromText: function(text)
+    {
+        return parseFloat(text.substring(prefix.length, text.length - suffix.length), decimals);
+    }
+
+    textFromValue: function(value)
+    {
+        return prefix + value.toFixed(decimals) + suffix
+    }
+
+    validator: RegExpValidator
+    {
+        regExp: new RegExp("^" + prefix + "([0-9]+[.|,]?[0-9]*)?" + suffix + "$")
+    }
+
+    contentItem: TextField
+    {
+        text: base.textFromValue(base.value, base.locale)
+        selectByMouse: true
+        background: Item {}
+        validator: base.validator
+
+        onActiveFocusChanged:
+        {
+            if(!activeFocus)
+            {
+                base.editingFinished()
+            }
+        }
+    }
+}