hotwire_combobox 0.1.14 → 0.1.15
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +10 -104
- data/app/helpers/hotwire_combobox/helper.rb +2 -2
- 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: aa358f06557f2f70b072650e12b11a270fc3afa36addc8e73820105ea7383da5
|
|
4
|
+
data.tar.gz: e35a86d210a02af308614ebdb983a3af69026824ea327fc0f1e353a9612bf807
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 011a0b91f679374998444836f121bdede29a86fc8d4c905dd5f0988e41b834be84044fd9cd9a1cc91e88d3bd7812f16b727d9144764968fe07bb44b6d8e06a66
|
|
7
|
+
data.tar.gz: 7ff6b81587de0d53496fcb008cffa0c9ff4df8d19d1f9e8583b7becba82234252b60a57cf4cc258fb5b633a9e5d90821991a14bcb341732a59454a8b50b996d2
|
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
|
+
# Autocomplete for Rails apps using Hotwire
|
|
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
|
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.15
|
|
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-03 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: []
|