wilday_ui 0.5.6 → 0.6.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 +7 -0
- data/app/assets/stylesheets/wilday_ui/components/button/features/gradients.css +109 -0
- data/app/assets/stylesheets/wilday_ui/components/button/index.css +1 -0
- data/app/helpers/wilday_ui/components/button_helper.rb +50 -18
- data/app/views/wilday_ui/_button.html.erb +1 -0
- data/lib/wilday_ui/config/theme.rb +6 -6
- data/lib/wilday_ui/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '0928d2614b52a959cfdf1a406c10f1de6f291788965ddaba3f48a08fb22283e2'
|
|
4
|
+
data.tar.gz: 977b7bf2c02855534294786824da27fdcd9fa1779f50eff26a8418af2998d938
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 295649d8662a2057527c9a89e140a0a219f329d8133c8c25a843deb337a48b857c21a569ff0afca74ec2604e75f9c0ebbd7f4ba73cfc52700b64f4b4ee436b44
|
|
7
|
+
data.tar.gz: d4b5d7f4194d2f925c2ea5fa5f48368d4049e5b45c2b88ea59d468d5a93a10c0ce1ea4df426b07765af3c78a842cd62b43d49ded19b18a6581ce7735efb29b27
|
data/README.md
CHANGED
|
@@ -4,6 +4,13 @@ WildayUI is a simple, minimalist, and customizable library of pre-built componen
|
|
|
4
4
|
WildayUI's main goal is to provide **static components** (such as buttons, badges, etc.) and **dynamic components** (such as dropdowns, modals, etc.) that are easily customizable and extendable. Each page in the component documentation is divided into sections for static and dynamic components.
|
|
5
5
|
|
|
6
6
|
---
|
|
7
|
+
|
|
8
|
+
## Demo
|
|
9
|
+
|
|
10
|
+
You can see a demo of WildayUI [here](https://wildayuidemo.onrender.com/).
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
7
14
|
## Installation
|
|
8
15
|
To start using Wilday UI, add it to your Gemfile:
|
|
9
16
|
```ruby
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/* Predefined gradient variations */
|
|
2
|
+
.w-button-gradient-blue {
|
|
3
|
+
background: linear-gradient(135deg, #60a5fa, #3b82f6);
|
|
4
|
+
color: white;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.w-button-gradient-blue:hover {
|
|
8
|
+
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.w-button-gradient-purple {
|
|
12
|
+
background: linear-gradient(135deg, #c084fc, #a855f7);
|
|
13
|
+
color: white;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.w-button-gradient-purple:hover {
|
|
17
|
+
background: linear-gradient(135deg, #a855f7, #9333ea);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.w-button-gradient-green {
|
|
21
|
+
background: linear-gradient(135deg, #4ade80, #22c55e);
|
|
22
|
+
color: white;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.w-button-gradient-green:hover {
|
|
26
|
+
background: linear-gradient(135deg, #22c55e, #16a34a);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.w-button-gradient-sunset {
|
|
30
|
+
background: linear-gradient(135deg, #f97316, #ef4444);
|
|
31
|
+
color: white;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.w-button-gradient-sunset:hover {
|
|
35
|
+
background: linear-gradient(135deg, #ef4444, #dc2626);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* New gradients */
|
|
39
|
+
.w-button-gradient-ocean {
|
|
40
|
+
background: linear-gradient(135deg, #0ea5e9, #2563eb);
|
|
41
|
+
color: white;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.w-button-gradient-ocean:hover {
|
|
45
|
+
background: linear-gradient(135deg, #0284c7, #1d4ed8);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.w-button-gradient-rose {
|
|
49
|
+
background: linear-gradient(135deg, #fb7185, #e11d48);
|
|
50
|
+
color: white;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.w-button-gradient-rose:hover {
|
|
54
|
+
background: linear-gradient(135deg, #f43f5e, #be123c);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.w-button-gradient-amber {
|
|
58
|
+
background: linear-gradient(135deg, #fbbf24, #d97706);
|
|
59
|
+
color: white;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.w-button-gradient-amber:hover {
|
|
63
|
+
background: linear-gradient(135deg, #f59e0b, #b45309);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.w-button-gradient-emerald {
|
|
67
|
+
background: linear-gradient(135deg, #34d399, #059669);
|
|
68
|
+
color: white;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.w-button-gradient-emerald:hover {
|
|
72
|
+
background: linear-gradient(135deg, #10b981, #047857);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.w-button-gradient-indigo {
|
|
76
|
+
background: linear-gradient(135deg, #818cf8, #4f46e5);
|
|
77
|
+
color: white;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.w-button-gradient-indigo:hover {
|
|
81
|
+
background: linear-gradient(135deg, #6366f1, #4338ca);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.w-button-gradient-slate {
|
|
85
|
+
background: linear-gradient(135deg, #64748b, #334155);
|
|
86
|
+
color: white;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.w-button-gradient-slate:hover {
|
|
90
|
+
background: linear-gradient(135deg, #475569, #1e293b);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Custom gradient support */
|
|
94
|
+
.w-button-gradient-custom {
|
|
95
|
+
transition: all 0.3s ease;
|
|
96
|
+
color: white;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.w-button-gradient-custom:hover {
|
|
100
|
+
filter: brightness(0.9);
|
|
101
|
+
transform: translateY(-1px);
|
|
102
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.w-button-gradient-custom:active {
|
|
106
|
+
filter: brightness(0.85);
|
|
107
|
+
transform: translateY(0);
|
|
108
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
109
|
+
}
|
|
@@ -25,6 +25,7 @@ module WildayUi
|
|
|
25
25
|
variant: :solid,
|
|
26
26
|
size: :medium,
|
|
27
27
|
radius: :rounded,
|
|
28
|
+
gradient: nil,
|
|
28
29
|
icon: nil,
|
|
29
30
|
icon_position: :left,
|
|
30
31
|
icon_only: false,
|
|
@@ -49,6 +50,12 @@ module WildayUi
|
|
|
49
50
|
wrapper_data = {}
|
|
50
51
|
wrapper_options = nil
|
|
51
52
|
|
|
53
|
+
# Process gradient styles if present
|
|
54
|
+
if gradient.present?
|
|
55
|
+
gradient_styles = process_gradient(gradient)
|
|
56
|
+
options[:style] = [ options[:style], gradient_styles ].compact.join(";") if gradient_styles.present?
|
|
57
|
+
end
|
|
58
|
+
|
|
52
59
|
# Process theme styles
|
|
53
60
|
if theme.present?
|
|
54
61
|
theme_styles = process_theme(variant, theme)
|
|
@@ -58,17 +65,13 @@ module WildayUi
|
|
|
58
65
|
variant_class = get_variant_class(variant)
|
|
59
66
|
size_class = get_size_class(size)
|
|
60
67
|
radius_class = get_radius_class(radius)
|
|
68
|
+
gradient_class = get_gradient_class(gradient)
|
|
61
69
|
|
|
62
70
|
# Setup features that require Stimulus controllers
|
|
63
71
|
active_features = determine_active_features(loading, dropdown, loading_text, use_default_controller)
|
|
64
72
|
|
|
65
|
-
Rails.logger.debug "Active Features: #{active_features.inspect}"
|
|
66
|
-
Rails.logger.debug "Options before setup: #{options.inspect}"
|
|
67
|
-
|
|
68
73
|
setup_features(active_features, options, use_default_controller, loading_text)
|
|
69
74
|
|
|
70
|
-
Rails.logger.debug "Options after setup: #{options.inspect}"
|
|
71
|
-
|
|
72
75
|
setup_link_options(options, href, target, method)
|
|
73
76
|
|
|
74
77
|
if dropdown
|
|
@@ -93,6 +96,7 @@ module WildayUi
|
|
|
93
96
|
variant_class,
|
|
94
97
|
size_class,
|
|
95
98
|
radius_class,
|
|
99
|
+
gradient_class,
|
|
96
100
|
icon,
|
|
97
101
|
icon_position,
|
|
98
102
|
icon_only,
|
|
@@ -147,6 +151,26 @@ module WildayUi
|
|
|
147
151
|
}[radius] || "w-button-rounded"
|
|
148
152
|
end
|
|
149
153
|
|
|
154
|
+
def get_gradient_class(gradient)
|
|
155
|
+
return nil unless gradient
|
|
156
|
+
|
|
157
|
+
if gradient.is_a?(Hash) && gradient[:from] && gradient[:to]
|
|
158
|
+
"w-button-gradient-custom"
|
|
159
|
+
else
|
|
160
|
+
"w-button-gradient-#{gradient}"
|
|
161
|
+
end
|
|
162
|
+
end
|
|
163
|
+
|
|
164
|
+
def process_gradient(gradient)
|
|
165
|
+
return nil unless gradient.is_a?(Hash) && gradient[:from] && gradient[:to]
|
|
166
|
+
|
|
167
|
+
if gradient[:via]
|
|
168
|
+
"background: linear-gradient(135deg, #{gradient[:from]}, #{gradient[:via]}, #{gradient[:to]})"
|
|
169
|
+
else
|
|
170
|
+
"background: linear-gradient(135deg, #{gradient[:from]}, #{gradient[:to]})"
|
|
171
|
+
end
|
|
172
|
+
end
|
|
173
|
+
|
|
150
174
|
def process_theme(variant, theme)
|
|
151
175
|
return nil unless theme[:name] || theme[:custom]
|
|
152
176
|
|
|
@@ -180,36 +204,43 @@ module WildayUi
|
|
|
180
204
|
{
|
|
181
205
|
"--w-button-color": "#FFFFFF",
|
|
182
206
|
"--w-button-bg": colors["500"],
|
|
183
|
-
"--w-button-hover-bg": colors["600"]
|
|
207
|
+
"--w-button-hover-bg": colors["600"],
|
|
208
|
+
"--w-button-active-bg": colors["700"]
|
|
184
209
|
}
|
|
185
210
|
when :subtle
|
|
186
211
|
{
|
|
187
|
-
"--w-button-color": colors["
|
|
212
|
+
"--w-button-color": colors["700"],
|
|
188
213
|
"--w-button-bg": colors["50"],
|
|
189
|
-
"--w-button-hover-bg": colors["100"]
|
|
214
|
+
"--w-button-hover-bg": colors["100"],
|
|
215
|
+
"--w-button-hover-color": colors["800"]
|
|
190
216
|
}
|
|
191
217
|
when :surface
|
|
192
218
|
{
|
|
193
|
-
"--w-button-color": colors["
|
|
219
|
+
"--w-button-color": colors["700"],
|
|
194
220
|
"--w-button-bg": colors["50"],
|
|
195
221
|
"--w-button-hover-bg": colors["100"],
|
|
196
|
-
"--w-button-border": colors["
|
|
222
|
+
"--w-button-border": colors["200"],
|
|
223
|
+
"--w-button-hover-border": colors["300"]
|
|
197
224
|
}
|
|
198
225
|
when :outline
|
|
199
226
|
{
|
|
200
|
-
"--w-button-color": colors["
|
|
201
|
-
"--w-button-border": colors["
|
|
202
|
-
"--w-button-hover-bg": colors["50"]
|
|
227
|
+
"--w-button-color": colors["600"],
|
|
228
|
+
"--w-button-border": colors["300"],
|
|
229
|
+
"--w-button-hover-bg": colors["50"],
|
|
230
|
+
"--w-button-hover-border": colors["400"],
|
|
231
|
+
"--w-button-hover-color": colors["700"]
|
|
203
232
|
}
|
|
204
233
|
when :ghost
|
|
205
234
|
{
|
|
206
|
-
"--w-button-color": colors["
|
|
207
|
-
"--w-button-hover-bg": colors["50"]
|
|
235
|
+
"--w-button-color": colors["600"],
|
|
236
|
+
"--w-button-hover-bg": colors["50"],
|
|
237
|
+
"--w-button-hover-color": colors["700"]
|
|
208
238
|
}
|
|
209
239
|
when :plain
|
|
210
240
|
{
|
|
211
|
-
"--w-button-color": colors["
|
|
212
|
-
"--w-button-hover-color": colors["
|
|
241
|
+
"--w-button-color": colors["600"],
|
|
242
|
+
"--w-button-hover-color": colors["700"],
|
|
243
|
+
"--w-button-active-color": colors["800"]
|
|
213
244
|
}
|
|
214
245
|
else
|
|
215
246
|
{}
|
|
@@ -358,7 +389,7 @@ module WildayUi
|
|
|
358
389
|
"#{base}#{index}"
|
|
359
390
|
end
|
|
360
391
|
|
|
361
|
-
def render_button(content, variant_class, size_class, radius_class, icon, icon_position, icon_only,
|
|
392
|
+
def render_button(content, variant_class, size_class, radius_class, gradient_class, icon, icon_position, icon_only,
|
|
362
393
|
loading, loading_text, additional_classes, disabled, options, href, underline,
|
|
363
394
|
dropdown, dropdown_items, dropdown_icon, wrapper_options)
|
|
364
395
|
|
|
@@ -368,6 +399,7 @@ module WildayUi
|
|
|
368
399
|
variant_class: variant_class,
|
|
369
400
|
size_class: size_class,
|
|
370
401
|
radius_class: radius_class,
|
|
402
|
+
gradient_class: gradient_class,
|
|
371
403
|
icon: icon,
|
|
372
404
|
icon_position: icon_position,
|
|
373
405
|
icon_only: icon_only,
|
|
@@ -111,12 +111,12 @@ module WildayUi
|
|
|
111
111
|
"100" => "#F3F4F6",
|
|
112
112
|
"200" => "#E5E7EB",
|
|
113
113
|
"300" => "#D1D5DB",
|
|
114
|
-
"400" => "#
|
|
115
|
-
"500" => "#
|
|
116
|
-
"600" => "#
|
|
117
|
-
"700" => "#
|
|
118
|
-
"800" => "#
|
|
119
|
-
"900" => "#
|
|
114
|
+
"400" => "#1F2937",
|
|
115
|
+
"500" => "#111827",
|
|
116
|
+
"600" => "#0F172A",
|
|
117
|
+
"700" => "#0A0F1A",
|
|
118
|
+
"800" => "#060912",
|
|
119
|
+
"900" => "#030509"
|
|
120
120
|
},
|
|
121
121
|
"link" => {
|
|
122
122
|
"50" => "#EFF6FF",
|
data/lib/wilday_ui/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: wilday_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.6.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- davidwinalda
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-12-
|
|
11
|
+
date: 2024-12-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -46,6 +46,7 @@ files:
|
|
|
46
46
|
- app/assets/stylesheets/wilday_ui/button.css
|
|
47
47
|
- app/assets/stylesheets/wilday_ui/components/button/base.css
|
|
48
48
|
- app/assets/stylesheets/wilday_ui/components/button/features/dropdown.css
|
|
49
|
+
- app/assets/stylesheets/wilday_ui/components/button/features/gradients.css
|
|
49
50
|
- app/assets/stylesheets/wilday_ui/components/button/features/icons.css
|
|
50
51
|
- app/assets/stylesheets/wilday_ui/components/button/features/loading.css
|
|
51
52
|
- app/assets/stylesheets/wilday_ui/components/button/features/old_variants.css
|