ariadne_view_components 0.0.69 → 0.0.71
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/README.md +20 -1
- data/app/assets/javascripts/ariadne_view_components.js +14 -14
- 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/base_component.rb +11 -1
- data/app/components/ariadne/behaviors/captionable.rb +55 -0
- data/app/components/ariadne/behaviors/tooltipable.rb +15 -15
- data/app/components/ariadne/form/base_component.rb +1 -1
- data/app/components/ariadne/form/checkbox/component.html.erb +6 -0
- data/app/components/ariadne/form/checkbox/component.rb +34 -0
- data/app/components/ariadne/form/group/component.html.erb +2 -2
- data/app/components/ariadne/form/group/component.rb +29 -2
- data/app/components/ariadne/form/hidden_field/component.html.erb +6 -1
- data/app/components/ariadne/form/hidden_field/component.rb +10 -3
- data/app/components/ariadne/form/radio/component.html.erb +6 -0
- data/app/components/ariadne/form/radio/component.rb +26 -0
- data/app/components/ariadne/form/radio_button/component.html.erb +6 -0
- data/app/components/ariadne/form/radio_button/component.rb +60 -0
- data/app/components/ariadne/form/radio_button_group/component.html.erb +24 -0
- data/app/components/ariadne/form/radio_button_group/component.rb +59 -0
- data/app/components/ariadne/form/text_field/component.html.erb +1 -0
- data/app/components/ariadne/layout/grid/component.html.erb +7 -0
- data/app/components/ariadne/layout/grid/component.rb +36 -0
- data/app/components/ariadne/layout/nav_bar/component.html.erb +12 -101
- data/app/components/ariadne/layout/nav_bar/component.rb +38 -9
- data/app/components/ariadne/layout/two_panel/component.html.erb +14 -0
- data/app/components/ariadne/layout/two_panel/component.rb +38 -0
- data/app/components/ariadne/layout/wide/component.html.erb +9 -0
- data/app/components/ariadne/layout/wide/component.rb +24 -0
- data/app/components/ariadne/turbo/frame/component.html.erb +3 -0
- data/app/components/ariadne/turbo/frame/component.rb +16 -0
- data/app/components/ariadne/turbo/stream_action/component.html.erb +4 -0
- data/app/components/ariadne/turbo/stream_action/component.rb +25 -0
- data/app/components/ariadne/ui/badge/component.html.erb +1 -0
- data/app/components/ariadne/ui/badge/component.rb +76 -0
- data/app/components/ariadne/ui/blankslate/component.html.erb +9 -0
- data/app/components/ariadne/ui/blankslate/component.rb +37 -0
- data/app/components/ariadne/ui/button/component.rb +2 -1
- data/app/components/ariadne/ui/color_dot/component.html.erb +7 -0
- data/app/components/ariadne/ui/color_dot/component.rb +39 -0
- data/app/components/ariadne/ui/combobox/component.html.erb +9 -15
- data/app/components/ariadne/ui/combobox/component.rb +38 -26
- data/app/components/ariadne/ui/combobox/{menu_item → item}/component.html.erb +1 -1
- data/app/components/ariadne/ui/combobox/item/component.rb +61 -0
- data/app/components/ariadne/ui/combobox/option/component.html.erb +1 -1
- data/app/components/ariadne/ui/combobox/option/component.rb +11 -12
- data/app/components/ariadne/ui/data_table/component.html.erb +1 -0
- data/app/components/ariadne/ui/data_table/component.rb +11 -0
- data/app/components/ariadne/ui/dialog/component.html.erb +32 -0
- data/app/components/ariadne/ui/dialog/component.rb +37 -0
- data/app/components/ariadne/ui/dialog/component.ts +27 -0
- data/app/components/ariadne/ui/heroicon/component.rb +7 -2
- data/app/components/ariadne/ui/list/component.html.erb +6 -0
- data/app/components/ariadne/ui/list/component.rb +12 -0
- data/app/components/ariadne/ui/list/item/component.html.erb +16 -0
- data/app/components/ariadne/ui/list/item/component.rb +17 -0
- data/app/components/ariadne/ui/table/cell/component.html.erb +3 -0
- data/app/components/ariadne/ui/table/cell/component.rb +38 -0
- data/app/components/ariadne/ui/table/component.html.erb +13 -0
- data/app/components/ariadne/ui/table/component.rb +45 -0
- data/app/components/ariadne/ui/table/footer/component.html.erb +0 -0
- data/app/components/ariadne/ui/table/footer/component.rb +14 -0
- data/app/components/ariadne/ui/table/header/component.html.erb +3 -0
- data/app/components/ariadne/ui/table/header/component.rb +40 -0
- data/app/components/ariadne/ui/table/row/component.html.erb +5 -0
- data/app/components/ariadne/ui/table/row/component.rb +28 -0
- data/app/components/ariadne/ui/typography/component.html.erb +1 -3
- data/app/components/ariadne/ui/typography/component.rb +62 -2
- data/app/frontend/ariadne/index.ts +0 -1
- data/app/frontend/controllers/autosubmittable_controller.ts +25 -0
- data/lib/ariadne/forms/base.html.erb +4 -5
- data/lib/ariadne/forms/dsl/badge.rb +35 -0
- data/lib/ariadne/forms/dsl/button_input.rb +4 -3
- data/lib/ariadne/forms/dsl/form_object.rb +8 -0
- data/lib/ariadne/forms/dsl/form_reference_input.rb +59 -0
- data/lib/ariadne/forms/dsl/hidden_input.rb +32 -0
- data/lib/ariadne/forms/dsl/input.rb +4 -2
- data/lib/ariadne/forms/dsl/input_group.rb +3 -3
- data/lib/ariadne/forms/dsl/radio_button_group_input.rb +50 -0
- data/lib/ariadne/forms/dsl/radio_button_input.rb +48 -0
- data/lib/ariadne/forms/dsl/text_field_input.rb +4 -1
- data/lib/ariadne/view_components/version.rb +1 -1
- metadata +54 -10
- data/app/components/ariadne/form/caption/component.html.erb +0 -10
- data/app/components/ariadne/form/caption/component.rb +0 -32
- data/app/components/ariadne/form/spacing_wrapper/component.html.erb +0 -3
- data/app/components/ariadne/form/spacing_wrapper/component.rb +0 -10
- data/app/components/ariadne/ui/combobox/menu_item/component.rb +0 -53
- data/app/frontend/controllers/tooltip.ts +0 -75
- data/app/frontend/stylesheets/typography.css +0 -117
@@ -0,0 +1,36 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module Layout
|
6
|
+
module Grid
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
renders_many :items, BaseComponent::ACCEPT_ANYTHING
|
9
|
+
|
10
|
+
accepts_html_attributes do |html_attrs|
|
11
|
+
html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:item), html_attrs[:class]].join(" "))
|
12
|
+
end
|
13
|
+
|
14
|
+
style :item do
|
15
|
+
base do
|
16
|
+
[
|
17
|
+
"ariadne-flex",
|
18
|
+
"ariadne-flex-col",
|
19
|
+
"ariadne-gap-3",
|
20
|
+
"ariadne-p-3",
|
21
|
+
"ariadne-ps-4",
|
22
|
+
"ariadne-rounded-xl",
|
23
|
+
"ariadne-border",
|
24
|
+
"ariadne-border-black/10",
|
25
|
+
"dark:ariadne-border-white/10",
|
26
|
+
"ariadne-bg-white",
|
27
|
+
"dark:ariadne-bg-zinc-950",
|
28
|
+
"hover:ariadne-shadow-lg",
|
29
|
+
"ariadne-transition-shadow",
|
30
|
+
]
|
31
|
+
end
|
32
|
+
end
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
@@ -8,116 +8,27 @@
|
|
8
8
|
</div>
|
9
9
|
<% end %>
|
10
10
|
</div>
|
11
|
-
<%# <div class="flex flex-1 items-center justify-center px-2 lg:ml-6 lg:justify-end">
|
12
|
-
<div class="w-full max-w-lg lg:max-w-xs">
|
13
|
-
<label for="search" class="sr-only">Search</label>
|
14
|
-
<div class="relative">
|
15
|
-
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
16
|
-
Heroicon(icon: :search)
|
17
|
-
</div>
|
18
|
-
<input id="search" name="search" class="block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Search" type="search">
|
19
|
-
</div>
|
20
|
-
</div>
|
21
|
-
</div> %>
|
22
|
-
<%# <div class="flex items-center lg:hidden">
|
23
|
-
<!-- Mobile menu button -->
|
24
|
-
<button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
|
25
|
-
<span class="absolute -inset-0.5"></span>
|
26
|
-
<span class="sr-only">Open main menu</span>
|
27
|
-
<!--
|
28
|
-
Icon when menu is closed.
|
29
11
|
|
30
|
-
|
31
|
-
|
32
|
-
<
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
12
|
+
<div class="ariadne-flex ariadne-items-center ariadne-space-x-4 lg:ariadne-space-x-6 ariadne-mx-6">
|
13
|
+
<% @links.each do |link| %>
|
14
|
+
<a
|
15
|
+
aria-current="<%= link[:current] ? "page" : "false" %>"
|
16
|
+
href="<%= link[:href] %>"
|
17
|
+
class="<%= style(:tab, active: link[:current] ? :yes : :no) %>">
|
18
|
+
<span class="ariadne-inline-block ariadne-rounded-md group-hover:ariadne-bg-zinc-200/20 dark:group-hover:ariadne-bg-zinc-700/20">
|
19
|
+
<span class="ariadne-px-1.5"><%= link[:label] %></span>
|
20
|
+
</span>
|
21
|
+
</a>
|
22
|
+
<% end %>
|
23
|
+
</div>
|
37
24
|
|
38
|
-
Menu open: "block", Menu closed: "hidden"
|
39
|
-
-->
|
40
|
-
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
41
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
42
|
-
</svg>
|
43
|
-
</button>
|
44
|
-
</div> %>
|
45
25
|
<div class="ariadne-hidden lg:ariadne-ml-4 lg:ariadne-flex lg:ariadne-items-center">
|
46
26
|
<% trailing_items.each_with_index do |trailing_item, idx| %>
|
47
27
|
<div class="<%= style(:trailing_item, initial: final?(idx)) %>">
|
48
28
|
<%= trailing_item %>
|
49
29
|
</div>
|
50
30
|
<% end %>
|
51
|
-
<%# <button type="button" class="relative flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
52
|
-
<span class="absolute -inset-1.5"></span>
|
53
|
-
<span class="sr-only">View notifications</span>
|
54
|
-
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
55
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
56
|
-
</svg>
|
57
|
-
</button> %>
|
58
|
-
|
59
|
-
<!-- Profile dropdown -->
|
60
|
-
<%# <div class="relative ml-4 flex-shrink-0">
|
61
|
-
<div>
|
62
|
-
<button type="button" class="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
63
|
-
<span class="absolute -inset-1.5"></span>
|
64
|
-
<span class="sr-only">Open user menu</span>
|
65
|
-
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
66
|
-
</button>
|
67
|
-
</div>
|
68
|
-
|
69
|
-
<!--
|
70
|
-
Dropdown menu, show/hide based on menu state.
|
71
|
-
|
72
|
-
Entering: "transition ease-out duration-100"
|
73
|
-
From: "transform opacity-0 scale-95"
|
74
|
-
To: "transform opacity-100 scale-100"
|
75
|
-
Leaving: "transition ease-in duration-75"
|
76
|
-
From: "transform opacity-100 scale-100"
|
77
|
-
To: "transform opacity-0 scale-95"
|
78
|
-
-->
|
79
|
-
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
|
80
|
-
<!-- Active: "bg-gray-100", Not Active: "" -->
|
81
|
-
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
82
|
-
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
83
|
-
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
84
|
-
</div>
|
85
|
-
</div> %>
|
86
31
|
</div>
|
87
32
|
</nav>
|
88
33
|
</div>
|
89
|
-
|
90
|
-
<!-- Mobile menu, show/hide based on menu state. -->
|
91
|
-
<%# <div class="lg:hidden" id="mobile-menu">
|
92
|
-
<div class="space-y-1 pb-3 pt-2">
|
93
|
-
<!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
|
94
|
-
<a href="#" class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700">Dashboard</a>
|
95
|
-
<a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Team</a>
|
96
|
-
<a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Projects</a>
|
97
|
-
<a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Calendar</a>
|
98
|
-
</div>
|
99
|
-
<div class="border-t border-gray-200 pb-3 pt-4">
|
100
|
-
<div class="flex items-center px-4">
|
101
|
-
<div class="flex-shrink-0">
|
102
|
-
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
103
|
-
</div>
|
104
|
-
<div class="ml-3">
|
105
|
-
<div class="text-base font-medium text-gray-800">Tom Cook</div>
|
106
|
-
<div class="text-sm font-medium text-gray-500">tom@example.com</div>
|
107
|
-
</div>
|
108
|
-
<button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
109
|
-
<span class="absolute -inset-1.5"></span>
|
110
|
-
<span class="sr-only">View notifications</span>
|
111
|
-
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
112
|
-
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
|
113
|
-
</svg>
|
114
|
-
</button>
|
115
|
-
</div>
|
116
|
-
<div class="mt-3 space-y-1">
|
117
|
-
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Your Profile</a>
|
118
|
-
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Settings</a>
|
119
|
-
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Sign out</a>
|
120
|
-
</div>
|
121
|
-
</div>
|
122
|
-
</div> %>
|
123
34
|
</header>
|
@@ -8,18 +8,18 @@ module Ariadne
|
|
8
8
|
# Leading items at the far left of the header.
|
9
9
|
renders_many :leading_items, BaseComponent::ACCEPT_ANYTHING
|
10
10
|
|
11
|
-
# Leading items at the far
|
12
|
-
renders_many :
|
13
|
-
|
14
|
-
|
15
|
-
view_context.capture { block&.call }
|
11
|
+
# Leading items at the far right of the header.
|
12
|
+
renders_many :center_links, lambda { |href:, label:, current:|
|
13
|
+
@links << { href: href, label: label, current: current }
|
16
14
|
}
|
17
15
|
|
18
|
-
|
19
|
-
|
16
|
+
# Leading items at the far right of the header.
|
17
|
+
renders_many :trailing_items, BaseComponent::ACCEPT_ANYTHING
|
20
18
|
|
21
|
-
|
22
|
-
|
19
|
+
def initialize(**options)
|
20
|
+
super
|
21
|
+
@links = []
|
22
|
+
end
|
23
23
|
|
24
24
|
def initial?(position)
|
25
25
|
position.zero?
|
@@ -57,6 +57,35 @@ module Ariadne
|
|
57
57
|
end
|
58
58
|
end
|
59
59
|
|
60
|
+
style :tab do
|
61
|
+
base do
|
62
|
+
[
|
63
|
+
"ariadne-text-base",
|
64
|
+
"ariadne-font-medium",
|
65
|
+
"ariadne-whitespace-nowrap",
|
66
|
+
"ariadne-border-b-2",
|
67
|
+
"ariadne-py-2",
|
68
|
+
]
|
69
|
+
end
|
70
|
+
variants do
|
71
|
+
active do
|
72
|
+
no do
|
73
|
+
[
|
74
|
+
"ariadne-group", "ariadne-border-transparent",
|
75
|
+
]
|
76
|
+
end
|
77
|
+
yes do
|
78
|
+
[
|
79
|
+
"ariadne-border-billy-purple-700",
|
80
|
+
"ariadne-text-billy-purple-700",
|
81
|
+
"dark:ariadne-border-billy-purple-300",
|
82
|
+
"dark:ariadne-text-billy-purple-300",
|
83
|
+
]
|
84
|
+
end
|
85
|
+
end
|
86
|
+
end
|
87
|
+
end
|
88
|
+
|
60
89
|
style(:trailing_item) do
|
61
90
|
base do
|
62
91
|
[
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<main class="ariadne-grow ariadne-flex">
|
2
|
+
<div class="ariadne-grow">
|
3
|
+
<div class="<%= style %>">
|
4
|
+
<div class="<%= style(:menu) %>">
|
5
|
+
<%= left_panel %>
|
6
|
+
</div>
|
7
|
+
<div class="ariadne-grow ariadne-min-w-0 ariadne-w-full">
|
8
|
+
<div class="md:ariadne-w-4/5 md:ariadne-mx-auto ariadne-p-2.5">
|
9
|
+
<%= content %>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
</div>
|
13
|
+
</div>
|
14
|
+
</main>
|
@@ -0,0 +1,38 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module Layout
|
6
|
+
module TwoPanel
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
renders_one :left_panel, Ariadne::BaseComponent::ACCEPT_ANYTHING
|
9
|
+
|
10
|
+
style do
|
11
|
+
base do
|
12
|
+
[
|
13
|
+
"ariadne-flex", "ariadne-flex-col", "sm:ariadne-flex-row", "ariadne-h-full",
|
14
|
+
]
|
15
|
+
end
|
16
|
+
end
|
17
|
+
|
18
|
+
style :menu do
|
19
|
+
base do
|
20
|
+
[
|
21
|
+
"ariadne-basis-1/4",
|
22
|
+
"ariadne-shrink-0",
|
23
|
+
"ariadne-px-2",
|
24
|
+
"ariadne-pb-2",
|
25
|
+
"sm:ariadne-p-4",
|
26
|
+
"ariadne-bg-zinc-50",
|
27
|
+
"dark:ariadne-bg-zinc-900",
|
28
|
+
"max-sm:ariadne-border-b",
|
29
|
+
"sm:ariadne-border-e",
|
30
|
+
"ariadne-border-black/10",
|
31
|
+
"dark:ariadne-border-white/10",
|
32
|
+
]
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
38
|
+
end
|
@@ -0,0 +1,24 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module Layout
|
6
|
+
module Wide
|
7
|
+
class Component < BaseComponent
|
8
|
+
renders_one :footer, Ariadne::BaseComponent::ACCEPT_ANYTHING
|
9
|
+
|
10
|
+
style do
|
11
|
+
base do
|
12
|
+
[
|
13
|
+
"ariadne-grow",
|
14
|
+
"ariadne-bg-zinc-50",
|
15
|
+
"dark:ariadne-bg-zinc-900",
|
16
|
+
"ariadne-py-6",
|
17
|
+
"ariadne-px-1",
|
18
|
+
]
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
@@ -0,0 +1,25 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module UI
|
5
|
+
module Turbo
|
6
|
+
module StreamAction
|
7
|
+
class Component < ApplicationViewComponent
|
8
|
+
option :component
|
9
|
+
option :action, default: -> { "update" }
|
10
|
+
|
11
|
+
def target
|
12
|
+
@target ||= component.component_id
|
13
|
+
end
|
14
|
+
|
15
|
+
def turbo_action
|
16
|
+
@turbo_action ||= empty? ? "update" : action
|
17
|
+
end
|
18
|
+
|
19
|
+
def empty?
|
20
|
+
action == "drop"
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
25
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
<span <%= html_attrs.to_html %>><%= leading_item if leading_item? %><%= text %></span>
|
@@ -0,0 +1,76 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module Badge
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
option :size, default: proc { :base }
|
9
|
+
|
10
|
+
renders_one :text
|
11
|
+
renders_one :leading_color_dot, lambda { |**options|
|
12
|
+
options[:size] = size # Use the same size as the badge
|
13
|
+
Ariadne::UI::ColorDot::Component.new(**options)
|
14
|
+
}
|
15
|
+
|
16
|
+
include Ariadne::Behaviors::Tooltipable
|
17
|
+
|
18
|
+
WITH_LEADING_PADDINGS = {
|
19
|
+
xs: "ariadne-pe-1 ariadne-ps-0.5",
|
20
|
+
sm: "ariadne-pe-1.5 ariadne-ps-0.5",
|
21
|
+
base: "ariadne-pe-1.5 ariadne-ps-0.5",
|
22
|
+
md: "ariadne-pe-1.5 ariadne-ps-0.5",
|
23
|
+
}
|
24
|
+
|
25
|
+
WITHOUT_LEADING_PADDINGS = {
|
26
|
+
xs: "ariadne-px-1",
|
27
|
+
sm: "ariadne-px-1.5",
|
28
|
+
base: "ariadne-px-2",
|
29
|
+
md: "ariadne-px-2",
|
30
|
+
}
|
31
|
+
|
32
|
+
# must be dont here rather than within an `accepts_html_attributes` block
|
33
|
+
# because the padding class is dependent on the slot existing, which isn't known until now
|
34
|
+
def before_render
|
35
|
+
padding_class = (leading_item? ? WITH_LEADING_PADDINGS : WITHOUT_LEADING_PADDINGS)[size]
|
36
|
+
html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:, with_leading_item: leading_item? ? :yes : :no), padding_class, html_attrs[:class]].join(" "))
|
37
|
+
end
|
38
|
+
|
39
|
+
private def leading_item?
|
40
|
+
leading_color_dot.present?
|
41
|
+
end
|
42
|
+
|
43
|
+
private def leading_item
|
44
|
+
leading_color_dot.presence
|
45
|
+
end
|
46
|
+
|
47
|
+
style do
|
48
|
+
base do
|
49
|
+
[
|
50
|
+
"ariadne-truncate",
|
51
|
+
"ariadne-max-w-full",
|
52
|
+
"ariadne-border-0.5",
|
53
|
+
"ariadne-border-solid",
|
54
|
+
"ariadne-border-black/10",
|
55
|
+
"dark:ariadne-border-white/10",
|
56
|
+
]
|
57
|
+
end
|
58
|
+
|
59
|
+
variants do
|
60
|
+
with_leading_item do
|
61
|
+
yes { "ariadne-inline-flex ariadne-items-center" }
|
62
|
+
no { "ariadne-inline-block" }
|
63
|
+
end
|
64
|
+
|
65
|
+
size do
|
66
|
+
xs { "ariadne-leading-5 ariadne-text-xs ariadne-rounded-md" }
|
67
|
+
sm { "ariadne-leading-6 ariadne-text-sm ariadne-rounded-lg" }
|
68
|
+
base { "ariadne-leading-7 ariadne-text-base ariadne-rounded-xl" }
|
69
|
+
md { "ariadne-leading-7 ariadne-text-base ariadne-rounded-xl" }
|
70
|
+
end
|
71
|
+
end
|
72
|
+
end
|
73
|
+
end
|
74
|
+
end
|
75
|
+
end
|
76
|
+
end
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<div class="ariadne-grow ariadne-flex ariadne-flex-col ariadne-justify-center ariadne-items-center <%= base? ? 'ariadne-gap-4' : 'ariadne-gap-1' %>">
|
2
|
+
<%= icon %>
|
3
|
+
<div class="ariadne-text-center ariadne-space-y-2">
|
4
|
+
<%= render(Ariadne::UI::Typography::Component.new(type: title_type_from_size)) { title } %>
|
5
|
+
<% if description.present? %>
|
6
|
+
<%= render(Ariadne::UI::Typography::Component.new(type: description_type_from_size, html_attrs: { class: "text-zinc-600 dark:text-zinc-400 text-balance" })) { description } %>
|
7
|
+
<% end %>
|
8
|
+
</div>
|
9
|
+
</div>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module Blankslate
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
option :size, default: proc { :base }
|
9
|
+
|
10
|
+
option :title
|
11
|
+
option :description, optional: true
|
12
|
+
|
13
|
+
renders_one :icon, Ariadne::UI::Heroicon::Component
|
14
|
+
|
15
|
+
def before_render
|
16
|
+
icon&.dark_mode = :invert
|
17
|
+
end
|
18
|
+
|
19
|
+
def title_type_from_size
|
20
|
+
case size
|
21
|
+
when :base
|
22
|
+
:h2
|
23
|
+
when :sm
|
24
|
+
|
25
|
+
end
|
26
|
+
end
|
27
|
+
|
28
|
+
def description_type_from_size
|
29
|
+
end
|
30
|
+
|
31
|
+
def base?
|
32
|
+
size == :base
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
@@ -5,6 +5,7 @@ module Ariadne
|
|
5
5
|
module UI
|
6
6
|
module Button
|
7
7
|
class Component < Ariadne::BaseComponent
|
8
|
+
include Ariadne::Behaviors::Captionable
|
8
9
|
include Ariadne::Behaviors::Tooltipable
|
9
10
|
|
10
11
|
option :as, default: proc { :button }
|
@@ -85,7 +86,7 @@ module Ariadne
|
|
85
86
|
"dark:active:ariadne-bg-zinc-700/20",
|
86
87
|
]
|
87
88
|
end
|
88
|
-
|
89
|
+
nude do
|
89
90
|
[
|
90
91
|
"ariadne-text-black",
|
91
92
|
"dark:ariadne-text-white",
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<span class="<%= style(size:) %>">
|
2
|
+
<span class="ariadne-px-0.5 ariadne-p-1 ariadne-shrink-0">
|
3
|
+
<svg class="<%= style(:svg, size:) %>" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
|
4
|
+
<circle cx="0.5" cy="0.5" r="0.5" fill="<%= "rgba(#{color.join(',')})" %>" />
|
5
|
+
</svg>
|
6
|
+
</span>
|
7
|
+
</span>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
# typed: false
|
2
|
+
# frozen_string_literal: true
|
3
|
+
|
4
|
+
module Ariadne
|
5
|
+
module UI
|
6
|
+
module ColorDot
|
7
|
+
class Component < Ariadne::BaseComponent
|
8
|
+
option :color
|
9
|
+
option :size, default: -> { :base }
|
10
|
+
|
11
|
+
style do
|
12
|
+
base do
|
13
|
+
"ariadne-inline-flex ariadne-items-center ariadne-truncate"
|
14
|
+
end
|
15
|
+
|
16
|
+
variants do
|
17
|
+
size do
|
18
|
+
xs { "ariadne-ps-0.5" }
|
19
|
+
sm { "ariadne-ps-0.5" }
|
20
|
+
base { "ariadne-ps-1" }
|
21
|
+
md { "ariadne-ps-1" }
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
25
|
+
|
26
|
+
style :svg do
|
27
|
+
variants do
|
28
|
+
size do
|
29
|
+
xs { "ariadne-size-2" }
|
30
|
+
sm { "ariadne-size-2.5" }
|
31
|
+
base { "ariadne-size-3" }
|
32
|
+
md { "ariadne-size-3" }
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
@@ -1,14 +1,14 @@
|
|
1
|
-
<details class="inline" <%= html_attrs.to_html %>>
|
2
|
-
<summary class="list-none rounded" data
|
3
|
-
<%=
|
1
|
+
<details class="ariadne-inline" <%= html_attrs.to_html %>>
|
2
|
+
<summary class="ariadne-list-none ariadne-rounded" data-<%= stimulus_name %>-target="anchor">
|
3
|
+
<%= button %>
|
4
4
|
</summary>
|
5
5
|
<details-menu
|
6
6
|
class='<%= style(:popover, size:) %>'
|
7
7
|
role="menu"
|
8
|
-
data
|
8
|
+
data-<%= stimulus_name %>-target="popover"
|
9
9
|
data-action="details-menu-selected->combobox#close">
|
10
10
|
<% if show_search == :yes %>
|
11
|
-
<div class="p-1 pb-0">
|
11
|
+
<div class="ariadne-p-1 ariadne-pb-0">
|
12
12
|
<%= render UI::Input::Component.new(
|
13
13
|
theme: :soft,
|
14
14
|
width: :full,
|
@@ -17,16 +17,10 @@
|
|
17
17
|
</div>
|
18
18
|
<% end %>
|
19
19
|
<div class="<%= style(:options) %>"
|
20
|
-
data
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
<%= "no_options" %>
|
25
|
-
<% else %>
|
26
|
-
<span class="py-3 text-sm text-zinc-600 dark:text-zinc-400"><%= translate(:no_options) %></span>
|
27
|
-
<% end %>
|
28
|
-
</div>
|
20
|
+
data-<%= stimulus_name %>-target="options">
|
21
|
+
<% choices.each do |choice| %>
|
22
|
+
<%= choice %>
|
23
|
+
<% end %>
|
29
24
|
</div>
|
30
25
|
</details-menu>
|
31
26
|
</details>
|
32
|
-
<%= selector %>
|