jet_ui 0.2.10 → 0.3.0

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

@@ -0,0 +1,134 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  /*
+   * .dialog is a pure, invisible positioning shell: fixed, sized, anchored to an edge (or
+   * centered). It must never carry a background, shadow, rounded corners, overflow-hidden, or
+   * — most importantly — transform/filter/perspective/contain/will-change, because any of
+   * those would make it a containing block for position: fixed descendants, breaking the
+   * flash portal (see dialogs_controller.js's #portalFlash — .dialog__flash-slot is a sibling
+   * of .dialog__panel for exactly this reason, not a descendant of it).
+   *
+   * All visible chrome (background, shadow, rounded corners, clipping) and the enter animation
+   * live on .dialog__panel instead, so the whole visible card animates as one piece instead of
+   * the chrome popping in instantly while only the content inside it slides/fades.
+   */
+  .dialog {
+    @apply fixed hidden p-0 m-0 border-0 bg-transparent;
+    @apply animate-slide-up;
+  }
+
+  .dialog[open] {
+    @apply flex flex-col;
+  }
+
+  .dialog::backdrop {
+    @apply bg-overlay;
+  }
+
+  .dialog-center {
+    @apply inset-0 m-auto h-fit min-h-24 max-w-11/12 max-h-11/12;
+  }
+
+  .dialog-left {
+    @apply animate-slide-right;
+    @apply inset-y-0 left-0 right-auto h-full max-h-full;
+    max-width: min(90%, 1280px);
+  }
+
+  .dialog-right {
+    @apply animate-slide-left;
+    @apply inset-y-0 left-auto right-0 h-full max-h-full;
+    max-width: min(90%, 1280px);
+  }
+
+  .dialog-top {
+    @apply animate-slide-down;
+    @apply inset-x-0 bottom-auto top-0 w-full max-h-11/12 max-w-full;
+  }
+
+  .dialog-bottom {
+    @apply animate-slide-up;
+    @apply inset-x-0 bottom-0 top-auto w-full max-h-11/12 max-w-full;
+  }
+
+  /*
+   * A remote dialog's content arrives inside a <turbo-frame id="dialog">, which sits between
+   * .dialog and its children — make it transparent to layout so .dialog__panel and
+   * .dialog__flash-slot still behave as .dialog's direct flex children.
+   */
+  .dialog > turbo-frame {
+    display: contents;
+  }
+
+  .dialog__panel {
+    @apply relative flex flex-col flex-1 overflow-hidden;
+    @apply shadow-sm bg-card rounded-modal;
+  }
+
+  .dialog-left .dialog__panel {
+    @apply rounded-l-none;
+  }
+
+  .dialog-right .dialog__panel {
+    @apply rounded-r-none;
+  }
+
+  .dialog-top .dialog__panel {
+    @apply rounded-t-none;
+  }
+
+  .dialog-bottom .dialog__panel {
+    @apply rounded-b-none;
+  }
+
+  .dialog__header {
+    @apply flex items-start justify-between flex-shrink-0 p-4 px-6 backdrop-blur-sm bg-card/70;
+  }
+
+  .dialog__header-bordered {
+    @apply border-b border-border;
+  }
+
+  .dialog__title {
+    @apply text-xl font-semibold leading-tight text-foreground;
+  }
+
+  .dialog__subtitle {
+    @apply mt-1 text-sm text-muted-foreground;
+  }
+
+  .dialog__close {
+    @apply inline-flex items-center p-1 ml-auto text-sm transition-all duration-300 bg-transparent rounded-full cursor-pointer outline-0;
+    @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .dialog__body {
+    @apply flex-1 min-h-0 px-6 py-6 overflow-auto;
+  }
+
+  .dialog__footer {
+    @apply flex-shrink-0 w-full p-4 backdrop-blur-sm bg-card/70;
+  }
+
+  .dialog__footer-bordered {
+    @apply border-t border-border;
+  }
+
+  /*
+   * Zero-size anchor the flash frame is portaled into (see dialogs_controller.js) so it is
+   * painted inside the topmost dialog's top-layer subtree. Deliberately a *sibling* of
+   * .dialog__panel, not nested inside it — .dialog__panel carries the enter animation
+   * (transform), which would otherwise turn it into a containing block for the portaled
+   * flash frame's position: fixed. display:contents keeps this slot itself out of the
+   * flex flow entirely.
+   */
+  .dialog__flash-slot {
+    display: contents;
+  }
+
+  /* Direct (non-Turbo-Frame, non-dialog) page render — e.g. a dialog URL visited directly. */
+  .dialog-page {
+    @apply mt-4 mx-auto;
+  }
+}

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/flash/component.rb

@@ -34,8 +34,8 @@ module JetUi
       def item_data
         attrs = { controller: 'flash', action: 'turbo:morph@window->flash#connect' }
         if @dismissible
-          attrs[:flash_dismiss_after_value] = DISMISS_AFTER
-          attrs[:flash_show_delay_value]    = SHOW_DELAY
+          attrs[:'flash-dismiss-after-value'] = DISMISS_AFTER
+          attrs[:'flash-show-delay-value']    = SHOW_DELAY
         end
         attrs
       end

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

@@ -16,9 +16,7 @@ module JetUi
       def call
         icon_name = @name.presence || content.to_s.strip
         svg = File.read(ICONS_PATH.join("#{icon_name}.svg"))
-        # rubocop:disable Rails/OutputSafety
-        svg.sub('<svg', "<svg #{html_attributes(icon_name)}").html_safe
-        # rubocop:enable Rails/OutputSafety
+        svg.sub('<svg', "<svg #{html_attributes(icon_name)}").html_safe # rubocop:disable Rails/OutputSafety
       end
 
       private

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