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

package/es/modules/picture-cropper/src/CropperFree.vue.d.ts

@@ -0,0 +1,117 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+    };
+    auxiliary: {
+        type: StringConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    isDrag: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    accept: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+    };
+    beforeUpload: {
+        type: FunctionConstructor;
+    };
+    modalTitle: {
+        type: StringConstructor;
+    };
+    uploadText: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    openModal: (data?: unknown, openOnSet?: boolean | undefined) => void;
+    closeModal: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    "update:value": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+    aspectRatio: {
+        type: NumberConstructor;
+    };
+    auxiliary: {
+        type: StringConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    isDrag: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    accept: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+    };
+    beforeUpload: {
+        type: FunctionConstructor;
+    };
+    modalTitle: {
+        type: StringConstructor;
+    };
+    uploadText: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    isDrag: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/es/modules/picture-cropper/src/CropperFree.vue.mjs

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import CropperFree_vue_vue_type_script_setup_true_name_CropperPhoto_lang_default from "./CropperFree.vue_vue_type_script_setup_true_name_CropperPhoto_lang.mjs";
+import './CropperFree.vue_vue_type_style_index_0_scoped_015ef4a4_lang.css';/* empty css                                                                  */
+//#region src/modules/picture-cropper/src/CropperFree.vue
+var CropperFree_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CropperFree_vue_vue_type_script_setup_true_name_CropperPhoto_lang_default, [["__scopeId", "data-v-015ef4a4"]]);
+//#endregion
+export { CropperFree_default as default };

package/es/modules/picture-cropper/src/CropperFree.vue_vue_type_script_setup_true_name_CropperPhoto_lang.mjs

@@ -0,0 +1,170 @@
+import { fileUrlParser } from "../../../hooks/useFile.mjs";
+import "../../../hooks/index.mjs";
+import { useModal as useModal$1 } from "../../global-modal/src/hooks/useModal.mjs";
+import "../../global-modal/index.mjs";
+import CopperFreeModal_default from "./CopperFreeModal.vue.mjs";
+import { createImgPreview } from "../../picture-preview/src/functional.mjs";
+import "../../picture-preview/index.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, resolveComponent, toDisplayString, unref, watch, watchEffect } from "vue";
+import { t } from "@gct-paas/core";
+import { message } from "ant-design-vue";
+import { DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons-vue";
+//#region src/modules/picture-cropper/src/CropperFree.vue?vue&type=script&setup=true&name=CropperPhoto&lang.ts
+var _hoisted_1 = ["src"];
+var _hoisted_2 = {
+	key: 0,
+	class: "iconfont icon-tupian-shili"
+};
+var _hoisted_3 = { class: "prompt" };
+var _hoisted_4 = {
+	key: 0,
+	class: "auxiliary"
+};
+var prefixCls = "cropper-photo";
+var CropperFree_vue_vue_type_script_setup_true_name_CropperPhoto_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CropperFree",
+	props: {
+		value: { type: String },
+		uploadApi: { type: Function },
+		aspectRatio: { type: Number },
+		auxiliary: { type: String },
+		icon: { type: String },
+		isDrag: {
+			type: Boolean,
+			default: false
+		},
+		accept: { type: Array },
+		beforeUpload: { type: Function },
+		modalTitle: { type: String },
+		uploadText: { type: String },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:value", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const sourceValue = ref(props.value || "");
+		const sourceValueForamtted = computed(() => {
+			return sourceValue.value ? fileUrlParser(sourceValue.value) : "";
+		});
+		let previewInstance = {};
+		const [register, { openModal, closeModal }] = useModal$1();
+		const disabled = computed(() => {
+			return props.disabled;
+		});
+		const acceptList = computed(() => {
+			return props.accept?.length ? [...new Set(props.accept?.some((i) => i === "jpg" || i === "jpeg") ? props.accept?.concat(["jpg", "jpeg"]) : props.accept)].map((i) => "image/" + i) : [
+				"image/jpg",
+				"image/jpeg",
+				"image/png"
+			];
+		});
+		watchEffect(() => {
+			sourceValue.value = props.value || "";
+		});
+		watch(() => sourceValue.value, (v) => {
+			emit("update:value", v);
+		});
+		onBeforeUnmount(() => {
+			if (previewInstance) previewInstance.close();
+		});
+		onMounted(() => {
+			const dropzone = document.getElementById("dropzone");
+			dropzone?.addEventListener("dragover", (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			});
+			dropzone?.addEventListener("drop", (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				const file = e.dataTransfer?.files[0];
+				if (file) {
+					if (!acceptList.value.includes(file.type)) {
+						message.warning(t("sys.component.cropper.acceptTip"));
+						return;
+					}
+					openModal(true, { file });
+				}
+			});
+		});
+		function handleUploadSuccess({ source, data }) {
+			sourceValue.value = data;
+			emit("change", {
+				source,
+				data
+			});
+		}
+		function handlePreview() {
+			previewInstance = createImgPreview({ imageList: [sourceValueForamtted.value] });
+		}
+		function handleDelete() {
+			sourceValue.value = "";
+		}
+		const handleClick = () => {
+			openModal();
+		};
+		__expose({
+			openModal: openModal.bind(null, true),
+			closeModal
+		});
+		return (_ctx, _cache) => {
+			const _component_Icon = resolveComponent("Icon");
+			return openBlock(), createElementBlock("div", {
+				id: "dropzone",
+				class: normalizeClass([prefixCls, disabled.value && "not-allow"])
+			}, [sourceValueForamtted.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { class: normalizeClass(`${prefixCls}__wrapper`) }, [createElementVNode("img", { src: sourceValueForamtted.value }, null, 8, _hoisted_1)], 2), createElementVNode("div", { class: normalizeClass(`${prefixCls}__mask`) }, [
+				createVNode(unref(EyeOutlined), {
+					style: { fontSize: 24 },
+					"two-tone-color": "#ffffff",
+					onClick: handlePreview
+				}),
+				createVNode(unref(EditOutlined), {
+					style: { fontSize: 24 },
+					"two-tone-color": "#ffffff",
+					onClick: _cache[0] || (_cache[0] = () => unref(openModal)())
+				}),
+				createVNode(unref(DeleteOutlined), {
+					style: { fontSize: 24 },
+					"two-tone-color": "#ffffff",
+					onClick: handleDelete
+				})
+			], 2)], 64)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(`${prefixCls}__trigger`),
+				onClick: handleClick
+			}, [
+				__props.icon ? (openBlock(), createElementBlock("i", _hoisted_2)) : (openBlock(), createBlock(_component_Icon, {
+					key: 1,
+					icon: "ant-design:plus-outlined",
+					size: 36
+				})),
+				__props.isDrag ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createElementVNode("p", _hoisted_3, toDisplayString(_ctx.$t("sys.pageDesigner.clickOrDragToUpload")), 1), __props.accept ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(`支持${__props.accept?.join("、")}图片格式，大小100KB以内`), 1)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true),
+				!__props.auxiliary ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(unref(t)("sys.clickToDoSth", { sth: unref(t)("sys.add") })), 1)], 64)) : createCommentVNode("", true)
+			], 2)), createVNode(CopperFreeModal_default, {
+				"upload-api": __props.uploadApi,
+				"aspect-ratio": __props.aspectRatio,
+				src: sourceValueForamtted.value,
+				accept: __props.accept,
+				"before-upload": __props.beforeUpload,
+				title: __props.modalTitle,
+				"upload-text": __props.uploadText,
+				onRegister: unref(register),
+				onUploadSuccess: handleUploadSuccess
+			}, null, 8, [
+				"upload-api",
+				"aspect-ratio",
+				"src",
+				"accept",
+				"before-upload",
+				"title",
+				"upload-text",
+				"onRegister"
+			])], 2);
+		};
+	}
+});
+//#endregion
+export { CropperFree_vue_vue_type_script_setup_true_name_CropperPhoto_lang_default as default };

package/es/modules/picture-cropper/src/CropperFree.vue_vue_type_style_index_0_scoped_015ef4a4_lang.css

@@ -0,0 +1,83 @@
+.cropper-photo[data-v-015ef4a4] {
+  display: inline-block;
+  position: relative;
+  width: var(--width, 200px);
+  height: var(--height, 120px);
+  overflow: hidden;
+  text-align: center;
+  cursor: pointer;
+}
+.cropper-photo__trigger[data-v-015ef4a4] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1px dashed var(--gct-color-border);
+  border-radius: 4px;
+  background: #fbfbfc;
+  color: #9b9b9b;
+}
+.cropper-photo__trigger .iconfont[data-v-015ef4a4] {
+  color: #c3c3c3;
+  font-size: 32px;
+}
+.cropper-photo__trigger .ant-icon[data-v-015ef4a4] {
+  margin-bottom: 3px;
+  color: #666;
+}
+.cropper-photo__trigger .prompt[data-v-015ef4a4],
+.cropper-photo__trigger .auxiliary[data-v-015ef4a4] {
+  margin: 0;
+}
+.cropper-photo__trigger .prompt[data-v-015ef4a4] {
+  color: #797a7d;
+}
+.cropper-photo__trigger .auxiliary[data-v-015ef4a4] {
+  color: #c3c3c3;
+}
+.cropper-photo__mask[data-v-015ef4a4] {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s;
+  border-radius: 4px;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+.cropper-photo__mask .anticon[data-v-015ef4a4] {
+  margin-right: 20px;
+}
+.cropper-photo__mask .anticon[data-v-015ef4a4]:last-child {
+  margin-right: 0;
+}
+.cropper-photo__mask[data-v-015ef4a4]:hover {
+  opacity: 40;
+}
+.cropper-photo__wrapper[data-v-015ef4a4] {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 4px;
+}
+.cropper-photo__wrapper img[data-v-015ef4a4] {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.not-allow[data-v-015ef4a4] {
+  cursor: default;
+  pointer-events: none;
+}
+.defult-img[data-v-015ef4a4] {
+  position: absolute;
+  z-index: 2;
+  border: 1px solid #d9d9d9;
+  background: #fafafa;
+}

package/es/modules/picture-preview/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ImagePreview } from './src/picture-preview.vue';
+export { createImgPreview } from './src/functional';

package/es/modules/picture-preview/index.mjs

@@ -0,0 +1,2 @@
+import "./src/picture-preview.vue.mjs";
+import "./src/functional.mjs";

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

@@ -0,0 +1,60 @@
+import { PropType } from 'vue';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    show: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    imageList: {
+        type: PropType<string[]>;
+        default: null;
+    };
+    index: {
+        type: PropType<number>;
+        default: number;
+    };
+    scaleStep: {
+        type: PropType<number>;
+    };
+    defaultWidth: {
+        type: PropType<number>;
+    };
+    maskClosable: {
+        type: PropType<boolean>;
+    };
+    rememberState: {
+        type: PropType<boolean>;
+    };
+}>, () => false | import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("img-load" | "img-error")[], "img-load" | "img-error", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    show: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    imageList: {
+        type: PropType<string[]>;
+        default: null;
+    };
+    index: {
+        type: PropType<number>;
+        default: number;
+    };
+    scaleStep: {
+        type: PropType<number>;
+    };
+    defaultWidth: {
+        type: PropType<number>;
+    };
+    maskClosable: {
+        type: PropType<boolean>;
+    };
+    rememberState: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    "onImg-load"?: ((...args: any[]) => any) | undefined;
+    "onImg-error"?: ((...args: any[]) => any) | undefined;
+}>, {
+    index: number;
+    imageList: string[];
+    show: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

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