coveragebook_components 0.7.9 → 0.8.0.beta.1

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

@@ -4299,7 +4299,7 @@
           function toString(value) {
             return value == null ? "" : baseToString(value);
           }
-          var assign = createAssigner(function(object, source) {
+          var assign2 = createAssigner(function(object, source) {
             if (isPrototype(source) || isArrayLike(source)) {
               copyObject(source, keys(source), object);
               return;
@@ -4611,7 +4611,7 @@
             position -= target.length;
             return position >= 0 && string.slice(position, end2) == target;
           }
-          function escape(string) {
+          function escape2(string) {
             string = toString(string);
             return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string;
           }
@@ -5049,7 +5049,7 @@
           }
           lodash.after = after;
           lodash.ary = ary;
-          lodash.assign = assign;
+          lodash.assign = assign2;
           lodash.assignIn = assignIn;
           lodash.assignInWith = assignInWith;
           lodash.assignWith = assignWith;
@@ -5217,7 +5217,7 @@
           lodash.divide = divide;
           lodash.endsWith = endsWith;
           lodash.eq = eq;
-          lodash.escape = escape;
+          lodash.escape = escape2;
           lodash.escapeRegExp = escapeRegExp;
           lodash.every = every;
           lodash.find = find;
@@ -6073,6 +6073,9 @@
         warning: __spreadValues({}, colors.amber),
         info: __spreadValues({}, colors.blue),
         background: {
+          header: {
+            DEFAULT: "#427484"
+          },
           light: {
             1: colors.white,
             2: colors.gray[50],
@@ -6118,7 +6121,8 @@
           primary: {
             DEFAULT: colors.green[500],
             dark: colors.green[600],
-            inverse: colors.green[300]
+            inverse: colors.green[300],
+            "inverse-vivid": "#009979"
           },
           negative: {
             DEFAULT: colors.red[600],
@@ -6150,6 +6154,7 @@
         xl: "1200px",
         "2xl": "1400px",
         max: "1800px",
+        letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" },
         print: { raw: "print" }
         // Note: PDFs are rendered at a viewport width of 1280px
       };
@@ -6158,6 +6163,7 @@
         "para-sm": ["14px", "20px"],
         "para-md": ["16px", "24px"],
         "para-lg": ["18px", "27px"],
+        "label-xxs": ["10px", "12px"],
         "label-xs": ["12px", "14px"],
         "label-sm": ["14px", "16px"],
         "label-md": ["16px", "20px"],
@@ -14032,7 +14038,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.7.9",
+    version: "0.8.0-beta.1",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -14053,6 +14059,7 @@
       "container-query-polyfill": "^1.0.2",
       del: "^7.0.0",
       html2canvas: "^1.4.1",
+      "js-cookie": "^3.0.5",
       lodash: "^4.17.21",
       "lucide-static": "^0.258.0",
       tailwindcss: "^3.3.0",
@@ -20207,17 +20214,6 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   var import_lodash = __toESM(require_lodash(), 1);
 
   // helpers/dom.js
-  function getHiddenElementDimensions(el, display = "block") {
-    let size2;
-    if (el.style.display === "none") {
-      el.style.display = display;
-      size2 = el.getBoundingClientRect();
-      el.style.display = "none";
-    } else {
-      size2 = el.getBoundingClientRect();
-    }
-    return size2;
-  }
   function castAttributeValue(value) {
     if (value === "false") {
       return false;
@@ -23006,6 +23002,27 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   tippy.defaultProps = defaultProps;
   tippy.setDefaultProps = setDefaultProps;
   tippy.currentInput = currentInput;
+  var hideAll = function hideAll2(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp, excludedReferenceOrInstance = _ref.exclude, duration = _ref.duration;
+    mountedInstances.forEach(function(instance) {
+      var isExcluded = false;
+      if (excludedReferenceOrInstance) {
+        isExcluded = isReferenceElement(excludedReferenceOrInstance) ? instance.reference === excludedReferenceOrInstance : instance.popper === excludedReferenceOrInstance.popper;
+      }
+      if (!isExcluded) {
+        var originalDuration = instance.props.duration;
+        instance.setProps({
+          duration
+        });
+        instance.hide();
+        if (!instance.state.isDestroyed) {
+          instance.setProps({
+            duration: originalDuration
+          });
+        }
+      }
+    });
+  };
   var applyStylesModifier = Object.assign({}, applyStyles_default, {
     effect: function effect6(_ref) {
       var state = _ref.state;
@@ -23662,6 +23679,31 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   module_default.plugin(notification_default);
   var alpine_default2 = module_default;
 
+  // helpers/location.js
+  function navigateTo(url, options = {}) {
+    if (window.Turbo && options.turbo === true) {
+      window.Turbo.visit(url, { action: options.action || "advance" });
+    } else {
+      location.assign(url);
+    }
+  }
+
+  // app/setup.js
+  window.addEventListener("navigate", (event) => {
+    const { url, turbo, action } = event.detail;
+    if (url) {
+      navigateTo(url, { turbo, action });
+    }
+  });
+  function setAppHeightProperty() {
+    document.documentElement.style.setProperty(
+      "--app-height",
+      `${window.innerHeight}px`
+    );
+  }
+  window.addEventListener("resize", setAppHeightProperty);
+  setAppHeightProperty();
+
   // ../../components/coco/base/button/button.js
   var button_exports = {};
   __export(button_exports, {
@@ -23962,6 +24004,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       show() {
         this.open = true;
+        hideAll();
         setTimeout(() => {
           this.$dispatch("modal:shown");
         }, 400);
@@ -24080,12 +24123,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       imageLoaded() {
         this.loaded = true;
-        this.$nextTick(() => {
+        setTimeout(() => {
           const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
           if (!isNaN(scrollTop) && scrollTop !== 0) {
             this.modal.scrollTo(scrollTop);
           }
-        });
+        }, 200);
       },
       get img() {
         return this.$refs.media.querySelector("img");
@@ -24110,45 +24153,111 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   // book/components.js
   var components_default2 = registerComponents(__default2);
 
-  // ../../components/coco/app/blocks/nav_bar/nav_bar.js
-  var nav_bar_exports = {};
-  __export(nav_bar_exports, {
-    default: () => nav_bar_default
+  // ../../components/coco/app/blocks/header/header.js
+  var header_exports = {};
+  __export(header_exports, {
+    default: () => header_default
+  });
+  var header_default = CocoComponent("appHeader", () => {
+    return {
+      drawerOpen: false,
+      toggleDrawer() {
+        this.drawerOpen = !this.drawerOpen;
+      }
+    };
+  });
+
+  // ../../components/coco/app/blocks/nav_drawer/nav_drawer.js
+  var nav_drawer_exports = {};
+  __export(nav_drawer_exports, {
+    default: () => nav_drawer_default
+  });
+  var nav_drawer_default = CocoComponent("appNavDrawer", () => {
+    return {
+      active: false,
+      init() {
+        this.$watch("drawerOpen", (open) => {
+          if (open) {
+            this.$refs.content.scrollTop = 0;
+            setTimeout(() => {
+              this.active = true;
+            }, 200);
+          } else {
+            this.active = false;
+          }
+        });
+      },
+      close() {
+        this.drawerOpen = false;
+      }
+    };
+  });
+
+  // ../../components/coco/app/blocks/sidebar_nav/sidebar_nav.js
+  var sidebar_nav_exports = {};
+  __export(sidebar_nav_exports, {
+    default: () => sidebar_nav_default
   });
   var import_tokens = __toESM(require_tokens(), 1);
-  var nav_bar_default = CocoComponent("appNavBar", () => {
-    const mobileMaxWidth = parseInt(import_tokens.default.app.screens.md, 10);
+  var mobileMaxWidth = parseInt(import_tokens.default.app.screens.sm, 10);
+  var sidebar_nav_default = CocoComponent("appSidebarNav", () => {
     return {
-      mobile: true,
+      sizeObserver: null,
+      mobileLayout: true,
       init() {
-        const sizeObserver = new ResizeObserver(
+        this.sizeObserver = new ResizeObserver(
           Alpine.throttle((entries) => {
             this.$nextTick(() => {
-              const navWidth = entries[0].contentRect.width;
-              const linksWidth = this.$refs.links.offsetWidth;
-              const primaryWidth = getHiddenElementDimensions(this.$refs.primaryLinks, "flex").width;
-              const secondaryWidth = getHiddenElementDimensions(
-                this.$refs.secondaryLinks,
-                "flex"
-              ).width;
-              const difference = linksWidth - primaryWidth - secondaryWidth;
-              this.mobile = navWidth < mobileMaxWidth || this.mobudifference <= 50;
+              const bodyWidth = entries[0].contentRect.width;
+              this.mobileLayout = bodyWidth < mobileMaxWidth;
             });
           }, 20)
         );
-        sizeObserver.observe(this.$root);
+        this.sizeObserver.observe(document.documentElement);
+      },
+      destroy() {
+        this.sizeObserver && this.sizeObserver.disconnect();
       }
     };
   });
 
-  // ../../components/coco/app/blocks/nav_drawer/nav_drawer.js
-  var nav_drawer_exports = {};
-  __export(nav_drawer_exports, {
-    default: () => nav_drawer_default
+  // ../../components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js
+  var sidebar_nav_item_exports = {};
+  __export(sidebar_nav_item_exports, {
+    default: () => sidebar_nav_item_default
   });
-  var nav_drawer_default = CocoComponent("appNavDrawer", () => {
+  var sidebar_nav_item_default = CocoComponent("appSidebarNavItem", () => {
     return {
-      open: false
+      menu: null,
+      init() {
+        if (this.$refs.menu) {
+          this.menu = tippy_default(this.$el, {
+            theme: "coco-naked-dropdown",
+            placement: this.menuPlacement,
+            arrow: false,
+            offset: [0, 0],
+            trigger: "click",
+            interactive: true,
+            maxWidth: null,
+            content: () => {
+              return this.$refs.menu.innerHTML;
+            }
+          });
+        }
+        this.$watch("mobileLayout", () => {
+          this.onOrientationChange();
+        });
+      },
+      onOrientationChange() {
+        if (this.menu) {
+          this.menu.setProps({
+            placement: this.menuPlacement
+          });
+        }
+      },
+      get menuPlacement() {
+        return this.mobileLayout ? "top" : "right-start";
+      }
     };
   });
 
@@ -24481,16 +24590,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       },
       remove() {
+        this.$nextTick(() => this.$dispatch("alert:removed", { alert: this }));
         this.$root.remove();
       },
       checkSingleLineWrap({ height }) {
-        if (!this.forceMultiLine) {
+        this.forceMultiLine = false;
+        this.$nextTick(() => {
           this.forceMultiLine = height > 24 && this.$options.singleLine;
-        }
+        });
       },
       root: {
         "x-options": '["dismissable", "singleLine"]',
-        "x-show": "!dismissed",
         ":class": "{'force-multi-line': forceMultiLine}"
       }
     };
@@ -26600,8 +26710,135 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   __export(system_banner_exports, {
     default: () => system_banner_default
   });
-  var system_banner_default = CocoComponent("appSystemBanner", () => {
-    return {};
+
+  // ../../../node_modules/js-cookie/dist/js.cookie.mjs
+  function assign(target) {
+    for (var i3 = 1; i3 < arguments.length; i3++) {
+      var source = arguments[i3];
+      for (var key in source) {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  var defaultConverter = {
+    read: function(value) {
+      if (value[0] === '"') {
+        value = value.slice(1, -1);
+      }
+      return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
+    },
+    write: function(value) {
+      return encodeURIComponent(value).replace(
+        /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
+        decodeURIComponent
+      );
+    }
+  };
+  function init(converter, defaultAttributes) {
+    function set3(name, value, attributes) {
+      if (typeof document === "undefined") {
+        return;
+      }
+      attributes = assign({}, defaultAttributes, attributes);
+      if (typeof attributes.expires === "number") {
+        attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
+      }
+      if (attributes.expires) {
+        attributes.expires = attributes.expires.toUTCString();
+      }
+      name = encodeURIComponent(name).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape);
+      var stringifiedAttributes = "";
+      for (var attributeName in attributes) {
+        if (!attributes[attributeName]) {
+          continue;
+        }
+        stringifiedAttributes += "; " + attributeName;
+        if (attributes[attributeName] === true) {
+          continue;
+        }
+        stringifiedAttributes += "=" + attributes[attributeName].split(";")[0];
+      }
+      return document.cookie = name + "=" + converter.write(value, name) + stringifiedAttributes;
+    }
+    function get3(name) {
+      if (typeof document === "undefined" || arguments.length && !name) {
+        return;
+      }
+      var cookies = document.cookie ? document.cookie.split("; ") : [];
+      var jar = {};
+      for (var i3 = 0; i3 < cookies.length; i3++) {
+        var parts = cookies[i3].split("=");
+        var value = parts.slice(1).join("=");
+        try {
+          var found = decodeURIComponent(parts[0]);
+          jar[found] = converter.read(value, found);
+          if (name === found) {
+            break;
+          }
+        } catch (e3) {
+        }
+      }
+      return name ? jar[name] : jar;
+    }
+    return Object.create(
+      {
+        set: set3,
+        get: get3,
+        remove: function(name, attributes) {
+          set3(
+            name,
+            "",
+            assign({}, attributes, {
+              expires: -1
+            })
+          );
+        },
+        withAttributes: function(attributes) {
+          return init(this.converter, assign({}, this.attributes, attributes));
+        },
+        withConverter: function(converter2) {
+          return init(assign({}, this.converter, converter2), this.attributes);
+        }
+      },
+      {
+        attributes: { value: Object.freeze(defaultAttributes) },
+        converter: { value: Object.freeze(converter) }
+      }
+    );
+  }
+  var api = init(defaultConverter, { path: "/" });
+
+  // ../../components/coco/app/elements/system_banner/system_banner.js
+  var system_banner_default = CocoComponent("appSystemBanner", (opts = {}) => {
+    return {
+      cookieName: null,
+      cookieValue: null,
+      cookieExpiry: null,
+      init() {
+        this.cookieName = opts.cookieName;
+        this.cookieValue = opts.cookieValue;
+        this.cookieExpiry = opts.cookieExpiry;
+      },
+      onDismiss() {
+        this.$dispatch("banner:dismiss", { banner: this });
+        if (this.shouldSetCookie) {
+          api.set(this.cookieName, this.cookieValue, {
+            expires: this.cookieExpiry
+          });
+        }
+      },
+      remove() {
+        this.$root.remove();
+      },
+      get shouldSetCookie() {
+        return Number.isInteger(this.cookieExpiry);
+      },
+      root: {
+        "@alert:dismiss": "onDismiss",
+        "@alert:removed": "remove"
+      }
+    };
   });
 
   // ../../components/coco/app/elements/toast/toast.js
@@ -26674,8 +26911,26 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
+  // ../../components/coco/app/layouts/application/application.js
+  var application_exports = {};
+  __export(application_exports, {
+    default: () => application_default
+  });
+  var application_default = CocoComponent("appLayout", (opts) => {
+    return {
+      banner: false,
+      init() {
+        this.banner = opts.banner;
+      },
+      hideBanner() {
+        this.banner = false;
+        this.$el.remove();
+      }
+    };
+  });
+
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/app|@appComponents/**/*.js
-  var modules3 = [nav_bar_exports, nav_drawer_exports, slide_editor_exports, alert_exports, button_group_exports, color_picker_exports, color_picker_button_exports, confirm_panel_exports, image_picker_exports, image_picker_button_exports, layout_picker_button_exports, menu_button_exports, notice_exports, seamless_textarea_exports, snackbar_exports, system_banner_exports, toast_exports, toolbar_exports];
+  var modules3 = [header_exports, nav_drawer_exports, sidebar_nav_exports, sidebar_nav_item_exports, slide_editor_exports, alert_exports, button_group_exports, color_picker_exports, color_picker_button_exports, confirm_panel_exports, image_picker_exports, image_picker_button_exports, layout_picker_button_exports, menu_button_exports, notice_exports, seamless_textarea_exports, snackbar_exports, system_banner_exports, toast_exports, toolbar_exports, application_exports];
   var __default3 = modules3;
 
   // app/components.js
@@ -26735,4 +26990,7 @@ html2canvas/dist/html2canvas.js:
    * Licensed under MPL 2.0
    * github.com/jaames/iro.js
    *)
+
+js-cookie/dist/js.cookie.mjs:
+  (*! js-cookie v3.0.5 | MIT *)
 */

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

@@ -542,12 +542,17 @@ select {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
+  :root {
+    --app-height: 100%;
+  }
+
   html {
   scroll-behavior: smooth;
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
+
   @media (prefers-reduced-motion: no-preference) {
 
   html {
@@ -723,9 +728,6 @@ select {
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 }
 [data-coco] h1,
     [data-coco] h2,
@@ -735,6 +737,32 @@ select {
     [data-coco] h6 {
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
+[data-coco][data-component="avatar"] {
+  display: block;
+  flex: none;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+[data-coco][data-component="avatar"] img {
+  width: 100%;
+  border-radius: 9999px;
+}
+[data-coco][data-component="avatar"][data-size="sm"] {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+[data-coco][data-component="avatar"][data-size="md"] {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+[data-coco][data-component="avatar"][data-size="lg"] {
+  height: 1.75rem;
+  width: 1.75rem;
+}
+[data-coco][data-component="avatar"][data-size="xl"] {
+  height: 2rem;
+  width: 2rem;
+}
 [data-coco].coco-button {
   display: flex;
   width: auto;
@@ -905,12 +933,16 @@ select {
   width: 1.5rem;
 }
 [data-coco][data-component="icon"][data-size="xl"] {
-  height: 2.25rem;
-  width: 2.25rem;
+  height: 2rem;
+  width: 2rem;
 }
 [data-coco][data-component="icon"][data-size="xxl"] {
-  height: 3rem;
-  width: 3rem;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+[data-coco][data-component="icon"][data-size="full"] {
+  height: 100%;
+  width: 100%;
 }
 /* Motion */
 @keyframes spin {
@@ -980,7 +1012,6 @@ select {
   position: relative;
   z-index: 10000;
   display: flex;
-  min-height: 100vh;
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
@@ -991,6 +1022,9 @@ select {
     padding: 2rem;
   }
 }
+[data-coco][data-component="modal"] .modal-container {
+      min-height: var(--app-height);
+    }
 [data-coco][data-component="modal"] .modal-content {
   display: contents;
 }
@@ -1253,13 +1287,22 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 [data-coco][data-component="placeholder"] {
+  padding: 1rem;
+}
+[data-coco][data-component="placeholder"][data-boxed="true"] {
   border-width: 1px;
   border-style: dashed;
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  padding: 1rem;
+}
+[data-coco][data-component="placeholder"][data-prose="true"] .placeholder-content > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="placeholder"][data-prose="false"] {
   text-align: center;
 }
 [data-coco][data-component="placeholder"][data-size="full"] {
@@ -1755,6 +1798,9 @@ select {
 .fixed {
   position: fixed;
 }
+.\!block {
+  display: block !important;
+}
 .block {
   display: block;
 }

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

@@ -14395,6 +14395,27 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   tippy.defaultProps = defaultProps;
   tippy.setDefaultProps = setDefaultProps;
   tippy.currentInput = currentInput;
+  var hideAll = function hideAll2(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp, excludedReferenceOrInstance = _ref.exclude, duration = _ref.duration;
+    mountedInstances.forEach(function(instance) {
+      var isExcluded = false;
+      if (excludedReferenceOrInstance) {
+        isExcluded = isReferenceElement(excludedReferenceOrInstance) ? instance.reference === excludedReferenceOrInstance : instance.popper === excludedReferenceOrInstance.popper;
+      }
+      if (!isExcluded) {
+        var originalDuration = instance.props.duration;
+        instance.setProps({
+          duration
+        });
+        instance.hide();
+        if (!instance.state.isDestroyed) {
+          instance.setProps({
+            duration: originalDuration
+          });
+        }
+      }
+    });
+  };
   var applyStylesModifier = Object.assign({}, applyStyles_default, {
     effect: function effect6(_ref) {
       var state = _ref.state;
@@ -15188,6 +15209,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       show() {
         this.open = true;
+        hideAll();
         setTimeout(() => {
           this.$dispatch("modal:shown");
         }, 400);
@@ -15306,12 +15328,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       imageLoaded() {
         this.loaded = true;
-        this.$nextTick(() => {
+        setTimeout(() => {
           const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
           if (!isNaN(scrollTop) && scrollTop !== 0) {
             this.modal.scrollTo(scrollTop);
           }
-        });
+        }, 200);
       },
       get img() {
         return this.$refs.media.querySelector("img");