coveragebook_components 0.19.4 → 0.19.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d1344822e2d4d928b5e9e92d7e213d271dee81696c3e1ac2672f6e3381d6d2a
-  data.tar.gz: 696d4ab8106207a268a7ebc7b8925192c1e9e7981f105dc29d77c69e26740bd6
+  metadata.gz: a1d2704c6cd4936c7c4ab5d7b662753d96e9b5339bbcc616de4426810513c4ca
+  data.tar.gz: 7e30ef8812a9348343ed83f5afeb2fa3a46b5c2cf2594ba7eb100a1d817b0104
 SHA512:
-  metadata.gz: 94509db5c4e1ea656d48e2aa6a1aaf3a7627974b7e8418eccc467b67d39631c1284d4f5ab873c2555aaadade7aa87a21612596ca57a5ee9d8864dca32fbbbcff
-  data.tar.gz: db56406dbedbb3b0629cd8aeb684f6154d8a6fd0529648ea7af30b7a62b28e8b129b8e50a7e7f2c21db0c08c6ef3621598cbf02f63820998165997928e161e58
+  metadata.gz: 6b6c0c6e7877e033a90380df797fb3627ef05fb5d7ff45b0d8c986f9f587afd6e8804eaa23a935598b2c626337c32a4bc4ccfe5adc34caf5e9c8bfd9840d463f
+  data.tar.gz: e4ae100660db97da842376df34f758df39a4df72c0b2fda46d891c5a26fd57c8c9e7c25b3cb870a58c6deef2f0ff37910da8bd8b0335df65dee1d402596546e5

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

@@ -4780,13 +4780,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 +4793,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.5",
   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/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.5"
 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.5
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-08 00:00:00.000000000 Z
+date: 2024-10-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -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