fine-true/lib/popover/index.js

A small and beautiful Vue3 version of the UI Library

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("./../utils/withInstall"));else if("function"==typeof define&&define.amd)define(["vue","./../utils/withInstall"],t);else{var r="object"==typeof exports?t(require("vue"),require("./../utils/withInstall")):t(e.vue,e["./../utils/withInstall"]);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,((e,t)=>(()=>{"use strict";var r={1677:e=>{e.exports=t},748:t=>{t.exports=e}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var l=o[e]={exports:{}};return r[e](l,l.exports,a),l.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{a.r(l),a.d(l,{default:()=>m});var e=a(748),t=Symbol("popover-provide-key"),r=["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],o=["click","hover","focus","contextmenu"];function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,t||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const v=(0,e.defineComponent)({props:{show:{type:Boolean,default:!1},width:{type:[Number,String],default:"auto"},minWidth:{type:Number,default:150},top:{type:Number,default:0},left:{type:Number,default:0},onDidUpdated:{type:Function},placement:{type:String,default:"bottom",validator:e=>r.includes(e)},sourceClass:{type:String,default:""}},setup(r,o){var{slots:a}=o,l=(0,e.ref)(),n=(0,e.inject)(t),i=e=>{var t;null===(t=n.getSourceEl)||void 0===t||t.call(n,e)};(0,e.onMounted)((()=>{i(l.value)}));var v=(0,e.computed)((()=>({[r.sourceClass]:!!r.sourceClass,["fine-popover-".concat(r.placement)]:!0})));return(0,e.watch)((()=>r.show),(t=>{t&&(0,e.nextTick)((()=>{i(l.value)}))})),(0,e.onUpdated)((()=>{r.show&&(0,e.nextTick)((()=>{var e;null===(e=r.onDidUpdated)||void 0===e||e.call(r)}))})),()=>{var{show:t,width:o,top:n,left:i,minWidth:d}=r,s={width:"string"==typeof o?o:"".concat(o,"px"),minWidth:d+"px",top:n+"px",left:i+"px"};return(0,e.withDirectives)((0,e.createVNode)("div",{ref:e=>l.value=e,style:s,class:u({"fine-popover":!0},v.value)},[(0,e.createVNode)("div",{class:"fine-popover-content"},[(0,e.createVNode)("div",{class:"fine-popover-arrow"},null),(0,e.createVNode)("div",{class:"fine-popover-inner"},[a.default&&a.default()])])]),[[e.vShow,t]])}}}),d=(0,e.defineComponent)({name:"target-slot",setup(r,o){var{slots:a}=o,l=(0,e.ref)(),n=(0,e.inject)(t);return(0,e.onMounted)((()=>{var e,t,r,o=null===(e=l.value)||void 0===e?void 0:e.childNodes;if(o&&o.length){var a=(e=>{var t=e.length;if(!t)return null;for(;t--;){var r=e[t];if(1===r.nodeType)return r}return null})(o),u=null===(t=l.value)||void 0===t?void 0:t.parentNode,i=l.value.nextSibling;[...o].forEach((e=>{null==u||u.insertBefore(e,i)})),null==u||u.removeChild(l.value),a&&(null==n||null===(r=n.getTargetEl)||void 0===r||r.call(n,a))}})),()=>(0,e.createVNode)("div",{ref:e=>l.value=e},[a.default&&a.default()])}});var s=(e,t,r)=>{null==e||e.addEventListener(t,r)},c=(e,t,r)=>{null==e||e.removeEventListener(t,r)};const p=(0,e.defineComponent)({name:"fine-popover",inheritAttrs:!1,emits:["update:modelValue"],props:{modelValue:{type:Boolean},width:{type:[Number,String],default:"auto"},minWidth:{type:Number,default:150},placement:{type:String,default:"bottom",validator:e=>r.includes(e)},trigger:{type:String,default:"hover",validator:e=>o.includes(e)},sourceClass:{type:String,default:""}},setup(r,o){var{slots:a,emit:l}=o;(0,e.provide)(t,{getSourceEl(e){u.value=e},getTargetEl(e){n.value=e}});var n=(0,e.ref)(null),u=(0,e.ref)(null),i=(0,e.ref)(0),p=(0,e.ref)(0),f=(0,e.ref)(!1),m=(0,e.ref)(!1);(0,e.watch)(f,(e=>{e&&(m.value=e)}));var b=()=>{f.value=!0,l("update:modelValue",!0)},g=()=>{f.value=!1,l("update:modelValue",!1)};(0,e.watch)((()=>r.modelValue),(e=>{f.value=e}),{immediate:!0});var h=()=>{},y={};(0,e.onMounted)((()=>{h=()=>{var e;if(n.value){var t=n.value.getBoundingClientRect(),{top:o,bottom:a,left:l,width:v,height:d}=t;if(0!==v||0!==d){if(u.value){var{width:s,height:c}=null===(e=u.value)||void 0===e?void 0:e.getBoundingClientRect();switch(r.placement){case"bottom":p.value=l+(v-s)/2,i.value=a;break;case"bottom-start":p.value=l,i.value=a;break;case"bottom-end":p.value=l+v-s,i.value=a;break;case"top":p.value=l+(v-s)/2,i.value=o-c;break;case"top-start":p.value=l,i.value=o-c;break;case"top-end":p.value=l+v-s,i.value=o-c}}}else console.log("heighei")}};var t,o=t=>{var o;"contextmenu"===r.trigger&&t.preventDefault();var a=t.target;n.value.contains(a)?(b(),(0,e.nextTick)((()=>{(0,e.nextTick)((()=>{h()}))}))):null!==(o=u.value)&&void 0!==o&&o.contains(a)||g()};y.click=o,y.contextmenu=o,y.hover=r=>{clearTimeout(t),b(),(0,e.nextTick)((()=>{(0,e.nextTick)((()=>{h()}))}))},y.mouseleave=e=>{t=setTimeout((()=>{g()}),0)},(e=>{var t=y[e];if("hover"===e){var r=y.mouseleave;s(n.value,"mouseenter",t),s(n.value,"mouseleave",r)}else s(document,e,t)})(r.trigger)})),(0,e.onBeforeUnmount)((()=>{(e=>{var t=y[e];if("hover"===e){var r=y.mouseleave;c(n.value,"mouseenter",t),c(n.value,"mouseleave",r)}else c(document,e,t)})(r.trigger)})),(0,e.watch)([()=>r.placement],(()=>{(0,e.nextTick)((()=>{h()}))})),(0,e.watch)((()=>u.value),(e=>{if(e){h();var t=r.trigger,o=y[t];if("hover"===t){var a=y.mouseleave;s(e,"mouseenter",o),s(e,"mouseleave",a)}}}));var w=()=>{h()};return()=>{var t={width:r.width,minWidth:r.minWidth,left:p.value,top:i.value,show:f.value,onDidUpdated:w,placement:r.placement,sourceClass:r.sourceClass};return(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)(d,null,{default:()=>[a.default&&a.default()]}),m.value&&(0,e.createVNode)(e.Teleport,{to:"body"},{default:()=>[(0,e.createVNode)("div",{class:"fine-popover-source-container"},[(0,e.createVNode)(e.Transition,{name:"fine-fade-scale"},{default:()=>[(0,e.createVNode)(v,t,{default:()=>[a.content&&a.content()]})]})])]})])}}});var f=a(1677);a.n(f)()(p);const m=p})(),l})()));