UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 5.16 kB
{"version":3,"file":"collapse-item.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 },\n ]\"\n role=\"button\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"handleHeaderClick\"\n @keyup.space.enter.stop=\"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></slot>\n </div>\n </div>\n </el-collapse-transition>\n </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, 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'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n name: 'ElCollapseItem',\n components: { ElCollapseTransition, ElIcon, ArrowRight },\n props: {\n title: {\n type: String,\n default: '',\n },\n name: {\n type: [String, Number] as PropType<string | number>,\n default: () => {\n return generateId()\n },\n },\n disabled: Boolean,\n },\n setup(props) {\n const collapse = inject<CollapseProvider>('collapse')\n const ns = useNamespace('collapse')\n\n const contentWrapStyle = ref({\n height: 'auto',\n display: 'block',\n })\n const contentHeight = ref(0)\n const focusing = ref(false)\n const isClick = ref(false)\n const id = ref(generateId())\n\n const isActive = computed(() => {\n return collapse?.activeNames.value.indexOf(props.name) > -1\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 = () => {\n if (props.disabled) return\n collapse?.handleItemClick(props.name)\n focusing.value = false\n isClick.value = true\n }\n\n const handleEnterClick = () => {\n collapse?.handleItemClick(props.name)\n }\n\n return {\n isActive,\n contentWrapStyle,\n contentHeight,\n focusing,\n isClick,\n id,\n ns,\n handleFocus,\n handleHeaderClick,\n handleEnterClick,\n collapse,\n }\n },\n})\n</script>\n"],"names":["ElCollapseTransition","_openBlock","_normalizeClass","_withCtx","_createElementVNode"],"mappings":";;;;;;;;;;AA6DA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,wBAAEA,qBAAsB,QAAQ;AAAA,EAC5C,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS,MAAM;AACb,eAAO;AAAA;AAAA;AAAA,IAGX,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW,OAAyB;AAC1C,UAAM,KAAK,aAAa;AAExB,UAAM,mBAAmB,IAAI;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAS;AAAA;AAEX,UAAM,gBAAgB,IAAI;AAC1B,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AACpB,UAAM,KAAK,IAAI;AAEf,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,kDAAkD;AAAA;AAG3D,UAAM,cAAc,MAAM;AACxB,iBAAW,MAAM;AACf,YAAI,CAAC,QAAQ,OAAO;AAClB,mBAAS,QAAQ;AAAA,eACZ;AACL,kBAAQ,QAAQ;AAAA;AAAA,SAEjB;AAAA;AAGL,UAAM,oBAAoB,MAAM;AAC9B,UAAI,MAAM;AAAU;AACpB;AACA,eAAS,QAAQ;AACjB,cAAQ,QAAQ;AAAA;AAGlB,UAAM,mBAAmB,MAAM;AAC7B;AAAgC;AAGlC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;SA5HIC;AAAA,WAAUC,eAAI;AAAA,MAAgB,QAAG,EAAE;AAAA,MAA4B,QAAG,GAAE,eAAa;AAAA;;KAMvF;AAAA,uBACY;AAAA,MACT;AAAA,MACA,iBAAe;AAAA,MACf,sBAAkB,KAAE,WAAE,KAAY;AAAA;OAEnC;AAAA,yBACW,OAAS;AAAA,QACjB,SAAK;AAAA,eAAcA,eAAK;AAAA,UAA8B,QAAG,GAAE;AAAA,+BAAkC,KAAQ;AAAA;;QAMrG;AAAA,QACA,UAAK;AAAA,QACL,SAAK,iEAAmB;AAAA,QACxB,SAAK,iDAAE,sCAAW;AAAA,QAClB,SAAI,uCAAE,oBAAQ;AAAA;SAEf;AAAA,6CAAsB;AAAA;;oBACP,oBAAK;AAAA;;mBAClBC,QAAe;AAAA;;;;;OAIrB,GAayB;AAAA,mDADjB;AAAA,uBAXN;AAAA,uBAEWC,mBAAc;AAAA,UACtB,SAAK,gBAAE,KAAE;AAAA,UACV,OAAKF,eAAU;AAAA,UACd;AAAA,UACA,qBAAiB;AAAA;WAElB;AAAA,6BAAW,OAAE;AAAA;aACX;AAAA;;eARc;AAAA;;;;;;;;;;;"}