Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stevegeek/vident-view_component
https://github.com/stevegeek/vident-view_component
Last synced: 18 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/stevegeek/vident-view_component
- Owner: stevegeek
- License: mit
- Created: 2023-03-30T08:33:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T15:14:56.000Z (11 months ago)
- Last Synced: 2024-12-25T05:24:55.968Z (27 days ago)
- Language: Ruby
- Size: 114 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-hotwire - vident-view_component - A library for integrating Stimulus with ViewComponent in Rails applications, simplifying the creation of interactive components. (**Awesome Hotwire** [](https://github.com/sindresorhus/awesome) / Stimulus)
- awesome-hotwire - vident-view_component - A library for integrating Stimulus with ViewComponent in Rails applications, simplifying the creation of interactive components. (**Awesome Hotwire** [](https://github.com/sindresorhus/awesome) / Stimulus)
README
# Vident::ViewComponent
[ViewComponent](https://viewcomponent.org/) powered [Vident](https://github.com/stevegeek/vident) components.
```ruby
class ApplicationComponent < ::Vident::ViewComponent::Base
end
```
For more details see [vident](https://github.com/stevegeek/vident).
# Examples
Before we dive into a specific example note that there are some components implemented in the `test/dummy/app/components`.
Try them out by starting Rails:
```bash
cd test/dummy
bundle install
rails assets:precompile
rails s
```
and visiting http://localhost:3000
## A Vident component example (without Stimulus)
First is an example component that uses `Vident::ViewComponent::Base` but no Stimulus features.
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.
```ruby
class AvatarComponent < ::Vident::ViewComponent::Base
include ::Vident::Tailwind
include ::Vident::Caching
no_stimulus_controller
with_cache_key :attributes
attribute :url, allow_nil: true
attribute :initials, allow_nil: false
attribute :shape, default: :circle
attribute :border, default: false
attribute :size, default: :normal
private
def default_html_options
if image_avatar?
{ class: "inline-block object-contain", src: url, alt: t(".image") }
else
{ class: "inline-flex items-center justify-center bg-gray-500" }
end
end
def element_classes
[size_classes, shape_class, border? ? "border" : ""]
end
alias_method :image_avatar?, :url?
def shape_class
(shape == :circle) ? "rounded-full" : "rounded-md"
end
def size_classes
case size
when :tiny
"w-6 h-6"
when :small
"w-8 h-8"
when :medium
"w-12 h-12"
when :large
"w-14 h-14"
when :x_large
"sm:w-24 sm:h-24 w-16 h-16"
when :xx_large
"sm:w-32 sm:h-32 w-24 h-24"
else
"w-10 h-10"
end
end
def text_size_class
case size
when :tiny
"text-xs"
when :small
"text-xs"
when :medium
"text-lg"
when :large
"sm:text-xl text-lg"
when :extra_large
"sm:text-2xl text-xl"
else
"text-medium"
end
end
end
```
```erb
<%= render root(
element_tag: image_avatar? ? :img : :div,
html_options: default_html_options
) do %>
<% unless image_avatar? %>
<%= initials %>
<% end %>
<% end %>
```
Example usages:
```erb
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", initials: "AB" size: :large) %>
<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", html_options: {alt: "My alt text", class: "object-scale-down"}) %>
<%= render AvatarComponent.new(initials: "SG", size: :small) %>
<%= render AvatarComponent.new(initials: "SG", size: :large, html_options: {class: "border-2 border-red-600"}) %>
```
The following is rendered when used `render AvatarComponent.new(initials: "SG", size: :small, border: true)`:
```html
SG
```
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"})`:
```html
```
----
## Usage
How to use my plugin.
## Installation
Add this line to your application's Gemfile:
```ruby
gem "vident-view_component"
```
And then execute:
```bash
$ bundle
```
Or install it yourself as:
```bash
$ gem install vident-view_component
```
## Contributing
Contribution directions go here.
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).