coveragebook_components 0.8.2 → 0.8.4

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 +445 -308
  3. data/app/assets/build/coco/app.js +631 -397
  4. data/app/assets/build/coco/book.css +18 -4
  5. data/app/assets/build/coco/book.js +408 -224
  6. data/app/assets/build/coco/icons/armchair.svg +1 -1
  7. data/app/assets/build/coco/icons/folder-archive.svg +1 -1
  8. data/app/assets/build/coco/icons/folder-check.svg +1 -1
  9. data/app/assets/build/coco/icons/folder-clock.svg +1 -1
  10. data/app/assets/build/coco/icons/folder-closed.svg +1 -1
  11. data/app/assets/build/coco/icons/folder-cog.svg +1 -1
  12. data/app/assets/build/coco/icons/folder-down.svg +1 -1
  13. data/app/assets/build/coco/icons/folder-edit.svg +1 -1
  14. data/app/assets/build/coco/icons/folder-git.svg +1 -1
  15. data/app/assets/build/coco/icons/folder-heart.svg +1 -1
  16. data/app/assets/build/coco/icons/folder-input.svg +1 -1
  17. data/app/assets/build/coco/icons/folder-key.svg +1 -1
  18. data/app/assets/build/coco/icons/folder-lock.svg +1 -1
  19. data/app/assets/build/coco/icons/folder-minus.svg +1 -1
  20. data/app/assets/build/coco/icons/folder-open.svg +1 -1
  21. data/app/assets/build/coco/icons/folder-plus.svg +1 -1
  22. data/app/assets/build/coco/icons/folder-search-2.svg +1 -1
  23. data/app/assets/build/coco/icons/folder-search.svg +1 -1
  24. data/app/assets/build/coco/icons/folder-tree.svg +1 -1
  25. data/app/assets/build/coco/icons/folder-up.svg +1 -1
  26. data/app/assets/build/coco/icons/folder-x.svg +1 -1
  27. data/app/assets/build/coco/icons/folder.svg +1 -1
  28. data/app/assets/build/coco/icons/folders.svg +1 -1
  29. data/app/assets/build/coco/icons/git-commit-vertical.svg +1 -0
  30. data/app/assets/build/coco/icons/git-compare-arrows.svg +1 -0
  31. data/app/assets/build/coco/icons/git-fork.svg +1 -1
  32. data/app/assets/build/coco/icons/git-graph.svg +1 -0
  33. data/app/assets/build/coco/icons/git-pull-request-arrow.svg +1 -0
  34. data/app/assets/build/coco/icons/git-pull-request-closed.svg +1 -1
  35. data/app/assets/build/coco/icons/git-pull-request-create-arrow.svg +1 -0
  36. data/app/assets/build/coco/icons/git-pull-request-create.svg +1 -0
  37. data/app/assets/build/coco/icons/power-circle.svg +1 -0
  38. data/app/assets/build/coco/icons/power-square.svg +1 -0
  39. data/app/assets/build/coco/icons/power.svg +1 -1
  40. data/app/assets/js/helpers/location.js +1 -1
  41. data/app/assets/js/libs/alpine/index.js +0 -2
  42. data/app/components/coco/app/blocks/sidebar_nav/item/item.css +121 -0
  43. data/app/components/coco/app/blocks/sidebar_nav/item/item.html.erb +9 -0
  44. data/app/components/coco/app/blocks/sidebar_nav/item/item.js +80 -0
  45. data/app/components/coco/app/blocks/sidebar_nav/item/item.rb +50 -0
  46. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.css +138 -0
  47. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.html.erb +24 -0
  48. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.js +12 -0
  49. data/app/components/coco/app/blocks/sidebar_nav/menu/menu.rb +48 -0
  50. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css +75 -0
  51. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb +29 -0
  52. data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb +50 -0
  53. data/app/components/coco/base/icon/icon.rb +1 -0
  54. data/app/components/coco/component.rb +2 -2
  55. data/app/helpers/coco/app_helper.rb +5 -1
  56. data/app/helpers/coco/book_helper.rb +4 -4
  57. data/app/helpers/coco/component_helper.rb +2 -2
  58. data/app/helpers/coco/integration_helper.rb +4 -4
  59. data/config/icons.json +9 -1
  60. data/config/tokens.cjs +6 -0
  61. data/lib/coco/options/group.rb +9 -9
  62. data/lib/coco/test_helpers.rb +2 -2
  63. data/lib/coco.rb +1 -1
  64. metadata +23 -11
  65. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css +0 -110
  66. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb +0 -42
  67. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb +0 -28
  68. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css +0 -153
  69. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb +0 -45
  70. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js +0 -44
  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,153 +0,0 @@
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 flex-none cursor-pointer;
4
- @apply flex items-center justify-center px-4 w-full flex-col hover:text-content-light-1;
5
-
6
- .nav-item-icon {
7
- @apply block mx-auto transition-colors;
8
- @apply w-6 h-6;
9
- }
10
-
11
- .nav-item-label {
12
- @apply block font-semibold text-label-xxs transition-colors mt-0.5 cursor-pointer;
13
- }
14
-
15
- &.emphasised {
16
- .nav-item-icon {
17
- @apply sm:text-content-primary-inverse-vivid;
18
- }
19
- }
20
-
21
- &.active {
22
- @apply text-content-light-1;
23
- }
24
-
25
- &:hover {
26
- .nav-item-icon {
27
- @apply text-content-light-1;
28
- }
29
-
30
- &.emphasised .nav-item-icon {
31
- @apply sm:text-content-primary-inverse-vivid;
32
- }
33
-
34
- .nav-item-label {
35
- @apply text-content-light-1;
36
- }
37
- }
38
-
39
- @media screen(sm) {
40
- @apply sidebar-nav-item-vertical-condensed;
41
- }
42
-
43
- @media screen(lg) {
44
- @apply sidebar-nav-item-vertical;
45
- }
46
-
47
- @media screen(letterbox) {
48
- @apply sidebar-nav-item-vertical-condensed;
49
- }
50
- }
51
-
52
- .sidebar-nav-menu {
53
- @apply bg-content-dark-2 shadow-md sm:rounded-r-md overflow-hidden divide-y divide-content-dark-muted/20;
54
-
55
- [data-placement="bottom"] & {
56
- @apply rounded-b-md;
57
- }
58
-
59
- [data-placement="top"] & {
60
- @apply rounded-t-md;
61
- }
62
-
63
- .sidebar-nav-menu-select {
64
- @apply focus:ring-0 bg-transparent hover:bg-content-dark-1 active:bg-content-dark-1 border-0 text-content-light-2 w-full font-semibold;
65
- }
66
-
67
- .sidebar-nav-menu-item {
68
- @apply flex w-full items-center p-3 text-center no-underline bg-content-dark-2 text-content-dark-muted transition;
69
- }
70
-
71
- .coco-link.sidebar-nav-menu-item {
72
- @apply hover:bg-content-dark-1;
73
- }
74
-
75
- .sidebar-nav-menu-item-text {
76
- @apply truncate min-w-0 font-semibold text-content-light-1 transition-colors;
77
- }
78
-
79
- .sidebar-nav-menu-item-qualifier {
80
- @apply ml-auto text-label-sm flex-none pl-4;
81
- }
82
-
83
- @apply sidebar-nav-menu-large;
84
-
85
- @media screen(sm) {
86
- @apply sidebar-nav-menu-small;
87
- }
88
-
89
- @media screen(lg) {
90
- @apply sidebar-nav-menu-large;
91
- }
92
-
93
- @media screen(letterbox) {
94
- @apply sidebar-nav-menu-small;
95
- }
96
- }
97
- }
98
-
99
- @layer utilities {
100
- .sidebar-nav-item-vertical-condensed {
101
- @apply block px-2 py-4 hover:bg-content-dark-1;
102
-
103
- .nav-item-icon {
104
- @apply w-7 h-7;
105
- }
106
-
107
- .nav-item-label {
108
- @apply mt-1 text-label-xxs;
109
- }
110
-
111
- &.active {
112
- @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
113
- }
114
- }
115
-
116
- .sidebar-nav-item-vertical {
117
- @apply py-5 hover:bg-content-dark-1;
118
-
119
- .nav-item-icon {
120
- @apply w-8 h-8;
121
- }
122
-
123
- .nav-item-label {
124
- @apply text-label-xs;
125
- }
126
-
127
- &.active {
128
- @apply bg-background-dark-3 hover:bg-background-dark-3 text-content-light-1;
129
- }
130
- }
131
-
132
- .sidebar-nav-menu-small {
133
- .sidebar-nav-menu-select {
134
- @apply text-sm;
135
- }
136
-
137
- .sidebar-nav-menu-item {
138
- @apply text-sm;
139
- width: 240px;
140
- }
141
- }
142
-
143
- .sidebar-nav-menu-large {
144
- .sidebar-nav-menu-select {
145
- @apply text-base;
146
- }
147
-
148
- .sidebar-nav-menu-item {
149
- @apply text-base;
150
- width: 280px;
151
- }
152
- }
153
- }
@@ -1,45 +0,0 @@
1
- <%= render component_tag(
2
- x: {
3
- data: "appSidebarNavItem",
4
- "on:click": "if (menu) $event.preventDefault()"
5
- },
6
- class: {
7
- active: active?,
8
- emphasised: emphasise?
9
- }) do %>
10
- <%= icon %>
11
- <label class="nav-item-label">
12
- <%= label %>
13
- </label>
14
- <% if menu? || menu_items? %>
15
- <%= tag.template id: menu_template_id, "x-ref": "menu" do %>
16
- <%= tag.div id: menu_id,
17
- class: "sidebar-nav-menu",
18
- "x-cloak": "" do %>
19
- <% if menu? %>
20
- <%= menu %>
21
- <% else %>
22
- <%= safe_join(menu_items) %>
23
-
24
- <% if dropdown_menu_items.any? %>
25
- <select
26
- x-data
27
- class="sidebar-nav-menu-select"
28
- @change="navigateTo($el.value)">
29
- <% if menu_select_placeholder.present? %>
30
- <option disabled="disabled" selected="selected"><%= menu_select_placeholder %></option>
31
- <% end %>
32
- <% dropdown_menu_items.each do |item| %>
33
- <option value="<%= item[:href] %>">
34
- <%= item[:label] %>&nbsp;&nbsp;<%= "(#{item[:qualifier]})" if item[:qualifier].present? %>
35
- </option>
36
- <% end %>
37
- </select>
38
- <% end %>
39
-
40
- <%= menu_action %>
41
- <% end %>
42
- <% end %>
43
- <% end %>
44
- <% end %>
45
- <% end %>
@@ -1,44 +0,0 @@
1
- import tippy from "@libs/tippy";
2
- import { CocoComponent } from "@js/coco";
3
- import { navigateTo } from "@helpers/location";
4
-
5
- export default CocoComponent("appSidebarNavItem", () => {
6
- return {
7
- menu: null,
8
-
9
- init() {
10
- this.navigateTo = navigateTo;
11
-
12
- if (this.$refs.menu) {
13
- this.menu = tippy(this.$el, {
14
- theme: "coco-naked-dropdown",
15
- placement: this.menuPlacement,
16
- arrow: false,
17
- offset: [0, 0],
18
- trigger: "click",
19
- interactive: true,
20
- maxWidth: null,
21
- content: () => {
22
- return this.$refs.menu.innerHTML;
23
- },
24
- });
25
- }
26
-
27
- this.$watch("mobileLayout", () => {
28
- this.onOrientationChange();
29
- });
30
- },
31
-
32
- onOrientationChange() {
33
- if (this.menu) {
34
- this.menu.setProps({
35
- placement: this.menuPlacement,
36
- });
37
- }
38
- },
39
-
40
- get menuPlacement() {
41
- return this.mobileLayout ? "top" : "right-start";
42
- },
43
- };
44
- });
@@ -1,108 +0,0 @@
1
- module Coco
2
- module App
3
- module Blocks
4
- class SidebarNavItem < Coco::Component
5
- tag_name :a
6
- tag_attr :href
7
-
8
- renders_one :icon
9
- renders_one :menu
10
-
11
- renders_many :menu_items, ->(label, href, **kwargs) do
12
- data = {label: label, href: href, **kwargs}
13
- if menu_items.size < max_menu_items
14
- SidebarNavMenuItem.new(**data)
15
- else
16
- dropdown_menu_items << data
17
- nil
18
- end
19
- end
20
-
21
- renders_one :menu_action, ->(*args, **kwargs, &block) do
22
- tag.div class: "sidebar-nav-menu-item" do
23
- coco_button(*args, theme: :primary, size: :sm, fit: :full, **kwargs, &block)
24
- end
25
- end
26
-
27
- before_render do
28
- set_tag_attr(:id, item_id)
29
- if @icon && !icon?
30
- with_icon do
31
- tag.span(class: "nav-item-icon") do
32
- coco_icon(@icon, size: :full)
33
- end
34
- end
35
- end
36
- end
37
-
38
- attr_reader :label, :tooltip, :dropdown_menu_items, :max_menu_items, :item_id
39
-
40
- def initialize(label:, id: nil, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
41
- @item_id = id
42
- @label = label
43
- @icon = icon
44
- @emphasise = emphasise
45
- @tooltip = tooltip
46
- @active = active
47
- @max_menu_items = max_menu_items
48
- @menu_select_placeholder = menu_select_placeholder
49
- @dropdown_menu_items = []
50
- end
51
-
52
- def tooltip?
53
- tooltip.present?
54
- end
55
-
56
- def active?
57
- @active == true
58
- end
59
-
60
- def emphasise?
61
- @emphasise == true
62
- end
63
-
64
- def menu_select_placeholder
65
- @menu_select_placeholder || "More items..."
66
- end
67
-
68
- def menu_id
69
- "#{item_id}-menu" if item_id.present?
70
- end
71
-
72
- def menu_template_id
73
- "#{menu_id}-template" if menu_id.present?
74
- end
75
-
76
- class SidebarNavMenuItem < Coco::Component
77
- attr_reader :icon, :href, :modal
78
-
79
- def initialize(label:, href:, icon: nil, modal: nil, qualifier: nil, **)
80
- @label = label
81
- @href = href
82
- @icon = icon
83
- @modal = modal
84
- @qualifier = qualifier
85
- end
86
-
87
- def call
88
- coco_link(href, theme: nil, modal: modal, class: "sidebar-nav-menu-item") do
89
- label
90
- end
91
- end
92
-
93
- def label
94
- tag.span(@label, class: "sidebar-nav-menu-item-text") + qualifier
95
- end
96
-
97
- def qualifier
98
- if @icon || @qualifier
99
- tag.span(class: "sidebar-nav-menu-item-qualifier") do
100
- @icon ? coco_icon(icon, size: :sm) : @qualifier
101
- end
102
- end
103
- end
104
- end
105
- end
106
- end
107
- end
108
- end