coveragebook_components 0.7.0 → 0.7.2

data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb

@@ -1,6 +1,7 @@
 <%= render component_tag(x: {
   data: x_data("appSlideEditor", alpine_props),
-  ":class": "{ready}"
+  ":class": "{ready}",
+  "undo": true
 }) do %>
   <div class="editor-toolbar">
     <%= coco_toolbar do |toolbar| %>

data/app/components/coco/app/blocks/slide_editor/slide_editor.js

@@ -3,7 +3,6 @@ import { getData } from "@helpers/alpine";
 import { captureElementScreenshot } from "@helpers/screenshot";
 import { isDark } from "@helpers/color";
 import { wasSuccessful } from "@helpers/turbo_events";
-import { withUndo } from "@js/base/mixins";
 
 export default CocoComponent("appSlideEditor", (data) => {
   const initialData = {
@@ -28,8 +27,6 @@ export default CocoComponent("appSlideEditor", (data) => {
   };
 
   return {
-    use: [withUndo()],
-
     ...initialData,
 
     saved: { ...initialData },

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

@@ -5,8 +5,6 @@ import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("appColorPicker", ({ selected }) => {
   return {
-    use: false,
-
     selectedColor: selected,
     display: selected,
     updating: false,

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

@@ -4,8 +4,6 @@ import { basename } from "@helpers/path";
 
 export default CocoComponent("appImagePicker", ({ src }) => {
   return {
-    use: [],
-
     image: {
       name: basename(src),
       file: null,

data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.html.erb

@@ -8,7 +8,8 @@
         "@keydown.enter.prevent": (true unless multiline?),
         "@input": "onResize",
         ref: "textarea",
-        "model.fill.debounce": "value"
+        "model.fill.debounce": "value",
+        "dimensions": "onResize"
       }),
       **@textarea_args
     ) %>

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

@@ -1,10 +1,7 @@
 import { CocoComponent } from "@js/coco";
-import { withSizeObserver } from "@js/base/mixins";
 
 export default CocoComponent("appSeamlessTextarea", () => {
   return {
-    use: [withSizeObserver()],
-
     height: null,
     observer: null,
     value: null,
@@ -27,11 +24,8 @@ export default CocoComponent("appSeamlessTextarea", () => {
       const textarea = this.$refs.textarea;
 
       if (textarea) {
-        const styles = window.getComputedStyle(textarea);
-        const fontSize = styles.getPropertyValue("font-size");
-
         textarea.style.height = "4px";
-        let newHeight = textarea.scrollHeight;
+        const newHeight = textarea.scrollHeight;
         textarea.style.height = `${newHeight}px`;
 
         if (this.height !== newHeight) {

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/components/coco/base/modal/modal.css

@@ -7,7 +7,7 @@
     }
 
     .modal-container {
-      @apply relative flex min-h-screen justify-center items-center z-[10000] p-8;
+      @apply relative flex min-h-screen justify-center items-center z-[10000] p-2 sm:p-8;
     }
 
     .modal-content {

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -5,7 +5,7 @@
 
     .modal-dialog-header {
       @apply relative flex items-center justify-center;
-      @apply px-8 h-16 border-b border-gray-300 rounded-t-xl bg-white;
+      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-gray-300 rounded-t-xl bg-white;
     }
 
     .modal-dialog-title {
@@ -13,12 +13,12 @@
     }
 
     .modal-dialog-close {
-      @apply flex-none block p-2 absolute top-1/2 right-3 -translate-y-1/2;
+      @apply flex-none block p-2 absolute top-1/2 right-1 sm:right-3 -translate-y-1/2;
       @apply focus:ring-0 focus:outline-none text-content-dark-muted hover:text-content-dark-2;
     }
 
     .modal-dialog-content {
-      @apply px-8 py-6 rounded-xl bg-background-light-3;
+      @apply px-4 sm:px-8 py-4 sm:py-6 rounded-xl bg-background-light-3;
     }
 
     .modal-dialog-header + .modal-dialog-content {

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.0"
+  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.0
+  version: 0.7.2
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-21 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;
-}