hotwire_combobox 0.1.14 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +10 -104
- data/app/helpers/hotwire_combobox/helper.rb +2 -2
- data/lib/hotwire_combobox/engine.rb +4 -0
- data/lib/hotwire_combobox/version.rb +1 -1
- metadata +4 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b5df1f9a0088f1fcc4298f725b24bab30d8f7edf74642939ad66794e3005842a
|
|
4
|
+
data.tar.gz: 784385d003bbc9648d3e8308342f4c4707a826930ecbba3f3829712c59f61c31
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: cacbd4cf2de90218a8b79430bb4d887dc49cc6168b17ee92c7dad04278d4e07866cd9c5e19cafed9b6989780e3c4e7ff8ca7071597ce0c48b458f4aad11f39de
|
|
7
|
+
data.tar.gz: 422a1376980a941746dbe5cd49caf5d12c8fce12803feac9934de9ead54b85f9d9bf039731ab2c897a813fb57453579ce4c29b9f442db995185d92bc44af9bc1
|
data/README.md
CHANGED
|
@@ -1,115 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="docs/assets/images/logo.png" height=150>
|
|
3
|
+
</p>
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
# Easy Autocomplete for Ruby on Rails
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
> This gem is pre-release software. It's not ready for production use yet and the API is subject to change.
|
|
7
|
+
[](https://github.com/josefarias/hotwire_combobox/actions/workflows/ci_tests.yml) [](https://badge.fury.io/rb/hotwire_combobox)
|
|
7
8
|
|
|
8
|
-
## Installation
|
|
9
|
-
|
|
10
|
-
Add this line to your application's Gemfile:
|
|
11
|
-
|
|
12
|
-
```ruby
|
|
13
|
-
gem "hotwire_combobox"
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
And then execute:
|
|
17
|
-
```bash
|
|
18
|
-
$ bundle
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Output
|
|
22
|
-
|
|
23
|
-
This is the stripped-down output of a combobox generated with HotwireCombobox. Understanding it will be helpful in getting the most out of this library.
|
|
24
|
-
|
|
25
|
-
```html
|
|
26
|
-
<fieldset class="hw-combobox">
|
|
27
|
-
<input type="hidden" name="provided_name">
|
|
28
|
-
|
|
29
|
-
<input type="text" role="combobox">
|
|
30
|
-
|
|
31
|
-
<ul role="listbox">
|
|
32
|
-
<li role="option">Provided Option 1 Content</li>
|
|
33
|
-
<li role="option">Provided Option 2 Content</li>
|
|
34
|
-
<!-- ... -->
|
|
35
|
-
</ul>
|
|
36
|
-
</fieldset>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
The `<ul role="listbox">` element is what gets shown when the combobox is open.
|
|
40
|
-
|
|
41
|
-
The library uses stimulus to add interactivity to the combobox and sync the input element's value with the hidden input element.
|
|
42
|
-
|
|
43
|
-
The hidden input's value is what ultimately gets sent to the server when submitting a form containing the combobox.
|
|
44
|
-
|
|
45
|
-
## Usage
|
|
46
|
-
|
|
47
|
-
### Options
|
|
48
|
-
|
|
49
|
-
Options are what you see when you open the combobox.
|
|
50
9
|
|
|
51
|
-
|
|
10
|
+
> [!IMPORTANT]
|
|
11
|
+
> We need your help to finalize this gem's first major release. Please use it in your apps and report any issues.
|
|
52
12
|
|
|
53
|
-
|
|
54
|
-
|--------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
|
|
55
|
-
| id | Used as the option element's `id` attribute. Only required if `value` is not provided. |
|
|
56
|
-
| value | Used to populate the input element's `value` attribute. Falls back to calling `id` on the object if not provided. |
|
|
57
|
-
| content | **Supports HTML** <br> Used as the option element's content. Falls back to calling `display` on the object if not provided. |
|
|
58
|
-
| filterable_as | Used to filter down the options when the user types into the input element. Falls back to calling `display` on the object if not provided. |
|
|
59
|
-
| autocompletable_as | Used to autocomplete the input element when the user types into it. Falls back to calling `display` on the object if not provided. |
|
|
60
|
-
| display | Used as a short-hand for other attributes. See the rest of the list for details. |
|
|
61
|
-
|
|
62
|
-
You can use the `combobox_options` helper to create an array of option objects which respond to the above methods:
|
|
63
|
-
|
|
64
|
-
```ruby
|
|
65
|
-
combobox_options [
|
|
66
|
-
{ value: "AL", display: "Alabama" },
|
|
67
|
-
{ value: "AK", display: "Alaska" },
|
|
68
|
-
{ value: "AZ", display: "Arizona" },
|
|
69
|
-
# ...
|
|
70
|
-
]
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
### Styling
|
|
74
|
-
|
|
75
|
-
The combobox is completely unstyled by default. You can use the following CSS selectors to style the combobox:
|
|
76
|
-
|
|
77
|
-
* `.hw-combobox` targets the `<fieldset>` element used to wrap the whole component.
|
|
78
|
-
* `.hw-combobox [role="combobox"]` targets the input element.
|
|
79
|
-
* `.hw-combobox [role="listbox"]` targets the listbox which encloses all option elements.
|
|
80
|
-
* `.hw-combobox [role="option"]` targets each option element inside the listbox.
|
|
81
|
-
|
|
82
|
-
Additionally, you can pass the following [Stimulus class values](https://stimulus.hotwired.dev/reference/css-classes) to `combobox_tag`:
|
|
83
|
-
|
|
84
|
-
* `data-hw-combobox-selected-class`: The class to apply to the selected option while shown inside an open listbox.
|
|
85
|
-
* `data-hw-combobox-invalid-class`: The class to apply to the input element when the current value is invalid.
|
|
86
|
-
|
|
87
|
-
### Validity
|
|
88
|
-
|
|
89
|
-
Unless `name_when_new` is passed, the hidden input can't have a value that's not in the list of options.
|
|
90
|
-
|
|
91
|
-
If a nonexistent value is typed into the combobox, the value of the hidden input will be set empty.
|
|
92
|
-
|
|
93
|
-
The only way a value can be marked as invalid is if the field is required and empty after having interacted with the combobox.
|
|
94
|
-
|
|
95
|
-
The library will mark the element as invalid but this won't be noticeable in the UI unless you specify styles for the invalid state. See the [Styling](#styling) section for details.
|
|
96
|
-
|
|
97
|
-
> [!CAUTION]
|
|
98
|
-
> Bad actors can still submit invalid values to the server. You should always validate the input on the server side.
|
|
99
|
-
|
|
100
|
-
### Naming Conflicts
|
|
101
|
-
|
|
102
|
-
If your application has naming conflicts with this gem, the following config will turn:
|
|
13
|
+
## Installation
|
|
103
14
|
|
|
104
|
-
|
|
105
|
-
* `#combobox_options` into `#hw_combobox_options`
|
|
15
|
+
Add this line to your application's Gemfile and run `bundle install`:
|
|
106
16
|
|
|
107
17
|
```ruby
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
HotwireCombobox.setup do |config|
|
|
111
|
-
config.bypass_convenience_methods = true
|
|
112
|
-
end
|
|
18
|
+
gem "hotwire_combobox"
|
|
113
19
|
```
|
|
114
20
|
|
|
115
21
|
## Contributing
|
|
@@ -39,8 +39,8 @@ module HotwireCombobox
|
|
|
39
39
|
hw_alias :hw_combobox_options
|
|
40
40
|
|
|
41
41
|
def hw_paginated_combobox_options(options, for_id:, src: request.path, next_page: nil, render_in: {}, **methods)
|
|
42
|
-
this_page = render("hotwire_combobox/paginated_options", for_id: for_id, options: hw_combobox_options(options, render_in: render_in, **methods)
|
|
43
|
-
next_page = render("hotwire_combobox/next_page", for_id: for_id, src: src, next_page: next_page
|
|
42
|
+
this_page = render("hotwire_combobox/paginated_options", for_id: for_id, options: hw_combobox_options(options, render_in: render_in, **methods))
|
|
43
|
+
next_page = render("hotwire_combobox/next_page", for_id: for_id, src: src, next_page: next_page)
|
|
44
44
|
|
|
45
45
|
safe_join [ this_page, next_page ]
|
|
46
46
|
end
|
|
@@ -21,5 +21,9 @@ module HotwireCombobox
|
|
|
21
21
|
initializer "hotwire_combobox.importmap", before: "importmap" do |app|
|
|
22
22
|
app.config.importmap.paths << Engine.root.join("config/importmap.rb")
|
|
23
23
|
end
|
|
24
|
+
|
|
25
|
+
initializer "hotwire_combobox.assets.precompile" do |app|
|
|
26
|
+
app.config.assets.precompile += %w( hotwire_combobox.css )
|
|
27
|
+
end
|
|
24
28
|
end
|
|
25
29
|
end
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: hotwire_combobox
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.16
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jose Farias
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-02-
|
|
11
|
+
date: 2024-02-04 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -80,7 +80,7 @@ dependencies:
|
|
|
80
80
|
- - ">="
|
|
81
81
|
- !ruby/object:Gem::Version
|
|
82
82
|
version: 0.0.11
|
|
83
|
-
description: A combobox implementation for Ruby on Rails apps
|
|
83
|
+
description: A combobox implementation for Ruby on Rails apps using Hotwire.
|
|
84
84
|
email:
|
|
85
85
|
- jose@farias.mx
|
|
86
86
|
executables: []
|
|
@@ -149,5 +149,5 @@ requirements: []
|
|
|
149
149
|
rubygems_version: 3.4.18
|
|
150
150
|
signing_key:
|
|
151
151
|
specification_version: 4
|
|
152
|
-
summary:
|
|
152
|
+
summary: Autocomplete for Rails apps using Hotwire
|
|
153
153
|
test_files: []
|