element-plus
Version:
A Component Library for Vue 3
1 lines • 7.09 kB
Source Map (JSON)
{"version":3,"file":"node2.mjs","sources":["../../../../../../packages/components/cascader-panel/src/node.vue"],"sourcesContent":["<template>\n <li\n :id=\"`${menuId}-${node.uid}`\"\n role=\"menuitem\"\n :aria-haspopup=\"!isLeaf\"\n :aria-owns=\"isLeaf ? null : menuId\"\n :aria-expanded=\"inExpandingPath\"\n :tabindex=\"expandable ? -1 : undefined\"\n :class=\"[\n 'el-cascader-node',\n checkStrictly && 'is-selectable',\n inExpandingPath && 'in-active-path',\n inCheckedPath && 'in-checked-path',\n node.checked && 'is-active',\n !expandable && 'is-disabled',\n ]\"\n @mouseenter=\"handleHoverExpand\"\n @focus=\"handleHoverExpand\"\n @click=\"handleClick\"\n >\n <!-- prefix -->\n <el-checkbox\n v-if=\"multiple\"\n :model-value=\"node.checked\"\n :indeterminate=\"node.indeterminate\"\n :disabled=\"isDisabled\"\n @click.stop\n @update:model-value=\"handleSelectCheck\"\n />\n <el-radio\n v-else-if=\"checkStrictly\"\n :model-value=\"checkedNodeId\"\n :label=\"node.uid\"\n :disabled=\"isDisabled\"\n @update:model-value=\"handleSelectCheck\"\n @click.stop\n >\n <!--\n Add an empty element to avoid render label,\n do not use empty fragment here for https://github.com/vuejs/vue-next/pull/2485\n -->\n <span></span>\n </el-radio>\n <el-icon\n v-else-if=\"isLeaf && node.checked\"\n class=\"el-cascader-node__prefix\"\n >\n <check />\n </el-icon>\n\n <!-- content -->\n <node-content />\n\n <!-- postfix -->\n <template v-if=\"!isLeaf\">\n <el-icon v-if=\"node.loading\" class=\"is-loading el-cascader-node__postfix\">\n <loading />\n </el-icon>\n <el-icon v-else class=\"arrow-right el-cascader-node__postfix\">\n <arrow-right />\n </el-icon>\n </template>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport ElCheckbox from '@element-plus/components/checkbox'\nimport ElRadio from '@element-plus/components/radio'\nimport ElIcon from '@element-plus/components/icon'\nimport { Check, Loading, ArrowRight } from '@element-plus/icons-vue'\nimport NodeContent from './node-content'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\nimport type { default as CascaderNode } from './node'\n\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n name: 'ElCascaderNode',\n\n components: {\n ElCheckbox,\n ElRadio,\n NodeContent,\n ElIcon,\n Check,\n Loading,\n ArrowRight,\n },\n\n props: {\n node: {\n type: Object as PropType<CascaderNode>,\n required: true,\n },\n menuId: String,\n },\n\n emits: ['expand'],\n\n setup(props, { emit }) {\n const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n const isHoverMenu = computed(() => panel.isHoverMenu)\n const multiple = computed(() => panel.config.multiple)\n const checkStrictly = computed(() => panel.config.checkStrictly)\n const checkedNodeId = computed(() => panel.checkedNodes[0]?.uid)\n const isDisabled = computed(() => props.node.isDisabled)\n const isLeaf = computed(() => props.node.isLeaf)\n const expandable = computed(\n () => (checkStrictly.value && !isLeaf.value) || !isDisabled.value\n )\n const inExpandingPath = computed(() => isInPath(panel.expandingNode!))\n // only useful in check-strictly mode\n const inCheckedPath = computed(\n () => checkStrictly.value && panel.checkedNodes.some(isInPath)\n )\n\n const isInPath = (node: CascaderNode) => {\n const { level, uid } = props.node\n return node?.pathNodes[level - 1]?.uid === uid\n }\n\n const doExpand = () => {\n if (inExpandingPath.value) return\n panel.expandNode(props.node)\n }\n\n const doCheck = (checked: boolean) => {\n const { node } = props\n if (checked === node.checked) return\n panel.handleCheckChange(node, checked)\n }\n\n const doLoad = () => {\n panel.lazyLoad(props.node, () => {\n if (!isLeaf.value) doExpand()\n })\n }\n\n const handleHoverExpand = (e: Event) => {\n if (!isHoverMenu.value) return\n handleExpand()\n !isLeaf.value && emit('expand', e)\n }\n\n const handleExpand = () => {\n const { node } = props\n // do not exclude leaf node because the menus expanded might have to reset\n if (!expandable.value || node.loading) return\n node.loaded ? doExpand() : doLoad()\n }\n\n const handleClick = () => {\n if (isHoverMenu.value && !isLeaf.value) return\n\n if (\n isLeaf.value &&\n !isDisabled.value &&\n !checkStrictly.value &&\n !multiple.value\n ) {\n handleCheck(true)\n } else {\n handleExpand()\n }\n }\n\n const handleSelectCheck = (checked: boolean) => {\n if (checkStrictly.value) {\n doCheck(checked)\n if (props.node.loaded) {\n doExpand()\n }\n } else {\n handleCheck(checked)\n }\n }\n\n const handleCheck = (checked: boolean) => {\n if (!props.node.loaded) {\n doLoad()\n } else {\n doCheck(checked)\n !checkStrictly.value && doExpand()\n }\n }\n\n return {\n panel,\n isHoverMenu,\n multiple,\n checkStrictly,\n checkedNodeId,\n isDisabled,\n isLeaf,\n expandable,\n inExpandingPath,\n inCheckedPath,\n handleHoverExpand,\n handleExpand,\n handleClick,\n handleCheck,\n handleSelectCheck,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;AA6EA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAEZ,QAAQ;AAAA;AAAA,EAGV,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ,OAAO;AAErB,UAAM,cAAc,SAAS,MAAM,MAAM;AACzC,UAAM,WAAW,SAAS,MAAM,MAAM,OAAO;AAC7C,UAAM,gBAAgB,SAAS,MAAM,MAAM,OAAO;AAClD,UAAM,gBAAgB,SAAS,MAAM;AACrC,UAAM;AACN,mBAAe,qBAAqB,KAAK;AACzC;AAGA,UAAM,iCAAiC;AAEvC,UAAM;AAIN,UAAM,qBAAmC;AACvC;AACA,yCAAmC;AAAQ;AAG7C,UAAM;AACJ,0BAAoB;AAAO;AAC3B;AAAuB;AAGzB,UAAM;AACJ;AACA,sBAAgB;AAAc;AAC9B;AAA8B;AAGhC,UAAM;AACJ;AACE,YAAI;AAAe;AAAA;AAAA;AAIvB;AACE,UAAI;AAAoB;AACxB;AACA;AAAgC;AAGlC;AACE;AAEA,oCAA8B;AAAS;AACvC;AAA2B;AAG7B,UAAM;AACJ;AAAwC;AAExC;AAME;AAAY;AAEZ;AAAA;AAAA;AAIJ;AACE;AACE;AACA;AACE;AAAA;AAAA;AAGF;AAAY;AAAA;AAIhB;AACE;AACE;AAAA;AAEA;AACA;AAAwB;AAAA;AAI5B;AAAO;AACL;AACA,MACA;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;;AAzMwB,QACtB;AAAW;AACd;AACW,yCACmB;AAAA,IAC9B;AAAU,IACV;AAAK;;AAAoC;AAAuD;AAAyC;AAAyC;AAAkC;;;AAS5L;AACN;KAEnB;AAAA,wBAEgB;AAAA;;AACb;AACoB;AACA;AACf,MACL;AAAqC;AAAA;gBAGd;MACvB;AAAA;AACe,MACf;AAAU;AACV,MACA;AAAK;;;;AAEN;AAIa;;;;;AAIR;;wBAEI;AAAA;;;;AAGK;AACA;AAEhB;AACuB;AACM;;AAAO;;;AACrB;;;;;AAEQ;;;AACJ;;;;;;;;;;;;;;;"}