143 lines
3.9 KiB
TypeScript
143 lines
3.9 KiB
TypeScript
import { defineStore } from 'pinia'
|
|
|
|
interface DialogParams {
|
|
isShowDimmed?: boolean
|
|
className?: string
|
|
isOutsideClose?: boolean
|
|
contentText: string
|
|
confirmButtonText?: string
|
|
cancelButtonText?: string
|
|
confirmButtonEvent?: () => void
|
|
cancelButtonEvent?: () => void
|
|
closeButtonEvent?: () => void
|
|
}
|
|
interface YoutubeParams {
|
|
youtubeId: string
|
|
className?: string
|
|
}
|
|
|
|
const createModalState = () => ({
|
|
storeIsOpen: ref(false),
|
|
storeIsShowDimmed: ref(false),
|
|
storeClassName: ref(''),
|
|
storeIsOutsideClose: ref(true),
|
|
storeContentText: ref(''),
|
|
storeConfirmButtonText: ref(''),
|
|
storeConfirmButtonEvent: ref(() => {}),
|
|
storeCloseButtonEvent: ref(() => {}),
|
|
})
|
|
|
|
const resetModalState = (type: ReturnType<typeof createModalState>) => {
|
|
type.storeIsOpen.value = false
|
|
type.storeIsShowDimmed.value = false
|
|
type.storeClassName.value = ''
|
|
type.storeIsOutsideClose.value = true
|
|
type.storeContentText.value = ''
|
|
type.storeConfirmButtonText.value = ''
|
|
type.storeConfirmButtonEvent.value = () => {}
|
|
type.storeCloseButtonEvent.value = () => {}
|
|
}
|
|
|
|
export const useModalStore = defineStore('modalStore', () => {
|
|
const scrollStore = useScrollStore()
|
|
|
|
// alert ------------------
|
|
const alert = {
|
|
...createModalState(),
|
|
}
|
|
|
|
const handleOpenAlert = ({
|
|
isShowDimmed = false,
|
|
className = '',
|
|
isOutsideClose = true,
|
|
contentText,
|
|
confirmButtonText = '',
|
|
confirmButtonEvent,
|
|
closeButtonEvent,
|
|
}: DialogParams) => {
|
|
alert.storeIsOpen.value = true
|
|
alert.storeIsShowDimmed.value = isShowDimmed
|
|
alert.storeClassName.value = className
|
|
alert.storeContentText.value = contentText
|
|
alert.storeConfirmButtonText.value = confirmButtonText
|
|
alert.storeIsOutsideClose.value = isOutsideClose
|
|
alert.storeConfirmButtonEvent.value = confirmButtonEvent ?? handleResetAlert
|
|
alert.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetAlert
|
|
}
|
|
|
|
const handleResetAlert = () => {
|
|
resetModalState(alert)
|
|
}
|
|
|
|
// confirm ------------------
|
|
const confirm = {
|
|
...createModalState(),
|
|
storeCancelButtonText: ref(''),
|
|
storeCancelButtonEvent: ref(() => {}),
|
|
}
|
|
|
|
const handleOpenConfirm = ({
|
|
isShowDimmed = false,
|
|
className = '',
|
|
isOutsideClose = true,
|
|
contentText,
|
|
confirmButtonText = '',
|
|
cancelButtonText = '',
|
|
confirmButtonEvent,
|
|
cancelButtonEvent,
|
|
closeButtonEvent,
|
|
}: DialogParams) => {
|
|
confirm.storeIsOpen.value = true
|
|
confirm.storeIsShowDimmed.value = isShowDimmed
|
|
confirm.storeClassName.value = className
|
|
confirm.storeContentText.value = contentText
|
|
confirm.storeConfirmButtonText.value = confirmButtonText
|
|
confirm.storeCancelButtonText.value = cancelButtonText
|
|
confirm.storeIsOutsideClose.value = isOutsideClose
|
|
confirm.storeConfirmButtonEvent.value =
|
|
confirmButtonEvent ?? handleResetConfirm
|
|
confirm.storeCancelButtonEvent.value =
|
|
cancelButtonEvent ?? handleResetConfirm
|
|
confirm.storeCloseButtonEvent.value = closeButtonEvent ?? handleResetConfirm
|
|
}
|
|
|
|
const handleResetConfirm = () => {
|
|
resetModalState(confirm)
|
|
confirm.storeCancelButtonText.value = ''
|
|
confirm.storeCancelButtonEvent.value = () => {}
|
|
}
|
|
|
|
// youtube ------------------
|
|
const youtube = {
|
|
storeIsOpen: ref(false),
|
|
storeYoutubeId: ref(''),
|
|
storeClassName: ref(''),
|
|
}
|
|
|
|
const handleOpenYoutube = ({ youtubeId, className = '' }: YoutubeParams) => {
|
|
youtube.storeIsOpen.value = true
|
|
youtube.storeYoutubeId.value = youtubeId
|
|
youtube.storeClassName.value = className
|
|
scrollStore.controlScrollLock(true)
|
|
}
|
|
|
|
const handleResetYoutube = () => {
|
|
youtube.storeIsOpen.value = false
|
|
youtube.storeYoutubeId.value = ''
|
|
youtube.storeClassName.value = ''
|
|
scrollStore.controlScrollLock(false)
|
|
}
|
|
|
|
return {
|
|
alert,
|
|
confirm,
|
|
youtube,
|
|
handleOpenAlert,
|
|
handleOpenConfirm,
|
|
handleResetAlert,
|
|
handleResetConfirm,
|
|
handleOpenYoutube,
|
|
handleResetYoutube,
|
|
}
|
|
})
|