ariadne_view_components 0.0.69 → 0.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/README.md +20 -1
  4. data/app/assets/javascripts/ariadne_view_components.js +14 -14
  5. data/app/assets/javascripts/ariadne_view_components.js.br +0 -0
  6. data/app/assets/javascripts/ariadne_view_components.js.gz +0 -0
  7. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  8. data/app/assets/stylesheets/ariadne_view_components.css +1 -1
  9. data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
  10. data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
  11. data/app/components/ariadne/base_component.rb +11 -1
  12. data/app/components/ariadne/behaviors/captionable.rb +55 -0
  13. data/app/components/ariadne/behaviors/tooltipable.rb +15 -15
  14. data/app/components/ariadne/form/base_component.rb +1 -1
  15. data/app/components/ariadne/form/checkbox/component.html.erb +6 -0
  16. data/app/components/ariadne/form/checkbox/component.rb +34 -0
  17. data/app/components/ariadne/form/group/component.html.erb +2 -2
  18. data/app/components/ariadne/form/group/component.rb +29 -2
  19. data/app/components/ariadne/form/hidden_field/component.html.erb +6 -1
  20. data/app/components/ariadne/form/hidden_field/component.rb +10 -3
  21. data/app/components/ariadne/form/radio/component.html.erb +6 -0
  22. data/app/components/ariadne/form/radio/component.rb +26 -0
  23. data/app/components/ariadne/form/radio_button/component.html.erb +6 -0
  24. data/app/components/ariadne/form/radio_button/component.rb +60 -0
  25. data/app/components/ariadne/form/radio_button_group/component.html.erb +24 -0
  26. data/app/components/ariadne/form/radio_button_group/component.rb +59 -0
  27. data/app/components/ariadne/form/text_field/component.html.erb +1 -0
  28. data/app/components/ariadne/layout/grid/component.html.erb +7 -0
  29. data/app/components/ariadne/layout/grid/component.rb +36 -0
  30. data/app/components/ariadne/layout/nav_bar/component.html.erb +12 -101
  31. data/app/components/ariadne/layout/nav_bar/component.rb +38 -9
  32. data/app/components/ariadne/layout/two_panel/component.html.erb +14 -0
  33. data/app/components/ariadne/layout/two_panel/component.rb +38 -0
  34. data/app/components/ariadne/layout/wide/component.html.erb +9 -0
  35. data/app/components/ariadne/layout/wide/component.rb +24 -0
  36. data/app/components/ariadne/turbo/frame/component.html.erb +3 -0
  37. data/app/components/ariadne/turbo/frame/component.rb +16 -0
  38. data/app/components/ariadne/turbo/stream_action/component.html.erb +4 -0
  39. data/app/components/ariadne/turbo/stream_action/component.rb +25 -0
  40. data/app/components/ariadne/ui/badge/component.html.erb +1 -0
  41. data/app/components/ariadne/ui/badge/component.rb +76 -0
  42. data/app/components/ariadne/ui/blankslate/component.html.erb +9 -0
  43. data/app/components/ariadne/ui/blankslate/component.rb +37 -0
  44. data/app/components/ariadne/ui/button/component.rb +2 -1
  45. data/app/components/ariadne/ui/color_dot/component.html.erb +7 -0
  46. data/app/components/ariadne/ui/color_dot/component.rb +39 -0
  47. data/app/components/ariadne/ui/combobox/component.html.erb +9 -15
  48. data/app/components/ariadne/ui/combobox/component.rb +38 -26
  49. data/app/components/ariadne/ui/combobox/{menu_item → item}/component.html.erb +1 -1
  50. data/app/components/ariadne/ui/combobox/item/component.rb +61 -0
  51. data/app/components/ariadne/ui/combobox/option/component.html.erb +1 -1
  52. data/app/components/ariadne/ui/combobox/option/component.rb +11 -12
  53. data/app/components/ariadne/ui/data_table/component.html.erb +1 -0
  54. data/app/components/ariadne/ui/data_table/component.rb +11 -0
  55. data/app/components/ariadne/ui/dialog/component.html.erb +32 -0
  56. data/app/components/ariadne/ui/dialog/component.rb +37 -0
  57. data/app/components/ariadne/ui/dialog/component.ts +27 -0
  58. data/app/components/ariadne/ui/heroicon/component.rb +7 -2
  59. data/app/components/ariadne/ui/list/component.html.erb +6 -0
  60. data/app/components/ariadne/ui/list/component.rb +12 -0
  61. data/app/components/ariadne/ui/list/item/component.html.erb +16 -0
  62. data/app/components/ariadne/ui/list/item/component.rb +17 -0
  63. data/app/components/ariadne/ui/table/cell/component.html.erb +3 -0
  64. data/app/components/ariadne/ui/table/cell/component.rb +38 -0
  65. data/app/components/ariadne/ui/table/component.html.erb +13 -0
  66. data/app/components/ariadne/ui/table/component.rb +45 -0
  67. data/app/components/ariadne/ui/table/footer/component.html.erb +0 -0
  68. data/app/components/ariadne/ui/table/footer/component.rb +14 -0
  69. data/app/components/ariadne/ui/table/header/component.html.erb +3 -0
  70. data/app/components/ariadne/ui/table/header/component.rb +40 -0
  71. data/app/components/ariadne/ui/table/row/component.html.erb +5 -0
  72. data/app/components/ariadne/ui/table/row/component.rb +28 -0
  73. data/app/components/ariadne/ui/typography/component.html.erb +1 -3
  74. data/app/components/ariadne/ui/typography/component.rb +62 -2
  75. data/app/frontend/ariadne/index.ts +0 -1
  76. data/app/frontend/controllers/autosubmittable_controller.ts +25 -0
  77. data/lib/ariadne/forms/base.html.erb +4 -5
  78. data/lib/ariadne/forms/dsl/badge.rb +35 -0
  79. data/lib/ariadne/forms/dsl/button_input.rb +4 -3
  80. data/lib/ariadne/forms/dsl/form_object.rb +8 -0
  81. data/lib/ariadne/forms/dsl/form_reference_input.rb +59 -0
  82. data/lib/ariadne/forms/dsl/hidden_input.rb +32 -0
  83. data/lib/ariadne/forms/dsl/input.rb +4 -2
  84. data/lib/ariadne/forms/dsl/input_group.rb +3 -3
  85. data/lib/ariadne/forms/dsl/radio_button_group_input.rb +50 -0
  86. data/lib/ariadne/forms/dsl/radio_button_input.rb +48 -0
  87. data/lib/ariadne/forms/dsl/text_field_input.rb +4 -1
  88. data/lib/ariadne/view_components/version.rb +1 -1
  89. metadata +54 -10
  90. data/app/components/ariadne/form/caption/component.html.erb +0 -10
  91. data/app/components/ariadne/form/caption/component.rb +0 -32
  92. data/app/components/ariadne/form/spacing_wrapper/component.html.erb +0 -3
  93. data/app/components/ariadne/form/spacing_wrapper/component.rb +0 -10
  94. data/app/components/ariadne/ui/combobox/menu_item/component.rb +0 -53
  95. data/app/frontend/controllers/tooltip.ts +0 -75
  96. data/app/frontend/stylesheets/typography.css +0 -117
@@ -6,7 +6,7 @@ module Ariadne
6
6
  module Combobox
7
7
  class Component < BaseComponent
8
8
  option :placement, default: proc { "bottom" }
9
- option :show_search, default: proc { :yes }
9
+ option :show_search, default: proc { :no }
10
10
  option :size, default: proc { :md }
11
11
 
12
12
  option :clamped, default: proc { false }
@@ -15,20 +15,15 @@ module Ariadne
15
15
 
16
16
  option :filter_placeholder, default: proc { "Filter…" }
17
17
 
18
- renders_many :options, Ariadne::UI::Combobox::MenuItem::Component
19
- renders_one :selector, ->(size:, icon:) do
20
- render(Ariadne::UI::Button::Component.new(theme: :ghost, size: size, icon_only: :yes)) do
21
- render(Ariadne::UI::Heroicon::Component.new(icon: icon, variant: :solid, size: size))
22
- end
23
- end
18
+ renders_many :options, Ariadne::UI::Combobox::Option::Component
19
+ # behind the scenes, an item is just a very specific type of option
20
+ renders_many :items, Ariadne::UI::Combobox::Item::Component
24
21
 
25
- def any_options?
26
- options.any?
27
- end
22
+ renders_one :button, Ariadne::UI::Button::Component
28
23
 
29
24
  accepts_html_attributes do |html_attrs|
30
25
  html_attrs[:data] = {
31
- controller: "input-filter #{stimulus_name}",
26
+ controller: "ariadne-ui-input-filter #{stimulus_name}",
32
27
  "#{stimulus_name}-placement-value": placement,
33
28
  "#{stimulus_name}-clamped-value": clamped,
34
29
  }
@@ -43,38 +38,55 @@ module Ariadne
43
38
  type: "search",
44
39
  placeholder: proc { @filter_placeholder },
45
40
  data: {
46
- "input-filter-target": "input",
41
+ "ariadne-ui-input-filter-target": "input",
47
42
  "#{stimulus_name}-target": "searchInput",
48
- "action": "input-filter#handleInput",
43
+ "action": "ariadne-ui-input-filter#handleInput",
49
44
  }
50
45
 
46
+ def initialize(**options)
47
+ super
48
+ validate!
49
+ end
50
+
51
+ def choices?
52
+ items? || options?
53
+ end
54
+
55
+ def choices
56
+ items.presence || options
57
+ end
58
+
59
+ private def validate!
60
+ # raise ArgumentError, "Must provide only `options` or `items`, not both" if items? && options?
61
+ end
62
+
51
63
  style :popover do
52
64
  base do
53
65
  [
54
- "fixed",
55
- "max-w-[90vw]",
56
- "z-20",
57
- "scroll",
58
- "scrollbar-trigger",
59
- "rounded-lg",
60
- "shadow-lg",
61
- "bg-white",
62
- "dark:bg-zinc-900",
66
+ "ariadne-fixed",
67
+ "ariadne-max-w-[90vw]",
68
+ "ariadne-z-20",
69
+ "ariadne-scroll",
70
+ "ariadne-scrollbar-trigger",
71
+ "ariadne-rounded-lg",
72
+ "ariadne-shadow-lg",
73
+ "ariadne-bg-white",
74
+ "dark:ariadne-bg-zinc-900",
63
75
  ]
64
76
  end
65
77
 
66
78
  variants do
67
79
  size do
68
- sm { "w-36" }
69
- md { "w-52" }
70
- lg { "w-96" }
80
+ sm { "ariadne-w-36" }
81
+ md { "ariadne-w-52" }
82
+ lg { "ariadne-w-96" }
71
83
  end
72
84
  end
73
85
  end
74
86
 
75
87
  style :options do
76
88
  base do
77
- ["overflow-auto", "p-2"]
89
+ ["ariadne-overflow-auto", "ariadne-p-2"]
78
90
  end
79
91
  end
80
92
  end
@@ -1,5 +1,5 @@
1
1
  <% slot = capture do %>
2
- <span class="truncate"><%= label %></span>
2
+ <span class="ariadne-truncate"><%= label %></span>
3
3
  <% end %>
4
4
 
5
5
  <%= content_tag(
@@ -0,0 +1,61 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module Combobox
7
+ module Item
8
+ class Component < BaseComponent
9
+ option :label
10
+ option :as, default: proc { :link } # :button
11
+
12
+ accepts_html_attributes do |html_attrs|
13
+ html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(as:), html_attrs[:class]].join(" "))
14
+
15
+ # html_attrs["data-input-filter-target"] = "searchString"
16
+ if as == :link && !html_attrs[:target]
17
+ html_attrs[:target] = "_top"
18
+ end
19
+ end
20
+
21
+ def initialize(**options)
22
+ super(**options)
23
+ end
24
+
25
+ style do
26
+ base do
27
+ [
28
+ "ariadne-flex",
29
+ "ariadne-gap-0.5",
30
+ "ariadne-items-center",
31
+ "ariadne-ps-2",
32
+ "ariadne-pe-1",
33
+ "ariadne-rounded",
34
+ "!ariadne-ring-0",
35
+ "hover:ariadne-bg-zinc-100",
36
+ "hover:dark:ariadne-bg-zinc-800",
37
+ "focus-within:ariadne-bg-zinc-100",
38
+ "focus-within:dark:ariadne-bg-zinc-800",
39
+ ]
40
+ end
41
+ variants do
42
+ as do
43
+ button do
44
+ "ariadne-appearance-none ariadne-inline-flex ariadne-w-full"
45
+ end
46
+
47
+ link do
48
+ "ariadne-cursor-pointer"
49
+ end
50
+ end
51
+ end
52
+ end
53
+
54
+ def link?
55
+ as == :link
56
+ end
57
+ end
58
+ end
59
+ end
60
+ end
61
+ end
@@ -4,7 +4,7 @@
4
4
  class="<%= style %>">
5
5
  <span class="px-1"><%= option_component %></span>
6
6
  <span
7
- class="truncate <%= text_content ? 'px-1' : 'inline-flex items-center' %>"
7
+ class="ariadne-truncate <%= text_content ? 'ariadne-px-1' : 'ariadne-inline-flex ariadne-items-center' %>"
8
8
  data-input-filter-target="searchString">
9
9
  <%= content %>
10
10
  </span>
@@ -14,27 +14,26 @@ module Ariadne
14
14
  accepts_html_attributes disabled: false,
15
15
  tabindex: -1,
16
16
  data: proc {
17
- { action: "#{UI::Combobox::Component.stimulus_name}#checkboxClicked" }
17
+ { action: "#{Ariadne::UI::Combobox::Component.stimulus_name}#checkboxClicked" }
18
18
  }
19
19
 
20
20
  def option_component
21
- cmp = type == :multiple ? Checkbox : Radio
21
+ cmp = type == :multiple ? Ariadne::Form::Checkbox : Ariadne::Form::Radio
22
22
  render(cmp::Component.new(html_attrs:))
23
23
  end
24
24
 
25
25
  style do
26
26
  base do
27
27
  [
28
- "flex",
29
- "gap-0.5",
30
- "items-center",
31
- "text-ui-base",
32
- "rounded",
33
- "!ring-0",
34
- "hover:bg-zinc-100",
35
- "hover:dark:bg-zinc-800",
36
- "focus-within:bg-zinc-100",
37
- "focus-within:dark:bg-zinc-800",
28
+ "ariadne-flex",
29
+ "ariadne-gap-0.5",
30
+ "ariadne-items-center",
31
+ "ariadne-rounded",
32
+ "!ariadne-ring-0",
33
+ "hover:ariadne-bg-zinc-100",
34
+ "hover:dark:ariadne-bg-zinc-800",
35
+ "focus-within:ariadne-bg-zinc-100",
36
+ "focus-within:dark:ariadne-bg-zinc-800",
38
37
  ]
39
38
  end
40
39
  end
@@ -0,0 +1 @@
1
+ <div>Add Ariadne::UI::DataTable template here</div>
@@ -0,0 +1,11 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module DataTable
7
+ class Component < Ariadne::BaseComponent
8
+ end
9
+ end
10
+ end
11
+ end
@@ -0,0 +1,32 @@
1
+ <div
2
+ class="ariadne-contents"
3
+ data-controller="<%= stimulus_name %>"
4
+ data-action="click@window-><%= stimulus_name %>#windowClick"
5
+ <%= html_attrs.to_html %>>
6
+ <%= trigger %>
7
+
8
+ <dialog
9
+ class="<%= style %>"
10
+ data-<%= stimulus_name %>-target="dialog">
11
+ <div>
12
+ <div class="ariadne-p-6 ariadne-space-y-6">
13
+ <div class="ariadne-flex ariadne-flex-col ariadne-gap-3 ariadne-pe-5">
14
+ <h2 class="ariadne-text-lg ariadne-font-semibold ariadne-leading-none ariadne-tracking-tight"><%= title %></h2>
15
+ <% if description %><p class="ariadne-text-sm ariadne-text-muted-foreground"><%= description %></p><% end %>
16
+ </div>
17
+ <div><%= content %></div>
18
+ <% if footer? %>
19
+ <div class="ariadne-flex ariadne-gap-2 ariadne-flex-wrap"><%= footer %></div>
20
+ <% end %>
21
+ </div>
22
+ <div class="ariadne-absolute ariadne-end-3 ariadne-top-3">
23
+ <%= render Ariadne::UI::Button::Component.new(
24
+ theme: :nude, icon_only: :yes,
25
+ html_attrs: { "data-action": "click->#{stimulus_name}#triggerClick" }) do %>
26
+ <span class="sr-only"><%= trigger_close_label %></span>
27
+ <%= render Ariadne::UI::Heroicon::Component.new(icon: :"x-mark", size: :sm, variant: :outline) %>
28
+ <% end %>
29
+ </div>
30
+ </div>
31
+ </dialog>
32
+ </div>
@@ -0,0 +1,37 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module Dialog
7
+ class Component < Ariadne::BaseComponent
8
+ option :trigger_text
9
+ option :title
10
+ option :trigger_close_label
11
+ option :description, optional: true
12
+
13
+ renders_one :trigger
14
+ renders_one :footer
15
+
16
+ accepts_html_attributes
17
+
18
+ style do
19
+ base do
20
+ [
21
+ "ariadne-fixed",
22
+ "ariadne-w-96",
23
+ "ariadne-max-w-[90vw]",
24
+ "ariadne-max-h-[90-vh]",
25
+ "ariadne-shadow-xl",
26
+ "ariadne-rounded-2xl",
27
+ "ariadne-bg-white",
28
+ "dark:ariadne-bg-zinc-950",
29
+ "backdrop:ariadne-bg-zinc-900/20",
30
+ "backdrop:dark:ariadne-bg-zinc-100/20",
31
+ ]
32
+ end
33
+ end
34
+ end
35
+ end
36
+ end
37
+ end
@@ -0,0 +1,27 @@
1
+ import {controllerFactory} from '@utils/createController'
2
+ import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'
3
+
4
+ export default class DialogController extends controllerFactory()({
5
+ targets: {dialog: HTMLDialogElement},
6
+ }) {
7
+ close() {
8
+ this.dialogTarget.close()
9
+ enableBodyScroll(this.dialogTarget)
10
+ }
11
+ disconnect() {
12
+ this.close()
13
+ }
14
+ open() {
15
+ this.dialogTarget.showModal()
16
+ disableBodyScroll(this.dialogTarget, {reserveScrollBarGap: true})
17
+ }
18
+ triggerClick() {
19
+ if (this.dialogTarget.open) this.close()
20
+ else this.open()
21
+ }
22
+ windowClick(e: MouseEvent) {
23
+ if (e.target === this.dialogTarget) {
24
+ this.close()
25
+ }
26
+ }
27
+ }
@@ -22,6 +22,8 @@ module Ariadne
22
22
  # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
23
23
  # @param size [Symbol] <%= one_of(Ariadne::UI::Heroicon::Component::SIZE_MAPPINGS, sort: false) %>
24
24
  class Component < Ariadne::BaseComponent
25
+ attr_accessor :dark_mode
26
+
25
27
  option :icon
26
28
  option :variant
27
29
  option :size, default: -> { :md }
@@ -30,7 +32,10 @@ module Ariadne
30
32
  include HeroiconsHelper
31
33
 
32
34
  accepts_html_attributes do |html_attrs|
33
- html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([@heroicon.attributes["class"], style(size: @size), html_attrs[:class]].join(" "))
35
+ classes = [@heroicon.attributes["class"], style(size: @size)]
36
+ classes << ["dark:ariadne-invert"] if dark_mode == :invert
37
+ classes << html_attrs[:class]
38
+ html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge(classes)
34
39
  end
35
40
 
36
41
  def initialize(**options)
@@ -46,7 +51,7 @@ module Ariadne
46
51
  end
47
52
 
48
53
  def inner
49
- ActiveSupport::SafeBuffer.new(@heroicon.path)
54
+ ActiveSupport::SafeBuffer.new(@heroicon.inner)
50
55
  end
51
56
 
52
57
  style do
@@ -0,0 +1,6 @@
1
+
2
+ <ol class="ariadne-divide-y ariadne-divide-zinc-100 dark:ariadne-divide-zinc-800">
3
+ <% items.each do |item| %>
4
+ <li><%= item %></li>
5
+ <% end %>
6
+ </ol>
@@ -0,0 +1,12 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module List
7
+ class Component < Ariadne::BaseComponent
8
+ renders_many :items, Ariadne::UI::List::Item::Component
9
+ end
10
+ end
11
+ end
12
+ end
@@ -0,0 +1,16 @@
1
+ <div class="ariadne-flex ariadne-gap-3 ariadne-items-center ariadne-py-2">
2
+
3
+ <div class="ariadne-shrink-0">
4
+ <%= leading_item if leading_item? %>
5
+ </div>
6
+ <div class="ariadne-overflow-hidden">
7
+ <%= cell %>
8
+ </div>
9
+ <div class="ariadne-grow ariadne-flex ariadne-justify-end">
10
+ <%= trailing_item if trailing_item? %>
11
+ </div>
12
+ <% if trailing_menu? %>
13
+
14
+ <% end %>
15
+
16
+ </div>
@@ -0,0 +1,17 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module List
7
+ module Item
8
+ class Component < Ariadne::BaseComponent
9
+ renders_one :leading_item, Ariadne::BaseComponent::ACCEPT_ANYTHING
10
+ renders_one :cell, Ariadne::BaseComponent::ACCEPT_ANYTHING
11
+ renders_one :trailing_item, Ariadne::BaseComponent::ACCEPT_ANYTHING
12
+ renders_one :trailing_menu, Ariadne::BaseComponent::ACCEPT_ANYTHING
13
+ end
14
+ end
15
+ end
16
+ end
17
+ end
@@ -0,0 +1,3 @@
1
+ <<%= tag_name %> class="<%= html_attrs[:class] %>" <%= html_attributes %>>
2
+ <%= content %>
3
+ </<%= tag_name %>>
@@ -0,0 +1,38 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module Table
7
+ module Cell
8
+ class Component < Ariadne::BaseComponent
9
+ attr_accessor :context
10
+
11
+ accepts_html_attributes do |html_attrs|
12
+ html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:cell), html_attrs[:class]].join(" "))
13
+ end
14
+
15
+ def tag_name
16
+ case context
17
+ when :header
18
+ "th"
19
+ else
20
+ "td"
21
+ end
22
+ end
23
+
24
+ style :cell do
25
+ base do
26
+ [
27
+ "ariadne-p-4",
28
+ "ariadne-align-middle",
29
+ "[&:has([role=checkbox])]:ariadne-pr-0",
30
+ "ariadne-font-medium",
31
+ ]
32
+ end
33
+ end
34
+ end
35
+ end
36
+ end
37
+ end
38
+ end
@@ -0,0 +1,13 @@
1
+ <table class="<%= style(:table) %>" <%= html_attributes %>>
2
+ <% if caption? %>
3
+ <caption class="<%= style(:caption) %>" <%= html_attributes %>><%= caption %></caption>
4
+ <% end %>
5
+ <% if header? %>
6
+ <%= header %>
7
+ <% end %>
8
+ <tbody class="<%= style(:body) %>">
9
+ <% rows.each do |row| %>
10
+ <%= row %>
11
+ <% end %>
12
+ </tbody>
13
+ </table>
@@ -0,0 +1,45 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module Table
7
+ class Component < Ariadne::BaseComponent
8
+ renders_one :caption
9
+ renders_one :header, Ariadne::UI::Table::Header::Component
10
+ renders_many :rows, Ariadne::UI::Table::Row::Component
11
+ renders_one :footer, Ariadne::UI::Table::Footer::Component
12
+
13
+ style :table do
14
+ base do
15
+ [
16
+ "ariadne-w-full",
17
+ "ariadne-caption-bottom",
18
+ "ariadne-text-sm",
19
+ ]
20
+ end
21
+ end
22
+
23
+ style :body do
24
+ base do
25
+ [
26
+ "ariadne-divide-y",
27
+ "ariadne-divide-zinc-100",
28
+ "dark:ariadne-divide-zinc-800",
29
+ ]
30
+ end
31
+ end
32
+
33
+ style :caption do
34
+ base do
35
+ [
36
+ "ariadne-mt-4",
37
+ "ariadne-text-sm",
38
+ "ariadne-text-muted-foreground",
39
+ ]
40
+ end
41
+ end
42
+ end
43
+ end
44
+ end
45
+ end
@@ -0,0 +1,14 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module Table
7
+ module Footer
8
+ class Component < Ariadne::BaseComponent
9
+ renders_one :row, Ariadne::UI::Table::Row::Component
10
+ end
11
+ end
12
+ end
13
+ end
14
+ end
@@ -0,0 +1,3 @@
1
+ <thead class="<%= style(:header) %>" <%= html_attributes %>>
2
+ <%= row %>
3
+ </thead>
@@ -0,0 +1,40 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module Table
7
+ module Header
8
+ class Component < Ariadne::BaseComponent
9
+ renders_one :row, Ariadne::UI::Table::Row::Component
10
+
11
+ def before_render
12
+ row&.context = :header
13
+ end
14
+
15
+ style :header do
16
+ base do
17
+ [
18
+ "[&_tr]:ariadne-border-b",
19
+ ]
20
+ end
21
+ end
22
+
23
+ style :header_cell do
24
+ base do
25
+ [
26
+ "ariadne-h-12",
27
+ "ariadne-px-4",
28
+ "ariadne-text-left",
29
+ "ariadne-align-middle",
30
+ "ariadne-font-medium",
31
+ "ariadne-text-muted-foreground",
32
+ "[&:has([role=checkbox])]:ariadne-pr-0 ariadne-w-[100px]",
33
+ ]
34
+ end
35
+ end
36
+ end
37
+ end
38
+ end
39
+ end
40
+ end
@@ -0,0 +1,5 @@
1
+ <tr class="<%= style(:row) %>" <%= html_attributes %>>
2
+ <% cells.each do |cell| %>
3
+ <%= cell %>
4
+ <% end %>
5
+ </tr>
@@ -0,0 +1,28 @@
1
+ # typed: false
2
+ # frozen_string_literal: true
3
+
4
+ module Ariadne
5
+ module UI
6
+ module Table
7
+ module Row
8
+ class Component < Ariadne::BaseComponent
9
+ attr_accessor :context
10
+
11
+ renders_one :row_action, Ariadne::UI::Combobox::Component
12
+ renders_many :cells, Ariadne::UI::Table::Cell::Component
13
+
14
+ style :row do
15
+ base do
16
+ [
17
+ "ariadne-border-b",
18
+ "ariadne-transition-colors",
19
+ "hover:ariadne-bg-muted/50",
20
+ "data-[state=selected]:ariadne-bg-muted",
21
+ ]
22
+ end
23
+ end
24
+ end
25
+ end
26
+ end
27
+ end
28
+ end
@@ -1,3 +1 @@
1
- <%= content_tag(tag_name, html_attrs) do %>
2
- <%= content %>
3
- <% end %>
1
+ <%= content_tag(tag_name, class: html_attrs[:class], **html_attrs.except(:class)) { content } %>