daisyui_on_phlex 0.2.3 → 0.3.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 +147 -16
- data/lib/daisyui_on_phlex/components/accordion.rb +4 -5
- data/lib/daisyui_on_phlex/components/alert.rb +36 -29
- data/lib/daisyui_on_phlex/components/carousel.rb +4 -5
- data/lib/daisyui_on_phlex/components/collapse.rb +4 -4
- data/lib/daisyui_on_phlex/components/drawer.rb +3 -3
- data/lib/daisyui_on_phlex/components/dropdown.rb +8 -9
- data/lib/daisyui_on_phlex/components/modal.rb +3 -3
- data/lib/daisyui_on_phlex/components/navbar.rb +1 -1
- data/lib/daisyui_on_phlex/components/pagination.rb +1 -1
- data/lib/daisyui_on_phlex/components/timeline.rb +6 -6
- data/lib/daisyui_on_phlex/components/tooltip.rb +4 -4
- data/lib/daisyui_on_phlex/components/validator.rb +5 -8
- data/lib/daisyui_on_phlex/generators/install_generator.rb +72 -10
- data/lib/daisyui_on_phlex/version.rb +1 -1
- metadata +23 -12
- data/INSTALLATION.md +0 -129
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 24ac5156bc91427821a11f2108b2c032509111ab15d992dda5d51b65124b400c
|
4
|
+
data.tar.gz: dee06d63293a83653935f57ce78e0f9f032a6c039b5db5e78683cc8e818237bf
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '08175ac9c264c255c2e4968332e31f7a9ee242c5b7f7af9c99bacad2e6e9ae929015f17e5935a193b289f94c9500b8ec5f6ec272a7361ab0587cf36b057c915f'
|
7
|
+
data.tar.gz: 64b6b0b51988acb8fb926fc84bb2d45f7dd9f80381b775f447236f0dbb54bda85160a96ea6fd5270027293c0fd3d8b936c8c399f894f7f317f4a1ce3e1066ad8
|
data/README.md
CHANGED
@@ -34,41 +34,95 @@ Or install it yourself as:
|
|
34
34
|
$ gem install daisyui_on_phlex
|
35
35
|
```
|
36
36
|
|
37
|
-
##
|
37
|
+
## Setup
|
38
38
|
|
39
|
-
|
39
|
+
Run the install generator to set up DaisyUI components in your Rails application:
|
40
40
|
|
41
|
-
```
|
42
|
-
|
43
|
-
@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
|
41
|
+
```bash
|
42
|
+
$ rails generate daisyui_on_phlex:install
|
44
43
|
```
|
45
44
|
|
46
|
-
|
45
|
+
This will:
|
46
|
+
1. **Copy all 61+ components** to `vendor/daisyui_on_phlex/components/` in your Rails app
|
47
|
+
2. **Configure autoloader** to serve components from vendor directory instead of gem
|
48
|
+
3. Install **phlex-rails** dependency if not already present
|
49
|
+
4. Download the latest **DaisyUI JavaScript files**
|
50
|
+
5. Configure your **Tailwind CSS** to include the DaisyUI plugin
|
51
|
+
6. Add CSS imports to your application
|
52
|
+
7. Provide usage instructions
|
53
|
+
|
54
|
+
### Why Copy to Vendor?
|
55
|
+
|
56
|
+
Unlike traditional gems that load components from memory, DaisyUI On Phlex follows the **shadcn-ui approach** by copying components directly to your application. This gives you:
|
57
|
+
|
58
|
+
- ✅ **Full ownership** of component code in your app
|
59
|
+
- ✅ **Easy customization** - edit components locally
|
60
|
+
- ✅ **No gem dependencies** for component logic after installation
|
61
|
+
- ✅ **Version control** your component modifications
|
62
|
+
- ✅ **Better debugging** with direct access to source code
|
63
|
+
|
64
|
+
After installation, all components will be available from `vendor/daisyui_on_phlex/components/` and you can modify them as needed for your project.
|
65
|
+
|
66
|
+
### Manual Configuration (Optional)
|
67
|
+
|
68
|
+
If you prefer manual setup or need to customize the installation:
|
69
|
+
|
70
|
+
#### 1. Configure your HTML layout
|
71
|
+
|
72
|
+
Make sure your HTML layout supports theme switching by adding the `data-theme` attribute:
|
47
73
|
|
48
74
|
```erb
|
49
75
|
<!DOCTYPE html>
|
50
76
|
<html data-theme="light">
|
51
|
-
|
77
|
+
<head>
|
78
|
+
<!-- Your head content -->
|
79
|
+
</head>
|
80
|
+
<body>
|
81
|
+
<!-- Your body content -->
|
82
|
+
</body>
|
52
83
|
</html>
|
53
84
|
```
|
54
85
|
|
55
|
-
|
86
|
+
#### 2. Theme Configuration
|
56
87
|
|
57
|
-
|
88
|
+
The CSS file includes the most popular DaisyUI themes by default:
|
89
|
+
- `light` (default), `dark` (prefers dark mode)
|
90
|
+
- `cupcake`, `dracula`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`
|
91
|
+
- `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`
|
92
|
+
- `fantasy`, `wireframe`, `black`, `luxury`, `autumn`, `business`
|
93
|
+
- `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`
|
58
94
|
|
59
|
-
|
95
|
+
#### 3. Theme Switching
|
96
|
+
|
97
|
+
To enable theme switching, you can use the `data-theme` attribute:
|
98
|
+
|
99
|
+
```erb
|
100
|
+
<select data-choose-theme>
|
101
|
+
<option value="light">Light</option>
|
102
|
+
<option value="dark">Dark</option>
|
103
|
+
<option value="cupcake">Cupcake</option>
|
104
|
+
<option value="dracula">Dracula</option>
|
105
|
+
<!-- Add more themes as needed -->
|
106
|
+
</select>
|
107
|
+
```
|
108
|
+
|
109
|
+
For automatic theme switching, consider using the [theme-change](https://github.com/saadeghi/theme-change) library:
|
60
110
|
|
61
111
|
```bash
|
62
|
-
|
112
|
+
npm install theme-change
|
63
113
|
```
|
64
114
|
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
115
|
+
Then initialize it in your JavaScript:
|
116
|
+
|
117
|
+
```javascript
|
118
|
+
import { themeChange } from 'theme-change'
|
119
|
+
themeChange()
|
120
|
+
```
|
69
121
|
|
70
122
|
## Usage
|
71
123
|
|
124
|
+
After running the install generator, all DaisyUI components will be copied to your `vendor/daisyui_on_phlex/components/` directory and automatically available in your application.
|
125
|
+
|
72
126
|
Use DaisyUI components in your Phlex views:
|
73
127
|
|
74
128
|
### Button Component
|
@@ -164,7 +218,7 @@ render DaisyuiOnPhlex::Components::Input.new(
|
|
164
218
|
|
165
219
|
## Available Components
|
166
220
|
|
167
|
-
|
221
|
+
After installation, all 61+ DaisyUI components are copied to your `vendor/daisyui_on_phlex/components/` directory and ready to use. You can customize any component by editing the files directly in your vendor folder.
|
168
222
|
|
169
223
|
### Actions
|
170
224
|
- **Button** - Interactive buttons with multiple variants and sizes
|
@@ -245,6 +299,83 @@ All 61+ DaisyUI components are now implemented as Phlex components:
|
|
245
299
|
|
246
300
|
All components follow DaisyUI's design system and support the full range of variants, sizes, and styling options. Check the [DaisyUI documentation](https://daisyui.com/components/) for detailed usage examples and styling options.
|
247
301
|
|
302
|
+
## Customization
|
303
|
+
|
304
|
+
Since all components are copied to your `vendor/daisyui_on_phlex/components/` directory, you have full control over their implementation:
|
305
|
+
|
306
|
+
### Modifying Components
|
307
|
+
|
308
|
+
```bash
|
309
|
+
# All components are in your vendor directory
|
310
|
+
ls vendor/daisyui_on_phlex/components/
|
311
|
+
|
312
|
+
# Edit any component directly
|
313
|
+
code vendor/daisyui_on_phlex/components/button.rb
|
314
|
+
```
|
315
|
+
|
316
|
+
### Creating Custom Variants
|
317
|
+
|
318
|
+
```ruby
|
319
|
+
# In vendor/daisyui_on_phlex/components/button.rb
|
320
|
+
module DaisyuiOnPhlex
|
321
|
+
module Components
|
322
|
+
class Button < DaisyuiOnPhlex::Base
|
323
|
+
def initialize(variant: :primary, custom_style: nil, **attributes)
|
324
|
+
@variant = variant
|
325
|
+
@custom_style = custom_style
|
326
|
+
@attributes = attributes
|
327
|
+
end
|
328
|
+
|
329
|
+
private
|
330
|
+
|
331
|
+
def component_classes
|
332
|
+
classes = ["btn"]
|
333
|
+
classes << "btn-#{@variant}" if @variant
|
334
|
+
classes << @custom_style if @custom_style # Your custom styles
|
335
|
+
classes.join(" ")
|
336
|
+
end
|
337
|
+
end
|
338
|
+
end
|
339
|
+
end
|
340
|
+
```
|
341
|
+
|
342
|
+
All changes will be preserved in your application and tracked in your version control system.
|
343
|
+
|
344
|
+
### Vendor Directory Structure
|
345
|
+
|
346
|
+
After installation, your vendor directory will contain:
|
347
|
+
|
348
|
+
```
|
349
|
+
vendor/daisyui_on_phlex/
|
350
|
+
├── base.rb # Base class for all components
|
351
|
+
└── components/
|
352
|
+
├── accordion.rb
|
353
|
+
├── alert.rb
|
354
|
+
├── avatar.rb
|
355
|
+
├── badge.rb
|
356
|
+
├── button.rb
|
357
|
+
├── card.rb
|
358
|
+
├── ... # All 61+ components
|
359
|
+
└── tooltip.rb
|
360
|
+
```
|
361
|
+
|
362
|
+
### Troubleshooting
|
363
|
+
|
364
|
+
If you encounter issues:
|
365
|
+
|
366
|
+
1. **Generator fails**: Ensure you're in a Rails application directory and have proper permissions
|
367
|
+
2. **Components not found**: Check that `config/initializers/daisyui_on_phlex_vendor.rb` was created
|
368
|
+
3. **Styles not loading**: Ensure the CSS import is after `@import "tailwindcss";`
|
369
|
+
4. **Themes not working**: Check that your HTML has the `data-theme` attribute
|
370
|
+
5. **Build errors**: Make sure you have Tailwind CSS properly configured in your Rails app
|
371
|
+
6. **Vendor directory issues**: Verify components were copied to `vendor/daisyui_on_phlex/components/`
|
372
|
+
|
373
|
+
You can safely re-run the generator to update components or fix configuration:
|
374
|
+
|
375
|
+
```bash
|
376
|
+
rails generate daisyui_on_phlex:install
|
377
|
+
```
|
378
|
+
|
248
379
|
## Component Options
|
249
380
|
|
250
381
|
### Button Options
|
@@ -16,16 +16,15 @@ module DaisyuiOnPhlex
|
|
16
16
|
)
|
17
17
|
end
|
18
18
|
|
19
|
-
def item(
|
20
|
-
div(class: merge_classes("collapse", ("collapse-open" if
|
21
|
-
yield AccordionItem.new
|
19
|
+
def item(expanded: false, **attributes, &block)
|
20
|
+
div(class: merge_classes("collapse", ("collapse-open" if expanded)), **attributes) do
|
21
|
+
yield AccordionItem.new if block_given?
|
22
22
|
end
|
23
23
|
end
|
24
24
|
|
25
25
|
private
|
26
26
|
|
27
|
-
class AccordionItem
|
28
|
-
include Phlex::HTML
|
27
|
+
class AccordionItem < DaisyuiOnPhlex::Base
|
29
28
|
|
30
29
|
def title(**attributes, &block)
|
31
30
|
div(class: "collapse-title text-xl font-medium", **attributes, &block)
|
@@ -12,47 +12,34 @@ module DaisyuiOnPhlex
|
|
12
12
|
end
|
13
13
|
|
14
14
|
def view_template(&block)
|
15
|
-
div(
|
16
|
-
|
17
|
-
**@attributes
|
18
|
-
) do
|
19
|
-
render_icon if icon_for_variant
|
20
|
-
div(&block) if block_given?
|
15
|
+
div(class: merge_classes("alert", variant_class), **@attributes) do
|
16
|
+
yield if block_given?
|
21
17
|
end
|
22
18
|
end
|
23
19
|
|
24
20
|
private
|
25
21
|
|
26
|
-
def
|
27
|
-
classes = ["alert"]
|
28
|
-
|
22
|
+
def variant_class
|
29
23
|
case @variant
|
30
|
-
when :info then
|
31
|
-
when :success then
|
32
|
-
when :warning then
|
33
|
-
when :error then
|
24
|
+
when :info then "alert-info"
|
25
|
+
when :success then "alert-success"
|
26
|
+
when :warning then "alert-warning"
|
27
|
+
when :error then "alert-error"
|
28
|
+
else ""
|
34
29
|
end
|
35
|
-
|
36
|
-
merge_classes(*classes)
|
37
30
|
end
|
38
31
|
|
39
|
-
def
|
32
|
+
def render_icon
|
40
33
|
case @variant
|
41
|
-
when :info
|
42
|
-
|
43
|
-
when :warning then "warning"
|
44
|
-
when :error then "error"
|
34
|
+
when :info, :success, :warning, :error
|
35
|
+
render_svg_icon
|
45
36
|
end
|
46
37
|
end
|
47
38
|
|
48
|
-
def render_icon
|
49
|
-
render_svg_icon
|
50
|
-
end
|
51
|
-
|
52
39
|
def render_svg_icon
|
53
40
|
svg(
|
54
41
|
xmlns: "http://www.w3.org/2000/svg",
|
55
|
-
class: "h-6 w-6
|
42
|
+
class: "stroke-current shrink-0 h-6 w-6",
|
56
43
|
fill: "none",
|
57
44
|
viewBox: "0 0 24 24"
|
58
45
|
) do
|
@@ -63,13 +50,33 @@ module DaisyuiOnPhlex
|
|
63
50
|
def render_svg_path
|
64
51
|
case @variant
|
65
52
|
when :info
|
66
|
-
|
53
|
+
tag(:path,
|
54
|
+
"stroke-linecap": "round",
|
55
|
+
"stroke-linejoin": "round",
|
56
|
+
"stroke-width": "2",
|
57
|
+
d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
58
|
+
)
|
67
59
|
when :success
|
68
|
-
|
60
|
+
tag(:path,
|
61
|
+
"stroke-linecap": "round",
|
62
|
+
"stroke-linejoin": "round",
|
63
|
+
"stroke-width": "2",
|
64
|
+
d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
65
|
+
)
|
69
66
|
when :warning
|
70
|
-
|
67
|
+
tag(:path,
|
68
|
+
"stroke-linecap": "round",
|
69
|
+
"stroke-linejoin": "round",
|
70
|
+
"stroke-width": "2",
|
71
|
+
d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
72
|
+
)
|
71
73
|
when :error
|
72
|
-
|
74
|
+
tag(:path,
|
75
|
+
"stroke-linecap": "round",
|
76
|
+
"stroke-linejoin": "round",
|
77
|
+
"stroke-width": "2",
|
78
|
+
d: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
79
|
+
)
|
73
80
|
end
|
74
81
|
end
|
75
82
|
end
|
@@ -3,9 +3,8 @@
|
|
3
3
|
module DaisyuiOnPhlex
|
4
4
|
module Components
|
5
5
|
class Carousel < DaisyuiOnPhlex::Base
|
6
|
-
def initialize(
|
7
|
-
@
|
8
|
-
@end = end
|
6
|
+
def initialize(alignment: nil, vertical: false, **attributes)
|
7
|
+
@alignment = alignment # :center, :end, nil for default (start)
|
9
8
|
@vertical = vertical
|
10
9
|
@attributes = attributes
|
11
10
|
end
|
@@ -27,8 +26,8 @@ module DaisyuiOnPhlex
|
|
27
26
|
|
28
27
|
def carousel_classes
|
29
28
|
classes = ["carousel"]
|
30
|
-
classes << "carousel-center" if @center
|
31
|
-
classes << "carousel-end" if @end
|
29
|
+
classes << "carousel-center" if @alignment == :center
|
30
|
+
classes << "carousel-end" if @alignment == :end
|
32
31
|
classes << "carousel-vertical" if @vertical
|
33
32
|
merge_classes(*classes)
|
34
33
|
end
|
@@ -3,8 +3,8 @@
|
|
3
3
|
module DaisyuiOnPhlex
|
4
4
|
module Components
|
5
5
|
class Collapse < DaisyuiOnPhlex::Base
|
6
|
-
def initialize(
|
7
|
-
@
|
6
|
+
def initialize(expanded: false, arrow: false, plus: false, **attributes)
|
7
|
+
@expanded = expanded
|
8
8
|
@arrow = arrow
|
9
9
|
@plus = plus
|
10
10
|
@attributes = attributes
|
@@ -16,10 +16,10 @@ module DaisyuiOnPhlex
|
|
16
16
|
"collapse",
|
17
17
|
("collapse-arrow" if @arrow),
|
18
18
|
("collapse-plus" if @plus),
|
19
|
-
("collapse-open" if @
|
19
|
+
("collapse-open" if @expanded),
|
20
20
|
@attributes[:class]
|
21
21
|
),
|
22
|
-
open: @
|
22
|
+
open: @expanded,
|
23
23
|
**@attributes.except(:class),
|
24
24
|
&block
|
25
25
|
)
|
@@ -3,8 +3,8 @@
|
|
3
3
|
module DaisyuiOnPhlex
|
4
4
|
module Components
|
5
5
|
class Drawer < DaisyuiOnPhlex::Base
|
6
|
-
def initialize(
|
7
|
-
@
|
6
|
+
def initialize(side: :start, **attributes)
|
7
|
+
@side = side # :start or :end
|
8
8
|
@attributes = attributes
|
9
9
|
end
|
10
10
|
|
@@ -41,7 +41,7 @@ module DaisyuiOnPhlex
|
|
41
41
|
|
42
42
|
def drawer_side_classes
|
43
43
|
classes = ["drawer-side"]
|
44
|
-
classes << "drawer-end" if @end
|
44
|
+
classes << "drawer-end" if @side == :end
|
45
45
|
merge_classes(*classes)
|
46
46
|
end
|
47
47
|
end
|
@@ -5,19 +5,15 @@ module DaisyuiOnPhlex
|
|
5
5
|
class Dropdown < DaisyuiOnPhlex::Base
|
6
6
|
def initialize(
|
7
7
|
position: :bottom,
|
8
|
-
align: :
|
9
|
-
end: false,
|
10
|
-
top: false,
|
8
|
+
align: :start,
|
11
9
|
hover: false,
|
12
|
-
|
10
|
+
force_open: false,
|
13
11
|
**attributes
|
14
12
|
)
|
15
13
|
@position = position
|
16
14
|
@align = align
|
17
|
-
@end = end
|
18
|
-
@top = top
|
19
15
|
@hover = hover
|
20
|
-
@
|
16
|
+
@force_open = force_open
|
21
17
|
@attributes = attributes
|
22
18
|
end
|
23
19
|
|
@@ -50,9 +46,12 @@ module DaisyuiOnPhlex
|
|
50
46
|
when :right then classes << "dropdown-right"
|
51
47
|
end
|
52
48
|
|
53
|
-
|
49
|
+
case @align
|
50
|
+
when :end then classes << "dropdown-end"
|
51
|
+
end
|
52
|
+
|
54
53
|
classes << "dropdown-hover" if @hover
|
55
|
-
classes << "dropdown-open" if @
|
54
|
+
classes << "dropdown-open" if @force_open
|
56
55
|
|
57
56
|
merge_classes(*classes)
|
58
57
|
end
|
@@ -5,11 +5,11 @@ module DaisyuiOnPhlex
|
|
5
5
|
class Modal < DaisyuiOnPhlex::Base
|
6
6
|
def initialize(
|
7
7
|
id:,
|
8
|
-
|
8
|
+
visible: false,
|
9
9
|
**attributes
|
10
10
|
)
|
11
11
|
@id = id
|
12
|
-
@
|
12
|
+
@visible = visible
|
13
13
|
@attributes = attributes
|
14
14
|
end
|
15
15
|
|
@@ -19,7 +19,7 @@ module DaisyuiOnPhlex
|
|
19
19
|
type: "checkbox",
|
20
20
|
id: @id,
|
21
21
|
class: "modal-toggle",
|
22
|
-
checked: @
|
22
|
+
checked: @visible
|
23
23
|
)
|
24
24
|
|
25
25
|
# Modal
|
@@ -19,7 +19,7 @@ module DaisyuiOnPhlex
|
|
19
19
|
div(class: merge_classes("navbar-center", attributes[:class]), **attributes.except(:class), &block)
|
20
20
|
end
|
21
21
|
|
22
|
-
def
|
22
|
+
def navbar_end(**attributes, &block)
|
23
23
|
div(class: merge_classes("navbar-end", attributes[:class]), **attributes.except(:class), &block)
|
24
24
|
end
|
25
25
|
end
|
@@ -14,8 +14,8 @@ module DaisyuiOnPhlex
|
|
14
14
|
ul(class: timeline_classes, **@attributes, &block)
|
15
15
|
end
|
16
16
|
|
17
|
-
def item(
|
18
|
-
li(class: item_classes(
|
17
|
+
def item(timeline_start: false, timeline_end: false, **attributes, &block)
|
18
|
+
li(class: item_classes(timeline_start: timeline_start, timeline_end: timeline_end), **attributes, &block)
|
19
19
|
end
|
20
20
|
|
21
21
|
def start(**attributes, &block)
|
@@ -26,7 +26,7 @@ module DaisyuiOnPhlex
|
|
26
26
|
div(class: "timeline-middle", **attributes, &block)
|
27
27
|
end
|
28
28
|
|
29
|
-
def
|
29
|
+
def timeline_end(**attributes, &block)
|
30
30
|
div(class: "timeline-end", **attributes, &block)
|
31
31
|
end
|
32
32
|
|
@@ -41,10 +41,10 @@ module DaisyuiOnPhlex
|
|
41
41
|
merge_classes(*classes)
|
42
42
|
end
|
43
43
|
|
44
|
-
def item_classes(
|
44
|
+
def item_classes(timeline_start: false, timeline_end: false)
|
45
45
|
classes = []
|
46
|
-
classes << "timeline-start" if
|
47
|
-
classes << "timeline-end" if
|
46
|
+
classes << "timeline-start" if timeline_start
|
47
|
+
classes << "timeline-end" if timeline_end
|
48
48
|
merge_classes(*classes)
|
49
49
|
end
|
50
50
|
end
|
@@ -7,20 +7,20 @@ module DaisyuiOnPhlex
|
|
7
7
|
text:,
|
8
8
|
position: :top,
|
9
9
|
variant: nil,
|
10
|
-
|
10
|
+
force_open: false,
|
11
11
|
**attributes
|
12
12
|
)
|
13
13
|
@text = text
|
14
14
|
@position = position
|
15
15
|
@variant = variant
|
16
|
-
@
|
16
|
+
@force_open = force_open
|
17
17
|
@attributes = attributes
|
18
18
|
end
|
19
19
|
|
20
20
|
def view_template(&block)
|
21
21
|
div(
|
22
22
|
class: tooltip_classes,
|
23
|
-
data
|
23
|
+
"data-tip": @text,
|
24
24
|
**@attributes,
|
25
25
|
&block
|
26
26
|
)
|
@@ -48,7 +48,7 @@ module DaisyuiOnPhlex
|
|
48
48
|
when :error then classes << "tooltip-error"
|
49
49
|
end
|
50
50
|
|
51
|
-
classes << "tooltip-open" if @
|
51
|
+
classes << "tooltip-open" if @force_open
|
52
52
|
|
53
53
|
merge_classes(*classes)
|
54
54
|
end
|
@@ -4,12 +4,10 @@ module DaisyuiOnPhlex
|
|
4
4
|
module Components
|
5
5
|
class Validator < DaisyuiOnPhlex::Base
|
6
6
|
def initialize(
|
7
|
-
valid: nil
|
8
|
-
invalid: nil,
|
7
|
+
state: nil, # :valid, :invalid, nil for neutral
|
9
8
|
**attributes
|
10
9
|
)
|
11
|
-
@
|
12
|
-
@invalid = invalid
|
10
|
+
@state = state
|
13
11
|
@attributes = attributes
|
14
12
|
end
|
15
13
|
|
@@ -22,10 +20,9 @@ module DaisyuiOnPhlex
|
|
22
20
|
def validator_classes
|
23
21
|
classes = []
|
24
22
|
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
classes << "input-error"
|
23
|
+
case @state
|
24
|
+
when :valid then classes << "input-success"
|
25
|
+
when :invalid then classes << "input-error"
|
29
26
|
end
|
30
27
|
|
31
28
|
merge_classes(*classes)
|
@@ -6,7 +6,20 @@ module DaisyuiOnPhlex
|
|
6
6
|
module Generators
|
7
7
|
class InstallGenerator < Rails::Generators::Base
|
8
8
|
desc "Install DaisyUI On Phlex"
|
9
|
-
source_root File.expand_path("
|
9
|
+
source_root File.expand_path("../../daisyui_on_phlex", __dir__)
|
10
|
+
class_option :force, type: :boolean, default: false
|
11
|
+
|
12
|
+
def install_phlex_rails
|
13
|
+
if gem_installed?("phlex-rails")
|
14
|
+
say "phlex-rails is already installed", :green
|
15
|
+
else
|
16
|
+
say "Adding phlex-rails to Gemfile", :green
|
17
|
+
run %(bundle add phlex-rails)
|
18
|
+
|
19
|
+
say "Generating phlex-rails structure", :green
|
20
|
+
run "bin/rails generate phlex:install"
|
21
|
+
end
|
22
|
+
end
|
10
23
|
|
11
24
|
def copy_daisyui_files
|
12
25
|
say "Installing DaisyUI files...", :green
|
@@ -16,6 +29,42 @@ module DaisyuiOnPhlex
|
|
16
29
|
run "curl -sLo app/assets/tailwind/daisyui-theme.js https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js" rescue nil
|
17
30
|
end
|
18
31
|
|
32
|
+
def copy_components_to_vendor
|
33
|
+
say "Copying all DaisyUI components to vendor directory...", :green
|
34
|
+
|
35
|
+
components_source_path = File.join(self.class.source_root, "components")
|
36
|
+
component_files = Dir.glob(File.join(components_source_path, "*.rb"))
|
37
|
+
say "Found #{component_files.count} component files", :blue
|
38
|
+
|
39
|
+
component_files.each do |component_path|
|
40
|
+
component_file_name = File.basename(component_path)
|
41
|
+
# Używamy relatywnej ścieżki względem source_root
|
42
|
+
relative_path = File.join("components", component_file_name)
|
43
|
+
destination_path = Rails.root.join("vendor/daisyui_on_phlex/components", component_file_name)
|
44
|
+
|
45
|
+
copy_file relative_path, destination_path, force: options["force"]
|
46
|
+
end
|
47
|
+
end
|
48
|
+
|
49
|
+
def copy_base_class
|
50
|
+
say "Copying base class...", :green
|
51
|
+
# Używamy relatywnej ścieżki względem source_root
|
52
|
+
copy_file "base.rb", Rails.root.join("vendor/daisyui_on_phlex/base.rb"), force: options["force"]
|
53
|
+
end
|
54
|
+
|
55
|
+
def create_vendor_initializer
|
56
|
+
vendor_initializer_path = Rails.root.join("config/initializers/daisyui_on_phlex_vendor.rb")
|
57
|
+
|
58
|
+
create_file vendor_initializer_path, <<~RUBY, force: options["force"]
|
59
|
+
# frozen_string_literal: true
|
60
|
+
|
61
|
+
# Load vendor DaisyUI components
|
62
|
+
Rails.autoloaders.main.push_dir(
|
63
|
+
Rails.root.join("vendor/daisyui_on_phlex"), namespace: DaisyuiOnPhlex
|
64
|
+
)
|
65
|
+
RUBY
|
66
|
+
end
|
67
|
+
|
19
68
|
def update_tailwind_config
|
20
69
|
tailwind_config_path = "app/assets/tailwind/application.css"
|
21
70
|
|
@@ -42,10 +91,17 @@ module DaisyuiOnPhlex
|
|
42
91
|
end
|
43
92
|
|
44
93
|
def show_readme
|
94
|
+
components_source_path = File.join(self.class.source_root, "components")
|
95
|
+
component_count = Dir.glob(File.join(components_source_path, "*.rb")).count
|
96
|
+
|
45
97
|
say <<~TEXT, :green
|
46
98
|
|
47
99
|
DaisyUI On Phlex has been installed! 🎉
|
48
100
|
|
101
|
+
✅ All #{component_count} components have been copied to vendor/daisyui_on_phlex/
|
102
|
+
✅ DaisyUI plugin configured for Tailwind CSS
|
103
|
+
✅ Ready to use in your Phlex views
|
104
|
+
|
49
105
|
You can now use DaisyUI components in your Phlex views:
|
50
106
|
|
51
107
|
# In your Phlex view
|
@@ -61,19 +117,25 @@ module DaisyuiOnPhlex
|
|
61
117
|
end
|
62
118
|
end
|
63
119
|
|
64
|
-
|
65
|
-
- Button
|
66
|
-
-
|
67
|
-
-
|
68
|
-
-
|
69
|
-
-
|
70
|
-
|
71
|
-
|
120
|
+
All 61+ components are now available:
|
121
|
+
- Button, Alert, Card, Badge, Modal, Input
|
122
|
+
- Navigation: Navbar, Menu, Breadcrumbs, Tabs
|
123
|
+
- Data Display: Table, Stat, Timeline, Avatar
|
124
|
+
- Forms: Checkbox, Radio, Select, Toggle
|
125
|
+
- And many more...
|
126
|
+
|
127
|
+
Components are in vendor/daisyui_on_phlex/components/ and can be customized.
|
72
128
|
|
73
|
-
For
|
129
|
+
For documentation: https://github.com/jacob/daisyui-on-phlex
|
74
130
|
|
75
131
|
TEXT
|
76
132
|
end
|
133
|
+
|
134
|
+
private
|
135
|
+
|
136
|
+
def gem_installed?(name)
|
137
|
+
Gem::Specification.find_all_by_name(name).any?
|
138
|
+
end
|
77
139
|
end
|
78
140
|
end
|
79
141
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: daisyui_on_phlex
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- JacobAlexander
|
@@ -16,6 +16,9 @@ dependencies:
|
|
16
16
|
- - "~>"
|
17
17
|
- !ruby/object:Gem::Version
|
18
18
|
version: 0.5.1
|
19
|
+
- - ">="
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 0.5.1
|
19
22
|
type: :runtime
|
20
23
|
prerelease: false
|
21
24
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -23,6 +26,9 @@ dependencies:
|
|
23
26
|
- - "~>"
|
24
27
|
- !ruby/object:Gem::Version
|
25
28
|
version: 0.5.1
|
29
|
+
- - ">="
|
30
|
+
- !ruby/object:Gem::Version
|
31
|
+
version: 0.5.1
|
26
32
|
- !ruby/object:Gem::Dependency
|
27
33
|
name: phlex-rails
|
28
34
|
requirement: !ruby/object:Gem::Requirement
|
@@ -30,6 +36,9 @@ dependencies:
|
|
30
36
|
- - "~>"
|
31
37
|
- !ruby/object:Gem::Version
|
32
38
|
version: '2.1'
|
39
|
+
- - ">="
|
40
|
+
- !ruby/object:Gem::Version
|
41
|
+
version: 2.1.0
|
33
42
|
type: :runtime
|
34
43
|
prerelease: false
|
35
44
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -37,40 +46,43 @@ dependencies:
|
|
37
46
|
- - "~>"
|
38
47
|
- !ruby/object:Gem::Version
|
39
48
|
version: '2.1'
|
49
|
+
- - ">="
|
50
|
+
- !ruby/object:Gem::Version
|
51
|
+
version: 2.1.0
|
40
52
|
- !ruby/object:Gem::Dependency
|
41
53
|
name: railties
|
42
54
|
requirement: !ruby/object:Gem::Requirement
|
43
55
|
requirements:
|
44
|
-
- - "~>"
|
45
|
-
- !ruby/object:Gem::Version
|
46
|
-
version: '8.0'
|
47
56
|
- - ">="
|
48
57
|
- !ruby/object:Gem::Version
|
49
|
-
version: '
|
58
|
+
version: '6.0'
|
50
59
|
type: :runtime
|
51
60
|
prerelease: false
|
52
61
|
version_requirements: !ruby/object:Gem::Requirement
|
53
62
|
requirements:
|
54
|
-
- - "~>"
|
55
|
-
- !ruby/object:Gem::Version
|
56
|
-
version: '8.0'
|
57
63
|
- - ">="
|
58
64
|
- !ruby/object:Gem::Version
|
59
|
-
version: '
|
65
|
+
version: '6.0'
|
60
66
|
- !ruby/object:Gem::Dependency
|
61
67
|
name: tailwind_merge
|
62
68
|
requirement: !ruby/object:Gem::Requirement
|
63
69
|
requirements:
|
64
70
|
- - "~>"
|
65
71
|
- !ruby/object:Gem::Version
|
66
|
-
version: '1.
|
72
|
+
version: '1.3'
|
73
|
+
- - ">="
|
74
|
+
- !ruby/object:Gem::Version
|
75
|
+
version: 1.3.0
|
67
76
|
type: :runtime
|
68
77
|
prerelease: false
|
69
78
|
version_requirements: !ruby/object:Gem::Requirement
|
70
79
|
requirements:
|
71
80
|
- - "~>"
|
72
81
|
- !ruby/object:Gem::Version
|
73
|
-
version: '1.
|
82
|
+
version: '1.3'
|
83
|
+
- - ">="
|
84
|
+
- !ruby/object:Gem::Version
|
85
|
+
version: 1.3.0
|
74
86
|
- !ruby/object:Gem::Dependency
|
75
87
|
name: rails
|
76
88
|
requirement: !ruby/object:Gem::Requirement
|
@@ -130,7 +142,6 @@ extra_rdoc_files: []
|
|
130
142
|
files:
|
131
143
|
- ".github/copilot-instructions.md"
|
132
144
|
- CHANGELOG.md
|
133
|
-
- INSTALLATION.md
|
134
145
|
- LICENSE
|
135
146
|
- README.md
|
136
147
|
- Rakefile
|
data/INSTALLATION.md
DELETED
@@ -1,129 +0,0 @@
|
|
1
|
-
# DaisyUI on Phlex Installation
|
2
|
-
|
3
|
-
After installing the gem, follow these steps to set up DaisyUI styles in your Rails application:
|
4
|
-
|
5
|
-
## 1. Import the main CSS file
|
6
|
-
|
7
|
-
Add the following import to your `app/assets/stylesheets/application.css` (or `app/assets/stylesheets/application.tailwind.css` if using tailwindcss-rails):
|
8
|
-
|
9
|
-
```css
|
10
|
-
@import "tailwindcss";
|
11
|
-
@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
|
12
|
-
```
|
13
|
-
|
14
|
-
## 2. Configure your HTML layout
|
15
|
-
|
16
|
-
Make sure your HTML layout supports theme switching by adding the `data-theme` attribute to your `<html>` tag:
|
17
|
-
|
18
|
-
```erb
|
19
|
-
<!DOCTYPE html>
|
20
|
-
<html data-theme="light">
|
21
|
-
<head>
|
22
|
-
<!-- Your head content -->
|
23
|
-
</head>
|
24
|
-
<body>
|
25
|
-
<!-- Your body content -->
|
26
|
-
</body>
|
27
|
-
</html>
|
28
|
-
```
|
29
|
-
|
30
|
-
## 3. Theme Configuration
|
31
|
-
|
32
|
-
The CSS file includes the most popular DaisyUI themes by default:
|
33
|
-
- `light` (default)
|
34
|
-
- `dark` (prefers dark mode)
|
35
|
-
- `cupcake`, `dracula`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`
|
36
|
-
- `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`
|
37
|
-
- `fantasy`, `wireframe`, `black`, `luxury`, `autumn`, `business`
|
38
|
-
- `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`
|
39
|
-
|
40
|
-
## 4. Theme Switching
|
41
|
-
|
42
|
-
To enable theme switching, you can use the `data-theme` attribute:
|
43
|
-
|
44
|
-
```erb
|
45
|
-
<select data-choose-theme>
|
46
|
-
<option value="light">Light</option>
|
47
|
-
<option value="dark">Dark</option>
|
48
|
-
<option value="cupcake">Cupcake</option>
|
49
|
-
<option value="dracula">Dracula</option>
|
50
|
-
<!-- Add more themes as needed -->
|
51
|
-
</select>
|
52
|
-
```
|
53
|
-
|
54
|
-
For automatic theme switching, consider using the [theme-change](https://github.com/saadeghi/theme-change) library:
|
55
|
-
|
56
|
-
```bash
|
57
|
-
npm install theme-change
|
58
|
-
```
|
59
|
-
|
60
|
-
Then initialize it in your JavaScript:
|
61
|
-
|
62
|
-
```javascript
|
63
|
-
import { themeChange } from 'theme-change'
|
64
|
-
themeChange()
|
65
|
-
```
|
66
|
-
|
67
|
-
## 5. Custom Themes
|
68
|
-
|
69
|
-
If you want to add custom themes or modify the theme list, you can create your own CSS file that overrides the default configuration:
|
70
|
-
|
71
|
-
```css
|
72
|
-
@import "tailwindcss";
|
73
|
-
|
74
|
-
@plugin "daisyui" {
|
75
|
-
themes: light --default, dark --prefersdark, your-custom-theme;
|
76
|
-
}
|
77
|
-
|
78
|
-
@plugin "daisyui/theme" {
|
79
|
-
name: "your-custom-theme";
|
80
|
-
default: false;
|
81
|
-
color-scheme: light;
|
82
|
-
|
83
|
-
--color-primary: oklch(55% 0.3 240);
|
84
|
-
--color-primary-content: oklch(98% 0.01 240);
|
85
|
-
/* Add more custom colors */
|
86
|
-
}
|
87
|
-
|
88
|
-
@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
|
89
|
-
```
|
90
|
-
|
91
|
-
## 6. Component Usage
|
92
|
-
|
93
|
-
Now you can use DaisyUI on Phlex components in your views:
|
94
|
-
|
95
|
-
```ruby
|
96
|
-
# In your view or component
|
97
|
-
render DaisyuiOnPhlex::Components::Button.new(variant: :primary) do
|
98
|
-
"Click me!"
|
99
|
-
end
|
100
|
-
|
101
|
-
render DaisyuiOnPhlex::Components::Card.new(class: "w-96") do |card|
|
102
|
-
card.with_body do
|
103
|
-
"This is a card with DaisyUI styling"
|
104
|
-
end
|
105
|
-
end
|
106
|
-
```
|
107
|
-
|
108
|
-
## Features Included
|
109
|
-
|
110
|
-
The main CSS file provides:
|
111
|
-
|
112
|
-
- **Theme Configuration**: 25+ popular DaisyUI themes enabled
|
113
|
-
- **Accessibility Enhancements**: Better focus styles, high contrast support
|
114
|
-
- **Responsive Design**: Mobile-first approach with responsive utilities
|
115
|
-
- **Animation Support**: Smooth transitions and micro-interactions
|
116
|
-
- **Print Styles**: Optimized printing experience
|
117
|
-
- **Performance**: Reduced motion support for accessibility
|
118
|
-
- **Developer Experience**: Enhanced component integration
|
119
|
-
|
120
|
-
## Troubleshooting
|
121
|
-
|
122
|
-
If you encounter issues:
|
123
|
-
|
124
|
-
1. **Styles not loading**: Ensure the import is after `@import "tailwindcss";`
|
125
|
-
2. **Themes not working**: Check that your HTML has the `data-theme` attribute
|
126
|
-
3. **Build errors**: Make sure you have Tailwind CSS properly configured in your Rails app
|
127
|
-
4. **Missing components**: Verify that the gem is properly installed and required
|
128
|
-
|
129
|
-
For more help, check the [project repository](https://github.com/jacob/daisyui-on-phlex) or open an issue.
|