UNPKG

md-editor-v3

Version:

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...

2 lines (1 loc) 3.17 kB
"use strict";const n=require("vue"),d=require("./config.cjs"),f=require("./vue-tsx.cjs"),E={overlay:{type:[String,Object],default:""},visible:{type:Boolean,default:!1},onChange:{type:Function,default:()=>{}},relative:{type:String,default:"html"},disabled:{type:Boolean,default:void 0}},w=n.defineComponent({name:`${d.prefix}-dropdown`,props:E,setup(e,i){const s=`${d.prefix}-dropdown-hidden`,t=n.reactive({overlayClass:[s],overlayStyle:{},triggerHover:!1,overlayHover:!1}),r=n.ref(),a=n.ref(),v=()=>{if(e.disabled)return!1;t.triggerHover=!0;const o=r.value,l=a.value;if(!o||!l)return;const c=o.getBoundingClientRect(),m=o.offsetTop,H=o.offsetLeft,L=c.height,T=c.width,p=o.getRootNode(),h=p.querySelector(e.relative)?.scrollLeft||0,C=p.querySelector(e.relative)?.clientWidth||0;let u=H-l.offsetWidth/2+T/2-h;u+l.offsetWidth>h+C&&(u=h+C-l.offsetWidth),u<0&&(u=0),t.overlayStyle={...t.overlayStyle,insetBlockStart:m+L+"px",insetInlineStart:u+"px"},e.onChange(!0)},b=()=>{if(e.disabled)return!1;t.overlayHover=!0};n.watch(()=>e.visible,o=>{o?t.overlayClass=t.overlayClass.filter(l=>l!==s):t.overlayClass.push(s)});let S=-1;const g=o=>{r.value===o.target?t.triggerHover=!1:t.overlayHover=!1,clearTimeout(S),S=window.setTimeout(()=>{!t.overlayHover&&!t.triggerHover&&e.onChange(!1)},10)};return n.onMounted(()=>{r.value.addEventListener("mouseenter",v),r.value.addEventListener("mouseleave",g),a.value.addEventListener("mouseenter",b),a.value.addEventListener("mouseleave",g)}),n.onBeforeUnmount(()=>{r.value.removeEventListener("mouseenter",v),r.value.removeEventListener("mouseleave",g),a.value.removeEventListener("mouseenter",b),a.value.removeEventListener("mouseleave",g)}),()=>{const o=f.getSlot({ctx:i}),l=f.getSlot({props:e,ctx:i},"overlay"),c=n.cloneVNode(o instanceof Array?o[0]:o,{ref:r,key:"cloned-dropdown-trigger"}),m=n.createVNode("div",{class:[`${d.prefix}-dropdown`,t.overlayClass],style:t.overlayStyle,ref:a},[n.createVNode("div",{class:`${d.prefix}-dropdown-overlay`},[l instanceof Array?l[0]:l])]);return[c,m]}}}),D={title:{type:String,default:""},visible:{type:Boolean,default:void 0},trigger:{type:[String,Object],default:void 0},onChange:{type:Function,default:void 0},overlay:{type:[String,Object],default:void 0},insert:{type:Function,default:void 0},language:{type:String,default:void 0},theme:{type:String,default:void 0},previewTheme:{type:String,default:void 0},codeTheme:{type:String,default:void 0},disabled:{type:Boolean,default:void 0},showToolbarName:{type:Boolean,default:void 0}},y=n.defineComponent({name:"DropdownToolbar",props:D,emits:["onChange"],setup(e,i){const s=n.inject("editorId"),t=r=>{e.onChange?.(r),i.emit("onChange",r)};return()=>{const r=f.getSlot({props:e,ctx:i},"trigger"),a=f.getSlot({props:e,ctx:i},"overlay"),v=f.getSlot({props:e,ctx:i});return n.createVNode(w,{relative:`#${s}-toolbar-wrapper`,visible:e.visible,onChange:t,overlay:a,disabled:e.disabled},{default:()=>[n.createVNode("button",{class:[`${d.prefix}-toolbar-item`,e.disabled&&`${d.prefix}-disabled`],title:e.title||"",disabled:e.disabled,type:"button"},[v||r])]})}}});y.install=e=>(e.component(y.name,y),e);exports.Dropdown=w;exports.DropdownToolbar=y;