daisyui_on_phlex 0.5.1 → 0.5.3
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/INSTALLATION.md +215 -0
- data/README.md +45 -7
- data/lib/daisyui_on_phlex/generators/all_generator.rb +73 -0
- data/lib/daisyui_on_phlex/generators/component_generator.rb +79 -0
- data/lib/daisyui_on_phlex/generators/install_generator.rb +17 -8
- data/lib/daisyui_on_phlex/javascripts/daisyui_on_phlex.js +114 -0
- data/lib/daisyui_on_phlex/version.rb +1 -1
- metadata +5 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fb6184bc6df61d0f5be143b381d8a67619239b25cd9ff674f33e0770c70519bc
|
|
4
|
+
data.tar.gz: e848814aeb9494b4e3a67a4032c9e9b0c7fb63243cbb3c867ae7bf94b7138325
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0315beb18c82bc11bbc41e887439a627c926aa4fa2a45fb9714b7b59ebdaec8f3c1b773a68571f7bc0d63d8567138134f8772a251b5299edef693a277a999617
|
|
7
|
+
data.tar.gz: 4b55f1d39e8e9b48528279af443245569fdb61fa35515c9167d8d193adf7e0d534ae7ac1d504cb775d7e955d1b1d73486adf0145ffe2ab399ad787cd5c0b7168
|
data/INSTALLATION.md
ADDED
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
# DaisyUI on Phlex Installation
|
|
2
|
+
|
|
3
|
+
After installing the gem, run the install generator to set up everything automatically:
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
rails generate daisyui_on_phlex:install
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
This generator will handle all setup for you, but here's what it does behind the scenes:
|
|
10
|
+
|
|
11
|
+
## What the Generator Does
|
|
12
|
+
|
|
13
|
+
### 1. Copies Components to Vendor Directory
|
|
14
|
+
|
|
15
|
+
All 61+ DaisyUI components are copied to `vendor/daisyui_on_phlex/components/` in your Rails application. This gives you:
|
|
16
|
+
|
|
17
|
+
- Full ownership of component code
|
|
18
|
+
- Ability to customize components locally
|
|
19
|
+
- Version control for your modifications
|
|
20
|
+
- No runtime gem dependencies for component logic
|
|
21
|
+
|
|
22
|
+
### 2. Configures Autoloader
|
|
23
|
+
|
|
24
|
+
Creates `config/initializers/daisyui_on_phlex_vendor.rb` to tell Rails to load components from your vendor directory instead of the gem.
|
|
25
|
+
|
|
26
|
+
### 3. Installs Dependencies
|
|
27
|
+
|
|
28
|
+
- Adds `phlex-rails` gem if not already present
|
|
29
|
+
- Downloads latest DaisyUI JavaScript files
|
|
30
|
+
- Configures Tailwind CSS with DaisyUI plugin
|
|
31
|
+
|
|
32
|
+
### 4. Sets Up Styling
|
|
33
|
+
|
|
34
|
+
### 4. Sets Up Styling
|
|
35
|
+
|
|
36
|
+
Adds the following import to your `app/assets/stylesheets/application.css` (or `app/assets/stylesheets/application.tailwind.css` if using tailwindcss-rails):
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
@import "tailwindcss";
|
|
40
|
+
@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Manual Configuration (Optional)
|
|
44
|
+
|
|
45
|
+
If you prefer manual setup or need to customize the installation:
|
|
46
|
+
|
|
47
|
+
### 1. Import the main CSS file
|
|
48
|
+
|
|
49
|
+
Add the following import to your CSS file:
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
@import "tailwindcss";
|
|
53
|
+
@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 2. Configure your HTML layout
|
|
57
|
+
|
|
58
|
+
Make sure your HTML layout supports theme switching by adding the `data-theme` attribute to your `<html>` tag:
|
|
59
|
+
|
|
60
|
+
```erb
|
|
61
|
+
<!DOCTYPE html>
|
|
62
|
+
<html data-theme="light">
|
|
63
|
+
<head>
|
|
64
|
+
<!-- Your head content -->
|
|
65
|
+
</head>
|
|
66
|
+
<body>
|
|
67
|
+
<!-- Your body content -->
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### 3. Theme Configuration
|
|
73
|
+
|
|
74
|
+
The CSS file includes the most popular DaisyUI themes by default:
|
|
75
|
+
- `light` (default)
|
|
76
|
+
- `dark` (prefers dark mode)
|
|
77
|
+
- `cupcake`, `dracula`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`
|
|
78
|
+
- `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`
|
|
79
|
+
- `fantasy`, `wireframe`, `black`, `luxury`, `autumn`, `business`
|
|
80
|
+
- `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`
|
|
81
|
+
|
|
82
|
+
### 4. Theme Switching
|
|
83
|
+
|
|
84
|
+
To enable theme switching, you can use the `data-theme` attribute:
|
|
85
|
+
|
|
86
|
+
```erb
|
|
87
|
+
<select data-choose-theme>
|
|
88
|
+
<option value="light">Light</option>
|
|
89
|
+
<option value="dark">Dark</option>
|
|
90
|
+
<option value="cupcake">Cupcake</option>
|
|
91
|
+
<option value="dracula">Dracula</option>
|
|
92
|
+
<!-- Add more themes as needed -->
|
|
93
|
+
</select>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
For automatic theme switching, consider using the [theme-change](https://github.com/saadeghi/theme-change) library:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
npm install theme-change
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Then initialize it in your JavaScript:
|
|
103
|
+
|
|
104
|
+
```javascript
|
|
105
|
+
import { themeChange } from 'theme-change'
|
|
106
|
+
themeChange()
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### 5. Custom Themes
|
|
110
|
+
|
|
111
|
+
If you want to add custom themes or modify the theme list, you can create your own CSS file that overrides the default configuration:
|
|
112
|
+
|
|
113
|
+
```css
|
|
114
|
+
@import "tailwindcss";
|
|
115
|
+
|
|
116
|
+
@plugin "daisyui" {
|
|
117
|
+
themes: light --default, dark --prefersdark, your-custom-theme;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@plugin "daisyui/theme" {
|
|
121
|
+
name: "your-custom-theme";
|
|
122
|
+
default: false;
|
|
123
|
+
color-scheme: light;
|
|
124
|
+
|
|
125
|
+
--color-primary: oklch(55% 0.3 240);
|
|
126
|
+
--color-primary-content: oklch(98% 0.01 240);
|
|
127
|
+
/* Add more custom colors */
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@import "daisyui_on_phlex/stylesheets/daisyui_on_phlex.css";
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Component Usage
|
|
134
|
+
|
|
135
|
+
After running the generator, all components are available in your `vendor/daisyui_on_phlex/components/` directory and automatically loaded. You can use them directly:
|
|
136
|
+
|
|
137
|
+
```ruby
|
|
138
|
+
# In your view or component
|
|
139
|
+
render DaisyuiOnPhlex::Components::Button.new(variant: :primary) do
|
|
140
|
+
"Click me!"
|
|
141
|
+
end
|
|
142
|
+
|
|
143
|
+
render DaisyuiOnPhlex::Components::Card.new(class: "w-96") do |card|
|
|
144
|
+
card.with_body do
|
|
145
|
+
"This is a card with DaisyUI styling"
|
|
146
|
+
end
|
|
147
|
+
end
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
## Customizing Components
|
|
151
|
+
|
|
152
|
+
Since components are copied to your `vendor/daisyui_on_phlex/components/` directory, you can modify them directly:
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
# View all available components
|
|
156
|
+
ls vendor/daisyui_on_phlex/components/
|
|
157
|
+
|
|
158
|
+
# Edit a specific component
|
|
159
|
+
code vendor/daisyui_on_phlex/components/button.rb
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Any changes you make will be preserved in your application and version control. This approach gives you complete control over your component implementations.
|
|
163
|
+
|
|
164
|
+
## Vendor Directory Structure
|
|
165
|
+
|
|
166
|
+
After installation, your vendor directory will contain:
|
|
167
|
+
|
|
168
|
+
```
|
|
169
|
+
vendor/daisyui_on_phlex/
|
|
170
|
+
├── base.rb # Base class for all components
|
|
171
|
+
└── components/
|
|
172
|
+
├── accordion.rb
|
|
173
|
+
├── alert.rb
|
|
174
|
+
├── avatar.rb
|
|
175
|
+
├── badge.rb
|
|
176
|
+
├── button.rb
|
|
177
|
+
├── card.rb
|
|
178
|
+
├── ... # All 61+ components
|
|
179
|
+
└── tooltip.rb
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Features Included
|
|
183
|
+
|
|
184
|
+
The main CSS file provides:
|
|
185
|
+
|
|
186
|
+
- **Theme Configuration**: 25+ popular DaisyUI themes enabled
|
|
187
|
+
- **Accessibility Enhancements**: Better focus styles, high contrast support
|
|
188
|
+
- **Responsive Design**: Mobile-first approach with responsive utilities
|
|
189
|
+
- **Animation Support**: Smooth transitions and micro-interactions
|
|
190
|
+
- **Print Styles**: Optimized printing experience
|
|
191
|
+
- **Performance**: Reduced motion support for accessibility
|
|
192
|
+
- **Developer Experience**: Enhanced component integration
|
|
193
|
+
|
|
194
|
+
## Troubleshooting
|
|
195
|
+
|
|
196
|
+
If you encounter issues:
|
|
197
|
+
|
|
198
|
+
1. **Generator fails**: Ensure you're in a Rails application directory and have proper permissions
|
|
199
|
+
2. **Components not found**: Check that `config/initializers/daisyui_on_phlex_vendor.rb` was created
|
|
200
|
+
3. **Styles not loading**: Ensure the CSS import is after `@import "tailwindcss";`
|
|
201
|
+
4. **Themes not working**: Check that your HTML has the `data-theme` attribute
|
|
202
|
+
5. **Build errors**: Make sure you have Tailwind CSS properly configured in your Rails app
|
|
203
|
+
6. **Vendor directory issues**: Verify components were copied to `vendor/daisyui_on_phlex/components/`
|
|
204
|
+
|
|
205
|
+
### Re-running the Generator
|
|
206
|
+
|
|
207
|
+
You can safely re-run the generator to update components or fix configuration:
|
|
208
|
+
|
|
209
|
+
```bash
|
|
210
|
+
rails generate daisyui_on_phlex:install
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
This will overwrite components in vendor but preserve any customizations in your initializer.
|
|
214
|
+
|
|
215
|
+
For more help, check the [project repository](https://github.com/jacob/daisyui-on-phlex) or open an issue.
|
data/README.md
CHANGED
|
@@ -49,6 +49,13 @@ Or install it yourself as:
|
|
|
49
49
|
$ gem install daisyui_on_phlex
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
+
## Requirements
|
|
53
|
+
|
|
54
|
+
This gem has been tested with:
|
|
55
|
+
- **Rails 8.0** with **Tailwind CSS** and **esbuild**
|
|
56
|
+
- Ruby 3.4+
|
|
57
|
+
- Phlex framework
|
|
58
|
+
|
|
52
59
|
## Setup
|
|
53
60
|
|
|
54
61
|
Run the install generator to set up DaisyUI components in your Rails application:
|
|
@@ -57,18 +64,45 @@ Run the install generator to set up DaisyUI components in your Rails application
|
|
|
57
64
|
$ rails generate daisyui_on_phlex:install
|
|
58
65
|
```
|
|
59
66
|
|
|
67
|
+
Next import js/css from vendor directory.
|
|
68
|
+
|
|
60
69
|
This will:
|
|
61
70
|
1. **Copy all 61+ components** to `vendor/daisyui_on_phlex/components/` in your Rails app
|
|
62
|
-
2. **
|
|
63
|
-
3.
|
|
64
|
-
4.
|
|
65
|
-
5.
|
|
66
|
-
6.
|
|
67
|
-
|
|
71
|
+
2. **Copy CSS and JS files** to `vendor/daisyui_on_phlex/stylesheets/` and `javascripts/`
|
|
72
|
+
3. **Configure autoloader** to serve components from vendor directory instead of gem
|
|
73
|
+
4. Install **phlex-rails** dependency if not already present
|
|
74
|
+
5. **Create vendor initializer** for automatic component loading
|
|
75
|
+
6. Provide usage instructions for CSS/JS integration
|
|
76
|
+
|
|
77
|
+
### Import CSS and JavaScript
|
|
78
|
+
|
|
79
|
+
After running the generator, add these imports to your application:
|
|
80
|
+
|
|
81
|
+
**For modern Rails (importmap/esbuild/webpack):**
|
|
82
|
+
```css
|
|
83
|
+
/* In app/assets/stylesheets/application.css or application.tailwind.css */
|
|
84
|
+
@import '../vendor/daisyui_on_phlex/stylesheets/daisyui_on_phlex.css';
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
```javascript
|
|
88
|
+
// In app/assets/javascripts/application.js
|
|
89
|
+
import '../vendor/daisyui_on_phlex/javascripts/daisyui_on_phlex.js';
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
**For Sprockets (Rails 6 and older):**
|
|
93
|
+
```css
|
|
94
|
+
/* In app/assets/stylesheets/application.css */
|
|
95
|
+
//= require ../vendor/daisyui_on_phlex/stylesheets/daisyui_on_phlex
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
// In app/assets/javascripts/application.js
|
|
100
|
+
//= require ../vendor/daisyui_on_phlex/javascripts/daisyui_on_phlex
|
|
101
|
+
```
|
|
68
102
|
|
|
69
103
|
### Why Copy to Vendor?
|
|
70
104
|
|
|
71
|
-
Unlike traditional gems that load components from memory, DaisyUI On Phlex
|
|
105
|
+
Unlike traditional gems that load components from memory, DaisyUI On Phlex copying components directly to your application. This gives you:
|
|
72
106
|
|
|
73
107
|
- ✅ **Full ownership** of component code in your app
|
|
74
108
|
- ✅ **Easy customization** - edit components locally
|
|
@@ -363,6 +397,10 @@ After installation, your vendor directory will contain:
|
|
|
363
397
|
```
|
|
364
398
|
vendor/daisyui_on_phlex/
|
|
365
399
|
├── base.rb # Base class for all components
|
|
400
|
+
├── stylesheets/
|
|
401
|
+
│ └── daisyui_on_phlex.css # Complete DaisyUI CSS with themes
|
|
402
|
+
├── javascripts/
|
|
403
|
+
│ └── daisyui_on_phlex.js # Theme switching and utilities
|
|
366
404
|
└── components/
|
|
367
405
|
├── accordion.rb
|
|
368
406
|
├── alert.rb
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
require "rails/generators/base"
|
|
4
|
+
|
|
5
|
+
module DaisyuiOnPhlex
|
|
6
|
+
module Generators
|
|
7
|
+
class AllGenerator < Rails::Generators::Base
|
|
8
|
+
desc "Copy all DaisyUI components to vendor directory"
|
|
9
|
+
namespace "daisyui_on_phlex:all"
|
|
10
|
+
|
|
11
|
+
source_root File.expand_path("../../components", __dir__)
|
|
12
|
+
class_option :force, type: :boolean, default: false
|
|
13
|
+
|
|
14
|
+
def copy_all_components
|
|
15
|
+
say "Copying all DaisyUI components to vendor directory...", :green
|
|
16
|
+
|
|
17
|
+
component_files = Dir.glob(File.join(self.class.source_root, "*.rb"))
|
|
18
|
+
|
|
19
|
+
component_files.each do |component_path|
|
|
20
|
+
component_file_name = File.basename(component_path)
|
|
21
|
+
destination_path = Rails.root.join("vendor/daisyui_on_phlex/components", component_file_name)
|
|
22
|
+
|
|
23
|
+
copy_file component_path, destination_path, force: options["force"]
|
|
24
|
+
end
|
|
25
|
+
end
|
|
26
|
+
|
|
27
|
+
def copy_base_class
|
|
28
|
+
say "Copying base class...", :green
|
|
29
|
+
base_path = File.expand_path("../../base.rb", __dir__)
|
|
30
|
+
destination_path = Rails.root.join("vendor/daisyui_on_phlex/base.rb")
|
|
31
|
+
|
|
32
|
+
copy_file base_path, destination_path, force: options["force"]
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
def create_vendor_initializer
|
|
36
|
+
vendor_initializer_path = Rails.root.join("config/initializers/daisyui_on_phlex_vendor.rb")
|
|
37
|
+
|
|
38
|
+
create_file vendor_initializer_path, <<~RUBY, force: options["force"]
|
|
39
|
+
# frozen_string_literal: true
|
|
40
|
+
|
|
41
|
+
# Load vendor DaisyUI components
|
|
42
|
+
Rails.autoloaders.main.push_dir(
|
|
43
|
+
Rails.root.join("vendor/daisyui_on_phlex"), namespace: DaisyuiOnPhlex
|
|
44
|
+
)
|
|
45
|
+
RUBY
|
|
46
|
+
end
|
|
47
|
+
|
|
48
|
+
def show_completion_message
|
|
49
|
+
component_count = Dir.glob(File.join(self.class.source_root, "*.rb")).count
|
|
50
|
+
|
|
51
|
+
say <<~TEXT, :green
|
|
52
|
+
|
|
53
|
+
✅ Successfully copied #{component_count} DaisyUI components to vendor/daisyui_on_phlex/
|
|
54
|
+
|
|
55
|
+
All components are now available in your Rails application:
|
|
56
|
+
|
|
57
|
+
# Use any component
|
|
58
|
+
render DaisyuiOnPhlex::Components::Button.new(variant: :primary) do
|
|
59
|
+
"Click me!"
|
|
60
|
+
end
|
|
61
|
+
|
|
62
|
+
render DaisyuiOnPhlex::Components::Alert.new(variant: :success) do
|
|
63
|
+
"Success!"
|
|
64
|
+
end
|
|
65
|
+
|
|
66
|
+
The components are now in your project and can be customized as needed.
|
|
67
|
+
You can find them in: vendor/daisyui_on_phlex/components/
|
|
68
|
+
|
|
69
|
+
TEXT
|
|
70
|
+
end
|
|
71
|
+
end
|
|
72
|
+
end
|
|
73
|
+
end
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
require "rails/generators/base"
|
|
4
|
+
|
|
5
|
+
module DaisyuiOnPhlex
|
|
6
|
+
module Generators
|
|
7
|
+
class ComponentGenerator < Rails::Generators::Base
|
|
8
|
+
desc "Generate DaisyUI component"
|
|
9
|
+
namespace "daisyui_on_phlex:component"
|
|
10
|
+
|
|
11
|
+
source_root File.expand_path("../../components", __dir__)
|
|
12
|
+
argument :component_name, type: :string, required: true
|
|
13
|
+
class_option :force, type: :boolean, default: false
|
|
14
|
+
|
|
15
|
+
def generate_component
|
|
16
|
+
if component_not_found?
|
|
17
|
+
say "Component not found: #{component_name}", :red
|
|
18
|
+
available_components = Dir.children(self.class.source_root)
|
|
19
|
+
.select { |f| f.end_with?('.rb') }
|
|
20
|
+
.map { |f| f.chomp('.rb') }
|
|
21
|
+
.sort
|
|
22
|
+
|
|
23
|
+
say "Available components: #{available_components.join(', ')}", :yellow
|
|
24
|
+
exit
|
|
25
|
+
end
|
|
26
|
+
|
|
27
|
+
say "Copying #{component_name} component...", :green
|
|
28
|
+
end
|
|
29
|
+
|
|
30
|
+
def copy_component_file
|
|
31
|
+
component_file_path = File.join(self.class.source_root, "#{component_file_name}.rb")
|
|
32
|
+
destination_path = Rails.root.join("vendor/daisyui_on_phlex/components", "#{component_file_name}.rb")
|
|
33
|
+
|
|
34
|
+
copy_file component_file_path, destination_path, force: options["force"]
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
def create_vendor_initializer
|
|
38
|
+
vendor_initializer_path = Rails.root.join("config/initializers/daisyui_on_phlex_vendor.rb")
|
|
39
|
+
|
|
40
|
+
unless File.exist?(vendor_initializer_path)
|
|
41
|
+
create_file vendor_initializer_path, <<~RUBY
|
|
42
|
+
# frozen_string_literal: true
|
|
43
|
+
|
|
44
|
+
# Load vendor DaisyUI components
|
|
45
|
+
Rails.autoloaders.main.push_dir(
|
|
46
|
+
Rails.root.join("vendor/daisyui_on_phlex"), namespace: DaisyuiOnPhlex
|
|
47
|
+
)
|
|
48
|
+
RUBY
|
|
49
|
+
end
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
def show_usage
|
|
53
|
+
say <<~TEXT, :green
|
|
54
|
+
|
|
55
|
+
#{component_name.capitalize} component has been copied to vendor/daisyui_on_phlex/components/
|
|
56
|
+
|
|
57
|
+
You can now use it in your Phlex views:
|
|
58
|
+
|
|
59
|
+
render DaisyuiOnPhlex::Components::#{component_name.classify}.new do
|
|
60
|
+
# Component content
|
|
61
|
+
end
|
|
62
|
+
|
|
63
|
+
The component is now in your project and can be customized as needed.
|
|
64
|
+
|
|
65
|
+
TEXT
|
|
66
|
+
end
|
|
67
|
+
|
|
68
|
+
private
|
|
69
|
+
|
|
70
|
+
def component_not_found?
|
|
71
|
+
!File.exist?(File.join(self.class.source_root, "#{component_file_name}.rb"))
|
|
72
|
+
end
|
|
73
|
+
|
|
74
|
+
def component_file_name
|
|
75
|
+
component_name.underscore
|
|
76
|
+
end
|
|
77
|
+
end
|
|
78
|
+
end
|
|
79
|
+
end
|
|
@@ -70,10 +70,17 @@ module DaisyuiOnPhlex
|
|
|
70
70
|
|
|
71
71
|
def copy_base_class
|
|
72
72
|
say "Copying base class...", :green
|
|
73
|
-
# We are using relative path from source_root
|
|
74
73
|
copy_file "base.rb", Rails.root.join("vendor/daisyui_on_phlex/base.rb"), force: options["force"]
|
|
75
74
|
end
|
|
76
75
|
|
|
76
|
+
def copy_stylesheets_and_js
|
|
77
|
+
say "Copying CSS and JS files to vendor...", :green
|
|
78
|
+
|
|
79
|
+
# Copy CSS and JS files
|
|
80
|
+
copy_file "stylesheets/daisyui_on_phlex.css", Rails.root.join("vendor/daisyui_on_phlex/stylesheets/daisyui_on_phlex.css"), force: options["force"]
|
|
81
|
+
copy_file "javascripts/daisyui_on_phlex.js", Rails.root.join("vendor/daisyui_on_phlex/javascripts/daisyui_on_phlex.js"), force: options["force"]
|
|
82
|
+
end
|
|
83
|
+
|
|
77
84
|
def create_vendor_initializer
|
|
78
85
|
vendor_initializer_path = Rails.root.join("config/initializers/daisyui_on_phlex.rb")
|
|
79
86
|
|
|
@@ -107,16 +114,18 @@ module DaisyuiOnPhlex
|
|
|
107
114
|
end
|
|
108
115
|
|
|
109
116
|
def update_tailwind_config
|
|
110
|
-
say "📝 To include DaisyUI styles in your application:", :green
|
|
117
|
+
say "📝 To include DaisyUI styles and JS in your application:", :green
|
|
111
118
|
say ""
|
|
112
119
|
say "1. Add to your main CSS file (application.css or application.tailwind.css):", :yellow
|
|
113
|
-
say "
|
|
120
|
+
say " @import '../../../vendor/daisyui_on_phlex/stylesheets/daisyui_on_phlex.css';", :cyan
|
|
114
121
|
say ""
|
|
115
|
-
say "2.
|
|
116
|
-
say "
|
|
122
|
+
say "2. Add to your JavaScript file (application.js):", :yellow
|
|
123
|
+
say " import '../../../vendor/daisyui_on_phlex/javascripts/daisyui_on_phlex.js';", :cyan
|
|
117
124
|
say ""
|
|
118
|
-
say "3. For Tailwind CSS, ensure your
|
|
119
|
-
say '
|
|
125
|
+
say "3. For Tailwind CSS v4, ensure your tailwind_app.css includes:", :yellow
|
|
126
|
+
say ' @import "tailwindcss";', :cyan
|
|
127
|
+
say ' @source "app/**/*.{rb}";', :cyan
|
|
128
|
+
say ' @import \'../../../vendor/daisyui_on_phlex/stylesheets/daisyui_on_phlex.css\';', :cyan
|
|
120
129
|
say ""
|
|
121
130
|
end
|
|
122
131
|
|
|
@@ -129,7 +138,7 @@ module DaisyuiOnPhlex
|
|
|
129
138
|
DaisyUI On Phlex has been installed! 🎉
|
|
130
139
|
|
|
131
140
|
✅ All #{component_count} components have been copied to vendor/daisyui_on_phlex/
|
|
132
|
-
✅ DaisyUI CSS & JS
|
|
141
|
+
✅ DaisyUI CSS & JS files copied to vendor/daisyui_on_phlex/stylesheets/ and javascripts/
|
|
133
142
|
✅ Vendor initializer created (config/initializers/daisyui_on_phlex.rb)
|
|
134
143
|
✅ Ready to use in your Phlex views
|
|
135
144
|
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DaisyUI On Phlex - JavaScript utilities
|
|
3
|
+
*
|
|
4
|
+
* This file provides theme switching and component interaction utilities
|
|
5
|
+
* for DaisyUI components in Phlex applications.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
// Theme Management
|
|
9
|
+
class DaisyUIThemeManager {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.init();
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
init() {
|
|
15
|
+
// Set initial theme based on user preference or system
|
|
16
|
+
this.setInitialTheme();
|
|
17
|
+
|
|
18
|
+
// Listen for theme changes
|
|
19
|
+
this.setupThemeListeners();
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
setInitialTheme() {
|
|
23
|
+
const savedTheme = localStorage.getItem('daisyui-theme');
|
|
24
|
+
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
25
|
+
|
|
26
|
+
if (savedTheme) {
|
|
27
|
+
this.setTheme(savedTheme);
|
|
28
|
+
} else if (systemPrefersDark) {
|
|
29
|
+
this.setTheme('dark');
|
|
30
|
+
} else {
|
|
31
|
+
this.setTheme('light');
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
setTheme(theme) {
|
|
36
|
+
document.documentElement.setAttribute('data-theme', theme);
|
|
37
|
+
localStorage.setItem('daisyui-theme', theme);
|
|
38
|
+
|
|
39
|
+
// Dispatch custom event for components that need to react to theme changes
|
|
40
|
+
window.dispatchEvent(new CustomEvent('daisyui-theme-change', {
|
|
41
|
+
detail: { theme }
|
|
42
|
+
}));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
setupThemeListeners() {
|
|
46
|
+
// Listen for theme selector changes
|
|
47
|
+
document.addEventListener('change', (e) => {
|
|
48
|
+
if (e.target.hasAttribute('data-choose-theme')) {
|
|
49
|
+
this.setTheme(e.target.value);
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// System theme change detection
|
|
54
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
55
|
+
if (!localStorage.getItem('daisyui-theme')) {
|
|
56
|
+
this.setTheme(e.matches ? 'dark' : 'light');
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
getCurrentTheme() {
|
|
62
|
+
return document.documentElement.getAttribute('data-theme');
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
toggleTheme() {
|
|
66
|
+
const currentTheme = this.getCurrentTheme();
|
|
67
|
+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
68
|
+
this.setTheme(newTheme);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Component Utilities
|
|
73
|
+
class DaisyUIComponents {
|
|
74
|
+
static closeModal(modalId) {
|
|
75
|
+
const modal = document.getElementById(modalId);
|
|
76
|
+
if (modal) {
|
|
77
|
+
modal.checked = false;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
static openModal(modalId) {
|
|
82
|
+
const modal = document.getElementById(modalId);
|
|
83
|
+
if (modal) {
|
|
84
|
+
modal.checked = true;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
static showToast(message, type = 'info', duration = 3000) {
|
|
89
|
+
const toast = document.createElement('div');
|
|
90
|
+
toast.className = `toast toast-top toast-end`;
|
|
91
|
+
toast.innerHTML = `
|
|
92
|
+
<div class="alert alert-${type}">
|
|
93
|
+
<span>${message}</span>
|
|
94
|
+
</div>
|
|
95
|
+
`;
|
|
96
|
+
|
|
97
|
+
document.body.appendChild(toast);
|
|
98
|
+
|
|
99
|
+
setTimeout(() => {
|
|
100
|
+
toast.remove();
|
|
101
|
+
}, duration);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Initialize when DOM is ready
|
|
106
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
107
|
+
window.daisyUIThemeManager = new DaisyUIThemeManager();
|
|
108
|
+
window.DaisyUIComponents = DaisyUIComponents;
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
// Export for module systems
|
|
112
|
+
if (typeof module !== 'undefined' && module.exports) {
|
|
113
|
+
module.exports = { DaisyUIThemeManager, DaisyUIComponents };
|
|
114
|
+
}
|
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.5.
|
|
4
|
+
version: 0.5.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- JacobAlexander
|
|
@@ -142,6 +142,7 @@ extra_rdoc_files: []
|
|
|
142
142
|
files:
|
|
143
143
|
- ".github/copilot-instructions.md"
|
|
144
144
|
- CHANGELOG.md
|
|
145
|
+
- INSTALLATION.md
|
|
145
146
|
- LICENSE
|
|
146
147
|
- README.md
|
|
147
148
|
- Rakefile
|
|
@@ -209,7 +210,10 @@ files:
|
|
|
209
210
|
- lib/daisyui_on_phlex/components/toggle.rb
|
|
210
211
|
- lib/daisyui_on_phlex/components/tooltip.rb
|
|
211
212
|
- lib/daisyui_on_phlex/components/validator.rb
|
|
213
|
+
- lib/daisyui_on_phlex/generators/all_generator.rb
|
|
214
|
+
- lib/daisyui_on_phlex/generators/component_generator.rb
|
|
212
215
|
- lib/daisyui_on_phlex/generators/install_generator.rb
|
|
216
|
+
- lib/daisyui_on_phlex/javascripts/daisyui_on_phlex.js
|
|
213
217
|
- lib/daisyui_on_phlex/railtie.rb
|
|
214
218
|
- lib/daisyui_on_phlex/stylesheets/daisyui_on_phlex.css
|
|
215
219
|
- lib/daisyui_on_phlex/version.rb
|