@progress/kendo-vue-dateinputs/virtualization/Virtualization.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as m, createVNode as p } from "vue";
import { getDefaultSlots as S, classNames as d } from "@progress/kendo-vue-common";
import { RowHeightService as g } from "./services/RowHeightService.mjs";
import { ScrollerService as w } from "./services/ScrollerService.mjs";
let s = /* @__PURE__ */ function(t) {
  return t[t.Backward = 0] = "Backward", t[t.Forward = 1] = "Forward", t;
}({});
const v = (t, e, r) => Math.min(Math.abs(e - t), r), H = 17, $ = {
  [s.Forward]: (t) => (e) => e + t,
  [s.Backward]: (t) => (e) => e - t
}, b = {
  [s.Forward]: (t) => (e) => Math.min(e, t),
  [s.Backward]: (t) => (e) => Math.max(e, t)
}, x = {
  [s.Forward]: (t) => (e) => e < t,
  [s.Backward]: (t) => (e) => e > t
}, y = /* @__PURE__ */ m({
  name: "Virtualization",
  emits: {
    scroll: (t) => !0,
    scrollaction: (t) => !0
  },
  props: {
    bottomOffset: {
      type: Number,
      required: !0
    },
    direction: {
      type: String,
      default: function() {
        return "vertical";
      }
    },
    forceScroll: {
      type: Boolean,
      default: !1
    },
    itemHeight: Number,
    itemWidth: Number,
    maxScrollDifference: {
      type: Number,
      default: 100
    },
    scrollDuration: {
      type: Number,
      default: 100
    },
    scrollOffsetSize: {
      type: Number,
      default: 0
    },
    skip: {
      type: Number,
      required: !0
    },
    tabIndex: Number,
    take: {
      type: Number,
      required: !0
    },
    topOffset: {
      type: Number,
      required: !0
    },
    total: {
      type: Number,
      required: !0
    },
    role: String
  },
  created() {
    this.animationInProgress = !1, this.lastTotal = void 0, this.scrollerService = new w(this.handleScrollAction, this.handlePageAction);
  },
  mounted() {
    this.scrollContainer = this.$refs.scrollContainer;
  },
  computed: {
    element() {
      return this.scrollContainer;
    }
  },
  methods: {
    containerOffsetSize() {
      return this.getContainerProperty(this.$props.direction === "vertical" ? "offsetHeight" : "offsetWidth");
    },
    containerScrollSize() {
      return this.getContainerProperty(this.$props.direction === "vertical" ? "scrollHeight" : "scrollWidth");
    },
    containerScrollPosition() {
      return this.getContainerProperty(this.$props.direction === "vertical" ? "scrollTop" : "scrollLeft");
    },
    activeIndex() {
      return this.itemIndex(Math.ceil(this.containerScrollPosition()));
    },
    itemIndex(t) {
      return this.rowHeightService ? this.rowHeightService.index(t) : 0;
    },
    itemOffset(t) {
      return this.rowHeightService ? this.rowHeightService.offset(t) : 0;
    },
    isIndexVisible(t) {
      if (!this.rowHeightService)
        return !1;
      const e = this.containerScrollPosition(), r = e + this.containerOffsetSize(), i = this.rowHeightService.offset(t), o = i + this.rowHeightService.height(t);
      return i >= e && o <= r;
    },
    isListScrolled(t) {
      return this.rowHeightService ? this.containerScrollPosition() !== this.rowHeightService.offset(t) : !1;
    },
    scrollTo(t) {
      const e = this.$props.direction === "vertical" ? "scrollTop" : "scrollLeft";
      this.scrollContainer && (this.scrollContainer[e] = t);
    },
    scrollToIndex(t) {
      this.rowHeightService && (this.animationInProgress = !1, this.scrollTo(this.rowHeightService.offset(t)));
    },
    animateToIndex(t) {
      if (!this.rowHeightService || !window)
        return;
      window.cancelAnimationFrame(this.cancelAnimation);
      const e = this.rowHeightService.offset(t), r = this.getContainerScrollDirection(e);
      let {
        start: i,
        end: o
      } = this.scrollRange(e, r);
      if (i === o)
        return;
      const l = this.scrollStep(i, o), n = $[r](l), a = b[r](o), f = x[r](n(o)), h = (u) => {
        this.animationInProgress = !0;
        const c = n(u);
        this.scrollTo(a(c)), f(c) ? this.cancelAnimation = window.requestAnimationFrame(() => {
          h(c);
        }) : this.animationInProgress = !1;
      };
      this.cancelAnimation = window.requestAnimationFrame(() => {
        h(i);
      });
    },
    scrollToBottom() {
      this.rowHeightService && this.scrollTo(this.rowHeightService.totalHeight() + this.$props.bottomOffset);
    },
    scrollStep(t, e) {
      const r = this.$props.scrollDuration;
      return Math.abs(e - t) / (r / H);
    },
    scrollRange(t, e) {
      const r = this.containerScrollPosition();
      if (parseInt(`${t}`, 10) === parseInt(`${r}`, 10))
        return {
          start: t,
          end: t
        };
      const i = this.containerMaxScroll(), o = e === s.Backward ? 1 : -1, l = v(r, t, this.$props.maxScrollDifference), n = Math.min(t, i);
      return {
        start: Math.min(Math.max(n + o * l, 0), i),
        end: n
      };
    },
    containerMaxScroll() {
      return this.containerScrollSize() - this.containerOffsetSize();
    },
    getContainerScrollDirection(t) {
      return t < this.containerScrollPosition() ? s.Backward : s.Forward;
    },
    initServices(t) {
      const e = t || this.$props, r = e.direction === "vertical" ? e.itemHeight : e.itemWidth;
      r !== void 0 && (this.rowHeightService = new g(e.total, r, 0), this.scrollerService.create(this.rowHeightService, e.skip, e.take, e.total, e.topOffset, this.$props.scrollOffsetSize, this.$props.direction));
    },
    getContainerProperty(t) {
      return this.scrollContainer ? this.scrollContainer[t] : 0;
    },
    handleScroll(t) {
      if (!this.scrollContainer || !this.rowHeightService)
        return;
      const e = t.target;
      this.scrollerService.onScroll({
        scrollLeft: e.scrollLeft,
        scrollTop: e.scrollTop,
        offsetHeight: e.offsetHeight,
        offsetWidth: e.offsetWidth
      });
      const i = {
        index: this.rowHeightService.index(this.containerScrollPosition() - this.$props.topOffset),
        target: e,
        scrollAction: this.scrollAction,
        pageAction: this.pageAction,
        animationInProgress: this.animationInProgress
      };
      this.$emit("scrollaction", i), this.scrollAction = void 0, this.pageAction = void 0;
    },
    handleScrollAction(t) {
      this.scrollAction = t;
    },
    handlePageAction(t) {
      this.pageAction = t;
    }
  },
  render() {
    const t = S(this);
    (this.lastTotal !== this.$props.total || this.lastDirection !== this.$props.direction || this.lastTake !== this.$props.take) && (this.initServices(), this.lastTotal = this.$props.total, this.lastDirection = this.$props.direction, this.lastTake = this.$props.take);
    const e = `${(this.rowHeightService ? this.rowHeightService.totalHeight() : 0) + this.$props.bottomOffset}`, r = this.$props.direction === "vertical" ? {
      height: `${e}px`
    } : {
      width: `${e}px`
    }, i = d("k-content k-scrollable", {
      "k-scrollable-horizontal": this.$props.direction === "horizontal"
    }), o = d("k-scrollable-placeholder", {
      "k-scrollable-horizontal-placeholder": this.$props.direction === "horizontal"
    });
    return p("div", {
      ref: "scrollContainer",
      onScroll: this.handleScroll,
      class: i,
      tabindex: this.$props.tabIndex,
      role: this.$props.role
    }, [t, p("div", {
      style: r,
      class: o
    }, null)]);
  }
});
export {
  s as ScrollDirection,
  y as Virtualization
};