activeadmin-tom_select 4.1.2 → 4.2.0.beta1
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/Appraisals +2 -2
- data/CHANGELOG.md +12 -0
- data/Gemfile +1 -1
- data/Gemfile.lock +134 -101
- data/README.md +1 -1
- data/docs/activeadmin-4-asset-setup.md +171 -0
- data/docs/activeadmin-tailwind-4.md +125 -0
- data/docs/guide-update-your-app.md +89 -356
- data/docs/setup-activeadmin-app.md +69 -492
- data/docs/setup-activeadmin-gem.md +83 -449
- data/gemfiles/rails_7.x_active_admin_4.x.gemfile +2 -1
- data/gemfiles/rails_7.x_active_admin_4.x.gemfile.lock +158 -116
- data/gemfiles/rails_8.x_active_admin_4.x.gemfile +2 -1
- data/gemfiles/rails_8.x_active_admin_4.x.gemfile.lock +145 -101
- data/lib/activeadmin/tom_select/option_collection.rb +4 -6
- data/lib/activeadmin/tom_select/select_input_extension.rb +15 -7
- data/lib/activeadmin/tom_select/version.rb +1 -1
- data/spec/features/end_to_end_spec.rb +2 -2
- data/spec/features/input_errors_spec.rb +1 -3
- data/spec/features/options_dsl_spec.rb +6 -6
- data/spec/internal/Gemfile +1 -0
- data/spec/internal/Gemfile.lock +152 -107
- data/spec/internal/app/assets/stylesheets/active_admin.tailwind.css +8 -5
- data/spec/internal/bin/tailwindcss +27 -0
- data/spec/internal/lib/tasks/active_admin.rake +9 -4
- data/spec/internal/package-lock.json +15 -1371
- data/spec/internal/package.json +1 -2
- data/{docs/tailwind-4/tailwind-active_admin.config.js → spec/internal/tailwind-active_admin.config.mjs} +9 -4
- data/spec/internal/yarn.lock +128 -728
- metadata +7 -23
- data/docs/activeadmin-4-detailed-reference.md +0 -932
- data/docs/activeadmin-4-gem-migration-guide.md +0 -313
- data/docs/combustion.md +0 -213
- data/docs/fail.png +0 -0
- data/docs/normal.png +0 -0
- data/docs/propshaft-readme.md +0 -320
- data/docs/propshaft-upgrade.md +0 -484
- data/docs/tailwind/blog-page.md +0 -341
- data/docs/tailwind/upgrade-guide-enhanced.md +0 -438
- data/docs/tailwind/upgrade-guide.md +0 -416
- data/docs/tailwind-4/active_admin.rake +0 -38
- data/docs/tailwind-4/active_admin.tailwind.css +0 -415
- data/docs/test-app-change.md +0 -154
- data/docs/test-environment-fixes.md +0 -58
- data/docs/update-tom-select.md +0 -348
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# ActiveAdmin + Tailwind CSS v4 Guide
|
|
2
|
+
|
|
3
|
+
This guide consolidates the ActiveAdmin 4.0.0.beta19 upgrade notes with a working Tailwind v4 build setup. Use it as a template when updating other ActiveAdmin extension gems.
|
|
4
|
+
|
|
5
|
+
## What Changed in ActiveAdmin 4.0.0.beta19 (from UPGRADING.md)
|
|
6
|
+
|
|
7
|
+
### Template Updates
|
|
8
|
+
- `_site_header.html.erb` container class changed from `sticky` to `fixed`.
|
|
9
|
+
- `active_admin.html.erb` now includes the `pt-16` utility class.
|
|
10
|
+
|
|
11
|
+
### Tailwind v4 Updates
|
|
12
|
+
Replace the old Tailwind directives with the new v4 import and config:
|
|
13
|
+
|
|
14
|
+
```diff
|
|
15
|
+
-@tailwind base;
|
|
16
|
+
-@tailwind components;
|
|
17
|
+
-@tailwind utilities;
|
|
18
|
+
+@import "tailwindcss";
|
|
19
|
+
+
|
|
20
|
+
+@config "../../../tailwind-active_admin.config.mjs";
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Update your CSS build command:
|
|
24
|
+
|
|
25
|
+
```diff
|
|
26
|
+
-"build:css": "tailwindcss -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify -c tailwind-active_admin.config.js"
|
|
27
|
+
+"build:css": "npx @tailwindcss/cli -i ./app/assets/stylesheets/active_admin.css -o ./app/assets/builds/active_admin.css --minify"
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
If you use `tailwindcss-rails`, prefer the bundled `bin/tailwindcss` and the `@config` directive instead of passing `-c`.
|
|
31
|
+
|
|
32
|
+
### ESM Config Warning
|
|
33
|
+
Tailwind config now uses ESM. To avoid the warning:
|
|
34
|
+
- Rename `tailwind-active_admin.config.js` to `tailwind-active_admin.config.mjs`, or
|
|
35
|
+
- Add `"type": "module"` to `package.json`.
|
|
36
|
+
|
|
37
|
+
### Breaking Changes Summary
|
|
38
|
+
- jQuery and jQuery UI removed.
|
|
39
|
+
- `columns` component removed (use Tailwind grid).
|
|
40
|
+
- `tabs` component removed.
|
|
41
|
+
- Replace `default_main_content` with `render "show_default"`.
|
|
42
|
+
- Replace `as: :datepicker` with `as: :date_picker`.
|
|
43
|
+
- Replace `active_admin_comments` with `active_admin_comments_for(resource)`.
|
|
44
|
+
- Replace `attributes_table` with `attributes_table_for(resource)` in sidebars.
|
|
45
|
+
- Removed `IndexAsBlog`, `IndexAsBlock`, `IndexAsGrid`.
|
|
46
|
+
- Batch action form DSL replaced with partial support.
|
|
47
|
+
- Deeply nested submenus removed (only one level supported).
|
|
48
|
+
- Removed `Panel#header_action` and `index_column`.
|
|
49
|
+
|
|
50
|
+
## Recommended Build Setup (tailwindcss-rails)
|
|
51
|
+
|
|
52
|
+
### 1. Gemfile
|
|
53
|
+
|
|
54
|
+
```ruby
|
|
55
|
+
gem "activeadmin", "4.0.0.beta19"
|
|
56
|
+
gem "tailwindcss-rails", "~> 4.4.0"
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 2. Tailwind Input
|
|
60
|
+
|
|
61
|
+
```css
|
|
62
|
+
/* app/assets/stylesheets/active_admin.tailwind.css */
|
|
63
|
+
@import "tailwindcss";
|
|
64
|
+
@config "../../../tailwind-active_admin.config.mjs";
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### 3. Tailwind Config
|
|
68
|
+
|
|
69
|
+
```javascript
|
|
70
|
+
// tailwind-active_admin.config.mjs
|
|
71
|
+
import { execSync } from "child_process";
|
|
72
|
+
import activeAdminPlugin from "@activeadmin/activeadmin/plugin";
|
|
73
|
+
|
|
74
|
+
const activeAdminPath = execSync("bundle show activeadmin", {
|
|
75
|
+
encoding: "utf-8"
|
|
76
|
+
}).trim();
|
|
77
|
+
|
|
78
|
+
export default {
|
|
79
|
+
content: [
|
|
80
|
+
`${activeAdminPath}/vendor/javascript/flowbite.js`,
|
|
81
|
+
`${activeAdminPath}/plugin.js`,
|
|
82
|
+
`${activeAdminPath}/app/views/**/*.{arb,erb,html,rb}`,
|
|
83
|
+
"./app/admin/**/*.{arb,erb,html,rb}",
|
|
84
|
+
"./app/views/active_admin/**/*.{arb,erb,html,rb}",
|
|
85
|
+
"./app/views/admin/**/*.{arb,erb,html,rb}",
|
|
86
|
+
"./app/views/layouts/active_admin*.{erb,html}",
|
|
87
|
+
"./app/javascript/**/*.js"
|
|
88
|
+
],
|
|
89
|
+
darkMode: "selector",
|
|
90
|
+
plugins: [activeAdminPlugin]
|
|
91
|
+
};
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### 4. Build Tasks
|
|
95
|
+
|
|
96
|
+
```ruby
|
|
97
|
+
# lib/tasks/active_admin.rake
|
|
98
|
+
namespace :active_admin do
|
|
99
|
+
desc "Build Active Admin Tailwind stylesheets"
|
|
100
|
+
task build: :environment do
|
|
101
|
+
command = [
|
|
102
|
+
Rails.root.join("bin/tailwindcss").to_s,
|
|
103
|
+
"-i", Rails.root.join("app/assets/stylesheets/active_admin.tailwind.css").to_s,
|
|
104
|
+
"-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
|
|
105
|
+
"-m"
|
|
106
|
+
]
|
|
107
|
+
|
|
108
|
+
system(*command, exception: true)
|
|
109
|
+
end
|
|
110
|
+
end
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### 5. Tailwind CLI Binstub
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
bundle binstubs tailwindcss-ruby --force
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Notes for Extension Gems
|
|
120
|
+
|
|
121
|
+
When updating other ActiveAdmin extension gems:
|
|
122
|
+
- Keep all JS/CSS inside the gem or npm package; do not copy large files into host apps.
|
|
123
|
+
- Add only a thin import to the host app (`import "your_gem"`).
|
|
124
|
+
- Use Tailwind v4 `@import` + `@config` and ESM config files.
|
|
125
|
+
- Avoid jQuery-based plugins or require them explicitly.
|
|
@@ -1,228 +1,129 @@
|
|
|
1
|
-
# Migration Guide: ActiveAdmin Tom Select
|
|
1
|
+
# Migration Guide: ActiveAdmin Tom Select (Tailwind v4)
|
|
2
2
|
|
|
3
|
-
This guide
|
|
3
|
+
This guide helps you migrate from `activeadmin-searchable_select` to `activeadmin-tom_select` on ActiveAdmin 4.0.0.beta19 with Tailwind CSS v4.
|
|
4
4
|
|
|
5
5
|
## Quick Start (New Installation)
|
|
6
6
|
|
|
7
|
-
For new installations without a previous version:
|
|
8
|
-
|
|
9
7
|
```bash
|
|
10
|
-
#
|
|
11
|
-
|
|
12
|
-
bundle install
|
|
8
|
+
# Gem
|
|
9
|
+
bundle add activeadmin-tom_select
|
|
13
10
|
|
|
14
|
-
#
|
|
11
|
+
# NPM
|
|
15
12
|
npm install activeadmin-tom_select tom-select
|
|
16
|
-
|
|
17
|
-
# Install PostCSS plugins (REQUIRED for CSS imports to work)
|
|
18
|
-
npm install postcss postcss-import postcss-nesting autoprefixer
|
|
19
|
-
|
|
20
|
-
# Then follow Step 3 and onward below
|
|
21
13
|
```
|
|
22
14
|
|
|
23
15
|
## Why Update?
|
|
24
16
|
|
|
25
|
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
- ✅ **Tom Select** instead of Select2 (no jQuery dependency!)
|
|
30
|
-
- ✅ Virtual scroll for large datasets with pagination
|
|
31
|
-
- ✅ Proper NPM package distribution as activeadmin-tom_select
|
|
32
|
-
- ✅ Improved test suite with static ActiveAdmin registrations
|
|
33
|
-
- ✅ Active maintenance and support
|
|
34
|
-
|
|
35
|
-
## What's New in Version 4.1.0
|
|
36
|
-
|
|
37
|
-
- 🎉 **Tom Select**: Migrated from Select2 to Tom Select - no jQuery dependency!
|
|
38
|
-
- 📜 **Virtual Scroll**: Automatic pagination for large datasets
|
|
39
|
-
- 🚀 **Better Performance**: Lighter bundle size without jQuery
|
|
40
|
-
- 🔧 **Rails 8 Ready**: Full compatibility with Propshaft and Rails 8
|
|
41
|
-
- 📊 **98% Test Coverage**: Comprehensive test suite with SimpleCov
|
|
42
|
-
- 📦 **Modern JavaScript**: ES6 modules, vanilla JavaScript
|
|
43
|
-
|
|
44
|
-
## Migration Steps
|
|
45
|
-
|
|
46
|
-
### Step 1: Update your Gemfile
|
|
17
|
+
- Tom Select replaces Select2 (no jQuery)
|
|
18
|
+
- ActiveAdmin 4.0.0.beta19 compatible
|
|
19
|
+
- Tailwind CSS v4 styles included
|
|
20
|
+
- Auto-init helpers for searchable selects
|
|
47
21
|
|
|
48
|
-
|
|
22
|
+
## 1. Update Gemfile
|
|
49
23
|
|
|
50
24
|
```ruby
|
|
51
|
-
# Remove
|
|
52
|
-
# gem
|
|
53
|
-
# gem
|
|
25
|
+
# Remove legacy gem(s)
|
|
26
|
+
# gem "activeadmin-searchable_select"
|
|
27
|
+
# gem "rs-activeadmin-searchable_select"
|
|
54
28
|
|
|
55
|
-
|
|
56
|
-
gem 'activeadmin-tom_select', '~> 4.1.0'
|
|
57
|
-
|
|
58
|
-
# For Rails 7, also ensure you have Propshaft:
|
|
59
|
-
gem 'propshaft' # Rails 8 includes this by default
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
Then run:
|
|
63
|
-
```bash
|
|
64
|
-
bundle install
|
|
29
|
+
gem "activeadmin-tom_select", "~> 4.1.0"
|
|
65
30
|
```
|
|
66
31
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
Remove old packages and install the new ones:
|
|
32
|
+
## 2. Update JavaScript Dependencies
|
|
70
33
|
|
|
71
34
|
```bash
|
|
72
|
-
# Remove old packages if present
|
|
73
35
|
npm uninstall @codevise/activeadmin-searchable_select activeadmin-searchable_select jquery select2
|
|
74
|
-
|
|
75
|
-
# Install new packages (Tom Select instead of Select2)
|
|
76
36
|
npm install activeadmin-tom_select tom-select
|
|
77
|
-
|
|
78
|
-
# CRITICAL: Install PostCSS plugins for CSS imports to work
|
|
79
|
-
npm install postcss postcss-import postcss-nesting autoprefixer
|
|
80
37
|
```
|
|
81
38
|
|
|
82
|
-
|
|
83
|
-
- JavaScript: Auto-initialization and helper functions
|
|
84
|
-
- CSS: Tailwind-optimized Tom Select styles at `activeadmin-tom_select/src/tom-select-tailwind.css`
|
|
85
|
-
|
|
86
|
-
### Step 3: Update JavaScript Imports
|
|
87
|
-
|
|
88
|
-
Update your `app/javascript/active_admin.js`:
|
|
89
|
-
|
|
90
|
-
#### Option A: Auto-initialization (Recommended)
|
|
39
|
+
## 3. JavaScript Imports
|
|
91
40
|
|
|
92
41
|
```javascript
|
|
93
42
|
import "@activeadmin/activeadmin";
|
|
94
43
|
|
|
95
|
-
|
|
96
|
-
import TomSelect from 'tom-select';
|
|
44
|
+
import TomSelect from "tom-select";
|
|
97
45
|
window.TomSelect = TomSelect;
|
|
98
46
|
|
|
99
|
-
|
|
100
|
-
import { setupAutoInit } from 'activeadmin-tom_select';
|
|
47
|
+
import { setupAutoInit } from "activeadmin-tom_select";
|
|
101
48
|
setupAutoInit();
|
|
102
49
|
```
|
|
103
50
|
|
|
104
|
-
|
|
51
|
+
## 4. Tailwind CSS Build (ActiveAdmin 4.0.0.beta19)
|
|
105
52
|
|
|
106
|
-
|
|
107
|
-
import "@activeadmin/activeadmin";
|
|
53
|
+
### 4.1 Tailwind Input
|
|
108
54
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
// Import the initialization function
|
|
114
|
-
import { initSearchableSelects } from 'activeadmin-tom_select';
|
|
55
|
+
```css
|
|
56
|
+
/* app/assets/stylesheets/active_admin.tailwind.css */
|
|
57
|
+
@import "tailwindcss";
|
|
58
|
+
@config "../../../tailwind-active_admin.config.mjs";
|
|
115
59
|
|
|
116
|
-
|
|
117
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
118
|
-
const selects = document.querySelectorAll('.searchable-select-input');
|
|
119
|
-
initSearchableSelects(selects);
|
|
120
|
-
});
|
|
60
|
+
@import "activeadmin-tom_select/css";
|
|
121
61
|
```
|
|
122
62
|
|
|
123
|
-
###
|
|
124
|
-
|
|
125
|
-
## ⚠️ CRITICAL CSS SETUP REQUIREMENTS
|
|
126
|
-
|
|
127
|
-
**IMPORTANT**: The CSS build process has very specific requirements that must be followed exactly:
|
|
128
|
-
|
|
129
|
-
1. **Input file MUST use `.tailwind.css` extension** (not `.css`)
|
|
130
|
-
2. **MUST have PostCSS configuration with `postcss-import` plugin**
|
|
131
|
-
3. **MUST NOT use CDN imports** - all CSS must be imported from npm packages
|
|
132
|
-
4. **The rake task MUST include the `--postcss` flag**
|
|
133
|
-
|
|
134
|
-
### Required Files Setup
|
|
135
|
-
|
|
136
|
-
#### 1. Create PostCSS Configuration (`postcss.config.js`)
|
|
63
|
+
### 4.2 Tailwind Config (ESM)
|
|
137
64
|
|
|
138
65
|
```javascript
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
66
|
+
// tailwind-active_admin.config.mjs
|
|
67
|
+
import { execSync } from "child_process";
|
|
68
|
+
import activeAdminPlugin from "@activeadmin/activeadmin/plugin";
|
|
69
|
+
|
|
70
|
+
const activeAdminPath = execSync("bundle show activeadmin", {
|
|
71
|
+
encoding: "utf-8"
|
|
72
|
+
}).trim();
|
|
73
|
+
|
|
74
|
+
export default {
|
|
75
|
+
content: [
|
|
76
|
+
`${activeAdminPath}/vendor/javascript/flowbite.js`,
|
|
77
|
+
`${activeAdminPath}/plugin.js`,
|
|
78
|
+
`${activeAdminPath}/app/views/**/*.{arb,erb,html,rb}`,
|
|
79
|
+
"./app/admin/**/*.{arb,erb,html,rb}",
|
|
80
|
+
"./app/views/active_admin/**/*.{arb,erb,html,rb}",
|
|
81
|
+
"./app/views/admin/**/*.{arb,erb,html,rb}",
|
|
82
|
+
"./app/views/layouts/active_admin*.{erb,html}",
|
|
83
|
+
"./app/javascript/**/*.js"
|
|
144
84
|
],
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
#### 2. Create Tailwind Input File (`app/assets/stylesheets/active_admin.tailwind.css`)
|
|
149
|
-
|
|
150
|
-
```css
|
|
151
|
-
@import "tailwindcss/base";
|
|
152
|
-
@import "tailwindcss/components";
|
|
153
|
-
@import "tailwindcss/utilities";
|
|
154
|
-
|
|
155
|
-
/* CRITICAL: Import Tom Select styles from npm package, NOT from CDN! */
|
|
156
|
-
@import "@rocket-sensei/activeadmin-tom_select/src/tom-select-tailwind.css";
|
|
157
|
-
|
|
158
|
-
/* Import any custom styles */
|
|
159
|
-
@import "./active_admin_custom.css";
|
|
160
|
-
|
|
161
|
-
/* Custom styling for searchable selects */
|
|
162
|
-
.searchable-select-input {
|
|
163
|
-
width: 100%;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
/* Fix for ActiveAdmin form layout */
|
|
167
|
-
.ts-wrapper {
|
|
168
|
-
min-width: 50%;
|
|
169
|
-
}
|
|
85
|
+
darkMode: "selector",
|
|
86
|
+
plugins: [activeAdminPlugin]
|
|
87
|
+
};
|
|
170
88
|
```
|
|
171
89
|
|
|
172
|
-
|
|
90
|
+
### 4.3 Tailwind Build Tasks
|
|
173
91
|
|
|
174
92
|
```ruby
|
|
93
|
+
# lib/tasks/active_admin.rake
|
|
175
94
|
namespace :active_admin do
|
|
176
|
-
desc
|
|
177
|
-
task :
|
|
178
|
-
require 'fileutils'
|
|
179
|
-
|
|
180
|
-
root = Rails.root
|
|
181
|
-
|
|
182
|
-
# Ensure builds directory exists
|
|
183
|
-
FileUtils.mkdir_p(File.join(root, 'app/assets/builds'))
|
|
184
|
-
|
|
185
|
-
# Build with Tailwind CLI (CRITICAL: include --postcss flag!)
|
|
95
|
+
desc "Build Active Admin Tailwind stylesheets"
|
|
96
|
+
task build: :environment do
|
|
186
97
|
command = [
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
'--postcss', File.join(root, 'postcss.config.js'), # CRITICAL: Must specify PostCSS config
|
|
192
|
-
'-m'
|
|
98
|
+
Rails.root.join("bin/tailwindcss").to_s,
|
|
99
|
+
"-i", Rails.root.join("app/assets/stylesheets/active_admin.tailwind.css").to_s,
|
|
100
|
+
"-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
|
|
101
|
+
"-m"
|
|
193
102
|
]
|
|
194
103
|
|
|
195
104
|
system(*command, exception: true)
|
|
196
|
-
|
|
197
|
-
puts 'Built Active Admin CSS with Tailwind'
|
|
198
105
|
end
|
|
199
106
|
|
|
200
|
-
desc
|
|
201
|
-
task :
|
|
202
|
-
root = Rails.root
|
|
203
|
-
|
|
204
|
-
# Watch for changes
|
|
107
|
+
desc "Watch Active Admin Tailwind stylesheets"
|
|
108
|
+
task watch: :environment do
|
|
205
109
|
command = [
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
'--postcss', File.join(root, 'postcss.config.js'), # CRITICAL: Must specify PostCSS config
|
|
212
|
-
'-m'
|
|
110
|
+
Rails.root.join("bin/tailwindcss").to_s,
|
|
111
|
+
"--watch",
|
|
112
|
+
"-i", Rails.root.join("app/assets/stylesheets/active_admin.tailwind.css").to_s,
|
|
113
|
+
"-o", Rails.root.join("app/assets/builds/active_admin.css").to_s,
|
|
114
|
+
"-m"
|
|
213
115
|
]
|
|
214
116
|
|
|
215
|
-
system(*command)
|
|
117
|
+
system(*command, exception: true)
|
|
216
118
|
end
|
|
217
119
|
end
|
|
218
120
|
|
|
219
|
-
|
|
220
|
-
if Rake::Task.task_defined?(
|
|
221
|
-
|
|
222
|
-
end
|
|
121
|
+
Rake::Task["assets:precompile"].enhance(["active_admin:build"])
|
|
122
|
+
Rake::Task["spec:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("spec:prepare")
|
|
123
|
+
Rake::Task["db:test:prepare"].enhance(["active_admin:build"]) if Rake::Task.task_defined?("db:test:prepare")
|
|
223
124
|
```
|
|
224
125
|
|
|
225
|
-
|
|
126
|
+
### 4.4 package.json scripts
|
|
226
127
|
|
|
227
128
|
```json
|
|
228
129
|
{
|
|
@@ -235,222 +136,54 @@ end
|
|
|
235
136
|
}
|
|
236
137
|
```
|
|
237
138
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
```bash
|
|
241
|
-
# One-time build
|
|
242
|
-
bundle exec rake active_admin:build
|
|
243
|
-
|
|
244
|
-
# Or use npm script
|
|
245
|
-
npm run build:css
|
|
246
|
-
|
|
247
|
-
# For development with watch mode
|
|
248
|
-
bundle exec rake active_admin:watch
|
|
249
|
-
# or
|
|
250
|
-
npm run watch:css
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
### Common Build Errors and Solutions
|
|
139
|
+
### 4.5 Tailwind CLI binstub
|
|
254
140
|
|
|
255
|
-
#### Tom Select CSS Not Included in Built File
|
|
256
|
-
|
|
257
|
-
**Symptoms**: The built CSS file doesn't contain any Tom Select styles (no `.ts-wrapper`, `.ts-control`, etc. classes)
|
|
258
|
-
|
|
259
|
-
**Causes and Solutions**:
|
|
260
|
-
1. **Using CDN imports**: CDN imports (`@import url('https://...')`) are NOT processed by Tailwind. You MUST import from npm packages.
|
|
261
|
-
2. **Wrong file extension**: Input file must be `.tailwind.css`, not `.css`
|
|
262
|
-
3. **Missing PostCSS config**: Without `postcss-import` plugin, `@import` statements won't work
|
|
263
|
-
4. **Missing `--postcss` flag**: The rake task must include `--postcss` flag
|
|
264
|
-
|
|
265
|
-
**How to verify CSS is included**:
|
|
266
141
|
```bash
|
|
267
|
-
|
|
268
|
-
grep -c "ts-wrapper\|ts-control\|ts-dropdown" app/assets/builds/active_admin.css
|
|
269
|
-
# Should return a number > 0
|
|
142
|
+
bundle binstubs tailwindcss-ruby --force
|
|
270
143
|
```
|
|
271
144
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
⚠️ **WARNING**: Using CDN imports or regular CSS imports without a proper build process will likely result in missing styles when using Tailwind CSS build. We strongly recommend using the Tailwind setup above.
|
|
275
|
-
|
|
276
|
-
If you absolutely must use regular CSS without Tailwind, you'll need a different build process that can handle CSS imports, such as:
|
|
277
|
-
- Using Webpack with css-loader
|
|
278
|
-
- Using esbuild with CSS plugins
|
|
279
|
-
- Using a dedicated CSS bundler
|
|
280
|
-
|
|
281
|
-
### Step 5: For Importmap Users
|
|
282
|
-
|
|
283
|
-
If you're using importmap instead of esbuild, add to `config/importmap.rb`:
|
|
145
|
+
## 5. Importmap (Optional)
|
|
284
146
|
|
|
285
147
|
```ruby
|
|
148
|
+
# config/importmap.rb
|
|
286
149
|
pin "tom-select", to: "https://ga.jspm.io/npm:tom-select@2.4.3/dist/js/tom-select.complete.min.js"
|
|
287
150
|
pin "activeadmin-tom_select", to: "activeadmin-tom_select.js"
|
|
288
151
|
```
|
|
289
152
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
```javascript
|
|
293
|
-
import "@activeadmin/activeadmin";
|
|
294
|
-
import TomSelect from "tom-select";
|
|
295
|
-
|
|
296
|
-
// Make Tom Select available globally
|
|
297
|
-
window.TomSelect = TomSelect;
|
|
298
|
-
|
|
299
|
-
// Import and auto-initialize searchable selects
|
|
300
|
-
import { setupAutoInit } from "activeadmin-tom_select";
|
|
301
|
-
setupAutoInit();
|
|
302
|
-
```
|
|
303
|
-
|
|
304
|
-
### Step 6: Update Your ActiveAdmin Resources
|
|
305
|
-
|
|
306
|
-
The API remains the same, but ensure your resources are configured correctly:
|
|
153
|
+
## 6. ActiveAdmin Usage
|
|
307
154
|
|
|
308
155
|
```ruby
|
|
309
156
|
ActiveAdmin.register Product do
|
|
310
|
-
# For forms
|
|
311
157
|
form do |f|
|
|
312
158
|
f.inputs do
|
|
313
|
-
f.input :category, as: :searchable_select
|
|
159
|
+
f.input :category, as: :searchable_select
|
|
314
160
|
f.input :tags, as: :searchable_select, ajax: true, multiple: true
|
|
315
161
|
end
|
|
316
162
|
f.actions
|
|
317
163
|
end
|
|
318
164
|
|
|
319
|
-
|
|
320
|
-
filter :category, as: :searchable_select, ajax: true
|
|
165
|
+
filter :category, as: :searchable_select
|
|
321
166
|
filter :tags, as: :searchable_select, ajax: true, multiple: true
|
|
322
167
|
end
|
|
323
|
-
|
|
324
|
-
# Define searchable select options endpoint
|
|
325
|
-
ActiveAdmin.register Category do
|
|
326
|
-
searchable_select_options(
|
|
327
|
-
scope: Category.all,
|
|
328
|
-
text_attribute: :name
|
|
329
|
-
)
|
|
330
|
-
end
|
|
331
168
|
```
|
|
332
169
|
|
|
333
170
|
## Troubleshooting
|
|
334
171
|
|
|
335
|
-
###
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
1. Tom Select is imported in your JavaScript file
|
|
340
|
-
2. `window.TomSelect = TomSelect` is set to make it globally available
|
|
341
|
-
3. The NPM package is installed: `npm install tom-select`
|
|
342
|
-
|
|
343
|
-
### Styles Not Loading / CSS Missing
|
|
344
|
-
|
|
345
|
-
This is a common issue when migrating to ActiveAdmin 4 with Tailwind CSS. Here's how to fix it:
|
|
346
|
-
|
|
347
|
-
#### Checklist for Tailwind CSS Users:
|
|
348
|
-
|
|
349
|
-
1. ✅ **File Extension**: Is your input file named `active_admin.tailwind.css` (NOT `active_admin.css`)?
|
|
350
|
-
2. ✅ **PostCSS Config**: Do you have `postcss.config.js` with `postcss-import` plugin?
|
|
351
|
-
3. ✅ **NPM Packages**: Are PostCSS plugins installed? (`npm install postcss postcss-import`)
|
|
352
|
-
4. ✅ **No CDN Imports**: Are you importing from npm packages, not CDN URLs?
|
|
353
|
-
5. ✅ **Rake Task**: Does your rake task include `--postcss` flag?
|
|
354
|
-
6. ✅ **Build Output**: Does `app/assets/builds/active_admin.css` contain Tom Select classes?
|
|
355
|
-
|
|
356
|
-
Run this diagnostic command:
|
|
357
|
-
```bash
|
|
358
|
-
# Check if everything is set up correctly
|
|
359
|
-
echo "Checking setup..."
|
|
360
|
-
[ -f postcss.config.js ] && echo "✅ PostCSS config exists" || echo "❌ Missing postcss.config.js"
|
|
361
|
-
[ -f app/assets/stylesheets/active_admin.tailwind.css ] && echo "✅ Tailwind CSS file exists" || echo "❌ Missing active_admin.tailwind.css"
|
|
362
|
-
grep -q "postcss-import" postcss.config.js && echo "✅ postcss-import configured" || echo "❌ postcss-import not in config"
|
|
363
|
-
grep -q "@rocket-sensei/activeadmin-tom_select" app/assets/stylesheets/active_admin.tailwind.css && echo "✅ Tom Select import found" || echo "❌ Tom Select import missing"
|
|
364
|
-
grep -q "ts-wrapper" app/assets/builds/active_admin.css 2>/dev/null && echo "✅ Tom Select CSS in built file" || echo "❌ Tom Select CSS NOT in built file"
|
|
365
|
-
```
|
|
366
|
-
|
|
367
|
-
#### Common CSS Issues:
|
|
368
|
-
|
|
369
|
-
- **Dropdown not styled**: Missing Tom Select CSS - verify all setup steps above
|
|
370
|
-
- **Width issues**: Add `.ts-wrapper { min-width: 50%; }` to your styles
|
|
371
|
-
- **Z-index problems**: Tom Select dropdowns may need higher z-index in some layouts
|
|
372
|
-
- **Missing icons**: Ensure the Tom Select CSS is fully loaded
|
|
373
|
-
|
|
374
|
-
### Ajax Options Not Loading
|
|
375
|
-
|
|
376
|
-
1. Ensure `searchable_select_options` is defined in the target resource
|
|
377
|
-
2. Check browser console for any JavaScript errors
|
|
378
|
-
3. Verify the AJAX URLs are correct in the network tab
|
|
379
|
-
|
|
380
|
-
### Multiple Select Not Working
|
|
381
|
-
|
|
382
|
-
Ensure you've added `multiple: true` to both the input and the corresponding association:
|
|
383
|
-
|
|
384
|
-
```ruby
|
|
385
|
-
# In your model
|
|
386
|
-
has_many :tags
|
|
387
|
-
|
|
388
|
-
# In your ActiveAdmin resource
|
|
389
|
-
f.input :tags, as: :searchable_select, ajax: true, multiple: true
|
|
390
|
-
```
|
|
391
|
-
|
|
392
|
-
## Version Compatibility
|
|
393
|
-
|
|
394
|
-
- **Ruby**: >= 3.0
|
|
395
|
-
- **Rails**: >= 7.0 (optimized for Rails 8)
|
|
396
|
-
- **ActiveAdmin**: ~> 4.0.0.beta
|
|
397
|
-
- **Node.js**: >= 18.0
|
|
398
|
-
|
|
399
|
-
## Differences from Original Gem
|
|
400
|
-
|
|
401
|
-
1. **Tom Select instead of Select2**: No jQuery dependency required!
|
|
402
|
-
2. **NPM Package**: Package is now `activeadmin-tom_select` or `@rocket-sensei/activeadmin-tom_select`
|
|
403
|
-
3. **Gem Name**: Gem is now `activeadmin-tom_select`
|
|
404
|
-
4. **Virtual Scroll**: Automatic pagination for large datasets
|
|
405
|
-
5. **Rails 8 Ready**: Full support for Propshaft and modern Rails
|
|
406
|
-
6. **Better Performance**: Smaller bundle size without jQuery
|
|
407
|
-
7. **Modern JavaScript**: ES6 modules and vanilla JavaScript
|
|
408
|
-
|
|
409
|
-
## Migration Notes for Select2 Users
|
|
410
|
-
|
|
411
|
-
If you're migrating from a Select2-based version to this Tom Select version:
|
|
412
|
-
|
|
413
|
-
### CSS Class Changes
|
|
414
|
-
| Select2 Class | Tom Select Class |
|
|
415
|
-
|---------------|------------------|
|
|
416
|
-
| `.select2-container` | `.ts-wrapper` |
|
|
417
|
-
| `.select2-dropdown` | `.ts-dropdown` |
|
|
418
|
-
| `.select2-selection` | `.ts-control` |
|
|
419
|
-
| `.select2-results` | `.ts-dropdown-content` |
|
|
420
|
-
| `.select2-search__field` | `.ts-control input` |
|
|
421
|
-
|
|
422
|
-
### JavaScript API Changes
|
|
423
|
-
- No jQuery dependency required
|
|
424
|
-
- Tom Select instances are attached directly to the DOM element: `element.tomselect`
|
|
425
|
-
- Options are configured differently (see Tom Select documentation)
|
|
426
|
-
|
|
427
|
-
### Features
|
|
428
|
-
- Virtual scroll is automatically enabled for AJAX-loaded options
|
|
429
|
-
- Clear button is included by default (can be disabled with `clearable: false`)
|
|
430
|
-
- Pagination now uses 1-based indexing (page 1 is the first page)
|
|
431
|
-
|
|
432
|
-
## Need Help?
|
|
433
|
-
|
|
434
|
-
If you encounter issues:
|
|
435
|
-
1. Run the diagnostic command above to check your setup
|
|
436
|
-
2. Verify all npm packages are installed
|
|
437
|
-
3. Check that PostCSS config is correct
|
|
438
|
-
4. Ensure no CDN imports are being used
|
|
439
|
-
5. Clear browser cache and Rails tmp/cache
|
|
440
|
-
6. Check browser console for errors
|
|
441
|
-
|
|
442
|
-
For bug reports or questions, please visit:
|
|
443
|
-
https://github.com/rs-pro/activeadmin-tom_select/issues
|
|
444
|
-
|
|
445
|
-
## Contributing
|
|
172
|
+
### Styles missing
|
|
173
|
+
- Confirm `app/assets/builds/active_admin.css` exists.
|
|
174
|
+
- Verify `active_admin.tailwind.css` imports `activeadmin-tom_select/css`.
|
|
446
175
|
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
3. Write tests for your changes
|
|
451
|
-
4. Ensure all tests pass with `bundle exec rspec`
|
|
452
|
-
5. Submit a pull request
|
|
176
|
+
### Tom Select not initializing
|
|
177
|
+
- Ensure `window.TomSelect` is set.
|
|
178
|
+
- Ensure `setupAutoInit()` runs.
|
|
453
179
|
|
|
454
|
-
##
|
|
180
|
+
## ActiveAdmin 4.0.0.beta19 Notes (from upgrade guide)
|
|
455
181
|
|
|
456
|
-
|
|
182
|
+
- `_site_header.html.erb` container class changed from `sticky` to `fixed`.
|
|
183
|
+
- `active_admin.html.erb` adds the `pt-16` utility class.
|
|
184
|
+
- Tailwind v4 requires `@import "tailwindcss"` + `@config`.
|
|
185
|
+
- jQuery and jQuery UI removed; `columns` and `tabs` removed.
|
|
186
|
+
- Replace `default_main_content` with `render "show_default"`.
|
|
187
|
+
- Replace `as: :datepicker` with `as: :date_picker`.
|
|
188
|
+
- Replace `active_admin_comments` with `active_admin_comments_for(resource)`.
|
|
189
|
+
- Replace `attributes_table` with `attributes_table_for(resource)` in sidebars.
|