jet_ui 0.2.11 → 0.3.0

data/app/assets/stylesheets/jet_ui/theme.css

@@ -13,6 +13,16 @@
     from { opacity: 0.8; transform: translateX(3rem); }
     to   { opacity: 1;   transform: translateX(0); }
   }
+
+  @keyframes slideRight {
+    from { opacity: 0.8; transform: translateX(-3rem); }
+    to   { opacity: 1;   transform: translateX(0); }
+  }
+
+  @keyframes slideDown {
+    from { opacity: 0.7; transform: translateY(-2rem); }
+    to   { opacity: 1;   transform: translateY(0); }
+  }
 }
 
 :root {
@@ -33,6 +43,8 @@
   --animate-fade-in: fadeIn 0.15s ease-in-out;
   --animate-slide-up: slideUp 0.3s ease-in-out;
   --animate-slide-left: slideLeft 0.3s ease-in-out;
+  --animate-slide-right: slideRight 0.3s ease-in-out;
+  --animate-slide-down: slideDown 0.3s ease-in-out;
 
   /* Radius */
   --radius-btn-xs: calc(var(--radius-md) * 0.75);

data/app/assets/stylesheets/jet_ui.css

@@ -21,6 +21,7 @@
 @import "./jet_ui/sidebar.css";
 @import "./jet_ui/header.css";
 @import "./jet_ui/navbar.css";
+@import "./jet_ui/dialog.css";
 @import "./jet_ui/modal.css";
 @import "./jet_ui/drawer.css";
 @import "./jet_ui/dropdown.css";

data/app/components/jet_ui/dialog/body_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dialog
+    class BodyComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('dialog__body', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/dialog/component.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dialog
+    class Component < JetUi::BaseComponent
+      SIZES = %w[sm md lg xl 2xl 3xl 4xl 5xl 6xl].freeze
+      DEFAULT_SIZE = '2xl'
+
+      POSITIONS = %i[center left right top bottom].freeze
+      DEFAULT_POSITION = :center
+
+      EDGE_POSITIONS = %i[left right top bottom].freeze
+
+      def initialize(title: nil, subtitle: nil, position: DEFAULT_POSITION, size: DEFAULT_SIZE,
+                     id: nil, closable: true, dismissible: true, swipe: true)
+        @title       = title
+        @subtitle    = subtitle
+        @position    = position.to_sym
+        @size        = size.to_s
+        @id          = id
+        @closable    = closable
+        @dismissible = dismissible
+        @swipe       = swipe && edge_position?
+      end
+
+      erb_template <<~ERB
+        <%= container_tag do %>
+          <div class="dialog__panel" data-dialog-target="panel">
+            <%= helpers.jet_ui.dialog_header(title: @title, subtitle: @subtitle, closable: closable?) %>
+            <%= content %>
+            <div class="dialog__flash-slot"></div>
+          </div>
+        <% end %>
+      ERB
+
+      private
+
+      def edge_position?
+        EDGE_POSITIONS.include?(@position)
+      end
+
+      def container_tag(&block)
+        # If @id is provided, we assume it's a sync dialog defined inline on the page.
+        return dialog_tag(id: @id, data: { dialogs_target: 'dialog' }, &block) if @id
+
+        # Async open (e.g. opened via a link with data: { turbo_frame: :dialog }).
+        # The <dialog> shell around this frame is created client-side by DialogsController
+        # before Turbo navigates the frame — see app/assets/javascripts/jet_ui/dialogs_controller.js.
+        return helpers.turbo_frame_tag(:dialog, &block) if helpers.turbo_frame_request?
+
+        # Not a Turbo Frame request (direct visit, new tab) — render as a plain page section.
+        content_tag :div, class: class_names('dialog-page', size_class), &block
+      end
+
+      def dialog_tag(**options, &block)
+        content_tag :dialog, tabindex: '-1', class: dialog_classes, data: dialog_data(options.delete(:data)),
+                             **options, &block
+      end
+
+      def dialog_classes
+        class_names('dialog', "dialog-#{@position}", size_class)
+      end
+
+      def dialog_data(extra)
+        {
+          controller: 'dialog',
+          dialog_position_value: @position,
+          dialog_dismissible_value: @dismissible,
+          dialog_swipe_value: @swipe
+        }.merge(extra || {})
+      end
+
+      def size_class
+        horizontal_edge? ? "h-#{@size}" : "w-#{@size}"
+      end
+
+      def horizontal_edge?
+        %i[top bottom].include?(@position)
+      end
+
+      def closable?
+        @closable && (helpers.turbo_frame_request? || @id)
+      end
+    end
+  end
+end

data/app/components/jet_ui/dialog/footer_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dialog
+    class FooterComponent < JetUi::BaseComponent
+      def initialize(direction: :row, align: :start, justify: :start, bordered: true, **options)
+        @direction = direction
+        @align     = align
+        @justify   = justify
+        @bordered  = bordered
+        @options   = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names(
+          'dialog__footer',
+          { 'dialog__footer-bordered' => @bordered },
+          direction_class,
+          align_class,
+          justify_class,
+          @options[:class]
+        )
+      end
+
+      def direction_class
+        { col: 'flex flex-col gap-2', row: 'flex flex-row gap-2' }[@direction]
+      end
+
+      def align_class
+        { start: 'items-start', center: 'items-center', end: 'items-end' }[@align]
+      end
+
+      def justify_class
+        { start: 'justify-start', center: 'justify-center', end: 'justify-end',
+          between: 'justify-between' }[@justify]
+      end
+    end
+  end
+end

data/app/components/jet_ui/dialog/header_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dialog
+    class HeaderComponent < JetUi::BaseComponent
+      def initialize(title: nil, subtitle: nil, closable: true, bordered: true, **options)
+        @title    = title
+        @subtitle = subtitle
+        @closable = closable
+        @bordered = bordered
+        @options  = options
+      end
+
+      erb_template <<~ERB
+        <div class="<%= classes %>">
+          <div>
+            <% if @title %>
+              <h3 class="dialog__title"><%= @title %></h3>
+            <% end %>
+            <% if @subtitle %>
+              <div class="dialog__subtitle"><%= @subtitle %></div>
+            <% end %>
+            <%= content %>
+          </div>
+
+          <% if @closable %>
+            <button type="button" class="dialog__close" data-action="click->dialog#close" aria-label="Close">
+              <%= helpers.jet_ui.icon('x-mark', size: 6) %>
+            </button>
+          <% end %>
+        </div>
+      ERB
+
+      private
+
+      def classes
+        class_names(
+          'dialog__header',
+          { 'dialog__header-bordered' => @bordered },
+          @options[:class]
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/dialogs/component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dialogs
+    # Mount point for the dialog stack. Renders the `#dialogs` root that DialogsController
+    # manages (see app/assets/javascripts/jet_ui/dialogs_controller.js) plus the sentinel
+    # <turbo-frame id="dialog"> that every async dialog open (data: { turbo_frame: :dialog })
+    # adopts into a freshly built <dialog> shell before Turbo navigates it. Render this once
+    # in the host application's layout.
+    class Component < JetUi::BaseComponent
+      erb_template <<~ERB
+        <div id="dialogs" data-dialogs-target="root" data-turbo-permanent data-turbo-cache="false">
+          <%= helpers.turbo_frame_tag :dialog, data: { dialogs_target: 'sentinel' } %>
+        </div>
+      ERB
+    end
+  end
+end

data/app/components/jet_ui/drawer/body_component.rb

@@ -2,20 +2,8 @@
 
 module JetUi
   module Drawer
-    class BodyComponent < JetUi::BaseComponent
-      def initialize(**options)
-        @options = options
-      end
-
-      def call
-        content_tag :div, content, class: classes, **@options.except(:class)
-      end
-
-      private
-
-      def classes
-        class_names('drawer__body', @options[:class])
-      end
+    # @deprecated Use {JetUi::Dialog::BodyComponent} instead.
+    class BodyComponent < JetUi::Dialog::BodyComponent
     end
   end
 end

data/app/components/jet_ui/drawer/component.rb

@@ -2,52 +2,22 @@
 
 module JetUi
   module Drawer
-    class Component < JetUi::BaseComponent
-      SIZES = %w[sm md lg xl 2xl 3xl 4xl 5xl 6xl].freeze
-      DEFAULT_SIZE = '2xl'
-
-      def initialize(title: nil, subtitle: nil, size: DEFAULT_SIZE, id: nil)
-        @title = title
-        @subtitle = subtitle
-        @size = size
-        @id = id
-      end
-
-      erb_template <<~ERB
-        <%= container_tag do %>
-          <%= helpers.jet_ui.drawer_header(title: @title, subtitle: @subtitle, closable: closable?, id: @id) %>
-          <%= content %>
-        <% end %>
-      ERB
-
-      private
-
-      def container_tag(&block)
-        return sync_dialog(&block) if @id
-        return turbo_frame_dialog(&block) if helpers.turbo_frame_request?
-
-        content_tag :div, class: class_names('mx-auto bg-background', "w-#{@size}"), &block
-      end
-
-      def sync_dialog(&block)
-        dialog_tag(id: @id, data: { drawers_target: 'dialog' }, &block)
-      end
-
-      def turbo_frame_dialog(&block)
-        helpers.turbo_frame_tag :drawer do
-          dialog_tag(id: :drawerDialog, data: { controller: 'drawer' }) do
-            helpers.turbo_frame_tag(:drawerContent, &block)
-          end
-        end
-      end
-
-      def dialog_tag(**options, &block)
-        attrs = { tabindex: '-1', class: class_names('drawer', 'animate-slide-left', "w-#{@size}") }
-        content_tag :dialog, **attrs, **options, &block
+    # @deprecated Use {JetUi::Dialog::Component} with `position: :right` instead.
+    #   Kept as a thin shim so existing `jet_ui.drawer(...)` calls and
+    #   `data: { turbo_frame: :drawer }` links keep working. Will be removed in the next
+    #   major version.
+    class Component < JetUi::Dialog::Component
+      def self.deprecator
+        @deprecator ||= ActiveSupport::Deprecation.new('1.0', 'JetUi')
       end
 
-      def closable?
-        helpers.turbo_frame_request? || @id
+      def initialize(title: nil, subtitle: nil, size: JetUi::Dialog::Component::DEFAULT_SIZE, id: nil)
+        self.class.deprecator.warn(
+          'JetUi::Drawer::Component is deprecated and will be removed in the next major ' \
+          'version. Use JetUi::Dialog::Component with position: :right instead ' \
+          '(jet_ui.dialog).'
+        )
+        super(title: title, subtitle: subtitle, position: :right, size: size, id: id)
       end
     end
   end

data/app/components/jet_ui/drawer/footer_component.rb

@@ -2,44 +2,8 @@
 
 module JetUi
   module Drawer
-    class FooterComponent < JetUi::BaseComponent
-      def initialize(direction: :row, align: :start, justify: :start, bordered: true, **options)
-        @direction = direction
-        @align = align
-        @justify = justify
-        @bordered = bordered
-        @options = options
-      end
-
-      def call
-        content_tag :div, content, class: classes, **@options.except(:class)
-      end
-
-      private
-
-      def classes
-        class_names(
-          'drawer__footer',
-          { 'drawer__footer-bordered' => @bordered },
-          direction_class,
-          align_class,
-          justify_class,
-          @options[:class]
-        )
-      end
-
-      def direction_class
-        { col: 'flex flex-col gap-2', row: 'flex flex-row gap-2' }[@direction]
-      end
-
-      def align_class
-        { start: 'items-start', center: 'items-center', end: 'items-end' }[@align]
-      end
-
-      def justify_class
-        { start: 'justify-start', center: 'justify-center', end: 'justify-end',
-          between: 'justify-between' }[@justify]
-      end
+    # @deprecated Use {JetUi::Dialog::FooterComponent} instead.
+    class FooterComponent < JetUi::Dialog::FooterComponent
     end
   end
 end

data/app/components/jet_ui/drawer/header_component.rb

@@ -2,44 +2,12 @@
 
 module JetUi
   module Drawer
-    class HeaderComponent < JetUi::BaseComponent
-      def initialize(title: nil, subtitle: nil, closable: true, id: nil, bordered: true, **options)
-        @title = title
-        @subtitle = subtitle
-        @closable = closable
-        @id = id
-        @bordered = bordered
-        @options = options
-      end
-
-      erb_template <<~ERB
-        <div class="<%= classes %>">
-          <div>
-            <% if @title %>
-              <h3 class="drawer__title"><%= @title %></h3>
-            <% end %>
-            <% if @subtitle %>
-              <div class="drawer__subtitle"><%= @subtitle %></div>
-            <% end %>
-            <%= content %>
-          </div>
-
-          <% if @closable %>
-            <button type="button" class="drawer__close" data-action="click->drawer#close click->drawers#close" aria-label="Close" data-id="<%= @id %>">
-              <%= helpers.jet_ui.icon("x-mark", size: 6) %>
-            </button>
-          <% end %>
-        </div>
-      ERB
-
-      private
-
-      def classes
-        class_names(
-          'drawer__header',
-          { 'drawer__header-bordered' => @bordered },
-          @options[:class]
-        )
+    # @deprecated Use {JetUi::Dialog::HeaderComponent} instead.
+    class HeaderComponent < JetUi::Dialog::HeaderComponent
+      # `id:` accepted and ignored for signature compatibility with the pre-deprecation API.
+      def initialize(title: nil, subtitle: nil, closable: true, id: nil, bordered: true, # rubocop:disable Lint/UnusedMethodArgument
+                     **options)
+        super(title: title, subtitle: subtitle, closable: closable, bordered: bordered, **options)
       end
     end
   end

data/app/components/jet_ui/modal/body_component.rb

@@ -2,20 +2,8 @@
 
 module JetUi
   module Modal
-    class BodyComponent < JetUi::BaseComponent
-      def initialize(**options)
-        @options = options
-      end
-
-      def call
-        content_tag :div, content, class: classes, **@options.except(:class)
-      end
-
-      private
-
-      def classes
-        class_names('modal__body', @options[:class])
-      end
+    # @deprecated Use {JetUi::Dialog::BodyComponent} instead.
+    class BodyComponent < JetUi::Dialog::BodyComponent
     end
   end
 end

data/app/components/jet_ui/modal/component.rb

@@ -2,52 +2,22 @@
 
 module JetUi
   module Modal
-    class Component < JetUi::BaseComponent
-      SIZES = %w[sm md lg xl 2xl 3xl 4xl 5xl 6xl].freeze
-      DEFAULT_SIZE = '2xl'
-
-      def initialize(title: nil, subtitle: nil, size: DEFAULT_SIZE, id: nil)
-        @title = title
-        @subtitle = subtitle
-        @size = size
-        @id = id
-      end
-
-      erb_template <<~ERB
-        <%= container_tag do %>
-          <%= helpers.jet_ui.modal_header(title: @title, subtitle: @subtitle, closable: closable?, id: @id) %>
-          <%= content %>
-        <% end %>
-      ERB
-
-      private
-
-      def container_tag(&block)
-        return sync_dialog(&block) if @id
-        return turbo_frame_dialog(&block) if helpers.turbo_frame_request?
-
-        content_tag :div, class: class_names('modal modal-page', "w-#{@size}"), &block
-      end
-
-      def sync_dialog(&block)
-        dialog_tag(id: @id, data: { modals_target: 'dialog' }, &block)
-      end
-
-      def turbo_frame_dialog(&block)
-        helpers.turbo_frame_tag :modal do
-          dialog_tag(id: :modalDialog, data: { controller: 'modal' }) do
-            helpers.turbo_frame_tag(:modalContent, &block)
-          end
-        end
-      end
-
-      def dialog_tag(**options, &block)
-        attrs = { tabindex: '-1', class: class_names('modal', 'animate-slide-up', "w-#{@size}") }
-        content_tag :dialog, **attrs, **options, &block
+    # @deprecated Use {JetUi::Dialog::Component} with `position: :center` instead.
+    #   Kept as a thin shim so existing `jet_ui.modal(...)` calls and
+    #   `data: { turbo_frame: :modal }` links keep working. Will be removed in the next
+    #   major version.
+    class Component < JetUi::Dialog::Component
+      def self.deprecator
+        @deprecator ||= ActiveSupport::Deprecation.new('1.0', 'JetUi')
       end
 
-      def closable?
-        helpers.turbo_frame_request? || @id
+      def initialize(title: nil, subtitle: nil, size: JetUi::Dialog::Component::DEFAULT_SIZE, id: nil)
+        self.class.deprecator.warn(
+          'JetUi::Modal::Component is deprecated and will be removed in the next major ' \
+          'version. Use JetUi::Dialog::Component with position: :center instead ' \
+          '(jet_ui.dialog).'
+        )
+        super(title: title, subtitle: subtitle, position: :center, size: size, id: id)
       end
     end
   end

data/app/components/jet_ui/modal/footer_component.rb

@@ -2,44 +2,8 @@
 
 module JetUi
   module Modal
-    class FooterComponent < JetUi::BaseComponent
-      def initialize(direction: :row, align: :start, justify: :start, bordered: true, **options)
-        @direction = direction
-        @align = align
-        @justify = justify
-        @bordered = bordered
-        @options = options
-      end
-
-      def call
-        content_tag :div, content, class: classes, **@options.except(:class)
-      end
-
-      private
-
-      def classes
-        class_names(
-          'modal__footer',
-          { 'modal__footer-bordered' => @bordered },
-          direction_class,
-          align_class,
-          justify_class,
-          @options[:class]
-        )
-      end
-
-      def direction_class
-        { col: 'flex flex-col gap-2', row: 'flex flex-row gap-2' }[@direction]
-      end
-
-      def align_class
-        { start: 'items-start', center: 'items-center', end: 'items-end' }[@align]
-      end
-
-      def justify_class
-        { start: 'justify-start', center: 'justify-center', end: 'justify-end',
-          between: 'justify-between' }[@justify]
-      end
+    # @deprecated Use {JetUi::Dialog::FooterComponent} instead.
+    class FooterComponent < JetUi::Dialog::FooterComponent
     end
   end
 end

data/app/components/jet_ui/modal/header_component.rb

@@ -2,44 +2,12 @@
 
 module JetUi
   module Modal
-    class HeaderComponent < JetUi::BaseComponent
-      def initialize(title: nil, subtitle: nil, closable: true, id: nil, bordered: true, **options)
-        @title = title
-        @subtitle = subtitle
-        @closable = closable
-        @id = id
-        @bordered = bordered
-        @options = options
-      end
-
-      erb_template <<~ERB
-        <div class="<%= classes %>">
-          <div>
-            <% if @title %>
-              <h3 class="modal__title"><%= @title %></h3>
-            <% end %>
-            <% if @subtitle %>
-              <div class="modal__subtitle"><%= @subtitle %></div>
-            <% end %>
-            <%= content %>
-          </div>
-
-          <% if @closable %>
-            <button type="button" class="modal__close" data-action="click->modal#close click->modals#close" aria-label="Close" data-id="<%= @id %>">
-              <%= helpers.jet_ui.icon("x-mark", size: 6) %>
-            </button>
-          <% end %>
-        </div>
-      ERB
-
-      private
-
-      def classes
-        class_names(
-          'modal__header',
-          { 'modal__header-bordered' => @bordered },
-          @options[:class]
-        )
+    # @deprecated Use {JetUi::Dialog::HeaderComponent} instead.
+    class HeaderComponent < JetUi::Dialog::HeaderComponent
+      # `id:` accepted and ignored for signature compatibility with the pre-deprecation API.
+      def initialize(title: nil, subtitle: nil, closable: true, id: nil, bordered: true, # rubocop:disable Lint/UnusedMethodArgument
+                     **options)
+        super(title: title, subtitle: subtitle, closable: closable, bordered: bordered, **options)
       end
     end
   end

data/app/components/jet_ui/turbo_confirm/component.html.erb

@@ -1,20 +1,18 @@
 <dialog id="turbo-confirm" tabindex="-1"
-        class="modal w-2xl animate-slide-up"
+        class="dialog dialog-center w-2xl"
         data-controller="turbo-confirm">
-  <form method="dialog">
-    <div class="modal__header modal__header-bordered">
-      <div>
-        <h3 class="modal__title">Are you absolutely sure?</h3>
-      </div>
-    </div>
+  <div class="dialog__panel">
+    <form method="dialog">
+      <%= helpers.jet_ui.dialog_header(title: 'Are you absolutely sure?', closable: false) %>
 
-    <div class="modal__body">
-      <p>This cannot be undone.</p>
-    </div>
+      <%= helpers.jet_ui.dialog_body do %>
+        <p>This cannot be undone.</p>
+      <% end %>
 
-    <div class="modal__footer modal__footer-bordered flex flex-row gap-2 items-start justify-end">
-      <%= helpers.jet_ui.btn "Cancel", type: :submit, variant: :outline, value: "cancel" %>
-      <%= helpers.jet_ui.btn "Yes, I'm sure", type: :submit, variant: :danger, value: "confirm" %>
-    </div>
-  </form>
+      <%= helpers.jet_ui.dialog_footer justify: :end do %>
+        <%= helpers.jet_ui.btn 'Cancel', type: :submit, variant: :outline, value: 'cancel' %>
+        <%= helpers.jet_ui.btn "Yes, I'm sure", type: :submit, variant: :danger, value: 'confirm' %>
+      <% end %>
+    </form>
+  </div>
 </dialog>