vft 0.0.368 → 0.0.369

package/es/components/affix/affix.vue2.js

@@ -1,83 +1,122 @@
-import { defineComponent as $, shallowRef as m, ref as v, computed as E, watch as W, onMounted as H, watchEffect as I, createElementBlock as N, openBlock as q, normalizeStyle as S, normalizeClass as _, unref as b, createElementVNode as L, renderSlot as M } from "vue";
-import { useWindowSize as P, useElementBounding as y, useEventListener as U } from "@vueuse/core";
-import { getScrollContainer as V } from "../../utils/dom/scroll.js";
-import { throwError as Y } from "../../utils/error.js";
-import { addUnit as j } from "../../utils/helper.js";
+import { defineComponent, shallowRef, ref, computed, watch, onMounted, watchEffect, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, renderSlot } from "vue";
+import { useWindowSize, useElementBounding, useEventListener } from "@vueuse/core";
+import { getScrollContainer } from "../../utils/dom/scroll.js";
+import { throwError } from "../../utils/error.js";
+import { addUnit } from "../../utils/helper.js";
 import "@vft/utils";
 import "lodash-es";
-import { useNamespace as A } from "../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { affixEmits as D, affixProps as F } from "./affix.js";
-const G = $({
+import { affixEmits, affixProps } from "./affix.js";
+const __default__ = defineComponent({
   name: "vft-affix"
-}), ne = /* @__PURE__ */ $({
-  ...G,
-  props: F,
-  emits: D,
-  setup(T, { expose: z, emit: B }) {
-    const i = A("affix"), e = T, p = B, a = m(), f = m(), l = m(), { height: r } = P(), {
-      height: s,
-      width: d,
-      top: h,
-      bottom: x,
-      update: c
-    } = y(f, { windowScroll: !1 }), n = y(a), o = v(!1), g = v(0), u = v(0), C = E(() => ({
-      height: o.value ? `${s.value}px` : "",
-      width: o.value ? `${d.value}px` : ""
-    })), k = E(() => {
-      if (!o.value) return {};
-      const t = e.offset ? j(e.offset) : 0;
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: affixProps,
+  emits: affixEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = useNamespace("affix");
+    const props = __props;
+    const emit = __emit;
+    const target = shallowRef();
+    const root = shallowRef();
+    const scrollContainer = shallowRef();
+    const { height: windowHeight } = useWindowSize();
+    const {
+      height: rootHeight,
+      width: rootWidth,
+      top: rootTop,
+      bottom: rootBottom,
+      update: updateRoot
+    } = useElementBounding(root, { windowScroll: false });
+    const targetRect = useElementBounding(target);
+    const fixed = ref(false);
+    const scrollTop = ref(0);
+    const transform = ref(0);
+    const rootStyle = computed(() => {
+      return {
+        height: fixed.value ? `${rootHeight.value}px` : "",
+        width: fixed.value ? `${rootWidth.value}px` : ""
+      };
+    });
+    const affixStyle = computed(() => {
+      if (!fixed.value) return {};
+      const offset = props.offset ? addUnit(props.offset) : 0;
       return {
-        height: `${s.value}px`,
-        width: `${d.value}px`,
-        top: e.position === "top" ? t : "",
-        bottom: e.position === "bottom" ? t : "",
-        transform: u.value ? `translateY(${u.value}px)` : "",
-        zIndex: e.zIndex
+        height: `${rootHeight.value}px`,
+        width: `${rootWidth.value}px`,
+        top: props.position === "top" ? offset : "",
+        bottom: props.position === "bottom" ? offset : "",
+        transform: transform.value ? `translateY(${transform.value}px)` : "",
+        zIndex: props.zIndex
       };
-    }), w = () => {
-      if (l.value)
-        if (g.value = l.value instanceof Window ? document.documentElement.scrollTop : l.value.scrollTop || 0, e.position === "top")
-          if (e.target) {
-            const t = n.bottom.value - e.offset - s.value;
-            o.value = e.offset > h.value && n.bottom.value > 0, u.value = t < 0 ? t : 0;
-          } else
-            o.value = e.offset > h.value;
-        else if (e.target) {
-          const t = r.value - n.top.value - e.offset - s.value;
-          o.value = r.value - e.offset < x.value && r.value > n.top.value, u.value = t < 0 ? -t : 0;
-        } else
-          o.value = r.value - e.offset < x.value;
-    }, R = () => {
-      c(), p("scroll", {
-        scrollTop: g.value,
-        fixed: o.value
+    });
+    const update = () => {
+      if (!scrollContainer.value) return;
+      scrollTop.value = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0;
+      if (props.position === "top") {
+        if (props.target) {
+          const difference = targetRect.bottom.value - props.offset - rootHeight.value;
+          fixed.value = props.offset > rootTop.value && targetRect.bottom.value > 0;
+          transform.value = difference < 0 ? difference : 0;
+        } else {
+          fixed.value = props.offset > rootTop.value;
+        }
+      } else if (props.target) {
+        const difference = windowHeight.value - targetRect.top.value - props.offset - rootHeight.value;
+        fixed.value = windowHeight.value - props.offset < rootBottom.value && windowHeight.value > targetRect.top.value;
+        transform.value = difference < 0 ? -difference : 0;
+      } else {
+        fixed.value = windowHeight.value - props.offset < rootBottom.value;
+      }
+    };
+    const handleScroll = () => {
+      updateRoot();
+      emit("scroll", {
+        scrollTop: scrollTop.value,
+        fixed: fixed.value
       });
     };
-    return W(o, (t) => p("change", t)), H(() => {
-      e.target ? (a.value = document.querySelector(e.target) ?? void 0, a.value || Y(i.b(), `Target is not existed: ${e.target}`)) : a.value = document.documentElement, l.value = V(f.value, !0), c();
-    }), U(l, "scroll", R), I(w), z({
+    watch(fixed, (val) => emit("change", val));
+    onMounted(() => {
+      if (props.target) {
+        target.value = document.querySelector(props.target) ?? void 0;
+        if (!target.value)
+          throwError(ns.b(), `Target is not existed: ${props.target}`);
+      } else {
+        target.value = document.documentElement;
+      }
+      scrollContainer.value = getScrollContainer(root.value, true);
+      updateRoot();
+    });
+    useEventListener(scrollContainer, "scroll", handleScroll);
+    watchEffect(update);
+    __expose({
       /** @description update affix status */
-      update: w,
+      update,
       /** @description update rootRect info */
-      updateRoot: c
-    }), (t, J) => (q(), N("div", {
-      ref_key: "root",
-      ref: f,
-      class: _(b(i).b()),
-      style: S(C.value)
-    }, [
-      L("div", {
-        class: _({ [b(i).m("fixed")]: o.value }),
-        style: S(k.value)
+      updateRoot
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: normalizeClass(unref(ns).b()),
+        style: normalizeStyle(rootStyle.value)
       }, [
-        M(t.$slots, "default")
-      ], 6)
-    ], 6));
+        createElementVNode("div", {
+          class: normalizeClass({ [unref(ns).m("fixed")]: fixed.value }),
+          style: normalizeStyle(affixStyle.value)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 6)
+      ], 6);
+    };
   }
 });
 export {
-  ne as default
+  _sfc_main as default
 };

package/es/components/affix/index.js

@@ -2,11 +2,11 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall as t } from "../../utils/vue/install.js";
+import { withInstall } from "../../utils/vue/install.js";
 import "lodash-es";
-import o from "./affix.vue2.js";
-const l = t(o);
+import _sfc_main from "./affix.vue2.js";
+const VftAffix = withInstall(_sfc_main);
 export {
-  l as VftAffix,
-  l as default
+  VftAffix,
+  VftAffix as default
 };

package/es/components/alert/alert.vue.js

@@ -1,4 +1,4 @@
-import f from "./alert.vue2.js";
+import _sfc_main from "./alert.vue2.js";
 export {
-  f as default
+  _sfc_main as default
 };

package/es/components/alert/alert.vue2.js

@@ -1,38 +1,48 @@
-import { defineComponent as i, useSlots as n, ref as l, computed as o, createBlock as c, openBlock as s, unref as a } from "vue";
-import { VftIcon as f } from "../icon/index.js";
+import { defineComponent, useSlots, ref, computed, createBlock, openBlock, unref } from "vue";
+import { VftIcon } from "../icon/index.js";
 import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as p } from "../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-const m = i({
+const __default__ = defineComponent({
   name: "vft-alert"
-}), C = /* @__PURE__ */ i({
-  ...m,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     title: { default: "" },
     description: { default: "" },
     type: { default: "info" },
-    closable: { type: Boolean, default: !0 },
+    closable: { type: Boolean, default: true },
     closeText: { default: "" },
     showIcon: { type: Boolean },
     center: { type: Boolean },
     effect: { default: "light" }
   },
   emits: {
-    close: (e) => e instanceof MouseEvent
+    close: (evt) => evt instanceof MouseEvent
   },
-  setup(e, { emit: u }) {
-    const t = p("alert"), r = n();
-    return l(!0), o(() => e.type), o(() => [
-      t.e("icon"),
-      { [t.is("big")]: !!e.description || !!r.default }
-    ]), o(() => ({ [t.is("bold")]: e.description || r.default })), (d, _) => (s(), c(a(f)));
+  setup(__props, { emit: __emit }) {
+    const ns = useNamespace("alert");
+    const slots = useSlots();
+    ref(true);
+    computed(() => __props.type);
+    computed(() => [
+      ns.e("icon"),
+      { [ns.is("big")]: !!__props.description || !!slots.default }
+    ]);
+    computed(() => {
+      return { [ns.is("bold")]: __props.description || slots.default };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(VftIcon));
+    };
   }
 });
 export {
-  C as default
+  _sfc_main as default
 };

package/es/components/alert/index.js

@@ -2,11 +2,11 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall as t } from "../../utils/vue/install.js";
+import { withInstall } from "../../utils/vue/install.js";
 import "lodash-es";
-import o from "./alert.vue2.js";
-const s = t(o);
+import _sfc_main from "./alert.vue2.js";
+const VftAlert = withInstall(_sfc_main);
 export {
-  s as VftAlert,
-  s as default
+  VftAlert,
+  VftAlert as default
 };

package/es/components/autocomplete/autocomplete.vue.js

@@ -1,4 +1,4 @@
-import f from "./autocomplete.vue2.js";
+import _sfc_main from "./autocomplete.vue2.js";
 export {
-  f as default
+  _sfc_main as default
 };