coveragebook_components 0.7.10 → 0.8.0.beta.2

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

@@ -4299,7 +4299,7 @@
           function toString(value) {
             return value == null ? "" : baseToString(value);
           }
-          var assign = createAssigner(function(object, source) {
+          var assign2 = createAssigner(function(object, source) {
             if (isPrototype(source) || isArrayLike(source)) {
               copyObject(source, keys(source), object);
               return;
@@ -4611,7 +4611,7 @@
             position -= target.length;
             return position >= 0 && string.slice(position, end2) == target;
           }
-          function escape(string) {
+          function escape2(string) {
             string = toString(string);
             return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string;
           }
@@ -5049,7 +5049,7 @@
           }
           lodash.after = after;
           lodash.ary = ary;
-          lodash.assign = assign;
+          lodash.assign = assign2;
           lodash.assignIn = assignIn;
           lodash.assignInWith = assignInWith;
           lodash.assignWith = assignWith;
@@ -5217,7 +5217,7 @@
           lodash.divide = divide;
           lodash.endsWith = endsWith;
           lodash.eq = eq;
-          lodash.escape = escape;
+          lodash.escape = escape2;
           lodash.escapeRegExp = escapeRegExp;
           lodash.every = every;
           lodash.find = find;
@@ -6073,6 +6073,9 @@
         warning: __spreadValues({}, colors.amber),
         info: __spreadValues({}, colors.blue),
         background: {
+          header: {
+            DEFAULT: "#427484"
+          },
           light: {
             1: colors.white,
             2: colors.gray[50],
@@ -6151,7 +6154,7 @@
         xl: "1200px",
         "2xl": "1400px",
         max: "1800px",
-        "small-landscape": { raw: "(max-height: 760px) and (min-width: 576px)" },
+        letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" },
         print: { raw: "print" }
         // Note: PDFs are rendered at a viewport width of 1280px
       };
@@ -14035,7 +14038,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.7.10",
+    version: "0.8.0-beta.2",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -14056,6 +14059,7 @@
       "container-query-polyfill": "^1.0.2",
       del: "^7.0.0",
       html2canvas: "^1.4.1",
+      "js-cookie": "^3.0.5",
       lodash: "^4.17.21",
       "lucide-static": "^0.258.0",
       tailwindcss: "^3.3.0",
@@ -20210,17 +20214,6 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   var import_lodash = __toESM(require_lodash(), 1);
 
   // helpers/dom.js
-  function getHiddenElementDimensions(el, display = "block") {
-    let size2;
-    if (el.style.display === "none") {
-      el.style.display = display;
-      size2 = el.getBoundingClientRect();
-      el.style.display = "none";
-    } else {
-      size2 = el.getBoundingClientRect();
-    }
-    return size2;
-  }
   function castAttributeValue(value) {
     if (value === "false") {
       return false;
@@ -24160,45 +24153,111 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   // book/components.js
   var components_default2 = registerComponents(__default2);
 
-  // ../../components/coco/app/blocks/nav_bar/nav_bar.js
-  var nav_bar_exports = {};
-  __export(nav_bar_exports, {
-    default: () => nav_bar_default
+  // ../../components/coco/app/blocks/header/header.js
+  var header_exports = {};
+  __export(header_exports, {
+    default: () => header_default
+  });
+  var header_default = CocoComponent("appHeader", () => {
+    return {
+      drawerOpen: false,
+      toggleDrawer() {
+        this.drawerOpen = !this.drawerOpen;
+      }
+    };
+  });
+
+  // ../../components/coco/app/blocks/nav_drawer/nav_drawer.js
+  var nav_drawer_exports = {};
+  __export(nav_drawer_exports, {
+    default: () => nav_drawer_default
+  });
+  var nav_drawer_default = CocoComponent("appNavDrawer", () => {
+    return {
+      active: false,
+      init() {
+        this.$watch("drawerOpen", (open) => {
+          if (open) {
+            this.$refs.content.scrollTop = 0;
+            setTimeout(() => {
+              this.active = true;
+            }, 200);
+          } else {
+            this.active = false;
+          }
+        });
+      },
+      close() {
+        this.drawerOpen = false;
+      }
+    };
+  });
+
+  // ../../components/coco/app/blocks/sidebar_nav/sidebar_nav.js
+  var sidebar_nav_exports = {};
+  __export(sidebar_nav_exports, {
+    default: () => sidebar_nav_default
   });
   var import_tokens = __toESM(require_tokens(), 1);
-  var nav_bar_default = CocoComponent("appNavBar", () => {
-    const mobileMaxWidth = parseInt(import_tokens.default.app.screens.md, 10);
+  var mobileMaxWidth = parseInt(import_tokens.default.app.screens.sm, 10);
+  var sidebar_nav_default = CocoComponent("appSidebarNav", () => {
     return {
-      mobile: true,
+      sizeObserver: null,
+      mobileLayout: true,
       init() {
-        const sizeObserver = new ResizeObserver(
+        this.sizeObserver = new ResizeObserver(
           Alpine.throttle((entries) => {
             this.$nextTick(() => {
-              const navWidth = entries[0].contentRect.width;
-              const linksWidth = this.$refs.links.offsetWidth;
-              const primaryWidth = getHiddenElementDimensions(this.$refs.primaryLinks, "flex").width;
-              const secondaryWidth = getHiddenElementDimensions(
-                this.$refs.secondaryLinks,
-                "flex"
-              ).width;
-              const difference = linksWidth - primaryWidth - secondaryWidth;
-              this.mobile = navWidth < mobileMaxWidth || this.mobudifference <= 50;
+              const bodyWidth = entries[0].contentRect.width;
+              this.mobileLayout = bodyWidth < mobileMaxWidth;
             });
           }, 20)
         );
-        sizeObserver.observe(this.$root);
+        this.sizeObserver.observe(document.documentElement);
+      },
+      destroy() {
+        this.sizeObserver && this.sizeObserver.disconnect();
       }
     };
   });
 
-  // ../../components/coco/app/blocks/nav_drawer/nav_drawer.js
-  var nav_drawer_exports = {};
-  __export(nav_drawer_exports, {
-    default: () => nav_drawer_default
+  // ../../components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js
+  var sidebar_nav_item_exports = {};
+  __export(sidebar_nav_item_exports, {
+    default: () => sidebar_nav_item_default
   });
-  var nav_drawer_default = CocoComponent("appNavDrawer", () => {
+  var sidebar_nav_item_default = CocoComponent("appSidebarNavItem", () => {
     return {
-      open: false
+      menu: null,
+      init() {
+        if (this.$refs.menu) {
+          this.menu = tippy_default(this.$el, {
+            theme: "coco-naked-dropdown",
+            placement: this.menuPlacement,
+            arrow: false,
+            offset: [0, 0],
+            trigger: "click",
+            interactive: true,
+            maxWidth: null,
+            content: () => {
+              return this.$refs.menu.innerHTML;
+            }
+          });
+        }
+        this.$watch("mobileLayout", () => {
+          this.onOrientationChange();
+        });
+      },
+      onOrientationChange() {
+        if (this.menu) {
+          this.menu.setProps({
+            placement: this.menuPlacement
+          });
+        }
+      },
+      get menuPlacement() {
+        return this.mobileLayout ? "top" : "right-start";
+      }
     };
   });
 
@@ -24520,6 +24579,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       dismissed: false,
       forceMultiLine: false,
       dismissDuration: 300,
+      init() {
+        this.checkSingleLineWrap = Alpine.throttle(
+          this.checkSingleLineWrap.bind(this),
+          200
+        );
+      },
       dismiss() {
         if (this.$options.dismissable) {
           this.$dispatch("alert:dismiss", {
@@ -24531,16 +24596,19 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       },
       remove() {
+        this.$nextTick(() => this.$dispatch("alert:removed", { alert: this }));
         this.$root.remove();
       },
       checkSingleLineWrap({ height }) {
-        if (!this.forceMultiLine) {
-          this.forceMultiLine = height > 24 && this.$options.singleLine;
+        this.forceMultiLine = false;
+        if (height > 24 && this.$options.singleLine) {
+          this.$nextTick(() => {
+            this.forceMultiLine = true;
+          });
         }
       },
       root: {
         "x-options": '["dismissable", "singleLine"]',
-        "x-show": "!dismissed",
         ":class": "{'force-multi-line': forceMultiLine}"
       }
     };
@@ -26650,8 +26718,135 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   __export(system_banner_exports, {
     default: () => system_banner_default
   });
-  var system_banner_default = CocoComponent("appSystemBanner", () => {
-    return {};
+
+  // ../../../node_modules/js-cookie/dist/js.cookie.mjs
+  function assign(target) {
+    for (var i3 = 1; i3 < arguments.length; i3++) {
+      var source = arguments[i3];
+      for (var key in source) {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  var defaultConverter = {
+    read: function(value) {
+      if (value[0] === '"') {
+        value = value.slice(1, -1);
+      }
+      return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
+    },
+    write: function(value) {
+      return encodeURIComponent(value).replace(
+        /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
+        decodeURIComponent
+      );
+    }
+  };
+  function init(converter, defaultAttributes) {
+    function set3(name, value, attributes) {
+      if (typeof document === "undefined") {
+        return;
+      }
+      attributes = assign({}, defaultAttributes, attributes);
+      if (typeof attributes.expires === "number") {
+        attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
+      }
+      if (attributes.expires) {
+        attributes.expires = attributes.expires.toUTCString();
+      }
+      name = encodeURIComponent(name).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape);
+      var stringifiedAttributes = "";
+      for (var attributeName in attributes) {
+        if (!attributes[attributeName]) {
+          continue;
+        }
+        stringifiedAttributes += "; " + attributeName;
+        if (attributes[attributeName] === true) {
+          continue;
+        }
+        stringifiedAttributes += "=" + attributes[attributeName].split(";")[0];
+      }
+      return document.cookie = name + "=" + converter.write(value, name) + stringifiedAttributes;
+    }
+    function get3(name) {
+      if (typeof document === "undefined" || arguments.length && !name) {
+        return;
+      }
+      var cookies = document.cookie ? document.cookie.split("; ") : [];
+      var jar = {};
+      for (var i3 = 0; i3 < cookies.length; i3++) {
+        var parts = cookies[i3].split("=");
+        var value = parts.slice(1).join("=");
+        try {
+          var found = decodeURIComponent(parts[0]);
+          jar[found] = converter.read(value, found);
+          if (name === found) {
+            break;
+          }
+        } catch (e3) {
+        }
+      }
+      return name ? jar[name] : jar;
+    }
+    return Object.create(
+      {
+        set: set3,
+        get: get3,
+        remove: function(name, attributes) {
+          set3(
+            name,
+            "",
+            assign({}, attributes, {
+              expires: -1
+            })
+          );
+        },
+        withAttributes: function(attributes) {
+          return init(this.converter, assign({}, this.attributes, attributes));
+        },
+        withConverter: function(converter2) {
+          return init(assign({}, this.converter, converter2), this.attributes);
+        }
+      },
+      {
+        attributes: { value: Object.freeze(defaultAttributes) },
+        converter: { value: Object.freeze(converter) }
+      }
+    );
+  }
+  var api = init(defaultConverter, { path: "/" });
+
+  // ../../components/coco/app/elements/system_banner/system_banner.js
+  var system_banner_default = CocoComponent("appSystemBanner", (opts = {}) => {
+    return {
+      cookieName: null,
+      cookieValue: null,
+      cookieExpiry: null,
+      init() {
+        this.cookieName = opts.cookieName;
+        this.cookieValue = opts.cookieValue;
+        this.cookieExpiry = opts.cookieExpiry;
+      },
+      onDismiss() {
+        this.$dispatch("banner:dismiss", { banner: this });
+        if (this.shouldSetCookie) {
+          api.set(this.cookieName, this.cookieValue, {
+            expires: this.cookieExpiry
+          });
+        }
+      },
+      remove() {
+        this.$root.remove();
+      },
+      get shouldSetCookie() {
+        return Number.isInteger(this.cookieExpiry);
+      },
+      root: {
+        "@alert:dismiss": "onDismiss",
+        "@alert:removed": "remove"
+      }
+    };
   });
 
   // ../../components/coco/app/elements/toast/toast.js
@@ -26724,8 +26919,26 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
+  // ../../components/coco/app/layouts/application/application.js
+  var application_exports = {};
+  __export(application_exports, {
+    default: () => application_default
+  });
+  var application_default = CocoComponent("appLayout", (opts) => {
+    return {
+      banner: false,
+      init() {
+        this.banner = opts.banner;
+      },
+      hideBanner() {
+        this.banner = false;
+        this.$el.remove();
+      }
+    };
+  });
+
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/app|@appComponents/**/*.js
-  var modules3 = [nav_bar_exports, nav_drawer_exports, slide_editor_exports, alert_exports, button_group_exports, color_picker_exports, color_picker_button_exports, confirm_panel_exports, image_picker_exports, image_picker_button_exports, layout_picker_button_exports, menu_button_exports, notice_exports, seamless_textarea_exports, snackbar_exports, system_banner_exports, toast_exports, toolbar_exports];
+  var modules3 = [header_exports, nav_drawer_exports, sidebar_nav_exports, sidebar_nav_item_exports, slide_editor_exports, alert_exports, button_group_exports, color_picker_exports, color_picker_button_exports, confirm_panel_exports, image_picker_exports, image_picker_button_exports, layout_picker_button_exports, menu_button_exports, notice_exports, seamless_textarea_exports, snackbar_exports, system_banner_exports, toast_exports, toolbar_exports, application_exports];
   var __default3 = modules3;
 
   // app/components.js
@@ -26785,4 +26998,7 @@ html2canvas/dist/html2canvas.js:
    * Licensed under MPL 2.0
    * github.com/jaames/iro.js
    *)
+
+js-cookie/dist/js.cookie.mjs:
+  (*! js-cookie v3.0.5 | MIT *)
 */

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

@@ -737,6 +737,32 @@ select {
     [data-coco] h6 {
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+[data-coco][data-component="avatar"] {
+  display: block;
+  flex: none;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+[data-coco][data-component="avatar"] img {
+  width: 100%;
+  border-radius: 9999px;
+}
+[data-coco][data-component="avatar"][data-size="sm"] {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+[data-coco][data-component="avatar"][data-size="md"] {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+[data-coco][data-component="avatar"][data-size="lg"] {
+  height: 1.75rem;
+  width: 1.75rem;
+}
+[data-coco][data-component="avatar"][data-size="xl"] {
+  height: 2rem;
+  width: 2rem;
+}
 [data-coco].coco-button {
   display: flex;
   width: auto;

data/app/assets/css/app/tippy.css

@@ -12,4 +12,8 @@
   .tippy-box[data-theme~="coco-app-menu"] {
     @apply tippy-dropdown-box;
   }
+
+  .tippy-box[data-theme~="coco-naked-dropdown"] {
+    width: min-content;
+  }
 }

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

@@ -0,0 +1,47 @@
+@layer components {
+  [data-coco][data-component="app-header"] {
+    @apply @container;
+
+    .header-content {
+      @apply h-14 flex items-center bg-background-header px-app;
+    }
+
+    .header-logo {
+      @apply flex-none mr-6;
+    }
+
+    .header-logo-no-wordmark {
+      @apply h-7 xs:hidden translate-x-1;
+    }
+
+    .header-logo-full {
+      @apply hidden xs:block h-7;
+    }
+
+    .header-links {
+      @apply flex items-center w-full;
+    }
+
+    .header-link-group {
+      @apply items-center gap-x-6;
+    }
+
+    .header-secondary {
+      @apply ml-auto translate-x-2 sm:translate-x-[17px];
+    }
+
+    .header-mobile-controls {
+      @apply flex lg:hidden items-center ml-auto translate-x-2 sm:translate-x-4 md:translate-x-6;
+    }
+
+    .coco-button[data-variant="highlighted"] {
+      @apply text-amber-300;
+    }
+
+    &.with-nav-drawer {
+      .header-link-group {
+        @apply hidden lg:flex;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+<%= render component_tag(
+    x: {data: "appHeader", "bind:class": "{'drawer-open': drawerOpen}"},
+    class: {"with-nav-drawer": mobile_nav?}
+  ) do %>
+  <div class="header-content">
+    <%= tag.send(home_path ? :a : :div, class: "header-logo", href: home_path) do %>
+      <%= image_tag asset_url("coco/img/coveragebook-logomark-white.svg"),
+            alt: "CoverageBook logomark",
+            class: "header-logo-no-wordmark" %>
+      <%= image_tag asset_url("coco/img/coveragebook-landscape-white.svg"),
+            alt: "CoverageBook full logo",
+            class: "header-logo-full" %>
+    <% end %>
+    <nav class="header-links" x-ref="links">    
+      <div class="header-link-group header-primary" x-ref="primaryLinks">
+        <%= primary_nav %>
+      </div>
+      <div class="header-link-group header-secondary" x-ref="secondaryLinks">
+        <%= secondary_nav %>
+      </div>
+      <% if mobile_nav? %>
+        <div class="header-mobile-controls">
+          <%= coco_button(icon: :menu, theme: :text_neutral_light, size: :md, click: "toggleDrawer", x: {show: "!drawerOpen"}) %>
+          <%= coco_button(icon: :x, theme: :text_neutral_light, size: :md, click: "toggleDrawer", x: {show: "drawerOpen", cloak: true}) %>
+        </div>
+      <% end %>
+    </nav>
+  </div>
+  <%= mobile_nav %>
+<% end %>

data/app/components/coco/app/blocks/header/header.js

@@ -0,0 +1,11 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appHeader", () => {
+  return {
+    drawerOpen: false,
+
+    toggleDrawer() {
+      this.drawerOpen = !this.drawerOpen;
+    },
+  };
+});

data/app/components/coco/app/blocks/header/header.rb

@@ -0,0 +1,35 @@
+module Coco
+  module App
+    module Blocks
+      class Header < Coco::Component
+        renders_one :primary_nav, ->(**kwargs) do
+          Coco::App::Elements::ButtonGroup.new(
+            theme: :text_neutral_light,
+            collapsible: false,
+            size: :xs,
+            **kwargs
+          )
+        end
+
+        renders_one :secondary_nav, ->(**kwargs) do
+          Coco::App::Elements::ButtonGroup.new(
+            theme: :text_neutral_light,
+            collapsible: false,
+            size: :xs,
+            **kwargs
+          )
+        end
+
+        renders_one :mobile_nav, ->(**kwargs) do
+          Coco::App::Blocks::NavDrawer.new(**kwargs)
+        end
+
+        attr_reader :home_path
+
+        def initialize(home_path: nil, **)
+          @home_path = home_path
+        end
+      end
+    end
+  end
+end

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

@@ -1,9 +1,54 @@
 @layer components {
   [data-coco][data-component="app-nav-drawer"] {
-    @apply fixed top-0 left-0 bottom-0 h-screen w-[340px] bg-white shadow-2xl overflow-hidden;
+    @apply pointer-events-none fixed top-14 left-0 bottom-0 w-screen overflow-hidden;
+    height: var(--app-height);
 
-    .nav-inner {
-      @apply p-4;
+    .nav-drawer-overlay {
+      @apply pointer-events-none absolute inset-0 bg-black opacity-0 transition-opacity;
+    }
+
+    .nav-drawer-content {
+      @apply absolute top-0 right-0 bottom-0 bg-white overflow-auto translate-x-full transition-transform py-4;
+      max-width: 340px;
+      min-width: 280px;
+      width: fit-content;
+    }
+
+    .nav-drawer-item:last-child {
+      @apply mb-10;
+    }
+
+    .nav-drawer-button {
+      @apply w-full text-content-dark-2 hover:text-content-dark-1 hover:bg-background-light-3;
+
+      .button-inner {
+        @apply mx-0 px-4 py-3;
+      }
+    }
+
+    .nav-drawer-heading {
+      @apply mt-4 mb-2 mx-4 border-b text-content-dark-1/50 border-gray-300 pb-3;
+    }
+
+    .nav-drawer-divider {
+      @apply h-0 border-t border-gray-300 my-3;
+    }
+
+    [data-component="app-notice"] {
+      @apply mb-4;
+    }
+
+    .drawer-open & {
+      @apply pointer-events-auto;
+
+      .nav-drawer-overlay {
+        @apply pointer-events-auto opacity-60;
+        backdrop-filter: blur(2px);
+      }
+
+      .nav-drawer-content {
+        @apply pointer-events-auto translate-x-0 shadow-2xl;
+      }
     }
   }
 }

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

@@ -1,8 +1,16 @@
-<%= render component_tag(x: { data: "appNavDrawer" }) do %>
-  <div class="nav-inner">
-    <div class="nav-header">
-      <%= coco_button(icon: :x, theme: nil) %>
-    </div>
-    <%= content %>
+<%= render component_tag(
+  x: {
+    data: "appNavDrawer",
+    "@keydown.escape.document": "close",
+    "@resize.window": "close"
+  }
+) do %>
+  <div class="nav-drawer-overlay" @click="close"></div>
+  <div class="nav-drawer-content" x-ref="content" x-trap.noscroll.inert.noreturn="active">
+    <% items.each do |item| %>
+      <div class="nav-drawer-item">
+        <%= item %>
+      </div>
+    <% end %>
   </div>
 <% end %>