@coreui/vue-pro
Version:
UI Components Library for Vue.js
170 lines (166 loc) • 5.82 kB
JavaScript
;
var vue = require('vue');
var CButton = require('../button/CButton.js');
var props = require('../../props.js');
const CDropdownToggle = vue.defineComponent({
name: 'CDropdownToggle',
props: {
/**
* Component used for the root node. Either a string to use a HTML element or a component.
*/
as: {
type: String,
default: 'button',
},
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
*
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
*/
color: props.Color,
/**
* Enables pseudo element caret on toggler.
*/
caret: {
type: Boolean,
default: true,
},
/**
* Create a custom toggler which accepts any content.
*/
custom: Boolean,
/**
* Toggle the disabled state for the component.
*/
disabled: Boolean,
/**
* If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
*
* @since 5.0.0
*/
navLink: {
type: Boolean,
default: true,
},
/**
* @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
*/
shape: props.Shape,
/**
* Size the component small or large.
*
* @values 'sm', 'lg'
*/
size: {
type: String,
validator: (value) => {
return ['sm', 'lg'].includes(value);
},
},
/**
* Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
*/
split: Boolean,
/**
* Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
*
* @type 'hover' | 'focus' | 'click'
*/
trigger: {
type: String,
default: 'click',
},
/**
* Set the button variant to an outlined button or a ghost button.
*
* @values 'ghost', 'outline'
*/
variant: {
type: String,
validator: (value) => {
return ['ghost', 'outline'].includes(value);
},
},
},
setup(props, { slots }) {
const togglerRef = vue.ref();
const dropdownToggleRef = vue.inject('dropdownToggleRef');
const dropdownVariant = vue.inject('variant');
const visible = vue.inject('visible');
const setVisible = vue.inject('setVisible');
const triggers = {
...((props.trigger === 'click' || props.trigger.includes('click')) && {
onClick: (event) => {
event.preventDefault();
if (props.disabled) {
return;
}
setVisible();
},
}),
...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
onfocus: () => {
if (props.disabled) {
return;
}
setVisible(true);
},
onblur: () => {
if (props.disabled) {
return;
}
setVisible(false);
},
}),
};
const togglerProps = vue.computed(() => {
return {
class: {
'nav-link': dropdownVariant === 'nav-item' && props.navLink,
'dropdown-toggle': props.caret,
'dropdown-toggle-split': props.split,
disabled: props.disabled,
show: visible.value,
},
'aria-expanded': visible.value,
...(!props.disabled && { ...triggers }),
};
});
vue.onMounted(() => {
if (togglerRef.value) {
dropdownToggleRef.value = togglerRef.value.$el;
}
});
return () => props.custom
? slots.default &&
slots.default().map((slot) => vue.cloneVNode(slot, {
ref: (el) => {
togglerRef.value = el;
},
...triggers,
}))
: dropdownVariant === 'nav-item' && props.navLink
? vue.h('a', {
href: '#',
...togglerProps.value,
role: 'button',
ref: dropdownToggleRef,
}, { default: () => slots.default && slots.default() })
: vue.h(CButton.CButton, {
...togglerProps.value,
as: props.as,
color: props.color,
disabled: props.disabled,
shape: props.shape,
size: props.size,
variant: props.variant,
ref: (el) => {
togglerRef.value = el;
},
}, () => props.split
? vue.h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
: slots.default && slots.default());
},
});
exports.CDropdownToggle = CDropdownToggle;
//# sourceMappingURL=CDropdownToggle.js.map