vft 0.0.374 → 0.0.375

package/es/hooks/use-size/index.js

@@ -1,9 +1,12 @@
-import { inject as t, computed as o, unref as n } from "vue";
-const r = Symbol("size"), c = () => {
-  const e = t(r, {});
-  return o(() => n(e.size) || "");
+import { inject, computed, unref } from "vue";
+const SIZE_INJECTION_KEY = Symbol("size");
+const useGlobalSize = () => {
+  const injectedSize = inject(SIZE_INJECTION_KEY, {});
+  return computed(() => {
+    return unref(injectedSize.size) || "";
+  });
 };
 export {
-  r as SIZE_INJECTION_KEY,
-  c as useGlobalSize
+  SIZE_INJECTION_KEY,
+  useGlobalSize
 };

package/es/hooks/use-throttle-render/index.js

@@ -1,20 +1,29 @@
-import { ref as i, onMounted as l, watch as s } from "vue";
-const c = (e, r = 0) => {
-  if (r === 0) return e;
-  const t = i(!1);
-  let o = 0;
-  const u = () => {
-    o && clearTimeout(o), o = window.setTimeout(() => {
-      t.value = e.value;
-    }, r);
+import { ref, onMounted, watch } from "vue";
+const useThrottleRender = (loading, throttle = 0) => {
+  if (throttle === 0) return loading;
+  const throttled = ref(false);
+  let timeoutHandle = 0;
+  const dispatchThrottling = () => {
+    if (timeoutHandle) {
+      clearTimeout(timeoutHandle);
+    }
+    timeoutHandle = window.setTimeout(() => {
+      throttled.value = loading.value;
+    }, throttle);
   };
-  return l(u), s(
-    () => e.value,
-    (n) => {
-      n ? u() : t.value = n;
+  onMounted(dispatchThrottling);
+  watch(
+    () => loading.value,
+    (val) => {
+      if (val) {
+        dispatchThrottling();
+      } else {
+        throttled.value = val;
+      }
     }
-  ), t;
+  );
+  return throttled;
 };
 export {
-  c as useThrottleRender
+  useThrottleRender
 };

package/es/hooks/use-timeout/index.js

@@ -1,14 +1,17 @@
-import { tryOnScopeDispose as r } from "@vueuse/core";
-function m() {
-  let t;
-  const o = (i, n) => {
-    e(), t = window.setTimeout(i, n);
-  }, e = () => window.clearTimeout(t);
-  return r(() => e()), {
-    registerTimeout: o,
-    cancelTimeout: e
+import { tryOnScopeDispose } from "@vueuse/core";
+function useTimeout() {
+  let timeoutHandle;
+  const registerTimeout = (fn, delay) => {
+    cancelTimeout();
+    timeoutHandle = window.setTimeout(fn, delay);
+  };
+  const cancelTimeout = () => window.clearTimeout(timeoutHandle);
+  tryOnScopeDispose(() => cancelTimeout());
+  return {
+    registerTimeout,
+    cancelTimeout
   };
 }
 export {
-  m as useTimeout
+  useTimeout
 };

package/es/hooks/use-z-index/index.js

@@ -1,29 +1,45 @@
 import "@vueuse/core";
-import { isNumber as m, isClient as p } from "@vft/utils";
-import { debugWarn as l } from "../../utils/error.js";
+import { isNumber, isClient } from "@vft/utils";
+import { debugWarn } from "../../utils/error.js";
 import "../../components/config-provider/hooks/use-global-config.js";
-import { ref as v, getCurrentInstance as i, inject as e, computed as c, unref as Z } from "vue";
+import { ref, getCurrentInstance, inject, computed, unref } from "vue";
 import "lodash-es";
-const s = {
+const initial = {
   current: 0
-}, u = v(0), f = 2e3, d = Symbol("vftZIndexContextKey"), y = Symbol("zIndexContextKey"), j = (I) => {
-  const n = i() ? e(d, s) : s, x = I || (i() ? e(y, void 0) : void 0), t = c(() => {
-    const r = Z(x);
-    return m(r) ? r : f;
-  }), o = c(() => t.value + u.value), a = () => (n.current++, u.value = n.current, o.value);
-  return !p && !e(d) && l(
-    "ZIndexInjection",
-    `Looks like you are using server rendering, you must provide a z-index provider to ensure the hydration process to be succeed
+};
+const zIndex = ref(0);
+const defaultInitialZIndex = 2e3;
+const ZINDEX_INJECTION_KEY = Symbol("vftZIndexContextKey");
+const zIndexContextKey = Symbol("zIndexContextKey");
+const useZIndex = (zIndexOverrides) => {
+  const increasingInjection = getCurrentInstance() ? inject(ZINDEX_INJECTION_KEY, initial) : initial;
+  const zIndexInjection = zIndexOverrides || (getCurrentInstance() ? inject(zIndexContextKey, void 0) : void 0);
+  const initialZIndex = computed(() => {
+    const zIndexFromInjection = unref(zIndexInjection);
+    return isNumber(zIndexFromInjection) ? zIndexFromInjection : defaultInitialZIndex;
+  });
+  const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
+  const nextZIndex = () => {
+    increasingInjection.current++;
+    zIndex.value = increasingInjection.current;
+    return currentZIndex.value;
+  };
+  if (!isClient && !inject(ZINDEX_INJECTION_KEY)) {
+    debugWarn(
+      "ZIndexInjection",
+      `Looks like you are using server rendering, you must provide a z-index provider to ensure the hydration process to be succeed
 usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`
-  ), {
-    initialZIndex: t,
-    currentZIndex: o,
-    nextZIndex: a
+    );
+  }
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex
   };
 };
 export {
-  d as ZINDEX_INJECTION_KEY,
-  f as defaultInitialZIndex,
-  j as useZIndex,
-  y as zIndexContextKey
+  ZINDEX_INJECTION_KEY,
+  defaultInitialZIndex,
+  useZIndex,
+  zIndexContextKey
 };

package/es/index.js

@@ -204,9 +204,5 @@ export { watermarkProps } from "./components/watermark/watermark.js";
 export { vLoading, createLoadingDirective } from "./components/loading/directive.js";
 export { Loading } from "./components/loading/service.js";
 export { messageDefaults, messageTypes } from "./components/message/types.js";
-
-
 const install = installer.install;
 const version = installer.version;
-
-export { install, version };

package/es/make-installer.js

@@ -1,13 +1,19 @@
 import "./components/config-provider/index.js";
-import { INSTALLED_KEY as t } from "./constants/key.js";
-import { version as l } from "./package.json.js";
-import { provideGlobalConfig as m } from "./components/config-provider/hooks/use-global-config.js";
-const c = (e = []) => ({
-  version: l,
-  install: (r, o) => {
-    r[t] || (r[t] = !0, e.forEach((i) => r.use(i)), o && m(o, r, !0));
-  }
-});
+import { INSTALLED_KEY } from "./constants/key.js";
+import { version } from "./package.json.js";
+import { provideGlobalConfig } from "./components/config-provider/hooks/use-global-config.js";
+const makeInstaller = (components = []) => {
+  const install = (app, options) => {
+    if (app[INSTALLED_KEY]) return;
+    app[INSTALLED_KEY] = true;
+    components.forEach((c) => app.use(c));
+    if (options) provideGlobalConfig(options, app, true);
+  };
+  return {
+    version,
+    install
+  };
+};
 export {
-  c as makeInstaller
+  makeInstaller
 };

package/es/package.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
   "name": "vft",
-  "version": "0.0.374",
+  "version": "0.0.375",
   "license": "MIT",
   "main": "lib/index.cjs",
   "module": "es/index.js",

package/es/package.json.js

@@ -1,4 +1,4 @@
-const o = "0.0.374";
+const version = "0.0.375";
 export {
-  o as version
+  version
 };

package/es/plugin.js

@@ -1,13 +1,13 @@
-import { VftLoading as o } from "./components/loading/index.js";
-import { VftInfiniteScroll as t } from "./components/infinite-scroll/index.js";
-import { VftMessage as f } from "./components/message/index.js";
-import { VftNotification as i } from "./components/notification/index.js";
-const e = [
-  o,
-  f,
-  t,
-  i
+import { VftLoading } from "./components/loading/index.js";
+import { VftInfiniteScroll } from "./components/infinite-scroll/index.js";
+import { VftMessage } from "./components/message/index.js";
+import { VftNotification } from "./components/notification/index.js";
+const Plugins = [
+  VftLoading,
+  VftMessage,
+  VftInfiniteScroll,
+  VftNotification
 ];
 export {
-  e as default
+  Plugins as default
 };

package/es/script.css

@@ -1 +1,4 @@
-.sortable-fallback{visibility:hidden!important}
+
+.sortable-fallback {
+  visibility: hidden !important;
+}

package/es/utils/dom/aria.js

@@ -1,42 +1,79 @@
-const u = 'a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])', c = (t) => process.env.NODE_ENV === "test" ? !0 : getComputedStyle(t).position === "fixed" ? !1 : t.offsetParent !== null, d = (t) => Array.from(
-  t.querySelectorAll(u)
-).filter((e) => i(e) && c(e)), i = (t) => {
-  if (t.tabIndex > 0 || t.tabIndex === 0 && t.getAttribute("tabIndex") !== null)
-    return !0;
-  if (t.tabIndex < 0 || t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true")
-    return !1;
-  switch (t.nodeName) {
-    case "A":
-      return !!t.href && t.rel !== "ignore";
-    case "INPUT":
-      return !(t.type === "hidden" || t.type === "file");
+const FOCUSABLE_ELEMENT_SELECTORS = `a[href],button:not([disabled]),button:not([hidden]),:not([tabindex="-1"]),input:not([disabled]),input:not([type="hidden"]),select:not([disabled]),textarea:not([disabled])`;
+const isVisible = (element) => {
+  if (process.env.NODE_ENV === "test") return true;
+  const computed = getComputedStyle(element);
+  return computed.position === "fixed" ? false : element.offsetParent !== null;
+};
+const obtainAllFocusableElements = (element) => {
+  return Array.from(
+    element.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)
+  ).filter((item) => isFocusable(item) && isVisible(item));
+};
+const isFocusable = (element) => {
+  if (element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null) {
+    return true;
+  }
+  if (element.tabIndex < 0 || element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true") {
+    return false;
+  }
+  switch (element.nodeName) {
+    case "A": {
+      return !!element.href && element.rel !== "ignore";
+    }
+    case "INPUT": {
+      return !(element.type === "hidden" || element.type === "file");
+    }
     case "BUTTON":
     case "SELECT":
-    case "TEXTAREA":
-      return !0;
-    default:
-      return !1;
+    case "TEXTAREA": {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+};
+const attemptFocus = (element) => {
+  if (!isFocusable(element)) {
+    return false;
+  }
+  element.focus?.();
+  return document.activeElement === element;
+};
+const triggerEvent = function(elm, name, ...opts) {
+  let eventName;
+  if (name.includes("mouse") || name.includes("click")) {
+    eventName = "MouseEvents";
+  } else if (name.includes("key")) {
+    eventName = "KeyboardEvent";
+  } else {
+    eventName = "HTMLEvents";
   }
-}, l = (t) => i(t) ? (t.focus?.(), document.activeElement === t) : !1, f = function(t, e, ...s) {
-  let n;
-  e.includes("mouse") || e.includes("click") ? n = "MouseEvents" : e.includes("key") ? n = "KeyboardEvent" : n = "HTMLEvents";
-  const r = document.createEvent(n);
-  return r.initEvent(e, ...s), t.dispatchEvent(r), t;
-}, a = (t) => !t.getAttribute("aria-owns"), b = (t, e, s) => {
-  const { parentNode: n } = t;
-  if (!n) return null;
-  const r = n.querySelectorAll(s), o = Array.prototype.indexOf.call(r, t);
-  return r[o + e] || null;
-}, E = (t) => {
-  t && (t.focus(), !a(t) && t.click());
+  const evt = document.createEvent(eventName);
+  evt.initEvent(name, ...opts);
+  elm.dispatchEvent(evt);
+  return elm;
+};
+const isLeaf = (el) => !el.getAttribute("aria-owns");
+const getSibling = (el, distance, elClass) => {
+  const { parentNode } = el;
+  if (!parentNode) return null;
+  const siblings = parentNode.querySelectorAll(elClass);
+  const index = Array.prototype.indexOf.call(siblings, el);
+  return siblings[index + distance] || null;
+};
+const focusNode = (el) => {
+  if (!el) return;
+  el.focus();
+  !isLeaf(el) && el.click();
 };
 export {
-  l as attemptFocus,
-  E as focusNode,
-  b as getSibling,
-  i as isFocusable,
-  a as isLeaf,
-  c as isVisible,
-  d as obtainAllFocusableElements,
-  f as triggerEvent
+  attemptFocus,
+  focusNode,
+  getSibling,
+  isFocusable,
+  isLeaf,
+  isVisible,
+  obtainAllFocusableElements,
+  triggerEvent
 };

package/es/utils/dom/index.js

@@ -1,21 +1,21 @@
-import { attemptFocus as o, focusNode as i, getSibling as l, isFocusable as r, isLeaf as s, isVisible as n, obtainAllFocusableElements as a, triggerEvent as c } from "./aria.js";
-import { getClientXY as g, getOffsetTop as p, getOffsetTopDistance as b, isInContainer as m } from "./position.js";
-import { getScrollBarWidth as S, getScrollContainer as x, isScroll as C, scrollIntoView as F } from "./scroll.js";
+import { attemptFocus, focusNode, getSibling, isFocusable, isLeaf, isVisible, obtainAllFocusableElements, triggerEvent } from "./aria.js";
+import { getClientXY, getOffsetTop, getOffsetTopDistance, isInContainer } from "./position.js";
+import { getScrollBarWidth, getScrollContainer, isScroll, scrollIntoView } from "./scroll.js";
 export {
-  o as attemptFocus,
-  i as focusNode,
-  g as getClientXY,
-  p as getOffsetTop,
-  b as getOffsetTopDistance,
-  S as getScrollBarWidth,
-  x as getScrollContainer,
-  l as getSibling,
-  r as isFocusable,
-  m as isInContainer,
-  s as isLeaf,
-  C as isScroll,
-  n as isVisible,
-  a as obtainAllFocusableElements,
-  F as scrollIntoView,
-  c as triggerEvent
+  attemptFocus,
+  focusNode,
+  getClientXY,
+  getOffsetTop,
+  getOffsetTopDistance,
+  getScrollBarWidth,
+  getScrollContainer,
+  getSibling,
+  isFocusable,
+  isInContainer,
+  isLeaf,
+  isScroll,
+  isVisible,
+  obtainAllFocusableElements,
+  scrollIntoView,
+  triggerEvent
 };

package/es/utils/dom/position.js

@@ -1,29 +1,53 @@
-import { isClient as c } from "@vueuse/core";
-const s = (t, n) => {
-  if (!c || !t || !n) return !1;
-  const e = t.getBoundingClientRect();
-  let i;
-  return n instanceof Element ? i = n.getBoundingClientRect() : i = {
-    top: 0,
-    right: window.innerWidth,
-    bottom: window.innerHeight,
-    left: 0
-  }, e.top < i.bottom && e.bottom > i.top && e.right > i.left && e.left < i.right;
-}, o = (t) => {
-  let n = 0, e = t;
-  for (; e; )
-    n += e.offsetTop, e = e.offsetParent;
-  return n;
-}, r = (t, n) => Math.abs(o(t) - o(n)), f = (t) => {
-  let n, e;
-  return t.type === "touchend" ? (e = t.changedTouches[0].clientY, n = t.changedTouches[0].clientX) : t.type.startsWith("touch") ? (e = t.touches[0].clientY, n = t.touches[0].clientX) : (e = t.clientY, n = t.clientX), {
-    clientX: n,
-    clientY: e
+import { isClient } from "@vueuse/core";
+const isInContainer = (el, container) => {
+  if (!isClient || !el || !container) return false;
+  const elRect = el.getBoundingClientRect();
+  let containerRect;
+  if (container instanceof Element) {
+    containerRect = container.getBoundingClientRect();
+  } else {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  }
+  return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
+};
+const getOffsetTop = (el) => {
+  let offset = 0;
+  let parent = el;
+  while (parent) {
+    offset += parent.offsetTop;
+    parent = parent.offsetParent;
+  }
+  return offset;
+};
+const getOffsetTopDistance = (el, containerEl) => {
+  return Math.abs(getOffsetTop(el) - getOffsetTop(containerEl));
+};
+const getClientXY = (event) => {
+  let clientX;
+  let clientY;
+  if (event.type === "touchend") {
+    clientY = event.changedTouches[0].clientY;
+    clientX = event.changedTouches[0].clientX;
+  } else if (event.type.startsWith("touch")) {
+    clientY = event.touches[0].clientY;
+    clientX = event.touches[0].clientX;
+  } else {
+    clientY = event.clientY;
+    clientX = event.clientX;
+  }
+  return {
+    clientX,
+    clientY
   };
 };
 export {
-  f as getClientXY,
-  o as getOffsetTop,
-  r as getOffsetTopDistance,
-  s as isInContainer
+  getClientXY,
+  getOffsetTop,
+  getOffsetTopDistance,
+  isInContainer
 };

package/es/utils/dom/scroll.js

@@ -1,53 +1,72 @@
-import { getStyle as p } from "@vft/utils";
-import { isClient as n } from "@vueuse/core";
-const h = (e, t) => {
-  if (!n) return !1;
-  const o = {
+import { getStyle } from "@vft/utils";
+import { isClient } from "@vueuse/core";
+const isScroll = (el, isVertical) => {
+  if (!isClient) return false;
+  const key = {
     undefined: "overflow",
     true: "overflow-y",
     false: "overflow-x"
-  }[String(t)], l = p(e, o);
-  return ["scroll", "auto", "overlay"].some((r) => l.includes(r));
-}, a = (e, t) => {
-  if (!n) return;
-  let o = e;
-  for (; o; ) {
-    if ([window, document, document.documentElement].includes(o))
+  }[String(isVertical)];
+  const overflow = getStyle(el, key);
+  return ["scroll", "auto", "overlay"].some((s) => overflow.includes(s));
+};
+const getScrollContainer = (el, isVertical) => {
+  if (!isClient) return;
+  let parent = el;
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent))
       return window;
-    if (h(o, t)) return o;
-    o = o.parentNode;
+    if (isScroll(parent, isVertical)) return parent;
+    parent = parent.parentNode;
   }
-  return o;
+  return parent;
 };
-let i;
-const v = (e) => {
-  if (!n) return 0;
-  if (i !== void 0) return i;
-  const t = document.createElement("div");
-  t.className = `${e}-scrollbar__wrap`, t.style.visibility = "hidden", t.style.width = "100px", t.style.position = "absolute", t.style.top = "-9999px", document.body.appendChild(t);
-  const o = t.offsetWidth;
-  t.style.overflow = "scroll";
-  const l = document.createElement("div");
-  l.style.width = "100%", t.appendChild(l);
-  const r = l.offsetWidth;
-  return t.parentNode?.removeChild(t), i = o - r, i;
+let scrollBarWidth;
+const getScrollBarWidth = (namespace) => {
+  if (!isClient) return 0;
+  if (scrollBarWidth !== void 0) return scrollBarWidth;
+  const outer = document.createElement("div");
+  outer.className = `${namespace}-scrollbar__wrap`;
+  outer.style.visibility = "hidden";
+  outer.style.width = "100px";
+  outer.style.position = "absolute";
+  outer.style.top = "-9999px";
+  document.body.appendChild(outer);
+  const widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = "scroll";
+  const inner = document.createElement("div");
+  inner.style.width = "100%";
+  outer.appendChild(inner);
+  const widthWithScroll = inner.offsetWidth;
+  outer.parentNode?.removeChild(outer);
+  scrollBarWidth = widthNoScroll - widthWithScroll;
+  return scrollBarWidth;
 };
-function y(e, t) {
-  if (!n) return;
-  if (!t) {
-    e.scrollTop = 0;
+function scrollIntoView(container, selected) {
+  if (!isClient) return;
+  if (!selected) {
+    container.scrollTop = 0;
     return;
   }
-  const o = [];
-  let l = t.offsetParent;
-  for (; l !== null && e !== l && e.contains(l); )
-    o.push(l), l = l.offsetParent;
-  const r = t.offsetTop + o.reduce((d, u) => d + u.offsetTop, 0), s = r + t.offsetHeight, f = e.scrollTop, c = f + e.clientHeight;
-  r < f ? e.scrollTop = r : s > c && (e.scrollTop = s - e.clientHeight);
+  const offsetParents = [];
+  let pointer = selected.offsetParent;
+  while (pointer !== null && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer);
+    pointer = pointer.offsetParent;
+  }
+  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
+  const bottom = top + selected.offsetHeight;
+  const viewRectTop = container.scrollTop;
+  const viewRectBottom = viewRectTop + container.clientHeight;
+  if (top < viewRectTop) {
+    container.scrollTop = top;
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight;
+  }
 }
 export {
-  v as getScrollBarWidth,
-  a as getScrollContainer,
-  h as isScroll,
-  y as scrollIntoView
+  getScrollBarWidth,
+  getScrollContainer,
+  isScroll,
+  scrollIntoView
 };

package/es/utils/error.js

@@ -1,19 +1,20 @@
-import { isString as e } from "@vft/utils";
-class n extends Error {
-  constructor(o) {
-    super(o), this.name = "VftError";
+import { isString } from "@vft/utils";
+class VftError extends Error {
+  constructor(m) {
+    super(m);
+    this.name = "VftError";
   }
 }
-function i(r, o) {
-  throw new n(`[${r}] ${o}`);
+function throwError(scope, m) {
+  throw new VftError(`[${scope}] ${m}`);
 }
-function c(r, o) {
+function debugWarn(scope, message) {
   if (process.env.NODE_ENV !== "production") {
-    const t = e(r) ? new n(`[${r}] ${o}`) : r;
-    console.warn(t);
+    const error = isString(scope) ? new VftError(`[${scope}] ${message}`) : scope;
+    console.warn(error);
   }
 }
 export {
-  c as debugWarn,
-  i as throwError
+  debugWarn,
+  throwError
 };