advanced_select 0.1.1 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 953976216c1b18428680721e8fc5158a86a3d8232990bda1d97210dc066c7e6c
-  data.tar.gz: 5f732a8ac9d8ea42dea6dd1c074d3f6ac1d4efddee82d2cdb63e386c4f657a10
+  metadata.gz: 254f883547b3f323b98150becc0db7f8ff76f609a9a7186a5d1eb8903a0afb7f
+  data.tar.gz: 56b4d1866feaad22d4c4ed00bb2ab573240dbedda3d2f7cc6a1759c7da53b571
 SHA512:
-  metadata.gz: 41e49a91a3a045d7d405f43eb1d75eaf29606c20ac666602464dcab6e0b695582a26890ba7371111562e169cafe1992745dc8baf1dc4e9ab7d08a30d57fc94f4
-  data.tar.gz: b0caa43ec1b176d80c2b48f50782e9b0e5760bb6011dedb91e5329584d59206e478c5bf7992764886d54ee3a590ebf0db45f80490aceba14ea2c281ddc068acd
+  metadata.gz: f6a74b01aed5465044972b7f89d75148a9192120d8bba05e7a212899a11715198a3a4743092e329e1dc8ae4ccb0c86c2ab21ccafb48b88fa52059212b6d4acc3
+  data.tar.gz: 9df6c7b80f331cdc57fabaddce592f1f899728fe643d73ac3c98149acdb6b9f4c7a559e2fd87113655338ece19695fcfed7fbb6b570808bf02395f44c568301b

data/README.md

@@ -316,11 +316,12 @@ Use local options when the complete option list is already available while rende
   id: "record_item_id",
   selected: selected_option,
   options: options,
-  placeholder: t(".item_placeholder"),
-  searchable: false
+  placeholder: t(".item_placeholder")
 ) %>
 ```
 
+Local selects are searchable by default. Set `searchable: false` when the option list should open without a search field.
+
 Options are hashes:
 
 ```ruby

data/app/javascript/advanced_select/advanced_select_controller.js

@@ -7,6 +7,7 @@ export default class extends Controller {
     addMode: Boolean,
     delay: { type: Number, default: 200 },
     dependentFields: Object,
+    emptyText: String,
     errorText: String,
     includeHidden: { type: Boolean, default: true },
     inputId: String,
@@ -29,6 +30,7 @@ export default class extends Controller {
     this.tokenClass = this.element.dataset.advancedSelectTokenClass || "ui-advanced-select-token"
     this.loadingClass = this.element.dataset.advancedSelectLoadingClass || "ui-advanced-select-loading"
     this.errorClass = this.element.dataset.advancedSelectErrorClass || "ui-advanced-select-error"
+    this.emptyClass = this.element.dataset.advancedSelectEmptyClass || "ui-advanced-select-empty"
     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 || "")
@@ -81,6 +83,12 @@ export default class extends Controller {
   }
 
   search() {
+    if (!this.urlValue) {
+      this.filterOptions()
+      this.activate(-1)
+      return
+    }
+
     window.clearTimeout(this.timer)
     this.renderLoading()
     this.activate(-1)
@@ -127,9 +135,57 @@ export default class extends Controller {
   clearSearch() {
     if (this.searchableValue) {
       this.searchTarget.value = ""
+
+      if (!this.urlValue) {
+        this.filterOptions()
+      }
+    }
+  }
+
+  filterOptions() {
+    const query = this.normalize(this.searchTarget.value)
+    const container = this.currentOptionsTarget
+    let visibleCount = 0
+    let currentGroup = null
+    let groupHasMatch = false
+
+    Array.from(container.children).forEach((child) => {
+      if (child.hasAttribute("data-advanced-select-group-label")) {
+        if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+        currentGroup = child
+        groupHasMatch = false
+      } else if (child.hasAttribute("data-advanced-select-option")) {
+        const match = this.normalize(child.dataset.advancedSelectLabelParam).includes(query)
+        child.classList.toggle("hidden", !match)
+        if (match) {
+          visibleCount += 1
+          groupHasMatch = true
+        }
+      }
+    })
+
+    if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+
+    this.toggleEmptyState(visibleCount === 0)
+  }
+
+  toggleEmptyState(empty) {
+    const container = this.currentOptionsTarget
+    let emptyState = container.querySelector("[data-advanced-select-empty-state]")
+
+    if (empty && !emptyState) {
+      emptyState = this.textElement("div", this.emptyClass, this.emptyTextValue)
+      emptyState.setAttribute("data-advanced-select-empty-state", "")
+      container.appendChild(emptyState)
+    } else if (!empty && emptyState) {
+      emptyState.remove()
     }
   }
 
+  normalize(text) {
+    return (text || "").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+  }
+
   fetchOptions({ selected = false } = {}) {
     if (!this.urlValue) {
       return

data/app/views/advanced_select/_options.html.erb

@@ -4,13 +4,15 @@
      aria-busy="false"
      <% if local_assigns[:multiple] %>aria-multiselectable="true"<% end %>
      role="listbox">
+  <% selected_option_ids = advanced_select_selected_option_ids(selected_options) %>
+
   <% advanced_select_option_groups(options).each do |group| %>
     <% if group[:label].present? %>
-      <div class="<%= advanced_select_class(class_map, :group_label) %>"><%= group.fetch(:label) %></div>
+      <div class="<%= advanced_select_class(class_map, :group_label) %>" data-advanced-select-group-label><%= group.fetch(:label) %></div>
     <% end %>
 
     <% group.fetch(:options).each do |option| %>
-      <%= render partial: "advanced_select/option", locals: { option: option, selected_options: selected_options, option_content_partial: option_content_partial, class_map: class_map } %>
+      <%= advanced_select_option_tag(option, selected_options, option_content_partial, class_map, selected_option_ids: selected_option_ids) %>
     <% end %>
   <% end %>
 
@@ -26,6 +28,6 @@
       <%= t("shared.advanced_select.add_option", query: query) %>
     </button>
   <% elsif advanced_select_options_empty?(options) %>
-    <div class="<%= advanced_select_class(class_map, :empty) %>"><%= t("shared.advanced_select.empty") %></div>
+    <div class="<%= advanced_select_class(class_map, :empty) %>" data-advanced-select-empty-state><%= t("shared.advanced_select.empty") %></div>
   <% end %>
 </div>

data/app/views/advanced_select/_select.html.erb

@@ -5,6 +5,7 @@
      data-advanced-select-name-value="<%= name %>"
      data-advanced-select-input-id-value="<%= id %>"
      data-advanced-select-placeholder-value="<%= placeholder %>"
+     data-advanced-select-empty-text-value="<%= t("shared.advanced_select.empty") %>"
      data-advanced-select-loading-text-value="<%= t("shared.advanced_select.loading") %>"
      data-advanced-select-error-text-value="<%= t("shared.advanced_select.error") %>"
      data-advanced-select-dependent-fields-value="<%= dependent_fields.to_json %>"
@@ -15,6 +16,7 @@
      data-advanced-select-placeholder-class="<%= advanced_select_class(class_map, :placeholder) %>"
      data-advanced-select-value-class="<%= advanced_select_class(class_map, :value) %>"
      data-advanced-select-token-class="<%= advanced_select_class(class_map, :token) %>"
+     data-advanced-select-empty-class="<%= advanced_select_class(class_map, :empty) %>"
      data-advanced-select-loading-class="<%= advanced_select_class(class_map, :loading) %>"
      data-advanced-select-error-class="<%= advanced_select_class(class_map, :error) %>"
      data-advanced-select-option-active-class="<%= advanced_select_state_class(class_map, :option_active) %>"
@@ -56,7 +58,7 @@
       <%= tag.input type: "search",
                     id: "#{id}_search",
                     autocomplete: "off",
-                    placeholder: placeholder,
+                    placeholder: t("shared.advanced_select.search_placeholder"),
                     class: advanced_select_class(class_map, :search),
                     data: {
                       advanced_select_target: "search",

data/config/locales/en.yml

@@ -5,3 +5,4 @@ en:
       empty: "No options found"
       error: "Options could not be loaded"
       loading: "Loading..."
+      search_placeholder: "Search..."

data/config/locales/tr.yml

@@ -5,3 +5,4 @@ tr:
       empty: "Seçenek bulunamadı"
       error: "Seçenekler yüklenemedi"
       loading: "Yükleniyor..."
+      search_placeholder: "Ara..."

data/lib/advanced_select/helper.rb

@@ -12,7 +12,7 @@ module AdvancedSelect
         options: options,
         placeholder: placeholder,
         multiple: multiple,
-        searchable: searchable && options_url.present?,
+        searchable: searchable,
         add_mode: add_mode,
         dependent_fields: dependent_fields,
         include_hidden: include_hidden,
@@ -60,6 +60,56 @@ module AdvancedSelect
       end.to_json
     end
 
+    def advanced_select_option_tag(option, selected_options, option_content_partial, class_map, selected_option_ids: nil)
+      selected = advanced_select_option_selected?(option, selected_options, selected_option_ids)
+
+      tag.button(
+        type: "button",
+        class: advanced_select_class(class_map, :option, (:option_selected if selected)),
+        role: "option",
+        aria: { selected: selected },
+        data: {
+          advanced_select_option: "",
+          action: "mouseenter->advanced-select#activateOption mousedown->advanced-select#choose",
+          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)
+        }
+      ) do
+        safe_join([
+          tag.span(
+            (selected ? "\u2713" : ""),
+            class: advanced_select_class(class_map, :option_check),
+            data: { advanced_select_option_check: "" }
+          ),
+          advanced_select_option_content_tag(option, option_content_partial, class_map)
+        ])
+      end
+    end
+
+    def advanced_select_option_content_tag(option, option_content_partial, class_map)
+      if option_content_partial.present?
+        render partial: option_content_partial, locals: { option: option }
+      else
+        advanced_select_default_option_content_tag(option, class_map)
+      end
+    end
+
+    def advanced_select_default_option_content_tag(option, class_map)
+      description = advanced_select_option_description(option)
+      content = [tag.span(advanced_select_option_label(option))]
+
+      if description.present?
+        content << tag.span(
+          description,
+          class: advanced_select_class(class_map, :option_description)
+        )
+      end
+
+      tag.span(safe_join(content), class: advanced_select_class(class_map, :option_content))
+    end
+
     def advanced_select_options_for_render(options, selected_options, searchable)
       searchable ? selected_options.presence || options : options
     end
@@ -83,7 +133,15 @@ module AdvancedSelect
       end
     end
 
-    def advanced_select_option_selected?(option, selected_options)
+    def advanced_select_selected_option_ids(selected_options)
+      selected_options.each_with_object({}) do |selected_option, selected_option_ids|
+        selected_option_ids[selected_option.fetch(:id).to_s] = true
+      end
+    end
+
+    def advanced_select_option_selected?(option, selected_options, selected_option_ids = nil)
+      return selected_option_ids.key?(option.fetch(:id).to_s) if selected_option_ids
+
       selected_options.any? { |selected_option| selected_option.fetch(:id).to_s == option.fetch(:id).to_s }
     end
 

data/lib/advanced_select/version.rb

@@ -1,3 +1,3 @@
 module AdvancedSelect
-  VERSION = "0.1.1"
+  VERSION = "0.1.3"
 end

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

@@ -7,7 +7,9 @@ export default class extends Controller {
     addMode: Boolean,
     delay: { type: Number, default: 200 },
     dependentFields: Object,
+    emptyText: String,
     errorText: String,
+    includeHidden: { type: Boolean, default: true },
     inputId: String,
     loadingText: String,
     multiple: Boolean,
@@ -28,6 +30,7 @@ export default class extends Controller {
     this.tokenClass = this.element.dataset.advancedSelectTokenClass || "ui-advanced-select-token"
     this.loadingClass = this.element.dataset.advancedSelectLoadingClass || "ui-advanced-select-loading"
     this.errorClass = this.element.dataset.advancedSelectErrorClass || "ui-advanced-select-error"
+    this.emptyClass = this.element.dataset.advancedSelectEmptyClass || "ui-advanced-select-empty"
     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 || "")
@@ -37,6 +40,7 @@ export default class extends Controller {
       displayLabel: option.displayLabel || option.label
     }))
     this.close = this.close.bind(this)
+    this.renderOptionsState()
   }
 
   disconnect() {
@@ -79,6 +83,12 @@ export default class extends Controller {
   }
 
   search() {
+    if (!this.urlValue) {
+      this.filterOptions()
+      this.activate(-1)
+      return
+    }
+
     window.clearTimeout(this.timer)
     this.renderLoading()
     this.activate(-1)
@@ -125,9 +135,57 @@ export default class extends Controller {
   clearSearch() {
     if (this.searchableValue) {
       this.searchTarget.value = ""
+
+      if (!this.urlValue) {
+        this.filterOptions()
+      }
     }
   }
 
+  filterOptions() {
+    const query = this.normalize(this.searchTarget.value)
+    const container = this.currentOptionsTarget
+    let visibleCount = 0
+    let currentGroup = null
+    let groupHasMatch = false
+
+    Array.from(container.children).forEach((child) => {
+      if (child.hasAttribute("data-advanced-select-group-label")) {
+        if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+        currentGroup = child
+        groupHasMatch = false
+      } else if (child.hasAttribute("data-advanced-select-option")) {
+        const match = this.normalize(child.dataset.advancedSelectLabelParam).includes(query)
+        child.classList.toggle("hidden", !match)
+        if (match) {
+          visibleCount += 1
+          groupHasMatch = true
+        }
+      }
+    })
+
+    if (currentGroup) currentGroup.classList.toggle("hidden", !groupHasMatch)
+
+    this.toggleEmptyState(visibleCount === 0)
+  }
+
+  toggleEmptyState(empty) {
+    const container = this.currentOptionsTarget
+    let emptyState = container.querySelector("[data-advanced-select-empty-state]")
+
+    if (empty && !emptyState) {
+      emptyState = this.textElement("div", this.emptyClass, this.emptyTextValue)
+      emptyState.setAttribute("data-advanced-select-empty-state", "")
+      container.appendChild(emptyState)
+    } else if (!empty && emptyState) {
+      emptyState.remove()
+    }
+  }
+
+  normalize(text) {
+    return (text || "").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+  }
+
   fetchOptions({ selected = false } = {}) {
     if (!this.urlValue) {
       return
@@ -214,7 +272,7 @@ export default class extends Controller {
       if (this.selectedValue.some((option) => option.id === value)) {
         this.selectedValue = this.selectedValue.filter((option) => option.id !== value)
       } else {
-        this.selectedValue = this.selectedValue.concat({ id: value, value: submitValue, label, displayLabel })
+        this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }, ...this.selectedValue]
       }
     } else {
       this.selectedValue = [{ id: value, value: submitValue, label, displayLabel }]
@@ -240,6 +298,7 @@ export default class extends Controller {
 
   renderOptionsState() {
     const selectedIds = new Set(this.selectedValue.map((option) => option.id))
+    const container = this.currentOptionsTarget
 
     this.optionElements.forEach((option) => {
       const selected = selectedIds.has(option.dataset.advancedSelectValueParam)
@@ -251,6 +310,13 @@ export default class extends Controller {
         check.textContent = selected ? "\u2713" : ""
       }
     })
+
+    for (let i = this.selectedValue.length - 1; i >= 0; i--) {
+      const option = container.querySelector(
+        `[data-advanced-select-option][data-advanced-select-value-param="${this.selectedValue[i].id}"]`
+      )
+      if (option) container.prepend(option)
+    }
   }
 
   chooseActiveOption() {
@@ -303,7 +369,13 @@ export default class extends Controller {
   }
 
   get hiddenFieldElements() {
-    const options = this.multipleValue ? this.selectedValue : [this.selectedValue[0]]
+    let options
+
+    if (this.multipleValue) {
+      options = this.includeHiddenValue ? [null, ...this.selectedValue] : this.selectedValue
+    } else {
+      options = [this.selectedValue[0]]
+    }
 
     return options.map((option) => {
       const input = document.createElement("input")

metadata

@@ -1,11 +1,12 @@
 --- !ruby/object:Gem::Specification
 name: advanced_select
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.3
 platform: ruby
 authors:
 - Mehmet Celik
 - Tankut Ozbeyendir
+- Emre ULUSOY
 bindir: bin
 cert_chain: []
 date: 1980-01-01 00:00:00.000000000 Z
@@ -86,6 +87,7 @@ description: AdvancedSelect provides helper-rendered Rails partials, Stimulus dr
 email:
 - mehmetcelik4@gmail.com
 - tankutozbeyendir@gmail.com
+- ulsyemr@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []