vft 0.0.374 → 0.0.375

package/lib/components/virtual-list/utils.cjs

@@ -1 +1,53 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./defaults.cjs"),c=(e,t)=>e<t?l.FORWARD:l.BACKWARD,d=e=>e===l.LTR||e===l.RTL||e===l.HORIZONTAL,u=e=>e===l.RTL;let r=null;function T(e=!1){if(r===null||e){const t=document.createElement("div"),o=t.style;o.width="50px",o.height="50px",o.overflow="scroll",o.direction="rtl";const i=document.createElement("div"),n=i.style;return n.width="100px",n.height="100px",t.appendChild(i),document.body.appendChild(t),t.scrollLeft>0?r=l.RTL_OFFSET_POS_DESC:(t.scrollLeft=1,t.scrollLeft===0?r=l.RTL_OFFSET_NAG:r=l.RTL_OFFSET_POS_ASC),document.body.removeChild(t),r}return r}function f({move:e,size:t,bar:o},i){const n={},s=`translate${o.axis}(${e}px)`;return n[o.size]=t,n.transform=s,i==="horizontal"?n.height="100%":n.width="100%",n}exports.getRTLOffsetType=T;exports.getScrollDir=c;exports.isHorizontal=d;exports.isRTL=u;exports.renderThumbStyle=f;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaults = require("./defaults.cjs");
+const getScrollDir = (prev, cur) => prev < cur ? defaults.FORWARD : defaults.BACKWARD;
+const isHorizontal = (dir) => dir === defaults.LTR || dir === defaults.RTL || dir === defaults.HORIZONTAL;
+const isRTL = (dir) => dir === defaults.RTL;
+let cachedRTLResult = null;
+function getRTLOffsetType(recalculate = false) {
+  if (cachedRTLResult === null || recalculate) {
+    const outerDiv = document.createElement("div");
+    const outerStyle = outerDiv.style;
+    outerStyle.width = "50px";
+    outerStyle.height = "50px";
+    outerStyle.overflow = "scroll";
+    outerStyle.direction = "rtl";
+    const innerDiv = document.createElement("div");
+    const innerStyle = innerDiv.style;
+    innerStyle.width = "100px";
+    innerStyle.height = "100px";
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = defaults.RTL_OFFSET_POS_DESC;
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = defaults.RTL_OFFSET_NAG;
+      } else {
+        cachedRTLResult = defaults.RTL_OFFSET_POS_ASC;
+      }
+    }
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+  return cachedRTLResult;
+}
+function renderThumbStyle({ move, size, bar }, layout) {
+  const style = {};
+  const translate = `translate${bar.axis}(${move}px)`;
+  style[bar.size] = size;
+  style.transform = translate;
+  if (layout === "horizontal") {
+    style.height = "100%";
+  } else {
+    style.width = "100%";
+  }
+  return style;
+}
+exports.getRTLOffsetType = getRTLOffsetType;
+exports.getScrollDir = getScrollDir;
+exports.isHorizontal = isHorizontal;
+exports.isRTL = isRTL;
+exports.renderThumbStyle = renderThumbStyle;

package/lib/components/watermark/index.cjs

@@ -1 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const r=require("../../utils/vue/install.cjs");require("lodash-es");const t=require("./watermark.vue2.cjs"),a=require("./watermark.cjs"),e=r.withInstall(t.default);exports.watermarkProps=a.watermarkProps;exports.VftWatermark=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const install = require("../../utils/vue/install.cjs");
+require("lodash-es");
+const watermark_vue_vue_type_script_setup_true_lang = require("./watermark.vue2.cjs");
+const watermark = require("./watermark.cjs");
+const VftWatermark = install.withInstall(watermark_vue_vue_type_script_setup_true_lang.default);
+exports.watermarkProps = watermark.watermarkProps;
+exports.VftWatermark = VftWatermark;
+exports.default = VftWatermark;

package/lib/components/watermark/style/css.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-watermark.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-watermark.css");

package/lib/components/watermark/style/index.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/watermark.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/watermark.scss");

package/lib/components/watermark/useClips.cjs

@@ -1 +1,118 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Q=require("@vft/utils"),y=3,V={left:[0,.5],start:[0,.5],center:[.5,0],right:[1,-.5],end:[1,-.5]};function W(C,a,h=1){const t=document.createElement("canvas"),l=t.getContext("2d"),s=C*h,m=a*h;return t.setAttribute("width",`${s}px`),t.setAttribute("height",`${m}px`),l.save(),[l,t,s,m]}function Z(){function C(a,h,t,l,s,m,z,F,L){const[o,P,r,d]=W(l,s,t);if(a instanceof HTMLImageElement)o.drawImage(a,0,0,r,d);else{const{color:e,fontSize:n,fontStyle:c,fontWeight:i,fontFamily:q,textAlign:_,textBaseline:D}=m,w=Number(n)*t;o.font=`${c} normal ${i} ${w}px/${s}px ${q}`,o.fillStyle=e,o.textAlign=_,o.textBaseline=D,(Q.isArray(a)?a:[a])?.forEach((U,k)=>{const[J,K]=V[_];o.fillText(U??"",r*J+L*K,k*(w+y*t))})}const f=Math.PI/180*Number(h),E=Math.max(l,s),[I,X,p]=W(E,E,t);I.translate(p/2,p/2),I.rotate(f),r>0&&d>0&&I.drawImage(P,-r/2,-d/2);function N(e,n){const c=e*Math.cos(f)-n*Math.sin(f),i=e*Math.sin(f)+n*Math.cos(f);return[c,i]}let x=0,S=0,M=0,b=0;const v=r/2,A=d/2;[[0-v,0-A],[0+v,0-A],[0+v,0+A],[0-v,0+A]].forEach(([e,n])=>{const[c,i]=N(e,n);x=Math.min(x,c),S=Math.max(S,c),M=Math.min(M,i),b=Math.max(b,i)});const Y=x+p/2,B=M+p/2,u=S-x,g=b-M,T=z*t,$=F*t,G=(u+T)*2,R=g+$,[O,j]=W(G,R);function H(e=0,n=0){O.drawImage(X,Y,B,u,g,e,n,u,g)}return H(),H(u+T,-g/2-$/2),H(u+T,+g/2+$/2),[j.toDataURL(),G/t,R/t]}return C}exports.FontGap=y;exports.default=Z;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const utils = require("@vft/utils");
+const FontGap = 3;
+const TEXT_ALIGN_RATIO_MAP = {
+  left: [0, 0.5],
+  start: [0, 0.5],
+  center: [0.5, 0],
+  right: [1, -0.5],
+  end: [1, -0.5]
+};
+function prepareCanvas(width, height, ratio = 1) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const realWidth = width * ratio;
+  const realHeight = height * ratio;
+  canvas.setAttribute("width", `${realWidth}px`);
+  canvas.setAttribute("height", `${realHeight}px`);
+  ctx.save();
+  return [ctx, canvas, realWidth, realHeight];
+}
+function useClips() {
+  function getClips(content, rotate, ratio, width, height, font, gapX, gapY, space) {
+    const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(
+      width,
+      height,
+      ratio
+    );
+    if (content instanceof HTMLImageElement) {
+      ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
+    } else {
+      const {
+        color,
+        fontSize,
+        fontStyle,
+        fontWeight,
+        fontFamily,
+        textAlign,
+        textBaseline
+      } = font;
+      const mergedFontSize = Number(fontSize) * ratio;
+      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      ctx.textAlign = textAlign;
+      ctx.textBaseline = textBaseline;
+      const contents = utils.isArray(content) ? content : [content];
+      contents?.forEach((item, index) => {
+        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign];
+        ctx.fillText(
+          item ?? "",
+          contentWidth * alignRatio + space * spaceRatio,
+          index * (mergedFontSize + FontGap * ratio)
+        );
+      });
+    }
+    const angle = Math.PI / 180 * Number(rotate);
+    const maxSize = Math.max(width, height);
+    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio);
+    rCtx.translate(realMaxSize / 2, realMaxSize / 2);
+    rCtx.rotate(angle);
+    if (contentWidth > 0 && contentHeight > 0) {
+      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+    }
+    function getRotatePos(x, y) {
+      const targetX = x * Math.cos(angle) - y * Math.sin(angle);
+      const targetY = x * Math.sin(angle) + y * Math.cos(angle);
+      return [targetX, targetY];
+    }
+    let left = 0;
+    let right = 0;
+    let top = 0;
+    let bottom = 0;
+    const halfWidth = contentWidth / 2;
+    const halfHeight = contentHeight / 2;
+    const points = [
+      [0 - halfWidth, 0 - halfHeight],
+      [0 + halfWidth, 0 - halfHeight],
+      [0 + halfWidth, 0 + halfHeight],
+      [0 - halfWidth, 0 + halfHeight]
+    ];
+    points.forEach(([x, y]) => {
+      const [targetX, targetY] = getRotatePos(x, y);
+      left = Math.min(left, targetX);
+      right = Math.max(right, targetX);
+      top = Math.min(top, targetY);
+      bottom = Math.max(bottom, targetY);
+    });
+    const cutLeft = left + realMaxSize / 2;
+    const cutTop = top + realMaxSize / 2;
+    const cutWidth = right - left;
+    const cutHeight = bottom - top;
+    const realGapX = gapX * ratio;
+    const realGapY = gapY * ratio;
+    const filledWidth = (cutWidth + realGapX) * 2;
+    const filledHeight = cutHeight + realGapY;
+    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight);
+    function drawImg(targetX = 0, targetY = 0) {
+      fCtx.drawImage(
+        rCanvas,
+        cutLeft,
+        cutTop,
+        cutWidth,
+        cutHeight,
+        targetX,
+        targetY,
+        cutWidth,
+        cutHeight
+      );
+    }
+    drawImg();
+    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
+    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
+    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio];
+  }
+  return getClips;
+}
+exports.FontGap = FontGap;
+exports.default = useClips;

package/lib/components/watermark/utils.cjs

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function o(e){return e.replace(/([A-Z])/g,"-$1").toLowerCase()}function i(e){return Object.keys(e).map(r=>`${o(r)}: ${e[r]};`).join(" ")}function n(){return window.devicePixelRatio||1}const a=(e,r)=>{let t=!1;return e.removedNodes.length&&r&&(t=Array.from(e.removedNodes).includes(r)),e.type==="attributes"&&e.target===r&&(t=!0),t};exports.getPixelRatio=n;exports.getStyleStr=i;exports.reRendering=a;exports.toLowercaseSeparator=o;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function toLowercaseSeparator(key) {
+  return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function getStyleStr(style) {
+  return Object.keys(style).map(
+    (key) => `${toLowercaseSeparator(key)}: ${style[key]};`
+  ).join(" ");
+}
+function getPixelRatio() {
+  return window.devicePixelRatio || 1;
+}
+const reRendering = (mutation, watermarkElement) => {
+  let flag = false;
+  if (mutation.removedNodes.length && watermarkElement) {
+    flag = Array.from(mutation.removedNodes).includes(watermarkElement);
+  }
+  if (mutation.type === "attributes" && mutation.target === watermarkElement) {
+    flag = true;
+  }
+  return flag;
+};
+exports.getPixelRatio = getPixelRatio;
+exports.getStyleStr = getStyleStr;
+exports.reRendering = reRendering;
+exports.toLowercaseSeparator = toLowercaseSeparator;

package/lib/components/watermark/watermark.cjs

@@ -1 +1,62 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const e=require("../../utils/vue/props/runtime.cjs"),r=e.buildProps({zIndex:{type:Number,default:9},rotate:{type:Number,default:-22},width:Number,height:Number,image:String,content:{type:e.definePropType([String,Array]),default:"Element Plus"},font:{type:e.definePropType(Object)},gap:{type:e.definePropType(Array),default:()=>[100,100]},offset:{type:e.definePropType(Array)}});exports.watermarkProps=r;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const runtime = require("../../utils/vue/props/runtime.cjs");
+const watermarkProps = runtime.buildProps({
+  /**
+   * @description The z-index of the appended watermark element
+   */
+  zIndex: {
+    type: Number,
+    default: 9
+  },
+  /**
+   * @description The rotation angle of the watermark
+   */
+  rotate: {
+    type: Number,
+    default: -22
+  },
+  /**
+   * @description The width of the watermark
+   */
+  width: Number,
+  /**
+   * @description The height of the watermark
+   */
+  height: Number,
+  /**
+   * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)
+   */
+  image: String,
+  /**
+   * @description Watermark text content
+   */
+  content: {
+    type: runtime.definePropType([String, Array]),
+    default: "Element Plus"
+  },
+  /**
+   * @description Text style
+   */
+  font: {
+    type: runtime.definePropType(Object)
+  },
+  /**
+   * @description The spacing between watermarks
+   */
+  gap: {
+    type: runtime.definePropType(Array),
+    default: () => [100, 100]
+  },
+  /**
+   * @description The offset of the watermark from the upper left corner of the container. The default is gap/2
+   */
+  offset: {
+    type: runtime.definePropType(Array)
+  }
+});
+exports.watermarkProps = watermarkProps;

package/lib/components/watermark/watermark.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./watermark.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const watermark_vue_vue_type_script_setup_true_lang = require("./watermark.vue2.cjs");
+exports.default = watermark_vue_vue_type_script_setup_true_lang.default;

package/lib/components/watermark/watermark.vue2.cjs

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

package/lib/constants/aria.cjs

@@ -1 +1,24 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={tab:"Tab",enter:"Enter",space:"Space",left:"ArrowLeft",up:"ArrowUp",right:"ArrowRight",down:"ArrowDown",esc:"Escape",delete:"Delete",backspace:"Backspace",numpadEnter:"NumpadEnter",pageUp:"PageUp",pageDown:"PageDown",home:"Home",end:"End"};exports.EVENT_CODE=e;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EVENT_CODE = {
+  tab: "Tab",
+  enter: "Enter",
+  space: "Space",
+  left: "ArrowLeft",
+  // 37
+  up: "ArrowUp",
+  // 38
+  right: "ArrowRight",
+  // 39
+  down: "ArrowDown",
+  // 40
+  esc: "Escape",
+  delete: "Delete",
+  backspace: "Backspace",
+  numpadEnter: "NumpadEnter",
+  pageUp: "PageUp",
+  pageDown: "PageDown",
+  home: "Home",
+  end: "End"
+};
+exports.EVENT_CODE = EVENT_CODE;

package/lib/constants/date.cjs

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["year","month","date","dates","week","datetime","datetimerange","daterange","monthrange"],t=["日","一","二","三","四","五","六"];exports.WEEK_DAYS=t;exports.datePickTypes=e;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const datePickTypes = [
+  "year",
+  "month",
+  "date",
+  "dates",
+  "week",
+  "datetime",
+  "datetimerange",
+  "daterange",
+  "monthrange"
+];
+const WEEK_DAYS = ["日", "一", "二", "三", "四", "五", "六"];
+exports.WEEK_DAYS = WEEK_DAYS;
+exports.datePickTypes = datePickTypes;

package/lib/constants/event.cjs

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="update:modelValue",e="change",t="input";exports.CHANGE_EVENT=e;exports.INPUT_EVENT=t;exports.UPDATE_MODEL_EVENT=E;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const UPDATE_MODEL_EVENT = "update:modelValue";
+const CHANGE_EVENT = "change";
+const INPUT_EVENT = "input";
+exports.CHANGE_EVENT = CHANGE_EVENT;
+exports.INPUT_EVENT = INPUT_EVENT;
+exports.UPDATE_MODEL_EVENT = UPDATE_MODEL_EVENT;

package/lib/constants/index.cjs

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./aria.cjs"),E=require("./date.cjs"),e=require("./event.cjs"),T=require("./key.cjs"),t=require("./size.cjs");exports.EVENT_CODE=o.EVENT_CODE;exports.WEEK_DAYS=E.WEEK_DAYS;exports.datePickTypes=E.datePickTypes;exports.CHANGE_EVENT=e.CHANGE_EVENT;exports.INPUT_EVENT=e.INPUT_EVENT;exports.UPDATE_MODEL_EVENT=e.UPDATE_MODEL_EVENT;exports.INSTALLED_KEY=T.INSTALLED_KEY;exports.componentSizeMap=t.componentSizeMap;exports.componentSizes=t.componentSizes;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const aria = require("./aria.cjs");
+const date = require("./date.cjs");
+const event = require("./event.cjs");
+const key = require("./key.cjs");
+const size = require("./size.cjs");
+exports.EVENT_CODE = aria.EVENT_CODE;
+exports.WEEK_DAYS = date.WEEK_DAYS;
+exports.datePickTypes = date.datePickTypes;
+exports.CHANGE_EVENT = event.CHANGE_EVENT;
+exports.INPUT_EVENT = event.INPUT_EVENT;
+exports.UPDATE_MODEL_EVENT = event.UPDATE_MODEL_EVENT;
+exports.INSTALLED_KEY = key.INSTALLED_KEY;
+exports.componentSizeMap = size.componentSizeMap;
+exports.componentSizes = size.componentSizes;

package/lib/constants/key.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Symbol("INSTALLED_KEY");exports.INSTALLED_KEY=e;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const INSTALLED_KEY = Symbol("INSTALLED_KEY");
+exports.INSTALLED_KEY = INSTALLED_KEY;

package/lib/constants/size.cjs

@@ -1 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["","default","small","large"],o={large:40,default:32,small:24};exports.componentSizeMap=o;exports.componentSizes=e;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const componentSizes = ["", "default", "small", "large"];
+const componentSizeMap = {
+  large: 40,
+  default: 32,
+  small: 24
+};
+exports.componentSizeMap = componentSizeMap;
+exports.componentSizes = componentSizes;

package/lib/defaults.cjs

@@ -1 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./component.cjs"),t=require("./make-installer.cjs"),l=require("./plugin.cjs"),r=t.makeInstaller([...e.default,...l.default]);exports.default=r;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const component = require("./component.cjs");
+const makeInstaller = require("./make-installer.cjs");
+const plugin = require("./plugin.cjs");
+const installer = makeInstaller.makeInstaller([...component.default, ...plugin.default]);
+exports.default = installer;