sard 1.0.0 → 1.0.2

package/components/watermark/watermark.js

@@ -0,0 +1,206 @@
+import { createBem } from "../../utils/bem.js";
+import { imageDataToDataURL, loadImage } from "../../utils/file.js";
+import { toArray } from "../../utils/array.js";
+import { getRotatedRect } from "../../utils/geometry.js";
+import { defaultWatermarkFont, defaultWatermarkProps } from "./common.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, shallowRef, watch } from "vue";
+//#region packages/sard/components/watermark/watermark.vue
+const canvasSize = 999;
+var watermark_default = /*@__PURE__*/ defineComponent({
+	__name: "watermark",
+	props: /*@__PURE__*/ mergeDefaults({
+		width: {
+			type: Number,
+			required: false
+		},
+		height: {
+			type: Number,
+			required: false
+		},
+		rotate: {
+			type: Number,
+			required: false
+		},
+		zIndex: {
+			type: Number,
+			required: false
+		},
+		image: {
+			type: String,
+			required: false
+		},
+		content: {
+			type: [String, Array],
+			required: false
+		},
+		font: {
+			type: Object,
+			required: false
+		},
+		gap: {
+			type: Array,
+			required: false
+		},
+		offset: {
+			type: Array,
+			required: false
+		}
+	}, defaultWatermarkProps),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("watermark");
+		const offset = computed(() => {
+			const [offsetX = props.gap[0] / 2, offsetY = props.gap[1] / 2] = props.offset || [];
+			return [offsetX, offsetY];
+		});
+		const mergedFont = computed(() => {
+			return {
+				...defaultWatermarkFont,
+				...props.font
+			};
+		});
+		const dpr = window.devicePixelRatio;
+		const canvas = document.createElement("canvas");
+		canvas.width = canvasSize;
+		canvas.height = canvasSize;
+		const context = canvas.getContext("2d");
+		const backgroundSize = ref(0);
+		const backgroundImage = ref("");
+		const imageObj = shallowRef(null);
+		const naturalWidth = ref(0);
+		const naturalHeight = ref(0);
+		const imgFail = ref(false);
+		watch(() => props.image, () => {
+			if (props.image) loadImage(props.image).then((image) => {
+				imageObj.value = image;
+				naturalWidth.value = image.naturalWidth;
+				naturalHeight.value = image.naturalHeight;
+				imgFail.value = false;
+			}).catch(() => {
+				imgFail.value = true;
+			});
+			else imageObj.value = null;
+		}, { immediate: true });
+		const drawWatermark = () => {
+			context.setTransform(dpr, 0, 0, dpr, 0, 0);
+			context.clearRect(0, 0, canvasSize, canvasSize);
+			let width = 0;
+			let height = 0;
+			const widths = [];
+			let rotatedRect = {
+				w1: 0,
+				w2: 0,
+				h1: 0,
+				h2: 0,
+				width: 0,
+				height: 0
+			};
+			const shouldDrawImage = imageObj.value !== null && !imgFail.value && naturalWidth.value > 0 && naturalHeight.value > 0;
+			if (shouldDrawImage) rotatedRect = getRotatedRect(props.width, props.height, props.rotate);
+			else {
+				const { fontSize, fontStyle, fontWeight, fontFamily, color } = mergedFont.value;
+				const textHeight = fontSize;
+				context.font = [
+					fontStyle,
+					fontWeight,
+					fontSize + "px",
+					fontFamily
+				].filter(Boolean).join(" ");
+				context.fillStyle = color;
+				context.textBaseline = "top";
+				toArray(props.content).filter(Boolean).forEach((item) => {
+					const metrics = context.measureText(item);
+					widths.push(metrics.width);
+					width = Math.max(width, metrics.width);
+					height += textHeight;
+				});
+				rotatedRect = getRotatedRect(width, height, props.rotate);
+			}
+			const draw = () => {
+				context.save();
+				let rotate = (props.rotate % 360 + 540) % 360 - 180;
+				rotate = rotate === -180 ? 180 : rotate;
+				if (rotate < 0 && rotate >= -90) context.translate(0, rotatedRect.h1);
+				else if (rotate < -90) context.translate(rotatedRect.w2, rotatedRect.height);
+				else if (rotate >= 0 && rotate < 90) context.translate(rotatedRect.w1, 0);
+				else context.translate(rotatedRect.width, rotatedRect.h2);
+				context.rotate(rotate * Math.PI / 180);
+				if (shouldDrawImage) context.drawImage(imageObj.value, 0, 0, props.width, props.height);
+				else {
+					const { fontSize, textAlign } = mergedFont.value;
+					const textHeight = fontSize;
+					toArray(props.content).filter(Boolean).forEach((item, i) => {
+						let x = 0;
+						switch (textAlign) {
+							case "left":
+								x = 0;
+								break;
+							case "center":
+								x = (width - widths[i]) / 2;
+								break;
+							case "right":
+								x = width - widths[i];
+								break;
+						}
+						context.fillText(item, x, i * textHeight);
+					});
+				}
+				context.restore();
+			};
+			const [columnGap, rowGap] = props.gap;
+			draw();
+			context.translate(0, -rowGap - rotatedRect.height);
+			draw();
+			context.translate(rotatedRect.width + columnGap, (rotatedRect.height + rowGap) / 2);
+			draw();
+			context.translate(0, rowGap + rotatedRect.height);
+			draw();
+			const clipWidth = (rotatedRect.width + columnGap) * 2;
+			const clipHeight = rotatedRect.height + rowGap;
+			backgroundSize.value = clipWidth;
+			const imageData = context.getImageData(0, 0, clipWidth * dpr, clipHeight * dpr);
+			backgroundImage.value = imageDataToDataURL(imageData);
+		};
+		watch([
+			imageObj,
+			naturalWidth,
+			naturalHeight,
+			imgFail,
+			() => props.content,
+			() => props.font,
+			() => props.gap,
+			() => props.rotate,
+			() => props.width,
+			() => props.height
+		], () => {
+			drawWatermark();
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		__expose({});
+		const watermarkClass = computed(() => {
+			return [bem.b()];
+		});
+		const watermarkStyle = computed(() => {
+			const [offsetX, offsetY] = offset.value;
+			return [{
+				top: `${offsetY}px`,
+				left: `${offsetX}px`,
+				width: `calc(100% - ${offsetX}px)`,
+				height: `calc(100% - ${offsetY}px)`,
+				backgroundSize: `${backgroundSize.value}px`,
+				backgroundImage: `url(${backgroundImage.value})`,
+				zIndex: props.zIndex
+			}];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(watermarkClass.value),
+				style: normalizeStyle(watermarkStyle.value)
+			}, null, 6);
+		};
+	}
+});
+//#endregion
+export { watermark_default as default };

package/global.d.ts

@@ -0,0 +1,168 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    SAccordion: typeof import('./components/accordion/accordion').default
+    SAccordionItem: typeof import('./components/accordion/accordion-item').default
+    SActionSheet: typeof import('./components/action-sheet/action-sheet').default
+    SActionSheetItem: typeof import('./components/action-sheet/action-sheet-item').default
+    SAlert: typeof import('./components/alert/alert').default
+    SAvatar: typeof import('./components/avatar/avatar').default
+    SAvatarGroup: typeof import('./components/avatar/avatar-group').default
+    SBackTop: typeof import('./components/back-top/back-top').default
+    SBadge: typeof import('./components/badge/badge').default
+    SBarcode: typeof import('./components/barcode/barcode').default
+    SButton: typeof import('./components/button/button').default
+    SCalendar: typeof import('./components/calendar/calendar').default
+    SCalendarInput: typeof import('./components/calendar-input/calendar-input').default
+    SCalendarPopout: typeof import('./components/calendar-popout/calendar-popout').default
+    SCard: typeof import('./components/card/card').default
+    SCascader: typeof import('./components/cascader/cascader').default
+    SCascaderInput: typeof import('./components/cascader-input/cascader-input').default
+    SCascaderPopout: typeof import('./components/cascader-popout/cascader-popout').default
+    SCheckbox: typeof import('./components/checkbox/checkbox').default
+    SCheckboxGroup: typeof import('./components/checkbox/checkbox-group').default
+    SCheckboxInput: typeof import('./components/checkbox-input/checkbox-input').default
+    SCheckboxPopout: typeof import('./components/checkbox-popout/checkbox-popout').default
+    SCol: typeof import('./components/layout/col').default
+    SCollapse: typeof import('./components/collapse/collapse').default
+    SColorPicker: typeof import('./components/color-picker/color-picker').default
+    SColorPickerInput: typeof import('./components/color-picker-input/color-picker-input').default
+    SColorPickerPopout: typeof import('./components/color-picker-popout/color-picker-popout').default
+    SCompact: typeof import('./components/compact/compact').default
+    SCoolIcon: typeof import('./components/cool-icon/cool-icon').default
+    SCountDown: typeof import('./components/count-down/count-down').default
+    SCountTo: typeof import('./components/count-to/count-to').default
+    SCropImage: typeof import('./components/crop-image/crop-image').default
+    SDateStrip: typeof import('./components/date-strip/date-strip').default
+    SDatetimePicker: typeof import('./components/datetime-picker/datetime-picker').default
+    SDatetimePickerInput: typeof import('./components/datetime-picker-input/datetime-picker-input').default
+    SDatetimePickerPopout: typeof import('./components/datetime-picker-popout/datetime-picker-popout').default
+    SDatetimeRangePicker: typeof import('./components/datetime-range-picker/datetime-range-picker').default
+    SDatetimeRangePickerInput: typeof import('./components/datetime-range-picker-input/datetime-range-picker-input').default
+    SDatetimeRangePickerPopout: typeof import('./components/datetime-range-picker-popout/datetime-range-picker-popout').default
+    SDescriptions: typeof import('./components/descriptions/descriptions').default
+    SDescriptionsItem: typeof import('./components/descriptions/descriptions-item').default
+    SDialog: typeof import('./components/dialog/dialog').default
+    SDivider: typeof import('./components/divider/divider').default
+    SDnd: typeof import('./components/dnd/dnd').default
+    SDndHandle: typeof import('./components/dnd/dnd-handle').default
+    SDndItem: typeof import('./components/dnd/dnd-item').default
+    SDropdown: typeof import('./components/dropdown/dropdown').default
+    SDropdownItem: typeof import('./components/dropdown/dropdown-item').default
+    SEllipsis: typeof import('./components/ellipsis/ellipsis').default
+    SEmpty: typeof import('./components/empty/empty').default
+    SFab: typeof import('./components/fab/fab').default
+    SFabItem: typeof import('./components/fab/fab-item').default
+    SFloatingBubble: typeof import('./components/floating-bubble/floating-bubble').default
+    SFloatingPanel: typeof import('./components/floating-panel/floating-panel').default
+    SForm: typeof import('./components/form/form').default
+    SFormItem: typeof import('./components/form/form-item').default
+    SFormItemPlain: typeof import('./components/form-plain/form-item-plain').default
+    SFormPlain: typeof import('./components/form-plain/form-plain').default
+    SGrid: typeof import('./components/grid/grid').default
+    SGridItem: typeof import('./components/grid/grid-item').default
+    SIcon: typeof import('./components/icon/icon').default
+    SImage: typeof import('./components/image/image').default
+    SIndexes: typeof import('./components/indexes/indexes').default
+    SIndexesAnchor: typeof import('./components/indexes/indexes-anchor').default
+    SInfiniteList: typeof import('./components/infinite-list/infinite-list').default
+    SInput: typeof import('./components/input/input').default
+    SKeyboard: typeof import('./components/keyboard/keyboard').default
+    SKeyboardPopout: typeof import('./components/keyboard-popout/keyboard-popout').default
+    SList: typeof import('./components/list/list').default
+    SListItem: typeof import('./components/list/list-item').default
+    SLoadMore: typeof import('./components/load-more/load-more').default
+    SLoading: typeof import('./components/loading/loading').default
+    SMarquee: typeof import('./components/marquee/marquee').default
+    SMenu: typeof import('./components/menu/menu').default
+    SMenuItem: typeof import('./components/menu-item/menu-item').default
+    SMotion: typeof import('./components/motion/motion').default
+    SNavbar: typeof import('./components/navbar/navbar').default
+    SNavbarItem: typeof import('./components/navbar/navbar-item').default
+    SNavbarPit: typeof import('./components/navbar-pit/navbar-pit').default
+    SNoticeBar: typeof import('./components/notice-bar/notice-bar').default
+    SNotify: typeof import('./components/notify/notify').default
+    SOverlay: typeof import('./components/overlay/overlay').default
+    SPagination: typeof import('./components/pagination/pagination').default
+    SPasswordInput: typeof import('./components/password-input/password-input').default
+    SPicker: typeof import('./components/picker/picker').default
+    SPickerInput: typeof import('./components/picker-input/picker-input').default
+    SPickerPopout: typeof import('./components/picker-popout/picker-popout').default
+    SPickerView: typeof import('./components/picker-view/picker-view').default
+    SPickerViewColumn: typeof import('./components/picker-view/picker-view-column').default
+    SPopout: typeof import('./components/popout/popout').default
+    SPopoutInput: typeof import('./components/popout-input/popout-input').default
+    SPopover: typeof import('./components/popover/popover').default
+    SPopup: typeof import('./components/popup/popup').default
+    SPreviewImage: typeof import('./components/preview-image/preview-image').default
+    SProgressBar: typeof import('./components/progress-bar/progress-bar').default
+    SProgressCircle: typeof import('./components/progress-circle/progress-circle').default
+    SPullDownRefresh: typeof import('./components/pull-down-refresh/pull-down-refresh').default
+    SPuzzleVerify: typeof import('./components/puzzle-verify/puzzle-verify').default
+    SQrcode: typeof import('./components/qrcode/qrcode').default
+    SRadio: typeof import('./components/radio/radio').default
+    SRadioGroup: typeof import('./components/radio/radio-group').default
+    SRadioInput: typeof import('./components/radio-input/radio-input').default
+    SRadioPopout: typeof import('./components/radio-popout/radio-popout').default
+    SRate: typeof import('./components/rate/rate').default
+    SReadMore: typeof import('./components/read-more/read-more').default
+    SResult: typeof import('./components/result/result').default
+    SRotateVerify: typeof import('./components/rotate-verify/rotate-verify').default
+    SRow: typeof import('./components/layout/row').default
+    SScrollList: typeof import('./components/scroll-list/scroll-list').default
+    SScrollSpy: typeof import('./components/scroll-spy/scroll-spy').default
+    SScrollSpyAnchor: typeof import('./components/scroll-spy/scroll-spy-anchor').default
+    SSearch: typeof import('./components/search/search').default
+    SSegmented: typeof import('./components/segmented/segmented').default
+    SSegmentedItem: typeof import('./components/segmented/segmented-item').default
+    SSelect: typeof import('./components/select/select').default
+    SSelectInput: typeof import('./components/select-input/select-input').default
+    SSelectOption: typeof import('./components/select/select-option').default
+    SSelectOptionGroup: typeof import('./components/select/select-option-group').default
+    SSelectPopout: typeof import('./components/select-popout/select-popout').default
+    SShareSheet: typeof import('./components/share-sheet/share-sheet').default
+    SShareSheetIcon: typeof import('./components/share-sheet-icon/share-sheet-icon').default
+    SShareSheetItem: typeof import('./components/share-sheet/share-sheet-item').default
+    SShareSheetRow: typeof import('./components/share-sheet/share-sheet-row').default
+    SSidebar: typeof import('./components/sidebar/sidebar').default
+    SSidebarItem: typeof import('./components/sidebar/sidebar-item').default
+    SSignature: typeof import('./components/signature/signature').default
+    SSkeleton: typeof import('./components/skeleton/skeleton').default
+    SSkeletonAvatar: typeof import('./components/skeleton/skeleton-avatar').default
+    SSkeletonBlock: typeof import('./components/skeleton-block/skeleton-block').default
+    SSkeletonParagraph: typeof import('./components/skeleton/skeleton-paragraph').default
+    SSkeletonTitle: typeof import('./components/skeleton/skeleton-title').default
+    SSlideVerify: typeof import('./components/slide-verify/slide-verify').default
+    SSlider: typeof import('./components/slider/slider').default
+    SSpace: typeof import('./components/space/space').default
+    SStatusBar: typeof import('./components/status-bar/status-bar').default
+    SStep: typeof import('./components/steps/step').default
+    SStepper: typeof import('./components/stepper/stepper').default
+    SSteps: typeof import('./components/steps/steps').default
+    SSticky: typeof import('./components/sticky/sticky').default
+    SStickyBox: typeof import('./components/sticky/sticky-box').default
+    SSwipeAction: typeof import('./components/swipe-action/swipe-action').default
+    SSwipeActionGroup: typeof import('./components/swipe-action/swipe-action-group').default
+    SSwiper: typeof import('./components/swiper/swiper').default
+    SSwiperItem: typeof import('./components/swiper/swiper-item').default
+    SSwitch: typeof import('./components/switch/switch').default
+    STab: typeof import('./components/tab/tab').default
+    STabbar: typeof import('./components/tabbar/tabbar').default
+    STabbarItem: typeof import('./components/tabbar/tabbar-item').default
+    STabbarPit: typeof import('./components/tabbar-pit/tabbar-pit').default
+    STable: typeof import('./components/table/table').default
+    STabs: typeof import('./components/tabs/tabs').default
+    STag: typeof import('./components/tag/tag').default
+    SText: typeof import('./components/text/text').default
+    STimeline: typeof import('./components/timeline/timeline').default
+    STimelineItem: typeof import('./components/timeline/timeline-item').default
+    SToast: typeof import('./components/toast/toast').default
+    STree: typeof import('./components/tree/tree').default
+    SUpload: typeof import('./components/upload/upload').default
+    SWaterfall: typeof import('./components/waterfall/waterfall').default
+    SWaterfallItem: typeof import('./components/waterfall/waterfall-item').default
+    SWaterfallLoad: typeof import('./components/waterfall/waterfall-load').default
+    SWatermark: typeof import('./components/watermark/watermark').default
+  }
+}
+
+export {}