coveragebook_components 0.17.6 → 0.18.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/build/coco/coco.css +67 -0
- data/app/assets/build/coco/coco.js +108 -2
- data/app/components/coco/buttons/option_bar/option_bar.css +8 -0
- data/app/components/coco/buttons/option_bar/option_bar.rb +1 -1
- 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
|
@@ -2643,6 +2643,15 @@ select{
|
|
2643
2643
|
pointer-events: none
|
2644
2644
|
}
|
2645
2645
|
|
2646
|
+
[data-coco][data-component="option-bar"][data-size="xs"] {
|
2647
|
+
padding: calc(0.25rem - 1px);
|
2648
|
+
}
|
2649
|
+
|
2650
|
+
[data-coco][data-component="option-bar"][data-size="xs"] .option-bar-buttons{
|
2651
|
+
-moz-column-gap: 0.25rem;
|
2652
|
+
column-gap: 0.25rem
|
2653
|
+
}
|
2654
|
+
|
2646
2655
|
[data-coco][data-component="toolbar"] .toolbar-sections{
|
2647
2656
|
display: flex;
|
2648
2657
|
align-items: center;
|
@@ -4152,6 +4161,11 @@ select{
|
|
4152
4161
|
padding-bottom: 1rem
|
4153
4162
|
}
|
4154
4163
|
|
4164
|
+
[data-coco][data-component="popover"] {
|
4165
|
+
display: none;
|
4166
|
+
pointer-events: none;
|
4167
|
+
}
|
4168
|
+
|
4155
4169
|
[data-coco][data-component="snackbar"]{
|
4156
4170
|
width: 100%;
|
4157
4171
|
overflow: hidden;
|
@@ -6954,3 +6968,56 @@ select{
|
|
6954
6968
|
width: -moz-min-content;
|
6955
6969
|
width: min-content;
|
6956
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
|
@@ -2,7 +2,7 @@ module Coco
|
|
2
2
|
class OptionBar < Coco::Component
|
3
3
|
include Concerns::AcceptsOptions
|
4
4
|
|
5
|
-
accepts_option :size, from: [:sm, :md], default: :sm
|
5
|
+
accepts_option :size, from: [:xs, :sm, :md], default: :sm
|
6
6
|
|
7
7
|
renders_many :options, ->(*args, selected: false, **kwargs, &block) do
|
8
8
|
theme = selected ? :neutral_light : :blank
|
@@ -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
|