bulma-phlex 0.1.1 → 0.2.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 +4 -4
- data/README.md +29 -0
- data/lib/bulma-phlex.rb +1 -0
- data/lib/bulma_phlex/version.rb +1 -1
- data/lib/components/bulma/dropdown.rb +109 -0
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9c9baf01284c1c12d06e389eb2871a7c9ada348d3611c26e74ce7d7f24136c83
|
|
4
|
+
data.tar.gz: baaee6a523f95e49507bb6a289b28301fb1d218284aee8cef960dc6b53baf559
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 24302ffbdc624f9b1041ff786d0a57aaf2d3fed7abc4d32096a9c50f861a48049bc9c6ffdf27dfcbfbd94e50d3569debc5898617b77fe9d00be34bc2b702f5bd
|
|
7
|
+
data.tar.gz: aaaa147076dfd55030ea1fd94adc9d4d71e0e05bc6bf8841eabe776d6633426142e06119635e6db68f9972df12369595c933e6fcba03845d7e0d326920ff271b
|
data/README.md
CHANGED
|
@@ -62,6 +62,35 @@ render Components::Bulma::Card.new do |card|
|
|
|
62
62
|
end
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
+
### Dropdown
|
|
66
|
+
|
|
67
|
+
The [Dropdown](https://bulma.io/documentation/components/dropdown/) component provides a flexible dropdown menu for navigation or actions. It supports both click-to-toggle (default, requires a Stimulus controller) and hoverable modes, as well as alignment and icon customization.
|
|
68
|
+
|
|
69
|
+
```ruby
|
|
70
|
+
render Components::Bulma::Dropdown.new("Next Actions...") do |dropdown|
|
|
71
|
+
dropdown.link "View Profile", "/profile"
|
|
72
|
+
dropdown.link "Go to Settings", "/settings"
|
|
73
|
+
dropdown.divider
|
|
74
|
+
dropdown.item("This is just a text item")
|
|
75
|
+
dropdown.item do
|
|
76
|
+
div(class: "has-text-weight-bold") { "This is a bold item" }
|
|
77
|
+
end
|
|
78
|
+
end
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**Options:**
|
|
82
|
+
|
|
83
|
+
- `label` (required): The dropdown button label.
|
|
84
|
+
- `click`: Stimulus controller name for click-to-toggle (default: `"bulma--dropdown"`). Set to `false` for hoverable.
|
|
85
|
+
- `alignment`: `:left` (default), `:right`, or `:up`.
|
|
86
|
+
- `icon`: Icon class for the dropdown arrow (default: `"fas fa-angle-down"`).
|
|
87
|
+
|
|
88
|
+
**Dropdown methods:**
|
|
89
|
+
|
|
90
|
+
- `link(label, path)`: Adds a link item.
|
|
91
|
+
- `item(content = nil, &block)`: Adds a custom item (string or block).
|
|
92
|
+
- `divider`: Adds a divider line.
|
|
93
|
+
|
|
65
94
|
### Level
|
|
66
95
|
|
|
67
96
|
The [Level](https://bulma.io/documentation/layout/level/) component provides a flexible horizontal layout system with left and right alignment.
|
data/lib/bulma-phlex.rb
CHANGED
|
@@ -6,6 +6,7 @@ require "bulma_phlex/version"
|
|
|
6
6
|
require "components/bulma"
|
|
7
7
|
require "components/bulma/base"
|
|
8
8
|
require "components/bulma/card"
|
|
9
|
+
require "components/bulma/dropdown"
|
|
9
10
|
require "components/bulma/level"
|
|
10
11
|
require "components/bulma/navigation_bar_dropdown"
|
|
11
12
|
require "components/bulma/navigation_bar"
|
data/lib/bulma_phlex/version.rb
CHANGED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Components
|
|
4
|
+
module Bulma
|
|
5
|
+
# Dropdown component
|
|
6
|
+
#
|
|
7
|
+
# This component implements the [Bulma Dropdown](https://bulma.io/documentation/components/dropdown/).
|
|
8
|
+
#
|
|
9
|
+
# ## [Hoverable or Toggable](https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable)
|
|
10
|
+
#
|
|
11
|
+
# By default the dropdown is in Click Mode and assumes a Stimulus controller named `bulma--dropdown` is present to
|
|
12
|
+
# handle the click events. The controller name can be customized using the `click` option.
|
|
13
|
+
#
|
|
14
|
+
# Set click to `false` to make the dropdown hoverable instead of togglable.
|
|
15
|
+
#
|
|
16
|
+
# ## Alignment
|
|
17
|
+
#
|
|
18
|
+
# Use the `alignment` option to control the dropdown's alignment. By default, it aligns to the left. Pass in
|
|
19
|
+
# `:right` or `:up` to change the alignment.
|
|
20
|
+
#
|
|
21
|
+
# ## Icon
|
|
22
|
+
#
|
|
23
|
+
# Use the `icon` option to customize the dropdown's icon. By default, it uses the Font Awesome angle down icon.
|
|
24
|
+
#
|
|
25
|
+
# ## Example
|
|
26
|
+
#
|
|
27
|
+
# ```ruby
|
|
28
|
+
# render Components::Bulma::Dropdown.new("Next Actions...") do |dropdown|
|
|
29
|
+
# dropdown.link "View Profile", "/profile"
|
|
30
|
+
# dropdown.link "Go to Settings", "/settings"
|
|
31
|
+
# dropdown.divider
|
|
32
|
+
# dropdown.item("This is just a text item")
|
|
33
|
+
# dropdown.item do
|
|
34
|
+
# div(class: "has-text-weight-bold") { "This is a bold item" }
|
|
35
|
+
# end
|
|
36
|
+
# end
|
|
37
|
+
# ```
|
|
38
|
+
#
|
|
39
|
+
class Dropdown < Components::Bulma::Base
|
|
40
|
+
def initialize(label, click: "bulma--dropdown", alignment: "left", icon: "fas fa-angle-down")
|
|
41
|
+
@label = label
|
|
42
|
+
@click = click
|
|
43
|
+
@alignment = alignment
|
|
44
|
+
@icon = icon
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
def view_template(&)
|
|
48
|
+
div(class: "dropdown #{"is-hoverable" unless @click} #{alignment_class}".strip, **stimulus_controller) do
|
|
49
|
+
div(class: "dropdown-trigger") do
|
|
50
|
+
button(
|
|
51
|
+
class: "button",
|
|
52
|
+
aria_haspopup: "true",
|
|
53
|
+
aria_controls: "dropdown-menu",
|
|
54
|
+
**stimulus_action
|
|
55
|
+
) do
|
|
56
|
+
span { @label }
|
|
57
|
+
span(class: "icon is-small") do
|
|
58
|
+
i(class: @icon, aria_hidden: "true")
|
|
59
|
+
end
|
|
60
|
+
end
|
|
61
|
+
end
|
|
62
|
+
|
|
63
|
+
div(class: "dropdown-menu", id: "dropdown-menu", role: "menu") do
|
|
64
|
+
div(class: "dropdown-content", &)
|
|
65
|
+
end
|
|
66
|
+
end
|
|
67
|
+
end
|
|
68
|
+
|
|
69
|
+
def item(content = nil, &)
|
|
70
|
+
if block_given?
|
|
71
|
+
div(class: "dropdown-item", &)
|
|
72
|
+
else
|
|
73
|
+
div(class: "dropdown-item") { content }
|
|
74
|
+
end
|
|
75
|
+
end
|
|
76
|
+
|
|
77
|
+
def link(label, path)
|
|
78
|
+
a(class: "dropdown-item", href: path) { label }
|
|
79
|
+
end
|
|
80
|
+
|
|
81
|
+
def divider
|
|
82
|
+
hr(class: "dropdown-divider")
|
|
83
|
+
end
|
|
84
|
+
|
|
85
|
+
private
|
|
86
|
+
|
|
87
|
+
def alignment_class
|
|
88
|
+
case @alignment.to_sym
|
|
89
|
+
when :right
|
|
90
|
+
"is-right"
|
|
91
|
+
when :up
|
|
92
|
+
"is-up"
|
|
93
|
+
end
|
|
94
|
+
end
|
|
95
|
+
|
|
96
|
+
def stimulus_controller
|
|
97
|
+
return {} unless @click
|
|
98
|
+
|
|
99
|
+
{ data: { controller: @click } }
|
|
100
|
+
end
|
|
101
|
+
|
|
102
|
+
def stimulus_action
|
|
103
|
+
return {} unless @click
|
|
104
|
+
|
|
105
|
+
{ data: { action: "#{@click}#toggle" } }
|
|
106
|
+
end
|
|
107
|
+
end
|
|
108
|
+
end
|
|
109
|
+
end
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bulma-phlex
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Todd Kummer
|
|
@@ -94,6 +94,7 @@ files:
|
|
|
94
94
|
- lib/components/bulma.rb
|
|
95
95
|
- lib/components/bulma/base.rb
|
|
96
96
|
- lib/components/bulma/card.rb
|
|
97
|
+
- lib/components/bulma/dropdown.rb
|
|
97
98
|
- lib/components/bulma/level.rb
|
|
98
99
|
- lib/components/bulma/navigation_bar.rb
|
|
99
100
|
- lib/components/bulma/navigation_bar_dropdown.rb
|