@gct-paas/core-web 0.1.4-dev.9 → 0.1.5-dev.1

package/es/modules/picture-preview/src/Functional.vue_vue_type_script_lang.mjs

@@ -0,0 +1,287 @@
+import { computed, createTextVNode, createVNode, defineComponent, reactive, ref, unref, watchEffect } from "vue";
+import { CloseOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
+//#region src/modules/picture-preview/src/Functional.vue?vue&type=script&lang.tsx
+var StatueEnum = /* @__PURE__ */ function(StatueEnum) {
+	StatueEnum[StatueEnum["LOADING"] = 0] = "LOADING";
+	StatueEnum[StatueEnum["DONE"] = 1] = "DONE";
+	StatueEnum[StatueEnum["FAIL"] = 2] = "FAIL";
+	return StatueEnum;
+}(StatueEnum || {});
+var props = {
+	show: {
+		type: Boolean,
+		default: false
+	},
+	imageList: {
+		type: Array,
+		default: null
+	},
+	index: {
+		type: Number,
+		default: 0
+	},
+	scaleStep: { type: Number },
+	defaultWidth: { type: Number },
+	maskClosable: { type: Boolean },
+	rememberState: { type: Boolean }
+};
+var prefixCls = "img-preview";
+var Functional_vue_vue_type_script_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ImagePreview",
+	props,
+	emits: ["img-load", "img-error"],
+	setup(props, { expose, emit }) {
+		const stateMap = /* @__PURE__ */ new Map();
+		const imgState = reactive({
+			currentUrl: "",
+			imgScale: 1,
+			imgRotate: 0,
+			imgTop: 0,
+			imgLeft: 0,
+			status: StatueEnum.LOADING,
+			currentIndex: 0,
+			moveX: 0,
+			moveY: 0,
+			show: props.show
+		});
+		const wrapElRef = ref(null);
+		const imgElRef = ref(null);
+		function init() {
+			initMouseWheel();
+			const { index, imageList } = props;
+			if (!imageList || !imageList.length) throw new Error("imageList is undefined");
+			imgState.currentIndex = index;
+			handleIChangeImage(imageList[index]);
+		}
+		function initState() {
+			imgState.imgScale = 1;
+			imgState.imgRotate = 0;
+			imgState.imgTop = 0;
+			imgState.imgLeft = 0;
+		}
+		function initMouseWheel() {
+			const wrapEl = unref(wrapElRef);
+			if (!wrapEl) return;
+			wrapEl.onmousewheel = scrollFunc;
+			document.body.addEventListener("DOMMouseScroll", scrollFunc);
+			document.ondragstart = function() {
+				return false;
+			};
+		}
+		const getScaleStep = computed(() => {
+			const scaleStep = props?.scaleStep ?? 0;
+			if (scaleStep > 0 && scaleStep < 100) return scaleStep / 100;
+			else return imgState.imgScale / 10;
+		});
+		function scrollFunc(e) {
+			e = e || window.event;
+			e.delta = e.wheelDelta || -e.detail;
+			e.preventDefault();
+			if (e.delta > 0) scaleFunc(getScaleStep.value);
+			if (e.delta < 0) scaleFunc(-getScaleStep.value);
+		}
+		function scaleFunc(num) {
+			const MIN_SCALE = .02;
+			const GRA = .1;
+			if (imgState.imgScale <= .2 && num < 0) return;
+			imgState.imgScale += num * GRA;
+			if (imgState.imgScale < 0) imgState.imgScale = MIN_SCALE;
+		}
+		function rotateFunc(deg) {
+			imgState.imgRotate += deg;
+		}
+		function handleMouseUp() {
+			const imgEl = unref(imgElRef);
+			if (!imgEl) return;
+			imgEl.onmousemove = null;
+		}
+		function handleIChangeImage(url) {
+			imgState.status = StatueEnum.LOADING;
+			const img = new Image();
+			img.src = url;
+			img.onload = (e) => {
+				if (imgState.currentUrl !== url) {
+					const ele = e.composedPath();
+					if (props.rememberState) {
+						stateMap.set(imgState.currentUrl, {
+							scale: imgState.imgScale,
+							top: imgState.imgTop,
+							left: imgState.imgLeft,
+							rotate: imgState.imgRotate
+						});
+						const stateInfo = stateMap.get(url);
+						if (stateInfo) {
+							imgState.imgScale = stateInfo.scale;
+							imgState.imgTop = stateInfo.top;
+							imgState.imgRotate = stateInfo.rotate;
+							imgState.imgLeft = stateInfo.left;
+						} else {
+							initState();
+							if (props.defaultWidth) imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
+						}
+					} else if (props.defaultWidth) imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
+					ele && emit("img-load", {
+						index: imgState.currentIndex,
+						dom: ele[0],
+						url
+					});
+				}
+				imgState.currentUrl = url;
+				imgState.status = StatueEnum.DONE;
+			};
+			img.onerror = (e) => {
+				const ele = e.composedPath();
+				ele && emit("img-error", {
+					index: imgState.currentIndex,
+					dom: ele[0],
+					url
+				});
+				imgState.status = StatueEnum.FAIL;
+			};
+		}
+		function handleClose(e) {
+			e && e.stopPropagation();
+			close();
+		}
+		function close() {
+			imgState.show = false;
+			document.body.removeEventListener("DOMMouseScroll", scrollFunc);
+			document.ondragstart = null;
+		}
+		function resume() {
+			initState();
+		}
+		expose({
+			resume,
+			close,
+			prev: handleChange.bind(null, "left"),
+			next: handleChange.bind(null, "right"),
+			setScale: (scale) => {
+				if (scale > 0 && scale <= 10) imgState.imgScale = scale;
+			},
+			setRotate: (rotate) => {
+				imgState.imgRotate = rotate;
+			}
+		});
+		function handleChange(direction) {
+			const { currentIndex } = imgState;
+			const { imageList } = props;
+			if (direction === "left") {
+				imgState.currentIndex -= 1;
+				if (currentIndex <= 0) imgState.currentIndex = imageList.length - 1;
+			}
+			if (direction === "right") {
+				imgState.currentIndex += 1;
+				if (currentIndex >= imageList.length - 1) imgState.currentIndex = 0;
+			}
+			handleIChangeImage(imageList[imgState.currentIndex]);
+		}
+		function handleAddMoveListener(e) {
+			e = e || window.event;
+			imgState.moveX = e.clientX;
+			imgState.moveY = e.clientY;
+			const imgEl = unref(imgElRef);
+			if (imgEl) imgEl.onmousemove = moveFunc;
+		}
+		function moveFunc(e) {
+			e = e || window.event;
+			e.preventDefault();
+			const movementX = e.clientX - imgState.moveX;
+			const movementY = e.clientY - imgState.moveY;
+			imgState.imgLeft += movementX;
+			imgState.imgTop += movementY;
+			imgState.moveX = e.clientX;
+			imgState.moveY = e.clientY;
+		}
+		const getImageStyle = computed(() => {
+			const { imgScale, imgRotate, imgTop, imgLeft } = imgState;
+			return {
+				transform: `scale(${imgScale}) rotate(${imgRotate}deg)`,
+				marginTop: `${imgTop}px`,
+				marginLeft: `${imgLeft}px`,
+				maxWidth: props.defaultWidth ? "unset" : "100%"
+			};
+		});
+		const getIsMultipleImage = computed(() => {
+			const { imageList } = props;
+			return imageList.length > 1;
+		});
+		watchEffect(() => {
+			if (props.show) init();
+			if (props.imageList) initState();
+		});
+		const handleMaskClick = (e) => {
+			if (props.maskClosable && e.target && e.target.classList.contains(`${prefixCls}-content`)) handleClose(e);
+		};
+		const renderClose = () => {
+			return createVNode("div", {
+				"class": `${prefixCls}__close`,
+				"onClick": handleClose
+			}, [createVNode(CloseOutlined, { "class": `${prefixCls}__close-icon` }, null)]);
+		};
+		const renderIndex = () => {
+			if (!unref(getIsMultipleImage)) return null;
+			const { currentIndex } = imgState;
+			const { imageList } = props;
+			return createVNode("div", { "class": `${prefixCls}__index` }, [
+				currentIndex + 1,
+				createTextVNode(" / "),
+				imageList.length
+			]);
+		};
+		const renderController = () => {
+			return createVNode("div", { "class": `${prefixCls}__controller` }, [
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => scaleFunc(-getScaleStep.value)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/unscale.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => scaleFunc(getScaleStep.value)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/scale.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": resume
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/resume.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => rotateFunc(-90)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/unrotate.svg" }, null)]),
+				createVNode("div", {
+					"class": `${prefixCls}__controller-item`,
+					"onClick": () => rotateFunc(90)
+				}, [createVNode("img", { "src": "/extras-assets/svg/preview/p-rotate.svg" }, null)])
+			]);
+		};
+		const renderArrow = (direction) => {
+			if (!unref(getIsMultipleImage)) return null;
+			return createVNode("div", {
+				"class": [`${prefixCls}__arrow`, direction],
+				"onClick": () => handleChange(direction)
+			}, [direction === "left" ? createVNode(LeftOutlined, null, null) : createVNode(RightOutlined, null, null)]);
+		};
+		return () => {
+			return imgState.show && createVNode("div", {
+				"class": prefixCls,
+				"ref": wrapElRef,
+				"onMouseup": handleMouseUp,
+				"onClick": handleMaskClick
+			}, [createVNode("div", { "class": `${prefixCls}-content` }, [
+				createVNode("img", {
+					"style": unref(getImageStyle),
+					"class": [`${prefixCls}-image`, imgState.status === StatueEnum.DONE ? "" : "hidden"],
+					"ref": imgElRef,
+					"src": imgState.currentUrl,
+					"onMousedown": handleAddMoveListener
+				}, null),
+				renderClose(),
+				renderIndex(),
+				renderController(),
+				renderArrow("left"),
+				renderArrow("right")
+			])]);
+		};
+	}
+});
+//#endregion
+export { Functional_vue_vue_type_script_lang_default as default };

package/es/modules/picture-preview/src/Functional.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,101 @@
+.img-preview {
+  position: fixed;
+  z-index: 9999;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  user-select: none;
+}
+.img-preview-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--gct-color-white);
+}
+.img-preview-image {
+  transition: transform 0.3s;
+  cursor: pointer;
+}
+.img-preview__close {
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  transition: all 0.2s;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: var(--gct-color-white);
+  cursor: pointer;
+}
+.img-preview__close-icon {
+  position: absolute;
+  top: 46px;
+  left: 16px;
+  font-size: 16px;
+}
+.img-preview__close:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.img-preview__index {
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  padding: 0 22px;
+  transform: translateX(-50%);
+  border-radius: 15px;
+  background: rgba(109, 109, 109, 0.6);
+  font-size: 16px;
+}
+.img-preview__controller {
+  display: flex;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  justify-content: center;
+  width: 260px;
+  height: 44px;
+  margin-left: -139px;
+  padding: 0 22px;
+  border-radius: 22px;
+  background: rgba(109, 109, 109, 0.6);
+}
+.img-preview__controller-item {
+  display: flex;
+  height: 100%;
+  padding: 0 9px;
+  transition: all 0.2s;
+  font-size: 24px;
+  cursor: pointer;
+}
+.img-preview__controller-item:hover {
+  transform: scale(1.2);
+}
+.img-preview__controller-item img {
+  width: 1em;
+}
+.img-preview__arrow {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  transition: all 0.2s;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  font-size: 28px;
+  cursor: pointer;
+}
+.img-preview__arrow:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.img-preview__arrow.left {
+  left: 50px;
+}
+.img-preview__arrow.right {
+  right: 50px;
+}

package/es/modules/picture-preview/src/functional.d.ts

@@ -0,0 +1,2 @@
+import { Options } from './typing';
+export declare function createImgPreview(options: Options): Record<string, any> | null | undefined;

package/es/modules/picture-preview/src/functional.mjs

@@ -0,0 +1,19 @@
+import Functional_default from "./Functional.vue.mjs";
+import { createVNode, render } from "vue";
+//#region src/modules/picture-preview/src/functional.ts
+var instance = null;
+function createImgPreview(options) {
+	const propsData = {};
+	const container = document.createElement("div");
+	Object.assign(propsData, {
+		show: true,
+		index: 0,
+		scaleStep: 100
+	}, options);
+	instance = createVNode(Functional_default, propsData);
+	render(instance, container);
+	document.body.appendChild(container);
+	return instance.component?.exposed;
+}
+//#endregion
+export { createImgPreview };

package/es/modules/picture-preview/src/picture-preview.vue.d.ts

@@ -0,0 +1,51 @@
+import { PropType } from 'vue';
+interface ImageProps {
+    alt?: string;
+    fallback?: string;
+    src: string;
+    width: string | number;
+    height?: string | number;
+    placeholder?: string | boolean;
+    preview?: boolean | {
+        visible?: boolean;
+        onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
+        getContainer: string | HTMLElement | (() => HTMLElement);
+    };
+}
+type ImageItem = string | ImageProps;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    functional: {
+        type: BooleanConstructor;
+    };
+    imageList: {
+        type: PropType<ImageItem[]>;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    functional: {
+        type: BooleanConstructor;
+    };
+    imageList: {
+        type: PropType<ImageItem[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    functional: boolean;
+    imageList: ImageItem[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/modules/picture-preview/src/picture-preview.vue.mjs

@@ -0,0 +1,6 @@
+import picture_preview_vue_vue_type_script_setup_true_lang_default from "./picture-preview.vue_vue_type_script_setup_true_lang.mjs";
+import './picture-preview.vue_vue_type_style_index_0_lang.css';/* empty css                                                      */
+//#region src/modules/picture-preview/src/picture-preview.vue
+var picture_preview_default = picture_preview_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { picture_preview_default as default };

package/es/modules/picture-preview/src/picture-preview.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,49 @@
+import { Fragment, computed, createBlock, createElementBlock, createSlots, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, renderSlot, resolveComponent, unref, withCtx } from "vue";
+import { isString } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+import { Image } from "ant-design-vue";
+//#region src/modules/picture-preview/src/picture-preview.vue?vue&type=script&setup=true&lang.ts
+var picture_preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "picture-preview",
+	props: {
+		functional: { type: Boolean },
+		imageList: {
+			type: Array,
+			default: () => []
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const ns = useNamespace("image-preview");
+		const getImageList = computed(() => {
+			return props.imageList.map((item) => {
+				if (isString(item)) return {
+					src: item,
+					placeholder: false
+				};
+				return item;
+			});
+		});
+		return (_ctx, _cache) => {
+			const _component_PreviewGroup = resolveComponent("PreviewGroup");
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(ns).b()) }, [createVNode(_component_PreviewGroup, null, {
+				default: withCtx(() => [!__props.imageList || _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(getImageList.value, (item) => {
+					return openBlock(), createBlock(unref(Image), mergeProps({
+						key: item.src,
+						ref_for: true
+					}, item), createSlots({ _: 2 }, [item.placeholder ? {
+						name: "placeholder",
+						fn: withCtx(() => [createVNode(unref(Image), mergeProps({ ref_for: true }, item, {
+							src: item.placeholder,
+							preview: false
+						}), null, 16, ["src"])]),
+						key: "0"
+					} : void 0]), 1040);
+				}), 128))]),
+				_: 3
+			})], 2);
+		};
+	}
+});
+//#endregion
+export { picture_preview_vue_vue_type_script_setup_true_lang_default as default };

package/es/modules/picture-preview/src/picture-preview.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-image-preview .ant-image {
+  margin-right: 10px;
+}
+.gct-image-preview .ant-image-preview-operations {
+  background-color: rgba(0, 0, 0, 0.4);
+}

package/es/modules/picture-preview/src/typing.d.ts

@@ -0,0 +1,51 @@
+export interface Options {
+    show?: boolean;
+    imageList: string[];
+    index?: number;
+    scaleStep?: number;
+    defaultWidth?: number;
+    maskClosable?: boolean;
+    rememberState?: boolean;
+    onImgLoad?: ({ index, url, dom, }: {
+        index: number;
+        url: string;
+        dom: HTMLImageElement;
+    }) => void;
+    onImgError?: ({ index, url, dom, }: {
+        index: number;
+        url: string;
+        dom: HTMLImageElement;
+    }) => void;
+}
+export interface Props {
+    show: boolean;
+    instance: Props;
+    imageList: string[];
+    index: number;
+    scaleStep: number;
+    defaultWidth: number;
+    maskClosable: boolean;
+    rememberState: boolean;
+}
+export interface PreviewActions {
+    resume: () => void;
+    close: () => void;
+    prev: () => void;
+    next: () => void;
+    setScale: (scale: number) => void;
+    setRotate: (rotate: number) => void;
+}
+export interface ImageProps {
+    alt?: string;
+    fallback?: string;
+    src: string;
+    width: string | number;
+    height?: string | number;
+    placeholder?: string | boolean;
+    preview?: boolean | {
+        visible?: boolean;
+        onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
+        getContainer: string | HTMLElement | (() => HTMLElement);
+    };
+}
+export type ImageItem = string | ImageProps;

package/es/modules/target-loading/index.mjs

@@ -0,0 +1,3 @@
+import "./src/target-loading.vue.mjs";
+import "./src/createLoading.mjs";
+import "./src/useLoading.mjs";