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

package/es/modules/picture-cropper/src/CopperModal.vue_vue_type_style_index_0_scoped_ee086999_lang.css

@@ -0,0 +1,71 @@
+.gct-cropper-am[data-v-ee086999] {
+  display: flex;
+}
+.gct-cropper-am-left[data-v-ee086999],
+.gct-cropper-am-right[data-v-ee086999] {
+  height: 340px;
+}
+.gct-cropper-am-left[data-v-ee086999] {
+  width: 400px;
+}
+.gct-cropper-am-right[data-v-ee086999] {
+  width: 150px;
+}
+.gct-cropper-am-cropper[data-v-ee086999] {
+  position: relative;
+  width: 360px;
+  height: 360px;
+  background: #eee;
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
+  background-position: 0 0,
+      12px 12px;
+  background-size: 24px 24px;
+}
+.gct-cropper-am-toolbar[data-v-ee086999] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 360px;
+  margin-top: 10px;
+}
+.gct-cropper-am-preview[data-v-ee086999] {
+  width: 220px;
+  height: 220px;
+  margin: 0 auto;
+  overflow: hidden;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 50%;
+}
+.gct-cropper-am-preview img[data-v-ee086999] {
+  width: 100%;
+  height: 100%;
+}
+.gct-cropper-am-group[data-v-ee086999] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+  margin-top: 8px;
+  padding-top: 8px;
+}
+.empty[data-v-ee086999] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-ee086999] {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-ee086999] .ant-upload-list {
+  width: 100%;
+  height: 100%;
+}
+.empty span[data-v-ee086999] .ant-upload-list .ant-upload-select-picture-card {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,96 @@
+import { CSSProperties, PropType } from 'vue';
+import { default as Cropper } from 'cropperjs';
+type Options = Cropper.Options;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    alt: {
+        type: StringConstructor;
+    };
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    realTimePreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    crossorigin: {
+        type: PropType<"" | "anonymous" | "use-credentials" | undefined>;
+        default: undefined;
+    };
+    imageStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    options: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+}>, {
+    getClass: import('vue').ComputedRef<import('vue').ClassValue[]>;
+    imgElRef: import('vue').Ref<HTMLImageElement | null | undefined, HTMLImageElement | null | undefined>;
+    getWrapperStyle: import('vue').ComputedRef<CSSProperties>;
+    getImageStyle: import('vue').ComputedRef<CSSProperties>;
+    isReady: import('vue').Ref<boolean, boolean>;
+    croppered: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("ready" | "cropend" | "cropendError")[], "ready" | "cropend" | "cropendError", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    alt: {
+        type: StringConstructor;
+    };
+    circled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    realTimePreview: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    crossorigin: {
+        type: PropType<"" | "anonymous" | "use-credentials" | undefined>;
+        default: undefined;
+    };
+    imageStyle: {
+        type: PropType<CSSProperties>;
+        default: () => {};
+    };
+    options: {
+        type: PropType<Options>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onCropend?: ((...args: any[]) => any) | undefined;
+    onCropendError?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: string | number;
+    height: string | number;
+    options: Options;
+    circled: boolean;
+    realTimePreview: boolean;
+    crossorigin: "" | "anonymous" | "use-credentials" | undefined;
+    imageStyle: CSSProperties;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,25 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import Cropper_vue_vue_type_script_lang_default from "./Cropper.vue_vue_type_script_lang.mjs";
+import './Cropper.vue_vue_type_style_index_0_lang.css';/* empty css                                              */
+import { createElementBlock, createElementVNode, normalizeClass, normalizeStyle, openBlock, vShow, withDirectives } from "vue";
+//#region src/modules/picture-cropper/src/Cropper.vue
+var _hoisted_1 = [
+	"src",
+	"alt",
+	"crossorigin"
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass(_ctx.getClass),
+		style: normalizeStyle(_ctx.getWrapperStyle)
+	}, [withDirectives(createElementVNode("img", {
+		ref: "imgElRef",
+		src: _ctx.src,
+		alt: _ctx.alt,
+		crossorigin: _ctx.crossorigin,
+		style: normalizeStyle(_ctx.getImageStyle)
+	}, null, 12, _hoisted_1), [[vShow, _ctx.isReady]])], 6);
+}
+var Cropper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Cropper_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+//#endregion
+export { Cropper_default as default };

package/es/modules/picture-cropper/src/Cropper.vue_vue_type_script_lang.mjs

@@ -0,0 +1,171 @@
+import { computed, defineComponent, onMounted, onUnmounted, ref, unref } from "vue";
+import { useNamespace } from "@gct-paas/core";
+import { useDebounceFn } from "@vueuse/core";
+//#region src/modules/picture-cropper/src/Cropper.vue?vue&type=script&lang.ts
+var defaultOptions = {
+	aspectRatio: 1,
+	zoomable: true,
+	zoomOnTouch: true,
+	zoomOnWheel: true,
+	cropBoxMovable: true,
+	cropBoxResizable: true,
+	toggleDragModeOnDblclick: true,
+	autoCrop: true,
+	background: true,
+	highlight: true,
+	center: true,
+	responsive: true,
+	restore: true,
+	checkCrossOrigin: true,
+	checkOrientation: true,
+	scalable: true,
+	modal: true,
+	guides: true,
+	movable: true,
+	rotatable: true
+};
+var Cropper_vue_vue_type_script_lang_default = defineComponent({
+	name: "CropperImage",
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+		alt: { type: String },
+		circled: {
+			type: Boolean,
+			default: false
+		},
+		realTimePreview: {
+			type: Boolean,
+			default: true
+		},
+		height: {
+			type: [String, Number],
+			default: "360px"
+		},
+		width: {
+			type: [String, Number],
+			default: "360px"
+		},
+		crossorigin: {
+			type: String,
+			default: void 0
+		},
+		imageStyle: {
+			type: Object,
+			default: () => ({})
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: [
+		"cropend",
+		"ready",
+		"cropendError"
+	],
+	setup(props, { attrs, emit }) {
+		const imgElRef = ref();
+		const cropper = ref();
+		const isReady = ref(false);
+		const ns = useNamespace("cropper-image");
+		const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
+		const getImageStyle = computed(() => {
+			return {
+				height: props.height,
+				width: props.width,
+				maxWidth: "100%",
+				...props.imageStyle
+			};
+		});
+		const getClass = computed(() => {
+			return [
+				ns.b(),
+				attrs.class,
+				{ [ns.m("circled")]: props.circled }
+			];
+		});
+		const getWrapperStyle = computed(() => {
+			return {
+				height: `${props.height}`.replace(/px/, "") + "px",
+				width: `${props.width}`.replace(/px/, "") + "px"
+			};
+		});
+		onMounted(init);
+		onUnmounted(() => {
+			cropper.value?.destroy();
+		});
+		async function init() {
+			const imgEl = unref(imgElRef);
+			if (!imgEl) return;
+			const [{ default: CropperCtor }] = await Promise.all([import("cropperjs"), import("cropperjs/dist/cropper.css")]);
+			cropper.value = new CropperCtor(imgEl, {
+				...defaultOptions,
+				ready: () => {
+					isReady.value = true;
+					realTimeCroppered();
+					emit("ready", cropper.value);
+				},
+				crop() {
+					debounceRealTimeCroppered();
+				},
+				zoom() {
+					debounceRealTimeCroppered();
+				},
+				cropmove() {
+					debounceRealTimeCroppered();
+				},
+				...props.options
+			});
+		}
+		function realTimeCroppered() {
+			props.realTimePreview && croppered();
+		}
+		function croppered() {
+			if (!cropper.value) return;
+			let imgInfo = cropper.value.getData();
+			(props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas()).toBlob((blob) => {
+				if (!blob) return;
+				let fileReader = new FileReader();
+				fileReader.readAsDataURL(blob);
+				fileReader.onloadend = (e) => {
+					emit("cropend", {
+						imgBase64: e.target?.result ?? "",
+						imgInfo
+					});
+				};
+				fileReader.onerror = () => {
+					emit("cropendError");
+				};
+			}, "image/png");
+		}
+		function getRoundedCanvas() {
+			const sourceCanvas = cropper.value.getCroppedCanvas();
+			const canvas = document.createElement("canvas");
+			const context = canvas.getContext("2d");
+			const width = sourceCanvas.width;
+			const height = sourceCanvas.height;
+			canvas.width = width;
+			canvas.height = height;
+			context.imageSmoothingEnabled = true;
+			context.drawImage(sourceCanvas, 0, 0, width, height);
+			context.globalCompositeOperation = "destination-in";
+			context.beginPath();
+			context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+			context.fill();
+			return canvas;
+		}
+		return {
+			getClass,
+			imgElRef,
+			getWrapperStyle,
+			getImageStyle,
+			isReady,
+			croppered
+		};
+	}
+});
+//#endregion
+export { Cropper_vue_vue_type_script_lang_default as default };

package/es/modules/picture-cropper/src/Cropper.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,4 @@
+.gct-cropper-image--circled .cropper-view-box,
+.gct-cropper-image--circled .cropper-face {
+  border-radius: 50%;
+}

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

@@ -0,0 +1,61 @@
+import { PropType } from 'vue';
+import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    value: {
+        type: StringConstructor;
+    };
+    showBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    btnProps: {
+        type: PropType<ButtonProps>;
+    };
+    btnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+}>, {
+    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<{
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    value: {
+        type: StringConstructor;
+    };
+    showBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    btnProps: {
+        type: PropType<ButtonProps>;
+    };
+    btnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    uploadApi: {
+        type: PropType<(params: UploadFileData) => Promise<void>>;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: string | number;
+    showBtn: boolean;
+    btnText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import CropperAvatar_vue_vue_type_script_setup_true_name_CropperAvatar_lang_default from "./CropperAvatar.vue_vue_type_script_setup_true_name_CropperAvatar_lang.mjs";
+import './CropperAvatar.vue_vue_type_style_index_0_scoped_af219c4c_lang.css';/* empty css                                                                    */
+//#region src/modules/picture-cropper/src/CropperAvatar.vue
+var CropperAvatar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CropperAvatar_vue_vue_type_script_setup_true_name_CropperAvatar_lang_default, [["__scopeId", "data-v-af219c4c"]]);
+//#endregion
+export { CropperAvatar_default as default };

package/es/modules/picture-cropper/src/CropperAvatar.vue_vue_type_script_setup_true_name_CropperAvatar_lang.mjs

@@ -0,0 +1,116 @@
+import { transformUrl } 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 CopperModal_default from "./CopperModal.vue.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, resolveComponent, toDisplayString, unref, watch, watchEffect, withCtx } from "vue";
+import { t, useNamespace } from "@gct-paas/core";
+import { EditOutlined } from "@ant-design/icons-vue";
+//#region src/modules/picture-cropper/src/CropperAvatar.vue?vue&type=script&setup=true&name=CropperAvatar&lang.ts
+var _hoisted_1 = ["src"];
+var CropperAvatar_vue_vue_type_script_setup_true_name_CropperAvatar_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CropperAvatar",
+	props: {
+		width: {
+			type: [String, Number],
+			default: "200px"
+		},
+		value: { type: String },
+		showBtn: {
+			type: Boolean,
+			default: true
+		},
+		btnProps: { type: Object },
+		btnText: {
+			type: String,
+			default: ""
+		},
+		uploadApi: { type: Function }
+	},
+	emits: ["update:value", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const defaultSrc = ref("/extras-assets/images/default_avatar.png");
+		const sourceValue = ref(transformUrl(props.value) || "");
+		const sourceUrlValue = ref(props.value || "");
+		const ns = useNamespace("cropper-avatar");
+		const [register, { openModal, closeModal }] = useModal$1();
+		const getClass = computed(() => [ns.b()]);
+		const getWidth = computed(() => `${props.width}`.replace(/px/, "") + "px");
+		const getIconWidth = computed(() => parseInt(`${props.width}`.replace(/px/, "")) / 2 + "px");
+		const getStyle = computed(() => ({ width: unref(getWidth) }));
+		const getImageWrapperStyle = computed(() => ({
+			width: unref(getWidth),
+			height: unref(getWidth)
+		}));
+		watchEffect(() => {
+			sourceValue.value = transformUrl(props.value) || "";
+			sourceUrlValue.value = props.value || "";
+		});
+		watch(() => sourceUrlValue.value, (v) => {
+			emit("update:value", v);
+		});
+		function handleUploadSuccess({ source, data }) {
+			sourceValue.value = transformUrl(data);
+			sourceUrlValue.value = data;
+			emit("change", {
+				source,
+				data
+			});
+		}
+		const handleClick = () => {
+			openModal();
+		};
+		__expose({
+			openModal: openModal.bind(null, true),
+			closeModal
+		});
+		return (_ctx, _cache) => {
+			const _component_a_button = resolveComponent("a-button");
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(getClass.value),
+				style: normalizeStyle(getStyle.value)
+			}, [
+				createElementVNode("div", {
+					class: normalizeClass(unref(ns).b("image-wrapper")),
+					style: normalizeStyle(getImageWrapperStyle.value),
+					onClick: handleClick
+				}, [createElementVNode("div", {
+					class: normalizeClass(unref(ns).b("image-mask")),
+					style: normalizeStyle(getImageWrapperStyle.value)
+				}, [createVNode(unref(EditOutlined), {
+					style: normalizeStyle({
+						width: getIconWidth.value,
+						height: getIconWidth.value
+					}),
+					"two-tone-color": "#d6d6d6"
+				}, null, 8, ["style"])], 6), createElementVNode("img", {
+					src: __props.value ? sourceValue.value : defaultSrc.value,
+					alt: "avatar"
+				}, null, 8, _hoisted_1)], 6),
+				__props.showBtn ? (openBlock(), createBlock(_component_a_button, mergeProps({
+					key: 0,
+					class: unref(ns).b("upload-btn")
+				}, __props.btnProps, { onClick: unref(openModal) }), {
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.btnText ? __props.btnText : unref(t)("sys.component.cropper.selectImage")), 1)]),
+					_: 1
+				}, 16, ["class", "onClick"])) : createCommentVNode("", true),
+				createVNode(CopperModal_default, {
+					"upload-api": __props.uploadApi,
+					src: sourceValue.value,
+					"source-url-value": sourceUrlValue.value,
+					onRegister: unref(register),
+					onUploadSuccess: handleUploadSuccess
+				}, null, 8, [
+					"upload-api",
+					"src",
+					"source-url-value",
+					"onRegister"
+				])
+			], 6);
+		};
+	}
+});
+//#endregion
+export { CropperAvatar_vue_vue_type_script_setup_true_name_CropperAvatar_lang_default as default };

package/es/modules/picture-cropper/src/CropperAvatar.vue_vue_type_style_index_0_scoped_af219c4c_lang.css

@@ -0,0 +1,39 @@
+.gct-cropper-avatar[data-v-af219c4c] {
+  display: inline-block;
+  text-align: center;
+}
+.gct-cropper-avatar-image-wrapper[data-v-af219c4c] {
+  overflow: hidden;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 50%;
+  background: var(--gct-color-bg-1);
+  cursor: pointer;
+  position: relative;
+}
+.gct-cropper-avatar-image-wrapper img[data-v-af219c4c] {
+  width: 100%;
+}
+.gct-cropper-avatar-image-mask[data-v-af219c4c] {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  transition: opacity 0.4s;
+  border: inherit;
+  border-radius: inherit;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  left: -1px;
+  top: -1px;
+}
+.gct-cropper-avatar-image-mask[data-v-af219c4c] svg {
+  margin: auto;
+  width: 24px;
+  height: 24px;
+}
+.gct-cropper-avatar-image-mask[data-v-af219c4c]:hover {
+  opacity: 40;
+}
+.gct-cropper-avatar-upload-btn[data-v-af219c4c] {
+  margin: 10px auto;
+}