coveragebook_components 0.7.1 → 0.7.2

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

@@ -4591,7 +4591,7 @@
             }
             return baseRandom(lower, upper);
           }
-          var camelCase6 = createCompounder(function(result2, word, index) {
+          var camelCase5 = createCompounder(function(result2, word, index) {
             word = word.toLowerCase();
             return result2 + (index ? capitalize2(word) : word);
           });
@@ -4619,7 +4619,7 @@
             string = toString(string);
             return string && reHasRegExpChar.test(string) ? string.replace(reRegExpChar, "\\$&") : string;
           }
-          var kebabCase5 = createCompounder(function(result2, word, index) {
+          var kebabCase4 = createCompounder(function(result2, word, index) {
             return result2 + (index ? "-" : "") + word.toLowerCase();
           });
           var lowerCase = createCompounder(function(result2, word, index) {
@@ -5203,7 +5203,7 @@
           mixin(lodash, lodash);
           lodash.add = add2;
           lodash.attempt = attempt;
-          lodash.camelCase = camelCase6;
+          lodash.camelCase = camelCase5;
           lodash.capitalize = capitalize2;
           lodash.ceil = ceil;
           lodash.clamp = clamp;
@@ -5282,7 +5282,7 @@
           lodash.isWeakMap = isWeakMap;
           lodash.isWeakSet = isWeakSet;
           lodash.join = join;
-          lodash.kebabCase = kebabCase5;
+          lodash.kebabCase = kebabCase4;
           lodash.last = last;
           lodash.lastIndexOf = lastIndexOf;
           lodash.lowerCase = lowerCase;
@@ -11474,8 +11474,25 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   }
   var M2 = l2;
 
-  // libs/alpine/plugins/options.js
-  var import_lodash = __toESM(require_lodash(), 1);
+  // helpers/alpine.js
+  function registerComponents(components) {
+    document.addEventListener("alpine:init", () => {
+      components.forEach((module) => {
+        if (module.default && module.default.component === true) {
+          Alpine.data(module.default.name, module.default);
+        }
+      });
+    });
+    return components;
+  }
+  function getData(el) {
+    const root = Alpine.closestRoot(el);
+    return root ? Alpine.$data(root) : null;
+  }
+  function setData(el, newData) {
+    const data2 = getData(el);
+    return data2 ? Object.assign(data2, newData) : null;
+  }
 
   // helpers/lang.js
   function nameFunction(name, body) {
@@ -11494,6 +11511,100 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
     !isNaN(parseFloat(str));
   }
+  function roughSizeOfObject(object) {
+    const objectList = [];
+    const stack = [object];
+    let bytes = 0;
+    while (stack.length) {
+      const value = stack.pop();
+      if (typeof value === "boolean") {
+        bytes += 4;
+      } else if (typeof value === "string") {
+        bytes += value.length * 2;
+      } else if (typeof value === "number") {
+        bytes += 8;
+      } else if (typeof value === "object" && objectList.indexOf(value) === -1) {
+        objectList.push(value);
+        for (var i2 in value) {
+          stack.push(value[i2]);
+        }
+      }
+    }
+    return bytes;
+  }
+
+  // libs/alpine/directives/undo.js
+  function undo_default(Alpine3) {
+    const maxHistorySize = 100;
+    Alpine3.directive("undo", (el, { expression }, { evaluate: evaluate2 }) => {
+      const data2 = getData(el);
+      const history = Alpine3.reactive({
+        stack: [],
+        stackPos: -1,
+        adding: false,
+        clear() {
+          history.stack.length = 0;
+          history.stackPos = -1;
+        },
+        add(name, newValue, oldValue) {
+          if (!history.adding && newValue !== oldValue) {
+            if (history.stackPos < history.stackSize - 1) {
+              const stack = Alpine3.raw(history.stack);
+              history.stack = stack.slice(0, history.stackPos + 1);
+            }
+            history.stack.push({ name, newValue, oldValue });
+            if (history.stackSize > maxHistorySize) {
+              history.stack.pop();
+            } else {
+              history.stackPos++;
+            }
+          }
+        },
+        undo() {
+          if (!data2.undo) {
+            console.error("Missing `undo` method");
+            return;
+          }
+          if (history.undoable) {
+            history.adding = true;
+            const entry = history.stack[history.stackPos];
+            data2.undo(entry.name, entry.oldValue);
+            history.stackPos--;
+            this.$nextTick(() => history.adding = false);
+          }
+        },
+        redo() {
+          if (!data2.redo) {
+            console.error("Missing `redo` method");
+            return;
+          }
+          if (history.redoable) {
+            history.adding = true;
+            history.stackPos++;
+            const entry = history.stack[history.stackPos];
+            data2.redo(entry.name, entry.newValue);
+            this.$nextTick(() => history.adding = false);
+          }
+        },
+        get undoable() {
+          return history.stackPos >= 0;
+        },
+        get redoable() {
+          return history.stackPos < history.stackSize - 1;
+        },
+        get stackSize() {
+          return history.stack.length;
+        },
+        get stackMemoryUsage() {
+          return roughSizeOfObject(history.stack);
+        }
+      });
+      setData(el, { history });
+    });
+  }
+
+  // libs/alpine/directives/options.js
+  var import_lodash = __toESM(require_lodash(), 1);
 
   // helpers/dom.js
   function castAttributeValue(value) {
@@ -11512,27 +11623,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     return typeof Node === "object" ? o2 instanceof Node : o2 && typeof o2 === "object" && typeof o2.nodeType === "number" && typeof o2.nodeName === "string";
   }
 
-  // helpers/alpine.js
-  function registerComponents(components) {
-    document.addEventListener("alpine:init", () => {
-      components.forEach((module) => {
-        if (module.default && module.default.component === true) {
-          Alpine.data(module.default.name, module.default);
-        }
-      });
-    });
-    return components;
-  }
-  function getData(el) {
-    const root = Alpine.closestRoot(el);
-    return root ? Alpine.$data(root) : null;
-  }
-  function setData(el, newData) {
-    const data2 = getData(el);
-    return data2 ? Object.assign(data2, newData) : null;
-  }
-
-  // libs/alpine/plugins/options.js
+  // libs/alpine/directives/options.js
   function options_default(Alpine3) {
     Alpine3.directive(
       "options",
@@ -14541,7 +14632,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     return config;
   }
 
-  // libs/alpine/plugins/tooltip.js
+  // libs/alpine/directives/tooltip.js
   function tooltip_default(Alpine3) {
     Alpine3.directive(
       "tooltip",
@@ -14597,7 +14688,18 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     ).before("bind");
   }
 
-  // libs/alpine/plugins/dropdown.js
+  // libs/alpine/directives/destroy.js
+  function destroy_default(Alpine3) {
+    Alpine3.directive(
+      "destroy",
+      (el, { expression }, { evaluateLater: evaluateLater2, cleanup: cleanup2 }) => {
+        const clean2 = evaluateLater2(expression);
+        cleanup2(() => clean2());
+      }
+    );
+  }
+
+  // libs/alpine/directives/dropdown.js
   function dropdown_default(Alpine3) {
     Alpine3.directive(
       "dropdown",
@@ -14657,18 +14759,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     ).before("bind");
   }
 
-  // libs/alpine/plugins/destroy.js
-  function destroy_default(Alpine3) {
-    Alpine3.directive(
-      "destroy",
-      (el, { expression }, { evaluateLater: evaluateLater2, cleanup: cleanup2 }) => {
-        const clean2 = evaluateLater2(expression);
-        cleanup2(() => clean2());
-      }
-    );
-  }
-
-  // libs/alpine/plugins/dimensions.js
+  // libs/alpine/directives/dimensions.js
   function dimensions_default(Alpine3) {
     Alpine3.directive(
       "dimensions",
@@ -14705,7 +14796,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     );
   }
 
-  // libs/alpine/plugins/notification.js
+  // libs/alpine/directives/notification.js
   function notification_default(Alpine3) {
     let notificationId = 0;
     let queuePosition = 0;
@@ -14781,19 +14872,20 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   }
 
   // libs/alpine/index.js
-  module_default.plugin(module_default2);
+  window.Alpine = module_default;
+  module_default.plugin(M2);
   module_default.plugin(module_default5);
+  module_default.plugin(module_default6);
+  module_default.plugin(module_default2);
   module_default.plugin(module_default3);
   module_default.plugin(module_default4);
-  module_default.plugin(module_default6);
-  module_default.plugin(M2);
+  module_default.plugin(undo_default);
   module_default.plugin(options_default);
   module_default.plugin(tooltip_default);
-  module_default.plugin(dropdown_default);
   module_default.plugin(destroy_default);
+  module_default.plugin(dropdown_default);
   module_default.plugin(dimensions_default);
   module_default.plugin(notification_default);
-  window.Alpine = module_default;
   var alpine_default2 = module_default;
 
   // ../../components/coco/base/button/button.js
@@ -14802,117 +14894,6 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     default: () => button_default
   });
 
-  // base/mixins/attrs.js
-  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);
-          }
-        })
-      );
-    };
-  }
-
-  // base/mixins/options.js
-  var import_lodash2 = __toESM(require_lodash(), 1);
-  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-${(0, import_lodash2.kebabCase)(name)}`
-      );
-      Object.keys(optionsProps).forEach((name) => {
-        const attrName = `data-${(0, import_lodash2.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 = (0, import_lodash2.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-${(0, import_lodash2.kebabCase)(key)}`, value);
-          if (component.onOptionChange) {
-            component.onOptionChange(key, value);
-          }
-        }
-      });
-      return component;
-    };
-  }
-
   // coco.js
   function CocoComponent(name, fn3) {
     const func = nameFunction(name, (...args) => {
@@ -14925,37 +14906,16 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       });
       data2.$options = {};
-      if (data2.use === false)
-        return data2;
-      const originalInit = data2.init;
-      const mixins = [withAttrs(), withOptions(), ...data2.use || []];
-      mixins.forEach((mixin) => {
-        if (mixin.props) {
-          mixin.props.forEach((prop) => {
-            if (!data2[prop]) {
-              data2[prop] = null;
-            }
-          });
-        }
-      });
-      return Object.assign(data2, {
-        init() {
-          mixins.forEach((mixin) => mixin(this));
-          if (originalInit) {
-            originalInit.call(this);
-          }
-        }
-      });
+      return data2;
     });
     func.component = true;
     return func;
   }
 
   // ../../components/coco/base/button/button.js
-  var import_lodash3 = __toESM(require_lodash(), 1);
+  var import_lodash2 = __toESM(require_lodash(), 1);
   var button_default = CocoComponent("button", (data2 = {}) => {
     return __spreadProps(__spreadValues({
-      use: false,
       options: ["state", "confirm", "size", "disabled", "collapsible"],
       isCollapsed: false,
       approving: false,
@@ -15053,7 +15013,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       setState(name) {
         this.lastState = this.state;
-        this.$options.state = (0, import_lodash3.camelCase)(name);
+        this.$options.state = (0, import_lodash2.camelCase)(name);
       },
       resetState() {
         this.$options.state = this.lastState || "default";
@@ -15107,9 +15067,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     default: () => dropdown_default2
   });
   var dropdown_default2 = CocoComponent("dropdown", () => {
-    return {
-      use: false
-    };
+    return {};
   });
 
   // ../../components/coco/base/icon/icon.js

data/app/assets/js/coco.js

@@ -1,7 +1,5 @@
 import { getData } from "@helpers/alpine";
-
-import { nameFunction } from "@helpers/lang.js";
-import { withAttrs, withOptions } from "@js/base/mixins";
+import { nameFunction } from "@helpers/lang";
 
 function CocoComponent(name, fn) {
   const func = nameFunction(name, (...args) => {
@@ -17,36 +15,10 @@ function CocoComponent(name, fn) {
 
     data.$options = {};
 
-    if (data.use === false) return data;
-
-    // TODO - remove all mixin code below once directives are ready
-
-    const originalInit = data.init;
-    const mixins = [withAttrs(), withOptions(), ...(data.use || [])];
-
-    mixins.forEach((mixin) => {
-      if (mixin.props) {
-        mixin.props.forEach((prop) => {
-          if (!data[prop]) {
-            data[prop] = null;
-          }
-        });
-      }
-    });
-
-    return Object.assign(data, {
-      init() {
-        mixins.forEach((mixin) => mixin(this));
-
-        if (originalInit) {
-          originalInit.call(this);
-        }
-      },
-    });
+    return data;
   });
 
   func.component = true;
-
   return func;
 }
 

data/app/assets/js/{base/mixins → libs/alpine/directives}/undo.js

@@ -1,8 +1,11 @@
+import { getData, setData } from "@helpers/alpine";
 import { roughSizeOfObject } from "@helpers/lang";
 
-export default function withUndo(props = {}) {
-  function withUndoMixin(component) {
-    const maxHistorySize = props.maxEntries || 100;
+export default function (Alpine) {
+  const maxHistorySize = 100;
+
+  Alpine.directive("undo", (el, { expression }, { evaluate }) => {
+    const data = getData(el);
 
     const history = Alpine.reactive({
       stack: [],
@@ -34,7 +37,7 @@ export default function withUndo(props = {}) {
       },
 
       undo() {
-        if (!component.undo) {
+        if (!data.undo) {
           console.error("Missing `undo` method");
           return;
         }
@@ -42,14 +45,14 @@ export default function withUndo(props = {}) {
         if (history.undoable) {
           history.adding = true;
           const entry = history.stack[history.stackPos];
-          component.undo(entry.name, entry.oldValue);
+          data.undo(entry.name, entry.oldValue);
           history.stackPos--;
           this.$nextTick(() => (history.adding = false));
         }
       },
 
       redo() {
-        if (!component.redo) {
+        if (!data.redo) {
           console.error("Missing `redo` method");
           return;
         }
@@ -58,7 +61,7 @@ export default function withUndo(props = {}) {
           history.adding = true;
           history.stackPos++;
           const entry = history.stack[history.stackPos];
-          component.redo(entry.name, entry.newValue);
+          data.redo(entry.name, entry.newValue);
           this.$nextTick(() => (history.adding = false));
         }
       },
@@ -80,10 +83,6 @@ export default function withUndo(props = {}) {
       },
     });
 
-    return Object.assign(component, { history });
-  }
-
-  withUndoMixin.props = ["history"];
-
-  return withUndoMixin;
+    setData(el, { history });
+  });
 }

data/app/assets/js/libs/alpine/index.js

@@ -7,31 +7,33 @@ import mask from "@alpinejs/mask";
 import focus from "@alpinejs/focus";
 import tash from "alpinejs-tash";
 
-import options from "@js/libs/alpine/plugins/options";
-import tooltip from "@js/libs/alpine/plugins/tooltip";
-import dropdown from "@js/libs/alpine/plugins/dropdown";
-import destroy from "@js/libs/alpine/plugins/destroy";
-import dimensions from "@js/libs/alpine/plugins/dimensions";
-import notification from "@js/libs/alpine/plugins/notification";
+import undo from "@assets/js/libs/alpine/directives/undo";
+import options from "@assets/js/libs/alpine/directives/options";
+import tooltip from "@assets/js/libs/alpine/directives/tooltip";
+import destroy from "@assets/js/libs/alpine/directives/destroy";
+import dropdown from "@assets/js/libs/alpine/directives/dropdown";
+import dimensions from "@assets/js/libs/alpine/directives/dimensions";
+import notification from "@assets/js/libs/alpine/directives/notification";
+
+window.Alpine = Alpine;
 
 // Third party plugins
 
-Alpine.plugin(morph);
+Alpine.plugin(tash);
 Alpine.plugin(mask);
+Alpine.plugin(focus);
+Alpine.plugin(morph);
 Alpine.plugin(collapse);
 Alpine.plugin(intersect);
-Alpine.plugin(focus);
-Alpine.plugin(tash);
 
-// Bespoke plugins
+// Coco directives
 
+Alpine.plugin(undo);
 Alpine.plugin(options);
 Alpine.plugin(tooltip);
-Alpine.plugin(dropdown);
 Alpine.plugin(destroy);
+Alpine.plugin(dropdown);
 Alpine.plugin(dimensions);
 Alpine.plugin(notification);
 
-window.Alpine = Alpine;
-
 export default Alpine;

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) {