coveragebook_components 0.7.1 → 0.7.3

data/app/assets/js/base/mixins/dropdown.js

@@ -1,69 +0,0 @@
-import { tippy, hideOnEsc } from "@libs/tippy";
-
-export default function withDropdown(props = {}) {
-  function withDropdownMixin(component) {
-    const tippyEl = component.$refs.dropdownTrigger || component.$root;
-
-    const dropdown = tippy(tippyEl, {
-      trigger: "click",
-      interactive: true,
-      animation: false,
-      content: component.$refs.dropdownPanel,
-      plugins: [hideOnEsc],
-
-      onMount() {
-        if (component.onDropdownMount) {
-          component.onDropdownMount();
-        }
-      },
-
-      onCreate() {
-        if (component.onDropdownCreate) {
-          component.onDropdownCreate();
-        }
-      },
-
-      onShow: () => {
-        component.dropdown.open = true;
-        if (component.onDropdownShow) {
-          return component.onDropdownShow();
-        }
-
-        if (component.setState) {
-          component.setState("active");
-        }
-      },
-
-      onHide: () => {
-        component.dropdown.open = false;
-        if (component.onDropdownHide) {
-          component.onDropdownHide();
-        }
-        if (component.resetState) {
-          component.resetState();
-        }
-      },
-
-      ...props,
-    });
-
-    return Object.assign(component, {
-      dropdown: Alpine.reactive({
-        instance: dropdown,
-        open: false,
-
-        hide() {
-          this.instance.hide();
-        },
-
-        show() {
-          this.instance.show();
-        },
-      }),
-    });
-  }
-
-  withDropdownMixin.props = ["dropdown"];
-
-  return withDropdownMixin;
-}

data/app/assets/js/base/mixins/index.js

@@ -1,17 +0,0 @@
-import withAttrObserver from "./attr-observer";
-import withAttrs from "./attrs";
-import withDropdown from "./dropdown";
-import withOptions from "./options";
-import withSizeObserver from "./size-observer";
-import withTooltip from "./tooltip";
-import withUndo from "./undo";
-
-export {
-  withAttrObserver,
-  withAttrs,
-  withDropdown,
-  withOptions,
-  withSizeObserver,
-  withTooltip,
-  withUndo,
-};

data/app/assets/js/base/mixins/options.js

@@ -1,76 +0,0 @@
-import { kebabCase, camelCase } from "lodash";
-
-export default function withOptions(props = {}) {
-  return function (component) {
-    if (!component.options) {
-      return component;
-    }
-
-    const el = component.$root;
-    const oldDestroy = component.destroy;
-    const optionsProps = component.options || {};
-    const optionsAttrs = Object.keys(optionsProps).map(
-      (name) => `data-${kebabCase(name)}`
-    );
-
-    Object.keys(optionsProps).forEach((name) => {
-      const attrName = `data-${kebabCase(name)}`;
-      if (el.hasAttribute(attrName)) {
-        component.options[name] = el.getAttribute(attrName);
-      }
-    });
-
-    let attrObserver = new MutationObserver((mutationsList) => {
-      for (const mutation of mutationsList) {
-        if (
-          mutation.type !== "attributes" ||
-          !optionsAttrs.includes(mutation.attributeName)
-        ) {
-          return;
-        }
-
-        const propName = camelCase(mutation.attributeName.replace("data-", ""));
-        let value = mutation.target.getAttribute(mutation.attributeName);
-
-        switch (value) {
-          case "true":
-            value = true;
-            break;
-          case "false":
-            value = false;
-            break;
-        }
-
-        component.options[propName] = value;
-      }
-    });
-
-    Object.assign(
-      component,
-      Alpine.reactive({
-        destroy() {
-          attrObserver.disconnect();
-          attrObserver = null;
-
-          if (oldDestroy) {
-            oldDestroy.call(this);
-          }
-        },
-      })
-    );
-
-    attrObserver.observe(el, { attributes: true });
-
-    component.$watch("options", (options, oldOptions) => {
-      for (const [key, value] of Object.entries(options)) {
-        el.setAttribute(`data-${kebabCase(key)}`, value);
-
-        if (component.onOptionChange) {
-          component.onOptionChange(key, value);
-        }
-      }
-    });
-
-    return component;
-  };
-}

data/app/assets/js/base/mixins/size-observer.js

@@ -1,34 +0,0 @@
-export default function withSizeObserver(props = {}) {
-  return function (component) {
-    const resizeTarget = props.target || component.$root;
-    const oldDestroy = component.destroy;
-
-    const sizeObserver = Alpine.reactive({
-      observer: null,
-      handler(target) {
-        if (component.onResize) {
-          component.onResize(target.contentRect, target);
-        }
-      },
-    });
-
-    sizeObserver.observer = new ResizeObserver((entries) =>
-      sizeObserver.handler(entries[0])
-    );
-
-    Object.assign(component, {
-      destroy() {
-        sizeObserver.observer.disconnect();
-        sizeObserver.observer = null;
-
-        if (oldDestroy) {
-          oldDestroy.call(this);
-        }
-      },
-    });
-
-    sizeObserver.observer.observe(resizeTarget);
-
-    return component;
-  };
-}

data/app/assets/js/base/mixins/tooltip.js

@@ -1,81 +0,0 @@
-import tippy from "@libs/tippy";
-
-export default function withTooltip(props = {}) {
-  function withTooltipMixin(component) {
-    const el = component.$root;
-    const oldDestroy = component.destroy;
-
-    if (!component.hasData("tippy-content")) {
-      component.setData("tippy-disabled", true);
-    }
-
-    const content = component.getData("tippy-content");
-    const tooltip = tippy(el, {
-      theme: "coco-tooltip",
-
-      onShow() {
-        if (component.onTooltipShow) {
-          return component.onTooltipShow();
-        } else {
-          return component.refuteData("tippy-disabled", true);
-        }
-      },
-
-      content() {
-        return content;
-      },
-
-      ...props,
-    });
-
-    Object.assign(
-      component,
-      Alpine.reactive({
-        tooltip: {
-          content,
-          instance: tooltip,
-          originalContent: content,
-        },
-
-        getTooltip() {
-          return this.tooltip;
-        },
-
-        setTooltip(content) {
-          this.tooltip.content = content;
-        },
-
-        resetTooltip() {
-          this.tooltip.content = this.tooltip.originalContent;
-        },
-
-        destroy() {
-          if (this.tooltip && this.tooltip.instance) {
-            this.tooltip.instance.destroy();
-            this.tooltip = null;
-          }
-
-          if (oldDestroy) {
-            oldDestroy.call(this);
-          }
-        },
-      })
-    );
-
-    Alpine.effect(() => {
-      if (component.tooltip && component.tooltip.instance) {
-        const value = component.tooltip.content;
-        if (value !== null) {
-          component.tooltip.instance.setContent(value);
-          component.setData("tippy-content", value);
-        }
-      }
-    });
-
-    return component;
-  }
-
-  withTooltipMixin.props = ["tooltip"];
-
-  return withTooltipMixin;
-}