coveragebook_components 0.17.7 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5535752274648feee015c6471880b40d3ddc2cd63e8836ec3839b7461917e530
-  data.tar.gz: 34fba281df9eddd0a2f1449bb8b4abcbb1cae0e4fdcee50c9d7db71c814abf8b
+  metadata.gz: a9024fd2b1372e1c28286a54173750921c33b6f9cee10cce9e2ca5d1fd982d9e
+  data.tar.gz: f6e89d2b38167d6198b967af281344146e3f131964457e9c2dff2ea11f2e2737
 SHA512:
-  metadata.gz: c8b43623f1feeffe47afe6b28fd418b0e3be58ff0059eeb20eb522f33617a781a9e140645aaeee5096b678e99aa5abb346e02904b8a12e974c1a7b991f066464
-  data.tar.gz: 1da47f77ae7ce00536379c4e05368b3c24ef7e1331f2e9f7fbc15f56c63f157b2e337c37ba44df3af140599f22f1e1a1ad1ae189f5ffdced64b9b83cadd4a3d4
+  metadata.gz: 131b0f18bf5b4462ba4be9c5cfc55f76aaceeac1b4c671f5144589aee73ae79742bbe01f9b0b8f2846fd1b89fc10b2fb07a453061d95f3a606e64ee9ff5c9546
+  data.tar.gz: 16115cf26b19813e8e44639956d10de3ac45ec39fea45bbd008dbc53aab8a86cbb3eea1ddd5955f9d06f10d9e15af348463d7b962ef758548be873e6455cc32c

data/app/assets/build/coco/coco.css

@@ -4161,6 +4161,11 @@ select{
   padding-bottom: 1rem
 }
 
+[data-coco][data-component="popover"] {
+    display: none;
+    pointer-events: none;
+  }
+
 [data-coco][data-component="snackbar"]{
   width: 100%;
   overflow: hidden;
@@ -6963,3 +6968,56 @@ select{
   width: -moz-min-content;
   width: min-content;
 }
+
+/* Tippy popover theme */
+
+.tippy-box[data-theme^="coco-popover-"]{
+  border-radius: 0.5rem;
+  border-style: none;
+  padding: 1.5rem;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  width: -moz-fit-content;
+  width: fit-content
+}
+
+.tippy-box[data-theme^="coco-popover-"] .tippy-svg-arrow > svg:first-child{
+  display: none
+}
+
+.tippy-box[data-theme~="coco-popover-neutral"]{
+  border-width: 1px;
+  border-style: solid;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  background-blend-mode: hard-light;
+  border-color: rgba(0, 12, 39, 0.1)
+}
+
+.tippy-box[data-theme~="coco-popover-neutral"] .tippy-svg-arrow > svg:first-child{
+  display: block;
+  fill: #D1D5DB
+}
+
+.tippy-box[data-theme~="coco-popover-neutral"] .tippy-svg-arrow > svg:last-child{
+  fill: #FFFFFF
+}
+
+.tippy-box[data-theme~="coco-popover-info"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 132 199 / var(--tw-bg-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+}
+
+.tippy-box[data-theme~="coco-popover-info"] .tippy-svg-arrow > svg:last-child{
+  fill: #0284C7
+}

data/app/assets/build/coco/coco.js

@@ -15441,7 +15441,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.17.7",
+  version: "0.18.0",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -16195,6 +16195,112 @@ var notice_default = CocoComponent("notice", () => {
   return {};
 });
 
+// ../../components/coco/messaging/popover/popover.js
+var popover_exports = {};
+__export(popover_exports, {
+  default: () => popover_default
+});
+var popover_default = CocoComponent("popover", ({ target, trigger, options = {} }) => {
+  return {
+    targetEl: null,
+    open: false,
+    init() {
+      this.targetEl = target ? document.querySelector(target) : this.$el.parentElement;
+      if (this.targetEl) {
+        this.targetEl.coco_popover = this;
+        if (trigger == "click") {
+          this.targetEl.style.cursor = "pointer";
+        }
+        this.$nextTick(() => {
+          const content = this.$el.firstElementChild;
+          content.__popover_target = this.targetEl;
+          tippy_default(this.targetEl, {
+            trigger,
+            theme: this.theme,
+            maxWidth: "none",
+            interactive: true,
+            allowHTML: true,
+            appendTo: () => document.body,
+            content: () => content,
+            onShown: () => {
+              this.open = true;
+            },
+            onHidden: () => {
+              this.open = false;
+            },
+            ...options
+          });
+        });
+      } else {
+        console.error(`Popover target '${target} not found.'`);
+      }
+    },
+    show(event) {
+      if (!event || this.eventTarget(event) === this.targetEl && this.popoverInstance) {
+        this.popoverInstance.show();
+      }
+    },
+    hide(event) {
+      if (!event || this.eventTarget(event) === this.targetEl && this.popoverInstance) {
+        this.popoverInstance.hide();
+      }
+    },
+    toggle(event) {
+      if (!event || this.eventTarget(event) === this.targetEl && this.popoverInstance) {
+        this.open ? this.popoverInstance.hide() : this.popoverInstance.show();
+      }
+    },
+    destroy() {
+      if (this.popoverInstance) {
+        this.popoverInstance.destroy();
+      }
+    },
+    eventTarget(event) {
+      if (event.detail.target) {
+        if (typeof event.detail.target === "string") {
+          return document.querySelector(event.detail.target);
+        } else {
+          return event.detail.target;
+        }
+      } else {
+        return event.target;
+      }
+    },
+    get theme() {
+      return `coco-popover-${this.$root.getAttribute("data-theme")}`;
+    },
+    get popoverInstance() {
+      if (this.targetEl) {
+        return this.targetEl._tippy;
+      }
+    }
+  };
+});
+
+// ../../components/coco/messaging/popover/popover_content.js
+var popover_content_exports = {};
+__export(popover_content_exports, {
+  default: () => popover_content_default
+});
+var popover_content_default = CocoComponent("popoverContent", () => {
+  return {
+    init() {
+      this.hide = this.hide.bind(this);
+      this.show = this.show.bind(this);
+      this.toggle = this.toggle.bind(this);
+    },
+    hide() {
+      this.$dispatch("popover:hide", { target: this.$root.__popover_target });
+    },
+    show() {
+      this.$dispatch("popover:show", { target: this.$root.__popover_target });
+    },
+    toggle() {
+      this.$dispatch("popover:toggle", { target: this.$root.__popover_target });
+    }
+  };
+});
+
 // ../../components/coco/messaging/snackbar/snackbar.js
 var snackbar_exports = {};
 __export(snackbar_exports, {
@@ -16401,7 +16507,7 @@ var tooltip_default2 = CocoComponent("tooltip", () => {
 });
 
 // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@components/messaging/**/*.js
-var modules7 = [alert_exports, notice_exports, snackbar_exports, system_banner_exports, toast_exports, tooltip_exports];
+var modules7 = [alert_exports, notice_exports, popover_exports, popover_content_exports, snackbar_exports, system_banner_exports, toast_exports, tooltip_exports];
 var __default7 = modules7;
 
 // ../../components/coco/modals/modal/modal.js

data/app/components/coco/messaging/popover/popover.css

@@ -0,0 +1,37 @@
+@layer components {
+  [data-coco][data-component="popover"] {
+    display: none;
+    pointer-events: none;
+  }
+}
+
+/* Tippy popover theme */
+.tippy-box[data-theme^="coco-popover-"] {
+  @apply text-content-light-1 text-para-md border-none shadow-xl rounded-lg p-6 font-normal;
+  width: fit-content;
+
+  .tippy-svg-arrow > svg:first-child {
+    @apply hidden;
+  }
+}
+
+.tippy-box[data-theme~="coco-popover-neutral"] {
+  @apply bg-background-light-1 text-content-dark-1 border border-solid border-gray-blend-100;
+
+  .tippy-svg-arrow > svg:first-child {
+    @apply block;
+    @apply fill-coco-gray-300;
+  }
+
+  .tippy-svg-arrow > svg:last-child {
+    @apply fill-background-light-1;
+  }
+}
+
+.tippy-box[data-theme~="coco-popover-info"] {
+  @apply bg-background-info antialiased;
+
+  .tippy-svg-arrow > svg:last-child {
+    @apply fill-background-info;
+  }
+}

data/app/components/coco/messaging/popover/popover.html.erb

@@ -0,0 +1,10 @@
+<%= render component_tag(x: {
+  data: "popover({target: #{target.to_json}, trigger: #{trigger.to_json}, options: #{options.to_json}})",
+  "@popover:show.document": "show",
+  "@popover:hide.document": "hide",
+  "@popover:toggle.document": "toggle"
+  }) do %>
+  <div x-data="popoverContent">
+    <%= content %>
+  </div>
+<% end %>

data/app/components/coco/messaging/popover/popover.js

@@ -0,0 +1,103 @@
+import { CocoComponent } from "@assets/js/coco/component";
+import tippy from "@js/base/tippy";
+import { getData } from "@helpers/alpine";
+
+export default CocoComponent("popover", ({ target, trigger, options = {} }) => {
+  return {
+    targetEl: null,
+    open: false,
+
+    init() {
+      this.targetEl = target
+        ? document.querySelector(target)
+        : this.$el.parentElement;
+
+      if (this.targetEl) {
+        this.targetEl.coco_popover = this;
+
+        if (trigger == "click") {
+          this.targetEl.style.cursor = "pointer";
+        }
+
+        this.$nextTick(() => {
+          const content = this.$el.firstElementChild;
+          content.__popover_target = this.targetEl;
+
+          tippy(this.targetEl, {
+            trigger,
+            theme: this.theme,
+            maxWidth: "none",
+            interactive: true,
+            allowHTML: true,
+            appendTo: () => document.body,
+            content: () => content,
+            onShown: () => {
+              this.open = true;
+            },
+            onHidden: () => {
+              this.open = false;
+            },
+            ...options,
+          });
+        });
+      } else {
+        console.error(`Popover target '${target} not found.'`);
+      }
+    },
+
+    show(event) {
+      if (
+        !event ||
+        (this.eventTarget(event) === this.targetEl && this.popoverInstance)
+      ) {
+        this.popoverInstance.show();
+      }
+    },
+
+    hide(event) {
+      if (
+        !event ||
+        (this.eventTarget(event) === this.targetEl && this.popoverInstance)
+      ) {
+        this.popoverInstance.hide();
+      }
+    },
+
+    toggle(event) {
+      if (
+        !event ||
+        (this.eventTarget(event) === this.targetEl && this.popoverInstance)
+      ) {
+        this.open ? this.popoverInstance.hide() : this.popoverInstance.show();
+      }
+    },
+
+    destroy() {
+      if (this.popoverInstance) {
+        this.popoverInstance.destroy();
+      }
+    },
+
+    eventTarget(event) {
+      if (event.detail.target) {
+        if (typeof event.detail.target === "string") {
+          return document.querySelector(event.detail.target);
+        } else {
+          return event.detail.target;
+        }
+      } else {
+        return event.target;
+      }
+    },
+
+    get theme() {
+      return `coco-popover-${this.$root.getAttribute("data-theme")}`;
+    },
+
+    get popoverInstance() {
+      if (this.targetEl) {
+        return this.targetEl._tippy;
+      }
+    },
+  };
+});

data/app/components/coco/messaging/popover/popover.rb

@@ -0,0 +1,37 @@
+module Coco
+  class Popover < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :theme, from: ["netural", "info"], default: "neutral"
+    accepts_option :trigger, from: ["click", "manual", "hover"], default: "click"
+    accepts_option :placement,
+      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],
+      default: "auto",
+      private: true
+
+    before_initialize do |kwargs|
+      [:placement, :trigger, :theme].each do |key|
+        kwargs[key] = kwargs[key].to_s.tr("_", "-") if kwargs.key?(key)
+      end
+      kwargs
+    end
+
+    attr_reader :target
+
+    def initialize(target: nil, options: {}, **)
+      @target = target
+      @options = options
+    end
+
+    def trigger
+      (get_option_value(:trigger) == "hover") ? "mouseenter focus" : get_option_value(:trigger)
+    end
+
+    def options
+      {
+        placement: get_option_value(:placement),
+        **@options
+      }
+    end
+  end
+end

data/app/components/coco/messaging/popover/popover_content.js

@@ -0,0 +1,24 @@
+import { CocoComponent } from "@assets/js/coco/component";
+import { getData } from "@helpers/alpine";
+
+export default CocoComponent("popoverContent", () => {
+  return {
+    init() {
+      this.hide = this.hide.bind(this);
+      this.show = this.show.bind(this);
+      this.toggle = this.toggle.bind(this);
+    },
+
+    hide() {
+      this.$dispatch("popover:hide", { target: this.$root.__popover_target });
+    },
+
+    show() {
+      this.$dispatch("popover:show", { target: this.$root.__popover_target });
+    },
+
+    toggle() {
+      this.$dispatch("popover:toggle", { target: this.$root.__popover_target });
+    },
+  };
+});

data/app/helpers/coco/components_helper.rb

@@ -166,6 +166,10 @@ module Coco
       render(Coco::SystemBanner.new(**), &)
     end
 
+    def coco_popover(**, &)
+      render(Coco::Popover.new(**), &)
+    end
+
     # Modals
 
     def coco_modal(name = "default", **, &)

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.17.7"
+  VERSION = "0.18.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.17.7
+  version: 0.18.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-04-18 00:00:00.000000000 Z
+date: 2024-04-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1647,6 +1647,11 @@ files:
 - app/components/coco/messaging/notice/notice.html.erb
 - app/components/coco/messaging/notice/notice.js
 - app/components/coco/messaging/notice/notice.rb
+- app/components/coco/messaging/popover/popover.css
+- app/components/coco/messaging/popover/popover.html.erb
+- app/components/coco/messaging/popover/popover.js
+- app/components/coco/messaging/popover/popover.rb
+- app/components/coco/messaging/popover/popover_content.js
 - app/components/coco/messaging/snackbar/snackbar.css
 - app/components/coco/messaging/snackbar/snackbar.html.erb
 - app/components/coco/messaging/snackbar/snackbar.js