tdesign-vue-next/cjs/tag-input/hooks/useTagScroll.js

TDesign Component for vue-next

/**
 * tdesign v1.19.2
 * (c) 2026 tdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var Vue = require('vue');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/typeof');
require('../../_chunks/dep-35e23c2b.js');
var index = require('../../_chunks/dep-0238ed9a.js');
require('@babel/runtime/helpers/slicedToArray');
require('../../_chunks/dep-0989c3be.js');
require('@babel/runtime/helpers/defineProperty');
var isFunction = require('../../_chunks/dep-2dcf9237.js');
require('../../_chunks/dep-4a7162e7.js');
require('../../config-provider/hooks/useConfig.js');
require('../../_chunks/dep-be1af85d.js');
require('../../_chunks/dep-db9c85b1.js');
require('dayjs');
require('../../_chunks/dep-82fe2026.js');
require('../../_chunks/dep-33b46a52.js');
require('../../_chunks/dep-930a2de5.js');
require('../../_chunks/dep-22dc294c.js');
require('../../_chunks/dep-bf76dead.js');
require('../../_chunks/dep-c3bbd06c.js');
require('../../_chunks/dep-6d87f74d.js');
require('../../_chunks/dep-4cb26289.js');
require('../../_chunks/dep-281f7eb2.js');
require('../../_chunks/dep-f8f7b1af.js');
require('../../_chunks/dep-66d3f30f.js');
require('../../_chunks/dep-e1d22111.js');
require('../../_chunks/dep-754c0523.js');
require('../../_chunks/dep-7076a08a.js');
require('../../_chunks/dep-631750cd.js');
require('../../_chunks/dep-2fc884aa.js');
require('../../_chunks/dep-75d6da05.js');
require('../../_chunks/dep-274369eb.js');
require('../../_chunks/dep-df6e14a0.js');
require('@babel/runtime/helpers/createClass');
require('@babel/runtime/helpers/classCallCheck');

function useTagScroll(props) {
  var tagInputRef = Vue.ref();
  var classPrefix = index.usePrefixClass();
  var _toRefs = Vue.toRefs(props),
    excessTagsDisplayType = _toRefs.excessTagsDisplayType,
    readonly = _toRefs.readonly,
    disabled = _toRefs.disabled;
  var scrollDistance = Vue.ref(0);
  var scrollElement = Vue.ref();
  var mouseEnterTimer = Vue.ref();
  var isScrollable = Vue.ref(false);
  var updateScrollElement = function updateScrollElement(element) {
    var prefixElement = element.querySelector(".".concat(classPrefix.value, "-input__prefix"));
    scrollElement.value = prefixElement;
  };
  var updateScrollDistance = function updateScrollDistance() {
    scrollDistance.value = scrollElement.value.scrollWidth - scrollElement.value.clientWidth;
  };
  var scrollTo = function scrollTo(distance) {
    var _scrollElement$value;
    if (!isFunction.isFunction((_scrollElement$value = scrollElement.value) === null || _scrollElement$value === void 0 ? void 0 : _scrollElement$value.scroll)) return;
    scrollElement.value.scroll({
      left: distance,
      behavior: "smooth"
    });
  };
  var scrollToRight = function scrollToRight() {
    var _tagInputRef$value;
    var element = (_tagInputRef$value = tagInputRef.value) === null || _tagInputRef$value === void 0 ? void 0 : _tagInputRef$value.$el;
    if (element) {
      updateScrollElement(element);
    }
    if (!scrollElement.value) return;
    setTimeout(function () {
      updateScrollDistance();
      scrollTo(scrollDistance.value);
      setTimeout(function () {
        isScrollable.value = true;
      }, 200);
    }, 0);
  };
  var scrollToLeft = function scrollToLeft() {
    scrollTo(0);
  };
  var onWheel = function onWheel(_ref) {
    var e = _ref.e;
    if (readonly.value || disabled.value) return;
    if (!scrollElement.value) return;
    var delta = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
    if (delta > 0) {
      updateScrollDistance();
      var distance = Math.min(scrollElement.value.scrollLeft + 120, scrollDistance.value);
      scrollTo(distance);
    } else if (delta < 0) {
      var _distance = Math.max(scrollElement.value.scrollLeft - 120, 0);
      scrollTo(_distance);
    }
  };
  var scrollToRightOnEnter = function scrollToRightOnEnter() {
    if (excessTagsDisplayType.value !== "scroll") return;
    mouseEnterTimer.value = setTimeout(function () {
      scrollToRight();
      clearTimeout(mouseEnterTimer.value);
    }, 100);
  };
  var scrollToLeftOnLeave = function scrollToLeftOnLeave() {
    if (excessTagsDisplayType.value !== "scroll") return;
    isScrollable.value = false;
    scrollTo(0);
    clearTimeout(mouseEnterTimer.value);
  };
  var init = function init() {
    var _tagInputRef$value2;
    var element = (_tagInputRef$value2 = tagInputRef.value) === null || _tagInputRef$value2 === void 0 ? void 0 : _tagInputRef$value2.$el;
    if (!element) return;
    updateScrollElement(element);
  };
  var clear = function clear() {
    clearTimeout(mouseEnterTimer.value);
  };
  Vue.onMounted(init);
  Vue.onUnmounted(clear);
  return {
    tagInputRef: tagInputRef,
    scrollElement: scrollElement,
    scrollDistance: scrollDistance,
    scrollTo: scrollTo,
    scrollToRight: scrollToRight,
    scrollToLeft: scrollToLeft,
    updateScrollElement: updateScrollElement,
    updateScrollDistance: updateScrollDistance,
    onWheel: onWheel,
    scrollToRightOnEnter: scrollToRightOnEnter,
    scrollToLeftOnLeave: scrollToLeftOnLeave,
    isScrollable: isScrollable
  };
}

exports.useTagScroll = useTagScroll;
//# sourceMappingURL=useTagScroll.js.map