@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
420 lines (410 loc) • 14.2 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var vueEmotion = require('@appbaseio/vue-emotion');
var computeScrollIntoView = _interopDefault(require('compute-scroll-into-view'));
var _templateObject;
var InputWrapper = vueEmotion.styled('span')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tflex: 1;\n\tposition: relative;\n\theight: 42px;\n"])));
var _templateObject$1;
var IconGroup = vueEmotion.styled('div')(_templateObject$1 || (_templateObject$1 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgrid-gap: 6px;\n\tmargin: 0 10px;\n\theight: 100%;\n\n\t", ";\n\n\t", ";\n\n\t", ";\n"])), function (_ref) {
var positionType = _ref.positionType;
if (positionType === 'absolute') {
return "\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\ttransform: translateY(-50%);\n\t\t\t";
}
return null;
}, function (_ref2) {
var groupPosition = _ref2.groupPosition;
return groupPosition === 'right' ? "\n\t\t\t\t\tright: 0;\n\t\t\t " : "\n\t\t\t\t\tleft: 0;\n\t\t\t ";
}, function (_ref3) {
var enableAI = _ref3.enableAI;
return enableAI ? "\n\t\ttop: 0%;\n\t transform: translateY(0);\n \theight: 42px;\n\t" : '';
});
var _templateObject$2, _templateObject2;
var IconWrapper = vueEmotion.styled('div')(_templateObject$2 || (_templateObject$2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmax-width: 23px;\n\twidth: max-content;\n\tcursor: pointer;\n\theight: 100%;\n\tmin-width: 20px;\n\n\tsvg.search-icon {\n\t\tfill: ", ";\n\t\ttransform: scale(1.5);\n\t}\n\n\tsvg.cancel-icon {\n\t\tfill: ", ";\n\t}\n"])), function (_ref) {
var _ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? {} : _ref$theme;
return theme.colors ? theme.colors.primaryColor : 'unset';
}, function (_ref2) {
var _ref2$theme = _ref2.theme,
theme = _ref2$theme === void 0 ? {} : _ref2$theme;
return theme.colors ? theme.colors.borderColor : '#000';
});
var ButtonIconWrapper = vueEmotion.styled(IconWrapper)(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\tborder-radius: 4px;\n\tvertical-align: middle;\n\theight: 25px;\n\tfont-size: 12px;\n\tborder: 1px solid ", ";\n\tcolor: ", ";\n\tmax-width: unset;\n\tpadding: 5px;\n"])), function (_ref3) {
var theme = _ref3.theme;
return theme.colors ? theme.colors.primaryColor : '#000';
}, function (_ref4) {
var theme = _ref4.theme;
return theme.colors ? theme.colors.primaryColor : '#000';
});
/**
* Scroll node into view if necessary
* @param {HTMLElement} node the element that should scroll into view
* @param {HTMLElement} rootNode the root element of the component
*/
// eslint-disable-next-line
var scrollIntoView = function scrollIntoView(node, rootNode) {
if (node === null) {
return;
}
var actions = computeScrollIntoView(node, {
boundary: rootNode,
block: 'nearest',
scrollMode: 'if-needed'
});
actions.forEach(function (_ref) {
var el = _ref.el,
top = _ref.top,
left = _ref.left;
el.scrollTop = top;
el.scrollLeft = left;
});
};
var Downshift = {
// eslint-disable-next-line
props: ['isOpen', 'inputValue', 'selectedItem', 'highlightedIndex', 'handleChange',
// 'itemToString',
'handleMouseup'],
data: function data() {
return {
isMouseDown: false,
internal_isOpen: false,
internal_inputValue: '',
internal_selectedItem: null,
internal_highlightedIndex: null
};
},
computed: {
mergedState: function mergedState() {
var _this = this;
return Object.keys(this.$props).reduce(function (state, key) {
var _extends2;
return _rollupPluginBabelHelpers._extends({}, state, (_extends2 = {}, _extends2[key] = _this.isControlledProp(key) ? _this.$props[key] : _this["internal_" + key], _extends2));
}, {});
},
internalItemCount: function internalItemCount() {
return this.items.length;
}
},
mounted: function mounted() {
window.addEventListener('mousedown', this.handleWindowMousedown);
window.addEventListener('mouseup', this.handleWindowMouseup);
},
beforeUnmount: function beforeUnmount() {
window.removeEventListener('mousedown', this.handleWindowMousedown);
window.removeEventListener('mouseup', this.handleWindowMouseup);
},
methods: {
handleWindowMousedown: function handleWindowMousedown() {
this.isMouseDown = true;
},
handleWindowMouseup: function handleWindowMouseup(event) {
this.isMouseDown = false;
if ((event.target === this.$refs.rootNode || !this.$refs.rootNode.contains(event.target)) && this.mergedState.isOpen) {
// TODO: handle on outer click here
if (!this.isMouseDown) {
this.reset();
if (this.$props.handleMouseup) {
this.$props.handleMouseup({
isOpen: false
});
}
}
}
},
keyDownArrowDown: function keyDownArrowDown(event) {
event.preventDefault();
var amount = event.shiftKey ? 5 : 1;
if (this.mergedState.isOpen) {
this.changeHighlightedIndex(amount);
} else {
this.setState({
isOpen: true
});
this.setHighlightedIndex();
}
},
keyDownArrowUp: function keyDownArrowUp(event) {
event.preventDefault();
var amount = event.shiftKey ? -5 : -1;
if (this.mergedState.isOpen) {
this.changeHighlightedIndex(amount);
} else {
this.setState({
isOpen: true
});
this.setHighlightedIndex();
}
},
keyDownEnter: function keyDownEnter(event) {
if (this.mergedState.isOpen) {
event.preventDefault();
this.selectHighlightedItem();
}
},
keyDownEscape: function keyDownEscape(event) {
event.preventDefault();
this.reset();
},
selectHighlightedItem: function selectHighlightedItem() {
return this.selectItemAtIndex(this.mergedState.highlightedIndex);
},
selectItemAtIndex: function selectItemAtIndex(itemIndex) {
var item = this.items[itemIndex];
if (item == null) {
return;
}
this.selectItem(item);
},
selectItem: function selectItem(item) {
if (this.$props.handleChange) {
this.$props.handleChange(item);
}
function getInputValue() {
if (this.isControlledProp('selectedItem')) {
return '';
}
return typeof item === 'object' ? item.label || '' : item;
}
this.setState({
isOpen: false,
highlightedIndex: null,
selectedItem: item,
inputValue: getInputValue.call(this)
});
},
changeHighlightedIndex: function changeHighlightedIndex(moveAmount) {
if (this.internalItemCount < 0) {
return;
}
var highlightedIndex = this.mergedState.highlightedIndex;
var baseIndex = highlightedIndex;
if (baseIndex === null) {
baseIndex = moveAmount > 0 ? -1 : this.internalItemCount + 1;
}
var newIndex = baseIndex + moveAmount;
if (newIndex < 0) {
newIndex = this.internalItemCount;
} else if (newIndex > this.internalItemCount) {
newIndex = 0;
}
this.setHighlightedIndex(newIndex);
},
setHighlightedIndex: function setHighlightedIndex(highlightedIndex) {
if (highlightedIndex === void 0) {
highlightedIndex = null;
}
this.setState({
highlightedIndex: highlightedIndex
});
var element = document.getElementById("Downshift" + highlightedIndex);
scrollIntoView(element, this.rootNode);
// Implement scrollIntroView thingy
},
reset: function reset() {
var selectedItem = this.mergedState.selectedItem;
this.setState({
isOpen: false,
highlightedIndex: null,
inputValue: selectedItem
});
},
getItemProps: function getItemProps(_ref) {
var index = _ref.index,
item = _ref.item;
var newIndex = index;
if (index === undefined) {
if (this.$props.itemToString) {
this.items.push(this.$props.itemToString(item));
} else {
this.items.push(item);
}
newIndex = this.items.indexOf(item);
} else {
this.items[newIndex] = item;
}
return {
id: "Downshift" + newIndex
};
},
getItemEvents: function getItemEvents(_ref2) {
var index = _ref2.index,
item = _ref2.item;
var newIndex = index;
if (index === undefined) {
newIndex = this.items.indexOf(item);
}
var vm = this;
return {
mouseenter: function mouseenter() {
vm.setHighlightedIndex(newIndex);
},
click: function click(event) {
event.stopPropagation();
vm.selectItemAtIndex(newIndex);
}
};
},
getInputProps: function getInputProps(_ref3) {
var value = _ref3.value;
var inputValue = this.mergedState.inputValue;
if (value !== inputValue) {
this.setState({
inputValue: value
});
}
return {
value: inputValue
};
},
getButtonProps: function getButtonProps(_ref4) {
var _this2 = this;
var onClick = _ref4.onClick,
onKeyDown = _ref4.onKeyDown,
onKeyUp = _ref4.onKeyUp,
onBlur = _ref4.onBlur;
return {
click: function click(event) {
_this2.setState({
isOpen: true,
inputValue: event.target.value
});
if (onClick) {
onClick(event);
}
},
keydown: function keydown(event) {
if (event.key && _this2["keyDown" + event.key]) {
_this2["keyDown" + event.key].call(_this2, event);
}
if (onKeyDown) {
onKeyDown(event);
}
},
keyup: function keyup(event) {
if (onKeyUp) {
onKeyUp(event);
}
},
blur: function blur(event) {
if (onBlur) {
onBlur(event);
}
}
};
},
getInputEvents: function getInputEvents(_ref5) {
var _this3 = this;
var onInput = _ref5.onInput,
onBlur = _ref5.onBlur,
onFocus = _ref5.onFocus,
onKeyPress = _ref5.onKeyPress,
onKeyDown = _ref5.onKeyDown,
onKeyUp = _ref5.onKeyUp,
onClick = _ref5.onClick;
return {
input: function input(event) {
_this3.setState({
isOpen: true,
inputValue: event.target.value
});
if (onInput) {
onInput(event);
}
},
focus: function focus(event) {
if (onFocus) {
onFocus(event);
}
},
keydown: function keydown(event) {
if (event.key && _this3["keyDown" + event.key]) {
_this3["keyDown" + event.key].call(_this3, event);
}
if (onKeyDown) {
onKeyDown(event);
}
},
keypress: function keypress(event) {
if (onKeyPress) {
onKeyPress(event);
}
},
keyup: function keyup(event) {
if (onKeyUp) {
onKeyUp(event);
}
},
blur: function blur(event) {
if (onBlur) {
onBlur(event);
}
// TODO: implement isMouseDown
// this.reset()
},
click: onClick
};
},
getHelpersAndState: function getHelpersAndState() {
var getItemProps = this.getItemProps,
getItemEvents = this.getItemEvents,
getInputProps = this.getInputProps,
getInputEvents = this.getInputEvents,
getButtonProps = this.getButtonProps,
setHighlightedIndex = this.setHighlightedIndex;
return _rollupPluginBabelHelpers._extends({
getItemProps: getItemProps,
getItemEvents: getItemEvents,
getInputProps: getInputProps,
getInputEvents: getInputEvents,
getButtonProps: getButtonProps,
setHighlightedIndex: setHighlightedIndex
}, this.mergedState);
},
isControlledProp: function isControlledProp(prop) {
return this.$props[prop] !== undefined;
},
setState: function setState(stateToSet) {
var _this4 = this;
// eslint-disable-next-line
Object.keys(stateToSet).forEach(function (key) {
// eslint-disable-next-line
if (_this4.isControlledProp(key)) {
_this4.$emit(key + "Change", stateToSet[key]);
_this4.$emit(key + "-change", stateToSet[key]);
} else {
_this4["internal_" + key] = stateToSet[key];
}
});
this.$emit('stateChange', this.mergedState);
this.$emit('state-change', this.mergedState);
}
},
render: function render() {
this.items = [];
return vue.createVNode("div", {
"ref": "rootNode"
}, [this.$slots["default"] && this.$slots["default"](_rollupPluginBabelHelpers._extends({}, this.getHelpersAndState()))]);
}
};
var CancelSvg = (function () {
return vue.createVNode("svg", {
"alt": "Clear",
"class": "cancel-icon",
"xmlns": "http://www.w3.org/2000/svg",
"height": "20px",
"viewBox": "0 0 24 24",
"width": "20px"
}, [vue.createVNode("title", null, [vue.createTextVNode("Clear")]), vue.createVNode("path", {
"d": "M0 0h24v24H0V0z",
"fill": "none"
}, null), vue.createVNode("path", {
"d": "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
}, null)]);
});
exports.ButtonIconWrapper = ButtonIconWrapper;
exports.CancelSvg = CancelSvg;
exports.Downshift = Downshift;
exports.IconGroup = IconGroup;
exports.IconWrapper = IconWrapper;
exports.InputWrapper = InputWrapper;