vident-view_component 0.1.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 +7 -0
- data/README.md +165 -0
- data/Rakefile +8 -0
- data/lib/tasks/vident/view_component_tasks.rake +4 -0
- data/lib/vident/view_component/base.rb +13 -0
- data/lib/vident/view_component/engine.rb +17 -0
- data/lib/vident/view_component/root_component.rb +52 -0
- data/lib/vident/view_component/version.rb +5 -0
- data/lib/vident/view_component.rb +7 -0
- metadata +114 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 5590c317d217331de001e42e69cf50f15b0423fb7d3e82ae2a504cc9c3432222
|
4
|
+
data.tar.gz: 6e402b5447b169422a2a4f545a03153f978cc6af6ebd3b839c1aee07e4f4e5e9
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: d6a127daebc5279eae2c0e956463a41c044b45b9d70befbcb22081f942bc0ef45f727b30bb0b8bcb00dcc68304d847477629641925d78859dad0493abaa695f0
|
7
|
+
data.tar.gz: 63fd79022fec01b0ab59c62fa95097acd17ed97ba0a6a23f65c55ef25d2678876cf03e3e6089ddfd0fd7fa53909f3eadc4b12b975da73bd40ae63716b7f4e7e6
|
data/README.md
ADDED
@@ -0,0 +1,165 @@
|
|
1
|
+
# Vident::ViewComponent
|
2
|
+
Short description and motivation.
|
3
|
+
|
4
|
+
|
5
|
+
|
6
|
+
# Examples
|
7
|
+
|
8
|
+
Before we dive into a specific example note that there are some components implemented in the `test/dummy/app/components`.
|
9
|
+
|
10
|
+
Try them out by starting Rails:
|
11
|
+
|
12
|
+
```bash
|
13
|
+
cd test/dummy
|
14
|
+
bundle install
|
15
|
+
rails assets:precompile
|
16
|
+
rails s
|
17
|
+
```
|
18
|
+
|
19
|
+
and visiting http://localhost:3000
|
20
|
+
|
21
|
+
|
22
|
+
## A Vident component example (without Stimulus)
|
23
|
+
|
24
|
+
First is an example component that uses `Vident::ViewComponent::Base` but no Stimulus features.
|
25
|
+
|
26
|
+
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.
|
27
|
+
|
28
|
+
```ruby
|
29
|
+
class AvatarComponent < ::Vident::ViewComponent::Base
|
30
|
+
include ::Vident::Tailwind
|
31
|
+
include ::Vident::ViewComponent::Caching
|
32
|
+
|
33
|
+
no_stimulus_controller
|
34
|
+
with_cache_key :attributes
|
35
|
+
|
36
|
+
attribute :url, allow_nil: true
|
37
|
+
attribute :initials, allow_nil: false
|
38
|
+
|
39
|
+
attribute :shape, default: :circle
|
40
|
+
|
41
|
+
attribute :border, default: false
|
42
|
+
|
43
|
+
attribute :size, default: :normal
|
44
|
+
|
45
|
+
private
|
46
|
+
|
47
|
+
def default_html_options
|
48
|
+
if image_avatar?
|
49
|
+
{ class: "inline-block object-contain", src: url, alt: t(".image") }
|
50
|
+
else
|
51
|
+
{ class: "inline-flex items-center justify-center bg-gray-500" }
|
52
|
+
end
|
53
|
+
end
|
54
|
+
|
55
|
+
def element_classes
|
56
|
+
[size_classes, shape_class, border? ? "border" : ""]
|
57
|
+
end
|
58
|
+
|
59
|
+
alias_method :image_avatar?, :url?
|
60
|
+
|
61
|
+
def shape_class
|
62
|
+
(shape == :circle) ? "rounded-full" : "rounded-md"
|
63
|
+
end
|
64
|
+
|
65
|
+
def size_classes
|
66
|
+
case size
|
67
|
+
when :tiny
|
68
|
+
"w-6 h-6"
|
69
|
+
when :small
|
70
|
+
"w-8 h-8"
|
71
|
+
when :medium
|
72
|
+
"w-12 h-12"
|
73
|
+
when :large
|
74
|
+
"w-14 h-14"
|
75
|
+
when :x_large
|
76
|
+
"sm:w-24 sm:h-24 w-16 h-16"
|
77
|
+
when :xx_large
|
78
|
+
"sm:w-32 sm:h-32 w-24 h-24"
|
79
|
+
else
|
80
|
+
"w-10 h-10"
|
81
|
+
end
|
82
|
+
end
|
83
|
+
|
84
|
+
def text_size_class
|
85
|
+
case size
|
86
|
+
when :tiny
|
87
|
+
"text-xs"
|
88
|
+
when :small
|
89
|
+
"text-xs"
|
90
|
+
when :medium
|
91
|
+
"text-lg"
|
92
|
+
when :large
|
93
|
+
"sm:text-xl text-lg"
|
94
|
+
when :extra_large
|
95
|
+
"sm:text-2xl text-xl"
|
96
|
+
else
|
97
|
+
"text-medium"
|
98
|
+
end
|
99
|
+
end
|
100
|
+
end
|
101
|
+
```
|
102
|
+
|
103
|
+
```erb
|
104
|
+
<%= render root(
|
105
|
+
element_tag: image_avatar? ? :img : :div,
|
106
|
+
html_options: default_html_options
|
107
|
+
) do %>
|
108
|
+
<% unless image_avatar? %>
|
109
|
+
<span class="<%= text_size_class %> font-medium leading-none text-white"><%= initials %></span>
|
110
|
+
<% end %>
|
111
|
+
<% end %>
|
112
|
+
```
|
113
|
+
|
114
|
+
Example usages:
|
115
|
+
|
116
|
+
```erb
|
117
|
+
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", initials: "AB" size: :large) %>
|
118
|
+
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", html_options: {alt: "My alt text", class: "object-scale-down"}) %>
|
119
|
+
<%= render AvatarComponent.new(initials: "SG", size: :small) %>
|
120
|
+
<%= render AvatarComponent.new(initials: "SG", size: :large, html_options: {class: "border-2 border-red-600"}) %>
|
121
|
+
```
|
122
|
+
|
123
|
+
The following is rendered when used `render AvatarComponent.new(initials: "SG", size: :small, border: true)`:
|
124
|
+
|
125
|
+
```html
|
126
|
+
<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">
|
127
|
+
<span class="text-xs font-medium leading-none text-white">SG</span>
|
128
|
+
</div>
|
129
|
+
```
|
130
|
+
|
131
|
+
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"})`:
|
132
|
+
|
133
|
+
```html
|
134
|
+
<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">
|
135
|
+
```
|
136
|
+
|
137
|
+
----
|
138
|
+
|
139
|
+

|
140
|
+
|
141
|
+
## Usage
|
142
|
+
How to use my plugin.
|
143
|
+
|
144
|
+
## Installation
|
145
|
+
Add this line to your application's Gemfile:
|
146
|
+
|
147
|
+
```ruby
|
148
|
+
gem "vident-view_component"
|
149
|
+
```
|
150
|
+
|
151
|
+
And then execute:
|
152
|
+
```bash
|
153
|
+
$ bundle
|
154
|
+
```
|
155
|
+
|
156
|
+
Or install it yourself as:
|
157
|
+
```bash
|
158
|
+
$ gem install vident-view_component
|
159
|
+
```
|
160
|
+
|
161
|
+
## Contributing
|
162
|
+
Contribution directions go here.
|
163
|
+
|
164
|
+
## License
|
165
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
module Vident
|
2
|
+
module ViewComponent
|
3
|
+
class Base < ::ViewComponent::Base
|
4
|
+
include ::Vident::Component
|
5
|
+
|
6
|
+
# Helper to create the main element
|
7
|
+
def parent_element(**options)
|
8
|
+
@parent_element ||= RootComponent.new(**parent_element_attributes(options))
|
9
|
+
end
|
10
|
+
alias_method :root, :parent_element
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
module Vident
|
2
|
+
module ViewComponent
|
3
|
+
class Engine < ::Rails::Engine
|
4
|
+
lib_path = File.expand_path("../../../../lib/", __FILE__)
|
5
|
+
config.autoload_paths << lib_path
|
6
|
+
config.eager_load_paths << lib_path
|
7
|
+
|
8
|
+
config.before_initialize do
|
9
|
+
Rails.autoloaders.each do |autoloader|
|
10
|
+
autoloader.inflector.inflect(
|
11
|
+
"version" => "VERSION"
|
12
|
+
)
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
@@ -0,0 +1,52 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Vident
|
4
|
+
module ViewComponent
|
5
|
+
class RootComponent < ::ViewComponent::Base
|
6
|
+
include ::Vident::RootComponent
|
7
|
+
|
8
|
+
if Gem.loaded_specs.has_key? "better_html"
|
9
|
+
begin
|
10
|
+
include ::Vident::BetterHtml::RootComponent
|
11
|
+
rescue
|
12
|
+
raise "if `better_html`` is being used you must install `vident-better_html"
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
SELF_CLOSING_TAGS = Set[:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
|
17
|
+
|
18
|
+
def target_tag(tag_name, targets, **options, &block)
|
19
|
+
parsed = parse_targets(Array.wrap(targets))
|
20
|
+
options[:data] ||= {}
|
21
|
+
options[:data].merge!(build_target_data_attributes(parsed))
|
22
|
+
content = view_context.capture(&block) if block
|
23
|
+
view_context.content_tag(tag_name, content, options)
|
24
|
+
end
|
25
|
+
|
26
|
+
def call
|
27
|
+
# Generate outer tag options and render
|
28
|
+
tag_type = content_tag_type
|
29
|
+
options = content_tag_options
|
30
|
+
if SELF_CLOSING_TAGS.include?(tag_type)
|
31
|
+
view_context.tag(tag_type, options)
|
32
|
+
else
|
33
|
+
view_context.content_tag(tag_type, content, options)
|
34
|
+
end
|
35
|
+
end
|
36
|
+
|
37
|
+
private
|
38
|
+
|
39
|
+
def content_tag_options
|
40
|
+
options = @html_options&.dup || {}
|
41
|
+
data_attrs = tag_data_attributes
|
42
|
+
options[:data] = options[:data].present? ? data_attrs.merge(options[:data]) : data_attrs
|
43
|
+
return options unless @id
|
44
|
+
options.merge(id: @id)
|
45
|
+
end
|
46
|
+
|
47
|
+
def content_tag_type
|
48
|
+
@element_tag.presence || :div
|
49
|
+
end
|
50
|
+
end
|
51
|
+
end
|
52
|
+
end
|
metadata
ADDED
@@ -0,0 +1,114 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: vident-view_component
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Stephen Ierodiaconou
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2023-04-01 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '7'
|
20
|
+
- - "<"
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '8'
|
23
|
+
type: :runtime
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
requirements:
|
27
|
+
- - ">="
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '7'
|
30
|
+
- - "<"
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '8'
|
33
|
+
- !ruby/object:Gem::Dependency
|
34
|
+
name: vident
|
35
|
+
requirement: !ruby/object:Gem::Requirement
|
36
|
+
requirements:
|
37
|
+
- - ">="
|
38
|
+
- !ruby/object:Gem::Version
|
39
|
+
version: 0.8.0
|
40
|
+
- - "<"
|
41
|
+
- !ruby/object:Gem::Version
|
42
|
+
version: '1'
|
43
|
+
type: :runtime
|
44
|
+
prerelease: false
|
45
|
+
version_requirements: !ruby/object:Gem::Requirement
|
46
|
+
requirements:
|
47
|
+
- - ">="
|
48
|
+
- !ruby/object:Gem::Version
|
49
|
+
version: 0.8.0
|
50
|
+
- - "<"
|
51
|
+
- !ruby/object:Gem::Version
|
52
|
+
version: '1'
|
53
|
+
- !ruby/object:Gem::Dependency
|
54
|
+
name: view_component
|
55
|
+
requirement: !ruby/object:Gem::Requirement
|
56
|
+
requirements:
|
57
|
+
- - ">="
|
58
|
+
- !ruby/object:Gem::Version
|
59
|
+
version: 2.74.1
|
60
|
+
- - "<"
|
61
|
+
- !ruby/object:Gem::Version
|
62
|
+
version: '4'
|
63
|
+
type: :runtime
|
64
|
+
prerelease: false
|
65
|
+
version_requirements: !ruby/object:Gem::Requirement
|
66
|
+
requirements:
|
67
|
+
- - ">="
|
68
|
+
- !ruby/object:Gem::Version
|
69
|
+
version: 2.74.1
|
70
|
+
- - "<"
|
71
|
+
- !ruby/object:Gem::Version
|
72
|
+
version: '4'
|
73
|
+
description: Vident with ViewComponent
|
74
|
+
email:
|
75
|
+
- stevegeek@gmail.com
|
76
|
+
executables: []
|
77
|
+
extensions: []
|
78
|
+
extra_rdoc_files: []
|
79
|
+
files:
|
80
|
+
- README.md
|
81
|
+
- Rakefile
|
82
|
+
- lib/tasks/vident/view_component_tasks.rake
|
83
|
+
- lib/vident/view_component.rb
|
84
|
+
- lib/vident/view_component/base.rb
|
85
|
+
- lib/vident/view_component/engine.rb
|
86
|
+
- lib/vident/view_component/root_component.rb
|
87
|
+
- lib/vident/view_component/version.rb
|
88
|
+
homepage: https://github.com/stevegeek/vident-view_component
|
89
|
+
licenses:
|
90
|
+
- MIT
|
91
|
+
metadata:
|
92
|
+
homepage_uri: https://github.com/stevegeek/vident-view_component
|
93
|
+
source_code_uri: https://github.com/stevegeek/vident-view_component
|
94
|
+
changelog_uri: https://github.com/stevegeek/vident-view_component/blob/main/CHANGELOG.md
|
95
|
+
post_install_message:
|
96
|
+
rdoc_options: []
|
97
|
+
require_paths:
|
98
|
+
- lib
|
99
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
100
|
+
requirements:
|
101
|
+
- - ">="
|
102
|
+
- !ruby/object:Gem::Version
|
103
|
+
version: '0'
|
104
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
105
|
+
requirements:
|
106
|
+
- - ">="
|
107
|
+
- !ruby/object:Gem::Version
|
108
|
+
version: '0'
|
109
|
+
requirements: []
|
110
|
+
rubygems_version: 3.4.6
|
111
|
+
signing_key:
|
112
|
+
specification_version: 4
|
113
|
+
summary: Vident with ViewComponent
|
114
|
+
test_files: []
|