rails-active-ui 0.3.6 → 0.3.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6cba8d2c41659f546855317af82ec86ae112504f089e404038aa23183eae09ba
-  data.tar.gz: 98d49cc0d8ca25088e4d3f2bd7dd2052f09205e6aeaef45aa4e491b3ce90ea5a
+  metadata.gz: ecbf2cf056cd56dbcac4a80553455b3a6b303ef8439bd38b5be513652835985f
+  data.tar.gz: 07c80687e4e01edb2050fe9e8f277dedbb7472f410f36e703948f791d4196104
 SHA512:
-  metadata.gz: 5f9e8ec8ea0dbf90ecd9f2f730d65eb540174087146ee84329060358dc135dd8540522290a2325b15cdef8ca2d471c784bd136f869602f3089b620de3c121f4d
-  data.tar.gz: 97074f59b5f1f879b2bc452d7e3eb539f3fd24089e1378587ddd6f36661d779b457b8c83e7836c0f6c551f0e319cf4723bcce3ed9f9f82847d0db0b14f13e83b
+  metadata.gz: 03b90d0da8e67d306bb9e59946264a1d931118179b35dfbcb6f80f16bd07a4b39cd7772453dffd7faba31bdc675aa9a620898f4cf545bc4ef8b2d633ffcaf08c
+  data.tar.gz: e60026a65dc4c3fcd3bfdfe97c56b36dc8a6fd9586da21122a20374122b273b38eb7b9333273fa749ad665b151e6b755bf0b667dc487bd7ef567d3445f473c20

data/README.md

@@ -0,0 +1,148 @@
+# rails-active-ui
+
+A Fomantic-UI component system for Rails. Views use `.html.ruby` files with PascalCase component calls.
+
+## Setup
+
+Add to your Gemfile:
+
+```ruby
+gem "rails-active-ui"
+```
+
+### Engine initializers
+
+The gem's engine (`Ui::Engine`) registers the following automatically:
+
+**Autoload paths** -- `app/lib` and `app/blocks` are added to the autoload paths so `Component` and block classes are available everywhere.
+
+**Asset paths** -- `formantic-ui/` (Fomantic-UI CSS/JS distribution) and `app/javascript/` (Stimulus controllers) are added to Propshaft's asset paths. Reference them in your layout:
+
+```ruby
+# CSS
+StylesheetLink("stylesheets.css")  # Fomantic-UI stylesheet
+
+# jQuery + Fomantic-UI component JS (must come before importmap)
+text fui_javascript_tags
+
+# Importmap (loads Stimulus controllers)
+JavascriptImportmap()
+```
+
+**Importmap** -- the gem's `config/importmap.rb` is prepended to the app's importmap. It pins:
+- `ui` -- the main entry point (`ui/index.js`)
+- `ui/controllers/*` -- all Fomantic-UI Stimulus bridge controllers
+- `emoji-picker-element` -- emoji picker from CDN
+
+**Helpers** -- `ComponentHelper` and `FuiHelper` are included into `ActionView::Base` automatically.
+
+### Stimulus controllers
+
+Register the Fomantic-UI Stimulus controllers in your app's `app/javascript/controllers/index.js`:
+
+```javascript
+import { Application } from "@hotwired/stimulus"
+import { registerFuiControllers } from "ui"
+
+const application = Application.start()
+registerFuiControllers(application)
+```
+
+These are thin jQuery bridge controllers that initialize Fomantic-UI widgets in `connect()` and tear them down in `disconnect()`, making them Turbo-compatible.
+
+### Rails engine usage
+
+If you're using rails-active-ui inside a Rails engine, your engine needs to register the gem's assets manually since engines don't inherit the host app's asset paths:
+
+```ruby
+# lib/my_engine/engine.rb
+class Engine < ::Rails::Engine
+  initializer "my_engine.assets" do |app|
+    ui_gem = Gem::Specification.find_by_name("rails-active-ui")
+    app.config.assets.paths << File.join(ui_gem.gem_dir, "app/assets")
+  end
+end
+```
+
+## Form Builder
+
+rails-active-ui ships with `FomanticFormBuilder`, a drop-in `ActionView::Helpers::FormBuilder` subclass that wraps every field helper in Fomantic-UI markup.
+
+Set it as the default in your `ApplicationController`:
+
+```ruby
+class ApplicationController < ActionController::Base
+  ActionView::Base.default_form_builder = FomanticFormBuilder
+end
+```
+
+Inside a `Form()` block, method_missing delegates to the form builder. Standard Rails form helpers become PascalCase calls:
+
+```ruby
+Form(url: users_path, method: :post) {
+  TextField(:name, required: true)
+  EmailField(:email)
+  Select(:role, [["Admin", "admin"], ["User", "user"]], dropdown: true)
+  CheckBox(:terms, label: "I agree to the Terms")
+  HiddenField(:token)
+  Submit("Save", color: "green")
+}
+```
+
+### Available form helpers
+
+| `.html.ruby` call | Form builder method | Description |
+|---|---|---|
+| `TextField(:name)` | `f.text_field :name` | Text input wrapped in `.field` |
+| `EmailField(:email)` | `f.email_field :email` | Email input |
+| `PasswordField(:password)` | `f.password_field :password` | Password input |
+| `NumberField(:age)` | `f.number_field :age` | Number input |
+| `TextArea(:bio)` | `f.text_area :bio` | Textarea |
+| `Select(:role, choices)` | `f.select :role, choices` | Select dropdown |
+| `CheckBox(:terms)` | `f.check_box :terms` | Checkbox with Fomantic styling |
+| `RadioButton(:plan, "pro")` | `f.radio_button :plan, "pro"` | Radio button |
+| `HiddenField(:token)` | `f.hidden_field :token` | Hidden input (no wrapper) |
+| `FileField(:avatar)` | `f.file_field :avatar` | File upload |
+| `Submit("Save")` | `f.submit "Save"` | Submit button with Fomantic styling |
+
+### Field options
+
+All field helpers accept these options:
+
+- `label:` -- override label text (`nil` to suppress)
+- `required:` -- adds "required" class and asterisk
+- `disabled:` -- adds "disabled" class
+- `inline:` -- label sits beside the input
+- `width:` -- Fomantic grid column word (e.g. `"six"`, `"three"`)
+- `error:` -- error message string
+- `hint:` -- grey note beneath the input
+- `field_class:` -- extra classes on the wrapping `.field` div
+- `input_class:` -- extra classes on the input element
+
+### Submit button options
+
+- `color:` -- Fomantic color (e.g. `"green"`, `"red"`, `"blue"`)
+- `size:` -- Fomantic size (e.g. `"tiny"`, `"large"`)
+- `basic:` -- basic button style
+- `icon:` -- icon name (e.g. `"checkmark"`)
+
+### Field groups
+
+```ruby
+Form(url: users_path) {
+  FieldsGroup(equal_width: true) {
+    TextField(:first_name)
+    TextField(:last_name)
+  }
+}
+```
+
+### Form-level messages
+
+```ruby
+Form(url: users_path) {
+  ErrorMessage("Something went wrong", ["Email is taken"])
+  SuccessMessage("All done!", "Profile updated.")
+  WarningMessage("Heads up", ["Verify your email"])
+}
+```

data/app/components/menu_item_component.rb

@@ -25,6 +25,7 @@ class MenuItemComponent < Component
   attribute :value,    :string,  default: nil
   attribute :target,   :string,  default: nil
   attribute :rel,      :string,  default: nil
+  attribute :tab,      :string,  default: nil
 
   def to_s
     classes = class_names(
@@ -45,6 +46,7 @@ class MenuItemComponent < Component
 
     opts = merge_html_options(class: classes)
     opts["data-value"] = value if value
+    opts["data-tab"] = tab if tab
     opts[:target] = target if target
     opts[:rel] = rel if rel
 

data/app/components/tab_component.rb

@@ -1,24 +1,34 @@
 # frozen_string_literal: true
 
-# Tab — tab navigation with content panes.
+# Tab — a single content pane within a TabGroup.
 #
-# Usage:
-#   Tab(active: true) { text "Tab pane content" }
+# Usage (inside TabGroup):
+#   Tab(active: true, path: "first", attached: true, segment: true) {
+#     text "First tab content"
+#   }
+#
+# Usage (standalone, no TabGroup):
+#   Tab(active: true, path: "first") { text "Pane content" }
 
 class TabComponent < Component
-  attribute :active, :boolean, default: false
-  attribute :path,   :string,  default: nil
+  include Attachable
+
+  attribute :active,  :boolean, default: false
+  attribute :path,    :string,  default: nil
+  attribute :segment, :boolean, default: false
 
   def to_s
     classes = class_names(
       "ui",
-      { "active" => active },
+      { "active" => active,
+        "bottom attached" => attached,
+        "segment" => segment },
       "tab"
     )
 
-    data = { controller: "fui-tab" }
+    data = {}
     data[:tab] = path if path
 
-    tag.div(class: classes, data: data) { @content }
+    tag.div(**merge_html_options(class: classes, data: data)) { @content }
   end
 end

data/app/components/tab_group_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# TabGroup — wrapper for tab navigation with content panes.
+#
+# Renders a <div data-controller="fui-tab"> that wraps a Menu and Tab panes.
+# The fui-tab Stimulus controller finds .item[data-tab] elements within
+# and initializes Fomantic-UI's $.fn.tab plugin for click-based switching.
+#
+# Usage:
+#   TabGroup {
+#     Menu(tabular: true, attached: "top") {
+#       MenuItem(active: true, tab: "first") { text "First" }
+#       MenuItem(tab: "second") { text "Second" }
+#     }
+#     Tab(active: true, path: "first", attached: true, segment: true) {
+#       text "First tab content"
+#     }
+#     Tab(path: "second", attached: true, segment: true) {
+#       text "Second tab content"
+#     }
+#   }
+
+class TabGroupComponent < Component
+  attribute :history,      :boolean, default: false
+  attribute :history_type, :string,  default: "hash"
+
+  def to_s
+    data = { controller: "fui-tab" }
+    data[:fui_tab_history_value] = history if history
+    data[:fui_tab_history_type_value] = history_type if history
+
+    tag.div(**merge_html_options(data: data)) { @content }
+  end
+end

data/app/helpers/component_helper.rb

@@ -94,6 +94,7 @@ module ComponentHelper
     Sidebar:     "SidebarComponent",
     Sticky:      "StickyComponent",
     Tab:         "TabComponent",
+    TabGroup:    "TabGroupComponent",
     Toast:       "ToastComponent",
     Transition:  "TransitionComponent",
 

data/app/helpers/ui/fomantic_form_builder.rb

@@ -0,0 +1,487 @@
+# frozen_string_literal: true
+
+# FomanticFormBuilder
+#
+# A Rails FormBuilder wrapping every helper in Fomantic-UI markup.
+#
+# Usage in a view:
+#
+#   <%= form_with model: @user, builder: FomanticFormBuilder do |f| %>
+#     <%= f.text_field :name %>
+#     <%= f.email_field :email, required: true %>
+#     <%= f.select :role, [['Admin', 'admin'], ['User', 'user']], dropdown: true %>
+#     <%= f.check_box :terms, label: 'I agree to the Terms and Conditions' %>
+#     <%= f.fields_group(equal_width: true) do %>
+#       <%= f.text_field :first_name %>
+#       <%= f.text_field :last_name %>
+#     <% end %>
+#     <%= f.submit 'Save', color: 'green' %>
+#   <% end %>
+#
+# Field options (shared across all helpers):
+#   label:        String  – override label text (nil to suppress label)
+#   required:     Boolean – adds "required" class and asterisk
+#   disabled:     Boolean – adds "disabled" class
+#   readonly:     Boolean – adds "read-only" class
+#   inline:       Boolean – label sits beside the input
+#   width:        String  – Fomantic grid column word, e.g. "six", "three"
+#   error:        String  – error message; adds "error" class + inline message
+#   warning:      String  – warning message; adds "warning" class + inline message
+#   hint:         String  – rendered as a small grey note beneath the input
+#   field_class:  String  – extra classes on the wrapping .field div
+#   input_class:  String  – extra classes on the input element itself
+#
+module Ui
+class FomanticFormBuilder < ActionView::Helpers::FormBuilder
+  COLUMN_WORDS = %w[
+    one two three four five six seven eight nine ten
+    eleven twelve thirteen fourteen fifteen sixteen
+  ].freeze
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Text-like inputs
+  # ──────────────────────────────────────────────────────────────────────────
+
+  %i[
+    text_field email_field password_field
+    number_field url_field telephone_field phone_field
+    search_field color_field date_field datetime_local_field
+    month_field week_field time_field range_field
+  ].each do |method_name|
+    define_method(method_name) do |attribute, options = {}|
+      fomantic_field(attribute, options) do |attr, opts|
+        opts[:class] = class_names("", opts.delete(:input_class))
+        super(attr, opts)
+      end
+    end
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Text area
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def text_area(attribute, options = {})
+    transparent = options.delete(:transparent)
+    fomantic_field(attribute, options) do |attr, opts|
+      input_class = class_names(("transparent" if transparent), opts.delete(:input_class))
+      opts[:class] = input_class.presence
+      super(attr, opts)
+    end
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Emoji picker
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def emoji_field(attribute, options = {})
+    fomantic_field(attribute, options) do |attr, opts|
+      current = object&.public_send(attr) rescue nil
+      name = object_name ? "#{object_name}[#{attr}]" : attr.to_s
+
+      @template.tag.div(data: { controller: "fui-emoji-picker" }) {
+        @template.safe_join([
+          @template.hidden_field_tag(name, current, data: { fui_emoji_picker_target: "input" }),
+          @template.tag.button(
+            type: "button",
+            class: "ui basic button",
+            data: { fui_emoji_picker_target: "preview", action: "click->fui-emoji-picker#toggle" }
+          ) { (current.presence || "Pick emoji").html_safe },
+          @template.tag.div(
+            style: "display:none; position:absolute; z-index:1000;",
+            data: { fui_emoji_picker_target: "dropdown" }
+          )
+        ])
+      }
+    end
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Select / Dropdown
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def select(attribute, choices = nil, options = {}, html_options = {}, &block)
+    use_dropdown = options.delete(:dropdown)
+    fomantic_field(attribute, options) do |attr, opts|
+      merged_html = html_options.merge(class: class_names(html_options[:class], opts.delete(:input_class)))
+      raw_select  = super(attr, choices, opts, merged_html, &block)
+
+      use_dropdown ? dropdown_wrap(raw_select) : raw_select
+    end
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Check box
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def check_box(attribute, options = {}, checked_value = "1", unchecked_value = "0")
+    label_text = options.delete(:label) { label_for(attribute) }
+    kind       = options.delete(:kind) { :checkbox } # :checkbox | :slider | :toggle
+
+    fomantic_field(attribute, options.merge(suppress_label: true)) do |attr, opts|
+      opts.delete(:input_class)
+      checkbox_html = super(attr, opts, checked_value, unchecked_value)
+      checkbox_ui(checkbox_html, label_text, kind)
+    end
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Radio button
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def radio_button(attribute, value, options = {})
+    label_text = options.delete(:label) { value.to_s.humanize }
+
+    fomantic_field(attribute, options.merge(suppress_label: true)) do |attr, opts|
+      opts.delete(:input_class)
+      radio_html = super(attr, value, opts)
+      checkbox_ui(radio_html, label_text, :radio)
+    end
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # File field
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def file_field(attribute, options = {})
+    fomantic_field(attribute, options) do |attr, opts|
+      opts.delete(:input_class)
+      super(attr, opts)
+    end
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Hidden field (no wrapper)
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def hidden_field(attribute, options = {})
+    super(attribute, options)
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Submit button
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def submit(value = nil, options = {})
+    color   = options.delete(:color)
+    basic   = options.delete(:basic)
+    inverted = options.delete(:inverted)
+    size    = options.delete(:size)
+    icon    = options.delete(:icon)
+
+    button_class = class_names(
+      "ui", "button",
+      color,
+      size,
+      ("basic" if basic),
+      ("inverted" if inverted),
+      options.delete(:class)
+    )
+    options[:class] = button_class
+
+    icon_html = icon ? @template.tag.i(class: "#{icon} icon") : "".html_safe
+    icon_html + super(value, options)
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Label override — produces a plain <label> (called internally too)
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def label(attribute, text = nil, options = {}, &block)
+    super(attribute, text, options, &block)
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # fields_group — wraps children in <div class="fields ...">
+  #
+  # Options:
+  #   equal_width: Boolean – adds "equal width"
+  #   inline:      Boolean – adds "inline"
+  #   count:       Integer – "N fields" (evenly divided)
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def fields_group(options = {}, &block)
+    equal_width = options.delete(:equal_width)
+    inline      = options.delete(:inline)
+    count       = options.delete(:count)
+    extra       = options.delete(:class)
+
+    count_word = COLUMN_WORDS[count.to_i - 1] if count
+
+    css = class_names(
+      count_word,
+      "fields",
+      ("equal width" if equal_width),
+      ("inline" if inline),
+      extra
+    )
+
+    @template.tag.div(class: css, &block)
+  end
+
+  # ──────────────────────────────────────────────────────────────────────────
+  # Form-level message helpers
+  # ──────────────────────────────────────────────────────────────────────────
+
+  def error_message(header, messages = [])
+    form_message("error", header, messages)
+  end
+
+  def success_message(header, body = nil)
+    form_message("success", header, [], body)
+  end
+
+  def warning_message(header, messages = [])
+    form_message("warning", header, messages)
+  end
+
+  def info_message(header, messages = [])
+    form_message("info", header, messages)
+  end
+
+  private
+
+  # ── Core field wrapper ─────────────────────────────────────────────────────
+
+  def fomantic_field(attribute, options, &block)
+    required       = options.delete(:required)
+    disabled       = options.delete(:disabled)
+    readonly_opt   = options.delete(:readonly)
+    inline         = options.delete(:inline)
+    width          = options.delete(:width)
+    error_msg      = options.delete(:error)
+    warning_msg    = options.delete(:warning)
+    hint           = options.delete(:hint)
+    field_class    = options.delete(:field_class)
+    suppress_label = options.delete(:suppress_label)
+    custom_label   = options.delete(:label)
+
+    has_error   = error_msg.present?   || object_has_error?(attribute)
+    has_warning = warning_msg.present?
+
+    div_class = class_names(
+      width,
+      "field",
+      ("required"  if required),
+      ("disabled"  if disabled),
+      ("read-only" if readonly_opt),
+      ("inline"    if inline),
+      ("error"     if has_error),
+      ("warning"   if has_warning),
+      field_class
+    )
+
+    label_html = unless suppress_label
+      text = custom_label.nil? ? label_for(attribute) : custom_label
+      text ? label(attribute, text) : nil
+    end
+
+    input_html = block.call(attribute, options)
+
+    note_html  = inline_note(error_msg || (has_error && first_error(attribute)), "red")
+    note_html  = inline_note(warning_msg, "orange") if note_html.blank? && has_warning
+    note_html  = inline_note(hint, "grey")          if note_html.blank? && hint
+
+    @template.tag.div(class: div_class) do
+      safe_join([ label_html, input_html, note_html ].compact)
+    end
+  end
+
+  # ── Checkbox / Radio UI shell ──────────────────────────────────────────────
+
+  def checkbox_ui(input_html, label_text, kind)
+    modifier = { radio: "radio", slider: "slider", toggle: "toggle" }[kind]
+    css      = class_names("ui", modifier, "checkbox")
+
+    @template.tag.div(class: css) do
+      safe_join([ input_html, @template.tag.label(label_text.is_a?(String) ? label_text : nil) ])
+    end
+  end
+
+  # ── Dropdown wrapper ───────────────────────────────────────────────────────
+
+  def dropdown_wrap(select_html)
+    @template.tag.div(class: "ui selection dropdown") do
+      safe_join([
+        @template.tag.i(class: "dropdown icon"),
+        select_html
+      ])
+    end
+  end
+
+  # ── Form-level messages ────────────────────────────────────────────────────
+
+  def form_message(type, header, messages = [], body = nil)
+    list_html = messages.any? ? @template.tag.ul(class: "list") {
+      safe_join(messages.map { |m| @template.tag.li(m) })
+    } : nil
+
+    body_html = body ? @template.tag.p(body) : nil
+
+    @template.tag.div(class: "ui #{type} message") do
+      safe_join([
+        @template.tag.div(class: "header") { header },
+        list_html,
+        body_html
+      ].compact)
+    end
+  end
+
+  # ── Inline note beneath input ──────────────────────────────────────────────
+
+  def inline_note(text, color = nil)
+    return nil if text.blank?
+
+    @template.tag.small(class: class_names("ui", color, "text")) { text }
+  end
+
+  # ── Humanise attribute name for label ─────────────────────────────────────
+
+  def label_for(attribute)
+    attr_str = attribute.to_s.delete_suffix("_id")
+    if object && object.class.respond_to?(:human_attribute_name)
+      object.class.human_attribute_name(attr_str)
+    else
+      attr_str.humanize
+    end
+  end
+
+  # ── ActiveModel error introspection ───────────────────────────────────────
+
+  def object_has_error?(attribute)
+    object.respond_to?(:errors) && object.errors[attribute].any?
+  end
+
+  def first_error(attribute)
+    object.errors[attribute].first if object.respond_to?(:errors)
+  end
+
+  # ── Safe join delegated to template ───────────────────────────────────────
+
+  def safe_join(parts)
+    @template.safe_join(parts)
+  end
+
+  # ── class_names helper (Rails 6.1+ ships this) ────────────────────────────
+
+  def class_names(*args)
+    args.flatten.compact.reject { |v| v == false || v.to_s.strip.empty? }.join(" ")
+  end
+end
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Usage examples (views)
+# ─────────────────────────────────────────────────────────────────────────────
+
+# ── 1. Basic user registration form ──────────────────────────────────────────
+#
+# <%= form_with model: @user, builder: FomanticFormBuilder, class: "ui form" do |f| %>
+#
+#   <%# grouped equal-width row %>
+#   <%= f.fields_group(equal_width: true) do %>
+#     <%= f.text_field  :first_name, required: true %>
+#     <%= f.text_field  :last_name,  required: true %>
+#   <% end %>
+#
+#   <%= f.email_field    :email,    required: true %>
+#   <%= f.password_field :password, required: true,
+#                        hint: "Minimum 8 characters" %>
+#
+#   <%# Native select styled by Fomantic %>
+#   <%= f.select :role, [["Admin", "admin"], ["Member", "member"]],
+#                { prompt: "Select a role" } %>
+#
+#   <%# Fomantic dropdown widget (adds JS .dropdown() wrapper) %>
+#   <%= f.select :country, country_options,
+#                { dropdown: true, required: true } %>
+#
+#   <%= f.check_box :terms,
+#                   label:    "I agree to the Terms and Conditions",
+#                   required: true %>
+#
+#   <%# Error/success messages from model %>
+#   <%= f.error_message "We had some issues",
+#                       @user.errors.full_messages if @user.errors.any? %>
+#
+#   <%= f.submit "Sign up", color: "green" %>
+# <% end %>
+
+
+# ── 2. Inline field (label beside input) ─────────────────────────────────────
+#
+# <%= f.text_field :phone, label: "Phone Number", inline: true,
+#                           width: "eight" %>
+
+
+# ── 3. Width-constrained fields ───────────────────────────────────────────────
+#
+# <%= f.fields_group do %>
+#   <%= f.text_field :first_name, width: "six"  %>
+#   <%= f.text_field :middle,     width: "three" %>
+#   <%= f.text_field :last_name,  width: "seven" %>
+# <% end %>
+
+
+# ── 4. Checkbox kinds ─────────────────────────────────────────────────────────
+#
+# <%= f.check_box :notifications, label: "Enable notifications", kind: :toggle %>
+# <%= f.check_box :public,        label: "Publicly visible",     kind: :slider %>
+
+
+# ── 5. Radio group ────────────────────────────────────────────────────────────
+#
+# <%= f.fields_group do %>
+#   <%= f.radio_button :plan, "basic",   label: "Basic"   %>
+#   <%= f.radio_button :plan, "pro",     label: "Pro"     %>
+#   <%= f.radio_button :plan, "enterprise", label: "Enterprise" %>
+# <% end %>
+
+
+# ── 6. Textarea ───────────────────────────────────────────────────────────────
+#
+# <%= f.text_area :bio,         rows: 4 %>
+# <%= f.text_area :description, rows: 2, transparent: true %>
+
+
+# ── 7. Form-level state messages ──────────────────────────────────────────────
+#
+# <%= f.error_message   "Action Forbidden", ["Email already registered"] %>
+# <%= f.success_message "All done!",        "Your profile has been updated." %>
+# <%= f.warning_message "Heads up",         ["Please verify your email"] %>
+# <%= f.info_message    "Password rules",   ["Must be at least 8 characters"] %>
+
+
+# ── 8. Submit variations ──────────────────────────────────────────────────────
+#
+# <%= f.submit "Save",   color: "blue"  %>
+# <%= f.submit "Delete", color: "red",   basic: true %>
+# <%= f.submit "Go",     color: "green", size: "large", icon: "checkmark" %>
+
+
+# ── 9. Opt-in per form (when default builder is not set) ──────────────────────
+#
+# <%= form_with model: @post, builder: FomanticFormBuilder, class: "ui form" do |f| %>
+#   ...
+# <% end %>
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# JavaScript initialisation (application.js or a Stimulus controller)
+# ─────────────────────────────────────────────────────────────────────────────
+#
+# // Initialise all Fomantic dropdowns on the page
+# document.addEventListener("DOMContentLoaded", () => {
+#   $(".ui.dropdown").dropdown();
+#   $(".ui.checkbox").checkbox();
+#   $(".ui.calendar").calendar({ type: "date" });
+# });
+#
+# // Or with a Stimulus controller:
+# //
+# // import { Controller } from "@hotwired/stimulus"
+# // export default class extends Controller {
+# //   connect() {
+# //     $(this.element).find(".ui.dropdown").dropdown()
+# //     $(this.element).find(".ui.checkbox").checkbox()
+# //   }
+# // }
+end

data/app/views/ui/examples/_modules_components.html.ruby

@@ -587,37 +587,33 @@ Header(size: :h3) { text "Tab" }
 text "Tab content panels used with a menu for switching views."
 
 Segment {
-  Menu(pointing: true, secondary: true) {
-    MenuItem(active: true) {
-      concat tag.a("data-tab": "tab-1") { "Tab 1" }
+  TabGroup {
+    Menu(tabular: true, attached: "top") {
+      MenuItem(active: true, tab: "tab-1") { text "Tab 1" }
+      MenuItem(tab: "tab-2") { text "Tab 2" }
     }
-    MenuItem {
-      concat tag.a("data-tab": "tab-2") { "Tab 2" }
+    Tab(active: true, path: "tab-1", attached: true, segment: true) {
+      text "Content for Tab 1"
+    }
+    Tab(path: "tab-2", attached: true, segment: true) {
+      text "Content for Tab 2"
     }
-  }
-  Tab(active: true, path: "tab-1") {
-    text "Content for Tab 1"
-  }
-  Tab(path: "tab-2") {
-    text "Content for Tab 2"
   }
 }
 
 Segment(secondary: true) {
   concat tag.pre { tag.code(
-    'Menu(pointing: true, secondary: true) {
-  MenuItem(active: true) {
-    concat tag.a("data-tab": "tab-1") { "Tab 1" }
+    'TabGroup {
+  Menu(tabular: true, attached: "top") {
+    MenuItem(active: true, tab: "tab-1") { text "Tab 1" }
+    MenuItem(tab: "tab-2") { text "Tab 2" }
   }
-  MenuItem {
-    concat tag.a("data-tab": "tab-2") { "Tab 2" }
+  Tab(active: true, path: "tab-1", attached: true, segment: true) {
+    text "Content for Tab 1"
+  }
+  Tab(path: "tab-2", attached: true, segment: true) {
+    text "Content for Tab 2"
   }
-}
-Tab(active: true, path: "tab-1") {
-  text "Content for Tab 1"
-}
-Tab(path: "tab-2") {
-  text "Content for Tab 2"
 }'
   )}
 }

data/lib/ui/version.rb

@@ -1,3 +1,3 @@
 module Ui
-  VERSION = "0.3.6"
+  VERSION = "0.3.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-active-ui
 version: !ruby/object:Gem::Version
-  version: 0.3.6
+  version: 0.3.8
 platform: ruby
 authors:
 - nathan
@@ -37,6 +37,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- README.md
 - Rakefile
 - app/assets/datatables.css
 - app/assets/stylesheets.css
@@ -112,6 +113,7 @@ files:
 - app/components/sub_header_component.rb
 - app/components/sub_menu_component.rb
 - app/components/tab_component.rb
+- app/components/tab_group_component.rb
 - app/components/table_cell_component.rb
 - app/components/table_component.rb
 - app/components/table_row_component.rb
@@ -125,6 +127,7 @@ files:
 - app/controllers/ui/examples_controller.rb
 - app/helpers/component_helper.rb
 - app/helpers/fui_helper.rb
+- app/helpers/ui/fomantic_form_builder.rb
 - app/javascript/accordion.js
 - app/javascript/accordion.min.js
 - app/javascript/api.js