hotwire_combobox 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8eaa849ad87e3edaaced39ab2cddddd2de2c4b57c112024c13706055df674eb
-  data.tar.gz: 9668cf95d8b4b6e994acd852ba6fbac8db3c491959ce40ed520479074d2d326a
+  metadata.gz: 06d497472d7966424ceea6dc655bf8baf2bfa7b2232ab587bb1ca6221f1b8e13
+  data.tar.gz: 994345e54975287e4958e917d8ff687851e6628604249c5ec59e2bcf9a858fb2
 SHA512:
-  metadata.gz: f4f143a0aeafc3fcc7b6f76447ff464342cbffe40f59d55502cc619bcda27bcaba066cf4927a87cf1e551d563c84f0b1ef0bba90ab5d596c9d0e2b3bcfb9a37c
-  data.tar.gz: f0adeb1d14897243d9b87daa9a67f779765a1c59a9862113928f9b521959a824fafa955d9fe7580e0acef0c841c821ea377c4507208f6dc698adb1f53976a1d2
+  metadata.gz: b3bd3a8d9266f43a542641f762ae059d2f8cc2a5c3d98f14b8a853bc5173fd5b382482fa89c0ff103df7e3e24fbf06a6aad5fccffe4d01bd3194959114610742
+  data.tar.gz: aa29ec37fa9fd51d640622686a91f6e2bf31c6c9df6a1618d88d540dcea3c1f6e5033379bf0397726904a34a19927bb1b5e9b016d797e7e861d993229e79d171

data/README.md

@@ -8,7 +8,7 @@ How to use my plugin.
 Add this line to your application's Gemfile:
 
 ```ruby
-gem "hotwire_combobox", require: "combobox"
+gem "hotwire_combobox"
 ```
 
 And then execute:
@@ -44,8 +44,10 @@ $ bin/rails s
 
 ### Releasing
 
-1. Bump the version in `lib/hotwire_combobox/version.rb`
-2. Run `bundle exec rake release`
+1. Bump the version in `lib/hotwire_combobox/version.rb` (e.g. `VERSION = "0.1.0"`)
+2. Bump the version in `Gemfile.lock` (e.g. `hotwire_combobox (0.1.0)`)
+3. Commit the change (e.g. `git commit -am "Bump to 0.1.0"`)
+4. Run `bundle exec rake release`
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/controllers/{combobox_controller.js → hw_combobox_controller.js}

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static classes = [ "selected" ]
+  static classes = [ "selected", "invalid" ]
   static targets = [ "combobox", "listbox", "valueField" ]
   static values = { expanded: Boolean, filterableAttribute: String, autocompletableAttribute: String }
 
@@ -16,12 +16,13 @@ export default class extends Controller {
   }
 
   close() {
+    this.commitSelection()
     this.expandedValue = false
   }
 
   selectOption(event) {
     this.select(event.currentTarget)
-    this.commitSelection()
+    this.close()
   }
 
   filter(event) {
@@ -76,14 +77,13 @@ export default class extends Controller {
       cancel(event)
     },
     Enter(event) {
-      this.commitSelection()
+      this.close()
       cancel(event)
     }
   }
 
   commitSelection() {
     this.select(this.selectedOptionElement, { force: true })
-    this.close()
   }
 
   expandedValueChanged() {
@@ -109,8 +109,17 @@ export default class extends Controller {
 
     if (option) {
       if (this.hasSelectedClass) option.classList.add(this.selectedClass)
+      if (this.hasInvalidClass) this.comboboxTarget.classList.remove(this.invalidClass)
+
       this.maybeAutocompleteWith(option, { force })
       this.executeSelect(option, { selected: true })
+    } else {
+      if (this.valueIsInvalid) {
+        if (this.hasInvalidClass) this.comboboxTarget.classList.add(this.invalidClass)
+
+        this.comboboxTarget.setAttribute("aria-invalid", true)
+        this.comboboxTarget.setAttribute("aria-errormessage", `Please select a valid option for ${this.comboboxTarget.name}`)
+      }
     }
   }
 
@@ -176,6 +185,11 @@ export default class extends Controller {
   get isOpen() {
     return this.expandedValue
   }
+
+  get valueIsInvalid() {
+    const isRequiredAndEmpty = this.comboboxTarget.required && !this.valueFieldTarget.value
+    return isRequiredAndEmpty
+  }
 }
 
 function applyFilter(query, { matching }) {

data/app/helpers/hotwire_combobox/helper.rb

@@ -0,0 +1,75 @@
+module HotwireCombobox
+  module Helper
+    def hw_combobox_tag(name, value = nil, form: nil, options: [], data: {}, input: {}, **attrs)
+      value_field_attrs = {}.tap do |h|
+        h[:id] = default_hw_combobox_value_field_id attrs, form, name
+        h[:name] = default_hw_combobox_value_field_name form, name
+        h[:data] = default_hw_combobox_value_field_data
+        h[:value] = form&.object&.public_send(name) || value
+      end
+
+      attrs[:type] ||= :text
+      attrs[:role] = :combobox
+      attrs[:id] = hw_combobox_id value_field_attrs[:id]
+      attrs[:data] = default_hw_combobox_data input.fetch(:data, {})
+      attrs[:aria] = default_hw_combobox_aria value_field_attrs, input.fetch(:aria, {})
+
+      render "hotwire_combobox/combobox", options: options,
+        attrs: attrs, value_field_attrs: value_field_attrs,
+        listbox_id: hw_combobox_listbox_id(value_field_attrs[:id]),
+        parent_data: default_hw_combobox_parent_data(attrs, data)
+    end
+
+    def value_for_hw_listbox_option(option)
+      option.try(:value) || option.id
+    end
+
+    private
+      def default_hw_combobox_value_field_id(attrs, form, name)
+        attrs.delete(:id) || form&.field_id(name)
+      end
+
+      def default_hw_combobox_value_field_name(form, name)
+        form&.field_name(name) || name
+      end
+
+      def default_hw_combobox_value_field_data
+        { "hw-combobox-target": "valueField" }
+      end
+
+      def default_hw_combobox_data(data)
+        data.reverse_merge! \
+          "action": "
+            focus->hw-combobox#open
+            input->hw-combobox#filter
+            keydown->hw-combobox#navigate
+            click@window->hw-combobox#closeOnClickOutside
+            focusin@window->hw-combobox#closeOnFocusOutside".squish,
+          "hw-combobox-target": "combobox"
+      end
+
+      def default_hw_combobox_aria(attrs, aria)
+        aria.reverse_merge! \
+          "controls": hw_combobox_listbox_id(attrs[:id]),
+          "owns": hw_combobox_listbox_id(attrs[:id]),
+          "haspopup": "listbox",
+          "autocomplete": "both"
+      end
+
+      def default_hw_combobox_parent_data(attrs, data)
+        data.reverse_merge! \
+          "controller": token_list("hw-combobox", data.delete(:controller)),
+          "hw-combobox-expanded-value": attrs.delete(:open),
+          "hw-combobox-filterable-attribute-value": "data-filterable-as",
+          "hw-combobox-autocompletable-attribute-value": "data-autocompletable-as"
+      end
+
+      def hw_combobox_id(id)
+        "#{id}-hw-combobox"
+      end
+
+      def hw_combobox_listbox_id(id)
+        "#{id}-hw-listbox"
+      end
+  end
+end

data/app/views/{combobox → hotwire_combobox}/_combobox.html.erb

@@ -1,19 +1,19 @@
-<%= tag.fieldset class: "hotwire-combobox", data: parent_data do %>
+<%= tag.fieldset class: "hw-combobox", data: parent_data do %>
   <%= hidden_field_tag value_field_attrs.delete(:name),
         value_field_attrs.delete(:value), **value_field_attrs %>
 
   <%= tag.input **attrs %>
 
   <%= tag.ul id: listbox_id, hidden: "", role: :listbox,
-        data: { "combobox-target": "listbox" } do |ul| %>
+        data: { "hw-combobox-target": "listbox" } do |ul| %>
     <% options.each do |option| %>
       <%= tag.li option.content, id: option.try(:id),
             role: :option, style: "cursor: pointer;",
             data: {
-              "action": "click->combobox#selectOption",
+              "action": "click->hw-combobox#selectOption",
               "filterable-as": option.try(:filterable_as),
               "autocompletable-as": option.try(:autocompletable_as),
-              "value": value_for_listbox_option(option) } %>
+              "value": value_for_hw_listbox_option(option) } %>
     <% end %>
   <% end %>
 <% end %>

data/lib/hotwire_combobox/engine.rb

@@ -0,0 +1,15 @@
+module HotwireCombobox
+  class Engine < ::Rails::Engine
+    isolate_namespace HotwireCombobox
+
+    initializer "hotwire_combobox.view_helpers" do
+      ActiveSupport.on_load :action_controller do
+        helper HotwireCombobox::Helper
+      end
+    end
+
+    initializer "hotwire_combobox.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+    end
+  end
+end

data/lib/hotwire_combobox/version.rb

@@ -0,0 +1,3 @@
+module HotwireCombobox
+  VERSION = "0.1.6"
+end

data/lib/hotwire_combobox.rb

@@ -0,0 +1,6 @@
+require "hotwire_combobox/version"
+require "hotwire_combobox/engine"
+
+module HotwireCombobox
+  Option = Struct.new(:id, :value, :content, :filterable_as, :autocompletable_as)
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.6
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-14 00:00:00.000000000 Z
+date: 2023-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,7 +52,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '1.2'
-description: A combobox implementation for Ruby on Rails.
+description: A combobox implementation for Ruby on Rails apps running on Hotwire.
 email:
 - jose@farias.mx
 executables: []
@@ -62,16 +62,16 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/javascripts/application.js
 - app/assets/javascripts/controllers/application.js
-- app/assets/javascripts/controllers/combobox_controller.js
+- app/assets/javascripts/controllers/hw_combobox_controller.js
 - app/assets/javascripts/controllers/index.js
-- app/helpers/combobox/helper.rb
-- app/views/combobox/_combobox.html.erb
+- app/assets/javascripts/hotwire_combobox_application.js
+- app/helpers/hotwire_combobox/helper.rb
+- app/views/hotwire_combobox/_combobox.html.erb
 - config/importmap.rb
-- lib/combobox.rb
-- lib/combobox/engine.rb
-- lib/combobox/version.rb
+- lib/hotwire_combobox.rb
+- lib/hotwire_combobox/engine.rb
+- lib/hotwire_combobox/version.rb
 homepage: https://github.com/josefarias/hotwire_combobox
 licenses:
 - MIT
@@ -97,5 +97,5 @@ requirements: []
 rubygems_version: 3.4.18
 signing_key:
 specification_version: 4
-summary: A combobox implementation for Ruby on Rails
+summary: A combobox implementation for Ruby on Rails apps running on Hotwire
 test_files: []

data/app/helpers/combobox/helper.rb

@@ -1,75 +0,0 @@
-module Combobox
-  module Helper
-    def combobox_tag(name, value = nil, form: nil, options: [], data: {}, input: {}, **attrs)
-      value_field_attrs = {}.tap do |h|
-        h[:id] = default_combobox_value_field_id attrs, form, name
-        h[:name] = default_combobox_value_field_name form, name
-        h[:data] = default_combobox_value_field_data
-        h[:value] = form&.object&.public_send(name) || value
-      end
-
-      attrs[:type] ||= :text
-      attrs[:role] = :combobox
-      attrs[:id] = combobox_id(value_field_attrs[:id])
-      attrs[:data] = default_combobox_data input.fetch(:data, {})
-      attrs[:aria] = default_combobox_aria value_field_attrs, input.fetch(:aria, {})
-
-      render "combobox/combobox", options: options,
-        attrs: attrs, value_field_attrs: value_field_attrs,
-        listbox_id: combobox_listbox_id(value_field_attrs[:id]),
-        parent_data: default_combobox_parent_data(attrs, data)
-    end
-
-    def value_for_listbox_option(option)
-      option.try(:value) || option.id
-    end
-
-    private
-      def default_combobox_value_field_id(attrs, form, name)
-        attrs.delete(:id) || form&.field_id(name)
-      end
-
-      def default_combobox_value_field_name(form, name)
-        form&.field_name(name) || name
-      end
-
-      def default_combobox_value_field_data
-        { "combobox-target": "valueField" }
-      end
-
-      def default_combobox_data(data)
-        data.reverse_merge! \
-          "action": "
-            focus->combobox#open
-            input->combobox#filter
-            keydown->combobox#navigate
-            click@window->combobox#closeOnClickOutside
-            focusin@window->combobox#closeOnFocusOutside".squish,
-          "combobox-target": "combobox"
-      end
-
-      def default_combobox_aria(attrs, aria)
-        aria.reverse_merge! \
-          "controls": combobox_listbox_id(attrs[:id]),
-          "owns": combobox_listbox_id(attrs[:id]),
-          "haspopup": "listbox",
-          "autocomplete": "both"
-      end
-
-      def default_combobox_parent_data(attrs, data)
-        data.reverse_merge! \
-          "controller": token_list(:combobox, data.delete(:controller)),
-          "combobox-expanded-value": attrs.delete(:open),
-          "combobox-filterable-attribute-value": "data-filterable-as",
-          "combobox-autocompletable-attribute-value": "data-autocompletable-as"
-      end
-
-      def combobox_id(id)
-        "#{id}-combobox"
-      end
-
-      def combobox_listbox_id(id)
-        "#{id}-listbox"
-      end
-  end
-end

data/lib/combobox/engine.rb

@@ -1,15 +0,0 @@
-module Combobox
-  class Engine < ::Rails::Engine
-    isolate_namespace Combobox
-
-    initializer "combobox.view_helpers" do
-      ActiveSupport.on_load :action_controller do
-        helper Combobox::Helper
-      end
-    end
-
-    initializer "combobox.importmap", before: "importmap" do |app|
-      app.config.importmap.paths << Engine.root.join("config/importmap.rb")
-    end
-  end
-end

data/lib/combobox/version.rb

@@ -1,3 +0,0 @@
-module Combobox
-  VERSION = "0.1.4"
-end

data/lib/combobox.rb

@@ -1,6 +0,0 @@
-require "combobox/version"
-require "combobox/engine"
-
-module Combobox
-  Option = Struct.new(:id, :value, :content, :filterable_as, :autocompletable_as)
-end