@varlet/ui 2.13.6 → 2.14.0

package/es/watermark/Watermark.mjs

@@ -0,0 +1,163 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { defineComponent, ref, watch, nextTick, onUnmounted, onMounted } from 'vue';
+import { createNamespace } from '../utils/components.mjs';
+import { props } from './props.mjs';
+import { getStyle } from '../utils/elements.mjs';
+var {
+  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";
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
+var _hoisted_1 = {
+  ref: "svgRef"
+};
+var _hoisted_2 = ["viewBox", "width", "height"];
+var _hoisted_3 = ["width", "height"];
+var _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(_extends({}, _ctx.font, {
+      fontSize: _ctx.font.fontSize + "px",
+      color: _ctx.textColor
+    }))
+  }, _toDisplayString(_ctx.content), 5 /* TEXT, STYLE */)])], 4 /* STYLE */)], 8 /* PROPS */, _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 /* STYLE, PROPS */, _hoisted_4)) : _createCommentVNode("v-if", true)], 12 /* STYLE, PROPS */, _hoisted_2))], 512 /* NEED_PATCH */), [[_vShow, false]])], 6 /* CLASS, STYLE */)], 8 /* PROPS */, ["disabled"]))], 2 /* CLASS */);
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarWatermark',
+  props,
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var watermarkUrl = ref('');
+    var imageUrl = ref('');
+    var textColor = ref('');
+    var svgRef = ref(null);
+    var containerRef = ref(null);
+    var showContent = () => {
+      if (slots.content) {
+        return true;
+      }
+      if (props.content && !props.image) {
+        return true;
+      }
+      return false;
+    };
+    var imageToBase64 = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* () {
+        return new Promise(resolve => {
+          var canvas = document.createElement('canvas');
+          var ctx = canvas.getContext('2d');
+          var img = new Image();
+          img.crossOrigin = 'anonymous';
+          img.referrerPolicy = 'no-referrer';
+          img.src = props.image;
+          img.onload = () => {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+            resolve(canvas.toDataURL());
+          };
+        });
+      });
+      return function imageToBase64() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var svgToBlobUrl = svgStr => {
+      var svgBlob = new Blob([svgStr], {
+        type: 'image/svg+xml'
+      });
+      return URL.createObjectURL(svgBlob);
+    };
+    var revokeWatermarkUrl = () => {
+      if (watermarkUrl.value) {
+        URL.revokeObjectURL(watermarkUrl.value);
+      }
+    };
+
+    // expose
+    var resize = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(function* () {
+        textColor.value = getStyle(containerRef.value).color;
+        if (props.image) {
+          imageUrl.value = yield imageToBase64();
+        }
+        yield nextTick();
+        revokeWatermarkUrl();
+        watermarkUrl.value = svgToBlobUrl(svgRef.value.innerHTML);
+      });
+      return function resize() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    watch(() => [props.image, props.font, props.content, props.height, props.width, props.rotate, props.gapX, props.gapY, props.offsetX, props.offsetY, props.opacity], resize, {
+      deep: true
+    });
+    onMounted(resize);
+    onUnmounted(revokeWatermarkUrl);
+    return {
+      n,
+      classes,
+      svgRef,
+      containerRef,
+      watermarkUrl,
+      imageUrl,
+      textColor,
+      showContent,
+      resize
+    };
+  }
+});
+__sfc__.render = __render__;
+export default __sfc__;

package/es/watermark/index.mjs

@@ -0,0 +1,5 @@
+import Watermark from './Watermark.mjs';
+import { withInstall } from '../utils/components.mjs';
+withInstall(Watermark);
+export var _WatermarkComponent = Watermark;
+export default Watermark;

package/es/watermark/props.mjs

@@ -0,0 +1,57 @@
+export var props = {
+  width: {
+    type: Number,
+    default: 100
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  content: {
+    type: String
+  },
+  image: {
+    type: 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: {
+    type: Boolean,
+    default: false
+  },
+  font: {
+    type: Object,
+    default: () => ({
+      fontStyle: 'normal',
+      fontVariant: 'normal',
+      fontWeight: 'normal',
+      fontSize: 14
+    })
+  }
+};

package/es/watermark/style/index.mjs

@@ -0,0 +1,2 @@
+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.13.6",
+  "version": "2.14.0",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3150,7 +3150,20 @@
               "description": "The callback function when long pressing an image, the callback parameter is the current index"
             }
           ],
-          "slots": []
+          "slots": [
+            {
+              "name": "indicator",
+              "description": "Paging indicator"
+            },
+            {
+              "name": "close-icon",
+              "description": "Close button"
+            },
+            {
+              "name": "extra",
+              "description": "Extra slots"
+            }
+          ]
         },
         {
           "name": "var-index-anchor",
@@ -6886,6 +6899,135 @@
               "description": "Extra message"
             }
           ]
+        },
+        {
+          "name": "var-watermark",
+          "attributes": [
+            {
+              "name": "width",
+              "description": "Watermark width",
+              "default": "100",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "height",
+              "description": "Watermark height",
+              "default": "100",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "content",
+              "description": "Watermark text content",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "image",
+              "description": "The path of the image watermark has a higher priority than `content`",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "rotate",
+              "description": "Watermark rotation angle",
+              "default": "-22",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "offset-x",
+              "description": "Offset of the watermark from the container's x-axis",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "offset-y",
+              "description": "Offset of the watermark from the container's y-axis",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "gap-x",
+              "description": "Spacing in the horizontal direction of the watermark",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "gap-y",
+              "description": "Spacing in the vertical direction of the watermark",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "z-index",
+              "description": "Watermark z-index",
+              "default": "10",
+              "value": {
+                "type": "number | string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "opacity",
+              "description": "Watermark opacity",
+              "default": "0.5",
+              "value": {
+                "type": "number | string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "fullscreen",
+              "description": "Whether to display watermark in fullscreen mode",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "font",
+              "description": "Watermark text style",
+              "default": "-",
+              "value": {
+                "type": "WatermarkFont",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "content",
+              "description": "The content of HTML `Watermark`. only supports inline styles, does not support passing in self closing tags, priority higher than `content` or `image` attributes"
+            }
+          ]
         }
       ],
       "types-syntax": "typescript"

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.13.6",
+  "version": "2.14.0",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -7235,6 +7235,135 @@
               "description": "附加信息"
             }
           ]
+        },
+        {
+          "name": "var-watermark",
+          "attributes": [
+            {
+              "name": "width",
+              "description": "水印的宽度",
+              "default": "100",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "height",
+              "description": "水印的高度",
+              "default": "100",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "content",
+              "description": "文字水印的内容",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "image",
+              "description": "图片水印的路径，优先级比 `content` 高",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "rotate",
+              "description": "水印的旋转角度",
+              "default": "-22",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "offset-x",
+              "description": "水印距离容器x轴的偏移量",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "offset-y",
+              "description": "水印距离容器y轴的偏移量",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "gap-x",
+              "description": "水印水平方向的间距",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "gap-y",
+              "description": "水印垂直方向的间距",
+              "default": "0",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "z-index",
+              "description": "水印的z-index",
+              "default": "10",
+              "value": {
+                "type": "number | string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "opacity",
+              "description": "水印的透明度",
+              "default": "0.5",
+              "value": {
+                "type": "number | string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "fullscreen",
+              "description": "水印是否全屏显示",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "font",
+              "description": "文字水印的字体样式",
+              "default": "WatermarkFont",
+              "value": {
+                "type": "WatermarkFont",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "content",
+              "description": "`Watermark` 内容，仅支持行内样式，不支持传入自闭合标签，优先级高于 `content` 或 `image` 属性"
+            }
+          ]
         }
       ],
       "types-syntax": "typescript"