funicular-autocomplete 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8955416147c543a0f581fcaea002aab8f6b105b183039e758f83aac2bf902380
+  data.tar.gz: d6df1a2d20a1f02b71eaf19d6cd677d5213c083a088d27dccfc66f6b07e91b23
+SHA512:
+  metadata.gz: 54a6ce9085642618ef757838db1b2609f449eb55bfd679a93569f4eb1d8334549da8cf93a23f37c35ca218c924bbe18f37a1ba36d7cd6f139f3a55d8f2e77fc9
+  data.tar.gz: 5da71a7df70f6dfa8af524a2e054ee4c6c173518d395ba31554ffc8caba0de85426f530d8293c4b7cf8889b9753c138ae67147beefe7cc29ba75679590c4d653

data/README.md

@@ -0,0 +1,51 @@
+# funicular-autocomplete
+
+An incremental-search combobox component for
+[Funicular](https://github.com/picoruby/funicular), packaged as a
+plugin gem.
+
+## Installation
+
+```ruby
+# Gemfile
+group :funicular do
+  gem "funicular-autocomplete"
+end
+```
+
+The component sources are prepended to your client bundle by
+`funicular:compile`, and `funicular_plugin_include_tags` serves the
+stylesheet.
+
+## Usage
+
+```ruby
+component Funicular::Plugins::Autocomplete::Component,
+          key: "brewery-#{record_id}",
+          options: [{ "id" => 1, "label" => "Masuizumi" }],
+          value: selected_id,
+          input_id: "brewery-search",
+          input_class: "border rounded px-3 py-2",
+          placeholder: "Search breweries...",
+          on_select: ->(option) { @brewery_id = option["id"] }
+```
+
+- `options` — Array of Hashes with `"id"` and `"label"`; the parent
+  owns the list. Filtering is a case-insensitive substring match on
+  `"label"`.
+- `value` — optional preselected id, read once at mount to prefill the
+  input. Give the component a `key` that changes when the selection
+  context changes so it remounts.
+- `on_select` — called with the chosen option Hash.
+- Keyboard: ArrowDown / ArrowUp move the highlight (opening the panel
+  if closed), Enter selects the highlighted match, Escape closes.
+  Mouse selection uses mousedown so it wins over the input's blur.
+- `limit` (default 20), `empty_label`, `placeholder`, `input_id`,
+  `input_class` — presentation knobs.
+
+## Test
+
+```console
+bundle install && npm install
+bundle exec rake test
+```

data/assets/autocomplete.css

@@ -0,0 +1,46 @@
+.funicular-autocomplete {
+  position: relative;
+  display: block;
+}
+
+/* Fill the wrapper so the input tracks the width of sibling form
+   fields; without this the input keeps its intrinsic size. */
+.funicular-autocomplete__input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.funicular-autocomplete__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 40;
+  margin-top: 0.25rem;
+  max-height: 16rem;
+  overflow-y: auto;
+  background: #ffffff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.funicular-autocomplete__option {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.funicular-autocomplete__option:hover {
+  background: #eff6ff;
+}
+
+.funicular-autocomplete__option--active {
+  background: #dbeafe;
+}
+
+.funicular-autocomplete__empty {
+  padding: 0.5rem 0.75rem;
+  color: #9ca3af;
+  font-size: 0.875rem;
+}

data/lib/autocomplete.rb

@@ -0,0 +1,7 @@
+module Funicular
+  module Plugins
+    module Autocomplete
+      Component = AutocompleteComponent
+    end
+  end
+end

data/lib/components/autocomplete_component.rb

@@ -0,0 +1,169 @@
+# Incremental-search combobox over a fixed option list.
+#
+#   component Funicular::Plugins::Autocomplete::Component,
+#             key: "brewery-#{record_id}",   # remount to re-read value:
+#             options: [{ "id" => 1, "label" => "Masuizumi" }, ...],
+#             value: selected_id,            # optional preselection
+#             input_id: "brewery-search",
+#             input_class: "...",
+#             placeholder: "Search...",
+#             empty_label: "No matches",
+#             limit: 20,
+#             on_select: ->(option) { ... }  # receives the chosen Hash
+#
+# The parent owns the option list; filtering is a client-side
+# case-insensitive substring match on "label". The `value` prop is read
+# once at mount to prefill the input, so give the component a key that
+# changes when the selection context changes.
+class AutocompleteComponent < Funicular::Component
+  def initialize_state
+    { query: nil, open: false, highlight: 0 }
+  end
+
+  def component_mounted
+    prefill = selected_label
+    set_input(prefill) if prefill
+  end
+
+  def handle_input(_event)
+    node = @refs[:query_input]
+    patch(query: node ? node[:value].to_s : "", open: true, highlight: 0)
+  end
+
+  def handle_focus(_event)
+    patch(open: true)
+  end
+
+  def handle_blur(_event)
+    # Option mousedown fires before blur, so selection still wins.
+    patch(open: false)
+  end
+
+  def handle_key(event)
+    key = event[:key].to_s
+    if key == "Escape"
+      patch(open: false)
+    elsif key == "ArrowDown"
+      move_highlight(1)
+    elsif key == "ArrowUp"
+      move_highlight(-1)
+    elsif key == "Enter" && state[:open]
+      shown = shown_options
+      option = shown[state[:highlight]] || shown[0]
+      select_option(option) if option
+    end
+  end
+
+  def select_option(option)
+    patch(query: nil, open: false, highlight: 0)
+    set_input(option["label"].to_s)
+    callback = props[:on_select]
+    callback.call(option) if callback
+  end
+
+  def render
+    div(class: "funicular-autocomplete") do
+      input(
+        type: "text",
+        ref: :query_input,
+        id: props[:input_id],
+        class: "funicular-autocomplete__input #{props[:input_class]}",
+        placeholder: props[:placeholder].to_s,
+        autocomplete: "off",
+        oninput: :handle_input,
+        onfocus: :handle_focus,
+        onblur: :handle_blur,
+        onkeydown: :handle_key
+      )
+      if state[:open]
+        render_panel
+      end
+    end
+  end
+
+  private
+
+  def move_highlight(delta)
+    unless state[:open]
+      patch(open: true, highlight: 0)
+      return
+    end
+    shown_size = shown_options.size
+    return if shown_size == 0
+    index = state[:highlight] + delta
+    index = 0 if index < 0
+    index = shown_size - 1 if shown_size <= index
+    patch(highlight: index)
+    scroll_highlight_into_view
+  end
+
+  def scroll_highlight_into_view
+    JS.eval(
+      "document.querySelectorAll('.funicular-autocomplete__option--active')" \
+      ".forEach(function(el){ el.scrollIntoView({block: 'nearest'}); })"
+    )
+  end
+
+  def shown_options
+    limit = props[:limit] || 20
+    filtered_options[0, limit] || []
+  end
+
+  def render_panel
+    shown = shown_options
+    div(class: "funicular-autocomplete__panel") do
+      if shown.empty?
+        div(class: "funicular-autocomplete__empty") do
+          props[:empty_label] || "No matches"
+        end
+      else
+        i = 0
+        shown_size = shown.size
+        while i < shown_size
+          option = shown[i]
+          option_class = "funicular-autocomplete__option"
+          option_class += " funicular-autocomplete__option--active" if i == state[:highlight]
+          div(
+            class: option_class,
+            key: option["id"].to_s,
+            onmousedown: -> { select_option(option) }
+          ) { option["label"].to_s }
+          i += 1
+        end
+      end
+    end
+  end
+
+  def filtered_options
+    options = props[:options] || []
+    query = state[:query].to_s.downcase
+    return options if query.empty?
+    result = []
+    i = 0
+    options_size = options.size
+    while i < options_size
+      option = options[i]
+      result << option if option["label"].to_s.downcase.include?(query)
+      i += 1
+    end
+    result
+  end
+
+  def selected_label
+    value = props[:value]
+    return nil if value.nil? || value.to_s.empty?
+    options = props[:options] || []
+    i = 0
+    options_size = options.size
+    while i < options_size
+      return options[i]["label"].to_s if options[i]["id"].to_s == value.to_s
+      i += 1
+    end
+    nil
+  end
+
+  def set_input(text)
+    node = @refs[:query_input]
+    node[:value] = text if node
+  end
+end

metadata

@@ -0,0 +1,59 @@
+--- !ruby/object:Gem::Specification
+name: funicular-autocomplete
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- HASUMI Hitoshi
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: funicular
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.4.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.4.0
+description: A Funicular autocomplete (combobox) component packaged as a Ruby-script
+  CRubygem.
+email:
+- hasumikin@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- assets/autocomplete.css
+- lib/autocomplete.rb
+- lib/components/autocomplete_component.rb
+homepage: https://github.com/hasumikin/funicular-autocomplete
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.10
+specification_version: 4
+summary: Incremental-search combobox component for Funicular
+test_files: []