coveragebook_components 0.12.0 → 0.12.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbeeed5148a322ea32398e0521d72f398dfdcd08cfb6bee476c32bd3df7fbc55
-  data.tar.gz: 36b58e768841a56e6d50eb66bf1d754a25b4730e9601b6030bbeb272ffa70caf
+  metadata.gz: 1d799f5fac0e53c99775d0174e178da470c1a7ba427c1d6741f1526c068e5dd3
+  data.tar.gz: 4448b34b9fd7941d55ee90b6d41f14f01c5faee0cec4db1689d37a7145e3f5f2
 SHA512:
-  metadata.gz: 96aca4f58f5f4d69d8d7b1a004d1f6e07789ab8d33b4860c6a4d631e9f3724013f104434adb1cfaf212aa57e1f50d9f6353c46f4abcfbaf8c425cce1cf2b6e64
-  data.tar.gz: 3045072e7e9230b73662d16169b35e2325ba4b1ee3c497a8a5b8f1867219d7a1e45ff85205c04255950ba25328662c5c302f3f0301d37e333340348721da3a51
+  metadata.gz: 71e3dcd290f3ce42dc3acd34560abd5fba28459ef5b4ea19e1510d306512160a778d2fb2704da14acf4e7832f8670078712e2d43b9a1a4498107f4221602948f
+  data.tar.gz: 15ff411e85785865572b00b90527af8bdba5b0b66d0fb4f4fcc8e43fa76a1554a85c3e40328a03412f852a7968b063363619c36d2030e2c1184c43142e17612c

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

@@ -3727,7 +3727,7 @@ select{
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-[data-coco][data-component="app-plan-picker"] .plan-picker-controls > *{
+[data-coco][data-component="app-plan-picker"] .plan-picker-controls [data-component="app-option-bar"]{
   margin-left: auto;
   margin-right: auto;
 }
@@ -3771,9 +3771,7 @@ select{
 }
 @container (min-width: 420px) {
       [data-coco][data-component="app-plan-picker"] .plan-picker-controls{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    position: relative;
   }
       [data-coco][data-component="app-plan-picker"] .plan-picker-controls > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
@@ -3781,11 +3779,20 @@ select{
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
-        [data-coco][data-component="app-plan-picker"] .plan-picker-controls > *{
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-currency{
+    position: absolute;
+    left: 0px;
+    top: 0px;
     margin-left: 0px;
     margin-right: 0px;
   }
 
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-currency
+          + .plan-picker-interval
+          > [data-component="app-option-bar"]{
+    margin-right: 0px;
+  }
+
       [data-coco][data-component="app-plan-picker"] .plan-picker-plans{
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3794,7 +3801,17 @@ select{
   }
     }
 @container (min-width: 984px) {
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-interval > [data-component="app-option-bar"]{
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
         [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-view-toggle{
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
     display: block;
   }
 
@@ -6752,12 +6769,12 @@ select{
             grid-template-columns: min-content 1fr;
           }
     }
-@media (min-width: 576px) and (max-width: 768px) {
+@media (min-width: 576px) and (max-width: 1200px) {
   [data-coco][data-component="application-layout"] {
       --sidebar-nav-width: 4rem
   }
     }
-@media (min-width: 768px) {
+@media (min-width: 1200px) {
   [data-coco][data-component="application-layout"] {
       --sidebar-nav-width: 6rem
   }
@@ -6823,6 +6840,7 @@ select{
   }
 }
 [data-coco][data-component="page-layout"] .page-controls{
+  pointer-events: none;
   position: fixed;
   top: 50%;
   right: 0px;
@@ -6830,9 +6848,11 @@ select{
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   justify-content: space-between;
-
       left: var(--sidebar-nav-width, 0);
 }
+[data-coco][data-component="page-layout"] .page-controls > *{
+  pointer-events: auto;
+}
 [data-coco][data-component="page-layout"] .page-controls .page-control-next{
   margin-left: auto;
 }

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

@@ -14048,7 +14048,7 @@
   // ../../../package.json
   var package_default = {
     name: "coveragebook-components",
-    version: "0.12.0",
+    version: "0.12.2",
     repository: "git@github.com:coveragebook/coco.git",
     license: "NO LICENSE",
     author: "Mark Perkins <mark@coveragebook.com>",

data/app/components/coco/app/blocks/plan_picker/plan_picker.css

@@ -5,7 +5,7 @@
     .plan-picker-controls {
       @apply space-y-4;
 
-      > * {
+      [data-component="app-option-bar"] {
         @apply mx-auto;
       }
 
@@ -46,10 +46,16 @@
 
     @container (min-width: 420px) {
       .plan-picker-controls {
-        @apply flex items-center justify-between space-y-0;
+        @apply relative space-y-0;
 
-        > * {
-          @apply mx-0;
+        .plan-picker-currency {
+          @apply absolute left-0 top-0 mx-0;
+        }
+
+        .plan-picker-currency
+          + .plan-picker-interval
+          > [data-component="app-option-bar"] {
+          @apply mr-0;
         }
       }
 
@@ -60,8 +66,12 @@
 
     @container (min-width: 984px) {
       .plan-picker-controls {
+        .plan-picker-interval > [data-component="app-option-bar"] {
+          @apply !mx-auto;
+        }
+
         .plan-picker-view-toggle {
-          @apply block;
+          @apply block absolute right-0 top-0 mx-0;
         }
       }
 

data/app/components/coco/app/blocks/plan_picker/plan_picker.html.erb

@@ -1,15 +1,17 @@
-<%= render component_tag(x: {
-  data: "appPlanPicker",
-  ":class": "{'slider-active': shouldPaginate}",
-  "options": "options",
-  "@resize.window": "calculateOffset"
-}) do %>
+<%= render component_tag(x: slider? ? {
+    data: "appPlanPicker",
+    ":class": "{'slider-active': shouldPaginate}",
+    "options": "options",
+    "@resize.window": "calculateOffset"
+  } : {}) do %>
   <div class="plan-picker-container">
     <div class="plan-picker-controls">
-      <div data-role="currency-selector">
-        <%= currency_selector %>
-      </div>
-      <div data-role="interval-selector">
+      <% if currency_selector? %>
+        <div class="plan-picker-currency" data-role="currency-selector">
+          <%= currency_selector %>
+        </div>
+      <% end %>
+      <div class="plan-picker-interval" data-role="interval-selector">
         <%= interval_selector %>
       </div>
       <% if view_toggle? %>
@@ -19,7 +21,7 @@
       <% end %>
     </div>
     <%= space 4 %>
-    <div x-ref="slider" class="plan-picker-slider" x-cloak>
+    <div x-ref="slider" class="plan-picker-slider" <%= "x-cloak" if slider? %>>
       <div class="plan-picker-slider-container">
         <div class="plan-picker-plans" x-ref="sliderItems">
           <% plans.each do |plan| %>

data/app/components/coco/app/layouts/application/application.css

@@ -107,11 +107,11 @@
       }
     }
 
-    @media screen(sm) and screen(max-md) {
+    @media screen(sm) and screen(max-xl) {
       --sidebar-nav-width: theme(width.16);
     }
 
-    @media screen(md) {
+    @media screen(xl) {
       --sidebar-nav-width: theme(width.24);
     }
 

data/app/components/coco/app/layouts/page/page.css

@@ -5,10 +5,13 @@
     }
 
     .page-controls {
-      @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between;
-
+      @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between pointer-events-none;
       left: var(--sidebar-nav-width, 0);
 
+      > * {
+        @apply pointer-events-auto;
+      }
+
       .page-control-next {
         @apply ml-auto;
       }

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.12.0"
+  VERSION = "0.12.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.12.0
+  version: 0.12.2
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-12-18 00:00:00.000000000 Z
+date: 2023-12-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails