108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
import { defineStore, skipHydrate } from 'pinia'
|
|
import type {
|
|
DialogParams,
|
|
YoutubeParams,
|
|
} from '#layers/types/components/modal'
|
|
|
|
const createModalState = () => ({
|
|
storeIsOpen: ref(false),
|
|
storeIsShowDimmed: ref(false),
|
|
storeModalName: ref(''),
|
|
storeIsOutsideClose: ref(false),
|
|
storeContentText: ref(''),
|
|
storeConfirmButtonText: ref(''),
|
|
storeConfirmButtonEvent: skipHydrate(ref<() => void>(undefined)),
|
|
})
|
|
|
|
export const useModalStore = defineStore('modalStore', () => {
|
|
const scrollStore = useScrollStore()
|
|
|
|
// alert ------------------
|
|
const alert = {
|
|
...createModalState(),
|
|
}
|
|
|
|
const handleOpenAlert = ({
|
|
isShowDimmed = false,
|
|
modalName = '',
|
|
isOutsideClose = false,
|
|
contentText,
|
|
confirmButtonText = '',
|
|
confirmButtonEvent = undefined,
|
|
}: DialogParams) => {
|
|
alert.storeIsOpen.value = true
|
|
alert.storeIsShowDimmed.value = isShowDimmed
|
|
alert.storeModalName.value = modalName
|
|
alert.storeContentText.value = contentText
|
|
alert.storeConfirmButtonText.value = confirmButtonText
|
|
alert.storeIsOutsideClose.value = isOutsideClose
|
|
alert.storeConfirmButtonEvent.value = confirmButtonEvent
|
|
}
|
|
|
|
// confirm ------------------
|
|
const confirm = {
|
|
...createModalState(),
|
|
storeCancelButtonText: ref(''),
|
|
storeCancelButtonEvent: skipHydrate(ref<() => void>(undefined)),
|
|
}
|
|
|
|
const handleOpenConfirm = ({
|
|
isShowDimmed = false,
|
|
modalName = '',
|
|
isOutsideClose = false,
|
|
contentText,
|
|
confirmButtonText = '',
|
|
cancelButtonText = '',
|
|
confirmButtonEvent = undefined,
|
|
cancelButtonEvent = undefined,
|
|
}: DialogParams) => {
|
|
confirm.storeIsOpen.value = true
|
|
confirm.storeIsShowDimmed.value = isShowDimmed
|
|
confirm.storeModalName.value = modalName
|
|
confirm.storeContentText.value = contentText
|
|
confirm.storeConfirmButtonText.value = confirmButtonText
|
|
confirm.storeCancelButtonText.value = cancelButtonText
|
|
confirm.storeIsOutsideClose.value = isOutsideClose
|
|
confirm.storeConfirmButtonEvent.value = confirmButtonEvent
|
|
confirm.storeCancelButtonEvent.value = cancelButtonEvent
|
|
}
|
|
|
|
// youtube ------------------
|
|
const youtube = {
|
|
storeIsOpen: ref(false),
|
|
storeYoutubeUrl: ref(''),
|
|
storeIsOutsideClose: ref(false),
|
|
storeModalName: ref(''),
|
|
}
|
|
|
|
const handleOpenYoutube = ({
|
|
youtubeUrl,
|
|
isOutsideClose = false,
|
|
modalName = '',
|
|
}: YoutubeParams) => {
|
|
youtube.storeIsOpen.value = true
|
|
youtube.storeYoutubeUrl.value = youtubeUrl
|
|
youtube.storeIsOutsideClose.value = isOutsideClose
|
|
youtube.storeModalName.value = modalName
|
|
scrollStore.controlScrollLock(true)
|
|
}
|
|
|
|
const handleResetYoutube = () => {
|
|
youtube.storeIsOpen.value = false
|
|
youtube.storeYoutubeUrl.value = ''
|
|
youtube.storeIsOutsideClose.value = false
|
|
youtube.storeModalName.value = ''
|
|
scrollStore.controlScrollLock(false)
|
|
}
|
|
|
|
return {
|
|
alert,
|
|
confirm,
|
|
youtube,
|
|
handleOpenAlert,
|
|
handleOpenConfirm,
|
|
handleOpenYoutube,
|
|
handleResetYoutube,
|
|
}
|
|
})
|