coveragebook_components 0.17.7 → 0.18.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5535752274648feee015c6471880b40d3ddc2cd63e8836ec3839b7461917e530
-  data.tar.gz: 34fba281df9eddd0a2f1449bb8b4abcbb1cae0e4fdcee50c9d7db71c814abf8b
+  metadata.gz: a6e884ae365d700946ff6b8fcaba45157c23dd63f1c99eb9bfe479d8ffee61c1
+  data.tar.gz: 74c0748337f4a09bea38d496e71c7c62f39282fdb457bb8bc443507171f58ba2
 SHA512:
-  metadata.gz: c8b43623f1feeffe47afe6b28fd418b0e3be58ff0059eeb20eb522f33617a781a9e140645aaeee5096b678e99aa5abb346e02904b8a12e974c1a7b991f066464
-  data.tar.gz: 1da47f77ae7ce00536379c4e05368b3c24ef7e1331f2e9f7fbc15f56c63f157b2e337c37ba44df3af140599f22f1e1a1ad1ae189f5ffdced64b9b83cadd4a3d4
+  metadata.gz: 7213a41ac90c6eb3288873ca5f82f36a6dd816cb98e865fe9089a7962c8efc5b8052926ac67d709b4c87a2c06af34cb2b8a61af8a07bb2fd2abcbfd70994fb11
+  data.tar.gz: 248c6c5d9c9d17a8aef5de3c352cb0148c0574dd516272344fdbb01633afe3673279f1357a66c10d1c74ce46640cfbcaf6297dbddcdcafd206ce0911457535eb

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;
@@ -5779,10 +5784,6 @@ select{
   position: fixed
 }
 
-.\!block{
-  display: block !important
-}
-
 .block{
   display: block
 }
@@ -6963,3 +6964,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

@@ -15260,7 +15260,7 @@ function dropdown_default(Alpine3) {
       const settings = tippyModifiers(modifiers);
       const result = expression ? evaluate(expression) : {};
       const directiveConfig = isObject(result) ? result : {};
-      let { triggerTarget, contentTarget, anchorTarget, ...config } = directiveConfig;
+      let { triggerTarget, contentTarget, anchorTarget, flip, ...config } = directiveConfig;
       contentTarget = contentTarget || el.querySelector("[x-dropdown\\:content]");
       const content = isNode(contentTarget) ? contentTarget.firstElementChild : contentTarget;
       triggerTarget = triggerTarget || el.querySelector("[x-dropdown\\:trigger]") || el;
@@ -15288,6 +15288,9 @@ function dropdown_default(Alpine3) {
           interactive: true,
           animation: false,
           maxWidth: 380,
+          popperOptions: {
+            modifiers: [{ name: "flip", enabled: flip !== false }]
+          },
           triggerTarget,
           content,
           onShow: (...args) => {
@@ -15441,7 +15444,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.17.7",
+  version: "0.18.1",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -16195,6 +16198,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 +16510,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/assets/js/base/alpine/directives/dropdown.js

@@ -16,7 +16,7 @@ export default function (Alpine) {
       const settings = buildConfig(modifiers);
       const result = expression ? evaluate(expression) : {};
       const directiveConfig = isObject(result) ? result : {};
-      let { triggerTarget, contentTarget, anchorTarget, ...config } =
+      let { triggerTarget, contentTarget, anchorTarget, flip, ...config } =
         directiveConfig;
 
       contentTarget =
@@ -61,6 +61,9 @@ export default function (Alpine) {
           interactive: true,
           animation: false,
           maxWidth: 380,
+          popperOptions: {
+            modifiers: [{ name: "flip", enabled: flip !== false }],
+          },
 
           triggerTarget,
           content,

data/app/components/coco/buttons/button/button.rb

@@ -55,6 +55,7 @@ module Coco
       dd.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],
         private: true
+      dd.accepts_option :flip, from: [true, false], default: true, private: true
     end
 
     renders_one :text, Coco::Content
@@ -154,7 +155,7 @@ module Coco
       if dropdown? || confirm?
         {
           data: x_data("buttonDropdown"),
-          dropdown: jsify_data({placement: get_option_value(:dropdown, :placement)}.compact),
+          dropdown: jsify_data({placement: get_option_value(:dropdown, :placement), flip: get_option_value(:dropdown, :flip)}.compact),
           bind: "root"
         }
       end

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -16,21 +16,17 @@ module Coco
           divider: ->(**kwargs) { tag.div(class: "divider") },
           html: ->(&block) { block.call },
           button: ->(*args, **kwargs, &block) { coco_button(*args, **button_kwargs(kwargs, :button), &block) },
-          menu_button: ->(*args, **kwargs, &block) { instantiate_button(:menu, *args, **kwargs, &block) },
-          color_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:color_picker, *args, **kwargs, &block) },
-          image_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:image_picker, *args, **kwargs, &block) },
-          layout_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:layout_picker, *args, **kwargs, &block) }
+          menu_button: ->(*args, **kwargs, &block) { instantiate_button(:menu, args.first, nil, **kwargs, &block) },
+          color_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:color_picker, args.first, nil, **kwargs, &block) },
+          image_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:image_picker, args.first, nil, **kwargs, &block) },
+          layout_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:layout_picker, args.first, nil, **kwargs, &block) }
         }
       end
 
       def instantiate_button(type, *args, **kwargs, &block)
-        href, content = if block
-          [args.first, nil]
-        else
-          (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
-        end
-        component = BUTTON_TYPES[type].constantize.new(href: href, **button_kwargs(kwargs, type))
-        component.with_content(content) if !block && content.present?
+        href, content = (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+        component = BUTTON_TYPES[type].constantize.new(text: content, href: href, **button_kwargs(kwargs, type))
+        component.with_text(content) if content.present?
         component
       end
 

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

@@ -27,8 +27,8 @@ module Coco
       render(Coco::ButtonGroup.new(**), &)
     end
 
-    def coco_menu_button(**, &)
-      render(Coco::MenuButton.new(**), &)
+    def coco_menu_button(text = nil, **, &)
+      render(Coco::MenuButton.new(text: text, **), &)
     end
 
     def coco_menu_item(type, **, &)
@@ -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.1"
 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.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-04-18 00:00:00.000000000 Z
+date: 2024-05-14 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