@coreui/vue-pro
Version:
UI Components Library for Vue.js
150 lines (146 loc) • 4.96 kB
JavaScript
;
var vue = require('vue');
var core = require('@popperjs/core');
var isRTL = require('../../utils/isRTL.js');
const CPicker = vue.defineComponent({
name: 'CPicker',
props: {
/**
* Set container type for the component.
*/
container: {
type: String,
default: 'dropdown',
},
/**
* Toggle the disabled state for the component.
*/
disabled: Boolean,
/**
* A string of all className you want applied to the dropdown menu.
*/
dropdownClassNames: String,
/**
* Toggle visibility of footer element or set the content of footer.
*/
footer: Boolean,
/**
* Toggle the visibility of the component.
*/
visible: Boolean,
},
emits: [
/**
* Callback fired when the component requests to be hidden.
*/
'hide',
/**
* Callback fired when the component requests to be shown.
*/
'show',
],
setup(props, { attrs, emit, slots }) {
const pickerRef = vue.ref();
const dropdownRef = vue.ref();
const togglerRef = vue.ref();
const popper = vue.ref();
const visible = vue.ref(props.visible);
vue.watch(() => props.visible, () => {
visible.value = props.visible;
});
vue.watch(visible, () => {
if (props.container === 'inline') {
return;
}
if (visible.value) {
emit('show');
window.addEventListener('mouseup', handleMouseUp);
window.addEventListener('keyup', handleKeyUp);
initPopper();
return;
}
emit('hide');
window.removeEventListener('mouseup', handleMouseUp);
window.removeEventListener('keyup', handleKeyUp);
destroyPopper();
});
const initPopper = () => {
if (togglerRef.value && dropdownRef.value) {
popper.value = core.createPopper(togglerRef.value, dropdownRef.value, {
placement: isRTL.default(pickerRef.value) ? 'bottom-end' : 'bottom-start',
modifiers: [
{
name: 'preventOverflow',
options: {
boundary: 'clippingParents',
},
},
{
name: 'offset',
options: {
offset: [0, 2],
},
},
],
});
}
};
const destroyPopper = () => {
if (popper.value) {
popper.value.destroy();
}
popper.value = undefined;
};
const handleKeyUp = (event) => {
if (event.key === 'Escape') {
visible.value = false;
}
};
const handleMouseUp = (event) => {
if (pickerRef.value && pickerRef.value.contains(event.target)) {
return;
}
visible.value = false;
};
switch (props.container) {
case 'inline': {
return () => vue.h('div', { class: 'picker', ref: pickerRef }, slots.default && slots.default());
}
default: {
return () => vue.h('div', {
class: [
attrs.class,
{
show: visible.value,
},
],
ref: pickerRef,
}, [
/**
* @slot Location for the toggler element.
*/
slots.toggler &&
slots.toggler().map((slot) => vue.cloneVNode(slot, {
onClick: () => {
if (!props.disabled && !visible.value) {
visible.value = true;
}
},
ref: (el) => {
togglerRef.value = el;
},
})),
vue.h('div', { class: props.dropdownClassNames, ref: dropdownRef }, [
slots.default && slots.default(),
/**
* @slot Location for the footer element.
*/
props.footer && slots.footer && slots.footer(),
]),
]);
}
}
},
});
exports.CPicker = CPicker;
//# sourceMappingURL=CPicker.js.map