208 lines
7.4 KiB
JavaScript
208 lines
7.4 KiB
JavaScript
import { defineComponent, ref, computed, mergeProps, withCtx, unref, createTextVNode, toDisplayString, watch, useSSRContext } from 'vue';
|
|
import { ssrRenderAttrs, ssrRenderComponent, ssrInterpolate } from 'vue/server-renderer';
|
|
import { B as BasicButton } from './BasicButton-7YIRCRg8.mjs';
|
|
import { a as useConfigStore, _ as __nuxt_component_0 } from './server.mjs';
|
|
import { CircleStencil } from 'vue-advanced-cropper';
|
|
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';
|
|
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "PictureEditor",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
src: {},
|
|
aspectRatio: { default: 1 },
|
|
initialSize: {},
|
|
round: { type: Boolean, default: false },
|
|
movable: { type: Boolean, default: true },
|
|
resizable: { type: Boolean, default: true },
|
|
outputSize: {},
|
|
quality: { default: 0.92 },
|
|
mime: { default: "image/jpeg" }
|
|
},
|
|
emits: ["onCropped"],
|
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
const props = __props;
|
|
const emit = __emit;
|
|
const cropperRef = ref(null);
|
|
function needsCacheBust(u) {
|
|
if (!u) return false;
|
|
const lower = u.toLowerCase();
|
|
return lower.startsWith("http://") || lower.startsWith("https://");
|
|
}
|
|
computed(() => {
|
|
const src = props.src ?? "";
|
|
if (!needsCacheBust(src)) return src;
|
|
const sep = src.includes("?") ? "&" : "?";
|
|
return `${src}${sep}cb=${Date.now()}`;
|
|
});
|
|
computed(() => props.round ? CircleStencil : void 0);
|
|
computed(() => {
|
|
if (props.initialSize == null) return void 0;
|
|
if (typeof props.initialSize === "number") {
|
|
return { width: props.initialSize, height: props.initialSize };
|
|
}
|
|
return props.initialSize;
|
|
});
|
|
const forceKey = ref(0);
|
|
watch(() => [props.aspectRatio, props.round], () => {
|
|
forceKey.value++;
|
|
});
|
|
function getOutputSize() {
|
|
if (props.outputSize == null) return void 0;
|
|
if (typeof props.outputSize === "number") {
|
|
return { width: props.outputSize, height: props.outputSize };
|
|
}
|
|
return props.outputSize;
|
|
}
|
|
function crop() {
|
|
const c = cropperRef.value;
|
|
if (!c) return;
|
|
const size = getOutputSize() ?? void 0;
|
|
const result = c.getResult({
|
|
size,
|
|
mime: props.mime,
|
|
quality: props.quality
|
|
});
|
|
if (result?.canvas) {
|
|
emit("onCropped", result.canvas.toDataURL(props.mime, props.quality));
|
|
}
|
|
}
|
|
function setStencilSize(width, height) {
|
|
forceKey.value++;
|
|
}
|
|
__expose({ crop, setStencilSize });
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
const _component_ClientOnly = __nuxt_component_0;
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "cropper-wrapper" }, _attrs))}>`);
|
|
_push(ssrRenderComponent(_component_ClientOnly, null, {}, _parent));
|
|
_push(`</div>`);
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup$1 = _sfc_main$1.setup;
|
|
_sfc_main$1.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/PictureEditor.vue");
|
|
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
|
};
|
|
const PictureEditor = Object.assign(_sfc_main$1, { __name: "PictureEditor" });
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "CropperModal",
|
|
__ssrInlineRender: true,
|
|
props: {
|
|
visible: { type: Boolean },
|
|
img: {},
|
|
mode: {},
|
|
fixedMovable: { type: Boolean },
|
|
resizable: { type: Boolean },
|
|
aspectRatio: {},
|
|
initialSize: {},
|
|
round: { type: Boolean },
|
|
outputSize: {},
|
|
mime: {},
|
|
quality: {}
|
|
},
|
|
emits: ["update:visible", "cropped"],
|
|
setup(__props, { emit: __emit }) {
|
|
const props = __props;
|
|
const emit = __emit;
|
|
const config = useConfigStore();
|
|
const cropper = ref(null);
|
|
const open = computed({
|
|
get: () => props.visible,
|
|
set: (val) => emit("update:visible", val)
|
|
});
|
|
const aspectRatio = computed(() => props.aspectRatio ?? null);
|
|
const initialSize = computed(() => {
|
|
return props.mode === "fixed" ? props.initialSize ?? 340 : void 0;
|
|
});
|
|
const round = computed(() => props.round ?? false);
|
|
const outputSize = computed(() => props.outputSize ?? 400);
|
|
const mime = computed(() => props.mime ?? "image/jpeg");
|
|
const quality = computed(() => props.quality ?? 0.92);
|
|
const isResizable = computed(() => {
|
|
if (typeof props.resizable === "boolean") return props.resizable;
|
|
return (props.mode ?? "free") !== "fixed";
|
|
});
|
|
const isMovable = computed(() => {
|
|
if ((props.mode ?? "free") === "fixed") {
|
|
return props.fixedMovable;
|
|
}
|
|
return true;
|
|
});
|
|
function onCropped(val) {
|
|
emit("cropped", val);
|
|
open.value = false;
|
|
}
|
|
function handleSave() {
|
|
cropper.value?.crop();
|
|
}
|
|
return (_ctx, _push, _parent, _attrs) => {
|
|
if (open.value && _ctx.img) {
|
|
_push(`<div${ssrRenderAttrs(mergeProps({ class: "fixed inset-0 z-1000 backdrop-blur-md bg-black/80 p-2" }, _attrs))} data-v-cbfb9555><div class="w-full" data-v-cbfb9555>`);
|
|
_push(ssrRenderComponent(PictureEditor, {
|
|
ref_key: "cropper",
|
|
ref: cropper,
|
|
class: "h-90vh absolute top-0 right-0 left-0 sm:right-auto sm:left-auto w-full sm:w-fit sm:justify-self-center",
|
|
src: _ctx.img,
|
|
initialSize: initialSize.value,
|
|
round: round.value,
|
|
resizable: isResizable.value,
|
|
movable: isMovable.value,
|
|
aspectRatio: aspectRatio.value,
|
|
outputSize: outputSize.value,
|
|
mime: mime.value,
|
|
quality: quality.value,
|
|
onOnCropped: onCropped
|
|
}, null, _parent));
|
|
_push(`</div><div class="p-2 absolute bottom-0 right-0 left-0 grid gap-2 gap-2 sm:w-50vw sm:justify-self-center sm:flex" data-v-cbfb9555>`);
|
|
_push(ssrRenderComponent(BasicButton, {
|
|
block: "",
|
|
onClick: handleSave,
|
|
type: "primary"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`${ssrInterpolate(unref(config).useString("submit"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("submit")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(ssrRenderComponent(BasicButton, {
|
|
block: "",
|
|
danger: "",
|
|
onClick: ($event) => open.value = false,
|
|
class: "sm:!w-3/4"
|
|
}, {
|
|
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
|
if (_push2) {
|
|
_push2(`${ssrInterpolate(unref(config).useString("close"))}`);
|
|
} else {
|
|
return [
|
|
createTextVNode(toDisplayString(unref(config).useString("close")), 1)
|
|
];
|
|
}
|
|
}),
|
|
_: 1
|
|
}, _parent));
|
|
_push(`</div></div>`);
|
|
} else {
|
|
_push(`<!---->`);
|
|
}
|
|
};
|
|
}
|
|
});
|
|
const _sfc_setup = _sfc_main.setup;
|
|
_sfc_main.setup = (props, ctx) => {
|
|
const ssrContext = useSSRContext();
|
|
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/CropperModal.vue");
|
|
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
|
};
|
|
const __nuxt_component_3 = /* @__PURE__ */ Object.assign(_export_sfc(_sfc_main, [["__scopeId", "data-v-cbfb9555"]]), { __name: "CropperModal" });
|
|
|
|
export { __nuxt_component_3 as _ };
|