coveragebook_components 0.10.0 → 0.10.1.beta.0

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

@@ -14779,6 +14779,169 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       }
     }
   });
+  var createSingleton = function createSingleton2(tippyInstances, optionalProps) {
+    var _optionalProps$popper;
+    if (optionalProps === void 0) {
+      optionalProps = {};
+    }
+    if (true) {
+      errorWhen(!Array.isArray(tippyInstances), ["The first argument passed to createSingleton() must be an array of", "tippy instances. The passed value was", String(tippyInstances)].join(" "));
+    }
+    var individualInstances = tippyInstances;
+    var references = [];
+    var triggerTargets = [];
+    var currentTarget;
+    var overrides = optionalProps.overrides;
+    var interceptSetPropsCleanups = [];
+    var shownOnCreate = false;
+    function setTriggerTargets() {
+      triggerTargets = individualInstances.map(function(instance) {
+        return normalizeToArray(instance.props.triggerTarget || instance.reference);
+      }).reduce(function(acc, item) {
+        return acc.concat(item);
+      }, []);
+    }
+    function setReferences() {
+      references = individualInstances.map(function(instance) {
+        return instance.reference;
+      });
+    }
+    function enableInstances(isEnabled) {
+      individualInstances.forEach(function(instance) {
+        if (isEnabled) {
+          instance.enable();
+        } else {
+          instance.disable();
+        }
+      });
+    }
+    function interceptSetProps(singleton2) {
+      return individualInstances.map(function(instance) {
+        var originalSetProps2 = instance.setProps;
+        instance.setProps = function(props) {
+          originalSetProps2(props);
+          if (instance.reference === currentTarget) {
+            singleton2.setProps(props);
+          }
+        };
+        return function() {
+          instance.setProps = originalSetProps2;
+        };
+      });
+    }
+    function prepareInstance(singleton2, target) {
+      var index = triggerTargets.indexOf(target);
+      if (target === currentTarget) {
+        return;
+      }
+      currentTarget = target;
+      var overrideProps = (overrides || []).concat("content").reduce(function(acc, prop) {
+        acc[prop] = individualInstances[index].props[prop];
+        return acc;
+      }, {});
+      singleton2.setProps(Object.assign({}, overrideProps, {
+        getReferenceClientRect: typeof overrideProps.getReferenceClientRect === "function" ? overrideProps.getReferenceClientRect : function() {
+          var _references$index;
+          return (_references$index = references[index]) == null ? void 0 : _references$index.getBoundingClientRect();
+        }
+      }));
+    }
+    enableInstances(false);
+    setReferences();
+    setTriggerTargets();
+    var plugin2 = {
+      fn: function fn3() {
+        return {
+          onDestroy: function onDestroy2() {
+            enableInstances(true);
+          },
+          onHidden: function onHidden2() {
+            currentTarget = null;
+          },
+          onClickOutside: function onClickOutside2(instance) {
+            if (instance.props.showOnCreate && !shownOnCreate) {
+              shownOnCreate = true;
+              currentTarget = null;
+            }
+          },
+          onShow: function onShow2(instance) {
+            if (instance.props.showOnCreate && !shownOnCreate) {
+              shownOnCreate = true;
+              prepareInstance(instance, references[0]);
+            }
+          },
+          onTrigger: function onTrigger2(instance, event) {
+            prepareInstance(instance, event.currentTarget);
+          }
+        };
+      }
+    };
+    var singleton = tippy(div(), Object.assign({}, removeProperties(optionalProps, ["overrides"]), {
+      plugins: [plugin2].concat(optionalProps.plugins || []),
+      triggerTarget: triggerTargets,
+      popperOptions: Object.assign({}, optionalProps.popperOptions, {
+        modifiers: [].concat(((_optionalProps$popper = optionalProps.popperOptions) == null ? void 0 : _optionalProps$popper.modifiers) || [], [applyStylesModifier])
+      })
+    }));
+    var originalShow = singleton.show;
+    singleton.show = function(target) {
+      originalShow();
+      if (!currentTarget && target == null) {
+        return prepareInstance(singleton, references[0]);
+      }
+      if (currentTarget && target == null) {
+        return;
+      }
+      if (typeof target === "number") {
+        return references[target] && prepareInstance(singleton, references[target]);
+      }
+      if (individualInstances.indexOf(target) >= 0) {
+        var ref = target.reference;
+        return prepareInstance(singleton, ref);
+      }
+      if (references.indexOf(target) >= 0) {
+        return prepareInstance(singleton, target);
+      }
+    };
+    singleton.showNext = function() {
+      var first = references[0];
+      if (!currentTarget) {
+        return singleton.show(0);
+      }
+      var index = references.indexOf(currentTarget);
+      singleton.show(references[index + 1] || first);
+    };
+    singleton.showPrevious = function() {
+      var last = references[references.length - 1];
+      if (!currentTarget) {
+        return singleton.show(last);
+      }
+      var index = references.indexOf(currentTarget);
+      var target = references[index - 1] || last;
+      singleton.show(target);
+    };
+    var originalSetProps = singleton.setProps;
+    singleton.setProps = function(props) {
+      overrides = props.overrides || overrides;
+      originalSetProps(props);
+    };
+    singleton.setInstances = function(nextInstances) {
+      enableInstances(true);
+      interceptSetPropsCleanups.forEach(function(fn3) {
+        return fn3();
+      });
+      individualInstances = nextInstances;
+      enableInstances(false);
+      setReferences();
+      setTriggerTargets();
+      interceptSetPropsCleanups = interceptSetProps(singleton);
+      singleton.setProps({
+        triggerTarget: triggerTargets
+      });
+    };
+    interceptSetPropsCleanups = interceptSetProps(singleton);
+    return singleton;
+  };
   var mouseCoords = {
     clientX: 0,
     clientY: 0
@@ -15250,13 +15413,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   module_default.plugin(notification_default);
   var alpine_default2 = module_default;
 
-  // ../../components/coco/base/button/button.js
+  // ../../components/coco/shared/button/button.js
   var button_exports = {};
   __export(button_exports, {
     default: () => button_default
   });
 
-  // coco.js
+  // shared/coco.js
   function CocoComponent(name, fn3) {
     const func = nameFunction(name, (...args) => {
       const data2 = fn3(...args);
@@ -15274,7 +15437,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     return func;
   }
 
-  // ../../components/coco/base/button/button.js
+  // ../../components/coco/shared/button/button.js
   var import_lodash2 = __toESM(require_lodash(), 1);
   var button_default = CocoComponent("button", (data2 = {}) => {
     return __spreadProps(__spreadValues({
@@ -15408,17 +15571,18 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       root: {
         "x-options": "options",
         "x-tooltip": "tooltipText",
-        "x-effect": "setTooltipText"
+        "x-effect": "setTooltipText",
+        ":disabled": "disabled"
       }
     });
   });
 
-  // ../../components/coco/base/button/button_dropdown.js
+  // ../../components/coco/shared/button/button_dropdown.js
   var button_dropdown_exports = {};
   __export(button_dropdown_exports, {
     default: () => button_dropdown_default
   });
-  var button_dropdown_default = CocoComponent("buttonDropdown", (data2 = {}) => {
+  var button_dropdown_default = CocoComponent("buttonDropdown", () => {
     return {
       dropdown: null,
       button: null,
@@ -15436,11 +15600,108 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         if (this.dropdown) {
           this.dropdown.show();
         }
+      },
+      /* bindings */
+      root: {
+        "@dropdown:show": "button.setState('active')",
+        "@dropdown:hide": "button.resetState()",
+        "@confirmation:confirm": "button.approveAndRun($event)",
+        "@confirmation:cancel": "button.cancelConfirmation($event)"
+      }
+    };
+  });
+
+  // ../../components/coco/shared/button_group/button_group.js
+  var button_group_exports = {};
+  __export(button_group_exports, {
+    default: () => button_group_default
+  });
+  var button_group_default = CocoComponent("appButtonGroup", () => {
+    return {
+      options: ["collapsible"],
+      ready: false,
+      containerWidth: 0,
+      contentWidth: 0,
+      collapsed: false,
+      singletonTooltip: null,
+      tooltipInstances: [],
+      get collapsible() {
+        return this.$options.collapsible !== false;
+      },
+      get buttons() {
+        const buttonElements = this.$el.querySelectorAll(
+          "[data-component='button']"
+        );
+        return Array.from(buttonElements).map((el) => getComponent(el));
+      },
+      get parent() {
+        return this.$root.parentElement;
+      },
+      init() {
+        if (this.collapsible) {
+          this.$nextTick(() => {
+            this.onResize();
+            this.createSingletonTooltip();
+            this.ready = true;
+          });
+        } else {
+          this.ready = true;
+        }
+        this.$watch("collapsed", (value) => {
+          this.buttons.forEach((button) => {
+            button.isCollapsed = value;
+          });
+          this.$nextTick(() => this.createSingletonTooltip());
+        });
+      },
+      createSingletonTooltip() {
+        this.destroySingletonTooltip();
+        this.tooltipInstances = this.buttons.map((button) => {
+          if (button.tippyInstance && button.shouldShowTooltip && button.shouldShowTooltip()) {
+            return button.tippyInstance;
+          }
+        }).filter((t2) => t2);
+        this.singletonTooltip = createSingleton(this.tooltipInstances, {
+          theme: "coco-tooltip",
+          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;
+        this.containerWidth = Math.ceil(this.parent.offsetWidth);
+        if (this.collapsed) {
+          if (this.containerWidth > this.contentWidth) {
+            this.collapsed = false;
+          }
+        } else {
+          if (this.containerWidth < this.contentWidth) {
+            this.collapsed = true;
+          } else {
+            const contentWidth = Math.ceil(this.$refs.buttons.scrollWidth);
+            this.contentWidth = contentWidth;
+          }
+        }
+      },
+      destroy() {
+        if (this.singletonTooltip) {
+          this.singletonTooltip.destroy();
+          this.singletonTooltip = null;
+        }
       }
     };
   });
 
-  // ../../components/coco/base/dropdown/dropdown.js
+  // ../../components/coco/shared/dropdown/dropdown.js
   var dropdown_exports = {};
   __export(dropdown_exports, {
     default: () => dropdown_default2
@@ -15449,7 +15710,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     return {};
   });
 
-  // ../../components/coco/base/icon/icon.js
+  // ../../components/coco/shared/icon/icon.js
   var icon_exports = {};
   __export(icon_exports, {
     default: () => icon_default
@@ -15475,7 +15736,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // ../../components/coco/base/image_uploader/image_uploader.js
+  // ../../components/coco/shared/image_uploader/image_uploader.js
   var image_uploader_exports = {};
   __export(image_uploader_exports, {
     default: () => image_uploader_default
@@ -15548,7 +15809,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // ../../components/coco/base/modal/modal.js
+  // ../../components/coco/shared/modal/modal.js
   var modal_exports = {};
   __export(modal_exports, {
     default: () => modal_default
@@ -15565,7 +15826,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     }
   }
 
-  // ../../components/coco/base/modal/modal.js
+  // ../../components/coco/shared/modal/modal.js
   var modal_default = CocoComponent("modal", () => {
     return {
       open: false,
@@ -15651,7 +15912,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // ../../components/coco/base/modal_dialog/modal_dialog.js
+  // ../../components/coco/shared/modal_dialog/modal_dialog.js
   var modal_dialog_exports = {};
   __export(modal_dialog_exports, {
     default: () => modal_dialog_default
@@ -15685,7 +15946,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // ../../components/coco/base/modal_lightbox/modal_lightbox.js
+  // ../../components/coco/shared/modal_lightbox/modal_lightbox.js
   var modal_lightbox_exports = {};
   __export(modal_lightbox_exports, {
     default: () => modal_lightbox_default
@@ -15719,7 +15980,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // ../../components/coco/base/poll_controller/poll_controller.js
+  // ../../components/coco/shared/poll_controller/poll_controller.js
   var poll_controller_exports = {};
   __export(poll_controller_exports, {
     default: () => poll_controller_default
@@ -15783,11 +16044,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     }
   }
 
-  // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
-  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];
+  // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/shared|@sharedComponents/**/*.js
+  var modules = [button_exports, button_dropdown_exports, button_group_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
+  // shared/components.js
   var components_default = registerComponents(__default);
 
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js

data/app/assets/css/app/tippy.css

@@ -1,6 +1,6 @@
 @layer utilities {
   .tippy-dropdown-box {
-    @apply bg-background-light-2 text-gray-900 text-label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
+    @apply bg-background-light-2 text-gray-900 coco-label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
   }
 }
 

data/app/assets/css/app.css

@@ -1,9 +1,9 @@
 @import "./app/config";
-@import "./base/base";
+@import "./base";
 
-@import "./app/utilities";
+@import "./app/utils";
 @import "./app/tippy";
 
-@import-glob "@baseComponents/**/*.css";
+@import-glob "@sharedComponents/**/*.css";
 @import-glob "@appComponents/**/*.css";
 @import-glob "@bookComponents/**/*.css";

data/app/assets/css/{base/base.css → base.css}

@@ -2,13 +2,10 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "../libs/tippy";
-@import "./utils/colors";
-@import "./utils/icons";
-@import "./utils/text";
-@import "./components/tooltip";
-@import "./components/dropdown";
-@import "./components/coco";
+@import "./shared/utils/colors";
+@import "./shared/utils/icons";
+@import "./shared/utils/text";
+@import "./shared/tippy";
 
 @layer base {
   :root {
@@ -34,4 +31,14 @@
   [x-cloak] {
     display: none !important;
   }
+
+  [data-coco] {
+    @apply text-content-dark-1 font-body;
+  }
+
+  [x-dropdown] {
+    [x-dropdown\:content] {
+      @apply hidden;
+    }
+  }
 }

data/app/assets/css/book.css

@@ -1,5 +1,5 @@
 @import "./book/config";
-@import "./base/base";
+@import "./base";
 
-@import-glob "@baseComponents/**/*.css";
+@import-glob "@sharedComponents/**/*.css";
 @import-glob "@bookComponents/**/*.css";

data/app/assets/css/{libs → shared}/tippy.css

@@ -2,13 +2,14 @@
 @import "tippy.js/dist/svg-arrow";
 @import "tippy.js/dist/border.css";
 
+/* Tippy  */
 @layer components {
   [data-tippy-root] {
     @apply !z-[10010];
   }
 
   .tippy-box[data-theme^="coco-"] {
-    @apply bg-transparent text-gray-900 text-label-md whitespace-normal;
+    @apply bg-transparent text-gray-900 coco-label-md whitespace-normal;
 
     .tippy-content {
       @apply p-0;
@@ -24,4 +25,22 @@
       @apply fill-transparent;
     }
   }
+
+  /* Tooltip theme */
+  .tippy-box[data-theme~="coco-tooltip"] {
+    @apply bg-background-dark-2 text-white coco-label-sm rounded-lg shadow-xl;
+
+    .tippy-content {
+      @apply px-3 py-2 truncate max-w-[240px];
+    }
+
+    /* arrow background */
+    .tippy-svg-arrow > svg:first-child {
+      @apply hidden;
+    }
+
+    .tippy-svg-arrow > svg:last-child {
+      @apply fill-gray-900;
+    }
+  }
 }

data/app/assets/css/shared/utils/text.css

@@ -0,0 +1,143 @@
+@layer utilities {
+  /* paragraphs */
+
+  .coco-para-lg {
+    @apply font-body text-para-lg;
+  }
+
+  .coco-para-md {
+    @apply font-body text-para-md;
+  }
+
+  .coco-para-sm {
+    @apply font-body text-para-sm;
+  }
+
+  .coco-para-xs {
+    @apply font-body text-para-xs;
+  }
+
+  /* labels */
+
+  .coco-label-lg {
+    @apply font-body text-label-lg font-semibold;
+  }
+
+  .coco-label-md {
+    @apply font-body text-label-md font-semibold;
+  }
+
+  .coco-label-sm {
+    @apply font-body text-label-sm font-semibold;
+  }
+
+  .coco-label-xs {
+    @apply font-body text-label-xs font-semibold;
+  }
+
+  .coco-label-xxs {
+    @apply font-body text-label-xxs font-semibold;
+  }
+
+  /* standard headings */
+
+  .coco-heading-1 {
+    @apply font-body text-heading-1 font-bold;
+  }
+
+  .coco-heading-2 {
+    @apply font-body text-heading-2 font-bold;
+  }
+
+  .coco-heading-3 {
+    @apply font-body text-heading-3 font-bold;
+  }
+
+  .coco-heading-4 {
+    @apply font-body text-heading-4 font-bold;
+  }
+
+  .coco-heading-5 {
+    @apply font-body text-heading-5 font-bold;
+  }
+
+  .coco-heading-6 {
+    @apply font-body text-heading-6 font-bold;
+  }
+
+  /* standard subheadings */
+
+  .coco-subheading-1 {
+    @apply font-body text-subheading-1 font-[500];
+  }
+
+  .coco-subheading-2 {
+    @apply font-body text-subheading-2 font-[500];
+  }
+
+  .coco-subheading-3 {
+    @apply font-body text-subheading-3 font-[500];
+  }
+
+  .coco-subheading-4 {
+    @apply font-body text-subheading-4 font-[500];
+  }
+
+  /* display headings */
+
+  .coco-display-1 {
+    @apply font-display text-display-1 font-bold;
+  }
+
+  .coco-display-2 {
+    @apply font-display text-display-2 font-bold;
+  }
+
+  .coco-display-3 {
+    @apply font-display text-display-3 font-bold;
+  }
+
+  .coco-display-4 {
+    @apply font-display text-display-4 font-bold;
+  }
+
+  /* branded headings */
+
+  .coco-branded-heading-1 {
+    @apply font-branded text-heading-1 font-bold;
+  }
+
+  .coco-branded-heading-2 {
+    @apply font-branded text-heading-2 font-bold;
+  }
+
+  .coco-branded-heading-3 {
+    @apply font-branded text-heading-3 font-bold;
+  }
+
+  .coco-branded-heading-4 {
+    @apply font-branded text-heading-4 font-bold;
+  }
+
+  .coco-branded-heading-5 {
+    @apply font-branded text-heading-5 font-bold;
+  }
+
+  /* branded display headings */
+
+  .coco-branded-display-1 {
+    @apply font-branded text-relaxed-display-1 font-bold;
+  }
+
+  .coco-branded-display-2 {
+    @apply font-branded text-relaxed-display-2 font-bold;
+  }
+
+  .coco-branded-display-3 {
+    @apply font-branded text-relaxed-display-3 font-bold;
+  }
+
+  .coco-branded-display-4 {
+    @apply font-branded text-relaxed-display-4 font-bold;
+  }
+}

data/app/assets/js/app.js

@@ -3,11 +3,11 @@ import packageJSON from "@/package.json" assert { type: "json" };
 console.info("Initializing Coco JS", packageJSON.version);
 
 import "container-query-polyfill";
-import Alpine from "@libs/alpine";
+import Alpine from "@assets/js/libs/alpine";
 
 import "./app/setup";
 
-import "./base/components";
+import "./shared/components";
 import "./book/components";
 import "./app/components";
 

data/app/assets/js/book.js

@@ -1,8 +1,8 @@
 import "container-query-polyfill";
 
-import Alpine from "@libs/alpine";
+import Alpine from "@assets/js/libs/alpine";
 
-import "./base/components";
+import "./shared/components";
 import "./book/components";
 
 Alpine.start();

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

@@ -1,4 +1,4 @@
-import tippy from "@libs/tippy";
+import tippy from "@assets/js/libs/tippy";
 import buildConfig from "../utils/tippy_modifiers";
 import { isObject } from "@helpers/lang";
 import { isNode } from "@helpers/dom";

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

@@ -1,4 +1,4 @@
-import tippy from "@libs/tippy";
+import tippy from "@assets/js/libs/tippy";
 import buildConfig from "../utils/tippy_modifiers";
 import { setData } from "@helpers/alpine";