coveragebook_components 0.19.4 → 0.19.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d1344822e2d4d928b5e9e92d7e213d271dee81696c3e1ac2672f6e3381d6d2a
-  data.tar.gz: 696d4ab8106207a268a7ebc7b8925192c1e9e7981f105dc29d77c69e26740bd6
+  metadata.gz: 5a6fb593342b6d0d763f42c38489d2e8d8099cf829d40723fca1dfa0436c729b
+  data.tar.gz: d47179da3e25b9c8ccccac86046b3520049db717a08f4f4a5127a82a1441bdc3
 SHA512:
-  metadata.gz: 94509db5c4e1ea656d48e2aa6a1aaf3a7627974b7e8418eccc467b67d39631c1284d4f5ab873c2555aaadade7aa87a21612596ca57a5ee9d8864dca32fbbbcff
-  data.tar.gz: db56406dbedbb3b0629cd8aeb684f6154d8a6fd0529648ea7af30b7a62b28e8b129b8e50a7e7f2c21db0c08c6ef3621598cbf02f63820998165997928e161e58
+  metadata.gz: 8623cb1e2a5f3f8ed328d6a83eec049e62729a4b2f829d534a5a8c2e35415d72a2f595d08418455bef5c515391e4e372cfce95f700a3247668faa6538fedee4d
+  data.tar.gz: 5345ffa5480a34a6fd15684411f4f9a2760c20e809c630cedcbf2324e665dd8d99f252aede51a09b5769eabbf3d0dcdad181b00e7a62dbb8e7b764c6a754cfc6

data/app/assets/build/coco/coco.css

@@ -3824,20 +3824,14 @@ select{
   padding-bottom: 0.5rem
 }
 
-/* 
-    .alert-icon {
-      @apply flex items-center p-2 rounded-full;
-
-      .coco-icon {
-        @apply w-5 h-5;
-      }
-    } */
-
 [data-coco][data-component="alert"] .alert-body{
-  padding-left: 1rem;
   padding-right: 0.5rem
 }
 
+[data-coco][data-component="alert"] .alert-stamp + .alert-body{
+  padding-left: 1rem
+}
+
 [data-coco][data-component="alert"] .alert-content{
   width: 100%;
   --tw-text-opacity: 1;
@@ -4004,7 +3998,7 @@ select{
         padding-bottom: 0.375rem;
       }
 
-[data-coco][data-component="alert"][data-condensed="true"] .alert-body{
+[data-coco][data-component="alert"][data-condensed="true"] .alert-stamp + .alert-body{
   padding-left: 0.75rem
 }
 
@@ -4552,8 +4546,16 @@ select{
   opacity: 0
 }
 
-[data-coco][data-component="system-banner"] {
+[data-coco][data-component="system-banner"] .alert-stamp{
+  margin-top: 0.25rem !important
+}
+
+@container (min-width: 550px){
+
+  [data-coco][data-component="system-banner"] .alert-stamp{
+    margin-top: 0px !important
   }
+}
 
 [data-coco][data-component="toast"]{
   width: 100%;
@@ -4780,13 +4782,10 @@ select{
     host page rather than displayed as a modal.
    */
 
-[data-role="inline-modal-content"]{
+[data-role="inline-modal-content"] [data-component="modal-dialog"]{
   margin-left: auto;
   margin-right: auto;
-  max-width: 42rem
-}
-
-[data-role="inline-modal-content"] [data-component="modal-dialog"]{
+  max-width: 42rem;
   border-radius: 0.75rem;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -4796,6 +4795,63 @@ select{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
+[data-coco][data-component="modal-canvas"]{
+  position: relative;
+    width: -moz-fit-content;
+    width: fit-content
+}
+
+[data-coco][data-component="modal-canvas"] .modal-canvas-close{
+  position: absolute;
+  right: -0.375rem;
+  top: -0.375rem;
+  z-index: 20;
+  flex: none;
+  border-radius: 9999px;
+  padding: 0.5rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
+}
+
+@media (min-width: 576px){
+
+  [data-coco][data-component="modal-canvas"] .modal-canvas-close{
+    right: -1rem;
+    top: -1rem
+  }
+}
+
+[data-coco][data-component="modal-canvas"] .modal-canvas-close{
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+[data-coco][data-component="modal-canvas"] .modal-canvas-close:focus{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
+[data-coco][data-component="modal-canvas"] .modal-canvas-content{
+  position: relative;
+  min-height: 100px;
+  min-width: 100px;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      width: -moz-fit-content;
+      width: fit-content
+}
+
 [data-coco][data-component="modal-dialog"]{
   width: 100%;
   border-radius: 2rem;

data/app/assets/build/coco/coco.js

@@ -15338,7 +15338,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.19.4",
+  version: "0.19.6",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -16503,6 +16503,19 @@ var modal_default = CocoComponent("modal", () => {
   };
 });
 
+// ../../components/coco/modals/modal_canvas/modal_canvas.js
+var modal_canvas_exports = {};
+__export(modal_canvas_exports, {
+  default: () => modal_canvas_default
+});
+var modal_canvas_default = CocoComponent("modalCanvas", () => {
+  return {
+    close() {
+      this.modal.hide();
+    }
+  };
+});
+
 // ../../components/coco/modals/modal_dialog/modal_dialog.js
 var modal_dialog_exports = {};
 __export(modal_dialog_exports, {
@@ -16572,7 +16585,7 @@ var modal_lightbox_default = CocoComponent("modalLightbox", () => {
 });
 
 // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@components/modals/**/*.js
-var modules8 = [modal_exports, modal_dialog_exports, modal_lightbox_exports];
+var modules8 = [modal_exports, modal_canvas_exports, modal_dialog_exports, modal_lightbox_exports];
 var __default8 = modules8;
 
 // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@components/navigation/**/*.js

data/app/components/coco/messaging/alert/alert.css

@@ -5,17 +5,13 @@
     .alert-container {
       @apply flex items-start px-4 py-2 relative;
     }
-    /* 
-    .alert-icon {
-      @apply flex items-center p-2 rounded-full;
-
-      .coco-icon {
-        @apply w-5 h-5;
-      }
-    } */
 
     .alert-body {
-      @apply pl-4 pr-2;
+      @apply pr-2;
+    }
+
+    .alert-stamp + .alert-body {
+      @apply pl-4;
     }
 
     .alert-content {
@@ -88,7 +84,7 @@
         @apply py-1.5;
       }
 
-      .alert-body {
+      .alert-stamp + .alert-body {
         @apply pl-3;
       }
 

data/app/components/coco/messaging/alert/alert.html.erb

@@ -9,9 +9,11 @@
   "vivid": vivid?
 }) do %>
   <div class="alert-container">
-    <div class="alert-stamp" data-role="icon">
-      <%= stamp %>
-    </div>
+    <% if stamp.present? %>
+      <div class="alert-stamp" data-role="icon">
+        <%= stamp %>
+      </div>
+    <% end %>
     
     <div class="alert-body">
       <div class="alert-content" data-role="content">

data/app/components/coco/messaging/alert/alert.rb

@@ -12,6 +12,7 @@ module Coco
     accepts_option :single_line, from: [true, false]
     accepts_option :cloak, from: [true, false], default: true, private: true
     accepts_option :condensed, from: [true, false], default: false
+    accepts_option :icon, default: true
 
     renders_one :title
     renders_one :message
@@ -68,13 +69,18 @@ module Coco
     end
 
     def stamp
-      type = unvividify(get_option_value(:theme))&.to_sym
       style = if get_option_value(:banner)
         :compact
       else
         vivid? ? :inverse : :subtle
       end
-      coco_stamp(type, style:)
+
+      if get_option_value(:icon) == true
+        type = unvividify(get_option_value(:theme))&.to_sym
+        coco_stamp(type, style:)
+      elsif get_option_value(:icon).present?
+        coco_stamp(icon: get_option_value(:icon), style:)
+      end
     end
   end
 end

data/app/components/coco/messaging/system_banner/system_banner.css

@@ -1,4 +1,8 @@
 @layer components {
   [data-coco][data-component="system-banner"] {
+    .alert-stamp {
+      @apply !mt-1;
+      @apply @[550px]:!mt-0;
+    }
   }
 }

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

@@ -79,9 +79,8 @@
     host page rather than displayed as a modal.
    */
   [data-role="inline-modal-content"] {
-    @apply max-w-2xl mx-auto;
-
     [data-component="modal-dialog"] {
+      @apply max-w-2xl mx-auto;
       @apply border border-coco-gray-300 shadow-md rounded-xl;
     }
   }

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

@@ -27,6 +27,10 @@
       <%= render Coco::ModalDialog.new(id: @container_id, title: title.to_s, dismissable: false) do %>
         <%= content %>
       <% end %>
+    <% elsif container_type == :canvas %>
+      <%= render Coco::ModalCanvas.new(id: @container_id, dismissable: false) do %>
+        <%= content %>
+      <% end %>
     <% else %>
       <%= coco_panel(id: @container_id) do %>
         <%= content %>

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

@@ -21,6 +21,13 @@ module Coco
         @container_type = :lightbox
         @container_id = id
         Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
+      end,
+
+      canvas: ->(id: nil, **kwargs, &block) do
+        @container_content = block
+        @container_id = id
+        @container_type = :canvas
+        Coco::ModalCanvas.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
       end
     }
 

data/app/components/coco/modals/modal_canvas/modal_canvas.css

@@ -0,0 +1,17 @@
+@layer components {
+  [data-coco][data-component="modal-canvas"] {
+    @apply relative;
+    width: fit-content;
+
+    .modal-canvas-close {
+      @apply flex-none p-2 absolute -right-1.5 -top-1.5 sm:-right-4 sm:-top-4 rounded-full transition-all z-20;
+      @apply bg-background-dark-1 text-content-light-1;
+      @apply focus:ring-0 focus:outline-none text-content-light-1 shadow-md;
+    }
+
+    .modal-canvas-content {
+      @apply rounded-xl overflow-hidden min-w-[100px] min-h-[100px] relative bg-background-light-1;
+      width: fit-content;
+    }
+  }
+}

data/app/components/coco/modals/modal_canvas/modal_canvas.html.erb

@@ -0,0 +1,10 @@
+<%= render component_tag(x: {data: x_data("modalCanvas")}) do %>
+  <% if dismissable? %>
+    <button type="button" class="modal-canvas-close" data-role="close" @click="close">
+      <%= coco_icon(:x, size: :md) %>
+    </button>
+  <% end %>
+  <div class="modal-canvas-content"<% if dismissable? %> @click.outside="close"<% end %>>
+    <%= content %>
+  </div>
+<% end %>

data/app/components/coco/modals/modal_canvas/modal_canvas.js

@@ -0,0 +1,9 @@
+import { CocoComponent } from "@assets/js/coco/component";
+
+export default CocoComponent("modalCanvas", () => {
+  return {
+    close() {
+      this.modal.hide();
+    },
+  };
+});

data/app/components/coco/modals/modal_canvas/modal_canvas.rb

@@ -0,0 +1,11 @@
+module Coco
+  class ModalCanvas < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :dismissable, from: [true, false], default: true
+
+    def dismissable?
+      get_option_value(:dismissable)
+    end
+  end
+end

data/app/helpers/coco/components_helper.rb

@@ -192,6 +192,12 @@ module Coco
       end
     end
 
+    def coco_modal_canvas(name = "default", **, &block)
+      render(Coco::Modal.new(name: name, **)) do |modal|
+        modal.with_container_canvas(&block)
+      end
+    end
+
     # Navigation
 
     def coco_link(*args, **, &block)

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.19.4"
+  VERSION = "0.19.6"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.19.4
+  version: 0.19.6
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-08 00:00:00.000000000 Z
+date: 2024-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -33,7 +33,7 @@ dependencies:
         version: '3.9'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '3.13'
+        version: '3.20'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -43,7 +43,7 @@ dependencies:
         version: '3.9'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '3.13'
+        version: '3.20'
 - !ruby/object:Gem::Dependency
   name: turbo-rails
   requirement: !ruby/object:Gem::Requirement
@@ -1835,6 +1835,10 @@ files:
 - app/components/coco/modals/modal/modal.html.erb
 - app/components/coco/modals/modal/modal.js
 - app/components/coco/modals/modal/modal.rb
+- app/components/coco/modals/modal_canvas/modal_canvas.css
+- app/components/coco/modals/modal_canvas/modal_canvas.html.erb
+- app/components/coco/modals/modal_canvas/modal_canvas.js
+- app/components/coco/modals/modal_canvas/modal_canvas.rb
 - app/components/coco/modals/modal_dialog/modal_dialog.css
 - app/components/coco/modals/modal_dialog/modal_dialog.html.erb
 - app/components/coco/modals/modal_dialog/modal_dialog.js