diff --git a/app/UI/@Templates/@layout.latte b/app/UI/@Templates/@layout.latte index c04537d..9cf9ade 100644 --- a/app/UI/@Templates/@layout.latte +++ b/app/UI/@Templates/@layout.latte @@ -13,6 +13,7 @@ + diff --git a/app/UI/@Widgets/accordion.latte b/app/UI/@Widgets/accordion.latte new file mode 100644 index 0000000..9b015db --- /dev/null +++ b/app/UI/@Widgets/accordion.latte @@ -0,0 +1,37 @@ +{default $sections = 0} +{default $exclusive = true} +{default $defaultOpen = 0} + +{if $exclusive} +
+ {for $i = 1; $i <= $sections; $i++} +
+ +
+ {block "content-$i"}{/block} +
+
+ {/for} +
+{else} +
+ {for $i = 1; $i <= $sections; $i++} +
+ +
+ {block "content-$i"}{/block} +
+
+ {/for} +
+{/if} diff --git a/app/UI/@Widgets/alert.latte b/app/UI/@Widgets/alert.latte new file mode 100644 index 0000000..275d443 --- /dev/null +++ b/app/UI/@Widgets/alert.latte @@ -0,0 +1,26 @@ +{default $type = 'info'} +{default $dismissible = true} + +{var $colors = [ + info => 'bg-blue-50 border-blue-400 text-blue-800', + success => 'bg-green-50 border-green-400 text-green-800', + warning => 'bg-yellow-50 border-yellow-400 text-yellow-800', + error => 'bg-red-50 border-red-400 text-red-800', +]} + + diff --git a/app/UI/@Widgets/badge.latte b/app/UI/@Widgets/badge.latte new file mode 100644 index 0000000..afcc13a --- /dev/null +++ b/app/UI/@Widgets/badge.latte @@ -0,0 +1,26 @@ +{default $type = 'default'} +{default $rounded = true} +{default $removable = false} +{default $dot = false} + +{var $colors = [ + default => 'bg-gray-100 text-gray-800', + primary => 'bg-blue-100 text-blue-800', + success => 'bg-green-100 text-green-800', + warning => 'bg-yellow-100 text-yellow-800', + danger => 'bg-red-100 text-red-800', +]} +{var $dotColors = [ + default => 'bg-gray-500', + primary => 'bg-blue-500', + success => 'bg-green-500', + warning => 'bg-yellow-500', + danger => 'bg-red-500', +]} + + + + {include #content} + + diff --git a/app/UI/@Widgets/card.latte b/app/UI/@Widgets/card.latte new file mode 100644 index 0000000..42ba40c --- /dev/null +++ b/app/UI/@Widgets/card.latte @@ -0,0 +1,26 @@ +{default $hoverable = false} +{default $bordered = true} +{default $shadow = 'md'} + +{var $shadows = [ + none => '', + sm => 'shadow-sm', + md => 'shadow-md', + lg => 'shadow-lg', +]} + +
+
+ {include #image} +
+
+ {include #header} +
+
+ {include #content} +
+
+ {include #footer} +
+
diff --git a/app/UI/@Widgets/drawer.latte b/app/UI/@Widgets/drawer.latte new file mode 100644 index 0000000..c323ee7 --- /dev/null +++ b/app/UI/@Widgets/drawer.latte @@ -0,0 +1,52 @@ +{default $side = 'right'} +{default $width = 'md'} + +{var $widths = [ + sm => 'w-64', + md => 'w-80', + lg => 'w-96', + xl => 'w-1/3', +]} +{var $slideStart = $side === 'left' ? '-translate-x-full' : 'translate-x-full'} + +
+
+ {include #trigger} +
+ + {* Backdrop *} +
+
+ + {* Drawer panel *} +
+ +
+
{include #header}
+ +
+ +
+ {include #content} +
+ +
+ {include #footer} +
+
+
diff --git a/app/UI/@Widgets/popover.latte b/app/UI/@Widgets/popover.latte new file mode 100644 index 0000000..95df4a6 --- /dev/null +++ b/app/UI/@Widgets/popover.latte @@ -0,0 +1,37 @@ +{default $position = 'bottom'} +{default $width = 'md'} + +{var $positionStyles = [ + top => 'bottom-full left-1/2 -translate-x-1/2 mb-2', + bottom => 'top-full left-1/2 -translate-x-1/2 mt-2', + left => 'right-full top-1/2 -translate-y-1/2 mr-2', + right => 'left-full top-1/2 -translate-y-1/2 ml-2', +]} +{var $widths = [ + sm => 'w-48', + md => 'w-64', + lg => 'w-80', +]} + +
+
+ {include #trigger} +
+ +
+
+ {include #title} +
+
+ {include #content} +
+
+
diff --git a/app/UI/@Widgets/progress.latte b/app/UI/@Widgets/progress.latte new file mode 100644 index 0000000..8e0b494 --- /dev/null +++ b/app/UI/@Widgets/progress.latte @@ -0,0 +1,29 @@ +{default $value = 0} +{default $max = 100} +{default $type = 'primary'} +{default $showLabel = true} +{default $height = 'md'} + +{var $barColors = [ + primary => 'bg-blue-500', + success => 'bg-green-500', + warning => 'bg-yellow-500', + danger => 'bg-red-500', +]} +{var $heights = [ + sm => 'h-1.5', + md => 'h-4', + lg => 'h-6', +]} + +
+
+ {include #label} +
+
+
+ +
+
+
diff --git a/app/UI/@Widgets/stepper.latte b/app/UI/@Widgets/stepper.latte new file mode 100644 index 0000000..ee7d5d1 --- /dev/null +++ b/app/UI/@Widgets/stepper.latte @@ -0,0 +1,29 @@ +{default $steps = 0} +{default $current = 1} +{default $clickable = false} + +
+
+ {for $i = 1; $i <= $steps; $i++} + {* Step circle and label *} +
+
+ {$i} + ✓ +
+ + {block "step-$i"}{/block} + +
+ {* Connecting line *} + {if $i < $steps} +
+
+ {/if} + {/for} +
+
diff --git a/app/UI/@Widgets/switch.latte b/app/UI/@Widgets/switch.latte new file mode 100644 index 0000000..c6a5416 --- /dev/null +++ b/app/UI/@Widgets/switch.latte @@ -0,0 +1,22 @@ +{default $checked = false} +{default $label = ''} +{default $name = ''} +{default $disabled = false} + +
+ + +
+ {include #label} + {$label} +

{include #description}

+
+
diff --git a/app/UI/@Widgets/toast.latte b/app/UI/@Widgets/toast.latte new file mode 100644 index 0000000..ba84283 --- /dev/null +++ b/app/UI/@Widgets/toast.latte @@ -0,0 +1,35 @@ +{default $position = 'bottom-right'} +{default $duration = 3000} +{default $type = 'info'} + +{var $positionClasses = [ + 'top-right' => 'top-4 right-4', + 'top-left' => 'top-4 left-4', + 'bottom-right' => 'bottom-4 right-4', + 'bottom-left' => 'bottom-4 left-4', +]} +{var $colors = [ + info => 'bg-blue-600 text-white', + success => 'bg-green-600 text-white', + warning => 'bg-yellow-500 text-white', + error => 'bg-red-600 text-white', +]} + +
+
+ {include #content} +
+ +
diff --git a/app/UI/Home/Templates/@codes/accordion1.latte b/app/UI/Home/Templates/@codes/accordion1.latte new file mode 100644 index 0000000..5fdcee6 --- /dev/null +++ b/app/UI/Home/Templates/@codes/accordion1.latte @@ -0,0 +1,10 @@ +{embed "~accordion", sections: 3, exclusive: true, defaultOpen: 1} + {block header-1}What is Nette Framework?{/block} + {block content-1}Nette is a popular PHP framework for web development. It provides a robust set of tools for building modern, secure web applications.{/block} + + {block header-2}What is Alpine.js?{/block} + {block content-2}Alpine.js is a lightweight JavaScript framework for composing behavior directly in your markup. It offers reactive and declarative nature of big frameworks at a much lower cost.{/block} + + {block header-3}What is TailwindCSS?{/block} + {block content-3}TailwindCSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.{/block} +{/embed} diff --git a/app/UI/Home/Templates/@codes/alert1.latte b/app/UI/Home/Templates/@codes/alert1.latte new file mode 100644 index 0000000..7048daf --- /dev/null +++ b/app/UI/Home/Templates/@codes/alert1.latte @@ -0,0 +1,23 @@ +{embed "~alert", type: 'success'} + {block content} + Your changes have been saved successfully. + {/block} +{/embed} + +{embed "~alert", type: 'error'} + {block content} + Something went wrong. Please try again. + {/block} +{/embed} + +{embed "~alert", type: 'warning', dismissible: false} + {block content} + Your trial expires in 3 days. + {/block} +{/embed} + +{embed "~alert", type: 'info'} + {block content} + A new version is available. + {/block} +{/embed} diff --git a/app/UI/Home/Templates/@codes/badge1.latte b/app/UI/Home/Templates/@codes/badge1.latte new file mode 100644 index 0000000..05a1108 --- /dev/null +++ b/app/UI/Home/Templates/@codes/badge1.latte @@ -0,0 +1,21 @@ +
+ {embed "~badge", type: 'success', dot: true} + {block content}Active{/block} + {/embed} + + {embed "~badge", type: 'warning'} + {block content}Pending{/block} + {/embed} + + {embed "~badge", type: 'danger', removable: true} + {block content}Urgent{/block} + {/embed} + + {embed "~badge", type: 'primary'} + {block content}New{/block} + {/embed} + + {embed "~badge", type: 'default', rounded: false} + {block content}Archived{/block} + {/embed} +
diff --git a/app/UI/Home/Templates/@codes/card1.latte b/app/UI/Home/Templates/@codes/card1.latte new file mode 100644 index 0000000..c349309 --- /dev/null +++ b/app/UI/Home/Templates/@codes/card1.latte @@ -0,0 +1,23 @@ +
+ {embed "~card", hoverable: true, shadow: 'lg'} + {block header}Featured Article{/block} + {block content} +

Getting Started with Nette

+

Learn how to build modern PHP applications with the Nette framework.

+ {/block} + {block footer} + Read more → + {/block} + {/embed} + + {embed "~card", hoverable: true} + {block header}Quick Tip{/block} + {block content} +

Alpine.js + Latte

+

Combine Alpine.js reactivity with Latte templating for powerful UI components.

+ {/block} + {block footer} + Learn more → + {/block} + {/embed} +
diff --git a/app/UI/Home/Templates/@codes/drawer1.latte b/app/UI/Home/Templates/@codes/drawer1.latte new file mode 100644 index 0000000..f9e5424 --- /dev/null +++ b/app/UI/Home/Templates/@codes/drawer1.latte @@ -0,0 +1,19 @@ +{embed "~drawer", side: 'right', width: 'md'} + {block trigger} + + {/block} + {block header}Navigation{/block} + {block content} + + {/block} + {block footer} + + {/block} +{/embed} diff --git a/app/UI/Home/Templates/@codes/popover1.latte b/app/UI/Home/Templates/@codes/popover1.latte new file mode 100644 index 0000000..ca26365 --- /dev/null +++ b/app/UI/Home/Templates/@codes/popover1.latte @@ -0,0 +1,13 @@ +{embed "~popover", position: 'bottom', width: 'md'} + {block trigger} + + {/block} + {block title}Profile{/block} + {block content} +

John Doe

+

john@example.com

+

Full-stack developer with 5 years of experience.

+ {/block} +{/embed} diff --git a/app/UI/Home/Templates/@codes/progress1.latte b/app/UI/Home/Templates/@codes/progress1.latte new file mode 100644 index 0000000..d32afb4 --- /dev/null +++ b/app/UI/Home/Templates/@codes/progress1.latte @@ -0,0 +1,16 @@ +{embed "~progress", value: 65, max: 100, type: 'success'} + {block label} + Storage Used + 65% + {/block} +{/embed} + +
+ {embed "~progress", value: 30, max: 100, type: 'primary'} + {/embed} +
+ +
+ {embed "~progress", value: 85, max: 100, type: 'danger', height: 'sm', showLabel: false} + {/embed} +
diff --git a/app/UI/Home/Templates/@codes/stepper1.latte b/app/UI/Home/Templates/@codes/stepper1.latte new file mode 100644 index 0000000..cfea2fc --- /dev/null +++ b/app/UI/Home/Templates/@codes/stepper1.latte @@ -0,0 +1,6 @@ +{embed "~stepper", steps: 4, current: 2, clickable: true} + {block step-1}Account{/block} + {block step-2}Details{/block} + {block step-3}Review{/block} + {block step-4}Confirm{/block} +{/embed} diff --git a/app/UI/Home/Templates/@codes/switch1.latte b/app/UI/Home/Templates/@codes/switch1.latte new file mode 100644 index 0000000..a58363e --- /dev/null +++ b/app/UI/Home/Templates/@codes/switch1.latte @@ -0,0 +1,10 @@ +
+ {embed "~switch", checked: true, label: 'Enable notifications'} + {/embed} + + {embed "~switch", checked: false, label: 'Dark mode'} + {/embed} + + {embed "~switch", checked: true, label: 'Auto-save', disabled: true} + {/embed} +
diff --git a/app/UI/Home/Templates/@codes/toast1.latte b/app/UI/Home/Templates/@codes/toast1.latte new file mode 100644 index 0000000..ffd21d4 --- /dev/null +++ b/app/UI/Home/Templates/@codes/toast1.latte @@ -0,0 +1,5 @@ +{embed "~toast", type: 'success', duration: 0, position: 'top-right'} + {block content} + Item has been added to your cart. + {/block} +{/embed} diff --git a/app/UI/Home/Templates/default.latte b/app/UI/Home/Templates/default.latte index 177ef4e..1dd042d 100644 --- a/app/UI/Home/Templates/default.latte +++ b/app/UI/Home/Templates/default.latte @@ -54,4 +54,104 @@ + {* ALERT *} +
+

Alert

+
+
+ {include "./@codes/alert1.latte"} +
+
+
+ + {* TOAST *} +
+

Toast

+
+
+ {include "./@codes/toast1.latte"} +
+
+
+ + {* ACCORDION *} +
+

Accordion

+
+
+ {include "./@codes/accordion1.latte"} +
+
+
+ + {* BADGE *} +
+

Badge

+
+
+ {include "./@codes/badge1.latte"} +
+
+
+ + {* PROGRESS *} +
+

Progress

+
+
+ {include "./@codes/progress1.latte"} +
+
+
+ + {* POPOVER *} +
+

Popover

+
+
+ {include "./@codes/popover1.latte"} +
+
+
+ + {* DRAWER *} +
+

Drawer

+
+
+ {include "./@codes/drawer1.latte"} +
+
+
+ + {* SWITCH *} +
+

Switch

+
+
+ {include "./@codes/switch1.latte"} +
+
+
+ + {* CARD *} +
+

Card

+
+
+ {include "./@codes/card1.latte"} +
+
+
+ + {* STEPPER *} +
+

Stepper

+
+
+ {include "./@codes/stepper1.latte"} +
+
+
+ diff --git a/config/config.neon b/config/config.neon index 2c83d51..e32d790 100644 --- a/config/config.neon +++ b/config/config.neon @@ -21,5 +21,15 @@ services: tooltip: %appDir%/UI/@Widgets/tooltip.latte collapse: %appDir%/UI/@Widgets/collapse.latte tabs: %appDir%/UI/@Widgets/tabs.latte + alert: %appDir%/UI/@Widgets/alert.latte + toast: %appDir%/UI/@Widgets/toast.latte + accordion: %appDir%/UI/@Widgets/accordion.latte + badge: %appDir%/UI/@Widgets/badge.latte + progress: %appDir%/UI/@Widgets/progress.latte + popover: %appDir%/UI/@Widgets/popover.latte + drawer: %appDir%/UI/@Widgets/drawer.latte + switch: %appDir%/UI/@Widgets/switch.latte + card: %appDir%/UI/@Widgets/card.latte + stepper: %appDir%/UI/@Widgets/stepper.latte ]) )