@extclp/vexip-ui/es/components/collapse/collapse-transition.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"collapse-transition.mjs","sources":["../../../components/collapse/collapse-transition.ts"],"sourcesContent":["import { Transition, defineComponent, h, renderSlot } from 'vue'\n\nimport { emitEvent, useProps } from '@vexip-ui/config'\nimport { collapseTransitionProps } from './props'\n\nexport default defineComponent({\n  name: 'CollapseTransition',\n  props: collapseTransitionProps,\n  emits: [],\n  setup(_props, { slots }) {\n    const props = useProps('collapseTransition', _props, {\n      appear: false,\n      mode: {\n        default: 'default',\n        validator: value => ['in-out', 'out-in', 'default'].includes(value)\n      },\n      horizontal: false,\n      duration: {\n        default: 250,\n        validator: (value: number) => value >= 200\n      },\n      timing: null,\n      fadeEffect: false,\n      reverse: false\n    })\n\n    let enterStage: 'before' | 'in' | null = null\n    let leaveStage: 'before' | 'in' | null = null\n\n    return () => {\n      if (props.disabled) {\n        return renderSlot(slots, 'default')\n      }\n\n      const duration = props.duration\n      const timing = props.timing || 'ease-in-out'\n\n      let height: 'maxWidth' | 'maxHeight' = 'maxHeight'\n      let paddingTop: 'paddingTop' | 'paddingLeft' = 'paddingTop'\n      let paddingBottom: 'paddingRight' | 'paddingBottom' = 'paddingBottom'\n      let marginTop: 'marginTop' | 'marginLeft' = 'marginTop'\n      let marginBottom: 'marginRight' | 'marginBottom' = 'marginBottom'\n      let scrollHeight: 'scrollHeight' | 'scrollWidth' = 'scrollHeight'\n      let transition = `\n        max-height ${duration}ms ${timing},\n        padding-top ${duration}ms ${timing},\n        padding-bottom ${duration}ms ${timing},\n        margin-top ${duration}ms ${timing},\n        margin-bottom ${duration}ms ${timing}\n      `\n\n      if (props.horizontal) {\n        height = 'maxWidth'\n        paddingTop = 'paddingLeft'\n        paddingBottom = 'paddingRight'\n        marginTop = 'marginLeft'\n        marginBottom = 'marginRight'\n        scrollHeight = 'scrollWidth'\n        transition = `\n          max-width ${duration}ms ${timing},\n          padding-inline-start ${duration}ms ${timing},\n          padding-inline-end ${duration}ms ${timing},\n          margin-inline-start ${duration}ms ${timing},\n          margin-inline-end ${duration}ms ${timing}\n        `\n      }\n\n      if (props.fadeEffect) {\n        transition = `\n          ${transition},\n          opacity ${duration}ms ease\n        `\n      }\n\n      const enterRecord: Partial<CSSStyleDeclaration> = {}\n      const leaveRecord: Partial<CSSStyleDeclaration> = {}\n\n      return h(\n        Transition,\n        {\n          appear: props.appear,\n          mode: props.mode,\n          onBeforeEnter($el) {\n            if (enterStage) return\n\n            enterStage = 'before'\n            const el = $el as HTMLElement\n\n            enterRecord.paddingTop = el.style[paddingTop]\n            enterRecord.paddingBottom = el.style[paddingBottom]\n            enterRecord.marginTop = el.style[marginTop]\n            enterRecord.marginBottom = el.style[marginBottom]\n            enterRecord.transition = el.style.transition\n            enterRecord.boxSizing = el.style.boxSizing\n            enterRecord.opacity = el.style.opacity\n\n            el.style.transition = transition\n\n            if (!props.reverse) {\n              el.style[height] = '0'\n              el.style[paddingTop] = '0'\n              el.style[paddingBottom] = '0'\n              el.style[marginTop] = '0'\n              el.style[marginBottom] = '0'\n              el.style.boxSizing = 'content-box'\n\n              if (props.fadeEffect) {\n                el.style.opacity = '0'\n              }\n            }\n\n            emitEvent(props.onBeforeEnter, $el)\n          },\n          onEnter($el) {\n            if (enterStage === 'in') return\n\n            enterStage = 'in'\n            const el = $el as HTMLElement\n\n            enterRecord.overflow = el.style.overflow\n            el.style.overflow = 'hidden'\n\n            if (el[scrollHeight] !== 0) {\n              el.style[height] = `${el[scrollHeight]}px`\n            } else {\n              el.style[height] = ''\n            }\n\n            el.style[paddingTop] = enterRecord.paddingTop!\n            el.style[paddingBottom] = enterRecord.paddingBottom!\n            el.style[marginTop] = enterRecord.marginTop!\n            el.style[marginBottom] = enterRecord.marginBottom!\n\n            if (!props.reverse) {\n              if (props.fadeEffect) {\n                el.style.opacity = enterRecord.opacity!\n              }\n            } else {\n              // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n              el[scrollHeight]\n\n              el.style[height] = '0'\n              el.style[paddingTop] = '0'\n              el.style[paddingBottom] = '0'\n              el.style[marginTop] = '0'\n              el.style[marginBottom] = '0'\n              el.style.boxSizing = 'content-box'\n\n              if (props.fadeEffect) {\n                el.style.opacity = '0'\n              }\n            }\n\n            emitEvent(props.onEnter, $el)\n          },\n          onAfterEnter($el) {\n            const el = $el as HTMLElement\n\n            el.style.transition = enterRecord.transition || ''\n\n            if (!props.reverse) {\n              el.style[height] = ''\n              el.style.overflow = enterRecord.overflow!\n              el.style.boxSizing = enterRecord.boxSizing!\n            }\n\n            enterStage = null\n            emitEvent(props.onAfterEnter, $el)\n          },\n          onEnterCancelled($el) {\n            const el = $el as HTMLElement\n\n            el.style.transition = enterRecord.transition || ''\n            el.style[height] = ''\n            el.style.overflow = enterRecord.overflow!\n            el.style.boxSizing = enterRecord.boxSizing!\n\n            enterStage = null\n            emitEvent(props.onEnterCancelled, $el)\n          },\n          onBeforeLeave($el) {\n            if (leaveStage) return\n\n            leaveStage = 'before'\n            const el = $el as HTMLElement\n\n            leaveRecord.paddingTop = el.style[paddingTop]\n            leaveRecord.paddingBottom = el.style[paddingBottom]\n            leaveRecord.marginTop = el.style[marginTop]\n            leaveRecord.marginBottom = el.style[marginBottom]\n            leaveRecord.overflow = el.style.overflow\n            leaveRecord.boxSizing = el.style.boxSizing\n            leaveRecord.opacity = el.style.opacity\n\n            el.style[height] = `${el[scrollHeight]}px`\n            el.style.overflow = 'hidden'\n\n            emitEvent(props.onBeforeLeave, $el)\n          },\n          onLeave($el) {\n            if (leaveStage === 'in') return\n\n            leaveStage = 'in'\n            const el = $el as HTMLElement\n\n            if (el[scrollHeight] !== 0) {\n              leaveRecord.transition = el.style.transition\n\n              el.style.transition = transition\n\n              el.style[height] = '0'\n              el.style[paddingTop] = '0'\n              el.style[paddingBottom] = '0'\n              el.style[marginTop] = '0'\n              el.style[marginBottom] = '0'\n\n              if (props.fadeEffect) {\n                el.style.opacity = '0'\n              }\n            }\n\n            emitEvent(props.onLeave, $el)\n          },\n          onAfterLeave($el) {\n            const el = $el as HTMLElement\n\n            el.style[height] = ''\n            el.style[paddingTop] = leaveRecord.paddingTop!\n            el.style[paddingBottom] = leaveRecord.paddingBottom!\n            el.style[marginTop] = leaveRecord.marginTop!\n            el.style[marginBottom] = leaveRecord.marginBottom!\n            el.style.overflow = leaveRecord.overflow!\n            el.style.transition = leaveRecord.transition || ''\n            el.style.boxSizing = leaveRecord.boxSizing!\n            el.style.opacity = leaveRecord.opacity!\n\n            leaveStage = null\n            emitEvent(props.onAfterLeave, $el)\n          },\n          onLeaveCancelled($el) {\n            const el = $el as HTMLElement\n\n            el.style[height] = ''\n            el.style[paddingTop] = leaveRecord.paddingTop!\n            el.style[paddingBottom] = leaveRecord.paddingBottom!\n            el.style[marginTop] = leaveRecord.marginTop!\n            el.style[marginBottom] = leaveRecord.marginBottom!\n            el.style.overflow = leaveRecord.overflow!\n            el.style.transition = leaveRecord.transition || ''\n            el.style.boxSizing = leaveRecord.boxSizing!\n            el.style.opacity = leaveRecord.opacity!\n\n            leaveStage = null\n            emitEvent(props.onLeaveCancelled, $el)\n          }\n        },\n        slots\n      )\n    }\n  }\n})\n"],"names":["CollapseTransition","defineComponent","collapseTransitionProps","_props","slots","props","useProps","value","enterStage","leaveStage","renderSlot","duration","timing","height","paddingTop","paddingBottom","marginTop","marginBottom","scrollHeight","transition","enterRecord","leaveRecord","h","Transition","$el","el","emitEvent"],"mappings":";;;AAKA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,MAAMC,GAAQ,EAAE,OAAAC,KAAS;AACjB,UAAAC,IAAQC,EAAS,sBAAsBH,GAAQ;AAAA,MACnD,QAAQ;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,OAAS,CAAC,UAAU,UAAU,SAAS,EAAE,SAASI,CAAK;AAAA,MACpE;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,QACR,SAAS;AAAA,QACT,WAAW,CAACA,MAAkBA,KAAS;AAAA,MACzC;AAAA,MACA,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,SAAS;AAAA,IAAA,CACV;AAED,QAAIC,IAAqC,MACrCC,IAAqC;AAEzC,WAAO,MAAM;AACX,UAAIJ,EAAM;AACD,eAAAK,EAAWN,GAAO,SAAS;AAGpC,YAAMO,IAAWN,EAAM,UACjBO,IAASP,EAAM,UAAU;AAE/B,UAAIQ,IAAmC,aACnCC,IAA2C,cAC3CC,IAAkD,iBAClDC,IAAwC,aACxCC,IAA+C,gBAC/CC,IAA+C,gBAC/CC,IAAa;AAAA,qBACFR,CAAQ,MAAMC,CAAM;AAAA,sBACnBD,CAAQ,MAAMC,CAAM;AAAA,yBACjBD,CAAQ,MAAMC,CAAM;AAAA,qBACxBD,CAAQ,MAAMC,CAAM;AAAA,wBACjBD,CAAQ,MAAMC,CAAM;AAAA;AAGtC,MAAIP,EAAM,eACCQ,IAAA,YACIC,IAAA,eACGC,IAAA,gBACJC,IAAA,cACGC,IAAA,eACAC,IAAA,eACFC,IAAA;AAAA,sBACCR,CAAQ,MAAMC,CAAM;AAAA,iCACTD,CAAQ,MAAMC,CAAM;AAAA,+BACtBD,CAAQ,MAAMC,CAAM;AAAA,gCACnBD,CAAQ,MAAMC,CAAM;AAAA,8BACtBD,CAAQ,MAAMC,CAAM;AAAA,YAIxCP,EAAM,eACKc,IAAA;AAAA,YACTA,CAAU;AAAA,oBACFR,CAAQ;AAAA;AAItB,YAAMS,IAA4C,CAAC,GAC7CC,IAA4C,CAAC;AAE5C,aAAAC;AAAA,QACLC;AAAA,QACA;AAAA,UACE,QAAQlB,EAAM;AAAA,UACd,MAAMA,EAAM;AAAA,UACZ,cAAcmB,GAAK;AACjB,gBAAIhB,EAAY;AAEH,YAAAA,IAAA;AACb,kBAAMiB,IAAKD;AAEC,YAAAJ,EAAA,aAAaK,EAAG,MAAMX,CAAU,GAChCM,EAAA,gBAAgBK,EAAG,MAAMV,CAAa,GACtCK,EAAA,YAAYK,EAAG,MAAMT,CAAS,GAC9BI,EAAA,eAAeK,EAAG,MAAMR,CAAY,GACpCG,EAAA,aAAaK,EAAG,MAAM,YACtBL,EAAA,YAAYK,EAAG,MAAM,WACrBL,EAAA,UAAUK,EAAG,MAAM,SAE/BA,EAAG,MAAM,aAAaN,GAEjBd,EAAM,YACNoB,EAAA,MAAMZ,CAAM,IAAI,KAChBY,EAAA,MAAMX,CAAU,IAAI,KACpBW,EAAA,MAAMV,CAAa,IAAI,KACvBU,EAAA,MAAMT,CAAS,IAAI,KACnBS,EAAA,MAAMR,CAAY,IAAI,KACzBQ,EAAG,MAAM,YAAY,eAEjBpB,EAAM,eACRoB,EAAG,MAAM,UAAU,OAIbC,EAAArB,EAAM,eAAemB,CAAG;AAAA,UACpC;AAAA,UACA,QAAQA,GAAK;AACX,gBAAIhB,MAAe,KAAM;AAEZ,YAAAA,IAAA;AACb,kBAAMiB,IAAKD;AAEC,YAAAJ,EAAA,WAAWK,EAAG,MAAM,UAChCA,EAAG,MAAM,WAAW,UAEhBA,EAAGP,CAAY,MAAM,IACvBO,EAAG,MAAMZ,CAAM,IAAI,GAAGY,EAAGP,CAAY,CAAC,OAEnCO,EAAA,MAAMZ,CAAM,IAAI,IAGlBY,EAAA,MAAMX,CAAU,IAAIM,EAAY,YAChCK,EAAA,MAAMV,CAAa,IAAIK,EAAY,eACnCK,EAAA,MAAMT,CAAS,IAAII,EAAY,WAC/BK,EAAA,MAAMR,CAAY,IAAIG,EAAY,cAEhCf,EAAM,WAMToB,EAAGP,CAAY,GAEZO,EAAA,MAAMZ,CAAM,IAAI,KAChBY,EAAA,MAAMX,CAAU,IAAI,KACpBW,EAAA,MAAMV,CAAa,IAAI,KACvBU,EAAA,MAAMT,CAAS,IAAI,KACnBS,EAAA,MAAMR,CAAY,IAAI,KACzBQ,EAAG,MAAM,YAAY,eAEjBpB,EAAM,eACRoB,EAAG,MAAM,UAAU,QAfjBpB,EAAM,eACLoB,EAAA,MAAM,UAAUL,EAAY,UAkBzBM,EAAArB,EAAM,SAASmB,CAAG;AAAA,UAC9B;AAAA,UACA,aAAaA,GAAK;AAChB,kBAAMC,IAAKD;AAER,YAAAC,EAAA,MAAM,aAAaL,EAAY,cAAc,IAE3Cf,EAAM,YACNoB,EAAA,MAAMZ,CAAM,IAAI,IAChBY,EAAA,MAAM,WAAWL,EAAY,UAC7BK,EAAA,MAAM,YAAYL,EAAY,YAGtBZ,IAAA,MACHkB,EAAArB,EAAM,cAAcmB,CAAG;AAAA,UACnC;AAAA,UACA,iBAAiBA,GAAK;AACpB,kBAAMC,IAAKD;AAER,YAAAC,EAAA,MAAM,aAAaL,EAAY,cAAc,IAC7CK,EAAA,MAAMZ,CAAM,IAAI,IAChBY,EAAA,MAAM,WAAWL,EAAY,UAC7BK,EAAA,MAAM,YAAYL,EAAY,WAEpBZ,IAAA,MACHkB,EAAArB,EAAM,kBAAkBmB,CAAG;AAAA,UACvC;AAAA,UACA,cAAcA,GAAK;AACjB,gBAAIf,EAAY;AAEH,YAAAA,IAAA;AACb,kBAAMgB,IAAKD;AAEC,YAAAH,EAAA,aAAaI,EAAG,MAAMX,CAAU,GAChCO,EAAA,gBAAgBI,EAAG,MAAMV,CAAa,GACtCM,EAAA,YAAYI,EAAG,MAAMT,CAAS,GAC9BK,EAAA,eAAeI,EAAG,MAAMR,CAAY,GACpCI,EAAA,WAAWI,EAAG,MAAM,UACpBJ,EAAA,YAAYI,EAAG,MAAM,WACrBJ,EAAA,UAAUI,EAAG,MAAM,SAE/BA,EAAG,MAAMZ,CAAM,IAAI,GAAGY,EAAGP,CAAY,CAAC,MACtCO,EAAG,MAAM,WAAW,UAEVC,EAAArB,EAAM,eAAemB,CAAG;AAAA,UACpC;AAAA,UACA,QAAQA,GAAK;AACX,gBAAIf,MAAe,KAAM;AAEZ,YAAAA,IAAA;AACb,kBAAMgB,IAAKD;AAEP,YAAAC,EAAGP,CAAY,MAAM,MACXG,EAAA,aAAaI,EAAG,MAAM,YAElCA,EAAG,MAAM,aAAaN,GAEnBM,EAAA,MAAMZ,CAAM,IAAI,KAChBY,EAAA,MAAMX,CAAU,IAAI,KACpBW,EAAA,MAAMV,CAAa,IAAI,KACvBU,EAAA,MAAMT,CAAS,IAAI,KACnBS,EAAA,MAAMR,CAAY,IAAI,KAErBZ,EAAM,eACRoB,EAAG,MAAM,UAAU,OAIbC,EAAArB,EAAM,SAASmB,CAAG;AAAA,UAC9B;AAAA,UACA,aAAaA,GAAK;AAChB,kBAAMC,IAAKD;AAER,YAAAC,EAAA,MAAMZ,CAAM,IAAI,IAChBY,EAAA,MAAMX,CAAU,IAAIO,EAAY,YAChCI,EAAA,MAAMV,CAAa,IAAIM,EAAY,eACnCI,EAAA,MAAMT,CAAS,IAAIK,EAAY,WAC/BI,EAAA,MAAMR,CAAY,IAAII,EAAY,cAClCI,EAAA,MAAM,WAAWJ,EAAY,UAC7BI,EAAA,MAAM,aAAaJ,EAAY,cAAc,IAC7CI,EAAA,MAAM,YAAYJ,EAAY,WAC9BI,EAAA,MAAM,UAAUJ,EAAY,SAElBZ,IAAA,MACHiB,EAAArB,EAAM,cAAcmB,CAAG;AAAA,UACnC;AAAA,UACA,iBAAiBA,GAAK;AACpB,kBAAMC,IAAKD;AAER,YAAAC,EAAA,MAAMZ,CAAM,IAAI,IAChBY,EAAA,MAAMX,CAAU,IAAIO,EAAY,YAChCI,EAAA,MAAMV,CAAa,IAAIM,EAAY,eACnCI,EAAA,MAAMT,CAAS,IAAIK,EAAY,WAC/BI,EAAA,MAAMR,CAAY,IAAII,EAAY,cAClCI,EAAA,MAAM,WAAWJ,EAAY,UAC7BI,EAAA,MAAM,aAAaJ,EAAY,cAAc,IAC7CI,EAAA,MAAM,YAAYJ,EAAY,WAC9BI,EAAA,MAAM,UAAUJ,EAAY,SAElBZ,IAAA,MACHiB,EAAArB,EAAM,kBAAkBmB,CAAG;AAAA,UAAA;AAAA,QAEzC;AAAA,QACApB;AAAA,MACF;AAAA,IACF;AAAA,EAAA;AAEJ,CAAC;"}