katalyst-tables 3.1.0 → 3.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 196a8b7ff382215cbb156ff83099071aa983176353f819f5031aac774a88a572
-  data.tar.gz: 3d7463ccb20935e52500f186fb7c4024f3c8c236bfb9338a331a0830bf58edb5
+  metadata.gz: 99f68d6b448fc719638002da3066e01c14a1574b544748ecbc4a0b9e78546fa0
+  data.tar.gz: 43aeb38f258254e5e89462354cbb2be64960a09c377ef2ff7830512f6306815b
 SHA512:
-  metadata.gz: 325bfa1b161fa322acd419279a57ddb644f5a3e0289ca42294c9936fe7ea6fcded6f1d077f8866b5b70408d7d495c8dabe4733ba83a1f7652c4eb02115bc5438
-  data.tar.gz: 1382995a15fdc57829232223d67d20a691b9f5b908f4059c7b41dcfdb9396ce1d90f3431417ceb2b88a10eca880939608b20ec19dc421288f25b8c6bfad0c58c
+  metadata.gz: b06c5ee8b89b3c3faed076018a54a66782ab729ea5790c1dae276d8f308e5a72e3843e7b7e7815e549f3dbe66e68225893f8bb9375911b79676e64d06e8a7e0a
+  data.tar.gz: 052ca42441d1f7343700bc0dc6adaca48205470962964c27c82c1a3af3450ab50a38357d46cd950b91b5191f1dfd1ad063471b58fdeb5983b0e7a3a6bc598561

data/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [3.3.0]
+- Custom types for collections which support extensions for filtering with ranges and arrays.
+
+Note that if you have custom types defined for use in your collections, this could be a breaking
+change. We recommend you change your types to inherit from `Katalyst::Tables::Collections::Type::Value`
+and register them with `Katalyst::Tables::Collections::Type`.
+
+`Query` and `Filtering` are still optional extensions. We recommend that you add them to a
+based collection class in your application, e.g. `Admin::Collection`.
+
+## [3.2.0]
+- Enum columns
+- Filter component (still in development, optional extension)
+
+Note: this release adds a dedicated registry for collection filtering types 
+instead of using the default provided by ActiveModel.
+
+If you have custom types that you use with tables collections,
+you will need to register them with Katalyst::Tables::Collection::Type
+in an initializer or similar.
+
 ## [3.1.0]
 - Introduce summary tables
 - Update ruby requirement >= 3.3

data/README.md

@@ -37,6 +37,8 @@ This gem provides entry points for backend and frontend concerns:
 * `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
+* `Katalyst::Tables::Collection::Query` provides build-in query parsing and filtering
+  based on the attributes defined in your collection.
 
 ### Frontend
 
@@ -206,6 +208,29 @@ detect features such as sorting and generate the appropriate table header links.
 <%= table_with(collection:) %>
 ```
 
+### Query
+
+Include `Katalyst::Tables::Collection::Query` into your collection to add automatic
+query parsing and filtering based on the configured attributes. For example:
+
+```ruby
+class Collection < Katalyst::Tables::Collection::Base
+  include Katalyst::Tables::Collection::Query
+  
+  attribute :first_name, :string
+  attribute :created_at, :date
+end
+```
+
+With this definition and a text-input named `query`, your users can write tagged
+query expressions such as `first_name:Aaron` or `created_at:>2024-01-01` and these
+will be automatically parsed and applied to the collection attribute, and the collection
+will automatically generate and apply ActiveRecord conditions to filter the given scope.
+
+There's also a frontend utility, `filter_with(collection:)` that will generate the form
+and show a modal that helps users to interact with the query interface. More details available
+in the [query](docs/query.md) documentation.
+
 ## Summary tables
 You can use the `Katalyst::SummaryTableComponent` to render a single record utilizing all the functionality from the 
 `Katalyst::TableComponent`. 
@@ -221,6 +246,8 @@ You can use the `Katalyst::SummaryTableComponent` to render a single record util
 
 The following extensions are available and activated by default:
 
+* [Filtering](docs/filtering.md) - adds automatic collection filtering based on attributes 
+* [Query](docs/query.md) - adds human-friendly text filtering that populates collection attributes 
 * [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.

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

@@ -533,6 +533,18 @@ class SelectionItemController extends Controller {
   }
 }
 
+class FilterModalController extends Controller {
+  static targets = ["modal"];
+
+  close(e) {
+    delete this.modalTarget.dataset.open;
+  }
+
+  open(e) {
+    this.modalTarget.dataset.open = "true";
+  }
+}
+
 const Definitions = [
   {
     identifier: "tables--orderable--item",
@@ -554,6 +566,10 @@ const Definitions = [
     identifier: "tables--selection--item",
     controllerConstructor: SelectionItemController,
   },
+  {
+    identifier: "tables--filter--modal",
+    controllerConstructor: FilterModalController,
+  },
 ];
 
 export { Definitions as default };

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

@@ -533,6 +533,18 @@ class SelectionItemController extends Controller {
   }
 }
 
+class FilterModalController extends Controller {
+  static targets = ["modal"];
+
+  close(e) {
+    delete this.modalTarget.dataset.open;
+  }
+
+  open(e) {
+    this.modalTarget.dataset.open = "true";
+  }
+}
+
 const Definitions = [
   {
     identifier: "tables--orderable--item",
@@ -554,6 +566,10 @@ const Definitions = [
     identifier: "tables--selection--item",
     controllerConstructor: SelectionItemController,
   },
+  {
+    identifier: "tables--filter--modal",
+    controllerConstructor: FilterModalController,
+  },
 ];
 
 export { Definitions as default };

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

@@ -1,2 +1,2 @@
-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};
+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},{identifier:"tables--filter--modal",controllerConstructor:class extends t{static targets=["modal"];close(t){delete this.modalTarget.dataset.open}open(t){this.modalTarget.dataset.open="true"}}}];export{i as default};
 //# sourceMappingURL=tables.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tables.min.js","sources":["../../../javascript/tables/orderable/list_controller.js","../../../javascript/tables/selection/item_controller.js","../../../javascript/tables/application.js","../../../javascript/tables/orderable/item_controller.js","../../../javascript/tables/orderable/form_controller.js","../../../javascript/tables/selection/form_controller.js"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\nexport default class OrderableListController extends Controller {\n  static outlets = [\"tables--orderable--item\", \"tables--orderable--form\"];\n\n  //region State transitions\n\n  startDragging(dragState) {\n    this.dragState = dragState;\n\n    document.addEventListener(\"mousemove\", this.mousemove);\n    document.addEventListener(\"mouseup\", this.mouseup);\n    window.addEventListener(\"scroll\", this.scroll, true);\n\n    this.element.style.position = \"relative\";\n  }\n\n  stopDragging() {\n    const dragState = this.dragState;\n    delete this.dragState;\n\n    document.removeEventListener(\"mousemove\", this.mousemove);\n    document.removeEventListener(\"mouseup\", this.mouseup);\n    window.removeEventListener(\"scroll\", this.scroll, true);\n\n    this.element.removeAttribute(\"style\");\n    this.tablesOrderableItemOutlets.forEach((item) => item.reset());\n\n    return dragState;\n  }\n\n  drop() {\n    // note: early returns guard against turbo updates that prevent us finding\n    // the right item to drop on. In this situation it's better to discard the\n    // drop than to drop in the wrong place.\n\n    const dragItem = this.dragItem;\n\n    if (!dragItem) return;\n\n    const newIndex = dragItem.dragIndex;\n    const targetItem = this.tablesOrderableItemOutlets[newIndex];\n\n    if (!targetItem) return;\n\n    // swap the dragged item into the correct position for its current offset\n    if (newIndex < dragItem.index) {\n      targetItem.row.insertAdjacentElement(\"beforebegin\", dragItem.row);\n    } else if (newIndex > dragItem.index) {\n      targetItem.row.insertAdjacentElement(\"afterend\", dragItem.row);\n    }\n\n    // reindex all items based on their new positions\n    this.tablesOrderableItemOutlets.forEach((item, index) =>\n      item.updateIndex(index),\n    );\n\n    // save the changes\n    this.commitChanges();\n  }\n\n  commitChanges() {\n    // clear any existing inputs to prevent duplicates\n    this.tablesOrderableFormOutlet.clear();\n\n    // insert any items that have changed position\n    this.tablesOrderableItemOutlets.forEach((item) => {\n      if (item.hasChanges) this.tablesOrderableFormOutlet.add(item);\n    });\n\n    this.tablesOrderableFormOutlet.submit();\n  }\n\n  //endregion\n\n  //region Events\n\n  mousedown(event) {\n    if (this.isDragging) return;\n\n    const target = this.#targetItem(event.target);\n\n    if (!target) return;\n\n    event.preventDefault(); // prevent built-in drag\n\n    this.startDragging(new DragState(this.element, event, target.id));\n\n    this.dragState.updateCursor(this.element, target.row, event, this.animate);\n  }\n\n  mousemove = (event) => {\n    if (!this.isDragging) return;\n\n    event.preventDefault(); // prevent build-in drag\n\n    if (this.ticking) return;\n\n    this.ticking = true;\n\n    window.requestAnimationFrame(() => {\n      this.ticking = false;\n      this.dragState.updateCursor(\n        this.element,\n        this.dragItem.row,\n        event,\n        this.animate,\n      );\n    });\n  };\n\n  scroll = (event) => {\n    if (!this.isDragging || this.ticking) return;\n\n    this.ticking = true;\n\n    window.requestAnimationFrame(() => {\n      this.ticking = false;\n      this.dragState.updateScroll(\n        this.element,\n        this.dragItem.row,\n        this.animate,\n      );\n    });\n  };\n\n  mouseup = (event) => {\n    if (!this.isDragging) return;\n\n    this.drop();\n    this.stopDragging();\n    this.tablesOrderableFormOutlets.forEach((form) => delete form.dragState);\n  };\n\n  tablesOrderableFormOutletConnected(form, element) {\n    if (form.dragState) {\n      // restore the previous controller's state\n      this.startDragging(form.dragState);\n    }\n  }\n\n  tablesOrderableFormOutletDisconnected(form, element) {\n    if (this.isDragging) {\n      // cache drag state in the form\n      form.dragState = this.stopDragging();\n    }\n  }\n\n  //endregion\n\n  //region Helpers\n\n  /**\n   * Updates the position of the drag item with a relative offset. Updates\n   * other items relative to the new position of the drag item, as required.\n   *\n   * @callback {OrderableListController~animate}\n   * @param {number} offset\n   */\n  animate = (offset) => {\n    const dragItem = this.dragItem;\n\n    // Visually update the dragItem so it follows the cursor\n    dragItem.dragUpdate(offset);\n\n    // Visually updates the position of all items in the list relative to the\n    // dragged item. No actual changes to orderings at this stage.\n    this.#currentItems.forEach((item, index) => {\n      if (item === dragItem) return;\n      item.updateVisually(index);\n    });\n  };\n\n  get isDragging() {\n    return !!this.dragState;\n  }\n\n  get dragItem() {\n    if (!this.isDragging) return null;\n\n    return this.tablesOrderableItemOutlets.find(\n      (item) => item.id === this.dragState.targetId,\n    );\n  }\n\n  /**\n   * Returns the current items in the list, sorted by their current index.\n   * Current uses the drag index if the item is being dragged, if set.\n   *\n   * @returns {Array[OrderableRowController]}\n   */\n  get #currentItems() {\n    return this.tablesOrderableItemOutlets.toSorted(\n      (a, b) => a.comparisonIndex - b.comparisonIndex,\n    );\n  }\n\n  /**\n   * Returns the item outlet that was clicked on, if any.\n   *\n   * @param element {HTMLElement} the clicked ordinal cell\n   * @returns {OrderableRowController}\n   */\n  #targetItem(element) {\n    return this.tablesOrderableItemOutlets.find(\n      (item) => item.element === element,\n    );\n  }\n\n  //endregion\n}\n\n/**\n * During drag we want to be able to translate a document-relative coordinate\n * into a coordinate relative to the list element. This state object calculates\n * and stores internal state so that we can translate absolute page coordinates\n * from mouse events into relative offsets for the list items within the list\n * element.\n *\n * We also keep track of the drag target so that if the controller is attached\n * to a new element during the drag we can continue after the turbo update.\n */\nclass DragState {\n  /**\n   * @param list {HTMLElement} the list controller's element (tbody)\n   * @param event {MouseEvent} the initial event\n   * @param id {String} the id of the element being dragged\n   */\n  constructor(list, event, id) {\n    // cursor offset is the offset of the cursor relative to the drag item\n    this.cursorOffset = event.offsetY;\n\n    // initial offset is the offset position of the drag item at drag start\n    this.initialPosition = event.target.offsetTop - list.offsetTop;\n\n    // id of the item being dragged\n    this.targetId = id;\n  }\n\n  /**\n   * Calculates the offset of the drag item relative to its initial position.\n   *\n   * @param list {HTMLElement} the list controller's element (tbody)\n   * @param row {HTMLElement} the row being dragged\n   * @param event {MouseEvent} the current event\n   * @param callback {OrderableListController~animate} updates the drag item with a relative offset\n   */\n  updateCursor(list, row, event, callback) {\n    // Calculate and store the list offset relative to the viewport\n    // This value is cached so we can calculate the outcome of any scroll events\n    this.listOffset = list.getBoundingClientRect().top;\n\n    // Calculate the position of the cursor relative to the list.\n    // Accounts for scroll offsets by using the item's bounding client rect.\n    const cursorPosition = event.clientY - this.listOffset;\n\n    // intended item position relative to the list, from cursor position\n    let itemPosition = cursorPosition - this.cursorOffset;\n\n    this.#updateItemPosition(list, row, itemPosition, callback);\n  }\n\n  /**\n   * Animates the item's position as the list scrolls. Requires a previous call\n   * to set the scroll offset.\n   *\n   * @param list {HTMLElement} the list controller's element (tbody)\n   * @param row {HTMLElement} the row being dragged\n   * @param callback {OrderableListController~animate} updates the drag item with a relative offset\n   */\n  updateScroll(list, row, callback) {\n    const previousScrollOffset = this.listOffset;\n\n    // Calculate and store the list offset relative to the viewport\n    // This value is cached so we can calculate the outcome of any scroll events\n    this.listOffset = list.getBoundingClientRect().top;\n\n    // Calculate the change in scroll offset since the last update\n    const scrollDelta = previousScrollOffset - this.listOffset;\n\n    // intended item position relative to the list, from cursor position\n    const position = this.position + scrollDelta;\n\n    this.#updateItemPosition(list, row, position, callback);\n  }\n\n  #updateItemPosition(list, row, position, callback) {\n    // ensure itemPosition is within the bounds of the list (tbody)\n    position = Math.max(position, 0);\n    position = Math.min(position, list.offsetHeight - row.offsetHeight);\n\n    // cache the item's position relative to the list for use in scroll events\n    this.position = position;\n\n    // Item has position: relative, so we want to calculate the amount to move\n    // the item relative to it's DOM position to represent how much it has been\n    // dragged by.\n    const offset = position - this.initialPosition;\n\n    // Convert itemPosition from offset relative to list to offset relative to\n    // its position within the DOM (if it hadn't moved).\n    callback(offset);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class SelectionItemController extends Controller {\n  static outlets = [\"tables--selection--form\"];\n  static values = {\n    params: Object,\n    checked: Boolean,\n  };\n\n  tablesSelectionFormOutletConnected(form) {\n    this.checkedValue = form.isSelected(this.id);\n  }\n\n  change(e) {\n    e.preventDefault();\n\n    this.checkedValue = this.tablesSelectionFormOutlet.toggle(this.id);\n  }\n\n  get id() {\n    return this.paramsValue.id;\n  }\n\n  checkedValueChanged(checked) {\n    this.element.querySelector(\"input\").checked = checked;\n  }\n}\n","import OrderableItemController from \"./orderable/item_controller\";\nimport OrderableListController from \"./orderable/list_controller\";\nimport OrderableFormController from \"./orderable/form_controller\";\nimport SelectionFormController from \"./selection/form_controller\";\nimport SelectionItemController from \"./selection/item_controller\";\n\nconst Definitions = [\n  {\n    identifier: \"tables--orderable--item\",\n    controllerConstructor: OrderableItemController,\n  },\n  {\n    identifier: \"tables--orderable--list\",\n    controllerConstructor: OrderableListController,\n  },\n  {\n    identifier: \"tables--orderable--form\",\n    controllerConstructor: OrderableFormController,\n  },\n  {\n    identifier: \"tables--selection--form\",\n    controllerConstructor: SelectionFormController,\n  },\n  {\n    identifier: \"tables--selection--item\",\n    controllerConstructor: SelectionItemController,\n  },\n];\n\nexport { Definitions as default };\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class OrderableRowController extends Controller {\n  static values = {\n    params: Object,\n  };\n\n  connect() {\n    // index from server may be inconsistent with the visual ordering,\n    // especially if this is a new node. Use positional indexes instead,\n    // as these are the values we will send on save.\n    this.index = domIndex(this.row);\n  }\n\n  paramsValueChanged(params) {\n    this.id = params.id_value;\n  }\n\n  dragUpdate(offset) {\n    this.dragOffset = offset;\n    this.row.style.position = \"relative\";\n    this.row.style.top = offset + \"px\";\n    this.row.style.zIndex = \"1\";\n    this.row.toggleAttribute(\"dragging\", true);\n  }\n\n  /**\n   * Called on items that are not the dragged item during drag. Updates the\n   * visual position of the item relative to the dragged item.\n   *\n   * @param index {number} intended index of the item during drag\n   */\n  updateVisually(index) {\n    this.row.style.position = \"relative\";\n    this.row.style.top = `${\n      this.row.offsetHeight * (index - this.dragIndex)\n    }px`;\n  }\n\n  /**\n   * Set the index value of the item. This is called on all items after a drop\n   * event. If the index is different to the params index then this item has\n   * changed.\n   *\n   * @param index {number} the new index value\n   */\n  updateIndex(index) {\n    this.index = index;\n  }\n\n  /** Retrieve params for use in the form */\n  params(scope) {\n    const { id_name, id_value, index_name } = this.paramsValue;\n    return [\n      { name: `${scope}[${id_value}][${id_name}]`, value: this.id },\n      { name: `${scope}[${id_value}][${index_name}]`, value: this.index },\n    ];\n  }\n\n  /**\n   * Restore any visual changes made during drag and remove the drag state.\n   */\n  reset() {\n    delete this.dragOffset;\n    this.row.removeAttribute(\"style\");\n    this.row.removeAttribute(\"dragging\");\n  }\n\n  /**\n   * @returns {boolean} true when the item has a change to its index value\n   */\n  get hasChanges() {\n    return this.paramsValue.index_value !== this.index;\n  }\n\n  /**\n   * Calculate the relative index of the item during drag. This is used to\n   * sort items during drag as it takes into account any uncommitted changes\n   * to index caused by the drag offset.\n   *\n   * @returns {number} index for the purposes of drag and drop ordering\n   */\n  get dragIndex() {\n    if (this.dragOffset && this.dragOffset !== 0) {\n      return this.index + Math.round(this.dragOffset / this.row.offsetHeight);\n    } else {\n      return this.index;\n    }\n  }\n\n  /**\n   * Index value for use in comparisons during drag. This is used to determine\n   * whether the dragged item is above or below another item. If this item is\n   * being dragged then we offset the index by 0.5 to ensure that it jumps up\n   * or down when it reaches the midpoint of the item above or below it.\n   *\n   * @returns {number}\n   */\n  get comparisonIndex() {\n    if (this.dragOffset) {\n      return this.dragIndex + (this.dragOffset > 0 ? 0.5 : -0.5);\n    } else {\n      return this.index;\n    }\n  }\n\n  /**\n   * The containing row element.\n   *\n   * @returns {HTMLElement}\n   */\n  get row() {\n    return this.element.parentElement;\n  }\n}\n\nfunction domIndex(element) {\n  return Array.from(element.parentElement.children).indexOf(element);\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class OrderableFormController extends Controller {\n  static values = { scope: String };\n\n  add(item) {\n    item.params(this.scopeValue).forEach(({ name, value }) => {\n      this.element.insertAdjacentHTML(\n        \"beforeend\",\n        `<input type=\"hidden\" name=\"${name}\" value=\"${value}\" data-generated>`,\n      );\n    });\n  }\n\n  submit() {\n    if (this.inputs.length === 0) return;\n\n    this.element.requestSubmit();\n  }\n\n  clear() {\n    this.inputs.forEach((input) => input.remove());\n  }\n\n  get inputs() {\n    return this.element.querySelectorAll(\"input[data-generated]\");\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class SelectionFormController extends Controller {\n  static values = {\n    count: Number,\n    primaryKey: { type: String, default: \"id\" },\n  };\n  static targets = [\"count\", \"singular\", \"plural\"];\n\n  connect() {\n    this.countValue = this.inputs.length;\n  }\n\n  /**\n   * @param id to toggle\n   * @return {boolean} true if selected, false if unselected\n   */\n  toggle(id) {\n    const input = this.input(id);\n\n    if (input) {\n      input.remove();\n    } else {\n      this.element.insertAdjacentHTML(\n        \"beforeend\",\n        `<input type=\"hidden\" name=\"${this.primaryKeyValue}[]\" value=\"${id}\">`,\n      );\n    }\n\n    this.countValue = this.inputs.length;\n\n    return !input;\n  }\n\n  /**\n   * @returns {boolean} true if the given id is currently selected\n   */\n  isSelected(id) {\n    return !!this.input(id);\n  }\n\n  get inputs() {\n    return this.element.querySelectorAll(\n      `input[name=\"${this.primaryKeyValue}[]\"]`,\n    );\n  }\n\n  input(id) {\n    return this.element.querySelector(\n      `input[name=\"${this.primaryKeyValue}[]\"][value=\"${id}\"]`,\n    );\n  }\n\n  countValueChanged(count) {\n    this.element.toggleAttribute(\"hidden\", count === 0);\n    this.countTarget.textContent = count;\n    this.singularTarget.toggleAttribute(\"hidden\", count !== 1);\n    this.pluralTarget.toggleAttribute(\"hidden\", count === 1);\n  }\n}\n"],"names":["DragState","constructor","list","event","id","this","cursorOffset","offsetY","initialPosition","target","offsetTop","targetId","updateCursor","row","callback","listOffset","getBoundingClientRect","top","itemPosition","clientY","updateItemPosition","updateScroll","previousScrollOffset","scrollDelta","position","Math","max","min","offsetHeight","SelectionItemController","Controller","static","params","Object","checked","Boolean","tablesSelectionFormOutletConnected","form","checkedValue","isSelected","change","e","preventDefault","tablesSelectionFormOutlet","toggle","paramsValue","checkedValueChanged","element","querySelector","Definitions","identifier","controllerConstructor","connect","index","Array","from","parentElement","children","indexOf","paramsValueChanged","id_value","dragUpdate","offset","dragOffset","style","zIndex","toggleAttribute","updateVisually","dragIndex","updateIndex","scope","id_name","index_name","name","value","reset","removeAttribute","hasChanges","index_value","round","comparisonIndex","startDragging","dragState","document","addEventListener","mousemove","mouseup","window","scroll","stopDragging","removeEventListener","tablesOrderableItemOutlets","forEach","item","drop","dragItem","newIndex","targetItem","insertAdjacentElement","commitChanges","tablesOrderableFormOutlet","clear","add","submit","mousedown","isDragging","animate","ticking","requestAnimationFrame","tablesOrderableFormOutlets","tablesOrderableFormOutletConnected","tablesOrderableFormOutletDisconnected","currentItems","find","toSorted","a","b","String","scopeValue","insertAdjacentHTML","inputs","length","requestSubmit","input","remove","querySelectorAll","count","Number","primaryKey","type","default","countValue","primaryKeyValue","countValueChanged","countTarget","textContent","singularTarget","pluralTarget"],"mappings":"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"}
+{"version":3,"file":"tables.min.js","sources":["../../../javascript/tables/orderable/list_controller.js","../../../javascript/tables/selection/item_controller.js","../../../javascript/tables/application.js","../../../javascript/tables/orderable/item_controller.js","../../../javascript/tables/orderable/form_controller.js","../../../javascript/tables/selection/form_controller.js","../../../javascript/tables/filter/modal_controller.js"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\";\n\nexport default class OrderableListController extends Controller {\n  static outlets = [\"tables--orderable--item\", \"tables--orderable--form\"];\n\n  //region State transitions\n\n  startDragging(dragState) {\n    this.dragState = dragState;\n\n    document.addEventListener(\"mousemove\", this.mousemove);\n    document.addEventListener(\"mouseup\", this.mouseup);\n    window.addEventListener(\"scroll\", this.scroll, true);\n\n    this.element.style.position = \"relative\";\n  }\n\n  stopDragging() {\n    const dragState = this.dragState;\n    delete this.dragState;\n\n    document.removeEventListener(\"mousemove\", this.mousemove);\n    document.removeEventListener(\"mouseup\", this.mouseup);\n    window.removeEventListener(\"scroll\", this.scroll, true);\n\n    this.element.removeAttribute(\"style\");\n    this.tablesOrderableItemOutlets.forEach((item) => item.reset());\n\n    return dragState;\n  }\n\n  drop() {\n    // note: early returns guard against turbo updates that prevent us finding\n    // the right item to drop on. In this situation it's better to discard the\n    // drop than to drop in the wrong place.\n\n    const dragItem = this.dragItem;\n\n    if (!dragItem) return;\n\n    const newIndex = dragItem.dragIndex;\n    const targetItem = this.tablesOrderableItemOutlets[newIndex];\n\n    if (!targetItem) return;\n\n    // swap the dragged item into the correct position for its current offset\n    if (newIndex < dragItem.index) {\n      targetItem.row.insertAdjacentElement(\"beforebegin\", dragItem.row);\n    } else if (newIndex > dragItem.index) {\n      targetItem.row.insertAdjacentElement(\"afterend\", dragItem.row);\n    }\n\n    // reindex all items based on their new positions\n    this.tablesOrderableItemOutlets.forEach((item, index) =>\n      item.updateIndex(index),\n    );\n\n    // save the changes\n    this.commitChanges();\n  }\n\n  commitChanges() {\n    // clear any existing inputs to prevent duplicates\n    this.tablesOrderableFormOutlet.clear();\n\n    // insert any items that have changed position\n    this.tablesOrderableItemOutlets.forEach((item) => {\n      if (item.hasChanges) this.tablesOrderableFormOutlet.add(item);\n    });\n\n    this.tablesOrderableFormOutlet.submit();\n  }\n\n  //endregion\n\n  //region Events\n\n  mousedown(event) {\n    if (this.isDragging) return;\n\n    const target = this.#targetItem(event.target);\n\n    if (!target) return;\n\n    event.preventDefault(); // prevent built-in drag\n\n    this.startDragging(new DragState(this.element, event, target.id));\n\n    this.dragState.updateCursor(this.element, target.row, event, this.animate);\n  }\n\n  mousemove = (event) => {\n    if (!this.isDragging) return;\n\n    event.preventDefault(); // prevent build-in drag\n\n    if (this.ticking) return;\n\n    this.ticking = true;\n\n    window.requestAnimationFrame(() => {\n      this.ticking = false;\n      this.dragState.updateCursor(\n        this.element,\n        this.dragItem.row,\n        event,\n        this.animate,\n      );\n    });\n  };\n\n  scroll = (event) => {\n    if (!this.isDragging || this.ticking) return;\n\n    this.ticking = true;\n\n    window.requestAnimationFrame(() => {\n      this.ticking = false;\n      this.dragState.updateScroll(\n        this.element,\n        this.dragItem.row,\n        this.animate,\n      );\n    });\n  };\n\n  mouseup = (event) => {\n    if (!this.isDragging) return;\n\n    this.drop();\n    this.stopDragging();\n    this.tablesOrderableFormOutlets.forEach((form) => delete form.dragState);\n  };\n\n  tablesOrderableFormOutletConnected(form, element) {\n    if (form.dragState) {\n      // restore the previous controller's state\n      this.startDragging(form.dragState);\n    }\n  }\n\n  tablesOrderableFormOutletDisconnected(form, element) {\n    if (this.isDragging) {\n      // cache drag state in the form\n      form.dragState = this.stopDragging();\n    }\n  }\n\n  //endregion\n\n  //region Helpers\n\n  /**\n   * Updates the position of the drag item with a relative offset. Updates\n   * other items relative to the new position of the drag item, as required.\n   *\n   * @callback {OrderableListController~animate}\n   * @param {number} offset\n   */\n  animate = (offset) => {\n    const dragItem = this.dragItem;\n\n    // Visually update the dragItem so it follows the cursor\n    dragItem.dragUpdate(offset);\n\n    // Visually updates the position of all items in the list relative to the\n    // dragged item. No actual changes to orderings at this stage.\n    this.#currentItems.forEach((item, index) => {\n      if (item === dragItem) return;\n      item.updateVisually(index);\n    });\n  };\n\n  get isDragging() {\n    return !!this.dragState;\n  }\n\n  get dragItem() {\n    if (!this.isDragging) return null;\n\n    return this.tablesOrderableItemOutlets.find(\n      (item) => item.id === this.dragState.targetId,\n    );\n  }\n\n  /**\n   * Returns the current items in the list, sorted by their current index.\n   * Current uses the drag index if the item is being dragged, if set.\n   *\n   * @returns {Array[OrderableRowController]}\n   */\n  get #currentItems() {\n    return this.tablesOrderableItemOutlets.toSorted(\n      (a, b) => a.comparisonIndex - b.comparisonIndex,\n    );\n  }\n\n  /**\n   * Returns the item outlet that was clicked on, if any.\n   *\n   * @param element {HTMLElement} the clicked ordinal cell\n   * @returns {OrderableRowController}\n   */\n  #targetItem(element) {\n    return this.tablesOrderableItemOutlets.find(\n      (item) => item.element === element,\n    );\n  }\n\n  //endregion\n}\n\n/**\n * During drag we want to be able to translate a document-relative coordinate\n * into a coordinate relative to the list element. This state object calculates\n * and stores internal state so that we can translate absolute page coordinates\n * from mouse events into relative offsets for the list items within the list\n * element.\n *\n * We also keep track of the drag target so that if the controller is attached\n * to a new element during the drag we can continue after the turbo update.\n */\nclass DragState {\n  /**\n   * @param list {HTMLElement} the list controller's element (tbody)\n   * @param event {MouseEvent} the initial event\n   * @param id {String} the id of the element being dragged\n   */\n  constructor(list, event, id) {\n    // cursor offset is the offset of the cursor relative to the drag item\n    this.cursorOffset = event.offsetY;\n\n    // initial offset is the offset position of the drag item at drag start\n    this.initialPosition = event.target.offsetTop - list.offsetTop;\n\n    // id of the item being dragged\n    this.targetId = id;\n  }\n\n  /**\n   * Calculates the offset of the drag item relative to its initial position.\n   *\n   * @param list {HTMLElement} the list controller's element (tbody)\n   * @param row {HTMLElement} the row being dragged\n   * @param event {MouseEvent} the current event\n   * @param callback {OrderableListController~animate} updates the drag item with a relative offset\n   */\n  updateCursor(list, row, event, callback) {\n    // Calculate and store the list offset relative to the viewport\n    // This value is cached so we can calculate the outcome of any scroll events\n    this.listOffset = list.getBoundingClientRect().top;\n\n    // Calculate the position of the cursor relative to the list.\n    // Accounts for scroll offsets by using the item's bounding client rect.\n    const cursorPosition = event.clientY - this.listOffset;\n\n    // intended item position relative to the list, from cursor position\n    let itemPosition = cursorPosition - this.cursorOffset;\n\n    this.#updateItemPosition(list, row, itemPosition, callback);\n  }\n\n  /**\n   * Animates the item's position as the list scrolls. Requires a previous call\n   * to set the scroll offset.\n   *\n   * @param list {HTMLElement} the list controller's element (tbody)\n   * @param row {HTMLElement} the row being dragged\n   * @param callback {OrderableListController~animate} updates the drag item with a relative offset\n   */\n  updateScroll(list, row, callback) {\n    const previousScrollOffset = this.listOffset;\n\n    // Calculate and store the list offset relative to the viewport\n    // This value is cached so we can calculate the outcome of any scroll events\n    this.listOffset = list.getBoundingClientRect().top;\n\n    // Calculate the change in scroll offset since the last update\n    const scrollDelta = previousScrollOffset - this.listOffset;\n\n    // intended item position relative to the list, from cursor position\n    const position = this.position + scrollDelta;\n\n    this.#updateItemPosition(list, row, position, callback);\n  }\n\n  #updateItemPosition(list, row, position, callback) {\n    // ensure itemPosition is within the bounds of the list (tbody)\n    position = Math.max(position, 0);\n    position = Math.min(position, list.offsetHeight - row.offsetHeight);\n\n    // cache the item's position relative to the list for use in scroll events\n    this.position = position;\n\n    // Item has position: relative, so we want to calculate the amount to move\n    // the item relative to it's DOM position to represent how much it has been\n    // dragged by.\n    const offset = position - this.initialPosition;\n\n    // Convert itemPosition from offset relative to list to offset relative to\n    // its position within the DOM (if it hadn't moved).\n    callback(offset);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class SelectionItemController extends Controller {\n  static outlets = [\"tables--selection--form\"];\n  static values = {\n    params: Object,\n    checked: Boolean,\n  };\n\n  tablesSelectionFormOutletConnected(form) {\n    this.checkedValue = form.isSelected(this.id);\n  }\n\n  change(e) {\n    e.preventDefault();\n\n    this.checkedValue = this.tablesSelectionFormOutlet.toggle(this.id);\n  }\n\n  get id() {\n    return this.paramsValue.id;\n  }\n\n  checkedValueChanged(checked) {\n    this.element.querySelector(\"input\").checked = checked;\n  }\n}\n","import OrderableItemController from \"./orderable/item_controller\";\nimport OrderableListController from \"./orderable/list_controller\";\nimport OrderableFormController from \"./orderable/form_controller\";\nimport SelectionFormController from \"./selection/form_controller\";\nimport SelectionItemController from \"./selection/item_controller\";\nimport FilterModalController from \"./filter/modal_controller\";\n\nconst Definitions = [\n  {\n    identifier: \"tables--orderable--item\",\n    controllerConstructor: OrderableItemController,\n  },\n  {\n    identifier: \"tables--orderable--list\",\n    controllerConstructor: OrderableListController,\n  },\n  {\n    identifier: \"tables--orderable--form\",\n    controllerConstructor: OrderableFormController,\n  },\n  {\n    identifier: \"tables--selection--form\",\n    controllerConstructor: SelectionFormController,\n  },\n  {\n    identifier: \"tables--selection--item\",\n    controllerConstructor: SelectionItemController,\n  },\n  {\n    identifier: \"tables--filter--modal\",\n    controllerConstructor: FilterModalController,\n  },\n];\n\nexport { Definitions as default };\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class OrderableRowController extends Controller {\n  static values = {\n    params: Object,\n  };\n\n  connect() {\n    // index from server may be inconsistent with the visual ordering,\n    // especially if this is a new node. Use positional indexes instead,\n    // as these are the values we will send on save.\n    this.index = domIndex(this.row);\n  }\n\n  paramsValueChanged(params) {\n    this.id = params.id_value;\n  }\n\n  dragUpdate(offset) {\n    this.dragOffset = offset;\n    this.row.style.position = \"relative\";\n    this.row.style.top = offset + \"px\";\n    this.row.style.zIndex = \"1\";\n    this.row.toggleAttribute(\"dragging\", true);\n  }\n\n  /**\n   * Called on items that are not the dragged item during drag. Updates the\n   * visual position of the item relative to the dragged item.\n   *\n   * @param index {number} intended index of the item during drag\n   */\n  updateVisually(index) {\n    this.row.style.position = \"relative\";\n    this.row.style.top = `${\n      this.row.offsetHeight * (index - this.dragIndex)\n    }px`;\n  }\n\n  /**\n   * Set the index value of the item. This is called on all items after a drop\n   * event. If the index is different to the params index then this item has\n   * changed.\n   *\n   * @param index {number} the new index value\n   */\n  updateIndex(index) {\n    this.index = index;\n  }\n\n  /** Retrieve params for use in the form */\n  params(scope) {\n    const { id_name, id_value, index_name } = this.paramsValue;\n    return [\n      { name: `${scope}[${id_value}][${id_name}]`, value: this.id },\n      { name: `${scope}[${id_value}][${index_name}]`, value: this.index },\n    ];\n  }\n\n  /**\n   * Restore any visual changes made during drag and remove the drag state.\n   */\n  reset() {\n    delete this.dragOffset;\n    this.row.removeAttribute(\"style\");\n    this.row.removeAttribute(\"dragging\");\n  }\n\n  /**\n   * @returns {boolean} true when the item has a change to its index value\n   */\n  get hasChanges() {\n    return this.paramsValue.index_value !== this.index;\n  }\n\n  /**\n   * Calculate the relative index of the item during drag. This is used to\n   * sort items during drag as it takes into account any uncommitted changes\n   * to index caused by the drag offset.\n   *\n   * @returns {number} index for the purposes of drag and drop ordering\n   */\n  get dragIndex() {\n    if (this.dragOffset && this.dragOffset !== 0) {\n      return this.index + Math.round(this.dragOffset / this.row.offsetHeight);\n    } else {\n      return this.index;\n    }\n  }\n\n  /**\n   * Index value for use in comparisons during drag. This is used to determine\n   * whether the dragged item is above or below another item. If this item is\n   * being dragged then we offset the index by 0.5 to ensure that it jumps up\n   * or down when it reaches the midpoint of the item above or below it.\n   *\n   * @returns {number}\n   */\n  get comparisonIndex() {\n    if (this.dragOffset) {\n      return this.dragIndex + (this.dragOffset > 0 ? 0.5 : -0.5);\n    } else {\n      return this.index;\n    }\n  }\n\n  /**\n   * The containing row element.\n   *\n   * @returns {HTMLElement}\n   */\n  get row() {\n    return this.element.parentElement;\n  }\n}\n\nfunction domIndex(element) {\n  return Array.from(element.parentElement.children).indexOf(element);\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class OrderableFormController extends Controller {\n  static values = { scope: String };\n\n  add(item) {\n    item.params(this.scopeValue).forEach(({ name, value }) => {\n      this.element.insertAdjacentHTML(\n        \"beforeend\",\n        `<input type=\"hidden\" name=\"${name}\" value=\"${value}\" data-generated>`,\n      );\n    });\n  }\n\n  submit() {\n    if (this.inputs.length === 0) return;\n\n    this.element.requestSubmit();\n  }\n\n  clear() {\n    this.inputs.forEach((input) => input.remove());\n  }\n\n  get inputs() {\n    return this.element.querySelectorAll(\"input[data-generated]\");\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class SelectionFormController extends Controller {\n  static values = {\n    count: Number,\n    primaryKey: { type: String, default: \"id\" },\n  };\n  static targets = [\"count\", \"singular\", \"plural\"];\n\n  connect() {\n    this.countValue = this.inputs.length;\n  }\n\n  /**\n   * @param id to toggle\n   * @return {boolean} true if selected, false if unselected\n   */\n  toggle(id) {\n    const input = this.input(id);\n\n    if (input) {\n      input.remove();\n    } else {\n      this.element.insertAdjacentHTML(\n        \"beforeend\",\n        `<input type=\"hidden\" name=\"${this.primaryKeyValue}[]\" value=\"${id}\">`,\n      );\n    }\n\n    this.countValue = this.inputs.length;\n\n    return !input;\n  }\n\n  /**\n   * @returns {boolean} true if the given id is currently selected\n   */\n  isSelected(id) {\n    return !!this.input(id);\n  }\n\n  get inputs() {\n    return this.element.querySelectorAll(\n      `input[name=\"${this.primaryKeyValue}[]\"]`,\n    );\n  }\n\n  input(id) {\n    return this.element.querySelector(\n      `input[name=\"${this.primaryKeyValue}[]\"][value=\"${id}\"]`,\n    );\n  }\n\n  countValueChanged(count) {\n    this.element.toggleAttribute(\"hidden\", count === 0);\n    this.countTarget.textContent = count;\n    this.singularTarget.toggleAttribute(\"hidden\", count !== 1);\n    this.pluralTarget.toggleAttribute(\"hidden\", count === 1);\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\n\nexport default class FilterModalController extends Controller {\n  static targets = [\"modal\"];\n\n  close(e) {\n    delete this.modalTarget.dataset.open;\n  }\n\n  open(e) {\n    this.modalTarget.dataset.open = \"true\";\n  }\n}\n"],"names":["DragState","constructor","list","event","id","this","cursorOffset","offsetY","initialPosition","target","offsetTop","targetId","updateCursor","row","callback","listOffset","getBoundingClientRect","top","itemPosition","clientY","updateItemPosition","updateScroll","previousScrollOffset","scrollDelta","position","Math","max","min","offsetHeight","SelectionItemController","Controller","static","params","Object","checked","Boolean","tablesSelectionFormOutletConnected","form","checkedValue","isSelected","change","e","preventDefault","tablesSelectionFormOutlet","toggle","paramsValue","checkedValueChanged","element","querySelector","Definitions","identifier","controllerConstructor","connect","index","Array","from","parentElement","children","indexOf","paramsValueChanged","id_value","dragUpdate","offset","dragOffset","style","zIndex","toggleAttribute","updateVisually","dragIndex","updateIndex","scope","id_name","index_name","name","value","reset","removeAttribute","hasChanges","index_value","round","comparisonIndex","startDragging","dragState","document","addEventListener","mousemove","mouseup","window","scroll","stopDragging","removeEventListener","tablesOrderableItemOutlets","forEach","item","drop","dragItem","newIndex","targetItem","insertAdjacentElement","commitChanges","tablesOrderableFormOutlet","clear","add","submit","mousedown","isDragging","animate","ticking","requestAnimationFrame","tablesOrderableFormOutlets","tablesOrderableFormOutletConnected","tablesOrderableFormOutletDisconnected","currentItems","find","toSorted","a","b","String","scopeValue","insertAdjacentHTML","inputs","length","requestSubmit","input","remove","querySelectorAll","count","Number","primaryKey","type","default","countValue","primaryKeyValue","countValueChanged","countTarget","textContent","singularTarget","pluralTarget","close","modalTarget","dataset","open"],"mappings":"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"}

data/app/assets/stylesheets/katalyst/tables/_filter.scss

@@ -0,0 +1,43 @@
+[data-controller="tables--filter--modal"] {
+  position: relative;
+}
+
+.filter-keys-modal {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  border: 1px solid rgba(0, 0, 0, 0.16);
+  box-shadow:
+    0 3px 6px rgba(0, 0, 0, 0.16),
+    0 3px 6px rgba(0, 0, 0, 0.23);
+  padding-inline: 1rem;
+  padding-block: 0.5rem 0;
+  margin-top: 0.5rem;
+  background: white;
+  border-radius: 4px;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.125s;
+  pointer-events: none;
+
+  &[data-open] {
+    opacity: 1;
+    pointer-events: unset;
+  }
+
+  table {
+    table-layout: fixed;
+  }
+
+  th.label,
+  th.key {
+    width: 15%;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-block: 1rem;
+  }
+}

data/app/assets/stylesheets/katalyst/tables/_index.scss

@@ -1,2 +1,3 @@
+@use "filter";
 @use "table";
 @use "summary";

data/app/assets/stylesheets/katalyst/tables/_select.scss

@@ -0,0 +1,3 @@
+:where(th.selection, td.selection) {
+  width: 2rem;
+}

data/app/assets/stylesheets/katalyst/tables/_table.scss

@@ -1,4 +1,5 @@
 @use "ordinal" as *;
+@use "select" as *;
 @use "typed-columns";
 
 $grey: #f0ecf3 !default;
@@ -7,6 +8,7 @@ $table-header-color: transparent !default;
 $row-border-color: $grey !default;
 $row-height: 48px !default;
 $cell-spacing: 0.5rem !default;
+$tag-color: $grey !default;
 
 $width-small: 6rem !default;
 $width-medium: 12rem !default;
@@ -17,6 +19,7 @@ table {
   --cell-spacing: #{$cell-spacing};
   --table-header-color: #{$table-header-color};
   --row-border-color: #{$row-border-color};
+  --tag-color: #{$tag-color};
 
   --width-small: #{$width-small};
   --width-medium: #{$width-medium};

data/app/assets/stylesheets/katalyst/tables/typed-columns/_enum.scss

@@ -0,0 +1,9 @@
+:where(th.type-enum, td.type-enum) {
+  width: var(--width-small);
+}
+
+:where(td.type-enum small) {
+  background: var(--tag-color);
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_index.scss

@@ -2,4 +2,5 @@
 @use "currency";
 @use "date";
 @use "datetime";
+@use "enum";
 @use "number";

data/app/components/katalyst/table_component.rb

@@ -209,6 +209,34 @@ module Katalyst
                 ), &)
     end
 
+    # Generates a column from an enum value rendered as a tag.
+    # The target attribute must be defined as an `enum` in the model.
+    #
+    # @param column [Symbol] the column's name, called as a method on the record.
+    # @param label [String|nil] the label to use for the column header
+    # @param heading [boolean] if true, data cells will use `th` tags
+    # @param ** [Hash] HTML attributes to be added to column cells
+    # @param & [Proc] optional block to wrap the cell content
+    #
+    # When rendering an enum value, the component will check for translations
+    # using the key `active_record.attributes.[model]/[column].[value]`,
+    # e.g. `active_record.attributes.banner/status.published`.
+    #
+    # If a block is provided, it will be called with the cell component as an argument.
+    # @yieldparam cell [Katalyst::Tables::CellComponent] the cell component
+    #
+    # @return [void]
+    #
+    # @example Render a generic text column for any value that supports `to_s`
+    #   <% row.enum :status %>
+    #   <%# label => <th>Status</th> %>
+    #   <%# data => <td class="type-enum"><span data-enum="status" data-value="published">Published</span></td> %>
+    def enum(column, label: nil, heading: false, **, &)
+      with_cell(Tables::Cells::EnumComponent.new(
+                  collection:, row:, column:, record:, label:, heading:, **,
+                ), &)
+    end
+
     # Generates a column from numeric values formatted appropriately.
     #
     # @param column [Symbol] the column's name, called as a method on the record

data/app/components/katalyst/tables/cells/enum_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Tables
+    module Cells
+      # Displays an enum value using data inferred from the model.
+      class EnumComponent < CellComponent
+        def rendered_value
+          if (value = self.value).present?
+            label = t(i18n_enum_label_key(value), default: value)
+            content_tag(:small, label, data: { enum: column, value: })
+          end
+        end
+
+        private
+
+        def default_html_attributes
+          { class: "type-enum" }
+        end
+
+        def i18n_enum_label_key(value)
+          "active_record.attributes.#{collection.model_name.i18n_key}/#{column}.#{value}"
+        end
+      end
+    end
+  end
+end

data/app/components/katalyst/tables/filter/modal_component.html.erb

@@ -0,0 +1,25 @@
+<%= tag.div(**html_attributes) do %>
+  <table>
+    <thead>
+    <tr>
+      <th class="label"></th>
+      <th class="key">Key</th>
+      <th class="values">Values</th>
+    </tr>
+    </thead>
+    <tbody>
+    <% attributes.each do |key, attribute| %>
+      <tr>
+        <th class="label"><%= collection.model.human_attribute_name(key) %></th>
+        <td class="key"><%= key %></td>
+        <td class="values"><%= values_for(key, attribute) %></td>
+      </tr>
+    <% end %>
+    </tbody>
+  </table>
+  <% if footer? %>
+    <div class="footer">
+      <%= footer %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/katalyst/tables/filter/modal_component.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Tables
+    module Filter
+      class ModalComponent < ViewComponent::Base
+        include Katalyst::HtmlAttributes
+        include Katalyst::Tables::Frontend
+
+        DEFAULT_ATTRIBUTES = %w[page sort search query].freeze
+
+        renders_one :footer
+
+        attr_reader :collection, :url
+
+        def initialize(collection:, **)
+          super(**)
+
+          @collection = collection
+        end
+
+        private
+
+        def default_html_attributes
+          {
+            class: "filter-keys-modal",
+            data:  {
+              tables__filter__modal_target: "modal",
+            },
+          }
+        end
+
+        using Collection::Type::Helpers::Extensions
+
+        def attributes
+          collection.class.attribute_types
+            .select { |_, a| a.filterable? && a.type != :search }
+        end
+
+        def values_for(key, attribute)
+          values_method = "#{key.parameterize.underscore}_values"
+          if collection.respond_to?(values_method)
+            return scope_values(attribute, values_method)
+          end
+
+          case attribute.type
+          when :boolean
+            render_options(true, false)
+          when :date
+            date_values
+          when :integer
+            integer_values(attribute)
+          when :float
+            float_values(attribute)
+          when :enum
+            enum_values(key)
+          when :string
+            string_values(attribute)
+          end
+        end
+
+        def scope_values(attribute, values_method)
+          values = collection.public_send(values_method)
+          attribute.multiple? ? render_array(*values) : render_options(*values)
+        end
+
+        def date_values
+          render_options("YYYY-MM-DD", ">YYYY-MM-DD", "<YYYY-MM-DD", "YYYY-MM-DD..YYYY-MM-DD")
+        end
+
+        def string_values(attribute)
+          options = render_options("example", '"an example"')
+          safe_join([options, attribute.exact? ? "(exact match)" : "(fuzzy match)"], " ")
+        end
+
+        def enum_values(key)
+          enums = collection.model.defined_enums
+
+          render_array(*enums[key].keys) if enums.has_key?(key)
+        end
+
+        def float_values(attribute)
+          if attribute.multiple?
+            render_array("0.5", "1", "...")
+          else
+            render_options("0.5", ">0.5", "<0.5", "-0.5..0.5")
+          end
+        end
+
+        def integer_values(attribute)
+          if attribute.multiple?
+            render_array("0", "1", "...")
+          else
+            render_options("10", ">10", "<10", "0..10")
+          end
+        end
+
+        def render_option(value)
+          tag.code(value.to_s)
+        end
+
+        def render_options(*values)
+          safe_join(values.map { |value| render_option(value) }, ", ")
+        end
+
+        def render_array(*values)
+          safe_join(["[", render_options(*values), "]"])
+        end
+      end
+    end
+  end
+end

data/app/components/katalyst/tables/filter_component.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div(**html_attributes) do %>
+  <% if content? %>
+    <%= content %>
+  <% else %>
+    <%= form do |form| %>
+      <%= form.text_field(
+            :query,
+            type:         :search,
+            autocomplete: "off",
+            **input_attributes,
+          ) %>
+
+      <%= form.button("Apply", type: :submit, name: nil) %>
+    <% end %>
+  <% end %>
+
+  <%= modal %>
+<% end %>