naive-ui 2.34.4 → 2.36.0

package/lib/upload/src/Upload.js

@@ -167,7 +167,9 @@ function submitImpl(inst, fieldName, file, { method, action, withCredentials, re
     request.withCredentials = withCredentials;
     const formData = new FormData();
     appendData(formData, data, file);
-    formData.append(fieldName, file.file);
+    if (file.file !== null) {
+        formData.append(fieldName, file.file);
+    }
     registerHandler(inst, file, request);
     if (action !== undefined) {
         request.open(method.toUpperCase(), action);
@@ -199,7 +201,7 @@ exports.uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     onDownload: Function, defaultUpload: {
         type: Boolean,
         default: true
-    }, fileList: Array, 'onUpdate:fileList': [Function, Array], onUpdateFileList: [Function, Array], fileListStyle: [String, Object], defaultFileList: {
+    }, fileList: Array, 'onUpdate:fileList': [Function, Array], onUpdateFileList: [Function, Array], fileListClass: String, fileListStyle: [String, Object], defaultFileList: {
         type: Array,
         default: () => []
     }, showCancelButton: {
@@ -227,7 +229,7 @@ exports.uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, createThumbnailUrl: Function, abstract: Boolean, max: Number, showTrigger: {
         type: Boolean,
         default: true
-    }, imageGroupProps: Object, inputProps: Object, triggerStyle: [String, Object], renderIcon: Object });
+    }, imageGroupProps: Object, inputProps: Object, triggerClass: String, triggerStyle: [String, Object], renderIcon: Function });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Upload',
     props: exports.uploadProps,
@@ -326,6 +328,7 @@ exports.default = (0, vue_1.defineComponent)({
                 .then((fileInfos) => __awaiter(this, void 0, void 0, function* () {
                 let nextTickChain = Promise.resolve();
                 fileInfos.forEach((fileInfo) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     nextTickChain = nextTickChain.then(vue_1.nextTick).then(() => {
                         fileInfo &&
                             doChange(fileInfo, e, {
@@ -466,6 +469,7 @@ exports.default = (0, vue_1.defineComponent)({
             onRemoveRef: (0, vue_1.toRef)(props, 'onRemove'),
             onDownloadRef: (0, vue_1.toRef)(props, 'onDownload'),
             mergedFileListRef,
+            triggerClassRef: (0, vue_1.toRef)(props, 'triggerClass'),
             triggerStyleRef: (0, vue_1.toRef)(props, 'triggerStyle'),
             shouldUseThumbnailUrlRef: (0, vue_1.toRef)(props, 'shouldUseThumbnailUrl'),
             renderIconRef: (0, vue_1.toRef)(props, 'renderIcon'),
@@ -482,6 +486,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleFileAddition,
             mergedDisabledRef: formItem.mergedDisabledRef,
             maxReachedRef,
+            fileListClassRef: (0, vue_1.toRef)(props, 'fileListClass'),
             fileListStyleRef: (0, vue_1.toRef)(props, 'fileListStyle'),
             abstractRef: (0, vue_1.toRef)(props, 'abstract'),
             acceptRef: (0, vue_1.toRef)(props, 'accept'),

package/lib/upload/src/UploadDragger.d.ts

@@ -1,3 +1,3 @@
 export declare const uploadDraggerKey = "__UPLOAD_DRAGGER__";
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/upload/src/UploadFile.d.ts

@@ -379,7 +379,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
-    progressStatus: import("vue").ComputedRef<"error" | "info" | "success">;
+    progressStatus: import("vue").ComputedRef<"info" | "success" | "error">;
     buttonType: import("vue").ComputedRef<"error" | undefined>;
     showProgress: import("vue").ComputedRef<boolean>;
     disabled: import("vue").Ref<boolean>;
@@ -411,5 +411,5 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ListType>;
         required: true;
     };
-}>>, {}>;
+}>>, {}, {}>;
 export default _default;

package/lib/upload/src/UploadFileList.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/lib/upload/src/UploadFileList.js

@@ -17,7 +17,7 @@ exports.default = (0, vue_1.defineComponent)({
         if (!NUpload) {
             (0, _utils_1.throwError)('upload-file-list', '`n-upload-file-list` must be placed inside `n-upload`.');
         }
-        const { abstractRef, mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, themeClassRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = NUpload;
+        const { abstractRef, mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListClassRef, fileListStyleRef, cssVarsRef, themeClassRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = NUpload;
         const isImageCardTypeRef = (0, vue_1.computed)(() => listTypeRef.value === 'image-card');
         const renderFileList = () => mergedFileListRef.value.map((file) => ((0, vue_1.h)(UploadFile_1.default, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value })));
         const renderUploadFileList = () => isImageCardTypeRef.value ? ((0, vue_1.h)(image_1.NImageGroup, Object.assign({}, imageGroupPropsRef.value), { default: renderFileList })) : ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, { group: true }, {
@@ -30,7 +30,8 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-upload-file-list`,
                     isImageCardTypeRef.value &&
                         `${mergedClsPrefix}-upload-file-list--grid`,
-                    abstract ? themeClassRef === null || themeClassRef === void 0 ? void 0 : themeClassRef.value : undefined
+                    abstract ? themeClassRef === null || themeClassRef === void 0 ? void 0 : themeClassRef.value : undefined,
+                    fileListClassRef.value
                 ], style: [
                     abstract && cssVarsRef ? cssVarsRef.value : '',
                     fileListStyleRef.value

package/lib/upload/src/UploadProgress.d.ts

@@ -387,5 +387,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     show: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/upload/src/UploadTrigger.d.ts

@@ -6,5 +6,5 @@ declare const _default: import("vue").DefineComponent<{
     abstract: BooleanConstructor;
 }>>, {
     abstract: boolean;
-}>;
+}, {}>;
 export default _default;

package/lib/upload/src/UploadTrigger.js

@@ -20,7 +20,7 @@ exports.default = (0, vue_1.defineComponent)({
         if (!NUpload) {
             (0, _utils_1.throwError)('upload-trigger', '`n-upload-trigger` must be placed inside `n-upload`.');
         }
-        const { mergedClsPrefixRef, mergedDisabledRef, maxReachedRef, listTypeRef, dragOverRef, openOpenFileDialog, draggerInsideRef, handleFileAddition, mergedDirectoryDndRef, triggerStyleRef } = NUpload;
+        const { mergedClsPrefixRef, mergedDisabledRef, maxReachedRef, listTypeRef, dragOverRef, openOpenFileDialog, draggerInsideRef, handleFileAddition, mergedDirectoryDndRef, triggerClassRef, triggerStyleRef } = NUpload;
         const isImageCardTypeRef = (0, vue_1.computed)(() => listTypeRef.value === 'image-card');
         function handleTriggerClick() {
             if (mergedDisabledRef.value || maxReachedRef.value)
@@ -76,7 +76,8 @@ exports.default = (0, vue_1.defineComponent)({
                     (mergedDisabledRef.value || maxReachedRef.value) &&
                         `${mergedClsPrefix}-upload-trigger--disabled`,
                     isImageCardTypeRef.value &&
-                        `${mergedClsPrefix}-upload-trigger--image-card`
+                        `${mergedClsPrefix}-upload-trigger--image-card`,
+                    triggerClassRef.value
                 ], style: triggerStyleRef.value, onClick: handleTriggerClick, onDrop: handleTriggerDrop, onDragover: handleTriggerDragOver, onDragenter: handleTriggerDragEnter, onDragleave: handleTriggerDragLeave }, isImageCardTypeRef.value ? ((0, vue_1.h)(UploadDragger_1.default, null, {
                 default: () => (0, _utils_1.resolveSlot)(slots.default, () => [
                     (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) })

package/lib/upload/src/interface.d.ts

@@ -16,9 +16,9 @@ export interface FileInfo {
 }
 export type SettledFileInfo = Required<FileInfo>;
 export type ShouldUseThumbnailUrl = (file: SettledFileInfo) => boolean;
-export type FuncOrRecordOrUndef = Record<string, string> | (({ file }: {
+export type FuncOrRecordOrUndef<T = string> = Record<string, T> | (({ file }: {
     file: SettledFileInfo;
-}) => Record<string, string>) | undefined;
+}) => Record<string, T>) | undefined;
 export type OnChange = (data: {
     file: SettledFileInfo;
     fileList: SettledFileInfo[];
@@ -65,6 +65,7 @@ export interface UploadInjection {
     draggerInsideRef: {
         value: boolean;
     };
+    fileListClassRef: Ref<string | undefined>;
     fileListStyleRef: Ref<string | CSSProperties | undefined>;
     mergedDisabledRef: Ref<boolean>;
     maxReachedRef: Ref<boolean>;
@@ -74,6 +75,7 @@ export interface UploadInjection {
     themeClassRef: undefined | Ref<string>;
     mergedDirectoryDndRef: Ref<boolean>;
     acceptRef: Ref<string | undefined>;
+    triggerClassRef: Ref<string | undefined>;
     triggerStyleRef: Ref<CSSProperties | string | undefined>;
     doChange: DoChange;
     onRender: undefined | (() => void);
@@ -107,7 +109,7 @@ export interface CustomRequestOptions {
     file: SettledFileInfo;
     action?: string;
     withCredentials?: boolean;
-    data?: FuncOrRecordOrUndef;
+    data?: FuncOrRecordOrUndef<string | Blob>;
     headers?: FuncOrRecordOrUndef;
     onProgress: (e: {
         percent: number;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.34.4";
+declare const _default: "2.36.0";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.34.4';
+exports.default = '2.36.0';

package/lib/virtual-list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NVirtualList, virtualListProps } from './src/VirtualList';
+export type { VirtualListProps, VirtualListInst } from './src/VirtualList';

package/lib/virtual-list/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.virtualListProps = exports.NVirtualList = void 0;
+var VirtualList_1 = require("./src/VirtualList");
+Object.defineProperty(exports, "NVirtualList", { enumerable: true, get: function () { return __importDefault(VirtualList_1).default; } });
+Object.defineProperty(exports, "virtualListProps", { enumerable: true, get: function () { return VirtualList_1.virtualListProps; } });

package/lib/virtual-list/src/VirtualList.d.ts

@@ -0,0 +1,146 @@
+import { type PropType, type CSSProperties } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+import { type ScrollbarProps } from '../../scrollbar/src/Scrollbar';
+import { type VScrollToOptions, type ItemData } from 'vueuc/lib/virtual-list/src/type';
+export { type VirtualListInst } from 'vueuc';
+export declare const virtualListProps: {
+    readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly items: {
+        readonly type: PropType<ItemData[]>;
+        readonly default: () => never[];
+    };
+    readonly itemSize: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly itemResizable: BooleanConstructor;
+    readonly itemsStyle: PropType<string | CSSProperties>;
+    readonly visibleItemsTag: {
+        readonly type: PropType<string | object>;
+        readonly default: "div";
+    };
+    readonly visibleItemsProps: ObjectConstructor;
+    readonly ignoreItemResize: BooleanConstructor;
+    readonly onScroll: PropType<(event: Event) => void>;
+    readonly onWheel: PropType<(event: WheelEvent) => void>;
+    readonly onResize: PropType<(entry: ResizeObserverEntry) => void>;
+    readonly defaultScrollKey: PropType<string | number>;
+    readonly defaultScrollIndex: NumberConstructor;
+    readonly keyField: {
+        readonly type: StringConstructor;
+        readonly default: "key";
+    };
+    readonly paddingTop: {
+        readonly type: PropType<string | number>;
+        readonly default: 0;
+    };
+    readonly paddingBottom: {
+        readonly type: PropType<string | number>;
+        readonly default: 0;
+    };
+};
+export type VirtualListProps = ExtractPublicPropTypes<typeof virtualListProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly items: {
+        readonly type: PropType<ItemData[]>;
+        readonly default: () => never[];
+    };
+    readonly itemSize: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly itemResizable: BooleanConstructor;
+    readonly itemsStyle: PropType<string | CSSProperties>;
+    readonly visibleItemsTag: {
+        readonly type: PropType<string | object>;
+        readonly default: "div";
+    };
+    readonly visibleItemsProps: ObjectConstructor;
+    readonly ignoreItemResize: BooleanConstructor;
+    readonly onScroll: PropType<(event: Event) => void>;
+    readonly onWheel: PropType<(event: WheelEvent) => void>;
+    readonly onResize: PropType<(entry: ResizeObserverEntry) => void>;
+    readonly defaultScrollKey: PropType<string | number>;
+    readonly defaultScrollIndex: NumberConstructor;
+    readonly keyField: {
+        readonly type: StringConstructor;
+        readonly default: "key";
+    };
+    readonly paddingTop: {
+        readonly type: PropType<string | number>;
+        readonly default: 0;
+    };
+    readonly paddingBottom: {
+        readonly type: PropType<string | number>;
+        readonly default: 0;
+    };
+}, {
+    scrollTo: (options: VScrollToOptions | number, y?: number) => void;
+    scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/scrollbar/src/Scrollbar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/Scrollbar").ScrollBy;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
+    } | null>;
+    virtualListInstRef: import("vue").Ref<{
+        listElRef: HTMLElement;
+        itemsElRef: HTMLElement | null;
+        scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
+    } | null>;
+    getScrollContainer: () => HTMLElement | null | undefined;
+    getScrollContent: () => HTMLElement | null | undefined;
+    handleScroll: (e: Event) => void;
+    handleResize: (e: ResizeObserverEntry) => void;
+    handleWheel: (e: WheelEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly items: {
+        readonly type: PropType<ItemData[]>;
+        readonly default: () => never[];
+    };
+    readonly itemSize: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly itemResizable: BooleanConstructor;
+    readonly itemsStyle: PropType<string | CSSProperties>;
+    readonly visibleItemsTag: {
+        readonly type: PropType<string | object>;
+        readonly default: "div";
+    };
+    readonly visibleItemsProps: ObjectConstructor;
+    readonly ignoreItemResize: BooleanConstructor;
+    readonly onScroll: PropType<(event: Event) => void>;
+    readonly onWheel: PropType<(event: WheelEvent) => void>;
+    readonly onResize: PropType<(entry: ResizeObserverEntry) => void>;
+    readonly defaultScrollKey: PropType<string | number>;
+    readonly defaultScrollIndex: NumberConstructor;
+    readonly keyField: {
+        readonly type: StringConstructor;
+        readonly default: "key";
+    };
+    readonly paddingTop: {
+        readonly type: PropType<string | number>;
+        readonly default: 0;
+    };
+    readonly paddingBottom: {
+        readonly type: PropType<string | number>;
+        readonly default: 0;
+    };
+}>>, {
+    readonly paddingBottom: string | number;
+    readonly paddingTop: string | number;
+    readonly items: ItemData[];
+    readonly itemResizable: boolean;
+    readonly visibleItemsTag: string | object;
+    readonly ignoreItemResize: boolean;
+    readonly keyField: string;
+}, {}>;
+export default _default;

package/lib/virtual-list/src/VirtualList.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.virtualListProps = void 0;
+const vue_1 = require("vue");
+const _internal_1 = require("../../_internal");
+const vueuc_1 = require("vueuc");
+exports.virtualListProps = {
+    scrollbarProps: Object,
+    items: {
+        type: Array,
+        default: () => []
+    },
+    itemSize: {
+        type: Number,
+        required: true
+    },
+    itemResizable: Boolean,
+    itemsStyle: [String, Object],
+    visibleItemsTag: {
+        type: [String, Object],
+        default: 'div'
+    },
+    visibleItemsProps: Object,
+    ignoreItemResize: Boolean,
+    onScroll: Function,
+    onWheel: Function,
+    onResize: Function,
+    defaultScrollKey: [Number, String],
+    defaultScrollIndex: Number,
+    keyField: {
+        type: String,
+        default: 'key'
+    },
+    paddingTop: {
+        type: [Number, String],
+        default: 0
+    },
+    paddingBottom: {
+        type: [Number, String],
+        default: 0
+    }
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'VirtualList',
+    props: exports.virtualListProps,
+    setup(props) {
+        const scrollbarInstRef = (0, vue_1.ref)(null);
+        const virtualListInstRef = (0, vue_1.ref)(null);
+        function syncScrollbar() {
+            const { value: scrollbarInst } = scrollbarInstRef;
+            if (scrollbarInst)
+                scrollbarInst.sync();
+        }
+        function handleScroll(e) {
+            var _a;
+            syncScrollbar();
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function handleResize(e) {
+            var _a;
+            syncScrollbar();
+            (_a = props.onResize) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function handleWheel(e) {
+            var _a;
+            (_a = props.onWheel) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function scrollTo(options, y) {
+            var _a, _b;
+            if (typeof options === 'number') {
+                (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(options, y !== null && y !== void 0 ? y : 0);
+            }
+            else {
+                (_b = virtualListInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(options);
+            }
+        }
+        function getScrollContainer() {
+            var _a;
+            return (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.listElRef;
+        }
+        function getScrollContent() {
+            var _a;
+            return (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.itemsElRef;
+        }
+        return {
+            scrollTo,
+            scrollbarInstRef,
+            virtualListInstRef,
+            getScrollContainer,
+            getScrollContent,
+            handleScroll,
+            handleResize,
+            handleWheel
+        };
+    },
+    render() {
+        return ((0, vue_1.h)(_internal_1.NxScrollbar, Object.assign({}, this.scrollbarProps, { ref: "scrollbarInstRef", container: this.getScrollContainer, content: this.getScrollContent }), {
+            default: () => {
+                return ((0, vue_1.h)(vueuc_1.VVirtualList, { ref: "virtualListInstRef", showScrollbar: false, items: this.items, itemSize: this.itemSize, itemResizable: this.itemResizable, itemsStyle: this.itemsStyle, visibleItemsTag: this.visibleItemsTag, visibleItemsProps: this.visibleItemsProps, ignoreItemResize: this.ignoreItemResize, keyField: this.keyField, defaultScrollKey: this.defaultScrollKey, defaultScrollIndex: this.defaultScrollIndex, paddingTop: this.paddingTop, paddingBottom: this.paddingBottom, onScroll: this.handleScroll, onResize: this.handleResize, onWheel: this.handleWheel }, {
+                    default: ({ item, index }) => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a, { item, index }); }
+                }));
+            }
+        }));
+    }
+});

package/lib/watermark/src/Watermark.d.ts

@@ -294,5 +294,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly imageOpacity: number;
     readonly fontColor: string;
     readonly globalRotate: number;
-}>;
+}, {}>;
 export default _default;

package/lib/watermark/src/Watermark.js

@@ -135,6 +135,13 @@ exports.default = (0, vue_1.defineComponent)({
                     ctx.fillText(content, canvasOffsetLeft, canvasOffsetTop + lineHeight * ratio);
                     base64UrlRef.value = canvas.toDataURL();
                 }
+                else if (!content) {
+                    // For example, you are using the input box to customize the watermark
+                    // content, but after clearing the input box, the content is empty,
+                    // and the canvas content is empty. Clear canvas when content is empty
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    base64UrlRef.value = canvas.toDataURL();
+                }
             }
             else {
                 (0, _utils_1.warnOnce)('watermark', 'Canvas is not supported in the browser.');