vident-typed-view_component 0.3.0 → 0.13.0
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 +215 -0
- data/LICENSE.txt +21 -0
- data/README.md +499 -12
- data/lib/vident/typed/view_component/version.rb +1 -1
- data/lib/vident/typed/view_component.rb +4 -1
- metadata +38 -34
- data/Rakefile +0 -8
- data/config/routes.rb +0 -2
- data/lib/tasks/vident/typed/view_component_tasks.rake +0 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 139cc310d5d105593947a55e6ba52732b656c5a6f1fe03be612bb65e40f5033d
|
4
|
+
data.tar.gz: 3f9a0bc6d086e5299d97c9588346bebd6b511c9b7a721866bea8bc331db4f912
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 27a908fdc75a9af1c170860da5199ee9ead2c4956a2ee20710d248689c737c45ccf84383497fef15701a422a0e5da2f9a257827da232c33d0d2debbceafe41aa
|
7
|
+
data.tar.gz: f834c78991310fcb47ab5f872ef7c4245d7a11acef413215115058526d219011d0a8d6ae7afb690ab3c43540bd6a4493499ec5df7da76260d385211f7be44103
|
data/CHANGELOG.md
ADDED
@@ -0,0 +1,215 @@
|
|
1
|
+
|
2
|
+
# Change Log
|
3
|
+
All notable changes to this project will be documented in this file.
|
4
|
+
|
5
|
+
The format is based on [Keep a Changelog](http://keepachangelog.com/)
|
6
|
+
and this project adheres to [Semantic Versioning](http://semver.org/).
|
7
|
+
|
8
|
+
|
9
|
+
## [Unreleased]
|
10
|
+
|
11
|
+
### Added
|
12
|
+
|
13
|
+
- New monorepo structure for the Vident project, retaining the separate gems however.
|
14
|
+
- All gems now have the same version and are released together.
|
15
|
+
|
16
|
+
### Changed
|
17
|
+
|
18
|
+
### Fixed
|
19
|
+
|
20
|
+
## [0.12.1] - 2024-06-12
|
21
|
+
|
22
|
+
### Fixed
|
23
|
+
|
24
|
+
- parsing of targets where the controller is also specified
|
25
|
+
|
26
|
+
## [0.12.0] - 2024-02-25
|
27
|
+
|
28
|
+
### Added
|
29
|
+
|
30
|
+
- `outlet` DSL methods updated so that the selector is scoped to the component's root element by default. This
|
31
|
+
is probably the most common use case, and it's now the default.
|
32
|
+
- `with_outlets` DSL method added to generate the data-* attributes for the outlets and return as a fragment
|
33
|
+
of HTML
|
34
|
+
|
35
|
+
|
36
|
+
## [0.11.0] - 2024-02-21
|
37
|
+
|
38
|
+
### Added
|
39
|
+
|
40
|
+
- `outlet_host` DSL method to support components hooking themselves into a host component's outlets
|
41
|
+
|
42
|
+
|
43
|
+
|
44
|
+
## [0.10.1] - 2024-02-21
|
45
|
+
|
46
|
+
### Added
|
47
|
+
|
48
|
+
- `outlets` option now accepts either a string stimulus controller identifier, a component instance, or a tuple of
|
49
|
+
identifier and CSS selector for the outlet.
|
50
|
+
|
51
|
+
|
52
|
+
## [0.10.0] - 2024-02-21
|
53
|
+
|
54
|
+
### Added
|
55
|
+
|
56
|
+
- `outlets` option for components, used to specify Stimulus outlets
|
57
|
+
|
58
|
+
## [0.9.0] - 2023-08-11
|
59
|
+
|
60
|
+
### Added
|
61
|
+
|
62
|
+
- `#cache_key` support is now part of the core gem, and can be added to components using `Vident::Caching` module
|
63
|
+
|
64
|
+
## [0.8.0] - 2023-03-31
|
65
|
+
|
66
|
+
### Added
|
67
|
+
|
68
|
+
- new gems for Vident related functionality, eg `vident-typed` and `vident-tailwind`
|
69
|
+
- `vident` is now the core gem which can be used with any component system. Gems for Phlex and ViewComponent are available, `vident-phlex` and `vident-view_component`, and `vident-typed-phlex` and `vident-typed-view_component` are available with typed attributes support.
|
70
|
+
|
71
|
+
### Changed
|
72
|
+
|
73
|
+
- removed functionality for `better_html`, `dry-types`, `view_component`, and `phlex` from the core gem
|
74
|
+
- gem is now a Rails Engine and supports eager and autoloading
|
75
|
+
|
76
|
+
### Fixed
|
77
|
+
|
78
|
+
- Fix untyped attributes inheritance
|
79
|
+
|
80
|
+
## [0.7.0] - 2023-03-08
|
81
|
+
|
82
|
+
### Added
|
83
|
+
|
84
|
+
- new `Vident::Tailwind` module which uses [tailwind_merge](https://github.com/gjtorikian/tailwind_merge) to merge TailwindCSS classes
|
85
|
+
|
86
|
+
### Changed
|
87
|
+
|
88
|
+
- Removed a dependency on intenal constants from `phlex`
|
89
|
+
|
90
|
+
## [0.6.3] - 2023-03-03
|
91
|
+
|
92
|
+
### Fixed
|
93
|
+
|
94
|
+
- Fix for changes to HTML tag collection in Phlex
|
95
|
+
|
96
|
+
|
97
|
+
## [0.6.2] - 2023-02-23
|
98
|
+
|
99
|
+
### Fixed
|
100
|
+
|
101
|
+
- Element tag options are not set when no ID is provided
|
102
|
+
|
103
|
+
|
104
|
+
## [0.6.1] - 2023-02-20
|
105
|
+
|
106
|
+
### Fixed
|
107
|
+
|
108
|
+
- `better_html` support fix for aliased dsl methods
|
109
|
+
|
110
|
+
|
111
|
+
## [0.6.0] - 2023-02-20
|
112
|
+
|
113
|
+
### Added
|
114
|
+
|
115
|
+
- Experimental support for `better_html` in the root components (the stimulus attributes are generated with `html_attributes`)
|
116
|
+
|
117
|
+
|
118
|
+
|
119
|
+
## [0.5.1] - 2023-02-17
|
120
|
+
|
121
|
+
### Added
|
122
|
+
|
123
|
+
- N/A
|
124
|
+
|
125
|
+
### Changed
|
126
|
+
|
127
|
+
- N/A
|
128
|
+
|
129
|
+
### Fixed
|
130
|
+
|
131
|
+
- Typed attributes was not always using custom coercion methods if they were defined
|
132
|
+
|
133
|
+
### Removed
|
134
|
+
|
135
|
+
- N/A
|
136
|
+
|
137
|
+
### Deprecated
|
138
|
+
|
139
|
+
- N/A
|
140
|
+
|
141
|
+
### Security
|
142
|
+
|
143
|
+
- N/A
|
144
|
+
|
145
|
+
---
|
146
|
+
|
147
|
+
# Package Changelogs
|
148
|
+
|
149
|
+
## vident-better_html
|
150
|
+
|
151
|
+
### [0.6.0] - 2023-02-20
|
152
|
+
|
153
|
+
#### Added
|
154
|
+
|
155
|
+
- Experimental support for `better_html` in the root components (the stimulus attributes are generated with `html_attributes`)
|
156
|
+
|
157
|
+
### [0.6.1] - 2023-02-20
|
158
|
+
|
159
|
+
#### Fixed
|
160
|
+
|
161
|
+
- `better_html` support fix for aliased dsl methods
|
162
|
+
|
163
|
+
## vident-tailwind
|
164
|
+
|
165
|
+
### [0.1.1] - 2023-04-02
|
166
|
+
|
167
|
+
#### Fixed
|
168
|
+
|
169
|
+
- `tailwind_merge` should only take a non-nil value, and since it uses the class string as a cache key, it should not be blank.
|
170
|
+
|
171
|
+
## vident-typed-view_component
|
172
|
+
|
173
|
+
### [0.3.0] - 2023-08-12
|
174
|
+
|
175
|
+
- Update to depend on `vident-view_component` v0.3.0
|
176
|
+
- Adds support for new `Vident::Caching` module
|
177
|
+
- Update examples to support view_component v3
|
178
|
+
|
179
|
+
### [0.1.0] - 2023-04-01
|
180
|
+
|
181
|
+
- Initial release, extracted from `vident`
|
182
|
+
|
183
|
+
## vident-view_component
|
184
|
+
|
185
|
+
### [0.3.0] - 2023-08-12
|
186
|
+
|
187
|
+
- Update to depend on `vident` v0.9.0
|
188
|
+
- Adds support for new `Vident::Caching` module
|
189
|
+
- Update examples to support view_component v3
|
190
|
+
|
191
|
+
### [0.1.0] - 2023-04-01
|
192
|
+
|
193
|
+
- Initial release, extracted from `vident`
|
194
|
+
|
195
|
+
## vident-phlex
|
196
|
+
|
197
|
+
### [0.3.0] - 2023-08-12
|
198
|
+
|
199
|
+
- Update to depend on `vident` v0.9.0
|
200
|
+
- Adds support for new `Vident::Caching` module
|
201
|
+
|
202
|
+
### [0.1.0] - 2023-04-01
|
203
|
+
|
204
|
+
- Initial release, extracted from `vident`
|
205
|
+
|
206
|
+
## vident-typed-phlex
|
207
|
+
|
208
|
+
### [0.3.0] - 2023-08-12
|
209
|
+
|
210
|
+
- Update to depend on `vident-typed` v0.3.0
|
211
|
+
- Adds support for new `Vident::Caching` module
|
212
|
+
|
213
|
+
### [0.1.0] - 2023-04-01
|
214
|
+
|
215
|
+
- Initial release, extracted from `vident`
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2022-2025 Stephen Ierodiaconou
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
CHANGED
@@ -1,3 +1,273 @@
|
|
1
|
+
# Vident
|
2
|
+
|
3
|
+
Vident is a collection of gems that provide a set of tools for building web applications with Ruby on Rails.
|
4
|
+
|
5
|
+
## Included Gems
|
6
|
+
|
7
|
+
- `vident`: The core Vident library
|
8
|
+
- `vident-better_html`: Better HTML integration for Vident
|
9
|
+
- `vident-phlex`: Phlex integration for Vident
|
10
|
+
- `vident-tailwind`: Tailwind CSS integration for Vident
|
11
|
+
- `vident-typed`: Type system for Vident components
|
12
|
+
- `vident-typed-minitest`: Minitest integration for typed Vident components
|
13
|
+
- `vident-typed-phlex`: Phlex integration for typed Vident components
|
14
|
+
- `vident-typed-view_component`: ViewComponent integration for typed Vident
|
15
|
+
- `vident-view_component`: ViewComponent integration for Vident
|
16
|
+
- `vident-view_component-caching`: Caching support for Vident ViewComponents
|
17
|
+
|
18
|
+
## Directory Structure
|
19
|
+
|
20
|
+
The repository is structured like this:
|
21
|
+
|
22
|
+
```
|
23
|
+
vident/
|
24
|
+
├── lib/ # All gem code
|
25
|
+
│ ├── vident.rb # Core entry point
|
26
|
+
│ ├── vident-phlex.rb # Gem entry points
|
27
|
+
│ ├── vident-better_html.rb
|
28
|
+
│ ├── vident/ # Shared code
|
29
|
+
│ ├── base.rb
|
30
|
+
│ ├── phlex/ # Phlex integration
|
31
|
+
│ ├── better_html/ # Better HTML integration
|
32
|
+
│ └── ...
|
33
|
+
├── test/ # All tests
|
34
|
+
│ ├── vident/ # Core tests
|
35
|
+
│ ├── vident-phlex/ # Tests for each gem
|
36
|
+
│ └── ...
|
37
|
+
├── docs/ # Documentation
|
38
|
+
├── examples/ # Examples
|
39
|
+
├── vident.gemspec # Gemspec for core gem
|
40
|
+
├── vident-phlex.gemspec # Gemspecs for each gem
|
41
|
+
└── ...
|
42
|
+
```
|
43
|
+
|
44
|
+
## Development
|
45
|
+
|
46
|
+
### Setting Up Development Environment
|
47
|
+
|
48
|
+
```bash
|
49
|
+
# Clone the repository
|
50
|
+
git clone https://github.com/stevegeek/vident.git
|
51
|
+
cd vident
|
52
|
+
|
53
|
+
# Install dependencies
|
54
|
+
bundle install
|
55
|
+
```
|
56
|
+
|
57
|
+
### Running Tests
|
58
|
+
|
59
|
+
To run tests for all gems:
|
60
|
+
|
61
|
+
```bash
|
62
|
+
rake test
|
63
|
+
```
|
64
|
+
|
65
|
+
To run tests for a specific gem:
|
66
|
+
|
67
|
+
```bash
|
68
|
+
rake test:vident-phlex
|
69
|
+
```
|
70
|
+
|
71
|
+
### Building and Installing Gems
|
72
|
+
|
73
|
+
To build all gems:
|
74
|
+
|
75
|
+
```bash
|
76
|
+
rake build
|
77
|
+
```
|
78
|
+
|
79
|
+
To install all gems locally:
|
80
|
+
|
81
|
+
```bash
|
82
|
+
rake install
|
83
|
+
```
|
84
|
+
|
85
|
+
## Contributing
|
86
|
+
|
87
|
+
1. Fork the repository
|
88
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
89
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
90
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
91
|
+
5. Create a new Pull Request
|
92
|
+
|
93
|
+
## License
|
94
|
+
|
95
|
+
The gems are available as open source under the terms of the [MIT License](LICENSE.txt).
|
96
|
+
|
97
|
+
---
|
98
|
+
|
99
|
+
# Component Documentation
|
100
|
+
|
101
|
+
## gem: vident-better_html
|
102
|
+
|
103
|
+
# Vident::BetterHtml
|
104
|
+
Short description and motivation.
|
105
|
+
|
106
|
+
### Usage
|
107
|
+
How to use my plugin.
|
108
|
+
|
109
|
+
```ruby
|
110
|
+
BetterHtml.config = BetterHtml::Config.new(YAML.load(File.read(".better-html.yml")))
|
111
|
+
|
112
|
+
BetterHtml.configure do |config|
|
113
|
+
config.template_exclusion_filter = proc { |filename| !filename.start_with?(Rails.root.to_s) }
|
114
|
+
end
|
115
|
+
# ViewComponent needs to do this hack to work in certain cases
|
116
|
+
# see https://github.com/Shopify/better-html/pull/98
|
117
|
+
class BetterHtml::HtmlAttributes
|
118
|
+
alias_method :to_s_without_html_safe, :to_s
|
119
|
+
|
120
|
+
def to_s
|
121
|
+
to_s_without_html_safe.html_safe
|
122
|
+
end
|
123
|
+
end
|
124
|
+
```
|
125
|
+
|
126
|
+
### Installation
|
127
|
+
Add this line to your application's Gemfile:
|
128
|
+
|
129
|
+
```ruby
|
130
|
+
gem "vident-better_html"
|
131
|
+
```
|
132
|
+
|
133
|
+
And then execute:
|
134
|
+
```bash
|
135
|
+
$ bundle
|
136
|
+
```
|
137
|
+
|
138
|
+
Or install it yourself as:
|
139
|
+
```bash
|
140
|
+
$ gem install vident-better_html
|
141
|
+
```
|
142
|
+
|
143
|
+
---
|
144
|
+
|
145
|
+
## gem: vident-phlex
|
146
|
+
|
147
|
+
# Vident::Phlex
|
148
|
+
|
149
|
+
[Phlex](https://phlex.fun/) powered [Vident](https://github.com/stevegeek/vident) components.
|
150
|
+
|
151
|
+
```ruby
|
152
|
+
class ApplicationComponent < ::Vident::Phlex::HTML
|
153
|
+
end
|
154
|
+
```
|
155
|
+
|
156
|
+
For more details see [vident](https://github.com/stevegeek/vident).
|
157
|
+
|
158
|
+
### Usage
|
159
|
+
How to use my plugin.
|
160
|
+
|
161
|
+
### Installation
|
162
|
+
Add this line to your application's Gemfile:
|
163
|
+
|
164
|
+
```ruby
|
165
|
+
gem "vident-phlex"
|
166
|
+
```
|
167
|
+
|
168
|
+
And then execute:
|
169
|
+
```bash
|
170
|
+
$ bundle
|
171
|
+
```
|
172
|
+
|
173
|
+
Or install it yourself as:
|
174
|
+
```bash
|
175
|
+
$ gem install vident-phlex
|
176
|
+
```
|
177
|
+
|
178
|
+
---
|
179
|
+
|
180
|
+
## gem: vident-tailwind
|
181
|
+
|
182
|
+
# Vident::Tailwind
|
183
|
+
Short description and motivation.
|
184
|
+
|
185
|
+
### Usage
|
186
|
+
How to use my plugin.
|
187
|
+
|
188
|
+
### Installation
|
189
|
+
Add this line to your application's Gemfile:
|
190
|
+
|
191
|
+
```ruby
|
192
|
+
gem "vident-tailwind"
|
193
|
+
```
|
194
|
+
|
195
|
+
And then execute:
|
196
|
+
```bash
|
197
|
+
$ bundle
|
198
|
+
```
|
199
|
+
|
200
|
+
Or install it yourself as:
|
201
|
+
```bash
|
202
|
+
$ gem install vident-tailwind
|
203
|
+
```
|
204
|
+
|
205
|
+
---
|
206
|
+
|
207
|
+
## gem: vident-typed-minitest
|
208
|
+
|
209
|
+
# Vident::Typed::Minitest
|
210
|
+
Short description and motivation.
|
211
|
+
|
212
|
+
### Usage
|
213
|
+
How to use my plugin.
|
214
|
+
|
215
|
+
### Installation
|
216
|
+
Add this line to your application's Gemfile:
|
217
|
+
|
218
|
+
```ruby
|
219
|
+
gem "vident-typed-minitest"
|
220
|
+
```
|
221
|
+
|
222
|
+
And then execute:
|
223
|
+
```bash
|
224
|
+
$ bundle
|
225
|
+
```
|
226
|
+
|
227
|
+
Or install it yourself as:
|
228
|
+
```bash
|
229
|
+
$ gem install vident-typed-minitest
|
230
|
+
```
|
231
|
+
|
232
|
+
---
|
233
|
+
|
234
|
+
## gem: vident-typed-phlex
|
235
|
+
|
236
|
+
# Vident::Typed::Phlex
|
237
|
+
|
238
|
+
Adds typed attributes to Vident Phlex based components.
|
239
|
+
|
240
|
+
```ruby
|
241
|
+
class ApplicationComponent < ::Vident::Typed::Phlex::HTML
|
242
|
+
end
|
243
|
+
```
|
244
|
+
|
245
|
+
For more details see [vident](https://github.com/stevegeek/vident).
|
246
|
+
|
247
|
+
### Usage
|
248
|
+
How to use my plugin.
|
249
|
+
|
250
|
+
### Installation
|
251
|
+
Add this line to your application's Gemfile:
|
252
|
+
|
253
|
+
```ruby
|
254
|
+
gem "vident-typed-phlex"
|
255
|
+
```
|
256
|
+
|
257
|
+
And then execute:
|
258
|
+
```bash
|
259
|
+
$ bundle
|
260
|
+
```
|
261
|
+
|
262
|
+
Or install it yourself as:
|
263
|
+
```bash
|
264
|
+
$ gem install vident-typed-phlex
|
265
|
+
```
|
266
|
+
|
267
|
+
---
|
268
|
+
|
269
|
+
## gem: vident-typed-view_component
|
270
|
+
|
1
271
|
# Vident::Typed::ViewComponent
|
2
272
|
|
3
273
|
Adds typed attributes to Vident ViewComponent components.
|
@@ -9,7 +279,7 @@ end
|
|
9
279
|
|
10
280
|
For more details see [vident](https://github.com/stevegeek/vident).
|
11
281
|
|
12
|
-
|
282
|
+
### Examples
|
13
283
|
|
14
284
|
Before we dive into a specific example note that there are some components implemented in `test/dummy/app/components`.
|
15
285
|
|
@@ -25,7 +295,7 @@ rails s
|
|
25
295
|
and visiting http://localhost:3000
|
26
296
|
|
27
297
|
|
28
|
-
|
298
|
+
### A Vident component example (without Stimulus)
|
29
299
|
|
30
300
|
First is an example component that uses `Vident::Typed::ViewComponent::Base` but no Stimulus features.
|
31
301
|
|
@@ -158,14 +428,14 @@ The following is rendered when used `render AvatarComponent.new(url: "https://i.
|
|
158
428
|

|
159
429
|
|
160
430
|
|
161
|
-
|
431
|
+
### Another ViewComponent + Vident example with Stimulus
|
162
432
|
|
163
433
|
Consider the following ERB that might be part of an application's views. The app uses `ViewComponent`, `Stimulus` and `Vident`.
|
164
434
|
|
165
435
|
The Greeter is a component that displays a text input and a button. When the button is clicked, the text input's value is
|
166
436
|
used to greet the user. At the same time the button changes to be a 'reset' button, which resets the greeting when clicked again.
|
167
437
|
|
168
|
-

|
169
439
|
|
170
440
|
```erb
|
171
441
|
<%# app/views/home/index.html.erb %>
|
@@ -241,7 +511,7 @@ end
|
|
241
511
|
<%# The stimulus controller name (identifier) is derived from the component name, and then used to generate the relavent data attribute names. %>
|
242
512
|
|
243
513
|
<%= render root named_classes: {
|
244
|
-
pre_click: "text-md text-gray-500", # named classes are exposed to Stimulus as `data-<controller>-<
|
514
|
+
pre_click: "text-md text-gray-500", # named classes are exposed to Stimulus as `data-<controller>-<n>-class` attributes
|
245
515
|
post_click: "text-xl text-blue-700",
|
246
516
|
html_options: {class: "py-2"}
|
247
517
|
} do |greeter| %>
|
@@ -351,11 +621,10 @@ export default class extends Controller {
|
|
351
621
|
|
352
622
|
```
|
353
623
|
|
354
|
-
|
355
|
-
## Usage
|
624
|
+
### Usage
|
356
625
|
How to use my plugin.
|
357
626
|
|
358
|
-
|
627
|
+
### Installation
|
359
628
|
Add this line to your application's Gemfile:
|
360
629
|
|
361
630
|
```ruby
|
@@ -372,8 +641,226 @@ Or install it yourself as:
|
|
372
641
|
$ gem install vident-typed-view_component
|
373
642
|
```
|
374
643
|
|
375
|
-
|
376
|
-
Contribution directions go here.
|
644
|
+
---
|
377
645
|
|
378
|
-
##
|
379
|
-
|
646
|
+
## gem: vident-typed
|
647
|
+
|
648
|
+
# Vident::Typed
|
649
|
+
Short description and motivation.
|
650
|
+
|
651
|
+
### Usage
|
652
|
+
How to use my plugin.
|
653
|
+
|
654
|
+
### Installation
|
655
|
+
Add this line to your application's Gemfile:
|
656
|
+
|
657
|
+
```ruby
|
658
|
+
gem "vident-typed"
|
659
|
+
```
|
660
|
+
|
661
|
+
And then execute:
|
662
|
+
```bash
|
663
|
+
$ bundle
|
664
|
+
```
|
665
|
+
|
666
|
+
Or install it yourself as:
|
667
|
+
```bash
|
668
|
+
$ gem install vident-typed
|
669
|
+
```
|
670
|
+
|
671
|
+
---
|
672
|
+
|
673
|
+
## gem: vident-view_component-caching
|
674
|
+
|
675
|
+
# Vident::ViewComponent::Caching
|
676
|
+
Short description and motivation.
|
677
|
+
|
678
|
+
### Usage
|
679
|
+
How to use my plugin.
|
680
|
+
|
681
|
+
### Installation
|
682
|
+
Add this line to your application's Gemfile:
|
683
|
+
|
684
|
+
```ruby
|
685
|
+
gem "vident-view_component-caching"
|
686
|
+
```
|
687
|
+
|
688
|
+
And then execute:
|
689
|
+
```bash
|
690
|
+
$ bundle
|
691
|
+
```
|
692
|
+
|
693
|
+
Or install it yourself as:
|
694
|
+
```bash
|
695
|
+
$ gem install vident-view_component-caching
|
696
|
+
```
|
697
|
+
|
698
|
+
---
|
699
|
+
|
700
|
+
## gem: vident-view_component
|
701
|
+
|
702
|
+
# Vident::ViewComponent
|
703
|
+
|
704
|
+
[ViewComponent](https://viewcomponent.org/) powered [Vident](https://github.com/stevegeek/vident) components.
|
705
|
+
|
706
|
+
```ruby
|
707
|
+
class ApplicationComponent < ::Vident::ViewComponent::Base
|
708
|
+
end
|
709
|
+
```
|
710
|
+
|
711
|
+
For more details see [vident](https://github.com/stevegeek/vident).
|
712
|
+
|
713
|
+
### Examples
|
714
|
+
|
715
|
+
Before we dive into a specific example note that there are some components implemented in the `test/dummy/app/components`.
|
716
|
+
|
717
|
+
Try them out by starting Rails:
|
718
|
+
|
719
|
+
```bash
|
720
|
+
cd test/dummy
|
721
|
+
bundle install
|
722
|
+
rails assets:precompile
|
723
|
+
rails s
|
724
|
+
```
|
725
|
+
|
726
|
+
and visiting http://localhost:3000
|
727
|
+
|
728
|
+
|
729
|
+
### A Vident component example (without Stimulus)
|
730
|
+
|
731
|
+
First is an example component that uses `Vident::ViewComponent::Base` but no Stimulus features.
|
732
|
+
|
733
|
+
It is an avatar component that can either be displayed as an image or as initials. It supports numerous sizes and shapes and can optionally have a border. It also generates a cache key for use in fragment caching or etag generation.
|
734
|
+
|
735
|
+
```ruby
|
736
|
+
class AvatarComponent < ::Vident::ViewComponent::Base
|
737
|
+
include ::Vident::Tailwind
|
738
|
+
include ::Vident::Caching
|
739
|
+
|
740
|
+
no_stimulus_controller
|
741
|
+
with_cache_key :attributes
|
742
|
+
|
743
|
+
attribute :url, allow_nil: true
|
744
|
+
attribute :initials, allow_nil: false
|
745
|
+
|
746
|
+
attribute :shape, default: :circle
|
747
|
+
|
748
|
+
attribute :border, default: false
|
749
|
+
|
750
|
+
attribute :size, default: :normal
|
751
|
+
|
752
|
+
private
|
753
|
+
|
754
|
+
def default_html_options
|
755
|
+
if image_avatar?
|
756
|
+
{ class: "inline-block object-contain", src: url, alt: t(".image") }
|
757
|
+
else
|
758
|
+
{ class: "inline-flex items-center justify-center bg-gray-500" }
|
759
|
+
end
|
760
|
+
end
|
761
|
+
|
762
|
+
def element_classes
|
763
|
+
[size_classes, shape_class, border? ? "border" : ""]
|
764
|
+
end
|
765
|
+
|
766
|
+
alias_method :image_avatar?, :url?
|
767
|
+
|
768
|
+
def shape_class
|
769
|
+
(shape == :circle) ? "rounded-full" : "rounded-md"
|
770
|
+
end
|
771
|
+
|
772
|
+
def size_classes
|
773
|
+
case size
|
774
|
+
when :tiny
|
775
|
+
"w-6 h-6"
|
776
|
+
when :small
|
777
|
+
"w-8 h-8"
|
778
|
+
when :medium
|
779
|
+
"w-12 h-12"
|
780
|
+
when :large
|
781
|
+
"w-14 h-14"
|
782
|
+
when :x_large
|
783
|
+
"sm:w-24 sm:h-24 w-16 h-16"
|
784
|
+
when :xx_large
|
785
|
+
"sm:w-32 sm:h-32 w-24 h-24"
|
786
|
+
else
|
787
|
+
"w-10 h-10"
|
788
|
+
end
|
789
|
+
end
|
790
|
+
|
791
|
+
def text_size_class
|
792
|
+
case size
|
793
|
+
when :tiny
|
794
|
+
"text-xs"
|
795
|
+
when :small
|
796
|
+
"text-xs"
|
797
|
+
when :medium
|
798
|
+
"text-lg"
|
799
|
+
when :large
|
800
|
+
"sm:text-xl text-lg"
|
801
|
+
when :extra_large
|
802
|
+
"sm:text-2xl text-xl"
|
803
|
+
else
|
804
|
+
"text-medium"
|
805
|
+
end
|
806
|
+
end
|
807
|
+
end
|
808
|
+
```
|
809
|
+
|
810
|
+
```erb
|
811
|
+
<%= render root(
|
812
|
+
element_tag: image_avatar? ? :img : :div,
|
813
|
+
html_options: default_html_options
|
814
|
+
) do %>
|
815
|
+
<% unless image_avatar? %>
|
816
|
+
<span class="<%= text_size_class %> font-medium leading-none text-white"><%= initials %></span>
|
817
|
+
<% end %>
|
818
|
+
<% end %>
|
819
|
+
```
|
820
|
+
|
821
|
+
Example usages:
|
822
|
+
|
823
|
+
```erb
|
824
|
+
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", initials: "AB" size: :large) %>
|
825
|
+
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", html_options: {alt: "My alt text", class: "object-scale-down"}) %>
|
826
|
+
<%= render AvatarComponent.new(initials: "SG", size: :small) %>
|
827
|
+
<%= render AvatarComponent.new(initials: "SG", size: :large, html_options: {class: "border-2 border-red-600"}) %>
|
828
|
+
```
|
829
|
+
|
830
|
+
The following is rendered when used `render AvatarComponent.new(initials: "SG", size: :small, border: true)`:
|
831
|
+
|
832
|
+
```html
|
833
|
+
<div class="avatar-component w-8 h-8 rounded-full border inline-flex items-center justify-center bg-gray-500" id="avatar-component-9790427-12">
|
834
|
+
<span class="text-xs font-medium leading-none text-white">SG</span>
|
835
|
+
</div>
|
836
|
+
```
|
837
|
+
|
838
|
+
The following is rendered when used `render AvatarComponent.new(url: "https://i.pravatar.cc/300", initials: "AB", html_options: {alt: "My alt text", class: "block"})`:
|
839
|
+
|
840
|
+
```html
|
841
|
+
<img src="https://i.pravatar.cc/300" alt="My alt text" class="avatar-component w-10 h-10 rounded-full object-contain block" id="avatar-component-7083941-11">
|
842
|
+
```
|
843
|
+
|
844
|
+
----
|
845
|
+
|
846
|
+

|
847
|
+
|
848
|
+
### Usage
|
849
|
+
How to use my plugin.
|
850
|
+
|
851
|
+
### Installation
|
852
|
+
Add this line to your application's Gemfile:
|
853
|
+
|
854
|
+
```ruby
|
855
|
+
gem "vident-view_component"
|
856
|
+
```
|
857
|
+
|
858
|
+
And then execute:
|
859
|
+
```bash
|
860
|
+
$ bundle
|
861
|
+
```
|
862
|
+
|
863
|
+
Or install it yourself as:
|
864
|
+
```bash
|
865
|
+
$ gem install vident-view_component
|
866
|
+
```
|
@@ -1,5 +1,8 @@
|
|
1
|
+
require "vident/typed"
|
2
|
+
require "vident/view_component"
|
1
3
|
require "vident/typed/view_component/version"
|
2
|
-
require "vident/typed/view_component/
|
4
|
+
require "vident/typed/view_component/base"
|
5
|
+
require "vident/typed/view_component/engine" if defined?(Rails)
|
3
6
|
|
4
7
|
module Vident
|
5
8
|
module Typed
|
metadata
CHANGED
@@ -1,75 +1,82 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: vident-typed-view_component
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.13.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Stephen Ierodiaconou
|
8
|
-
autorequire:
|
9
8
|
bindir: bin
|
10
9
|
cert_chain: []
|
11
|
-
date:
|
10
|
+
date: 2025-04-07 00:00:00.000000000 Z
|
12
11
|
dependencies:
|
13
12
|
- !ruby/object:Gem::Dependency
|
14
|
-
name:
|
13
|
+
name: railties
|
15
14
|
requirement: !ruby/object:Gem::Requirement
|
16
15
|
requirements:
|
17
16
|
- - ">="
|
18
17
|
- !ruby/object:Gem::Version
|
19
|
-
version: '7'
|
18
|
+
version: '7.2'
|
20
19
|
- - "<"
|
21
20
|
- !ruby/object:Gem::Version
|
22
|
-
version: '
|
21
|
+
version: '9'
|
23
22
|
type: :runtime
|
24
23
|
prerelease: false
|
25
24
|
version_requirements: !ruby/object:Gem::Requirement
|
26
25
|
requirements:
|
27
26
|
- - ">="
|
28
27
|
- !ruby/object:Gem::Version
|
29
|
-
version: '7'
|
28
|
+
version: '7.2'
|
30
29
|
- - "<"
|
31
30
|
- !ruby/object:Gem::Version
|
32
|
-
version: '
|
31
|
+
version: '9'
|
33
32
|
- !ruby/object:Gem::Dependency
|
34
|
-
name:
|
33
|
+
name: activesupport
|
35
34
|
requirement: !ruby/object:Gem::Requirement
|
36
35
|
requirements:
|
37
36
|
- - ">="
|
38
37
|
- !ruby/object:Gem::Version
|
39
|
-
version:
|
38
|
+
version: '7.2'
|
40
39
|
- - "<"
|
41
40
|
- !ruby/object:Gem::Version
|
42
|
-
version: '
|
41
|
+
version: '9'
|
43
42
|
type: :runtime
|
44
43
|
prerelease: false
|
45
44
|
version_requirements: !ruby/object:Gem::Requirement
|
46
45
|
requirements:
|
47
46
|
- - ">="
|
48
47
|
- !ruby/object:Gem::Version
|
49
|
-
version:
|
48
|
+
version: '7.2'
|
50
49
|
- - "<"
|
51
50
|
- !ruby/object:Gem::Version
|
52
|
-
version: '
|
51
|
+
version: '9'
|
53
52
|
- !ruby/object:Gem::Dependency
|
54
|
-
name: vident-
|
53
|
+
name: vident-typed
|
55
54
|
requirement: !ruby/object:Gem::Requirement
|
56
55
|
requirements:
|
57
|
-
- - "
|
56
|
+
- - "~>"
|
58
57
|
- !ruby/object:Gem::Version
|
59
|
-
version: 0.
|
60
|
-
- - "<"
|
61
|
-
- !ruby/object:Gem::Version
|
62
|
-
version: '1'
|
58
|
+
version: 0.13.0
|
63
59
|
type: :runtime
|
64
60
|
prerelease: false
|
65
61
|
version_requirements: !ruby/object:Gem::Requirement
|
66
62
|
requirements:
|
67
|
-
- - "
|
63
|
+
- - "~>"
|
68
64
|
- !ruby/object:Gem::Version
|
69
|
-
version: 0.
|
70
|
-
|
65
|
+
version: 0.13.0
|
66
|
+
- !ruby/object:Gem::Dependency
|
67
|
+
name: vident-view_component
|
68
|
+
requirement: !ruby/object:Gem::Requirement
|
69
|
+
requirements:
|
70
|
+
- - "~>"
|
71
71
|
- !ruby/object:Gem::Version
|
72
|
-
version:
|
72
|
+
version: 0.13.0
|
73
|
+
type: :runtime
|
74
|
+
prerelease: false
|
75
|
+
version_requirements: !ruby/object:Gem::Requirement
|
76
|
+
requirements:
|
77
|
+
- - "~>"
|
78
|
+
- !ruby/object:Gem::Version
|
79
|
+
version: 0.13.0
|
73
80
|
description: Vident with ViewComponent & typed attributes
|
74
81
|
email:
|
75
82
|
- stevegeek@gmail.com
|
@@ -77,22 +84,20 @@ executables: []
|
|
77
84
|
extensions: []
|
78
85
|
extra_rdoc_files: []
|
79
86
|
files:
|
87
|
+
- CHANGELOG.md
|
88
|
+
- LICENSE.txt
|
80
89
|
- README.md
|
81
|
-
- Rakefile
|
82
|
-
- config/routes.rb
|
83
|
-
- lib/tasks/vident/typed/view_component_tasks.rake
|
84
90
|
- lib/vident/typed/view_component.rb
|
85
91
|
- lib/vident/typed/view_component/base.rb
|
86
92
|
- lib/vident/typed/view_component/engine.rb
|
87
93
|
- lib/vident/typed/view_component/version.rb
|
88
|
-
homepage: https://github.com/stevegeek/vident
|
94
|
+
homepage: https://github.com/stevegeek/vident
|
89
95
|
licenses:
|
90
96
|
- MIT
|
91
97
|
metadata:
|
92
|
-
homepage_uri: https://github.com/stevegeek/vident
|
93
|
-
source_code_uri: https://github.com/stevegeek/vident
|
94
|
-
changelog_uri: https://github.com/stevegeek/vident
|
95
|
-
post_install_message:
|
98
|
+
homepage_uri: https://github.com/stevegeek/vident
|
99
|
+
source_code_uri: https://github.com/stevegeek/vident
|
100
|
+
changelog_uri: https://github.com/stevegeek/vident/blob/main/CHANGELOG.md
|
96
101
|
rdoc_options: []
|
97
102
|
require_paths:
|
98
103
|
- lib
|
@@ -100,15 +105,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
100
105
|
requirements:
|
101
106
|
- - ">="
|
102
107
|
- !ruby/object:Gem::Version
|
103
|
-
version:
|
108
|
+
version: 3.1.0
|
104
109
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
105
110
|
requirements:
|
106
111
|
- - ">="
|
107
112
|
- !ruby/object:Gem::Version
|
108
113
|
version: '0'
|
109
114
|
requirements: []
|
110
|
-
rubygems_version: 3.
|
111
|
-
signing_key:
|
115
|
+
rubygems_version: 3.6.2
|
112
116
|
specification_version: 4
|
113
117
|
summary: Vident with ViewComponent & typed attributes
|
114
118
|
test_files: []
|
data/Rakefile
DELETED
data/config/routes.rb
DELETED