@coreui/vue
Version:
UI Components Library for Vue.js
126 lines (122 loc) • 5.04 kB
JavaScript
;
var vue = require('vue');
var utils = require('./utils.js');
const CSearchButton = vue.defineComponent({
name: 'CSearchButton',
props: {
/**
* Toggle the disabled state for the component.
*/
disabled: Boolean,
/**
* Placeholder content rendered inside `.search-button-placeholder`.
*/
placeholder: {
type: String,
default: 'Search',
},
/**
* Prevent the browser's default behavior when the configured shortcut matches.
*/
preventDefault: {
type: Boolean,
default: true,
},
/**
* Comma-separated shortcut list. The component matches all configured shortcuts and renders the platform-preferred one.
*/
shortcut: {
type: String,
default: 'meta+/,ctrl+/',
},
},
emits: [
/**
* Event called when the user clicks on the component.
*/
'click',
/**
* Event called when the component is activated by click or keyboard shortcut.
*/
'trigger',
],
setup(props, { emit, slots }) {
const activeKeys = vue.ref([]);
const shortcuts = vue.computed(() => utils.parseShortcut(props.shortcut));
const preferredShortcut = vue.computed(() => utils.getPreferredShortcut(shortcuts.value));
const shortcutTokens = vue.computed(() => utils.formatShortcutTokens(preferredShortcut.value?.shortcut || ''));
const handleShortcut = (event) => {
if (props.disabled || event.defaultPrevented || event.repeat || utils.shouldIgnoreShortcut(event)) {
return;
}
const matchedShortcut = shortcuts.value.find((shortcut) => utils.matchesShortcut(shortcut, event));
if (!matchedShortcut) {
return;
}
if (props.preventDefault) {
event.preventDefault();
}
emit('trigger');
};
const handleDocumentKeydown = (event) => {
activeKeys.value = Array.from(utils.getPressedKeys(event));
handleShortcut(event);
};
const handleDocumentKeyup = (event) => {
activeKeys.value = Array.from(utils.getPressedKeys(event));
};
const handleWindowBlur = () => {
activeKeys.value = [];
};
const handleClick = (event) => {
emit('click', event);
emit('trigger');
};
vue.onMounted(() => {
if (typeof document === 'undefined' || typeof window === 'undefined') {
return;
}
document.addEventListener('keydown', handleDocumentKeydown);
document.addEventListener('keyup', handleDocumentKeyup);
window.addEventListener('blur', handleWindowBlur);
});
vue.onBeforeUnmount(() => {
if (typeof document === 'undefined' || typeof window === 'undefined') {
return;
}
document.removeEventListener('keydown', handleDocumentKeydown);
document.removeEventListener('keyup', handleDocumentKeyup);
window.removeEventListener('blur', handleWindowBlur);
});
return () => vue.h('button', {
type: 'button',
class: 'search-button',
disabled: props.disabled,
onClick: handleClick,
}, [
slots.default
? slots.default()
: [
slots.icon
? slots.icon()
: vue.h('svg', {
class: 'search-button-icon',
xmlns: 'http://www.w3.org/2000/svg',
viewBox: '0 0 512 512',
'aria-hidden': 'true',
}, vue.h('path', {
fill: 'currentColor',
d: 'm479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941',
})),
vue.h('span', { class: 'search-button-placeholder' }, props.placeholder),
],
vue.h('span', { class: 'search-button-keys', 'aria-hidden': 'true' }, shortcutTokens.value.map((key) => vue.h('span', {
class: ['search-button-key', { active: activeKeys.value.includes(key) }],
'data-coreui-search-button-key': key,
key,
}, key))),
]);
},
});
exports.CSearchButton = CSearchButton;
//# sourceMappingURL=CSearchButton.js.map