1 line
6.7 KiB
Plaintext
1 line
6.7 KiB
Plaintext
|
{"version":3,"file":"createTransition.mjs","names":["h","Transition","TransitionGroup","genericComponent","propsFactory","makeTransitionProps","disabled","Boolean","group","hideOnLeave","leaveAbsolute","mode","String","origin","createCssTransition","name","props","setup","_ref","slots","functions","onBeforeEnter","el","style","transformOrigin","onLeave","offsetTop","offsetLeft","offsetWidth","offsetHeight","_transitionInitialStyles","position","top","left","width","height","setProperty","onAfterLeave","tag","css","undefined","default","createJavascriptTransition","arguments","length","type","_ref2"],"sources":["../../../src/components/transitions/createTransition.ts"],"sourcesContent":["// Utilities\nimport { h, Transition, TransitionGroup } from 'vue'\nimport { genericComponent, propsFactory } from '@/util'\n\n// Types\nimport type { FunctionalComponent, PropType } from 'vue'\n\nexport const makeTransitionProps = propsFactory({\n disabled: Boolean,\n group: Boolean,\n hideOnLeave: Boolean,\n leaveAbsolute: Boolean,\n mode: String,\n origin: String,\n}, 'transition')\n\nexport function createCssTransition (\n name: string,\n origin?: string,\n mode?: string\n) {\n return genericComponent()({\n name,\n\n props: makeTransitionProps({\n mode,\n origin,\n }),\n\n setup (props, { slots }) {\n const functions = {\n onBeforeEnter (el: HTMLElement) {\n if (props.origin) {\n el.style.transformOrigin = props.origin\n }\n },\n onLeave (el: HTMLElement) {\n if (props.leaveAbsolute) {\n const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = el\n el._transitionInitialStyles = {\n position: el.style.position,\n top: el.style.top,\n left: el.style.left,\n width: el.style.width,\n height: el.style.height,\n }\n el.style.position = 'absolute'\n el.style.top = `${offsetTop}px`\n el.style.left = `${offsetLeft}px`\n el.style.width = `${offsetWidth}px`\n el.style.height = `${offsetHeight}px`\n }\n\n if (props.hideOnLeave) {\n el.style.setProperty('display', 'none', 'important')\n }\n },\n onAfterLeave (el: HTMLElement) {\n if (props.leaveAbsolute && el?._transitionInitialStyles) {\n const { position, top, left, width, height } = el._transitionInitialStyles\n delete el._transitionInitialStyles\n el.style.position = position || ''\n el.style.top = top || ''\n el.style.left = left || ''\n el.style.width = width || ''\n el.style.height = height || ''\n }\n },\n }\n\n return () => {\n const tag = props.group ? TransitionGroup : Transition\n\n return h(tag as FunctionalComponent, {\n name: props.disabled ? '' : name,\n css: !props.disabled,\n ...(props.group ? undefined : { mode: props.mode }),\n ...(props.disabled ? {} : functions),\n }, slots.default)\n }\n },\n })\n}\n\nexport function createJavascriptTransition (\n name: string,\n functions: Record<string, any>,\n mode = 'in-out'\n) {\n return genericComponent()({\n name,\n\n props: {\n mode: {\n type: String as PropType<'in-out' | 'out-in' | 'default'>,\n default: mode,\n },\n disabled: Boolean,\n },\n\n setup (props, { slots }) {\n return () => {\n return h(Transition, {\n name: props.disabled ? '' : name,\n css: !props.disabled,\n // mode: props.mode, // TODO: vuejs/vue-next#3104\n ...(props.disabled ? {} : functions),\n }, slots.default)\n }\n },\n })\n}\n"],"mappings":"AAAA;AACA,SAASA,CAAC,EAAEC,UAAU,EAAEC,eAAe,QAAQ,KAAK;AAAA,SAC3CC,gBAAgB,EAAEC,YAAY,gCAEvC;AAGA,OAAO,MAAMC,mBAAmB,GAAGD,YAAY,CAAC;EAC9CE,QAAQ,EAAEC,OAAO;EACjBC,KAAK,EAAED,OAAO;EACdE,WAAW,EAAEF,OAAO;EACpBG,aAAa,EAAEH,OAAO;EACtBI,IAAI,EAAEC,MAA
|