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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e4f375aebb6538a709d020fdbbcbc155630f8dba3b530c94131f25b1936a1d37
4
- data.tar.gz: 27655ab98b6f7934f4195b55fa2989e64eeee4c1bc572aa49c494dba6864c4c7
3
+ metadata.gz: 139cc310d5d105593947a55e6ba52732b656c5a6f1fe03be612bb65e40f5033d
4
+ data.tar.gz: 3f9a0bc6d086e5299d97c9588346bebd6b511c9b7a721866bea8bc331db4f912
5
5
  SHA512:
6
- metadata.gz: c29b1e14e63da63426141c943acdf924168ea1610735699a49ac567ddfddff2b08836f3b654dfb2cf1798df1aba47fb70fbc9bfa9377b1423b049b0ba2ef82b4
7
- data.tar.gz: c9d19cc030d57a624f22b0c62b98e72eda3bde614657acead29d1ec4d334982deff397ae756feaa24fc626cba458a092d5692e84ad561d7df0fd22241cd191e8
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
- # Examples
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
- ## A Vident component example (without Stimulus)
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
  ![Example](examples/avatar.png)
159
429
 
160
430
 
161
- ## Another ViewComponent + Vident example with Stimulus
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
- ![ex1.gif](examples%2Fex1.gif)
438
+ ![ex1.gif](examples/ex1.gif)
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>-<name>-class` attributes
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
- ## Installation
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
- ## Contributing
376
- Contribution directions go here.
644
+ ---
377
645
 
378
- ## License
379
- The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
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
+ ![Example](examples/avatar.png)
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,7 +1,7 @@
1
1
  module Vident
2
2
  module Typed
3
3
  module ViewComponent
4
- VERSION = "0.3.0"
4
+ VERSION = Vident::VERSION
5
5
  end
6
6
  end
7
7
  end
@@ -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/engine"
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.3.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: 2023-08-12 00:00:00.000000000 Z
10
+ date: 2025-04-07 00:00:00.000000000 Z
12
11
  dependencies:
13
12
  - !ruby/object:Gem::Dependency
14
- name: rails
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: '8'
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: '8'
31
+ version: '9'
33
32
  - !ruby/object:Gem::Dependency
34
- name: vident-typed
33
+ name: activesupport
35
34
  requirement: !ruby/object:Gem::Requirement
36
35
  requirements:
37
36
  - - ">="
38
37
  - !ruby/object:Gem::Version
39
- version: 0.1.0
38
+ version: '7.2'
40
39
  - - "<"
41
40
  - !ruby/object:Gem::Version
42
- version: '1'
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: 0.1.0
48
+ version: '7.2'
50
49
  - - "<"
51
50
  - !ruby/object:Gem::Version
52
- version: '1'
51
+ version: '9'
53
52
  - !ruby/object:Gem::Dependency
54
- name: vident-view_component
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.3.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.3.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: '1'
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-typed-view_component
94
+ homepage: https://github.com/stevegeek/vident
89
95
  licenses:
90
96
  - MIT
91
97
  metadata:
92
- homepage_uri: https://github.com/stevegeek/vident-typed-view_component
93
- source_code_uri: https://github.com/stevegeek/vident-typed-view_component
94
- changelog_uri: https://github.com/stevegeek/vident-typed-view_component/blob/main/CHANGELOG.md
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: '0'
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.4.10
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
@@ -1,8 +0,0 @@
1
- require "bundler/setup"
2
-
3
- APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
4
- load "rails/tasks/engine.rake"
5
-
6
- load "rails/tasks/statistics.rake"
7
-
8
- require "bundler/gem_tasks"
data/config/routes.rb DELETED
@@ -1,2 +0,0 @@
1
- Rails.application.routes.draw do
2
- end
@@ -1,4 +0,0 @@
1
- # desc "Explaining what the task does"
2
- # task :vident_typed_view_component do
3
- # # Task goes here
4
- # end