coveragebook_components 0.8.1 → 0.8.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +427 -303
  3. data/app/assets/build/coco/app.js +469 -230
  4. data/app/assets/build/coco/book.js +394 -175
  5. data/app/assets/build/coco/icons/armchair.svg +1 -1
  6. data/app/assets/build/coco/icons/folder-archive.svg +1 -1
  7. data/app/assets/build/coco/icons/folder-check.svg +1 -1
  8. data/app/assets/build/coco/icons/folder-clock.svg +1 -1
  9. data/app/assets/build/coco/icons/folder-closed.svg +1 -1
  10. data/app/assets/build/coco/icons/folder-cog.svg +1 -1
  11. data/app/assets/build/coco/icons/folder-down.svg +1 -1
  12. data/app/assets/build/coco/icons/folder-edit.svg +1 -1
  13. data/app/assets/build/coco/icons/folder-git.svg +1 -1
  14. data/app/assets/build/coco/icons/folder-heart.svg +1 -1
  15. data/app/assets/build/coco/icons/folder-input.svg +1 -1
  16. data/app/assets/build/coco/icons/folder-key.svg +1 -1
  17. data/app/assets/build/coco/icons/folder-lock.svg +1 -1
  18. data/app/assets/build/coco/icons/folder-minus.svg +1 -1
  19. data/app/assets/build/coco/icons/folder-open.svg +1 -1
  20. data/app/assets/build/coco/icons/folder-plus.svg +1 -1
  21. data/app/assets/build/coco/icons/folder-search-2.svg +1 -1
  22. data/app/assets/build/coco/icons/folder-search.svg +1 -1
  23. data/app/assets/build/coco/icons/folder-tree.svg +1 -1
  24. data/app/assets/build/coco/icons/folder-up.svg +1 -1
  25. data/app/assets/build/coco/icons/folder-x.svg +1 -1
  26. data/app/assets/build/coco/icons/folder.svg +1 -1
  27. data/app/assets/build/coco/icons/folders.svg +1 -1
  28. data/app/assets/build/coco/icons/git-commit-vertical.svg +1 -0
  29. data/app/assets/build/coco/icons/git-compare-arrows.svg +1 -0
  30. data/app/assets/build/coco/icons/git-fork.svg +1 -1
  31. data/app/assets/build/coco/icons/git-graph.svg +1 -0
  32. data/app/assets/build/coco/icons/git-pull-request-arrow.svg +1 -0
  33. data/app/assets/build/coco/icons/git-pull-request-closed.svg +1 -1
  34. data/app/assets/build/coco/icons/git-pull-request-create-arrow.svg +1 -0
  35. data/app/assets/build/coco/icons/git-pull-request-create.svg +1 -0
  36. data/app/assets/build/coco/icons/power-circle.svg +1 -0
  37. data/app/assets/build/coco/icons/power-square.svg +1 -0
  38. data/app/assets/build/coco/icons/power.svg +1 -1
  39. data/app/assets/js/app/setup.js +4 -3
  40. data/app/assets/js/helpers/location.js +4 -2
  41. data/app/components/coco/app/blocks/sidebar_nav/item/item.css +121 -0
  42. data/app/components/coco/app/blocks/sidebar_nav/item/item.html.erb +9 -0
  43. data/app/components/coco/app/blocks/{sidebar_nav_item/sidebar_nav_item.js → sidebar_nav/item/item.js} +12 -2
  44. data/app/components/coco/app/blocks/sidebar_nav/item/item.rb +50 -0
  45. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.css +138 -0
  46. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.html.erb +24 -0
  47. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.js +13 -0
  48. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.rb +48 -0
  49. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css +75 -0
  50. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb +29 -0
  51. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb +50 -0
  52. data/app/components/coco/base/icon/icon.rb +1 -0
  53. data/app/components/coco/base/modal/modal.html.erb +1 -0
  54. data/app/components/coco/base/modal/modal.js +5 -0
  55. data/app/components/coco/component.rb +2 -2
  56. data/app/helpers/coco/app_helper.rb +5 -1
  57. data/app/helpers/coco/book_helper.rb +4 -4
  58. data/app/helpers/coco/component_helper.rb +2 -2
  59. data/app/helpers/coco/integration_helper.rb +4 -4
  60. data/config/icons.json +9 -1
  61. data/config/tokens.cjs +6 -0
  62. data/lib/coco/options/group.rb +9 -9
  63. data/lib/coco/test_helpers.rb +2 -2
  64. data/lib/coco.rb +1 -1
  65. metadata +23 -11
  66. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css +0 -110
  67. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb +0 -42
  68. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb +0 -28
  69. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css +0 -153
  70. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb +0 -45
  71. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb +0 -108
  72. /data/app/assets/build/coco/icons/{git-commit.svg → git-commit-horizontal.svg} +0 -0
  73. /data/app/components/coco/app/blocks/sidebar_nav/{sidebar_nav.js → navbar/navbar.js} +0 -0
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3"/><path d="M3 11v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H7v-2a2 2 0 0 0-4 0Z"/><path d="M5 18v2"/><path d="M19 18v2"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3"/><path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H7v-2a2 2 0 0 0-4 0Z"/><path d="M5 18v2"/><path d="M19 18v2"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 20V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2h6"/><circle cx="16" cy="19" r="2"/><path d="M16 11v-1"/><path d="M16 17v-2"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="15" cy="19" r="2"/><path d="M20.9 19.8A2 2 0 0 0 22 18V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h5.1"/><path d="M15 11v-1"/><path d="M15 17v-2"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="m9 13 2 2 4-4"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="m9 13 2 2 4-4"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2"/><circle cx="16" cy="16" r="6"/><path d="M16 14v2l1 1"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="16" cy="16" r="6"/><path d="M7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2"/><path d="M16 14v2l1 1"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M2 10h20"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M2 10h20"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="18" cy="18" r="3"/><path d="M10.5 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3.5"/><path d="m21.7 19.4-.9-.3"/><path d="m15.2 16.9-.9-.3"/><path d="m16.6 21.7.3-.9"/><path d="m19.1 15.2.3-.9"/><path d="m19.6 21.7-.4-1"/><path d="m16.8 15.3-.4-1"/><path d="m14.3 19.6 1-.4"/><path d="m20.7 16.8 1-.4"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="18" cy="18" r="3"/><path d="M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3.3"/><path d="m21.7 19.4-.9-.3"/><path d="m15.2 16.9-.9-.3"/><path d="m16.6 21.7.3-.9"/><path d="m19.1 15.2.3-.9"/><path d="m19.6 21.7-.4-1"/><path d="m16.8 15.3-.4-1"/><path d="m14.3 19.6 1-.4"/><path d="m20.7 16.8 1-.4"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M12 10v6"/><path d="m15 13-3 3-3-3"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m15 13-3 3-3-3"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.42 10.61a2.1 2.1 0 1 1 2.97 2.97L5.95 19 2 20l.99-3.95 5.43-5.44Z"/><path d="M2 11.5V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9.5"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.4 10.6a2.1 2.1 0 1 1 2.99 2.98L6 19l-4 1 1-3.9Z"/><path d="M2 11.5V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-9.5"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><circle cx="12" cy="13" r="2"/><path d="M14 13h3"/><path d="M7 13h3"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="13" r="2"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M14 13h3"/><path d="M7 13h3"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v1.5"/><path d="M21.29 13.7a2.43 2.43 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-2.65-.53c-.3.12-.56.3-.79.53-.95.94-1 2.53.2 3.74L17.5 21l3.6-3.55c1.2-1.21 1.14-2.8.19-3.74Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v1.5"/><path d="M13.9 17.45c-1.2-1.2-1.14-2.8-.2-3.73a2.43 2.43 0 0 1 3.44 0l.36.34.34-.34a2.43 2.43 0 0 1 3.45-.01v0c.95.95 1 2.53-.2 3.74L17.5 21Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 9V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"/><path d="M2 13h10"/><path d="m9 16 3-3-3-3"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"/><path d="M2 13h10"/><path d="m9 16 3-3-3-3"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2"/><circle cx="16" cy="20" r="2"/><path d="m22 14-4.5 4.5"/><path d="m21 15 1 1"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="16" cy="20" r="2"/><path d="M10 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v2"/><path d="m22 14-4.5 4.5"/><path d="m21 15 1 1"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v2.5"/><rect width="8" height="5" x="14" y="17" rx="1"/><path d="M20 17v-2a2 2 0 1 0-4 0v2"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="8" height="5" x="14" y="17" rx="1"/><path d="M10 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v2.5"/><path d="M20 17v-2a2 2 0 1 0-4 0v2"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><line x1="9" x2="15" y1="13" y2="13"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><line x1="12" x2="12" y1="10" y2="16"/><line x1="9" x2="15" y1="13" y2="13"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 10v6"/><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><circle cx="11.5" cy="12.5" r="2.5"/><path d="M13.27 14.27 15 16"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11.5" cy="12.5" r="2.5"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M13.3 14.3 15 16"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 20H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H20a2 2 0 0 1 2 2v4"/><circle cx="17" cy="17" r="3"/><path d="m21 21-1.5-1.5"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="17" cy="17" r="3"/><path d="M10.7 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4.1"/><path d="m21 21-1.5-1.5"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 10h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"/><path d="M13 21h7a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.88a1 1 0 0 1-.9-.55l-.44-.9a1 1 0 0 0-.9-.55H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"/><path d="M3 3v2c0 1.1.9 2 2 2h3"/><path d="M3 3v13c0 1.1.9 2 2 2h3"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"/><path d="M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z"/><path d="M3 5a2 2 0 0 0 2 2h3"/><path d="M3 3v13a2 2 0 0 0 2 2h3"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="m9.5 10.5 5 5"/><path d="m14.5 10.5-5 5"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="m9.5 10.5 5 5"/><path d="m14.5 10.5-5 5"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 17h12a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3.93a2 2 0 0 1-1.66-.9l-.82-1.2a2 2 0 0 0-1.66-.9H8a2 2 0 0 0-2 2v9c0 1.1.9 2 2 2Z"/><path d="M2 8v11c0 1.1.9 2 2 2h14"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 17a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3.9a2 2 0 0 1-1.69-.9l-.81-1.2a2 2 0 0 0-1.67-.9H8a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2Z"/><path d="M2 8v11a2 2 0 0 0 2 2h14"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3v6"/><circle cx="12" cy="12" r="3"/><path d="M12 15v6"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="5" cy="6" r="3"/><path d="M12 6h5a2 2 0 0 1 2 2v7"/><path d="m15 9-3-3 3-3"/><circle cx="19" cy="18" r="3"/><path d="M12 18H7a2 2 0 0 1-2-2V9"/><path d="m9 15 3 3-3 3"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9"/><path d="M12 12v3"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="5" cy="6" r="3"/><path d="M5 9v6"/><circle cx="5" cy="18" r="3"/><path d="M12 3v18"/><circle cx="19" cy="6" r="3"/><path d="M16 15.7A9 9 0 0 0 19 9"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="5" cy="6" r="3"/><path d="M5 9v12"/><circle cx="19" cy="18" r="3"/><path d="m15 9-3-3 3-3"/><path d="M12 6h5a2 2 0 0 1 2 2v7"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M18 11.5V15"/><path d="m21 3-6 6"/><path d="m21 9-6-6"/><line x1="6" x2="6" y1="9" y2="21"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><path d="M6 9v12"/><path d="m21 3-6 6"/><path d="m21 9-6-6"/><path d="M18 11.5V15"/><circle cx="18" cy="18" r="3"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="5" cy="6" r="3"/><path d="M5 9v12"/><path d="m15 9-3-3 3-3"/><path d="M12 6h5a2 2 0 0 1 2 2v3"/><path d="M19 15v6"/><path d="M22 18h-6"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><path d="M6 9v12"/><path d="M13 6h3a2 2 0 0 1 2 2v3"/><path d="M18 15v6"/><path d="M21 18h-6"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 12V6"/><path d="M8 7.5A6.1 6.1 0 0 0 12 18a6 6 0 0 0 4-10.5"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 7v5"/><path d="M8 9a5.14 5.14 0 0 0 4 8 4.95 4.95 0 0 0 4-8"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" x2="12" y1="2" y2="12"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>
@@ -2,10 +2,11 @@ import { navigateTo } from "@helpers/location";
2
2
 
3
3
  // Global JS navigation handler.
4
4
  // Optionally uses Turbo for the page navigation.
5
- window.addEventListener("navigate", (event) => {
6
- const { url, turbo, action } = event.detail;
5
+ window.addEventListener("app:navigate", (event) => {
6
+ const url = event.detail.url;
7
7
  if (url) {
8
- navigateTo(url, { turbo, action });
8
+ delete event.detail.url;
9
+ navigateTo(url, event.detail);
9
10
  }
10
11
  });
11
12
 
@@ -1,6 +1,8 @@
1
1
  function navigateTo(url, options = {}) {
2
- if (window.Turbo && options.turbo === true) {
3
- window.Turbo.visit(url, { action: options.action || "advance" });
2
+ if (window.Turbo && options.turbo !== false) {
3
+ delete options.turbo;
4
+ turboOptions = Object.assign({ action: "advance" }, options);
5
+ window.Turbo.visit(url, turboOptions);
4
6
  } else {
5
7
  location.assign(url);
6
8
  }
@@ -0,0 +1,121 @@
1
+ @layer components {
2
+ [data-coco][data-component="app-sidebar-nav-item"] {
3
+ @apply bg-background-dark-2 text-content-dark-muted text-center no-underline cursor-pointer;
4
+ @apply flex items-center justify-center w-full flex-col;
5
+
6
+ &.active,
7
+ &:hover {
8
+ @apply bg-background-dark-1 text-content-light-1;
9
+ }
10
+
11
+ .nav-item-icon {
12
+ @apply block mx-auto transition-colors;
13
+ }
14
+
15
+ .nav-item-label {
16
+ @apply block font-semibold transition-colors cursor-pointer;
17
+ }
18
+
19
+ .nav-item-action-button {
20
+ @apply bg-content-primary-inverse-vivid transition-all text-content-light-1;
21
+ @apply flex items-center justify-center mx-auto rounded-full cursor-pointer;
22
+ }
23
+
24
+ @media screen(max-sm) {
25
+ @apply app-sidebar-nav-horizontal-item;
26
+ }
27
+
28
+ @media screen(sm) and screen(max-md) {
29
+ @apply app-sidebar-nav-vertical-narrow-item;
30
+ }
31
+
32
+ @media screen(md) {
33
+ @apply app-sidebar-nav-vertical-wide-item;
34
+ }
35
+
36
+ @media screen(letterbox) {
37
+ @apply app-sidebar-nav-vertical-narrow-item;
38
+ }
39
+ }
40
+ }
41
+
42
+ @layer utilities {
43
+ .app-sidebar-nav-horizontal-item {
44
+ .nav-item-label {
45
+ @apply text-label-xxs mt-0.5;
46
+ }
47
+
48
+ .nav-item-icon .coco-icon {
49
+ @apply w-6 h-6;
50
+ }
51
+
52
+ .nav-item-action-button {
53
+ @apply h-12 w-12;
54
+
55
+ .coco-icon {
56
+ @apply h-6 w-6;
57
+ }
58
+ }
59
+ }
60
+
61
+ .app-sidebar-nav-vertical-item {
62
+ .nav-item-action-button {
63
+ &:hover {
64
+ transform: scale(1.05);
65
+ }
66
+ }
67
+
68
+ &[data-active="true"] {
69
+ @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
70
+ }
71
+
72
+ &[data-emphasise="true"] {
73
+ .nav-item-icon {
74
+ @apply text-content-primary-inverse-vivid hover:text-content-primary-inverse-vivid;
75
+ }
76
+ }
77
+ }
78
+
79
+ .app-sidebar-nav-vertical-narrow-item {
80
+ @apply app-sidebar-nav-vertical-item;
81
+ @apply py-4;
82
+
83
+ .nav-item-label {
84
+ @apply text-label-xxs mt-1;
85
+ }
86
+
87
+ .nav-item-icon .coco-icon {
88
+ @apply w-6 h-6;
89
+ }
90
+
91
+ .nav-item-action-button {
92
+ @apply h-12 w-12;
93
+
94
+ .coco-icon {
95
+ @apply h-6 w-6;
96
+ }
97
+ }
98
+ }
99
+
100
+ .app-sidebar-nav-vertical-wide-item {
101
+ @apply app-sidebar-nav-vertical-item;
102
+ @apply py-5;
103
+
104
+ .nav-item-label {
105
+ @apply text-label-xs mt-1.5;
106
+ }
107
+
108
+ .nav-item-icon .coco-icon {
109
+ @apply w-8 h-8;
110
+ }
111
+
112
+ .nav-item-action-button {
113
+ height: 72px;
114
+ width: 72px;
115
+
116
+ .coco-icon {
117
+ @apply h-10 w-10;
118
+ }
119
+ }
120
+ }
121
+ }
@@ -0,0 +1,9 @@
1
+ <%= render component_tag(item_tag, x: {data: "appSidebarNavItem", bind: "root"}) do %>
2
+ <div class="nav-item-icon">
3
+ <%= icon %>
4
+ </div>
5
+ <label class="nav-item-label">
6
+ <%= label %>
7
+ </label>
8
+ <%= tag.template(menu, id: menu_id, "x-ref": "menu") if menu? %>
9
+ <% end %>
@@ -4,6 +4,7 @@ import { CocoComponent } from "@js/coco";
4
4
  export default CocoComponent("appSidebarNavItem", () => {
5
5
  return {
6
6
  menu: null,
7
+ active: false,
7
8
 
8
9
  init() {
9
10
  if (this.$refs.menu) {
@@ -15,9 +16,13 @@ export default CocoComponent("appSidebarNavItem", () => {
15
16
  trigger: "click",
16
17
  interactive: true,
17
18
  maxWidth: null,
18
- content: () => {
19
- return this.$refs.menu.innerHTML;
19
+ onShow: () => {
20
+ this.active = true;
20
21
  },
22
+ onHide: () => {
23
+ this.active = false;
24
+ },
25
+ content: () => this.$refs.menu.innerHTML,
21
26
  });
22
27
  }
23
28
 
@@ -34,6 +39,11 @@ export default CocoComponent("appSidebarNavItem", () => {
34
39
  }
35
40
  },
36
41
 
42
+ root: {
43
+ "@click": "if (menu) $event.preventDefault()",
44
+ ":class": "{active}",
45
+ },
46
+
37
47
  get menuPlacement() {
38
48
  return this.mobileLayout ? "top" : "right-start";
39
49
  },
@@ -0,0 +1,50 @@
1
+ module Coco
2
+ module App
3
+ module Blocks
4
+ module SidebarNav
5
+ class Item < Coco::Component
6
+ include Concerns::Extendable
7
+ include Concerns::AcceptsOptions
8
+
9
+ tag_attr :href
10
+ component_name :app_sidebar_nav_item
11
+
12
+ accepts_option :active, from: [true, false]
13
+ accepts_option :emphasise, from: [true, false]
14
+
15
+ renders_one :icon
16
+ renders_one :menu
17
+
18
+ before_render do
19
+ if @icon && !icon?
20
+ with_icon { coco_icon(@icon, size: :full) }
21
+ end
22
+
23
+ if link? && get_option_value(:active).nil?
24
+ set_option_value(:active, helpers.current_page?(tag_attr(:href)))
25
+ end
26
+ end
27
+
28
+ attr_reader :label
29
+
30
+ def initialize(label:, icon: nil, **)
31
+ @label = label
32
+ @icon = icon
33
+ end
34
+
35
+ def link?
36
+ tag_attr?(:href) && !menu?
37
+ end
38
+
39
+ def item_tag
40
+ link? ? :a : :button
41
+ end
42
+
43
+ def menu_id
44
+ "#{tag_attr(:id)}-menu" if tag_attr?(:id)
45
+ end
46
+ end
47
+ end
48
+ end
49
+ end
50
+ end
@@ -0,0 +1,138 @@
1
+ @layer components {
2
+ [data-coco][data-component="app-sidebar-nav-menu"] {
3
+ @apply bg-content-dark-2 antialiased shadow-md sm:rounded-r-md overflow-hidden divide-y divide-background-dark-3;
4
+ width: min-content;
5
+
6
+ [data-placement="bottom"] & {
7
+ @apply rounded-b-md;
8
+ }
9
+
10
+ [data-placement="top"] & {
11
+ @apply rounded-t-md;
12
+ }
13
+
14
+ .menu-item-link {
15
+ .coco-link {
16
+ @apply flex w-full items-center py-3 bg-content-dark-2 hover:bg-background-dark-1 text-content-dark-muted transition;
17
+ }
18
+ }
19
+
20
+ .menu-item-label {
21
+ @apply truncate min-w-0 text-content-light-1 transition-colors;
22
+ }
23
+
24
+ .menu-item-qualifier {
25
+ @apply ml-auto text-label-sm flex-none pl-4;
26
+ }
27
+
28
+ .menu-item-select {
29
+ select {
30
+ @apply focus:ring-0 bg-transparent hover:bg-background-dark-1 active:bg-background-dark-1 text-content-light-2;
31
+ @apply py-3 w-full border-0;
32
+ }
33
+ }
34
+
35
+ .menu-item-action {
36
+ @apply py-2;
37
+ }
38
+
39
+ .card {
40
+ @apply grid gap-x-4 gap-y-1;
41
+ grid-template-areas: "icon title" "icon text";
42
+ grid-template-columns: min-content 1fr;
43
+
44
+ .coco-icon {
45
+ @apply mt-0.5 w-5 h-5;
46
+ grid-area: icon;
47
+ }
48
+
49
+ h4 {
50
+ @apply text-content-light-1 font-bold text-heading-6;
51
+ grid-area: title;
52
+ }
53
+
54
+ div {
55
+ @apply text-para-sm;
56
+ grid-area: text;
57
+ }
58
+ }
59
+
60
+ @media screen(max-sm) {
61
+ @apply app-sidebar-nav-menu-regular;
62
+ }
63
+
64
+ @media screen(sm) and screen(max-md) {
65
+ @apply app-sidebar-nav-menu-small;
66
+ }
67
+
68
+ @media screen(md) {
69
+ @apply app-sidebar-nav-menu-regular;
70
+ }
71
+
72
+ @media screen(letterbox) {
73
+ @apply app-sidebar-nav-menu-small;
74
+ }
75
+ }
76
+ }
77
+
78
+ @layer utilities {
79
+ .app-sidebar-nav-menu-small {
80
+ .menu-item {
81
+ width: 240px;
82
+ }
83
+
84
+ .menu-item-label {
85
+ @apply text-sm;
86
+ }
87
+
88
+ .menu-item-select select {
89
+ @apply text-sm;
90
+ }
91
+
92
+ .menu-item-link .coco-link,
93
+ .menu-item-select select,
94
+ .menu-item-action {
95
+ @apply px-4;
96
+ }
97
+
98
+ &.nav-card-menu {
99
+ .menu-item {
100
+ width: 280px;
101
+ }
102
+
103
+ .coco-link {
104
+ @apply px-4 py-4;
105
+ }
106
+ }
107
+ }
108
+
109
+ .app-sidebar-nav-menu-regular {
110
+ .menu-item {
111
+ width: 280px;
112
+ }
113
+
114
+ .menu-item-label {
115
+ @apply text-base;
116
+ }
117
+
118
+ .menu-item-select select {
119
+ @apply text-base;
120
+ }
121
+
122
+ .menu-item-link .coco-link,
123
+ .menu-item-select select,
124
+ .menu-item-action {
125
+ @apply px-6;
126
+ }
127
+
128
+ &.nav-card-menu {
129
+ .menu-item {
130
+ width: 320px;
131
+ }
132
+
133
+ .coco-link {
134
+ @apply px-4 py-4;
135
+ }
136
+ }
137
+ }
138
+ }
@@ -0,0 +1,24 @@
1
+ <%= render component_tag(x: {data: "appSidebarNavMenu"}) do %>
2
+ <% items.each do |link| %>
3
+ <% if link.to_s.strip.present? %>
4
+ <div class="menu-item menu-item-link">
5
+ <%= link %>
6
+ </div>
7
+ <% end %>
8
+ <% end %>
9
+
10
+ <% if overflow_items.any? %>
11
+ <div class="menu-item menu-item-select">
12
+ <%= select_tag nil,
13
+ options_for_select(overflow_items),
14
+ prompt: prompt,
15
+ "@change": "navigateTo($el.value)" %>
16
+ </div>
17
+ <% end %>
18
+
19
+ <% if action %>
20
+ <div class="menu-item menu-item-action">
21
+ <%= action %>
22
+ </div>
23
+ <% end %>
24
+ <% end %>
@@ -0,0 +1,13 @@
1
+ import tippy from "@libs/tippy";
2
+ import { CocoComponent } from "@js/coco";
3
+ import { navigateTo } from "@helpers/location";
4
+
5
+ export default CocoComponent("appSidebarNavMenu", () => {
6
+ return {
7
+ navigateTo(url) {
8
+ if (url !== "") {
9
+ navigateTo(url);
10
+ }
11
+ },
12
+ };
13
+ });