You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
7.7 KiB
1 line
7.7 KiB
11 months ago
|
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-model-toggle/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, watch, onMounted } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport { isClient } from '@vueuse/core'\nimport { isBool } from '@element-plus/utils/util'\nimport { buildProp, definePropType } from '@element-plus/utils/props'\nimport type { RouteLocationNormalizedLoaded } from 'vue-router'\n\nimport type { Ref, ComponentPublicInstance, ExtractPropTypes } from 'vue'\n\nexport const createModelToggleComposable = (name: string) => {\n const useModelToggleProps = {\n [name]: buildProp({\n type: definePropType<boolean | null>(Boolean),\n default: null,\n } as const),\n [`onUpdate:${name}`]: buildProp({\n type: definePropType<(val: boolean) => void>(Function),\n } as const),\n }\n\n const useModelToggleEmits = [`update:${name}`]\n\n const useModelToggle = ({\n indicator,\n shouldHideWhenRouteChanges,\n shouldProceed,\n onShow,\n onHide,\n }: ModelToggleParams) => {\n const instance = getCurrentInstance()!\n const props = instance.props as UseModelToggleProps & { disabled: boolean }\n const { emit } = instance\n\n const updateEventKey = `update:${name}`\n\n const hasUpdateHandler = computed(() =>\n isFunction(props[`onUpdate:${name}`])\n )\n // when it matches the default value we say this is absent\n // though this could be mistakenly passed from the user but we need to rule out that\n // condition\n const isModelBindingAbsent = computed(() => props[name] === null)\n\n const doShow = () => {\n if (indicator.value === true) {\n return\n }\n\n indicator.value = true\n if (isFunction(onShow)) {\n onShow()\n }\n }\n\n const doHide = () => {\n if (indicator.value === false) {\n return\n }\n\n indicator.value = false\n\n if (isFunction(onHide)) {\n onHide()\n }\n }\n\n const show = () => {\n if (\n props.disabled === true ||\n (isFunction(shouldProceed) && !shouldProceed())\n )\n return\n\n const shouldEmit = hasUpdateHandler.value && isClient\n\n if (shouldEmit) {\n emit(updateEventKey, true)\n }\n\n if (isModelBindingAbsent.value || !shouldEmit) {\n doShow()\n }\n }\n\n const hide = () => {\n if (props.disabled === true || !isClient) return\n\n const shouldEmit = hasUpdateHandler.value && isClient\n\n if (shouldEmit) {\n emit(updateEventKey, false)\n }\n\n if (isModelBindingAbsent.value || !shouldEmit) {\n doHide()\n }\n }\n\n const onChange = (val: boolean) => {\n if (!isBool(val)) return\n if (props.disabled && val) {\n if (hasUpdateHandler.value) {\n emit(updateEventKey, false)\n }\n } else if (indicator.value !== val) {\n if (val) {\n doShow()\n } else {\n doHide()\n }\n }\n }\n\n const toggle = () => {\n if (indicator.value) {\n hide()\n } else {\n show()\n }\n }\n\n watch(() => props[name], onChange as any)\n\n if (\n shouldHideWhenRouteChanges &&\n instance.appContext.config.globalProperties.$route !== undefined\n ) {\n watch(\n () => ({\n ...(\n instance.proxy as ComponentPublicInstance<{\n $route: RouteLocationNormalizedLoaded\n }>\n ).$route,\n }),\n () => {\n if (shouldHideWhenRouteChanges.value && indicator.value) {\n hide()\n }\n }\n )\n }\n\n onMounted(() => {\n onChange(props[name] as boolean)\n })\n\n return {\n hide,\n show,\n toggle,\n }\n }\n\n return {\n useModelToggle,\n useModelToggleProps,\n useModelToggleEmits,\n }\n}\n\nconst { useModelToggle, useModelToggleProps, useModelToggleEmits } =\n createModelToggleComposable('modelValue')\n\nexport {
|