coveragebook_components 0.12.2 → 0.13.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (355) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +6615 -5488
  3. data/app/assets/build/coco/app.js +3142 -3169
  4. data/app/assets/build/coco/book.css +5169 -2130
  5. data/app/assets/build/coco/book.js +3986 -1565
  6. data/app/assets/css/app.css +2 -8
  7. data/app/assets/css/base/config.css +1 -0
  8. data/app/assets/css/{base.css → base/setup.css} +7 -4
  9. data/app/assets/css/{shared → base}/tippy.css +18 -0
  10. data/app/assets/css/book.css +2 -4
  11. data/app/assets/js/app.js +25 -9
  12. data/app/assets/js/{libs → base}/alpine/directives/dropdown.js +1 -1
  13. data/app/assets/js/{libs → base}/alpine/directives/tooltip.js +1 -1
  14. data/app/assets/js/{libs → base}/alpine/index.js +7 -7
  15. data/app/assets/js/{libs → base}/alpine/utils/tippy_modifiers.js +1 -1
  16. data/app/assets/js/base/setup.js +8 -0
  17. data/app/assets/js/book.js +4 -4
  18. data/app/components/coco/app/{layouts/application/application.js → application_layout/application_layout.js} +1 -1
  19. data/app/components/coco/app/application_layout/application_layout.rb +16 -0
  20. data/app/components/coco/app/contact_callout/contact_callout.rb +21 -0
  21. data/app/components/coco/app/faqs/faqs.rb +14 -0
  22. data/app/components/coco/app/{blocks/header → header}/header.js +1 -1
  23. data/app/components/coco/app/header/header.rb +33 -0
  24. data/app/components/coco/app/{blocks/nav_drawer → nav_drawer}/nav_drawer.css +1 -1
  25. data/app/components/coco/app/{blocks/nav_drawer → nav_drawer}/nav_drawer.js +1 -1
  26. data/app/components/coco/app/nav_drawer/nav_drawer.rb +32 -0
  27. data/app/components/coco/app/plan_card/plan_card.rb +39 -0
  28. data/app/components/coco/app/{blocks/plan_picker → plan_picker}/plan_picker.css +3 -3
  29. data/app/components/coco/app/{blocks/plan_picker → plan_picker}/plan_picker.js +1 -1
  30. data/app/components/coco/app/plan_picker/plan_picker.rb +25 -0
  31. data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/item/item.js +2 -2
  32. data/app/components/coco/app/sidebar_nav/item/item.rb +48 -0
  33. data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/menu/menu.js +1 -1
  34. data/app/components/coco/app/sidebar_nav/menu/menu.rb +46 -0
  35. data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/navbar/navbar.html.erb +1 -1
  36. data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/navbar/navbar.js +2 -2
  37. data/app/components/coco/app/sidebar_nav/navbar/navbar.rb +50 -0
  38. data/app/components/coco/app/{blocks/slide_editor → slide_editor}/slide_editor.js +2 -2
  39. data/app/components/coco/app/slide_editor/slide_editor.rb +114 -0
  40. data/app/components/coco/book/editable_slide/editable_slide.rb +72 -0
  41. data/app/components/coco/book/media_slide/media_slide.rb +12 -0
  42. data/app/components/coco/{shared → buttons}/button/button.js +1 -1
  43. data/app/components/coco/{shared → buttons}/button/button.rb +2 -2
  44. data/app/components/coco/{shared → buttons}/button/button_dropdown.js +1 -1
  45. data/app/components/coco/{shared → buttons}/button_group/button_group.js +2 -2
  46. data/app/components/coco/{shared → buttons}/button_to/button_to.rb +1 -1
  47. data/app/components/coco/{app/elements → buttons}/color_picker_button/color_picker_button.css +2 -2
  48. data/app/components/coco/{app/elements → buttons}/color_picker_button/color_picker_button.html.erb +1 -1
  49. data/app/components/coco/{app/elements → buttons}/color_picker_button/color_picker_button.js +2 -2
  50. data/app/components/coco/buttons/color_picker_button/color_picker_button.rb +53 -0
  51. data/app/components/coco/{app/elements → buttons}/confirm_panel/confirm_panel.css +1 -1
  52. data/app/components/coco/{app/elements → buttons}/confirm_panel/confirm_panel.html.erb +1 -1
  53. data/app/components/coco/{app/elements → buttons}/confirm_panel/confirm_panel.js +2 -2
  54. data/app/components/coco/buttons/confirm_panel/confirm_panel.rb +19 -0
  55. data/app/components/coco/{app/elements → buttons}/image_picker_button/image_picker_button.css +2 -2
  56. data/app/components/coco/{app/elements → buttons}/image_picker_button/image_picker_button.html.erb +1 -1
  57. data/app/components/coco/{app/elements → buttons}/image_picker_button/image_picker_button.js +2 -2
  58. data/app/components/coco/buttons/image_picker_button/image_picker_button.rb +44 -0
  59. data/app/components/coco/{app/elements → buttons}/layout_picker_button/layout_picker_button.css +11 -11
  60. data/app/components/coco/{app/elements → buttons}/layout_picker_button/layout_picker_button.html.erb +1 -1
  61. data/app/components/coco/{app/elements → buttons}/layout_picker_button/layout_picker_button.js +2 -2
  62. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.rb +33 -0
  63. data/app/components/coco/{app/elements → buttons}/menu/menu.css +2 -4
  64. data/app/components/coco/buttons/menu/menu.rb +37 -0
  65. data/app/components/coco/{app/elements → buttons}/menu_button/menu_button.css +1 -1
  66. data/app/components/coco/{app/elements → buttons}/menu_button/menu_button.html.erb +1 -1
  67. data/app/components/coco/buttons/menu_button/menu_button.js +6 -0
  68. data/app/components/coco/buttons/menu_button/menu_button.rb +30 -0
  69. data/app/components/coco/{app/elements → buttons}/menu_items/user_profile/user_profile.css +1 -1
  70. data/app/components/coco/buttons/menu_items/user_profile/user_profile.rb +18 -0
  71. data/app/components/coco/{app/elements → buttons}/option_bar/option_bar.css +1 -1
  72. data/app/components/coco/buttons/option_bar/option_bar.rb +13 -0
  73. data/app/components/coco/{app/elements → buttons}/toolbar/toolbar.css +1 -1
  74. data/app/components/coco/{app/elements → buttons}/toolbar/toolbar.js +1 -1
  75. data/app/components/coco/buttons/toolbar/toolbar.rb +35 -0
  76. data/app/components/coco/component.rb +1 -1
  77. data/app/components/coco/concerns/acts_as_button_group.rb +4 -11
  78. data/app/components/coco/concerns/acts_as_field_with_html_options.rb +1 -1
  79. data/app/components/coco/concerns/acts_as_field_with_options.rb +2 -2
  80. data/app/components/coco/embeds/youtube_embed/youtube_embed.rb +16 -0
  81. data/app/components/coco/fields/button_component.rb +14 -0
  82. data/app/components/coco/fields/check_box_component.rb +7 -0
  83. data/app/components/coco/fields/collection_check_boxes_component.rb +7 -0
  84. data/app/components/coco/fields/collection_radio_buttons_component.rb +7 -0
  85. data/app/components/coco/fields/collection_select_component.rb +7 -0
  86. data/app/components/coco/fields/color_field_component.rb +7 -0
  87. data/app/components/coco/fields/date_field_component.rb +7 -0
  88. data/app/components/coco/fields/date_select_component.rb +7 -0
  89. data/app/components/coco/fields/datetime_local_field_component.rb +7 -0
  90. data/app/components/coco/fields/datetime_select_component.rb +7 -0
  91. data/app/components/coco/fields/email_field_component.rb +7 -0
  92. data/app/components/coco/fields/error_message_component.rb +7 -0
  93. data/app/components/coco/fields/file_field_component.rb +7 -0
  94. data/app/components/coco/fields/grouped_collection_select_component.rb +7 -0
  95. data/app/components/coco/fields/hint_component.rb +7 -0
  96. data/app/components/coco/fields/label_component.rb +7 -0
  97. data/app/components/coco/fields/month_field_component.rb +7 -0
  98. data/app/components/coco/fields/number_field_component.rb +7 -0
  99. data/app/components/coco/fields/password_field_component.rb +7 -0
  100. data/app/components/coco/fields/radio_button_component.rb +7 -0
  101. data/app/components/coco/fields/range_field_component.rb +7 -0
  102. data/app/components/coco/fields/search_field_component.rb +7 -0
  103. data/app/components/coco/fields/select_component.rb +7 -0
  104. data/app/components/coco/fields/submit_component.rb +14 -0
  105. data/app/components/coco/fields/telephone_field_component.rb +7 -0
  106. data/app/components/coco/fields/text_area_component.rb +7 -0
  107. data/app/components/coco/fields/text_field_component.rb +7 -0
  108. data/app/components/coco/fields/time_field_component.rb +7 -0
  109. data/app/components/coco/fields/time_select_component.rb +7 -0
  110. data/app/components/coco/fields/time_zone_select_component.rb +7 -0
  111. data/app/components/coco/fields/url_field_component.rb +7 -0
  112. data/app/components/coco/fields/week_field_component.rb +7 -0
  113. data/app/components/coco/fields/weekday_select_component.rb +7 -0
  114. data/app/components/coco/{shared → images}/icon/icon.js +1 -1
  115. data/app/components/coco/{shared → images}/image_uploader/image_uploader.js +1 -1
  116. data/app/components/coco/{app/elements → indicators}/stamp/stamp.css +1 -1
  117. data/app/components/coco/indicators/stamp/stamp.rb +25 -0
  118. data/app/components/coco/{app/layouts → layout}/page/page.js +1 -1
  119. data/app/components/coco/layout/page/page.rb +55 -0
  120. data/app/components/coco/{app/elements → messaging}/alert/alert.css +7 -7
  121. data/app/components/coco/{app/elements → messaging}/alert/alert.html.erb +1 -1
  122. data/app/components/coco/{app/elements → messaging}/alert/alert.js +2 -2
  123. data/app/components/coco/messaging/alert/alert.rb +75 -0
  124. data/app/components/coco/{app/elements → messaging}/notice/notice.css +1 -1
  125. data/app/components/coco/messaging/notice/notice.html.erb +5 -0
  126. data/app/components/coco/messaging/notice/notice.js +5 -0
  127. data/app/components/coco/messaging/notice/notice.rb +18 -0
  128. data/app/components/coco/{app/elements → messaging}/snackbar/snackbar.css +1 -1
  129. data/app/components/coco/{app/elements → messaging}/snackbar/snackbar.html.erb +1 -1
  130. data/app/components/coco/{app/elements → messaging}/snackbar/snackbar.js +2 -2
  131. data/app/components/coco/messaging/snackbar/snackbar.rb +34 -0
  132. data/app/components/coco/messaging/system_banner/system_banner.css +4 -0
  133. data/app/components/coco/messaging/system_banner/system_banner.html.erb +5 -0
  134. data/app/components/coco/{app/elements → messaging}/system_banner/system_banner.js +2 -2
  135. data/app/components/coco/messaging/system_banner/system_banner.rb +78 -0
  136. data/app/components/coco/{app/elements → messaging}/toast/toast.css +1 -1
  137. data/app/components/coco/{app/elements → messaging}/toast/toast.html.erb +1 -1
  138. data/app/components/coco/{app/elements → messaging}/toast/toast.js +2 -2
  139. data/app/components/coco/messaging/toast/toast.rb +19 -0
  140. data/app/components/coco/{shared → modals}/modal/modal.js +2 -2
  141. data/app/components/coco/{shared → modals}/modal/modal.rb +1 -0
  142. data/app/components/coco/{shared → modals}/modal_dialog/modal_dialog.js +1 -1
  143. data/app/components/coco/{shared → modals}/modal_lightbox/modal_lightbox.js +1 -1
  144. data/app/components/coco/{shared → navigation}/link/link.rb +1 -1
  145. data/app/components/coco/{shared/pager_link/pager_link.css → navigation/pager_button/pager_button.css} +1 -1
  146. data/app/components/coco/{shared/pager_link/pager_link.rb → navigation/pager_button/pager_button.rb} +1 -1
  147. data/app/components/coco/{app/elements → pickers}/color_picker/color_picker.css +11 -11
  148. data/app/components/coco/{app/elements → pickers}/color_picker/color_picker.html.erb +1 -1
  149. data/app/components/coco/{app/elements → pickers}/color_picker/color_picker.js +2 -2
  150. data/app/components/coco/pickers/color_picker/color_picker.rb +48 -0
  151. data/app/components/coco/{app/elements → pickers}/image_picker/image_picker.css +11 -11
  152. data/app/components/coco/{app/elements → pickers}/image_picker/image_picker.html.erb +1 -1
  153. data/app/components/coco/{app/elements → pickers}/image_picker/image_picker.js +2 -2
  154. data/app/components/coco/pickers/image_picker/image_picker.rb +20 -0
  155. data/app/components/coco/presented_component.rb +1 -1
  156. data/app/components/coco/{shared → utilities}/dropdown/dropdown.js +1 -1
  157. data/app/components/coco/{shared → utilities}/poll_controller/poll_controller.js +1 -1
  158. data/app/components/coco/{app/elements → utilities}/seamless_textarea/seamless_textarea.css +1 -1
  159. data/app/components/coco/{app/elements → utilities}/seamless_textarea/seamless_textarea.html.erb +1 -1
  160. data/app/components/coco/{app/elements → utilities}/seamless_textarea/seamless_textarea.js +2 -2
  161. data/app/components/coco/utilities/seamless_textarea/seamless_textarea.rb +25 -0
  162. data/app/helpers/coco/app_components_helper.rb +35 -0
  163. data/app/helpers/coco/book_components_helper.rb +11 -0
  164. data/app/helpers/coco/components_helper.rb +7 -0
  165. data/app/helpers/coco/core_components_helper.rb +257 -0
  166. data/app/helpers/coco/helpers.rb +2 -2
  167. data/app/helpers/coco/modal_helper.rb +22 -0
  168. data/config/locales/coco.en.yml +17 -18
  169. data/config/{tailwind.base.config.cjs → tailwind.config.cjs} +10 -0
  170. data/config/tokens.cjs +9 -23
  171. data/lib/coco/app_form_builder.rb +1 -1
  172. data/lib/coco/engine.rb +3 -3
  173. data/lib/coco.rb +1 -1
  174. metadata +251 -258
  175. data/app/assets/css/app/config.css +0 -1
  176. data/app/assets/css/app/tippy.css +0 -19
  177. data/app/assets/css/book/config.css +0 -1
  178. data/app/assets/js/app/components.js +0 -4
  179. data/app/assets/js/app/setup.js +0 -23
  180. data/app/assets/js/book/components.js +0 -4
  181. data/app/assets/js/shared/components.js +0 -4
  182. data/app/components/coco/app/blocks/contact_callout/contact_callout.rb +0 -23
  183. data/app/components/coco/app/blocks/faqs/faqs.rb +0 -16
  184. data/app/components/coco/app/blocks/header/header.rb +0 -35
  185. data/app/components/coco/app/blocks/nav_drawer/nav_drawer.rb +0 -34
  186. data/app/components/coco/app/blocks/plan_picker/plan_picker.rb +0 -27
  187. data/app/components/coco/app/blocks/sidebar_nav/item/item.rb +0 -50
  188. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.rb +0 -48
  189. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb +0 -50
  190. data/app/components/coco/app/blocks/slide_editor/slide_editor.rb +0 -116
  191. data/app/components/coco/app/elements/alert/alert.rb +0 -79
  192. data/app/components/coco/app/elements/color_picker/color_picker.rb +0 -53
  193. data/app/components/coco/app/elements/color_picker_button/color_picker_button.rb +0 -58
  194. data/app/components/coco/app/elements/confirm_panel/confirm_panel.rb +0 -23
  195. data/app/components/coco/app/elements/image_picker/image_picker.rb +0 -25
  196. data/app/components/coco/app/elements/image_picker_button/image_picker_button.rb +0 -49
  197. data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.rb +0 -38
  198. data/app/components/coco/app/elements/menu/menu.rb +0 -41
  199. data/app/components/coco/app/elements/menu_button/menu_button.js +0 -6
  200. data/app/components/coco/app/elements/menu_button/menu_button.rb +0 -35
  201. data/app/components/coco/app/elements/menu_items/user_profile/user_profile.rb +0 -20
  202. data/app/components/coco/app/elements/notice/notice.html.erb +0 -5
  203. data/app/components/coco/app/elements/notice/notice.js +0 -5
  204. data/app/components/coco/app/elements/notice/notice.rb +0 -22
  205. data/app/components/coco/app/elements/option_bar/option_bar.rb +0 -17
  206. data/app/components/coco/app/elements/plan_card/plan_card.rb +0 -41
  207. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.rb +0 -29
  208. data/app/components/coco/app/elements/snackbar/snackbar.rb +0 -38
  209. data/app/components/coco/app/elements/stamp/stamp.rb +0 -29
  210. data/app/components/coco/app/elements/system_banner/system_banner.css +0 -4
  211. data/app/components/coco/app/elements/system_banner/system_banner.html.erb +0 -5
  212. data/app/components/coco/app/elements/system_banner/system_banner.rb +0 -82
  213. data/app/components/coco/app/elements/toast/toast.rb +0 -23
  214. data/app/components/coco/app/elements/toolbar/toolbar.rb +0 -41
  215. data/app/components/coco/app/fields/button_component.rb +0 -16
  216. data/app/components/coco/app/fields/check_box_component.rb +0 -9
  217. data/app/components/coco/app/fields/collection_check_boxes_component.rb +0 -9
  218. data/app/components/coco/app/fields/collection_radio_buttons_component.rb +0 -9
  219. data/app/components/coco/app/fields/collection_select_component.rb +0 -9
  220. data/app/components/coco/app/fields/color_field_component.rb +0 -9
  221. data/app/components/coco/app/fields/date_field_component.rb +0 -9
  222. data/app/components/coco/app/fields/date_select_component.rb +0 -9
  223. data/app/components/coco/app/fields/datetime_local_field_component.rb +0 -9
  224. data/app/components/coco/app/fields/datetime_select_component.rb +0 -9
  225. data/app/components/coco/app/fields/email_field_component.rb +0 -9
  226. data/app/components/coco/app/fields/error_message_component.rb +0 -9
  227. data/app/components/coco/app/fields/file_field_component.rb +0 -9
  228. data/app/components/coco/app/fields/grouped_collection_select_component.rb +0 -9
  229. data/app/components/coco/app/fields/hint_component.rb +0 -9
  230. data/app/components/coco/app/fields/label_component.rb +0 -9
  231. data/app/components/coco/app/fields/month_field_component.rb +0 -9
  232. data/app/components/coco/app/fields/number_field_component.rb +0 -9
  233. data/app/components/coco/app/fields/password_field_component.rb +0 -9
  234. data/app/components/coco/app/fields/radio_button_component.rb +0 -9
  235. data/app/components/coco/app/fields/range_field_component.rb +0 -9
  236. data/app/components/coco/app/fields/search_field_component.rb +0 -9
  237. data/app/components/coco/app/fields/select_component.rb +0 -9
  238. data/app/components/coco/app/fields/submit_component.rb +0 -16
  239. data/app/components/coco/app/fields/telephone_field_component.rb +0 -9
  240. data/app/components/coco/app/fields/text_area_component.rb +0 -9
  241. data/app/components/coco/app/fields/text_field_component.rb +0 -9
  242. data/app/components/coco/app/fields/time_field_component.rb +0 -9
  243. data/app/components/coco/app/fields/time_select_component.rb +0 -9
  244. data/app/components/coco/app/fields/time_zone_select_component.rb +0 -9
  245. data/app/components/coco/app/fields/url_field_component.rb +0 -9
  246. data/app/components/coco/app/fields/week_field_component.rb +0 -9
  247. data/app/components/coco/app/fields/weekday_select_component.rb +0 -9
  248. data/app/components/coco/app/layouts/application/application.rb +0 -18
  249. data/app/components/coco/app/layouts/page/page.rb +0 -59
  250. data/app/components/coco/book/blocks/slides/editable_slide/editable_slide.rb +0 -76
  251. data/app/components/coco/book/blocks/slides/media_slide/media_slide.rb +0 -16
  252. data/app/components/coco/shared/embeds/youtube/youtube.rb +0 -20
  253. data/app/helpers/coco/app_helper.rb +0 -141
  254. data/app/helpers/coco/book_helper.rb +0 -11
  255. data/app/helpers/coco/component_helper.rb +0 -15
  256. data/app/helpers/coco/shared_helper.rb +0 -111
  257. data/app/helpers/coco/url_helper.rb +0 -30
  258. data/config/tailwind.app.config.cjs +0 -21
  259. data/config/tailwind.book.config.cjs +0 -21
  260. /data/app/assets/css/{shared → base}/utils/colors.css +0 -0
  261. /data/app/assets/css/{shared → base}/utils/icons.css +0 -0
  262. /data/app/assets/css/{app/utils.css → base/utils/layout.css} +0 -0
  263. /data/app/assets/css/{shared → base}/utils/text.css +0 -0
  264. /data/app/assets/js/{libs → base}/alpine/directives/destroy.js +0 -0
  265. /data/app/assets/js/{libs → base}/alpine/directives/dimensions.js +0 -0
  266. /data/app/assets/js/{libs → base}/alpine/directives/notification.js +0 -0
  267. /data/app/assets/js/{libs → base}/alpine/directives/options.js +0 -0
  268. /data/app/assets/js/{libs → base}/alpine/directives/undo.js +0 -0
  269. /data/app/assets/js/{shared → base}/coco.js +0 -0
  270. /data/app/assets/js/{libs → base}/tippy/index.js +0 -0
  271. /data/app/assets/js/{libs → base}/tippy/plugins/hide_on_esc.js +0 -0
  272. /data/app/components/coco/app/{layouts/application/application.css → application_layout/application_layout.css} +0 -0
  273. /data/app/components/coco/app/{layouts/application/application.html.erb → application_layout/application_layout.html.erb} +0 -0
  274. /data/app/components/coco/app/{blocks/contact_callout → contact_callout}/contact_callout.css +0 -0
  275. /data/app/components/coco/app/{blocks/contact_callout → contact_callout}/contact_callout.html.erb +0 -0
  276. /data/app/components/coco/app/{blocks/faqs → faqs}/faqs.css +0 -0
  277. /data/app/components/coco/app/{blocks/faqs → faqs}/faqs.html.erb +0 -0
  278. /data/app/components/coco/app/{blocks/header → header}/header.css +0 -0
  279. /data/app/components/coco/app/{blocks/header → header}/header.html.erb +0 -0
  280. /data/app/components/coco/app/{blocks/nav_drawer → nav_drawer}/nav_drawer.html.erb +0 -0
  281. /data/app/components/coco/app/{elements/plan_card → plan_card}/plan_card.css +0 -0
  282. /data/app/components/coco/app/{elements/plan_card → plan_card}/plan_card.html.erb +0 -0
  283. /data/app/components/coco/app/{blocks/plan_picker → plan_picker}/plan_picker.html.erb +0 -0
  284. /data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/item/item.css +0 -0
  285. /data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/item/item.html.erb +0 -0
  286. /data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/menu/menu.css +0 -0
  287. /data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/menu/menu.html.erb +0 -0
  288. /data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/navbar/navbar.css +0 -0
  289. /data/app/components/coco/app/{blocks/slide_editor → slide_editor}/slide_editor.css +0 -0
  290. /data/app/components/coco/app/{blocks/slide_editor → slide_editor}/slide_editor.html.erb +0 -0
  291. /data/app/components/coco/book/{blocks/slides/editable_slide → editable_slide}/editable_slide.css +0 -0
  292. /data/app/components/coco/book/{blocks/slides/editable_slide → editable_slide}/editable_slide.html.erb +0 -0
  293. /data/app/components/coco/book/{blocks/slides/media_slide → media_slide}/media_slide.css +0 -0
  294. /data/app/components/coco/book/{blocks/slides/media_slide → media_slide}/media_slide.html.erb +0 -0
  295. /data/app/components/coco/{shared → buttons}/button/button.css +0 -0
  296. /data/app/components/coco/{shared → buttons}/button/button.html.erb +0 -0
  297. /data/app/components/coco/{shared → buttons}/button_group/button_group.css +0 -0
  298. /data/app/components/coco/{shared → buttons}/button_group/button_group.html.erb +0 -0
  299. /data/app/components/coco/{shared → buttons}/button_group/button_group.rb +0 -0
  300. /data/app/components/coco/{shared → buttons}/button_to/button_to.css +0 -0
  301. /data/app/components/coco/{shared → buttons}/button_to/button_to.html.erb +0 -0
  302. /data/app/components/coco/{app/elements → buttons}/menu/menu.html.erb +0 -0
  303. /data/app/components/coco/{app/elements → buttons}/menu_items/user_profile/user_profile.html.erb +0 -0
  304. /data/app/components/coco/{app/elements → buttons}/option_bar/option_bar.html.erb +0 -0
  305. /data/app/components/coco/{app/elements → buttons}/toolbar/toolbar.html.erb +0 -0
  306. /data/app/components/coco/{shared/embeds/youtube/youtube.css → embeds/youtube_embed/youtube_embed.css} +0 -0
  307. /data/app/components/coco/{shared/embeds/youtube/youtube.html.erb → embeds/youtube_embed/youtube_embed.html.erb} +0 -0
  308. /data/app/components/coco/{shared → images}/avatar/avatar.css +0 -0
  309. /data/app/components/coco/{shared → images}/avatar/avatar.rb +0 -0
  310. /data/app/components/coco/{shared → images}/icon/icon.css +0 -0
  311. /data/app/components/coco/{shared → images}/icon/icon.html.erb +0 -0
  312. /data/app/components/coco/{shared → images}/icon/icon.rb +0 -0
  313. /data/app/components/coco/{shared → images}/image/image.css +0 -0
  314. /data/app/components/coco/{shared → images}/image/image.rb +0 -0
  315. /data/app/components/coco/{shared → images}/image_uploader/image_uploader.css +0 -0
  316. /data/app/components/coco/{shared → images}/image_uploader/image_uploader.html.erb +0 -0
  317. /data/app/components/coco/{shared → images}/image_uploader/image_uploader.rb +0 -0
  318. /data/app/components/coco/{shared → images}/svg/svg.html.erb +0 -0
  319. /data/app/components/coco/{shared → images}/svg/svg.rb +0 -0
  320. /data/app/components/coco/{shared → indicators}/badge/badge.css +0 -0
  321. /data/app/components/coco/{shared → indicators}/badge/badge.html.erb +0 -0
  322. /data/app/components/coco/{shared → indicators}/badge/badge.rb +0 -0
  323. /data/app/components/coco/{app/elements → indicators}/stamp/stamp.html.erb +0 -0
  324. /data/app/components/coco/{app/layouts → layout}/page/page.css +0 -0
  325. /data/app/components/coco/{app/layouts → layout}/page/page.html.erb +0 -0
  326. /data/app/components/coco/{shared → layout}/panel/panel.css +0 -0
  327. /data/app/components/coco/{shared → layout}/panel/panel.html.erb +0 -0
  328. /data/app/components/coco/{shared → layout}/panel/panel.rb +0 -0
  329. /data/app/components/coco/{shared → layout}/spacer/spacer.css +0 -0
  330. /data/app/components/coco/{shared → layout}/spacer/spacer.rb +0 -0
  331. /data/app/components/coco/{shared → layout}/stack/stack.css +0 -0
  332. /data/app/components/coco/{shared → layout}/stack/stack.html.erb +0 -0
  333. /data/app/components/coco/{shared → layout}/stack/stack.rb +0 -0
  334. /data/app/components/coco/{shared → modals}/modal/modal.css +0 -0
  335. /data/app/components/coco/{shared → modals}/modal/modal.html.erb +0 -0
  336. /data/app/components/coco/{shared → modals}/modal_dialog/modal_dialog.css +0 -0
  337. /data/app/components/coco/{shared → modals}/modal_dialog/modal_dialog.html.erb +0 -0
  338. /data/app/components/coco/{shared → modals}/modal_dialog/modal_dialog.rb +0 -0
  339. /data/app/components/coco/{shared → modals}/modal_lightbox/modal_lightbox.css +0 -0
  340. /data/app/components/coco/{shared → modals}/modal_lightbox/modal_lightbox.html.erb +0 -0
  341. /data/app/components/coco/{shared → modals}/modal_lightbox/modal_lightbox.rb +0 -0
  342. /data/app/components/coco/{shared → navigation}/link/link.css +0 -0
  343. /data/app/components/coco/{shared/pager_link/pager_link.html.erb → navigation/pager_button/pager_button.html.erb} +0 -0
  344. /data/app/components/coco/{shared → typography}/prose/prose.css +0 -0
  345. /data/app/components/coco/{shared → typography}/prose/prose.rb +0 -0
  346. /data/app/components/coco/{shared → utilities}/content/content.rb +0 -0
  347. /data/app/components/coco/{shared → utilities}/dropdown/dropdown.css +0 -0
  348. /data/app/components/coco/{shared → utilities}/dropdown/dropdown.html.erb +0 -0
  349. /data/app/components/coco/{shared → utilities}/dropdown/dropdown.rb +0 -0
  350. /data/app/components/coco/{shared → utilities}/placeholder/placeholder.css +0 -0
  351. /data/app/components/coco/{shared → utilities}/placeholder/placeholder.html.erb +0 -0
  352. /data/app/components/coco/{shared → utilities}/placeholder/placeholder.rb +0 -0
  353. /data/app/components/coco/{shared → utilities}/poll_controller/poll_controller.css +0 -0
  354. /data/app/components/coco/{shared → utilities}/poll_controller/poll_controller.html.erb +0 -0
  355. /data/app/components/coco/{shared → utilities}/poll_controller/poll_controller.rb +0 -0
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-coco][data-component="app-alert"] {
2
+ [data-coco][data-component="alert"] {
3
3
  @apply rounded-xl overflow-hidden border border-transparent @container;
4
4
 
5
5
  .alert-container {
@@ -103,14 +103,14 @@
103
103
 
104
104
  /* Layout */
105
105
 
106
- @apply app-alert-stacked @[576px]:app-alert-multi-line;
106
+ @apply alert-stacked @[576px]:alert-multi-line;
107
107
 
108
108
  &[data-single-line="true"]:not(.force-multi-line) {
109
- @apply @[1000px]:app-alert-single-line;
109
+ @apply @[1000px]:alert-single-line;
110
110
  }
111
111
 
112
112
  &[data-single-line="true"].force-multi-line {
113
- @apply @[1000px]:app-alert-multi-line;
113
+ @apply @[1000px]:alert-multi-line;
114
114
  }
115
115
 
116
116
  /* Themes */
@@ -174,7 +174,7 @@
174
174
  }
175
175
 
176
176
  @layer utilities {
177
- .app-alert-stacked {
177
+ .alert-stacked {
178
178
  .alert-container {
179
179
  @apply py-4;
180
180
  }
@@ -230,7 +230,7 @@
230
230
  }
231
231
  }
232
232
 
233
- .app-alert-multi-line {
233
+ .alert-multi-line {
234
234
  .alert-container {
235
235
  @apply items-center py-2.5;
236
236
  }
@@ -284,7 +284,7 @@
284
284
  }
285
285
  }
286
286
 
287
- .app-alert-single-line {
287
+ .alert-single-line {
288
288
  .alert-container {
289
289
  @apply py-2;
290
290
  }
@@ -1,5 +1,5 @@
1
1
  <%= render component_tag(x: {
2
- data: "appAlert",
2
+ data: "alertMessage",
3
3
  bind: "root",
4
4
  show: "!dismissed",
5
5
  cloak: (true if cloak?)
@@ -1,6 +1,6 @@
1
- import { CocoComponent } from "@assets/js/shared/coco";
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
2
 
3
- export default CocoComponent("appAlert", () => {
3
+ export default CocoComponent("alertMessage", () => {
4
4
  return {
5
5
  alert: null,
6
6
  dismissed: false,
@@ -0,0 +1,75 @@
1
+ module Coco
2
+ class Alert < Coco::Component
3
+ include Concerns::AcceptsOptions
4
+ include Concerns::AcceptsTheme
5
+
6
+ THEMES = %W[positive warning negative info positive-vivid warning-vivid negative-vivid info-vivid]
7
+
8
+ accepts_option :dismissable, from: [true, false], default: false
9
+ accepts_option :dismiss_after_action, from: [true, false], default: true
10
+ accepts_option :banner, from: [true, false], default: false
11
+ accepts_option :theme, from: THEMES, default: "info"
12
+ accepts_option :single_line, from: [true, false]
13
+ accepts_option :cloak, from: [true, false], default: true, private: true
14
+ accepts_option :condensed, from: [true, false], default: false
15
+
16
+ renders_one :title
17
+ renders_one :message
18
+
19
+ renders_one :action, ->(*args, **kwargs, &block) do
20
+ theme = vivid? ? "neutral-dark" : get_option_value(:theme)
21
+ @action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
22
+ end
23
+
24
+ renders_one :secondary_action, ->(*args, **kwargs, &block) do
25
+ theme = vivid? ? "neutral-light" : "text-#{get_option_value(:theme)}"
26
+ @secondary_action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
27
+ end
28
+
29
+ renders_one :link, ->(*args, **kwargs, &block) do
30
+ theme = vivid? ? nil : unvividify(get_option_value(:theme))
31
+ @link_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
32
+ end
33
+
34
+ before_render do
35
+ unless tag_attr?(:id)
36
+ set_tag_attr(:id, "alert-#{rand(1000)}")
37
+ end
38
+ end
39
+
40
+ def dismissable?
41
+ get_option_value(:dismissable)
42
+ end
43
+
44
+ def single_line?
45
+ get_option_value(:single_line)
46
+ end
47
+
48
+ def cloak?
49
+ get_option_value(:cloak)
50
+ end
51
+
52
+ def vivid?
53
+ theme = get_option_value(:theme)
54
+ theme.to_s.match?(/vivid$/)
55
+ end
56
+
57
+ def unvividify(theme)
58
+ theme.to_s.match?(/vivid$/) ? theme.to_s.underscore.gsub("_vivid", "").to_sym : theme
59
+ end
60
+
61
+ def button_size
62
+ get_option_value(:condensed) ? :xs : :sm
63
+ end
64
+
65
+ def stamp
66
+ type = unvividify(get_option_value(:theme))&.to_sym
67
+ style = if get_option_value(:banner)
68
+ :compact
69
+ else
70
+ vivid? ? :inverse : :subtle
71
+ end
72
+ coco_stamp(type, style:)
73
+ end
74
+ end
75
+ end
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-coco][data-component="app-notice"] {
2
+ [data-coco][data-component="notice"] {
3
3
  @apply rounded-xl overflow-hidden;
4
4
 
5
5
  div[class="alert-container"] {
@@ -0,0 +1,5 @@
1
+ <%= render component_tag(x: { data: "notice" }) do %>
2
+ <%= render alert do %>
3
+ <%= content %>
4
+ <% end %>
5
+ <% end %>
@@ -0,0 +1,5 @@
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
+
3
+ export default CocoComponent("notice", () => {
4
+ return {};
5
+ });
@@ -0,0 +1,18 @@
1
+ module Coco
2
+ class Notice < Coco::Component
3
+ include Concerns::AcceptsOptions
4
+ include Concerns::WrapsComponent
5
+
6
+ accepts_option :dismissable, from: [true, false], default: true
7
+
8
+ wraps_component :alert do |args|
9
+ Coco::Alert.new(**args, dismissable: get_option_value(:dismissable))
10
+ end
11
+
12
+ %i[title action secondary_action link].each do |slot_name|
13
+ renders_one slot_name, ->(*args, **kwargs, &block) do
14
+ alert.send(:"with_#{slot_name}", *args, **kwargs, &block)
15
+ end
16
+ end
17
+ end
18
+ end
@@ -5,7 +5,7 @@
5
5
  }
6
6
 
7
7
  @layer components {
8
- [data-coco][data-component="app-snackbar"] {
8
+ [data-coco][data-component="snackbar"] {
9
9
  @apply bg-background-dark-2 rounded-xl overflow-hidden shadow-xl w-full;
10
10
  max-width: 360px;
11
11
 
@@ -1,5 +1,5 @@
1
1
  <%= render component_tag(x: {
2
- data: "appSnackbar",
2
+ data: "snackbar",
3
3
  "bind": "root",
4
4
  cloak: true
5
5
  }) do %>
@@ -1,6 +1,6 @@
1
- import { CocoComponent } from "@assets/js/shared/coco";
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
2
 
3
- export default CocoComponent("appSnackbar", () => {
3
+ export default CocoComponent("snackbar", () => {
4
4
  return {
5
5
  notificationType: "snackbar",
6
6
  options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
@@ -0,0 +1,34 @@
1
+ module Coco
2
+ class Snackbar < Coco::Component
3
+ include Concerns::WithIcon
4
+ include Concerns::ActsAsNotification
5
+
6
+ THEME_ICONS = {
7
+ positive: :check,
8
+ warning: :alert_triangle,
9
+ negative: :alert_circle,
10
+ pending: :loader_2
11
+ }.freeze
12
+
13
+ accepts_option :theme, from: [:positive, :warning, :negative, :pending]
14
+
15
+ renders_one :action, ->(*args, **kwargs, &block) do
16
+ coco_button(*args, **kwargs, theme: :blank, size: :sm, icon: nil, &block)
17
+ end
18
+
19
+ before_render do
20
+ theme = get_option_value(:theme)
21
+
22
+ unless tag_attr?(:id)
23
+ set_tag_attr(:id, "snackbar-#{rand(1000)}")
24
+ end
25
+
26
+ if !icon? && theme.present?
27
+ icon_opts = get_option_group(:icon).values
28
+ icon_name = THEME_ICONS[theme]
29
+ spin = theme == :pending
30
+ icon(**icon_opts, name: icon_name, spin: spin)
31
+ end
32
+ end
33
+ end
34
+ end
@@ -0,0 +1,4 @@
1
+ @layer components {
2
+ [data-coco][data-component="system-banner"] {
3
+ }
4
+ }
@@ -0,0 +1,5 @@
1
+ <%= render component_tag(x: { data: x_data("systemBanner", alpine_data), bind: "root"}) do %>
2
+ <%= render alert do %>
3
+ <%= content %>
4
+ <% end %>
5
+ <% end %>
@@ -1,7 +1,7 @@
1
- import { CocoComponent } from "@assets/js/shared/coco";
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
2
  import Cookies from "js-cookie";
3
3
 
4
- export default CocoComponent("appSystemBanner", (opts = {}) => {
4
+ export default CocoComponent("systemBanner", (opts = {}) => {
5
5
  return {
6
6
  cookieName: null,
7
7
  cookieValue: null,
@@ -0,0 +1,78 @@
1
+ module Coco
2
+ class SystemBanner < Coco::Component
3
+ include Concerns::AcceptsOptions
4
+ include Concerns::WrapsComponent
5
+
6
+ accepts_option :dismissable, from: [true, false], default: false
7
+
8
+ wraps_component :alert do |args|
9
+ theme = vivid_theme_name(args.fetch(:theme, nil)) || :info_vivid
10
+ Coco::Alert.new(
11
+ **args,
12
+ theme: theme,
13
+ banner: true,
14
+ cloak: false,
15
+ single_line: true,
16
+ dismissable: dismissable?,
17
+ dismiss_after_action: false,
18
+ condensed: true
19
+ )
20
+ end
21
+
22
+ %i[action secondary_action link].each do |slot_name|
23
+ renders_one slot_name, ->(*args, **kwargs, &block) do
24
+ alert.send(:"with_#{slot_name}", *args, **kwargs, &block)
25
+ end
26
+ end
27
+
28
+ renders_one :title, ->(text = nil, **kwargs, &block) do
29
+ alert.public_send(:with_title, **kwargs) { text.presence || block.call }
30
+ end
31
+
32
+ renders_one :message, ->(text = nil, **kwargs, &block) do
33
+ alert.public_send(:with_message, **kwargs) { text.presence || block.call }
34
+ end
35
+
36
+ before_render do
37
+ if dismissable? && id.blank?
38
+ raise ArgumentError, "Dismissable banners must be given an ID"
39
+ end
40
+ end
41
+
42
+ attr_reader :dismiss_for, :id
43
+
44
+ def initialize(id: nil, dismiss_for: nil, **)
45
+ @id = id
46
+ @dismiss_for = dismiss_for
47
+ set_tag_attr(:id, id)
48
+ end
49
+
50
+ def dismissable?
51
+ get_option_value(:dismissable) == true
52
+ end
53
+
54
+ def render?
55
+ helpers.cookies[dismiss_cookie_name] != "true"
56
+ end
57
+
58
+ def dismiss_cookie_name
59
+ :"cb_system_banner_#{tag_attr(:id)&.underscore}_dismissed"
60
+ end
61
+
62
+ def alpine_data
63
+ dismissable? ? {
64
+ cookie_name: dismiss_cookie_name,
65
+ cookie_expiry: dismiss_for&.in_days&.to_i,
66
+ cookie_value: "true"
67
+ } : {}
68
+ end
69
+
70
+ private
71
+
72
+ def vivid_theme_name(theme)
73
+ if theme.present?
74
+ :"#{theme.to_s.underscore.gsub("_vivid", "")}_vivid"
75
+ end
76
+ end
77
+ end
78
+ end
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-coco][data-component="app-toast"] {
2
+ [data-coco][data-component="toast"] {
3
3
  @apply shadow-xl rounded-xl overflow-hidden w-full;
4
4
  max-width: 360px;
5
5
 
@@ -1,5 +1,5 @@
1
1
  <%= render component_tag(x: {
2
- data: "appToast",
2
+ data: "toast",
3
3
  bind: "root",
4
4
  cloak: true
5
5
  }) do %>
@@ -1,6 +1,6 @@
1
- import { CocoComponent } from "@assets/js/shared/coco";
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
2
 
3
- export default CocoComponent("appToast", () => {
3
+ export default CocoComponent("toast", () => {
4
4
  return {
5
5
  notificationType: "toast",
6
6
  options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
@@ -0,0 +1,19 @@
1
+ module Coco
2
+ class Toast < Coco::Component
3
+ include Concerns::WrapsComponent
4
+ include Concerns::ActsAsNotification
5
+
6
+ accepts_option :dismissable, from: [true, false], default: true
7
+ accepts_option :dismiss, from: [true, false], default: false
8
+
9
+ wraps_component :alert do |args|
10
+ Coco::Alert.new(**args, dismissable: get_option_value(:dismissable))
11
+ end
12
+
13
+ %i[title action secondary_action link].each do |slot_name|
14
+ renders_one slot_name, ->(**kwargs, &block) do
15
+ alert.send(:"with_#{slot_name}", **kwargs, &block)
16
+ end
17
+ end
18
+ end
19
+ end
@@ -1,5 +1,5 @@
1
- import { CocoComponent } from "@assets/js/shared/coco";
2
- import { hideAll } from "@assets/js/libs/tippy";
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
+ import { hideAll } from "@assets/js/base/tippy";
3
3
  import { navigateTo } from "@helpers/location";
4
4
 
5
5
  export default CocoComponent("modal", () => {
@@ -1,6 +1,7 @@
1
1
  module Coco
2
2
  class Modal < Coco::Component
3
3
  include Concerns::AcceptsOptions
4
+ include Coco::ModalHelper
4
5
  include Turbo::FramesHelper
5
6
 
6
7
  accepts_option :dismissable, from: [true, false], default: true
@@ -1,4 +1,4 @@
1
- import { CocoComponent } from "@assets/js/shared/coco";
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
2
 
3
3
  export default CocoComponent("modalDialog", () => {
4
4
  return {
@@ -1,4 +1,4 @@
1
- import { CocoComponent } from "@assets/js/shared/coco";
1
+ import { CocoComponent } from "@assets/js/base/coco";
2
2
 
3
3
  export default CocoComponent("modalLightbox", () => {
4
4
  return {
@@ -29,7 +29,7 @@ module Coco
29
29
  end
30
30
 
31
31
  class << self
32
- include Coco::SharedHelper
32
+ include Coco::ModalHelper
33
33
  end
34
34
  end
35
35
  end
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-coco][data-component="pager-link"] {
2
+ [data-coco][data-component="pager-button"] {
3
3
  @apply block py-2.5 px-1 bg-background-dark-3 bg-opacity-40 hover:bg-opacity-60 scale-75 hover:scale-100 lg:scale-100 lg:hover:scale-125 transition-all;
4
4
  width: min-content;
5
5
 
@@ -1,5 +1,5 @@
1
1
  module Coco
2
- class PagerLink < Coco::Component
2
+ class PagerButton < Coco::Component
3
3
  include Concerns::AcceptsOptions
4
4
 
5
5
  tag_name :a
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-coco][data-component="app-color-picker"] {
2
+ [data-coco][data-component="color-picker"] {
3
3
  @apply bg-background-light-2;
4
4
 
5
5
  .picker-section:not(:first-child) {
@@ -45,47 +45,47 @@
45
45
  /* Sizes */
46
46
 
47
47
  &[data-size="sm"] {
48
- @apply app-color-picker-sm;
48
+ @apply color-picker-sm;
49
49
  }
50
50
 
51
51
  &[data-size="md"] {
52
- @apply app-color-picker-md;
52
+ @apply color-picker-md;
53
53
  }
54
54
 
55
55
  @media screen(md) {
56
56
  &[data-size-md="sm"] {
57
- @apply app-color-picker-sm;
57
+ @apply color-picker-sm;
58
58
  }
59
59
 
60
60
  &[data-size-md="md"] {
61
- @apply app-color-picker-md;
61
+ @apply color-picker-md;
62
62
  }
63
63
  }
64
64
 
65
65
  @media screen(lg) {
66
66
  &[data-size-lg="sm"] {
67
- @apply app-color-picker-sm;
67
+ @apply color-picker-sm;
68
68
  }
69
69
 
70
70
  &[data-size-lg="md"] {
71
- @apply app-color-picker-md;
71
+ @apply color-picker-md;
72
72
  }
73
73
  }
74
74
 
75
75
  @media screen(xl) {
76
76
  &[data-size-xl="sm"] {
77
- @apply app-color-picker-sm;
77
+ @apply color-picker-sm;
78
78
  }
79
79
 
80
80
  &[data-size-xl="md"] {
81
- @apply app-color-picker-md;
81
+ @apply color-picker-md;
82
82
  }
83
83
  }
84
84
  }
85
85
  }
86
86
 
87
87
  @layer utilities {
88
- .app-color-picker-sm {
88
+ .color-picker-sm {
89
89
  @apply p-6;
90
90
  width: 242px;
91
91
 
@@ -118,7 +118,7 @@
118
118
  }
119
119
  }
120
120
 
121
- .app-color-picker-md {
121
+ .color-picker-md {
122
122
  @apply p-8;
123
123
  width: 304px;
124
124
 
@@ -1,5 +1,5 @@
1
1
  <%= render component_tag(x: {
2
- data: "appColorPicker({selectedColor: '#{selected}'})",
2
+ data: "colorPicker({selectedColor: '#{selected}'})",
3
3
  ":class": "colorWheel.show && 'picker-color-wheel-open'",
4
4
  dimensions: "onResize"
5
5
  }) do %>
@@ -1,9 +1,9 @@
1
1
  import iro from "@jaames/iro";
2
- import { CocoComponent } from "@assets/js/shared/coco";
2
+ import { CocoComponent } from "@assets/js/base/coco";
3
3
  import { isValidHex, formatHex } from "@helpers/color";
4
4
  import { getComponent } from "@helpers/alpine";
5
5
 
6
- export default CocoComponent("appColorPicker", ({ selected }) => {
6
+ export default CocoComponent("colorPicker", ({ selected }) => {
7
7
  return {
8
8
  selectedColor: selected,
9
9
  display: selected,
@@ -0,0 +1,48 @@
1
+ module Coco
2
+ class ColorPicker < Coco::Component
3
+ include Concerns::AcceptsOptions
4
+
5
+ DEFAULT_SWATCHES = [
6
+ {color: "#111827"},
7
+ {color: "#F3F4F6"},
8
+ {color: "#FFFFFF"},
9
+ {color: "#FEC878"},
10
+ {color: "#FC5C0E"},
11
+ {color: "#D50201"},
12
+ {color: "#1A8871"},
13
+ {color: "#C1DAA9"},
14
+ {color: "#F5EEE6"},
15
+ {color: "#91C7E1"},
16
+ {color: "#0164FF"},
17
+ {color: "#3A2D86"}
18
+ ]
19
+
20
+ accepts_option :size, from: [:xs, :sm, :md, nil], default: :sm
21
+
22
+ before_render do
23
+ content unless content_evaluated?
24
+
25
+ if @swatches.empty?
26
+ @swatches = DEFAULT_SWATCHES
27
+ end
28
+
29
+ args[:resize]&.each { set_tag_data_attr("size-#{_1}", _2) }
30
+ end
31
+
32
+ renders_many :swatches,
33
+ ->(color, name = nil) do
34
+ @swatches << {name: name, color: color}
35
+ end
36
+
37
+ attr_reader :selected
38
+
39
+ def initialize(selected: "FFFFFF", **kwargs)
40
+ @selected = selected
41
+ @swatches = []
42
+ end
43
+
44
+ def color_swatches
45
+ @swatches
46
+ end
47
+ end
48
+ end
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-coco][data-component="app-image-picker"] {
2
+ [data-coco][data-component="image-picker"] {
3
3
  .picker-blank-state {
4
4
  @apply flex flex-col items-center;
5
5
  }
@@ -23,47 +23,47 @@
23
23
  /* Sizes */
24
24
 
25
25
  &[data-size="sm"] {
26
- @apply app-image-picker-sm;
26
+ @apply image-picker-sm;
27
27
  }
28
28
 
29
29
  &[data-size="md"] {
30
- @apply app-image-picker-md;
30
+ @apply image-picker-md;
31
31
  }
32
32
 
33
33
  @media screen(md) {
34
34
  &[data-size-md="sm"] {
35
- @apply app-image-picker-sm;
35
+ @apply image-picker-sm;
36
36
  }
37
37
 
38
38
  &[data-size-md="md"] {
39
- @apply app-image-picker-md;
39
+ @apply image-picker-md;
40
40
  }
41
41
  }
42
42
 
43
43
  @media screen(lg) {
44
44
  &[data-size-lg="sm"] {
45
- @apply app-image-picker-sm;
45
+ @apply image-picker-sm;
46
46
  }
47
47
 
48
48
  &[data-size-lg="md"] {
49
- @apply app-image-picker-md;
49
+ @apply image-picker-md;
50
50
  }
51
51
  }
52
52
 
53
53
  @media screen(xl) {
54
54
  &[data-size-xl="sm"] {
55
- @apply app-image-picker-sm;
55
+ @apply image-picker-sm;
56
56
  }
57
57
 
58
58
  &[data-size-xl="md"] {
59
- @apply app-image-picker-md;
59
+ @apply image-picker-md;
60
60
  }
61
61
  }
62
62
  }
63
63
  }
64
64
 
65
65
  @layer utilities {
66
- .app-image-picker-sm {
66
+ .image-picker-sm {
67
67
  @apply p-6;
68
68
  width: 196px;
69
69
 
@@ -85,7 +85,7 @@
85
85
  }
86
86
  }
87
87
 
88
- .app-image-picker-md {
88
+ .image-picker-md {
89
89
  @apply p-8;
90
90
  width: 220px;
91
91