katalyst-tables 3.0.0.beta1 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac8dcee0526a034b23487868fb642c389e69c323aaf463a7aa6896bf777d5bc1
-  data.tar.gz: 8cea19cc8467137e533b9146daa65f51dacdf78763e4fde7904542261cbc66b3
+  metadata.gz: 196a8b7ff382215cbb156ff83099071aa983176353f819f5031aac774a88a572
+  data.tar.gz: 3d7463ccb20935e52500f186fb7c4024f3c8c236bfb9338a331a0830bf58edb5
 SHA512:
-  metadata.gz: ea6efd6150d3bb2d9f9d48c89920831f97e6dede515cfcd99ec049f81328c32c373fbf49cfd798adde0f1d8055819e1eb4f40931f8ac392809006c384c219c98
-  data.tar.gz: 66480c79be3aa1762145c3d92723f284ed61749d46029600d20541820e2d831e266fa79ffa0de9ad77efc750ba80f274f7fee86267b7a946cad78ba8c49773da
+  metadata.gz: 325bfa1b161fa322acd419279a57ddb644f5a3e0289ca42294c9936fe7ea6fcded6f1d077f8866b5b70408d7d495c8dabe4733ba83a1f7652c4eb02115bc5438
+  data.tar.gz: 1382995a15fdc57829232223d67d20a691b9f5b908f4059c7b41dcfdb9396ce1d90f3431417ceb2b88a10eca880939608b20ec19dc421288f25b8c6bfad0c58c

data/CHANGELOG.md

@@ -1,8 +1,22 @@
-## [3.0.0.beta1]
-- Breaking change: remove Turbo Streams from table and pagination components, focus preservation is handled via Turbo Morph
+## [3.1.0]
+- Introduce summary tables
+- Update ruby requirement >= 3.3
+
+## [3.0.0]
+
+- Breaking change: remove Turbo Streams from table and pagination components,
+  focus preservation is handled via Turbo Morph
 - Improve spec coverage
+- Re-write internals to make it easier to extend and customize
 - Update examples in [README](README.md) and [docs](/docs) to reflect changes
 
+If you're upgrading from 2.x, you'll need to change your controllers to use
+the recommendations from the README. The changes should be straightforward,
+but you will need to enable morphing to allow focus preservation.
+
+In general, we don't recommend using row partials anymore, as it's easier to
+read the code when the row is defined in the index view.
+
 ## [2.6.0]
 
 - Added table row selection

data/README.md

@@ -24,33 +24,49 @@ import tables from "@katalyst/tables";
 application.load(tables);
 ```
 
+```scss
+// app/assets/stylesheets/application.scss
+@use "@katalyst/tables";
+```
+
 ## Usage
 
 This gem provides entry points for backend and frontend concerns:
-* `Katalyst::TableComponent` can be used render encapsulated tables, it calls a
-  partial for each row.
-* `Katalyst::Tables::Frontend` provides `table_with` for inline table generation
+* `Katalyst::TableComponent` can be used render encapsulated tables,
+* `Katalyst::SummaryTableComponent` can be used render a record using the table syntax,
+* `Katalyst::Tables::Frontend` provides `table_with` for inline table generation,
 * `Katalyst::Tables::Collection::Base` provides a default entry point for
-  building collections in your controller actions.
+  building collections in your controller actions
 
-## Frontend
+### Frontend
 
-Use `Katalyst::TableComponent` to build a table component from an ActiveRecord
-collection, or from a `Katalyst::Tables::Collection::Base` instance.
+Add `include Katalyst::Tables::Frontend` to your `ApplicationHelper` or similar.
 
-For example, if you render `Katalyst::TableComponent.new(collection: @people)`,
-the table component will look for a partial called `_person.html+row.erb` and
-render it for each row (and once for the header row).
+You can use the `table_with` helper to generate a table inline in your view without explicitly interacting with the
+table component. This is the preferred approach when creating tables. However, if the table is complex or you need to 
+reuse it, you should consider moving the definition of the row into a partial.
+
+```erb
+<%= table_with collection: @people do |row, person| %>
+  <% row.text :name do |cell| %>
+    <%= link_to cell.value, [:edit, person] %>
+  <% end %>
+  <% row.text :email %>
+<% end %>
+```
+
+By not providing a block to the `table_with` call, the gem will look for a partial called `_person.html+row.erb` to
+render each row:
 
 ```erb
 <%# locals: { row:, person: nil } %>
-<% row.cell :name do |cell| %>
+<% row.text :name do |cell| %>
   <%= link_to cell.value, [:edit, person] %>
 <% end %>
-<% row.cell :email %>
+<% row.text :email %>
 ```
 
-The table component will call your partial once per row and accumulate the cells
+The table will call your block / partial once per row and accumulate the cells
 you generate into rows, including a header row:
 
 ```html
@@ -79,52 +95,36 @@ You can customize the partial and/or the name of the resource in a similar style
 to view partials:
 
 ```erb
-<%= render Katalyst::TableComponent.new(collection: @employees, as: :person, partial: "person") %>
-``` 
-
-### Inline tables
-
-You can use the `table_with` helper to generate a table inline in your view without explicitly interacting with the
-table component. This is primarily intended for backwards compatibility, but it can be useful for simple tables.
-
-Add `include Katalyst::Tables::Frontend` to your `ApplicationHelper` or similar.
-
-```erb
-<%= table_with collection: @people do |row, person| %>
-  <% row.cell :name do |cell| %>
-    <%= link_to cell.value, [:edit, person] %>
-  <% end %>
-  <% row.cell :email %>
-<% end %>
+<%= table_with(collection: @employees, as: :person, partial: "person") %>
 ```
 
 ### HTML Attributes
 
 You can add custom attributes on table, row, and cell tags.
 
-The table tag takes attributes passed to `TableComponent` or via the call to `table_with`, similar to `form_with`:
+The table tag takes attributes passed to `table_with` helper, similar to `form_with`:
 
 ```erb
-<%= TableComponent.new(collection: @people, id: "people-table")
+<%= table_with(collection: @people, id: "people-table")
 ```
 
 Cells support the same approach:
 
 ```erb
-<%= row.cell :name, class: "name" %>
+<%= row.text :name, class: "name" %>
 ```
 
 Rows do not get called directly, so instead you can assign to `html_attributes` on the row builder to customize row tag
 generation.
 
 ```erb
-<% row.html_attributes = { id: person.id } if row.body? %>
+<% row.update_html_attributes(id: person.id) if row.body? %>
 ```
 
 Note: because the row builder gets called to generate the header row, you may need to guard calls that access the
 `person` directly as shown in the previous example. You could also check whether `person` is present.
 
-#### Headers
+### Headers
 
 Tables will automatically generate a header row for you by calling your row partial or provided block with no object.
 During this call, `row.header?` is true, `row.body?` is false, and the object (`person`) is nil.
@@ -133,14 +133,14 @@ All cells generated in the table header iteration will automatically be header c
 in your body rows by passing `heading: true` when you generate the cell.
 
 ```erb
-<% row.cell :id, heading: true %>
+<% row.number :id, heading: true %>
 ```
 
 The table header cells default to showing the capitalized column name, but you can customize this in one of two ways:
 
 * Set the value inline
     ```erb
-    <% row.cell :id, label: "ID" %>
+    <% row.number :id, label: "ID" %>
     ```
 * Define a translation for the attribute
     ```yml
@@ -163,194 +163,72 @@ the table cell. This is often all you need to do, but if you do want to customis
 the value you can pass a block instead:
 
 ```erb
-<% row.cell :status do %>
+<% row.text :status do %>
   <%= person.password.present? ? "Active" : "Invited" %>
 <% end %>
 ```
 
-In the context of the block you have access the cell builder if you simply
+In the context of the block you have access the cell component if you simply
 want to extend the default behaviour:
 
 ```erb
-<% row.cell :status do |cell| %>
-  <%= link_to cell.value, person %>
+<%# @type [Katalyst::Tables::CellComponent] cell %>
+<% row.text :name do |cell| %>
+  <%= link_to cell, person %>
 <% end %>
 ```
 
-You can also assign to `html_attributes` on the cell builder, similar to the row
-builder, but please note that this will replace any options passed to the cell
-as arguments.
+You can also update `html_attributes` on the cell builder, similar to the row
+builder, see `katalyst-html-attributes` for details.
 
 ## Collections
 
 The `Katalyst::Tables::Collection::Base` class provides a convenient way to
 manage collections in your controller actions. It is designed to be used with
 Pagy for pagination and provides built-in sorting when used with ActiveRecord
-collections. Sorting and Pagination are off by default, but you can create
-a custom `ApplicationCollection` class that sets them on by default.
+collections. Sorting and Pagination are off by default, you can either set them
+on creation or create a custom `Collection` class that sets them on by default:
 
 ```ruby
-class ApplicationCollection < Katalyst::Tables::Collection::Base
-  config.sorting = "name" # requires models have a name attribute
+# in #index
+Katalyst::Tables::Collection::Base.new(sorting: "name asc", pagination: true)
+# or as a nested class in your controller
+class Collection < Katalyst::Tables::Collection::Base
+  config.sorting = "name asc" # requires models have a name attribute
   config.pagination = true
 end
 ```
 
-You can then use this class in your controller actions:
-
-```ruby
-class PeopleController < ApplicationController
-  def index
-    @people = ApplicationCollection.new.with_params(params).apply(People.all)
-  end
-end
-```
-
-Collections can be passed directly to `TableComponent` and it will automatically
+Collections can be passed directly to `table_with` method and it will automatically
 detect features such as sorting and generate the appropriate table header links.
 
 ```erb
-<%= render TableComponent.new(collection: @people) %>
-```
-
-## Sort
-
-When sort is enabled, table columns will be automatically sortable in the
-frontend for any column that corresponds to an attribute on the model. You can
-also add sorting to non-attribute columns by defining a scope in your
-model:
-
-```
-scope :order_by_status, ->(direction) { ... }
-```
-
-You can also use sort without using collections, this was the primary backend
-interface for V1 and takes design cues from Pagy. Start by including the backend
-in your controller(s):
-
-```ruby
-include Katalyst::Tables::Backend
+<%= table_with(collection:) %>
 ```
 
-Now, in your controller index actions, you can sort your active record
-collections based on the `sort` param which is appended to the current URL as a
-get parameter when a user clicks on a column header.
-
-Building on our example from earlier:
-
-```ruby
-class PeopleController < ApplicationController
-  include Katalyst::Tables::Backend
-  
-  def index
-    @people = People.all
-
-    @sort, @people = table_sort(@people) # sort
-  end
-end
-```
-
-You then add the sort form object to your view so that it can add column header
-links and show the current sort state:
+## Summary tables
+You can use the `Katalyst::SummaryTableComponent` to render a single record utilizing all the functionality from the 
+`Katalyst::TableComponent`. 
 
 ```erb
-<%= table_with collection: @people, sort: @sort do |row, person| %>
-  <%= row.cell :name %>
-  <%= row.cell :email %>
+<%= summary_table_with model: @person do |row| %>
+  <% row.text :name %>
+  <% row.text :email %>
 <% end %>
 ```
 
-## Pagination
-
-This gem designed to work with [pagy](https://github.com/ddnexus/pagy/).
-
-If you use collections and enable pagination then pagy will be called internally
-and the pagy metadata will be available as `pagination` on the collection.
-
-`Katalyst::Tables::PagyNavComponent` can be used to render the pagination links
-for a collection.
-
-```erb
-<%= render Katalyst::Tables::PagyNavComponent.new(collection: @people) %>
-```
-
 ## Extensions
 
-The following extensions are available:
+The following extensions are available and activated by default:
 
+* [Identifiable](docs/identifiable.md) - adds default dom ids to the table and data rows.
 * [Orderable](docs/orderable.md) - adds bulk-update for 'ordinal' columns via dragging rows in the table.
+* [Pagination](docs/pagination.md) - handles paginating of data in the collection.
 * [Selectable](docs/selectable.md) - adds bulk-action support for rows in the table.
+* [Sortable](docs/sortable.md) - table column headers that can be sorted will be wrapped in links.
+* [Customization](docs/customization.md) - customize the table and cell rendering.
 
-## Customization
-
-A common pattern we use is to have a cell at the end of the table for actions. For example:
-
-```html
-<table class="action-table">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th class="actions"></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Alice</td>
-      <td class="actions">
-        <a href="/people/1/edit">Edit</a>
-        <a href="/people/1" method="delete">Delete</a>
-      </td>
-    </tr>
-  </tbody>
-</table>
-```
-
-You can write a custom component that helps generate this type of table by
-adding the required classes and adding helpers for generating the actions.
-This allows for a declarative table syntax, something like this:
-
-```erb
-<%= render ActionTableComponent.new(collection:) do |row| %>
-  <% row.cell :name %>
-  <% row.actions do |cell| %>
-    <%= cell.action "Edit", :edit %>
-    <%= cell.action "Delete", :delete, method: :delete %>
-  <% end %>
-<% end %>
-```
-
-And the customized component:
-
-```ruby
-class ActionTableComponent < Katalyst::TableComponent
-
-  config.header_row = "ActionHeaderRow"
-  config.body_row   = "ActionBodyRow"
-  config.body_cell  = "ActionBodyCell"
-  
-  def default_html_attributes
-    { class: "action-table" }
-  end
-
-  class ActionHeaderRow < Katalyst::Tables::HeaderRowComponent
-    def actions(&block)
-      cell(:actions, class: "actions", label: "", &block)
-    end
-  end
-
-  class ActionBodyRow < Katalyst::Tables::BodyRowComponent
-    def actions(&block)
-      cell(:actions, class: "actions", &block)
-    end
-  end
-
-  class ActionBodyCell < Katalyst::Tables::BodyCellComponent
-    def action(label, href, **attrs)
-      content_tag(:a, label, href: href, **attrs)
-    end
-  end
-end
-```
+You can disable extensions by altering the `Katalyst::Tables.config.component_extensions` before initialization.
 
 ## Development
 

data/app/assets/builds/katalyst/tables.esm.js

@@ -1,41 +1,4 @@
 import { Controller } from '@hotwired/stimulus';
-import { Turbo } from '@hotwired/turbo-rails';
-
-class TurboCollectionController extends Controller {
-  static values = {
-    query: String,
-    sort: String,
-  };
-
-  queryValueChanged(query) {
-    Turbo.navigator.history.replace(this.#url(query));
-  }
-
-  sortValueChanged(sort) {
-    document.querySelectorAll(this.#sortSelector).forEach((input) => {
-      if (input) input.value = sort;
-    });
-  }
-
-  get #sortSelector() {
-    return "input[name='sort']";
-  }
-
-  #url(query) {
-    const frame = this.element.closest("turbo-frame");
-    let url;
-
-    if (frame) {
-      url = new URL(frame.baseURI);
-    } else {
-      url = new URL(window.location.href);
-    }
-
-    url.search = query;
-
-    return url;
-  }
-}
 
 class OrderableRowController extends Controller {
   static values = {
@@ -85,6 +48,15 @@ class OrderableRowController extends Controller {
     this.index = index;
   }
 
+  /** Retrieve params for use in the form */
+  params(scope) {
+    const { id_name, id_value, index_name } = this.paramsValue;
+    return [
+      { name: `${scope}[${id_value}][${id_name}]`, value: this.id },
+      { name: `${scope}[${id_value}][${index_name}]`, value: this.index },
+    ];
+  }
+
   /**
    * Restore any visual changes made during drag and remove the drag state.
    */
@@ -450,13 +422,15 @@ class DragState {
 }
 
 class OrderableFormController extends Controller {
+  static values = { scope: String };
+
   add(item) {
-    const { id_name, id_value, index_name } = item.paramsValue;
-    this.element.insertAdjacentHTML(
-      "beforeend",
-      `<input type="hidden" name="${id_name}" value="${id_value}" data-generated>
-              <input type="hidden" name="${index_name}" value="${item.index}" data-generated>`,
-    );
+    item.params(this.scopeValue).forEach(({ name, value }) => {
+      this.element.insertAdjacentHTML(
+        "beforeend",
+        `<input type="hidden" name="${name}" value="${value}" data-generated>`,
+      );
+    });
   }
 
   submit() {
@@ -560,10 +534,6 @@ class SelectionItemController extends Controller {
 }
 
 const Definitions = [
-  {
-    identifier: "tables--turbo--collection",
-    controllerConstructor: TurboCollectionController,
-  },
   {
     identifier: "tables--orderable--item",
     controllerConstructor: OrderableRowController,

data/app/assets/builds/katalyst/tables.js

@@ -1,41 +1,4 @@
 import { Controller } from '@hotwired/stimulus';
-import { Turbo } from '@hotwired/turbo-rails';
-
-class TurboCollectionController extends Controller {
-  static values = {
-    query: String,
-    sort: String,
-  };
-
-  queryValueChanged(query) {
-    Turbo.navigator.history.replace(this.#url(query));
-  }
-
-  sortValueChanged(sort) {
-    document.querySelectorAll(this.#sortSelector).forEach((input) => {
-      if (input) input.value = sort;
-    });
-  }
-
-  get #sortSelector() {
-    return "input[name='sort']";
-  }
-
-  #url(query) {
-    const frame = this.element.closest("turbo-frame");
-    let url;
-
-    if (frame) {
-      url = new URL(frame.baseURI);
-    } else {
-      url = new URL(window.location.href);
-    }
-
-    url.search = query;
-
-    return url;
-  }
-}
 
 class OrderableRowController extends Controller {
   static values = {
@@ -85,6 +48,15 @@ class OrderableRowController extends Controller {
     this.index = index;
   }
 
+  /** Retrieve params for use in the form */
+  params(scope) {
+    const { id_name, id_value, index_name } = this.paramsValue;
+    return [
+      { name: `${scope}[${id_value}][${id_name}]`, value: this.id },
+      { name: `${scope}[${id_value}][${index_name}]`, value: this.index },
+    ];
+  }
+
   /**
    * Restore any visual changes made during drag and remove the drag state.
    */
@@ -450,13 +422,15 @@ class DragState {
 }
 
 class OrderableFormController extends Controller {
+  static values = { scope: String };
+
   add(item) {
-    const { id_name, id_value, index_name } = item.paramsValue;
-    this.element.insertAdjacentHTML(
-      "beforeend",
-      `<input type="hidden" name="${id_name}" value="${id_value}" data-generated>
-              <input type="hidden" name="${index_name}" value="${item.index}" data-generated>`,
-    );
+    item.params(this.scopeValue).forEach(({ name, value }) => {
+      this.element.insertAdjacentHTML(
+        "beforeend",
+        `<input type="hidden" name="${name}" value="${value}" data-generated>`,
+      );
+    });
   }
 
   submit() {
@@ -560,10 +534,6 @@ class SelectionItemController extends Controller {
 }
 
 const Definitions = [
-  {
-    identifier: "tables--turbo--collection",
-    controllerConstructor: TurboCollectionController,
-  },
   {
     identifier: "tables--orderable--item",
     controllerConstructor: OrderableRowController,

data/app/assets/builds/katalyst/tables.min.js

@@ -1,2 +1,2 @@
-import{Controller as t}from"@hotwired/stimulus";import{Turbo as e}from"@hotwired/turbo-rails";class s{constructor(t,e,s){this.cursorOffset=e.offsetY,this.initialPosition=e.target.offsetTop-t.offsetTop,this.targetId=s}updateCursor(t,e,s,i){this.listOffset=t.getBoundingClientRect().top;let r=s.clientY-this.listOffset-this.cursorOffset;this.#t(t,e,r,i)}updateScroll(t,e,s){const i=this.listOffset;this.listOffset=t.getBoundingClientRect().top;const r=i-this.listOffset,a=this.position+r;this.#t(t,e,a,s)}#t(t,e,s,i){s=Math.max(s,0),s=Math.min(s,t.offsetHeight-e.offsetHeight),this.position=s;i(s-this.initialPosition)}}class i extends t{static outlets=["tables--selection--form"];static values={params:Object,checked:Boolean};tablesSelectionFormOutletConnected(t){this.checkedValue=t.isSelected(this.id)}change(t){t.preventDefault(),this.checkedValue=this.tablesSelectionFormOutlet.toggle(this.id)}get id(){return this.paramsValue.id}checkedValueChanged(t){this.element.querySelector("input").checked=t}}const r=[{identifier:"tables--turbo--collection",controllerConstructor:class extends t{static values={query:String,sort:String};queryValueChanged(t){e.navigator.history.replace(this.#e(t))}sortValueChanged(t){document.querySelectorAll(this.#s).forEach((e=>{e&&(e.value=t)}))}get#s(){return"input[name='sort']"}#e(t){const e=this.element.closest("turbo-frame");let s;return s=e?new URL(e.baseURI):new URL(window.location.href),s.search=t,s}}},{identifier:"tables--orderable--item",controllerConstructor:class extends t{static values={params:Object};connect(){var t;this.index=(t=this.row,Array.from(t.parentElement.children).indexOf(t))}paramsValueChanged(t){this.id=t.id_value}dragUpdate(t){this.dragOffset=t,this.row.style.position="relative",this.row.style.top=t+"px",this.row.style.zIndex="1",this.row.toggleAttribute("dragging",!0)}updateVisually(t){this.row.style.position="relative",this.row.style.top=this.row.offsetHeight*(t-this.dragIndex)+"px"}updateIndex(t){this.index=t}reset(){delete this.dragOffset,this.row.removeAttribute("style"),this.row.removeAttribute("dragging")}get hasChanges(){return this.paramsValue.index_value!==this.index}get dragIndex(){return this.dragOffset&&0!==this.dragOffset?this.index+Math.round(this.dragOffset/this.row.offsetHeight):this.index}get comparisonIndex(){return this.dragOffset?this.dragIndex+(this.dragOffset>0?.5:-.5):this.index}get row(){return this.element.parentElement}}},{identifier:"tables--orderable--list",controllerConstructor:class extends t{static outlets=["tables--orderable--item","tables--orderable--form"];startDragging(t){this.dragState=t,document.addEventListener("mousemove",this.mousemove),document.addEventListener("mouseup",this.mouseup),window.addEventListener("scroll",this.scroll,!0),this.element.style.position="relative"}stopDragging(){const t=this.dragState;return delete this.dragState,document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup),window.removeEventListener("scroll",this.scroll,!0),this.element.removeAttribute("style"),this.tablesOrderableItemOutlets.forEach((t=>t.reset())),t}drop(){const t=this.dragItem;if(!t)return;const e=t.dragIndex,s=this.tablesOrderableItemOutlets[e];s&&(e<t.index?s.row.insertAdjacentElement("beforebegin",t.row):e>t.index&&s.row.insertAdjacentElement("afterend",t.row),this.tablesOrderableItemOutlets.forEach(((t,e)=>t.updateIndex(e))),this.commitChanges())}commitChanges(){this.tablesOrderableFormOutlet.clear(),this.tablesOrderableItemOutlets.forEach((t=>{t.hasChanges&&this.tablesOrderableFormOutlet.add(t)})),this.tablesOrderableFormOutlet.submit()}mousedown(t){if(this.isDragging)return;const e=this.#i(t.target);e&&(t.preventDefault(),this.startDragging(new s(this.element,t,e.id)),this.dragState.updateCursor(this.element,e.row,t,this.animate))}mousemove=t=>{this.isDragging&&(t.preventDefault(),this.ticking||(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState.updateCursor(this.element,this.dragItem.row,t,this.animate)}))))};scroll=t=>{this.isDragging&&!this.ticking&&(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState.updateScroll(this.element,this.dragItem.row,this.animate)})))};mouseup=t=>{this.isDragging&&(this.drop(),this.stopDragging(),this.tablesOrderableFormOutlets.forEach((t=>delete t.dragState)))};tablesOrderableFormOutletConnected(t,e){t.dragState&&this.startDragging(t.dragState)}tablesOrderableFormOutletDisconnected(t,e){this.isDragging&&(t.dragState=this.stopDragging())}animate=t=>{const e=this.dragItem;e.dragUpdate(t),this.#r.forEach(((t,s)=>{t!==e&&t.updateVisually(s)}))};get isDragging(){return!!this.dragState}get dragItem(){return this.isDragging?this.tablesOrderableItemOutlets.find((t=>t.id===this.dragState.targetId)):null}get#r(){return this.tablesOrderableItemOutlets.toSorted(((t,e)=>t.comparisonIndex-e.comparisonIndex))}#i(t){return this.tablesOrderableItemOutlets.find((e=>e.element===t))}}},{identifier:"tables--orderable--form",controllerConstructor:class extends t{add(t){const{id_name:e,id_value:s,index_name:i}=t.paramsValue;this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${e}" value="${s}" data-generated>\n              <input type="hidden" name="${i}" value="${t.index}" data-generated>`)}submit(){0!==this.inputs.length&&this.element.requestSubmit()}clear(){this.inputs.forEach((t=>t.remove()))}get inputs(){return this.element.querySelectorAll("input[data-generated]")}}},{identifier:"tables--selection--form",controllerConstructor:class extends t{static values={count:Number,primaryKey:{type:String,default:"id"}};static targets=["count","singular","plural"];connect(){this.countValue=this.inputs.length}toggle(t){const e=this.input(t);return e?e.remove():this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${this.primaryKeyValue}[]" value="${t}">`),this.countValue=this.inputs.length,!e}isSelected(t){return!!this.input(t)}get inputs(){return this.element.querySelectorAll(`input[name="${this.primaryKeyValue}[]"]`)}input(t){return this.element.querySelector(`input[name="${this.primaryKeyValue}[]"][value="${t}"]`)}countValueChanged(t){this.element.toggleAttribute("hidden",0===t),this.countTarget.textContent=t,this.singularTarget.toggleAttribute("hidden",1!==t),this.pluralTarget.toggleAttribute("hidden",1===t)}}},{identifier:"tables--selection--item",controllerConstructor:i}];export{r as default};
+import{Controller as t}from"@hotwired/stimulus";class e{constructor(t,e,s){this.cursorOffset=e.offsetY,this.initialPosition=e.target.offsetTop-t.offsetTop,this.targetId=s}updateCursor(t,e,s,i){this.listOffset=t.getBoundingClientRect().top;let r=s.clientY-this.listOffset-this.cursorOffset;this.#t(t,e,r,i)}updateScroll(t,e,s){const i=this.listOffset;this.listOffset=t.getBoundingClientRect().top;const r=i-this.listOffset,a=this.position+r;this.#t(t,e,a,s)}#t(t,e,s,i){s=Math.max(s,0),s=Math.min(s,t.offsetHeight-e.offsetHeight),this.position=s;i(s-this.initialPosition)}}class s extends t{static outlets=["tables--selection--form"];static values={params:Object,checked:Boolean};tablesSelectionFormOutletConnected(t){this.checkedValue=t.isSelected(this.id)}change(t){t.preventDefault(),this.checkedValue=this.tablesSelectionFormOutlet.toggle(this.id)}get id(){return this.paramsValue.id}checkedValueChanged(t){this.element.querySelector("input").checked=t}}const i=[{identifier:"tables--orderable--item",controllerConstructor:class extends t{static values={params:Object};connect(){var t;this.index=(t=this.row,Array.from(t.parentElement.children).indexOf(t))}paramsValueChanged(t){this.id=t.id_value}dragUpdate(t){this.dragOffset=t,this.row.style.position="relative",this.row.style.top=t+"px",this.row.style.zIndex="1",this.row.toggleAttribute("dragging",!0)}updateVisually(t){this.row.style.position="relative",this.row.style.top=this.row.offsetHeight*(t-this.dragIndex)+"px"}updateIndex(t){this.index=t}params(t){const{id_name:e,id_value:s,index_name:i}=this.paramsValue;return[{name:`${t}[${s}][${e}]`,value:this.id},{name:`${t}[${s}][${i}]`,value:this.index}]}reset(){delete this.dragOffset,this.row.removeAttribute("style"),this.row.removeAttribute("dragging")}get hasChanges(){return this.paramsValue.index_value!==this.index}get dragIndex(){return this.dragOffset&&0!==this.dragOffset?this.index+Math.round(this.dragOffset/this.row.offsetHeight):this.index}get comparisonIndex(){return this.dragOffset?this.dragIndex+(this.dragOffset>0?.5:-.5):this.index}get row(){return this.element.parentElement}}},{identifier:"tables--orderable--list",controllerConstructor:class extends t{static outlets=["tables--orderable--item","tables--orderable--form"];startDragging(t){this.dragState=t,document.addEventListener("mousemove",this.mousemove),document.addEventListener("mouseup",this.mouseup),window.addEventListener("scroll",this.scroll,!0),this.element.style.position="relative"}stopDragging(){const t=this.dragState;return delete this.dragState,document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup),window.removeEventListener("scroll",this.scroll,!0),this.element.removeAttribute("style"),this.tablesOrderableItemOutlets.forEach((t=>t.reset())),t}drop(){const t=this.dragItem;if(!t)return;const e=t.dragIndex,s=this.tablesOrderableItemOutlets[e];s&&(e<t.index?s.row.insertAdjacentElement("beforebegin",t.row):e>t.index&&s.row.insertAdjacentElement("afterend",t.row),this.tablesOrderableItemOutlets.forEach(((t,e)=>t.updateIndex(e))),this.commitChanges())}commitChanges(){this.tablesOrderableFormOutlet.clear(),this.tablesOrderableItemOutlets.forEach((t=>{t.hasChanges&&this.tablesOrderableFormOutlet.add(t)})),this.tablesOrderableFormOutlet.submit()}mousedown(t){if(this.isDragging)return;const s=this.#e(t.target);s&&(t.preventDefault(),this.startDragging(new e(this.element,t,s.id)),this.dragState.updateCursor(this.element,s.row,t,this.animate))}mousemove=t=>{this.isDragging&&(t.preventDefault(),this.ticking||(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState.updateCursor(this.element,this.dragItem.row,t,this.animate)}))))};scroll=t=>{this.isDragging&&!this.ticking&&(this.ticking=!0,window.requestAnimationFrame((()=>{this.ticking=!1,this.dragState.updateScroll(this.element,this.dragItem.row,this.animate)})))};mouseup=t=>{this.isDragging&&(this.drop(),this.stopDragging(),this.tablesOrderableFormOutlets.forEach((t=>delete t.dragState)))};tablesOrderableFormOutletConnected(t,e){t.dragState&&this.startDragging(t.dragState)}tablesOrderableFormOutletDisconnected(t,e){this.isDragging&&(t.dragState=this.stopDragging())}animate=t=>{const e=this.dragItem;e.dragUpdate(t),this.#s.forEach(((t,s)=>{t!==e&&t.updateVisually(s)}))};get isDragging(){return!!this.dragState}get dragItem(){return this.isDragging?this.tablesOrderableItemOutlets.find((t=>t.id===this.dragState.targetId)):null}get#s(){return this.tablesOrderableItemOutlets.toSorted(((t,e)=>t.comparisonIndex-e.comparisonIndex))}#e(t){return this.tablesOrderableItemOutlets.find((e=>e.element===t))}}},{identifier:"tables--orderable--form",controllerConstructor:class extends t{static values={scope:String};add(t){t.params(this.scopeValue).forEach((({name:t,value:e})=>{this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${t}" value="${e}" data-generated>`)}))}submit(){0!==this.inputs.length&&this.element.requestSubmit()}clear(){this.inputs.forEach((t=>t.remove()))}get inputs(){return this.element.querySelectorAll("input[data-generated]")}}},{identifier:"tables--selection--form",controllerConstructor:class extends t{static values={count:Number,primaryKey:{type:String,default:"id"}};static targets=["count","singular","plural"];connect(){this.countValue=this.inputs.length}toggle(t){const e=this.input(t);return e?e.remove():this.element.insertAdjacentHTML("beforeend",`<input type="hidden" name="${this.primaryKeyValue}[]" value="${t}">`),this.countValue=this.inputs.length,!e}isSelected(t){return!!this.input(t)}get inputs(){return this.element.querySelectorAll(`input[name="${this.primaryKeyValue}[]"]`)}input(t){return this.element.querySelector(`input[name="${this.primaryKeyValue}[]"][value="${t}"]`)}countValueChanged(t){this.element.toggleAttribute("hidden",0===t),this.countTarget.textContent=t,this.singularTarget.toggleAttribute("hidden",1!==t),this.pluralTarget.toggleAttribute("hidden",1===t)}}},{identifier:"tables--selection--item",controllerConstructor:s}];export{i as default};
 //# sourceMappingURL=tables.min.js.map