coveragebook_components 0.7.10 → 0.8.0.beta.2

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

@@ -2,6 +2,23 @@ import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("appNavDrawer", () => {
   return {
-    open: false,
+    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;
+    },
   };
 });

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

@@ -2,7 +2,32 @@ module Coco
   module App
     module Blocks
       class NavDrawer < Coco::Component
-        include Coco::AppHelper
+        renders_many :items, types: {
+          html: ->(&block) { block.call },
+          divider: ->(&block) { tag.div class: "nav-drawer-divider" },
+          heading: ->(text, **kwargs, &block) do
+            tag.h4(text, class: "nav-drawer-heading")
+          end,
+          button: ->(*args, **kwargs, &block) do
+            coco_button(*args, **kwargs, theme: nil, size: :md, fit: :full, class: "nav-drawer-button", &block)
+          end
+        }
+
+        def with_divider(...)
+          with_item_divider(...)
+        end
+
+        def with_html(...)
+          with_item_html(...)
+        end
+
+        def with_button(...)
+          with_item_button(...)
+        end
+
+        def with_heading(...)
+          with_item_heading(...)
+        end
       end
     end
   end

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

@@ -0,0 +1,104 @@
+@layer components {
+  [data-coco][data-component="app-sidebar-nav"] {
+    @apply bg-background-dark-2 antialiased;
+    @apply w-full h-14 grid grid-rows-1;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
+
+    .nav-action {
+      .nav-item-label {
+        @apply hidden !text-content-primary-inverse-vivid;
+      }
+    }
+
+    .nav-actions-button {
+      @apply bg-content-primary-inverse-vivid transition-all text-content-light-1;
+      @apply h-10 w-10 flex items-center justify-center mx-auto rounded-full cursor-pointer;
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      .coco-icon {
+        @apply h-6 w-6;
+      }
+    }
+
+    .nav-item {
+      @apply hidden sm:contents h-full justify-center w-full;
+    }
+
+    .mobile-nav-item {
+      @apply flex sm:contents;
+    }
+
+    @media screen(sm) {
+      @apply sidebar-nav-vertical-condensed;
+    }
+
+    @media screen(lg) {
+      @apply sidebar-nav-vertical;
+    }
+
+    @media screen(letterbox) {
+      @apply sidebar-nav-vertical-condensed;
+    }
+  }
+
+  .sidebar-nav-action {
+    @apply flex items-start p-1;
+
+    .sidebar-nav-action-icon {
+      @apply flex-none mr-3 text-content-light-1;
+    }
+
+    .sidebar-nav-action-detail {
+      @apply w-full text-left;
+    }
+
+    .sidebar-nav-action-label {
+      @apply mb-0.5 font-semibold text-content-light-1;
+    }
+
+    .sidebar-nav-action-description {
+      @apply text-para-xs;
+    }
+  }
+
+  .sidebar-nav-menu a.sidebar-nav-actions-item {
+    width: 320px;
+  }
+}
+
+@layer utilities {
+  .sidebar-nav-vertical-condensed {
+    @apply block w-18 h-full;
+
+    .nav-action .nav-item-label {
+      @apply block;
+    }
+
+    .nav-actions-button {
+      @apply h-14 w-14 mb-2;
+
+      .coco-icon {
+        @apply w-8 h-8;
+      }
+    }
+  }
+
+  .sidebar-nav-vertical {
+    @apply block w-24 h-full;
+
+    .nav-action .nav-item-label {
+      @apply block;
+    }
+
+    .nav-actions-button {
+      @apply h-[72px] w-[72px];
+
+      .coco-icon {
+        @apply h-10 w-10;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+<%= render component_tag(:nav, x: {data: "appSidebarNav"}) do %>
+  <% if actions? %>
+    <div class="nav-item mobile-nav-item nav-action">
+      <%= render Coco::App::Blocks::SidebarNavItem.new(label: "Add", emphasise: true) do |item| %>
+        <% item.with_icon do %>
+          <span class="nav-actions-button">
+            <%= coco_icon :plus, size: :xl %>
+          </span>
+        <% end %>
+
+        <% item.with_menu do %>
+          <% actions_data.each do |action| %>
+            <%= coco_link(action[:href],
+              **action.except(:label, :description, :href, :icon),
+              theme: nil,
+              class: "sidebar-nav-menu-item sidebar-nav-actions-item") do %>
+              <div class="sidebar-nav-action">
+                <div class="sidebar-nav-action-icon">
+                  <%= coco_icon(action[:icon], size: :md) %>
+                </div>
+                <div class="sidebar-nav-action-detail">
+                  <h4 class="sidebar-nav-action-label">
+                    <%= action[:label] %>
+                  </h4>
+                  <% if action.key?(:description) %>
+                    <div class="sidebar-nav-action-description">
+                      <%= raw action[:description] %>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,28 @@
+import tokens from "@config/tokens.cjs";
+import { CocoComponent } from "@js/coco";
+
+const mobileMaxWidth = parseInt(tokens.app.screens.sm, 10);
+
+export default CocoComponent("appSidebarNav", () => {
+  return {
+    sizeObserver: null,
+    mobileLayout: true,
+
+    init() {
+      this.sizeObserver = new ResizeObserver(
+        Alpine.throttle((entries) => {
+          this.$nextTick(() => {
+            const bodyWidth = entries[0].contentRect.width;
+            this.mobileLayout = bodyWidth < mobileMaxWidth;
+          });
+        }, 20)
+      );
+
+      this.sizeObserver.observe(document.documentElement);
+    },
+
+    destroy() {
+      this.sizeObserver && this.sizeObserver.disconnect();
+    },
+  };
+});

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

@@ -0,0 +1,28 @@
+module Coco
+  module App
+    module Blocks
+      class SidebarNav < Coco::Component
+        renders_many :actions, ->(label, href, icon:, **kwargs) do
+          @actions_data << {label: label, href: href, icon: icon, **kwargs}
+        end
+
+        renders_many :items, ->(label, href, show_on_mobile: true, **kwargs, &block) do
+          tag.div class: ["nav-item", ("mobile-nav-item" if show_on_mobile)] do
+            render Coco::App::Blocks::SidebarNavItem.new(
+              label: label,
+              href: href,
+              active: helpers.current_page?(href),
+              **kwargs
+            ), &block
+          end
+        end
+
+        attr_reader :actions_data
+
+        def initialize(**)
+          @actions_data = []
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,165 @@
+@layer components {
+  [data-coco][data-component="app-sidebar-nav-item"] {
+    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none;
+    @apply flex items-center justify-center px-4 w-full flex-col;
+
+    &[href] {
+      @apply hover:text-content-light-1;
+    }
+
+    .nav-item-icon {
+      @apply block mx-auto transition-colors;
+      @apply w-6 h-6;
+    }
+
+    .nav-item-label {
+      @apply block font-semibold text-label-xxs transition-colors mt-0.5;
+    }
+
+    &.emphasised {
+      .nav-item-icon {
+        @apply sm:text-content-primary-inverse-vivid;
+      }
+    }
+
+    &.active {
+      @apply text-content-light-1;
+    }
+
+    &:hover {
+      .nav-item-icon {
+        @apply text-content-light-1;
+      }
+
+      &.emphasised .nav-item-icon {
+        @apply sm:text-content-primary-inverse-vivid;
+      }
+
+      .nav-item-label {
+        @apply text-content-light-1;
+      }
+    }
+
+    @media screen(sm) {
+      @apply sidebar-nav-item-vertical-condensed;
+    }
+
+    @media screen(lg) {
+      @apply sidebar-nav-item-vertical;
+    }
+
+    @media screen(letterbox) {
+      @apply sidebar-nav-item-vertical-condensed;
+    }
+  }
+
+  .sidebar-nav-menu {
+    @apply bg-content-dark-2 shadow-md sm:rounded-r-md overflow-hidden divide-y divide-content-dark-muted/20;
+
+    [data-placement="bottom"] & {
+      @apply rounded-b-md;
+    }
+
+    [data-placement="top"] & {
+      @apply rounded-t-md;
+    }
+
+    .sidebar-nav-menu-select {
+      @apply focus:ring-0 bg-transparent hover:bg-content-dark-1 active:bg-content-dark-1 border-0 text-content-light-2 w-full font-semibold;
+    }
+
+    .sidebar-nav-menu-item {
+      @apply flex w-full items-center p-3 text-center no-underline bg-content-dark-2 text-content-dark-muted transition;
+    }
+
+    .coco-link.sidebar-nav-menu-item {
+      @apply hover:bg-content-dark-1;
+    }
+
+    .sidebar-nav-menu-item-text {
+      @apply truncate min-w-0 font-semibold text-content-light-1 transition-colors;
+    }
+
+    .sidebar-nav-menu-item-qualifier {
+      @apply ml-auto text-label-sm flex-none pl-4;
+    }
+
+    @apply sidebar-nav-menu-large;
+
+    @media screen(sm) {
+      @apply sidebar-nav-menu-small;
+    }
+
+    @media screen(lg) {
+      @apply sidebar-nav-menu-large;
+    }
+
+    @media screen(letterbox) {
+      @apply sidebar-nav-menu-small;
+    }
+  }
+}
+
+@layer utilities {
+  .sidebar-nav-item-vertical-condensed {
+    @apply block px-2 py-4;
+
+    &[href] {
+      @apply hover:bg-content-dark-1;
+    }
+
+    .nav-item-icon {
+      @apply w-7 h-7;
+    }
+
+    .nav-item-label {
+      @apply mt-1 text-label-xxs;
+    }
+
+    &.active {
+      @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
+    }
+  }
+
+  .sidebar-nav-item-vertical {
+    @apply py-5;
+
+    &[href] {
+      @apply hover:bg-content-dark-1;
+    }
+
+    .nav-item-icon {
+      @apply w-8 h-8;
+    }
+
+    .nav-item-label {
+      @apply text-label-xs;
+    }
+
+    &.active {
+      @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
+    }
+  }
+
+  .sidebar-nav-menu-small {
+    .sidebar-nav-menu-select {
+      @apply text-sm;
+    }
+
+    .sidebar-nav-menu-item {
+      @apply text-sm;
+      width: 240px;
+    }
+  }
+
+  .sidebar-nav-menu-large {
+    .sidebar-nav-menu-select {
+      @apply text-base;
+    }
+
+    .sidebar-nav-menu-item {
+      @apply text-base;
+      width: 280px;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+<%= render component_tag(
+  x: {
+    data: "appSidebarNavItem",
+    "on:click": "if (menu) $event.preventDefault()"
+  },
+  class: {
+    active: active?,
+    emphasised: emphasise?
+  }) do %>
+  <%= icon %>
+  <label class="nav-item-label">
+    <%= label %>
+  </label>
+  <% if menu? || menu_items? %>
+    <template x-ref="menu">
+      <div class="sidebar-nav-menu" x-cloak>
+        <% if menu? %>
+          <%= menu %>
+        <% else %>
+          <%= safe_join(menu_items) %>
+          
+          <% if dropdown_menu_items.any? %>
+            <select
+              x-data
+              class="sidebar-nav-menu-select"
+              @change="$dispatch('navigate', {url: $el.value})">
+              <% if menu_select_placeholder.present? %>
+                <option disabled="disabled" selected="selected"><%= menu_select_placeholder %></option>
+              <% end %>
+              <% dropdown_menu_items.each do |item| %>
+                <option value="<%= item[:href] %>">
+                  <%= item[:label] %>&nbsp;&nbsp;<%= "(#{item[:qualifier]})" if item[:qualifier].present? %>
+                </option>
+              <% end %>
+            </select>
+          <% end %>
+
+          <%= menu_action %>
+        <% end %>
+      </div>
+    </template>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,41 @@
+import tippy from "@libs/tippy";
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appSidebarNavItem", () => {
+  return {
+    menu: null,
+
+    init() {
+      if (this.$refs.menu) {
+        this.menu = tippy(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";
+    },
+  };
+});

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

@@ -0,0 +1,98 @@
+module Coco
+  module App
+    module Blocks
+      class SidebarNavItem < Coco::Component
+        tag_name :a
+        tag_attr :href
+
+        renders_one :icon
+        renders_one :menu
+
+        renders_many :menu_items, ->(label, href, **kwargs) do
+          data = {label: label, href: href, **kwargs}
+          if menu_items.size < max_menu_items
+            SidebarNavMenuItem.new(**data)
+          else
+            dropdown_menu_items << data
+            nil
+          end
+        end
+
+        renders_one :menu_action, ->(*args, **kwargs, &block) do
+          tag.div class: "sidebar-nav-menu-item" do
+            coco_button(*args, theme: :primary, size: :sm, fit: :full, **kwargs, &block)
+          end
+        end
+
+        before_render do
+          if @icon && !icon?
+            with_icon do
+              tag.span(class: "nav-item-icon") do
+                coco_icon(@icon, size: :full)
+              end
+            end
+          end
+        end
+
+        attr_reader :label, :tooltip, :dropdown_menu_items, :max_menu_items
+
+        def initialize(label:, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
+          @label = label
+          @icon = icon
+          @emphasise = emphasise
+          @tooltip = tooltip
+          @active = active
+          @max_menu_items = max_menu_items
+          @menu_select_placeholder = menu_select_placeholder
+          @dropdown_menu_items = []
+        end
+
+        def tooltip?
+          tooltip.present?
+        end
+
+        def active?
+          @active == true
+        end
+
+        def emphasise?
+          @emphasise == true
+        end
+
+        def menu_select_placeholder
+          @menu_select_placeholder || "More items..."
+        end
+
+        class SidebarNavMenuItem < Coco::Component
+          attr_reader :icon, :href, :modal
+
+          def initialize(label:, href:, icon: nil, modal: nil, qualifier: nil, **)
+            @label = label
+            @href = href
+            @icon = icon
+            @modal = modal
+            @qualifier = qualifier
+          end
+
+          def call
+            coco_link(href, theme: nil, modal: modal, class: "sidebar-nav-menu-item") do
+              label
+            end
+          end
+
+          def label
+            tag.span(@label, class: "sidebar-nav-menu-item-text") + qualifier
+          end
+
+          def qualifier
+            if @icon || @qualifier
+              tag.span(class: "sidebar-nav-menu-item-qualifier") do
+                @icon ? coco_icon(icon, size: :sm) : @qualifier
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end