@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
246 lines (245 loc) • 8.34 kB
JavaScript
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, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
import { getStyle } from "@varlet/shared";
import { createNamespace } from "../utils/components.mjs";
import { props } from "./props.mjs";
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 } from "vue";
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 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
};