element-plus
Version:
A Component Library for Vue 3
1 lines • 4.12 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":";;;;;;;;;;;;;;;;mCA6Dc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAIA,IAAM,MAAA,QAAA,GAAW,OAAO,kBAAkB,CAAA,CAAA;AAC1C,IAAM,MAAA,EAAA,GAAK,aAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAW,IAAI,KAAK,CAAA,CAAA;AAC1B,IAAM,MAAA,OAAA,GAAU,IAAI,KAAK,CAAA,CAAA;AACzB,IAAM,MAAA,EAAA,GAAK,GAAI,CAAA,UAAA,EAAY,CAAA,CAAA;AAE3B,IAAM,MAAA,QAAA,GAAW,SAAS,MACxB,QAAA,gBAA4B,CAAA,GAAA,QAAA,CAAS,WACvC,CAAA,KAAA,CAAA,QAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA;AAEA,IAAA,MAAM,cAAc,MAAM;AACxB,MAAA,UAAA,CAAW,MAAM;AACf,QAAI,IAAA,CAAC,QAAQ,KAAO,EAAA;AAClB,UAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAA;AAAA,SACZ,MAAA;AACL,UAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AAAA,SAClB;AAAA,SACC,EAAE,CAAA,CAAA;AAAA,KACP,CAAA;AAEA,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAA,IAAI,KAAM,CAAA,QAAA;AAAU,QAAA,OAAA;AACpB,MAAU,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,WAA0B,CAAA,eAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA;AACpC,MAAA,QAAA,CAAS,KAAQ,GAAA,KAAA,CAAA;AACjB,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MAAU,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,WAA0B,CAAA,eAAA,CAAA,KAAA,CAAA,IAAA,CAAA,CAAA;AAAA,KACtC,CAAA;AAEA,IAAa,MAAA,CAAA;AAAA,MAEX,QAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}