naive-ui 2.25.0 → 2.25.3

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.25.0",
+  "version": "2.25.3",
   "description": "A Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@babel/preset-env": "^7.12.10",
     "@babel/traverse": "^7.12.12",
     "@rollup/plugin-babel": "^5.3.0",
-    "@types/estree": "^0.0.50",
+    "@types/estree": "^0.0.51",
     "@types/jest": "^27.0.1",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
     "@typescript-eslint/parser": "^5.9.0",
@@ -60,12 +60,12 @@
     "@vue/server-renderer": "^3.2.18",
     "@vue/test-utils": "2.0.0-rc.16",
     "autoprefixer": "^10.2.6",
-    "axios": "^0.25.0",
+    "axios": "^0.26.0",
     "babel-jest": "^27.0.2",
     "codesandbox": "^2.2.3",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.5",
-    "esbuild": "0.14.18",
+    "esbuild": "0.14.23",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.2",
@@ -116,7 +116,7 @@
     "vdirs": "^0.1.7",
     "vfonts": "^0.0.3",
     "vooks": "^0.2.12",
-    "vueuc": "^0.4.25"
+    "vueuc": "^0.4.26"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",
@@ -138,13 +138,13 @@
     "build:site": "./scripts/pre-build-site/pre-build-site.sh && cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
     "clean": "rimraf site lib es node_modules/naive-ui themes/**/es themes/**/lib",
     "release:package": "pnpm run test && pnpm run build:package && pnpm publish --no-git-checks",
-    "release:site": "cross-env TUSIMPLE=true pnpm run build:site && node build-doc/generate-deploy-sh.js && sudo bash build-doc/deploy-doc.sh",
+    "release:changelog": "node scripts/release-changelog",
     "lint": "pnpm run lint:code && pnpm run lint:type",
     "lint:type": "pnpm run lint:src-type && pnpm run lint:demo-type",
     "lint:code": "eslint \"{src,build,scripts,demo}/**/*.{ts,tsx,js,vue,md}\"",
     "lint:fix": "eslint --fix \"{src,build,scripts,demo}/**/*.{ts,tsx,js,vue,md}\"",
     "lint:src-type": "tsc -b --force tsconfig.esm.json",
-    "lint:demo-type": "vue-tsc -p src/tsconfig.demo.json",
+    "lint:demo-type": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-tsc -p src/tsconfig.demo.json",
     "format": "pnpm run format:code && pnpm run format:md && pnpm run lint:fix",
     "format:code": "prettier --write \"(src|demo)/**/*.(vue|js)\"",
     "format:md": "prettier --write --parser markdown --prose-wrap never \"(src|demo)/**/*.md\"",
@@ -153,9 +153,8 @@
     "test:watch": "cross-env NODE_ENV=test jest ---watch --verbose --coverage",
     "gen-version": "node scripts/gen-version",
     "gen-volar-dts": "esno scripts/gen-component-declaration",
-    "release-changelog": "node scripts/release-changelog",
     "build:site:ts": "./scripts/pre-build-site/pre-build-site.sh && cross-env TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
-    "transpile-docs": "node scripts/md-to-vue tree",
-    "typecheck": "vue-tsc --noEmit src/**/*.vue"
+    "transpile-docs": "node scripts/md-to-vue tree-select",
+    "release:site": "cross-env TUSIMPLE=true pnpm run build:site && node build-doc/generate-deploy-sh.js && sudo bash build-doc/deploy-doc.sh"
   }
 }

package/volar.d.ts

@@ -139,6 +139,7 @@ declare module 'vue' {
     NCol: typeof import('naive-ui')['NCol']
     NRow: typeof import('naive-ui')['NRow']
     NIconWrapper: typeof import('naive-ui')['NIconWrapper']
+    NWatermark: typeof import('naive-ui')['NWatermark']
     [key: string]: any
   }
 }