vident-typed-view_component 0.3.0 → 0.13.1
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 +221 -0
- data/LICENSE.txt +21 -0
- data/README.md +484 -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: 8a835741cc2852e9b14cf601c58962bceeca925a578b0eeda47bfbc233dac0dd
|
4
|
+
data.tar.gz: c50db627539ac521c5c5713cd7421bcebec16631e71a792e29e02c7c9ae04ef8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e07e4871c958d485fe7617bd84b763c09d924889862138166e0fb33f0dbcd17a1474e7f09c85705a938fbb39bfe755e89615d0ee896d7e4d01ea6ca8add96259
|
7
|
+
data.tar.gz: 22be56576e222155327efb2e2392997a779d3a758d329e4de262cc9637eb8726c60a3dda7af8b572e0f76409049a383c80eb7f11c1b0f413b706a4a1a9fcd713
|
data/CHANGELOG.md
ADDED
@@ -0,0 +1,221 @@
|
|
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
|
+
## [0.13.0] - 2024-04-07
|
10
|
+
|
11
|
+
### Breaking
|
12
|
+
|
13
|
+
- `data_maps` has been renamed to `values` and support has been added for the Stimulus 2+ Values API.
|
14
|
+
- `root`/`parent_element` no longer takes options, to define attributes for it, you can use `root_element_attributes` or the view component helper `root_component_attributes`. This change means
|
15
|
+
that root elements can be instantiated outside of `render` which is useful if you refer to the instance in the components body block
|
16
|
+
|
17
|
+
### Added
|
18
|
+
|
19
|
+
- New monorepo structure for the Vident project, retaining the separate gems however.
|
20
|
+
- All gems now have the same version and are released together.
|
21
|
+
|
22
|
+
### Changed
|
23
|
+
|
24
|
+
### Fixed
|
25
|
+
|
26
|
+
## [0.12.1] - 2024-06-12
|
27
|
+
|
28
|
+
### Fixed
|
29
|
+
|
30
|
+
- parsing of targets where the controller is also specified
|
31
|
+
|
32
|
+
## [0.12.0] - 2024-02-25
|
33
|
+
|
34
|
+
### Added
|
35
|
+
|
36
|
+
- `outlet` DSL methods updated so that the selector is scoped to the component's root element by default. This
|
37
|
+
is probably the most common use case, and it's now the default.
|
38
|
+
- `with_outlets` DSL method added to generate the data-* attributes for the outlets and return as a fragment
|
39
|
+
of HTML
|
40
|
+
|
41
|
+
|
42
|
+
## [0.11.0] - 2024-02-21
|
43
|
+
|
44
|
+
### Added
|
45
|
+
|
46
|
+
- `outlet_host` DSL method to support components hooking themselves into a host component's outlets
|
47
|
+
|
48
|
+
|
49
|
+
|
50
|
+
## [0.10.1] - 2024-02-21
|
51
|
+
|
52
|
+
### Added
|
53
|
+
|
54
|
+
- `outlets` option now accepts either a string stimulus controller identifier, a component instance, or a tuple of
|
55
|
+
identifier and CSS selector for the outlet.
|
56
|
+
|
57
|
+
|
58
|
+
## [0.10.0] - 2024-02-21
|
59
|
+
|
60
|
+
### Added
|
61
|
+
|
62
|
+
- `outlets` option for components, used to specify Stimulus outlets
|
63
|
+
|
64
|
+
## [0.9.0] - 2023-08-11
|
65
|
+
|
66
|
+
### Added
|
67
|
+
|
68
|
+
- `#cache_key` support is now part of the core gem, and can be added to components using `Vident::Caching` module
|
69
|
+
|
70
|
+
## [0.8.0] - 2023-03-31
|
71
|
+
|
72
|
+
### Added
|
73
|
+
|
74
|
+
- new gems for Vident related functionality, eg `vident-typed` and `vident-tailwind`
|
75
|
+
- `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.
|
76
|
+
|
77
|
+
### Changed
|
78
|
+
|
79
|
+
- removed functionality for `better_html`, `dry-types`, `view_component`, and `phlex` from the core gem
|
80
|
+
- gem is now a Rails Engine and supports eager and autoloading
|
81
|
+
|
82
|
+
### Fixed
|
83
|
+
|
84
|
+
- Fix untyped attributes inheritance
|
85
|
+
|
86
|
+
## [0.7.0] - 2023-03-08
|
87
|
+
|
88
|
+
### Added
|
89
|
+
|
90
|
+
- new `Vident::Tailwind` module which uses [tailwind_merge](https://github.com/gjtorikian/tailwind_merge) to merge TailwindCSS classes
|
91
|
+
|
92
|
+
### Changed
|
93
|
+
|
94
|
+
- Removed a dependency on intenal constants from `phlex`
|
95
|
+
|
96
|
+
## [0.6.3] - 2023-03-03
|
97
|
+
|
98
|
+
### Fixed
|
99
|
+
|
100
|
+
- Fix for changes to HTML tag collection in Phlex
|
101
|
+
|
102
|
+
|
103
|
+
## [0.6.2] - 2023-02-23
|
104
|
+
|
105
|
+
### Fixed
|
106
|
+
|
107
|
+
- Element tag options are not set when no ID is provided
|
108
|
+
|
109
|
+
|
110
|
+
## [0.6.1] - 2023-02-20
|
111
|
+
|
112
|
+
### Fixed
|
113
|
+
|
114
|
+
- `better_html` support fix for aliased dsl methods
|
115
|
+
|
116
|
+
|
117
|
+
## [0.6.0] - 2023-02-20
|
118
|
+
|
119
|
+
### Added
|
120
|
+
|
121
|
+
- Experimental support for `better_html` in the root components (the stimulus attributes are generated with `html_attributes`)
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
## [0.5.1] - 2023-02-17
|
126
|
+
|
127
|
+
### Added
|
128
|
+
|
129
|
+
- N/A
|
130
|
+
|
131
|
+
### Changed
|
132
|
+
|
133
|
+
- N/A
|
134
|
+
|
135
|
+
### Fixed
|
136
|
+
|
137
|
+
- Typed attributes was not always using custom coercion methods if they were defined
|
138
|
+
|
139
|
+
### Removed
|
140
|
+
|
141
|
+
- N/A
|
142
|
+
|
143
|
+
### Deprecated
|
144
|
+
|
145
|
+
- N/A
|
146
|
+
|
147
|
+
### Security
|
148
|
+
|
149
|
+
- N/A
|
150
|
+
|
151
|
+
---
|
152
|
+
|
153
|
+
# Package Changelogs
|
154
|
+
|
155
|
+
## vident-better_html
|
156
|
+
|
157
|
+
### [0.6.0] - 2023-02-20
|
158
|
+
|
159
|
+
#### Added
|
160
|
+
|
161
|
+
- Experimental support for `better_html` in the root components (the stimulus attributes are generated with `html_attributes`)
|
162
|
+
|
163
|
+
### [0.6.1] - 2023-02-20
|
164
|
+
|
165
|
+
#### Fixed
|
166
|
+
|
167
|
+
- `better_html` support fix for aliased dsl methods
|
168
|
+
|
169
|
+
## vident-tailwind
|
170
|
+
|
171
|
+
### [0.1.1] - 2023-04-02
|
172
|
+
|
173
|
+
#### Fixed
|
174
|
+
|
175
|
+
- `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.
|
176
|
+
|
177
|
+
## vident-typed-view_component
|
178
|
+
|
179
|
+
### [0.3.0] - 2023-08-12
|
180
|
+
|
181
|
+
- Update to depend on `vident-view_component` v0.3.0
|
182
|
+
- Adds support for new `Vident::Caching` module
|
183
|
+
- Update examples to support view_component v3
|
184
|
+
|
185
|
+
### [0.1.0] - 2023-04-01
|
186
|
+
|
187
|
+
- Initial release, extracted from `vident`
|
188
|
+
|
189
|
+
## vident-view_component
|
190
|
+
|
191
|
+
### [0.3.0] - 2023-08-12
|
192
|
+
|
193
|
+
- Update to depend on `vident` v0.9.0
|
194
|
+
- Adds support for new `Vident::Caching` module
|
195
|
+
- Update examples to support view_component v3
|
196
|
+
|
197
|
+
### [0.1.0] - 2023-04-01
|
198
|
+
|
199
|
+
- Initial release, extracted from `vident`
|
200
|
+
|
201
|
+
## vident-phlex
|
202
|
+
|
203
|
+
### [0.3.0] - 2023-08-12
|
204
|
+
|
205
|
+
- Update to depend on `vident` v0.9.0
|
206
|
+
- Adds support for new `Vident::Caching` module
|
207
|
+
|
208
|
+
### [0.1.0] - 2023-04-01
|
209
|
+
|
210
|
+
- Initial release, extracted from `vident`
|
211
|
+
|
212
|
+
## vident-typed-phlex
|
213
|
+
|
214
|
+
### [0.3.0] - 2023-08-12
|
215
|
+
|
216
|
+
- Update to depend on `vident-typed` v0.3.0
|
217
|
+
- Adds support for new `Vident::Caching` module
|
218
|
+
|
219
|
+
### [0.1.0] - 2023-04-01
|
220
|
+
|
221
|
+
- 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,113 @@
|
|
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
|
+
The core gems:
|
8
|
+
|
9
|
+
- `vident`: The core Vident library
|
10
|
+
- `vident-phlex`: Phlex integration for Vident
|
11
|
+
- `vident-view_component`: ViewComponent integration for Vident
|
12
|
+
|
13
|
+
Note that you can use both `Phlex` and `ViewComponent` in the same application if desired.
|
14
|
+
|
15
|
+
And then optional extra features:
|
16
|
+
|
17
|
+
- `vident-tailwind`: Tailwind CSS integration for Vident
|
18
|
+
- `vident-typed`: Type system for Vident components
|
19
|
+
- `vident-typed-minitest`: Minitest integration for typed Vident components
|
20
|
+
- `vident-typed-phlex`: Phlex integration for typed Vident components
|
21
|
+
- `vident-typed-view_component`: ViewComponent integration for typed Vident
|
22
|
+
- `vident-better_html`: Better HTML integration for Vident
|
23
|
+
|
24
|
+
## Directory Structure
|
25
|
+
|
26
|
+
The repository is structured like this:
|
27
|
+
|
28
|
+
```
|
29
|
+
vident/
|
30
|
+
├── lib/ # All gem code
|
31
|
+
│ ├── vident.rb # Core entry point
|
32
|
+
│ ├── vident-phlex.rb # Gem entry points
|
33
|
+
│ ├── vident-better_html.rb
|
34
|
+
│ ├── vident/ # Shared code
|
35
|
+
│ ├── base.rb
|
36
|
+
│ ├── phlex/ # Phlex integration
|
37
|
+
│ ├── better_html/ # Better HTML integration
|
38
|
+
│ └── ...
|
39
|
+
├── test/ # All tests
|
40
|
+
│ ├── vident/ # Core tests
|
41
|
+
│ ├── vident-phlex/ # Tests for each gem
|
42
|
+
│ └── ...
|
43
|
+
├── docs/ # Documentation
|
44
|
+
├── examples/ # Examples
|
45
|
+
├── vident.gemspec # Gemspec for core gem
|
46
|
+
├── vident-phlex.gemspec # Gemspecs for each gem
|
47
|
+
└── ...
|
48
|
+
```
|
49
|
+
|
50
|
+
## Development
|
51
|
+
|
52
|
+
### Setting Up Development Environment
|
53
|
+
|
54
|
+
```bash
|
55
|
+
# Clone the repository
|
56
|
+
git clone https://github.com/stevegeek/vident.git
|
57
|
+
cd vident
|
58
|
+
|
59
|
+
# Install dependencies
|
60
|
+
bundle install
|
61
|
+
```
|
62
|
+
|
63
|
+
### Running Tests
|
64
|
+
|
65
|
+
To run tests for all gems:
|
66
|
+
|
67
|
+
```bash
|
68
|
+
rake test
|
69
|
+
```
|
70
|
+
|
71
|
+
To run tests for a specific gem:
|
72
|
+
|
73
|
+
```bash
|
74
|
+
rake test:vident-phlex
|
75
|
+
```
|
76
|
+
|
77
|
+
### Building and Installing Gems
|
78
|
+
|
79
|
+
To build all gems:
|
80
|
+
|
81
|
+
```bash
|
82
|
+
rake build
|
83
|
+
```
|
84
|
+
|
85
|
+
To install all gems locally:
|
86
|
+
|
87
|
+
```bash
|
88
|
+
rake install
|
89
|
+
```
|
90
|
+
|
91
|
+
## Contributing
|
92
|
+
|
93
|
+
1. Fork the repository
|
94
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
95
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
96
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
97
|
+
5. Create a new Pull Request
|
98
|
+
|
99
|
+
## License
|
100
|
+
|
101
|
+
The gems are available as open source under the terms of the [MIT License](LICENSE.txt).
|
102
|
+
|
103
|
+
---
|
104
|
+
|
105
|
+
# Component Documentation
|
106
|
+
|
107
|
+
---
|
108
|
+
|
109
|
+
## gem: vident-typed-view_component
|
110
|
+
|
1
111
|
# Vident::Typed::ViewComponent
|
2
112
|
|
3
113
|
Adds typed attributes to Vident ViewComponent components.
|
@@ -9,7 +119,7 @@ end
|
|
9
119
|
|
10
120
|
For more details see [vident](https://github.com/stevegeek/vident).
|
11
121
|
|
12
|
-
|
122
|
+
### Examples
|
13
123
|
|
14
124
|
Before we dive into a specific example note that there are some components implemented in `test/dummy/app/components`.
|
15
125
|
|
@@ -25,7 +135,7 @@ rails s
|
|
25
135
|
and visiting http://localhost:3000
|
26
136
|
|
27
137
|
|
28
|
-
|
138
|
+
### A Vident component example (without Stimulus)
|
29
139
|
|
30
140
|
First is an example component that uses `Vident::Typed::ViewComponent::Base` but no Stimulus features.
|
31
141
|
|
@@ -158,14 +268,14 @@ The following is rendered when used `render AvatarComponent.new(url: "https://i.
|
|
158
268
|

|
159
269
|
|
160
270
|
|
161
|
-
|
271
|
+
### Another ViewComponent + Vident example with Stimulus
|
162
272
|
|
163
273
|
Consider the following ERB that might be part of an application's views. The app uses `ViewComponent`, `Stimulus` and `Vident`.
|
164
274
|
|
165
275
|
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
276
|
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
277
|
|
168
|
-

|
169
279
|
|
170
280
|
```erb
|
171
281
|
<%# app/views/home/index.html.erb %>
|
@@ -241,7 +351,7 @@ end
|
|
241
351
|
<%# The stimulus controller name (identifier) is derived from the component name, and then used to generate the relavent data attribute names. %>
|
242
352
|
|
243
353
|
<%= render root named_classes: {
|
244
|
-
pre_click: "text-md text-gray-500", # named classes are exposed to Stimulus as `data-<controller>-<
|
354
|
+
pre_click: "text-md text-gray-500", # named classes are exposed to Stimulus as `data-<controller>-<n>-class` attributes
|
245
355
|
post_click: "text-xl text-blue-700",
|
246
356
|
html_options: {class: "py-2"}
|
247
357
|
} do |greeter| %>
|
@@ -351,11 +461,10 @@ export default class extends Controller {
|
|
351
461
|
|
352
462
|
```
|
353
463
|
|
354
|
-
|
355
|
-
## Usage
|
464
|
+
### Usage
|
356
465
|
How to use my plugin.
|
357
466
|
|
358
|
-
|
467
|
+
### Installation
|
359
468
|
Add this line to your application's Gemfile:
|
360
469
|
|
361
470
|
```ruby
|
@@ -372,8 +481,371 @@ Or install it yourself as:
|
|
372
481
|
$ gem install vident-typed-view_component
|
373
482
|
```
|
374
483
|
|
375
|
-
|
376
|
-
Contribution directions go here.
|
484
|
+
---
|
377
485
|
|
378
|
-
|
379
|
-
|
486
|
+
|
487
|
+
## gem: vident-view_component
|
488
|
+
|
489
|
+
# Vident::ViewComponent
|
490
|
+
|
491
|
+
[ViewComponent](https://viewcomponent.org/) powered [Vident](https://github.com/stevegeek/vident) components.
|
492
|
+
|
493
|
+
```ruby
|
494
|
+
class ApplicationComponent < ::Vident::ViewComponent::Base
|
495
|
+
end
|
496
|
+
```
|
497
|
+
|
498
|
+
For more details see [vident](https://github.com/stevegeek/vident).
|
499
|
+
|
500
|
+
### Examples
|
501
|
+
|
502
|
+
Before we dive into a specific example note that there are some components implemented in the `test/dummy/app/components`.
|
503
|
+
|
504
|
+
Try them out by starting Rails:
|
505
|
+
|
506
|
+
```bash
|
507
|
+
cd test/dummy
|
508
|
+
bundle install
|
509
|
+
rails assets:precompile
|
510
|
+
rails s
|
511
|
+
```
|
512
|
+
|
513
|
+
and visiting http://localhost:3000
|
514
|
+
|
515
|
+
|
516
|
+
### A Vident component example (without Stimulus)
|
517
|
+
|
518
|
+
First is an example component that uses `Vident::ViewComponent::Base` but no Stimulus features.
|
519
|
+
|
520
|
+
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.
|
521
|
+
|
522
|
+
```ruby
|
523
|
+
class AvatarComponent < ::Vident::ViewComponent::Base
|
524
|
+
include ::Vident::Tailwind
|
525
|
+
include ::Vident::Caching
|
526
|
+
|
527
|
+
no_stimulus_controller
|
528
|
+
with_cache_key :attributes
|
529
|
+
|
530
|
+
attribute :url, allow_nil: true
|
531
|
+
attribute :initials, allow_nil: false
|
532
|
+
|
533
|
+
attribute :shape, default: :circle
|
534
|
+
|
535
|
+
attribute :border, default: false
|
536
|
+
|
537
|
+
attribute :size, default: :normal
|
538
|
+
|
539
|
+
private
|
540
|
+
|
541
|
+
def default_html_options
|
542
|
+
if image_avatar?
|
543
|
+
{ class: "inline-block object-contain", src: url, alt: t(".image") }
|
544
|
+
else
|
545
|
+
{ class: "inline-flex items-center justify-center bg-gray-500" }
|
546
|
+
end
|
547
|
+
end
|
548
|
+
|
549
|
+
def element_classes
|
550
|
+
[size_classes, shape_class, border? ? "border" : ""]
|
551
|
+
end
|
552
|
+
|
553
|
+
alias_method :image_avatar?, :url?
|
554
|
+
|
555
|
+
def shape_class
|
556
|
+
(shape == :circle) ? "rounded-full" : "rounded-md"
|
557
|
+
end
|
558
|
+
|
559
|
+
def size_classes
|
560
|
+
case size
|
561
|
+
when :tiny
|
562
|
+
"w-6 h-6"
|
563
|
+
when :small
|
564
|
+
"w-8 h-8"
|
565
|
+
when :medium
|
566
|
+
"w-12 h-12"
|
567
|
+
when :large
|
568
|
+
"w-14 h-14"
|
569
|
+
when :x_large
|
570
|
+
"sm:w-24 sm:h-24 w-16 h-16"
|
571
|
+
when :xx_large
|
572
|
+
"sm:w-32 sm:h-32 w-24 h-24"
|
573
|
+
else
|
574
|
+
"w-10 h-10"
|
575
|
+
end
|
576
|
+
end
|
577
|
+
|
578
|
+
def text_size_class
|
579
|
+
case size
|
580
|
+
when :tiny
|
581
|
+
"text-xs"
|
582
|
+
when :small
|
583
|
+
"text-xs"
|
584
|
+
when :medium
|
585
|
+
"text-lg"
|
586
|
+
when :large
|
587
|
+
"sm:text-xl text-lg"
|
588
|
+
when :extra_large
|
589
|
+
"sm:text-2xl text-xl"
|
590
|
+
else
|
591
|
+
"text-medium"
|
592
|
+
end
|
593
|
+
end
|
594
|
+
end
|
595
|
+
```
|
596
|
+
|
597
|
+
```erb
|
598
|
+
<%= render root(
|
599
|
+
element_tag: image_avatar? ? :img : :div,
|
600
|
+
html_options: default_html_options
|
601
|
+
) do %>
|
602
|
+
<% unless image_avatar? %>
|
603
|
+
<span class="<%= text_size_class %> font-medium leading-none text-white"><%= initials %></span>
|
604
|
+
<% end %>
|
605
|
+
<% end %>
|
606
|
+
```
|
607
|
+
|
608
|
+
Example usages:
|
609
|
+
|
610
|
+
```erb
|
611
|
+
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", initials: "AB" size: :large) %>
|
612
|
+
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", html_options: {alt: "My alt text", class: "object-scale-down"}) %>
|
613
|
+
<%= render AvatarComponent.new(initials: "SG", size: :small) %>
|
614
|
+
<%= render AvatarComponent.new(initials: "SG", size: :large, html_options: {class: "border-2 border-red-600"}) %>
|
615
|
+
```
|
616
|
+
|
617
|
+
The following is rendered when used `render AvatarComponent.new(initials: "SG", size: :small, border: true)`:
|
618
|
+
|
619
|
+
```html
|
620
|
+
<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">
|
621
|
+
<span class="text-xs font-medium leading-none text-white">SG</span>
|
622
|
+
</div>
|
623
|
+
```
|
624
|
+
|
625
|
+
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"})`:
|
626
|
+
|
627
|
+
```html
|
628
|
+
<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">
|
629
|
+
```
|
630
|
+
|
631
|
+
----
|
632
|
+
|
633
|
+

|
634
|
+
|
635
|
+
### Usage
|
636
|
+
How to use my plugin.
|
637
|
+
|
638
|
+
### Installation
|
639
|
+
Add this line to your application's Gemfile:
|
640
|
+
|
641
|
+
```ruby
|
642
|
+
gem "vident-view_component"
|
643
|
+
```
|
644
|
+
|
645
|
+
And then execute:
|
646
|
+
```bash
|
647
|
+
$ bundle
|
648
|
+
```
|
649
|
+
|
650
|
+
Or install it yourself as:
|
651
|
+
```bash
|
652
|
+
$ gem install vident-view_component
|
653
|
+
```
|
654
|
+
|
655
|
+
---
|
656
|
+
|
657
|
+
## gem: vident-better_html
|
658
|
+
|
659
|
+
# Vident::BetterHtml
|
660
|
+
Short description and motivation.
|
661
|
+
|
662
|
+
### Usage
|
663
|
+
How to use my plugin.
|
664
|
+
|
665
|
+
```ruby
|
666
|
+
BetterHtml.config = BetterHtml::Config.new(YAML.load(File.read(".better-html.yml")))
|
667
|
+
|
668
|
+
BetterHtml.configure do |config|
|
669
|
+
config.template_exclusion_filter = proc { |filename| !filename.start_with?(Rails.root.to_s) }
|
670
|
+
end
|
671
|
+
# ViewComponent needs to do this hack to work in certain cases
|
672
|
+
# see https://github.com/Shopify/better-html/pull/98
|
673
|
+
class BetterHtml::HtmlAttributes
|
674
|
+
alias_method :to_s_without_html_safe, :to_s
|
675
|
+
|
676
|
+
def to_s
|
677
|
+
to_s_without_html_safe.html_safe
|
678
|
+
end
|
679
|
+
end
|
680
|
+
```
|
681
|
+
|
682
|
+
### Installation
|
683
|
+
Add this line to your application's Gemfile:
|
684
|
+
|
685
|
+
```ruby
|
686
|
+
gem "vident-better_html"
|
687
|
+
```
|
688
|
+
|
689
|
+
And then execute:
|
690
|
+
```bash
|
691
|
+
$ bundle
|
692
|
+
```
|
693
|
+
|
694
|
+
Or install it yourself as:
|
695
|
+
```bash
|
696
|
+
$ gem install vident-better_html
|
697
|
+
```
|
698
|
+
|
699
|
+
---
|
700
|
+
|
701
|
+
## gem: vident-phlex
|
702
|
+
|
703
|
+
# Vident::Phlex
|
704
|
+
|
705
|
+
[Phlex](https://phlex.fun/) powered [Vident](https://github.com/stevegeek/vident) components.
|
706
|
+
|
707
|
+
```ruby
|
708
|
+
class ApplicationComponent < ::Vident::Phlex::HTML
|
709
|
+
end
|
710
|
+
```
|
711
|
+
|
712
|
+
For more details see [vident](https://github.com/stevegeek/vident).
|
713
|
+
|
714
|
+
### Usage
|
715
|
+
How to use my plugin.
|
716
|
+
|
717
|
+
### Installation
|
718
|
+
Add this line to your application's Gemfile:
|
719
|
+
|
720
|
+
```ruby
|
721
|
+
gem "vident-phlex"
|
722
|
+
```
|
723
|
+
|
724
|
+
And then execute:
|
725
|
+
```bash
|
726
|
+
$ bundle
|
727
|
+
```
|
728
|
+
|
729
|
+
Or install it yourself as:
|
730
|
+
```bash
|
731
|
+
$ gem install vident-phlex
|
732
|
+
```
|
733
|
+
|
734
|
+
---
|
735
|
+
|
736
|
+
## gem: vident-tailwind
|
737
|
+
|
738
|
+
# Vident::Tailwind
|
739
|
+
Short description and motivation.
|
740
|
+
|
741
|
+
### Usage
|
742
|
+
How to use my plugin.
|
743
|
+
|
744
|
+
### Installation
|
745
|
+
Add this line to your application's Gemfile:
|
746
|
+
|
747
|
+
```ruby
|
748
|
+
gem "vident-tailwind"
|
749
|
+
```
|
750
|
+
|
751
|
+
And then execute:
|
752
|
+
```bash
|
753
|
+
$ bundle
|
754
|
+
```
|
755
|
+
|
756
|
+
Or install it yourself as:
|
757
|
+
```bash
|
758
|
+
$ gem install vident-tailwind
|
759
|
+
```
|
760
|
+
|
761
|
+
---
|
762
|
+
|
763
|
+
## gem: vident-typed-minitest
|
764
|
+
|
765
|
+
# Vident::Typed::Minitest
|
766
|
+
Short description and motivation.
|
767
|
+
|
768
|
+
### Usage
|
769
|
+
How to use my plugin.
|
770
|
+
|
771
|
+
### Installation
|
772
|
+
Add this line to your application's Gemfile:
|
773
|
+
|
774
|
+
```ruby
|
775
|
+
gem "vident-typed-minitest"
|
776
|
+
```
|
777
|
+
|
778
|
+
And then execute:
|
779
|
+
```bash
|
780
|
+
$ bundle
|
781
|
+
```
|
782
|
+
|
783
|
+
Or install it yourself as:
|
784
|
+
```bash
|
785
|
+
$ gem install vident-typed-minitest
|
786
|
+
```
|
787
|
+
|
788
|
+
---
|
789
|
+
|
790
|
+
## gem: vident-typed-phlex
|
791
|
+
|
792
|
+
# Vident::Typed::Phlex
|
793
|
+
|
794
|
+
Adds typed attributes to Vident Phlex based components.
|
795
|
+
|
796
|
+
```ruby
|
797
|
+
class ApplicationComponent < ::Vident::Typed::Phlex::HTML
|
798
|
+
end
|
799
|
+
```
|
800
|
+
|
801
|
+
For more details see [vident](https://github.com/stevegeek/vident).
|
802
|
+
|
803
|
+
### Usage
|
804
|
+
How to use my plugin.
|
805
|
+
|
806
|
+
### Installation
|
807
|
+
Add this line to your application's Gemfile:
|
808
|
+
|
809
|
+
```ruby
|
810
|
+
gem "vident-typed-phlex"
|
811
|
+
```
|
812
|
+
|
813
|
+
And then execute:
|
814
|
+
```bash
|
815
|
+
$ bundle
|
816
|
+
```
|
817
|
+
|
818
|
+
Or install it yourself as:
|
819
|
+
```bash
|
820
|
+
$ gem install vident-typed-phlex
|
821
|
+
```
|
822
|
+
|
823
|
+
---
|
824
|
+
|
825
|
+
|
826
|
+
## gem: vident-typed
|
827
|
+
|
828
|
+
# Vident::Typed
|
829
|
+
Short description and motivation.
|
830
|
+
|
831
|
+
### Usage
|
832
|
+
How to use my plugin.
|
833
|
+
|
834
|
+
### Installation
|
835
|
+
Add this line to your application's Gemfile:
|
836
|
+
|
837
|
+
```ruby
|
838
|
+
gem "vident-typed"
|
839
|
+
```
|
840
|
+
|
841
|
+
And then execute:
|
842
|
+
```bash
|
843
|
+
$ bundle
|
844
|
+
```
|
845
|
+
|
846
|
+
Or install it yourself as:
|
847
|
+
```bash
|
848
|
+
$ gem install vident-typed
|
849
|
+
```
|
850
|
+
|
851
|
+
---
|
@@ -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.1
|
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-06-26 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.1
|
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.1
|
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.1
|
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.1
|
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