feat: anims + box padding

box provide padding and animate size and colour
provide box and boxlayout for with/without layout
provide clippingbox
provide label for anim + rendertype
configure QtQuick controls

6 files changed, 379 insertions, 11 deletions

diff --git a/widgets/Box.qml b/widgets/Box.qml
index c0d7f06..536469e 100644
--- a/widgets/Box.qml
+++ b/widgets/Box.qml
@@ -1,16 +1,86 @@
 import "root:/config"
-import QtQuick.Layouts
+import QtQuick
+
+Rectangle {
+    id: root
 
-GridLayout {
     property bool vertical: false
-    property real spacing: Appearance.spacing.small
     property bool homogenous: false
+    property bool animated: false
+    property int spacing: Appearance.spacing.small
+    property var padding: 0
+
+    readonly property int paddingTop: getRealPadding().top
+    readonly property int paddingRight: getRealPadding().right
+    readonly property int paddingBottom: getRealPadding().bottom
+    readonly property int paddingLeft: getRealPadding().left
+    readonly property int paddingX: getRealPadding().x
+    readonly property int paddingY: getRealPadding().y
+
+    color: "transparent"
+
+    implicitWidth: childrenRect.width + paddingX
+    implicitHeight: childrenRect.height + paddingY
+
+    function getRealPadding() {
+        const pad = {};
+
+        if (Array.isArray(padding)) {
+            if (padding.length === 2) {
+                pad.top = pad.bottom = padding[0];
+                pad.left = pad.right = padding[1];
+            } else if (padding.length === 3) {
+                pad.top = padding[0];
+                pad.left = pad.right = padding[1];
+                pad.bottom = padding[2];
+            } else if (padding.length === 4) {
+                pad.top = padding[0];
+                pad.right = padding[1];
+                pad.bottom = padding[2];
+                pad.left = padding[3];
+            }
+        } else {
+            pad.top = pad.bottom = pad.left = pad.right = padding;
+        }
+
+        pad.x = pad.left + pad.right;
+        pad.y = pad.top + pad.bottom;
+
+        return pad;
+    }
+
+    onChildrenChanged: {
+        for (const child of children) {
+            child.x = Qt.binding(() => paddingLeft);
+            child.y = Qt.binding(() => paddingTop);
+        }
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on implicitWidth {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        enabled: root.animated
 
-    flow: vertical ? GridLayout.TopToBottom : GridLayout.LeftToRight
-    uniformCellWidths: homogenous && vertical
-    uniformCellHeights: homogenous && !vertical
-    rows: vertical ? -1 : 1
-    columns: vertical ? 1 : -1
-    rowSpacing: spacing
-    columnSpacing: spacing
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
 }
diff --git a/widgets/BoxLayout.qml b/widgets/BoxLayout.qml
new file mode 100644
index 0000000..12aa4f7
--- /dev/null
+++ b/widgets/BoxLayout.qml
@@ -0,0 +1,97 @@
+import "root:/config"
+import QtQuick
+import QtQuick.Layouts
+
+Rectangle {
+    id: root
+
+    property bool vertical: false
+    property bool homogenous: false
+    property bool animated: false
+    property int spacing: Appearance.spacing.small
+    property var padding: 0
+
+    readonly property int paddingTop: getRealPadding().top
+    readonly property int paddingRight: getRealPadding().right
+    readonly property int paddingBottom: getRealPadding().bottom
+    readonly property int paddingLeft: getRealPadding().left
+    readonly property int paddingX: getRealPadding().x
+    readonly property int paddingY: getRealPadding().y
+
+    color: "transparent"
+
+    implicitWidth: layout.implicitWidth + paddingX
+    implicitHeight: layout.implicitHeight + paddingY
+
+    function getRealPadding() {
+        const pad = {};
+
+        if (Array.isArray(padding)) {
+            if (padding.length === 2) {
+                pad.top = pad.bottom = padding[0];
+                pad.left = pad.right = padding[1];
+            } else if (padding.length === 3) {
+                pad.top = padding[0];
+                pad.left = pad.right = padding[1];
+                pad.bottom = padding[2];
+            } else if (padding.length === 4) {
+                pad.top = padding[0];
+                pad.right = padding[1];
+                pad.bottom = padding[2];
+                pad.left = padding[3];
+            }
+        } else {
+            pad.top = pad.bottom = pad.left = pad.right = padding;
+        }
+
+        pad.x = pad.left + pad.right;
+        pad.y = pad.top + pad.bottom;
+
+        return pad;
+    }
+
+    default property alias children: layout.children
+
+    GridLayout {
+        id: layout
+
+        x: root.paddingLeft
+        y: root.paddingTop
+
+        flow: root.vertical ? GridLayout.TopToBottom : GridLayout.LeftToRight
+        uniformCellWidths: root.homogenous || root.vertical
+        uniformCellHeights: root.homogenous || !root.vertical
+        rows: root.vertical ? -1 : 1
+        columns: root.vertical ? 1 : -1
+        rowSpacing: root.spacing
+        columnSpacing: root.spacing
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on implicitWidth {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+}
diff --git a/widgets/ClippingBox.qml b/widgets/ClippingBox.qml
new file mode 100644
index 0000000..1ced873
--- /dev/null
+++ b/widgets/ClippingBox.qml
@@ -0,0 +1,87 @@
+import "root:/config"
+import Quickshell.Widgets
+import QtQuick
+
+ClippingRectangle {
+    id: root
+
+    property bool vertical: false
+    property bool homogenous: false
+    property bool animated: false
+    property int spacing: Appearance.spacing.small
+    property var padding: 0
+
+    readonly property int paddingTop: getRealPadding().top
+    readonly property int paddingRight: getRealPadding().right
+    readonly property int paddingBottom: getRealPadding().bottom
+    readonly property int paddingLeft: getRealPadding().left
+    readonly property int paddingX: getRealPadding().x
+    readonly property int paddingY: getRealPadding().y
+
+    color: "transparent"
+
+    implicitWidth: childrenRect.width + paddingX
+    implicitHeight: childrenRect.height + paddingY
+
+    function getRealPadding() {
+        const pad = {};
+
+        if (Array.isArray(padding)) {
+            if (padding.length === 2) {
+                pad.top = pad.bottom = padding[0];
+                pad.left = pad.right = padding[1];
+            } else if (padding.length === 3) {
+                pad.top = padding[0];
+                pad.left = pad.right = padding[1];
+                pad.bottom = padding[2];
+            } else if (padding.length === 4) {
+                pad.top = padding[0];
+                pad.right = padding[1];
+                pad.bottom = padding[2];
+                pad.left = padding[3];
+            }
+        } else {
+            pad.top = pad.bottom = pad.left = pad.right = padding;
+        }
+
+        pad.x = pad.left + pad.right;
+        pad.y = pad.top + pad.bottom;
+
+        return pad;
+    }
+
+    onChildrenChanged: {
+        for (const child of children) {
+            child.x = Qt.binding(() => paddingLeft);
+            child.y = Qt.binding(() => paddingTop);
+        }
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on implicitWidth {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+}
diff --git a/widgets/ClippingBoxLayout.qml b/widgets/ClippingBoxLayout.qml
new file mode 100644
index 0000000..2b22c8c
--- /dev/null
+++ b/widgets/ClippingBoxLayout.qml
@@ -0,0 +1,98 @@
+import "root:/config"
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+ClippingRectangle {
+    id: root
+
+    property bool vertical: false
+    property bool homogenous: false
+    property bool animated: false
+    property int spacing: Appearance.spacing.small
+    property var padding: 0
+
+    readonly property int paddingTop: getRealPadding().top
+    readonly property int paddingRight: getRealPadding().right
+    readonly property int paddingBottom: getRealPadding().bottom
+    readonly property int paddingLeft: getRealPadding().left
+    readonly property int paddingX: getRealPadding().x
+    readonly property int paddingY: getRealPadding().y
+
+    color: "transparent"
+
+    implicitWidth: layout.implicitWidth + paddingX
+    implicitHeight: layout.implicitHeight + paddingY
+
+    function getRealPadding() {
+        const pad = {};
+
+        if (Array.isArray(padding)) {
+            if (padding.length === 2) {
+                pad.top = pad.bottom = padding[0];
+                pad.left = pad.right = padding[1];
+            } else if (padding.length === 3) {
+                pad.top = padding[0];
+                pad.left = pad.right = padding[1];
+                pad.bottom = padding[2];
+            } else if (padding.length === 4) {
+                pad.top = padding[0];
+                pad.right = padding[1];
+                pad.bottom = padding[2];
+                pad.left = padding[3];
+            }
+        } else {
+            pad.top = pad.bottom = pad.left = pad.right = padding;
+        }
+
+        pad.x = pad.left + pad.right;
+        pad.y = pad.top + pad.bottom;
+
+        return pad;
+    }
+
+    default property alias children: layout.children
+
+    GridLayout {
+        id: layout
+
+        x: root.paddingLeft
+        y: root.paddingTop
+
+        flow: root.vertical ? GridLayout.TopToBottom : GridLayout.LeftToRight
+        uniformCellWidths: root.homogenous || root.vertical
+        uniformCellHeights: root.homogenous || !root.vertical
+        rows: root.vertical ? -1 : 1
+        columns: root.vertical ? 1 : -1
+        rowSpacing: root.spacing
+        columnSpacing: root.spacing
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on implicitWidth {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        enabled: root.animated
+
+        NumberAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.emphasized
+        }
+    }
+}
diff --git a/widgets/Label.qml b/widgets/Label.qml
new file mode 100644
index 0000000..e1e22ba
--- /dev/null
+++ b/widgets/Label.qml
@@ -0,0 +1,16 @@
+import "root:/config"
+import QtQuick
+
+Text {
+    id: root
+
+    renderType: Text.NativeRendering
+
+    Behavior on color {
+        ColorAnimation {
+            duration: Appearance.anim.durations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+}
diff --git a/widgets/MaterialIcon.qml b/widgets/MaterialIcon.qml
index 0115abf..55e6b99 100644
--- a/widgets/MaterialIcon.qml
+++ b/widgets/MaterialIcon.qml
@@ -1,7 +1,7 @@
 import "root:/config"
 import QtQuick
 
-Text {
+Label {
     font.family: Appearance.font.family.material
     font.pointSize: Appearance.font.size.larger
 }