advanced_select 0.1.5 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43e9d7178d6a064d18c4243d1fad3ec15fbb935834eb2d07da8cd89d33c955a1
-  data.tar.gz: 389f74b51ecd1615a2d3b11c2794e10c57557ce6085595ebe06f3a296b88874a
+  metadata.gz: e0e19ef001d7d6c5ca336850d173c8b0f18397d8b03de9d77ce0f52506cf7b62
+  data.tar.gz: 374e46c6892ca911d29ddeba525ac3f9695a2c2f166028223f0c577b5f56c3fb
 SHA512:
-  metadata.gz: faf098b583a4d1ea48aeb788943b3da2400fdca7946f32f02419aef63ca34af371c7ce9cd97368205ff6dcb96e55b5e3044794e5f8f5cf8237faf0e53dd7e62b
-  data.tar.gz: 5c8fea29044aa4e5a9da1cb804b93f0124e9e302dbc82c0f63d8a216f767e2e13d518c5768704285874596ef6a809750f3033e7ff759176c35a4991f04ee87f0
+  metadata.gz: 30d707af2c9f59b38535c99bebe961f29097fa934451d3e539201f1519951f0ed306fde9afca729c64e8fff2c78ac7cda75f45b72288fc68404df3b335d42fd2
+  data.tar.gz: e4099f22327d3b4274bb419c80616684eed98db8d76997fbf33d57ffe96df10ace487b2df0f53fdd87a1033c387c1fbff1e1b6cc056c46a61c74e92bf54a634a

data/README.md

@@ -77,7 +77,7 @@ AdvancedSelect does not provide query objects, model concerns, authorization log
 Add the gem to the host Rails app:
 
 ```ruby
-gem "advanced_select", "~> 0.1.4"
+gem "advanced_select", "~> 0.1.7"
 ```
 
 Run the installer:
@@ -484,24 +484,38 @@ For richer layouts — a table, badges, compatibility columns, etc. — pass `to
 ) %>
 ```
 
+The partial is rendered on the server for the initial selection, and the controller keeps it in sync client-side as the selection changes — no Turbo Stream round-trip. To opt in, mark the row container and provide a one-row `<template>` the controller clones per selected option:
+
+- `data-advanced-select-tooltip-list` on the element that holds the rows (the same hook the built-in list uses).
+- `<template data-advanced-select-tooltip-template>` containing the markup for a single selected row.
+- `data-advanced-select-tooltip-field="…"` on the elements inside the template that should be filled in. Available fields include `id`, `value`, `label`, `display_label`, extra option keys, and nested paths such as `test.name`; values are written with `textContent` (text only, no markup).
+
 ```erb
 <%# app/views/alternatives/_tooltip.html.erb %>
 <table>
   <thead>
-    <tr><th>Code &amp; Name</th><th>Type</th></tr>
+    <tr><th>Code &amp; Name</th><th>Type</th><th>Test</th></tr>
   </thead>
-  <tbody>
+  <tbody data-advanced-select-tooltip-list>
     <% selected_options.each do |option| %>
       <tr>
         <td><%= option.fetch(:display_label) %></td>
         <td><%= option.fetch(:value) %></td>
+        <td><%= option.dig(:test, :name) %></td>
       </tr>
     <% end %>
   </tbody>
+  <template data-advanced-select-tooltip-template>
+    <tr>
+      <td data-advanced-select-tooltip-field="display_label"></td>
+      <td data-advanced-select-tooltip-field="value"></td>
+      <td data-advanced-select-tooltip-field="test.name"></td>
+    </tr>
+  </template>
 </table>
 ```
 
-A custom `tooltip_partial` is rendered once on the server, so it is best for display-oriented content. If your selection changes on the client and the custom tooltip must reflect it live, re-render the field (for example via a Turbo Stream) after the change. The built-in `tooltip: true` list updates client-side automatically.
+The initial server-rendered rows stay until the first change, then the controller rebuilds them from the template — so just like `tooltip: true`, the custom tooltip updates client-side automatically. A custom partial without a `<template>` still renders once and stays static, which is fine for display-only content.
 
 ### Add Mode
 

data/app/javascript/advanced_select/advanced_select_controller.js

@@ -39,11 +39,7 @@ export default class extends Controller {
     this.optionActiveClasses = this.classList(this.element.dataset.advancedSelectOptionActiveClass || "ui-advanced-select-option-active")
     this.addOptionActiveClasses = this.classList(this.element.dataset.advancedSelectAddOptionActiveClass || "")
     this.optionSelectedClasses = this.classList(this.element.dataset.advancedSelectOptionSelectedClass || "")
-    this.selectedValue = this.selectedValue.map((option) => ({
-      ...option,
-      id: option.id.toString(),
-      displayLabel: option.displayLabel || option.label
-    }))
+    this.selectedValue = this.selectedValue.map((option) => this.normalizeSelectedOption(option))
     this.close = this.close.bind(this)
     this.renderOptionsState()
     this.setupEagerDependentFields()
@@ -109,7 +105,7 @@ export default class extends Controller {
 
   choose(event) {
     event.preventDefault()
-    this.selectOption(event.params.value, event.params.label, event.params.submitValue, { displayLabel: event.params.displayLabel })
+    this.selectOptionFromElement(event.currentTarget)
   }
 
   add(event) {
@@ -281,17 +277,28 @@ export default class extends Controller {
   }
 
   selectOption(value, label, submitValue = value, { displayLabel = label, refreshOptions = this.multipleValue } = {}) {
-    value = value.toString()
-    submitValue = submitValue.toString()
+    this.selectOptionData(
+      this.normalizeSelectedOption({ id: value, value: submitValue, label, displayLabel }),
+      { refreshOptions }
+    )
+  }
+
+  selectOptionFromElement(element, { refreshOptions = this.multipleValue } = {}) {
+    this.selectOptionData(this.optionData(element), { refreshOptions })
+  }
+
+  selectOptionData(option, { refreshOptions = this.multipleValue } = {}) {
+    const selectedOption = this.normalizeSelectedOption(option)
+    const value = selectedOption.id
 
     if (this.multipleValue) {
       if (this.selectedValue.some((option) => option.id === value)) {
         this.selectedValue = this.selectedValue.filter((option) => option.id !== value)
       } else {
-        this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }, ...this.selectedValue]
+        this.selectedValue = [selectedOption, ...this.selectedValue]
       }
     } else {
-      this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }]
+      this.selectedValue = [selectedOption]
     }
 
     this.renderSelection()
@@ -304,6 +311,51 @@ export default class extends Controller {
     }
   }
 
+  optionData(element) {
+    const data = this.parseOptionData(element.dataset.advancedSelectOptionParam)
+    const value = element.dataset.advancedSelectValueParam
+    const submitValue = element.dataset.advancedSelectSubmitValueParam || value
+    const label = element.dataset.advancedSelectLabelParam
+    const displayLabel = element.dataset.advancedSelectDisplayLabelParam || label
+
+    return {
+      ...data,
+      id: value,
+      value: submitValue,
+      label,
+      displayLabel
+    }
+  }
+
+  parseOptionData(json) {
+    if (!json) {
+      return {}
+    }
+
+    try {
+      const data = JSON.parse(json)
+      return data && typeof data === "object" && !Array.isArray(data) ? data : {}
+    } catch (_error) {
+      return {}
+    }
+  }
+
+  normalizeSelectedOption(option) {
+    const id = option.id.toString()
+    const value = (option.value || id).toString()
+    const label = (option.label || option.displayLabel || option.display_label || value).toString()
+    const displayLabel = (option.displayLabel || option.display_label || label).toString()
+
+    return {
+      ...option,
+      id,
+      value,
+      label,
+      displayLabel,
+      display_label: displayLabel
+    }
+  }
+
   renderSelection() {
     this.hiddenFieldsTarget.replaceChildren(...this.hiddenFieldElements)
     this.summaryTarget.replaceChildren(...this.selectionElements)
@@ -383,13 +435,7 @@ export default class extends Controller {
       return
     }
 
-    const option = options[0]
-    this.selectOption(
-      option.dataset.advancedSelectValueParam,
-      option.dataset.advancedSelectLabelParam,
-      option.dataset.advancedSelectSubmitValueParam || option.dataset.advancedSelectValueParam,
-      { displayLabel: option.dataset.advancedSelectDisplayLabelParam, refreshOptions: false }
-    )
+    this.selectOptionFromElement(options[0], { refreshOptions: false })
   }
 
   chooseActiveOption() {
@@ -401,12 +447,7 @@ export default class extends Controller {
         this.activeOption.dataset.advancedSelectDisplayLabelParam
       )
     } else {
-      this.selectOption(
-        this.activeOption.dataset.advancedSelectValueParam,
-        this.activeOption.dataset.advancedSelectLabelParam,
-        this.activeOption.dataset.advancedSelectSubmitValueParam || this.activeOption.dataset.advancedSelectValueParam,
-        { displayLabel: this.activeOption.dataset.advancedSelectDisplayLabelParam }
-      )
+      this.selectOptionFromElement(this.activeOption)
     }
   }
 
@@ -526,10 +567,19 @@ export default class extends Controller {
   }
 
   renderTooltip() {
-    if (!this.hasTooltipTarget || this.tooltipTarget.hasAttribute("data-advanced-select-tooltip-custom")) {
+    if (!this.hasTooltipTarget) {
       return
     }
 
+    if (this.tooltipTarget.hasAttribute("data-advanced-select-tooltip-custom")) {
+      this.renderCustomTooltip()
+      return
+    }
+
+    this.renderBuiltInTooltip()
+  }
+
+  renderBuiltInTooltip() {
     const list = this.tooltipTarget.querySelector("[data-advanced-select-tooltip-list]")
     if (!list) {
       return
@@ -544,6 +594,78 @@ export default class extends Controller {
     }
   }
 
+  renderCustomTooltip() {
+    const list = this.tooltipTarget.querySelector("[data-advanced-select-tooltip-list]")
+    const template = this.customTooltipTemplate()
+
+    if (!list || !template) {
+      if (this.selectedValue.length === 0) {
+        this.hideTooltip(true)
+      }
+      return
+    }
+
+    list.replaceChildren(
+      ...this.selectedValue.map((option) => this.customTooltipElement(template, option))
+    )
+
+    if (this.selectedValue.length === 0) {
+      this.hideTooltip(true)
+    }
+  }
+
+  customTooltipTemplate() {
+    if (this.customTooltipTemplateContent) {
+      return this.customTooltipTemplateContent
+    }
+
+    const template = this.tooltipTarget.querySelector("template[data-advanced-select-tooltip-template]")
+    if (!template) {
+      return null
+    }
+
+    this.customTooltipTemplateContent = template.content.cloneNode(true)
+    template.remove()
+    return this.customTooltipTemplateContent
+  }
+
+  customTooltipElement(template, option) {
+    const fragment = template.cloneNode(true)
+    fragment.querySelectorAll("[data-advanced-select-tooltip-field]").forEach((element) => {
+      element.textContent = this.tooltipFieldValue(option, element.dataset.advancedSelectTooltipField)
+    })
+
+    return fragment
+  }
+
+  tooltipFieldValue(option, field) {
+    if (field === "display_label" || field === "displayLabel") {
+      return this.displayLabel(option)
+    }
+
+    const value = this.optionFieldValue(option, field)
+    return value === undefined || value === null ? "" : value.toString()
+  }
+
+  optionFieldValue(option, field) {
+    const directValue = option[field] ?? option[this.camelize(field)]
+    if (directValue !== undefined) {
+      return directValue
+    }
+
+    return field.split(".").reduce((value, segment) => {
+      if (value === undefined || value === null) {
+        return undefined
+      }
+
+      return value[segment] ?? value[this.camelize(segment)]
+    }, option)
+  }
+
+  camelize(value) {
+    return value.replace(/_([a-z])/g, (_match, character) => character.toUpperCase())
+  }
+
   textElement(tagName, className, text) {
     const element = document.createElement(tagName)
     element.className = className
@@ -579,4 +701,4 @@ export default class extends Controller {
   get expanded() {
     return this.triggerTarget.getAttribute("aria-expanded") === "true"
   }
-}
+}

data/lib/advanced_select/helper.rb

@@ -50,12 +50,12 @@ module AdvancedSelect
 
     def advanced_select_selected_options(selected)
       advanced_select_array(selected).map do |option|
-        {
+        option.to_h.merge(
           id: option.fetch(:id).to_s,
           value: advanced_select_option_value(option),
           label: advanced_select_option_label(option),
           display_label: advanced_select_option_display_label(option)
-        }
+        )
       end
     end
 
@@ -79,7 +79,8 @@ module AdvancedSelect
           advanced_select_value_param: option.fetch(:id),
           advanced_select_submit_value_param: advanced_select_option_value(option),
           advanced_select_label_param: advanced_select_option_label(option),
-          advanced_select_display_label_param: advanced_select_option_display_label(option)
+          advanced_select_display_label_param: advanced_select_option_display_label(option),
+          advanced_select_option_param: advanced_select_option_payload(option)
         }
       ) do
         safe_join([
@@ -170,6 +171,15 @@ module AdvancedSelect
       option[:description].to_s
     end
 
+    def advanced_select_option_payload(option)
+      option.to_h.merge(
+        id: option.fetch(:id).to_s,
+        value: advanced_select_option_value(option),
+        label: advanced_select_option_label(option),
+        display_label: advanced_select_option_display_label(option)
+      ).to_json
+    end
+
     def advanced_select_display_label(label)
       label.to_s.split(" > ").last
     end

data/lib/advanced_select/version.rb

@@ -1,3 +1,3 @@
 module AdvancedSelect
-  VERSION = "0.1.5"
+  VERSION = "0.1.7"
 end

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

@@ -39,11 +39,7 @@ export default class extends Controller {
     this.optionActiveClasses = this.classList(this.element.dataset.advancedSelectOptionActiveClass || "ui-advanced-select-option-active")
     this.addOptionActiveClasses = this.classList(this.element.dataset.advancedSelectAddOptionActiveClass || "")
     this.optionSelectedClasses = this.classList(this.element.dataset.advancedSelectOptionSelectedClass || "")
-    this.selectedValue = this.selectedValue.map((option) => ({
-      ...option,
-      id: option.id.toString(),
-      displayLabel: option.displayLabel || option.label
-    }))
+    this.selectedValue = this.selectedValue.map((option) => this.normalizeSelectedOption(option))
     this.close = this.close.bind(this)
     this.renderOptionsState()
     this.setupEagerDependentFields()
@@ -109,7 +105,7 @@ export default class extends Controller {
 
   choose(event) {
     event.preventDefault()
-    this.selectOption(event.params.value, event.params.label, event.params.submitValue, { displayLabel: event.params.displayLabel })
+    this.selectOptionFromElement(event.currentTarget)
   }
 
   add(event) {
@@ -281,17 +277,28 @@ export default class extends Controller {
   }
 
   selectOption(value, label, submitValue = value, { displayLabel = label, refreshOptions = this.multipleValue } = {}) {
-    value = value.toString()
-    submitValue = submitValue.toString()
+    this.selectOptionData(
+      this.normalizeSelectedOption({ id: value, value: submitValue, label, displayLabel }),
+      { refreshOptions }
+    )
+  }
+
+  selectOptionFromElement(element, { refreshOptions = this.multipleValue } = {}) {
+    this.selectOptionData(this.optionData(element), { refreshOptions })
+  }
+
+  selectOptionData(option, { refreshOptions = this.multipleValue } = {}) {
+    const selectedOption = this.normalizeSelectedOption(option)
+    const value = selectedOption.id
 
     if (this.multipleValue) {
       if (this.selectedValue.some((option) => option.id === value)) {
         this.selectedValue = this.selectedValue.filter((option) => option.id !== value)
       } else {
-        this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }, ...this.selectedValue]
+        this.selectedValue = [selectedOption, ...this.selectedValue]
       }
     } else {
-      this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }]
+      this.selectedValue = [selectedOption]
     }
 
     this.renderSelection()
@@ -304,6 +311,51 @@ export default class extends Controller {
     }
   }
 
+  optionData(element) {
+    const data = this.parseOptionData(element.dataset.advancedSelectOptionParam)
+    const value = element.dataset.advancedSelectValueParam
+    const submitValue = element.dataset.advancedSelectSubmitValueParam || value
+    const label = element.dataset.advancedSelectLabelParam
+    const displayLabel = element.dataset.advancedSelectDisplayLabelParam || label
+
+    return {
+      ...data,
+      id: value,
+      value: submitValue,
+      label,
+      displayLabel
+    }
+  }
+
+  parseOptionData(json) {
+    if (!json) {
+      return {}
+    }
+
+    try {
+      const data = JSON.parse(json)
+      return data && typeof data === "object" && !Array.isArray(data) ? data : {}
+    } catch (_error) {
+      return {}
+    }
+  }
+
+  normalizeSelectedOption(option) {
+    const id = option.id.toString()
+    const value = (option.value || id).toString()
+    const label = (option.label || option.displayLabel || option.display_label || value).toString()
+    const displayLabel = (option.displayLabel || option.display_label || label).toString()
+
+    return {
+      ...option,
+      id,
+      value,
+      label,
+      displayLabel,
+      display_label: displayLabel
+    }
+  }
+
   renderSelection() {
     this.hiddenFieldsTarget.replaceChildren(...this.hiddenFieldElements)
     this.summaryTarget.replaceChildren(...this.selectionElements)
@@ -354,8 +406,6 @@ export default class extends Controller {
       return
     }
 
-    // Delegated on document so it keeps working after a parent advanced select
-    // rewrites its hidden input on each selection.
     this.dependentChangeListener = (event) => {
       if (event.target instanceof Element && this.dependentSelectors.some((selector) => event.target.matches(selector))) {
         this.reloadDependentOptions()
@@ -385,13 +435,7 @@ export default class extends Controller {
       return
     }
 
-    const option = options[0]
-    this.selectOption(
-      option.dataset.advancedSelectValueParam,
-      option.dataset.advancedSelectLabelParam,
-      option.dataset.advancedSelectSubmitValueParam || option.dataset.advancedSelectValueParam,
-      { displayLabel: option.dataset.advancedSelectDisplayLabelParam, refreshOptions: false }
-    )
+    this.selectOptionFromElement(options[0], { refreshOptions: false })
   }
 
   chooseActiveOption() {
@@ -403,12 +447,7 @@ export default class extends Controller {
         this.activeOption.dataset.advancedSelectDisplayLabelParam
       )
     } else {
-      this.selectOption(
-        this.activeOption.dataset.advancedSelectValueParam,
-        this.activeOption.dataset.advancedSelectLabelParam,
-        this.activeOption.dataset.advancedSelectSubmitValueParam || this.activeOption.dataset.advancedSelectValueParam,
-        { displayLabel: this.activeOption.dataset.advancedSelectDisplayLabelParam }
-      )
+      this.selectOptionFromElement(this.activeOption)
     }
   }
 
@@ -528,10 +567,19 @@ export default class extends Controller {
   }
 
   renderTooltip() {
-    if (!this.hasTooltipTarget || this.tooltipTarget.hasAttribute("data-advanced-select-tooltip-custom")) {
+    if (!this.hasTooltipTarget) {
       return
     }
 
+    if (this.tooltipTarget.hasAttribute("data-advanced-select-tooltip-custom")) {
+      this.renderCustomTooltip()
+      return
+    }
+
+    this.renderBuiltInTooltip()
+  }
+
+  renderBuiltInTooltip() {
     const list = this.tooltipTarget.querySelector("[data-advanced-select-tooltip-list]")
     if (!list) {
       return
@@ -546,6 +594,78 @@ export default class extends Controller {
     }
   }
 
+  renderCustomTooltip() {
+    const list = this.tooltipTarget.querySelector("[data-advanced-select-tooltip-list]")
+    const template = this.customTooltipTemplate()
+
+    if (!list || !template) {
+      if (this.selectedValue.length === 0) {
+        this.hideTooltip(true)
+      }
+      return
+    }
+
+    list.replaceChildren(
+      ...this.selectedValue.map((option) => this.customTooltipElement(template, option))
+    )
+
+    if (this.selectedValue.length === 0) {
+      this.hideTooltip(true)
+    }
+  }
+
+  customTooltipTemplate() {
+    if (this.customTooltipTemplateContent) {
+      return this.customTooltipTemplateContent
+    }
+
+    const template = this.tooltipTarget.querySelector("template[data-advanced-select-tooltip-template]")
+    if (!template) {
+      return null
+    }
+
+    this.customTooltipTemplateContent = template.content.cloneNode(true)
+    template.remove()
+    return this.customTooltipTemplateContent
+  }
+
+  customTooltipElement(template, option) {
+    const fragment = template.cloneNode(true)
+    fragment.querySelectorAll("[data-advanced-select-tooltip-field]").forEach((element) => {
+      element.textContent = this.tooltipFieldValue(option, element.dataset.advancedSelectTooltipField)
+    })
+
+    return fragment
+  }
+
+  tooltipFieldValue(option, field) {
+    if (field === "display_label" || field === "displayLabel") {
+      return this.displayLabel(option)
+    }
+
+    const value = this.optionFieldValue(option, field)
+    return value === undefined || value === null ? "" : value.toString()
+  }
+
+  optionFieldValue(option, field) {
+    const directValue = option[field] ?? option[this.camelize(field)]
+    if (directValue !== undefined) {
+      return directValue
+    }
+
+    return field.split(".").reduce((value, segment) => {
+      if (value === undefined || value === null) {
+        return undefined
+      }
+
+      return value[segment] ?? value[this.camelize(segment)]
+    }, option)
+  }
+
+  camelize(value) {
+    return value.replace(/_([a-z])/g, (_match, character) => character.toUpperCase())
+  }
+
   textElement(tagName, className, text) {
     const element = document.createElement(tagName)
     element.className = className
@@ -581,4 +701,4 @@ export default class extends Controller {
   get expanded() {
     return this.triggerTarget.getAttribute("aria-expanded") === "true"
   }
-}
+}

metadata

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