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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5535752274648feee015c6471880b40d3ddc2cd63e8836ec3839b7461917e530
4
- data.tar.gz: 34fba281df9eddd0a2f1449bb8b4abcbb1cae0e4fdcee50c9d7db71c814abf8b
3
+ metadata.gz: a9024fd2b1372e1c28286a54173750921c33b6f9cee10cce9e2ca5d1fd982d9e
4
+ data.tar.gz: f6e89d2b38167d6198b967af281344146e3f131964457e9c2dff2ea11f2e2737
5
5
  SHA512:
6
- metadata.gz: c8b43623f1feeffe47afe6b28fd418b0e3be58ff0059eeb20eb522f33617a781a9e140645aaeee5096b678e99aa5abb346e02904b8a12e974c1a7b991f066464
7
- data.tar.gz: 1da47f77ae7ce00536379c4e05368b3c24ef7e1331f2e9f7fbc15f56c63f157b2e337c37ba44df3af140599f22f1e1a1ad1ae189f5ffdced64b9b83cadd4a3d4
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.17.7",
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
+ });
@@ -166,6 +166,10 @@ module Coco
166
166
  render(Coco::SystemBanner.new(**), &)
167
167
  end
168
168
 
169
+ def coco_popover(**, &)
170
+ render(Coco::Popover.new(**), &)
171
+ end
172
+
169
173
  # Modals
170
174
 
171
175
  def coco_modal(name = "default", **, &)
data/lib/coco.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Coco
2
- VERSION = "0.17.7"
2
+ VERSION = "0.18.0"
3
3
  end
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.17.7
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-18 00:00:00.000000000 Z
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