UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 4.01 kB
{"version":3,"file":"use-collapse.mjs","names":[],"sources":["../../../../../../packages/components/collapse/src/use-collapse.ts"],"sourcesContent":["import { computed, provide, ref, watch } from 'vue'\nimport {\n debugWarn,\n ensureArray,\n isBoolean,\n isPromise,\n throwError,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { collapseContextKey } from './constants'\n\nimport type { SetupContext } from 'vue'\nimport type {\n CollapseActiveName,\n CollapseEmits,\n CollapseProps,\n} from './collapse'\n\nconst SCOPE = 'ElCollapse'\nexport const useCollapse = (\n props: CollapseProps,\n emit: SetupContext<CollapseEmits>['emit']\n) => {\n const activeNames = ref(ensureArray(props.modelValue))\n\n const setActiveNames = (_activeNames: CollapseActiveName[]) => {\n activeNames.value = _activeNames\n const value = props.accordion ? activeNames.value[0] : activeNames.value\n emit(UPDATE_MODEL_EVENT, value)\n emit(CHANGE_EVENT, value)\n }\n\n const handleChange = (name: CollapseActiveName) => {\n if (props.accordion) {\n setActiveNames([activeNames.value[0] === name ? '' : name])\n } else {\n const _activeNames = [...activeNames.value]\n const index = _activeNames.indexOf(name)\n\n if (index > -1) {\n _activeNames.splice(index, 1)\n } else {\n _activeNames.push(name)\n }\n setActiveNames(_activeNames)\n }\n }\n\n const handleItemClick = async (name: CollapseActiveName) => {\n const { beforeCollapse } = props\n if (!beforeCollapse) {\n handleChange(name)\n return\n }\n\n const shouldChange = beforeCollapse(name)\n const isPromiseOrBool = [\n isPromise(shouldChange),\n isBoolean(shouldChange),\n ].includes(true)\n if (!isPromiseOrBool) {\n throwError(\n SCOPE,\n 'beforeCollapse must return type `Promise<boolean>` or `boolean`'\n )\n }\n\n if (isPromise(shouldChange)) {\n shouldChange\n .then((result) => {\n if (result !== false) {\n handleChange(name)\n }\n })\n .catch((e) => {\n debugWarn(SCOPE, `some error occurred: ${e}`)\n })\n } else if (shouldChange) {\n handleChange(name)\n }\n }\n\n watch(\n () => props.modelValue,\n () => (activeNames.value = ensureArray(props.modelValue)),\n { deep: true }\n )\n\n provide(collapseContextKey, {\n activeNames,\n handleItemClick,\n })\n return {\n activeNames,\n setActiveNames,\n }\n}\n\nexport const useCollapseDOM = (props: CollapseProps) => {\n const ns = useNamespace('collapse')\n\n const rootKls = computed(() => [\n ns.b(),\n ns.b(`icon-position-${props.expandIconPosition}`),\n ])\n\n return {\n rootKls,\n }\n}\n"],"mappings":";;;;;;;;;AAmBA,MAAM,QAAQ;AACd,MAAa,eACX,OACA,SACG;CACH,MAAM,cAAc,IAAI,YAAY,MAAM,WAAW,CAAC;CAEtD,MAAM,kBAAkB,iBAAuC;AAC7D,cAAY,QAAQ;EACpB,MAAM,QAAQ,MAAM,YAAY,YAAY,MAAM,KAAK,YAAY;AACnE,OAAK,oBAAoB,MAAM;AAC/B,OAAK,cAAc,MAAM;;CAG3B,MAAM,gBAAgB,SAA6B;AACjD,MAAI,MAAM,UACR,gBAAe,CAAC,YAAY,MAAM,OAAO,OAAO,KAAK,KAAK,CAAC;OACtD;GACL,MAAM,eAAe,CAAC,GAAG,YAAY,MAAM;GAC3C,MAAM,QAAQ,aAAa,QAAQ,KAAK;AAExC,OAAI,QAAQ,GACV,cAAa,OAAO,OAAO,EAAE;OAE7B,cAAa,KAAK,KAAK;AAEzB,kBAAe,aAAa;;;CAIhC,MAAM,kBAAkB,OAAO,SAA6B;EAC1D,MAAM,EAAE,mBAAmB;AAC3B,MAAI,CAAC,gBAAgB;AACnB,gBAAa,KAAK;AAClB;;EAGF,MAAM,eAAe,eAAe,KAAK;AAKzC,MAAI,CAJoB,CACtB,UAAU,aAAa,EACvB,UAAU,aAAa,CACxB,CAAC,SAAS,KAAK,CAEd,YACE,OACA,kEACD;AAGH,MAAI,UAAU,aAAa,CACzB,cACG,MAAM,WAAW;AAChB,OAAI,WAAW,MACb,cAAa,KAAK;IAEpB,CACD,OAAO,MAAM;AACZ,aAAU,OAAO,wBAAwB,IAAI;IAC7C;WACK,aACT,cAAa,KAAK;;AAItB,aACQ,MAAM,kBACL,YAAY,QAAQ,YAAY,MAAM,WAAW,EACxD,EAAE,MAAM,MAAM,CACf;AAED,SAAQ,oBAAoB;EAC1B;EACA;EACD,CAAC;AACF,QAAO;EACL;EACA;EACD;;AAGH,MAAa,kBAAkB,UAAyB;CACtD,MAAM,KAAK,aAAa,WAAW;AAOnC,QAAO,EACL,SANc,eAAe,CAC7B,GAAG,GAAG,EACN,GAAG,EAAE,iBAAiB,MAAM,qBAAqB,CAClD,CAAC,EAID"}