rails-active-ui 0.3.8 → 0.4.0

data/app/components/comment_reply_group_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# CommentReplyGroup — nested reply group within a Comment.
+#
+# Usage:
+#   Comment { |c|
+#     c.avatar { ... }
+#     c.author { text "Elliot" }
+#     CommentReplyGroup {
+#       CommentReply { |c| ... }
+#     }
+#   }
+
+class CommentReplyGroupComponent < Component
+  attribute :collapsed, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      { "collapsed" => collapsed },
+      "comments"
+    )
+
+    tag.div(**merge_html_options(class: classes)) { @content }
+  end
+end

data/app/components/dimmer_component.rb

@@ -25,6 +25,6 @@ class DimmerComponent < Component
 
     content_el = @content.present? ? tag.div(class: "content") { @content } : nil
 
-    tag.div(class: classes, data: { controller: "fui-dimmer" }) { content_el }
+    tag.div(**merge_html_options(class: classes, data: { controller: "fui-dimmer" })) { content_el }
   end
 end

data/app/components/divider_component.rb

@@ -25,6 +25,6 @@ class DividerComponent < Component
       "divider"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/dropdown_component.rb

@@ -28,6 +28,8 @@ class DropdownComponent < Component
   attribute :disabled,      :boolean, default: false
   attribute :action,        :string,  default: nil
 
+  slot :trigger
+
   def to_s
     classes = class_names(
       "ui",
@@ -49,17 +51,19 @@ class DropdownComponent < Component
     hidden_opts[:name] = name if name
 
     search_el = search ? tag.input(class: "search") : nil
+    trigger_el = @slots[:trigger]
     text_el = if inline
       tag.div(class: "text") { tag.h2(class: "ui header") { placeholder || "" } }
-    else
+    elsif !trigger_el
       tag.div(class: "text") { placeholder || "" }
     end
     menu_el = tag.div(class: "menu") { @content }
 
-    tag.div(class: classes, data: data) {
+    tag.div(**merge_html_options(class: classes, data: data)) {
       safe_join([
         tag.input(**hidden_opts),
         search_el,
+        trigger_el,
         text_el,
         tag.i(class: "dropdown icon"),
         menu_el

data/app/components/embed_component.rb

@@ -25,7 +25,7 @@ class EmbedComponent < Component
     icon_el = tag.i(class: "#{icon} icon")
     placeholder_el = placeholder ? tag.img(class: "placeholder", src: placeholder) : nil
 
-    tag.div(class: "ui embed", data: data) {
+    tag.div(**merge_html_options(class: "ui embed", data: data)) {
       safe_join([ icon_el, placeholder_el, @content ])
     }
   end

data/app/components/emoji_component.rb

@@ -10,6 +10,6 @@ class EmojiComponent < Component
   attribute :name, :string, default: nil
 
   def to_s
-    tag.em(class: "small", data: { emoji: ":#{name}:" })
+    tag.em(**merge_html_options(class: "small", data: { emoji: ":#{name}:" }))
   end
 end

data/app/components/feed_component.rb

@@ -3,20 +3,32 @@
 # Feed — activity/event feed.
 #
 # Usage:
-#   Feed(size: :small) {
-#     text '<div class="event">...</div>'.html_safe
+#   Feed(size: "small") {
+#     FeedEvent { |e| ... }
 #   }
 
 class FeedComponent < Component
-  attribute :size, :string, default: nil
+  attribute :size,      :string,  default: nil
+  attribute :inverted,  :boolean, default: false
+  attribute :connected, :boolean, default: false
+  attribute :ordered,   :boolean, default: false
+  attribute :divided,   :boolean, default: false
+  attribute :disabled,  :boolean, default: false
+  attribute :color,     :string,  default: nil
 
   def to_s
     classes = class_names(
       "ui",
       size,
+      color,
+      { "inverted" => inverted },
+      { "connected" => connected },
+      { "ordered" => ordered },
+      { "divided" => divided },
+      { "disabled" => disabled },
       "feed"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/feed_item_component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+# FeedItem — a single item/event in a Feed.
+#
+# Usage:
+#   FeedItem { |e|
+#     e.label { Image(src: "/images/avatar/small/elliot.jpg") }
+#     e.summary {
+#       LinkTo(class: "user") { "Elliot Fu" }
+#       text " added you as a friend"
+#     }
+#     e.date { "1 Hour Ago" }
+#     e.meta {
+#       LinkTo(class: "like") {
+#         Icon(name: "like")
+#         text " 4 Likes"
+#       }
+#     }
+#     e.extra_text { "Some additional text" }
+#     e.extra_images {
+#       LinkTo { Image(src: "/images/wireframe/image.png") }
+#     }
+#   }
+
+class FeedItemComponent < Component
+  attribute :disabled, :boolean, default: false
+  attribute :color,    :string,  default: nil
+
+  slot :label
+  slot :summary
+  slot :date
+  slot :date_inline
+  slot :meta
+  slot :extra_text
+  slot :extra_images
+
+  def to_s
+    classes = class_names(
+      { "disabled" => disabled },
+      color,
+      "event"
+    )
+
+    label_el = if @slots[:label]
+      tag.div(class: "label") { @slots[:label] }
+    end
+
+    content_parts = []
+
+    # Date can appear at the top of content (outside summary)
+    if @slots[:date]
+      content_parts << tag.div(class: "date") { @slots[:date] }
+    end
+
+    # Summary with optional inline date
+    if @slots[:summary]
+      summary_inner = @slots[:summary]
+      if @slots[:date_inline]
+        summary_inner = safe_join([ summary_inner, tag.div(class: "date") { @slots[:date_inline] } ])
+      end
+      content_parts << tag.div(class: "summary") { summary_inner }
+    end
+
+    if @slots[:extra_text]
+      content_parts << tag.div(class: "extra text") { @slots[:extra_text] }
+    end
+
+    if @slots[:extra_images]
+      content_parts << tag.div(class: "extra images") { @slots[:extra_images] }
+    end
+
+    if @slots[:meta]
+      content_parts << tag.div(class: "meta") { @slots[:meta] }
+    end
+
+    loose_content = @slots.values.any? ? nil : @content.presence
+    content_el = if content_parts.any? || loose_content.present?
+      tag.div(class: "content") { safe_join([ *content_parts, loose_content ]) }
+    end
+
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ label_el, content_el ])
+    }
+  end
+end

data/app/components/field_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+# Field — Fomantic UI field wrapper.
+#
+# Renders <div class="... field"> for use inside forms.
+#
+# Usage:
+#
+#   Field {
+#     Input(icon: "user", icon_position: "left") {
+#       TextField(:email, placeholder: "E-mail address")
+#     }
+#   }
+#
+#   Field(required: true, label: "Email") {
+#     TextField(:email, placeholder: "you@example.com")
+#   }
+
+class FieldComponent < Component
+  attribute :required, :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :error,    :boolean, default: false
+  attribute :warning,  :boolean, default: false
+  attribute :inline,   :boolean, default: false
+  attribute :width,    :string,  default: nil
+  attribute :label,    :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      width,
+      { "required" => required, "disabled" => disabled,
+        "error" => error, "warning" => warning, "inline" => inline },
+      "field"
+    )
+
+    label_el = label ? tag.label(label) : nil
+
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ label_el, @content ].compact)
+    }
+  end
+end

data/app/components/flag_component.rb

@@ -10,6 +10,6 @@ class FlagComponent < Component
   attribute :country, :string, default: nil
 
   def to_s
-    tag.i(class: "#{country} flag")
+    tag.i(**merge_html_options(class: "#{country} flag"))
   end
 end

data/app/components/flyout_component.rb

@@ -34,8 +34,9 @@ class FlyoutComponent < Component
     content_el = @slots[:content] ? tag.div(class: "content") { @slots[:content] } : nil
     actions_el = @slots[:actions] ? tag.div(class: "actions") { @slots[:actions] } : nil
 
-    tag.div(class: classes, data: data) {
-      safe_join([ close_el, header_el, content_el, @content.presence, actions_el ])
+    loose_content = @slots.values.any? ? nil : @content.presence
+    tag.div(**merge_html_options(class: classes, data: data)) {
+      safe_join([ close_el, header_el, content_el, loose_content, actions_el ])
     }
   end
 end

data/app/components/h_stack_component.rb

@@ -28,7 +28,7 @@ class HStackComponent < Component
     opts[:class] = classes.join(" ") unless classes.empty?
     opts[:style] = style_parts unless style_parts.empty?
 
-    tag.div(**opts) { @content }
+    tag.div(**merge_html_options(**opts)) { @content }
   end
 
   private

data/app/components/header_component.rb

@@ -45,14 +45,14 @@ class HeaderComponent < Component
 
     if image && @slots[:header_image]
       # Image header: image outside content div, text + sub header inside content div
-      tag.public_send(tag_name, class: classes) {
+      tag.public_send(tag_name, **merge_html_options(class: classes)) {
         safe_join([
           @slots[:header_image],
           tag.div(class: "content") { @content }
         ])
       }
     else
-      tag.public_send(tag_name, class: classes) {
+      tag.public_send(tag_name, **merge_html_options(class: classes)) {
         safe_join([ icon_el, @content ])
       }
     end

data/app/components/image_component.rb

@@ -41,6 +41,6 @@ class ImageComponent < Component
     opts[:height] = height if height
     opts[:style] = "flex-shrink:0" unless shrink
 
-    tag.img(**opts)
+    tag.img(**merge_html_options(**opts))
   end
 end

data/app/components/input_component.rb

@@ -1,13 +1,23 @@
 # frozen_string_literal: true
 
-# Input — text input fields with icon, labeled, and action variants.
+# Input — Fomantic UI input wrapper.
+#
+# Renders <div class="ui ... input"> with optional icon. The actual <input>
+# element comes from the block (e.g. a form builder TextField) or is
+# auto-generated as a basic <input type="text"> when no block is given.
 #
 # Usage:
-#   Input(placeholder: "Search...", icon: "search")
-#   Input(icon: "users", icon_position: "left", placeholder: "Find users...")
-#   Input(labeled: true) { text "$" }
-#   Input(name: "email", label: "Email", placeholder: "you@example.com")
-#   Input(name: "password", label: "Password", input_type: "password")
+#
+#   # Standalone (no form builder) — auto-generates <input>:
+#   Input(icon: "search", placeholder: "Search...")
+#
+#   # Wrapping a form builder field:
+#   Input(icon: "user", icon_position: "left") {
+#     TextField(:email, placeholder: "E-mail address")
+#   }
+#
+#   # Labeled input:
+#   Input(labeled: true) { Tag { "http://" } }
 
 class InputComponent < Component
   attribute :icon,          :string,  default: nil
@@ -22,54 +32,25 @@ class InputComponent < Component
   attribute :error,         :boolean, default: false
   attribute :inverted,      :boolean, default: false
   attribute :placeholder,   :string,  default: nil
-  attribute :input_type,    :string,  default: "text"
-  attribute :name,          :string,  default: nil
-  attribute :value,         :string,  default: nil
-  attribute :label,         :string,  default: nil
-  attribute :id,            :string,  default: nil
 
   def to_s
-    input_field = input_element
-
-    if label
-      tag.div(class: "field") {
-        safe_join([
-          tag.label(label, for: id || name),
-          input_field
-        ])
-      }
-    else
-      input_field
-    end
-  end
-
-  private
-
-  def input_element
     classes = class_names(
       "ui",
       size,
       { "left icon" => icon && icon_position == "left",
         "icon" => icon && icon_position != "left",
-        "labeled" => labeled, "action" => action, "transparent" => transparent,
-        "fluid" => fluid, "loading" => loading, "disabled" => disabled,
+        "labeled" => labeled, "action" => action,
+        "transparent" => transparent, "fluid" => fluid,
+        "loading" => loading, "disabled" => disabled,
         "error" => error, "inverted" => inverted },
       "input"
     )
 
-    input_opts = { type: input_type }
-    input_opts[:placeholder] = placeholder if placeholder
-    input_opts[:name] = name if name
-    input_opts[:value] = value if value
-    input_opts[:disabled] = "disabled" if disabled
-    input_opts[:id] = id if id
-    input_opts[:aria] = @html_options[:aria] if @html_options&.dig(:aria)
-
     icon_el = icon ? tag.i(class: "#{icon} icon") : nil
-    input_el = tag.input(**input_opts)
+    content = @content.present? ? @content : tag.input(type: "text", placeholder: placeholder)
 
-    tag.div(class: classes) {
-      safe_join([ @content, input_el, icon_el ])
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ content, icon_el ].compact)
     }
   end
 end

data/app/components/item_component.rb

@@ -32,8 +32,9 @@ class ItemComponent < Component
 
     content_el = content_parts.any? ? tag.div(class: "content") { safe_join(content_parts) } : nil
 
-    tag.div(class: "item") {
-      safe_join([ image_el, content_el, @content.presence ])
+    loose_content = @slots.values.any? ? nil : @content.presence
+    tag.div(**merge_html_options(class: "item")) {
+      safe_join([ image_el, content_el, loose_content ])
     }
   end
 end

data/app/components/item_group_component.rb

@@ -25,6 +25,6 @@ class ItemGroupComponent < Component
       "items"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/list_component.rb

@@ -31,9 +31,9 @@ class ListComponent < Component
     )
 
     if ordered
-      tag.ol(class: classes) { @content }
+      tag.ol(**merge_html_options(class: classes)) { @content }
     else
-      tag.div(class: classes) { @content }
+      tag.div(**merge_html_options(class: classes)) { @content }
     end
   end
 end

data/app/components/list_content_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# ListContent — content wrapper within a ListItem.
+#
+# Usage:
+#   ListItem {
+#     Image(src: "avatar.png", class: "avatar")
+#     ListContent {
+#       ListHeader { text "Rachel" }
+#       ListDescription { text "Last seen just now." }
+#     }
+#   }
+
+class ListContentComponent < Component
+  attribute :aligned, :string, default: nil
+  attribute :floated, :string, default: nil
+
+  def to_s
+    classes = class_names(
+      floated && "#{floated} floated",
+      aligned && "#{aligned} aligned",
+      "content"
+    )
+
+    tag.div(**merge_html_options(class: classes)) { @content }
+  end
+end

data/app/components/list_description_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+# ListDescription — description text within a ListItem or ListContent.
+#
+# Usage:
+#   ListItem {
+#     ListContent {
+#       ListHeader { text "Krolewskie Jadlo" }
+#       ListDescription { text "An excellent polish restaurant." }
+#     }
+#   }
+
+class ListDescriptionComponent < Component
+  def to_s
+    tag.div(**merge_html_options(class: "description")) { @content }
+  end
+end

data/app/components/list_header_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# ListHeader — header text within a ListItem or ListContent.
+#
+# Usage:
+#   ListItem {
+#     ListHeader { text "New York City" }
+#     text "A lovely city"
+#   }
+#
+#   ListItem {
+#     ListContent {
+#       ListHeader(href: "#") { text "Rachel" }
+#       ListDescription { text "Last seen just now." }
+#     }
+#   }
+
+class ListHeaderComponent < Component
+  attribute :href, :string, default: nil
+
+  def to_s
+    if href
+      tag.a(**merge_html_options(class: "header", href: href)) { @content }
+    else
+      tag.div(**merge_html_options(class: "header")) { @content }
+    end
+  end
+end

data/app/components/list_item_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+# ListItem — individual item within a List.
+#
+# Usage:
+#   List {
+#     ListItem { text "Apples" }
+#     ListItem(icon: "users") { ListContent { text "Fomantic UI" } }
+#     ListItem(href: "#") { text "Link item" }
+#   }
+
+class ListItemComponent < Component
+  attribute :href,     :string,  default: nil
+  attribute :active,   :boolean, default: false
+  attribute :disabled, :boolean, default: false
+  attribute :icon,     :string,  default: nil
+  attribute :value,    :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      { "active" => active, "disabled" => disabled },
+      "item"
+    )
+
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+    opts = { class: classes }
+    opts[:"data-value"] = value if value
+
+    inner = safe_join([ icon_el, @content ])
+
+    if href
+      tag.a(inner, **merge_html_options(**opts, href: href))
+    else
+      tag.div(inner, **merge_html_options(**opts))
+    end
+  end
+end

data/app/components/loader_component.rb

@@ -28,6 +28,6 @@ class LoaderComponent < Component
       "loader"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/menu_component.rb

@@ -59,6 +59,6 @@ class MenuComponent < Component
       "menu"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/modal_component.rb

@@ -74,8 +74,9 @@ class ModalComponent < Component
     opts = merge_html_options(class: classes, data: data)
     opts[:id] = id if id
 
+    loose_content = @slots.values.any? ? nil : @content.presence
     tag.div(**opts) {
-      safe_join([ close_el, header_el, content_el, @content.presence, actions_el ])
+      safe_join([ close_el, header_el, content_el, loose_content, actions_el ])
     }
   end
 end

data/app/components/nag_component.rb

@@ -18,7 +18,7 @@ class NagComponent < Component
 
     close_el = tag.i(class: "close icon")
 
-    tag.div(class: classes, data: { controller: "fui-nag" }) {
+    tag.div(**merge_html_options(class: classes, data: { controller: "fui-nag" })) {
       safe_join([ close_el, @content ])
     }
   end

data/app/components/overlay_component.rb

@@ -11,6 +11,6 @@
 
 class OverlayComponent < Component
   def to_s
-    tag.div(class: "overlay") { @content }
+    tag.div(**merge_html_options(class: "overlay")) { @content }
   end
 end