plutonium 0.10.3 → 0.11.0

data/app/views/components/nav_user/nav_user_component.html.erb

@@ -0,0 +1,50 @@
+<div <%= attributes_html %>>
+  <% if avatar_url.present? %>
+    <button
+      type="button"
+      class="flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+      aria-expanded="false"
+      id="user-nav-dropdown-toggle"
+      data-resource-drop-down-target="trigger">
+      <span class="sr-only">Open user menu</span>
+      <img
+        class="w-8 h-8 rounded-full"
+        src="<%= avatar_url %>"
+        alt="avatar" />
+    </button>
+  <% else %>
+    <button
+        type="button"
+        class="flex mx-3 text-sm border border-gray-600 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+        aria-expanded="false"
+        id="user-nav-dropdown-toggle"
+        data-resource-drop-down-target="trigger">
+      <span class="sr-only">Open user menu</span>
+      <svg class="w-8 h-8" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+        <path fill-rule="evenodd" d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z" clip-rule="evenodd"/>
+      </svg>
+    </button>
+  <% end %>
+  <!-- Dropdown menu -->
+  <div
+    class="hidden z-50 my-4 w-56 text-base list-none bg-white divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600 rounded-xl"
+    data-resource-drop-down-target="menu">
+    <div class="py-3 px-4">
+      <% if name.present? %>
+      <span
+        class="block text-sm font-semibold text-gray-900 dark:text-white">
+        <%= name %>
+      </span>
+      <% end %>
+      <span
+        class="block text-sm text-gray-900 truncate dark:text-white">
+        <%= email %>
+      </span>
+    </div>
+
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+
+  </div>
+</div>

data/app/views/components/nav_user/nav_user_component.rb

@@ -0,0 +1,32 @@
+module PlutoniumUi
+  class NavUserComponent < PlutoniumUi::Base
+    renders_many :sections, "PlutoniumUi::NavUserSectionComponent"
+
+    option :email
+    option :name, optional: true
+    option :avatar_url, optional: true
+    option :logout_url, optional: true
+
+    private
+
+    def base_attributes
+      # base attributes go here
+      {
+        classname: "nav-user",
+        controller: "nav-user resource-drop-down"
+      }
+    end
+
+    def before_render
+      return unless logout_url.present?
+
+      content # get block to execute so our link gets added at the very end
+
+      with_section do |section|
+        section.with_link url: logout_url, label: "Sign out", data: {turbo: false}, classname: "rounded-b-lg"
+      end
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :nav_user, to: PlutoniumUi::NavUserComponent

data/app/views/components/nav_user_link/nav_user_link_component.html.erb

@@ -0,0 +1,7 @@
+<a <%= attributes_html %>>
+  <span class="flex items-center">
+    <%= leading if leading.present? %>
+    <%= label %>
+  </span>
+  <%= trailing if trailing.present? %>
+</a>

data/app/views/components/nav_user_link/nav_user_link_component.rb

@@ -0,0 +1,23 @@
+module PlutoniumUi
+  class NavUserLinkComponent < PlutoniumUi::Base
+    renders_one :leading
+    renders_one :trailing
+
+    option :label
+    option :url, as: :href
+
+    private
+
+    def base_attributes
+      # base attributes go here
+      {
+        id: "nav-user-link-#{label.parameterize}",
+        classname: "nav-user-link flex justify-between items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+        controller: "nav-user-link",
+        href:
+      }
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :nav_user_link, to: PlutoniumUi::NavUserLinkComponent

data/app/views/components/nav_user_section/nav_user_section_component.html.erb

@@ -0,0 +1,7 @@
+<ul <%= attributes_html %>>
+  <% links.each do |link| %>
+    <li>
+      <%= link %>
+    </li>
+  <% end %>
+</ul>

data/app/views/components/nav_user_section/nav_user_section_component.rb

@@ -0,0 +1,18 @@
+module PlutoniumUi
+  class NavUserSectionComponent < PlutoniumUi::Base
+    renders_many :links, "PlutoniumUi::NavUserLinkComponent"
+
+    private
+
+    def base_attributes
+      # base attributes go here
+      {
+        classname: "nav-user-section text-gray-700 dark:text-gray-300",
+        controller: "nav-user-section",
+        aria: {labelledby: "user-nav-dropdown-toggle"}
+      }
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :nav_user_section, to: PlutoniumUi::NavUserSectionComponent

data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_component.html.erb

@@ -1,6 +1,4 @@
-<div data-controller="nested-resource-form-fields"
-      data-nested-resource-form-fields-limit-value="<%= limit %>"
-      <%= render_component_attributes %>>
+<div <%= attributes_html %>>
   <h2 class="text-lg font-bold dark:text-white ">
     <%= label %>
   </h2>

data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_component.rb

@@ -1,5 +1,5 @@
-module Plutonium::Ui
-  class NestedResourceFormFieldsComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class NestedResourceFormFieldsComponent < PlutoniumUi::Base
     option :name
     option :resource_class
     option :form
@@ -10,8 +10,14 @@ module Plutonium::Ui
     option :update_only, optional: true
     option :limit, optional: true
 
-    def base_classname
-      "mt-6 mb-4"
+    def base_attributes
+      {
+        classname: "mt-6 mb-4",
+        controller: "nested-resource-form-fields",
+        data: {
+          "nested-resource-form-fields-limit-value": limit
+        }
+      }
     end
 
     def label
@@ -20,4 +26,4 @@ module Plutonium::Ui
   end
 end
 
-Plutonium::ComponentRegistry.register :nested_resource_form_fields, to: Plutonium::Ui::NestedResourceFormFieldsComponent
+Plutonium::ComponentRegistry.register :nested_resource_form_fields, to: PlutoniumUi::NestedResourceFormFieldsComponent

data/app/views/components/pagination/pagination_component.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="pagination" <%= render_component_attributes %>>
+<div <%= attributes_html %>>
   <%== pagy_info(pager) %>
   <% if pager.pages > 1 %>
     <%== pagy_nav(pager) %>

data/app/views/components/pagination/pagination_component.rb

@@ -1,7 +1,7 @@
 require "pagy"
 
-module Plutonium::Ui
-  class PaginationComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class PaginationComponent < PlutoniumUi::Base
     include Pagy::Frontend
 
     option :pager
@@ -9,10 +9,6 @@ module Plutonium::Ui
     option :nav_aria_label, optional: true
     option :nav_i18n_key, optional: true
 
-    def classname
-      "flex flex-col items-center space-y-2 p-6 #{super}"
-    end
-
     def pagy_nav(pagy, **vars)
       p_id = %( id="#{pagy_id}") if pagy_id
       link = pagy_link_proc(pagy, link_extra: "class=\"#{default_link_classes} #{page_link_classes}\"")
@@ -52,6 +48,13 @@ module Plutonium::Ui
 
     private
 
+    def base_attributes
+      {
+        classname: "flex flex-col items-center space-y-2 p-6",
+        controller: "pagination"
+      }
+    end
+
     def prev_html(pagy, text: pagy_t("pagy.prev"))
       link = pagy_link_proc(pagy, link_extra: "class=\"#{default_link_classes} #{page_link_classes} rounded-s-lg\"")
 
@@ -88,4 +91,4 @@ module Plutonium::Ui
   end
 end
 
-Plutonium::ComponentRegistry.register :pagination, to: Plutonium::Ui::PaginationComponent
+Plutonium::ComponentRegistry.register :pagination, to: PlutoniumUi::PaginationComponent

data/app/views/components/panel/panel_component.html.erb

@@ -1,10 +1,17 @@
 <%= render_component :block, rounded: :all do %>
-  <div <%= render_component_attributes %>>
-    <% if title.present? %>
-      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-        <%= title %>
-      </h5>
-    <% end %>
+  <div <%= attributes_html %>>
+    <div class="flex justify-between items-center mb-4">
+      <% if title.present? %>
+        <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          <%= title %>
+        </h5>
+      <% end %>
+      <div class="flex">
+        <% actions.each do |action| %>
+          <%= action %>
+        <% end %>
+      </div>
+    </div>
     <%= content %>
   </div>
 <% end %>

data/app/views/components/panel/panel_component.rb

@@ -1,11 +1,17 @@
-module Plutonium::Ui
-  class PanelComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class PanelComponent < PlutoniumUi::Base
+    renders_many :actions
+
     option :title, optional: true
 
-    def classname
-      "p-4 #{super}"
+    private
+
+    def base_attributes
+      {
+        classname: "p-4"
+      }
     end
   end
 end
 
-Plutonium::ComponentRegistry.register :panel, to: Plutonium::Ui::PanelComponent
+Plutonium::ComponentRegistry.register :panel, to: PlutoniumUi::PanelComponent

data/app/views/components/resource_header/resource_header_component.html.erb

@@ -0,0 +1,81 @@
+<nav <%= attributes_html %>>
+  <div class="flex flex-wrap justify-between items-center">
+    <div class="flex justify-start items-center">
+      <button
+        data-drawer-target="drawer-navigation"
+        data-drawer-toggle="drawer-navigation"
+        aria-controls="drawer-navigation"
+        class="p-2 mr-2 text-gray-600 rounded-lg cursor-pointer lg:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white">
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+        <svg
+          aria-hidden="true"
+          class="hidden w-6 h-6"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            clip-rule="evenodd"></path>
+        </svg>
+        <span class="sr-only">Toggle sidebar</span>
+      </button>
+      <% if brand_name.present? || brand_logo.present? %>
+        <a href="<%= root_path %>" class="flex items-center justify-between md:min-w-60">
+          <%= brand_logo if brand_logo.present? %>
+          <% if brand_name.present? %>
+          <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden xs:block">
+            <%= brand_name %>
+          </span>
+          <% end %>
+        </a>
+      <% end %>
+
+      <%= content %>
+       <%#
+        <form action="#" method="GET" class="hidden md:block md:pl-2">
+          <label for="topbar-search" class="sr-only">Search</label>
+          <div class="relative md:w-64">
+            <div
+              class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+              <svg
+                class="w-5 h-5 text-gray-500 dark:text-gray-200"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"></path>
+              </svg>
+            </div>
+            <input
+              type="text"
+              name="email"
+              id="topbar-search"
+              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+              placeholder="Search" />
+          </div>
+        </form>
+      %>
+    </div>
+    <% if actions.present? %>
+      <div class="flex items-center lg:order-2">
+        <% actions.each do |action| %>
+          <%= action %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</nav>

data/app/views/components/resource_header/resource_header_component.rb

@@ -0,0 +1,20 @@
+module PlutoniumUi
+  class ResourceHeaderComponent < PlutoniumUi::Base
+    renders_one :brand_logo
+    renders_many :actions
+
+    option :brand_name
+
+    private
+
+    def base_attributes
+      # base attributes go here
+      {
+        classname: "resource-header bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50",
+        controller: "resource-header"
+      }
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :resource_header, to: PlutoniumUi::ResourceHeaderComponent

data/app/views/components/resource_layout/resource_layout_component.html.erb

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html <%= attributes_html %>>
+  <head>
+    <title><%= page_title %></title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= meta %>
+    <%= favicon %>
+    <%= fonts %>
+    <%= assets %>
+    <%= after_head %>
+    <%# <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css" integrity="sha512-/FHUK/LsH78K9XTqsR9hbzr21J8B8RwHR/r8Jv9fzry6NVAOVIGFKQCNINsbhK7a1xubVu2r5QZcz2T9cKpubw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js" integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.css" integrity="sha512-GvqWM4KWH8mbgWIyvwdH8HgjUbyZTXrCq0sjGij9fDNiXz3vJoy3jCcAaWNekH2rJe4hXVWCJKN+bEW8V7AAEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.6.0/slimselect.min.js" integrity="sha512-0E8oaoA2v32h26IycsmRDShtQ8kMgD91zWVBxdIvUCjU3xBw81PV61QBsBqNQpWkp/zYJZip8Ag3ifmzz1wCKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> %>
+  </head>
+  <body class="<%= body_classname %>">
+    <%= header %>
+    <%= sidebar %>
+    <main class="<%= build_main_classname %>">
+      <%= render "flash" %>
+      <%= content %>
+    </main>
+  </body>
+</html>
+
+<%#= modal_frame_tag do %>
+  <%#= yield(:modal) %>
+<%# end %>

data/app/views/components/resource_layout/resource_layout_component.rb

@@ -0,0 +1,39 @@
+module PlutoniumUi
+  class ResourceLayoutComponent < PlutoniumUi::Base
+    renders_one :meta
+    renders_one :favicon
+    renders_one :fonts
+    renders_one :assets
+    renders_one :after_head
+    renders_one :header
+    renders_one :sidebar
+
+    option :page_title
+    option :lang
+    option :body_classname, default: -> { "antialiased bg-gray-50 dark:bg-gray-900" }
+    option :main_classname, default: -> { "p-4 h-auto" }
+    option :header_adjustment, default: -> { "pt-20" }
+    option :sidebar_adjustment, default: -> { "lg:ml-64" }
+
+    private
+
+    def base_attributes
+      # base attributes go here
+      {
+        classname: "resource-layout",
+        controller: "resource-layout color-mode",
+        lang:
+      }
+    end
+
+    def build_main_classname
+      classname = Array(main_classname)
+      classname += Array(header_adjustment) if header.present?
+      classname += Array(sidebar_adjustment) if sidebar.present?
+
+      classname.join " "
+    end
+  end
+end
+
+Plutonium::ComponentRegistry.register :resource_layout, to: PlutoniumUi::ResourceLayoutComponent

data/app/views/components/sidebar/sidebar_component.html.erb

@@ -55,36 +55,6 @@
     </div>
     -->
 
-    <script>
-      function updateColorMode() {
-        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-          document.documentElement.classList.add('dark')
-        } else {
-          document.documentElement.classList.remove('dark')
-        }
-      }
-
-      function setLightColorMode() {
-        // Whenever the user explicitly chooses light mode
-        localStorage.theme = 'light'
-        updateColorMode()
-      }
-
-      function setDarkColorMode() {
-        // Whenever the user explicitly chooses dark mode
-        localStorage.theme = 'dark'
-        updateColorMode()
-      }
-
-      function setSystemColorMode() {
-        // Whenever the user explicitly chooses to respect the OS preference
-        localStorage.removeItem('theme')
-        updateColorMode()
-      }
-
-      updateColorMode()
-    </script>
 
     <!-- Color Modes -->
     <div data-controller="resource-drop-down">
@@ -105,7 +75,7 @@
               type="button"
               class="w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600"
               role="menuitem"
-              onclick="setLightColorMode()"
+              data-action="click->color-mode#setLightColorMode"
             >
               <div class="flex justify-start">
                 <svg class="w-6 h-6 me-2 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -120,7 +90,7 @@
               type="button"
               class="w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600"
               role="menuitem"
-              onclick="setDarkColorMode()"
+              data-action="click->color-mode#setDarkColorMode"
             >
               <div class="flex justify-start">
                 <svg class="w-6 h-6 me-2 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
@@ -135,7 +105,7 @@
               type="button"
               class="w-full block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600"
               role="menuitem"
-              onclick="setSystemColorMode()"
+              data-action="click->color-mode#setSystemColorMode"
             >
               <div class="flex justify-start">
                 <svg class="w-6 h-6 me-2 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">

data/app/views/components/sidebar/sidebar_component.rb

@@ -1,5 +1,5 @@
-module Plutonium::Ui
-  class SidebarComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class SidebarComponent < PlutoniumUi::Base
     private
 
     def sidebar_class
@@ -12,4 +12,4 @@ module Plutonium::Ui
   end
 end
 
-Plutonium::ComponentRegistry.register :sidebar, to: Plutonium::Ui::SidebarComponent
+Plutonium::ComponentRegistry.register :sidebar, to: PlutoniumUi::SidebarComponent

data/app/views/components/sidebar_menu/sidebar_menu_component.html.erb

@@ -1,3 +1,5 @@
-<ul class="<%= menu_class %>">
-  <%= content %>
+<ul <%= attributes_html %>>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
 </ul>

data/app/views/components/sidebar_menu/sidebar_menu_component.rb

@@ -1,13 +1,17 @@
-module Plutonium::Ui
-  class SidebarMenuComponent < Plutonium::Ui::Base
-    option :separated, optional: true
+module PlutoniumUi
+  class SidebarMenuComponent < PlutoniumUi::Base
+    renders_many :items, "::PlutoniumUi::SidebarMenuItemComponent"
 
     private
 
-    def menu_class
-      "space-y-2 #{separated ? "pt-5 mt-5 border-t border-gray-200 dark:border-gray-700" : nil}"
+    def base_attributes
+      # base attributes go here
+      {
+        classname: "sidebar-menu space-y-2",
+        controller: "sidebar-menu"
+      }
     end
   end
 end
 
-Plutonium::ComponentRegistry.register :sidebar_menu, to: Plutonium::Ui::SidebarMenuComponent
+Plutonium::ComponentRegistry.register :sidebar_menu, to: PlutoniumUi::SidebarMenuComponent