rails-active-ui 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0ad9187220eaca270dfe6d0a841607e595418cdf18af8394ad5c6888368a0b5
-  data.tar.gz: e096d42625112677598e31ebe42b382c4a7baa94e8f75e116e338ae4ef73ae67
+  metadata.gz: b4649f0a2a53b0e99341193bdb0e2def4d8aa2aa9280d122022314062472c932
+  data.tar.gz: 318b3c477e40e511d75b97693a08710e61d9ab52b5e9a3b2221023e2e5a55b2c
 SHA512:
-  metadata.gz: 2a778ed93d250860bc13b072322f188cdab64b874f3fff53864f21bae76cb5c3fed4cf5656aec95c8e637c58e62e8ccff2c7dcc80eec099ef5454eeeb88e85dc
-  data.tar.gz: af6c85e9e788e4dc18b367cfee982b51f02d3658ea94dcaed38e2cdb19c9daf11ebf369f55b0ad2adc696f55407bcbf977a4a1c5439a1f1498911db66d6d5d62
+  metadata.gz: 8aec1d05c6616b0db44bef667f1fa7db57d47d85e8b8739a26af09c8cf5adf5288745181d8e7ecc2304058a52f716a2f36f8217ed1f7784368c3ab112cbf510c
+  data.tar.gz: ca4ede8a537dad55924a4e4eec6487c7207b8b422322842c79d851bd437396c6ceabc1520c87f516df78ac7e8b35539c5d9f99c978523143d75741f3440a1042

data/app/components/accordion_component.rb

@@ -1,34 +1,43 @@
 # frozen_string_literal: true
 
-# Accordion — collapsible content panels.
+# Accordion — collapsible content panel using <details>/<summary>.
 #
 # Usage:
-#   Accordion(styled: true) {
-#     MenuItem(header: true) {
-#       Icon(name: "dropdown")
-#       text " Section"
-#     }
+#   Accordion(attached: true) { |a|
+#     a.title { text "Section" }
 #     text "Panel content"
 #   }
 
 class AccordionComponent < Component
-  attribute :styled,   :boolean, default: false
-  attribute :fluid,    :boolean, default: false
-  attribute :inverted, :boolean, default: false
-  attribute :exclusive, :boolean, default: true
-  attribute :collapsible, :boolean, default: true
+  include Attachable
+
+  attribute :raised,    :boolean, default: false
+  attribute :inverted,  :boolean, default: false
+  attribute :basic,     :boolean, default: false
+  attribute :compact,   :boolean, default: false
+  attribute :color,     :string,  default: nil
+  attribute :secondary, :boolean, default: false
+  attribute :open,      :boolean, default: false
+
+  slot :title
 
   def to_s
     classes = class_names(
       "ui",
-      { "styled" => styled, "fluid" => fluid, "inverted" => inverted },
-      "accordion"
+      color,
+      { "attached" => attached, "raised" => raised, "inverted" => inverted,
+        "basic" => basic, "compact" => compact, "secondary" => secondary },
+      "segment"
     )
 
-    data = { controller: "fui-accordion" }
-    data[:fui_accordion_exclusive_value] = "false" unless exclusive
-    data[:fui_accordion_collapsible_value] = "false" unless collapsible
+    opts = merge_html_options(class: classes)
+    opts[:open] = "" if open
 
-    tag.div(class: classes, data: data) { @content }
+    tag.details(**opts) {
+      safe_join([
+        tag.summary { @slots[:title] || "" },
+        tag.div { @content }
+      ])
+    }
   end
 end

data/app/components/button_to_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+# ButtonTo — a form-based button for non-GET actions (DELETE, PATCH, etc).
+#
+# Wraps Rails button_to with Fomantic-UI button styling.
+#
+# Usage:
+#   ButtonTo(url: "/items/1", method: :delete, color: "red", confirm: "Sure?") {
+#     Icon(name: "trash")
+#     text " Delete"
+#   }
+
+class ButtonToComponent < Component
+  include Sizeable
+
+  attribute :url,      :string
+  attribute :method,   :string,  default: "post"
+  attribute :color,    :string,  default: nil
+  attribute :variant,  :string,  default: nil
+  attribute :icon,     :string,  default: nil
+  attribute :disabled, :boolean, default: false
+  attribute :confirm,  :string,  default: nil
+
+  def to_s
+    classes = class_names(
+      "ui",
+      color,
+      size,
+      variant,
+      { "disabled" => disabled },
+      "button"
+    )
+
+    form_opts = { method: method.to_sym }
+    form_opts[:data] = { turbo_confirm: confirm } if confirm
+
+    @view_context.button_to(
+      url,
+      form: form_opts,
+      class: classes
+    ) { @content }
+  end
+end

data/app/components/form_component.rb

@@ -1,39 +1,56 @@
 # frozen_string_literal: true
 
-# Form — form layout and validation with Stimulus controller.
-#
-# Usage:
-#   Form(action: "/submit", method: :post) {
-#     text '<div class="field"><label>Name</label><input type="text"></div>'.html_safe
-#   }
-#   Form(loading: true, size: :large) { ... }
-
-class FormComponent < Component
-  attribute :size,        :string,  default: nil
-  attribute :loading,     :boolean, default: false
-  attribute :success,     :boolean, default: false
-  attribute :error,       :boolean, default: false
-  attribute :warning,     :boolean, default: false
-  attribute :inverted,    :boolean, default: false
-  attribute :equal_width, :boolean, default: false
-  attribute :action,      :string,  default: nil
-  attribute :method_type, :string,  default: "post"
-  attribute :reply,       :boolean, default: false
+class FormComponent
+  def initialize(**kwargs)
+    @form_options = kwargs
+  end
+
+  def render_in(context, &block)
+    @view_context = context
+
+    if @form_options[:url] || @form_options[:model]
+      @_block = block
+      if Rails.env.development?
+        "<!-- BEGIN #{self.class.name} -->#{self}<!-- END #{self.class.name} -->".html_safe
+      else
+        to_s
+      end
+    else
+      @content = context.capture(self, &block) if block
+      @content = ERB::Util.html_escape(@content) unless @content.nil? || @content.html_safe?
+      if Rails.env.development?
+        "<!-- BEGIN #{self.class.name} -->#{self}<!-- END #{self.class.name} -->".html_safe
+      else
+        to_s
+      end
+    end
+  end
 
   def to_s
-    classes = class_names(
-      "ui",
-      size,
-      { "loading" => loading, "success" => success, "error" => error,
-        "warning" => warning, "inverted" => inverted,
-        "equal width" => equal_width, "reply" => reply },
-      "form"
-    )
-
-    opts = { class: classes, data: { controller: "fui-form" } }
-    opts[:action] = action if action
-    opts[:method] = method_type if action
-
-    tag.form(**opts) { @content }
+    if @form_options[:url] || @form_options[:model]
+      opts = { class: "ui form", data: { controller: "fui-form" } }
+      opts.merge!(@form_options)
+
+      @view_context.form_with(**opts) { |f|
+        previous = @view_context.instance_variable_get(:@_form_builder)
+        @view_context.instance_variable_set(:@_form_builder, f)
+        begin
+          @_block ? @view_context.instance_exec(&@_block) : "".html_safe
+        ensure
+          @view_context.instance_variable_set(:@_form_builder, previous)
+        end
+      }
+    else
+      opts = { class: "ui form", data: { controller: "fui-form" } }
+      opts.merge!(@form_options)
+
+      tag.form(**opts) { @content }
+    end
+  end
+
+  private
+
+  def tag
+    @view_context.tag
   end
 end

data/app/components/icon_component.rb

@@ -36,6 +36,6 @@ class IconComponent < Component
       "icon"
     )
 
-    tag.i(class: classes)
+    tag.i(**merge_html_options(class: classes))
   end
 end

data/app/components/input_component.rb

@@ -6,6 +6,8 @@
 #   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")
 
 class InputComponent < Component
   attribute :icon,          :string,  default: nil
@@ -23,8 +25,27 @@ class InputComponent < Component
   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,
@@ -41,6 +62,7 @@ class InputComponent < Component
     input_opts[:name] = name if name
     input_opts[:value] = value if value
     input_opts[:disabled] = "disabled" if disabled
+    input_opts[:id] = id if id
 
     icon_el = icon ? tag.i(class: "#{icon} icon") : nil
     input_el = tag.input(**input_opts)

data/app/components/link_component.rb

@@ -18,6 +18,6 @@ class LinkComponent < Component
     opts[:target] = target if target
     opts[:rel] = rel if rel
 
-    tag.a(**opts) { @content }
+    tag.a(**merge_html_options(**opts)) { @content }
   end
 end

data/app/components/modal_component.rb

@@ -11,14 +11,21 @@
 #       Button(variant: :approve, color: :green) { text "OK" }
 #     }
 #   }
+#
+#   Modal(id: "confirm-modal", size: :large) { |c|
+#     c.header { text "Targeted Modal" }
+#     c.content { text "This modal can be targeted by DOM id." }
+#   }
 
 class ModalComponent < Component
+  attribute :id,       :string,  default: nil
   attribute :size,     :string,  default: nil
   attribute :basic,    :boolean, default: false
   attribute :closable, :boolean, default: true
   attribute :blurring, :boolean, default: false
-  attribute :longer,   :boolean, default: false
+  attribute :longer,     :boolean, default: false
   attribute :fullscreen, :boolean, default: false
+  attribute :scrolling,  :boolean, default: false
 
   slot :header
   slot :content
@@ -40,10 +47,14 @@ class ModalComponent < Component
 
     close_el = closable ? tag.i(class: "close icon") : nil
     header_el = @slots[:header] ? tag.div(class: "header") { @slots[:header] } : nil
-    content_el = @slots[:content] ? tag.div(class: "content") { @slots[:content] } : nil
+    content_cls = scrolling ? "scrolling content" : "content"
+    content_el = @slots[:content] ? tag.div(class: content_cls) { @slots[:content] } : nil
     actions_el = @slots[:actions] ? tag.div(class: "actions") { @slots[:actions] } : nil
 
-    tag.div(class: classes, data: data) {
+    opts = { class: classes, data: data }
+    opts[:id] = id if id
+
+    tag.div(**opts) {
       safe_join([ close_el, header_el, content_el, @content.presence, actions_el ])
     }
   end

data/app/components/segment_component.rb

@@ -52,6 +52,6 @@ class SegmentComponent < Component
       "segment"
     )
 
-    tag.div(class: classes) { @content }
+    tag.div(**merge_html_options(class: classes)) { @content }
   end
 end

data/app/components/style_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# Style — inline <style> tag.
+#
+# Usage:
+#   Style(".my-class { color: red; }")
+
+class StyleComponent < Component
+  def initialize(css = nil, **kwargs)
+    @css = css
+    super(**kwargs)
+  end
+
+  def render_in(context, &block)
+    @view_context = context
+    @css ||= context.capture(&block) if block
+    to_s
+  end
+
+  def to_s
+    tag.style { @css&.html_safe }
+  end
+end

data/app/components/wrapper_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+# Wrapper — a plain <div> with optional id/class.
+#
+# Usage:
+#   Wrapper(id: "main") { text "content" }
+#   Wrapper(html_class: "scrollable") { text "content" }
+
+class WrapperComponent < Component
+  attribute :html_class, :string, default: nil
+
+  def to_s
+    opts = {}
+    opts[:class] = html_class if html_class
+    tag.div(**merge_html_options(**opts)) { @content }
+  end
+end

data/app/helpers/component_helper.rb

@@ -25,9 +25,11 @@ module ComponentHelper
     # Globals
     Reset:       ResetComponent,
     Site:        SiteComponent,
+    Wrapper:     WrapperComponent,
 
     # Elements
     Button:      ButtonComponent,
+    ButtonTo:    ButtonToComponent,
     Container:   ContainerComponent,
     Divider:     DividerComponent,
     Emoji:       EmojiComponent,
@@ -46,6 +48,7 @@ module ComponentHelper
     SegmentGroup: SegmentGroupComponent,
     Step:        StepComponent,
     StepGroup:   StepGroupComponent,
+
     Text:        TextComponent,
 
     # Collections
@@ -103,7 +106,35 @@ module ComponentHelper
     }
   end
 
+  def Style(css = nil, &block)
+    output_buffer << render(StyleComponent.new(css), &block)
+  end
+
   def text(content)
     output_buffer << content.to_s
   end
+
+  # PascalCase method calls that aren't in COMPONENT_MAP are forwarded
+  # to the current form builder as underscored method names.
+  # e.g. TextField(:label, placeholder: "Name") -> f.text_field(:label, placeholder: "Name")
+  #      EmojiField(:icon)                      -> f.emoji_field(:icon)
+  #      Select(:role, [["Admin","admin"]])      -> f.select(:role, [["Admin","admin"]])
+  def method_missing(method_name, *args, **kwargs, &block)
+    if method_name =~ /\A[A-Z]/ && @_form_builder
+      underscored = method_name.to_s.gsub(/([a-z])([A-Z])/, '\1_\2').downcase
+      if @_form_builder.respond_to?(underscored)
+        output_buffer << @_form_builder.public_send(underscored, *args, **kwargs, &block)
+        return
+      end
+    end
+    super
+  end
+
+  def respond_to_missing?(method_name, include_private = false)
+    if method_name =~ /\A[A-Z]/ && @_form_builder
+      underscored = method_name.to_s.gsub(/([a-z])([A-Z])/, '\1_\2').downcase
+      return true if @_form_builder.respond_to?(underscored)
+    end
+    super
+  end
 end

data/app/javascript/ui/controllers/fui_emoji_picker_controller.js

@@ -0,0 +1,61 @@
+import { Controller } from "@hotwired/stimulus"
+import "emoji-picker-element"
+
+// Fomantic-UI Emoji Picker — click-to-pick emoji input.
+//
+// Usage:
+//   <div data-controller="fui-emoji-picker">
+//     <input data-fui-emoji-picker-target="input" type="hidden" name="icon" />
+//     <button data-fui-emoji-picker-target="preview" data-action="click->fui-emoji-picker#toggle" type="button">
+//       Pick emoji
+//     </button>
+//     <div data-fui-emoji-picker-target="dropdown" style="display:none; position:absolute; z-index:1000;">
+//       <!-- emoji-picker is appended here -->
+//     </div>
+//   </div>
+
+export default class extends Controller {
+  static targets = ["input", "preview", "dropdown"]
+
+  connect() {
+    this.picker = document.createElement("emoji-picker")
+    this.dropdownTarget.appendChild(this.picker)
+
+    this.picker.addEventListener("emoji-click", (e) => {
+      this.inputTarget.value = e.detail.unicode
+      this.previewTarget.textContent = e.detail.unicode
+      this.close()
+    })
+
+    this._outsideClick = (e) => {
+      if (this.isOpen && !this.element.contains(e.target)) {
+        this.close()
+      }
+    }
+    document.addEventListener("click", this._outsideClick)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._outsideClick)
+    if (this.picker) {
+      this.picker.remove()
+      this.picker = null
+    }
+  }
+
+  toggle(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    this.dropdownTarget.style.display = "block"
+    this.isOpen = true
+  }
+
+  close() {
+    this.dropdownTarget.style.display = "none"
+    this.isOpen = false
+  }
+}

data/app/javascript/ui/index.js

@@ -49,6 +49,7 @@ import FuiTransitionController from "ui/controllers/fui_transition_controller"
 import FuiApiController from "ui/controllers/fui_api_controller"
 import FuiStateController from "ui/controllers/fui_state_controller"
 import FuiVisibilityController from "ui/controllers/fui_visibility_controller"
+import FuiEmojiPickerController from "ui/controllers/fui_emoji_picker_controller"
 
 const controllers = {
   "fui-site":       FuiSiteController,
@@ -76,6 +77,7 @@ const controllers = {
   "fui-api":        FuiApiController,
   "fui-state":      FuiStateController,
   "fui-visibility": FuiVisibilityController,
+  "fui-emoji-picker": FuiEmojiPickerController,
 }
 
 export function registerFuiControllers(application) {
@@ -111,4 +113,5 @@ export {
   FuiApiController,
   FuiStateController,
   FuiVisibilityController,
+  FuiEmojiPickerController,
 }

data/app/lib/component.rb

@@ -13,8 +13,16 @@ class Component
   include ActiveModel::Model
   include ActiveModel::Attributes
 
+  # HTML pass-through keys that bypass ActiveModel attributes
+  HTML_OPTIONS = %i[id class data style role tabindex title aria].to_set.freeze
+
   class_attribute :slot_names, default: []
 
+  def initialize(**kwargs)
+    @html_options = kwargs.extract!(*HTML_OPTIONS)
+    super(**kwargs)
+  end
+
   def self.default(**overrides)
     overrides.each do |name, value|
       type = attribute_types.fetch(name.to_s).type
@@ -49,6 +57,24 @@ class Component
 
   private
 
+  # Merge component classes with html_options. Call from to_s:
+  #   tag.div(**merge_html_options(class: classes)) { @content }
+  def merge_html_options(**opts)
+    html = @html_options || {}
+    return opts if html.empty?
+
+    merged = opts.merge(html)
+    # Merge classes together rather than overwriting
+    if opts[:class] && html[:class]
+      merged[:class] = "#{opts[:class]} #{html[:class]}"
+    end
+    # Deep merge data hashes
+    if opts[:data] && html[:data]
+      merged[:data] = opts[:data].merge(html[:data])
+    end
+    merged
+  end
+
   def tag
     @view_context.tag
   end

data/config/importmap.rb

@@ -25,3 +25,6 @@ pin "ui/controllers/fui_tab_controller", to: "ui/controllers/fui_tab_controller.
 pin "ui/controllers/fui_toast_controller", to: "ui/controllers/fui_toast_controller.js"
 pin "ui/controllers/fui_transition_controller", to: "ui/controllers/fui_transition_controller.js"
 pin "ui/controllers/fui_visibility_controller", to: "ui/controllers/fui_visibility_controller.js"
+pin "ui/controllers/fui_emoji_picker_controller", to: "ui/controllers/fui_emoji_picker_controller.js"
+
+pin "emoji-picker-element", to: "https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"

data/lib/rails_active_ui.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Ui
+end
+
+require "ui"
+require "ui/version"
+require "ui/engine"

data/lib/ui/version.rb

@@ -1,3 +1,3 @@
 module Ui
-  VERSION = "0.2.0"
+  VERSION = "0.2.1"
 end

data/lib/ui.rb

@@ -1,6 +1,2 @@
-require "ui/version"
-require "ui/engine"
-
 module Ui
-  # Your code goes here...
 end

metadata

@@ -1,13 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails-active-ui
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - nathan
+autorequire:
 bindir: bin
 cert_chain: []
-date: 1980-01-01 00:00:00.000000000 Z
+date: 2026-03-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -44,6 +45,7 @@ files:
 - app/components/api_component.rb
 - app/components/breadcrumb_component.rb
 - app/components/button_component.rb
+- app/components/button_to_component.rb
 - app/components/calendar_component.rb
 - app/components/card_component.rb
 - app/components/checkbox_component.rb
@@ -103,6 +105,7 @@ files:
 - app/components/step_component.rb
 - app/components/step_group_component.rb
 - app/components/sticky_component.rb
+- app/components/style_component.rb
 - app/components/sub_header_component.rb
 - app/components/sub_menu_component.rb
 - app/components/tab_component.rb
@@ -114,6 +117,7 @@ files:
 - app/components/transition_component.rb
 - app/components/v_stack_component.rb
 - app/components/visibility_component.rb
+- app/components/wrapper_component.rb
 - app/helpers/component_helper.rb
 - app/helpers/fui_helper.rb
 - app/javascript/accordion.js
@@ -173,6 +177,7 @@ files:
 - app/javascript/ui/controllers/fui_dimmer_controller.js
 - app/javascript/ui/controllers/fui_dropdown_controller.js
 - app/javascript/ui/controllers/fui_embed_controller.js
+- app/javascript/ui/controllers/fui_emoji_picker_controller.js
 - app/javascript/ui/controllers/fui_flyout_controller.js
 - app/javascript/ui/controllers/fui_form_controller.js
 - app/javascript/ui/controllers/fui_modal_controller.js
@@ -198,7 +203,7 @@ files:
 - config/importmap.rb
 - config/initializers/ruby_template_handler.rb
 - config/routes.rb
-- lib/rails-active-ui.rb
+- lib/rails_active_ui.rb
 - lib/tasks/ui_tasks.rake
 - lib/ui.rb
 - lib/ui/engine.rb
@@ -210,6 +215,7 @@ metadata:
   homepage_uri: https://github.com/n-at-han-k/rails-active-ui
   source_code_uri: https://github.com/n-at-han-k/rails-active-ui/tree/main
   changelog_uri: https://github.com/n-at-han-k/rails-active-ui/blob/main/CHANGELOG.md
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -224,7 +230,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.7.2
+rubygems_version: 3.3.15
+signing_key:
 specification_version: 4
 summary: ActiveModel::Attributes-based view components
 test_files: []

data/lib/rails-active-ui.rb

@@ -1,6 +0,0 @@
-# frozen_string_literal: true
-
-# Shim so Bundler.require can find the gem by its published name
-# (rails-active-ui) rather than requiring consumers to know the
-# internal require path ("ui").
-require "ui"