@varlet/ui 2.20.1 → 2.20.2

package/es/utils/test.mjs

@@ -0,0 +1,281 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { nextTick } from "vue";
+import { config } from "@vue/test-utils";
+import { isPlainObject, getStyle } from "@varlet/shared";
+const delay = (time) => new Promise((resolve) => {
+  setTimeout(resolve, time);
+});
+function getTouch(el, x, y) {
+  return {
+    identifier: Date.now(),
+    target: el,
+    pageX: x,
+    pageY: y,
+    clientX: x,
+    clientY: y,
+    radiusX: 2.5,
+    radiusY: 2.5,
+    rotationAngle: 10,
+    force: 0.5
+  };
+}
+function mockDoubleRaf() {
+  const originMethod = window.requestAnimationFrame;
+  Object.assign(window, {
+    requestAnimationFrame(fn) {
+      setTimeout(fn, 16);
+    }
+  });
+  return {
+    mockRestore() {
+      window.requestAnimationFrame = originMethod;
+    }
+  };
+}
+function trigger(wrapper, eventName, x = 0, y = 0, offsetX = 0, offsetY = 0) {
+  const el = "element" in wrapper ? wrapper.element : wrapper;
+  const touchList = [getTouch(el, x, y)];
+  const event = new CustomEvent(eventName, { bubbles: true, cancelable: true, detail: {} });
+  Object.assign(event, {
+    clientX: x,
+    clientY: y,
+    offsetX,
+    offsetY,
+    touches: touchList,
+    targetTouches: touchList,
+    changedTouches: touchList
+  });
+  el.dispatchEvent(event);
+  return nextTick();
+}
+function mockOffset({
+  offsetWidth,
+  offsetHeight,
+  clientWidth,
+  clientHeight,
+  offsetLeft,
+  offsetTop
+} = {}) {
+  Object.defineProperties(HTMLElement.prototype, {
+    offsetWidth: {
+      get() {
+        return offsetWidth != null ? offsetWidth : parseFloat(getStyle(this).width) || 0;
+      }
+    },
+    offsetHeight: {
+      get() {
+        return offsetHeight != null ? offsetHeight : parseFloat(getStyle(this).height) || 0;
+      }
+    },
+    clientWidth: {
+      get() {
+        return clientWidth != null ? clientWidth : parseFloat(getStyle(this).width) || 0;
+      }
+    },
+    clientHeight: {
+      get() {
+        return clientHeight != null ? clientHeight : parseFloat(getStyle(this).height) || 0;
+      }
+    },
+    offsetLeft: {
+      get() {
+        return offsetLeft != null ? offsetLeft : parseFloat(getStyle(this).marginLeft) || 0;
+      }
+    },
+    offsetTop: {
+      get() {
+        return offsetTop != null ? offsetTop : parseFloat(getStyle(this).marginTop) || 0;
+      }
+    },
+    offsetParent: {
+      get() {
+        var _a;
+        return (_a = this.parentNode) != null ? _a : {};
+      }
+    }
+  });
+}
+function mockImageNaturalSize(naturalWidth, naturalHeight) {
+  Object.defineProperties(HTMLImageElement.prototype, {
+    naturalWidth: {
+      get() {
+        return naturalWidth;
+      }
+    },
+    naturalHeight: {
+      get() {
+        return naturalHeight;
+      }
+    }
+  });
+}
+function triggerDrag(el, x = 0, y = 0) {
+  return __async(this, null, function* () {
+    yield trigger(el, "touchstart", 0, 0);
+    yield trigger(el, "touchmove", x / 4, y / 4);
+    yield trigger(el, "touchmove", x / 3, y / 3);
+    yield trigger(el, "touchmove", x / 2, y / 2);
+    yield trigger(el, "touchmove", x, y);
+    yield trigger(el, "touchend", x, y);
+  });
+}
+function mockTranslate() {
+  const originMethod = window.getComputedStyle;
+  const XRE = /translateX\((-?\d+)px\)/;
+  const YRE = /translateY\(-?(\d+)px\)/;
+  Object.assign(window, {
+    getComputedStyle: (el) => {
+      var _a, _b, _c, _d;
+      const styles = originMethod.call(window, el);
+      const x = (_b = (_a = el.style.transform.match(XRE)) == null ? void 0 : _a[1]) != null ? _b : 0;
+      const y = (_d = (_c = el.style.transform.match(YRE)) == null ? void 0 : _c[1]) != null ? _d : 0;
+      styles.transform = `matrix(1, 0, 0, 1, ${x}, ${y})`;
+      return styles;
+    }
+  });
+  return {
+    mockRestore() {
+      window.getComputedStyle = originMethod;
+    }
+  };
+}
+function mockFileReader(url) {
+  const originMethod = window.FileReader;
+  class FileReader {
+    constructor() {
+      __publicField(this, "result", "");
+    }
+    onload() {
+    }
+    readAsDataURL() {
+      this.result = url;
+      this.onload();
+    }
+  }
+  Object.assign(window, {
+    FileReader
+  });
+  return {
+    mockRestore() {
+      window.FileReader = originMethod;
+    }
+  };
+}
+function mockStubs() {
+  const originStubs = config.global.stubs;
+  config.global.stubs = {};
+  return {
+    mockRestore() {
+      config.global.stubs = originStubs;
+    }
+  };
+}
+function mockConsole(method, fn = () => {
+}) {
+  const originMethod = console[method];
+  console[method] = fn;
+  return {
+    mockRestore() {
+      console[method] = originMethod;
+    }
+  };
+}
+function mockScrollTo() {
+  Object.assign(window, { scrollTo() {
+  } });
+  Object.defineProperty(Element.prototype, "scrollTo", {
+    value(x, y) {
+      if (isPlainObject(x)) {
+        this.scrollLeft = x.left;
+        this.scrollTop = x.top;
+      } else {
+        this.scrollLeft = x;
+        this.scrollTop = y;
+      }
+    }
+  });
+}
+function mockScrollIntoView() {
+  Object.defineProperty(Element.prototype, "scrollIntoView", {
+    value() {
+    }
+  });
+}
+function mockUserAgent(userAgent) {
+  const originUserAgent = navigator.userAgent;
+  Object.defineProperty(window.navigator, "userAgent", {
+    configurable: true,
+    get() {
+      return userAgent;
+    }
+  });
+  return {
+    restore() {
+      Object.defineProperty(window.navigator, "userAgent", {
+        configurable: true,
+        get() {
+          return originUserAgent;
+        }
+      });
+    }
+  };
+}
+function mockCanvas() {
+  Object.defineProperties(HTMLCanvasElement.prototype, {
+    getContext: {
+      value() {
+        return {
+          drawImage() {
+          }
+        };
+      }
+    },
+    toDataURL: {
+      value() {
+        return "mock data url";
+      }
+    }
+  });
+}
+export {
+  delay,
+  getTouch,
+  mockCanvas,
+  mockConsole,
+  mockDoubleRaf,
+  mockFileReader,
+  mockImageNaturalSize,
+  mockOffset,
+  mockScrollIntoView,
+  mockScrollTo,
+  mockStubs,
+  mockTranslate,
+  mockUserAgent,
+  trigger,
+  triggerDrag
+};

package/es/varlet.esm.js

@@ -19239,7 +19239,7 @@ ie(li);
 ue(li, yp);
 const O6 = li;
 var Wl = li;
-const GE = "2.20.1";
+const GE = "2.20.2";
 function XE(e) {
   Si.install && e.use(Si), ki.install && e.use(ki), Ti.install && e.use(Ti), Ei.install && e.use(Ei), Ii.install && e.use(Ii), gr.install && e.use(gr), Bi.install && e.use(Bi), Di.install && e.use(Di), Mi.install && e.use(Mi), Ni.install && e.use(Ni), mn.install && e.use(mn), Vi.install && e.use(Vi), Ai.install && e.use(Ai), br.install && e.use(br), Oo.install && e.use(Oo), zi.install && e.use(zi), yr.install && e.use(yr), Li.install && e.use(Li), Ri.install && e.use(Ri), Ui.install && e.use(Ui), kn.install && e.use(kn), ji.install && e.use(ji), Zi.install && e.use(Zi), Qi.install && e.use(Qi), _i.install && e.use(_i), xi.install && e.use(xi), Pr.install && e.use(Pr), tl.install && e.use(tl), ol.install && e.use(ol), Bo.install && e.use(Bo), rl.install && e.use(rl), al.install && e.use(al), $n.install && e.use($n), On.install && e.use(On), Bn.install && e.use(Bn), He.install && e.use(He), il.install && e.use(il), No.install && e.use(No), ll.install && e.use(ll), sl.install && e.use(sl), Tr.install && e.use(Tr), Po.install && e.use(Po), ul.install && e.use(ul), dl.install && e.use(dl), Kt.install && e.use(Kt), cl.install && e.use(cl), Ci.install && e.use(Ci), eo.install && e.use(eo), fl.install && e.use(fl), vl.install && e.use(vl), ml.install && e.use(ml), pl.install && e.use(pl), hl.install && e.use(hl), gl.install && e.use(gl), bl.install && e.use(bl), gt.install && e.use(gt), yl.install && e.use(yl), $l.install && e.use($l), wl.install && e.use(wl), Cl.install && e.use(Cl), Sl.install && e.use(Sl), kl.install && e.use(kl), Qe.install && e.use(Qe), Pl.install && e.use(Pl), Ol.install && e.use(Ol), Tl.install && e.use(Tl), El.install && e.use(El), Bl.install && e.use(Bl), Dl.install && e.use(Dl), Ml.install && e.use(Ml), Nl.install && e.use(Nl), Qt.install && e.use(Qt), Vl.install && e.use(Vl), Do.install && e.use(Do), Mo.install && e.use(Mo), Al.install && e.use(Al), zl.install && e.use(zl), Ll.install && e.use(Ll), Rl.install && e.use(Rl), Ul.install && e.use(Ul), Hl.install && e.use(Hl), Fl.install && e.use(Fl), Yl.install && e.use(Yl), Or.install && e.use(Or), jl.install && e.use(jl), Wl.install && e.use(Wl);
 }

package/es/watermark/Watermark.mjs

@@ -0,0 +1,248 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { defineComponent, ref, watch, nextTick, onUnmounted, onMounted } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { getStyle } from "@varlet/shared";
+const { name, n, classes } = createNamespace("watermark");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, vShow as _vShow, withDirectives as _withDirectives, normalizeClass as _normalizeClass, Teleport as _Teleport, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = { ref: "svgRef" };
+const _hoisted_2 = ["viewBox", "width", "height"];
+const _hoisted_3 = ["width", "height"];
+const _hoisted_4 = ["href", "xlink:href", "x", "y", "width", "height"];
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _renderSlot(_ctx.$slots, "default"),
+      (_openBlock(), _createBlock(_Teleport, {
+        to: "body",
+        disabled: !_ctx.fullscreen
+      }, [
+        _createElementVNode(
+          "div",
+          {
+            ref: "containerRef",
+            class: _normalizeClass(_ctx.classes(_ctx.n("container"), [_ctx.fullscreen, _ctx.n("--fullscreen")])),
+            style: _normalizeStyle({
+              backgroundImage: `url(${_ctx.watermarkUrl})`,
+              zIndex: _ctx.zIndex
+            })
+          },
+          [
+            _withDirectives(_createElementVNode(
+              "div",
+              _hoisted_1,
+              [
+                (_openBlock(), _createElementBlock("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  "xmlns:xlink": "http://www.w3.org/1999/xlink",
+                  viewBox: `0 0 ${_ctx.width + _ctx.gapX} ${_ctx.height + _ctx.gapY}`,
+                  width: `${_ctx.width + _ctx.gapX}`,
+                  height: `${_ctx.height + _ctx.gapY}`,
+                  style: _normalizeStyle({
+                    padding: `0 ${_ctx.gapX}px ${_ctx.gapY}px 0`,
+                    opacity: _ctx.opacity
+                  })
+                }, [
+                  _ctx.showContent() ? (_openBlock(), _createElementBlock("foreignObject", {
+                    key: 0,
+                    x: "0",
+                    y: "0",
+                    width: _ctx.width,
+                    height: _ctx.height
+                  }, [
+                    _createElementVNode(
+                      "div",
+                      {
+                        xmlns: "http://www.w3.org/1999/xhtml",
+                        style: _normalizeStyle({
+                          transform: `translate(${_ctx.offsetX}px, ${_ctx.offsetY}px) rotate(${_ctx.rotate}deg)`,
+                          transformOrigin: "center"
+                        })
+                      },
+                      [
+                        _renderSlot(_ctx.$slots, "content", {}, () => [
+                          _createElementVNode(
+                            "span",
+                            {
+                              style: _normalizeStyle(__spreadProps(__spreadValues({}, _ctx.font), { fontSize: `${_ctx.font.fontSize}px`, color: _ctx.textColor }))
+                            },
+                            _toDisplayString(_ctx.content),
+                            5
+                            /* TEXT, STYLE */
+                          )
+                        ])
+                      ],
+                      4
+                      /* STYLE */
+                    )
+                  ], 8, _hoisted_3)) : _createCommentVNode("v-if", true),
+                  !_ctx.$slots.content && _ctx.image ? (_openBlock(), _createElementBlock("image", {
+                    key: 1,
+                    href: _ctx.imageUrl,
+                    "xlink:href": _ctx.imageUrl,
+                    x: _ctx.offsetX,
+                    y: _ctx.offsetY,
+                    width: _ctx.width,
+                    height: _ctx.height,
+                    style: _normalizeStyle({
+                      transform: `rotate(${_ctx.rotate}deg)`,
+                      transformOrigin: "center"
+                    })
+                  }, null, 12, _hoisted_4)) : _createCommentVNode("v-if", true)
+                ], 12, _hoisted_2))
+              ],
+              512
+              /* NEED_PATCH */
+            ), [
+              [_vShow, false]
+            ])
+          ],
+          6
+          /* CLASS, STYLE */
+        )
+      ], 8, ["disabled"]))
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2, { slots }) {
+    const watermarkUrl = ref("");
+    const imageUrl = ref("");
+    const textColor = ref("");
+    const svgRef = ref(null);
+    const containerRef = ref(null);
+    watch(
+      () => [
+        props2.image,
+        props2.font,
+        props2.content,
+        props2.height,
+        props2.width,
+        props2.rotate,
+        props2.gapX,
+        props2.gapY,
+        props2.offsetX,
+        props2.offsetY,
+        props2.opacity
+      ],
+      resize,
+      {
+        deep: true
+      }
+    );
+    onMounted(resize);
+    onUnmounted(revokeWatermarkUrl);
+    function showContent() {
+      if (slots.content) {
+        return true;
+      }
+      if (props2.content && !props2.image) {
+        return true;
+      }
+      return false;
+    }
+    function imageToBase64() {
+      return __async(this, null, function* () {
+        return new Promise((resolve) => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.referrerPolicy = "no-referrer";
+          img.src = props2.image;
+          img.onload = () => {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+            resolve(canvas.toDataURL());
+          };
+        });
+      });
+    }
+    function svgToBlobUrl(svgStr) {
+      const svgBlob = new Blob([svgStr], {
+        type: "image/svg+xml"
+      });
+      return URL.createObjectURL(svgBlob);
+    }
+    function revokeWatermarkUrl() {
+      if (watermarkUrl.value) {
+        URL.revokeObjectURL(watermarkUrl.value);
+      }
+    }
+    function resize() {
+      return __async(this, null, function* () {
+        textColor.value = getStyle(containerRef.value).color;
+        if (props2.image) {
+          imageUrl.value = yield imageToBase64();
+        }
+        yield nextTick();
+        revokeWatermarkUrl();
+        watermarkUrl.value = svgToBlobUrl(svgRef.value.innerHTML);
+      });
+    }
+    return {
+      svgRef,
+      containerRef,
+      watermarkUrl,
+      imageUrl,
+      textColor,
+      n,
+      classes,
+      showContent,
+      resize
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/watermark/index.mjs

@@ -0,0 +1,12 @@
+import Watermark from "./Watermark.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as watermarkProps } from "./props.mjs";
+withInstall(Watermark);
+withPropsDefaultsSetter(Watermark, watermarkProps);
+const _WatermarkComponent = Watermark;
+var stdin_default = Watermark;
+export {
+  _WatermarkComponent,
+  stdin_default as default,
+  watermarkProps
+};

package/es/watermark/props.mjs

@@ -0,0 +1,53 @@
+const props = {
+  width: {
+    type: Number,
+    default: 100
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  content: String,
+  image: String,
+  rotate: {
+    type: Number,
+    default: -22
+  },
+  offsetX: {
+    type: Number,
+    default: 0
+  },
+  offsetY: {
+    type: Number,
+    default: 0
+  },
+  gapX: {
+    type: Number,
+    default: 0
+  },
+  gapY: {
+    type: Number,
+    default: 0
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 10
+  },
+  opacity: {
+    type: [Number, String],
+    default: 0.5
+  },
+  fullscreen: Boolean,
+  font: {
+    type: Object,
+    default: () => ({
+      fontStyle: "normal",
+      fontVariant: "normal",
+      fontWeight: "normal",
+      fontSize: 14
+    })
+  }
+};
+export {
+  props
+};

package/es/watermark/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../watermark.css'
+import '../WatermarkSfc.css'

package/es/watermark/watermark.css

@@ -0,0 +1 @@
+:root { --watermark-content-color: #808080;}.var-watermark { position: relative;}.var-watermark__container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background-repeat: repeat; color: var(--watermark-content-color);}.var-watermark--fullscreen { position: fixed;}

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "name": "VARLET",
   "contributions": {
     "html": {

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/varlet.cjs.js

@@ -25056,9 +25056,9 @@ const skeleton = "";
 const SkeletonSfc = "";
 const slider = "";
 const SliderSfc = "";
-const SnackbarSfc = "";
 const snackbar = "";
 const coreSfc = "";
+const SnackbarSfc = "";
 const space = "";
 const step = "";
 const StepSfc = "";
@@ -25085,7 +25085,7 @@ const uploader = "";
 const UploaderSfc = "";
 const watermark = "";
 const WatermarkSfc = "";
-const version = "2.20.1";
+const version = "2.20.2";
 function install(app) {
   stdin_default$3k.install && app.use(stdin_default$3k);
   stdin_default$3i.install && app.use(stdin_default$3i);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/shared": "2.20.1",
-    "@varlet/use": "2.20.1",
-    "@varlet/icons": "2.20.1"
+    "@varlet/shared": "2.20.2",
+    "@varlet/icons": "2.20.2",
+    "@varlet/use": "2.20.2"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.4",
@@ -66,9 +66,9 @@
     "typescript": "^5.1.5",
     "vue": "3.3.4",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.20.1",
-    "@varlet/ui": "2.20.1",
-    "@varlet/touch-emulator": "2.20.1"
+    "@varlet/ui": "2.20.2",
+    "@varlet/touch-emulator": "2.20.2",
+    "@varlet/cli": "2.20.2"
   },
   "scripts": {
     "dev": "varlet-cli dev",