glimmer-web-components 0.1.0 → 0.1.2
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/CHANGELOG.md +8 -0
- data/LICENSE.txt +1 -1
- data/README.md +71 -7
- data/VERSION +1 -1
- data/glimmer-web-components.gemspec +3 -3
- data/lib/glimmer/web/component/multi_checkbox_dropdown.rb +3 -3
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: cc4968e9a9543a0a75e4b61cd861d8e100fef51f96612b9c9c34004c5e19777c
|
|
4
|
+
data.tar.gz: f0d6e7b4be94bde719ba261c21a7aceb011b236bcb830b8ce6b5b5bf1d31c1a9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bf7b3a91ca5b957a31f145f22a7b815e0b4f179390780a8b2051a88d30c38338475700eac7b485407b873fdbfb5f7733087ec08a4dd45a798b57bcd7364a3a9e
|
|
7
|
+
data.tar.gz: f985d91a5e276b7731b276d6695b16c36ac592a812021bf02d42dbae8029dfc9475ae86006f62d394d4b9346f4bcf890894837593fcdb7ae31fd94e5e03358ec
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 0.1.2
|
|
4
|
+
|
|
5
|
+
- Fixed content positioning when switching component div to `display: inline;` by setting top/left CSS values
|
|
6
|
+
|
|
7
|
+
## 0.1.1
|
|
8
|
+
|
|
9
|
+
- Fixed li CSS style by adding `clear: both;`
|
|
10
|
+
|
|
3
11
|
## 0.1.0
|
|
4
12
|
|
|
5
13
|
- multi_checkbox_dropdown Glimmer Web Component
|
data/LICENSE.txt
CHANGED
data/README.md
CHANGED
|
@@ -7,15 +7,21 @@ This is a collection of reusable Glimmer Web Components for Glimmer DSL for Web,
|
|
|
7
7
|
|
|
8
8
|
## Setup
|
|
9
9
|
|
|
10
|
+
Add to bundler `Gemfile` in your Rails web app:
|
|
11
|
+
```ruby
|
|
12
|
+
gem 'glimmer-web-components', '0.1.2'
|
|
10
13
|
```
|
|
11
|
-
|
|
14
|
+
|
|
15
|
+
Also, add to `config/initializers/assets.rb`:
|
|
16
|
+
```ruby
|
|
17
|
+
Opal.use_gem 'glimmer-web-components'
|
|
12
18
|
```
|
|
13
19
|
|
|
14
20
|
## Usage
|
|
15
21
|
|
|
16
22
|
### Multi Checkbox Dropdown:
|
|
17
23
|
|
|
18
|
-
|
|
19
25
|
|
|
20
26
|
Add the following at the top:
|
|
21
27
|
|
|
@@ -23,7 +29,64 @@ Add the following at the top:
|
|
|
23
29
|
require 'glimmer/web/component/multi_checkbox_dropdown'
|
|
24
30
|
```
|
|
25
31
|
|
|
26
|
-
Then use the `multi_checkbox_dropdown` Glimmer Web Component in standard Glimmer HTML DSL code
|
|
32
|
+
Then use the `multi_checkbox_dropdown` Glimmer Web Component in standard Glimmer HTML DSL code.
|
|
33
|
+
|
|
34
|
+
Simple version with `on_change` listener:
|
|
35
|
+
|
|
36
|
+
```ruby
|
|
37
|
+
...
|
|
38
|
+
markup {
|
|
39
|
+
div {
|
|
40
|
+
...
|
|
41
|
+
multi_checkbox_dropdown(values: SomePresenter::STATUS_FILTER_TYPES) {
|
|
42
|
+
on_change do |selected_values|
|
|
43
|
+
# Do something with selected values
|
|
44
|
+
end
|
|
45
|
+
}
|
|
46
|
+
...
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
...
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Simpler **(recommended)** version with bidirectional data-binding (`selected_values` are automatically prepopulated from `@some_presenter.status_filters` and stored back on `@some_presenter.status_filters` upon user selection):
|
|
53
|
+
|
|
54
|
+
```ruby
|
|
55
|
+
...
|
|
56
|
+
markup {
|
|
57
|
+
div {
|
|
58
|
+
...
|
|
59
|
+
multi_checkbox_dropdown(values: SomePresenter::STATUS_FILTER_TYPES) {
|
|
60
|
+
selected_values <=> [@some_presenter, :status_filters]
|
|
61
|
+
}
|
|
62
|
+
...
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
...
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Here is the list of defined `multi_checkbox_dropdown` component options for customization when needed:
|
|
69
|
+
|
|
70
|
+
```ruby
|
|
71
|
+
option :values, default: []
|
|
72
|
+
option :display_values
|
|
73
|
+
option :selected_values, default: []
|
|
74
|
+
option :locale, default: :en
|
|
75
|
+
option :translations, default: {}
|
|
76
|
+
option :selected_values_formatter, default: SELECTED_VALUES_FORMATTER_DEFAULT
|
|
77
|
+
option :width, default: 175
|
|
78
|
+
option :height, default: 40
|
|
79
|
+
option :margin, default: '0 15px 0 0'
|
|
80
|
+
option :text_align, default: :center
|
|
81
|
+
option :content_z_index, default: '1000'
|
|
82
|
+
option :content_label_padding_px, default: 10
|
|
83
|
+
option :content_background, default: :white
|
|
84
|
+
option :content_checkbox_size, default: 20
|
|
85
|
+
option :content_checkbox_option_hover_color, default: 'rgb(245, 245, 245)'
|
|
86
|
+
option :content_label_font_size, default: 1.rem
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Here is a customized version of consuming the `multi_checkbox_dropdown` Glimmer Web Component:
|
|
27
90
|
|
|
28
91
|
```ruby
|
|
29
92
|
...
|
|
@@ -32,12 +95,13 @@ Then use the `multi_checkbox_dropdown` Glimmer Web Component in standard Glimmer
|
|
|
32
95
|
...
|
|
33
96
|
multi_checkbox_dropdown(
|
|
34
97
|
values: SomePresenter::STATUS_FILTER_TYPES,
|
|
35
|
-
display_values: SomePresenter::STATUS_FILTER_TYPES.map
|
|
98
|
+
display_values: SomePresenter::STATUS_FILTER_TYPES.map(&:capitalize),
|
|
36
99
|
locale: I18n.locale,
|
|
37
100
|
width: 190,
|
|
38
101
|
translations: {
|
|
39
|
-
en: {select:
|
|
40
|
-
|
|
102
|
+
en: {select: 'Filter by Status',
|
|
103
|
+
fr: {select: 'Filtrer par statut'},
|
|
104
|
+
es: {select: 'Filtrar por estado'},
|
|
41
105
|
},
|
|
42
106
|
) {
|
|
43
107
|
selected_values <=> [@some_presenter, :status_filters]
|
|
@@ -84,7 +148,7 @@ These features have been suggested. You might see them in a future version of Gl
|
|
|
84
148
|
|
|
85
149
|
[MIT](https://opensource.org/licenses/MIT)
|
|
86
150
|
|
|
87
|
-
Copyright (c) 2025 - Andy Maleh.
|
|
151
|
+
Copyright (c) 2025-2026 - Andy Maleh.
|
|
88
152
|
See [LICENSE.txt](LICENSE.txt) for further details.
|
|
89
153
|
|
|
90
154
|
--
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.1.
|
|
1
|
+
0.1.2
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
# DO NOT EDIT THIS FILE DIRECTLY
|
|
3
3
|
# Instead, edit Juwelier::Tasks in Rakefile, and run 'rake gemspec'
|
|
4
4
|
# -*- encoding: utf-8 -*-
|
|
5
|
-
# stub: glimmer-web-components 0.1.
|
|
5
|
+
# stub: glimmer-web-components 0.1.2 ruby lib
|
|
6
6
|
|
|
7
7
|
Gem::Specification.new do |s|
|
|
8
8
|
s.name = "glimmer-web-components".freeze
|
|
9
|
-
s.version = "0.1.
|
|
9
|
+
s.version = "0.1.2"
|
|
10
10
|
|
|
11
11
|
s.required_rubygems_version = Gem::Requirement.new(">= 0".freeze) if s.respond_to? :required_rubygems_version=
|
|
12
12
|
s.require_paths = ["lib".freeze]
|
|
13
13
|
s.authors = ["Andy Maleh".freeze]
|
|
14
|
-
s.date = "
|
|
14
|
+
s.date = "2026-04-13"
|
|
15
15
|
s.description = "This is a collection of reusable Glimmer Web Components for Glimmer DSL for Web, extracted from real Rails web applications.".freeze
|
|
16
16
|
s.email = "andy.am@gmail.com".freeze
|
|
17
17
|
s.extra_rdoc_files = [
|
|
@@ -49,7 +49,7 @@ module Glimmer
|
|
|
49
49
|
option :selected_values_formatter, default: SELECTED_VALUES_FORMATTER_DEFAULT
|
|
50
50
|
option :width, default: 175
|
|
51
51
|
option :height, default: 40
|
|
52
|
-
option :margin, default:
|
|
52
|
+
option :margin, default: 0
|
|
53
53
|
option :text_align, default: :center
|
|
54
54
|
option :content_z_index, default: '1000'
|
|
55
55
|
option :content_label_padding_px, default: 10
|
|
@@ -149,7 +149,7 @@ module Glimmer
|
|
|
149
149
|
end
|
|
150
150
|
|
|
151
151
|
def multi_checkbox_content
|
|
152
|
-
@multi_checkbox_content = div(style: {position: :absolute, z_index: content_z_index, width:, background: content_background, box_shadow: '0 6px 12px rgba(0, 0, 0, 0.175)'}) {
|
|
152
|
+
@multi_checkbox_content = div(style: {position: :absolute, top: height, left: 0, z_index: content_z_index, width:, background: content_background, box_shadow: '0 6px 12px rgba(0, 0, 0, 0.175)'}) {
|
|
153
153
|
class_name(CSS_CLASS_CONTENT_HIDDEN) <= [self, :display_content, on_read: :!]
|
|
154
154
|
|
|
155
155
|
content(self, :selected_values) { # re-renders automatically upon change to self.selected_values
|
|
@@ -213,7 +213,7 @@ module Glimmer
|
|
|
213
213
|
is_value_selected = selected_values.include?(value)
|
|
214
214
|
li_class = is_value_selected ? :selected : ''
|
|
215
215
|
|
|
216
|
-
li(class: li_class) {
|
|
216
|
+
li(class: li_class, style: {clear: 'both'}) {
|
|
217
217
|
input_id = "#{MultiCheckboxDropdown.component_element_class}-#{object_id}-input-#{value}"
|
|
218
218
|
|
|
219
219
|
input(type: 'checkbox', id: input_id, value: is_value_selected,
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: glimmer-web-components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Andy Maleh
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2026-04-13 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: glimmer-dsl-web
|