bulmacomp 0.1.2 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +32 -3
- data/app/components/bulmacomp/dropdown_component.rb +115 -0
- data/lib/bulmacomp/version.rb +1 -1
- metadata +5 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 03f4ba3be9bf671e75a46e7e6269bb992e8249e595a939a045b71091ad74baa4
|
|
4
|
+
data.tar.gz: 7f2455a6f4b08c00aae69819a2f603c46dd26bcd6c63546d2c39785d58393e63
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e5dd184d2ba86cd80d0b29660d0c20bb890cdfb61eb9468beb055281e66acce8346c31f1f002e696a322a11af2e004e35b3493a190fe9f2ca2923f57ac111ed7
|
|
7
|
+
data.tar.gz: 31100768b00f36a1c5d7ba730a4235aae1a1816877d7f62c9a2ca6213ff81c6c19b245b6cd2939798b63b0f5a7a98ab98d5cd613787b0c1a572aacab2609a112
|
data/README.md
CHANGED
|
@@ -1,10 +1,23 @@
|
|
|
1
1
|
# Bulmacomp
|
|
2
|
+
[](https://badge.fury.io/rb/bulmacomp)
|
|
2
3
|
[](https://codeclimate.com/github/isprambiente/bulmacomp/maintainability)
|
|
3
4
|
[](https://github.com/isprambiente/bulmacomp/actions/workflows/rubyonrails.yml)
|
|
4
5
|
[](https://www.rubydoc.info/github/isprambiente/bulmacomp)
|
|
5
6
|
|
|
7
|
+
Bulmacomp is a [ViewComponent](https://viewcomponent.org/) collection for [Bulma](https://bulma.io/) css framework.
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
Bulmacomp provide a "view component" for each bulma component:
|
|
10
|
+
|
|
11
|
+
* [Breadcrumb](https://bulma.io/documentation/components/breadcrumb/) - [Bulmacomp::BreadcrumbComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/BreadcrumbComponent)
|
|
12
|
+
* [Card](https://bulma.io/documentation/components/card/) - [Bulmacomp::CardComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/CardComponent)
|
|
13
|
+
* [Dropdown](https://bulma.io/documentation/components/dropdown/) - [Bulmacomp::DropdownComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/DropdownComponent)
|
|
14
|
+
* [Menu](https://bulma.io/documentation/components/menu/) - [Bulmacomp::MenuComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/MenuComponent)
|
|
15
|
+
* [Message](https://bulma.io/documentation/components/message/) - [Bulmacomp::MessageComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/MessageComponent)
|
|
16
|
+
* [Modal](https://bulma.io/documentation/components/modal/) - [Bulmacomp::ModalCompoent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/ModalCompoent)
|
|
17
|
+
* [Navbar](https://bulma.io/documentation/components/navbar/) - [Bulmacomp::NavbarCompoent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/NavbarComponent)
|
|
18
|
+
* [Pagination](https://bulma.io/documentation/components/pagination/) - [Bulmacomp::PaginationComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/PaginationComponent)
|
|
19
|
+
* [Panel](https://bulma.io/documentation/components/panel/) - [Bulmacomp::PanelComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/PanelComponent)
|
|
20
|
+
* [Tabs](https://bulma.io/documentation/components/tabs/) - [Bulmacomp::TabsComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/tabsComponent)
|
|
8
21
|
|
|
9
22
|
## Installation
|
|
10
23
|
Add this line to your application's Gemfile:
|
|
@@ -24,10 +37,26 @@ $ gem install bulmacomp
|
|
|
24
37
|
```
|
|
25
38
|
|
|
26
39
|
## Usage
|
|
27
|
-
|
|
40
|
+
Bulmacomp provide standard view components. You can simply render of a new instance of the components with your parameters:
|
|
41
|
+
```ruby
|
|
42
|
+
render Bulmacomp::MessageComponent.new(title: 'example', close: true, close_options: {id: 'close'}) do
|
|
43
|
+
Some content
|
|
44
|
+
end
|
|
45
|
+
```
|
|
46
|
+
returns
|
|
47
|
+
```html
|
|
48
|
+
<article class="message">
|
|
49
|
+
<div class="message-header">
|
|
50
|
+
<p>Example</p>
|
|
51
|
+
<button id="close" class="delete" aria-label="delete" data-close='message'></button>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="message-body">Some content</div>
|
|
54
|
+
</article>
|
|
55
|
+
```
|
|
56
|
+
You can get more details from [View Component site](https://viewcomponent.org/) and [Bulmacom documentation](https://rubydoc.info/github/isprambiente/bulmacomp/main)
|
|
28
57
|
|
|
29
58
|
## Contributing
|
|
30
|
-
|
|
59
|
+
Issues, forks and pull requests are welcomed
|
|
31
60
|
|
|
32
61
|
## License
|
|
33
62
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Bulmacomp
|
|
4
|
+
# Make an html structure for a bulma dropdown
|
|
5
|
+
#
|
|
6
|
+
# @example empty dropdown
|
|
7
|
+
# render Bulmacomp::DropdownComponent.new()
|
|
8
|
+
#
|
|
9
|
+
# <div class="dropdown">
|
|
10
|
+
# <div class="dropdown-trigger">
|
|
11
|
+
# <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
|
|
12
|
+
# <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
|
|
13
|
+
# </button>
|
|
14
|
+
# </div>
|
|
15
|
+
# <div class="dropdown-menu" role="menu">
|
|
16
|
+
# <div class="dropdown-content"></div>
|
|
17
|
+
# </div>
|
|
18
|
+
# </div>
|
|
19
|
+
# @example dropdown with title and elements
|
|
20
|
+
# render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2])
|
|
21
|
+
#
|
|
22
|
+
# <div class="dropdown">
|
|
23
|
+
# <div class="dropdown-trigger">
|
|
24
|
+
# <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
|
|
25
|
+
# <span>title</span>
|
|
26
|
+
# <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
|
|
27
|
+
# </button>
|
|
28
|
+
# </div>
|
|
29
|
+
# <div class="dropdown-menu" role="menu">
|
|
30
|
+
# <div class="dropdown-content">
|
|
31
|
+
# <div class="dropdown-item">1</div>
|
|
32
|
+
# <div class="dropdown-item">2</div>
|
|
33
|
+
# </div>
|
|
34
|
+
# </div>
|
|
35
|
+
# </div>
|
|
36
|
+
#
|
|
37
|
+
# @example dropdown with yield, elements and other option
|
|
38
|
+
# = render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2], id: 'menu',
|
|
39
|
+
# button_options: {class: 'button is-success'}, icon: nil) do
|
|
40
|
+
# some content
|
|
41
|
+
#
|
|
42
|
+
# <div class="dropdown">
|
|
43
|
+
# <div class="dropdown-trigger">
|
|
44
|
+
# <button class="button is-success" aria-haspopup="true" aria-controls="dropdown-menu">
|
|
45
|
+
# <span>title</span>
|
|
46
|
+
# </button>
|
|
47
|
+
# </div>
|
|
48
|
+
# <div class="dropdown-menu" role="menu">
|
|
49
|
+
# <div class="dropdown-content">
|
|
50
|
+
# <div class="dropdown-item">1</div>
|
|
51
|
+
# <div class="dropdown-item">2</div>
|
|
52
|
+
# some content
|
|
53
|
+
# </div>
|
|
54
|
+
# </div>
|
|
55
|
+
# </div>
|
|
56
|
+
#
|
|
57
|
+
class DropdownComponent < ViewComponent::Base
|
|
58
|
+
# @param [Hash] opts
|
|
59
|
+
# options to generate content
|
|
60
|
+
# @option opts [String] title
|
|
61
|
+
# Content of button, default empty string
|
|
62
|
+
# @option opts [Array<String>] elements
|
|
63
|
+
# collection of dropdown-item
|
|
64
|
+
# @option opts [String] icon
|
|
65
|
+
# icon span class content for button,
|
|
66
|
+
# default: <i class="fas fa-angle-down" aria-hidden="true"></i>
|
|
67
|
+
# @option opts {Hash} button_options
|
|
68
|
+
# options for button tag
|
|
69
|
+
# @option opts [String] :*
|
|
70
|
+
# each key going as content tag option, default is class: 'dropdown'
|
|
71
|
+
# @yield [optional] dropdown content
|
|
72
|
+
def initialize(title: nil, elements: [], icon: default_icon, button_options: {}, **opts)
|
|
73
|
+
super
|
|
74
|
+
@title = tag.span title if title.present?
|
|
75
|
+
@elements = elements
|
|
76
|
+
@icon = tag.span icon, class: 'icon is-small' if icon.present?
|
|
77
|
+
@button_options = default_button_options.merge(button_options)
|
|
78
|
+
@opts = default_opts.merge(opts)
|
|
79
|
+
end
|
|
80
|
+
|
|
81
|
+
# @return [String] default content for button icon
|
|
82
|
+
def default_icon
|
|
83
|
+
'<i class="fas fa-angle-down" aria-hidden="true"></i>'.html_safe
|
|
84
|
+
end
|
|
85
|
+
|
|
86
|
+
# @return [Hash] default option for content tag
|
|
87
|
+
def default_opts
|
|
88
|
+
{ class: 'dropdown' }
|
|
89
|
+
end
|
|
90
|
+
|
|
91
|
+
# return [Hash] default option for button tag
|
|
92
|
+
def default_button_options
|
|
93
|
+
{ class: 'button', aria: { haspopup: 'true', controls: 'dropdown-menu' } }
|
|
94
|
+
end
|
|
95
|
+
|
|
96
|
+
# Generated html string for bulma dropdown
|
|
97
|
+
# @return [String]
|
|
98
|
+
def call
|
|
99
|
+
tag.div safe_join([tag_trigger, tag_content]), **@opts
|
|
100
|
+
end
|
|
101
|
+
|
|
102
|
+
# generated html for '.dropdown-trigger' div
|
|
103
|
+
# @return [String]
|
|
104
|
+
def tag_trigger
|
|
105
|
+
tag.div tag.button(safe_join([@title, @icon]), **@button_options), class: 'dropdown-trigger'
|
|
106
|
+
end
|
|
107
|
+
|
|
108
|
+
# generated html for '.dropdown-content' div.
|
|
109
|
+
# Map each content of {elements} in a '.dropdown-item' div and add yield content
|
|
110
|
+
# @return [String]
|
|
111
|
+
def tag_content
|
|
112
|
+
tag.div safe_join([@elements.map { |e| tag.div(e, class: 'dropdown-item') }, content]), class: 'dropdown-content'
|
|
113
|
+
end
|
|
114
|
+
end
|
|
115
|
+
end
|
data/lib/bulmacomp/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bulmacomp
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- MDreW
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-03-
|
|
11
|
+
date: 2023-03-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -36,6 +36,7 @@ files:
|
|
|
36
36
|
- Rakefile
|
|
37
37
|
- app/components/bulmacomp/breadcrumb_component.rb
|
|
38
38
|
- app/components/bulmacomp/card_component.rb
|
|
39
|
+
- app/components/bulmacomp/dropdown_component.rb
|
|
39
40
|
- app/components/bulmacomp/menu_component.rb
|
|
40
41
|
- app/components/bulmacomp/message_component.rb
|
|
41
42
|
- app/components/bulmacomp/modal_component.rb
|
|
@@ -52,8 +53,8 @@ licenses:
|
|
|
52
53
|
- MIT
|
|
53
54
|
metadata:
|
|
54
55
|
homepage_uri: https://github.com/isprambiente/bulmacomp
|
|
55
|
-
source_code_uri: https://github.com/
|
|
56
|
-
changelog_uri: https://github.com/
|
|
56
|
+
source_code_uri: https://github.com/isprambiente/bulmacomp
|
|
57
|
+
changelog_uri: https://github.com/isprambiente/bulmacomp
|
|
57
58
|
post_install_message:
|
|
58
59
|
rdoc_options: []
|
|
59
60
|
require_paths:
|