element-plus
Version:
A Component Library for Vue 3
1 lines • 4.04 kB
Source Map (JSON)
{"version":3,"file":"collapse-item2.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n ns.b('item'),\n ns.is('active', isActive),\n ns.is('disabled', disabled),\n ]\"\n >\n <div\n role=\"tab\"\n :aria-expanded=\"isActive\"\n :aria-controls=\"ns.b(`content-${id}`)\"\n :aria-describedby=\"ns.b(`content-${id}`)\"\n >\n <div\n :id=\"ns.b(`head-${id}`)\"\n :class=\"[\n ns.be('item', 'header'),\n ns.is('active', isActive),\n { focusing: focusing && !disabled },\n ]\"\n role=\"button\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"handleHeaderClick\"\n @keypress.space.enter.stop.prevent=\"handleEnterClick\"\n @focus=\"handleFocus\"\n @blur=\"focusing = false\"\n >\n <slot name=\"title\">{{ title }}</slot>\n <el-icon :class=\"[ns.be('item', 'arrow'), ns.is('active', isActive)]\">\n <arrow-right />\n </el-icon>\n </div>\n </div>\n <el-collapse-transition>\n <div\n v-show=\"isActive\"\n :id=\"ns.b(`content-${id}`)\"\n :class=\"ns.be('item', 'wrap')\"\n role=\"tabpanel\"\n :aria-hidden=\"!isActive\"\n :aria-labelledby=\"ns.b(`head-${id}`)\"\n >\n <div :class=\"ns.be('item', 'content')\">\n <slot />\n </div>\n </div>\n </el-collapse-transition>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref } from 'vue'\nimport { generateId } from '@element-plus/utils'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { collapseContextKey } from '@element-plus/tokens'\nimport { collapseItemProps } from './collapse-item'\n\ndefineOptions({\n name: 'ElCollapseItem',\n})\n\nconst props = defineProps(collapseItemProps)\n\nconst collapse = inject(collapseContextKey)\nconst ns = useNamespace('collapse')\n\nconst focusing = ref(false)\nconst isClick = ref(false)\nconst id = ref(generateId())\n\nconst isActive = computed(() =>\n collapse?.activeNames.value.includes(props.name)\n)\n\nconst handleFocus = () => {\n setTimeout(() => {\n if (!isClick.value) {\n focusing.value = true\n } else {\n isClick.value = false\n }\n }, 50)\n}\n\nconst handleHeaderClick = () => {\n if (props.disabled) return\n collapse?.handleItemClick(props.name)\n focusing.value = false\n isClick.value = true\n}\n\nconst handleEnterClick = () => {\n collapse?.handleItemClick(props.name)\n}\n\ndefineExpose({\n /** @description current collapse-item whether active */\n isActive,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmEA,IAAA,MAAA,QAAA,GAAA,OAAA,kBAAA,CAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,aAAA,UAAA,CAAA,CAAA;AAEA,IAAA,MAAA,QAAA,GAAA,IAAA,KAAA,CAAA,CAAA;AACA,IAAA,MAAA,OAAA,GAAA,IAAA,KAAA,CAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,GAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAEA,IAAA,MAAA,QAAA,GAAA,SAAA,MACA,QAAA,gBAAA,CAAA,GAAA,QAAA,CAAA,WACA,CAAA,KAAA,CAAA,QAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA;AAEA,IAAA,MAAA,cAAA,MAAA;AACA,MAAA,UAAA,CAAA,MAAA;AACA,QAAA,IAAA,CAAA,QAAA,KAAA,EAAA;AACA,UAAA,QAAA,CAAA,KAAA,GAAA,IAAA,CAAA;AAAA,SACA,MAAA;AACA,UAAA,OAAA,CAAA,KAAA,GAAA,KAAA,CAAA;AAAA,SACA;AAAA,SACA,EAAA,CAAA,CAAA;AAAA,KACA,CAAA;AAEA,IAAA,MAAA,oBAAA,MAAA;AACA,MAAA,IAAA,KAAA,CAAA,QAAA;AAAA,QAAA,OAAA;AACA,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,WAAA,CAAA,eAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA;AACA,MAAA,QAAA,CAAA,KAAA,GAAA,KAAA,CAAA;AACA,MAAA,OAAA,CAAA,KAAA,GAAA,IAAA,CAAA;AAAA,KACA,CAAA;AAEA,IAAA,MAAA,mBAAA,MAAA;AACA,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,WAAA,CAAA,eAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA;AAAA,KACA,CAAA;AAEA,IAAA,MAAA,CAAA;AAAA,MAEA,QAAA;AAAA,KACA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}