ariadne_view_components 0.0.59 → 0.0.64

Sign up to get free protection for your applications and to get access to all the features.
Files changed (264) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +68 -0
  3. data/LICENSE.txt +661 -49
  4. data/README.md +52 -4
  5. data/app/assets/javascripts/ariadne_view_components.js +98 -7
  6. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  7. data/app/assets/stylesheets/ariadne_view_components.css +1 -7
  8. data/app/components/ariadne/base_component.rb +79 -27
  9. data/app/components/ariadne/behaviors/tooltipable.rb +120 -0
  10. data/app/components/ariadne/conditional_wrapper.rb +21 -0
  11. data/app/components/ariadne/form/base_component.rb +74 -0
  12. data/app/components/ariadne/form/base_input_component.rb +60 -0
  13. data/app/components/ariadne/form/caption/component.html.erb +10 -0
  14. data/app/components/ariadne/form/caption/component.rb +29 -0
  15. data/app/components/ariadne/form/form_control/component.html.erb +19 -0
  16. data/app/components/ariadne/form/form_control/component.rb +27 -0
  17. data/app/components/ariadne/form/form_reference/component.html.erb +1 -0
  18. data/app/components/ariadne/form/form_reference/component.rb +18 -0
  19. data/app/components/ariadne/form/group/component.html.erb +5 -0
  20. data/app/components/ariadne/form/group/component.rb +27 -0
  21. data/app/components/ariadne/form/hidden_field/component.html.erb +1 -0
  22. data/app/components/ariadne/form/hidden_field/component.rb +15 -0
  23. data/app/components/ariadne/form/separator/component.html.erb +1 -0
  24. data/app/components/ariadne/form/separator/component.rb +8 -0
  25. data/app/components/ariadne/form/spacing_wrapper/component.html.erb +3 -0
  26. data/app/components/ariadne/form/spacing_wrapper/component.rb +8 -0
  27. data/app/components/ariadne/form/text_field/component.html.erb +25 -0
  28. data/app/components/ariadne/form/text_field/component.rb +132 -0
  29. data/app/components/ariadne/form/validation_message/component.html.erb +5 -0
  30. data/app/components/ariadne/form/validation_message/component.rb +14 -0
  31. data/app/components/ariadne/layout/narrow/component.html.erb +10 -0
  32. data/app/components/ariadne/layout/narrow/component.rb +24 -0
  33. data/app/components/ariadne/layout/nav_bar/component.css +0 -0
  34. data/app/components/ariadne/layout/nav_bar/component.html.erb +123 -0
  35. data/app/components/ariadne/layout/nav_bar/component.rb +77 -0
  36. data/app/components/ariadne/ui/button/component.html.erb +5 -0
  37. data/app/components/ariadne/ui/button/component.rb +184 -0
  38. data/app/components/ariadne/ui/clipboard_copy/component.html.erb +8 -0
  39. data/app/components/ariadne/ui/clipboard_copy/component.rb +102 -0
  40. data/app/components/ariadne/ui/clipboard_copy/component.ts +54 -0
  41. data/app/components/ariadne/ui/combobox/component.html.erb +32 -0
  42. data/app/components/ariadne/ui/combobox/component.rb +83 -0
  43. data/app/components/ariadne/ui/combobox/component.ts +119 -0
  44. data/app/components/ariadne/ui/combobox/menu_item/component.html.erb +9 -0
  45. data/app/components/ariadne/ui/combobox/menu_item/component.rb +53 -0
  46. data/app/components/ariadne/ui/combobox/option/component.html.erb +11 -0
  47. data/app/components/ariadne/ui/combobox/option/component.rb +45 -0
  48. data/app/components/ariadne/ui/heroicon/component.html.erb +3 -0
  49. data/app/components/ariadne/ui/heroicon/component.rb +141 -0
  50. data/app/components/ariadne/ui/image/component.rb +69 -0
  51. data/app/components/ariadne/ui/link/component.html.erb +3 -0
  52. data/app/components/ariadne/ui/link/component.rb +56 -0
  53. data/app/components/ariadne/ui/typography/component.html.erb +3 -0
  54. data/app/components/ariadne/ui/typography/component.rb +41 -0
  55. data/app/lib/ariadne/attributes_helper.rb +119 -0
  56. data/app/lib/ariadne/fetch_or_fallback_helper.rb +1 -1
  57. data/app/lib/ariadne/form.rb +16 -0
  58. data/app/lib/ariadne/view_helper.rb +2 -5
  59. data/app/lib/view_components_contrib/html_attrs.rb +64 -0
  60. data/app/lib/view_components_contrib/style_variants.rb +14 -0
  61. data/lib/ariadne/forms/acts_as_component.rb +125 -0
  62. data/lib/ariadne/forms/base.html.erb +8 -0
  63. data/lib/ariadne/forms/base.rb +132 -0
  64. data/lib/ariadne/forms/buffer_rewriter.rb +51 -0
  65. data/lib/ariadne/forms/builder.rb +88 -0
  66. data/lib/ariadne/forms/dsl/button_input.rb +33 -0
  67. data/lib/ariadne/forms/dsl/form_object.rb +26 -0
  68. data/lib/ariadne/forms/dsl/input.rb +322 -0
  69. data/lib/ariadne/forms/dsl/input_group.rb +34 -0
  70. data/lib/ariadne/forms/dsl/input_methods.rb +157 -0
  71. data/lib/ariadne/forms/dsl/submit_button_input.rb +36 -0
  72. data/lib/ariadne/forms/dsl/text_field_input.rb +73 -0
  73. data/lib/ariadne/forms/utils.rb +34 -0
  74. data/lib/ariadne/generate.rb +11 -0
  75. data/lib/ariadne/view_components/engine.rb +24 -7
  76. data/lib/ariadne/view_components/version.rb +1 -1
  77. data/lib/ariadne/view_components.rb +1 -1
  78. data/lib/ariadne/yard/backend.rb +24 -0
  79. data/lib/ariadne/yard/component_manifest.rb +148 -0
  80. data/lib/ariadne/yard/component_ref.rb +49 -0
  81. data/lib/ariadne/yard/docs_helper.rb +98 -0
  82. data/lib/ariadne/yard/info_arch_docs_helper.rb +31 -0
  83. data/lib/ariadne/yard/lookbook_docs_helper.rb +32 -0
  84. data/lib/ariadne/yard/lookbook_pages_backend.rb +235 -0
  85. data/lib/ariadne/yard/registry.rb +136 -0
  86. data/lib/ariadne/yard/renders_many_handler.rb +23 -0
  87. data/lib/ariadne/yard/renders_one_handler.rb +23 -0
  88. data/lib/ariadne/yard.rb +19 -0
  89. data/static/arguments.yml +141 -48
  90. data/static/audited_at.json +0 -9
  91. data/static/classes.yml +210 -209
  92. data/static/constants.json +2 -209
  93. data/static/statuses.json +0 -9
  94. metadata +125 -210
  95. data/app/assets/builds/ariadne_view_components.css +0 -2202
  96. data/app/assets/javascripts/components/ariadne/accumulator_controller/accumulator_controller.d.ts +0 -22
  97. data/app/assets/javascripts/components/ariadne/ariadne-form.d.ts +0 -22
  98. data/app/assets/javascripts/components/ariadne/ariadne.d.ts +0 -2
  99. data/app/assets/javascripts/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts +0 -4
  100. data/app/assets/javascripts/components/ariadne/dropdown/menu_component.d.ts +0 -1
  101. data/app/assets/javascripts/components/ariadne/events_controller/events_controller.d.ts +0 -4
  102. data/app/assets/javascripts/components/ariadne/options_controller/options_controller.d.ts +0 -39
  103. data/app/assets/javascripts/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts +0 -42
  104. data/app/assets/javascripts/components/ariadne/slideover_component/slideover-component.d.ts +0 -9
  105. data/app/assets/javascripts/components/ariadne/string_match_controller/string_match_controller.d.ts +0 -27
  106. data/app/assets/javascripts/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts +0 -48
  107. data/app/assets/javascripts/components/ariadne/tab_container_component/tab-container-component.d.ts +0 -1
  108. data/app/assets/javascripts/components/ariadne/tab_nav_component/tab-nav-component.d.ts +0 -9
  109. data/app/assets/javascripts/components/ariadne/time_ago_component/time-ago-component.d.ts +0 -1
  110. data/app/assets/javascripts/components/ariadne/toggleable_controller/toggleable_controller.d.ts +0 -34
  111. data/app/assets/javascripts/components/ariadne/tooltip_component/tooltip-component.d.ts +0 -24
  112. data/app/assets/stylesheets/dropdown.css +0 -46
  113. data/app/assets/stylesheets/prosemirror.css +0 -323
  114. data/app/assets/stylesheets/tooltip-component.css +0 -37
  115. data/app/components/ariadne/accumulator_controller/accumulator_controller.d.ts +0 -22
  116. data/app/components/ariadne/accumulator_controller/accumulator_controller.js +0 -39
  117. data/app/components/ariadne/accumulator_controller/accumulator_controller.ts +0 -48
  118. data/app/components/ariadne/action_card_component.html.erb +0 -13
  119. data/app/components/ariadne/action_card_component.rb +0 -88
  120. data/app/components/ariadne/ariadne-form.d.ts +0 -22
  121. data/app/components/ariadne/ariadne-form.js +0 -85
  122. data/app/components/ariadne/ariadne.d.ts +0 -2
  123. data/app/components/ariadne/ariadne.js +0 -24
  124. data/app/components/ariadne/ariadne.ts +0 -29
  125. data/app/components/ariadne/avatar_component.rb +0 -81
  126. data/app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb +0 -12
  127. data/app/components/ariadne/avatar_stack_component.rb +0 -75
  128. data/app/components/ariadne/base_button.rb +0 -70
  129. data/app/components/ariadne/blankslate_component/blankslate_component.html.erb +0 -26
  130. data/app/components/ariadne/blankslate_component.rb +0 -148
  131. data/app/components/ariadne/body_component.rb +0 -30
  132. data/app/components/ariadne/bottom_tab_component.html.erb +0 -4
  133. data/app/components/ariadne/bottom_tab_component.rb +0 -44
  134. data/app/components/ariadne/bottom_tab_nav_component.html.erb +0 -5
  135. data/app/components/ariadne/bottom_tab_nav_component.rb +0 -33
  136. data/app/components/ariadne/breadcrumbs_component.html.erb +0 -13
  137. data/app/components/ariadne/breadcrumbs_component.rb +0 -31
  138. data/app/components/ariadne/button_component/button_component.html.erb +0 -4
  139. data/app/components/ariadne/button_component.rb +0 -165
  140. data/app/components/ariadne/checkbox_component.html.erb +0 -5
  141. data/app/components/ariadne/checkbox_component.rb +0 -43
  142. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts +0 -4
  143. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.js +0 -18
  144. data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts +0 -19
  145. data/app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb +0 -9
  146. data/app/components/ariadne/clipboard_copy_component.rb +0 -90
  147. data/app/components/ariadne/close_button_component.html.erb +0 -4
  148. data/app/components/ariadne/close_button_component.rb +0 -33
  149. data/app/components/ariadne/combobox_component.html.erb +0 -14
  150. data/app/components/ariadne/combobox_component.rb +0 -76
  151. data/app/components/ariadne/component.rb +0 -127
  152. data/app/components/ariadne/container_component/container_component.html.erb +0 -3
  153. data/app/components/ariadne/container_component.rb +0 -25
  154. data/app/components/ariadne/content.rb +0 -12
  155. data/app/components/ariadne/counter_component.rb +0 -100
  156. data/app/components/ariadne/details_component/details_component.html.erb +0 -4
  157. data/app/components/ariadne/details_component.rb +0 -81
  158. data/app/components/ariadne/dropdown/menu_component.d.ts +0 -1
  159. data/app/components/ariadne/dropdown/menu_component.html.erb +0 -20
  160. data/app/components/ariadne/dropdown/menu_component.js +0 -1
  161. data/app/components/ariadne/dropdown/menu_component.rb +0 -101
  162. data/app/components/ariadne/dropdown/menu_component.ts +0 -1
  163. data/app/components/ariadne/dropdown_component/dropdown_component.html.erb +0 -8
  164. data/app/components/ariadne/dropdown_component.rb +0 -172
  165. data/app/components/ariadne/events_controller/events_controller.d.ts +0 -4
  166. data/app/components/ariadne/events_controller/events_controller.js +0 -6
  167. data/app/components/ariadne/events_controller/events_controller.ts +0 -7
  168. data/app/components/ariadne/flash_component/flash_component.html.erb +0 -31
  169. data/app/components/ariadne/flash_component.rb +0 -128
  170. data/app/components/ariadne/flex_component/flex_component.html.erb +0 -5
  171. data/app/components/ariadne/flex_component.rb +0 -56
  172. data/app/components/ariadne/footer_component/footer_component.html.erb +0 -7
  173. data/app/components/ariadne/footer_component.rb +0 -23
  174. data/app/components/ariadne/grid_component/grid_component.html.erb +0 -26
  175. data/app/components/ariadne/grid_component.rb +0 -67
  176. data/app/components/ariadne/header_component/header_component.html.erb +0 -29
  177. data/app/components/ariadne/header_component.rb +0 -111
  178. data/app/components/ariadne/heading_component.rb +0 -49
  179. data/app/components/ariadne/heroicon_component/heroicon_component.html.erb +0 -4
  180. data/app/components/ariadne/heroicon_component.rb +0 -166
  181. data/app/components/ariadne/image_component.rb +0 -53
  182. data/app/components/ariadne/inline_flex_component/inline_flex_component.html.erb +0 -6
  183. data/app/components/ariadne/inline_flex_component.rb +0 -72
  184. data/app/components/ariadne/layout_component.html.erb +0 -21
  185. data/app/components/ariadne/layout_component.rb +0 -69
  186. data/app/components/ariadne/link_component.rb +0 -65
  187. data/app/components/ariadne/list_component/list_component.html.erb +0 -3
  188. data/app/components/ariadne/list_component.rb +0 -70
  189. data/app/components/ariadne/modal_component.html.erb +0 -11
  190. data/app/components/ariadne/modal_component.rb +0 -88
  191. data/app/components/ariadne/narrow_container_component/narrow_container_component.html.erb +0 -3
  192. data/app/components/ariadne/narrow_container_component.rb +0 -30
  193. data/app/components/ariadne/options_controller/options_controller.d.ts +0 -39
  194. data/app/components/ariadne/options_controller/options_controller.js +0 -89
  195. data/app/components/ariadne/options_controller/options_controller.ts +0 -122
  196. data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts +0 -42
  197. data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.js +0 -237
  198. data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.ts +0 -278
  199. data/app/components/ariadne/panel_bar_component/panel_bar_component.html.erb +0 -20
  200. data/app/components/ariadne/panel_bar_component.rb +0 -80
  201. data/app/components/ariadne/pill_component/pill_component.html.erb +0 -3
  202. data/app/components/ariadne/pill_component.rb +0 -44
  203. data/app/components/ariadne/popover_component.html.erb +0 -10
  204. data/app/components/ariadne/popover_component.rb +0 -81
  205. data/app/components/ariadne/progress_bar_component.html.erb +0 -5
  206. data/app/components/ariadne/progress_bar_component.rb +0 -63
  207. data/app/components/ariadne/relative_time_component.html.erb +0 -3
  208. data/app/components/ariadne/relative_time_component.rb +0 -61
  209. data/app/components/ariadne/show_more_button_component.html.erb +0 -11
  210. data/app/components/ariadne/show_more_button_component.rb +0 -47
  211. data/app/components/ariadne/slideover_component/slideover-component.d.ts +0 -9
  212. data/app/components/ariadne/slideover_component/slideover-component.js +0 -11
  213. data/app/components/ariadne/slideover_component/slideover-component.ts +0 -17
  214. data/app/components/ariadne/slideover_component/slideover_component.html.erb +0 -9
  215. data/app/components/ariadne/slideover_component.rb +0 -66
  216. data/app/components/ariadne/spinner_component.html.erb +0 -16
  217. data/app/components/ariadne/spinner_component.rb +0 -45
  218. data/app/components/ariadne/string_match_controller/string_match_controller.d.ts +0 -27
  219. data/app/components/ariadne/string_match_controller/string_match_controller.js +0 -51
  220. data/app/components/ariadne/string_match_controller/string_match_controller.ts +0 -65
  221. data/app/components/ariadne/subheader_component.html.erb +0 -11
  222. data/app/components/ariadne/subheader_component.rb +0 -65
  223. data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts +0 -48
  224. data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.js +0 -207
  225. data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.ts +0 -256
  226. data/app/components/ariadne/tab_component/tab_component.html.erb +0 -3
  227. data/app/components/ariadne/tab_component.rb +0 -98
  228. data/app/components/ariadne/tab_container_component/tab-container-component.d.ts +0 -1
  229. data/app/components/ariadne/tab_container_component/tab-container-component.js +0 -23
  230. data/app/components/ariadne/tab_container_component/tab-container-component.ts +0 -24
  231. data/app/components/ariadne/tab_container_component.erb +0 -10
  232. data/app/components/ariadne/tab_container_component.rb +0 -68
  233. data/app/components/ariadne/tab_nav_component/tab-nav-component.d.ts +0 -9
  234. data/app/components/ariadne/tab_nav_component/tab-nav-component.js +0 -33
  235. data/app/components/ariadne/tab_nav_component/tab-nav-component.ts +0 -34
  236. data/app/components/ariadne/tab_nav_component/tab_nav_component.html.erb +0 -7
  237. data/app/components/ariadne/tab_nav_component.rb +0 -72
  238. data/app/components/ariadne/table_nav_component/table_nav_component.html.erb +0 -52
  239. data/app/components/ariadne/table_nav_component.rb +0 -338
  240. data/app/components/ariadne/text.rb +0 -25
  241. data/app/components/ariadne/time_ago_component/time-ago-component.d.ts +0 -1
  242. data/app/components/ariadne/time_ago_component/time-ago-component.js +0 -1
  243. data/app/components/ariadne/time_ago_component/time-ago-component.ts +0 -1
  244. data/app/components/ariadne/time_ago_component.rb +0 -56
  245. data/app/components/ariadne/timeline_component/timeline_component.html.erb +0 -19
  246. data/app/components/ariadne/timeline_component.rb +0 -34
  247. data/app/components/ariadne/toggle_component/toggle_component.html.erb +0 -15
  248. data/app/components/ariadne/toggle_component.rb +0 -95
  249. data/app/components/ariadne/toggleable_controller/toggleable_controller.d.ts +0 -34
  250. data/app/components/ariadne/toggleable_controller/toggleable_controller.js +0 -54
  251. data/app/components/ariadne/toggleable_controller/toggleable_controller.ts +0 -77
  252. data/app/components/ariadne/tooltip_component/tooltip-component.d.ts +0 -24
  253. data/app/components/ariadne/tooltip_component/tooltip-component.js +0 -43
  254. data/app/components/ariadne/tooltip_component/tooltip-component.ts +0 -57
  255. data/app/components/ariadne/tooltip_component/tooltip_component.html.erb +0 -4
  256. data/app/components/ariadne/tooltip_component.rb +0 -108
  257. data/app/lib/ariadne/action_view_extensions/form_helper.rb +0 -30
  258. data/app/lib/ariadne/audited/dsl.rb +0 -32
  259. data/app/lib/ariadne/form_builder.rb +0 -80
  260. data/app/lib/ariadne/status/dsl.rb +0 -41
  261. data/config/importmap.rb +0 -3
  262. data/exe/tailwindcss +0 -21
  263. data/lib/rubocop/cop/ariadne/base_cop.rb +0 -26
  264. data/tailwind.config.js +0 -70
@@ -1,70 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # `List` is used to show a list of items in a vertical format.
5
- class ListComponent < Ariadne::Component
6
- DEFAULT_TAG = :ul
7
- DEFAULT_UL_CLASSES = "ariadne-divide-y ariadne-divide-gray-300"
8
-
9
- renders_many :items, "ListItem"
10
-
11
- # @example Basic
12
- # <% numbers = [1, 2, 3] %>
13
- # <%= render(Ariadne::ListComponent.new) do |list| %>
14
- # <% numbers.each do |number| %>
15
- # <%= list.with_item do |item| %>
16
- # <%= number %>
17
- # <% end %>
18
- # <% end %>
19
- # <% end %>
20
- #
21
- #
22
- # @param classes [String] <%= link_to_classes_docs %>
23
- # @param attributes [Hash] <%= link_to_attributes_docs %>
24
- def initialize(classes: "", attributes: {})
25
- @tag = DEFAULT_TAG
26
- @classes = merge_class_names(DEFAULT_UL_CLASSES, classes)
27
- @attributes = attributes
28
- end
29
-
30
- def render?
31
- items?
32
- end
33
-
34
- # This component is part of `ListComponent` and should not be
35
- # used as a standalone component.
36
- class ListItem < Ariadne::Component
37
- DEFAULT_ITEM_CLASSES = "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
38
-
39
- attr_reader :link, :classes, :attributes
40
-
41
- def initialize(link: {}, classes: "", attributes: {})
42
- @link = link
43
- @classes = merge_class_names(DEFAULT_ITEM_CLASSES, classes)
44
- @attributes = attributes
45
- end
46
-
47
- def selected?
48
- @selected
49
- end
50
-
51
- private def linked?
52
- @link.present?
53
- end
54
-
55
- def call
56
- render(Ariadne::BaseComponent.new(tag: :li, classes: @classes, attributes: @attributes)) do
57
- if linked?
58
- classes = @link[:classes] || ""
59
- attributes = @link[:attributes] || {}
60
- render(Ariadne::LinkComponent.new(href: @link[:href], classes: classes, attributes: attributes)) do
61
- content
62
- end
63
- else
64
- content
65
- end
66
- end
67
- end
68
- end
69
- end
70
- end
@@ -1,11 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
2
- <%= base %>
3
- <%= render Ariadne::BaseComponent.new(tag: @shadow_tag, classes: @shadow_classes, attributes: @shadow_attributes) do %>
4
- <div class="<%= @content_classes %>" data-controller="events" data-action="click->events#stopPropagation">
5
- <%= render Ariadne::CloseButtonComponent.new(classes: @close_button_classes, aria_label: @close_button_aria_label, attributes: { "data-action": "click->toggleable#toggle" }) %>
6
- <% items.each do |item| %>
7
- <%= item %>
8
- <% end %>
9
- </div>
10
- <% end %>
11
- <% end %>
@@ -1,88 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Renders a full screen modal
5
- class ModalComponent < Ariadne::Component
6
- DEFAULT_TAG = :div
7
- DEFAULT_SHADOW_TAG = :div
8
- TAG_OPTIONS = [DEFAULT_TAG].freeze
9
-
10
- DEFAULT_CLASSES = {
11
- wrapper: "ariadne-group",
12
- shadow: "ariadne-w-screen ariadne-h-screen ariadne-bg-black/20 ariadne-fixed ariadne-top-0 ariadne-left-0 ariadne-flex ariadne-justify-center ariadne-items-center data-[close-on-click=true]:ariadne-cursor-pointer",
13
- content: "ariadne-bg-white ariadne-p-2 ariadne-relative ariadne-cursor-default",
14
- close_button: "ariadne-absolute ariadne-right-2 ariadne-pt-1 ariadne-pb-1 ariadne-pl-1 ariadne-pr-1",
15
- }
16
-
17
- DEFAULT_ATTRIBUTES = {
18
- wrapper: {
19
- "data-controller": "toggleable",
20
- "data-action": "click->toggleable#toggle",
21
- "data-toggleable-anti-attrs-value": '["aria-hidden"]',
22
- },
23
- shadow: {},
24
- content: { role: :dialog },
25
- close_button: {},
26
- }
27
-
28
- SHADOW_VISIBILITY_CLASSES = "group-aria-hidden:ariadne-hidden"
29
-
30
- renders_one :base
31
-
32
- renders_many :items
33
-
34
- # @example Default
35
- #
36
- # <%= render(Ariadne::ModalComponent.new) { "Example" } %>
37
- #
38
- # @param tag [Symbol, String] The rendered tag name.
39
- # @param classes [String] <%= link_to_classes_docs %>
40
- # @param attributes [Hash] <%= link_to_attributes_docs %>
41
- def initialize(
42
- tag: DEFAULT_TAG,
43
- classes: "",
44
- attributes: {},
45
- initial_visible: false,
46
- shadow_tag: DEFAULT_SHADOW_TAG,
47
- shadow_classes: "",
48
- shadow_attributes: {},
49
- content_classes: "",
50
- content_attributes: {},
51
- close_button_classes: "",
52
- close_button_attributes: {},
53
- close_button_aria_label: "Close modal button",
54
- close_on_shadow_click: true
55
- )
56
- @tag = check_incoming_tag(DEFAULT_TAG, tag)
57
- @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
58
- @attributes = DEFAULT_ATTRIBUTES[:wrapper]
59
- .merge({
60
- "aria-hidden": true,
61
- "data-toggleable-state-value": false,
62
- })
63
- .merge(attributes)
64
-
65
- @initial_visible = initial_visible
66
- @shadow_tag = check_incoming_tag(DEFAULT_SHADOW_TAG, shadow_tag)
67
- @shadow_classes = merge_class_names(
68
- DEFAULT_CLASSES[:shadow],
69
- SHADOW_VISIBILITY_CLASSES,
70
- shadow_classes,
71
- )
72
- @shadow_attributes = DEFAULT_ATTRIBUTES[:shadow]
73
- .merge({
74
- "data-controller": "events",
75
- "data-close-on-click": close_on_shadow_click,
76
- "data-action": close_on_shadow_click ? "" : "click->events#stopPropagation",
77
- })
78
- .merge(shadow_attributes)
79
-
80
- @content_classes = merge_class_names(DEFAULT_CLASSES[:content], content_classes)
81
- @content_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
82
-
83
- @close_button_aria_label = close_button_aria_label
84
- @close_button_classes = merge_class_names(DEFAULT_CLASSES[:close_button], close_button_classes)
85
- @close_button_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
86
- end
87
- end
88
- end
@@ -1,3 +0,0 @@
1
- <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
2
- <%= content %>
3
- <% end %>
@@ -1,30 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Ariadne
4
- # Add a general description of component here
5
- # Add additional usage considerations or best practices that may aid the user to use the component correctly.
6
- # @accessibility Add any accessibility considerations
7
- class NarrowContainerComponent < Ariadne::Component
8
- DEFAULT_TAG = :div
9
- TAG_OPTIONS = [DEFAULT_TAG].freeze
10
-
11
- DEFAULT_CLASSES = "ariadne-max-w-7xl ariadne-mx-auto ariadne-py-12 ariadne-px-4 sm:ariadne-px-6 lg:ariadne-py-16 lg:ariadne-px-8"
12
-
13
- # @example Default
14
- # <%= render(Ariadne::NarrowContainerComponent.new) do |container| %>
15
- # <%= render(Ariadne::ButtonComponent.new) { "Click me!" } %>
16
- # <% end %>
17
- #
18
- # @param classes [String] <%= link_to_classes_docs %>
19
- # @param attributes [Hash] <%= link_to_attributes_docs %>
20
- def initialize(classes: "", attributes: {})
21
- @tag = :div
22
- @classes = merge_class_names(
23
- DEFAULT_CLASSES,
24
- classes,
25
- )
26
-
27
- @attributes = attributes
28
- end
29
- end
30
- end
@@ -1,39 +0,0 @@
1
- import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
2
- import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
3
- type TOptionKey = string | number;
4
- type TActiveOptions = {
5
- [k: TOptionKey]: boolean;
6
- };
7
- export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
8
- select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
9
- }
10
- export default class OptionsController extends SyncedBooleanAttributesController<TActiveOptions> implements OptionsOutlet {
11
- #private;
12
- static outlets: string[];
13
- static targets: string[];
14
- static values: {
15
- activeOptions: ObjectConstructor;
16
- isMulti: {
17
- type: BooleanConstructor;
18
- default: boolean;
19
- };
20
- toggleable: {
21
- type: BooleanConstructor;
22
- default: boolean;
23
- };
24
- syncedAttrs: ArrayConstructor;
25
- antiAttrs: ArrayConstructor;
26
- protectAttrs: BooleanConstructor;
27
- outletEvents: ArrayConstructor;
28
- };
29
- readonly optionTargets: Array<Element>;
30
- activeOptionsValue: TActiveOptions;
31
- readonly isMultiValue: boolean;
32
- readonly toggleableValue: boolean;
33
- select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
34
- optionTargetConnected(element: Element): void;
35
- getValueForElement(element: Element): boolean;
36
- getState(): TActiveOptions;
37
- outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
38
- }
39
- export {};
@@ -1,89 +0,0 @@
1
- var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
2
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
3
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
4
- return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
5
- };
6
- var _OptionsController_instances, _OptionsController_shouldChangeState, _OptionsController_activateKey, _OptionsController_deactivateKey, _OptionsController_getElementKey;
7
- import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
8
- class OptionsController extends SyncedBooleanAttributesController {
9
- constructor() {
10
- super(...arguments);
11
- _OptionsController_instances.add(this);
12
- this.outletUpdate = this.select;
13
- }
14
- select(event, updateTo = {}) {
15
- var _a;
16
- const activeOptions = updateTo.data;
17
- for (const index in this.optionTargets) {
18
- const target = this.optionTargets[index];
19
- const wasSelected = target === event.currentTarget;
20
- const isCurrentlyActive = (_a = this.getValueForElement(target)) !== null && _a !== void 0 ? _a : false;
21
- const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, target);
22
- const shouldChangeState = activeOptions !== undefined
23
- ? !!activeOptions[optionKey] !== isCurrentlyActive
24
- : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_shouldChangeState).call(this, isCurrentlyActive, wasSelected);
25
- if (shouldChangeState) {
26
- const willBeActive = !isCurrentlyActive;
27
- this.updateAttributesForElement(target, willBeActive);
28
- willBeActive ? __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateKey).call(this, optionKey) : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateKey).call(this, optionKey);
29
- }
30
- }
31
- this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: this.activeOptionsValue }));
32
- }
33
- optionTargetConnected(element) {
34
- const key = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, element);
35
- const isActive = this.activeOptionsValue[key] || this.doesElementHaveOnAttrs(element);
36
- if (isActive) {
37
- __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateKey).call(this, key);
38
- }
39
- else {
40
- __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateKey).call(this, key);
41
- }
42
- this.updateAttributesForElement(element, isActive);
43
- }
44
- getValueForElement(element) {
45
- var _a;
46
- const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, element);
47
- return (_a = this.activeOptionsValue[optionKey]) !== null && _a !== void 0 ? _a : false;
48
- }
49
- getState() {
50
- return this.activeOptionsValue;
51
- }
52
- }
53
- _OptionsController_instances = new WeakSet(), _OptionsController_shouldChangeState = function _OptionsController_shouldChangeState(isCurrentlyActive, wasSelected) {
54
- if (!wasSelected && !isCurrentlyActive) {
55
- // Not currently on and wasn't selected, no reason to change
56
- return false;
57
- }
58
- if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
59
- // It wasn't selected and it is on. However, multi value is on so just leave it
60
- return false;
61
- }
62
- if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
63
- // It was selected and it's on. But toggle isn't on so just leave it
64
- return false;
65
- }
66
- // Wasn't selected and it's active but only one can be active
67
- // Was selected and it's active but toggling behavior means it should deactivate
68
- // Was selected and it's not on, so it just needs to be turned on
69
- return true;
70
- }, _OptionsController_activateKey = function _OptionsController_activateKey(key) {
71
- this.activeOptionsValue = Object.assign(Object.assign({}, this.activeOptionsValue), { [key]: true });
72
- }, _OptionsController_deactivateKey = function _OptionsController_deactivateKey(key) {
73
- const copy = Object.assign({}, this.activeOptionsValue);
74
- delete copy[key];
75
- this.activeOptionsValue = copy;
76
- }, _OptionsController_getElementKey = function _OptionsController_getElementKey(element) {
77
- const elementValue = element === null || element === void 0 ? void 0 : element.getAttribute('data-option-value');
78
- if (elementValue)
79
- return elementValue;
80
- const content = element === null || element === void 0 ? void 0 : element.textContent;
81
- if (content === null) {
82
- throw new Error(`${element.tagName} was given as an options target without a data-option-value or textContent. One must be provided to identify the target.`);
83
- }
84
- return content.trim();
85
- };
86
- OptionsController.outlets = SyncedBooleanAttributesController.outlets;
87
- OptionsController.targets = ['option'];
88
- OptionsController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { activeOptions: Object, isMulti: { type: Boolean, default: false }, toggleable: { type: Boolean, default: false } });
89
- export default OptionsController;
@@ -1,122 +0,0 @@
1
- import {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
2
- import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
3
-
4
- type TOptionKey = string | number
5
- type TActiveOptions = {[k: TOptionKey]: boolean}
6
- export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
7
- select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void
8
- }
9
-
10
- export default class OptionsController
11
- extends SyncedBooleanAttributesController<TActiveOptions>
12
- implements OptionsOutlet
13
- {
14
- static outlets = SyncedBooleanAttributesController.outlets
15
- static targets = ['option']
16
-
17
- static values = {
18
- ...SyncedBooleanAttributesController.values,
19
- activeOptions: Object, // The currently active elements in TActiveOptions format
20
- isMulti: {type: Boolean, default: false}, // Allows more than one selection
21
- toggleable: {type: Boolean, default: false}, // If true, selecting the same value twice will turn it off. If false, nothing happens
22
- }
23
-
24
- // Targets
25
- declare readonly optionTargets: Array<Element>
26
-
27
- // Values
28
- declare activeOptionsValue: TActiveOptions
29
- declare readonly isMultiValue: boolean
30
- declare readonly toggleableValue: boolean
31
-
32
- select(event: Event, updateTo: TOutletChangeData<TActiveOptions> = {}) {
33
- const activeOptions = updateTo.data
34
- for (const index in this.optionTargets) {
35
- const target = this.optionTargets[index]
36
- const wasSelected = target === event.currentTarget
37
- const isCurrentlyActive = this.getValueForElement(target) ?? false
38
- const optionKey = this.#getElementKey(target)
39
- const shouldChangeState =
40
- activeOptions !== undefined
41
- ? !!activeOptions[optionKey] !== isCurrentlyActive
42
- : this.#shouldChangeState(isCurrentlyActive, wasSelected)
43
-
44
- if (shouldChangeState) {
45
- const willBeActive = !isCurrentlyActive
46
- this.updateAttributesForElement(target, willBeActive)
47
- willBeActive ? this.#activateKey(optionKey) : this.#deactivateKey(optionKey)
48
- }
49
- }
50
-
51
- this.sendToOutlets(event, {...updateTo, data: this.activeOptionsValue})
52
- }
53
-
54
- optionTargetConnected(element: Element) {
55
- const key = this.#getElementKey(element)
56
- const isActive = this.activeOptionsValue[key] || this.doesElementHaveOnAttrs(element)
57
- if (isActive) {
58
- this.#activateKey(key)
59
- } else {
60
- this.#deactivateKey(key)
61
- }
62
-
63
- this.updateAttributesForElement(element, isActive)
64
- }
65
-
66
- #shouldChangeState(isCurrentlyActive: boolean, wasSelected: boolean) {
67
- if (!wasSelected && !isCurrentlyActive) {
68
- // Not currently on and wasn't selected, no reason to change
69
- return false
70
- }
71
-
72
- if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
73
- // It wasn't selected and it is on. However, multi value is on so just leave it
74
- return false
75
- }
76
-
77
- if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
78
- // It was selected and it's on. But toggle isn't on so just leave it
79
- return false
80
- }
81
-
82
- // Wasn't selected and it's active but only one can be active
83
- // Was selected and it's active but toggling behavior means it should deactivate
84
- // Was selected and it's not on, so it just needs to be turned on
85
- return true
86
- }
87
-
88
- #activateKey(key: TOptionKey) {
89
- this.activeOptionsValue = {...this.activeOptionsValue, [key]: true}
90
- }
91
-
92
- #deactivateKey(key: TOptionKey) {
93
- const copy = {...this.activeOptionsValue}
94
- delete copy[key]
95
- this.activeOptionsValue = copy
96
- }
97
-
98
- #getElementKey(element: Element) {
99
- const elementValue = element?.getAttribute('data-option-value')
100
- if (elementValue) return elementValue
101
-
102
- const content = (element as HTMLElement)?.textContent
103
- if (content === null) {
104
- throw new Error(
105
- `${element.tagName} was given as an options target without a data-option-value or textContent. One must be provided to identify the target.`,
106
- )
107
- }
108
-
109
- return content.trim()
110
- }
111
-
112
- getValueForElement(element: Element) {
113
- const optionKey = this.#getElementKey(element)
114
- return this.activeOptionsValue[optionKey] ?? false
115
- }
116
-
117
- getState() {
118
- return this.activeOptionsValue
119
- }
120
-
121
- outletUpdate = this.select
122
- }
@@ -1,42 +0,0 @@
1
- import { Controller } from '@hotwired/stimulus';
2
- type TOutletEventLookup = boolean | {
3
- [k: string]: TOutletEventLookup;
4
- };
5
- export type TOutletChangeData<T> = {
6
- eventKey?: string;
7
- data?: T;
8
- } | undefined;
9
- export default class OutletManagerController<T> extends Controller {
10
- #private;
11
- static values: {
12
- outletEvents: ArrayConstructor;
13
- };
14
- readonly outletEventsValue: Array<string>;
15
- readonly hasOutletEventsValue: boolean;
16
- static outlets: string[];
17
- readonly toggleableOutlets: Array<OutletManagerController<T>>;
18
- readonly hasToggleableOutlet: boolean;
19
- readonly optionsOutlets: Array<OutletManagerController<T>>;
20
- readonly hasOptionsOutlet: boolean;
21
- readonly stringMatchOutlets: Array<OutletManagerController<T>>;
22
- readonly hasStringMatchOutlet: boolean;
23
- outletEventsLookup: TOutletEventLookup | null;
24
- static domEvents: {
25
- [k: string]: boolean;
26
- };
27
- eventRecords: Map<Event, boolean>;
28
- getOutlets(): Array<OutletManagerController<T>> | null | void;
29
- outletUpdate(event: Event, data: TOutletChangeData<T>): void;
30
- getState(): T;
31
- connect(): void;
32
- syncOutlets(): void;
33
- sendToOutlets(event: Event, updateTo?: TOutletChangeData<T>): void;
34
- isListeningForOutletEvent(eventTypes: string): boolean;
35
- isDOMEventName(eventName: string): boolean;
36
- getEventKey(event: Event): string;
37
- hasHeardEvent(event: Event): boolean;
38
- get event_key_prefix(): string;
39
- get event_key_postfix(): string;
40
- get outletEvents(): TOutletEventLookup;
41
- }
42
- export {};