loco_motion-rails 0.0.6 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +139 -67
- data/app/components/daisy/actions/button_component.rb +112 -8
- data/app/components/daisy/actions/dropdown_component.html.haml +5 -5
- data/app/components/daisy/actions/dropdown_component.rb +95 -26
- data/app/components/daisy/actions/modal_component.html.haml +3 -2
- data/app/components/daisy/actions/modal_component.rb +111 -20
- data/app/components/daisy/actions/swap_component.rb +117 -6
- data/app/components/daisy/actions/theme_controller_component.html.haml +1 -1
- data/app/components/daisy/actions/theme_controller_component.rb +37 -2
- data/app/components/daisy/data_display/accordion_component.rb +81 -4
- data/app/components/daisy/data_display/avatar_component.rb +39 -17
- data/app/components/daisy/data_display/badge_component.rb +49 -5
- data/app/components/daisy/data_display/card_component.html.haml +5 -13
- data/app/components/daisy/data_display/card_component.rb +76 -40
- data/app/components/daisy/data_display/carousel_component.rb +39 -1
- data/app/components/daisy/data_display/chat_component.rb +42 -15
- data/app/components/daisy/data_display/collapse_component.rb +61 -2
- data/app/components/daisy/data_display/countdown_component.rb +51 -1
- data/app/components/daisy/data_display/diff_component.rb +38 -1
- data/app/components/daisy/data_display/figure_component.rb +49 -0
- data/app/components/daisy/data_display/kbd_component.rb +64 -3
- data/app/components/daisy/data_display/stat_component.rb +67 -7
- data/app/components/daisy/data_display/table_component.rb +100 -35
- data/app/components/daisy/data_display/timeline_component.rb +46 -1
- data/app/components/daisy/data_display/timeline_event_component.rb +40 -2
- data/app/components/daisy/feedback/alert_component.rb +47 -2
- data/app/components/daisy/feedback/loading_component.rb +50 -0
- data/app/components/daisy/feedback/progress_component.rb +58 -0
- data/app/components/daisy/feedback/radial_progress_component.rb +72 -0
- data/app/components/daisy/feedback/skeleton_component.rb +53 -0
- data/app/components/daisy/feedback/toast_component.rb +45 -0
- data/app/components/daisy/feedback/tooltip_component.rb +77 -0
- data/app/components/daisy/layout/artboard_component.rb +59 -0
- data/app/components/daisy/layout/divider_component.rb +72 -0
- data/app/components/daisy/layout/drawer_component.html.haml +9 -0
- data/app/components/daisy/layout/drawer_component.rb +155 -0
- data/app/components/daisy/layout/footer_component.rb +69 -0
- data/app/components/daisy/layout/hero_component.html.haml +5 -0
- data/app/components/daisy/layout/hero_component.rb +83 -0
- data/app/components/daisy/layout/indicator_component.rb +83 -0
- data/app/components/daisy/layout/join_component.rb +72 -1
- data/app/components/daisy/layout/stack_component.rb +68 -0
- data/app/components/daisy/mockup/browser_component.rb +78 -0
- data/app/components/daisy/mockup/code_component.rb +144 -0
- data/app/components/daisy/mockup/device_component.rb +81 -0
- data/app/components/daisy/mockup/frame_component.rb +62 -0
- data/app/components/daisy/navigation/bottom_nav_component.rb +83 -4
- data/app/components/daisy/navigation/breadcrumbs_component.rb +41 -4
- data/app/components/daisy/navigation/link_component.rb +66 -13
- data/app/components/daisy/navigation/menu_component.rb +83 -11
- data/app/components/daisy/navigation/navbar_component.html.haml +1 -1
- data/app/components/daisy/navigation/navbar_component.rb +64 -3
- data/app/components/daisy/navigation/steps_component.rb +78 -2
- data/app/components/daisy/navigation/tabs_component.rb +112 -9
- data/app/components/hero/icon_component.rb +50 -1
- data/lib/daisy.rb +18 -3
- data/lib/hero.rb +7 -0
- data/lib/loco_motion/basic_component.rb +1 -1
- data/lib/loco_motion/concerns/tippable_component.rb +26 -0
- data/lib/loco_motion/configuration.rb +35 -0
- data/lib/loco_motion/helpers.rb +96 -0
- data/lib/loco_motion/version.rb +5 -0
- data/lib/loco_motion.rb +6 -36
- metadata +58 -9
- data/app/components/daisy/data_display/badge_component.html.haml +0 -2
- data/app/components/daisy/data_display/kbd_component.html.haml +0 -2
- data/app/components/daisy/navigation/link_component.html.haml +0 -4
- data/lib/daisy/helpers.rb +0 -61
@@ -0,0 +1,68 @@
|
|
1
|
+
#
|
2
|
+
# The StackComponent creates a 3D stacking effect by layering elements on top
|
3
|
+
# of each other. Common use cases include:
|
4
|
+
# - Notification cards or alerts.
|
5
|
+
# - Photo galleries with overlap.
|
6
|
+
# - Interactive card games.
|
7
|
+
# - Animated content transitions.
|
8
|
+
#
|
9
|
+
# The component automatically positions children in a stack, with each element
|
10
|
+
# appearing on top of the previous one. This creates depth and visual interest
|
11
|
+
# in your layouts.
|
12
|
+
#
|
13
|
+
# @loco_example Basic Card Stack
|
14
|
+
# = daisy_stack do
|
15
|
+
# = daisy_card(css: "bg-base-100/80 shadow") do
|
16
|
+
# Top Card
|
17
|
+
# = daisy_card(css: "bg-base-100/80 shadow") do
|
18
|
+
# Middle Card
|
19
|
+
# = daisy_card(css: "bg-base-100/80 shadow") do
|
20
|
+
# Bottom Card
|
21
|
+
#
|
22
|
+
# @loco_example Animated Stack
|
23
|
+
# = daisy_stack do
|
24
|
+
# = daisy_card(css: "bg-primary cursor-pointer",
|
25
|
+
# html: { onclick: "anime({
|
26
|
+
# targets: this,
|
27
|
+
# translateY: '-100%',
|
28
|
+
# opacity: 0,
|
29
|
+
# complete: (el) => el.remove()
|
30
|
+
# })" }) do
|
31
|
+
# Click to Remove
|
32
|
+
#
|
33
|
+
# @loco_example Image Stack
|
34
|
+
# = daisy_stack(css: "w-96") do
|
35
|
+
# %img{ src: "image1.jpg" }
|
36
|
+
# %img{ src: "image2.jpg" }
|
37
|
+
# %img{ src: "image3.jpg" }
|
38
|
+
#
|
39
|
+
class Daisy::Layout::StackComponent < LocoMotion::BaseComponent
|
40
|
+
#
|
41
|
+
# Creates a new Stack component.
|
42
|
+
#
|
43
|
+
# @param kws [Hash] Keyword arguments for customizing the stack.
|
44
|
+
#
|
45
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
46
|
+
# options include:
|
47
|
+
# - Size: `w-96`, `h-64`
|
48
|
+
# - Spacing: `gap-2`, `space-y-4`
|
49
|
+
# - Position: `relative`, `absolute`
|
50
|
+
#
|
51
|
+
def initialize(**kws)
|
52
|
+
super
|
53
|
+
end
|
54
|
+
|
55
|
+
#
|
56
|
+
# Sets up the component's CSS classes.
|
57
|
+
#
|
58
|
+
def before_render
|
59
|
+
add_css(:component, "stack")
|
60
|
+
end
|
61
|
+
|
62
|
+
#
|
63
|
+
# Renders the component and its stacked content.
|
64
|
+
#
|
65
|
+
def call
|
66
|
+
part(:component) { content }
|
67
|
+
end
|
68
|
+
end
|
@@ -0,0 +1,78 @@
|
|
1
|
+
#
|
2
|
+
# The BrowserComponent creates a realistic browser window mockup, perfect for:
|
3
|
+
# - Showcasing web applications.
|
4
|
+
# - Creating website previews.
|
5
|
+
# - Demonstrating responsive designs.
|
6
|
+
# - Building marketing materials.
|
7
|
+
#
|
8
|
+
# The component includes an optional toolbar for URL input and browser
|
9
|
+
# controls, and a content area that can contain any content you wish to
|
10
|
+
# display.
|
11
|
+
#
|
12
|
+
# @slot toolbar [LocoMotion::BasicComponent] An optional toolbar section,
|
13
|
+
# typically containing a URL input field or navigation controls.
|
14
|
+
#
|
15
|
+
# @loco_example Basic Browser with URL
|
16
|
+
# = daisy_browser(css: "w-full border border-base-300") do |browser|
|
17
|
+
# - browser.with_toolbar do
|
18
|
+
# %input.input.input-bordered{
|
19
|
+
# placeholder: "https://example.com" }
|
20
|
+
#
|
21
|
+
# .border-t.border-base-300.p-4
|
22
|
+
# Your website content here
|
23
|
+
#
|
24
|
+
# @loco_example Styled Browser
|
25
|
+
# = daisy_browser(css: "bg-primary border-2") do |browser|
|
26
|
+
# - browser.with_toolbar do
|
27
|
+
# .flex.gap-2.px-4
|
28
|
+
# = daisy_button(icon: "chevron-left",
|
29
|
+
# css: "btn-circle btn-sm")
|
30
|
+
# = daisy_button(icon: "chevron-right",
|
31
|
+
# css: "btn-circle btn-sm")
|
32
|
+
# %input.input.input-sm.flex-1{
|
33
|
+
# placeholder: "Search..." }
|
34
|
+
#
|
35
|
+
# .bg-base-100.p-8.text-center
|
36
|
+
# Professional website mockup
|
37
|
+
#
|
38
|
+
# @loco_example Content-Only Browser
|
39
|
+
# = daisy_browser(css: "border shadow-lg") do
|
40
|
+
# .p-4
|
41
|
+
# Simple browser frame without toolbar
|
42
|
+
#
|
43
|
+
class Daisy::Mockup::BrowserComponent < LocoMotion::BaseComponent
|
44
|
+
|
45
|
+
renders_one :toolbar, LocoMotion::BasicComponent.build(css: "mockup-browser-toolbar")
|
46
|
+
|
47
|
+
#
|
48
|
+
# Creates a new Browser component.
|
49
|
+
#
|
50
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
51
|
+
# options include:
|
52
|
+
# - Size: `w-full`, `max-w-4xl`
|
53
|
+
# - Border: `border`, `border-2`, `border-primary`
|
54
|
+
# - Background: `bg-base-100`, `bg-primary`
|
55
|
+
# - Shadow: `shadow`, `shadow-lg`
|
56
|
+
#
|
57
|
+
def initialize(**kws)
|
58
|
+
super(**kws)
|
59
|
+
end
|
60
|
+
|
61
|
+
#
|
62
|
+
# Sets up the component's CSS classes.
|
63
|
+
#
|
64
|
+
def before_render
|
65
|
+
add_css(:component, "mockup-browser")
|
66
|
+
end
|
67
|
+
|
68
|
+
#
|
69
|
+
# Renders the toolbar (if present) and content.
|
70
|
+
#
|
71
|
+
def call
|
72
|
+
part(:component) do
|
73
|
+
concat(toolbar) if toolbar
|
74
|
+
concat(content)
|
75
|
+
end
|
76
|
+
end
|
77
|
+
|
78
|
+
end
|
@@ -0,0 +1,144 @@
|
|
1
|
+
#
|
2
|
+
# The CodeComponent creates stylized code blocks for displaying code snippets,
|
3
|
+
# terminal output, or any text that benefits from monospace formatting.
|
4
|
+
# Common use cases include:
|
5
|
+
# - Displaying code examples.
|
6
|
+
# - Showing terminal commands and output.
|
7
|
+
# - Highlighting important configuration settings.
|
8
|
+
# - Creating interactive tutorials.
|
9
|
+
#
|
10
|
+
# The component supports line prefixes (e.g., for line numbers or command
|
11
|
+
# prompts), syntax highlighting via CSS classes, and multi-line code blocks.
|
12
|
+
#
|
13
|
+
# @slot lines+ [Daisy::Mockup::CodeLineComponent] Individual lines of code,
|
14
|
+
# each with optional prefix and styling.
|
15
|
+
#
|
16
|
+
# @loco_example Basic Command with Prefix
|
17
|
+
# = daisy_code(prefix: "$") do
|
18
|
+
# yarn add @profoundry-us/loco_motion
|
19
|
+
#
|
20
|
+
# @loco_example Multi-line Terminal Output
|
21
|
+
# = daisy_code do |code|
|
22
|
+
# - code.with_line(prefix: "$") do
|
23
|
+
# npm install
|
24
|
+
# - code.with_line(prefix: ">", css: "text-warning") do
|
25
|
+
# Installing packages...
|
26
|
+
# - code.with_line(prefix: ">", css: "text-success") do
|
27
|
+
# Done in 2.45s
|
28
|
+
#
|
29
|
+
# @loco_example Code Block with Highlighting
|
30
|
+
# = daisy_code do |code|
|
31
|
+
# - code.with_line(prefix: "1") do
|
32
|
+
# def hello_world
|
33
|
+
# - code.with_line(prefix: "2", css: "bg-warning") do
|
34
|
+
# puts "Hello, world!"
|
35
|
+
# - code.with_line(prefix: "3") do
|
36
|
+
# end
|
37
|
+
#
|
38
|
+
# @loco_example Plain Code Block
|
39
|
+
# = daisy_code do
|
40
|
+
# :plain
|
41
|
+
# class Example
|
42
|
+
# def initialize
|
43
|
+
# @value = 42
|
44
|
+
# end
|
45
|
+
# end
|
46
|
+
#
|
47
|
+
class Daisy::Mockup::CodeComponent < LocoMotion::BaseComponent
|
48
|
+
|
49
|
+
#
|
50
|
+
# A component for rendering individual lines within a code block.
|
51
|
+
#
|
52
|
+
# @part code The code content for this line.
|
53
|
+
#
|
54
|
+
class Daisy::Mockup::CodeLineComponent < LocoMotion::BaseComponent
|
55
|
+
define_parts :code
|
56
|
+
|
57
|
+
#
|
58
|
+
# Creates a new code line.
|
59
|
+
#
|
60
|
+
# @option kws prefix [String] Optional prefix for the line (e.g., "$",
|
61
|
+
# ">", or line numbers).
|
62
|
+
# @option kws css [String] Additional CSS classes for styling the line.
|
63
|
+
#
|
64
|
+
def initialize(**kws)
|
65
|
+
super(**kws)
|
66
|
+
|
67
|
+
@prefix = config_option(:prefix)
|
68
|
+
end
|
69
|
+
|
70
|
+
#
|
71
|
+
# Sets up the component's HTML tags and attributes.
|
72
|
+
#
|
73
|
+
def before_render
|
74
|
+
set_tag_name(:component, :pre)
|
75
|
+
set_tag_name(:code, :code)
|
76
|
+
|
77
|
+
add_html(:component, { "data-prefix": @prefix }) if @prefix
|
78
|
+
end
|
79
|
+
|
80
|
+
#
|
81
|
+
# Renders the line with its code content.
|
82
|
+
#
|
83
|
+
def call
|
84
|
+
part(:component) do
|
85
|
+
part(:code) do
|
86
|
+
content
|
87
|
+
end
|
88
|
+
end
|
89
|
+
end
|
90
|
+
end
|
91
|
+
|
92
|
+
define_parts :pre, :code
|
93
|
+
renders_many :lines, Daisy::Mockup::CodeLineComponent
|
94
|
+
|
95
|
+
#
|
96
|
+
# Creates a new code block component.
|
97
|
+
#
|
98
|
+
# @option kws prefix [String] Optional prefix for all lines (if not using
|
99
|
+
# individual line prefixes).
|
100
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
101
|
+
# options include:
|
102
|
+
# - Size: `w-full`, `max-w-3xl`
|
103
|
+
# - Background: `bg-base-300`, `bg-neutral`
|
104
|
+
# - Text: `text-sm`, `text-base-content`
|
105
|
+
#
|
106
|
+
def initialize(**kws)
|
107
|
+
super(**kws)
|
108
|
+
|
109
|
+
@prefix = config_option(:prefix)
|
110
|
+
end
|
111
|
+
|
112
|
+
#
|
113
|
+
# Sets up the component's CSS classes and HTML attributes.
|
114
|
+
#
|
115
|
+
def before_render
|
116
|
+
add_css(:component, "mockup-code")
|
117
|
+
|
118
|
+
set_tag_name(:pre, :pre)
|
119
|
+
set_tag_name(:code, :code)
|
120
|
+
|
121
|
+
add_html(:pre, { "data-prefix": @prefix }) if @prefix
|
122
|
+
|
123
|
+
# If the prefix is blank, add some left margin and hide the :before
|
124
|
+
# pseudo-element used for the prefix
|
125
|
+
add_css(:pre, "before:!hidden ml-6") if @prefix.blank?
|
126
|
+
end
|
127
|
+
|
128
|
+
#
|
129
|
+
# Renders the code block with its lines or direct content.
|
130
|
+
#
|
131
|
+
def call
|
132
|
+
part(:component) do
|
133
|
+
if lines.any?
|
134
|
+
lines.each { |line| concat(line) }
|
135
|
+
else
|
136
|
+
part(:pre) do
|
137
|
+
part(:code) do
|
138
|
+
content
|
139
|
+
end
|
140
|
+
end
|
141
|
+
end
|
142
|
+
end
|
143
|
+
end
|
144
|
+
end
|
@@ -0,0 +1,81 @@
|
|
1
|
+
#
|
2
|
+
# The DeviceComponent creates realistic device mockups for showcasing mobile
|
3
|
+
# and tablet applications. Common use cases include:
|
4
|
+
# - Displaying mobile app screenshots.
|
5
|
+
# - Creating marketing materials.
|
6
|
+
# - Demonstrating responsive designs.
|
7
|
+
# - Building portfolio pieces.
|
8
|
+
#
|
9
|
+
# The component includes an optional camera element and a display area that
|
10
|
+
# can contain any content, typically an ArtboardComponent for proper sizing.
|
11
|
+
#
|
12
|
+
# @part camera The device's camera element, shown at the top by default.
|
13
|
+
# @part display The main display area of the device.
|
14
|
+
#
|
15
|
+
# @loco_example Phone with Camera
|
16
|
+
# = daisy_device(css: "mockup-phone") do
|
17
|
+
# = daisy_artboard(css: "phone-2") do
|
18
|
+
# .flex.flex-col.p-4
|
19
|
+
# .text-2xl.font-bold
|
20
|
+
# My App
|
21
|
+
# = image_tag("screenshot.jpg",
|
22
|
+
# class: "rounded-lg")
|
23
|
+
#
|
24
|
+
# @loco_example Tablet without Camera
|
25
|
+
# = daisy_device(css: "mockup-phone border-primary",
|
26
|
+
# show_camera: false) do
|
27
|
+
# = daisy_artboard(css: "artboard-horizontal phone-3") do
|
28
|
+
# .bg-base-100.p-4
|
29
|
+
# Tablet Content Here
|
30
|
+
#
|
31
|
+
# @loco_example Styled Device
|
32
|
+
# = daisy_device(css: "mockup-phone border-4
|
33
|
+
# border-accent shadow-xl") do
|
34
|
+
# = daisy_artboard(css: "phone-1") do
|
35
|
+
# .bg-gradient-to-br.from-primary.to-accent.p-4
|
36
|
+
# Premium App Design
|
37
|
+
#
|
38
|
+
class Daisy::Mockup::DeviceComponent < LocoMotion::BaseComponent
|
39
|
+
|
40
|
+
define_parts :camera, :display
|
41
|
+
|
42
|
+
#
|
43
|
+
# Creates a new Device component.
|
44
|
+
#
|
45
|
+
# @option kws show_camera [Boolean] Whether to show the camera element
|
46
|
+
# (default: true).
|
47
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
48
|
+
# options include:
|
49
|
+
# - Type: `mockup-phone`
|
50
|
+
# - Border: `border-2`, `border-primary`
|
51
|
+
# - Shadow: `shadow-lg`, `shadow-xl`
|
52
|
+
#
|
53
|
+
def initialize(**kws)
|
54
|
+
super(**kws)
|
55
|
+
|
56
|
+
@show_camera = config_option(:show_camera, true)
|
57
|
+
end
|
58
|
+
|
59
|
+
#
|
60
|
+
# Sets up the component's CSS classes.
|
61
|
+
#
|
62
|
+
def before_render
|
63
|
+
add_css(:camera, "camera")
|
64
|
+
add_css(:display, "display")
|
65
|
+
add_css(:display, "!mt-0") if !@show_camera
|
66
|
+
end
|
67
|
+
|
68
|
+
#
|
69
|
+
# Renders the device with its camera (if enabled) and display content.
|
70
|
+
#
|
71
|
+
def call
|
72
|
+
part(:component) do
|
73
|
+
concat(part(:camera)) if @show_camera
|
74
|
+
|
75
|
+
concat(part(:display) do
|
76
|
+
content
|
77
|
+
end)
|
78
|
+
end
|
79
|
+
end
|
80
|
+
|
81
|
+
end
|
@@ -0,0 +1,62 @@
|
|
1
|
+
#
|
2
|
+
# The FrameComponent creates a simple window-like container for showcasing
|
3
|
+
# content. Similar to the BrowserComponent but without the toolbar, it's
|
4
|
+
# perfect for:
|
5
|
+
# - Displaying application screenshots.
|
6
|
+
# - Creating simple window mockups.
|
7
|
+
# - Framing content in presentations.
|
8
|
+
# - Building marketing materials.
|
9
|
+
#
|
10
|
+
# The component provides a clean, minimal window frame that can be styled
|
11
|
+
# to match your design needs.
|
12
|
+
#
|
13
|
+
# @loco_example Basic Frame
|
14
|
+
# = daisy_frame(css: "border border-base-300") do
|
15
|
+
# .border-t.border-base-300.p-4
|
16
|
+
# Window content here
|
17
|
+
#
|
18
|
+
# @loco_example Styled Frame
|
19
|
+
# = daisy_frame(css: "bg-primary border-2") do
|
20
|
+
# .bg-base-100.border-t.p-8.text-center
|
21
|
+
# = image_tag("logo.png",
|
22
|
+
# class: "max-w-xs mx-auto")
|
23
|
+
# %p.mt-4
|
24
|
+
# Professional window mockup
|
25
|
+
#
|
26
|
+
# @loco_example Image Frame
|
27
|
+
# = daisy_frame(css: "shadow-xl") do
|
28
|
+
# .p-0
|
29
|
+
# = image_tag("screenshot.jpg",
|
30
|
+
# class: "w-full")
|
31
|
+
#
|
32
|
+
class Daisy::Mockup::FrameComponent < LocoMotion::BaseComponent
|
33
|
+
#
|
34
|
+
# Creates a new Frame component.
|
35
|
+
#
|
36
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
37
|
+
# options include:
|
38
|
+
# - Size: `w-full`, `max-w-4xl`
|
39
|
+
# - Border: `border`, `border-primary`
|
40
|
+
# - Background: `bg-base-100`, `bg-primary`
|
41
|
+
# - Shadow: `shadow-lg`, `shadow-xl`
|
42
|
+
#
|
43
|
+
def initialize(**kws)
|
44
|
+
super(**kws)
|
45
|
+
end
|
46
|
+
|
47
|
+
#
|
48
|
+
# Sets up the component's CSS classes.
|
49
|
+
#
|
50
|
+
def before_render
|
51
|
+
add_css(:component, "mockup-window")
|
52
|
+
end
|
53
|
+
|
54
|
+
#
|
55
|
+
# Renders the frame with its content.
|
56
|
+
#
|
57
|
+
def call
|
58
|
+
part(:component) do
|
59
|
+
content
|
60
|
+
end
|
61
|
+
end
|
62
|
+
end
|
@@ -1,11 +1,76 @@
|
|
1
|
-
|
1
|
+
#
|
2
|
+
# Creates a bottom navigation bar, typically used in mobile-friendly applications
|
3
|
+
# to provide quick access to important sections.
|
4
|
+
#
|
5
|
+
# @slot sections+ {Daisy::Navigation::BottomNavSectionComponent} The sections to display in the navigation bar.
|
6
|
+
#
|
7
|
+
# @example Basic bottom nav with icons
|
8
|
+
# = daisy_bottom_nav do |nav|
|
9
|
+
# - nav.with_section(icon: "home", href: "#")
|
10
|
+
# - nav.with_section(icon: "information-circle", href: "#", active: true)
|
11
|
+
# - nav.with_section(icon: "chart-bar", href: "#")
|
12
|
+
#
|
13
|
+
# @example Bottom nav with titles
|
14
|
+
# = daisy_bottom_nav do |nav|
|
15
|
+
# - nav.with_section(icon: "home", href: "#", title: "Home")
|
16
|
+
# - nav.with_section(icon: "information-circle", href: "#", title: "Info")
|
17
|
+
# - nav.with_section(icon: "chart-bar", href: "#", title: "Stats")
|
18
|
+
#
|
19
|
+
# @example Colored bottom nav
|
20
|
+
# = daisy_bottom_nav do |nav|
|
21
|
+
# - nav.with_section(icon: "home", href: "#", css: "text-primary")
|
22
|
+
# - nav.with_section(icon: "information-circle", href: "#", css: "text-secondary")
|
23
|
+
# - nav.with_section(icon: "chart-bar", href: "#", css: "text-accent")
|
24
|
+
#
|
25
|
+
class Daisy::Navigation::BottomNavComponent < LocoMotion::BaseComponent
|
2
26
|
|
3
|
-
|
27
|
+
#
|
28
|
+
# A section within a Bottom Navigation component.
|
29
|
+
#
|
30
|
+
# @part icon The icon element for the section.
|
31
|
+
# @part title The title element for the section.
|
32
|
+
#
|
33
|
+
# @example Basic section with icon
|
34
|
+
# = daisy_bottom_nav do |nav|
|
35
|
+
# - nav.with_section(icon: "home", href: "#")
|
36
|
+
#
|
37
|
+
# @example Active section with title
|
38
|
+
# = daisy_bottom_nav do |nav|
|
39
|
+
# - nav.with_section(icon: "information-circle", href: "#", active: true, title: "Info")
|
40
|
+
#
|
41
|
+
# @example Custom title content
|
42
|
+
# = daisy_bottom_nav do |nav|
|
43
|
+
# - nav.with_section(icon: "chart-bar", href: "#") do
|
44
|
+
# .font-bold.text-xs
|
45
|
+
# Stats
|
46
|
+
#
|
47
|
+
class Daisy::Navigation::BottomNavSectionComponent < LocoMotion::BaseComponent
|
4
48
|
|
5
49
|
define_parts :icon, :title
|
6
50
|
|
7
|
-
|
8
|
-
|
51
|
+
# Creates a new bottom navigation section.
|
52
|
+
#
|
53
|
+
# @param kws [Hash] The keyword arguments for the component.
|
54
|
+
#
|
55
|
+
# @option kws icon [String] The name of the icon to display.
|
56
|
+
#
|
57
|
+
# @option kws icon_variant [Symbol] The variant of the icon to use (default: :outline).
|
58
|
+
#
|
59
|
+
# @option kws icon_css [String] Additional CSS classes for the icon.
|
60
|
+
#
|
61
|
+
# @option kws title [String] Optional text to display below the icon.
|
62
|
+
#
|
63
|
+
# @option kws href [String] Optional URL to make the section a link.
|
64
|
+
#
|
65
|
+
# @option kws active [Boolean] Whether this section is currently active (default: false).
|
66
|
+
#
|
67
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
68
|
+
# options include:
|
69
|
+
# - Text color: `text-primary`, `text-secondary`, `text-accent`
|
70
|
+
# - Custom colors: `text-[#449944]`
|
71
|
+
#
|
72
|
+
def initialize(**kws)
|
73
|
+
super(**kws)
|
9
74
|
|
10
75
|
@icon = config_option(:icon)
|
11
76
|
@icon_variant = config_option(:icon_variant, :outline)
|
@@ -42,6 +107,20 @@ class Daisy::Navigation::BottomNavComponent < LocoMotion.configuration.base_comp
|
|
42
107
|
|
43
108
|
renders_many :sections, Daisy::Navigation::BottomNavSectionComponent
|
44
109
|
|
110
|
+
# Creates a new bottom navigation component.
|
111
|
+
#
|
112
|
+
# @param kws [Hash] The keyword arguments for the component.
|
113
|
+
#
|
114
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
115
|
+
# options include:
|
116
|
+
# - Position: `relative`, `fixed bottom-0`
|
117
|
+
# - Width: `w-full`, `max-w-[400px]`
|
118
|
+
# - Border: `border`, `border-base-200`
|
119
|
+
#
|
120
|
+
def initialize(**kws)
|
121
|
+
super(**kws)
|
122
|
+
end
|
123
|
+
|
45
124
|
def before_render
|
46
125
|
add_css(:component, "btm-nav")
|
47
126
|
end
|
@@ -1,15 +1,52 @@
|
|
1
|
-
|
1
|
+
#
|
2
|
+
# Creates a breadcrumb navigation component to show the user's location within
|
3
|
+
# a website or app.
|
4
|
+
#
|
5
|
+
# @part list_wrapper The unordered list element that wraps the breadcrumb items.
|
6
|
+
#
|
7
|
+
# @slot items+ {LocoMotion::BasicComponent} The individual breadcrumb items.
|
8
|
+
# Each item is rendered as a list item (`<li>`) element.
|
9
|
+
#
|
10
|
+
# @example Basic breadcrumbs with text
|
11
|
+
# = daisy_breadcrumbs do |breadcrumbs|
|
12
|
+
# - breadcrumbs.with_item do
|
13
|
+
# = link_to "Home", "#"
|
14
|
+
# - breadcrumbs.with_item do
|
15
|
+
# = link_to "Docs", "#"
|
16
|
+
# - breadcrumbs.with_item do
|
17
|
+
# = link_to "Components", "#"
|
18
|
+
#
|
19
|
+
# @example Breadcrumbs with icons
|
20
|
+
# = daisy_breadcrumbs do |breadcrumbs|
|
21
|
+
# - breadcrumbs.with_item do
|
22
|
+
# = link_to "#" do
|
23
|
+
# = hero_icon("home", css: "size-4 mr-1")
|
24
|
+
# Home
|
25
|
+
# - breadcrumbs.with_item do
|
26
|
+
# = link_to "#" do
|
27
|
+
# = hero_icon("document", css: "size-4 mr-1")
|
28
|
+
# Docs
|
29
|
+
#
|
30
|
+
class Daisy::Navigation::BreadcrumbsComponent < LocoMotion::BaseComponent
|
2
31
|
define_parts :list_wrapper
|
3
32
|
|
4
33
|
renders_many :items, LocoMotion::BasicComponent.build(tag_name: :li)
|
5
34
|
|
6
|
-
|
7
|
-
|
35
|
+
# Create a new instance of the BreadcrumbsComponent.
|
36
|
+
#
|
37
|
+
# @param kws [Hash] The keyword arguments for the component.
|
38
|
+
#
|
39
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
40
|
+
# options include:
|
41
|
+
# - Text: `text-sm`, `text-base-content`
|
42
|
+
# - Spacing: `space-x-2`, `gap-4`
|
43
|
+
#
|
44
|
+
def initialize(**kws)
|
45
|
+
super(**kws)
|
8
46
|
end
|
9
47
|
|
10
48
|
def before_render
|
11
49
|
add_css(:component, "breadcrumbs")
|
12
|
-
|
13
50
|
set_tag_name(:list_wrapper, :ul)
|
14
51
|
end
|
15
52
|
end
|
@@ -1,24 +1,66 @@
|
|
1
1
|
#
|
2
|
-
#
|
3
|
-
#
|
2
|
+
# Creates a styled link component that can be used for navigation or inline text
|
3
|
+
# links. This component is designed to work similarly to Rails' `link_to` helper.
|
4
4
|
#
|
5
|
-
|
5
|
+
# @example Link with custom styling
|
6
|
+
# = daisy_link "Components", "#", css: "link-primary text-xl"
|
7
|
+
#
|
8
|
+
# @example Link with block content
|
9
|
+
# = daisy_link "#", css: "link-hover" do
|
10
|
+
# = hero_icon("home")
|
11
|
+
# Home
|
12
|
+
#
|
13
|
+
# @example Link with positional arguments
|
14
|
+
# = daisy_link "Documentation", "#"
|
15
|
+
#
|
16
|
+
# @example Basic link with keyword arguments
|
17
|
+
# = daisy_link(title: "Home", href: "#")
|
18
|
+
#
|
19
|
+
class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
|
20
|
+
prepend LocoMotion::Concerns::TippableComponent
|
6
21
|
|
7
22
|
# Create a new instance of the LinkComponent.
|
8
23
|
#
|
9
|
-
#
|
10
|
-
#
|
11
|
-
#
|
12
|
-
#
|
24
|
+
# @param args [Array] Looks for **one** or **two** positional arguments.
|
25
|
+
# - If passed **two** positional arguments, the first is considered the `title`
|
26
|
+
# and the second is considered the `href`.
|
27
|
+
# - If passed only **one** positional argument, it is treated as the `href`
|
28
|
+
# and we assume the `title` will be provided in the block.
|
29
|
+
# - If no text is passed in the block, we will use the `href` as the title.
|
30
|
+
#
|
31
|
+
# @param kws [Hash] The keyword arguments for the component.
|
32
|
+
#
|
33
|
+
# @option kws title [String] The text to display in the link. Not required if
|
34
|
+
# providing block content.
|
35
|
+
#
|
36
|
+
# @option kws href [String] The URL to visit when the link is clicked.
|
37
|
+
#
|
38
|
+
# @option kws target [String] The target attribute for the anchor tag (e.g., "_blank").
|
13
39
|
#
|
14
|
-
# @
|
15
|
-
#
|
16
|
-
#
|
17
|
-
|
40
|
+
# @option kws css [String] Additional CSS classes for styling. Common
|
41
|
+
# options include:
|
42
|
+
# - Style: `link-primary`, `link-secondary`, `link-accent`
|
43
|
+
# - State: `link-hover`
|
44
|
+
# - Text: `text-sm`, `text-xl`, `text-2xl`
|
45
|
+
#
|
46
|
+
def initialize(*args, **kws)
|
18
47
|
super
|
19
48
|
|
20
|
-
|
21
|
-
|
49
|
+
if args.size == 1
|
50
|
+
# If given one arg, assume it's the href and / or the title (if no block is given)
|
51
|
+
@title = args[0]
|
52
|
+
@href = args[0]
|
53
|
+
elsif args.size == 2
|
54
|
+
# If given two args, assume the first is the title and the second is the href
|
55
|
+
@title = args[0]
|
56
|
+
@href = args[1]
|
57
|
+
else
|
58
|
+
# Otherwise, assume they pass everything as keyword arguments
|
59
|
+
@title = config_option(:title)
|
60
|
+
@href = config_option(:href)
|
61
|
+
end
|
62
|
+
|
63
|
+
@target = config_option(:target)
|
22
64
|
end
|
23
65
|
|
24
66
|
#
|
@@ -31,4 +73,15 @@ class Daisy::Navigation::LinkComponent < LocoMotion.configuration.base_component
|
|
31
73
|
add_html(:component, { href: @href }) if @href
|
32
74
|
add_html(:component, { target: @target }) if @target
|
33
75
|
end
|
76
|
+
|
77
|
+
#
|
78
|
+
# Renders the link component.
|
79
|
+
#
|
80
|
+
# Because this is an inline component which might be utlized alongside text,
|
81
|
+
# we utilize the `call` method instead of a template to ensure that no
|
82
|
+
# additional whitespace gets added to the output.
|
83
|
+
#
|
84
|
+
def call
|
85
|
+
part(:component) { content || @title }
|
86
|
+
end
|
34
87
|
end
|