Vue3 migration

.eslintrc.js

@@ -4,9 +4,11 @@ module.exports = {
     node: true,
     jest: true
   },
-  "extends": [
-    "plugin:vue/recommended",
-    "eslint:recommended"
+  extends: [
+    'plugin:vue/vue3-recommended',
+    "eslint:recommended",
+    'plugin:vue/base',
+    'plugin:vuetify/base'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === "production" ? "error" : "off",

babel.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   presets: [
     "@vue/cli-plugin-babel/preset",
-    "@babel/preset-env"
+    "@babel/preset-env",
   ],
   plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-private-methods'
+    '@babel/plugin-transform-class-properties',
+    '@babel/plugin-transform-private-methods'
   ]
 };

documentation/html/scripts/toc.js

@@ -1,182 +1,103 @@
 (function($) {
-  var navbarHeight;
-  var initialised = false;
-  var navbarOffset;
-
-  function elOffset($el) {
-    return $el.offset().top - (navbarHeight + navbarOffset);
-  }
+$.fn.toc = function(options) {
+  var self = this;
+  var opts = $.extend({}, jQuery.fn.toc.defaults, options);
+
+  var container = $(opts.container);
+  var tocs = [];
+  var headings = $(opts.selectors, container);
+  var headingOffsets = [];
+  var activeClassName = 'active';
+  var navbarHeight = $('.navbar').height();
+  var ANCHOR_PREFIX = "__anchor";
+
+  var scrollTo = function(e) {
+    if (opts.smoothScrolling) {
+      e.preventDefault();
+      var elScrollTo = $(e.target).attr('href');
+      var $el = $(elScrollTo.replace('#.', '#\\.') + ANCHOR_PREFIX);
 
-  function scrollToHash(duringPageLoad) {
-    var elScrollToId = location.hash.replace(/^#/, '');
-    var $el;
+      var offsetTop = $el.offset().top - (navbarHeight + opts.navbarOffset);
 
-    function doScroll() {
-      var offsetTop = elOffset($el);
-      window.scrollTo(window.pageXOffset || window.scrollX, offsetTop);
+      $('body,html').animate({ scrollTop: offsetTop }, 400, 'swing', function() {
+        location.hash = elScrollTo;
+      });
     }
+    $('li', self).removeClass(activeClassName);
+    $(e.target).parent().addClass(activeClassName);
+  };
 
-    if (elScrollToId) {
-      $el = $(document.getElementById(elScrollToId));
-
-      if (!$el.length) {
-        $el = $(document.getElementsByName(elScrollToId));
-      }
-
-      if ($el.length) {
-        if (duringPageLoad) {
-          $(window).one('scroll', function() {
-            setTimeout(doScroll, 100);
-          });
-        } else {
-          setTimeout(doScroll, 0);
-        }
-      }
-    }
+  var calcHadingOffsets = function() {
+    headingOffsets = [];
+    headings.each(function(i, heading) {
+      var top = $(heading).prev("span").offset().top - (navbarHeight + opts.navbarOffset);
+      headingOffsets.push(top > 0 ? top : 0);
+    });
   }
 
-  function init(opts) {
-    if (initialised) {
-      return;
+  //highlight on scroll
+  var timeout;
+  var highlightOnScroll = function(e) {
+    if (timeout) {
+      clearTimeout(timeout);
     }
-    initialised = true;
-    navbarHeight = $('.navbar').height();
-    navbarOffset = opts.navbarOffset;
-
-    // some browsers move the offset after changing location.
-    // also catch external links coming in
-    $(window).on("hashchange", scrollToHash.bind(null, false));
-    $(scrollToHash.bind(null, true));
-  }
-
-  $.catchAnchorLinks = function(options) {
-    var opts = $.extend({}, jQuery.fn.toc.defaults, options);
-    init(opts);
-  };
-
-  $.fn.toc = function(options) {
-    var self = this;
-    var opts = $.extend({}, jQuery.fn.toc.defaults, options);
-
-    var container = $(opts.container);
-    var tocs = [];
-    var headings = $(opts.selectors, container);
-    var headingOffsets = [];
-    var activeClassName = 'active';
-    var ANCHOR_PREFIX = "__anchor";
-    var maxScrollTo;
-    var visibleHeight;
-    var headerHeight = 10; // so if the header is readable, its counted as shown
-    init();
-
-    var scrollTo = function(e) {
-      e.preventDefault();
-      var target = $(e.target);
-      if (target.prop('tagName').toLowerCase() !== "a") {
-        target = target.parent();
+    timeout = setTimeout(function() {
+      var top = $(window).scrollTop(),
+        highlighted;
+      for (var i = 0, c = headingOffsets.length; i < c; i++) {
+        if (headingOffsets[i] >= top || (headingOffsets[i + 1] && headingOffsets[i + 1] > top)) {
+          $('li', self).removeClass(activeClassName);
+          if (i >= 0) {
+            highlighted = tocs[i].addClass(activeClassName);
+            opts.onHighlight(highlighted);
+          }
+          break;
+        }
       }
-      var elScrollToId = target.attr('href').replace(/^#/, '') + ANCHOR_PREFIX;
-      var $el = $(document.getElementById(elScrollToId));
-
-      var offsetTop = Math.min(maxScrollTo, elOffset($el));
+    }, 50);
+  };
+  if (opts.highlightOnScroll) {
+    $(window).bind('scroll', highlightOnScroll);
+    $(window).bind('load resize', function() {
+      calcHadingOffsets();
+      highlightOnScroll();
+    });
+  }
 
-      $('body,html').animate({ scrollTop: offsetTop }, 400, 'swing', function() {
-        location.hash = '#' + elScrollToId;
-      });
+  return this.each(function() {
+    //build TOC
+    var el = $(this);
+    var ul = $('<ul/>');
 
-      $('a', self).removeClass(activeClassName);
-      target.addClass(activeClassName);
-    };
-
-    var calcHadingOffsets = function() {
-      maxScrollTo = $("body").height() - $(window).height();
-      visibleHeight = $(window).height() - navbarHeight;
-      headingOffsets = [];
-      headings.each(function(i, heading) {
-        var anchorSpan = $(heading).prev("span");
-        var top = 0;
-        if (anchorSpan.length) {
-          top = elOffset(anchorSpan);
-        }
-        headingOffsets.push(top > 0 ? top : 0);
-      });
-    }
+    headings.each(function(i, heading) {
+      var $h = $(heading);
 
-    //highlight on scroll
-    var timeout;
-    var highlightOnScroll = function(e) {
-      if (!tocs.length) {
-        return;
-      }
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-      timeout = setTimeout(function() {
-        var top = $(window).scrollTop(),
-          highlighted;
-        for (var i = headingOffsets.length - 1; i >= 0; i--) {
-          var isActive = tocs[i].hasClass(activeClassName);
-          // at the end of the page, allow any shown header
-          if (isActive && headingOffsets[i] >= maxScrollTo && top >= maxScrollTo) {
-            return;
-          }
-          // if we have got to the first heading or the heading is the first one visible
-          if (i === 0 || (headingOffsets[i] + headerHeight >= top && (headingOffsets[i - 1] + headerHeight <= top))) {
-            // in the case that a heading takes up more than the visible height e.g. we are showing
-            // only the one above, highlight the one above
-            if (i > 0 && headingOffsets[i] - visibleHeight >= top) {
-              i--;
-            }
-            $('a', self).removeClass(activeClassName);
-            if (i >= 0) {
-              highlighted = tocs[i].addClass(activeClassName);
-              opts.onHighlight(highlighted);
-            }
-            break;
-          }
-        }
-      }, 50);
-    };
-    if (opts.highlightOnScroll) {
-      $(window).bind('scroll', highlightOnScroll);
-      $(window).bind('load resize', function() {
-        calcHadingOffsets();
-        highlightOnScroll();
-      });
-    }
+      var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix) + ANCHOR_PREFIX).insertBefore($h);
 
-    return this.each(function() {
-      //build TOC
-      var el = $(this);
-      var ul = $('<div class="list-group">');
+      //build TOC item
+      var a = $('<a/>')
+        .text(opts.headerText(i, heading, $h))
+        .attr('href', '#' + opts.anchorName(i, heading, opts.prefix))
+        .bind('click', function(e) {
+          scrollTo(e);
+          el.trigger('selected', $(this).attr('href'));
+        });
 
-      headings.each(function(i, heading) {
-        var $h = $(heading);
+      var li = $('<li/>')
+        .addClass(opts.itemClass(i, heading, $h, opts.prefix))
+        .append(a);
 
-        var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix) + ANCHOR_PREFIX).insertBefore($h);
+      tocs.push(li);
 
-        var span = $('<span/>')
-          .text(opts.headerText(i, heading, $h));
-
-        //build TOC item
-        var a = $('<a class="list-group-item"/>')
-          .append(span)
-          .attr('href', '#' + opts.anchorName(i, heading, opts.prefix))
-          .bind('click', function(e) {
-            scrollTo(e);
-            el.trigger('selected', $(this).attr('href'));
-          });
+      ul.append(li);
+    });
+    el.html(ul);
 
-        span.addClass(opts.itemClass(i, heading, $h, opts.prefix));
+    calcHadingOffsets();
+  });
 
-        tocs.push(a);
 
-        ul.append(a);
-      });
-      el.html(ul);
 
-      calcHadingOffsets();
-    });
 };