UNPKG

various-ui

Version:

This is a test version of the Vue 3 component library

1 lines 10.7 kB
{"version":3,"file":"composable.mjs","sources":["../../../../../../packages/components/modal/aside/src/composable.ts"],"sourcesContent":["//* Vue\r\nimport { ref, computed, reactive, type SetupContext } from \"vue\";\r\n//* 动画库\r\nimport { gsap } from \"gsap\";\r\n//* 公共函数\r\nimport { utility } from \"@various/utils\";\r\n//* 组件属性\r\nimport type { UiModalSideEmits, UiModalSideProps } from \"../index\";\r\n\r\nexport const useComposable = (define: UiModalSideProps, emit: SetupContext<typeof UiModalSideEmits>[\"emit\"]) => {\r\n //* 响应式变量\r\n const refs = {\r\n open: ref<boolean>(false),\r\n };\r\n\r\n //* 节点\r\n const nodes = {\r\n main: ref<HTMLElement>(),\r\n container: ref<HTMLElement>(),\r\n };\r\n\r\n //* 计算属性\r\n const computeds = {\r\n site: computed(() => {\r\n switch (define.direction) {\r\n case \"top\":\r\n return { leave: { yPercent: -100 }, enter: { yPercent: 0 } };\r\n\r\n case \"left\":\r\n return { leave: { xPercent: -100 }, enter: { xPercent: 0 } };\r\n\r\n case \"right\":\r\n return { leave: { xPercent: 100 }, enter: { xPercent: 0 } };\r\n\r\n default:\r\n return { leave: { yPercent: 100 }, enter: { yPercent: 0 } };\r\n }\r\n }),\r\n };\r\n\r\n //* 函数列表\r\n const methods = {\r\n //* Modal关闭函数\r\n closeModal: () => {\r\n //* 隐藏弹出窗口\r\n refs.open.value = false;\r\n //* 响应关闭事件\r\n emit(\"close\");\r\n //* Body显示被隐藏的滚动条\r\n document.body.style.overflow = \"\";\r\n if (document.body.scrollHeight > document.body.offsetHeight) {\r\n document.body.style.paddingRight = \"\";\r\n }\r\n },\r\n\r\n //* Modal启动函数\r\n openModal: () => {\r\n //* 回到顶部\r\n nodes.container.value?.scrollTo({ top: 0 });\r\n //* 显示弹出窗口\r\n refs.open.value = true;\r\n //* 响应Open事件\r\n emit(\"open\");\r\n //* Body隐藏滚动条\r\n const size = document.body.offsetWidth - document.body.clientWidth;\r\n document.body.style.overflow = \"hidden\";\r\n if (document.body.scrollHeight > document.body.offsetHeight) {\r\n document.body.style.paddingRight = `${size}px`;\r\n }\r\n },\r\n\r\n //* Modal滚动条函数\r\n scrollTo: (options: ScrollToOptions) => {\r\n nodes.container.value?.scrollTo(options);\r\n },\r\n };\r\n\r\n //* 动态属性\r\n const binds = reactive({\r\n content: computed(() => {\r\n return { style: { padding: define.spacing } };\r\n }),\r\n\r\n container: computed(() => {\r\n //* 初始化返回数据\r\n const result: { [name: string]: any } = {\r\n width: \"100vw\",\r\n height: \"100vh\",\r\n };\r\n\r\n //* 根据弹窗方向进行属性设置\r\n if (define.direction == \"right\" || define.direction == \"left\") {\r\n //* 尺寸调整\r\n result.width = utility.isNumber(define.width) ? define.width + \"px\" : define.width;\r\n if (define.minWidth) result[\"min-width\"] = utility.isNumber(define.minWidth) ? define.minWidth + \"px\" : define.minWidth;\r\n if (define.maxWidth) {\r\n result[\"max-width\"] = utility.isNumber(define.maxWidth) ? define.maxWidth + \"px\" : define.maxWidth;\r\n }\r\n\r\n //* 位置调整\r\n result.top = \"0\";\r\n if (define.direction == \"left\") result.left = \"0\";\r\n else {\r\n result.right = \"0\";\r\n }\r\n } else {\r\n //* 尺寸调整\r\n result.height = utility.isNumber(define.height) ? define.height + \"px\" : define.height;\r\n if (define.minHeight) result[\"min-height\"] = utility.isNumber(define.minHeight) ? define.minHeight + \"px\" : define.minHeight;\r\n if (define.maxHeight) {\r\n result[\"max-height\"] = utility.isNumber(define.maxHeight) ? define.maxHeight + \"px\" : define.maxHeight;\r\n }\r\n\r\n //* 位置调整\r\n result.left = \"0\";\r\n if (define.direction == \"bottom\") result.bottom = \"0\";\r\n else {\r\n result.top = \"0\";\r\n }\r\n }\r\n\r\n return { style: result };\r\n }),\r\n });\r\n\r\n //* 响应事件\r\n const ons = {\r\n animation: {\r\n \"before-enter\": () => {\r\n nodes.container.value && gsap.set(nodes.container.value, Object.assign(computeds.site.value.leave, { opacity: 0 }));\r\n },\r\n \"enter\": (_el: Element, done: () => void) => {\r\n if (nodes.container.value) {\r\n gsap.to(\r\n nodes.container.value,\r\n Object.assign(computeds.site.value.enter, { duration: 0.5, opacity: 1, onComplete: () => done() })\r\n );\r\n }\r\n },\r\n \"leave\": (_el: Element, done: () => void) => {\r\n if (nodes.container.value) {\r\n gsap.to(\r\n nodes.container.value,\r\n Object.assign(computeds.site.value.enter, { duration: 0.5, opacity: 0, onComplete: () => done() })\r\n );\r\n }\r\n },\r\n },\r\n };\r\n\r\n return { ons, refs, nodes, binds, methods, computeds };\r\n};\r\n"],"names":["utility.isNumber"],"mappings":";;;;;AASa,MAAA,aAAA,GAAgB,CAAC,MAAA,EAA0B,IAAwD,KAAA;AAE5G,EAAA,MAAM,IAAO,GAAA;AAAA,IACT,IAAA,EAAM,IAAa,KAAK,CAAA;AAAA,GAC5B,CAAA;AAGA,EAAA,MAAM,KAAQ,GAAA;AAAA,IACV,MAAM,GAAiB,EAAA;AAAA,IACvB,WAAW,GAAiB,EAAA;AAAA,GAChC,CAAA;AAGA,EAAA,MAAM,SAAY,GAAA;AAAA,IACd,IAAA,EAAM,SAAS,MAAM;AACjB,MAAA,QAAQ,OAAO,SAAW;AAAA,QACtB,KAAK,KAAA;AACD,UAAO,OAAA,EAAE,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,GAAA,IAAQ,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,EAAI,EAAA,CAAA;AAAA,QAE/D,KAAK,MAAA;AACD,UAAO,OAAA,EAAE,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,GAAA,IAAQ,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,EAAI,EAAA,CAAA;AAAA,QAE/D,KAAK,OAAA;AACD,UAAO,OAAA,EAAE,KAAO,EAAA,EAAE,QAAU,EAAA,GAAA,IAAO,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,EAAI,EAAA,CAAA;AAAA,QAE9D;AACI,UAAO,OAAA,EAAE,KAAO,EAAA,EAAE,QAAU,EAAA,GAAA,IAAO,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,EAAI,EAAA,CAAA;AAAA,OAClE;AAAA,KACH,CAAA;AAAA,GACL,CAAA;AAGA,EAAA,MAAM,OAAU,GAAA;AAAA;AAAA,IAEZ,YAAY,MAAM;AAEd,MAAA,IAAA,CAAK,KAAK,KAAQ,GAAA,KAAA,CAAA;AAElB,MAAA,IAAA,CAAK,OAAO,CAAA,CAAA;AAEZ,MAAS,QAAA,CAAA,IAAA,CAAK,MAAM,QAAW,GAAA,EAAA,CAAA;AAC/B,MAAA,IAAI,QAAS,CAAA,IAAA,CAAK,YAAe,GAAA,QAAA,CAAS,KAAK,YAAc,EAAA;AACzD,QAAS,QAAA,CAAA,IAAA,CAAK,MAAM,YAAe,GAAA,EAAA,CAAA;AAAA,OACvC;AAAA,KACJ;AAAA;AAAA,IAGA,WAAW,MAAM;AAxDzB,MAAA,IAAA,EAAA,CAAA;AA0DY,MAAA,CAAA,EAAA,GAAA,KAAA,CAAM,UAAU,KAAhB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAuB,QAAS,CAAA,EAAE,KAAK,CAAE,EAAA,CAAA,CAAA;AAEzC,MAAA,IAAA,CAAK,KAAK,KAAQ,GAAA,IAAA,CAAA;AAElB,MAAA,IAAA,CAAK,MAAM,CAAA,CAAA;AAEX,MAAA,MAAM,IAAO,GAAA,QAAA,CAAS,IAAK,CAAA,WAAA,GAAc,SAAS,IAAK,CAAA,WAAA,CAAA;AACvD,MAAS,QAAA,CAAA,IAAA,CAAK,MAAM,QAAW,GAAA,QAAA,CAAA;AAC/B,MAAA,IAAI,QAAS,CAAA,IAAA,CAAK,YAAe,GAAA,QAAA,CAAS,KAAK,YAAc,EAAA;AACzD,QAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,YAAe,GAAA,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA,CAAA;AAAA,OAC9C;AAAA,KACJ;AAAA;AAAA,IAGA,QAAA,EAAU,CAAC,OAA6B,KAAA;AAxEhD,MAAA,IAAA,EAAA,CAAA;AAyEY,MAAM,CAAA,EAAA,GAAA,KAAA,CAAA,SAAA,CAAU,KAAhB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAuB,QAAS,CAAA,OAAA,CAAA,CAAA;AAAA,KACpC;AAAA,GACJ,CAAA;AAGA,EAAA,MAAM,QAAQ,QAAS,CAAA;AAAA,IACnB,OAAA,EAAS,SAAS,MAAM;AACpB,MAAA,OAAO,EAAE,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,CAAO,SAAU,EAAA,CAAA;AAAA,KAC/C,CAAA;AAAA,IAED,SAAA,EAAW,SAAS,MAAM;AAEtB,MAAA,MAAM,MAAkC,GAAA;AAAA,QACpC,KAAO,EAAA,OAAA;AAAA,QACP,MAAQ,EAAA,OAAA;AAAA,OACZ,CAAA;AAGA,MAAA,IAAI,MAAO,CAAA,SAAA,IAAa,OAAW,IAAA,MAAA,CAAO,aAAa,MAAQ,EAAA;AAE3D,QAAO,MAAA,CAAA,KAAA,GAAQA,QAAiB,CAAA,MAAA,CAAO,KAAK,CAAI,GAAA,MAAA,CAAO,KAAQ,GAAA,IAAA,GAAO,MAAO,CAAA,KAAA,CAAA;AAC7E,QAAA,IAAI,MAAO,CAAA,QAAA,EAAiB,MAAA,CAAA,WAAW,CAAI,GAAAA,QAAiB,CAAA,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAO,CAAA,QAAA,GAAW,OAAO,MAAO,CAAA,QAAA,CAAA;AAC/G,QAAA,IAAI,OAAO,QAAU,EAAA;AACjB,UAAO,MAAA,CAAA,WAAW,CAAI,GAAAA,QAAiB,CAAA,MAAA,CAAO,QAAQ,CAAI,GAAA,MAAA,CAAO,QAAW,GAAA,IAAA,GAAO,MAAO,CAAA,QAAA,CAAA;AAAA,SAC9F;AAGA,QAAA,MAAA,CAAO,GAAM,GAAA,GAAA,CAAA;AACb,QAAA,IAAI,MAAO,CAAA,SAAA,IAAa,MAAQ,EAAA,MAAA,CAAO,IAAO,GAAA,GAAA,CAAA;AAAA,aACzC;AACD,UAAA,MAAA,CAAO,KAAQ,GAAA,GAAA,CAAA;AAAA,SACnB;AAAA,OACG,MAAA;AAEH,QAAO,MAAA,CAAA,MAAA,GAASA,QAAiB,CAAA,MAAA,CAAO,MAAM,CAAI,GAAA,MAAA,CAAO,MAAS,GAAA,IAAA,GAAO,MAAO,CAAA,MAAA,CAAA;AAChF,QAAA,IAAI,MAAO,CAAA,SAAA,EAAkB,MAAA,CAAA,YAAY,CAAI,GAAAA,QAAiB,CAAA,MAAA,CAAO,SAAS,CAAA,GAAI,MAAO,CAAA,SAAA,GAAY,OAAO,MAAO,CAAA,SAAA,CAAA;AACnH,QAAA,IAAI,OAAO,SAAW,EAAA;AAClB,UAAO,MAAA,CAAA,YAAY,CAAI,GAAAA,QAAiB,CAAA,MAAA,CAAO,SAAS,CAAI,GAAA,MAAA,CAAO,SAAY,GAAA,IAAA,GAAO,MAAO,CAAA,SAAA,CAAA;AAAA,SACjG;AAGA,QAAA,MAAA,CAAO,IAAO,GAAA,GAAA,CAAA;AACd,QAAA,IAAI,MAAO,CAAA,SAAA,IAAa,QAAU,EAAA,MAAA,CAAO,MAAS,GAAA,GAAA,CAAA;AAAA,aAC7C;AACD,UAAA,MAAA,CAAO,GAAM,GAAA,GAAA,CAAA;AAAA,SACjB;AAAA,OACJ;AAEA,MAAO,OAAA,EAAE,OAAO,MAAO,EAAA,CAAA;AAAA,KAC1B,CAAA;AAAA,GACJ,CAAA,CAAA;AAGD,EAAA,MAAM,GAAM,GAAA;AAAA,IACR,SAAW,EAAA;AAAA,MACP,gBAAgB,MAAM;AAClB,QAAA,KAAA,CAAM,UAAU,KAAS,IAAA,IAAA,CAAK,GAAI,CAAA,KAAA,CAAM,UAAU,KAAO,EAAA,MAAA,CAAO,MAAO,CAAA,SAAA,CAAU,KAAK,KAAM,CAAA,KAAA,EAAO,EAAE,OAAS,EAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,OACtH;AAAA,MACA,OAAA,EAAS,CAAC,GAAA,EAAc,IAAqB,KAAA;AACzC,QAAI,IAAA,KAAA,CAAM,UAAU,KAAO,EAAA;AACvB,UAAK,IAAA,CAAA,EAAA;AAAA,YACD,MAAM,SAAU,CAAA,KAAA;AAAA,YAChB,MAAO,CAAA,MAAA,CAAO,SAAU,CAAA,IAAA,CAAK,MAAM,KAAO,EAAA,EAAE,QAAU,EAAA,GAAA,EAAK,SAAS,CAAG,EAAA,UAAA,EAAY,MAAM,IAAA,IAAQ,CAAA;AAAA,WACrG,CAAA;AAAA,SACJ;AAAA,OACJ;AAAA,MACA,OAAA,EAAS,CAAC,GAAA,EAAc,IAAqB,KAAA;AACzC,QAAI,IAAA,KAAA,CAAM,UAAU,KAAO,EAAA;AACvB,UAAK,IAAA,CAAA,EAAA;AAAA,YACD,MAAM,SAAU,CAAA,KAAA;AAAA,YAChB,MAAO,CAAA,MAAA,CAAO,SAAU,CAAA,IAAA,CAAK,MAAM,KAAO,EAAA,EAAE,QAAU,EAAA,GAAA,EAAK,SAAS,CAAG,EAAA,UAAA,EAAY,MAAM,IAAA,IAAQ,CAAA;AAAA,WACrG,CAAA;AAAA,SACJ;AAAA,OACJ;AAAA,KACJ;AAAA,GACJ,CAAA;AAEA,EAAA,OAAO,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,KAAA,EAAO,SAAS,SAAU,EAAA,CAAA;AACzD;;;;"}