ucc-ui/dist/es/Top-CEA5GTsc.js

ucc-ui components library

import { defineComponent as B, ref as f, watch as E, onBeforeUnmount as H, computed as h, onMounted as x, openBlock as I, createBlock as A, Teleport as L, createVNode as M, Transition as N, withCtx as P, withDirectives as R, createElementVNode as d, normalizeStyle as U, withModifiers as q, renderSlot as D, vShow as G } from "vue";
import { p as r } from "./utils-BzE2Aob-.js";
import "./ConfigProvider-C-6nRyrn.js";
import { g as O } from "./hooks-Dj9Dthmd.js";
import { h as W } from "./vendors-PY6Ic9FA.js";
const $ = {
  LEFT: "left",
  RIGHT: "right"
}, j = { class: "u-top__inner" }, J = /* @__PURE__ */ d("h2", null, "TOP", -1), F = /* @__PURE__ */ B({
  name: "UTop",
  __name: "Top",
  props: {
    modelValue: { type: Boolean },
    appendTo: { default: "body" },
    size: { default: 40 },
    position: { default: "right" },
    offset: { default: 50 },
    animationClass: { default: "u-top-slide" },
    scrollThreshold: { default: "50%" },
    duration: { default: 500 }
  },
  emits: ["update:modelValue", "click"],
  setup(v, { expose: T, emit: g }) {
    const o = v, p = g, n = f(o.modelValue || !1), m = E(n, (e) => {
      p("update:modelValue", e);
    });
    H(() => {
      m && m();
    });
    const i = f(null), s = f(0);
    let t = null;
    const _ = h(() => {
      if (i.value && (s.value = w(i.value)), W(o.scrollThreshold)) {
        const e = parseInt(o.scrollThreshold, 10);
        return e ? s.value ? e / 100 * s.value : e : s.value / 3;
      } else
        return o.scrollThreshold;
    }), S = h(() => {
      const e = r(o.size, { unit: "rem" });
      let l = {
        bottom: r(o.offset, { unit: "rem" }),
        right: r(o.offset, { unit: "rem" })
      };
      return o.position === $.LEFT && (l = {
        bottom: r(o.offset, { unit: "rem" }),
        left: r(o.offset, { unit: "rem" })
      }), {
        width: e,
        height: e,
        position: "fixed",
        zIndex: 9999,
        cursor: "pointer",
        ...l
      };
    }), b = (e) => {
      t == null || t(), p("click", e);
    };
    x(() => {
      i.value = o.appendTo === "body" ? document.documentElement : document.querySelector(o.appendTo);
      const {
        scrollTo: e
      } = O({
        el: i,
        duration: o.duration,
        isAuto: !1,
        scrolling: () => u() ? a() : c(),
        wheeling: () => u() ? a() : c()
      });
      t = e, u() ? a() : c();
    });
    function w(e) {
      return e ? e.scrollHeight - e.clientHeight - e.scrollTop : 0;
    }
    function u() {
      return i.value ? i.value.scrollTop >= _.value : !1;
    }
    function a() {
      n.value = !0;
    }
    function c() {
      n.value = !1;
    }
    function y() {
      n.value = !n.value;
    }
    function C(e = 0, l = 300) {
      t == null || t(e, l);
    }
    function k(e = 300) {
      t == null || t(0, e);
    }
    function V(e = 300) {
      var l;
      t == null || t((l = i.value) == null ? void 0 : l.scrollHeight, e);
    }
    function z(e, l = 300) {
      t == null || t(e.offsetTop, l);
    }
    return T({
      show: a,
      hide: c,
      toggle: y,
      scrollTo: C,
      scrollToTop: k,
      scrollToBottom: V,
      scrollToElement: z,
      vaildate: u,
      get visible() {
        return n.value;
      }
    }), (e, l) => (I(), A(L, { to: e.appendTo }, [
      M(N, {
        appear: "",
        name: e.animationClass
      }, {
        default: P(() => [
          R(d("div", {
            class: "u-top",
            style: U(S.value),
            onClick: q(b, ["prevent"])
          }, [
            d("div", j, [
              D(e.$slots, "default", {}, () => [
                J
              ])
            ])
          ], 4), [
            [G, n.value]
          ])
        ]),
        _: 3
      }, 8, ["name"])
    ], 8, ["to"]));
  }
});
export {
  F as _
};