vexip-ui/lib/components/collapse/collapse-transition.cjs.map

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

{"version":3,"file":"collapse-transition.cjs","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":"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"}