shadcn_phlexcomponents 0.1.18 → 0.1.19
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 +321 -23
- data/app/javascript/controllers/accordion_controller.js +101 -90
- data/app/javascript/controllers/alert_dialog_controller.js +5 -4
- data/app/javascript/controllers/avatar_controller.js +12 -11
- data/app/javascript/controllers/checkbox_controller.js +26 -26
- data/app/javascript/controllers/collapsible_controller.js +35 -36
- data/app/javascript/controllers/combobox_controller.js +262 -231
- data/app/javascript/controllers/command_controller.js +205 -184
- data/app/javascript/controllers/date_picker_controller.js +252 -253
- data/app/javascript/controllers/date_range_picker_controller.js +189 -200
- data/app/javascript/controllers/dialog_controller.js +79 -78
- data/app/javascript/controllers/dropdown_menu_controller.js +229 -208
- data/app/javascript/controllers/dropdown_menu_sub_controller.js +111 -97
- data/app/javascript/controllers/form_field_controller.js +17 -16
- data/app/javascript/controllers/hover_card_controller.js +69 -71
- data/app/javascript/controllers/loading_button_controller.js +11 -10
- data/app/javascript/controllers/popover_controller.js +85 -78
- data/app/javascript/controllers/progress_controller.js +12 -11
- data/app/javascript/controllers/radio_group_controller.js +75 -74
- data/app/javascript/controllers/select_controller.js +247 -232
- data/app/javascript/controllers/sidebar_controller.js +26 -27
- data/app/javascript/controllers/sidebar_trigger_controller.js +12 -9
- data/app/javascript/controllers/slider_controller.js +74 -74
- data/app/javascript/controllers/switch_controller.js +23 -23
- data/app/javascript/controllers/tabs_controller.js +61 -61
- data/app/javascript/controllers/theme_switcher_controller.js +28 -27
- data/app/javascript/controllers/toast_container_controller.js +45 -31
- data/app/javascript/controllers/toast_controller.js +19 -18
- data/app/javascript/controllers/toggle_controller.js +17 -17
- data/app/javascript/controllers/toggle_group_controller.js +17 -17
- data/app/javascript/controllers/tooltip_controller.js +75 -77
- data/app/javascript/shadcn_phlexcomponents.js +27 -60
- data/app/javascript/utils/command.js +390 -334
- data/app/javascript/utils/floating_ui.js +139 -107
- data/app/javascript/utils/index.js +253 -190
- data/app/typescript/controllers/accordion_controller.ts +2 -0
- data/app/typescript/controllers/alert_dialog_controller.ts +2 -0
- data/app/typescript/controllers/avatar_controller.ts +2 -0
- data/app/typescript/controllers/checkbox_controller.ts +2 -0
- data/app/typescript/controllers/collapsible_controller.ts +2 -0
- data/app/typescript/controllers/combobox_controller.ts +2 -0
- data/app/typescript/controllers/command_controller.ts +2 -0
- data/app/typescript/controllers/date_picker_controller.ts +2 -0
- data/app/typescript/controllers/date_range_picker_controller.ts +2 -0
- data/app/typescript/controllers/dialog_controller.ts +2 -0
- data/app/typescript/controllers/dropdown_menu_controller.ts +2 -0
- data/app/typescript/controllers/dropdown_menu_sub_controller.ts +2 -0
- data/app/typescript/controllers/form_field_controller.ts +2 -0
- data/app/typescript/controllers/hover_card_controller.ts +2 -0
- data/app/typescript/controllers/loading_button_controller.ts +2 -0
- data/app/typescript/controllers/popover_controller.ts +2 -0
- data/app/typescript/controllers/progress_controller.ts +2 -0
- data/app/typescript/controllers/radio_group_controller.ts +2 -0
- data/app/typescript/controllers/select_controller.ts +2 -0
- data/app/typescript/controllers/slider_controller.ts +2 -0
- data/app/typescript/controllers/switch_controller.ts +2 -0
- data/app/typescript/controllers/tabs_controller.ts +2 -0
- data/app/typescript/controllers/theme_switcher_controller.ts +2 -0
- data/app/typescript/controllers/toast_container_controller.ts +2 -0
- data/app/typescript/controllers/toast_controller.ts +2 -0
- data/app/typescript/controllers/toggle_controller.ts +2 -0
- data/app/typescript/controllers/toggle_group_controller.ts +2 -0
- data/app/typescript/controllers/tooltip_controller.ts +2 -0
- data/app/typescript/shadcn_phlexcomponents.ts +27 -61
- data/app/typescript/utils/index.ts +7 -0
- data/lib/install/upgrade_shadcn_phlexcomponents.rb +28 -0
- data/lib/shadcn_phlexcomponents/components/accordion.rb +55 -12
- data/lib/shadcn_phlexcomponents/components/alert.rb +35 -16
- data/lib/shadcn_phlexcomponents/components/alert_dialog.rb +52 -12
- data/lib/shadcn_phlexcomponents/components/aspect_ratio.rb +33 -2
- data/lib/shadcn_phlexcomponents/components/avatar.rb +24 -7
- data/lib/shadcn_phlexcomponents/components/badge.rb +23 -18
- data/lib/shadcn_phlexcomponents/components/breadcrumb.rb +46 -6
- data/lib/shadcn_phlexcomponents/components/button.rb +32 -27
- data/lib/shadcn_phlexcomponents/components/card.rb +59 -10
- data/lib/shadcn_phlexcomponents/components/checkbox.rb +51 -30
- data/lib/shadcn_phlexcomponents/components/checkbox_group.rb +24 -4
- data/lib/shadcn_phlexcomponents/components/combobox.rb +212 -69
- data/lib/shadcn_phlexcomponents/components/command.rb +156 -52
- data/lib/shadcn_phlexcomponents/components/date_picker.rb +134 -48
- data/lib/shadcn_phlexcomponents/components/date_range_picker.rb +20 -42
- data/lib/shadcn_phlexcomponents/components/dialog.rb +80 -26
- data/lib/shadcn_phlexcomponents/components/dropdown_menu.rb +74 -25
- data/lib/shadcn_phlexcomponents/components/dropdown_menu_sub.rb +52 -24
- data/lib/shadcn_phlexcomponents/components/form/form_checkbox.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_checkbox_group.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_combobox.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_date_picker.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_date_range_picker.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_error.rb +8 -1
- data/lib/shadcn_phlexcomponents/components/form/form_helpers.rb +3 -2
- data/lib/shadcn_phlexcomponents/components/form/form_hint.rb +8 -1
- data/lib/shadcn_phlexcomponents/components/form/form_input.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_radio_group.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_select.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_slider.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_switch.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form/form_textarea.rb +1 -1
- data/lib/shadcn_phlexcomponents/components/form.rb +22 -6
- data/lib/shadcn_phlexcomponents/components/hover_card.rb +48 -18
- data/lib/shadcn_phlexcomponents/components/input.rb +13 -8
- data/lib/shadcn_phlexcomponents/components/label.rb +9 -4
- data/lib/shadcn_phlexcomponents/components/link.rb +8 -1
- data/lib/shadcn_phlexcomponents/components/pagination.rb +34 -6
- data/lib/shadcn_phlexcomponents/components/popover.rb +43 -13
- data/lib/shadcn_phlexcomponents/components/progress.rb +37 -6
- data/lib/shadcn_phlexcomponents/components/radio_group.rb +41 -15
- data/lib/shadcn_phlexcomponents/components/select.rb +99 -42
- data/lib/shadcn_phlexcomponents/components/separator.rb +9 -4
- data/lib/shadcn_phlexcomponents/components/sheet.rb +87 -21
- data/lib/shadcn_phlexcomponents/components/skeleton.rb +8 -1
- data/lib/shadcn_phlexcomponents/components/switch.rb +45 -17
- data/lib/shadcn_phlexcomponents/components/table.rb +84 -17
- data/lib/shadcn_phlexcomponents/components/tabs.rb +36 -12
- data/lib/shadcn_phlexcomponents/components/textarea.rb +12 -7
- data/lib/shadcn_phlexcomponents/components/toast.rb +46 -20
- data/lib/shadcn_phlexcomponents/components/toast_container.rb +19 -14
- data/lib/shadcn_phlexcomponents/components/toggle.rb +28 -23
- data/lib/shadcn_phlexcomponents/components/tooltip.rb +49 -14
- data/lib/shadcn_phlexcomponents/configuration.rb +46 -0
- data/lib/shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb +28 -0
- data/lib/shadcn_phlexcomponents/version.rb +1 -1
- data/lib/shadcn_phlexcomponents.rb +12 -1
- data/lib/tasks/upgrade.rake +10 -0
- metadata +15 -14
- data/app/typescript/controllers/sidebar_controller.ts +0 -39
- data/app/typescript/controllers/sidebar_trigger_controller.ts +0 -21
@@ -2,19 +2,20 @@
|
|
2
2
|
|
3
3
|
module ShadcnPhlexcomponents
|
4
4
|
class Table < Base
|
5
|
-
class_variants(
|
5
|
+
class_variants(
|
6
|
+
**(
|
7
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:root) ||
|
8
|
+
{
|
9
|
+
base: "w-full caption-bottom text-sm",
|
10
|
+
}
|
11
|
+
),
|
12
|
+
)
|
6
13
|
|
7
14
|
def initialize(**attributes)
|
8
15
|
@columns = []
|
9
16
|
super(**attributes)
|
10
17
|
end
|
11
18
|
|
12
|
-
def view_template(&)
|
13
|
-
div(class: "relative w-full overflow-x-auto") do
|
14
|
-
table(**@attributes, &)
|
15
|
-
end
|
16
|
-
end
|
17
|
-
|
18
19
|
def caption(**attributes, &)
|
19
20
|
TableCaption(**attributes, &)
|
20
21
|
end
|
@@ -73,10 +74,23 @@ module ShadcnPhlexcomponents
|
|
73
74
|
@columns << { header:, head_class:, cell_class:, content: }
|
74
75
|
nil
|
75
76
|
end
|
77
|
+
|
78
|
+
def view_template(&)
|
79
|
+
TableContainer do
|
80
|
+
table(**@attributes, &)
|
81
|
+
end
|
82
|
+
end
|
76
83
|
end
|
77
84
|
|
78
85
|
class TableCaption < Base
|
79
|
-
class_variants(
|
86
|
+
class_variants(
|
87
|
+
**(
|
88
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:caption) ||
|
89
|
+
{
|
90
|
+
base: "text-muted-foreground mt-4 text-sm",
|
91
|
+
}
|
92
|
+
),
|
93
|
+
)
|
80
94
|
|
81
95
|
def view_template(&)
|
82
96
|
caption(**@attributes, &)
|
@@ -84,7 +98,14 @@ module ShadcnPhlexcomponents
|
|
84
98
|
end
|
85
99
|
|
86
100
|
class TableHeader < Base
|
87
|
-
class_variants(
|
101
|
+
class_variants(
|
102
|
+
**(
|
103
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:header) ||
|
104
|
+
{
|
105
|
+
base: "[&_tr]:border-b",
|
106
|
+
}
|
107
|
+
),
|
108
|
+
)
|
88
109
|
|
89
110
|
def view_template(&)
|
90
111
|
thead(**@attributes, &)
|
@@ -92,7 +113,14 @@ module ShadcnPhlexcomponents
|
|
92
113
|
end
|
93
114
|
|
94
115
|
class TableRow < Base
|
95
|
-
class_variants(
|
116
|
+
class_variants(
|
117
|
+
**(
|
118
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:row) ||
|
119
|
+
{
|
120
|
+
base: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
121
|
+
}
|
122
|
+
),
|
123
|
+
)
|
96
124
|
|
97
125
|
def view_template(&)
|
98
126
|
tr(**@attributes, &)
|
@@ -101,10 +129,15 @@ module ShadcnPhlexcomponents
|
|
101
129
|
|
102
130
|
class TableHead < Base
|
103
131
|
class_variants(
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
132
|
+
**(
|
133
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:head) ||
|
134
|
+
{
|
135
|
+
base: <<~HEREDOC,
|
136
|
+
text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0
|
137
|
+
[&>[role=checkbox]]:translate-y-[2px]"
|
138
|
+
HEREDOC
|
139
|
+
}
|
140
|
+
),
|
108
141
|
)
|
109
142
|
|
110
143
|
def view_template(&)
|
@@ -113,7 +146,14 @@ module ShadcnPhlexcomponents
|
|
113
146
|
end
|
114
147
|
|
115
148
|
class TableBody < Base
|
116
|
-
class_variants(
|
149
|
+
class_variants(
|
150
|
+
**(
|
151
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:body) ||
|
152
|
+
{
|
153
|
+
base: "[&_tr:last-child]:border-0",
|
154
|
+
}
|
155
|
+
),
|
156
|
+
)
|
117
157
|
|
118
158
|
def view_template(&)
|
119
159
|
tbody(**@attributes, &)
|
@@ -122,7 +162,12 @@ module ShadcnPhlexcomponents
|
|
122
162
|
|
123
163
|
class TableCell < Base
|
124
164
|
class_variants(
|
125
|
-
|
165
|
+
**(
|
166
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:cell) ||
|
167
|
+
{
|
168
|
+
base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
169
|
+
}
|
170
|
+
),
|
126
171
|
)
|
127
172
|
|
128
173
|
def view_template(&)
|
@@ -131,10 +176,32 @@ module ShadcnPhlexcomponents
|
|
131
176
|
end
|
132
177
|
|
133
178
|
class TableFooter < Base
|
134
|
-
class_variants(
|
179
|
+
class_variants(
|
180
|
+
**(
|
181
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:footer) ||
|
182
|
+
{
|
183
|
+
base: "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
184
|
+
}
|
185
|
+
),
|
186
|
+
)
|
135
187
|
|
136
188
|
def view_template(&)
|
137
189
|
tfoot(**@attributes, &)
|
138
190
|
end
|
139
191
|
end
|
192
|
+
|
193
|
+
class TableContainer < Base
|
194
|
+
class_variants(
|
195
|
+
**(
|
196
|
+
ShadcnPhlexcomponents.configuration.table&.dig(:container) ||
|
197
|
+
{
|
198
|
+
base: "relative w-full overflow-x-auto",
|
199
|
+
}
|
200
|
+
),
|
201
|
+
)
|
202
|
+
|
203
|
+
def view_template(&)
|
204
|
+
div(**@attributes, &)
|
205
|
+
end
|
206
|
+
end
|
140
207
|
end
|
@@ -2,7 +2,14 @@
|
|
2
2
|
|
3
3
|
module ShadcnPhlexcomponents
|
4
4
|
class Tabs < Base
|
5
|
-
class_variants(
|
5
|
+
class_variants(
|
6
|
+
**(
|
7
|
+
ShadcnPhlexcomponents.configuration.tabs&.dig(:root) ||
|
8
|
+
{
|
9
|
+
base: "flex flex-col gap-2",
|
10
|
+
}
|
11
|
+
),
|
12
|
+
)
|
6
13
|
|
7
14
|
def initialize(value: nil, dir: "ltr", **attributes)
|
8
15
|
@dir = dir
|
@@ -40,7 +47,12 @@ module ShadcnPhlexcomponents
|
|
40
47
|
|
41
48
|
class TabsList < Base
|
42
49
|
class_variants(
|
43
|
-
|
50
|
+
**(
|
51
|
+
ShadcnPhlexcomponents.configuration.tabs&.dig(:list) ||
|
52
|
+
{
|
53
|
+
base: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
54
|
+
}
|
55
|
+
),
|
44
56
|
)
|
45
57
|
|
46
58
|
def view_template(&)
|
@@ -60,15 +72,20 @@ module ShadcnPhlexcomponents
|
|
60
72
|
|
61
73
|
class TabsTrigger < Base
|
62
74
|
class_variants(
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
75
|
+
**(
|
76
|
+
ShadcnPhlexcomponents.configuration.tabs&.dig(:trigger) ||
|
77
|
+
{
|
78
|
+
base: <<~HEREDOC,
|
79
|
+
data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring
|
80
|
+
focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input
|
81
|
+
dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)]
|
82
|
+
flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm
|
83
|
+
font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1
|
84
|
+
disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none
|
85
|
+
[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
|
86
|
+
HEREDOC
|
87
|
+
}
|
88
|
+
),
|
72
89
|
)
|
73
90
|
|
74
91
|
def initialize(value: nil, aria_id: nil, **attributes)
|
@@ -105,7 +122,14 @@ module ShadcnPhlexcomponents
|
|
105
122
|
end
|
106
123
|
|
107
124
|
class TabsContent < Base
|
108
|
-
class_variants(
|
125
|
+
class_variants(
|
126
|
+
**(
|
127
|
+
ShadcnPhlexcomponents.configuration.tabs&.dig(:content) ||
|
128
|
+
{
|
129
|
+
base: "flex-1 outline-none",
|
130
|
+
}
|
131
|
+
),
|
132
|
+
)
|
109
133
|
|
110
134
|
def initialize(value: nil, aria_id: nil, **attributes)
|
111
135
|
@value = value
|
@@ -3,13 +3,18 @@
|
|
3
3
|
module ShadcnPhlexcomponents
|
4
4
|
class Textarea < Base
|
5
5
|
class_variants(
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
6
|
+
**(
|
7
|
+
ShadcnPhlexcomponents.configuration.textarea ||
|
8
|
+
{
|
9
|
+
base: <<~HEREDOC,
|
10
|
+
border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50
|
11
|
+
aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
|
12
|
+
dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2
|
13
|
+
text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
|
14
|
+
disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
|
15
|
+
HEREDOC
|
16
|
+
}
|
17
|
+
),
|
13
18
|
)
|
14
19
|
|
15
20
|
def initialize(value: nil, **attributes)
|
@@ -3,23 +3,28 @@
|
|
3
3
|
module ShadcnPhlexcomponents
|
4
4
|
class Toast < Base
|
5
5
|
class_variants(
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
6
|
+
**(
|
7
|
+
ShadcnPhlexcomponents.configuration.toast&.dig(:root) ||
|
8
|
+
{
|
9
|
+
base: <<~HEREDOC,
|
10
|
+
p-4 border shadow-lg text-[0.8rem] flex gap-1.5 items-center w-full sm:w-90 rounded-lg duration-200
|
11
|
+
data-[state=open]:animate-in data-[state=closed]:animate-out [&_svg]:size-4 [&_svg]:mr-1 [&_svg]:self-start [&_svg]:translate-y-0.5
|
12
|
+
HEREDOC
|
13
|
+
variants: {
|
14
|
+
variant: {
|
15
|
+
default: "bg-popover text-popover-foreground",
|
16
|
+
destructive: "bg-card text-destructive [&>svg]:text-current *:data-[shadcn-phlexcomponents=toast-description]:text-destructive/90",
|
17
|
+
},
|
18
|
+
side: {
|
19
|
+
top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
20
|
+
bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
21
|
+
},
|
22
|
+
},
|
23
|
+
defaults: {
|
24
|
+
variant: :default,
|
25
|
+
},
|
26
|
+
}
|
27
|
+
),
|
23
28
|
)
|
24
29
|
|
25
30
|
def initialize(variant: :default, side: :top, duration: 5000, **attributes)
|
@@ -76,7 +81,14 @@ module ShadcnPhlexcomponents
|
|
76
81
|
end
|
77
82
|
|
78
83
|
class ToastContent < Base
|
79
|
-
class_variants(
|
84
|
+
class_variants(
|
85
|
+
**(
|
86
|
+
ShadcnPhlexcomponents.configuration.toast&.dig(:content) ||
|
87
|
+
{
|
88
|
+
base: "flex flex-col gap-0.5",
|
89
|
+
}
|
90
|
+
),
|
91
|
+
)
|
80
92
|
|
81
93
|
def view_template(&)
|
82
94
|
div(**@attributes, &)
|
@@ -84,7 +96,14 @@ module ShadcnPhlexcomponents
|
|
84
96
|
end
|
85
97
|
|
86
98
|
class ToastTitle < Base
|
87
|
-
class_variants(
|
99
|
+
class_variants(
|
100
|
+
**(
|
101
|
+
ShadcnPhlexcomponents.configuration.toast&.dig(:title) ||
|
102
|
+
{
|
103
|
+
base: "font-medium leading-[1.5]",
|
104
|
+
}
|
105
|
+
),
|
106
|
+
)
|
88
107
|
|
89
108
|
def view_template(&)
|
90
109
|
div(**@attributes, &)
|
@@ -92,7 +111,14 @@ module ShadcnPhlexcomponents
|
|
92
111
|
end
|
93
112
|
|
94
113
|
class ToastDescription < Base
|
95
|
-
class_variants(
|
114
|
+
class_variants(
|
115
|
+
**(
|
116
|
+
ShadcnPhlexcomponents.configuration.toast&.dig(:description) ||
|
117
|
+
{
|
118
|
+
base: "leading-[1.4] opacity-90",
|
119
|
+
}
|
120
|
+
),
|
121
|
+
)
|
96
122
|
|
97
123
|
def view_template(&)
|
98
124
|
div(**@attributes, &)
|
@@ -3,20 +3,25 @@
|
|
3
3
|
module ShadcnPhlexcomponents
|
4
4
|
class ToastContainer < Base
|
5
5
|
class_variants(
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
6
|
+
**(
|
7
|
+
ShadcnPhlexcomponents.configuration.toast_container ||
|
8
|
+
{
|
9
|
+
base: "fixed z-50 hidden has-[li]:flex flex-col gap-2",
|
10
|
+
variants: {
|
11
|
+
side: {
|
12
|
+
top_center: "top-6 left-1/2 -translate-x-1/2",
|
13
|
+
top_left: "top-6 left-6",
|
14
|
+
top_right: "top-6 right-6",
|
15
|
+
bottom_center: "bottom-6 left-1/2 -translate-x-1/2",
|
16
|
+
bottom_left: "bottom-6 left-6",
|
17
|
+
bottom_right: "right-6 bottom-6",
|
18
|
+
},
|
19
|
+
},
|
20
|
+
defaults: {
|
21
|
+
side: :top_center,
|
22
|
+
},
|
23
|
+
}
|
24
|
+
),
|
20
25
|
)
|
21
26
|
|
22
27
|
def initialize(side: :top_center, **attributes)
|
@@ -3,29 +3,34 @@
|
|
3
3
|
module ShadcnPhlexcomponents
|
4
4
|
class Toggle < Base
|
5
5
|
class_variants(
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
6
|
+
**(
|
7
|
+
ShadcnPhlexcomponents.configuration.toggle ||
|
8
|
+
{
|
9
|
+
base: <<~HEREDOC,
|
10
|
+
inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted
|
11
|
+
hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent
|
12
|
+
data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
|
13
|
+
[&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none
|
14
|
+
transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
|
15
|
+
aria-invalid:border-destructive whitespace-nowrap
|
16
|
+
HEREDOC
|
17
|
+
variants: {
|
18
|
+
variant: {
|
19
|
+
default: "bg-transparent",
|
20
|
+
outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-muted-foreground",
|
21
|
+
},
|
22
|
+
size: {
|
23
|
+
default: "h-9 px-2 min-w-9",
|
24
|
+
sm: "h-8 px-1.5 min-w-8",
|
25
|
+
lg: "h-10 px-2.5 min-w-10",
|
26
|
+
},
|
27
|
+
},
|
28
|
+
defaults: {
|
29
|
+
variant: :default,
|
30
|
+
size: :default,
|
31
|
+
},
|
32
|
+
}
|
33
|
+
),
|
29
34
|
)
|
30
35
|
|
31
36
|
def initialize(variant: :default, size: :default, on: false, **attributes)
|
@@ -2,7 +2,14 @@
|
|
2
2
|
|
3
3
|
module ShadcnPhlexcomponents
|
4
4
|
class Tooltip < Base
|
5
|
-
class_variants(
|
5
|
+
class_variants(
|
6
|
+
**(
|
7
|
+
ShadcnPhlexcomponents.configuration.tooltip&.dig(:root) ||
|
8
|
+
{
|
9
|
+
base: "inline-flex max-w-fit",
|
10
|
+
}
|
11
|
+
),
|
12
|
+
)
|
6
13
|
|
7
14
|
def initialize(open: false, **attributes)
|
8
15
|
@open = open
|
@@ -76,12 +83,17 @@ module ShadcnPhlexcomponents
|
|
76
83
|
|
77
84
|
class TooltipContent < Base
|
78
85
|
class_variants(
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
86
|
+
**(
|
87
|
+
ShadcnPhlexcomponents.configuration.tooltip&.dig(:content) ||
|
88
|
+
{
|
89
|
+
base: <<~HEREDOC,
|
90
|
+
bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out
|
91
|
+
data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2
|
92
|
+
data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2
|
93
|
+
z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance
|
94
|
+
HEREDOC
|
95
|
+
}
|
96
|
+
),
|
85
97
|
)
|
86
98
|
|
87
99
|
def initialize(side: :top, align: :center, aria_id: nil, **attributes)
|
@@ -100,13 +112,7 @@ module ShadcnPhlexcomponents
|
|
100
112
|
div(**@attributes) do
|
101
113
|
yield
|
102
114
|
|
103
|
-
|
104
|
-
raw(safe(
|
105
|
-
'<svg class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none">
|
106
|
-
<polygon points="0,0 30,0 15,10"></polygon>
|
107
|
-
</svg>',
|
108
|
-
))
|
109
|
-
end
|
115
|
+
TooltipArrow()
|
110
116
|
|
111
117
|
span(
|
112
118
|
id: "#{@aria_id}-content",
|
@@ -129,4 +135,33 @@ module ShadcnPhlexcomponents
|
|
129
135
|
}
|
130
136
|
end
|
131
137
|
end
|
138
|
+
|
139
|
+
class TooltipArrow < Base
|
140
|
+
class_variants(
|
141
|
+
**(
|
142
|
+
ShadcnPhlexcomponents.configuration.tooltip&.dig(:arrow) ||
|
143
|
+
{
|
144
|
+
base: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
|
145
|
+
}
|
146
|
+
),
|
147
|
+
)
|
148
|
+
|
149
|
+
def default_attributes
|
150
|
+
{
|
151
|
+
width: 10,
|
152
|
+
height: 5,
|
153
|
+
viewBox: "0 0 30 10",
|
154
|
+
preserveAspectRatio: "none",
|
155
|
+
}
|
156
|
+
end
|
157
|
+
|
158
|
+
def view_template
|
159
|
+
span(data: { tooltip_target: "arrow" }) do
|
160
|
+
svg(**@attributes) do
|
161
|
+
# Weird bug with phlex where it's throwing a undefined method "polygon"
|
162
|
+
raw(safe('<polygon points="0,0 30,0 15,10"></polygon>'))
|
163
|
+
end
|
164
|
+
end
|
165
|
+
end
|
166
|
+
end
|
132
167
|
end
|
@@ -0,0 +1,46 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module ShadcnPhlexcomponents
|
4
|
+
class Configuration
|
5
|
+
attr_accessor :accordion,
|
6
|
+
:alert_dialog,
|
7
|
+
:alert,
|
8
|
+
:aspect_ratio,
|
9
|
+
:avatar,
|
10
|
+
:badge,
|
11
|
+
:breadcrumb,
|
12
|
+
:button,
|
13
|
+
:card,
|
14
|
+
:checkbox_group,
|
15
|
+
:checkbox,
|
16
|
+
:combobox,
|
17
|
+
:command,
|
18
|
+
:date_picker,
|
19
|
+
:date_range_picker,
|
20
|
+
:dialog,
|
21
|
+
:dropdown_menu_sub,
|
22
|
+
:dropdown_menu,
|
23
|
+
:form,
|
24
|
+
:hover_card,
|
25
|
+
:input,
|
26
|
+
:label,
|
27
|
+
:link,
|
28
|
+
:pagination,
|
29
|
+
:popover,
|
30
|
+
:progress,
|
31
|
+
:radio_group,
|
32
|
+
:select,
|
33
|
+
:separator,
|
34
|
+
:sheet,
|
35
|
+
:skeleton,
|
36
|
+
:switch,
|
37
|
+
:table,
|
38
|
+
:tabs,
|
39
|
+
:textarea,
|
40
|
+
:theme_switcher,
|
41
|
+
:toast_container,
|
42
|
+
:toast,
|
43
|
+
:toggle,
|
44
|
+
:tooltip
|
45
|
+
end
|
46
|
+
end
|
@@ -4,6 +4,34 @@ module ShadcnPhlexcomponents
|
|
4
4
|
extend Phlex::Kit
|
5
5
|
end
|
6
6
|
|
7
|
+
# Configure your components here.
|
8
|
+
# ShadcnPhlexcomponents.configure do |config|
|
9
|
+
# config.alert = {
|
10
|
+
# root: {
|
11
|
+
# base: <<~HEREDOC,
|
12
|
+
# relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]
|
13
|
+
# grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5
|
14
|
+
# [&>svg]:text-current
|
15
|
+
# HEREDOC
|
16
|
+
# variants: {
|
17
|
+
# variant: {
|
18
|
+
# default: "bg-card text-card-foreground",
|
19
|
+
# destructive: "text-destructive bg-card [&>svg]:text-current *:data-[shadcn-phlexcomponents=alert-description]:text-destructive/90",
|
20
|
+
# },
|
21
|
+
# },
|
22
|
+
# defaults: {
|
23
|
+
# variant: :default,
|
24
|
+
# },
|
25
|
+
# },
|
26
|
+
# title: {
|
27
|
+
# base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
28
|
+
# },
|
29
|
+
# description: {
|
30
|
+
# base: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
31
|
+
# },
|
32
|
+
# }
|
33
|
+
# end
|
34
|
+
|
7
35
|
# Require base.rb first
|
8
36
|
require Rails.root.join("vendor/shadcn_phlexcomponents/components/base.rb")
|
9
37
|
|
@@ -2,8 +2,19 @@
|
|
2
2
|
|
3
3
|
require_relative "shadcn_phlexcomponents/version"
|
4
4
|
require_relative "shadcn_phlexcomponents/engine"
|
5
|
+
require_relative "shadcn_phlexcomponents/configuration"
|
5
6
|
|
6
7
|
module ShadcnPhlexcomponents
|
7
8
|
class Error < StandardError; end
|
8
|
-
|
9
|
+
|
10
|
+
class << self
|
11
|
+
def configure
|
12
|
+
self.configuration ||= Configuration.new
|
13
|
+
yield(configuration)
|
14
|
+
end
|
15
|
+
|
16
|
+
def configuration
|
17
|
+
@configuration ||= Configuration.new
|
18
|
+
end
|
19
|
+
end
|
9
20
|
end
|
@@ -0,0 +1,10 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
namespace :shadcn_phlexcomponents do
|
4
|
+
desc "Upgrade shadcn_phlexcomponents"
|
5
|
+
task :upgrade do
|
6
|
+
system "ENVIRONMENT=#{ENV["ENVIRONMENT"]} #{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path(
|
7
|
+
"../install/upgrade_shadcn_phlexcomponents.rb", __dir__
|
8
|
+
)}"
|
9
|
+
end
|
10
|
+
end
|