rails-active-ui 0.3.8 → 0.4.0

data/app/components/placeholder_component.rb

@@ -4,21 +4,51 @@
 #
 # Usage:
 #   Placeholder { |c|
-#     c.header_slot {
-#       text '<div class="line"></div><div class="line"></div>'.html_safe
+#     c.header(image: true) {
+#       c.line
+#       c.line
 #     }
 #     c.paragraph {
-#       text '<div class="line"></div><div class="line"></div>'.html_safe
+#       c.line :medium
+#       c.line :short
 #     }
 #   }
+#
+#   Placeholder { |c|
+#     c.image :square
+#   }
+#
+#   Placeholder { |c|
+#     c.line :full
+#     c.line :very_long
+#     c.line :long
+#     c.line :medium
+#     c.line :short
+#     c.line :very_short
+#   }
 
 class PlaceholderComponent < Component
   attribute :fluid,    :boolean, default: false
   attribute :inverted, :boolean, default: false
 
-  slot :header_slot
-  slot :paragraph
-  slot :image_slot
+  def line(length = nil)
+    css = class_names(length&.to_s&.tr("_", " "), "line")
+    @view_context.output_buffer << tag.div(class: css)
+  end
+
+  def header(image: false, &block)
+    css = class_names({ "image" => image }, "header")
+    @view_context.output_buffer << tag.div(class: css) { @view_context.capture(self, &block) }
+  end
+
+  def paragraph(&block)
+    @view_context.output_buffer << tag.div(class: "paragraph") { @view_context.capture(self, &block) }
+  end
+
+  def image(ratio = nil)
+    css = class_names(ratio, "image")
+    @view_context.output_buffer << tag.div(class: css)
+  end
 
   def to_s
     classes = class_names(
@@ -28,12 +58,6 @@ class PlaceholderComponent < Component
       "placeholder"
     )
 
-    header_el = @slots[:header_slot] ? tag.div(class: "header") { @slots[:header_slot] } : nil
-    para_el = @slots[:paragraph] ? tag.div(class: "paragraph") { @slots[:paragraph] } : nil
-    image_el = @slots[:image_slot] ? tag.div(class: "image") { @slots[:image_slot] } : nil
-
-    tag.div(class: classes) {
-      safe_join([ header_el, para_el, image_el, @content.presence ])
-    }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/popup_component.rb

@@ -26,6 +26,6 @@ class PopupComponent < Component
     data[:fui_popup_variation_value] = variation if variation
     data[:fui_popup_on_value] = on if on != "hover"
 
-    tag.span(data: data) { @content }
+    tag.span(**merge_html_options(data: data)) { @content }
   end
 end

data/app/components/progress_component.rb

@@ -41,7 +41,7 @@ class ProgressComponent < Component
     bar_el = tag.div(class: "bar", style: "width:#{percent}%") { @slots[:bar] }
     label_el = @slots[:label] ? tag.div(class: "label") { @slots[:label] } : nil
 
-    tag.div(class: classes, data: { controller: "fui-progress", percent: percent }) {
+    tag.div(**merge_html_options(class: classes, data: { controller: "fui-progress", percent: percent })) {
       safe_join([ bar_el, label_el, @content.presence ])
     }
   end

data/app/components/pusher_component.rb

@@ -13,6 +13,6 @@
 
 class PusherComponent < Component
   def to_s
-    tag.div(class: "pusher") { @content }
+    tag.div(**merge_html_options(class: "pusher")) { @content }
   end
 end

data/app/components/rail_component.rb

@@ -26,6 +26,6 @@ class RailComponent < Component
       "rail"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/rating_component.rb

@@ -34,7 +34,7 @@ class RatingComponent < Component
 
     name_el = name ? tag.input(type: "hidden", name: name, value: rating) : nil
 
-    tag.div(class: classes, data: data) {
+    tag.div(**merge_html_options(class: classes, data: data)) {
       safe_join([ name_el, @content ])
     }
   end

data/app/components/reveal_component.rb

@@ -32,8 +32,9 @@ class RevealComponent < Component
     visible_el = @slots[:visible] ? tag.div(class: "visible content") { @slots[:visible] } : nil
     hidden_el  = @slots[:hidden]  ? tag.div(class: "hidden content") { @slots[:hidden] } : nil
 
-    tag.div(class: classes) {
-      safe_join([ visible_el, hidden_el, @content ])
+    loose_content = @slots.values.any? ? nil : @content
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ visible_el, hidden_el, loose_content ])
     }
   end
 end

data/app/components/row_component.rb

@@ -17,9 +17,11 @@ class RowComponent < Component
   attribute :columns, :integer, default: nil
   attribute :centered, :boolean, default: false
   attribute :stretched, :boolean, default: false
+  attribute :doubling,  :boolean, default: false
   attribute :equal_width, :boolean, default: false
   attribute :only,     :string,  default: nil
   attribute :aligned,  :string,  default: nil
+  attribute :color,    :string,  default: nil
 
   def to_s
     col_word = columns && columns.between?(1, 16) ? NUMBERS[columns - 1] : nil
@@ -28,8 +30,10 @@ class RowComponent < Component
       col_word && "#{col_word} column",
       only && "#{only} only",
       aligned && "#{aligned} aligned",
+      color,
       { "centered" => centered,
         "stretched" => stretched,
+        "doubling" => doubling,
         "equal width" => equal_width },
       "row"
     )

data/app/components/search_component.rb

@@ -37,7 +37,7 @@ class SearchComponent < Component
     }
     results_el = tag.div(class: "results")
 
-    tag.div(class: classes, data: data) {
+    tag.div(**merge_html_options(class: classes, data: data)) {
       safe_join([ input_wrapper, results_el, @content ])
     }
   end

data/app/components/segment_group_component.rb

@@ -31,6 +31,6 @@ class SegmentGroupComponent < Component
       "segments"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/shape_component.rb

@@ -20,6 +20,6 @@ class ShapeComponent < Component
       "shape"
     )
 
-    tag.div(class: classes, data: { controller: "fui-shape" }) { @content }
+    tag.div(**merge_html_options(class: classes, data: { controller: "fui-shape" })) { @content }
   end
 end

data/app/components/sidebar_component.rb

@@ -28,6 +28,6 @@ class SidebarComponent < Component
       "menu"
     )
 
-    tag.div(class: classes, data: { controller: "fui-sidebar", fui_sidebar_transition_value: transition }) { @content }
+    tag.div(**merge_html_options(class: classes, data: { controller: "fui-sidebar", fui_sidebar_transition_value: transition })) { @content }
   end
 end

data/app/components/site_component.rb

@@ -7,6 +7,6 @@
 
 class SiteComponent < Component
   def to_s
-    tag.div(data: { controller: "fui-site" }) { @content }
+    tag.div(**merge_html_options(data: { controller: "fui-site" })) { @content }
   end
 end

data/app/components/slider_component.rb

@@ -39,7 +39,7 @@ class SliderComponent < Component
 
     name_el = name ? tag.input(type: "hidden", name: name, value: value) : nil
 
-    tag.div(class: classes, data: data) {
+    tag.div(**merge_html_options(class: classes, data: data)) {
       safe_join([ name_el, @content ])
     }
   end

data/app/components/state_component.rb

@@ -20,6 +20,6 @@ class StateComponent < Component
     data[:fui_state_class_active_value] = class_active if class_active
     data[:fui_state_class_inactive_value] = class_inactive if class_inactive
 
-    tag.div(data: data) { @content }
+    tag.div(**merge_html_options(data: data)) { @content }
   end
 end

data/app/components/statistic_component.rb

@@ -36,8 +36,9 @@ class StatisticComponent < Component
     value_el = @slots[:value] ? tag.div(class: "value") { @slots[:value] } : nil
     label_el = @slots[:label] ? tag.div(class: "label") { @slots[:label] } : nil
 
-    tag.div(class: classes) {
-      safe_join([ value_el, label_el, @content.presence ])
+    loose_content = @slots.values.any? ? nil : @content.presence
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ value_el, label_el, loose_content ])
     }
   end
 end

data/app/components/step_component.rb

@@ -48,9 +48,9 @@ class StepComponent < Component
     end
 
     if href
-      tag.a(class: classes, href: href) { inner }
+      tag.a(**merge_html_options(class: classes, href: href)) { inner }
     else
-      tag.div(class: classes) { inner }
+      tag.div(**merge_html_options(class: classes)) { inner }
     end
   end
 end

data/app/components/step_group_component.rb

@@ -33,6 +33,6 @@ class StepGroupComponent < Component
       "steps"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/sticky_component.rb

@@ -17,6 +17,6 @@ class StickyComponent < Component
     data[:fui_sticky_pushing_value] = "true" if pushing
     data[:fui_sticky_offset_value] = offset if offset > 0
 
-    tag.div(class: "ui sticky", data: data) { @content }
+    tag.div(**merge_html_options(class: "ui sticky", data: data)) { @content }
   end
 end

data/app/components/style_component.rb

@@ -18,6 +18,6 @@ class StyleComponent < Component
   end
 
   def to_s
-    tag.style { @css&.html_safe }
+    tag.style(**merge_html_options) { @css&.html_safe }
   end
 end

data/app/components/sub_accordion_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# SubAccordion — bare nested accordion wrapper.
+#
+# Renders <div class="accordion"> without the "ui" prefix or Stimulus
+# controller, for use inside an AccordionItem's content slot.
+#
+# Usage:
+#   AccordionItem(active: true) { |i|
+#     i.title { "Level 1" }
+#     i.content {
+#       SubAccordion {
+#         AccordionItem { |i2|
+#           i2.title { "Level 1A" }
+#           i2.content { "Nested content" }
+#         }
+#       }
+#     }
+#   }
+
+class SubAccordionComponent < Component
+  def to_s
+    tag.div(**merge_html_options(class: "accordion")) { @content }
+  end
+end

data/app/components/sub_header_component.rb

@@ -10,6 +10,6 @@
 
 class SubHeaderComponent < Component
   def to_s
-    tag.div(class: "sub header") { @content }
+    tag.div(**merge_html_options(class: "sub header")) { @content }
   end
 end

data/app/components/sub_menu_component.rb

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

data/app/components/table_cell_component.rb

@@ -52,9 +52,9 @@ class TableCellComponent < Component
     opts[:rowspan] = rowspan if rowspan
 
     if heading
-      tag.th(**opts) { @content }
+      tag.th(**merge_html_options(**opts)) { @content }
     else
-      tag.td(**opts) { @content }
+      tag.td(**merge_html_options(**opts)) { @content }
     end
   end
 end

data/app/components/table_component.rb

@@ -106,7 +106,7 @@ class TableComponent < Component
 
     footer_el = @slots[:footer] ? tag.tfoot { @slots[:footer] } : nil
 
-    tag.table(class: classes) {
+    tag.table(**merge_html_options(class: classes)) {
       safe_join([
         tag.thead { tag.tr { safe_join(head_cells) } },
         tag.tbody { safe_join(body_rows) },
@@ -120,7 +120,7 @@ class TableComponent < Component
     footer_el = @slots[:footer] ? tag.tfoot { @slots[:footer] } : nil
     body_el = @content.presence ? tag.tbody { @content } : nil
 
-    tag.table(class: classes) {
+    tag.table(**merge_html_options(class: classes)) {
       safe_join([ header_el, body_el, footer_el ])
     }
   end

data/app/components/tag_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+# Tag — colored labels, tags, and badges.
+#
+# Renders Fomantic-UI's "label" element. Named `Tag` in the DSL to avoid
+# collision with Rails' `label` form helper.
+#
+# Usage:
+#   Tag(color: :blue) { "New" }
+#   Tag(tag_style: true, color: :teal) { "Featured" }
+#   Tag(ribbon: true, color: :red) { "Sale" }
+#   Tag(icon: "mail", detail: "23") { "Mail" }
+
+class TagComponent < Component
+  include Attachable
+
+  attribute :color,      :string,  default: nil
+  attribute :size,       :string,  default: nil
+  attribute :pointing,   :string,  default: nil
+  attribute :corner,     :string,  default: nil
+  attribute :ribbon,     :boolean, default: false
+  attribute :circular,   :boolean, default: false
+  attribute :floating,   :boolean, default: false
+  attribute :tag_style,  :boolean, default: false
+  attribute :detail,     :string,  default: nil
+  attribute :icon,       :string,  default: nil
+  attribute :image,      :boolean, default: false
+  attribute :basic,      :boolean, default: false
+  attribute :horizontal, :boolean, default: false
+  attribute :inverted,   :boolean, default: false
+  attribute :fluid,      :boolean, default: false
+  attribute :disabled,   :boolean, default: false
+  attribute :empty,      :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      size,
+      pointing && "#{pointing} pointing",
+      corner && "#{corner} corner",
+      { "attached" => attached,
+        "ribbon" => ribbon, "circular" => circular, "floating" => floating,
+        "tag" => tag_style, "image" => image, "basic" => basic,
+        "horizontal" => horizontal, "inverted" => inverted,
+        "fluid" => fluid, "disabled" => disabled, "empty" => empty },
+      "label"
+    )
+
+    icon_el = icon ? tag.i(class: "#{icon} icon") : nil
+    detail_el = detail ? tag.div(class: "detail") { detail } : nil
+
+    tag.div(**merge_html_options(class: classes)) {
+      safe_join([ icon_el, @content, detail_el ])
+    }
+  end
+end

data/app/components/tag_group_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+# TagGroup — a group of Tag (label) elements.
+#
+# Usage:
+#   TagGroup {
+#     Tag { "One" }
+#     Tag { "Two" }
+#   }
+#   TagGroup(size: "huge", color: "blue") {
+#     Tag { "Fun" }
+#     Tag { "Happy" }
+#   }
+
+class TagGroupComponent < Component
+  attribute :size,     :string,  default: nil
+  attribute :color,    :string,  default: nil
+  attribute :basic,    :boolean, default: false
+  attribute :tag_style, :boolean, default: false
+  attribute :circular, :boolean, default: false
+
+  def to_s
+    classes = class_names(
+      "ui",
+      size,
+      color,
+      { "basic" => basic, "tag" => tag_style, "circular" => circular },
+      "labels"
+    )
+
+    tag.div(**merge_html_options(class: classes)) { @content }
+  end
+end

data/app/components/text_component.rb

@@ -35,7 +35,7 @@ class TextComponent < Component
     opts[:class] = fui_classes if fui_classes
     opts[:style] = style_parts.join(";") if style_parts.any?
 
-    tag.span(**opts) { @content }
+    tag.span(**merge_html_options(**opts)) { @content }
   end
 
   private

data/app/components/toast_component.rb

@@ -31,6 +31,6 @@ class ToastComponent < Component
     data[:fui_toast_compact_value] = "true" if compact
     data[:fui_toast_show_progress_value] = "true" if show_progress
 
-    tag.div(data: data) { @content }
+    tag.div(**merge_html_options(data: data)) { @content }
   end
 end

data/app/components/transition_component.rb

@@ -19,7 +19,7 @@ class TransitionComponent < Component
       "transition"
     )
 
-    tag.div(
+    tag.div(**merge_html_options(
       class: classes,
       style: "animation-duration:#{duration}ms",
       data: {
@@ -27,6 +27,6 @@ class TransitionComponent < Component
         fui_transition_animation_value: animation,
         fui_transition_duration_value: duration
       }
-    ) { @content }
+    )) { @content }
   end
 end

data/app/components/v_stack_component.rb

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

data/app/components/visibility_component.rb

@@ -17,6 +17,6 @@ class VisibilityComponent < Component
     data[:fui_visibility_offset_value] = offset if offset > 0
     data[:fui_visibility_once_value] = "true" if once
 
-    tag.div(data: data) { @content }
+    tag.div(**merge_html_options(data: data)) { @content }
   end
 end

data/app/helpers/component_helper.rb

@@ -41,8 +41,13 @@ module ComponentHelper
     Icon:        "IconComponent",
     Image:       "ImageComponent",
     Input:       "InputComponent",
-    Label:       "LabelComponent",
-    List:        "ListComponent",
+    Tag:         "TagComponent",
+    TagGroup:    "TagGroupComponent",
+    List:            "ListComponent",
+    ListItem:        "ListItemComponent",
+    ListContent:     "ListContentComponent",
+    ListHeader:      "ListHeaderComponent",
+    ListDescription: "ListDescriptionComponent",
     Loader:      "LoaderComponent",
     Placeholder: "PlaceholderComponent",
     Rail:        "RailComponent",
@@ -53,9 +58,11 @@ module ComponentHelper
     StepGroup:   "StepGroupComponent",
 
     Text:        "TextComponent",
+    ButtonGroup: "ButtonGroupComponent",
 
     # Collections
     Breadcrumb:  "BreadcrumbComponent",
+    Field:       "FieldComponent",
     Form:        "FormComponent",
     Grid:        "GridComponent",
     Menu:        "MenuComponent",
@@ -70,15 +77,21 @@ module ComponentHelper
     Ad:          "AdComponent",
     ItemGroup:   "ItemGroupComponent",
     Card:        "CardComponent",
-    Comment:     "CommentComponent",
+    Comment:           "CommentComponent",
+    CommentGroup:      "CommentGroupComponent",
+    CommentReplyGroup: "CommentReplyGroupComponent",
+    CommentReply:      "CommentReplyComponent",
     Feed:        "FeedComponent",
+    FeedItem:    "FeedItemComponent",
     Item:        "ItemComponent",
     Statistic:   "StatisticComponent",
 
     # Modules
-    Accordion:   "AccordionComponent",
-    Calendar:    "CalendarComponent",
-    Checkbox:    "CheckboxComponent",
+    Accordion:     "AccordionComponent",
+    AccordionItem: "AccordionItemComponent",
+    SubAccordion:  "SubAccordionComponent",
+    Calendar:      "CalendarComponent",
+
     Dimmer:      "DimmerComponent",
     Dropdown:    "DropdownComponent",
     Embed:       "EmbedComponent",
@@ -121,6 +134,10 @@ module ComponentHelper
     output_buffer << content.to_s
   end
 
+  def NbSpace
+    output_buffer << "&nbsp;".html_safe
+  end
+
   def Partial(*args, **kwargs, &block)
     output_buffer << render(*args, **kwargs, &block)
   end