@studiometa/js-toolkit 2.0.0-beta.7 → 2.0.0-rc.1

package/decorators/withIntersectionObserver.cjs

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/decorators/withIntersectionObserver.js
+var withIntersectionObserver_exports = {};
+__export(withIntersectionObserver_exports, {
+  default: () => withIntersectionObserver
+});
+module.exports = __toCommonJS(withIntersectionObserver_exports);
+function createArrayOfNumber(length) {
+  return [...new Array(length + 1)].map((val, index) => index / length);
+}
+function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createArrayOfNumber(100) }) {
+  var _a, _b;
+  return _b = class extends BaseClass {
+    constructor(element) {
+      super(element);
+      this.$observer = new IntersectionObserver((entries) => {
+        this.__callMethod("intersected", entries);
+      }, {
+        ...defaultOptions,
+        ...this.$options.intersectionObserver
+      });
+      this.$on("mounted", () => {
+        this.$observer.observe(this.$el);
+      });
+      this.$on("destroyed", () => {
+        this.$observer.unobserve(this.$el);
+      });
+      return this;
+    }
+  }, __publicField(_b, "config", {
+    ...BaseClass.config,
+    name: `${BaseClass.config.name}WithIntersectionObserver`,
+    options: {
+      ...((_a = BaseClass.config) == null ? void 0 : _a.options) || {},
+      intersectionObserver: Object
+    },
+    emits: ["intersected"]
+  }), _b;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withIntersectionObserver.js

@@ -1,44 +1,41 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 function createArrayOfNumber(length) {
   return [...new Array(length + 1)].map((val, index) => index / length);
 }
-
-export default function withIntersectionObserver(BaseClass) {
-  var _class, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config2;
-
-  var defaultOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    threshold: createArrayOfNumber(100)
-  };
-  return _temp = _class = class extends BaseClass {
+function withIntersectionObserver(BaseClass, defaultOptions = { threshold: createArrayOfNumber(100) }) {
+  var _a, _b;
+  return _b = class extends BaseClass {
     constructor(element) {
       super(element);
-
-      if (!this.intersected || typeof this.intersected !== 'function') {
-        throw new Error('[withIntersectionObserver] The `intersected` method must be defined.');
-      }
-
-      this.$observer = new IntersectionObserver(entries => {
-        this.__callMethod('intersected', entries);
-      }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver || {}));
-      this.$on('mounted', () => {
+      this.$observer = new IntersectionObserver((entries) => {
+        this.__callMethod("intersected", entries);
+      }, {
+        ...defaultOptions,
+        ...this.$options.intersectionObserver
+      });
+      this.$on("mounted", () => {
         this.$observer.observe(this.$el);
       });
-      this.$on('destroyed', () => {
+      this.$on("destroyed", () => {
         this.$observer.unobserve(this.$el);
       });
       return this;
     }
-
-  }, _defineProperty(_class, "config", _objectSpread(_objectSpread({}, BaseClass.config || {}), {}, {
-    name: "".concat((_BaseClass$config$nam = BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config = BaseClass.config) === null || _BaseClass$config === void 0 ? void 0 : _BaseClass$config.name) !== null && _BaseClass$config$nam !== void 0 ? _BaseClass$config$nam : '', "WithIntersectionObserver"),
-    options: _objectSpread(_objectSpread({}, (BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config2 = BaseClass.config) === null || _BaseClass$config2 === void 0 ? void 0 : _BaseClass$config2.options) || {}), {}, {
+  }, __publicField(_b, "config", {
+    ...BaseClass.config,
+    name: `${BaseClass.config.name}WithIntersectionObserver`,
+    options: {
+      ...((_a = BaseClass.config) == null ? void 0 : _a.options) || {},
       intersectionObserver: Object
-    }),
-    emits: ['intersected']
-  })), _temp;
-}
+    },
+    emits: ["intersected"]
+  }), _b;
+}
+export {
+  withIntersectionObserver as default
+};

package/decorators/withMountWhenInView.cjs

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/decorators/withMountWhenInView.js
+var withMountWhenInView_exports = {};
+__export(withMountWhenInView_exports, {
+  default: () => withMountWhenInView
+});
+module.exports = __toCommonJS(withMountWhenInView_exports);
+function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] }) {
+  var _a, _b;
+  return _b = class extends BaseClass {
+    constructor(element) {
+      super(element);
+      __publicField(this, "__isVisible", false);
+      __publicField(this, "__observer");
+      this.__observer = new IntersectionObserver((entries) => {
+        const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
+        if (this.__isVisible !== isVisible) {
+          this.__isVisible = isVisible;
+          if (isVisible) {
+            this.$mount();
+          } else {
+            setTimeout(() => this.$destroy());
+          }
+        }
+      }, { ...defaultOptions, ...this.$options.intersectionObserver });
+      this.__observer.observe(this.$el);
+      this.$on("terminated", () => {
+        this.__observer.disconnect();
+      });
+      return this;
+    }
+    $mount() {
+      if (this.__isVisible) {
+        super.$mount();
+      }
+      return this;
+    }
+  }, __publicField(_b, "config", {
+    ...BaseClass.config,
+    name: `${BaseClass.config.name}WithMountWhenInView`,
+    options: {
+      ...((_a = BaseClass.config) == null ? void 0 : _a.options) || {},
+      intersectionObserver: Object
+    }
+  }), _b;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withMountWhenInView.js

@@ -1,69 +1,48 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _classPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
-import _classPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-export default function withMountWhenInView(BaseClass) {
-  var _class, _isVisible, _observer, _temp, _BaseClass$config$nam, _BaseClass$config, _BaseClass$config2;
-
-  var defaultOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    threshold: [0, 1]
-  };
-  return _temp = (_isVisible = new WeakMap(), _observer = new WeakMap(), _class = class extends BaseClass {
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+function withMountWhenInView(BaseClass, defaultOptions = { threshold: [0, 1] }) {
+  var _a, _b;
+  return _b = class extends BaseClass {
     constructor(element) {
       super(element);
-
-      _classPrivateFieldInitSpec(this, _isVisible, {
-        writable: true,
-        value: false
-      });
-
-      _classPrivateFieldInitSpec(this, _observer, {
-        writable: true,
-        value: void 0
-      });
-
-      _classPrivateFieldSet(this, _observer, new IntersectionObserver(entries => {
-        var isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
-
-        if (_classPrivateFieldGet(this, _isVisible) !== isVisible) {
-          _classPrivateFieldSet(this, _isVisible, isVisible);
-
+      __publicField(this, "__isVisible", false);
+      __publicField(this, "__observer");
+      this.__observer = new IntersectionObserver((entries) => {
+        const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);
+        if (this.__isVisible !== isVisible) {
+          this.__isVisible = isVisible;
           if (isVisible) {
             this.$mount();
           } else {
             setTimeout(() => this.$destroy());
           }
         }
-      }, _objectSpread(_objectSpread({}, defaultOptions), this.$options.intersectionObserver)));
-
-      _classPrivateFieldGet(this, _observer).observe(this.$el);
-
-      this.$on('terminated', () => {
-        _classPrivateFieldGet(this, _observer).disconnect();
+      }, { ...defaultOptions, ...this.$options.intersectionObserver });
+      this.__observer.observe(this.$el);
+      this.$on("terminated", () => {
+        this.__observer.disconnect();
       });
       return this;
     }
-
     $mount() {
-      if (_classPrivateFieldGet(this, _isVisible)) {
+      if (this.__isVisible) {
         super.$mount();
       }
-
       return this;
     }
-
-  }), _defineProperty(_class, "config", _objectSpread(_objectSpread({}, BaseClass.config || {}), {}, {
-    name: "".concat((_BaseClass$config$nam = BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config = BaseClass.config) === null || _BaseClass$config === void 0 ? void 0 : _BaseClass$config.name) !== null && _BaseClass$config$nam !== void 0 ? _BaseClass$config$nam : '', "WithMountWhenInView"),
-    options: _objectSpread(_objectSpread({}, (BaseClass === null || BaseClass === void 0 ? void 0 : (_BaseClass$config2 = BaseClass.config) === null || _BaseClass$config2 === void 0 ? void 0 : _BaseClass$config2.options) || {}), {}, {
+  }, __publicField(_b, "config", {
+    ...BaseClass.config,
+    name: `${BaseClass.config.name}WithMountWhenInView`,
+    options: {
+      ...((_a = BaseClass.config) == null ? void 0 : _a.options) || {},
       intersectionObserver: Object
-    })
-  })), _temp;
-}
+    }
+  }), _b;
+}
+export {
+  withMountWhenInView as default
+};

package/decorators/withScrolledInView.cjs

@@ -0,0 +1,114 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/decorators/withScrolledInView.js
+var withScrolledInView_exports = {};
+__export(withScrolledInView_exports, {
+  default: () => withScrolledInView
+});
+module.exports = __toCommonJS(withScrolledInView_exports);
+var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
+var import_utils = require("../utils/index.cjs");
+function withScrolledInView(BaseClass, options) {
+  var _a;
+  return _a = class extends (0, import_withMountWhenInView.default)(BaseClass, options) {
+    constructor() {
+      super(...arguments);
+      __publicField(this, "__props", {
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 0,
+          y: 0
+        },
+        current: {
+          x: 0,
+          y: 0
+        },
+        progress: {
+          x: 0,
+          y: 0
+        },
+        dampedProgress: {
+          x: 0,
+          y: 0
+        }
+      });
+      __publicField(this, "dampFactor", 0.1);
+      __publicField(this, "dampPrecision", 1e-3);
+    }
+    mounted() {
+      this.__setProps();
+    }
+    resized() {
+      this.__setProps();
+    }
+    scrolled(props) {
+      if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+        this.$services.enable("ticked");
+      }
+    }
+    ticked() {
+      this.__props.current.x = (0, import_utils.clamp)(window.pageXOffset, this.__props.start.x, this.__props.end.x);
+      this.__props.progress.x = (0, import_utils.clamp01)((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
+      this.__props.dampedProgress.x = (0, import_utils.damp)(this.__props.progress.x, this.__props.dampedProgress.x, this.dampFactor, this.dampPrecision);
+      this.__props.current.y = (0, import_utils.clamp)(window.pageYOffset, this.__props.start.y, this.__props.end.y);
+      this.__props.progress.y = (0, import_utils.clamp01)((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
+      this.__props.dampedProgress.y = (0, import_utils.damp)(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
+      if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
+        this.$services.disable("ticked");
+      }
+      this.__callMethod("scrolledInView", this.__props);
+    }
+    __setProps() {
+      const sizes = this.$el.getBoundingClientRect();
+      const yEnd = sizes.top + window.pageYOffset + sizes.height;
+      const yStart = yEnd - window.innerHeight - sizes.height;
+      const yCurrent = (0, import_utils.clamp)(window.pageYOffset, yStart, yEnd);
+      const yProgress = (0, import_utils.clamp01)((yCurrent - yStart) / (yEnd - yStart));
+      const xEnd = sizes.left + window.pageXOffset + sizes.width;
+      const xStart = xEnd - window.innerWidth - sizes.width;
+      const xCurrent = (0, import_utils.clamp)(window.pageXOffset, xStart, xEnd);
+      const xProgress = (0, import_utils.clamp01)((xCurrent - xStart) / (xEnd - xStart));
+      this.__props.start.x = xStart;
+      this.__props.start.y = yStart;
+      this.__props.end.x = xEnd;
+      this.__props.end.y = yEnd;
+      this.__props.current.x = xCurrent;
+      this.__props.current.y = yCurrent;
+      this.__props.progress.x = xProgress;
+      this.__props.progress.y = yProgress;
+      this.__props.dampedProgress.x = (0, import_utils.damp)(xProgress, this.__props.dampedProgress.x);
+      this.__props.dampedProgress.y = (0, import_utils.damp)(yProgress, this.__props.dampedProgress.y);
+    }
+  }, __publicField(_a, "config", {
+    name: `${BaseClass.config.name}WithMountWhenInView`,
+    emits: ["scrolledInView"]
+  }), _a;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withScrolledInView.d.ts

@@ -8,9 +8,10 @@
  *
  * @template {BaseConstructor} T
  * @param {T} BaseClass
+ * @param {IntersectionObserverInit} options
  * @return {T}
  */
-export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T): T;
+export default function withScrolledInView<T extends typeof import("../Base").default>(BaseClass: T, options: IntersectionObserverInit): T;
 export type Base = import('../Base').default;
 export type BaseConstructor = import('../Base').BaseConstructor;
 export type BaseConfig = import('../Base').BaseConfig;

package/decorators/withScrolledInView.js

@@ -1,14 +1,17 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import withMountWhenInView from './withMountWhenInView.js';
-import { damp, clamp, clamp01 } from '../utils/index.js';
-export default function withScrolledInView(BaseClass) {
-  var _class, _temp;
-
-  return _temp = _class = class extends withMountWhenInView(BaseClass) {
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import withMountWhenInView from "./withMountWhenInView.js";
+import { damp, clamp, clamp01 } from "../utils/index.js";
+function withScrolledInView(BaseClass, options) {
+  var _a;
+  return _a = class extends withMountWhenInView(BaseClass, options) {
     constructor() {
       super(...arguments);
-
-      _defineProperty(this, "__props", {
+      __publicField(this, "__props", {
         start: {
           x: 0,
           y: 0
@@ -30,26 +33,20 @@ export default function withScrolledInView(BaseClass) {
           y: 0
         }
       });
-
-      _defineProperty(this, "dampFactor", 0.1);
-
-      _defineProperty(this, "dampPrecision", 0.001);
+      __publicField(this, "dampFactor", 0.1);
+      __publicField(this, "dampPrecision", 1e-3);
     }
-
     mounted() {
       this.__setProps();
     }
-
     resized() {
       this.__setProps();
     }
-
     scrolled(props) {
-      if (!this.$services.has('ticked') && props.changed.y || props.changed.x) {
-        this.$services.enable('ticked');
+      if (!this.$services.has("ticked") && props.changed.y || props.changed.x) {
+        this.$services.enable("ticked");
       }
     }
-
     ticked() {
       this.__props.current.x = clamp(window.pageXOffset, this.__props.start.x, this.__props.end.x);
       this.__props.progress.x = clamp01((this.__props.current.x - this.__props.start.x) / (this.__props.end.x - this.__props.start.x));
@@ -57,24 +54,21 @@ export default function withScrolledInView(BaseClass) {
       this.__props.current.y = clamp(window.pageYOffset, this.__props.start.y, this.__props.end.y);
       this.__props.progress.y = clamp01((this.__props.current.y - this.__props.start.y) / (this.__props.end.y - this.__props.start.y));
       this.__props.dampedProgress.y = damp(this.__props.progress.y, this.__props.dampedProgress.y, this.dampFactor, this.dampPrecision);
-
       if (this.__props.dampedProgress.x === this.__props.progress.x && this.__props.dampedProgress.y === this.__props.progress.y) {
-        this.$services.disable('ticked');
+        this.$services.disable("ticked");
       }
-
-      this.__callMethod('scrolledInView', this.__props);
+      this.__callMethod("scrolledInView", this.__props);
     }
-
     __setProps() {
-      var sizes = this.$el.getBoundingClientRect();
-      var yEnd = sizes.top + window.pageYOffset + sizes.height;
-      var yStart = yEnd - window.innerHeight - sizes.height;
-      var yCurrent = clamp(window.pageYOffset, yStart, yEnd);
-      var yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
-      var xEnd = sizes.left + window.pageXOffset + sizes.width;
-      var xStart = xEnd - window.innerWidth - sizes.width;
-      var xCurrent = clamp(window.pageXOffset, xStart, xEnd);
-      var xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));
+      const sizes = this.$el.getBoundingClientRect();
+      const yEnd = sizes.top + window.pageYOffset + sizes.height;
+      const yStart = yEnd - window.innerHeight - sizes.height;
+      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);
+      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));
+      const xEnd = sizes.left + window.pageXOffset + sizes.width;
+      const xStart = xEnd - window.innerWidth - sizes.width;
+      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);
+      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));
       this.__props.start.x = xStart;
       this.__props.start.y = yStart;
       this.__props.end.x = xEnd;
@@ -86,9 +80,11 @@ export default function withScrolledInView(BaseClass) {
       this.__props.dampedProgress.x = damp(xProgress, this.__props.dampedProgress.x);
       this.__props.dampedProgress.y = damp(yProgress, this.__props.dampedProgress.y);
     }
-
-  }, _defineProperty(_class, "config", {
-    name: "".concat(BaseClass.config.name, "WithMountWhenInView"),
-    emits: ['scrolledInView']
-  }), _temp;
-}
+  }, __publicField(_a, "config", {
+    name: `${BaseClass.config.name}WithMountWhenInView`,
+    emits: ["scrolledInView"]
+  }), _a;
+}
+export {
+  withScrolledInView as default
+};

package/decorators/withVue2.cjs

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/decorators/withVue2.js
+var withVue2_exports = {};
+__export(withVue2_exports, {
+  default: () => withVue2_default
+});
+module.exports = __toCommonJS(withVue2_exports);
+var withVue2_default = (BaseClass, Vue) => {
+  var _a, _b, _c;
+  return _c = class extends BaseClass {
+    constructor(element) {
+      super(element);
+      __publicField(this, "$vue");
+      const { vueConfig } = this.constructor;
+      if (!vueConfig) {
+        throw new Error("[withVue] You must define a `vueConfig` object.");
+      }
+      if (typeof vueConfig.render !== "function") {
+        throw new Error("[withVue] You must define a `render` function in vueConfig.");
+      }
+      this.$vue = new Vue(vueConfig);
+      this.$on("mounted", () => {
+        if (!(this.$refs.vue instanceof HTMLElement)) {
+          throw new Error("[withVue] The `vue` refs must be a single HTMLElement.");
+        }
+        this.$vue.$mount(this.$refs.vue);
+      });
+      this.$on("destroyed", () => {
+        this.$vue.$destroy();
+      });
+    }
+  }, __publicField(_c, "config", {
+    ...BaseClass.config,
+    name: `${BaseClass.config.name}WithVue`,
+    refs: [...(_b = (_a = BaseClass.config) == null ? void 0 : _a.refs) != null ? _b : [], "vue"]
+  }), __publicField(_c, "vueConfig"), _c;
+};
+if (module.exports.default) module.exports = module.exports.default;