naive-ui 2.25.2 → 2.25.5

package/lib/typography/src/ul.js

@@ -12,28 +12,37 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Ul',
     props: ulProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Typography', '-xl', list_cssr_1.default, styles_1.typographyLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { olPadding, ulPadding, liMargin, liTextColor, liLineHeight, liFontSize } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': liFontSize,
+                '--n-line-height': liLineHeight,
+                '--n-text-color': liTextColor,
+                '--n-li-margin': liMargin,
+                '--n-ol-padding': olPadding,
+                '--n-ul-padding': ulPadding
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('ul', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { olPadding, ulPadding, liMargin, liTextColor, liLineHeight, liFontSize } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-font-size': liFontSize,
-                    '--n-line-height': liLineHeight,
-                    '--n-text-color': liTextColor,
-                    '--n-li-margin': liMargin,
-                    '--n-ol-padding': olPadding,
-                    '--n-ul-padding': ulPadding
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("ul", { class: [
                 `${mergedClsPrefix}-ul`,
+                this.themeClass,
                 this.alignText && `${mergedClsPrefix}-ul--align-text`
             ], style: this.cssVars }, this.$slots));
     }

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

@@ -5,7 +5,7 @@ import type { UploadTheme } from '../styles';
 export interface FileInfo {
     id: string;
     name: string;
-    percentage: number;
+    percentage?: number;
     status: 'pending' | 'uploading' | 'finished' | 'removed' | 'error';
     url?: string | null;
     file?: File | null;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.25.2";
+declare const _default: "2.25.5";
 export default _default;

package/lib/version.js

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

package/lib/watermark/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NWatermark } from './src/Watermark';
+export type { WatermarkProps } from './src/Watermark';

package/lib/watermark/index.js

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

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

@@ -0,0 +1,285 @@
+import { PropType } from 'vue';
+import { ExtractPublicPropTypes } from '../../_utils';
+declare const watermarkProps: {
+    readonly debug: BooleanConstructor;
+    readonly cross: BooleanConstructor;
+    readonly fullscreen: BooleanConstructor;
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
+    readonly height: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly xGap: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly yGap: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly yOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly xOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly image: StringConstructor;
+    readonly imageOpacity: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly imageHeight: NumberConstructor;
+    readonly imageWidth: NumberConstructor;
+    readonly content: StringConstructor;
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly fontSize: {
+        readonly type: NumberConstructor;
+        readonly default: 14;
+    };
+    readonly fontFamily: StringConstructor;
+    readonly fontStyle: {
+        readonly type: PropType<"normal" | "italic" | "oblique" | `oblique ${number}deg`>;
+        readonly default: "normal";
+    };
+    readonly fontVariant: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly fontWeight: {
+        readonly type: NumberConstructor;
+        readonly default: 400;
+    };
+    readonly fontColor: {
+        readonly type: StringConstructor;
+        readonly default: "rgba(128, 128, 128, .3)";
+    };
+    readonly fontStretch: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly lineHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 14;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>>;
+};
+export declare type WatermarkProps = ExtractPublicPropTypes<typeof watermarkProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly debug: BooleanConstructor;
+    readonly cross: BooleanConstructor;
+    readonly fullscreen: BooleanConstructor;
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
+    readonly height: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly xGap: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly yGap: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly yOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly xOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly image: StringConstructor;
+    readonly imageOpacity: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly imageHeight: NumberConstructor;
+    readonly imageWidth: NumberConstructor;
+    readonly content: StringConstructor;
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly fontSize: {
+        readonly type: NumberConstructor;
+        readonly default: 14;
+    };
+    readonly fontFamily: StringConstructor;
+    readonly fontStyle: {
+        readonly type: PropType<"normal" | "italic" | "oblique" | `oblique ${number}deg`>;
+        readonly default: "normal";
+    };
+    readonly fontVariant: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly fontWeight: {
+        readonly type: NumberConstructor;
+        readonly default: 400;
+    };
+    readonly fontColor: {
+        readonly type: StringConstructor;
+        readonly default: "rgba(128, 128, 128, .3)";
+    };
+    readonly fontStretch: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly lineHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 14;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly debug: BooleanConstructor;
+    readonly cross: BooleanConstructor;
+    readonly fullscreen: BooleanConstructor;
+    readonly width: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
+    readonly height: {
+        readonly type: NumberConstructor;
+        readonly default: 32;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly xGap: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly yGap: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly yOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly xOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly rotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly image: StringConstructor;
+    readonly imageOpacity: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly imageHeight: NumberConstructor;
+    readonly imageWidth: NumberConstructor;
+    readonly content: StringConstructor;
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly fontSize: {
+        readonly type: NumberConstructor;
+        readonly default: 14;
+    };
+    readonly fontFamily: StringConstructor;
+    readonly fontStyle: {
+        readonly type: PropType<"normal" | "italic" | "oblique" | `oblique ${number}deg`>;
+        readonly default: "normal";
+    };
+    readonly fontVariant: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly fontWeight: {
+        readonly type: NumberConstructor;
+        readonly default: 400;
+    };
+    readonly fontColor: {
+        readonly type: StringConstructor;
+        readonly default: "rgba(128, 128, 128, .3)";
+    };
+    readonly fontStretch: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly lineHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 14;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Watermark", {
+        fontFamily: string;
+    }, unknown>>>;
+}>>, {
+    fontSize: number;
+    fontStretch: string;
+    fontStyle: "normal" | "italic" | "oblique" | `oblique ${number}deg`;
+    fontVariant: string;
+    fontWeight: number;
+    height: number;
+    lineHeight: number;
+    rotate: number;
+    width: number;
+    zIndex: number;
+    cross: boolean;
+    xGap: number;
+    yGap: number;
+    selectable: boolean;
+    fullscreen: boolean;
+    debug: boolean;
+    yOffset: number;
+    xOffset: number;
+    imageOpacity: number;
+    fontColor: string;
+}>;
+export default _default;

package/lib/watermark/src/Watermark.js

@@ -0,0 +1,164 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+function getRatio(context) {
+    if (!context) {
+        return 1;
+    }
+    const backingStore = context.backingStorePixelRatio ||
+        context.webkitBackingStorePixelRatio ||
+        context.mozBackingStorePixelRatio ||
+        context.msBackingStorePixelRatio ||
+        context.oBackingStorePixelRatio ||
+        context.backingStorePixelRatio ||
+        1;
+    return (window.devicePixelRatio || 1) / backingStore;
+}
+const watermarkProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { debug: Boolean, cross: Boolean, fullscreen: Boolean, width: {
+        type: Number,
+        default: 32
+    }, height: {
+        type: Number,
+        default: 32
+    }, zIndex: {
+        type: Number,
+        default: 10
+    }, xGap: {
+        type: Number,
+        default: 0
+    }, yGap: {
+        type: Number,
+        default: 0
+    }, yOffset: {
+        type: Number,
+        default: 0
+    }, xOffset: {
+        type: Number,
+        default: 0
+    }, rotate: {
+        type: Number,
+        default: 0
+    }, image: String, imageOpacity: { type: Number, default: 1 }, imageHeight: Number, imageWidth: Number, content: String, selectable: {
+        type: Boolean,
+        default: true
+    }, fontSize: {
+        type: Number,
+        default: 14
+    }, fontFamily: String, fontStyle: {
+        type: String,
+        default: 'normal'
+    }, fontVariant: {
+        type: String,
+        default: ''
+    }, fontWeight: {
+        type: Number,
+        default: 400
+    }, fontColor: {
+        type: String,
+        default: 'rgba(128, 128, 128, .3)'
+    }, fontStretch: {
+        type: String,
+        default: ''
+    }, lineHeight: {
+        type: Number,
+        default: 14
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Watermark',
+    props: watermarkProps,
+    setup(props, { slots }) {
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Watermark', '-watermark', index_cssr_1.default, styles_1.watermarkLight, props);
+        const base64UrlRef = (0, vue_1.ref)('');
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const fontsReadyRef = (0, vue_1.ref)(false);
+        (0, vooks_1.onFontsReady)(() => (fontsReadyRef.value = true));
+        (0, vue_1.watchEffect)(() => {
+            void fontsReadyRef.value;
+            const ratio = getRatio(ctx);
+            const { xGap, yGap, width, height, yOffset, xOffset, rotate, image, content, fontColor, fontStyle, fontVariant, fontStretch, fontWeight, fontFamily, fontSize, lineHeight, debug } = props;
+            const canvasWidth = (xGap + width) * ratio;
+            const canvasHeight = (yGap + height) * ratio;
+            const canvasOffsetLeft = xOffset * ratio;
+            const canvasOffsetTop = yOffset * ratio;
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+            if (ctx) {
+                ctx.translate(0, 0);
+                const markWidth = width * ratio;
+                const markHeight = height * ratio;
+                if (debug) {
+                    ctx.strokeStyle = 'grey';
+                    ctx.strokeRect(0, 0, markWidth, markHeight);
+                }
+                ctx.rotate(rotate * (Math.PI / 180));
+                if (image) {
+                    const img = new Image();
+                    img.crossOrigin = 'anonymous';
+                    img.referrerPolicy = 'no-referrer';
+                    img.src = image;
+                    img.onload = () => {
+                        ctx.globalAlpha = props.imageOpacity;
+                        const { imageWidth, imageHeight } = props;
+                        ctx.drawImage(img, canvasOffsetLeft, canvasOffsetTop, (props.imageWidth ||
+                            (imageHeight
+                                ? (img.width * imageHeight) / img.height
+                                : img.width)) * ratio, (props.imageHeight ||
+                            (imageWidth
+                                ? (img.height * imageWidth) / img.width
+                                : img.height)) * ratio);
+                        base64UrlRef.value = canvas.toDataURL();
+                    };
+                }
+                else if (content) {
+                    if (debug) {
+                        ctx.strokeStyle = 'green';
+                        ctx.strokeRect(0, 0, markWidth, markHeight);
+                    }
+                    ctx.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontStretch} ${fontSize * ratio}px/${lineHeight * ratio}px ${fontFamily || themeRef.value.self.fontFamily}`;
+                    ctx.fillStyle = fontColor;
+                    ctx.fillText(content, canvasOffsetLeft, canvasOffsetTop + lineHeight * ratio);
+                    base64UrlRef.value = canvas.toDataURL();
+                }
+            }
+            else {
+                (0, _utils_1.warnOnce)('watermark', 'Canvas is not supported in the browser.');
+            }
+        });
+        return () => {
+            var _a;
+            const watarmarkNode = ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-watermark`,
+                    props.fullscreen &&
+                        `${mergedClsPrefixRef.value}-watermark--fullscreen`
+                ], style: {
+                    zIndex: props.zIndex,
+                    backgroundSize: `${props.xGap + props.width}px`,
+                    backgroundPosition: props.cross
+                        ? `${props.width / 2}px ${props.height / 2}px, 0 0`
+                        : '',
+                    backgroundImage: props.cross
+                        ? `url(${base64UrlRef.value}), url(${base64UrlRef.value})`
+                        : `url(${base64UrlRef.value})`
+                } }));
+            if (props.fullscreen)
+                return watarmarkNode;
+            return ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-watermark-container`,
+                    props.selectable &&
+                        `${mergedClsPrefixRef.value}-watermark-container--selectable`
+                ] }, (_a = slots.default) === null || _a === void 0 ? void 0 :
+                _a.call(slots),
+                watarmarkNode));
+        };
+    }
+});

package/lib/watermark/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/watermark/src/styles/index.cssr.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('watermark-container', `
+ position: relative;
+ `, [(0, cssr_1.cNotM)('selectable', 'user-select: none;')]), (0, cssr_1.cB)('watermark', `
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ background-repeat: repeat;
+ `, [(0, cssr_1.cM)('fullscreen', `
+ position: fixed;
+ `)])]);

package/lib/watermark/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { WatermarkTheme } from './light';
+declare const watermarkDark: WatermarkTheme;
+export default watermarkDark;

package/lib/watermark/styles/dark.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const watermarkDark = {
+    name: 'Watermark',
+    common: common_1.commonDark,
+    self(vars) {
+        const { fontFamily } = vars;
+        return {
+            fontFamily
+        };
+    }
+};
+exports.default = watermarkDark;

package/lib/watermark/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as watermarkDark } from './dark';
+export { default as watermarkLight } from './light';
+export type { WatermarkTheme } from './light';

package/lib/watermark/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watermarkLight = exports.watermarkDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "watermarkDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "watermarkLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/watermark/styles/light.d.ts

@@ -0,0 +1,5 @@
+declare const watermarkLight: import("../../_mixins").Theme<"Watermark", {
+    fontFamily: string;
+}, unknown>;
+export default watermarkLight;
+export declare type WatermarkTheme = typeof watermarkLight;

package/lib/watermark/styles/light.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const _mixins_1 = require("../../_mixins");
+const watermarkLight = (0, _mixins_1.createTheme)({
+    name: 'Watermark',
+    common: common_1.commonLight,
+    self(vars) {
+        const { fontFamily } = vars;
+        return {
+            fontFamily
+        };
+    }
+});
+exports.default = watermarkLight;