element-plus
Version:
A Component Library for Vue 3
1 lines • 4.35 kB
Source Map (JSON)
{"version":3,"file":"use-collapse-item.mjs","names":[],"sources":["../../../../../../packages/components/collapse/src/use-collapse-item.ts"],"sourcesContent":["import { computed, inject, ref, unref } from 'vue'\nimport { useIdInjection, useNamespace } from '@element-plus/hooks'\nimport { collapseContextKey } from './constants'\n\nimport type { CollapseItemProps } from './collapse-item'\n\nexport const useCollapseItem = (props: CollapseItemProps) => {\n const collapse = inject(collapseContextKey)\n const { namespace } = useNamespace('collapse')\n\n const focusing = ref(false)\n const isClick = ref(false)\n const idInjection = useIdInjection()\n const id = computed(() => idInjection.current++)\n const name = computed(() => {\n return (\n props.name ?? `${namespace.value}-id-${idInjection.prefix}-${unref(id)}`\n )\n })\n\n const isActive = computed(() =>\n collapse?.activeNames.value.includes(unref(name))\n )\n\n const handleFocus = () => {\n setTimeout(() => {\n if (!isClick.value) {\n focusing.value = true\n } else {\n isClick.value = false\n }\n }, 50)\n }\n\n const handleHeaderClick = (e: MouseEvent) => {\n if (props.disabled) return\n const target = e.target as HTMLElement\n if (target?.closest('input, textarea, select')) return\n collapse?.handleItemClick(unref(name))\n focusing.value = false\n isClick.value = true\n }\n\n const handleEnterClick = (e: KeyboardEvent) => {\n const target = e.target as HTMLElement\n if (target?.closest('input, textarea, select')) return\n e.preventDefault()\n collapse?.handleItemClick(unref(name))\n }\n\n return {\n focusing,\n id,\n isActive,\n handleFocus,\n handleHeaderClick,\n handleEnterClick,\n }\n}\n\nexport const useCollapseItemDOM = (\n props: CollapseItemProps,\n { focusing, isActive, id }: Partial<ReturnType<typeof useCollapseItem>>\n) => {\n const ns = useNamespace('collapse')\n\n const rootKls = computed(() => [\n ns.b('item'),\n ns.is('active', unref(isActive)),\n ns.is('disabled', props.disabled),\n ])\n const headKls = computed(() => [\n ns.be('item', 'header'),\n ns.is('active', unref(isActive)),\n { focusing: unref(focusing) && !props.disabled },\n ])\n const arrowKls = computed(() => [\n ns.be('item', 'arrow'),\n ns.is('active', unref(isActive)),\n ])\n const itemTitleKls = computed(() => [ns.be('item', 'title')])\n const itemWrapperKls = computed(() => ns.be('item', 'wrap'))\n const itemContentKls = computed(() => ns.be('item', 'content'))\n const scopedContentId = computed(() => ns.b(`content-${unref(id)}`))\n const scopedHeadId = computed(() => ns.b(`head-${unref(id)}`))\n\n return {\n itemTitleKls,\n arrowKls,\n headKls,\n rootKls,\n itemWrapperKls,\n itemContentKls,\n scopedContentId,\n scopedHeadId,\n }\n}\n"],"mappings":";;;;;;AAMA,MAAa,mBAAmB,UAA6B;CAC3D,MAAM,WAAW,OAAO,mBAAmB;CAC3C,MAAM,EAAE,cAAc,aAAa,WAAW;CAE9C,MAAM,WAAW,IAAI,MAAM;CAC3B,MAAM,UAAU,IAAI,MAAM;CAC1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,KAAK,eAAe,YAAY,UAAU;CAChD,MAAM,OAAO,eAAe;AAC1B,SACE,MAAM,QAAQ,GAAG,UAAU,MAAM,MAAM,YAAY,OAAO,GAAG,MAAM,GAAG;GAExE;CAEF,MAAM,WAAW,eACf,UAAU,YAAY,MAAM,SAAS,MAAM,KAAK,CAAC,CAClD;CAED,MAAM,oBAAoB;AACxB,mBAAiB;AACf,OAAI,CAAC,QAAQ,MACX,UAAS,QAAQ;OAEjB,SAAQ,QAAQ;KAEjB,GAAG;;CAGR,MAAM,qBAAqB,MAAkB;AAC3C,MAAI,MAAM,SAAU;AAEpB,MADe,EAAE,QACL,QAAQ,0BAA0B,CAAE;AAChD,YAAU,gBAAgB,MAAM,KAAK,CAAC;AACtC,WAAS,QAAQ;AACjB,UAAQ,QAAQ;;CAGlB,MAAM,oBAAoB,MAAqB;AAE7C,MADe,EAAE,QACL,QAAQ,0BAA0B,CAAE;AAChD,IAAE,gBAAgB;AAClB,YAAU,gBAAgB,MAAM,KAAK,CAAC;;AAGxC,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,MAAa,sBACX,OACA,EAAE,UAAU,UAAU,SACnB;CACH,MAAM,KAAK,aAAa,WAAW;CAEnC,MAAM,UAAU,eAAe;EAC7B,GAAG,EAAE,OAAO;EACZ,GAAG,GAAG,UAAU,MAAM,SAAS,CAAC;EAChC,GAAG,GAAG,YAAY,MAAM,SAAS;EAClC,CAAC;CACF,MAAM,UAAU,eAAe;EAC7B,GAAG,GAAG,QAAQ,SAAS;EACvB,GAAG,GAAG,UAAU,MAAM,SAAS,CAAC;EAChC,EAAE,UAAU,MAAM,SAAS,IAAI,CAAC,MAAM,UAAU;EACjD,CAAC;CACF,MAAM,WAAW,eAAe,CAC9B,GAAG,GAAG,QAAQ,QAAQ,EACtB,GAAG,GAAG,UAAU,MAAM,SAAS,CAAC,CACjC,CAAC;AAOF,QAAO;EACL,cAPmB,eAAe,CAAC,GAAG,GAAG,QAAQ,QAAQ,CAAC,CAAC;EAQ3D;EACA;EACA;EACA,gBAVqB,eAAe,GAAG,GAAG,QAAQ,OAAO,CAAC;EAW1D,gBAVqB,eAAe,GAAG,GAAG,QAAQ,UAAU,CAAC;EAW7D,iBAVsB,eAAe,GAAG,EAAE,WAAW,MAAM,GAAG,GAAG,CAAC;EAWlE,cAVmB,eAAe,GAAG,EAAE,QAAQ,MAAM,GAAG,GAAG,CAAC;EAW7D"}