coveragebook_components 0.8.8 → 0.9.0

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

@@ -14044,7 +14044,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.8.8",
+    version: "0.9.0",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -23835,10 +23835,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         const settings = tippyModifiers(modifiers);
         const result = expression ? evaluate2(expression) : {};
         const directiveConfig = isObject2(result) ? result : {};
-        let _a = directiveConfig, { triggerTarget, contentTarget } = _a, config = __objRest(_a, ["triggerTarget", "contentTarget"]);
+        let _a = directiveConfig, { triggerTarget, contentTarget, anchorTarget } = _a, config = __objRest(_a, ["triggerTarget", "contentTarget", "anchorTarget"]);
         contentTarget = contentTarget || el.querySelector("[x-dropdown\\:content]");
         content = isNode(contentTarget) ? contentTarget.firstElementChild : contentTarget;
         triggerTarget = triggerTarget || el.querySelector("[x-dropdown\\:trigger]") || el;
+        anchorTarget = anchorTarget || el.querySelector("[x-dropdown\\:anchor]") || el;
         if (!el.__x_dropdown) {
           const mixin = Alpine3.reactive({
             dropdown: {
@@ -23854,7 +23855,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             }
           });
           setData(el, mixin);
-          const dropdown = el.__x_dropdown = tippy_default(el, __spreadValues(__spreadValues({
+          const dropdown = el.__x_dropdown = tippy_default(anchorTarget, __spreadValues(__spreadValues({
             theme: "coco-app-dropdown",
             placement: "bottom-start",
             offset: [0, 0],
@@ -24074,11 +24075,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       confirmed: true,
       lastState: null,
       stateTooltips: data2.tooltips || {},
-      tooltipText: null,
-      dropdown: null
+      tooltipText: null
     }, data2.props || {}), {
       init() {
         this.lastState = this.state;
+        this.checkConfirmation = this.checkConfirmation.bind(this);
+        this.approveAndRun = this.approveAndRun.bind(this);
+        this.shouldShowTooltip = this.shouldShowTooltip.bind(this);
         this.$nextTick(() => {
           if (this.$options.confirm) {
             this.confirmed = false;
@@ -24106,7 +24109,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.tooltipText = tooltipForState || defaultContent;
         }
       },
-      showTooltip() {
+      shouldShowTooltip() {
         return !!this.tooltipText;
       },
       get disabled() {
@@ -24115,16 +24118,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       set disabled(value) {
         this.$options.disabled = value;
       },
-      /* dropdown */
-      hideDropdown() {
-        if (this.dropdown) {
-          this.dropdown.hide();
-        }
-      },
-      showDropdown() {
-        if (this.dropdown) {
-          this.dropdown.show();
-        }
+      get tippyInstance() {
+        return this.$root.__x_tippy;
       },
       /* confirmation */
       checkConfirmation(event) {
@@ -24204,15 +24199,38 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       root: {
         "x-options": "options",
         "x-tooltip": "tooltipText",
-        "x-effect": "setTooltipText",
-        "@confirmation:confirm": "approveAndRun",
-        "@confirmation:cancel": "cancelConfirmation",
-        "@dropdown:show": "setState('active')",
-        "@dropdown:hide": "resetState()"
+        "x-effect": "setTooltipText"
       }
     });
   });
 
+  // ../../components/coco/base/button/button_dropdown.js
+  var button_dropdown_exports = {};
+  __export(button_dropdown_exports, {
+    default: () => button_dropdown_default
+  });
+  var button_dropdown_default = CocoComponent("buttonDropdown", (data2 = {}) => {
+    return {
+      dropdown: null,
+      button: null,
+      init() {
+        this.$nextTick(() => {
+          this.button = getComponent(this.$el.querySelector(".coco-button"));
+        });
+      },
+      hideDropdown() {
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
+      },
+      showDropdown() {
+        if (this.dropdown) {
+          this.dropdown.show();
+        }
+      }
+    };
+  });
+
   // ../../components/coco/base/dropdown/dropdown.js
   var dropdown_exports = {};
   __export(dropdown_exports, {
@@ -24544,7 +24562,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   }
 
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
-  var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports, poll_controller_exports];
+  var modules = [button_exports, button_dropdown_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports, poll_controller_exports];
   var __default = modules;
 
   // base/components.js
@@ -25072,10 +25090,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   var button_group_default = CocoComponent("appButtonGroup", () => {
     return {
       options: ["collapsible"],
+      ready: false,
       containerWidth: 0,
       contentWidth: 0,
       collapsed: false,
-      tooltip: null,
+      singletonTooltip: null,
+      tooltipInstances: [],
       get collapsible() {
         return this.$options.collapsible !== false;
       },
@@ -25083,7 +25103,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         const buttonElements = this.$el.querySelectorAll(
           "[data-component='app-button']"
         );
-        return Array.from(buttonElements).map((el) => getData(el));
+        return Array.from(buttonElements).map((el) => getComponent(el));
       },
       get parent() {
         return this.$root.parentElement;
@@ -25092,24 +25112,34 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         this.$nextTick(() => {
           if (!this.collapsible)
             return;
-          this.createTooltipsSingleton();
+          this.ready = true;
           this.onResize();
+          this.createSingletonTooltip();
         });
         this.$watch("collapsed", (value) => {
           this.buttons.forEach((button) => {
             button.isCollapsed = value;
           });
+          this.$nextTick(() => this.createSingletonTooltip());
         });
       },
-      createTooltipsSingleton() {
-        const tippys = this.buttons.map((button) => {
-          return button.showTooltip() && button.$root.__x_tippy;
-        }).filter((t3) => t3);
-        this.tooltip = createSingleton(tippys, {
+      createSingletonTooltip() {
+        this.destroySingletonTooltip();
+        this.tooltipInstances = this.buttons.map((button) => button.shouldShowTooltip() && button.tippyInstance).filter((t3) => t3);
+        this.singletonTooltip = createSingleton(this.tooltipInstances, {
           theme: "coco-tooltip",
-          onShow: () => this.collapsed
+          delay: 100,
+          moveTransition: "transform 0.1s ease-out"
         });
       },
+      destroySingletonTooltip() {
+        if (this.singletonTooltip && this.singletonTooltip.destroy) {
+          this.singletonTooltip.destroy();
+          this.singletonTooltip = null;
+          this.tooltipInstances.forEach((tooltip) => tooltip.destroy());
+          this.tooltipInstances = [];
+        }
+      },
       onResize() {
         if (!this.collapsible)
           return;
@@ -25128,9 +25158,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       },
       destroy() {
-        if (this.tooltip) {
-          this.tooltip.destroy();
-          this.tooltip = null;
+        if (this.singletonTooltip) {
+          this.singletonTooltip.destroy();
+          this.singletonTooltip = null;
         }
       }
     };

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

@@ -777,6 +777,9 @@ select {
   height: 2rem;
   width: 2rem;
 }
+.coco-button-wrapper {
+  display: contents !important;
+}
 [data-coco].coco-button {
   display: flex;
   width: auto;
@@ -788,22 +791,20 @@ select {
   border-color: transparent;
   background-color: transparent;
   color: currentColor;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-    width: -moz-min-content;
-    width: min-content;
-}
-[data-coco].coco-button .button-element {
-  display: inline-flex;
-  width: 100%;
   text-decoration-line: none;
   outline: 2px solid transparent;
   outline-offset: 2px;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
-[data-coco].coco-button .button-element:focus-visible {
+[data-coco].coco-button:focus-visible {
   outline-width: 0px;
 }
+[data-coco].coco-button {
+    width: -moz-min-content;
+    width: min-content;
+  }
 [data-coco].coco-button .button-inner {
   margin-left: auto;
   margin-right: auto;
@@ -838,7 +839,7 @@ select {
   order: 3;
 }
 /* disabled */
-[data-coco].coco-button[data-disabled="true"] .button-element {
+[data-coco].coco-button[data-disabled="true"] {
   pointer-events: none;
   cursor: not-allowed;
 }
@@ -849,7 +850,7 @@ select {
     transform: rotate(360deg);
   }
 }
-[data-coco].coco-button[data-state="loading"] > .button-element .button-icon {
+[data-coco].coco-button[data-state="loading"] .button-icon {
   animation: spin 1.5s linear infinite;
 }
 /* Fit */
@@ -857,16 +858,16 @@ select {
   width: 100%;
 }
 /* Icons */
-[data-coco].coco-button[data-icon-position="end"] > .button-element .button-content {
+[data-coco].coco-button[data-icon-position="end"] .button-content {
   order: 1;
 }
-[data-coco].coco-button[data-icon-position="end"] > .button-element .button-icon {
+[data-coco].coco-button[data-icon-position="end"] .button-icon {
   order: 2;
 }
-[data-coco].coco-button[data-icon-position="end"] > .button-element .button-toggle {
+[data-coco].coco-button[data-icon-position="end"] .button-toggle {
   order: 3;
 }
-[data-coco].coco-button.with-icon[data-collapsed="true"] > .button-element .button-content {
+[data-coco].coco-button.with-icon[data-collapsed="true"] .button-content {
         display: none;
       }
 [data-coco][data-component="dropdown"] {
@@ -1128,15 +1129,34 @@ select {
 .modal-frame {
   display: contents;
 }
+/*
+    Limit the size of modal content when rendered in the
+    host page rather than displayed as a modal.
+   */
+[data-role="inline-modal-content"] {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 42rem;
+}
+[data-role="inline-modal-content"] [data-component="modal-dialog"] {
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 [data-coco][data-component="modal-dialog"] {
   width: 100%;
   border-radius: 0.75rem;
+}
+.modal-frame [data-coco][data-component="modal-dialog"] {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  max-width: 42rem;
+  max-width: 42rem; /* temp until sizes added */
 }
-/* temp until sizes added */
 [data-coco][data-component="modal-dialog"] .modal-dialog-header {
   position: relative;
   display: flex;
@@ -1360,6 +1380,29 @@ select {
 [data-coco][data-component="pager-link"][data-direction="next"] .coco-icon {
   margin-right: -0.25rem;
 }
+[data-coco][data-component="panel"] {
+  display: contents;
+}
+[data-coco][data-component="panel"] .panel-content {
+  display: contents;
+}
+/* Only style Coco panels that are not rendered inside legacy panel components */
+[data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]) {
+  display: block;
+  border-radius: 0.75rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+[data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]) .panel-content {
+  display: block;
+        padding: max(min(5%, 2rem), 1rem);
+}
 [data-coco][data-component="placeholder"] {
   padding: 1rem;
 }
@@ -1896,6 +1939,9 @@ select {
 .hidden {
   display: none;
 }
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .resize {
   resize: both;
 }
@@ -1924,6 +1970,9 @@ select {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 /* Transparent gray blend-mode background utilities */
 .\!icon {
   }

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

@@ -11815,6 +11815,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     });
     return components;
   }
+  function getComponent(el, throwOnError = false) {
+    try {
+      return Alpine.$data(el);
+    } catch (error2) {
+      if (throwOnError) {
+        throw error2;
+      } else {
+        return null;
+      }
+    }
+  }
   function getData(el) {
     const root = Alpine.closestRoot(el);
     return root ? Alpine.$data(root) : null;
@@ -15061,10 +15072,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         const settings = tippyModifiers(modifiers);
         const result = expression ? evaluate2(expression) : {};
         const directiveConfig = isObject2(result) ? result : {};
-        let _a = directiveConfig, { triggerTarget, contentTarget } = _a, config = __objRest(_a, ["triggerTarget", "contentTarget"]);
+        let _a = directiveConfig, { triggerTarget, contentTarget, anchorTarget } = _a, config = __objRest(_a, ["triggerTarget", "contentTarget", "anchorTarget"]);
         contentTarget = contentTarget || el.querySelector("[x-dropdown\\:content]");
         content = isNode(contentTarget) ? contentTarget.firstElementChild : contentTarget;
         triggerTarget = triggerTarget || el.querySelector("[x-dropdown\\:trigger]") || el;
+        anchorTarget = anchorTarget || el.querySelector("[x-dropdown\\:anchor]") || el;
         if (!el.__x_dropdown) {
           const mixin = Alpine3.reactive({
             dropdown: {
@@ -15080,7 +15092,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             }
           });
           setData(el, mixin);
-          const dropdown = el.__x_dropdown = tippy_default(el, __spreadValues(__spreadValues({
+          const dropdown = el.__x_dropdown = tippy_default(anchorTarget, __spreadValues(__spreadValues({
             theme: "coco-app-dropdown",
             placement: "bottom-start",
             offset: [0, 0],
@@ -15272,11 +15284,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       confirmed: true,
       lastState: null,
       stateTooltips: data2.tooltips || {},
-      tooltipText: null,
-      dropdown: null
+      tooltipText: null
     }, data2.props || {}), {
       init() {
         this.lastState = this.state;
+        this.checkConfirmation = this.checkConfirmation.bind(this);
+        this.approveAndRun = this.approveAndRun.bind(this);
+        this.shouldShowTooltip = this.shouldShowTooltip.bind(this);
         this.$nextTick(() => {
           if (this.$options.confirm) {
             this.confirmed = false;
@@ -15304,7 +15318,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.tooltipText = tooltipForState || defaultContent;
         }
       },
-      showTooltip() {
+      shouldShowTooltip() {
         return !!this.tooltipText;
       },
       get disabled() {
@@ -15313,16 +15327,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       set disabled(value) {
         this.$options.disabled = value;
       },
-      /* dropdown */
-      hideDropdown() {
-        if (this.dropdown) {
-          this.dropdown.hide();
-        }
-      },
-      showDropdown() {
-        if (this.dropdown) {
-          this.dropdown.show();
-        }
+      get tippyInstance() {
+        return this.$root.__x_tippy;
       },
       /* confirmation */
       checkConfirmation(event) {
@@ -15402,15 +15408,38 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       root: {
         "x-options": "options",
         "x-tooltip": "tooltipText",
-        "x-effect": "setTooltipText",
-        "@confirmation:confirm": "approveAndRun",
-        "@confirmation:cancel": "cancelConfirmation",
-        "@dropdown:show": "setState('active')",
-        "@dropdown:hide": "resetState()"
+        "x-effect": "setTooltipText"
       }
     });
   });
 
+  // ../../components/coco/base/button/button_dropdown.js
+  var button_dropdown_exports = {};
+  __export(button_dropdown_exports, {
+    default: () => button_dropdown_default
+  });
+  var button_dropdown_default = CocoComponent("buttonDropdown", (data2 = {}) => {
+    return {
+      dropdown: null,
+      button: null,
+      init() {
+        this.$nextTick(() => {
+          this.button = getComponent(this.$el.querySelector(".coco-button"));
+        });
+      },
+      hideDropdown() {
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
+      },
+      showDropdown() {
+        if (this.dropdown) {
+          this.dropdown.show();
+        }
+      }
+    };
+  });
+
   // ../../components/coco/base/dropdown/dropdown.js
   var dropdown_exports = {};
   __export(dropdown_exports, {
@@ -15755,7 +15784,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   }
 
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
-  var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports, poll_controller_exports];
+  var modules = [button_exports, button_dropdown_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports, poll_controller_exports];
   var __default = modules;
 
   // base/components.js

data/app/assets/js/libs/alpine/directives/dropdown.js

@@ -16,7 +16,8 @@ export default function (Alpine) {
       const settings = buildConfig(modifiers);
       const result = expression ? evaluate(expression) : {};
       const directiveConfig = isObject(result) ? result : {};
-      let { triggerTarget, contentTarget, ...config } = directiveConfig;
+      let { triggerTarget, contentTarget, anchorTarget, ...config } =
+        directiveConfig;
 
       contentTarget =
         contentTarget || el.querySelector("[x-dropdown\\:content]");
@@ -25,6 +26,8 @@ export default function (Alpine) {
         : contentTarget;
       triggerTarget =
         triggerTarget || el.querySelector("[x-dropdown\\:trigger]") || el;
+      anchorTarget =
+        anchorTarget || el.querySelector("[x-dropdown\\:anchor]") || el;
 
       // Initialize the dropdown
 
@@ -50,7 +53,7 @@ export default function (Alpine) {
 
         setData(el, mixin);
 
-        const dropdown = (el.__x_dropdown = tippy(el, {
+        const dropdown = (el.__x_dropdown = tippy(anchorTarget, {
           theme: "coco-app-dropdown",
           placement: "bottom-start",
           offset: [0, 0],

data/app/components/coco/app/elements/alert/alert.css

@@ -66,7 +66,7 @@
       .alert-dismiss {
         @apply flex-none;
 
-        .coco-button .button-element {
+        .coco-button {
           @apply text-content-dark-2 hover:text-content-dark-1 bg-transparent hover:bg-white/10 transition;
         }
       }