added version
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
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 _ };
|
||||
Reference in New Issue
Block a user