coveragebook_components 0.8.8 → 0.9.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/app/assets/build/coco/app.css +292 -245
- data/app/assets/build/coco/app.js +64 -34
- data/app/assets/build/coco/book.css +67 -18
- data/app/assets/build/coco/book.js +50 -21
- data/app/assets/js/libs/alpine/directives/dropdown.js +5 -2
- data/app/components/coco/app/elements/alert/alert.css +1 -1
- data/app/components/coco/app/elements/button/button.css +38 -58
- data/app/components/coco/app/elements/button/button.rb +2 -3
- data/app/components/coco/app/elements/button_group/button_group.css +7 -2
- data/app/components/coco/app/elements/button_group/button_group.html.erb +2 -1
- data/app/components/coco/app/elements/button_group/button_group.js +28 -14
- data/app/components/coco/app/elements/button_to/button_to.css +4 -8
- data/app/components/coco/app/elements/color_picker_button/color_picker_button.css +1 -2
- data/app/components/coco/app/elements/image_picker_button/image_picker_button.css +1 -2
- data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.css +1 -2
- data/app/components/coco/app/elements/menu/menu.css +7 -5
- data/app/components/coco/app/elements/menu_button/menu_button.css +1 -2
- data/app/components/coco/app/elements/snackbar/snackbar.css +3 -3
- data/app/components/coco/base/button/button.css +9 -9
- data/app/components/coco/base/button/button.html.erb +16 -18
- data/app/components/coco/base/button/button.js +6 -18
- data/app/components/coco/base/button/button.rb +38 -58
- data/app/components/coco/base/button/button_dropdown.js +27 -0
- data/app/components/coco/base/modal/modal.css +12 -0
- data/app/components/coco/base/modal/modal.html.erb +11 -1
- data/app/components/coco/base/modal/modal.rb +4 -1
- data/app/components/coco/base/modal_dialog/modal_dialog.css +6 -2
- data/app/components/coco/base/panel/panel.css +19 -0
- data/app/components/coco/base/panel/panel.html.erb +5 -0
- data/app/components/coco/base/panel/panel.rb +4 -0
- data/app/helpers/coco/app_helper.rb +4 -0
- data/lib/coco.rb +1 -1
- metadata +6 -2
@@ -16,10 +16,7 @@ module Coco
|
|
16
16
|
|
17
17
|
DEFAULT_THEME = nil
|
18
18
|
|
19
|
-
|
20
|
-
|
21
|
-
tag_name :button
|
22
|
-
tag_attr(*BUTTON_ATTRS)
|
19
|
+
tag_attr :type, :value, :name, :disabled, :href, :target
|
23
20
|
|
24
21
|
accepts_option :disabled, from: [true, false]
|
25
22
|
accepts_option :confirm, from: [true, false, nil], default: nil
|
@@ -58,34 +55,22 @@ module Coco
|
|
58
55
|
set_option_value(:state, "active")
|
59
56
|
end
|
60
57
|
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
if disabled?
|
65
|
-
button_attrs[:disabled] = true
|
66
|
-
end
|
67
|
-
|
68
|
-
if dropdown?
|
69
|
-
set_option_value(:dropdown, :placement, "bottom-start") unless get_option(:dropdown, :placement).present?
|
70
|
-
end
|
58
|
+
set_tag_attr(:disabled, true) if disabled?
|
59
|
+
set_tag_attr(:type, "button") unless tag_attr?(:type) || link?
|
71
60
|
|
72
|
-
|
73
|
-
|
61
|
+
if dropdown? || confirm? && get_option(:dropdown, :placement).blank?
|
62
|
+
set_option_value(:dropdown, :placement, "bottom-start")
|
74
63
|
end
|
75
64
|
end
|
76
65
|
|
77
|
-
attr_reader :on_click, :resize
|
66
|
+
attr_reader :on_click, :resize
|
78
67
|
|
79
|
-
def initialize(click: nil, resize: nil, states: nil, loading: false, active: false,
|
68
|
+
def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, tooltip: nil, **kwargs)
|
80
69
|
@on_click = click
|
81
70
|
@resize = resize.to_h
|
82
71
|
@states = states.to_h
|
83
72
|
@loading = loading
|
84
73
|
@active = active
|
85
|
-
@alpine_data = {}
|
86
|
-
@button_element_attrs = button_element
|
87
|
-
|
88
|
-
super(**kwargs)
|
89
74
|
end
|
90
75
|
|
91
76
|
def toggle?
|
@@ -96,8 +81,8 @@ module Coco
|
|
96
81
|
get_option_value(:toggle)
|
97
82
|
end
|
98
83
|
|
99
|
-
def
|
100
|
-
|
84
|
+
def button_tag
|
85
|
+
tag_attr(:href).present? ? :a : :button
|
101
86
|
end
|
102
87
|
|
103
88
|
def button_text
|
@@ -121,11 +106,11 @@ module Coco
|
|
121
106
|
end
|
122
107
|
|
123
108
|
def link?
|
124
|
-
|
109
|
+
button_tag == :a
|
125
110
|
end
|
126
111
|
|
127
112
|
def button?
|
128
|
-
|
113
|
+
button_tag == :button
|
129
114
|
end
|
130
115
|
|
131
116
|
def icon_only?
|
@@ -136,25 +121,17 @@ module Coco
|
|
136
121
|
false
|
137
122
|
end
|
138
123
|
|
139
|
-
def
|
140
|
-
if dropdown?
|
141
|
-
jsify_data({
|
142
|
-
appendTo: "parent",
|
143
|
-
offset: [0, 1],
|
144
|
-
placement: get_option_value(:dropdown, :placement)
|
145
|
-
}.compact)
|
146
|
-
end
|
147
|
-
end
|
148
|
-
|
149
|
-
def component_classes
|
150
|
-
[
|
151
|
-
"coco-button",
|
152
|
-
tag_attrs[:class],
|
124
|
+
def alpine_wrapper_attrs
|
125
|
+
if dropdown? || confirm?
|
153
126
|
{
|
154
|
-
"
|
155
|
-
|
127
|
+
data: x_data("buttonDropdown"),
|
128
|
+
dropdown: jsify_data({offset: [0, 1], placement: get_option_value(:dropdown, :placement)}.compact),
|
129
|
+
"@dropdown:show": ("button.setState('active')" if dropdown?),
|
130
|
+
"@dropdown:hide": ("button.resetState()" if dropdown?),
|
131
|
+
"@confirmation:confirm": ("button.approveAndRun($event)" if confirm?),
|
132
|
+
"@confirmation:cancel": ("button.cancelConfirmation($event)" if confirm?)
|
156
133
|
}
|
157
|
-
|
134
|
+
end
|
158
135
|
end
|
159
136
|
|
160
137
|
def states
|
@@ -188,23 +165,26 @@ module Coco
|
|
188
165
|
private
|
189
166
|
|
190
167
|
def default_states
|
191
|
-
|
192
|
-
default:
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
}
|
197
|
-
}
|
168
|
+
{
|
169
|
+
default: default_state,
|
170
|
+
loading: (loading_state if @states&.key?(:loading))
|
171
|
+
}.compact
|
172
|
+
end
|
198
173
|
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
174
|
+
def default_state
|
175
|
+
{
|
176
|
+
text: button_text,
|
177
|
+
icon: icon,
|
178
|
+
tooltip: get_option_value(:tooltip, :content)
|
179
|
+
}
|
180
|
+
end
|
206
181
|
|
207
|
-
|
182
|
+
def loading_state
|
183
|
+
{
|
184
|
+
text: "Loading...",
|
185
|
+
icon: :loader_2,
|
186
|
+
tooltip: nil
|
187
|
+
}
|
208
188
|
end
|
209
189
|
|
210
190
|
def render_icon(icon)
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import { CocoComponent } from "@js/coco.js";
|
2
|
+
import { getComponent } from "@helpers/alpine";
|
3
|
+
|
4
|
+
export default CocoComponent("buttonDropdown", (data = {}) => {
|
5
|
+
return {
|
6
|
+
dropdown: null,
|
7
|
+
button: null,
|
8
|
+
|
9
|
+
init() {
|
10
|
+
this.$nextTick(() => {
|
11
|
+
this.button = getComponent(this.$el.querySelector(".coco-button"));
|
12
|
+
});
|
13
|
+
},
|
14
|
+
|
15
|
+
hideDropdown() {
|
16
|
+
if (this.dropdown) {
|
17
|
+
this.dropdown.hide();
|
18
|
+
}
|
19
|
+
},
|
20
|
+
|
21
|
+
showDropdown() {
|
22
|
+
if (this.dropdown) {
|
23
|
+
this.dropdown.show();
|
24
|
+
}
|
25
|
+
},
|
26
|
+
};
|
27
|
+
});
|
@@ -73,4 +73,16 @@
|
|
73
73
|
.modal-frame {
|
74
74
|
@apply contents;
|
75
75
|
}
|
76
|
+
|
77
|
+
/*
|
78
|
+
Limit the size of modal content when rendered in the
|
79
|
+
host page rather than displayed as a modal.
|
80
|
+
*/
|
81
|
+
[data-role="inline-modal-content"] {
|
82
|
+
@apply max-w-2xl mx-auto;
|
83
|
+
|
84
|
+
[data-component="modal-dialog"] {
|
85
|
+
@apply border border-gray-300 shadow-md rounded-xl;
|
86
|
+
}
|
87
|
+
}
|
76
88
|
}
|
@@ -22,5 +22,15 @@
|
|
22
22
|
<%= render_flash_messages %>
|
23
23
|
<% end %>
|
24
24
|
<% else %>
|
25
|
-
|
25
|
+
<div data-role="inline-modal-content">
|
26
|
+
<% if container_type == :dialog %>
|
27
|
+
<%= render Coco::ModalDialog.new(title: title.to_s, dismissable: false) do %>
|
28
|
+
<%= content %>
|
29
|
+
<% end %>
|
30
|
+
<% else %>
|
31
|
+
<%= coco_panel do %>
|
32
|
+
<%= content %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
35
|
+
</div>
|
26
36
|
<% end %>
|
@@ -11,10 +11,12 @@ module Coco
|
|
11
11
|
renders_one :container, types: {
|
12
12
|
dialog: ->(**kwargs, &block) do
|
13
13
|
@container_content = block
|
14
|
+
@container_type = :dialog
|
14
15
|
Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
|
15
16
|
end,
|
16
17
|
|
17
18
|
lightbox: ->(**kwargs, &block) do
|
19
|
+
@container_type = :lightbox
|
18
20
|
Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), **kwargs)
|
19
21
|
end
|
20
22
|
}
|
@@ -25,11 +27,12 @@ module Coco
|
|
25
27
|
end
|
26
28
|
end
|
27
29
|
|
28
|
-
attr_reader :name, :show
|
30
|
+
attr_reader :name, :show, :container_type
|
29
31
|
|
30
32
|
def initialize(name:, show: false, **kwargs)
|
31
33
|
@name = name
|
32
34
|
@show = show
|
35
|
+
@container_type = nil
|
33
36
|
title { kwargs[:title] } if kwargs[:title]
|
34
37
|
end
|
35
38
|
|
@@ -1,7 +1,11 @@
|
|
1
1
|
@layer components {
|
2
2
|
[data-coco][data-component="modal-dialog"] {
|
3
|
-
@apply
|
4
|
-
|
3
|
+
@apply rounded-xl w-full;
|
4
|
+
|
5
|
+
.modal-frame & {
|
6
|
+
@apply shadow-2xl;
|
7
|
+
@apply max-w-2xl; /* temp until sizes added */
|
8
|
+
}
|
5
9
|
|
6
10
|
.modal-dialog-header {
|
7
11
|
@apply relative flex items-center;
|
@@ -0,0 +1,19 @@
|
|
1
|
+
@layer components {
|
2
|
+
[data-coco][data-component="panel"] {
|
3
|
+
@apply contents;
|
4
|
+
|
5
|
+
.panel-content {
|
6
|
+
@apply contents;
|
7
|
+
}
|
8
|
+
|
9
|
+
/* Only style Coco panels that are not rendered inside legacy panel components */
|
10
|
+
&:not([data-component="panel"] [data-component="panel"]) {
|
11
|
+
@apply block bg-content-light-1 border border-gray-300 shadow-md rounded-xl;
|
12
|
+
|
13
|
+
.panel-content {
|
14
|
+
@apply block;
|
15
|
+
padding: max(min(5%, 2rem), 1rem);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
@@ -84,6 +84,10 @@ module Coco
|
|
84
84
|
render Coco::App::Elements::SystemBanner.new(**), &block
|
85
85
|
end
|
86
86
|
|
87
|
+
def coco_panel(**, &block)
|
88
|
+
render Coco::Panel.new(**), &block
|
89
|
+
end
|
90
|
+
|
87
91
|
def coco_form_with(**, &block)
|
88
92
|
form_with(**, builder: Coco::AppFormBuilder, &block)
|
89
93
|
end
|
data/lib/coco.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: coveragebook_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.9.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Mark Perkins
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-11-
|
11
|
+
date: 2023-11-22 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -1618,6 +1618,7 @@ files:
|
|
1618
1618
|
- app/components/coco/base/button/button.html.erb
|
1619
1619
|
- app/components/coco/base/button/button.js
|
1620
1620
|
- app/components/coco/base/button/button.rb
|
1621
|
+
- app/components/coco/base/button/button_dropdown.js
|
1621
1622
|
- app/components/coco/base/content/content.rb
|
1622
1623
|
- app/components/coco/base/dropdown/dropdown.css
|
1623
1624
|
- app/components/coco/base/dropdown/dropdown.html.erb
|
@@ -1653,6 +1654,9 @@ files:
|
|
1653
1654
|
- app/components/coco/base/pager_link/pager_link.css
|
1654
1655
|
- app/components/coco/base/pager_link/pager_link.html.erb
|
1655
1656
|
- app/components/coco/base/pager_link/pager_link.rb
|
1657
|
+
- app/components/coco/base/panel/panel.css
|
1658
|
+
- app/components/coco/base/panel/panel.html.erb
|
1659
|
+
- app/components/coco/base/panel/panel.rb
|
1656
1660
|
- app/components/coco/base/placeholder/placeholder.css
|
1657
1661
|
- app/components/coco/base/placeholder/placeholder.html.erb
|
1658
1662
|
- app/components/coco/base/placeholder/placeholder.rb
|