naive-ui
Version:
A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
71 lines • 2.08 kB
JavaScript
import { defineComponent, h, inject } from 'vue';
import { render } from "../../_utils/index.mjs";
import { dropdownInjectionKey, dropdownMenuInjectionKey } from "./context.mjs";
export default defineComponent({
name: 'DropdownGroupHeader',
props: {
clsPrefix: {
type: String,
required: true
},
tmNode: {
type: Object,
required: true
}
},
setup() {
const {
showIconRef,
hasSubmenuRef
} = inject(dropdownMenuInjectionKey);
const {
renderLabelRef,
labelFieldRef,
nodePropsRef,
renderOptionRef
} = inject(dropdownInjectionKey);
return {
labelField: labelFieldRef,
showIcon: showIconRef,
hasSubmenu: hasSubmenuRef,
renderLabel: renderLabelRef,
nodeProps: nodePropsRef,
renderOption: renderOptionRef
};
},
render() {
var _a;
const {
clsPrefix,
hasSubmenu,
showIcon,
nodeProps,
renderLabel,
renderOption
} = this;
const {
rawNode
} = this.tmNode;
const node = h("div", Object.assign({
class: `${clsPrefix}-dropdown-option`
}, nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(rawNode)), h("div", {
class: `${clsPrefix}-dropdown-option-body ${clsPrefix}-dropdown-option-body--group`
}, h("div", {
"data-dropdown-option": true,
class: [`${clsPrefix}-dropdown-option-body__prefix`, showIcon && `${clsPrefix}-dropdown-option-body__prefix--show-icon`]
}, render(rawNode.icon)), h("div", {
class: `${clsPrefix}-dropdown-option-body__label`,
"data-dropdown-option": true
}, renderLabel ? renderLabel(rawNode) : render((_a = rawNode.title) !== null && _a !== void 0 ? _a : rawNode[this.labelField])), h("div", {
class: [`${clsPrefix}-dropdown-option-body__suffix`, hasSubmenu && `${clsPrefix}-dropdown-option-body__suffix--has-submenu`],
"data-dropdown-option": true
})));
if (renderOption) {
return renderOption({
node,
option: rawNode
});
}
return node;
}
});