rails-active-ui 0.3.7 → 0.3.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc0cc8da3df26f99e7a8cc99484217887250d5012cf7dabb3c226ce44a0c0dfa
-  data.tar.gz: fe3478bbc49e83fd764b9731d45938d3a211106c80c17efc93d7a084e5930db2
+  metadata.gz: ecbf2cf056cd56dbcac4a80553455b3a6b303ef8439bd38b5be513652835985f
+  data.tar.gz: 07c80687e4e01edb2050fe9e8f277dedbb7472f410f36e703948f791d4196104
 SHA512:
-  metadata.gz: c6a8ca84a74bd5d08eb650e612187dc09d7e5b11b1559b219a883e6846860018ae8e0238f5a653be4cd4d686f8dc34200dce6258f0e90d9e98511f66773c4808
-  data.tar.gz: 03ead102486b56deee8c6bd01db61a09324d5bfd25f150b33aaf144ad3d0823897fd0186e8b1211d919861a303d3df50cafa0b1f3666966449772655f634da3d
+  metadata.gz: 03b90d0da8e67d306bb9e59946264a1d931118179b35dfbcb6f80f16bd07a4b39cd7772453dffd7faba31bdc675aa9a620898f4cf545bc4ef8b2d633ffcaf08c
+  data.tar.gz: e60026a65dc4c3fcd3bfdfe97c56b36dc8a6fd9586da21122a20374122b273b38eb7b9333273fa749ad665b151e6b755bf0b667dc487bd7ef567d3445f473c20

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/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.7"
+  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.7
+  version: 0.3.8
 platform: ruby
 authors:
 - nathan
@@ -113,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