Skip to content

Commit c9e7218

Browse files
lsouoliveiralsouoliveira
committed
temp
1 parent c837dea commit c9e7218

File tree

9 files changed

+632
-4
lines changed

9 files changed

+632
-4
lines changed

‎app/components/ruby_ui/dropdown_menu/dropdown_menu_content.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
module RubyUI
44
class DropdownMenuContent < Base
55
def view_template(&block)
6-
div(data: {ruby_ui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
6+
div(data: {ruby_ui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0; z-index: 50;") do
77
div(**attrs, &block)
88
end
99
end

‎app/components/ruby_ui/sidebar/collapsible_sidebar.rb

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# frozen_string_literal: true
2+
3+
module RubyUI
4+
class CollapsibleSidebar < Base
5+
def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: true, **attrs)
6+
@side = side
7+
@variant = variant
8+
@collapsible = collapsible
9+
@open = open
10+
super(**attrs)
11+
end
12+
13+
def view_template(&)
14+
MobileSidebar(side: @side, **attrs, &)
15+
div(**mix(sidebar_attrs, attrs)) do
16+
div(**gap_element_attrs)
17+
div(**content_wrapper_attrs) do
18+
div(**content_attrs, &)
19+
end
20+
end
21+
end
22+
23+
private
24+
25+
def sidebar_attrs
26+
{
27+
class: "group peer hidden text-sidebar-foreground md:block",
28+
data: {
29+
state: @open ? "expanded" : "collapsed",
30+
collapsible: @open ? "" : @collapsible,
31+
variant: @variant,
32+
side: @side,
33+
collapsible_kind: @collapsible,
34+
ruby_ui__sidebar_target: "sidebar"
35+
}
36+
}
37+
end
38+
39+
def gap_element_attrs
40+
{
41+
class: [
42+
"relative w-[var(--sidebar-width)] bg-transparent transition-[width]",
43+
"duration-200 ease-linear",
44+
"group-data-[collapsible=offcanvas]:w-0",
45+
"group-data-[side=right]:rotate-180",
46+
variant_classes
47+
]
48+
}
49+
end
50+
51+
def content_wrapper_attrs
52+
{
53+
class: [
54+
"fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)]",
55+
"transition-[left,right,width] duration-200 ease-linear md:flex",
56+
content_wrapper_side_classes,
57+
content_wrapper_variant_classes
58+
]
59+
}
60+
end
61+
62+
def content_attrs
63+
{
64+
class: [
65+
"flex h-full w-full flex-col bg-sidebar",
66+
"group-data-[variant=floating]:rounded-lg",
67+
"group-data-[variant=floating]:border",
68+
"group-data-[variant=floating]:border-sidebar-border",
69+
"group-data-[variant=floating]:shadow"
70+
],
71+
data: {
72+
sidebar: "sidebar"
73+
}
74+
}
75+
end
76+
77+
def variant_classes
78+
if %i[floating inset].include?(@variant)
79+
"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
80+
else
81+
"group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
82+
end
83+
end
84+
85+
def content_wrapper_side_classes
86+
return "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" if @side == :left
87+
88+
"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]"
89+
end
90+
91+
def content_wrapper_variant_classes
92+
if %i[floating inset].include?(@variant)
93+
"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
94+
else
95+
"group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l"
96+
end
97+
end
98+
end
99+
end

‎app/components/ruby_ui/sidebar/non_collapsible_sidebar.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# frozen_string_literal: true
22

33
module RubyUI
4-
class NonCollpapsibleSidebar < Base
4+
class NonCollapsibleSidebar < Base
55
def view_template(&)
66
div(**attrs, &)
77
end

‎app/components/ruby_ui/sidebar/sidebar.rb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: tr
2020

2121
def view_template(&)
2222
if @collapsible == :none
23-
NonCollapsiableSidebar(**attrs, &)
23+
NonCollapsibleSidebar(**attrs, &)
2424
else
25-
CollapsiableSidebar(side: @side, variant: @variant, collapsible: @collapsible, open: @open, **attrs, &)
25+
CollapsibleSidebar(side: @side, variant: @variant, collapsible: @collapsible, open: @open, **attrs, &)
2626
end
2727
end
2828
end

‎app/controllers/docs/sidebar_controller.rb

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,16 @@ def example
88

99
render Views::Docs::Sidebar::Example.new(sidebar_state:)
1010
end
11+
12+
def inset
13+
sidebar_state = cookies.fetch(:sidebar_state, "true") == "true"
14+
15+
render Views::Docs::Sidebar::Inset.new(sidebar_state:)
16+
end
17+
18+
def dialog
19+
sidebar_state = cookies.fetch(:sidebar_state, "true") == "true"
20+
21+
render Views::Docs::Sidebar::Dialog.new(sidebar_state:)
22+
end
1123
end

‎app/views/docs/sidebar.rb

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,37 @@ def view_template
1313
Views::Docs::Sidebar::Example::CODE
1414
end
1515

16+
render Docs::VisualCodeExample.new(title: "Inset variant", src: "/docs/sidebar/inset", context: self) do
17+
Views::Docs::Sidebar::Inset::CODE
18+
end
19+
20+
render div do
21+
div do
22+
Components.Heading(level: 4) { "Dialog variant" }
23+
24+
Tabs(default_value: "preview") do
25+
TabsList do
26+
TabsTrigger(value: "preview") do
27+
span { "Preview" }
28+
end
29+
TabsTrigger(value: "code") do
30+
span { "Code" }
31+
end
32+
end
33+
34+
TabsContent(value: "preview") do
35+
Link(href: "/docs/sidebar/dialog", target: :_blank, variant: :primary) { "Open in another tab" }
36+
end
37+
38+
TabsContent(value: "code") do
39+
div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
40+
Codeblock(Views::Docs::Sidebar::Dialog::CODE, syntax: :ruby, class: "-m-px")
41+
end
42+
end
43+
end
44+
end
45+
end
46+
1647
render Components::ComponentSetup::Tabs.new(component_name: component)
1748

1849
render Docs::ComponentsTable.new(component_files(component))

‎app/views/docs/sidebar/dialog.rb

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
# frozen_string_literal: true
2+
3+
class Views::Docs::Sidebar::Dialog < Views::Base
4+
def initialize(sidebar_state:)
5+
@sidebar_state = sidebar_state
6+
end
7+
8+
CODE = <<~RUBY
9+
Dialog(data: {action: "ruby-ui--dialog:connect->ruby-ui--dialog#open"}) do
10+
DialogTrigger do
11+
Button { "Open Dialog" }
12+
end
13+
DialogContent(class: "grid overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]") do
14+
SidebarWrapper(class: "items-start") do
15+
Sidebar(collapsible: :none, class: "hidden md:flex") do
16+
SidebarContent do
17+
SidebarGroup do
18+
SidebarGroupContent do
19+
SidebarMenu do
20+
SidebarMenuItem do
21+
SidebarMenuButton(as: :a, href: "#") do
22+
search_icon()
23+
span { "Search" }
24+
end
25+
end
26+
SidebarMenuItem do
27+
SidebarMenuButton(as: :a, href: "#", active: true) do
28+
home_icon()
29+
span { "Home" }
30+
end
31+
end
32+
SidebarMenuItem do
33+
SidebarMenuButton(as: :a, href: "#") do
34+
inbox_icon()
35+
span { "Inbox" }
36+
end
37+
end
38+
end
39+
end
40+
end
41+
end
42+
end
43+
main(class: "flex h-[480px] flex-1 flex-col overflow-hidden") do
44+
end
45+
end
46+
end
47+
end
48+
RUBY
49+
50+
def view_template
51+
decoded_code = CGI.unescapeHTML(CODE)
52+
instance_eval(decoded_code)
53+
end
54+
55+
private
56+
57+
def nav_secondary
58+
[
59+
{label: "Settings", icon: -> { settings_icon }},
60+
{label: "Help & Support", icon: -> { message_circle_question }}
61+
]
62+
end
63+
64+
def home_icon
65+
svg(
66+
xmlns: "http://www.w3.org/2000/svg",
67+
width: "24",
68+
height: "24",
69+
viewBox: "0 0 24 24",
70+
fill: "none",
71+
stroke: "currentColor",
72+
stroke_width: "2",
73+
stroke_linecap: "round",
74+
stroke_linejoin: "round",
75+
class: "lucide lucide-house"
76+
) do |s|
77+
s.path(d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8")
78+
s.path(d: "M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z")
79+
end
80+
end
81+
82+
def inbox_icon
83+
svg(
84+
xmlns: "http://www.w3.org/2000/svg",
85+
width: "24",
86+
height: "24",
87+
viewBox: "0 0 24 24",
88+
fill: "none",
89+
stroke: "currentColor",
90+
stroke_width: "2",
91+
stroke_linecap: "round",
92+
stroke_linejoin: "round",
93+
class: "lucide lucide-inbox"
94+
) do |s|
95+
s.polyline(points: "22 12 16 12 14 15 10 15 8 12 2 12")
96+
s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z")
97+
end
98+
end
99+
100+
def calendar_icon
101+
svg(
102+
xmlns: "http://www.w3.org/2000/svg",
103+
width: "24",
104+
height: "24",
105+
viewBox: "0 0 24 24",
106+
fill: "none",
107+
stroke: "currentColor",
108+
stroke_width: "2",
109+
stroke_linecap: "round",
110+
stroke_linejoin: "round",
111+
class: "lucide lucide-calendar"
112+
) do |s|
113+
s.path(d: "M8 2v4")
114+
s.path(d: "M16 2v4")
115+
s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2")
116+
s.path(d: "M3 10h18")
117+
end
118+
end
119+
120+
def search_icon
121+
svg(
122+
xmlns: "http://www.w3.org/2000/svg",
123+
width: "24",
124+
height: "24",
125+
viewBox: "0 0 24 24",
126+
fill: "none",
127+
stroke: "currentColor",
128+
stroke_width: "2",
129+
stroke_linecap: "round",
130+
stroke_linejoin: "round",
131+
class: "lucide lucide-search"
132+
) do |s|
133+
s.circle(cx: "11", cy: "11", r: "8")
134+
s.path(d: "M21 21L16.7 16.7")
135+
end
136+
end
137+
138+
def settings_icon
139+
svg(
140+
xmlns: "http://www.w3.org/2000/svg",
141+
width: "24",
142+
height: "24",
143+
viewBox: "0 0 24 24",
144+
fill: "none",
145+
stroke: "currentColor",
146+
stroke_width: "2",
147+
stroke_linecap: "round",
148+
stroke_linejoin: "round",
149+
class: "lucide lucide-settings"
150+
) do |s|
151+
s.path(d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73
152+
l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z")
153+
s.circle(cx: "12", cy: "12", r: "3")
154+
end
155+
end
156+
157+
def plus_icon
158+
svg(
159+
xmlns: "http://www.w3.org/2000/svg",
160+
width: "24",
161+
height: "24",
162+
viewBox: "0 0 24 24",
163+
fill: "none",
164+
stroke: "currentColor",
165+
stroke_width: "2",
166+
stroke_linecap: "round",
167+
stroke_linejoin: "round",
168+
class: "lucide lucide-plus"
169+
) do |s|
170+
s.path(d: "M5 12h14")
171+
s.path(d: "M12 5v14")
172+
end
173+
end
174+
175+
def gallery_vertical_end
176+
svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", view_box: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_linejoin: "round", class: "lucide lucide-gallery-vertical-end size-4") do |s|
177+
s.path d: "M7 2h10"
178+
s.path d: "M5 6h14"
179+
s.rect width: "18", height: "12", x: "3", y: "10", rx: "2"
180+
end
181+
end
182+
183+
def ellipsis_icon
184+
svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-ellipsis-icon lucide-ellipsis") do |s|
185+
s.circle cx: "12", cy: "12", r: "1"
186+
s.circle cx: "19", cy: "12", r: "1"
187+
s.circle cx: "5", cy: "12", r: "1"
188+
end
189+
end
190+
191+
def message_circle_question
192+
svg(xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", stroke_linecap: "round", stroke_line_join: "round", class: "lucide lucide-message-circle-question-icon lucide-message-circle-question") do |s|
193+
s.path d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
194+
s.path d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
195+
s.path d: "M12 17h.01"
196+
end
197+
end
198+
end

0 commit comments

Comments
 (0)