rails-active-ui 0.3.3 → 0.3.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed598d8bef00b0a05b56a257fadb43e3e8b47e424a049f85a94f749d1d9c01a1
-  data.tar.gz: e86b1178b530939c40bdd06eac7a60cef7f59d3f3424965294824a72b17e8bea
+  metadata.gz: '0058e3cc403ae342263ae7ed336067515a465e050c833071d582e2724fa0a451'
+  data.tar.gz: 94956bddda4efa13eaf12fbed9de95fed87a999d33b871d80ae1ce992aa9de55
 SHA512:
-  metadata.gz: fc9526d44e5506a47226dff9f6df22c3ccf4d9e09803f9c05e9e0acb9e0abf6f3e8ad54efb7c8cd0a05d82f68954f768f85a10ab7a4f25f9ddb81aa06b6a9649
-  data.tar.gz: 8bb12969167423f9b32f9e62b67f7e8770feb332d8e49a1744488374fc886e2076746ef290d1057653dd2312e2b738112c4e4bf71d01b82616d8ee57fef87d29
+  metadata.gz: b5fda493b980890c6a882563b8b04cb01f7e5b7b6a0df9dc567d5ccf6f565cd8d80fd78ab686b45cf7ed7e4ad43b2877269095730991cfb7b39c8d12cbd1ce91
+  data.tar.gz: 937f9a991da1899949b425735a5926c7a2277c6769a77b39822c918e59afb0454f0f69fbebb9c4c85895ee058ee1e39948d5a8f6f29e0dcaf4d9760de10513f5

data/app/components/input_component.rb

@@ -63,6 +63,7 @@ class InputComponent < Component
     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)

data/app/controllers/ui/examples_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Ui
+  class ExamplesController < ActionController::Base
+    def index; end
+  end
+end

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

@@ -0,0 +1,65 @@
+# ------------------------------------------------------------------
+# Api
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Api" }
+text "Wraps content with the fui-api Stimulus controller for making AJAX requests."
+
+Segment {
+  Api(url: "/up", method_val: "get") {
+    Button(color: :blue) { text "Check Health" }
+    concat tag.div(class: "ui response") { "" }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Api(url: "/up", method_val: "get") {
+  Button(color: :blue) { text "Check Health" }
+  concat tag.div(class: "ui response") { "" }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# State
+# ------------------------------------------------------------------
+Header(size: :h3) { text "State" }
+text "Manages active/inactive states on an element, toggling text and CSS classes."
+
+Segment {
+  State(text_active: "Following", text_inactive: "Follow", class_active: "green", class_inactive: "") {
+    Button(color: :blue) { text "Follow" }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'State(text_active: "Following", text_inactive: "Follow", class_active: "green", class_inactive: "") {
+  Button(color: :blue) { text "Follow" }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Visibility
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Visibility" }
+text "Tracks element visibility in the viewport and fires callbacks on scroll events."
+
+Segment {
+  Visibility(once: true, offset: 50) {
+    Segment { text "This element tracks its visibility in the viewport." }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Visibility(once: true, offset: 50) {
+  Segment { text "This element tracks its visibility in the viewport." }
+}'
+  )}
+}

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

@@ -0,0 +1,303 @@
+# ------------------------------------------------------------------
+# Breadcrumb
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Breadcrumb" }
+text "A breadcrumb trail for navigation hierarchy."
+
+Segment {
+  Breadcrumb(size: :large) {
+    concat tag.a("Home", class: "section", href: "#")
+    concat tag.div(class: "divider") { "/" }
+    concat tag.a("Store", class: "section", href: "#")
+    concat tag.div(class: "divider") { "/" }
+    concat tag.div(class: "active section") { "T-Shirt" }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Breadcrumb(size: :large) {
+  concat tag.a("Home", class: "section", href: "#")
+  concat tag.div(class: "divider") { "/" }
+  concat tag.a("Store", class: "section", href: "#")
+  concat tag.div(class: "divider") { "/" }
+  concat tag.div(class: "active section") { "T-Shirt" }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Form
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Form" }
+text "A styled form with field layout and validation states."
+
+Segment {
+  Form {
+    concat tag.div(class: "field") {
+      safe_join([
+        tag.label("Name"),
+        tag.input(type: "text", placeholder: "Full Name")
+      ])
+    }
+    concat tag.div(class: "field") {
+      safe_join([
+        tag.label("Email"),
+        tag.input(type: "email", placeholder: "email@example.com")
+      ])
+    }
+    concat tag.div(class: "fields") {
+      safe_join([
+        tag.div(class: "eight wide field") {
+          safe_join([tag.label("First Name"), tag.input(type: "text", placeholder: "First Name")])
+        },
+        tag.div(class: "eight wide field") {
+          safe_join([tag.label("Last Name"), tag.input(type: "text", placeholder: "Last Name")])
+        }
+      ])
+    }
+    Button(color: :blue, type: :submit) { text "Submit" }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Form {
+  concat tag.div(class: "field") {
+    safe_join([
+      tag.label("Name"),
+      tag.input(type: "text", placeholder: "Full Name")
+    ])
+  }
+  concat tag.div(class: "field") {
+    safe_join([
+      tag.label("Email"),
+      tag.input(type: "email", placeholder: "email@example.com")
+    ])
+  }
+  Button(color: :blue, type: :submit) { text "Submit" }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Grid (more detailed, already shown in layout)
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Grid" }
+text "A responsive grid system with column width, stacking, and alignment controls."
+
+Segment {
+  Grid(columns: 2, stackable: true, celled: "internally") {
+    Row(centered: true) {
+      Column(width: 6) {
+        Segment(basic: true) { text "6 wide centered" }
+      }
+      Column(width: 6) {
+        Segment(basic: true) { text "6 wide centered" }
+      }
+    }
+    Row {
+      Column(width: 4) {
+        Segment(basic: true) { text "4 wide" }
+      }
+      Column(width: 8) {
+        Segment(basic: true) { text "8 wide" }
+      }
+      Column(width: 4) {
+        Segment(basic: true) { text "4 wide" }
+      }
+    }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Grid(columns: 2, stackable: true, celled: "internally") {
+  Row(centered: true) {
+    Column(width: 6) { Segment(basic: true) { text "6 wide" } }
+    Column(width: 6) { Segment(basic: true) { text "6 wide" } }
+  }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Menu / MenuItem / SubMenu
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Menu / MenuItem / SubMenu" }
+text "Navigation menus with items, submenus, and various styles."
+
+Segment {
+  Menu {
+    MenuItem(active: true, href: "#") { text "Home" }
+    MenuItem(href: "#") { text "Messages" }
+    MenuItem(href: "#") { text "Friends" }
+    SubMenu(position: "right") {
+      MenuItem {
+        Input(placeholder: "Search...", icon: "search")
+      }
+    }
+  }
+
+  Divider(hidden: true)
+
+  Menu(secondary: true, pointing: true) {
+    MenuItem(active: true) { text "Active" }
+    MenuItem { text "Tab Two" }
+    MenuItem { text "Tab Three" }
+  }
+
+  Divider(hidden: true)
+
+  Menu(vertical: true, pointing: true) {
+    MenuItem(active: true) { text "Dashboard" }
+    MenuItem { text "Settings" }
+    MenuItem { text "Profile" }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Menu {
+  MenuItem(active: true, href: "#") { text "Home" }
+  MenuItem(href: "#") { text "Messages" }
+  MenuItem(href: "#") { text "Friends" }
+  SubMenu(position: "right") {
+    MenuItem {
+      Input(placeholder: "Search...", icon: "search")
+    }
+  }
+}
+
+Menu(secondary: true, pointing: true) {
+  MenuItem(active: true) { text "Active" }
+  MenuItem { text "Tab Two" }
+  MenuItem { text "Tab Three" }
+}
+
+Menu(vertical: true, pointing: true) {
+  MenuItem(active: true) { text "Dashboard" }
+  MenuItem { text "Settings" }
+  MenuItem { text "Profile" }
+}'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Message
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Message" }
+text "Informational messages with type, icon, and dismissible options."
+
+Segment {
+  VStack(spacing: 12) {
+    Message { text "Default message content." }
+    Message(type: :positive) { |c|
+      c.header { text "Success!" }
+      text "Your action was completed successfully."
+    }
+    Message(type: :negative) { |c|
+      c.header { text "Error" }
+      text "Something went wrong. Please try again."
+    }
+    Message(type: :warning) { text "Warning: This action cannot be undone." }
+    Message(type: :info, icon: "inbox") { text "You have new notifications." }
+    Message(dismissible: true, color: :blue) { text "Dismissible blue message." }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Message { text "Default message content." }
+
+Message(type: :positive) { |c|
+  c.header { text "Success!" }
+  text "Your action was completed successfully."
+}
+
+Message(type: :negative) { |c|
+  c.header { text "Error" }
+  text "Something went wrong. Please try again."
+}
+
+Message(type: :warning) { text "Warning: This action cannot be undone." }
+Message(type: :info, icon: "inbox") { text "You have new notifications." }
+Message(dismissible: true, color: :blue) { text "Dismissible blue message." }'
+  )}
+}
+
+Divider(hidden: true)
+
+# ------------------------------------------------------------------
+# Table / TableRow / TableCell
+# ------------------------------------------------------------------
+Header(size: :h3) { text "Table / TableRow / TableCell" }
+text "Data tables with manual rows or column accumulator mode."
+
+Segment {
+  Header(size: :h4) { text "Manual Row Mode" }
+  Table(celled: true, striped: true) {
+    concat tag.thead {
+      tag.tr {
+        safe_join([
+          tag.th("Name"),
+          tag.th("Status"),
+          tag.th("Notes")
+        ])
+      }
+    }
+    concat tag.tbody {
+      capture {
+        TableRow(positive: true) {
+          TableCell { text "John" }
+          TableCell { Icon(name: "checkmark", color: :green); text "Approved" }
+          TableCell { text "All good" }
+        }
+        TableRow {
+          TableCell { text "Jane" }
+          TableCell { text "Pending" }
+          TableCell { text "Awaiting review" }
+        }
+        TableRow(warning: true) {
+          TableCell { text "Bob" }
+          TableCell { text "Warning" }
+          TableCell { text "Needs attention" }
+        }
+      }
+    }
+  }
+}
+
+Segment(secondary: true) {
+  concat tag.pre { tag.code(
+    'Table(celled: true, striped: true) {
+  concat tag.thead {
+    tag.tr {
+      safe_join([tag.th("Name"), tag.th("Status"), tag.th("Notes")])
+    }
+  }
+  concat tag.tbody {
+    capture {
+      TableRow(positive: true) {
+        TableCell { text "John" }
+        TableCell { Icon(name: "checkmark", color: :green); text "Approved" }
+        TableCell { text "All good" }
+      }
+      TableRow {
+        TableCell { text "Jane" }
+        TableCell { text "Pending" }
+        TableCell { text "Awaiting review" }
+      }
+    }
+  }
+}'
+  )}
+}