coveragebook_components 0.7.1 → 0.7.2

data/app/components/coco/app/elements/snackbar/snackbar.js

@@ -2,8 +2,6 @@ import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("appSnackbar", () => {
   return {
-    use: false,
-
     notificationType: "snackbar",
     options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
 

data/app/components/coco/app/elements/toast/toast.js

@@ -2,8 +2,6 @@ import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("appToast", () => {
   return {
-    use: false,
-
     notificationType: "toast",
     options: ["show", "dismiss", "showDelay", "dismissDelay", "position"],
 

data/app/components/coco/base/button/button.js

@@ -3,8 +3,6 @@ import { camelCase } from "lodash";
 
 export default CocoComponent("button", (data = {}) => {
   return {
-    use: false,
-
     options: ["state", "confirm", "size", "disabled", "collapsible"],
 
     isCollapsed: false,

data/app/components/coco/base/dropdown/dropdown.js

@@ -1,7 +1,5 @@
 import { CocoComponent } from "@js/coco";
 
 export default CocoComponent("dropdown", () => {
-  return {
-    use: false,
-  };
+  return {};
 });

data/app/helpers/coco/base_helper.rb

@@ -39,10 +39,10 @@ module Coco
       end
     end
 
-    def coco_modal_link(*, data: {}, modal: nil, **kwargs, &)
+    def coco_link_to_modal(*, data: {}, modal: nil, **kwargs, &)
       kwargs[:data] = coco_modal_data_attributes(modal || "default").merge(data)
 
-      link_to(*, **kwargs, &)
+      coco_link_to(*, **kwargs, &)
     end
 
     def coco_modal_frame_id(name = "default")

data/app/helpers/coco/url_helper.rb

@@ -12,7 +12,7 @@ module Coco
 
       href = Coco::ActionViewHelper.url_target(name, options)
 
-      link = Coco::Link::Component.new(href: href, **html_options)
+      link = Coco::App::Elements::Link.new(href: href, **html_options.symbolize_keys!)
       link = link.with_content(name) unless block
 
       render(link, &block)
@@ -23,7 +23,7 @@ module Coco
       options ||= {}
       html_options ||= {}
 
-      button = Coco::App::Elements::FormButton.new(action: options, **html_options)
+      button = Coco::App::Elements::FormButton.new(action: options, **html_options.symbolize_keys!)
       button = button.with_content(content) unless block
 
       render(button, &block)

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.1"
+  VERSION = "0.7.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.7.2
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-22 00:00:00.000000000 Z
+date: 2023-09-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1323,17 +1323,7 @@ files:
 - app/assets/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/js/app.js
 - app/assets/js/app/components.js
-- app/assets/js/app/mixins/dropdown.js
-- app/assets/js/app/mixins/index.js
 - app/assets/js/base/components.js
-- app/assets/js/base/mixins/attr-observer.js
-- app/assets/js/base/mixins/attrs.js
-- app/assets/js/base/mixins/dropdown.js
-- app/assets/js/base/mixins/index.js
-- app/assets/js/base/mixins/options.js
-- app/assets/js/base/mixins/size-observer.js
-- app/assets/js/base/mixins/tooltip.js
-- app/assets/js/base/mixins/undo.js
 - app/assets/js/book.js
 - app/assets/js/book/components.js
 - app/assets/js/coco.js
@@ -1345,13 +1335,14 @@ files:
 - app/assets/js/helpers/path.js
 - app/assets/js/helpers/screenshot.js
 - app/assets/js/helpers/turbo_events.js
+- app/assets/js/libs/alpine/directives/destroy.js
+- app/assets/js/libs/alpine/directives/dimensions.js
+- app/assets/js/libs/alpine/directives/dropdown.js
+- app/assets/js/libs/alpine/directives/notification.js
+- app/assets/js/libs/alpine/directives/options.js
+- app/assets/js/libs/alpine/directives/tooltip.js
+- app/assets/js/libs/alpine/directives/undo.js
 - app/assets/js/libs/alpine/index.js
-- app/assets/js/libs/alpine/plugins/destroy.js
-- app/assets/js/libs/alpine/plugins/dimensions.js
-- app/assets/js/libs/alpine/plugins/dropdown.js
-- app/assets/js/libs/alpine/plugins/notification.js
-- app/assets/js/libs/alpine/plugins/options.js
-- app/assets/js/libs/alpine/plugins/tooltip.js
 - app/assets/js/libs/alpine/utils/tippy_modifiers.js
 - app/assets/js/libs/tippy/index.js
 - app/assets/js/libs/tippy/plugins/hide_on_esc.js

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

@@ -1,18 +0,0 @@
-import withDropdown from "@js/base/mixins/dropdown";
-
-export default function withAppDropdown(props = {}) {
-  const initDropdown = withDropdown({
-    theme: "coco-app-dropdown",
-    placement: "bottom-start",
-    offset: [0, 0],
-    ...props,
-  });
-
-  function withAppDropdownMixin(component) {
-    return initDropdown(component);
-  }
-
-  withAppDropdownMixin.props = initDropdown.props;
-
-  return withAppDropdownMixin;
-}

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

@@ -1,3 +0,0 @@
-import withAppDropdown from "./dropdown";
-
-export { withAppDropdown };

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

@@ -1,54 +0,0 @@
-const ignoredAttributes = ["class", "style"];
-
-export default function withAttrObserver(props = {}) {
-  return function (component) {
-    const oldDestroy = component.destroy;
-    const toIgnore = props.ignore || ignoredAttributes;
-
-    const attrObserver = Alpine.reactive({
-      observer: null,
-      handler(attrName, newValue, oldValue, target) {
-        if (component.onAttrChange) {
-          component.onAttrChange(attrName, newValue, oldValue, target);
-        }
-      },
-    });
-
-    attrObserver.observer = new MutationObserver((mutationsList) => {
-      for (const mutation of mutationsList) {
-        if (
-          mutation.type !== "attributes" ||
-          toIgnore.includes(mutation.attributeName)
-        ) {
-          return;
-        }
-
-        const { target } = mutation;
-
-        attrObserver.handler(
-          mutation.attributeName,
-          target.getAttribute(mutation.attributeName),
-          mutation.oldValue,
-          target
-        );
-      }
-    });
-
-    Object.assign(component, {
-      destroy() {
-        attrObserver.observer.disconnect();
-        attrObserver.observer = null;
-
-        if (oldDestroy) {
-          oldDestroy.call(this);
-        }
-      },
-    });
-
-    attrObserver.observer.observe(component.$root, { attributes: true });
-
-    return component;
-  };
-}
-
-export { ignoredAttributes };

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

@@ -1,58 +0,0 @@
-export default function withAttrs(props = {}) {
-  return function (component) {
-    return Object.assign(
-      component,
-      Alpine.reactive({
-        getAttr(name) {
-          return this.$root.getAttribute(name);
-        },
-
-        setAttr(name, value) {
-          this.$root.setAttribute(name, value);
-          return this;
-        },
-
-        hasAttr(name) {
-          return this.$root.hasAttribute(name);
-        },
-
-        removeAttr(name) {
-          component.$root.removeAttribute(name);
-          return this;
-        },
-
-        assertAttr(name, testValue) {
-          return this.$root.getAttribute(name) === String(testValue);
-        },
-
-        refuteAttr(name, testValue) {
-          return !this.assertAttr(name, testValue);
-        },
-
-        getData(name) {
-          return this.getAttr(`data-${name}`);
-        },
-
-        setData(name, value) {
-          return this.setAttr(`data-${name}`, value);
-        },
-
-        hasData(name) {
-          return this.hasAttr(`data-${name}`);
-        },
-
-        removeData(name) {
-          return this.removeAttr(`data-${name}`);
-        },
-
-        assertData(name, testValue) {
-          return this.assertAttr(`data-${name}`, testValue);
-        },
-
-        refuteData(name, testValue) {
-          return !this.assertData(name, testValue);
-        },
-      })
-    );
-  };
-}

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;
-}