vft 0.0.375 → 0.0.376

package/es/components/watermark/watermark.vue2.js

@@ -1,36 +1,20 @@
-import { defineComponent, computed, shallowRef, ref, onMounted, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, renderSlot } from "vue";
-import { useMutationObserver } from "@vueuse/core";
-import { isArray, isUndefined } from "@vft/utils";
-import { watermarkProps } from "./watermark.js";
-import { reRendering, getPixelRatio, getStyleStr } from "./utils.js";
-import useClips, { FontGap } from "./useClips.js";
-const __default__ = defineComponent({
+import { defineComponent as _, computed as n, shallowRef as C, ref as j, onMounted as q, watch as J, onBeforeUnmount as K, createElementBlock as Q, openBlock as Z, normalizeStyle as tt, renderSlot as et } from "vue";
+import { useMutationObserver as ot } from "@vueuse/core";
+import { isArray as nt, isUndefined as at } from "@vft/utils";
+import { watermarkProps as rt } from "./watermark.js";
+import { reRendering as st, getPixelRatio as lt, getStyleStr as it } from "./utils.js";
+import ct, { FontGap as ut } from "./useClips.js";
+const ft = _({
   name: "VftWatermark"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: watermarkProps,
-  setup(__props) {
-    const style = {
+}), kt = /* @__PURE__ */ _({
+  ...ft,
+  props: rt,
+  setup(A) {
+    const R = {
       position: "relative"
-    };
-    const props = __props;
-    const color = computed(() => props.font?.color ?? "rgba(0,0,0,.15)");
-    const fontSize = computed(() => props.font?.fontSize ?? 16);
-    const fontWeight = computed(() => props.font?.fontWeight ?? "normal");
-    const fontStyle = computed(() => props.font?.fontStyle ?? "normal");
-    const fontFamily = computed(() => props.font?.fontFamily ?? "sans-serif");
-    const textAlign = computed(() => props.font?.textAlign ?? "center");
-    const textBaseline = computed(() => props.font?.textBaseline ?? "hanging");
-    const gapX = computed(() => props.gap[0]);
-    const gapY = computed(() => props.gap[1]);
-    const gapXCenter = computed(() => gapX.value / 2);
-    const gapYCenter = computed(() => gapY.value / 2);
-    const offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value);
-    const offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value);
-    const getMarkStyle = () => {
-      const markStyle = {
-        zIndex: props.zIndex,
+    }, t = A, E = n(() => t.font?.color ?? "rgba(0,0,0,.15)"), k = n(() => t.font?.fontSize ?? 16), I = n(() => t.font?.fontWeight ?? "normal"), P = n(() => t.font?.fontStyle ?? "normal"), y = n(() => t.font?.fontFamily ?? "sans-serif"), T = n(() => t.font?.textAlign ?? "center"), F = n(() => t.font?.textBaseline ?? "hanging"), b = n(() => t.gap[0]), B = n(() => t.gap[1]), S = n(() => b.value / 2), M = n(() => B.value / 2), H = n(() => t.offset?.[0] ?? S.value), L = n(() => t.offset?.[1] ?? M.value), O = () => {
+      const e = {
+        zIndex: t.zIndex,
         position: "absolute",
         left: 0,
         top: 0,
@@ -39,171 +23,109 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         pointerEvents: "none",
         backgroundRepeat: "repeat"
       };
-      let positionLeft = offsetLeft.value - gapXCenter.value;
-      let positionTop = offsetTop.value - gapYCenter.value;
-      if (positionLeft > 0) {
-        markStyle.left = `${positionLeft}px`;
-        markStyle.width = `calc(100% - ${positionLeft}px)`;
-        positionLeft = 0;
-      }
-      if (positionTop > 0) {
-        markStyle.top = `${positionTop}px`;
-        markStyle.height = `calc(100% - ${positionTop}px)`;
-        positionTop = 0;
-      }
-      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
-      return markStyle;
-    };
-    const containerRef = shallowRef(null);
-    const watermarkRef = shallowRef();
-    const stopObservation = ref(false);
-    const destroyWatermark = () => {
-      if (watermarkRef.value) {
-        watermarkRef.value.remove();
-        watermarkRef.value = void 0;
-      }
-    };
-    const appendWatermark = (base64Url, markWidth) => {
-      if (containerRef.value && watermarkRef.value) {
-        stopObservation.value = true;
-        watermarkRef.value.setAttribute(
-          "style",
-          getStyleStr({
-            ...getMarkStyle(),
-            backgroundImage: `url('${base64Url}')`,
-            backgroundSize: `${Math.floor(markWidth)}px`
-          })
-        );
-        containerRef.value?.append(watermarkRef.value);
-        setTimeout(() => {
-          stopObservation.value = false;
-        });
-      }
-    };
-    const getMarkSize = (ctx) => {
-      let defaultWidth = 120;
-      let defaultHeight = 64;
-      let space = 0;
-      const { image, content, width, height, rotate } = props;
-      if (!image && ctx.measureText) {
-        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
-        const contents = isArray(content) ? content : [content];
-        let maxWidth = 0;
-        let maxHeight = 0;
-        contents.forEach((item) => {
+      let o = H.value - S.value, a = L.value - M.value;
+      return o > 0 && (e.left = `${o}px`, e.width = `calc(100% - ${o}px)`, o = 0), a > 0 && (e.top = `${a}px`, e.height = `calc(100% - ${a}px)`, a = 0), e.backgroundPosition = `${o}px ${a}px`, e;
+    }, f = C(null), s = C(), p = j(!1), w = () => {
+      s.value && (s.value.remove(), s.value = void 0);
+    }, D = (e, o) => {
+      f.value && s.value && (p.value = !0, s.value.setAttribute(
+        "style",
+        it({
+          ...O(),
+          backgroundImage: `url('${e}')`,
+          backgroundSize: `${Math.floor(o)}px`
+        })
+      ), f.value?.append(s.value), setTimeout(() => {
+        p.value = !1;
+      }));
+    }, N = (e) => {
+      let o = 120, a = 64, i = 0;
+      const { image: g, content: c, width: d, height: v, rotate: h } = t;
+      if (!g && e.measureText) {
+        e.font = `${Number(k.value)}px ${y.value}`;
+        const l = nt(c) ? c : [c];
+        let r = 0, u = 0;
+        l.forEach((X) => {
           const {
-            width: width2,
-            fontBoundingBoxAscent,
-            fontBoundingBoxDescent,
-            actualBoundingBoxAscent,
-            actualBoundingBoxDescent
-          } = ctx.measureText(item);
-          const height2 = isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
-          if (width2 > maxWidth) maxWidth = Math.ceil(width2);
-          if (height2 > maxHeight) maxHeight = Math.ceil(height2);
-        });
-        defaultWidth = maxWidth;
-        defaultHeight = maxHeight * contents.length + (contents.length - 1) * FontGap;
-        const angle = Math.PI / 180 * Number(rotate);
-        space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
-        defaultWidth += space;
+            width: W,
+            fontBoundingBoxAscent: $,
+            fontBoundingBoxDescent: Y,
+            actualBoundingBoxAscent: G,
+            actualBoundingBoxDescent: V
+          } = e.measureText(X), z = at($) ? G + V : $ + Y;
+          W > r && (r = Math.ceil(W)), z > u && (u = Math.ceil(z));
+        }), o = r, a = u * l.length + (l.length - 1) * ut;
+        const x = Math.PI / 180 * Number(h);
+        i = Math.ceil(Math.abs(Math.sin(x) * a) / 2), o += i;
       }
-      return [width ?? defaultWidth, height ?? defaultHeight, space];
-    };
-    const getClips = useClips();
-    const renderWatermark = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      const image = props.image;
-      const content = props.content;
-      const rotate = props.rotate;
-      if (ctx) {
-        if (!watermarkRef.value) {
-          watermarkRef.value = document.createElement("div");
-        }
-        const ratio = getPixelRatio();
-        const [markWidth, markHeight, space] = getMarkSize(ctx);
-        const drawCanvas = (drawContent) => {
-          const [textClips, clipWidth] = getClips(
-            drawContent || "",
-            rotate,
-            ratio,
-            markWidth,
-            markHeight,
+      return [d ?? o, v ?? a, i];
+    }, U = ct(), m = () => {
+      const o = document.createElement("canvas").getContext("2d"), a = t.image, i = t.content, g = t.rotate;
+      if (o) {
+        s.value || (s.value = document.createElement("div"));
+        const c = lt(), [d, v, h] = N(o), l = (r) => {
+          const [u, x] = U(
+            r || "",
+            g,
+            c,
+            d,
+            v,
             {
-              color: color.value,
-              fontSize: fontSize.value,
-              fontStyle: fontStyle.value,
-              fontWeight: fontWeight.value,
-              fontFamily: fontFamily.value,
-              textAlign: textAlign.value,
-              textBaseline: textBaseline.value
+              color: E.value,
+              fontSize: k.value,
+              fontStyle: P.value,
+              fontWeight: I.value,
+              fontFamily: y.value,
+              textAlign: T.value,
+              textBaseline: F.value
             },
-            gapX.value,
-            gapY.value,
-            space
+            b.value,
+            B.value,
+            h
           );
-          appendWatermark(textClips, clipWidth);
+          D(u, x);
         };
-        if (image) {
-          const img = new Image();
-          img.onload = () => {
-            drawCanvas(img);
-          };
-          img.onerror = () => {
-            drawCanvas(content);
-          };
-          img.crossOrigin = "anonymous";
-          img.referrerPolicy = "no-referrer";
-          img.src = image;
-        } else {
-          drawCanvas(content);
-        }
+        if (a) {
+          const r = new Image();
+          r.onload = () => {
+            l(r);
+          }, r.onerror = () => {
+            l(i);
+          }, r.crossOrigin = "anonymous", r.referrerPolicy = "no-referrer", r.src = a;
+        } else
+          l(i);
       }
     };
-    onMounted(() => {
-      renderWatermark();
-    });
-    watch(
-      () => props,
+    return q(() => {
+      m();
+    }), J(
+      () => t,
       () => {
-        renderWatermark();
+        m();
       },
       {
-        deep: true,
+        deep: !0,
         flush: "post"
       }
-    );
-    onBeforeUnmount(() => {
-      destroyWatermark();
-    });
-    const onMutate = (mutations) => {
-      if (stopObservation.value) {
-        return;
-      }
-      mutations.forEach((mutation) => {
-        if (reRendering(mutation, watermarkRef.value)) {
-          destroyWatermark();
-          renderWatermark();
-        }
+    ), K(() => {
+      w();
+    }), ot(f, (e) => {
+      p.value || e.forEach((o) => {
+        st(o, s.value) && (w(), m());
       });
-    };
-    useMutationObserver(containerRef, onMutate, {
-      attributes: true,
-      subtree: true,
-      childList: true
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "containerRef",
-        ref: containerRef,
-        style: normalizeStyle([style])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 4);
-    };
+    }, {
+      attributes: !0,
+      subtree: !0,
+      childList: !0
+    }), (e, o) => (Z(), Q("div", {
+      ref_key: "containerRef",
+      ref: f,
+      style: tt([R])
+    }, [
+      et(e.$slots, "default")
+    ], 4));
   }
 });
 export {
-  _sfc_main as default
+  kt as default
 };

package/es/constants/aria.js

@@ -1,4 +1,4 @@
-const EVENT_CODE = {
+const e = {
   tab: "Tab",
   enter: "Enter",
   space: "Space",
@@ -20,5 +20,5 @@ const EVENT_CODE = {
   end: "End"
 };
 export {
-  EVENT_CODE
+  e as EVENT_CODE
 };

package/es/constants/date.js

@@ -1,4 +1,4 @@
-const datePickTypes = [
+const e = [
   "year",
   "month",
   "date",
@@ -8,9 +8,8 @@ const datePickTypes = [
   "datetimerange",
   "daterange",
   "monthrange"
-];
-const WEEK_DAYS = ["日", "一", "二", "三", "四", "五", "六"];
+], t = ["日", "一", "二", "三", "四", "五", "六"];
 export {
-  WEEK_DAYS,
-  datePickTypes
+  t as WEEK_DAYS,
+  e as datePickTypes
 };

package/es/constants/event.js

@@ -1,8 +1,6 @@
-const UPDATE_MODEL_EVENT = "update:modelValue";
-const CHANGE_EVENT = "change";
-const INPUT_EVENT = "input";
+const E = "update:modelValue", t = "change", e = "input";
 export {
-  CHANGE_EVENT,
-  INPUT_EVENT,
-  UPDATE_MODEL_EVENT
+  t as CHANGE_EVENT,
+  e as INPUT_EVENT,
+  E as UPDATE_MODEL_EVENT
 };

package/es/constants/index.js

@@ -1,16 +1,16 @@
-import { EVENT_CODE } from "./aria.js";
-import { WEEK_DAYS, datePickTypes } from "./date.js";
-import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from "./event.js";
-import { INSTALLED_KEY } from "./key.js";
-import { componentSizeMap, componentSizes } from "./size.js";
+import { EVENT_CODE as e } from "./aria.js";
+import { WEEK_DAYS as p, datePickTypes as t } from "./date.js";
+import { CHANGE_EVENT as m, INPUT_EVENT as N, UPDATE_MODEL_EVENT as _ } from "./event.js";
+import { INSTALLED_KEY as x } from "./key.js";
+import { componentSizeMap as n, componentSizes as A } from "./size.js";
 export {
-  CHANGE_EVENT,
-  EVENT_CODE,
-  INPUT_EVENT,
-  INSTALLED_KEY,
-  UPDATE_MODEL_EVENT,
-  WEEK_DAYS,
-  componentSizeMap,
-  componentSizes,
-  datePickTypes
+  m as CHANGE_EVENT,
+  e as EVENT_CODE,
+  N as INPUT_EVENT,
+  x as INSTALLED_KEY,
+  _ as UPDATE_MODEL_EVENT,
+  p as WEEK_DAYS,
+  n as componentSizeMap,
+  A as componentSizes,
+  t as datePickTypes
 };

package/es/constants/key.js

@@ -1,4 +1,4 @@
-const INSTALLED_KEY = Symbol("INSTALLED_KEY");
+const E = Symbol("INSTALLED_KEY");
 export {
-  INSTALLED_KEY
+  E as INSTALLED_KEY
 };

package/es/constants/size.js

@@ -1,10 +1,9 @@
-const componentSizes = ["", "default", "small", "large"];
-const componentSizeMap = {
+const e = ["", "default", "small", "large"], l = {
   large: 40,
   default: 32,
   small: 24
 };
 export {
-  componentSizeMap,
-  componentSizes
+  l as componentSizeMap,
+  e as componentSizes
 };

package/es/defaults.js

@@ -1,7 +1,7 @@
-import Components from "./component.js";
-import { makeInstaller } from "./make-installer.js";
-import Plugins from "./plugin.js";
-const installer = makeInstaller([...Components, ...Plugins]);
+import o from "./component.js";
+import { makeInstaller as r } from "./make-installer.js";
+import t from "./plugin.js";
+const n = r([...o, ...t]);
 export {
-  installer as default
+  n as default
 };

package/es/hooks/index.js

@@ -1,54 +1,54 @@
-import { useAttrs } from "./use-attrs/index.js";
-import { useDraggable } from "./use-draggable/index.js";
-import { useFocus } from "./use-focus/index.js";
-import { FORWARD_REF_INJECTION_KEY, useForwardRef, useForwardRefDirective } from "./use-forward-ref/index.js";
-import { ID_INJECTION_KEY, useId, useIdInjection } from "./use-id/index.js";
-import { useLockscreen } from "./use-lockscreen/index.js";
-import { createModelToggleComposable, useModelToggle, useModelToggleEmits } from "./use-model-toggle/index.js";
-import { defaultNamespace, namespaceContextKey, useGetDerivedNamespace, useNamespace } from "./use-namespace/index.js";
-import { useOrderedChildren } from "./use-ordered-children/index.js";
-import { usePopper } from "./use-popper/index.js";
-import { usePopperContainer, usePopperContainerId } from "./use-popper-container/index.js";
-import { useSameTarget } from "./use-same-target/index.js";
-import { SIZE_INJECTION_KEY, useGlobalSize } from "./use-size/index.js";
-import { useThrottleRender } from "./use-throttle-render/index.js";
-import { useTimeout } from "./use-timeout/index.js";
-import { ZINDEX_INJECTION_KEY, defaultInitialZIndex, useZIndex, zIndexContextKey } from "./use-z-index/index.js";
-import { useCalcInputWidth } from "./use-calc-input-width/index.js";
-import { useComposition } from "./use-composition/index.js";
-import { useFocusController } from "./use-focus-controller/index.js";
+import { useAttrs as r } from "./use-attrs/index.js";
+import { useDraggable as s } from "./use-draggable/index.js";
+import { useFocus as u } from "./use-focus/index.js";
+import { FORWARD_REF_INJECTION_KEY as x, useForwardRef as a, useForwardRefDirective as f } from "./use-forward-ref/index.js";
+import { ID_INJECTION_KEY as d, useId as n, useIdInjection as l } from "./use-id/index.js";
+import { useLockscreen as C } from "./use-lockscreen/index.js";
+import { createModelToggleComposable as E, useModelToggle as N, useModelToggleEmits as T } from "./use-model-toggle/index.js";
+import { defaultNamespace as _, namespaceContextKey as D, useGetDerivedNamespace as F, useNamespace as K } from "./use-namespace/index.js";
+import { useOrderedChildren as R } from "./use-ordered-children/index.js";
+import { usePopper as Y } from "./use-popper/index.js";
+import { usePopperContainer as b, usePopperContainerId as h } from "./use-popper-container/index.js";
+import { useSameTarget as P } from "./use-same-target/index.js";
+import { SIZE_INJECTION_KEY as v, useGlobalSize as w } from "./use-size/index.js";
+import { useThrottleRender as z } from "./use-throttle-render/index.js";
+import { useTimeout as G } from "./use-timeout/index.js";
+import { ZINDEX_INJECTION_KEY as j, defaultInitialZIndex as k, useZIndex as L, zIndexContextKey as X } from "./use-z-index/index.js";
+import { useCalcInputWidth as B } from "./use-calc-input-width/index.js";
+import { useComposition as Q } from "./use-composition/index.js";
+import { useFocusController as V } from "./use-focus-controller/index.js";
 export {
-  FORWARD_REF_INJECTION_KEY,
-  ID_INJECTION_KEY,
-  SIZE_INJECTION_KEY,
-  ZINDEX_INJECTION_KEY,
-  createModelToggleComposable,
-  defaultInitialZIndex,
-  defaultNamespace,
-  namespaceContextKey,
-  useAttrs,
-  useCalcInputWidth,
-  useComposition,
-  useDraggable,
-  useFocus,
-  useFocusController,
-  useForwardRef,
-  useForwardRefDirective,
-  useGetDerivedNamespace,
-  useGlobalSize,
-  useId,
-  useIdInjection,
-  useLockscreen,
-  useModelToggle,
-  useModelToggleEmits,
-  useNamespace,
-  useOrderedChildren,
-  usePopper,
-  usePopperContainer,
-  usePopperContainerId,
-  useSameTarget,
-  useThrottleRender,
-  useTimeout,
-  useZIndex,
-  zIndexContextKey
+  x as FORWARD_REF_INJECTION_KEY,
+  d as ID_INJECTION_KEY,
+  v as SIZE_INJECTION_KEY,
+  j as ZINDEX_INJECTION_KEY,
+  E as createModelToggleComposable,
+  k as defaultInitialZIndex,
+  _ as defaultNamespace,
+  D as namespaceContextKey,
+  r as useAttrs,
+  B as useCalcInputWidth,
+  Q as useComposition,
+  s as useDraggable,
+  u as useFocus,
+  V as useFocusController,
+  a as useForwardRef,
+  f as useForwardRefDirective,
+  F as useGetDerivedNamespace,
+  w as useGlobalSize,
+  n as useId,
+  l as useIdInjection,
+  C as useLockscreen,
+  N as useModelToggle,
+  T as useModelToggleEmits,
+  K as useNamespace,
+  R as useOrderedChildren,
+  Y as usePopper,
+  b as usePopperContainer,
+  h as usePopperContainerId,
+  P as useSameTarget,
+  z as useThrottleRender,
+  G as useTimeout,
+  L as useZIndex,
+  X as zIndexContextKey
 };

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

@@ -1,32 +1,22 @@
 import "@vueuse/core";
 import "@vft/utils";
-import { debugWarn } from "../../utils/error.js";
+import { debugWarn as c } from "../../utils/error.js";
 import "../../components/config-provider/hooks/use-global-config.js";
-import { computed, getCurrentInstance } from "vue";
-import { fromPairs } from "lodash-es";
-const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
-const LISTENER_PREFIX = /^on[A-Z]/;
-const useAttrs = (params = {}) => {
-  const { excludeListeners = false, excludeKeys } = params;
-  const allExcludeKeys = computed(() => {
-    return (excludeKeys?.value || []).concat(DEFAULT_EXCLUDE_KEYS);
-  });
-  const instance = getCurrentInstance();
-  if (!instance) {
-    debugWarn(
-      "use-attrs",
-      "getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function"
-    );
-    return computed(() => ({}));
-  }
-  return computed(
-    () => fromPairs(
-      Object.entries(instance.proxy?.$attrs).filter(
-        ([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key))
+import { computed as t, getCurrentInstance as a } from "vue";
+import { fromPairs as l } from "lodash-es";
+const i = ["class", "style"], m = /^on[A-Z]/, I = (s = {}) => {
+  const { excludeListeners: n = !1, excludeKeys: o } = s, u = t(() => (o?.value || []).concat(i)), e = a();
+  return e ? t(
+    () => l(
+      Object.entries(e.proxy?.$attrs).filter(
+        ([r]) => !u.value.includes(r) && !(n && m.test(r))
       )
     )
-  );
+  ) : (c(
+    "use-attrs",
+    "getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function"
+  ), t(() => ({})));
 };
 export {
-  useAttrs
+  I as useAttrs
 };

package/es/hooks/use-calc-input-width/index.js

@@ -1,22 +1,17 @@
-import { shallowRef, ref, computed } from "vue";
-import { useResizeObserver } from "@vueuse/core";
-function useCalcInputWidth() {
-  const calculatorRef = shallowRef();
-  const calculatorWidth = ref(0);
-  const MINIMUM_INPUT_WIDTH = 11;
-  const inputStyle = computed(() => ({
-    minWidth: `${Math.max(calculatorWidth.value, MINIMUM_INPUT_WIDTH)}px`
+import { shallowRef as r, ref as a, computed as c } from "vue";
+import { useResizeObserver as u } from "@vueuse/core";
+function d() {
+  const t = r(), e = a(0), o = 11, l = c(() => ({
+    minWidth: `${Math.max(e.value, o)}px`
   }));
-  const resetCalculatorWidth = () => {
-    calculatorWidth.value = calculatorRef.value?.getBoundingClientRect().width ?? 0;
-  };
-  useResizeObserver(calculatorRef, resetCalculatorWidth);
-  return {
-    calculatorRef,
-    calculatorWidth,
-    inputStyle
+  return u(t, () => {
+    e.value = t.value?.getBoundingClientRect().width ?? 0;
+  }), {
+    calculatorRef: t,
+    calculatorWidth: e,
+    inputStyle: l
   };
 }
 export {
-  useCalcInputWidth
+  d as useCalcInputWidth
 };