advanced_select 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43e9d7178d6a064d18c4243d1fad3ec15fbb935834eb2d07da8cd89d33c955a1
-  data.tar.gz: 389f74b51ecd1615a2d3b11c2794e10c57557ce6085595ebe06f3a296b88874a
+  metadata.gz: 12aa609bf191df8feb5cdbcbe6c56052cf1e41737bd87d4122b99d65d8788009
+  data.tar.gz: d49f89a642d10f28aa141c6ef7728335adbc5168fef7f3ba6aba828f164b2477
 SHA512:
-  metadata.gz: faf098b583a4d1ea48aeb788943b3da2400fdca7946f32f02419aef63ca34af371c7ce9cd97368205ff6dcb96e55b5e3044794e5f8f5cf8237faf0e53dd7e62b
-  data.tar.gz: 5c8fea29044aa4e5a9da1cb804b93f0124e9e302dbc82c0f63d8a216f767e2e13d518c5768704285874596ef6a809750f3033e7ff759176c35a4991f04ee87f0
+  metadata.gz: 53132d110065de787848345926574700a2cc2a4b8666d4e0f740c85f4a552950f268378e9aa73d04e1b404612e481f1c364fd3a07cd5a397dfff3c18b6d78122
+  data.tar.gz: 3e07f94cffddcdbdeb08576c54903ff5d1a5498db40224f5341a5826c3bacbcad59c9fb5254ccbf36449254702102681c16a6547ff9acc4f0e613bb08c72fe94

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.5"
 ```
 
 Run the installer:
@@ -484,13 +484,19 @@ 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 are `id`, `value`, `label`, and `display_label`; 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>
   </thead>
-  <tbody>
+  <tbody data-advanced-select-tooltip-list>
     <% selected_options.each do |option| %>
       <tr>
         <td><%= option.fetch(:display_label) %></td>
@@ -498,10 +504,16 @@ For richer layouts — a table, badges, compatibility columns, etc. — pass `to
       </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>
+    </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

@@ -526,10 +526,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 +553,60 @@ 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 camelizedField = field.replace(/_([a-z])/g, (_match, character) => character.toUpperCase())
+    const value = option[field] ?? option[camelizedField]
+    return value === undefined || value === null ? "" : value.toString()
+  }
+
   textElement(tagName, className, text) {
     const element = document.createElement(tagName)
     element.className = className

data/lib/advanced_select/version.rb

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

metadata

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