ariadne_view_components 0.0.96.13 → 0.0.97.1

data/app/components/ariadne/ui/dialog/component.html.erb

@@ -1,18 +1,13 @@
-<div
-  data-controller="<%= stimulus_name %>"
-  data-action="click@window-><%= stimulus_name %>#windowClick">
-  <% if reveal_button? %>
-    <%= reveal_button %>
-  <% elsif reveal_link? %>
-    <%= reveal_link %>
-  <% end %>
+<% unless reveal? %>
+  <%# Render only the dialog tag when no reveal trigger is provided %>
   <dialog
     class="<%= html_attrs[:class] %>"
     data-<%= stimulus_name %>-target="dialog"
+    data-controller="<%= stimulus_name %>"
     <%= html_attributes %>>
     <div class="ariadne:flex ariadne:flex-col ariadne:space-y-2 ariadne:text-center ariadne:sm:text-left">
       <span id="<%= dialog_id %>-title" class="ariadne:text-lg ariadne:font-semibold"><%= title %></span>
-  <div data-labelled-by="<%= labelledby %>">
+  <div data-labelled-by="<%= labelledby %>" data-described-by="<%= describedby %>">
     <%= body %>
   </div>
   <% if footer? %>
@@ -21,10 +16,36 @@
 </div>
 <div class="ariadne:absolute ariadne:end-3 ariadne:top-3">
   <%= render Ariadne::UI::Button::Component.new(
-          scheme: :nude,
-          size: :xs,
-          html_attrs: { "data-action": "click->#{stimulus_name}#close", aria: { label: dialog_close_label } }).as_icon(icon: "x-mark", variant: :outline) %>
-</div>
+                  scheme: :nude,
+                  size: :xs,
+                  html_attrs: { "data-action": "click->#{stimulus_name}#close", aria: { label: dialog_close_label } }).as_icon(icon: "x-mark", variant: :outline) %>
 </div>
 </dialog>
+<% else %>
+  <%# Render the wrapper div and the reveal trigger when one is provided %>
+  <div
+    data-controller="<%= stimulus_name %>"
+    data-action="click@window-><%= stimulus_name %>#windowClick">
+    <%= reveal %> <%# Render the provided button or link %>
+    <dialog
+      class="<%= html_attrs[:class] %>"
+      data-<%= stimulus_name %>-target="dialog"
+      <%= html_attributes %>>
+      <div class="ariadne:flex ariadne:flex-col ariadne:space-y-2 ariadne:text-center ariadne:sm:text-left">
+        <span id="<%= dialog_id %>-title" class="ariadne:text-lg ariadne:font-semibold"><%= title %></span>
+    <div data-labelled-by="<%= labelledby %>" data-described-by="<%= describedby %>">
+      <%= body %>
+    </div>
+    <% if footer? %>
+      <%= footer %>
+    <% end %>
+  </div>
+  <div class="ariadne:absolute ariadne:end-3 ariadne:top-3">
+    <%= render Ariadne::UI::Button::Component.new(
+                    scheme: :nude,
+                    size: :xs,
+                    html_attrs: { "data-action": "click->#{stimulus_name}#close", aria: { label: dialog_close_label } }).as_icon(icon: "x-mark", variant: :outline) %>
+  </div>
+</dialog>
 </div>
+<% end %>

data/app/components/ariadne/ui/dialog/component.rb

@@ -32,30 +32,34 @@ module Ariadne
         # @param [Symbol] width (:narrow) Indicates the width of the button. Can be either `:narrow` or `:full`.
         option :width, default: proc { :narrow }
 
+        # @!group Slots
+        # @!method reveal_button
         # The button to open the dialog.
         #
-        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Button::Component) %>.
-        renders_one :reveal_button, lambda { |**options|
-          component_data_attrs = {
-            action: "#{Ariadne::UI::Dialog::Component.stimulus_name}#open",
-          }
-
-          options[:html_attrs] ||= {}
-          options[:html_attrs][:data] = merge_data_attributes(options[:html_attrs], component_data_attrs)
-          Ariadne::UI::Button::Component.new(**options)
-        }
-
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Button::Component) %>.\
+        # @!method reveal_link
         # A link to open the dialog.
         #
-        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Link::Component) %>.
-        renders_one :reveal_link, lambda { |**options|
-          component_data_attrs = {
-            action: "#{Ariadne::UI::Dialog::Component.stimulus_name}#open",
-          }
-
-          options[:html_attrs] ||= {}
-          options[:html_attrs][:data] = merge_data_attributes(options[:html_attrs], component_data_attrs)
-          Ariadne::UI::Link::Component.new(**options)
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Link::Component) %>.\
+        renders_one :reveal, types: {
+          button: lambda { |**options|
+            component_data_attrs = {
+              action: "#{stimulus_name}#open", # Use the component's stimulus_name method
+            }
+            options[:html_attrs] ||= {}
+            # Ensure merge_data_attributes helper exists and is used correctly
+            options[:html_attrs][:data] = merge_data_attributes(options.fetch(:html_attrs, {}), component_data_attrs)
+            Ariadne::UI::Button::Component.new(**options) # Pass remaining options
+          },
+          link: lambda { |**options|
+            component_data_attrs = {
+              action: "#{stimulus_name}#open", # Use the component's stimulus_name method
+            }
+            options[:html_attrs] ||= {}
+            # Ensure merge_data_attributes helper exists and is used correctly
+            options[:html_attrs][:data] = merge_data_attributes(options.fetch(:html_attrs, {}), component_data_attrs)
+            Ariadne::UI::Link::Component.new(**options) # Pass remaining options
+          },
         }
 
         # The main content within the dialog.
@@ -82,6 +86,9 @@ module Ariadne
             }
           )
 
+          component_data_attrs = {}
+          html_attrs[:data] = merge_data_attributes(html_attrs, component_data_attrs)
+
           html_attrs
         end
 

data/app/components/ariadne/ui/dialog/component.ts

@@ -1,27 +1,87 @@
 import {controllerFactory} from '@utils/createController'
 import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'
 
+// Declare global registry type
+declare global {
+  interface Window {
+    AriadneDialogRegistry?: Record<string, DialogController>
+  }
+}
+
 export default class DialogController extends controllerFactory()({
   targets: {dialog: HTMLDialogElement},
+  // Remove the idValue as it's no longer needed
+  // values: {id: {type: String, default: ''}}
 }) {
-  close(e?:MouseEvent) {
-    if (!this.dialogTarget.open) return
-    this.dialogTarget.close()
-    enableBodyScroll(this.dialogTarget)
+  static values = {
+    dialogId: String // Expect dialogIdValue on the *trigger* element for external opening
+  }
+
+  connect() {
+    // Only register if this controller instance is directly on the <dialog> tag
+    // which indicates it was rendered without an inline reveal trigger.
+    if (this.element.tagName === 'DIALOG') {
+      // Create global registry if it doesn't exist
+      window.AriadneDialogRegistry = window.AriadneDialogRegistry || {}
+      // Use the dialog's actual ID for registration
+      window.AriadneDialogRegistry[this.element.id] = this
+    }
   }
 
   disconnect() {
+    // Only unregister if this controller instance is directly on the <dialog> tag
+    if (this.element.tagName === 'DIALOG') {
+      if (window.AriadneDialogRegistry && window.AriadneDialogRegistry[this.element.id]) {
+        delete window.AriadneDialogRegistry[this.element.id]
+      }
+    }
+    // Ensure scroll lock is released if component is destroyed while open
     this.close()
   }
 
-  open(e: MouseEvent) {
+  close(e?: Event) { // Accept generic Event
+    // Find the actual dialog element, which might be a target or the element itself
+    const dialogElement = this.hasDialogTarget ? this.dialogTarget : this.element as HTMLDialogElement
+    if (!dialogElement.open) return
+    if (e) e.preventDefault(); // Prevent default if called from an event
+    dialogElement.close()
+    enableBodyScroll(dialogElement)
+  }
+
+  open(e?: Event) { // Accept generic Event
+    // Find the actual dialog element
+    const dialogElement = this.hasDialogTarget ? this.dialogTarget : this.element as HTMLDialogElement
+    if (dialogElement.open) return; // Don't re-open if already open
+    if (e) e.preventDefault(); // Prevent default if called from an event
+    dialogElement.showModal()
+    disableBodyScroll(dialogElement, {reserveScrollBarGap: true})
+  }
+
+  // Action called by an external trigger element (button/link)
+  // The trigger element must have:
+  // data-controller="ariadne-ui-dialog"
+  // data-action="click->ariadne-ui-dialog#openDialogExternally"
+  // data-ariadne-ui-dialog-dialog-id-value="the-target-dialog-id"
+  openDialogExternally(e: Event) {
     e.preventDefault();
-    this.dialogTarget.showModal()
-    disableBodyScroll(this.dialogTarget, {reserveScrollBarGap: true})
+    const targetDialogId = this.dialogIdValue; // Read value from the trigger element
+    if (!targetDialogId) {
+      console.error("Dialog trigger clicked without a data-ariadne-ui-dialog-dialog-id-value attribute.");
+      return;
+    }
+
+    const targetDialogController = window.AriadneDialogRegistry?.[targetDialogId];
+    if (targetDialogController) {
+      targetDialogController.open(); // Call open on the *target* dialog controller
+    } else {
+      console.error(`Dialog with ID "${targetDialogId}" not found in registry.`);
+    }
   }
 
   windowClick(e: MouseEvent) {
-    if (e.target === this.dialogTarget) {
+    // Use dialogTarget if available (when controller is on wrapper), otherwise use element (when controller is on dialog)
+    const dialogElement = this.hasDialogTarget ? this.dialogTarget : this.element as HTMLDialogElement
+    if (e.target === dialogElement) {
       this.close()
     }
   }

data/app/components/ariadne/ui/dialog_trigger/component.ts

@@ -0,0 +1,47 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Import DialogController for type reference
+import DialogController from '../dialog/component'
+
+// Declare global registry type
+declare global {
+  interface Window {
+    AriadneDialogRegistry?: Record<string, DialogController>
+  }
+}
+
+interface HTMLDialogElement extends HTMLElement {
+  showModal(): void;
+  close(): void;
+  open: boolean;
+}
+
+export default class DialogTriggerController extends Controller {
+  static values = { 
+    dialogId: String 
+  }
+  
+  // TypeScript property definitions
+  declare readonly dialogIdValue: string
+  
+  openDialog(event: MouseEvent) {
+    event.preventDefault()
+    
+    // Find the dialog in the registry
+    const registry = window.AriadneDialogRegistry || {}
+    const dialogController = registry[this.dialogIdValue]
+    
+    if (dialogController) {
+      // Use the dialog controller's open method
+      dialogController.open()
+    } else {
+      // Fallback to finding by ID if not in registry
+      const dialog = document.getElementById(this.dialogIdValue) as HTMLDialogElement | null
+      if (dialog && dialog.tagName === 'DIALOG') {
+        dialog.showModal()
+      } else {
+        console.warn(`Dialog with ID ${this.dialogIdValue} not found`)
+      }
+    }
+  }
+} 

data/app/frontend/stylesheets/theme.css

@@ -86,7 +86,7 @@
   --theme-color-muted-foreground: oklch(0.71 0.0129 286.07);
   --theme-color-popover: oklch(0.14 0.0044 285.82);
   --theme-color-popover-foreground: oklch(0.98 0 0);
-  --theme-color-card: oklch(0.14 0.0044 285.82);
+  --theme-color-card: oklch(0.195313 0.040625 300);
   --theme-color-card-foreground: oklch(0.98 0 0);
 
   /* Semantic colors */

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.96.13"
+    VERSION = "0.0.97.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.96.13
+  version: 0.0.97.1
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-04-08 00:00:00.000000000 Z
+date: 2025-04-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -163,6 +163,7 @@ files:
 - app/components/ariadne/form/toggle_group/option/component.rb
 - app/components/ariadne/form/validation_message/component.html.erb
 - app/components/ariadne/form/validation_message/component.rb
+- app/components/ariadne/layout/content/README.md
 - app/components/ariadne/layout/content/component.html.erb
 - app/components/ariadne/layout/content/component.rb
 - app/components/ariadne/layout/grid/component.html.erb
@@ -232,6 +233,7 @@ files:
 - app/components/ariadne/ui/dialog/component.ts
 - app/components/ariadne/ui/dialog/footer/component.html.erb
 - app/components/ariadne/ui/dialog/footer/component.rb
+- app/components/ariadne/ui/dialog_trigger/component.ts
 - app/components/ariadne/ui/heroicon/component.html.erb
 - app/components/ariadne/ui/heroicon/component.rb
 - app/components/ariadne/ui/image/component.rb