{"version":3,"file":"collapse-transition.mjs","sources":["../../../components/collapse/collapse-transition.ts"],"sourcesContent":["import { Transition, defineComponent, h, renderSlot } from 'vue'\r\n\r\nimport { emitEvent, useProps } from '@vexip-ui/config'\r\nimport { collapseTransitionProps } from './props'\r\n\r\nexport default defineComponent({\r\n  name: 'CollapseTransition',\r\n  props: collapseTransitionProps,\r\n  emits: [],\r\n  setup(_props, { slots }) {\r\n    const props = useProps('collapseTransition', _props, {\r\n      appear: false,\r\n      mode: {\r\n        default: 'default',\r\n        validator: value => ['in-out', 'out-in', 'default'].includes(value),\r\n      },\r\n      horizontal: false,\r\n      duration: {\r\n        default: 250,\r\n        validator: (value: number) => value >= 200,\r\n      },\r\n      timing: null,\r\n      fadeEffect: false,\r\n      reverse: false,\r\n    })\r\n\r\n    let enterStage: 'before' | 'in' | null = null\r\n    let leaveStage: 'before' | 'in' | null = null\r\n\r\n    return () => {\r\n      if (props.disabled) {\r\n        return renderSlot(slots, 'default')\r\n      }\r\n\r\n      const duration = props.duration\r\n      const timing = props.timing || 'ease-in-out'\r\n\r\n      let height: 'maxWidth' | 'maxHeight' = 'maxHeight'\r\n      let paddingTop: 'paddingTop' | 'paddingLeft' = 'paddingTop'\r\n      let paddingBottom: 'paddingRight' | 'paddingBottom' = 'paddingBottom'\r\n      let marginTop: 'marginTop' | 'marginLeft' = 'marginTop'\r\n      let marginBottom: 'marginRight' | 'marginBottom' = 'marginBottom'\r\n      let scrollHeight: 'scrollHeight' | 'scrollWidth' = 'scrollHeight'\r\n      let transition = `\r\n        max-height ${duration}ms ${timing},\r\n        padding-top ${duration}ms ${timing},\r\n        padding-bottom ${duration}ms ${timing},\r\n        margin-top ${duration}ms ${timing},\r\n        margin-bottom ${duration}ms ${timing}\r\n      `\r\n\r\n      if (props.horizontal) {\r\n        height = 'maxWidth'\r\n        paddingTop = 'paddingLeft'\r\n        paddingBottom = 'paddingRight'\r\n        marginTop = 'marginLeft'\r\n        marginBottom = 'marginRight'\r\n        scrollHeight = 'scrollWidth'\r\n        transition = `\r\n          max-width ${duration}ms ${timing},\r\n          padding-inline-start ${duration}ms ${timing},\r\n          padding-inline-end ${duration}ms ${timing},\r\n          margin-inline-start ${duration}ms ${timing},\r\n          margin-inline-end ${duration}ms ${timing}\r\n        `\r\n      }\r\n\r\n      if (props.fadeEffect) {\r\n        transition = `\r\n          ${transition},\r\n          opacity ${duration}ms ease\r\n        `\r\n      }\r\n\r\n      const enterRecord: Partial<CSSStyleDeclaration> = {}\r\n      const leaveRecord: Partial<CSSStyleDeclaration> = {}\r\n\r\n      return h(\r\n        Transition,\r\n        {\r\n          appear: props.appear,\r\n          mode: props.mode,\r\n          onBeforeEnter($el) {\r\n            if (enterStage) return\r\n\r\n            enterStage = 'before'\r\n            const el = $el as HTMLElement\r\n\r\n            enterRecord.paddingTop = el.style[paddingTop]\r\n            enterRecord.paddingBottom = el.style[paddingBottom]\r\n            enterRecord.marginTop = el.style[marginTop]\r\n            enterRecord.marginBottom = el.style[marginBottom]\r\n            enterRecord.transition = el.style.transition\r\n            enterRecord.boxSizing = el.style.boxSizing\r\n            enterRecord.opacity = el.style.opacity\r\n\r\n            el.style.transition = transition\r\n\r\n            if (!props.reverse) {\r\n              el.style[height] = '0'\r\n              el.style[paddingTop] = '0'\r\n              el.style[paddingBottom] = '0'\r\n              el.style[marginTop] = '0'\r\n              el.style[marginBottom] = '0'\r\n              el.style.boxSizing = 'content-box'\r\n\r\n              if (props.fadeEffect) {\r\n                el.style.opacity = '0'\r\n              }\r\n            }\r\n\r\n            emitEvent(props.onBeforeEnter, $el)\r\n          },\r\n          onEnter($el) {\r\n            if (enterStage === 'in') return\r\n\r\n            enterStage = 'in'\r\n            const el = $el as HTMLElement\r\n\r\n            enterRecord.overflow = el.style.overflow\r\n            el.style.overflow = 'hidden'\r\n\r\n            if (el[scrollHeight] !== 0) {\r\n              el.style[height] = `${el[scrollHeight]}px`\r\n            } else {\r\n              el.style[height] = ''\r\n            }\r\n\r\n            el.style[paddingTop] = enterRecord.paddingTop!\r\n            el.style[paddingBottom] = enterRecord.paddingBottom!\r\n            el.style[marginTop] = enterRecord.marginTop!\r\n            el.style[marginBottom] = enterRecord.marginBottom!\r\n\r\n            if (!props.reverse) {\r\n              if (props.fadeEffect) {\r\n                el.style.opacity = enterRecord.opacity!\r\n              }\r\n            } else {\r\n              // eslint-disable-next-line @typescript-eslint/no-unused-expressions\r\n              el[scrollHeight]\r\n\r\n              el.style[height] = '0'\r\n              el.style[paddingTop] = '0'\r\n              el.style[paddingBottom] = '0'\r\n              el.style[marginTop] = '0'\r\n              el.style[marginBottom] = '0'\r\n              el.style.boxSizing = 'content-box'\r\n\r\n              if (props.fadeEffect) {\r\n                el.style.opacity = '0'\r\n              }\r\n            }\r\n\r\n            emitEvent(props.onEnter, $el)\r\n          },\r\n          onAfterEnter($el) {\r\n            const el = $el as HTMLElement\r\n\r\n            el.style.transition = enterRecord.transition || ''\r\n\r\n            if (!props.reverse) {\r\n              el.style[height] = ''\r\n              el.style.overflow = enterRecord.overflow!\r\n              el.style.boxSizing = enterRecord.boxSizing!\r\n            }\r\n\r\n            enterStage = null\r\n            emitEvent(props.onAfterEnter, $el)\r\n          },\r\n          onEnterCancelled($el) {\r\n            const el = $el as HTMLElement\r\n\r\n            el.style.transition = enterRecord.transition || ''\r\n            el.style[height] = ''\r\n            el.style.overflow = enterRecord.overflow!\r\n            el.style.boxSizing = enterRecord.boxSizing!\r\n\r\n            enterStage = null\r\n            emitEvent(props.onEnterCancelled, $el)\r\n          },\r\n          onBeforeLeave($el) {\r\n            if (leaveStage) return\r\n\r\n            leaveStage = 'before'\r\n            const el = $el as HTMLElement\r\n\r\n            leaveRecord.paddingTop = el.style[paddingTop]\r\n            leaveRecord.paddingBottom = el.style[paddingBottom]\r\n            leaveRecord.marginTop = el.style[marginTop]\r\n            leaveRecord.marginBottom = el.style[marginBottom]\r\n            leaveRecord.overflow = el.style.overflow\r\n            leaveRecord.boxSizing = el.style.boxSizing\r\n            leaveRecord.opacity = el.style.opacity\r\n\r\n            el.style[height] = `${el[scrollHeight]}px`\r\n            el.style.overflow = 'hidden'\r\n\r\n            emitEvent(props.onBeforeLeave, $el)\r\n          },\r\n          onLeave($el) {\r\n            if (leaveStage === 'in') return\r\n\r\n            leaveStage = 'in'\r\n            const el = $el as HTMLElement\r\n\r\n            if (el[scrollHeight] !== 0) {\r\n              leaveRecord.transition = el.style.transition\r\n\r\n              el.style.transition = transition\r\n\r\n              el.style[height] = '0'\r\n              el.style[paddingTop] = '0'\r\n              el.style[paddingBottom] = '0'\r\n              el.style[marginTop] = '0'\r\n              el.style[marginBottom] = '0'\r\n\r\n              if (props.fadeEffect) {\r\n                el.style.opacity = '0'\r\n              }\r\n            }\r\n\r\n            emitEvent(props.onLeave, $el)\r\n          },\r\n          onAfterLeave($el) {\r\n            const el = $el as HTMLElement\r\n\r\n            el.style[height] = ''\r\n            el.style[paddingTop] = leaveRecord.paddingTop!\r\n            el.style[paddingBottom] = leaveRecord.paddingBottom!\r\n            el.style[marginTop] = leaveRecord.marginTop!\r\n            el.style[marginBottom] = leaveRecord.marginBottom!\r\n            el.style.overflow = leaveRecord.overflow!\r\n            el.style.transition = leaveRecord.transition || ''\r\n            el.style.boxSizing = leaveRecord.boxSizing!\r\n            el.style.opacity = leaveRecord.opacity!\r\n\r\n            leaveStage = null\r\n            emitEvent(props.onAfterLeave, $el)\r\n          },\r\n          onLeaveCancelled($el) {\r\n            const el = $el as HTMLElement\r\n\r\n            el.style[height] = ''\r\n            el.style[paddingTop] = leaveRecord.paddingTop!\r\n            el.style[paddingBottom] = leaveRecord.paddingBottom!\r\n            el.style[marginTop] = leaveRecord.marginTop!\r\n            el.style[marginBottom] = leaveRecord.marginBottom!\r\n            el.style.overflow = leaveRecord.overflow!\r\n            el.style.transition = leaveRecord.transition || ''\r\n            el.style.boxSizing = leaveRecord.boxSizing!\r\n            el.style.opacity = leaveRecord.opacity!\r\n\r\n            leaveStage = null\r\n            emitEvent(props.onLeaveCancelled, $el)\r\n          },\r\n        },\r\n        slots,\r\n      )\r\n    }\r\n  },\r\n})\r\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":"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"}