@maas/vue-autosize/dist/index.umd.cjs

Vue component that interpolates its size according to its content

(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u.Vue={},u.Vue))})(this,function(u,n){"use strict";function O(e){return n.getCurrentScope()?(n.onScopeDispose(e),!0):!1}const Q=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const I=e=>e!=null;function M(e){return Array.isArray(e)?e:[e]}const S=Q?window:void 0;function y(e){var o;const i=n.toValue(e);return(o=i==null?void 0:i.$el)!=null?o:i}function C(){const e=n.shallowRef(!1),o=n.getCurrentInstance();return o&&n.onMounted(()=>{e.value=!0},o),e}function v(e){const o=C();return n.computed(()=>(o.value,!!e()))}function k(e,o,i={}){const{window:r=S,...h}=i;let s;const c=v(()=>r&&"MutationObserver"in r),d=()=>{s&&(s.disconnect(),s=void 0)},f=n.computed(()=>{const t=n.toValue(e),a=M(t).map(y).filter(I);return new Set(a)}),w=n.watch(()=>f.value,t=>{d(),c.value&&t.size&&(s=new MutationObserver(o),t.forEach(a=>s.observe(a,h)))},{immediate:!0,flush:"post"}),m=()=>s==null?void 0:s.takeRecords(),l=()=>{w(),d()};return O(l),{isSupported:c,stop:l,takeRecords:m}}function A(e,o,i={}){const{window:r=S,...h}=i;let s;const c=v(()=>r&&"ResizeObserver"in r),d=()=>{s&&(s.disconnect(),s=void 0)},f=n.computed(()=>{const l=n.toValue(e);return Array.isArray(l)?l.map(t=>y(t)):[y(l)]}),w=n.watch(f,l=>{if(d(),c.value&&r){s=new ResizeObserver(o);for(const t of l)t&&s.observe(t,h)}},{immediate:!0,flush:"post"}),m=()=>{d(),w()};return O(m),{isSupported:c,stop:m}}function b(e){const{from:o,to:i,duration:r,callback:h,easing:s=f=>f*(2-f)}=e;let c;function d(f){c||(c=f);const w=Math.min(1,(f-c)/r),m=s(w),l=o+(i-o)*m;h(l),w<1&&requestAnimationFrame(d)}requestAnimationFrame(d)}function N(e){return e}function T(e){return e*e}function z(e){return e*(2-e)}function V(e){return e<.5?2*e*e:-1+(4-2*e)*e}function B(e,o=1.25){return 1+(e-1)*(e-1)*((o+1)*(e-1)+o)}function R(e){return e*e*e}function E(e){return--e*e*e+1}function P(e){return e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1}function W(e){return e*e*e*e}function $(e){return 1- --e*e*e*e}function H(e){return e<.5?8*e*e*e*e:1-8*--e*e*e*e}function L(e){return e*e*e*e*e}function q(e){return 1+--e*e*e*e*e}function F(e){return e<.5?16*e*e*e*e*e:1+16*--e*e*e*e*e}const j=n.defineComponent({__name:"AutoSize",props:{width:{type:Boolean,default:!0},height:{type:Boolean,default:!0},duration:{default:150},easing:{type:Function,default:z}},setup(e){const o=n.useTemplateRef("el"),i=n.reactive({width:0,height:0}),r=n.reactive({width:0,height:0}),h=n.ref(void 0),s=n.computed(()=>{if(i)switch(!0){case(e.width&&e.height):return{width:`${r.width}px`,height:`${r.height}px`};case e.width:return{width:`${r.width}px`};case e.height:return{height:`${r.height}px`};default:return}else return});function c(t){const a=parseFloat(t)??0;return isNaN(a)?0:a}const d=n.computed(()=>{if(o.value){const t=getComputedStyle(o.value,null),a=c(t.getPropertyValue("padding-top")),g=c(t.getPropertyValue("padding-left")),p=c(t.getPropertyValue("padding-right")),D=c(t.getPropertyValue("padding-bottom"));return{x:p+g,y:a+D}}else return{x:0,y:0}}),f=n.computed(()=>{var t;return Array.from(((t=o.value)==null?void 0:t.childNodes)??[]).find(a=>a instanceof HTMLElement)}),w=n.computed(()=>{var a,g;let t={};return e.width&&(t={...t,width:"var(--auto-size-width)","--auto-size-width":(a=s.value)==null?void 0:a.width}),e.height&&(t={...t,height:"var(--auto-size-height)","--auto-size-height":(g=s.value)==null?void 0:g.height}),t});k(o,t=>{const a=t.flatMap(p=>[...p.addedNodes]).find(p=>p instanceof HTMLElement),g=t.flatMap(p=>[...p.addedNodes]).find(p=>p instanceof Comment);a&&(h.value=a),g&&!f.value&&(h.value=void 0,i.width=0,i.height=0),f.value||(h.value=void 0,i.width=0,i.height=0)},{childList:!0}),A(h,t=>{const g=t[0].borderBoxSize[0];i.width=g.inlineSize+d.value.x,i.height=g.blockSize+d.value.y}),n.onMounted(()=>{if(o.value){const t=o.value.querySelectorAll("*"),a=Array.from(t).find(g=>g instanceof HTMLElement);a&&a instanceof HTMLElement?(h.value=a,i.width=a.offsetWidth+d.value.x,i.height=a.offsetHeight+d.value.y):(i.width=0,i.height=0),m(i.width),l(i.height)}});function m(t){isNaN(t)||(r.width=t)}function l(t){isNaN(t)||(r.height=t)}return n.watch(()=>i.width,t=>{t!==r.width&&b({from:r.width,to:t,duration:e.duration,easing:e.easing,callback:m})}),n.watch(()=>i.height,t=>{t!==r.width&&b({from:r.height,to:t,duration:e.duration,easing:e.easing,callback:l})}),(t,a)=>(n.openBlock(),n.createElementBlock("div",{ref:"el",class:"auto-size",style:n.normalizeStyle(w.value)},[n.renderSlot(t.$slots,"default")],4))}});u.AutoSize=j,u.easeInCubic=R,u.easeInOutCubic=P,u.easeInOutQuad=V,u.easeInOutQuart=H,u.easeInOutQuint=F,u.easeInQuad=T,u.easeInQuart=W,u.easeInQuint=L,u.easeOutBack=B,u.easeOutCubic=E,u.easeOutQuad=z,u.easeOutQuart=$,u.easeOutQuint=q,u.interpolate=b,u.linear=N,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});