import{_ as I}from"./Button.277f0e3d.js";import{B as V}from"./Img.3ed82b4b.js";import{B as w}from"./Input.94feb999.js";import{S as C}from"./Plus.c9b03af8.js";import{_ as z}from"./Trash.87a7d946.js";import"./translations.5e539ab1.js";import{u as B,a as _}from"./runtime-dom.esm-bundler.dc49ee3e.js";import{_ as M}from"./_plugin-vue_export-helper.eefbdd86.js";import{_ as s}from"./default-i18n.368c2d5c.js";import{a6 as i,o as g,c as P,_ as f,l as r,a2 as u,a1 as k,a4 as U,a7 as N,$ as T,ae as L}from"./runtime-core.esm-bundler.ce5add0b.js";const a="all-in-one-seo-pack";let n={};const p={emits:["update:modelValue"],components:{BaseButton:I,BaseImg:V,BaseInput:w,SvgCirclePlus:C,SvgTrash:z},props:{baseSize:{type:String,default:"medium"},imgPreviewMaxHeight:{type:String,default:"525px"},imgPreviewMaxWidth:{type:String,default:"525px"},description:String,modelValue:{type:String,default:""},useDebounce:{type:Boolean,default:!0}},data(){return{strings:{description:s("Minimum size: 112px x 112px, The image must be in JPG, PNG, GIF, SVG, or WEBP format.",a),pasteYourImageUrl:s("Paste your image URL or select a new image",a),remove:s("Remove",a),uploadOrSelectImage:s("Upload or Select Image",a)}}},computed:{iconWidth(){return this.baseSize==="small"?"16":"20"}},methods:{setImgSrc(e){this.$emit("update:modelValue",e)},openUploadModal(){n=window.wp.media({title:s("Choose Image",a),button:{text:s("Choose Image",a)},multiple:!1}),n.on("select",()=>{const e=n.state().get("selection").first().toJSON();this.setImgSrc((e==null?void 0:e.url)||null)}),n.on("close",()=>{n.detach()}),this.$nextTick(()=>{n.open()})}}},S=()=>{B(e=>({"08fa21f4":e.imgPreviewMaxHeight,"715e614e":e.imgPreviewMaxWidth}))},h=p.setup;p.setup=h?(e,o)=>(S(),h(e,o)):S;const W={class:"image-upload"},G=["innerHTML"];function H(e,o,t,A,c,l){const v=i("svg-trash"),d=i("base-button"),b=i("base-input"),x=i("svg-circle-plus"),y=i("base-img");return g(),P("div",{class:L(["aioseo-image-uploader",{"aioseo-image-uploader--has-image":!!t.modelValue}])},[f("div",W,[r(b,{size:t.baseSize,modelValue:t.modelValue,placeholder:c.strings.pasteYourImageUrl,onChange:o[1]||(o[1]=m=>l.setImgSrc(m))},{"append-icon":u(()=>[t.modelValue?(g(),k(d,{key:0,size:t.baseSize,class:"remove-image",type:"gray",onClick:o[0]||(o[0]=_(m=>l.setImgSrc(null),["prevent"]))},{default:u(()=>[r(v,{width:l.iconWidth},null,8,["width"])]),_:1},8,["size"])):U("",!0)]),_:1},8,["size","modelValue","placeholder"]),r(d,{size:t.baseSize,class:"insert-image",type:"black",onClick:o[2]||(o[2]=_(m=>l.openUploadModal(),["prevent"]))},{default:u(()=>[r(x,{width:"14"}),N(" "+T(c.strings.uploadOrSelectImage),1)]),_:1},8,["size"])]),f("div",{class:"aioseo-description",innerHTML:t.description||c.strings.description},null,8,G),r(y,{class:"image-preview",src:t.modelValue,debounce:t.useDebounce},null,8,["src","debounce"])],2)}const Q=M(p,[["render",H],["__scopeId","data-v-83168015"]]);export{Q as C};
