init

2026-01-26 09:05:48 +08:00
commit f218a21377
20 changed files with 7774 additions and 0 deletions
--- a/ui/components/card.slint
+++ b/ui/components/card.slint
@@ -0,0 +1,93 @@
+// Card Component
+// Container for grouping related content with optional hover effect
+
+import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
+import { Animations } from "../utils/animations.slint";
+
+// Main Card component
+export component Card {
+    in property <bool> hoverable: false;
+    
+    private property <bool> hovered: false;
+    
+    // Main container
+    Rectangle {
+        background: Theme.colors.card;
+        border-radius: SpacingSystem.radius.lg;
+        border-width: 1px;
+        border-color: Theme.colors.border;
+        
+        // Hover shadow effect
+        drop-shadow-blur: hovered && hoverable ? 8px : 0px;
+        drop-shadow-color: #00000020;
+        drop-shadow-offset-y: hovered && hoverable ? 4px : 0px;
+        
+        animate drop-shadow-blur, drop-shadow-offset-y { 
+            duration: Animations.durations.normal; 
+            easing: Animations.ease-in-out; 
+        }
+        
+        VerticalLayout {
+            padding: SpacingSystem.spacing.s6;
+            spacing: SpacingSystem.spacing.s4;
+            
+            @children
+        }
+        
+        if hoverable: TouchArea {
+            moved => {
+                hovered = self.has-hover;
+            }
+        }
+    }
+}
+
+// Card Header component
+export component CardHeader {
+    VerticalLayout {
+        spacing: SpacingSystem.spacing.s2;
+        @children
+    }
+}
+
+// Card Title component
+export component CardTitle {
+    in property <string> text;
+    
+    Text {
+        text: root.text;
+        font-size: Typography.sizes.xl;
+        font-weight: Typography.weights.semibold;
+        color: Theme.colors.card-foreground;
+        wrap: word-wrap;
+    }
+}
+
+// Card Description component
+export component CardDescription {
+    in property <string> text;
+    
+    Text {
+        text: root.text;
+        font-size: Typography.sizes.sm;
+        color: Theme.colors.muted-foreground;
+        wrap: word-wrap;
+    }
+}
+
+// Card Content component
+export component CardContent {
+    VerticalLayout {
+        spacing: SpacingSystem.spacing.s4;
+        @children
+    }
+}
+
+// Card Footer component
+export component CardFooter {
+    HorizontalLayout {
+        spacing: SpacingSystem.spacing.s2;
+        alignment: end;
+        @children
+    }
+}