UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 6.92 kB
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-model-toggle/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, onMounted, watch } from 'vue'\nimport {\n buildProp,\n definePropType,\n isBoolean,\n isClient,\n isFunction,\n} from '@element-plus/utils'\n\nimport type { ExtractPropType } from '@element-plus/utils'\nimport type { RouteLocationNormalizedLoaded } from 'vue-router'\nimport type {\n ComponentPublicInstance,\n ExtractPropTypes,\n ExtractPublicPropTypes,\n Ref,\n} from 'vue'\n\nconst _prop = buildProp({\n type: definePropType<boolean | null>(Boolean),\n default: null,\n} as const)\nconst _event = buildProp({\n type: definePropType<(val: boolean) => void>(Function),\n} as const)\n\nexport type UseModelTogglePropsRaw<T extends string> = {\n [K in T]: typeof _prop\n} & {\n [K in `onUpdate:${T}`]: typeof _event\n}\n\nexport type UseModelTogglePropsGeneric<T extends string> = {\n [K in T]: ExtractPropType<typeof _prop>\n} & {\n [K in `onUpdate:${T}`]: ExtractPropType<typeof _event>\n}\n\nexport const createModelToggleComposable = <T extends string>(name: T) => {\n const updateEventKey = `update:${name}` as const\n const updateEventKeyRaw = `onUpdate:${name}` as const\n const useModelToggleEmits = [updateEventKey]\n\n const useModelToggleProps = {\n [name]: _prop,\n [updateEventKeyRaw]: _event,\n } as UseModelTogglePropsRaw<T>\n\n const useModelToggle = ({\n indicator,\n toggleReason,\n shouldHideWhenRouteChanges,\n shouldProceed,\n onShow,\n onHide,\n }: ModelToggleParams) => {\n const instance = getCurrentInstance()!\n const { emit } = instance\n const props = instance.props as UseModelTogglePropsGeneric<T> & {\n disabled: boolean\n }\n const hasUpdateHandler = computed(() =>\n isFunction(props[updateEventKeyRaw])\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 = (event?: Event) => {\n if (indicator.value === true) {\n return\n }\n\n indicator.value = true\n if (toggleReason) {\n toggleReason.value = event\n }\n if (isFunction(onShow)) {\n onShow(event)\n }\n }\n\n const doHide = (event?: Event) => {\n if (indicator.value === false) {\n return\n }\n\n indicator.value = false\n if (toggleReason) {\n toggleReason.value = event\n }\n if (isFunction(onHide)) {\n onHide(event)\n }\n }\n\n const show = (event?: Event) => {\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(event)\n }\n }\n\n const hide = (event?: Event) => {\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(event)\n }\n }\n\n const onChange = (val: boolean) => {\n if (!isBoolean(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)\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])\n })\n\n return {\n hide,\n show,\n toggle,\n hasUpdateHandler,\n }\n }\n\n return {\n useModelToggle,\n useModelToggleProps,\n useModelToggleEmits,\n }\n}\n\nconst { useModelToggle, useModelToggleProps, useModelToggleEmits } =\n createModelToggleComposable('modelValue')\n\nexport { useModelToggle, useModelToggleEmits, useModelToggleProps }\n\nexport type UseModelToggleProps = ExtractPropTypes<typeof useModelToggleProps>\nexport type UseModelTogglePropsPublic = ExtractPublicPropTypes<\n typeof useModelToggleProps\n>\n\nexport type ModelToggleParams = {\n indicator: Ref<boolean>\n toggleReason?: Ref<Event | undefined>\n shouldHideWhenRouteChanges?: Ref<boolean>\n shouldProceed?: () => boolean\n onShow?: (event?: Event) => void\n onHide?: (event?: Event) => void\n}\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQ,UAAU;CACtB,MAAM,eAA+B,QAAQ;CAC7C,SAAS;CACV,CAAU;AACX,MAAM,SAAS,UAAU,EACvB,MAAM,eAAuC,SAAS,EACvD,CAAU;AAcX,MAAa,+BAAiD,SAAY;CACxE,MAAM,iBAAiB,UAAU;CACjC,MAAM,oBAAoB,YAAY;CACtC,MAAM,sBAAsB,CAAC,eAAe;CAE5C,MAAM,sBAAsB;GACzB,OAAO;GACP,oBAAoB;EACtB;CAED,MAAM,kBAAkB,EACtB,WACA,cACA,4BACA,eACA,QACA,aACuB;EACvB,MAAM,WAAW,oBAAoB;EACrC,MAAM,EAAE,SAAS;EACjB,MAAM,QAAQ,SAAS;EAGvB,MAAM,mBAAmB,eACvB,WAAW,MAAM,mBAAmB,CACrC;EAID,MAAM,uBAAuB,eAAe,MAAM,UAAU,KAAK;EAEjE,MAAM,UAAU,UAAkB;AAChC,OAAI,UAAU,UAAU,KACtB;AAGF,aAAU,QAAQ;AAClB,OAAI,aACF,cAAa,QAAQ;AAEvB,OAAI,WAAW,OAAO,CACpB,QAAO,MAAM;;EAIjB,MAAM,UAAU,UAAkB;AAChC,OAAI,UAAU,UAAU,MACtB;AAGF,aAAU,QAAQ;AAClB,OAAI,aACF,cAAa,QAAQ;AAEvB,OAAI,WAAW,OAAO,CACpB,QAAO,MAAM;;EAIjB,MAAM,QAAQ,UAAkB;AAC9B,OACE,MAAM,aAAa,QAClB,WAAW,cAAc,IAAI,CAAC,eAAe,CAE9C;GAEF,MAAM,aAAa,iBAAiB,SAAS;AAE7C,OAAI,WACF,MAAK,gBAAgB,KAAK;AAG5B,OAAI,qBAAqB,SAAS,CAAC,WACjC,QAAO,MAAM;;EAIjB,MAAM,QAAQ,UAAkB;AAC9B,OAAI,MAAM,aAAa,QAAQ,CAAC,SAAU;GAE1C,MAAM,aAAa,iBAAiB,SAAS;AAE7C,OAAI,WACF,MAAK,gBAAgB,MAAM;AAG7B,OAAI,qBAAqB,SAAS,CAAC,WACjC,QAAO,MAAM;;EAIjB,MAAM,YAAY,QAAiB;AACjC,OAAI,CAAC,UAAU,IAAI,CAAE;AACrB,OAAI,MAAM,YAAY,KACpB;QAAI,iBAAiB,MACnB,MAAK,gBAAgB,MAAM;cAEpB,UAAU,UAAU,IAC7B,KAAI,IACF,SAAQ;OAER,SAAQ;;EAKd,MAAM,eAAe;AACnB,OAAI,UAAU,MACZ,OAAM;OAEN,OAAM;;AAIV,cAAY,MAAM,OAAO,SAAS;AAElC,MACE,8BACA,SAAS,WAAW,OAAO,iBAAiB,WAAW,OAEvD,cACS,EACL,GACE,SAAS,MAGT,QACH,SACK;AACJ,OAAI,2BAA2B,SAAS,UAAU,MAChD,OAAM;IAGX;AAGH,kBAAgB;AACd,YAAS,MAAM,MAAM;IACrB;AAEF,SAAO;GACL;GACA;GACA;GACA;GACD;;AAGH,QAAO;EACL;EACA;EACA;EACD;;AAGH,MAAM,EAAE,gBAAgB,qBAAqB,wBAC3C,4BAA4B,aAAa"}