advanced_select 0.1.8 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b0d986f80cf90e0dc2aa254d9eb0a9b8d76b844f205ae8ca86f815c1a5b17bea
-  data.tar.gz: 72722ff9f42bbed846afe1ec04e46362e9ec259d96c7bacb171207dd8ccbdc79
+  metadata.gz: 9f77cb8280bf5c4483c3d38f73628f8e17f7492f73684d4ced437f903198189b
+  data.tar.gz: 1baff77c13609cfc3c98770dbc7a8a6a2d67a2166ff04beca10e64aa7405e68c
 SHA512:
-  metadata.gz: d287e5b91c20d5dd629d55f802f1095fd2f016e3f4bdccff8f011fabf0e115914d56563ed00f5219a7a65452d1df4b143a4f2b3e5bf68b8ebb93898c83a7910d
-  data.tar.gz: 1b9d260a2ace0a2ec7d132581da98e35a09fc26265420655afa40ff290454b716584bb1cf5062a5ce2fa1a432cae22c1da75e411546b3673e88e468b4295910e
+  metadata.gz: f184de3a7114166e60dd758b6f489191d9e9b469998c2deacb3446ad79992ddbc661f92dd492366acf718e77072b386b7da39c9d11022fac75b31ebfb9257f1e
+  data.tar.gz: c82e8749636458398cf8d9204cca3986bbff17785504833e18b28d87367209b1e67e99e98d2da07471a07429a8648d0237359d002dc480809190b945f6ea0a01

data/README.md

@@ -22,6 +22,7 @@ AdvancedSelect is a small Rails engine for rendering an advanced select input wi
 - [Dependent Fields](#dependent-fields)
 - [Custom Option Content](#custom-option-content)
 - [Option Contract](#option-contract)
+- [Events](#events)
 - [API Reference](#api-reference)
 - [Local Development](#local-development)
 - [i18n](#i18n)
@@ -745,6 +746,51 @@ Grouped options use this shape:
 ]
 ```
 
+### Events
+
+Every value change dispatches two events:
+
+| Event | Target | Purpose |
+| --- | --- | --- |
+| `change` | the first hidden input | native form behaviour and [dependent fields](#dependent-fields) |
+| `advanced-select:change` | the root element | application listeners that need the whole selection |
+
+Both bubble. `advanced-select:change` carries a `detail` payload:
+
+```js
+{
+  name: "record[item_ids][]",
+  value: ["3", "7"],
+  options: [
+    { id: "3", value: "3", label: "Item A", display_label: "Item A" },
+    { id: "7", value: "7", label: "Item B", display_label: "Item B" }
+  ]
+}
+```
+
+`value` is the submit value — the option's `value` when it defines one, otherwise its `id`. It is an
+array for multiple selects, a string for single selects, and empty when nothing is selected. A
+multiple select lists the most recently chosen option first, matching the order of its hidden
+inputs.
+
+Bind it like any other event:
+
+```erb
+data-action="advanced-select:change->my-controller#refresh"
+```
+
+Prefer it over `change` on multiple selects. `change` is dispatched from the first hidden input, so
+it does not fire at all once the last value is cleared from a field rendered with
+`include_hidden: false` — at that point the field has no inputs left.
+
+The current value is also readable from the controller:
+
+```js
+const select = application.getControllerForElementAndIdentifier(element, "advanced-select")
+
+select.currentValue // => ["3", "7"]
+```
+
 ### API Reference
 
 `advanced_select_tag`:

data/app/javascript/advanced_select/advanced_select_controller.js

@@ -371,6 +371,21 @@ export default class extends Controller {
     if (input) {
       input.dispatchEvent(new Event("change", { bubbles: true }))
     }
+
+    this.element.dispatchEvent(new CustomEvent("advanced-select:change", {
+      bubbles: true,
+      detail: {
+        name: this.nameValue,
+        value: this.currentValue,
+        options: [...this.selectedValue]
+      }
+    }))
+  }
+
+  get currentValue() {
+    const values = this.selectedValue.map((option) => option.value || option.id)
+
+    return this.multipleValue ? values : (values[0] || "")
   }
 
   renderOptionsState() {

data/lib/advanced_select/version.rb

@@ -1,3 +1,3 @@
 module AdvancedSelect
-  VERSION = "0.1.8"
+  VERSION = "0.1.9"
 end

data/lib/generators/advanced_select/install/templates/advanced_select_controller.js

@@ -371,6 +371,21 @@ export default class extends Controller {
     if (input) {
       input.dispatchEvent(new Event("change", { bubbles: true }))
     }
+
+    this.element.dispatchEvent(new CustomEvent("advanced-select:change", {
+      bubbles: true,
+      detail: {
+        name: this.nameValue,
+        value: this.currentValue,
+        options: [...this.selectedValue]
+      }
+    }))
+  }
+
+  get currentValue() {
+    const values = this.selectedValue.map((option) => option.value || option.id)
+
+    return this.multipleValue ? values : (values[0] || "")
   }
 
   renderOptionsState() {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: advanced_select
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.1.9
 platform: ruby
 authors:
 - Mehmet Celik