y-design-ssr/libs/tabs/index.mjs

SSR component library of YUI with Vue3

import { ref as X, reactive as D, getCurrentInstance as oe, provide as Se, isVNode as ae, inject as Te, onUnmounted as Ne, computed as x, defineComponent as U, createVNode as N, watch as Z, onMounted as ce, nextTick as ee, onBeforeUnmount as Ce, onBeforeUpdate as Ee } from "vue";
const H = (e, o) => o ? typeof o == "string" ? ` ${e}--${o}` : Array.isArray(o) ? o.reduce((i, t) => i + H(e, t), "") : Object.keys(o).reduce(
  (i, t) => i + (o[t] ? H(e, t) : ""),
  ""
) : "", Le = (e) => (o, i) => {
  let t = o, m = i;
  return t && typeof t != "string" && (m = t, t = ""), t = t ? `${e}__${t}` : e, `${t}${H(t, m)}`;
}, ze = () => (e, o) => o ? `${H(`y-${e}`, o)}` : `y-${e}`, Be = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
X("zh-CN");
D({
  "zh-CN": Be
});
const G = (e) => {
  const o = `y-${e}`;
  return [o, Le(o), ze()];
};
var te = /* @__PURE__ */ ((e) => (e.left = "left", e.top = "top", e.bottom = "bottom", e.right = "right", e))(te || {}), F = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e))(F || {});
const se = (e, o) => typeof e == "string" && e.includes("%") && e.includes("%") ? o * Number(e.replace(/%/g, "")) / 100 : Number(e), Ie = (e) => {
  const o = [], i = (t) => {
    Array.isArray(t) && t.forEach((m) => {
      var u;
      ae(m) && (o.push(m), (u = m.component) != null && u.subTree && i(m.component.subTree.children), m.children && i(m.children));
    });
  };
  return i(e), o;
}, $e = (e, o) => {
  const i = Ie(o.subTree.children);
  e.sort((t, m) => i.indexOf(t.vnode) - i.indexOf(m.vnode));
}, ue = (e) => {
  const o = oe(), i = D([]);
  return {
    children: i,
    initProvide: (m) => {
      Se(e, {
        addChild: (a) => {
          a.proxy && (i.push(a), o && $e(i, o));
        },
        removeChild: (a) => {
          const d = i.indexOf(a);
          i.splice(d, 1);
        },
        children: i,
        ...m
      });
    }
  };
}, fe = (e) => {
  const o = Te(e, null), i = oe();
  if (o && i) {
    const { children: t, addChild: m, removeChild: u } = o;
    return m(i), Ne(() => u(i)), {
      index: x(() => t.indexOf(i)),
      parent: o
    };
  }
  return {
    parent: null,
    index: X(-1)
  };
}, [De, xe] = G("swipe-item"), K = /* @__PURE__ */ U({
  name: De,
  props: {
    clonenNode: {
      type: Object,
      default: null
    },
    index: {
      type: Number,
      default: -1
    }
  },
  setup(e, {
    slots: o
  }) {
    const i = oe(), {
      parent: t
    } = fe(me);
    !e.clonenNode && i && (t == null || t.children.push(i));
    const m = x(() => e.clonenNode ? e.index : t == null ? void 0 : t.children.findIndex((f) => f.proxy === (i == null ? void 0 : i.proxy))), u = x(() => {
      const f = `${(t == null ? void 0 : t.itemDetail.size) || 0}px`;
      let a = "auto";
      const d = `${(t == null ? void 0 : t.itemDetail.space) || 0}px`;
      return t != null && t.props.autoHeight && (t == null ? void 0 : t.activeIndex) !== m.value && (a = "0"), t != null && t.props.vertical ? {
        height: f,
        width: a,
        marginBottom: d
      } : {
        width: f,
        height: a,
        marginRight: d
      };
    });
    return () => {
      var a, d;
      const f = ((a = t == null ? void 0 : t.itemShowedList) == null ? void 0 : a.list[m.value || 0]) || !1;
      return N("div", {
        class: xe(),
        style: u.value
      }, [f ? e.clonenNode || ((d = o.default) == null ? void 0 : d.call(o)) : null]);
    };
  }
}), Ye = {
  autoplayTime: {
    type: Number,
    default: 0
  },
  duration: {
    type: Number,
    default: 300
  },
  initIndex: {
    type: Number,
    default: 0
  },
  loop: {
    type: Boolean,
    default: !0
  },
  dots: {
    type: Boolean,
    default: !0
  },
  dotsPosition: {
    type: String,
    default: null
  },
  dotsColor: {
    type: String,
    default: ""
  },
  lazy: {
    type: Boolean,
    default: !1
  },
  vertical: {
    type: Boolean,
    default: !1
  },
  autoHeight: {
    type: Boolean,
    default: !1
  },
  itemSize: {
    type: [Number, String],
    default: ""
  },
  itemSpace: {
    type: [Number, String],
    default: 0
  },
  minSwipeDistance: {
    type: [Number, String],
    default: "50%"
  },
  touchable: {
    type: Boolean,
    default: !0
  },
  isFollowHand: {
    type: Boolean,
    default: !0
  },
  align: {
    type: String,
    default: "center"
  }
}, [de, q] = G("swipe"), me = de, Xe = /* @__PURE__ */ U({
  name: de,
  components: {
    YSwipeItem: K
  },
  props: Ye,
  setup(e, {
    slots: o,
    emit: i,
    expose: t
  }) {
    const {
      initProvide: m
    } = ue(me), u = D([]), f = X(Number(e.initIndex)), a = D({
      // 元素尺寸
      size: 0,
      // 间距
      space: 0,
      // 元素宽度比swipe小，占满整个视窗
      isFillViewport: !1
    }), d = D({
      // 偏移量
      offset: 0,
      // 视窗大小
      viewportSize: 0,
      // 重复节点个数
      cloneNodeCount: 0
    }), L = X(), p = X(), O = () => {
      const n = u.length, r = [];
      for (let h = 0; h < n; h++)
        r.push(!e.lazy);
      return r;
    }, M = () => {
      if (!e.lazy)
        return;
      const n = a.size + a.space, r = u.length * n;
      let h = -(d.offset + c.offset) - d.cloneNodeCount * n;
      h < 0 && (h += r);
      const B = h + d.viewportSize;
      for (let T = 0; T < u.length; T++)
        if (!I.list[T]) {
          const $ = n * T, k = $ + a.size;
          ($ >= h && $ < B || k > h && k < B || $ < h && k > B) && (I.list[T] = !0);
        }
    }, I = D({
      list: O()
    }), w = () => {
      I.list = O(), M();
    };
    Z(() => [...u], w);
    const _ = (n, r) => {
      n ? a.size = se(n, r) : a.size = r, a.space = Number(e.itemSpace) || 0, a.isFillViewport = a.size >= r, d.viewportSize = r, d.cloneNodeCount = P();
    }, P = () => {
      if (z.value) {
        const n = a.size + a.space;
        if (n === 0)
          return 0;
        const r = d.viewportSize * 2 - n, h = Math.ceil(r / n);
        return Math.min(h, u.length - 1);
      }
      return 0;
    }, Y = () => {
      if (!L.value)
        return;
      const {
        width: n,
        height: r
      } = L.value.getBoundingClientRect();
      e.vertical ? _(e.itemSize, r) : _(e.itemSize, n), f.value = f.value >= u.length ? u.length - 1 : f.value, f.value < 0 && (f.value = 0), l(f.value), w(), b();
    };
    ce(() => {
      if (ee(Y).catch(() => {
      }), e.touchable && L.value) {
        const n = L.value;
        n.addEventListener("touchstart", A, !1), n.addEventListener("mousedown", A, !1), n.addEventListener("touchmove", W, !1), n.addEventListener("mousemove", W, !1), n.addEventListener("touchend", R, !1), n.addEventListener("mouseup", R, !1), n.addEventListener("mouseleave", R, !1), n.addEventListener("touchcancel", R, !1);
      }
      window.addEventListener("resize", Y, !1), window.addEventListener("orientationchange", Y, !1);
    }), Ce(() => {
      if (v(), e.touchable && L.value) {
        const n = L.value;
        n.removeEventListener("touchstart", A, !1), n.removeEventListener("mousedown", A, !1), n.removeEventListener("mousemove", W, !1), n.removeEventListener("touchmove", W, !1), n.removeEventListener("mouseup", R, !1), n.removeEventListener("touchend", R, !1), n.removeEventListener("mouseleave", R, !1), n.removeEventListener("touchcancel", R, !1);
      }
      window.removeEventListener("resize", Y, !1), window.removeEventListener("orientationchange", Y, !1);
    });
    const j = x(() => {
      let n = 0;
      switch (e.align) {
        case F.start:
          n = 0;
          break;
        case F.center:
          n = (d.viewportSize - a.size) / 2;
          break;
        case F.end:
          n = d.viewportSize - a.size;
          break;
        default:
          n = 0;
      }
      return n;
    }), z = x(() => e.loop && u.length > 1), l = (n) => {
      const r = a.size + a.space;
      z.value ? d.offset = -r * (n + d.cloneNodeCount) + j.value : (d.offset = -r * n + j.value, e.align !== "center" && (n === 0 && (d.offset = 0), n === u.length - 1 && (d.offset = -r * n + d.viewportSize - a.size)));
    }, g = () => {
      l(f.value), i("afterChange", f.value);
    }, y = (n) => (u.length + n) % u.length, C = (n, r = !0) => {
      f.value = y(n), l(n), M(), i("change", f.value), r ? (c.transitionEnabled = !0, p.value && p.value.addEventListener("transitionend", () => {
        c.transitionEnabled = !1, g();
      }, {
        once: !0
      })) : g();
    }, E = (n = !0) => {
      C(f.value - 1, n);
    }, S = (n = !0) => {
      C(f.value + 1, n);
    };
    let s = null;
    const v = () => {
      e.autoplayTime && s && clearInterval(s);
    }, b = () => {
      e.autoplayTime && u.length > 1 && (s && clearInterval(s), s = setInterval(() => {
        S();
      }, Number(e.autoplayTime)));
    }, c = D({
      // 拖拽中
      isDragging: !1,
      // 是否首次拖动
      isFirstTouch: !0,
      // 拖拽起始位置X
      startX: 0,
      // 拖拽起始位置Y
      startY: 0,
      // 拖拽距离
      offset: 0,
      // 开始拖动时间
      startTime: /* @__PURE__ */ new Date(),
      // 是否在执行动画
      transitionEnabled: !1,
      // 当前次拖拽不满足翻页条件
      isDissatisfy: !1
    }), A = (n) => {
      if (c.transitionEnabled)
        return;
      let r = 0, h = 0;
      "touches" in n ? (r = n.touches[0].clientX, h = n.touches[0].clientY) : (r = n.clientX, h = n.clientY), c.startX = r, c.startY = h, c.isDragging = !0, c.isFirstTouch = !0, c.startTime = /* @__PURE__ */ new Date(), v();
    }, W = (n) => {
      if (!c.isDragging)
        return;
      let r = 0, h = 0;
      "touches" in n ? (r = n.touches[0].clientX, h = n.touches[0].clientY) : (r = n.clientX, h = n.clientY);
      const B = r - c.startX, T = h - c.startY;
      if (c.isFirstTouch && (c.isFirstTouch = !1, Math.abs(B) < Math.abs(T) !== e.vertical)) {
        c.isDragging = !1;
        return;
      }
      n.preventDefault(), c.offset = e.vertical ? T : B, M(), i("dragging", {
        percent: c.offset / (a.size + a.space),
        offset: c.offset
      }), c.isDissatisfy = !1;
    }, R = () => {
      if (!c.isDragging)
        return;
      c.isDragging = !1;
      const r = (/* @__PURE__ */ new Date()).getTime() - c.startTime.getTime();
      he() && (Math.abs(c.offset) > ge.value || Math.abs(c.offset) / r > 0.5) ? (c.offset > 0 ? E() : S(), c.offset = 0, c.isDissatisfy = !1) : (c.offset = 0, c.isDissatisfy = !0), b();
    }, ge = x(() => se(e.minSwipeDistance, a.size + a.space)), he = () => {
      if (z.value)
        return !0;
      const n = c.offset > 0 ? f.value - 1 : f.value + 1;
      return n >= 0 && n < u.length;
    }, ye = x(() => {
      const n = c.isDragging && !e.isFollowHand ? d.offset : d.offset + c.offset, r = {};
      return e.vertical ? (r.transform = `translate3d(0, ${n}px, 0)`, r.transitionDuration = c.transitionEnabled || c.isDissatisfy ? `${e.duration}ms` : "0ms") : (r.transform = `translate3d(${n}px, 0, 0)`, r.transitionDuration = c.transitionEnabled || c.isDissatisfy ? `${e.duration}ms` : "0ms"), c.isDragging && (r.transition = "none"), e.vertical && (r.flexDirection = "column"), e.autoHeight && (r.display = "block", r.whiteSpace = "nowrap"), r;
    }), pe = x(() => ["y-swipe__dots", `y-swipe__dots--${e.dotsPosition || (e.vertical ? te.left : te.bottom)}`]);
    t({
      moveTo: C,
      next: S,
      prev: E,
      resize: Y
    });
    const be = D({
      children: u,
      activeIndex: f,
      props: e,
      itemDetail: a,
      itemShowedList: I
    });
    m(be);
    const we = () => e.dots ? N("div", {
      class: pe.value
    }, [u.map((n, r) => {
      const h = q("dot", {
        active: r === f.value
      });
      return N("div", {
        class: h,
        style: {
          backgroundColor: e.dotsColor
        },
        key: r
      }, null);
    })]) : null;
    return () => {
      var n;
      return N("div", {
        class: q(),
        ref: L
      }, [N("div", {
        class: q("track"),
        style: ye.value,
        ref: p
      }, [Array(d.cloneNodeCount).fill("").map((r, h) => {
        var $, k, V;
        const B = y(h - d.cloneNodeCount), T = (V = ($ = u[B]) == null ? void 0 : (k = $.slots).default) == null ? void 0 : V.call(k);
        return T ? N(K, {
          clonenNode: T,
          index: B
        }, null) : null;
      }), (n = o.default) == null ? void 0 : n.call(o), Array(d.cloneNodeCount).fill("").map((r, h) => {
        var $, k, V;
        const B = y(h), T = (V = ($ = u[B]) == null ? void 0 : (k = $.slots).default) == null ? void 0 : V.call(k);
        return T ? N(K, {
          clonenNode: T,
          index: B
        }, null) : null;
      })]), o.dots ? o.dots() : we()]);
    };
  }
}), [Oe, ie] = G("tabs-title"), re = /* @__PURE__ */ U({
  name: Oe,
  props: {
    active: {
      type: Boolean,
      default: !1
    },
    scrollable: {
      type: Boolean,
      default: !1
    },
    title: {
      type: String,
      default: null
    },
    titleSlot: {
      type: Function,
      default: null
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  setup(e) {
    const {
      parent: o
    } = fe(ve), i = x(() => [{
      "y-el--clickable": !e.disabled
    }, ie({
      scrollable: e.scrollable,
      disabled: e.disabled
    }), ie(`${(o == null ? void 0 : o.props.size) || "middle"}`, {
      active: e.active
    }), o == null ? void 0 : o.props.titleClass, e.active ? o == null ? void 0 : o.props.titleActiveClass : ""]), t = x(() => ({
      ...o == null ? void 0 : o.props.titleStyle,
      ...e.active ? {
        ...o == null ? void 0 : o.props.titleActiveStyle
      } : {}
    }));
    return () => {
      const {
        title: m,
        titleSlot: u
      } = e;
      return N("div", {
        class: i.value,
        title: m,
        style: t.value,
        role: "presentation"
      }, [u ? u() : m]);
    };
  }
}), J = null, _e = {
  initIndex: {
    type: Number,
    default: 0
  },
  initName: {
    type: [Number, String],
    default: null
  },
  duration: {
    type: Number,
    default: 300
  },
  lazy: {
    type: Boolean,
    default: !1
  },
  lineColor: {
    type: String,
    default: ""
  },
  lineWidth: {
    type: [Number, String],
    default: "12px"
  },
  lineHeight: {
    type: [Number, String],
    default: "3px"
  },
  titleWrapperClass: J,
  titleScrollThreshold: {
    type: Number,
    default: 5
  },
  titleStyle: {
    type: [Object],
    default: null
  },
  titleClass: {
    type: J,
    default: null
  },
  titleActiveStyle: {
    type: [Object],
    default: null
  },
  titleActiveClass: {
    type: J,
    default: null
  },
  touchable: {
    type: Boolean,
    default: !0
  },
  changeWithAnimation: {
    type: Boolean,
    default: !1
  },
  size: {
    type: String,
    default: "large"
  },
  align: {
    type: String,
    default: "center"
  }
};
var ne = {}, ke = {
  get exports() {
    return ne;
  },
  set exports(e) {
    ne = e;
  }
};
(function(e, o) {
  (function() {
    function i() {
      var t = window, m = document;
      if ("scrollBehavior" in m.documentElement.style && t.__forceSmoothScrollPolyfill__ !== !0)
        return;
      var u = t.HTMLElement || t.Element, f = 468, a = {
        scroll: t.scroll || t.scrollTo,
        scrollBy: t.scrollBy,
        elementScroll: u.prototype.scroll || O,
        scrollIntoView: u.prototype.scrollIntoView
      }, d = t.performance && t.performance.now ? t.performance.now.bind(t.performance) : Date.now;
      function L(l) {
        var g = ["MSIE ", "Trident/", "Edge/"];
        return new RegExp(g.join("|")).test(l);
      }
      var p = L(t.navigator.userAgent) ? 1 : 0;
      function O(l, g) {
        this.scrollLeft = l, this.scrollTop = g;
      }
      function M(l) {
        return 0.5 * (1 - Math.cos(Math.PI * l));
      }
      function I(l) {
        if (l === null || typeof l != "object" || l.behavior === void 0 || l.behavior === "auto" || l.behavior === "instant")
          return !0;
        if (typeof l == "object" && l.behavior === "smooth")
          return !1;
        throw new TypeError(
          "behavior member of ScrollOptions " + l.behavior + " is not a valid value for enumeration ScrollBehavior."
        );
      }
      function w(l, g) {
        if (g === "Y")
          return l.clientHeight + p < l.scrollHeight;
        if (g === "X")
          return l.clientWidth + p < l.scrollWidth;
      }
      function _(l, g) {
        var y = t.getComputedStyle(l, null)["overflow" + g];
        return y === "auto" || y === "scroll";
      }
      function P(l) {
        var g = w(l, "Y") && _(l, "Y"), y = w(l, "X") && _(l, "X");
        return g || y;
      }
      function Y(l) {
        for (; l !== m.body && P(l) === !1; )
          l = l.parentNode || l.host;
        return l;
      }
      function j(l) {
        var g = d(), y, C, E, S = (g - l.startTime) / f;
        S = S > 1 ? 1 : S, y = M(S), C = l.startX + (l.x - l.startX) * y, E = l.startY + (l.y - l.startY) * y, l.method.call(l.scrollable, C, E), (C !== l.x || E !== l.y) && t.requestAnimationFrame(j.bind(t, l));
      }
      function z(l, g, y) {
        var C, E, S, s, v = d();
        l === m.body ? (C = t, E = t.scrollX || t.pageXOffset, S = t.scrollY || t.pageYOffset, s = a.scroll) : (C = l, E = l.scrollLeft, S = l.scrollTop, s = O), j({
          scrollable: C,
          method: s,
          startTime: v,
          startX: E,
          startY: S,
          x: g,
          y
        });
      }
      t.scroll = t.scrollTo = function() {
        if (arguments[0] !== void 0) {
          if (I(arguments[0]) === !0) {
            a.scroll.call(
              t,
              arguments[0].left !== void 0 ? arguments[0].left : typeof arguments[0] != "object" ? arguments[0] : t.scrollX || t.pageXOffset,
              // use top prop, second argument if present or fallback to scrollY
              arguments[0].top !== void 0 ? arguments[0].top : arguments[1] !== void 0 ? arguments[1] : t.scrollY || t.pageYOffset
            );
            return;
          }
          z.call(
            t,
            m.body,
            arguments[0].left !== void 0 ? ~~arguments[0].left : t.scrollX || t.pageXOffset,
            arguments[0].top !== void 0 ? ~~arguments[0].top : t.scrollY || t.pageYOffset
          );
        }
      }, t.scrollBy = function() {
        if (arguments[0] !== void 0) {
          if (I(arguments[0])) {
            a.scrollBy.call(
              t,
              arguments[0].left !== void 0 ? arguments[0].left : typeof arguments[0] != "object" ? arguments[0] : 0,
              arguments[0].top !== void 0 ? arguments[0].top : arguments[1] !== void 0 ? arguments[1] : 0
            );
            return;
          }
          z.call(
            t,
            m.body,
            ~~arguments[0].left + (t.scrollX || t.pageXOffset),
            ~~arguments[0].top + (t.scrollY || t.pageYOffset)
          );
        }
      }, u.prototype.scroll = u.prototype.scrollTo = function() {
        if (arguments[0] !== void 0) {
          if (I(arguments[0]) === !0) {
            if (typeof arguments[0] == "number" && arguments[1] === void 0)
              throw new SyntaxError("Value could not be converted");
            a.elementScroll.call(
              this,
              // use left prop, first number argument or fallback to scrollLeft
              arguments[0].left !== void 0 ? ~~arguments[0].left : typeof arguments[0] != "object" ? ~~arguments[0] : this.scrollLeft,
              // use top prop, second argument or fallback to scrollTop
              arguments[0].top !== void 0 ? ~~arguments[0].top : arguments[1] !== void 0 ? ~~arguments[1] : this.scrollTop
            );
            return;
          }
          var l = arguments[0].left, g = arguments[0].top;
          z.call(
            this,
            this,
            typeof l > "u" ? this.scrollLeft : ~~l,
            typeof g > "u" ? this.scrollTop : ~~g
          );
        }
      }, u.prototype.scrollBy = function() {
        if (arguments[0] !== void 0) {
          if (I(arguments[0]) === !0) {
            a.elementScroll.call(
              this,
              arguments[0].left !== void 0 ? ~~arguments[0].left + this.scrollLeft : ~~arguments[0] + this.scrollLeft,
              arguments[0].top !== void 0 ? ~~arguments[0].top + this.scrollTop : ~~arguments[1] + this.scrollTop
            );
            return;
          }
          this.scroll({
            left: ~~arguments[0].left + this.scrollLeft,
            top: ~~arguments[0].top + this.scrollTop,
            behavior: arguments[0].behavior
          });
        }
      }, u.prototype.scrollIntoView = function() {
        if (I(arguments[0]) === !0) {
          a.scrollIntoView.call(
            this,
            arguments[0] === void 0 ? !0 : arguments[0]
          );
          return;
        }
        var l = Y(this), g = l.getBoundingClientRect(), y = this.getBoundingClientRect();
        l !== m.body ? (z.call(
          this,
          l,
          l.scrollLeft + y.left - g.left,
          l.scrollTop + y.top - g.top
        ), t.getComputedStyle(l).position !== "fixed" && t.scrollBy({
          left: g.left,
          top: g.top,
          behavior: "smooth"
        })) : t.scrollBy({
          left: y.left,
          top: y.top,
          behavior: "smooth"
        });
      };
    }
    e.exports = { polyfill: i };
  })();
})(ke);
function Re(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
}
const [le, Q] = G("tabs"), ve = le, je = /* @__PURE__ */ U({
  name: le,
  components: {
    YTabTitle: re
  },
  props: _e,
  setup(e, {
    slots: o,
    emit: i,
    expose: t
  }) {
    const {
      initProvide: m
    } = ue(ve), u = X(!1), f = D([]), a = X(), d = x(() => f.length > e.titleScrollThreshold), L = (s) => f.findIndex((v) => (v.$props ? v.$props.name : "") === s), p = X(e.initName ? L(e.initName) : e.initIndex), O = (s) => {
      p.value = s;
      const v = a.value;
      v && (v == null || v.moveTo(s, e.changeWithAnimation));
    };
    t({
      scrollToByIndex: (s) => {
        O(s);
      },
      scrollToByName: (s) => {
        const v = L(s);
        O(v);
      }
    });
    const w = X([]), _ = X(), P = (s) => (v) => {
      w.value[s] = v;
    }, Y = (s) => {
      const {
        title: v,
        name: b,
        disabled: c
      } = f[s].$props || {};
      p.value !== s && (i(c ? "disabledClick" : "click", s, v, b), !c && O(s));
    }, j = async () => {
      await ee(() => {
        if (!d.value || !_.value)
          return;
        const s = _.value;
        if (!s || !w.value[p.value])
          return;
        const v = w.value[p.value].$el, b = v.offsetLeft - (s.offsetWidth - v.offsetWidth) / 2;
        s.scrollTo({
          left: b,
          behavior: "smooth"
        });
      });
    };
    Ee(() => {
      w.value = [];
    });
    const z = D({
      transform: "translateX(50%)",
      transition: "all 0ms ease-out"
    }), l = async () => {
      await ee(() => {
        if (!w.value || w.value.length === 0)
          return;
        const s = p.value >= w.value.length ? 0 : p.value, v = w.value[s].$el, b = v.offsetLeft + v.offsetWidth / 2;
        z.transform = `translateX(${b}px) translateX(-50%)`, u.value && (z.transition = `all ${e.duration}ms ease-out`), u.value = !0;
      });
    }, g = (s) => {
      const {
        title: v,
        name: b
      } = f[s].$props || {};
      i("change", s, v, b), p.value = s;
    }, y = (s) => {
      const {
        title: v,
        name: b
      } = f[s].$props || {};
      i("afterChange", s, v, b), p.value = s;
    }, C = D({
      children: f,
      activeIndex: p,
      props: e
    });
    m(C);
    const E = (s) => S(s) && /^\d+(\.\d+)?$/.test(s) ? `${s}px` : s, S = (s) => Object.prototype.toString.call(s) === "[object String]";
    return ce(async () => {
      ne.polyfill(), await l();
    }), Z(() => p.value, async () => {
      await l(), await j();
    }), Z(() => {
      var s;
      return (s = o.default) == null ? void 0 : s.length;
    }, async () => {
      await l();
    }), () => {
      let s;
      return N("div", {
        class: le
      }, [N("div", {
        class: Q("list")
      }, [N("div", {
        ref: _,
        class: Q("list-child-wrapper", {
          scrollable: d.value,
          [e.size]: e.size,
          [e.align]: e.align
        })
      }, [f.length > 0 && f.map((v, b) => N(re, {
        title: v.title,
        disabled: v.disabled,
        "title-slot": v.$slots.title,
        key: b,
        ref: P(b),
        active: p.value === b,
        scrollable: d.value,
        onClick: () => Y(b)
      }, null)), N("div", {
        class: Q("line"),
        style: {
          ...z,
          width: E(e.lineWidth),
          height: E(e.lineHeight),
          backgroundColor: e.lineColor
        }
      }, null)])]), o.default ? N(Xe, {
        ref: a,
        dots: !1,
        loop: !1,
        initIndex: p.value,
        lazy: e.lazy,
        touchable: e.touchable,
        duration: e.duration,
        "is-follow-hand": e.changeWithAnimation,
        onChange: g,
        onAfterChange: y
      }, Re(s = o.default()) ? s : {
        default: () => [s]
      }) : null]);
    };
  }
});
function Me(e) {
  const o = e;
  return o.install = (i) => {
    const { name: t } = e;
    t && i.component(t, e);
  }, o;
}
const Ve = Me(je);
export {
  _e as acceptProps,
  Ve as default,
  J as unknownProp
};