@studiometa/ui 0.1.1 → 0.2.2

package/molecules/Slider/SliderItem.js

@@ -0,0 +1,105 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Base, withIntersectionObserver } from "@studiometa/js-toolkit";
+import { matrix, damp } from "@studiometa/js-toolkit/utils";
+class SliderItem extends withIntersectionObserver(Base, { threshold: [0, 1] }) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isVisible", false);
+    __publicField(this, "x", 0);
+    __publicField(this, "dampedX", 0);
+  }
+  mounted() {
+    this.updateRectAdjustedWithX();
+  }
+  resized() {
+    this.updateRectAdjustedWithX();
+  }
+  destroyed() {
+    this.moveInstantly(0);
+  }
+  intersected([{ intersectionRatio, isIntersecting }]) {
+    if (intersectionRatio >= 1) {
+      this.$emit("is-fully-visible");
+      this.$el.setAttribute("aria-hidden", "false");
+    } else if (intersectionRatio > 0) {
+      this.$emit("is-partially-visible");
+      this.$el.setAttribute("aria-hidden", "true");
+    } else {
+      this.$emit("is-hidden");
+      this.$el.setAttribute("aria-hidden", "true");
+    }
+    this.isVisible = isIntersecting;
+  }
+  ticked() {
+    this.dampedX = damp(this.x, this.dampedX, 0.2, 1e-5);
+    this.$el.style.transform = `${matrix({
+      translateX: this.dampedX
+    })} translateZ(0px)`;
+    if (this.dampedX === this.x) {
+      this.$services.disable("ticked");
+    }
+  }
+  activate() {
+    this.$el.classList.add("is-active");
+  }
+  disactivate() {
+    this.$el.classList.remove("is-active");
+  }
+  move(targetPosition) {
+    this.x = targetPosition;
+    if (!this.$services.has("ticked")) {
+      this.$services.enable("ticked");
+    }
+  }
+  moveInstantly(targetPosition) {
+    this.x = targetPosition;
+    this.dampedX = targetPosition;
+    this.$el.style.transform = `${matrix({
+      translateX: targetPosition
+    })} translateZ(0px)`;
+  }
+  willBeVisible(targetPosition) {
+    return this.rect.x + targetPosition < window.innerWidth * 1.5 && this.rect.x + targetPosition + this.rect.width > window.innerWidth * -0.5;
+  }
+  willBeFullyVisible(targetPosition) {
+    return this.rect.x + targetPosition < window.innerWidth && this.rect.x + targetPosition > 0 && this.rect.x + targetPosition + this.rect.width < window.innerWidth && this.rect.x + targetPosition + this.rect.width > 0;
+  }
+  updateRectAdjustedWithX() {
+    const x = this.x * -1;
+    const rect = this.$el.getBoundingClientRect().toJSON();
+    this.rect = __spreadProps(__spreadValues({}, rect), {
+      left: rect.left + x,
+      right: rect.left + x + rect.width,
+      x: rect.left + x
+    });
+  }
+}
+__publicField(SliderItem, "config", {
+  name: "SliderItem",
+  emits: ["is-fully-visible", "is-partially-visible", "is-hidden"]
+});
+export {
+  SliderItem as default
+};

package/molecules/Slider/SliderProgress.cjs

@@ -0,0 +1,54 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/Slider/SliderProgress.js
+var SliderProgress_exports = {};
+__export(SliderProgress_exports, {
+  default: () => SliderProgress
+});
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
+var SliderProgress = class extends import_AbstractSliderChild.default {
+  update(index) {
+    const unit = this.$refs.progress.clientWidth / this.$parent.indexMax;
+    this.$refs.progress.style.transform = (0, import_utils.matrix)({
+      translateX: (0, import_utils.map)(index, 0, this.$parent.indexMax, (this.$refs.progress.clientWidth - unit) * -1, 0)
+    });
+  }
+};
+__publicField(SliderProgress, "config", {
+  name: "SliderProgress",
+  refs: ["progress"]
+});
+module.exports = __toCommonJS(SliderProgress_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/SliderProgress.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @typedef {SliderProgress & {
+ *   $refs: {
+ *     progress: HTMLElement
+ *   },
+ *   $parent: import('./Slider.js').default
+ * }} SliderProgressInterface
+ */
+/**
+ * SliderProgress class.
+ */
+export default class SliderProgress extends AbstractSliderChild {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+    };
+}
+export type SliderProgressInterface = SliderProgress & {
+    $refs: {
+        progress: HTMLElement;
+    };
+    $parent: import('./Slider.js').default;
+};
+import AbstractSliderChild from "./AbstractSliderChild.js";

package/molecules/Slider/SliderProgress.js

@@ -0,0 +1,23 @@
+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 { matrix, map } from "@studiometa/js-toolkit/utils";
+import AbstractSliderChild from "./AbstractSliderChild.js";
+class SliderProgress extends AbstractSliderChild {
+  update(index) {
+    const unit = this.$refs.progress.clientWidth / this.$parent.indexMax;
+    this.$refs.progress.style.transform = matrix({
+      translateX: map(index, 0, this.$parent.indexMax, (this.$refs.progress.clientWidth - unit) * -1, 0)
+    });
+  }
+}
+__publicField(SliderProgress, "config", {
+  name: "SliderProgress",
+  refs: ["progress"]
+});
+export {
+  SliderProgress as default
+};

package/molecules/Slider/index.cjs

@@ -0,0 +1,50 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// packages/ui/molecules/Slider/index.js
+var Slider_exports = {};
+__export(Slider_exports, {
+  AbstractSliderChild: () => import_AbstractSliderChild.default,
+  Slider: () => import_Slider.default,
+  SliderBtn: () => import_SliderBtn.default,
+  SliderCount: () => import_SliderCount.default,
+  SliderDots: () => import_SliderDots.default,
+  SliderDrag: () => import_SliderDrag.default,
+  SliderItem: () => import_SliderItem.default,
+  SliderProgress: () => import_SliderProgress.default
+});
+var import_AbstractSliderChild = __toESM(require("./AbstractSliderChild.cjs"), 1);
+var import_Slider = __toESM(require("./Slider.cjs"), 1);
+var import_SliderBtn = __toESM(require("./SliderBtn.cjs"), 1);
+var import_SliderCount = __toESM(require("./SliderCount.cjs"), 1);
+var import_SliderDrag = __toESM(require("./SliderDrag.cjs"), 1);
+var import_SliderItem = __toESM(require("./SliderItem.cjs"), 1);
+var import_SliderProgress = __toESM(require("./SliderProgress.cjs"), 1);
+var import_SliderDots = __toESM(require("./SliderDots.cjs"), 1);
+module.exports = __toCommonJS(Slider_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Slider/index.d.ts

@@ -0,0 +1,8 @@
+export { default as AbstractSliderChild } from "./AbstractSliderChild.js";
+export { default as Slider } from "./Slider.js";
+export { default as SliderBtn } from "./SliderBtn.js";
+export { default as SliderCount } from "./SliderCount.js";
+export { default as SliderDrag } from "./SliderDrag.js";
+export { default as SliderItem } from "./SliderItem.js";
+export { default as SliderProgress } from "./SliderProgress.js";
+export { default as SliderDots } from "./SliderDots.js";

package/molecules/Slider/index.js

@@ -0,0 +1,18 @@
+import { default as default2 } from "./AbstractSliderChild.js";
+import { default as default3 } from "./Slider.js";
+import { default as default4 } from "./SliderBtn.js";
+import { default as default5 } from "./SliderCount.js";
+import { default as default6 } from "./SliderDrag.js";
+import { default as default7 } from "./SliderItem.js";
+import { default as default8 } from "./SliderProgress.js";
+import { default as default9 } from "./SliderDots.js";
+export {
+  default2 as AbstractSliderChild,
+  default3 as Slider,
+  default4 as SliderBtn,
+  default5 as SliderCount,
+  default9 as SliderDots,
+  default6 as SliderDrag,
+  default7 as SliderItem,
+  default8 as SliderProgress
+};

package/molecules/Sticky/Sticky.cjs

@@ -0,0 +1,133 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/molecules/Sticky/Sticky.js
+var Sticky_exports = {};
+__export(Sticky_exports, {
+  default: () => Sticky
+});
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_primitives = require("../../primitives/index.cjs");
+var _Sticky = class extends import_js_toolkit.Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isSticky", false);
+    __publicField(this, "isVisible", true);
+  }
+  set y(value) {
+    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
+  }
+  get instances() {
+    return Array.from(_Sticky.instances);
+  }
+  mounted() {
+    _Sticky.instances.add(this);
+    this.setSentinelSize();
+  }
+  resized() {
+    this.setSentinelSize();
+  }
+  destroyed() {
+    _Sticky.instances.delete(this);
+  }
+  scrolled(props) {
+    if (!this.isSticky || props.y === props.last.y) {
+      return;
+    }
+    if (props.direction.y === "DOWN" && this.$options.hideWhenDown || props.direction.y === "UP" && this.$options.hideWhenUp) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  onSentinelIntersected([entry]) {
+    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
+    this.setPosition();
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.isVisible = false;
+    this.$el.classList.add("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  show() {
+    if (this.isVisible) {
+      return;
+    }
+    this.isVisible = true;
+    this.$el.classList.remove("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  setSentinelSize() {
+    const { instances } = this;
+    const index = instances.findIndex((instance) => instance === this);
+    const height = instances.slice(0, index).filter((instance) => this.closestRelativeElement(instance.$el).contains(this.$el)).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
+    this.$refs.sentinelRef.style.height = `${height + 1}px`;
+    this.$el.style.top = `${height}px`;
+    this.$el.style.zIndex = String(this.$options.zIndex - index);
+  }
+  setPosition(index) {
+    if (!this.isSticky) {
+      this.y = 0;
+      return;
+    }
+    const { instances } = this;
+    index = index != null ? index : instances.findIndex((instance) => instance === this);
+    this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce((y, instance) => {
+      return y - instance.$refs.inner.offsetHeight;
+    }, this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1);
+  }
+  closestRelativeElement(element) {
+    let parent = element.parentElement;
+    while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+};
+var Sticky = _Sticky;
+__publicField(Sticky, "config", {
+  name: "Sticky",
+  refs: ["inner", "sentinelRef"],
+  components: {
+    Sentinel: import_primitives.Sentinel
+  },
+  options: {
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    hideWhenUp: Boolean,
+    hideWhenDown: Boolean
+  }
+});
+__publicField(Sticky, "instances", /* @__PURE__ */ new Set());
+module.exports = __toCommonJS(Sticky_exports);
+if (module.exports.default) module.exports = module.exports.default;

package/molecules/Sticky/Sticky.d.ts

@@ -0,0 +1,141 @@
+/**
+ * @typedef {Object} StickyRefs
+ * @property {HTMLElement} inner
+ * @property {HTMLElement} sentinelRef
+ */
+/**
+ * @typedef {Object} StickyPrivateInterface
+ * @property {StickyRefs} $refs
+ * @property {{ zIndex: number, hideWhenUp: boolean, hideWhenDown: boolean }} $options
+ * @property {{ Sentinel: Sentinel[] }} $children
+ */
+/**
+ * @typedef {Sticky & StickyPrivateInterface} StickyInterface
+ */
+/**
+ * Sticky class.
+ */
+export default class Sticky extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        components: {
+            Sentinel: typeof Sentinel;
+        };
+        options: {
+            zIndex: {
+                type: NumberConstructor;
+                default: number;
+            };
+            hideWhenUp: BooleanConstructor;
+            hideWhenDown: BooleanConstructor;
+        };
+    };
+    /**
+     * Holder for all instances.
+     * @type {Set<StickyInterface>}
+     */
+    static instances: Set<StickyInterface>;
+    /**
+     * Is the component sticky?
+     * @type {boolean}
+     */
+    isSticky: boolean;
+    /**
+     * Is the component visible?
+     * @type {Boolean}
+     */
+    isVisible: boolean;
+    /**
+     * Set the Y value.
+     *
+     * @this    {StickyInterface}
+     * @param   {number} value
+     * @returns {void}
+     */
+    set y(arg: number);
+    /**
+     * Get instances as array.
+     * @return {Array<StickyInterface>}
+     */
+    get instances(): StickyInterface[];
+    /**
+     * Mounted hook.
+     * @this {StickyInterface}
+     */
+    mounted(): void;
+    /**
+     * Resized hook.
+     * @this {StickyInterface}
+     * @returns {void}
+     */
+    resized(): void;
+    /**
+     * Destroyed hook.
+     * @this {StickyInterface}
+     */
+    destroyed(): void;
+    /**
+     * Scrolled hook.
+     * @this {StickyInterface}
+     */
+    scrolled(props: any): void;
+    /**
+     * Listen to the sentinel's `intersected` event to set the `isSticky` value.
+     *
+     * @param   {IntersectionObserverEntry[]} entries
+     * @returns {void}
+     */
+    onSentinelIntersected([entry]: IntersectionObserverEntry[]): void;
+    /**
+     * Hide the sticky component when another one is sticky.
+     * @this {StickyInterface}
+     */
+    hide(): void;
+    /**
+     * Show the sticky component when the other one is not sticky anymore.
+     * @this {StickyInterface}
+     */
+    show(): void;
+    /**
+     * Set the sentinel height based on the previous instances.
+     * @this {StickyInterface}
+     */
+    setSentinelSize(): void;
+    /**
+     * Set the component's position.
+     *
+     * @this    {StickyInterface}
+     * @param   {number} [index] The instance index in all the pages' instances.
+     * @returns {void}
+     */
+    setPosition(index?: number): void;
+    /**
+     * Find the first parent which has a relative position.
+     *
+     * @param   {HTMLElement} element
+     * @returns {HTMLElement}
+     */
+    closestRelativeElement(element: HTMLElement): HTMLElement;
+}
+export type StickyRefs = {
+    inner: HTMLElement;
+    sentinelRef: HTMLElement;
+};
+export type StickyPrivateInterface = {
+    $refs: StickyRefs;
+    $options: {
+        zIndex: number;
+        hideWhenUp: boolean;
+        hideWhenDown: boolean;
+    };
+    $children: {
+        Sentinel: Sentinel[];
+    };
+};
+export type StickyInterface = Sticky & StickyPrivateInterface;
+import { Base } from "@studiometa/js-toolkit";
+import { Sentinel } from "../../primitives/index.js";

package/molecules/Sticky/Sticky.js

@@ -0,0 +1,107 @@
+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 { Base } from "@studiometa/js-toolkit";
+import { Sentinel } from "../../primitives/index.js";
+const _Sticky = class extends Base {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "isSticky", false);
+    __publicField(this, "isVisible", true);
+  }
+  set y(value) {
+    this.$refs.inner.style.transform = `translateY(${value}px) translateZ(0px)`;
+  }
+  get instances() {
+    return Array.from(_Sticky.instances);
+  }
+  mounted() {
+    _Sticky.instances.add(this);
+    this.setSentinelSize();
+  }
+  resized() {
+    this.setSentinelSize();
+  }
+  destroyed() {
+    _Sticky.instances.delete(this);
+  }
+  scrolled(props) {
+    if (!this.isSticky || props.y === props.last.y) {
+      return;
+    }
+    if (props.direction.y === "DOWN" && this.$options.hideWhenDown || props.direction.y === "UP" && this.$options.hideWhenUp) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  onSentinelIntersected([entry]) {
+    this.isSticky = entry.isIntersecting && entry.boundingClientRect.y < 0;
+    this.setPosition();
+  }
+  hide() {
+    if (!this.isVisible) {
+      return;
+    }
+    this.isVisible = false;
+    this.$el.classList.add("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  show() {
+    if (this.isVisible) {
+      return;
+    }
+    this.isVisible = true;
+    this.$el.classList.remove("pointer-events-none");
+    this.instances.forEach((instance, index) => instance.setPosition(index));
+  }
+  setSentinelSize() {
+    const { instances } = this;
+    const index = instances.findIndex((instance) => instance === this);
+    const height = instances.slice(0, index).filter((instance) => this.closestRelativeElement(instance.$el).contains(this.$el)).reduce((acc, instance) => acc + instance.$el.offsetHeight, 0);
+    this.$refs.sentinelRef.style.height = `${height + 1}px`;
+    this.$el.style.top = `${height}px`;
+    this.$el.style.zIndex = String(this.$options.zIndex - index);
+  }
+  setPosition(index) {
+    if (!this.isSticky) {
+      this.y = 0;
+      return;
+    }
+    const { instances } = this;
+    index = index != null ? index : instances.findIndex((instance) => instance === this);
+    this.y = instances.slice(0, index).filter((instance) => instance.isSticky && !instance.isVisible).reduce((y, instance) => {
+      return y - instance.$refs.inner.offsetHeight;
+    }, this.isVisible ? 0 : this.$refs.inner.offsetHeight * -1);
+  }
+  closestRelativeElement(element) {
+    let parent = element.parentElement;
+    while (getComputedStyle(parent).position !== "relative" && parent.parentElement) {
+      parent = parent.parentElement;
+    }
+    return parent;
+  }
+};
+let Sticky = _Sticky;
+__publicField(Sticky, "config", {
+  name: "Sticky",
+  refs: ["inner", "sentinelRef"],
+  components: {
+    Sentinel
+  },
+  options: {
+    zIndex: {
+      type: Number,
+      default: 100
+    },
+    hideWhenUp: Boolean,
+    hideWhenDown: Boolean
+  }
+});
+__publicField(Sticky, "instances", /* @__PURE__ */ new Set());
+export {
+  Sticky as default
+};