diff --git a/ui/demo.slint b/ui/demo.slint index 864a03e..d56f2b9 100644 --- a/ui/demo.slint +++ b/ui/demo.slint @@ -10,6 +10,16 @@ import { Item } from "components/item.slint"; import { Sidebar, NavItem } from "components/sidebar.slint"; import { Dialog } from "components/dialog.slint"; import { ToastContainer, ToastMessage } from "components/toast.slint"; +import { Accordion, AccordionItemData } from "components/accordion.slint"; +import { Switch } from "components/switch.slint"; +import { Progress } from "components/progress.slint"; +import { Select, SelectOption } from "components/select.slint"; +import { Tabs, TabItem, TabContent } from "components/tabs.slint"; +import { Label, LabelSize, LabelColor } from "components/label.slint"; +import { Separator, Orientation } from "components/separator.slint"; +import { StatusIndicator, StatusState } from "components/status-indicator.slint"; +import { Tooltip } from "components/tooltip.slint"; +import { Empty } from "components/empty.slint"; export component Demo inherits Window { title: "Slint Shadcn UI - Task Manager Demo"; @@ -27,6 +37,18 @@ export component Demo inherits Window { in-out property sidebar-collapsed: false; in-out property dialog-open: false; in-out property <[ToastMessage]> toasts: []; + + // Component showcase state + in-out property switch-checked: false; + in-out property progress-value: 65; + in-out property selected-option: -1; + in-out property current-tab: 0; + in-out property tooltip-visible: false; + in-out property <[AccordionItemData]> accordion-items: [ + { title: "What is Slint?", expanded: false }, + { title: "How do I get started?", expanded: false }, + { title: "Can I use it in production?", expanded: false }, + ]; // Sidebar navigation items property <[NavItem]> nav-items: [ @@ -395,41 +417,41 @@ export component Demo inherits Window { CardTitle { text: "Dialog & Toast"; } CardDescription { text: "Modal dialogs and notification toasts"; } } - + CardContent { HorizontalLayout { spacing: SpacingSystem.spacing.s2; - + Button { text: "Open Dialog"; - + clicked => { dialog-open = true; } } - + Button { text: "Show Success Toast"; variant: "outline"; - + clicked => { root.show-toast("Operation successful!", "success"); } } - + Button { text: "Show Error Toast"; variant: "outline"; - + clicked => { root.show-toast("Something went wrong!", "error"); } } - + Button { text: "Show Warning Toast"; variant: "outline"; - + clicked => { root.show-toast("Please be careful!", "warning"); } @@ -437,6 +459,455 @@ export component Demo inherits Window { } } } + + // Switch showcase + Card { + CardHeader { + CardTitle { text: "Switch Component"; } + CardDescription { text: "Toggle switches for boolean settings"; } + } + + CardContent { + VerticalLayout { + spacing: SpacingSystem.spacing.s4; + + HorizontalLayout { + spacing: SpacingSystem.spacing.s3; + alignment: start; + + Switch { + checked: switch-checked; + toggled(new-state) => { + switch-checked = new-state; + } + } + + Text { + text: switch-checked ? "Enabled" : "Disabled"; + color: Theme.colors.foreground; + font-size: Typography.sizes.sm; + vertical-alignment: center; + } + } + + HorizontalLayout { + spacing: SpacingSystem.spacing.s3; + alignment: start; + + Switch { + checked: true; + enabled: false; + } + + Text { + text: "Disabled (checked)"; + color: Theme.colors.muted-foreground; + font-size: Typography.sizes.sm; + vertical-alignment: center; + } + } + } + } + } + + // Progress showcase + Card { + CardHeader { + CardTitle { text: "Progress Component"; } + CardDescription { text: "Progress bars for loading states"; } + } + + CardContent { + VerticalLayout { + spacing: SpacingSystem.spacing.s4; + + Progress { + value: progress-value; + } + + Progress { + value: progress-value; + show-label: true; + } + + HorizontalLayout { + spacing: SpacingSystem.spacing.s2; + + Button { + text: "Increase"; + size: "sm"; + clicked => { + progress-value = Math.min(100, progress-value + 10); + } + } + + Button { + text: "Decrease"; + size: "sm"; + variant: "outline"; + clicked => { + progress-value = Math.max(0, progress-value - 10); + } + } + + Button { + text: "Reset"; + size: "sm"; + variant: "ghost"; + clicked => { + progress-value = 65; + } + } + } + } + } + } + + // Select showcase + Card { + CardHeader { + CardTitle { text: "Select Component"; } + CardDescription { text: "Dropdown select menus"; } + } + + CardContent { + VerticalLayout { + spacing: SpacingSystem.spacing.s4; + + Select { + options: [ + { label: "Apple", value: "apple" }, + { label: "Banana", value: "banana" }, + { label: "Cherry", value: "cherry" }, + { label: "Date", value: "date" }, + ]; + selected-index: selected-option; + placeholder: "Select a fruit..."; + + selected(index, value) => { + selected-option = index; + root.show-toast("Selected: " + value, "default"); + } + } + + Select { + options: [ + { label: "Option 1", value: "1" }, + { label: "Option 2", value: "2" }, + ]; + enabled: false; + placeholder: "Disabled select"; + } + } + } + } + + // Tabs showcase + Card { + CardHeader { + CardTitle { text: "Tabs Component"; } + CardDescription { text: "Tabbed navigation interface"; } + } + + CardContent { + Tabs { + tabs: [ + { title: "Account" }, + { title: "Password" }, + { title: "Settings" }, + ]; + current-index: current-tab; + + tab-changed(index) => { + current-tab = index; + } + + TabContent { + index: 0; + current-index: current-tab; + + VerticalLayout { + spacing: SpacingSystem.spacing.s3; + padding: SpacingSystem.spacing.s4; + + Text { + text: "Account Settings"; + font-size: Typography.sizes.base; + font-weight: Typography.weights.semibold; + color: Theme.colors.foreground; + } + + Text { + text: "Manage your account settings and preferences."; + font-size: Typography.sizes.sm; + color: Theme.colors.muted-foreground; + } + } + } + + TabContent { + index: 1; + current-index: current-tab; + + VerticalLayout { + spacing: SpacingSystem.spacing.s3; + padding: SpacingSystem.spacing.s4; + + Text { + text: "Password Settings"; + font-size: Typography.sizes.base; + font-weight: Typography.weights.semibold; + color: Theme.colors.foreground; + } + + Text { + text: "Change your password and security settings."; + font-size: Typography.sizes.sm; + color: Theme.colors.muted-foreground; + } + } + } + + TabContent { + index: 2; + current-index: current-tab; + + VerticalLayout { + spacing: SpacingSystem.spacing.s3; + padding: SpacingSystem.spacing.s4; + + Text { + text: "General Settings"; + font-size: Typography.sizes.base; + font-weight: Typography.weights.semibold; + color: Theme.colors.foreground; + } + + Text { + text: "Configure general application settings."; + font-size: Typography.sizes.sm; + color: Theme.colors.muted-foreground; + } + } + } + } + } + } + + // Label showcase + Card { + CardHeader { + CardTitle { text: "Label Component"; } + CardDescription { text: "Text labels with various sizes and colors"; } + } + + CardContent { + VerticalLayout { + spacing: SpacingSystem.spacing.s4; + + // Sizes + HorizontalLayout { + spacing: SpacingSystem.spacing.s3; + alignment: center; + + Label { text: "Extra Small"; size: LabelSize.xs; } + Label { text: "Small"; size: LabelSize.sm; } + Label { text: "Base"; size: LabelSize.base; } + Label { text: "Large"; size: LabelSize.lg; } + Label { text: "Extra Large"; size: LabelSize.xl; } + } + + // Colors + HorizontalLayout { + spacing: SpacingSystem.spacing.s3; + + Label { text: "Foreground"; color-variant: LabelColor.foreground; } + Label { text: "Muted"; color-variant: LabelColor.muted; } + Label { text: "Primary"; color-variant: LabelColor.primary; } + Label { text: "Destructive"; color-variant: LabelColor.destructive; } + } + } + } + } + + // Separator showcase + Card { + CardHeader { + CardTitle { text: "Separator Component"; } + CardDescription { text: "Visual dividers for content sections"; } + } + + CardContent { + VerticalLayout { + spacing: SpacingSystem.spacing.s4; + + Text { + text: "Horizontal Separator"; + font-size: Typography.sizes.sm; + color: Theme.colors.muted-foreground; + } + + Separator { orientation: Orientation.horizontal; } + + HorizontalLayout { + spacing: SpacingSystem.spacing.s4; + height: 60px; + + Text { + text: "Vertical"; + font-size: Typography.sizes.sm; + color: Theme.colors.muted-foreground; + vertical-alignment: center; + } + + Separator { orientation: Orientation.vertical; } + + Text { + text: "Separator"; + font-size: Typography.sizes.sm; + color: Theme.colors.muted-foreground; + vertical-alignment: center; + } + } + } + } + } + + // Status Indicator showcase + Card { + CardHeader { + CardTitle { text: "Status Indicator Component"; } + CardDescription { text: "Animated status indicators"; } + } + + CardContent { + HorizontalLayout { + spacing: SpacingSystem.spacing.s6; + + HorizontalLayout { + spacing: SpacingSystem.spacing.s2; + alignment: center; + + StatusIndicator { state: StatusState.stopped; } + Text { + text: "Stopped"; + font-size: Typography.sizes.sm; + color: Theme.colors.foreground; + vertical-alignment: center; + } + } + + HorizontalLayout { + spacing: SpacingSystem.spacing.s2; + alignment: center; + + StatusIndicator { state: StatusState.starting; } + Text { + text: "Starting"; + font-size: Typography.sizes.sm; + color: Theme.colors.foreground; + vertical-alignment: center; + } + } + + HorizontalLayout { + spacing: SpacingSystem.spacing.s2; + alignment: center; + + StatusIndicator { state: StatusState.running; } + Text { + text: "Running"; + font-size: Typography.sizes.sm; + color: Theme.colors.foreground; + vertical-alignment: center; + } + } + } + } + } + + // Tooltip showcase + Card { + CardHeader { + CardTitle { text: "Tooltip Component"; } + CardDescription { text: "Hover tooltips for additional information"; } + } + + CardContent { + HorizontalLayout { + spacing: SpacingSystem.spacing.s2; + + Rectangle { + width: 120px; + height: 36px; + + Button { + text: "Hover Me"; + variant: "outline"; + } + + Tooltip { + text: "This is a tooltip!"; + show: tooltip-visible; + } + + TouchArea { + moved => { + tooltip-visible = self.has-hover; + } + } + } + } + } + } + + // Accordion showcase + Card { + CardHeader { + CardTitle { text: "Accordion Component"; } + CardDescription { text: "Collapsible content sections"; } + } + + CardContent { + Accordion { + items: accordion-items; + + item-toggled(index, expanded) => { + accordion-items[index].expanded = expanded; + } + } + } + } + + // Empty showcase + Card { + CardHeader { + CardTitle { text: "Empty Component"; } + CardDescription { text: "Empty state placeholders"; } + } + + CardContent { + VerticalLayout { + spacing: SpacingSystem.spacing.s6; + + Empty { + icon: "📭"; + title: "No Messages"; + description: "You don't have any messages yet."; + min-height: 150px; + } + + Separator { orientation: Orientation.horizontal; } + + Empty { + icon: "🔍"; + title: "No Results Found"; + description: "Try adjusting your search criteria."; + min-height: 150px; + } + } + } + } } // Settings view