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.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +292 -245
  3. data/app/assets/build/coco/app.js +64 -34
  4. data/app/assets/build/coco/book.css +67 -18
  5. data/app/assets/build/coco/book.js +50 -21
  6. data/app/assets/js/libs/alpine/directives/dropdown.js +5 -2
  7. data/app/components/coco/app/elements/alert/alert.css +1 -1
  8. data/app/components/coco/app/elements/button/button.css +38 -58
  9. data/app/components/coco/app/elements/button/button.rb +2 -3
  10. data/app/components/coco/app/elements/button_group/button_group.css +7 -2
  11. data/app/components/coco/app/elements/button_group/button_group.html.erb +2 -1
  12. data/app/components/coco/app/elements/button_group/button_group.js +28 -14
  13. data/app/components/coco/app/elements/button_to/button_to.css +4 -8
  14. data/app/components/coco/app/elements/color_picker_button/color_picker_button.css +1 -2
  15. data/app/components/coco/app/elements/image_picker_button/image_picker_button.css +1 -2
  16. data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.css +1 -2
  17. data/app/components/coco/app/elements/menu/menu.css +7 -5
  18. data/app/components/coco/app/elements/menu_button/menu_button.css +1 -2
  19. data/app/components/coco/app/elements/snackbar/snackbar.css +3 -3
  20. data/app/components/coco/base/button/button.css +9 -9
  21. data/app/components/coco/base/button/button.html.erb +16 -18
  22. data/app/components/coco/base/button/button.js +6 -18
  23. data/app/components/coco/base/button/button.rb +38 -58
  24. data/app/components/coco/base/button/button_dropdown.js +27 -0
  25. data/app/components/coco/base/modal/modal.css +12 -0
  26. data/app/components/coco/base/modal/modal.html.erb +11 -1
  27. data/app/components/coco/base/modal/modal.rb +4 -1
  28. data/app/components/coco/base/modal_dialog/modal_dialog.css +6 -2
  29. data/app/components/coco/base/panel/panel.css +19 -0
  30. data/app/components/coco/base/panel/panel.html.erb +5 -0
  31. data/app/components/coco/base/panel/panel.rb +4 -0
  32. data/app/helpers/coco/app_helper.rb +4 -0
  33. data/lib/coco.rb +1 -1
  34. metadata +6 -2
@@ -16,10 +16,7 @@ module Coco
16
16
 
17
17
  DEFAULT_THEME = nil
18
18
 
19
- BUTTON_ATTRS = %i[type value name disabled href target]
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
- @button_attrs = tag_attrs.slice(*BUTTON_ATTRS).merge(@button_element_attrs)
62
- tag_attrs.except!(*BUTTON_ATTRS)
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
- unless button_attrs[:type] || link?
73
- button_attrs[:type] = "button"
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, :button_attrs
66
+ attr_reader :on_click, :resize
78
67
 
79
- def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, button_element: {}, **kwargs)
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 button_tag_name
100
- button_attrs[:href].present? ? :a : :button
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
- button_tag_name == :a
109
+ button_tag == :a
125
110
  end
126
111
 
127
112
  def button?
128
- button_tag_name == :button
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 dropdown_opts
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
- "icon-only": icon_only?,
155
- "with-icon": (icon? && !icon_only?)
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
- states = {
192
- default: {
193
- text: button_text,
194
- icon: icon,
195
- tooltip: get_option_value(:tooltip, :content)
196
- }
197
- }
168
+ {
169
+ default: default_state,
170
+ loading: (loading_state if @states&.key?(:loading))
171
+ }.compact
172
+ end
198
173
 
199
- if @states.key?(:loading)
200
- states[:loading] = {
201
- text: "Loading...",
202
- icon: :loader_2,
203
- tooltip: nil
204
- }
205
- end
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
- states
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
- <%= content %>
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 shadow-2xl rounded-xl w-full;
4
- @apply max-w-2xl; /* temp until sizes added */
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
+ }
@@ -0,0 +1,5 @@
1
+ <%= render component_tag do %>
2
+ <div class="panel-content">
3
+ <%= content %>
4
+ </div>
5
+ <% end %>
@@ -0,0 +1,4 @@
1
+ module Coco
2
+ class Panel < Coco::Component
3
+ end
4
+ end
@@ -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
@@ -1,3 +1,3 @@
1
1
  module Coco
2
- VERSION = "0.8.8"
2
+ VERSION = "0.9.0"
3
3
  end
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.8.8
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-15 00:00:00.000000000 Z
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