coveragebook_components 0.8.2 → 0.8.4

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

@@ -1,153 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-sidebar-nav-item"] {
-    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline flex-none cursor-pointer;
-    @apply flex items-center justify-center px-4 w-full flex-col 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 cursor-pointer;
-    }
-
-    &.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 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 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

@@ -1,45 +0,0 @@
-<%= 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? %>
-    <%= tag.template id: menu_template_id, "x-ref": "menu" do %>
-      <%= tag.div id: menu_id,
-        class: "sidebar-nav-menu",
-        "x-cloak": "" do %>
-        <% if menu? %>
-          <%= menu %>
-        <% else %>
-          <%= safe_join(menu_items) %>
-          
-          <% if dropdown_menu_items.any? %>
-            <select
-              x-data
-              class="sidebar-nav-menu-select"
-              @change="navigateTo($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 %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

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

@@ -1,108 +0,0 @@
-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
-          set_tag_attr(:id, item_id)
-          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, :item_id
-
-        def initialize(label:, id: nil, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
-          @item_id = id
-          @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
-
-        def menu_id
-          "#{item_id}-menu" if item_id.present?
-        end
-
-        def menu_template_id
-          "#{menu_id}-template" if menu_id.present?
-        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