coveragebook_components 0.8.8 → 0.9.0

data/app/components/coco/base/button/button.rb

@@ -16,10 +16,7 @@ module Coco
 
     DEFAULT_THEME = nil
 
-    BUTTON_ATTRS = %i[type value name disabled href target]
-
-    tag_name :button
-    tag_attr(*BUTTON_ATTRS)
+    tag_attr :type, :value, :name, :disabled, :href, :target
 
     accepts_option :disabled, from: [true, false]
     accepts_option :confirm, from: [true, false, nil], default: nil
@@ -58,34 +55,22 @@ module Coco
         set_option_value(:state, "active")
       end
 
-      @button_attrs = tag_attrs.slice(*BUTTON_ATTRS).merge(@button_element_attrs)
-      tag_attrs.except!(*BUTTON_ATTRS)
-
-      if disabled?
-        button_attrs[:disabled] = true
-      end
-
-      if dropdown?
-        set_option_value(:dropdown, :placement, "bottom-start") unless get_option(:dropdown, :placement).present?
-      end
+      set_tag_attr(:disabled, true) if disabled?
+      set_tag_attr(:type, "button") unless tag_attr?(:type) || link?
 
-      unless button_attrs[:type] || link?
-        button_attrs[:type] = "button"
+      if dropdown? || confirm? && get_option(:dropdown, :placement).blank?
+        set_option_value(:dropdown, :placement, "bottom-start")
       end
     end
 
-    attr_reader :on_click, :resize, :button_attrs
+    attr_reader :on_click, :resize
 
-    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, button_element: {}, **kwargs)
+    def initialize(click: nil, resize: nil, states: nil, loading: false, active: false, tooltip: nil, **kwargs)
       @on_click = click
       @resize = resize.to_h
       @states = states.to_h
       @loading = loading
       @active = active
-      @alpine_data = {}
-      @button_element_attrs = button_element
-
-      super(**kwargs)
     end
 
     def toggle?
@@ -96,8 +81,8 @@ module Coco
       get_option_value(:toggle)
     end
 
-    def button_tag_name
-      button_attrs[:href].present? ? :a : :button
+    def button_tag
+      tag_attr(:href).present? ? :a : :button
     end
 
     def button_text
@@ -121,11 +106,11 @@ module Coco
     end
 
     def link?
-      button_tag_name == :a
+      button_tag == :a
     end
 
     def button?
-      button_tag_name == :button
+      button_tag == :button
     end
 
     def icon_only?
@@ -136,25 +121,17 @@ module Coco
       false
     end
 
-    def dropdown_opts
-      if dropdown?
-        jsify_data({
-          appendTo: "parent",
-          offset: [0, 1],
-          placement: get_option_value(:dropdown, :placement)
-        }.compact)
-      end
-    end
-
-    def component_classes
-      [
-        "coco-button",
-        tag_attrs[:class],
+    def alpine_wrapper_attrs
+      if dropdown? || confirm?
         {
-          "icon-only": icon_only?,
-          "with-icon": (icon? && !icon_only?)
+          data: x_data("buttonDropdown"),
+          dropdown: jsify_data({offset: [0, 1], placement: get_option_value(:dropdown, :placement)}.compact),
+          "@dropdown:show": ("button.setState('active')" if dropdown?),
+          "@dropdown:hide": ("button.resetState()" if dropdown?),
+          "@confirmation:confirm": ("button.approveAndRun($event)" if confirm?),
+          "@confirmation:cancel": ("button.cancelConfirmation($event)" if confirm?)
         }
-      ]
+      end
     end
 
     def states
@@ -188,23 +165,26 @@ module Coco
     private
 
     def default_states
-      states = {
-        default: {
-          text: button_text,
-          icon: icon,
-          tooltip: get_option_value(:tooltip, :content)
-        }
-      }
+      {
+        default: default_state,
+        loading: (loading_state if @states&.key?(:loading))
+      }.compact
+    end
 
-      if @states.key?(:loading)
-        states[:loading] = {
-          text: "Loading...",
-          icon: :loader_2,
-          tooltip: nil
-        }
-      end
+    def default_state
+      {
+        text: button_text,
+        icon: icon,
+        tooltip: get_option_value(:tooltip, :content)
+      }
+    end
 
-      states
+    def loading_state
+      {
+        text: "Loading...",
+        icon: :loader_2,
+        tooltip: nil
+      }
     end
 
     def render_icon(icon)

data/app/components/coco/base/button/button_dropdown.js

@@ -0,0 +1,27 @@
+import { CocoComponent } from "@js/coco.js";
+import { getComponent } from "@helpers/alpine";
+
+export default CocoComponent("buttonDropdown", (data = {}) => {
+  return {
+    dropdown: null,
+    button: null,
+
+    init() {
+      this.$nextTick(() => {
+        this.button = getComponent(this.$el.querySelector(".coco-button"));
+      });
+    },
+
+    hideDropdown() {
+      if (this.dropdown) {
+        this.dropdown.hide();
+      }
+    },
+
+    showDropdown() {
+      if (this.dropdown) {
+        this.dropdown.show();
+      }
+    },
+  };
+});

data/app/components/coco/base/modal/modal.css

@@ -73,4 +73,16 @@
   .modal-frame {
     @apply contents;
   }
+
+  /*
+    Limit the size of modal content when rendered in the
+    host page rather than displayed as a modal.
+   */
+  [data-role="inline-modal-content"] {
+    @apply max-w-2xl mx-auto;
+
+    [data-component="modal-dialog"] {
+      @apply border border-gray-300 shadow-md rounded-xl;
+    }
+  }
 }

data/app/components/coco/base/modal/modal.html.erb

@@ -22,5 +22,15 @@
     <%= render_flash_messages %>
   <% end %>
 <% else %>
-  <%= content %>
+  <div data-role="inline-modal-content">
+    <% if container_type == :dialog %>
+      <%= render Coco::ModalDialog.new(title: title.to_s, dismissable: false) do %>
+        <%= content %>
+      <% end %>
+    <% else %>
+      <%= coco_panel do %>
+        <%= content %>
+      <% end %>
+    <% end %>
+  </div>
 <% end %>

data/app/components/coco/base/modal/modal.rb

@@ -11,10 +11,12 @@ module Coco
     renders_one :container, types: {
       dialog: ->(**kwargs, &block) do
         @container_content = block
+        @container_type = :dialog
         Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
       end,
 
       lightbox: ->(**kwargs, &block) do
+        @container_type = :lightbox
         Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), **kwargs)
       end
     }
@@ -25,11 +27,12 @@ module Coco
       end
     end
 
-    attr_reader :name, :show
+    attr_reader :name, :show, :container_type
 
     def initialize(name:, show: false, **kwargs)
       @name = name
       @show = show
+      @container_type = nil
       title { kwargs[:title] } if kwargs[:title]
     end
 

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -1,7 +1,11 @@
 @layer components {
   [data-coco][data-component="modal-dialog"] {
-    @apply shadow-2xl rounded-xl w-full;
-    @apply max-w-2xl; /* temp until sizes added */
+    @apply rounded-xl w-full;
+
+    .modal-frame & {
+      @apply shadow-2xl;
+      @apply max-w-2xl; /* temp until sizes added */
+    }
 
     .modal-dialog-header {
       @apply relative flex items-center;

data/app/components/coco/base/panel/panel.css

@@ -0,0 +1,19 @@
+@layer components {
+  [data-coco][data-component="panel"] {
+    @apply contents;
+
+    .panel-content {
+      @apply contents;
+    }
+
+    /* Only style Coco panels that are not rendered inside legacy panel components */
+    &:not([data-component="panel"] [data-component="panel"]) {
+      @apply block bg-content-light-1 border border-gray-300 shadow-md rounded-xl;
+
+      .panel-content {
+        @apply block;
+        padding: max(min(5%, 2rem), 1rem);
+      }
+    }
+  }
+}

data/app/components/coco/base/panel/panel.html.erb

@@ -0,0 +1,5 @@
+<%= render component_tag do %>
+  <div class="panel-content">
+    <%= content %>
+  </div>
+<% end %>

data/app/components/coco/base/panel/panel.rb

@@ -0,0 +1,4 @@
+module Coco
+  class Panel < Coco::Component
+  end
+end

data/app/helpers/coco/app_helper.rb

@@ -84,6 +84,10 @@ module Coco
       render Coco::App::Elements::SystemBanner.new(**), &block
     end
 
+    def coco_panel(**, &block)
+      render Coco::Panel.new(**), &block
+    end
+
     def coco_form_with(**, &block)
       form_with(**, builder: Coco::AppFormBuilder, &block)
     end

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.8.8"
+  VERSION = "0.9.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.8.8
+  version: 0.9.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-15 00:00:00.000000000 Z
+date: 2023-11-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1618,6 +1618,7 @@ files:
 - app/components/coco/base/button/button.html.erb
 - app/components/coco/base/button/button.js
 - app/components/coco/base/button/button.rb
+- app/components/coco/base/button/button_dropdown.js
 - app/components/coco/base/content/content.rb
 - app/components/coco/base/dropdown/dropdown.css
 - app/components/coco/base/dropdown/dropdown.html.erb
@@ -1653,6 +1654,9 @@ files:
 - app/components/coco/base/pager_link/pager_link.css
 - app/components/coco/base/pager_link/pager_link.html.erb
 - app/components/coco/base/pager_link/pager_link.rb
+- app/components/coco/base/panel/panel.css
+- app/components/coco/base/panel/panel.html.erb
+- app/components/coco/base/panel/panel.rb
 - app/components/coco/base/placeholder/placeholder.css
 - app/components/coco/base/placeholder/placeholder.html.erb
 - app/components/coco/base/placeholder/placeholder.rb