coveragebook_components 0.17.7 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/build/coco/coco.css +58 -0
- data/app/assets/build/coco/coco.js +108 -2
- data/app/components/coco/messaging/popover/popover.css +37 -0
- data/app/components/coco/messaging/popover/popover.html.erb +10 -0
- data/app/components/coco/messaging/popover/popover.js +103 -0
- data/app/components/coco/messaging/popover/popover.rb +37 -0
- data/app/components/coco/messaging/popover/popover_content.js +24 -0
- data/app/helpers/coco/components_helper.rb +4 -0
- data/lib/coco.rb +1 -1
- metadata +7 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a9024fd2b1372e1c28286a54173750921c33b6f9cee10cce9e2ca5d1fd982d9e
|
4
|
+
data.tar.gz: f6e89d2b38167d6198b967af281344146e3f131964457e9c2dff2ea11f2e2737
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 131b0f18bf5b4462ba4be9c5cfc55f76aaceeac1b4c671f5144589aee73ae79742bbe01f9b0b8f2846fd1b89fc10b2fb07a453061d95f3a606e64ee9ff5c9546
|
7
|
+
data.tar.gz: 16115cf26b19813e8e44639956d10de3ac45ec39fea45bbd008dbc53aab8a86cbb3eea1ddd5955f9d06f10d9e15af348463d7b962ef758548be873e6455cc32c
|
@@ -4161,6 +4161,11 @@ select{
|
|
4161
4161
|
padding-bottom: 1rem
|
4162
4162
|
}
|
4163
4163
|
|
4164
|
+
[data-coco][data-component="popover"] {
|
4165
|
+
display: none;
|
4166
|
+
pointer-events: none;
|
4167
|
+
}
|
4168
|
+
|
4164
4169
|
[data-coco][data-component="snackbar"]{
|
4165
4170
|
width: 100%;
|
4166
4171
|
overflow: hidden;
|
@@ -6963,3 +6968,56 @@ select{
|
|
6963
6968
|
width: -moz-min-content;
|
6964
6969
|
width: min-content;
|
6965
6970
|
}
|
6971
|
+
|
6972
|
+
/* Tippy popover theme */
|
6973
|
+
|
6974
|
+
.tippy-box[data-theme^="coco-popover-"]{
|
6975
|
+
border-radius: 0.5rem;
|
6976
|
+
border-style: none;
|
6977
|
+
padding: 1.5rem;
|
6978
|
+
font-size: 16px;
|
6979
|
+
line-height: 24px;
|
6980
|
+
font-weight: 400;
|
6981
|
+
--tw-text-opacity: 1;
|
6982
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
6983
|
+
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
6984
|
+
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
6985
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
6986
|
+
width: -moz-fit-content;
|
6987
|
+
width: fit-content
|
6988
|
+
}
|
6989
|
+
|
6990
|
+
.tippy-box[data-theme^="coco-popover-"] .tippy-svg-arrow > svg:first-child{
|
6991
|
+
display: none
|
6992
|
+
}
|
6993
|
+
|
6994
|
+
.tippy-box[data-theme~="coco-popover-neutral"]{
|
6995
|
+
border-width: 1px;
|
6996
|
+
border-style: solid;
|
6997
|
+
--tw-bg-opacity: 1;
|
6998
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
6999
|
+
--tw-text-opacity: 1;
|
7000
|
+
color: rgb(17 24 39 / var(--tw-text-opacity));
|
7001
|
+
background-blend-mode: hard-light;
|
7002
|
+
border-color: rgba(0, 12, 39, 0.1)
|
7003
|
+
}
|
7004
|
+
|
7005
|
+
.tippy-box[data-theme~="coco-popover-neutral"] .tippy-svg-arrow > svg:first-child{
|
7006
|
+
display: block;
|
7007
|
+
fill: #D1D5DB
|
7008
|
+
}
|
7009
|
+
|
7010
|
+
.tippy-box[data-theme~="coco-popover-neutral"] .tippy-svg-arrow > svg:last-child{
|
7011
|
+
fill: #FFFFFF
|
7012
|
+
}
|
7013
|
+
|
7014
|
+
.tippy-box[data-theme~="coco-popover-info"]{
|
7015
|
+
--tw-bg-opacity: 1;
|
7016
|
+
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
|
7017
|
+
-webkit-font-smoothing: antialiased;
|
7018
|
+
-moz-osx-font-smoothing: grayscale
|
7019
|
+
}
|
7020
|
+
|
7021
|
+
.tippy-box[data-theme~="coco-popover-info"] .tippy-svg-arrow > svg:last-child{
|
7022
|
+
fill: #0284C7
|
7023
|
+
}
|
@@ -15441,7 +15441,7 @@ var alpine_default = import_alpinejs.default;
|
|
15441
15441
|
// ../../../package.json
|
15442
15442
|
var package_default = {
|
15443
15443
|
name: "coveragebook-components",
|
15444
|
-
version: "0.
|
15444
|
+
version: "0.18.0",
|
15445
15445
|
repository: "git@github.com:coveragebook/coco.git",
|
15446
15446
|
license: "NO LICENSE",
|
15447
15447
|
author: "Mark Perkins <mark@coveragebook.com>",
|
@@ -16195,6 +16195,112 @@ var notice_default = CocoComponent("notice", () => {
|
|
16195
16195
|
return {};
|
16196
16196
|
});
|
16197
16197
|
|
16198
|
+
// ../../components/coco/messaging/popover/popover.js
|
16199
|
+
var popover_exports = {};
|
16200
|
+
__export(popover_exports, {
|
16201
|
+
default: () => popover_default
|
16202
|
+
});
|
16203
|
+
var popover_default = CocoComponent("popover", ({ target, trigger, options = {} }) => {
|
16204
|
+
return {
|
16205
|
+
targetEl: null,
|
16206
|
+
open: false,
|
16207
|
+
init() {
|
16208
|
+
this.targetEl = target ? document.querySelector(target) : this.$el.parentElement;
|
16209
|
+
if (this.targetEl) {
|
16210
|
+
this.targetEl.coco_popover = this;
|
16211
|
+
if (trigger == "click") {
|
16212
|
+
this.targetEl.style.cursor = "pointer";
|
16213
|
+
}
|
16214
|
+
this.$nextTick(() => {
|
16215
|
+
const content = this.$el.firstElementChild;
|
16216
|
+
content.__popover_target = this.targetEl;
|
16217
|
+
tippy_default(this.targetEl, {
|
16218
|
+
trigger,
|
16219
|
+
theme: this.theme,
|
16220
|
+
maxWidth: "none",
|
16221
|
+
interactive: true,
|
16222
|
+
allowHTML: true,
|
16223
|
+
appendTo: () => document.body,
|
16224
|
+
content: () => content,
|
16225
|
+
onShown: () => {
|
16226
|
+
this.open = true;
|
16227
|
+
},
|
16228
|
+
onHidden: () => {
|
16229
|
+
this.open = false;
|
16230
|
+
},
|
16231
|
+
...options
|
16232
|
+
});
|
16233
|
+
});
|
16234
|
+
} else {
|
16235
|
+
console.error(`Popover target '${target} not found.'`);
|
16236
|
+
}
|
16237
|
+
},
|
16238
|
+
show(event) {
|
16239
|
+
if (!event || this.eventTarget(event) === this.targetEl && this.popoverInstance) {
|
16240
|
+
this.popoverInstance.show();
|
16241
|
+
}
|
16242
|
+
},
|
16243
|
+
hide(event) {
|
16244
|
+
if (!event || this.eventTarget(event) === this.targetEl && this.popoverInstance) {
|
16245
|
+
this.popoverInstance.hide();
|
16246
|
+
}
|
16247
|
+
},
|
16248
|
+
toggle(event) {
|
16249
|
+
if (!event || this.eventTarget(event) === this.targetEl && this.popoverInstance) {
|
16250
|
+
this.open ? this.popoverInstance.hide() : this.popoverInstance.show();
|
16251
|
+
}
|
16252
|
+
},
|
16253
|
+
destroy() {
|
16254
|
+
if (this.popoverInstance) {
|
16255
|
+
this.popoverInstance.destroy();
|
16256
|
+
}
|
16257
|
+
},
|
16258
|
+
eventTarget(event) {
|
16259
|
+
if (event.detail.target) {
|
16260
|
+
if (typeof event.detail.target === "string") {
|
16261
|
+
return document.querySelector(event.detail.target);
|
16262
|
+
} else {
|
16263
|
+
return event.detail.target;
|
16264
|
+
}
|
16265
|
+
} else {
|
16266
|
+
return event.target;
|
16267
|
+
}
|
16268
|
+
},
|
16269
|
+
get theme() {
|
16270
|
+
return `coco-popover-${this.$root.getAttribute("data-theme")}`;
|
16271
|
+
},
|
16272
|
+
get popoverInstance() {
|
16273
|
+
if (this.targetEl) {
|
16274
|
+
return this.targetEl._tippy;
|
16275
|
+
}
|
16276
|
+
}
|
16277
|
+
};
|
16278
|
+
});
|
16279
|
+
|
16280
|
+
// ../../components/coco/messaging/popover/popover_content.js
|
16281
|
+
var popover_content_exports = {};
|
16282
|
+
__export(popover_content_exports, {
|
16283
|
+
default: () => popover_content_default
|
16284
|
+
});
|
16285
|
+
var popover_content_default = CocoComponent("popoverContent", () => {
|
16286
|
+
return {
|
16287
|
+
init() {
|
16288
|
+
this.hide = this.hide.bind(this);
|
16289
|
+
this.show = this.show.bind(this);
|
16290
|
+
this.toggle = this.toggle.bind(this);
|
16291
|
+
},
|
16292
|
+
hide() {
|
16293
|
+
this.$dispatch("popover:hide", { target: this.$root.__popover_target });
|
16294
|
+
},
|
16295
|
+
show() {
|
16296
|
+
this.$dispatch("popover:show", { target: this.$root.__popover_target });
|
16297
|
+
},
|
16298
|
+
toggle() {
|
16299
|
+
this.$dispatch("popover:toggle", { target: this.$root.__popover_target });
|
16300
|
+
}
|
16301
|
+
};
|
16302
|
+
});
|
16303
|
+
|
16198
16304
|
// ../../components/coco/messaging/snackbar/snackbar.js
|
16199
16305
|
var snackbar_exports = {};
|
16200
16306
|
__export(snackbar_exports, {
|
@@ -16401,7 +16507,7 @@ var tooltip_default2 = CocoComponent("tooltip", () => {
|
|
16401
16507
|
});
|
16402
16508
|
|
16403
16509
|
// import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@components/messaging/**/*.js
|
16404
|
-
var modules7 = [alert_exports, notice_exports, snackbar_exports, system_banner_exports, toast_exports, tooltip_exports];
|
16510
|
+
var modules7 = [alert_exports, notice_exports, popover_exports, popover_content_exports, snackbar_exports, system_banner_exports, toast_exports, tooltip_exports];
|
16405
16511
|
var __default7 = modules7;
|
16406
16512
|
|
16407
16513
|
// ../../components/coco/modals/modal/modal.js
|
@@ -0,0 +1,37 @@
|
|
1
|
+
@layer components {
|
2
|
+
[data-coco][data-component="popover"] {
|
3
|
+
display: none;
|
4
|
+
pointer-events: none;
|
5
|
+
}
|
6
|
+
}
|
7
|
+
|
8
|
+
/* Tippy popover theme */
|
9
|
+
.tippy-box[data-theme^="coco-popover-"] {
|
10
|
+
@apply text-content-light-1 text-para-md border-none shadow-xl rounded-lg p-6 font-normal;
|
11
|
+
width: fit-content;
|
12
|
+
|
13
|
+
.tippy-svg-arrow > svg:first-child {
|
14
|
+
@apply hidden;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
.tippy-box[data-theme~="coco-popover-neutral"] {
|
19
|
+
@apply bg-background-light-1 text-content-dark-1 border border-solid border-gray-blend-100;
|
20
|
+
|
21
|
+
.tippy-svg-arrow > svg:first-child {
|
22
|
+
@apply block;
|
23
|
+
@apply fill-coco-gray-300;
|
24
|
+
}
|
25
|
+
|
26
|
+
.tippy-svg-arrow > svg:last-child {
|
27
|
+
@apply fill-background-light-1;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
.tippy-box[data-theme~="coco-popover-info"] {
|
32
|
+
@apply bg-background-info antialiased;
|
33
|
+
|
34
|
+
.tippy-svg-arrow > svg:last-child {
|
35
|
+
@apply fill-background-info;
|
36
|
+
}
|
37
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%= render component_tag(x: {
|
2
|
+
data: "popover({target: #{target.to_json}, trigger: #{trigger.to_json}, options: #{options.to_json}})",
|
3
|
+
"@popover:show.document": "show",
|
4
|
+
"@popover:hide.document": "hide",
|
5
|
+
"@popover:toggle.document": "toggle"
|
6
|
+
}) do %>
|
7
|
+
<div x-data="popoverContent">
|
8
|
+
<%= content %>
|
9
|
+
</div>
|
10
|
+
<% end %>
|
@@ -0,0 +1,103 @@
|
|
1
|
+
import { CocoComponent } from "@assets/js/coco/component";
|
2
|
+
import tippy from "@js/base/tippy";
|
3
|
+
import { getData } from "@helpers/alpine";
|
4
|
+
|
5
|
+
export default CocoComponent("popover", ({ target, trigger, options = {} }) => {
|
6
|
+
return {
|
7
|
+
targetEl: null,
|
8
|
+
open: false,
|
9
|
+
|
10
|
+
init() {
|
11
|
+
this.targetEl = target
|
12
|
+
? document.querySelector(target)
|
13
|
+
: this.$el.parentElement;
|
14
|
+
|
15
|
+
if (this.targetEl) {
|
16
|
+
this.targetEl.coco_popover = this;
|
17
|
+
|
18
|
+
if (trigger == "click") {
|
19
|
+
this.targetEl.style.cursor = "pointer";
|
20
|
+
}
|
21
|
+
|
22
|
+
this.$nextTick(() => {
|
23
|
+
const content = this.$el.firstElementChild;
|
24
|
+
content.__popover_target = this.targetEl;
|
25
|
+
|
26
|
+
tippy(this.targetEl, {
|
27
|
+
trigger,
|
28
|
+
theme: this.theme,
|
29
|
+
maxWidth: "none",
|
30
|
+
interactive: true,
|
31
|
+
allowHTML: true,
|
32
|
+
appendTo: () => document.body,
|
33
|
+
content: () => content,
|
34
|
+
onShown: () => {
|
35
|
+
this.open = true;
|
36
|
+
},
|
37
|
+
onHidden: () => {
|
38
|
+
this.open = false;
|
39
|
+
},
|
40
|
+
...options,
|
41
|
+
});
|
42
|
+
});
|
43
|
+
} else {
|
44
|
+
console.error(`Popover target '${target} not found.'`);
|
45
|
+
}
|
46
|
+
},
|
47
|
+
|
48
|
+
show(event) {
|
49
|
+
if (
|
50
|
+
!event ||
|
51
|
+
(this.eventTarget(event) === this.targetEl && this.popoverInstance)
|
52
|
+
) {
|
53
|
+
this.popoverInstance.show();
|
54
|
+
}
|
55
|
+
},
|
56
|
+
|
57
|
+
hide(event) {
|
58
|
+
if (
|
59
|
+
!event ||
|
60
|
+
(this.eventTarget(event) === this.targetEl && this.popoverInstance)
|
61
|
+
) {
|
62
|
+
this.popoverInstance.hide();
|
63
|
+
}
|
64
|
+
},
|
65
|
+
|
66
|
+
toggle(event) {
|
67
|
+
if (
|
68
|
+
!event ||
|
69
|
+
(this.eventTarget(event) === this.targetEl && this.popoverInstance)
|
70
|
+
) {
|
71
|
+
this.open ? this.popoverInstance.hide() : this.popoverInstance.show();
|
72
|
+
}
|
73
|
+
},
|
74
|
+
|
75
|
+
destroy() {
|
76
|
+
if (this.popoverInstance) {
|
77
|
+
this.popoverInstance.destroy();
|
78
|
+
}
|
79
|
+
},
|
80
|
+
|
81
|
+
eventTarget(event) {
|
82
|
+
if (event.detail.target) {
|
83
|
+
if (typeof event.detail.target === "string") {
|
84
|
+
return document.querySelector(event.detail.target);
|
85
|
+
} else {
|
86
|
+
return event.detail.target;
|
87
|
+
}
|
88
|
+
} else {
|
89
|
+
return event.target;
|
90
|
+
}
|
91
|
+
},
|
92
|
+
|
93
|
+
get theme() {
|
94
|
+
return `coco-popover-${this.$root.getAttribute("data-theme")}`;
|
95
|
+
},
|
96
|
+
|
97
|
+
get popoverInstance() {
|
98
|
+
if (this.targetEl) {
|
99
|
+
return this.targetEl._tippy;
|
100
|
+
}
|
101
|
+
},
|
102
|
+
};
|
103
|
+
});
|
@@ -0,0 +1,37 @@
|
|
1
|
+
module Coco
|
2
|
+
class Popover < Coco::Component
|
3
|
+
include Concerns::AcceptsOptions
|
4
|
+
|
5
|
+
accepts_option :theme, from: ["netural", "info"], default: "neutral"
|
6
|
+
accepts_option :trigger, from: ["click", "manual", "hover"], default: "click"
|
7
|
+
accepts_option :placement,
|
8
|
+
from: %w[top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end auto auto-start auto-end],
|
9
|
+
default: "auto",
|
10
|
+
private: true
|
11
|
+
|
12
|
+
before_initialize do |kwargs|
|
13
|
+
[:placement, :trigger, :theme].each do |key|
|
14
|
+
kwargs[key] = kwargs[key].to_s.tr("_", "-") if kwargs.key?(key)
|
15
|
+
end
|
16
|
+
kwargs
|
17
|
+
end
|
18
|
+
|
19
|
+
attr_reader :target
|
20
|
+
|
21
|
+
def initialize(target: nil, options: {}, **)
|
22
|
+
@target = target
|
23
|
+
@options = options
|
24
|
+
end
|
25
|
+
|
26
|
+
def trigger
|
27
|
+
(get_option_value(:trigger) == "hover") ? "mouseenter focus" : get_option_value(:trigger)
|
28
|
+
end
|
29
|
+
|
30
|
+
def options
|
31
|
+
{
|
32
|
+
placement: get_option_value(:placement),
|
33
|
+
**@options
|
34
|
+
}
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { CocoComponent } from "@assets/js/coco/component";
|
2
|
+
import { getData } from "@helpers/alpine";
|
3
|
+
|
4
|
+
export default CocoComponent("popoverContent", () => {
|
5
|
+
return {
|
6
|
+
init() {
|
7
|
+
this.hide = this.hide.bind(this);
|
8
|
+
this.show = this.show.bind(this);
|
9
|
+
this.toggle = this.toggle.bind(this);
|
10
|
+
},
|
11
|
+
|
12
|
+
hide() {
|
13
|
+
this.$dispatch("popover:hide", { target: this.$root.__popover_target });
|
14
|
+
},
|
15
|
+
|
16
|
+
show() {
|
17
|
+
this.$dispatch("popover:show", { target: this.$root.__popover_target });
|
18
|
+
},
|
19
|
+
|
20
|
+
toggle() {
|
21
|
+
this.$dispatch("popover:toggle", { target: this.$root.__popover_target });
|
22
|
+
},
|
23
|
+
};
|
24
|
+
});
|
data/lib/coco.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: coveragebook_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.18.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Mark Perkins
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-04-
|
11
|
+
date: 2024-04-24 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -1647,6 +1647,11 @@ files:
|
|
1647
1647
|
- app/components/coco/messaging/notice/notice.html.erb
|
1648
1648
|
- app/components/coco/messaging/notice/notice.js
|
1649
1649
|
- app/components/coco/messaging/notice/notice.rb
|
1650
|
+
- app/components/coco/messaging/popover/popover.css
|
1651
|
+
- app/components/coco/messaging/popover/popover.html.erb
|
1652
|
+
- app/components/coco/messaging/popover/popover.js
|
1653
|
+
- app/components/coco/messaging/popover/popover.rb
|
1654
|
+
- app/components/coco/messaging/popover/popover_content.js
|
1650
1655
|
- app/components/coco/messaging/snackbar/snackbar.css
|
1651
1656
|
- app/components/coco/messaging/snackbar/snackbar.html.erb
|
1652
1657
|
- app/components/coco/messaging/snackbar/snackbar.js
|