better_ui 0.6.0 → 0.7.0
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 +257 -212
- data/Rakefile +11 -2
- data/app/components/better_ui/action_messages_component/action_messages_component.html.erb +48 -0
- data/app/components/better_ui/action_messages_component.rb +544 -0
- data/app/components/better_ui/application_component.rb +66 -0
- data/app/components/better_ui/button_component/button_component.html.erb +31 -0
- data/app/components/better_ui/button_component.rb +307 -0
- data/app/components/better_ui/card_component/card_component.html.erb +17 -0
- data/app/components/better_ui/card_component.rb +460 -0
- data/app/components/better_ui/drawer/header_component/header_component.html.erb +24 -0
- data/app/components/better_ui/drawer/header_component.rb +238 -0
- data/app/components/better_ui/drawer/layout_component/layout_component.html.erb +44 -0
- data/app/components/better_ui/drawer/layout_component.rb +270 -0
- data/app/components/better_ui/drawer/nav_group_component/nav_group_component.html.erb +10 -0
- data/app/components/better_ui/drawer/nav_group_component.rb +155 -0
- data/app/components/better_ui/drawer/nav_item_component/nav_item_component.html.erb +13 -0
- data/app/components/better_ui/drawer/nav_item_component.rb +225 -0
- data/app/components/better_ui/drawer/sidebar_component/sidebar_component.html.erb +17 -0
- data/app/components/better_ui/drawer/sidebar_component.rb +263 -0
- data/app/components/better_ui/forms/base_component.rb +450 -0
- data/app/components/better_ui/forms/checkbox_component/checkbox_component.html.erb +28 -0
- data/app/components/better_ui/forms/checkbox_component.rb +419 -0
- data/app/components/better_ui/forms/checkbox_group_component/checkbox_group_component.html.erb +40 -0
- data/app/components/better_ui/forms/checkbox_group_component.rb +363 -0
- data/app/components/better_ui/forms/number_input_component/number_input_component.html.erb +40 -0
- data/app/components/better_ui/forms/number_input_component.rb +320 -0
- data/app/components/better_ui/forms/password_input_component/password_input_component.html.erb +71 -0
- data/app/components/better_ui/forms/password_input_component.rb +206 -0
- data/app/components/better_ui/forms/text_input_component/text_input_component.html.erb +40 -0
- data/app/components/better_ui/forms/text_input_component.rb +258 -0
- data/app/components/better_ui/forms/textarea_component/textarea_component.html.erb +40 -0
- data/app/components/better_ui/forms/textarea_component.rb +329 -0
- data/app/form_builders/better_ui/ui_form_builder.rb +467 -0
- data/app/helpers/better_ui/application_helper.rb +325 -58
- data/app/views/layouts/better_ui/application.html.erb +1 -1
- data/config/routes.rb +1 -0
- data/lib/better_ui/engine.rb +34 -5
- data/lib/better_ui/version.rb +1 -1
- data/lib/better_ui.rb +32 -5
- data/lib/generators/better_ui/install/USAGE +44 -0
- data/lib/generators/better_ui/install/install_generator.rb +87 -0
- data/lib/generators/better_ui/install/templates/better_ui_theme.css.tt +280 -0
- data/lib/tasks/better_ui_tasks.rake +39 -4
- metadata +52 -200
- data/app/components/better_ui/application/card/component.html.erb +0 -20
- data/app/components/better_ui/application/card/component.rb +0 -214
- data/app/components/better_ui/application/main/component.html.erb +0 -9
- data/app/components/better_ui/application/main/component.rb +0 -123
- data/app/components/better_ui/application/navbar/component.html.erb +0 -92
- data/app/components/better_ui/application/navbar/component.rb +0 -136
- data/app/components/better_ui/application/sidebar/component.html.erb +0 -249
- data/app/components/better_ui/application/sidebar/component.rb +0 -187
- data/app/components/better_ui/general/accordion/component.html.erb +0 -5
- data/app/components/better_ui/general/accordion/component.rb +0 -92
- data/app/components/better_ui/general/accordion/item_component.html.erb +0 -12
- data/app/components/better_ui/general/accordion/item_component.rb +0 -176
- data/app/components/better_ui/general/alert/component.html.erb +0 -32
- data/app/components/better_ui/general/alert/component.rb +0 -242
- data/app/components/better_ui/general/avatar/component.html.erb +0 -20
- data/app/components/better_ui/general/avatar/component.rb +0 -301
- data/app/components/better_ui/general/badge/component.html.erb +0 -23
- data/app/components/better_ui/general/badge/component.rb +0 -248
- data/app/components/better_ui/general/breadcrumb/component.html.erb +0 -15
- data/app/components/better_ui/general/breadcrumb/component.rb +0 -187
- data/app/components/better_ui/general/button/component.html.erb +0 -34
- data/app/components/better_ui/general/button/component.rb +0 -214
- data/app/components/better_ui/general/divider/component.html.erb +0 -10
- data/app/components/better_ui/general/divider/component.rb +0 -226
- data/app/components/better_ui/general/dropdown/component.html.erb +0 -28
- data/app/components/better_ui/general/dropdown/component.rb +0 -192
- data/app/components/better_ui/general/dropdown/divider_component.html.erb +0 -1
- data/app/components/better_ui/general/dropdown/divider_component.rb +0 -41
- data/app/components/better_ui/general/dropdown/item_component.html.erb +0 -6
- data/app/components/better_ui/general/dropdown/item_component.rb +0 -119
- data/app/components/better_ui/general/field/component.html.erb +0 -27
- data/app/components/better_ui/general/field/component.rb +0 -37
- data/app/components/better_ui/general/grid/cell_component.html.erb +0 -3
- data/app/components/better_ui/general/grid/cell_component.rb +0 -390
- data/app/components/better_ui/general/grid/component.html.erb +0 -3
- data/app/components/better_ui/general/grid/component.rb +0 -301
- data/app/components/better_ui/general/heading/component.html.erb +0 -22
- data/app/components/better_ui/general/heading/component.rb +0 -257
- data/app/components/better_ui/general/icon/component.html.erb +0 -7
- data/app/components/better_ui/general/icon/component.rb +0 -240
- data/app/components/better_ui/general/input/checkbox/component.html.erb +0 -5
- data/app/components/better_ui/general/input/checkbox/component.rb +0 -238
- data/app/components/better_ui/general/input/datetime/component.html.erb +0 -5
- data/app/components/better_ui/general/input/datetime/component.rb +0 -223
- data/app/components/better_ui/general/input/pin/component.html.erb +0 -1
- data/app/components/better_ui/general/input/pin/component.rb +0 -201
- data/app/components/better_ui/general/input/radio/component.html.erb +0 -5
- data/app/components/better_ui/general/input/radio/component.rb +0 -230
- data/app/components/better_ui/general/input/rating/component.html.erb +0 -4
- data/app/components/better_ui/general/input/rating/component.rb +0 -272
- data/app/components/better_ui/general/input/select/component.html.erb +0 -78
- data/app/components/better_ui/general/input/select/component.rb +0 -249
- data/app/components/better_ui/general/input/select/select_component.html.erb +0 -5
- data/app/components/better_ui/general/input/select/select_component.rb +0 -37
- data/app/components/better_ui/general/input/text/component.html.erb +0 -5
- data/app/components/better_ui/general/input/text/component.rb +0 -171
- data/app/components/better_ui/general/input/textarea/component.html.erb +0 -5
- data/app/components/better_ui/general/input/textarea/component.rb +0 -166
- data/app/components/better_ui/general/input/toggle/component.html.erb +0 -5
- data/app/components/better_ui/general/input/toggle/component.rb +0 -242
- data/app/components/better_ui/general/link/component.html.erb +0 -18
- data/app/components/better_ui/general/link/component.rb +0 -258
- data/app/components/better_ui/general/modal/component.html.erb +0 -5
- data/app/components/better_ui/general/modal/component.rb +0 -47
- data/app/components/better_ui/general/modal/modal_component.html.erb +0 -52
- data/app/components/better_ui/general/modal/modal_component.rb +0 -160
- data/app/components/better_ui/general/pagination/component.html.erb +0 -85
- data/app/components/better_ui/general/pagination/component.rb +0 -216
- data/app/components/better_ui/general/panel/component.html.erb +0 -28
- data/app/components/better_ui/general/panel/component.rb +0 -249
- data/app/components/better_ui/general/progress/component.html.erb +0 -11
- data/app/components/better_ui/general/progress/component.rb +0 -160
- data/app/components/better_ui/general/spinner/component.html.erb +0 -35
- data/app/components/better_ui/general/spinner/component.rb +0 -93
- data/app/components/better_ui/general/table/component.html.erb +0 -5
- data/app/components/better_ui/general/table/component.rb +0 -217
- data/app/components/better_ui/general/table/tbody_component.html.erb +0 -3
- data/app/components/better_ui/general/table/tbody_component.rb +0 -30
- data/app/components/better_ui/general/table/td_component.html.erb +0 -3
- data/app/components/better_ui/general/table/td_component.rb +0 -44
- data/app/components/better_ui/general/table/tfoot_component.html.erb +0 -3
- data/app/components/better_ui/general/table/tfoot_component.rb +0 -28
- data/app/components/better_ui/general/table/th_component.html.erb +0 -6
- data/app/components/better_ui/general/table/th_component.rb +0 -51
- data/app/components/better_ui/general/table/thead_component.html.erb +0 -3
- data/app/components/better_ui/general/table/thead_component.rb +0 -28
- data/app/components/better_ui/general/table/tr_component.html.erb +0 -3
- data/app/components/better_ui/general/table/tr_component.rb +0 -30
- data/app/components/better_ui/general/tabs/component.html.erb +0 -11
- data/app/components/better_ui/general/tabs/component.rb +0 -120
- data/app/components/better_ui/general/tabs/panel_component.html.erb +0 -3
- data/app/components/better_ui/general/tabs/panel_component.rb +0 -37
- data/app/components/better_ui/general/tabs/tab_component.html.erb +0 -13
- data/app/components/better_ui/general/tabs/tab_component.rb +0 -111
- data/app/components/better_ui/general/tag/component.html.erb +0 -3
- data/app/components/better_ui/general/tag/component.rb +0 -104
- data/app/components/better_ui/general/text/component.html.erb +0 -1
- data/app/components/better_ui/general/text/component.rb +0 -194
- data/app/components/better_ui/general/tooltip/component.html.erb +0 -7
- data/app/components/better_ui/general/tooltip/component.rb +0 -239
- data/app/helpers/better_ui/application/components/card/card_helper.rb +0 -96
- data/app/helpers/better_ui/application/components/card.rb +0 -11
- data/app/helpers/better_ui/application/components/main/main_helper.rb +0 -64
- data/app/helpers/better_ui/application/components/navbar/navbar_helper.rb +0 -77
- data/app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb +0 -51
- data/app/helpers/better_ui/general/components/accordion/accordion_helper.rb +0 -73
- data/app/helpers/better_ui/general/components/alert/alert_helper.rb +0 -57
- data/app/helpers/better_ui/general/components/avatar/avatar_helper.rb +0 -29
- data/app/helpers/better_ui/general/components/badge/badge_helper.rb +0 -53
- data/app/helpers/better_ui/general/components/breadcrumb/breadcrumb_helper.rb +0 -37
- data/app/helpers/better_ui/general/components/button/button_helper.rb +0 -65
- data/app/helpers/better_ui/general/components/container/container_helper.rb +0 -60
- data/app/helpers/better_ui/general/components/divider/divider_helper.rb +0 -63
- data/app/helpers/better_ui/general/components/dropdown/divider_helper.rb +0 -32
- data/app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb +0 -88
- data/app/helpers/better_ui/general/components/dropdown/item_helper.rb +0 -68
- data/app/helpers/better_ui/general/components/field/field_helper.rb +0 -26
- data/app/helpers/better_ui/general/components/grid/grid_helper.rb +0 -145
- data/app/helpers/better_ui/general/components/heading/heading_helper.rb +0 -72
- data/app/helpers/better_ui/general/components/icon/icon_helper.rb +0 -16
- data/app/helpers/better_ui/general/components/input/checkbox/checkbox_helper.rb +0 -81
- data/app/helpers/better_ui/general/components/input/datetime/datetime_helper.rb +0 -91
- data/app/helpers/better_ui/general/components/input/pin/pin_helper.rb +0 -76
- data/app/helpers/better_ui/general/components/input/radio/radio_helper.rb +0 -79
- data/app/helpers/better_ui/general/components/input/radio_group/radio_group_helper.rb +0 -124
- data/app/helpers/better_ui/general/components/input/rating/rating_helper.rb +0 -70
- data/app/helpers/better_ui/general/components/input/select/select_helper.rb +0 -86
- data/app/helpers/better_ui/general/components/input/text/text_helper.rb +0 -138
- data/app/helpers/better_ui/general/components/input/textarea/textarea_helper.rb +0 -73
- data/app/helpers/better_ui/general/components/input/toggle/toggle_helper.rb +0 -77
- data/app/helpers/better_ui/general/components/link/link_helper.rb +0 -89
- data/app/helpers/better_ui/general/components/modal/modal_helper.rb +0 -85
- data/app/helpers/better_ui/general/components/pagination/pagination_helper.rb +0 -82
- data/app/helpers/better_ui/general/components/panel/panel_helper.rb +0 -83
- data/app/helpers/better_ui/general/components/progress/progress_helper.rb +0 -53
- data/app/helpers/better_ui/general/components/spinner/spinner_helper.rb +0 -19
- data/app/helpers/better_ui/general/components/table/table_helper.rb +0 -53
- data/app/helpers/better_ui/general/components/table/tbody_helper.rb +0 -13
- data/app/helpers/better_ui/general/components/table/td_helper.rb +0 -19
- data/app/helpers/better_ui/general/components/table/tfoot_helper.rb +0 -13
- data/app/helpers/better_ui/general/components/table/th_helper.rb +0 -19
- data/app/helpers/better_ui/general/components/table/thead_helper.rb +0 -13
- data/app/helpers/better_ui/general/components/table/tr_helper.rb +0 -13
- data/app/helpers/better_ui/general/components/tabs/panel_helper.rb +0 -62
- data/app/helpers/better_ui/general/components/tabs/tab_helper.rb +0 -55
- data/app/helpers/better_ui/general/components/tabs/tabs_helper.rb +0 -95
- data/app/helpers/better_ui/general/components/tag/tag_helper.rb +0 -26
- data/app/helpers/better_ui/general/components/text/text_helper.rb +0 -83
- data/app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb +0 -60
- data/app/jobs/better_ui/application_job.rb +0 -4
- data/app/mailers/better_ui/application_mailer.rb +0 -6
- data/config/initializers/lookbook.rb +0 -23
- data/lib/better_ui/railtie.rb +0 -20
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
module BetterUi
|
|
2
|
-
module General
|
|
3
|
-
module Modal
|
|
4
|
-
class ModalComponent < ViewComponent::Base
|
|
5
|
-
attr_reader :title, :theme, :size, :backdrop, :closable, :classes, :html_options
|
|
6
|
-
|
|
7
|
-
# Classi base sempre presenti per il backdrop
|
|
8
|
-
MODAL_BACKDROP_CLASSES = "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50"
|
|
9
|
-
|
|
10
|
-
# Classi base per il contenitore del modal
|
|
11
|
-
MODAL_CONTAINER_CLASSES = "relative bg-white shadow-xl w-full"
|
|
12
|
-
|
|
13
|
-
# Temi dell'header del modal con classi Tailwind dirette
|
|
14
|
-
MODAL_THEME = {
|
|
15
|
-
default: "bg-gray-50 border-b border-gray-200 text-gray-900",
|
|
16
|
-
white: "bg-white border-b border-gray-200 text-gray-900",
|
|
17
|
-
red: "bg-red-50 border-b border-red-200 text-red-900",
|
|
18
|
-
rose: "bg-rose-50 border-b border-rose-200 text-rose-900",
|
|
19
|
-
orange: "bg-orange-50 border-b border-orange-200 text-orange-900",
|
|
20
|
-
green: "bg-green-50 border-b border-green-200 text-green-900",
|
|
21
|
-
blue: "bg-blue-50 border-b border-blue-200 text-blue-900",
|
|
22
|
-
yellow: "bg-yellow-50 border-b border-yellow-200 text-yellow-900",
|
|
23
|
-
violet: "bg-violet-50 border-b border-violet-200 text-violet-900"
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
# Dimensioni con classi Tailwind dirette
|
|
27
|
-
MODAL_SIZES = {
|
|
28
|
-
small: "max-w-sm",
|
|
29
|
-
medium: "max-w-md",
|
|
30
|
-
large: "max-w-2xl"
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
# Border radius con classi Tailwind dirette
|
|
34
|
-
MODAL_ROUNDED = {
|
|
35
|
-
none: "rounded-none",
|
|
36
|
-
small: "rounded-md",
|
|
37
|
-
medium: "rounded-lg",
|
|
38
|
-
large: "rounded-xl",
|
|
39
|
-
full: "rounded-full"
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
# Inizializzazione del modal component
|
|
43
|
-
def initialize(
|
|
44
|
-
title:,
|
|
45
|
-
theme: :default,
|
|
46
|
-
size: :medium,
|
|
47
|
-
rounded: :medium,
|
|
48
|
-
backdrop: true,
|
|
49
|
-
closable: true,
|
|
50
|
-
classes: nil,
|
|
51
|
-
**html_options
|
|
52
|
-
)
|
|
53
|
-
@title = title
|
|
54
|
-
@theme = theme.to_sym
|
|
55
|
-
@size = size.to_sym
|
|
56
|
-
@rounded = rounded.to_sym
|
|
57
|
-
@backdrop = backdrop
|
|
58
|
-
@closable = closable
|
|
59
|
-
@classes = classes
|
|
60
|
-
@html_options = html_options
|
|
61
|
-
|
|
62
|
-
validate_params
|
|
63
|
-
end
|
|
64
|
-
|
|
65
|
-
# Combina tutte le classi per il backdrop
|
|
66
|
-
def backdrop_classes
|
|
67
|
-
MODAL_BACKDROP_CLASSES
|
|
68
|
-
end
|
|
69
|
-
|
|
70
|
-
# Combina tutte le classi per il contenitore
|
|
71
|
-
def container_classes
|
|
72
|
-
[
|
|
73
|
-
MODAL_CONTAINER_CLASSES,
|
|
74
|
-
get_modal_size_classes,
|
|
75
|
-
get_modal_rounded_classes,
|
|
76
|
-
@classes,
|
|
77
|
-
@html_options[:class]
|
|
78
|
-
].compact.join(" ")
|
|
79
|
-
end
|
|
80
|
-
|
|
81
|
-
# Combina tutte le classi per l'header
|
|
82
|
-
def header_classes
|
|
83
|
-
[
|
|
84
|
-
"flex items-center justify-between p-6",
|
|
85
|
-
get_modal_theme_classes
|
|
86
|
-
].compact.join(" ")
|
|
87
|
-
end
|
|
88
|
-
|
|
89
|
-
def get_modal_theme_classes
|
|
90
|
-
MODAL_THEME[@theme] || MODAL_THEME[:default]
|
|
91
|
-
end
|
|
92
|
-
|
|
93
|
-
def get_modal_size_classes
|
|
94
|
-
MODAL_SIZES[@size] || MODAL_SIZES[:medium]
|
|
95
|
-
end
|
|
96
|
-
|
|
97
|
-
def get_modal_rounded_classes
|
|
98
|
-
MODAL_ROUNDED[@rounded] || MODAL_ROUNDED[:medium]
|
|
99
|
-
end
|
|
100
|
-
|
|
101
|
-
# Restituisce gli attributi per il backdrop
|
|
102
|
-
def backdrop_attributes
|
|
103
|
-
{
|
|
104
|
-
class: backdrop_classes,
|
|
105
|
-
'data-bui-modal-target': 'backdrop'
|
|
106
|
-
}
|
|
107
|
-
end
|
|
108
|
-
|
|
109
|
-
# Restituisce gli attributi per il contenitore
|
|
110
|
-
def container_attributes
|
|
111
|
-
{
|
|
112
|
-
class: container_classes,
|
|
113
|
-
role: "dialog",
|
|
114
|
-
"aria-modal": "true",
|
|
115
|
-
"aria-labelledby": "modal-title",
|
|
116
|
-
'data-bui-modal-target': 'container'
|
|
117
|
-
}
|
|
118
|
-
end
|
|
119
|
-
|
|
120
|
-
# Restituisce gli attributi per l'header
|
|
121
|
-
def header_attributes
|
|
122
|
-
{
|
|
123
|
-
class: header_classes
|
|
124
|
-
}
|
|
125
|
-
end
|
|
126
|
-
|
|
127
|
-
# Verifica se rendere il componente
|
|
128
|
-
def render?
|
|
129
|
-
@title.present?
|
|
130
|
-
end
|
|
131
|
-
|
|
132
|
-
private
|
|
133
|
-
|
|
134
|
-
def validate_params
|
|
135
|
-
validate_theme
|
|
136
|
-
validate_size
|
|
137
|
-
validate_rounded
|
|
138
|
-
end
|
|
139
|
-
|
|
140
|
-
def validate_theme
|
|
141
|
-
unless MODAL_THEME.keys.include?(@theme)
|
|
142
|
-
raise ArgumentError, "Il tema deve essere uno tra: #{MODAL_THEME.keys.join(', ')}"
|
|
143
|
-
end
|
|
144
|
-
end
|
|
145
|
-
|
|
146
|
-
def validate_size
|
|
147
|
-
unless MODAL_SIZES.keys.include?(@size)
|
|
148
|
-
raise ArgumentError, "La dimensione deve essere una tra: #{MODAL_SIZES.keys.join(', ')}"
|
|
149
|
-
end
|
|
150
|
-
end
|
|
151
|
-
|
|
152
|
-
def validate_rounded
|
|
153
|
-
unless MODAL_ROUNDED.keys.include?(@rounded)
|
|
154
|
-
raise ArgumentError, "Il border radius deve essere uno tra: #{MODAL_ROUNDED.keys.join(', ')}"
|
|
155
|
-
end
|
|
156
|
-
end
|
|
157
|
-
end
|
|
158
|
-
end
|
|
159
|
-
end
|
|
160
|
-
end
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
<% if should_show_pagination? %>
|
|
2
|
-
<nav aria-label="Pagination" class="flex items-center justify-between">
|
|
3
|
-
|
|
4
|
-
<!-- Info testo opzionale -->
|
|
5
|
-
<% if show_info %>
|
|
6
|
-
<div class="hidden sm:block">
|
|
7
|
-
<p class="text-sm text-gray-700"><%= info_text %></p>
|
|
8
|
-
</div>
|
|
9
|
-
<% end %>
|
|
10
|
-
|
|
11
|
-
<!-- Controlli paginazione -->
|
|
12
|
-
<div class="<%= container_classes %>">
|
|
13
|
-
|
|
14
|
-
<!-- Pulsante Previous -->
|
|
15
|
-
<% if previous_page %>
|
|
16
|
-
<a href="<%= build_url(previous_page) %>"
|
|
17
|
-
class="<%= page_link_classes(previous_page) %> rounded-l-md"
|
|
18
|
-
aria-label="Pagina precedente">
|
|
19
|
-
<span class="sr-only">Precedente</span>
|
|
20
|
-
<%= bui_icon(name: "chevron-left", size: :medium) %>
|
|
21
|
-
</a>
|
|
22
|
-
<% else %>
|
|
23
|
-
<span class="<%= disabled_classes %> rounded-l-md" aria-label="Pagina precedente">
|
|
24
|
-
<span class="sr-only">Precedente</span>
|
|
25
|
-
<%= bui_icon(name: "chevron-left", size: :medium) %>
|
|
26
|
-
</span>
|
|
27
|
-
<% end %>
|
|
28
|
-
|
|
29
|
-
<!-- Prima pagina se necessaria -->
|
|
30
|
-
<% if show_left_ellipsis? %>
|
|
31
|
-
<a href="<%= build_url(1) %>" class="<%= page_link_classes(1) %>">1</a>
|
|
32
|
-
<span class="<%= disabled_classes %>">...</span>
|
|
33
|
-
<% end %>
|
|
34
|
-
|
|
35
|
-
<!-- Range pagine -->
|
|
36
|
-
<% page_range.each do |page_num| %>
|
|
37
|
-
<% if page_num == current_page %>
|
|
38
|
-
<span aria-current="page" class="<%= page_link_classes(page_num) %>">
|
|
39
|
-
<%= page_num %>
|
|
40
|
-
</span>
|
|
41
|
-
<% else %>
|
|
42
|
-
<a href="<%= build_url(page_num) %>"
|
|
43
|
-
class="<%= page_link_classes(page_num) %>"
|
|
44
|
-
aria-label="Vai alla pagina <%= page_num %>">
|
|
45
|
-
<%= page_num %>
|
|
46
|
-
</a>
|
|
47
|
-
<% end %>
|
|
48
|
-
<% end %>
|
|
49
|
-
|
|
50
|
-
<!-- Ultima pagina se necessaria -->
|
|
51
|
-
<% if show_right_ellipsis? %>
|
|
52
|
-
<span class="<%= disabled_classes %>">...</span>
|
|
53
|
-
<a href="<%= build_url(total_pages) %>" class="<%= page_link_classes(total_pages) %>">
|
|
54
|
-
<%= total_pages %>
|
|
55
|
-
</a>
|
|
56
|
-
<% end %>
|
|
57
|
-
|
|
58
|
-
<!-- Pulsante Next -->
|
|
59
|
-
<% if next_page %>
|
|
60
|
-
<a href="<%= build_url(next_page) %>"
|
|
61
|
-
class="<%= page_link_classes(next_page) %> rounded-r-md"
|
|
62
|
-
aria-label="Pagina successiva">
|
|
63
|
-
<span class="sr-only">Successiva</span>
|
|
64
|
-
<%= bui_icon(name: "chevron-right", size: :medium) %>
|
|
65
|
-
</a>
|
|
66
|
-
<% else %>
|
|
67
|
-
<span class="<%= disabled_classes %> rounded-r-md" aria-label="Pagina successiva">
|
|
68
|
-
<span class="sr-only">Successiva</span>
|
|
69
|
-
<%= bui_icon(name: "chevron-right", size: :medium) %>
|
|
70
|
-
</span>
|
|
71
|
-
<% end %>
|
|
72
|
-
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<!-- Info mobile -->
|
|
76
|
-
<% if show_info %>
|
|
77
|
-
<div class="flex flex-1 justify-between sm:hidden">
|
|
78
|
-
<span class="text-sm text-gray-700">
|
|
79
|
-
Pagina <%= current_page %> di <%= total_pages %>
|
|
80
|
-
</span>
|
|
81
|
-
</div>
|
|
82
|
-
<% end %>
|
|
83
|
-
|
|
84
|
-
</nav>
|
|
85
|
-
<% end %>
|
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
# frozen_string_literal: true
|
|
2
|
-
|
|
3
|
-
module BetterUi
|
|
4
|
-
module General
|
|
5
|
-
module Pagination
|
|
6
|
-
class Component < ViewComponent::Base
|
|
7
|
-
include BetterUi::Engine.helpers
|
|
8
|
-
|
|
9
|
-
# Costanti per temi
|
|
10
|
-
PAGINATION_THEME = {
|
|
11
|
-
default: {
|
|
12
|
-
container: 'border-gray-300',
|
|
13
|
-
page: 'border-gray-300 text-gray-500 hover:bg-gray-50 hover:text-gray-700',
|
|
14
|
-
current: 'border-blue-500 bg-blue-50 text-blue-600',
|
|
15
|
-
disabled: 'border-gray-300 text-gray-300 cursor-not-allowed'
|
|
16
|
-
},
|
|
17
|
-
blue: {
|
|
18
|
-
container: 'border-blue-300',
|
|
19
|
-
page: 'border-blue-300 text-blue-600 hover:bg-blue-50 hover:text-blue-700',
|
|
20
|
-
current: 'border-blue-500 bg-blue-100 text-blue-700',
|
|
21
|
-
disabled: 'border-blue-200 text-blue-300 cursor-not-allowed'
|
|
22
|
-
},
|
|
23
|
-
red: {
|
|
24
|
-
container: 'border-red-300',
|
|
25
|
-
page: 'border-red-300 text-red-600 hover:bg-red-50 hover:text-red-700',
|
|
26
|
-
current: 'border-red-500 bg-red-100 text-red-700',
|
|
27
|
-
disabled: 'border-red-200 text-red-300 cursor-not-allowed'
|
|
28
|
-
},
|
|
29
|
-
green: {
|
|
30
|
-
container: 'border-green-300',
|
|
31
|
-
page: 'border-green-300 text-green-600 hover:bg-green-50 hover:text-green-700',
|
|
32
|
-
current: 'border-green-500 bg-green-100 text-green-700',
|
|
33
|
-
disabled: 'border-green-200 text-green-300 cursor-not-allowed'
|
|
34
|
-
},
|
|
35
|
-
yellow: {
|
|
36
|
-
container: 'border-yellow-300',
|
|
37
|
-
page: 'border-yellow-300 text-yellow-600 hover:bg-yellow-50 hover:text-yellow-700',
|
|
38
|
-
current: 'border-yellow-500 bg-yellow-100 text-yellow-700',
|
|
39
|
-
disabled: 'border-yellow-200 text-yellow-300 cursor-not-allowed'
|
|
40
|
-
},
|
|
41
|
-
violet: {
|
|
42
|
-
container: 'border-violet-300',
|
|
43
|
-
page: 'border-violet-300 text-violet-600 hover:bg-violet-50 hover:text-violet-700',
|
|
44
|
-
current: 'border-violet-500 bg-violet-100 text-violet-700',
|
|
45
|
-
disabled: 'border-violet-200 text-violet-300 cursor-not-allowed'
|
|
46
|
-
},
|
|
47
|
-
orange: {
|
|
48
|
-
container: 'border-orange-300',
|
|
49
|
-
page: 'border-orange-300 text-orange-600 hover:bg-orange-50 hover:text-orange-700',
|
|
50
|
-
current: 'border-orange-500 bg-orange-100 text-orange-700',
|
|
51
|
-
disabled: 'border-orange-200 text-orange-300 cursor-not-allowed'
|
|
52
|
-
},
|
|
53
|
-
rose: {
|
|
54
|
-
container: 'border-rose-300',
|
|
55
|
-
page: 'border-rose-300 text-rose-600 hover:bg-rose-50 hover:text-rose-700',
|
|
56
|
-
current: 'border-rose-500 bg-rose-100 text-rose-700',
|
|
57
|
-
disabled: 'border-rose-200 text-rose-300 cursor-not-allowed'
|
|
58
|
-
},
|
|
59
|
-
white: {
|
|
60
|
-
container: 'border-white',
|
|
61
|
-
page: 'border-white text-gray-700 hover:bg-white hover:text-gray-900',
|
|
62
|
-
current: 'border-white bg-white text-gray-900',
|
|
63
|
-
disabled: 'border-white text-gray-400 cursor-not-allowed'
|
|
64
|
-
}
|
|
65
|
-
}.freeze
|
|
66
|
-
|
|
67
|
-
# Costanti per dimensioni
|
|
68
|
-
PAGINATION_SIZE = {
|
|
69
|
-
small: 'px-2 py-1 text-sm',
|
|
70
|
-
medium: 'px-3 py-2 text-base',
|
|
71
|
-
large: 'px-4 py-3 text-lg'
|
|
72
|
-
}.freeze
|
|
73
|
-
|
|
74
|
-
def initialize(current_page:, total_pages:, path:, theme: :default, size: :medium,
|
|
75
|
-
window: 2, show_info: false, per_page: nil, classes: '', **options)
|
|
76
|
-
@current_page = current_page.to_i
|
|
77
|
-
@total_pages = total_pages.to_i
|
|
78
|
-
@path = path
|
|
79
|
-
@theme = theme
|
|
80
|
-
@size = size
|
|
81
|
-
@window = window.to_i
|
|
82
|
-
@show_info = show_info
|
|
83
|
-
@per_page = per_page
|
|
84
|
-
@classes = classes
|
|
85
|
-
@options = options
|
|
86
|
-
|
|
87
|
-
validate_params
|
|
88
|
-
end
|
|
89
|
-
|
|
90
|
-
private
|
|
91
|
-
|
|
92
|
-
attr_reader :current_page, :total_pages, :path, :theme, :size, :window,
|
|
93
|
-
:show_info, :per_page, :classes, :options
|
|
94
|
-
|
|
95
|
-
def validate_params
|
|
96
|
-
validate_theme
|
|
97
|
-
validate_size
|
|
98
|
-
validate_pages
|
|
99
|
-
end
|
|
100
|
-
|
|
101
|
-
def validate_theme
|
|
102
|
-
return if PAGINATION_THEME.key?(theme)
|
|
103
|
-
|
|
104
|
-
raise ArgumentError,
|
|
105
|
-
"Invalid theme: #{theme}. Valid themes are: #{PAGINATION_THEME.keys.join(', ')}"
|
|
106
|
-
end
|
|
107
|
-
|
|
108
|
-
def validate_size
|
|
109
|
-
return if PAGINATION_SIZE.key?(size)
|
|
110
|
-
|
|
111
|
-
raise ArgumentError,
|
|
112
|
-
"Invalid size: #{size}. Valid sizes are: #{PAGINATION_SIZE.keys.join(', ')}"
|
|
113
|
-
end
|
|
114
|
-
|
|
115
|
-
def validate_pages
|
|
116
|
-
if current_page < 1 || current_page > total_pages
|
|
117
|
-
raise ArgumentError, "current_page must be between 1 and #{total_pages}"
|
|
118
|
-
end
|
|
119
|
-
|
|
120
|
-
if total_pages < 1
|
|
121
|
-
raise ArgumentError, "total_pages must be at least 1"
|
|
122
|
-
end
|
|
123
|
-
end
|
|
124
|
-
|
|
125
|
-
def theme_classes
|
|
126
|
-
PAGINATION_THEME[theme]
|
|
127
|
-
end
|
|
128
|
-
|
|
129
|
-
def size_classes
|
|
130
|
-
PAGINATION_SIZE[size]
|
|
131
|
-
end
|
|
132
|
-
|
|
133
|
-
def container_classes
|
|
134
|
-
"inline-flex -space-x-px rounded-md shadow-sm #{theme_classes[:container]} #{classes}".strip
|
|
135
|
-
end
|
|
136
|
-
|
|
137
|
-
def page_link_classes(page_num)
|
|
138
|
-
base_classes = "relative inline-flex items-center border #{size_classes} font-medium"
|
|
139
|
-
|
|
140
|
-
if page_num == current_page
|
|
141
|
-
"#{base_classes} #{theme_classes[:current]}"
|
|
142
|
-
else
|
|
143
|
-
"#{base_classes} #{theme_classes[:page]} focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
144
|
-
end
|
|
145
|
-
end
|
|
146
|
-
|
|
147
|
-
def disabled_classes
|
|
148
|
-
"relative inline-flex items-center border #{size_classes} font-medium #{theme_classes[:disabled]}"
|
|
149
|
-
end
|
|
150
|
-
|
|
151
|
-
def page_range
|
|
152
|
-
return [1] if total_pages == 1
|
|
153
|
-
|
|
154
|
-
start_page = [current_page - window, 1].max
|
|
155
|
-
end_page = [current_page + window, total_pages].min
|
|
156
|
-
|
|
157
|
-
# Espandi il range se possibile
|
|
158
|
-
if end_page - start_page < (window * 2)
|
|
159
|
-
if start_page == 1
|
|
160
|
-
end_page = [start_page + (window * 2), total_pages].min
|
|
161
|
-
elsif end_page == total_pages
|
|
162
|
-
start_page = [end_page - (window * 2), 1].max
|
|
163
|
-
end
|
|
164
|
-
end
|
|
165
|
-
|
|
166
|
-
(start_page..end_page).to_a
|
|
167
|
-
end
|
|
168
|
-
|
|
169
|
-
def show_left_ellipsis?
|
|
170
|
-
page_range.first > 2
|
|
171
|
-
end
|
|
172
|
-
|
|
173
|
-
def show_right_ellipsis?
|
|
174
|
-
page_range.last < total_pages - 1
|
|
175
|
-
end
|
|
176
|
-
|
|
177
|
-
def build_url(page_num)
|
|
178
|
-
return '#' if page_num == current_page
|
|
179
|
-
|
|
180
|
-
uri = URI.parse(path)
|
|
181
|
-
params = URI.decode_www_form(uri.query || '')
|
|
182
|
-
params = params.reject { |k, _v| k == 'page' }
|
|
183
|
-
params << ['page', page_num] if page_num > 1
|
|
184
|
-
|
|
185
|
-
uri.query = params.empty? ? nil : URI.encode_www_form(params)
|
|
186
|
-
uri.to_s
|
|
187
|
-
end
|
|
188
|
-
|
|
189
|
-
def previous_page
|
|
190
|
-
current_page > 1 ? current_page - 1 : nil
|
|
191
|
-
end
|
|
192
|
-
|
|
193
|
-
def next_page
|
|
194
|
-
current_page < total_pages ? current_page + 1 : nil
|
|
195
|
-
end
|
|
196
|
-
|
|
197
|
-
def info_text
|
|
198
|
-
return '' unless show_info && per_page
|
|
199
|
-
|
|
200
|
-
start_item = ((current_page - 1) * per_page) + 1
|
|
201
|
-
end_item = [current_page * per_page, total_items].min
|
|
202
|
-
|
|
203
|
-
"Mostrando #{start_item}-#{end_item} di #{total_items} risultati"
|
|
204
|
-
end
|
|
205
|
-
|
|
206
|
-
def total_items
|
|
207
|
-
total_pages * per_page
|
|
208
|
-
end
|
|
209
|
-
|
|
210
|
-
def should_show_pagination?
|
|
211
|
-
total_pages > 1
|
|
212
|
-
end
|
|
213
|
-
end
|
|
214
|
-
end
|
|
215
|
-
end
|
|
216
|
-
end
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
<%# Template per il panel %>
|
|
2
|
-
<div <%= tag.attributes(panel_attributes) %>>
|
|
3
|
-
<% if show_header? %>
|
|
4
|
-
<div class="<%= header_classes %>">
|
|
5
|
-
<% if @header.present? %>
|
|
6
|
-
<%= raw @header %>
|
|
7
|
-
<% elsif @title.present? %>
|
|
8
|
-
<div class="<%= title_classes %>"><%= @title %></div>
|
|
9
|
-
<% end %>
|
|
10
|
-
</div>
|
|
11
|
-
<% end %>
|
|
12
|
-
|
|
13
|
-
<% if show_body? %>
|
|
14
|
-
<div class="<%= body_classes %>">
|
|
15
|
-
<% if @body.present? %>
|
|
16
|
-
<%= raw @body %>
|
|
17
|
-
<% elsif content.present? %>
|
|
18
|
-
<%= content %>
|
|
19
|
-
<% end %>
|
|
20
|
-
</div>
|
|
21
|
-
<% end %>
|
|
22
|
-
|
|
23
|
-
<% if show_footer? %>
|
|
24
|
-
<div class="<%= footer_classes %>">
|
|
25
|
-
<%= raw @footer %>
|
|
26
|
-
</div>
|
|
27
|
-
<% end %>
|
|
28
|
-
</div>
|