ariadne_view_components 0.0.96.5 → 0.0.96.7
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/CHANGELOG.md +13 -0
- data/app/assets/javascripts/ariadne_view_components.js +7 -7
- data/app/assets/javascripts/ariadne_view_components.js.br +0 -0
- data/app/assets/javascripts/ariadne_view_components.js.gz +0 -0
- data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
- data/app/assets/stylesheets/ariadne_view_components.css +1 -1
- data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
- data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
- data/app/components/ariadne/layout/sidebar/component.html.erb +12 -8
- data/app/components/ariadne/layout/sidebar/component.rb +26 -7
- data/app/components/ariadne/{ui → layout}/sidebar/footer/component.rb +1 -1
- data/app/components/ariadne/{ui → layout}/sidebar/group/component.html.erb +7 -10
- data/app/components/ariadne/{ui → layout}/sidebar/group/component.rb +2 -2
- data/app/components/ariadne/layout/sidebar/group/item/component.html.erb +21 -0
- data/app/components/ariadne/layout/sidebar/group/item/component.rb +76 -0
- data/app/components/ariadne/{ui → layout}/sidebar/header/component.rb +2 -1
- data/app/components/ariadne/ui/button/component.rb +1 -1
- data/app/components/ariadne/ui/dialog/component.ts +0 -1
- data/app/frontend/stylesheets/theme.css +50 -50
- data/lib/ariadne/view_components/version.rb +1 -1
- metadata +11 -15
- data/app/components/ariadne/ui/sidebar/component.html.erb +0 -24
- data/app/components/ariadne/ui/sidebar/component.rb +0 -72
- data/app/components/ariadne/ui/sidebar/content/component.html.erb +0 -13
- data/app/components/ariadne/ui/sidebar/content/component.rb +0 -37
- data/app/components/ariadne/ui/sidebar/item/component.html.erb +0 -20
- data/app/components/ariadne/ui/sidebar/item/component.rb +0 -75
- /data/app/components/ariadne/{ui → layout}/sidebar/footer/component.html.erb +0 -0
- /data/app/components/ariadne/{ui → layout}/sidebar/group/component.ts +0 -0
- /data/app/components/ariadne/{ui → layout}/sidebar/header/component.html.erb +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
# frozen_string_literal: true
|
|
3
3
|
|
|
4
4
|
module Ariadne
|
|
5
|
-
module
|
|
5
|
+
module Layout
|
|
6
6
|
module Sidebar
|
|
7
7
|
module Group
|
|
8
8
|
# Group component for the sidebar.
|
|
@@ -18,7 +18,7 @@ module Ariadne
|
|
|
18
18
|
option :default_open, default: -> { true }
|
|
19
19
|
|
|
20
20
|
# Individual items in the group
|
|
21
|
-
renders_many :items, Ariadne::
|
|
21
|
+
renders_many :items, Ariadne::Layout::Sidebar::Group::Item::Component
|
|
22
22
|
|
|
23
23
|
# Custom content for the group
|
|
24
24
|
renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<%= content_tag(href.present? ? "a" : "div", data: { collapsed: false }, **html_attrs) do %>
|
|
2
|
+
<% if custom_content %>
|
|
3
|
+
<div class="ariadne:flex-1 ariadne:data-[sidebar-collapsed=true]:hidden"><%= custom_content %></div>
|
|
4
|
+
<% else %>
|
|
5
|
+
<div class="ariadne:flex ariadne:items-center ariadne:w-full">
|
|
6
|
+
<% if icon %>
|
|
7
|
+
<span class="ariadne:flex mr-2 ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
|
|
8
|
+
<%= icon %>
|
|
9
|
+
</span>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% if label.present? %>
|
|
12
|
+
<span class="ariadne:truncate ariadne:data-[sidebar-collapsed=true]:hidden"><%= label %></span>
|
|
13
|
+
<% if badge %>
|
|
14
|
+
<span class="ariadne:ml-auto ariadne:inline-flex ariadne:items-center ariadne:py-0 ariadne:h-5 ariadne:data-[sidebar-collapsed=true]:hidden">
|
|
15
|
+
<%= badge %>
|
|
16
|
+
</span>
|
|
17
|
+
<% end %>
|
|
18
|
+
<% end %>
|
|
19
|
+
</div>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% end %>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# typed: false
|
|
2
|
+
# frozen_string_literal: true
|
|
3
|
+
|
|
4
|
+
module Ariadne
|
|
5
|
+
module Layout
|
|
6
|
+
module Sidebar
|
|
7
|
+
module Group
|
|
8
|
+
module Item
|
|
9
|
+
# Item component for the sidebar.
|
|
10
|
+
# Used for navigation links or actions.
|
|
11
|
+
class Component < Ariadne::BaseComponent
|
|
12
|
+
# @param [String] href The URL the item links to
|
|
13
|
+
option :href, default: -> { nil }
|
|
14
|
+
|
|
15
|
+
# @param [Boolean] current Whether this item represents the current page
|
|
16
|
+
option :current, default: -> { false }
|
|
17
|
+
|
|
18
|
+
# @param [String] label Text label for the item
|
|
19
|
+
option :label, default: -> { nil }
|
|
20
|
+
|
|
21
|
+
# Icon for the item
|
|
22
|
+
renders_one :icon, Ariadne::UI::Heroicon::Component
|
|
23
|
+
# Generic icon slot for custom icons
|
|
24
|
+
renders_one :icon_slot, BaseComponent::ACCEPT_ANYTHING
|
|
25
|
+
|
|
26
|
+
# Badge for the item (e.g., notification count)
|
|
27
|
+
renders_one :badge, BaseComponent::ACCEPT_ANYTHING
|
|
28
|
+
|
|
29
|
+
# Content for the item if not using label/link
|
|
30
|
+
renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
|
|
31
|
+
|
|
32
|
+
accepts_html_attributes do |html_attrs|
|
|
33
|
+
html_attrs[:class] = merge_tailwind_classes([style(current: current), html_attrs[:class]].join(" "))
|
|
34
|
+
|
|
35
|
+
if href.present?
|
|
36
|
+
html_attrs[:href] = href
|
|
37
|
+
end
|
|
38
|
+
end
|
|
39
|
+
|
|
40
|
+
style do
|
|
41
|
+
base do
|
|
42
|
+
[
|
|
43
|
+
"ariadne:flex",
|
|
44
|
+
"ariadne:items-center",
|
|
45
|
+
"ariadne:gap-3",
|
|
46
|
+
"ariadne:p-2",
|
|
47
|
+
"ariadne:rounded-md",
|
|
48
|
+
"ariadne:text-sm",
|
|
49
|
+
"ariadne:font-medium",
|
|
50
|
+
"ariadne:transition-colors",
|
|
51
|
+
"ariadne:duration-200",
|
|
52
|
+
"ariadne:outline-none",
|
|
53
|
+
"ariadne:focus-visible:ring-2",
|
|
54
|
+
"ariadne:focus-visible:ring-offset-2",
|
|
55
|
+
"ariadne:relative",
|
|
56
|
+
"ariadne:dark:hover:bg-purple-700/20",
|
|
57
|
+
]
|
|
58
|
+
end
|
|
59
|
+
|
|
60
|
+
variants do
|
|
61
|
+
current do
|
|
62
|
+
yes do
|
|
63
|
+
[
|
|
64
|
+
"ariadne:bg-purple-700/20",
|
|
65
|
+
"ariadne:dark:bg-purple-300/20",
|
|
66
|
+
]
|
|
67
|
+
end
|
|
68
|
+
end
|
|
69
|
+
end
|
|
70
|
+
end
|
|
71
|
+
end
|
|
72
|
+
end
|
|
73
|
+
end
|
|
74
|
+
end
|
|
75
|
+
end
|
|
76
|
+
end
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
# frozen_string_literal: true
|
|
3
3
|
|
|
4
4
|
module Ariadne
|
|
5
|
-
module
|
|
5
|
+
module Layout
|
|
6
6
|
module Sidebar
|
|
7
7
|
module Header
|
|
8
8
|
# Header component for the sidebar.
|
|
@@ -21,6 +21,7 @@ module Ariadne
|
|
|
21
21
|
base do
|
|
22
22
|
[
|
|
23
23
|
"ariadne:flex",
|
|
24
|
+
"ariadne:flex-col",
|
|
24
25
|
"ariadne:items-center",
|
|
25
26
|
"ariadne:justify-between",
|
|
26
27
|
"ariadne:px-4",
|
|
@@ -26,7 +26,7 @@ module Ariadne
|
|
|
26
26
|
option :type, default: proc { "button" }
|
|
27
27
|
|
|
28
28
|
DEFAULT_SCHEME = :primary
|
|
29
|
-
SCHEME_OPTIONS = [DEFAULT_SCHEME, :outline, :secondary, :nude, :danger].freeze
|
|
29
|
+
SCHEME_OPTIONS = [DEFAULT_SCHEME, :outline, :secondary, :nude, :danger, :none].freeze
|
|
30
30
|
|
|
31
31
|
# @param [Symbol] scheme (:primary) Indicates the button's scheme. <%= one_of(Ariadne::UI::Button::Component::SCHEME_OPTIONS) %>
|
|
32
32
|
option :scheme, default: proc { DEFAULT_SCHEME }
|
|
@@ -5,7 +5,6 @@ export default class DialogController extends controllerFactory()({
|
|
|
5
5
|
targets: {dialog: HTMLDialogElement},
|
|
6
6
|
}) {
|
|
7
7
|
close(e?:MouseEvent) {
|
|
8
|
-
if (e) e.preventDefault()
|
|
9
8
|
if (!this.dialogTarget.open) return
|
|
10
9
|
this.dialogTarget.close()
|
|
11
10
|
enableBodyScroll(this.dialogTarget)
|
|
@@ -42,68 +42,68 @@
|
|
|
42
42
|
|
|
43
43
|
[data-ariadne-light-theme='light'] {
|
|
44
44
|
/* Base colors */
|
|
45
|
-
--theme-color-background:
|
|
46
|
-
--theme-color-foreground:
|
|
47
|
-
--theme-color-border:
|
|
48
|
-
--theme-color-input:
|
|
49
|
-
--theme-color-ring:
|
|
45
|
+
--theme-color-background: oklch(1 0 0);
|
|
46
|
+
--theme-color-foreground: oklch(0.14 0.0044 285.82);
|
|
47
|
+
--theme-color-border: oklch(0.92 0.004 286.32);
|
|
48
|
+
--theme-color-input: oklch(0.92 0.004 286.32);
|
|
49
|
+
--theme-color-ring: oklch(0.21 0.0059 285.88);
|
|
50
50
|
|
|
51
51
|
/* Component colors */
|
|
52
|
-
--theme-color-muted:
|
|
53
|
-
--theme-color-muted-foreground:
|
|
54
|
-
--theme-color-popover:
|
|
55
|
-
--theme-color-popover-foreground:
|
|
56
|
-
--theme-color-card:
|
|
57
|
-
--theme-color-card-foreground:
|
|
52
|
+
--theme-color-muted: oklch(0.97 0.0013 286.38);
|
|
53
|
+
--theme-color-muted-foreground: oklch(0.55 0.0137 285.94);
|
|
54
|
+
--theme-color-popover: oklch(1 0 0);
|
|
55
|
+
--theme-color-popover-foreground: oklch(0.14 0.0044 285.82);
|
|
56
|
+
--theme-color-card: oklch(1 0 0);
|
|
57
|
+
--theme-color-card-foreground: oklch(0.14 0.0044 285.82);
|
|
58
58
|
|
|
59
59
|
/* Semantic colors */
|
|
60
|
-
--theme-color-primary:
|
|
61
|
-
--theme-color-primary-foreground:
|
|
62
|
-
--theme-color-secondary:
|
|
63
|
-
--theme-color-secondary-foreground:
|
|
64
|
-
--theme-color-accent:
|
|
65
|
-
--theme-color-accent-foreground:
|
|
66
|
-
--theme-color-danger:
|
|
67
|
-
--theme-color-danger-foreground:
|
|
68
|
-
--theme-color-warning:
|
|
69
|
-
--theme-color-warning-foreground:
|
|
70
|
-
--theme-color-success:
|
|
71
|
-
--theme-color-success-foreground:
|
|
72
|
-
--theme-color-info:
|
|
73
|
-
--theme-color-info-foreground:
|
|
60
|
+
--theme-color-primary: oklch(0.42 0.0915 299.99);
|
|
61
|
+
--theme-color-primary-foreground: oklch(0.99 0.0003 275.01);
|
|
62
|
+
--theme-color-secondary: oklch(0.97 0.0013 286.38);
|
|
63
|
+
--theme-color-secondary-foreground: oklch(0.21 0.0059 285.88);
|
|
64
|
+
--theme-color-accent: oklch(0.97 0.0013 286.38);
|
|
65
|
+
--theme-color-accent-foreground: oklch(0.21 0.0059 285.88);
|
|
66
|
+
--theme-color-danger: oklch(0.64 0.2078 25.33);
|
|
67
|
+
--theme-color-danger-foreground: oklch(0.98 0 0);
|
|
68
|
+
--theme-color-warning: oklch(0.72 0.1499 80.25);
|
|
69
|
+
--theme-color-warning-foreground: oklch(0.98 0.0035 247.86);
|
|
70
|
+
--theme-color-success: oklch(0.6 0.1752 135.96);
|
|
71
|
+
--theme-color-success-foreground: oklch(1 0 0);
|
|
72
|
+
--theme-color-info: oklch(0.61 0.21627 257.1603);
|
|
73
|
+
--theme-color-info-foreground: oklch(0.68 0.148143 238.1044);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
[data-ariadne-dark-theme='dark'] {
|
|
77
77
|
/* Base colors */
|
|
78
|
-
--theme-color-background:
|
|
79
|
-
--theme-color-foreground:
|
|
80
|
-
--theme-color-border:
|
|
81
|
-
--theme-color-input:
|
|
82
|
-
--theme-color-ring:
|
|
78
|
+
--theme-color-background: oklch(0.14 0.0044 285.82);
|
|
79
|
+
--theme-color-foreground: oklch(0.98 0 0);
|
|
80
|
+
--theme-color-border: oklch(0.27 0.0055 286.03);
|
|
81
|
+
--theme-color-input: oklch(0.27 0.0055 286.03);
|
|
82
|
+
--theme-color-ring: oklch(0.87 0.0055 286.29);
|
|
83
83
|
|
|
84
84
|
/* Component colors */
|
|
85
|
-
--theme-color-muted:
|
|
86
|
-
--theme-color-muted-foreground:
|
|
87
|
-
--theme-color-popover:
|
|
88
|
-
--theme-color-popover-foreground:
|
|
89
|
-
--theme-color-card:
|
|
90
|
-
--theme-color-card-foreground:
|
|
85
|
+
--theme-color-muted: oklch(0.27 0.0055 286.03);
|
|
86
|
+
--theme-color-muted-foreground: oklch(0.71 0.0129 286.07);
|
|
87
|
+
--theme-color-popover: oklch(0.14 0.0044 285.82);
|
|
88
|
+
--theme-color-popover-foreground: oklch(0.98 0 0);
|
|
89
|
+
--theme-color-card: oklch(0.14 0.0044 285.82);
|
|
90
|
+
--theme-color-card-foreground: oklch(0.98 0 0);
|
|
91
91
|
|
|
92
92
|
/* Semantic colors */
|
|
93
|
-
--theme-color-primary:
|
|
94
|
-
--theme-color-primary-foreground:
|
|
95
|
-
--theme-color-secondary:
|
|
96
|
-
--theme-color-secondary-foreground:
|
|
97
|
-
--theme-color-accent:
|
|
98
|
-
--theme-color-accent-foreground:
|
|
99
|
-
--theme-color-danger:
|
|
100
|
-
--theme-color-danger-foreground:
|
|
101
|
-
--theme-color-warning:
|
|
102
|
-
--theme-color-warning-foreground:
|
|
103
|
-
--theme-color-success:
|
|
104
|
-
--theme-color-success-foreground:
|
|
105
|
-
--theme-color-info:
|
|
106
|
-
--theme-color-info-foreground:
|
|
93
|
+
--theme-color-primary: oklch(0.85 0.0813 299.93);
|
|
94
|
+
--theme-color-primary-foreground: oklch(0.99 0.0003 275.01);
|
|
95
|
+
--theme-color-secondary: oklch(0.27 0.0055 286.03);
|
|
96
|
+
--theme-color-secondary-foreground: oklch(0.98 0 0);
|
|
97
|
+
--theme-color-accent: oklch(0.27 0.0055 286.03);
|
|
98
|
+
--theme-color-accent-foreground: oklch(0.98 0 0);
|
|
99
|
+
--theme-color-danger: oklch(0.4 0.1331 25.72);
|
|
100
|
+
--theme-color-danger-foreground: oklch(0.98 0 0);
|
|
101
|
+
--theme-color-warning: oklch(0.72 0.1499 80.25);
|
|
102
|
+
--theme-color-warning-foreground: oklch(0.98 0.0035 247.86);
|
|
103
|
+
--theme-color-success: oklch(0.6 0.1752 135.96);
|
|
104
|
+
--theme-color-success-foreground: oklch(1 0 0);
|
|
105
|
+
--theme-color-info: oklch(0.63 0.1859 259.6);
|
|
106
|
+
--theme-color-info-foreground: oklch(1 0 0);
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
/* Font families */
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ariadne_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.96.
|
|
4
|
+
version: 0.0.96.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Garen J. Torikian
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2025-03
|
|
11
|
+
date: 2025-04-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: tailwind_merge
|
|
@@ -182,6 +182,15 @@ files:
|
|
|
182
182
|
- app/components/ariadne/layout/section_block/header/component.rb
|
|
183
183
|
- app/components/ariadne/layout/sidebar/component.html.erb
|
|
184
184
|
- app/components/ariadne/layout/sidebar/component.rb
|
|
185
|
+
- app/components/ariadne/layout/sidebar/footer/component.html.erb
|
|
186
|
+
- app/components/ariadne/layout/sidebar/footer/component.rb
|
|
187
|
+
- app/components/ariadne/layout/sidebar/group/component.html.erb
|
|
188
|
+
- app/components/ariadne/layout/sidebar/group/component.rb
|
|
189
|
+
- app/components/ariadne/layout/sidebar/group/component.ts
|
|
190
|
+
- app/components/ariadne/layout/sidebar/group/item/component.html.erb
|
|
191
|
+
- app/components/ariadne/layout/sidebar/group/item/component.rb
|
|
192
|
+
- app/components/ariadne/layout/sidebar/header/component.html.erb
|
|
193
|
+
- app/components/ariadne/layout/sidebar/header/component.rb
|
|
185
194
|
- app/components/ariadne/layout/two_panel/component.html.erb
|
|
186
195
|
- app/components/ariadne/layout/two_panel/component.rb
|
|
187
196
|
- app/components/ariadne/layout/wide/component.html.erb
|
|
@@ -245,19 +254,6 @@ files:
|
|
|
245
254
|
- app/components/ariadne/ui/shortcut/component.html.erb
|
|
246
255
|
- app/components/ariadne/ui/shortcut/component.rb
|
|
247
256
|
- app/components/ariadne/ui/shortcut/component.ts
|
|
248
|
-
- app/components/ariadne/ui/sidebar/component.html.erb
|
|
249
|
-
- app/components/ariadne/ui/sidebar/component.rb
|
|
250
|
-
- app/components/ariadne/ui/sidebar/content/component.html.erb
|
|
251
|
-
- app/components/ariadne/ui/sidebar/content/component.rb
|
|
252
|
-
- app/components/ariadne/ui/sidebar/footer/component.html.erb
|
|
253
|
-
- app/components/ariadne/ui/sidebar/footer/component.rb
|
|
254
|
-
- app/components/ariadne/ui/sidebar/group/component.html.erb
|
|
255
|
-
- app/components/ariadne/ui/sidebar/group/component.rb
|
|
256
|
-
- app/components/ariadne/ui/sidebar/group/component.ts
|
|
257
|
-
- app/components/ariadne/ui/sidebar/header/component.html.erb
|
|
258
|
-
- app/components/ariadne/ui/sidebar/header/component.rb
|
|
259
|
-
- app/components/ariadne/ui/sidebar/item/component.html.erb
|
|
260
|
-
- app/components/ariadne/ui/sidebar/item/component.rb
|
|
261
257
|
- app/components/ariadne/ui/skeleton/component.html.erb
|
|
262
258
|
- app/components/ariadne/ui/skeleton/component.rb
|
|
263
259
|
- app/components/ariadne/ui/stats_panel/component.html.erb
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
<%# Sidebar container with data attributes for JavaScript interactions %>
|
|
2
|
-
<%= tag.aside(
|
|
3
|
-
id: "sidebar-#{object_id}",
|
|
4
|
-
class: style,
|
|
5
|
-
data: {
|
|
6
|
-
controller: "ariadne--ui--sidebar",
|
|
7
|
-
ariadne__ui__sidebar_target: "sidebar",
|
|
8
|
-
collapsed: !default_open,
|
|
9
|
-
collapsible: collapsible,
|
|
10
|
-
}
|
|
11
|
-
) do %>
|
|
12
|
-
<%# Render the header if provided %>
|
|
13
|
-
<% if header_component %>
|
|
14
|
-
<%= header_component %>
|
|
15
|
-
<% end %>
|
|
16
|
-
<%# Render the content if provided %>
|
|
17
|
-
<% if content_component %>
|
|
18
|
-
<%= content_component %>
|
|
19
|
-
<% end %>
|
|
20
|
-
<%# Render the footer if provided %>
|
|
21
|
-
<% if footer_component %>
|
|
22
|
-
<%= footer_component %>
|
|
23
|
-
<% end %>
|
|
24
|
-
<% end %>
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
# typed: false
|
|
2
|
-
# frozen_string_literal: true
|
|
3
|
-
|
|
4
|
-
module Ariadne
|
|
5
|
-
module UI
|
|
6
|
-
module Sidebar
|
|
7
|
-
# A sidebar component for navigation and application structure.
|
|
8
|
-
#
|
|
9
|
-
# The sidebar can be collapsible, with configurable breakpoints for responsive behavior.
|
|
10
|
-
# It supports header, footer, and content sections with nested groups and items.
|
|
11
|
-
class Component < Ariadne::BaseComponent
|
|
12
|
-
# @param [Symbol] collapsible (:icon) Indicates how the sidebar collapses. Can be `:icon` (collapses to icons), `:hidden` (hides completely), or `:none` (doesn't collapse).
|
|
13
|
-
option :collapsible, default: -> { :icon }
|
|
14
|
-
|
|
15
|
-
# @param [Boolean] default_open (true) Whether the sidebar is open by default.
|
|
16
|
-
option :default_open, default: -> { true }
|
|
17
|
-
|
|
18
|
-
# @param [Symbol] variant (:default) The visual variant of the sidebar.
|
|
19
|
-
option :variant, default: -> { :default }
|
|
20
|
-
|
|
21
|
-
# @param [Symbol] size (:md) Size of the sidebar. Can be :sm, :md, or :lg.
|
|
22
|
-
option :size, default: -> { :md }
|
|
23
|
-
|
|
24
|
-
# @param [String] width (null) The width of the sidebar. If provided, overrides the size option.
|
|
25
|
-
option :width, default: -> { nil }
|
|
26
|
-
|
|
27
|
-
# @param [String] collapsed_width (null) The width of the collapsed sidebar. If provided, overrides the default.
|
|
28
|
-
option :collapsed_width, default: -> { nil }
|
|
29
|
-
|
|
30
|
-
# Header component for the sidebar
|
|
31
|
-
renders_one :header_component, Ariadne::UI::Sidebar::Header::Component
|
|
32
|
-
|
|
33
|
-
# Footer component for the sidebar
|
|
34
|
-
renders_one :footer_component, Ariadne::UI::Sidebar::Footer::Component
|
|
35
|
-
|
|
36
|
-
# Content component for the sidebar
|
|
37
|
-
renders_one :content_component, Ariadne::UI::Sidebar::Content::Component
|
|
38
|
-
# Define style variants for the sidebar
|
|
39
|
-
style do
|
|
40
|
-
base do
|
|
41
|
-
[
|
|
42
|
-
"ariadne:flex",
|
|
43
|
-
"ariadne:flex-col",
|
|
44
|
-
"ariadne:h-screen",
|
|
45
|
-
"ariadne:overflow-hidden",
|
|
46
|
-
"ariadne:transition-all",
|
|
47
|
-
"ariadne:duration-300",
|
|
48
|
-
"ariadne:ease-in-out",
|
|
49
|
-
"ariadne:z-20",
|
|
50
|
-
]
|
|
51
|
-
end
|
|
52
|
-
|
|
53
|
-
variants do
|
|
54
|
-
size do
|
|
55
|
-
sm do
|
|
56
|
-
["ariadne:w-64 ariadne:data-[collapsed=true]:w-16"]
|
|
57
|
-
end
|
|
58
|
-
|
|
59
|
-
md do
|
|
60
|
-
["ariadne:w-72 ariadne:data-[collapsed=true]:w-20"]
|
|
61
|
-
end
|
|
62
|
-
|
|
63
|
-
lg do
|
|
64
|
-
["ariadne:w-80 ariadne:data-[collapsed=true]:w-24"]
|
|
65
|
-
end
|
|
66
|
-
end
|
|
67
|
-
end
|
|
68
|
-
end
|
|
69
|
-
end
|
|
70
|
-
end
|
|
71
|
-
end
|
|
72
|
-
end
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
# typed: false
|
|
2
|
-
# frozen_string_literal: true
|
|
3
|
-
|
|
4
|
-
module Ariadne
|
|
5
|
-
module UI
|
|
6
|
-
module Sidebar
|
|
7
|
-
module Content
|
|
8
|
-
# Content component for the sidebar.
|
|
9
|
-
# Container for sidebar groups and items.
|
|
10
|
-
class Component < Ariadne::BaseComponent
|
|
11
|
-
# Accepts any content for the sidebar
|
|
12
|
-
renders_many :groups, Ariadne::UI::Sidebar::Group::Component
|
|
13
|
-
|
|
14
|
-
# Custom content can be placed anywhere within the sidebar content
|
|
15
|
-
renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
|
|
16
|
-
|
|
17
|
-
# Search box for the sidebar
|
|
18
|
-
renders_one :search, BaseComponent::ACCEPT_ANYTHING
|
|
19
|
-
|
|
20
|
-
style do
|
|
21
|
-
base do
|
|
22
|
-
[
|
|
23
|
-
"ariadne:flex",
|
|
24
|
-
"ariadne:flex-col",
|
|
25
|
-
"ariadne:gap-4",
|
|
26
|
-
"ariadne:flex-1",
|
|
27
|
-
"ariadne:overflow-y-auto",
|
|
28
|
-
"ariadne:p-4",
|
|
29
|
-
"ariadne:rounded-md",
|
|
30
|
-
]
|
|
31
|
-
end
|
|
32
|
-
end
|
|
33
|
-
end
|
|
34
|
-
end
|
|
35
|
-
end
|
|
36
|
-
end
|
|
37
|
-
end
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
<%= content_tag(href.present? ? "a" : "div", data: { collapsed: false }, **html_attrs) do %>
|
|
2
|
-
<% if custom_content %>
|
|
3
|
-
<div class="ariadne:flex-1 ariadne:data-[sidebar-collapsed=true]:hidden"><%= custom_content %></div>
|
|
4
|
-
<% end %>
|
|
5
|
-
<div class="ariadne:flex ariadne:items-center ariadne:w-full">
|
|
6
|
-
<% if icon %>
|
|
7
|
-
<span class="ariadne:flex mr-2 ariadne:items-center ariadne:justify-center ariadne:w-5 ariadne:h-5 ariadne:flex-shrink-0">
|
|
8
|
-
<%= icon %>
|
|
9
|
-
</span>
|
|
10
|
-
<% end %>
|
|
11
|
-
<% if label.present? %>
|
|
12
|
-
<span class="ariadne:truncate ariadne:data-[sidebar-collapsed=true]:hidden"><%= label %></span>
|
|
13
|
-
<% if badge %>
|
|
14
|
-
<span class="ariadne:ml-auto ariadne:inline-flex ariadne:items-center ariadne:py-0 ariadne:h-5 ariadne:data-[sidebar-collapsed=true]:hidden">
|
|
15
|
-
<%= badge %>
|
|
16
|
-
</span>
|
|
17
|
-
<% end %>
|
|
18
|
-
<% end %>
|
|
19
|
-
</div>
|
|
20
|
-
<% end %>
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
# typed: false
|
|
2
|
-
# frozen_string_literal: true
|
|
3
|
-
|
|
4
|
-
module Ariadne
|
|
5
|
-
module UI
|
|
6
|
-
module Sidebar
|
|
7
|
-
module Item
|
|
8
|
-
# Item component for the sidebar.
|
|
9
|
-
# Used for navigation links or actions.
|
|
10
|
-
class Component < Ariadne::BaseComponent
|
|
11
|
-
# @param [String] href The URL the item links to
|
|
12
|
-
option :href, default: -> { nil }
|
|
13
|
-
|
|
14
|
-
# @param [Boolean] current Whether this item represents the current page
|
|
15
|
-
option :current, default: -> { false }
|
|
16
|
-
|
|
17
|
-
# @param [String] label Text label for the item
|
|
18
|
-
option :label, default: -> { nil }
|
|
19
|
-
option :html_attrs, default: -> { {} }
|
|
20
|
-
|
|
21
|
-
# Icon for the item
|
|
22
|
-
renders_one :icon, Ariadne::UI::Heroicon::Component
|
|
23
|
-
# Generic icon slot for custom icons
|
|
24
|
-
renders_one :icon_slot, BaseComponent::ACCEPT_ANYTHING
|
|
25
|
-
|
|
26
|
-
# Badge for the item (e.g., notification count)
|
|
27
|
-
renders_one :badge, BaseComponent::ACCEPT_ANYTHING
|
|
28
|
-
|
|
29
|
-
# Content for the item if not using label
|
|
30
|
-
renders_one :custom_content, BaseComponent::ACCEPT_ANYTHING
|
|
31
|
-
|
|
32
|
-
accepts_html_attributes do |html_attrs|
|
|
33
|
-
html_attrs[:class] = merge_tailwind_classes([style(current: current), html_attrs[:class]].join(" "))
|
|
34
|
-
|
|
35
|
-
if href.present?
|
|
36
|
-
html_attrs[:href] = href
|
|
37
|
-
end
|
|
38
|
-
end
|
|
39
|
-
|
|
40
|
-
style do
|
|
41
|
-
base do
|
|
42
|
-
[
|
|
43
|
-
"ariadne:flex",
|
|
44
|
-
"ariadne:items-center",
|
|
45
|
-
"ariadne:gap-3",
|
|
46
|
-
"ariadne:p-2",
|
|
47
|
-
"ariadne:rounded-md",
|
|
48
|
-
"ariadne:text-sm",
|
|
49
|
-
"ariadne:font-medium",
|
|
50
|
-
"ariadne:transition-colors",
|
|
51
|
-
"ariadne:duration-200",
|
|
52
|
-
"ariadne:outline-none",
|
|
53
|
-
"ariadne:focus-visible:ring-2",
|
|
54
|
-
"ariadne:focus-visible:ring-offset-2",
|
|
55
|
-
"ariadne:relative",
|
|
56
|
-
"ariadne:dark:hover:bg-purple-700/20",
|
|
57
|
-
]
|
|
58
|
-
end
|
|
59
|
-
|
|
60
|
-
variants do
|
|
61
|
-
current do
|
|
62
|
-
yes do
|
|
63
|
-
[
|
|
64
|
-
"ariadne:bg-purple-700/20",
|
|
65
|
-
"ariadne:dark:bg-purple-300/20",
|
|
66
|
-
]
|
|
67
|
-
end
|
|
68
|
-
end
|
|
69
|
-
end
|
|
70
|
-
end
|
|
71
|
-
end
|
|
72
|
-
end
|
|
73
|
-
end
|
|
74
|
-
end
|
|
75
|
-
end
|
|
File without changes
|
|
File without changes
|
|
File without changes
|