Turbo & Bootstrap 5.x updates

app/views/trestle/search/_search.html.erb

@@ -2,18 +2,10 @@
   <% if admin.searchable? %>
     <div class="searchbox">
       <%= form_tag admin.path, method: :get do %>
-        <div class="form-row align-items-center">
-          <div class="col">
-            <div class="input-group">
-              <div class="input-group-prepend">
-                <span class="input-group-text"><icon class="fa fa-search"></icon></span>
-              </div>
-
-              <%= search_field_tag :q, params[:q], class: "form-control search-field", autocomplete: "off", placeholder: admin.t("search.placeholder", default: "Search") %>
-
-              <%= link_to icon("fa fa-times"), admin.path, class: "clear-search" if params[:q].present? %>
-            </div>
-          </div>
+        <div class="input-group">
+          <span class="input-group-text"><icon class="fa fa-search"></icon></span>
+          <%= link_to icon("fa fa-times"), admin.path, class: "clear-search" if params[:q].present? %>
+          <%= search_field_tag :q, params[:q], class: "form-control search-field", autocomplete: "off", placeholder: admin.t("search.placeholder", default: "Search") %>
         </div>
       <% end %>
     </div>
@@ -26,18 +18,16 @@
           <%= hidden_field_tag k, v unless k == "f" %>
         <% end %>
 
-        <button type="button" class="btn <%= admin.filters.active(params).any? ? "btn-warning" : "btn-info" %>" data-toggle="search-filters"><%= icon("fa fa-filter") %></button>
+        <button type="button" class="btn <%= admin.filters.active(params).any? ? "btn-warning" : "btn-info" %>" data-controller="search-filters"><%= icon("fa fa-filter") %></button>
 
-        <script id="search-filters" type="text/html">
-          <div>
-            <% admin.filters.each do |name, filter| %>
-              <%= filter.render(f, params[:f]) %>
-            <% end %>
+        <template id="search-filters" type="text/html">
+          <% admin.filters.each do |name, filter| %>
+            <%= filter.render(f, params[:f]) %>
+          <% end %>
 
-            <%= f.submit admin.t("search.filter", default: "Filter"), class: "btn btn-info btn-block" %>
-            <%= link_to admin.t("search.reset_filters", default: "Reset Filters"), persistent_params.except(:f), class: "btn btn-light btn-sm btn-block" if admin.filters.active(params).any? %>
-          </div>
-        </script>
+          <%= f.submit admin.t("search.filter", default: "Filter"), class: "btn btn-info w-100" %>
+          <%= link_to admin.t("search.reset_filters", default: "Reset Filters"), persistent_params.except(:f), class: "btn btn-light btn-sm w-100 mt-2" if admin.filters.active(params).any? %>
+        </template>
       <% end %>
     </div>
   <% end %>

frontend/css/_filters.scss

@@ -21,7 +21,7 @@
 
   .popover-body {
     padding: 1rem;
-    width: 19rem;
+    width: 20rem;
   }
 
   .row {

frontend/css/_search.scss

@@ -21,11 +21,11 @@
 
   .clear-search {
     position: absolute;
-    right: 0.75rem;
+    right: 0.25rem;
     z-index: 5;
     color: #555;
     font-size: 1.2rem;
-    padding: 0.35rem;
+    padding: 0.25rem 0.5rem;
 
     &:hover, &:focus {
       color: #333;

frontend/js/controllers/search_filters_controller.js

@@ -0,0 +1,68 @@
+/* global Trestle */
+
+export default class extends Trestle.Controllers.popover {
+  initialize () {
+    super.initialize()
+
+    this.boundPersistFormState = this.persistFormState.bind(this)
+  }
+
+  connect () {
+    super.connect()
+
+    this.element.addEventListener('hide.bs.popover', this.boundPersistFormState)
+  }
+
+  disconnect () {
+    super.disconnect()
+
+    this.element.removeEventListener('hide.bs.popover', this.boundPersistFormState)
+  }
+
+  get popoverOptions() {
+    return {
+      ...super.popoverOptions,
+      customClass: 'search-filters-popover',
+      animation: false,
+      html: true,
+      sanitize: false,
+      placement: 'bottom',
+      container: this.container,
+      content: () => this.content
+    }
+  }
+
+  clickWithinPopover (e) {
+    return super.clickWithinPopover(e) || this.clickWithinCalendar(e)
+  }
+
+  clickWithinCalendar (e) {
+    return !!e.target.closest('.flatpickr-calendar')
+  }
+
+  get container () {
+    return document.querySelector('.search-filters form')
+  }
+
+  get content () {
+    if (!this.contentFragment) {
+      this.contentFragment = document.createRange().createContextualFragment(this.contentTemplate.innerHTML)
+    }
+
+    return this.contentFragment
+  }
+
+  get contentTemplate () {
+    return document.getElementById('search-filters')
+  }
+
+  persistFormState (e) {
+    if (this.popover.tip) {
+      const body = this.popover.tip.querySelector('.popover-body')
+
+      const form = new DocumentFragment()
+      form.append(...body.childNodes)
+      this.contentFragment = form
+    }
+  }
+}

frontend/js/index.js

@@ -1,45 +1,4 @@
-import Trestle from 'trestle'
-import $ from 'jquery'
+/* global Stimulus */
 
-const TEMPLATE = `
-  <div class="popover search-filters-popover" role="tooltip">
-    <div class="arrow"></div>
-    <div class="popover-body"></div>
-  </div>`
-
-Trestle.ready(function () {
-  const state = $($('#search-filters').html())
-
-  $('[data-toggle="search-filters"]').popover({
-    html: true,
-    sanitize: false,
-    placement: 'bottom',
-    container: '.search-filters form',
-    animation: false,
-    template: TEMPLATE,
-    content: function () {
-      Trestle.triggerInit(state)
-      return state
-    }
-  })
-})
-
-$(document).on('mousedown', function (e) {
-  const trigger = $('[data-toggle="search-filters"]')
-  const popover = $('.search-filters-popover')
-
-  if (popover.length) {
-    // Search filters popover is open
-    const clickTarget = $(e.target)
-
-    const flatpickr = $('.flatpickr-calendar')
-
-    // Hide the popover unless clicking within the popover,
-    // the popover trigger or a flatpickr calendar
-    if (!clickTarget.closest(popover).length &&
-        !clickTarget.closest(trigger).length &&
-        !clickTarget.closest(flatpickr).length) {
-      trigger.popover('hide')
-    }
-  }
-})
+import SearchFiltersController from './controllers/search_filters_controller'
+Stimulus.register('search-filters', SearchFiltersController)

gemfiles/rails-5.2.gemfile

@@ -5,7 +5,7 @@ group :test do
 
   gem "coveralls_reborn", require: false
   gem "capybara"
-
+  
   gem "sqlite3", "~> 1.3.13"
 end
 

lib/trestle/search/filters/renderers/date_range_renderer.rb

@@ -6,13 +6,7 @@ class Filters
       class DateRangeRenderer < DateRenderer
       protected
         def defaults
-          super.merge({
-            data: {
-              picker: true,
-              allow_clear: true,
-              mode: "range"
-            }
-          })
+          super.merge({ data: { mode: "range" } })
         end
       end
     end

package.json

@@ -13,18 +13,17 @@
     "watch": "webpack --mode development --watch"
   },
   "devDependencies": {
-    "@babel/core": "7.4.3",
-    "autoprefixer": "^9.6.1",
-    "babel-loader": "8.0.5",
-    "css-loader": "^3.2.0",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "6",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "10.2.0",
-    "terser-webpack-plugin": "1.2.3",
-    "webpack": "^4.40.2",
-    "webpack-cli": "^3.3.9"
+    "@babel/core": "7.23.9",
+    "autoprefixer": "^10.4.17",
+    "babel-loader": "9.1.3",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "^2.8.0",
+    "postcss-loader": "^8.1.0",
+    "sass": "^1.70.0",
+    "sass-loader": "14.1.0",
+    "webpack": "^5.90.1",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "trestle": "https://github.com/TrestleAdmin/trestle.git"

webpack.config.js

@@ -1,10 +1,11 @@
 const path = require('path');
 
-const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
+  mode: 'production',
   entry: {
     search: path.resolve(__dirname, 'frontend/index.js')
   },
@@ -13,19 +14,9 @@ module.exports = {
     path: path.resolve(__dirname, 'app/assets/bundle/trestle')
   },
   optimization: {
-    splitChunks: {
-      cacheGroups: {
-        styles: {
-          name: 'bundle',
-          test: /\.css$/,
-          chunks: 'all',
-          enforce: true
-        }
-      }
-    },
     minimizer: [
       new TerserPlugin(),
-      new OptimizeCSSAssetsPlugin({})
+      new CssMinimizerPlugin()
     ]
   },
   externals: {
@@ -46,8 +37,24 @@ module.exports = {
         use: [
           { loader: MiniCssExtractPlugin.loader },
           { loader: 'css-loader' },
-          { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } },
-          { loader: 'sass-loader' }
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  ['autoprefixer', {}]
+                ]
+              }
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sassOptions: {
+                quietDeps: true
+              }
+            }
+          }
         ]
       }
     ]