@antdv-next/mobile 0.0.0-stage → 0.1.0

package/dist/watermark/index.d.ts

@@ -0,0 +1,45 @@
+export type * from './interface';
+declare const Watermark: import("../_util/withInstall").WithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./interface").WatermarkProps> & Readonly<{
+        onRemove?: (() => any) | undefined;
+    }>, {
+        render: () => void;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        remove: () => any;
+    }, import("vue").PublicProps, {
+        zIndex: number;
+        rotate: number;
+        gap: [number, number];
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./interface").WatermarkProps> & Readonly<{
+        onRemove?: (() => any) | undefined;
+    }>, {
+        render: () => void;
+    }, {}, {}, {}, {
+        zIndex: number;
+        rotate: number;
+        gap: [number, number];
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./interface").WatermarkProps> & Readonly<{
+    onRemove?: (() => any) | undefined;
+}>, {
+    render: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+}, string, {
+    zIndex: number;
+    rotate: number;
+    gap: [number, number];
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./interface").WatermarkSlots;
+}), object>;
+export default Watermark;

package/dist/watermark/index.js

@@ -0,0 +1,5 @@
+import { withInstall } from "../_util/withInstall.js";
+import Watermark_default from "./Watermark.js";
+// src/watermark/index.ts
+var Watermark = withInstall(Watermark_default, "AmWatermark");
+export { Watermark as default };

package/dist/watermark/interface.d.ts

@@ -0,0 +1,38 @@
+export interface WatermarkFont {
+    /** Any canvas color; follows the theme (`--am-watermark-color`) by default */
+    color?: string;
+    fontSize?: number | string;
+    fontWeight?: 'normal' | 'lighter' | 'bold' | 'bolder' | number;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    fontFamily?: string;
+    textAlign?: 'left' | 'right' | 'center' | 'start' | 'end';
+}
+export interface WatermarkProps {
+    /** z-index of the watermark layer */
+    zIndex?: number;
+    /** Rotation in degrees */
+    rotate?: number;
+    /** Width of one watermark, measured from the content by default */
+    width?: number;
+    /** Height of one watermark, measured from the content by default */
+    height?: number;
+    /** Image source, takes priority over `content` (a 2x / 3x image is recommended) */
+    image?: string;
+    /** Watermark text, an array renders multiple lines */
+    content?: string | string[];
+    font?: WatermarkFont;
+    /** Space between watermarks: `[horizontal, vertical]` */
+    gap?: [number, number];
+    /** Offset from the top left corner, `gap / 2` by default */
+    offset?: [number, number];
+    /** Mobile only: cover the whole viewport (`position: fixed`) */
+    fullPage?: boolean;
+    rootClass?: string;
+}
+export interface WatermarkEmits {
+    /** The watermark layer was removed or modified from outside (it is restored right away) */
+    remove: [];
+}
+export interface WatermarkSlots {
+    default?: () => any;
+}

package/dist/watermark/style/index.css

@@ -0,0 +1,18 @@
+.am-watermark {
+  /* component tokens */
+  --am-watermark-color: var(--am-color-fill);
+
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.am-watermark-full-page {
+  position: static;
+  overflow: visible;
+}
+
+/* The canvas text color is read from here so that it follows the theme. */
+.am-watermark-layer {
+  color: var(--am-watermark-color);
+}

package/dist/watermark/utils.d.ts

@@ -0,0 +1,21 @@
+import type { WatermarkFont } from './interface';
+/** Line gap between multi-line text, same as antdv-next. */
+export declare const FONT_GAP = 3;
+export type ResolvedFont = Required<WatermarkFont>;
+/** `false` in SSR and in environments without a 2d canvas (e.g. jsdom). */
+export declare function getCanvasContext(): CanvasRenderingContext2D | null;
+/** Size of one watermark: explicit `width` / `height`, otherwise measured from the text. */
+export declare function getMarkSize(ctx: CanvasRenderingContext2D, options: {
+    width?: number;
+    height?: number;
+    image?: string;
+    content?: string | string[];
+    font: ResolvedFont;
+}): [width: number, height: number];
+/**
+ * Draws one watermark (text or image), rotates it and lays it out as a staggered, repeatable tile.
+ * Returns `[dataURL, tileWidth, tileHeight]` in css pixels, or `null` when no canvas is available.
+ */
+export declare function getClips(content: string | string[] | HTMLImageElement, rotate: number, ratio: number, width: number, height: number, font: ResolvedFont, gapX: number, gapY: number): [dataURL: string, width: number, height: number] | null;
+/** Position / size of the layer for a given `gap` and `offset` (same rules as antdv-next). */
+export declare function getLayerStyle(gap: [number, number], offset?: [number, number]): Record<string, string>;

package/dist/watermark/utils.js

@@ -0,0 +1,133 @@
+function prepareCanvas(width, height, ratio = 1) {
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	const realWidth = width * ratio;
+	const realHeight = height * ratio;
+	canvas.setAttribute("width", `${realWidth}px`);
+	canvas.setAttribute("height", `${realHeight}px`);
+	ctx?.save();
+	return [
+		ctx,
+		canvas,
+		realWidth,
+		realHeight
+	];
+}
+/** `false` in SSR and in environments without a 2d canvas (e.g. jsdom). */
+function getCanvasContext() {
+	if (typeof document === "undefined") return null;
+	try {
+		return document.createElement("canvas").getContext("2d");
+	} catch {
+		return null;
+	}
+}
+/** Size of one watermark: explicit `width` / `height`, otherwise measured from the text. */
+function getMarkSize(ctx, options) {
+	const { width, height, image, content, font } = options;
+	let defaultWidth = 120;
+	let defaultHeight = 64;
+	if (!image && ctx.measureText) {
+		ctx.font = `${Number(font.fontSize)}px ${font.fontFamily}`;
+		const contents = Array.isArray(content) ? content : [content];
+		const sizes = contents.map((item) => {
+			const metrics = ctx.measureText(item ?? "");
+			const lineHeight = (metrics.fontBoundingBoxAscent ?? 0) + (metrics.fontBoundingBoxDescent ?? 0);
+			return [metrics.width, lineHeight || Number(font.fontSize) * 1.2];
+		});
+		defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
+		defaultHeight = Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length + (contents.length - 1) * 3;
+	}
+	return [width ?? defaultWidth, height ?? defaultHeight];
+}
+/**
+* Draws one watermark (text or image), rotates it and lays it out as a staggered, repeatable tile.
+* Returns `[dataURL, tileWidth, tileHeight]` in css pixels, or `null` when no canvas is available.
+*/
+function getClips(content, rotate, ratio, width, height, font, gapX, gapY) {
+	const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
+	if (!ctx) return null;
+	if (typeof content === "object" && !Array.isArray(content)) ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
+	else {
+		const { color, fontSize, fontStyle, fontWeight, fontFamily, textAlign } = font;
+		const mergedFontSize = Number(fontSize) * ratio;
+		ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
+		ctx.fillStyle = color;
+		ctx.textAlign = textAlign;
+		ctx.textBaseline = "top";
+		const contents = Array.isArray(content) ? content : [content];
+		const x = textAlign === "center" ? contentWidth / 2 : textAlign === "right" || textAlign === "end" ? contentWidth : 0;
+		contents.forEach((item, index) => {
+			ctx.fillText(item ?? "", x, index * (mergedFontSize + 3 * ratio));
+		});
+	}
+	const angle = Math.PI / 180 * Number(rotate);
+	const maxSize = Math.max(width, height);
+	const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio);
+	if (!rCtx) return null;
+	rCtx.translate(realMaxSize / 2, realMaxSize / 2);
+	rCtx.rotate(angle);
+	if (contentWidth > 0 && contentHeight > 0) rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+	const rotatePos = (x, y) => [x * Math.cos(angle) - y * Math.sin(angle), x * Math.sin(angle) + y * Math.cos(angle)];
+	let left = 0;
+	let right = 0;
+	let top = 0;
+	let bottom = 0;
+	const halfWidth = contentWidth / 2;
+	const halfHeight = contentHeight / 2;
+	[
+		[-halfWidth, -halfHeight],
+		[halfWidth, -halfHeight],
+		[halfWidth, halfHeight],
+		[-halfWidth, halfHeight]
+	].forEach(([x, y]) => {
+		const [targetX, targetY] = rotatePos(x, y);
+		left = Math.min(left, targetX);
+		right = Math.max(right, targetX);
+		top = Math.min(top, targetY);
+		bottom = Math.max(bottom, targetY);
+	});
+	const cutLeft = left + realMaxSize / 2;
+	const cutTop = top + realMaxSize / 2;
+	const cutWidth = right - left;
+	const cutHeight = bottom - top;
+	const realGapX = gapX * ratio;
+	const realGapY = gapY * ratio;
+	const filledWidth = (cutWidth + realGapX) * 2;
+	const filledHeight = cutHeight + realGapY;
+	const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight);
+	if (!fCtx) return null;
+	const drawImg = (targetX = 0, targetY = 0) => {
+		fCtx.drawImage(rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY, cutWidth, cutHeight);
+	};
+	drawImg();
+	drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
+	drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
+	return [
+		fCanvas.toDataURL(),
+		filledWidth / ratio,
+		filledHeight / ratio
+	];
+}
+/** Position / size of the layer for a given `gap` and `offset` (same rules as antdv-next). */
+function getLayerStyle(gap, offset) {
+	const [gapX, gapY] = gap;
+	const gapXCenter = gapX / 2;
+	const gapYCenter = gapY / 2;
+	let positionLeft = (offset?.[0] ?? gapXCenter) - gapXCenter;
+	let positionTop = (offset?.[1] ?? gapYCenter) - gapYCenter;
+	const style = {};
+	if (positionLeft > 0) {
+		style.left = `${positionLeft}px`;
+		style.width = `calc(100% - ${positionLeft}px)`;
+		positionLeft = 0;
+	}
+	if (positionTop > 0) {
+		style.top = `${positionTop}px`;
+		style.height = `calc(100% - ${positionTop}px)`;
+		positionTop = 0;
+	}
+	style["background-position"] = `${positionLeft}px ${positionTop}px`;
+	return style;
+}
+export { getCanvasContext, getClips, getLayerStyle, getMarkSize };

package/global.d.ts

@@ -0,0 +1,100 @@
+// Global component types for Volar: add "@antdv-next/mobile/global" to `compilerOptions.types`.
+declare module 'vue' {
+  export interface GlobalComponents {
+    AmActionSheet: typeof import('@antdv-next/mobile')['ActionSheet']
+    AmAffix: typeof import('@antdv-next/mobile')['Affix']
+    AmAlert: typeof import('@antdv-next/mobile')['Alert']
+    AmAvatar: typeof import('@antdv-next/mobile')['Avatar']
+    AmAvatarGroup: typeof import('@antdv-next/mobile')['AvatarGroup']
+    AmBackTop: typeof import('@antdv-next/mobile')['BackTop']
+    AmBadge: typeof import('@antdv-next/mobile')['Badge']
+    AmButton: typeof import('@antdv-next/mobile')['Button']
+    AmCalendar: typeof import('@antdv-next/mobile')['Calendar']
+    AmCard: typeof import('@antdv-next/mobile')['Card']
+    AmCarousel: typeof import('@antdv-next/mobile')['Carousel']
+    AmCascader: typeof import('@antdv-next/mobile')['Cascader']
+    AmCascaderView: typeof import('@antdv-next/mobile')['CascaderView']
+    AmCheckableTag: typeof import('@antdv-next/mobile')['CheckableTag']
+    AmCheckbox: typeof import('@antdv-next/mobile')['Checkbox']
+    AmCheckboxGroup: typeof import('@antdv-next/mobile')['CheckboxGroup']
+    AmCol: typeof import('@antdv-next/mobile')['Col']
+    AmCollapse: typeof import('@antdv-next/mobile')['Collapse']
+    AmCollapsePanel: typeof import('@antdv-next/mobile')['CollapsePanel']
+    AmConfigProvider: typeof import('@antdv-next/mobile')['ConfigProvider']
+    AmDatePicker: typeof import('@antdv-next/mobile')['DatePicker']
+    AmDatePickerView: typeof import('@antdv-next/mobile')['DatePickerView']
+    AmDescriptions: typeof import('@antdv-next/mobile')['Descriptions']
+    AmDivider: typeof import('@antdv-next/mobile')['Divider']
+    AmDrawer: typeof import('@antdv-next/mobile')['Drawer']
+    AmDropdown: typeof import('@antdv-next/mobile')['Dropdown']
+    AmDropdownItem: typeof import('@antdv-next/mobile')['DropdownItem']
+    AmEmpty: typeof import('@antdv-next/mobile')['Empty']
+    AmFlex: typeof import('@antdv-next/mobile')['Flex']
+    AmFloatButton: typeof import('@antdv-next/mobile')['FloatButton']
+    AmFloatButtonGroup: typeof import('@antdv-next/mobile')['FloatButtonGroup']
+    AmFloatingPanel: typeof import('@antdv-next/mobile')['FloatingPanel']
+    AmForm: typeof import('@antdv-next/mobile')['Form']
+    AmFormItem: typeof import('@antdv-next/mobile')['FormItem']
+    AmImage: typeof import('@antdv-next/mobile')['Image']
+    AmImagePreview: typeof import('@antdv-next/mobile')['ImagePreview']
+    AmImagePreviewGroup: typeof import('@antdv-next/mobile')['ImagePreviewGroup']
+    AmIndexBar: typeof import('@antdv-next/mobile')['IndexBar']
+    AmIndexBarAnchor: typeof import('@antdv-next/mobile')['IndexBarAnchor']
+    AmInfiniteScroll: typeof import('@antdv-next/mobile')['InfiniteScroll']
+    AmInput: typeof import('@antdv-next/mobile')['Input']
+    AmInputNumber: typeof import('@antdv-next/mobile')['InputNumber']
+    AmInputOtp: typeof import('@antdv-next/mobile')['InputOTP']
+    AmInputPassword: typeof import('@antdv-next/mobile')['InputPassword']
+    AmInputSearch: typeof import('@antdv-next/mobile')['InputSearch']
+    AmList: typeof import('@antdv-next/mobile')['List']
+    AmListItem: typeof import('@antdv-next/mobile')['ListItem']
+    AmMask: typeof import('@antdv-next/mobile')['Mask']
+    AmModal: typeof import('@antdv-next/mobile')['Modal']
+    AmNavBar: typeof import('@antdv-next/mobile')['NavBar']
+    AmNoticeBar: typeof import('@antdv-next/mobile')['NoticeBar']
+    AmNumberKeyboard: typeof import('@antdv-next/mobile')['NumberKeyboard']
+    AmPagination: typeof import('@antdv-next/mobile')['Pagination']
+    AmPicker: typeof import('@antdv-next/mobile')['Picker']
+    AmPickerView: typeof import('@antdv-next/mobile')['PickerView']
+    AmPopover: typeof import('@antdv-next/mobile')['Popover']
+    AmPopup: typeof import('@antdv-next/mobile')['Popup']
+    AmProgress: typeof import('@antdv-next/mobile')['Progress']
+    AmPullToRefresh: typeof import('@antdv-next/mobile')['PullToRefresh']
+    AmRadio: typeof import('@antdv-next/mobile')['Radio']
+    AmRadioGroup: typeof import('@antdv-next/mobile')['RadioGroup']
+    AmRate: typeof import('@antdv-next/mobile')['Rate']
+    AmResult: typeof import('@antdv-next/mobile')['Result']
+    AmRow: typeof import('@antdv-next/mobile')['Row']
+    AmSafeArea: typeof import('@antdv-next/mobile')['SafeArea']
+    AmSegmented: typeof import('@antdv-next/mobile')['Segmented']
+    AmSelect: typeof import('@antdv-next/mobile')['Select']
+    AmSelector: typeof import('@antdv-next/mobile')['Selector']
+    AmSideBar: typeof import('@antdv-next/mobile')['SideBar']
+    AmSkeleton: typeof import('@antdv-next/mobile')['Skeleton']
+    AmSlider: typeof import('@antdv-next/mobile')['Slider']
+    AmSpace: typeof import('@antdv-next/mobile')['Space']
+    AmSpaceAddon: typeof import('@antdv-next/mobile')['SpaceAddon']
+    AmSpaceCompact: typeof import('@antdv-next/mobile')['SpaceCompact']
+    AmSpin: typeof import('@antdv-next/mobile')['Spin']
+    AmStatistic: typeof import('@antdv-next/mobile')['Statistic']
+    AmStatisticTimer: typeof import('@antdv-next/mobile')['StatisticTimer']
+    AmSteps: typeof import('@antdv-next/mobile')['Steps']
+    AmSwipeAction: typeof import('@antdv-next/mobile')['SwipeAction']
+    AmSwitch: typeof import('@antdv-next/mobile')['Switch']
+    AmTabBar: typeof import('@antdv-next/mobile')['TabBar']
+    AmTabs: typeof import('@antdv-next/mobile')['Tabs']
+    AmTag: typeof import('@antdv-next/mobile')['Tag']
+    AmTextarea: typeof import('@antdv-next/mobile')['TextArea']
+    AmTimePicker: typeof import('@antdv-next/mobile')['TimePicker']
+    AmTimeline: typeof import('@antdv-next/mobile')['Timeline']
+    AmTypography: typeof import('@antdv-next/mobile')['Typography']
+    AmTypographyParagraph: typeof import('@antdv-next/mobile')['TypographyParagraph']
+    AmTypographyText: typeof import('@antdv-next/mobile')['TypographyText']
+    AmTypographyTitle: typeof import('@antdv-next/mobile')['TypographyTitle']
+    AmUpload: typeof import('@antdv-next/mobile')['Upload']
+    AmVirtualList: typeof import('@antdv-next/mobile')['VirtualList']
+    AmWatermark: typeof import('@antdv-next/mobile')['Watermark']
+  }
+}
+
+export {}

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "@antdv-next/mobile",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Mobile UI component library for Vue 3, API-aligned with antdv-next",
+  "author": {
+    "email": "aibayanyu@gmail.com",
+    "name": "aibayanyu20"
+  },
+  "license": "MIT",
+  "homepage": "https://m.antdv-next.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antdv-next/antdv-next-mobile.git",
+    "directory": "packages/antdv-mobile"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "mobile",
+    "ui",
+    "components",
+    "antd",
+    "antdv-next"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/style/**"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./global": {
+      "types": "./global.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css",
+    "./locale/*": {
+      "types": "./dist/locale/*.d.ts",
+      "import": "./dist/locale/*.js",
+      "default": "./dist/locale/*.js"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "global.d.ts"
+  ],
+  "peerDependencies": {
+    "vue": ">=3.5.0"
+  },
+  "dependencies": {
+    "@antdv-next/icons": "^1.1.2",
+    "@v-c/async-validator": "^1.0.2",
+    "csstype": "^3.2.3",
+    "dayjs": "^1.11.23"
+  },
+  "devDependencies": {
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vue": "^3.5.42"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "bump": "bumpp --commit \"chore(release): @antdv-next/mobile %s\" --push --tag \"@antdv-next/mobile@%s\"",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --root ../.. packages/antdv-mobile"
+  }
 }