coveragebook_components 0.15.0 → 0.17.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/{book.css → coco.css} +1158 -1796
  3. data/app/assets/build/coco/coco.js +11206 -10950
  4. data/app/assets/build/coco/tailwind.preset.js +2760 -0
  5. data/app/assets/css/base/setup.css +0 -43
  6. data/app/assets/css/base/tippy.css +40 -43
  7. data/app/assets/css/base/utils/text.css +0 -210
  8. data/app/assets/css/coco.css +34 -0
  9. data/app/assets/css/plugins/aspect.js +27 -0
  10. data/app/assets/css/plugins/colors.js +30 -0
  11. data/app/assets/css/plugins/icons.js +17 -0
  12. data/app/assets/css/plugins/layout.js +15 -0
  13. data/app/assets/css/plugins/text.js +183 -0
  14. data/app/assets/js/base/tippy/plugins/hide_on_esc.js +3 -1
  15. data/app/assets/js/coco/coco.js +0 -9
  16. data/app/assets/js/coco.js +5 -0
  17. data/app/assets/js/helpers/index.js +10 -2
  18. data/app/components/coco/buttons/button/button.css +5 -5
  19. data/app/components/coco/buttons/button_group/button_group.css +1 -1
  20. data/app/components/coco/buttons/color_picker_button/color_picker_button.css +1 -1
  21. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.html.erb +5 -1
  22. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.rb +2 -2
  23. data/app/components/coco/buttons/menu/menu.css +1 -1
  24. data/app/components/coco/buttons/menu_items/user_profile/user_profile.css +1 -1
  25. data/app/components/coco/component.rb +1 -1
  26. data/app/components/coco/concerns/acts_as_field_with_options.rb +0 -1
  27. data/app/components/coco/fields/button_component.rb +1 -1
  28. data/app/components/coco/fields/submit_component.rb +1 -1
  29. data/app/components/coco/indicators/badge/badge.css +1 -1
  30. data/app/components/coco/layout/panel/panel.css +1 -1
  31. data/app/components/coco/modals/modal/modal.css +1 -1
  32. data/app/components/coco/modals/modal_dialog/modal_dialog.css +1 -1
  33. data/app/components/coco/utilities/placeholder/placeholder.css +1 -1
  34. data/app/helpers/coco/components_helper.rb +253 -3
  35. data/app/helpers/coco/integration_helper.rb +26 -4
  36. data/config/exports.js +0 -0
  37. data/config/locales/coco.en.yml +0 -18
  38. data/config/tailwind.config.js +1 -83
  39. data/config/tailwind.preset.js +67 -0
  40. data/config/tokens.js +25 -21
  41. data/lib/coco/engine.rb +0 -4
  42. data/lib/coco.rb +1 -1
  43. metadata +12 -68
  44. data/app/assets/build/coco/app.css +0 -9711
  45. data/app/assets/build/coco/app.js +0 -25142
  46. data/app/assets/build/coco/book.js +0 -16548
  47. data/app/assets/css/app.css +0 -3
  48. data/app/assets/css/base/utils/colors.css +0 -30
  49. data/app/assets/css/base/utils/icons.css +0 -16
  50. data/app/assets/css/base/utils/layout.css +0 -13
  51. data/app/assets/css/book.css +0 -3
  52. data/app/assets/js/app.js +0 -11
  53. data/app/assets/js/book.js +0 -9
  54. data/app/assets/js/helpers/screenshot.js +0 -42
  55. data/app/assets/js/helpers/turbo_events.js +0 -13
  56. data/app/components/coco/app/application_layout/application_layout.css +0 -122
  57. data/app/components/coco/app/application_layout/application_layout.html.erb +0 -32
  58. data/app/components/coco/app/application_layout/application_layout.js +0 -36
  59. data/app/components/coco/app/application_layout/application_layout.rb +0 -16
  60. data/app/components/coco/app/contact_callout/contact_callout.css +0 -119
  61. data/app/components/coco/app/contact_callout/contact_callout.html.erb +0 -28
  62. data/app/components/coco/app/contact_callout/contact_callout.rb +0 -21
  63. data/app/components/coco/app/faqs/faqs.css +0 -38
  64. data/app/components/coco/app/faqs/faqs.html.erb +0 -12
  65. data/app/components/coco/app/faqs/faqs.rb +0 -14
  66. data/app/components/coco/app/header/header.css +0 -47
  67. data/app/components/coco/app/header/header.html.erb +0 -30
  68. data/app/components/coco/app/header/header.js +0 -11
  69. data/app/components/coco/app/header/header.rb +0 -33
  70. data/app/components/coco/app/nav_drawer/nav_drawer.css +0 -58
  71. data/app/components/coco/app/nav_drawer/nav_drawer.html.erb +0 -16
  72. data/app/components/coco/app/nav_drawer/nav_drawer.js +0 -24
  73. data/app/components/coco/app/nav_drawer/nav_drawer.rb +0 -32
  74. data/app/components/coco/app/plan_card/plan_card.css +0 -132
  75. data/app/components/coco/app/plan_card/plan_card.html.erb +0 -36
  76. data/app/components/coco/app/plan_card/plan_card.rb +0 -66
  77. data/app/components/coco/app/plan_confirmation/plan_confirmation.css +0 -53
  78. data/app/components/coco/app/plan_confirmation/plan_confirmation.html.erb +0 -16
  79. data/app/components/coco/app/plan_confirmation/plan_confirmation.rb +0 -18
  80. data/app/components/coco/app/plan_picker/plan_picker.css +0 -128
  81. data/app/components/coco/app/plan_picker/plan_picker.html.erb +0 -69
  82. data/app/components/coco/app/plan_picker/plan_picker.js +0 -56
  83. data/app/components/coco/app/plan_picker/plan_picker.rb +0 -25
  84. data/app/components/coco/app/sidebar_nav/item/item.css +0 -121
  85. data/app/components/coco/app/sidebar_nav/item/item.html.erb +0 -9
  86. data/app/components/coco/app/sidebar_nav/item/item.js +0 -80
  87. data/app/components/coco/app/sidebar_nav/item/item.rb +0 -48
  88. data/app/components/coco/app/sidebar_nav/menu/menu.css +0 -138
  89. data/app/components/coco/app/sidebar_nav/menu/menu.html.erb +0 -24
  90. data/app/components/coco/app/sidebar_nav/menu/menu.js +0 -12
  91. data/app/components/coco/app/sidebar_nav/menu/menu.rb +0 -46
  92. data/app/components/coco/app/sidebar_nav/navbar/navbar.css +0 -75
  93. data/app/components/coco/app/sidebar_nav/navbar/navbar.html.erb +0 -29
  94. data/app/components/coco/app/sidebar_nav/navbar/navbar.js +0 -28
  95. data/app/components/coco/app/sidebar_nav/navbar/navbar.rb +0 -50
  96. data/app/components/coco/app/slide_editor/slide_editor.css +0 -149
  97. data/app/components/coco/app/slide_editor/slide_editor.html.erb +0 -302
  98. data/app/components/coco/app/slide_editor/slide_editor.js +0 -269
  99. data/app/components/coco/app/slide_editor/slide_editor.rb +0 -114
  100. data/app/components/coco/book/editable_slide/editable_slide.css +0 -332
  101. data/app/components/coco/book/editable_slide/editable_slide.html.erb +0 -48
  102. data/app/components/coco/book/editable_slide/editable_slide.rb +0 -72
  103. data/app/components/coco/book/media_slide/media_slide.css +0 -7
  104. data/app/components/coco/book/media_slide/media_slide.html.erb +0 -3
  105. data/app/components/coco/book/media_slide/media_slide.rb +0 -12
  106. data/app/helpers/coco/app_components_helper.rb +0 -39
  107. data/app/helpers/coco/book_components_helper.rb +0 -11
  108. data/app/helpers/coco/core_components_helper.rb +0 -257
@@ -1,56 +0,0 @@
1
- import { CocoComponent } from "@assets/js/coco/component";
2
-
3
- export default CocoComponent("appPlanPicker", () => {
4
- return {
5
- slider: {
6
- active: true,
7
- position: 0,
8
- items: [],
9
- itemsPerPage: 4,
10
- },
11
-
12
- options: ["slider"],
13
-
14
- init() {
15
- this.slider.items = this.$refs.sliderItems.children;
16
- this.$watch("slider.position", (position) => this.calculateOffset());
17
- this.$watch("slider.active", (active) => {
18
- if (!active) this.slider.position = 0;
19
- });
20
- },
21
-
22
- previous() {
23
- if (!this.isFirst) this.slider.position--;
24
- },
25
-
26
- next() {
27
- if (!this.isLast) this.slider.position++;
28
- },
29
-
30
- get shouldPaginate() {
31
- return (
32
- this.sliderActive && this.slider.items.length > this.slider.itemsPerPage
33
- );
34
- },
35
-
36
- calculateOffset() {
37
- const offset = this.slider.items[this.slider.position].offsetLeft;
38
- this.$refs.sliderItems.style.transform = `translateX(-${offset}px)`;
39
- },
40
-
41
- get sliderActive() {
42
- return this.$options.slider && this.slider.active;
43
- },
44
-
45
- get isFirst() {
46
- return this.slider.position == 0;
47
- },
48
-
49
- get isLast() {
50
- return (
51
- this.slider.position >=
52
- this.slider.items.length - this.slider.itemsPerPage
53
- );
54
- },
55
- };
56
- });
@@ -1,25 +0,0 @@
1
- module Coco
2
- module App
3
- class PlanPicker < Coco::Component
4
- include Concerns::AcceptsOptions
5
-
6
- accepts_option :slider, from: [true, false], default: false
7
-
8
- renders_one :currency_selector, "Coco::OptionBar"
9
- renders_one :interval_selector, "Coco::OptionBar"
10
- renders_one :view_toggle, ->(*args, **kwargs, &block) do
11
- coco_button(*args, icon: :award, theme: :secondary, size: :md, **kwargs, &block)
12
- end
13
-
14
- renders_many :plans, ->(**kwargs, &block) do
15
- if kwargs.any?
16
- Coco::App::PlanCard.new(**kwargs)
17
- else
18
- block.call
19
- end
20
- end
21
-
22
- def slider? = get_option_value(:slider) == true
23
- end
24
- end
25
- end
@@ -1,121 +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 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-xl) {
29
- @apply app-sidebar-nav-vertical-narrow-item;
30
- }
31
-
32
- @media screen(xl) {
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 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 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 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
- }
@@ -1,9 +0,0 @@
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) if menu? %>
9
- <% end %>
@@ -1,80 +0,0 @@
1
- import tippy from "@assets/js/base/tippy";
2
- import { CocoComponent } from "@assets/js/coco/component";
3
-
4
- export default CocoComponent("appSidebarNavItem", () => {
5
- return {
6
- menu: null,
7
- menuObserver: null,
8
- active: false,
9
-
10
- init() {
11
- if (this.menuTemplate) {
12
- this.initMenu();
13
- this.observeMenuForChanges();
14
- }
15
-
16
- this.$watch("mobileLayout", () => this.onOrientationChange());
17
- },
18
-
19
- initMenu() {
20
- this.menu = tippy(this.$root, {
21
- theme: "coco-naked-dropdown",
22
- placement: this.menuPlacement,
23
- arrow: false,
24
- offset: [0, 0],
25
- trigger: "click",
26
- interactive: true,
27
- maxWidth: null,
28
- onShow: () => {
29
- this.active = true;
30
- },
31
- onHide: () => {
32
- this.active = false;
33
- },
34
- content: () => this.menuTemplate.innerHTML,
35
- });
36
- },
37
-
38
- observeMenuForChanges() {
39
- this.menuObserver = new MutationObserver((mutations) => {
40
- this.$nextTick(() => this.menu.setContent(this.menuTemplate.innerHTML));
41
- });
42
-
43
- this.menuObserver.observe(this.$root, {
44
- subtree: true,
45
- childList: true,
46
- });
47
- },
48
-
49
- onOrientationChange() {
50
- if (this.menu) {
51
- this.menu.setProps({
52
- placement: this.menuPlacement,
53
- });
54
- }
55
- },
56
-
57
- destroy() {
58
- if (this.menuObserver) {
59
- this.menuObserver.disconnect();
60
- }
61
- },
62
-
63
- root: {
64
- ["@turbo:load.document"]() {
65
- if (this.menu) {
66
- this.menu.hide();
67
- }
68
- },
69
- ":class": "{active}",
70
- },
71
-
72
- get menuTemplate() {
73
- return this.$root.querySelector("template");
74
- },
75
-
76
- get menuPlacement() {
77
- return this.mobileLayout ? "top" : "right-start";
78
- },
79
- };
80
- });
@@ -1,48 +0,0 @@
1
- module Coco
2
- module App
3
- module SidebarNav
4
- class Item < Coco::Component
5
- include Concerns::Extendable
6
- include Concerns::AcceptsOptions
7
-
8
- tag_attr :href
9
- component_name :app_sidebar_nav_item
10
-
11
- accepts_option :active, from: [true, false]
12
- accepts_option :emphasise, from: [true, false]
13
-
14
- renders_one :icon
15
- renders_one :menu
16
-
17
- before_render do
18
- if @icon && !icon?
19
- with_icon { coco_icon(@icon, size: :full) }
20
- end
21
-
22
- if link? && get_option_value(:active).nil?
23
- set_option_value(:active, helpers.current_page?(tag_attr(:href)))
24
- end
25
- end
26
-
27
- attr_reader :label
28
-
29
- def initialize(label:, icon: nil, **)
30
- @label = label
31
- @icon = icon
32
- end
33
-
34
- def link?
35
- tag_attr?(:href) && !menu?
36
- end
37
-
38
- def item_tag
39
- link? ? :a : :button
40
- end
41
-
42
- def menu_id
43
- "#{tag_attr(:id)}-menu" if tag_attr?(:id)
44
- end
45
- end
46
- end
47
- end
48
- end
@@ -1,138 +0,0 @@
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 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 heading-6;
51
- grid-area: title;
52
- }
53
-
54
- div {
55
- @apply 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-xl) {
65
- @apply app-sidebar-nav-menu-small;
66
- }
67
-
68
- @media screen(xl) {
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
- }
@@ -1,24 +0,0 @@
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 %>
@@ -1,12 +0,0 @@
1
- import { CocoComponent } from "@assets/js/coco/component";
2
- import { navigateTo } from "@helpers/location";
3
-
4
- export default CocoComponent("appSidebarNavMenu", () => {
5
- return {
6
- navigateTo(url) {
7
- if (url !== "") {
8
- navigateTo(url);
9
- }
10
- },
11
- };
12
- });
@@ -1,46 +0,0 @@
1
- module Coco
2
- module App
3
- module SidebarNav
4
- class Menu < Coco::Component
5
- component_name :app_sidebar_nav_menu
6
-
7
- renders_many :items, types: {
8
- link: ->(label, href, qualifier: nil, **kwargs, &block) do
9
- if items.size < max_links
10
- coco_link(href, **kwargs, theme: nil, underline: false) do
11
- tag.span(label, class: "menu-item-label") +
12
- tag.span(qualifier, class: "menu-item-qualifier")
13
- end
14
- else
15
- overflow_items << ["#{label}#{qualifier.present? ? " (#{qualifier})" : ""}", href]
16
- nil
17
- end
18
- end,
19
- block_link: ->(href, **kwargs, &block) do
20
- coco_link(href, **kwargs, theme: nil, underline: false, &block)
21
- end
22
- }
23
-
24
- renders_one :action, ->(*args, **kwargs, &block) do
25
- coco_button(*args, theme: :primary, **kwargs, size: :sm, fit: :full, &block)
26
- end
27
-
28
- attr_reader :max_links, :overflow_items, :prompt
29
-
30
- def initialize(max_links: 6, prompt: "More links...", **kwargs)
31
- @max_links = max_links
32
- @prompt = prompt
33
- @overflow_items = []
34
- end
35
-
36
- def with_link(...)
37
- with_item_link(...)
38
- end
39
-
40
- def with_block_link(...)
41
- with_item_block_link(...)
42
- end
43
- end
44
- end
45
- end
46
- end
@@ -1,75 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-sidebar-nav"] {
3
- @apply bg-background-dark-2 antialiased;
4
-
5
- @media screen(max-sm) {
6
- @apply app-sidebar-nav-horizontal;
7
- }
8
-
9
- @media screen(sm) and screen(max-xl) {
10
- @apply app-sidebar-nav-vertical-narrow;
11
- }
12
-
13
- @media screen(xl) {
14
- @apply app-sidebar-nav-vertical-wide;
15
- }
16
-
17
- @media screen(letterbox) {
18
- @apply app-sidebar-nav-vertical-narrow;
19
- }
20
- }
21
- }
22
-
23
- @layer utilities {
24
- .app-sidebar-nav-horizontal {
25
- @apply w-full h-14 grid;
26
- grid-auto-flow: column;
27
- grid-auto-columns: 1fr;
28
-
29
- .nav-item {
30
- @apply flex items-stretch;
31
-
32
- &[data-show-on-mobile="false"] {
33
- @apply hidden;
34
- }
35
- }
36
-
37
- .nav-item-action {
38
- .nav-item-label {
39
- @apply hidden;
40
- }
41
- }
42
- }
43
-
44
- .app-sidebar-nav-vertical {
45
- @apply h-full;
46
-
47
- .nav-item-action {
48
- .nav-item-label {
49
- @apply text-content-primary-inverse-vivid;
50
- }
51
- }
52
- }
53
-
54
- .app-sidebar-nav-vertical-narrow {
55
- @apply app-sidebar-nav-vertical;
56
- @apply w-16;
57
-
58
- .nav-item-action {
59
- [data-component="app-sidebar-nav-item"] {
60
- @apply pb-2.5;
61
- }
62
- }
63
- }
64
-
65
- .app-sidebar-nav-vertical-wide {
66
- @apply app-sidebar-nav-vertical;
67
- @apply w-24;
68
-
69
- .nav-item-action {
70
- [data-component="app-sidebar-nav-item"] {
71
- @apply pb-3;
72
- }
73
- }
74
- }
75
- }
@@ -1,29 +0,0 @@
1
- <%= render component_tag(x: {data: "appSidebarNav"}) do %>
2
- <% if actions? %>
3
- <div class="nav-item nav-item-action">
4
- <%= render Coco::App::SidebarNav::Item.new(label: "Add") do |item| %>
5
- <% item.with_icon do %>
6
- <span class="nav-item-action-button">
7
- <%= coco_icon :plus, size: :full %>
8
- </span>
9
- <% end %>
10
-
11
- <% item.with_menu do %>
12
- <%= coco_sidebar_nav_menu(class: "nav-card-menu") do |menu| %>
13
- <% actions_data.each do |action| %>
14
- <% menu.with_block_link(action[:href], **action.except(:href, :icon, :label, :description)) do %>
15
- <div class="card">
16
- <%= coco_icon(action[:icon], size: :md) %>
17
- <h4><%= action[:label] %></h4>
18
- <div><%= raw action[:description] %></div>
19
- </div>
20
- <% end %>
21
- <% end %>
22
- <% end %>
23
- <% end %>
24
- <% end %>
25
- </div>
26
- <% end %>
27
-
28
- <%= safe_join(items) %>
29
- <% end %>
@@ -1,28 +0,0 @@
1
- import tokens from "@config/tokens.js";
2
- import { CocoComponent } from "@assets/js/coco/component";
3
-
4
- const mobileMaxWidth = parseInt(tokens.screens.sm, 10);
5
-
6
- export default CocoComponent("appSidebarNav", () => {
7
- return {
8
- sizeObserver: null,
9
- mobileLayout: true,
10
-
11
- init() {
12
- this.sizeObserver = new ResizeObserver(
13
- Alpine.throttle((entries) => {
14
- this.$nextTick(() => {
15
- const bodyWidth = entries[0].contentRect.width;
16
- this.mobileLayout = bodyWidth < mobileMaxWidth;
17
- });
18
- }, 20)
19
- );
20
-
21
- this.sizeObserver.observe(document.documentElement);
22
- },
23
-
24
- destroy() {
25
- this.sizeObserver && this.sizeObserver.disconnect();
26
- },
27
- };
28
- });