hotwire_combobox 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8042d01773c03b2a7eac8b6e1d85e2fedb7b7ca71ea36d0d7324b89ddbd72391
-  data.tar.gz: ee22875bacb07cdc0cdc6b5911e9205d552a0f1b87f0f3a6afb3ea7305ea4575
+  metadata.gz: 49ff77cf8ae3aa9bcfdf0d5a76c0f58ba930e66ac7959c7fb52e592809658534
+  data.tar.gz: ea4b9062507631d96711d3c4cc1ea87bba7cad5ed935490aff4c863c33b6c640
 SHA512:
-  metadata.gz: 24061168660543ad7f57605fbc91d581660e1cc28d39acd776295edec0acb6992949eff1f894f5cc3902b02dcbf53b23329670542a2f8ab5b6b3c2ec23736be0
-  data.tar.gz: 8d6baa4a96de4ffc353ff922bcab526f338fcd4bebc36bd1ee9645fe6681294605e977d51c25a75482c9033fe4b406dad8bec7b2c356cd0e3ec8100be4276c2f
+  metadata.gz: 13099362009ab729aad33c3b29399e45c1ebfe8197eed16a2f4be160a7bf2566d7b8a828d063aa39bb48ca94aa47834d585df8a01712c154870048d0670b19b0
+  data.tar.gz: 7dd571d6e65293c6ee93c3ba5492c1bb081d37fc261e9311c054d16ed2888dd26abee32ca6dfbec6174b0af4baedca95a85d98b0cc2a8e4a05551a5940442a28

data/README.md

@@ -22,7 +22,30 @@ $ gem install hotwire_combobox
 ```
 
 ## Contributing
-Contribution directions go here.
+
+### Setup
+```bash
+$ bin/setup
+```
+
+### Running the tests
+```bash
+$ bundle exec rake app:test
+```
+
+```bash
+$ bundle exec rake app:test:system
+```
+
+### Running the dummy app
+```bash
+$ bin/rails s
+```
+
+### Releasing
+
+1. Bump the version in `lib/hotwire_combobox/version.rb`
+2. 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/application.js

@@ -0,0 +1 @@
+import "controllers"

data/app/assets/javascripts/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/app/assets/javascripts/controllers/combobox_controller.js

@@ -0,0 +1,210 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = [ "selected" ]
+  static targets = [ "combobox", "listbox", "valueField" ]
+  static values = { expanded: Boolean, filterableAttribute: String, autocompletableAttribute: String }
+
+  connect() {
+    if (this.valueFieldTarget.value) {
+      this.selectOptionByValue(this.valueFieldTarget.value)
+    }
+  }
+
+  open() {
+    this.expandedValue = true
+  }
+
+  close() {
+    this.expandedValue = false
+  }
+
+  selectOption(event) {
+    this.select(event.currentTarget)
+    this.commitSelection()
+  }
+
+  filter(event) {
+    const query = this.comboboxTarget.value.trim()
+
+    this.open()
+
+    this.allOptionElements.forEach(applyFilter(query, { matching: this.filterableAttributeValue }))
+
+    if (event.inputType === "deleteContentBackward") {
+      this.deselect(this.selectedOptionElement)
+    } else {
+      this.select(this.visibleOptionElements[0])
+    }
+  }
+
+  navigate(event) {
+    this.keyHandlers[event.key]?.call(this, event)
+  }
+
+  closeOnClickOutside({ target }) {
+    if (this.element.contains(target)) return
+
+    this.close()
+  }
+
+  closeOnFocusOutside({ target }) {
+    if (!this.isOpen) return
+    if (this.element.contains(target)) return
+    if (target.matches("main")) return
+
+    this.close()
+  }
+
+  // private
+
+  keyHandlers = {
+    ArrowUp(event) {
+      this.selectIndex(this.selectedOptionIndex - 1)
+      cancel(event)
+    },
+    ArrowDown(event) {
+      this.selectIndex(this.selectedOptionIndex + 1)
+      cancel(event)
+    },
+    Home(event) {
+      this.selectIndex(0)
+      cancel(event)
+    },
+    End(event) {
+      this.selectIndex(this.visibleOptionElements.length - 1)
+      cancel(event)
+    },
+    Enter(event) {
+      this.commitSelection()
+      cancel(event)
+    }
+  }
+
+  commitSelection() {
+    this.select(this.selectedOptionElement, { force: true })
+    this.close()
+  }
+
+  expandedValueChanged() {
+    if (this.expandedValue) {
+      this.expand()
+    } else {
+      this.collapse()
+    }
+  }
+
+  expand() {
+    this.listboxTarget.hidden = false
+    this.comboboxTarget.setAttribute("aria-expanded", true)
+  }
+
+  collapse() {
+    this.listboxTarget.hidden = true
+    this.comboboxTarget.setAttribute("aria-expanded", false)
+  }
+
+  select(option, { force = false } = {}) {
+    this.allOptionElements.forEach(option => this.deselect(option))
+
+    if (option) {
+      if (this.hasSelectedClass) option.classList.add(this.selectedClass)
+      this.maybeAutocompleteWith(option, { force })
+      this.executeSelect(option, { selected: true })
+    }
+  }
+
+  selectIndex(index) {
+    const option = wrapAroundAccess(this.visibleOptionElements, index)
+    this.select(option, { force: true })
+  }
+
+  selectOptionByValue(value) {
+    this.allOptions.find(option => option.dataset.value === value)?.click()
+  }
+
+  deselect(option) {
+    if (option) {
+      if (this.hasSelectedClass) option.classList.remove(this.selectedClass)
+      this.executeSelect(option, { selected: false })
+    }
+  }
+
+  executeSelect(option, { selected }) {
+    if (selected) {
+      option.setAttribute("aria-selected", true)
+      this.valueFieldTarget.value = option.dataset.value
+    } else {
+      option.setAttribute("aria-selected", false)
+      this.valueFieldTarget.value = null
+    }
+  }
+
+  maybeAutocompleteWith(option, { force }) {
+    const typedValue = this.comboboxTarget.value
+    const autocompletedValue = option.dataset.autocompletableAs
+
+    if (force) {
+      this.comboboxTarget.value = autocompletedValue
+      this.comboboxTarget.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
+    } else if (autocompletedValue.toLowerCase().startsWith(typedValue.toLowerCase())) {
+      this.comboboxTarget.value = autocompletedValue
+      this.comboboxTarget.setSelectionRange(typedValue.length, autocompletedValue.length)
+    }
+  }
+
+  get allOptions() {
+    return Array.from(this.allOptionElements)
+  }
+
+  get allOptionElements() {
+    return this.listboxTarget.querySelectorAll(`[${this.filterableAttributeValue}]`)
+  }
+
+  get visibleOptionElements() {
+    return [ ...this.allOptionElements ].filter(visible)
+  }
+
+  get selectedOptionElement() {
+    return this.listboxTarget.querySelector("[role=option][aria-selected=true]")
+  }
+
+  get selectedOptionIndex() {
+    return [ ...this.visibleOptionElements ].indexOf(this.selectedOptionElement)
+  }
+
+  get isOpen() {
+    return this.expandedValue
+  }
+}
+
+function applyFilter(query, { matching }) {
+  return (target) => {
+    if (query) {
+      const value = target.getAttribute(matching) || ""
+      const match = value.toLowerCase().includes(query.toLowerCase())
+
+      target.hidden = !match
+    } else {
+      target.hidden = false
+    }
+  }
+}
+
+function visible(target) {
+  return !(target.hidden || target.closest("[hidden]"))
+}
+
+function wrapAroundAccess(array, index) {
+  const first = 0
+  const last = array.length - 1
+
+  if (index < first) return array[last]
+  if (index > last) return array[first]
+  return array[index]
+}
+
+function cancel(event) {
+  event.stopPropagation()
+  event.preventDefault()
+}

data/app/assets/javascripts/controllers/index.js

@@ -0,0 +1,3 @@
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/app/helpers/combobox/helper.rb

@@ -0,0 +1,75 @@
+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/app/views/combobox/_combobox.html.erb

@@ -0,0 +1,19 @@
+<%= tag.div class: "hotwire-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| %>
+    <% options.each do |option| %>
+      <%= tag.li option.content, id: option.try(:id),
+            role: :option, style: "cursor: pointer;",
+            data: {
+              "action": "click->combobox#selectOption",
+              "filterable-as": option.try(:filterable_as),
+              "autocompletable-as": option.try(:autocompletable_as),
+              "value": value_for_listbox_option(option) } %>
+    <% end %>
+  <% end %>
+<% end %>

data/config/importmap.rb

@@ -0,0 +1 @@
+pin_all_from File.expand_path("../app/assets/javascripts", __dir__)

data/lib/combobox/engine.rb

@@ -1,5 +1,15 @@
 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 +1,3 @@
 module Combobox
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

data/lib/combobox.rb

@@ -2,5 +2,4 @@ require "combobox/version"
 require "combobox/engine"
 
 module Combobox
-  # Your code goes here...
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-01 00:00:00.000000000 Z
+date: 2023-09-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -24,6 +24,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 7.0.7.2
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+- !ruby/object:Gem::Dependency
+  name: stimulus-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
 description: A combobox implementation for Ruby on Rails.
 email:
 - jose@farias.mx
@@ -34,26 +62,23 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/config/combobox_manifest.js
-- app/assets/stylesheets/combobox/application.css
-- app/controllers/combobox/application_controller.rb
-- app/helpers/combobox/application_helper.rb
-- app/jobs/combobox/application_job.rb
-- app/mailers/combobox/application_mailer.rb
-- app/models/combobox/application_record.rb
-- app/views/layouts/combobox/application.html.erb
-- config/routes.rb
+- app/assets/javascripts/application.js
+- app/assets/javascripts/controllers/application.js
+- app/assets/javascripts/controllers/combobox_controller.js
+- app/assets/javascripts/controllers/index.js
+- app/helpers/combobox/helper.rb
+- app/views/combobox/_combobox.html.erb
+- config/importmap.rb
 - lib/combobox.rb
 - lib/combobox/engine.rb
 - lib/combobox/version.rb
-- lib/tasks/combobox_tasks.rake
-homepage: https://jose.omg.lol/
+homepage: https://github.com/josefarias/hotwire_combobox
 licenses:
 - MIT
 metadata:
-  homepage_uri: https://jose.omg.lol/
-  source_code_uri: https://github.com/josefarias/combobox
-  changelog_uri: https://github.com/josefarias/combobox
+  homepage_uri: https://github.com/josefarias/hotwire_combobox
+  source_code_uri: https://github.com/josefarias/hotwire_combobox
+  changelog_uri: https://github.com/josefarias/hotwire_combobox
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -72,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
 test_files: []

data/app/assets/config/combobox_manifest.js

@@ -1 +0,0 @@
-//= link_directory ../stylesheets/combobox .css

data/app/assets/stylesheets/combobox/application.css

@@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */

data/app/controllers/combobox/application_controller.rb

@@ -1,4 +0,0 @@
-module Combobox
-  class ApplicationController < ActionController::Base
-  end
-end

data/app/helpers/combobox/application_helper.rb

@@ -1,4 +0,0 @@
-module Combobox
-  module ApplicationHelper
-  end
-end

data/app/jobs/combobox/application_job.rb

@@ -1,4 +0,0 @@
-module Combobox
-  class ApplicationJob < ActiveJob::Base
-  end
-end

data/app/mailers/combobox/application_mailer.rb

@@ -1,6 +0,0 @@
-module Combobox
-  class ApplicationMailer < ActionMailer::Base
-    default from: "from@example.com"
-    layout "mailer"
-  end
-end

data/app/models/combobox/application_record.rb

@@ -1,5 +0,0 @@
-module Combobox
-  class ApplicationRecord < ActiveRecord::Base
-    self.abstract_class = true
-  end
-end

data/app/views/layouts/combobox/application.html.erb

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Combobox</title>
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%= stylesheet_link_tag    "combobox/application", media: "all" %>
-</head>
-<body>
-
-<%= yield %>
-
-</body>
-</html>

data/config/routes.rb

@@ -1,2 +0,0 @@
-Combobox::Engine.routes.draw do
-end

data/lib/tasks/combobox_tasks.rake

@@ -1,4 +0,0 @@
-# desc "Explaining what the task does"
-# task :combobox do
-#   # Task goes here
-# end