@appbaseio/reactivesearch-vue/dist/es/Input-cda7f4ad.js

A Vue UI components library for building search experiences

import { _ as _taggedTemplateLiteralLoose } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { styled } from '@appbaseio/vue-emotion';
import { css } from '@emotion/css';

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
var alertBorder = function alertBorder(_ref) {
  var theme = _ref.theme;
  return "\n\tborder: 1px solid " + theme.colors.alertColor + ";\n";
};
var input = function input(searchBox) {
  return "\nwidth: 100%;\nline-height: 1.5;\nmin-height: 42px;\npadding: 8px 12px;\nborder: 1px solid #ccc;\nbackground-color: #fafafa;\nfont-size: 0.9rem;\noutline: none;\n&:focus {\n\tbackground-color: #fff;\n}\n" + (searchBox && "\n\tpadding: 8px 12px 9px;\n\tborder: 1px solid transparent;\n\tborder-radius: 6px;\n\tmin-height: unset;\n") + ";\n";
};
var dark = function dark(theme) {
  return "\n\tborder-color: " + theme.colors.borderColor + ";\n";
};
var darkInput = function darkInput(_ref2) {
  var theme = _ref2.theme;
  return "\n\tbackground-color: " + theme.colors.backgroundColor + ";\n\tcolor: " + theme.colors.textColor + ";\n\t" + dark(theme) + ";\n\n\t&:focus {\n\t\tbackground-color: " + theme.colors.backgroundColor + ";\n\t}\n";
};
var Input = styled('input')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", ";\n\n\t", ";\n\n\t&[type='search']::-webkit-search-decoration,\n\t&[type='search']::-webkit-search-cancel-button,\n\t&[type='search']::-webkit-search-results-button,\n\t&[type='search']::-webkit-search-results-decoration {\n\t\tdisplay: none;\n\t}\n"])), function (props) {
  return input(props.searchBox);
}, function (_ref3) {
  var themePreset = _ref3.themePreset;
  return themePreset === 'dark' && darkInput;
}, function (props) {
  return props.showIcon && props.iconPosition === 'left' && "\n\t\t\tpadding-left: 36px;\n\t\t";
}, function (props) {
  return props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 36px;\n\t\t";
}, function (props) {
  return (
    // for clear icon
    props.showClear && "\n\t\t\tpadding-right: 36px;\n\t\t"
  );
}, function (props) {
  return (
    // for voice search icon
    props.showVoiceSearch && "\n\t\t\tpadding-right: 36px;\n\t\t"
  );
}, function (props) {
  return (
    // for clear icon with search icon
    props.showClear && props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 66px;\n\t\t"
  );
}, function (props) {
  return (
    // for voice search icon with clear icon
    props.showVoiceSearch && props.showIcon && "\n\t\t\tpadding-right: 66px;\n\t\t"
  );
}, function (props) {
  return (
    // for voice search icon with search icon
    props.showVoiceSearch && props.showIcon && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 66px;\n\t\t"
  );
}, function (props) {
  return (
    // for clear icon with search icon and voice search
    props.showClear && props.showIcon && props.showVoiceSearch && props.iconPosition === 'right' && "\n\t\t\tpadding-right: 90px;\n\t\t"
  );
}, function (props) {
  return props.alert && alertBorder;
}, function (props) {
  return props.isOpen && "\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t";
});
var suggestions = function suggestions(themePreset, theme) {
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder: 1px solid #ccc;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: min(100vh, 402px);\n\toverflow-y: auto;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tcursor: pointer;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: #eee;\n\t\t}\n\t}\n\n\t", ";\n"])), themePreset === 'dark' && theme && dark(theme));
};
var searchboxSuggestions = function searchboxSuggestions(themePreset, theme) {
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n\t", ";\n\n\tmax-height: min(100vh, 401px);\n\tborder: none;\n\tborder-radius: 6px;\n\tborder-top-left-radius: 0;\n\tborder-top-right-radius: 0;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 10px 15px;\n\tborder-top: 1px solid #f2f0f0;\n\tli {\n\t\ttransition: all 0.3s ease-in;\n\t\tposition: relative;\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: unset;\n\t\t}\n\t\t.trim {\n\t\t\tline-height: 20px;\n\t\t}\n\t\t&.li-item {\n\t\t\tbackground-color: ", ";\n\n\t\t\t", "\n\t\t}\n\t\t&.active-li-item {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: #fff;\n\t\t\tsvg {\n\t\t\t\ttransition: fill 0.3s ease-in;\n\t\t\t\tfill: #fff !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.section-container {\n\t\tpadding-bottom: 5px;\n\t\tborder-bottom: 1px solid #f2f0f0;\n\t\t", ";\n\t\t.section-header {\n\t\t\tpadding: 10px;\n\t\t\tfont-size: 12px;\n\t\t\tcolor: #7f7c7c;\n\t\t\tbackground: #f9f9f9;\n\t\t\t", ";\n\t\t}\n\n\t\t.section-list {\n\t\t\tpadding-left: 0;\n\t\t}\n\t\t.section-list-item {\n\t\t\t&__label,\n\t\t\t&__description {\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twhite-space: nowrap;\n\n\t\t\t\t* {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&__label {\n\t\t\t}\n\t\t\t&__description {\n\t\t\t\tmargin-top: 5px;\n\t\t\t\topacity: 0.7;\n\t\t\t\tfont-size: 12px;\n\t\t\t}\n\t\t}\n\t}\n"])), suggestions(themePreset, theme), themePreset === 'dark' ? '#424242' : '#fff', themePreset && theme && "svg {\n\t\t\t\tfill: " + (theme.colors ? theme.colors.primaryColor : '#707070') + ";\n\t\t\t}", themePreset === 'dark' ? '#555' : '#2d84f6', themePreset === 'dark' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n\t\t\tbackground: #161616;\n\t\t"]))), themePreset === 'dark' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n\t\t\t\tcolor: #218fe7;\n\t\t\t\tbackground: #161616;\n\t\t\t"]))));
};
var suggestionsContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n\t.cancel-icon {\n\t\tcursor: pointer;\n\t}\n"])));
var noSuggestions = function noSuggestions(themePreset, theme) {
  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\twidth: 100%;\n\tborder-top: none;\n\tbackground-color: #fff;\n\tfont-size: 0.9rem;\n\tz-index: 3;\n\tposition: absolute;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\tborder-radius: 6px;\n\tborder-top-left-radius: 0;\n\tborder-top-right-radius: 0;\n\tbox-shadow: rgb(0 0 0 / 20%) 0px 10px 15px;\n\tborder-top: 1px solid #f2f0f0;\n\n\t&.small {\n\t\ttop: 30px;\n\t}\n\n\tli {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding: 10px;\n\t\tuser-select: none;\n\n\t\t& > .trim {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tmax-height: 2.3rem;\n\t\t\tline-height: 1.2rem;\n\t\t\t-webkit-line-clamp: 2;\n\t\t\t-webkit-box-orient: vertical;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n\n\t", "\n"])), themePreset === 'dark' && theme && dark(theme));
};
var TextArea = styled('textarea')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n\t", ";\n\t", ";\n\n\t", ";\n\t", ";\n\t&::-webkit-search-decoration,\n\t&::-webkit-search-cancel-button,\n\t&::-webkit-search-results-button,\n\t&::-webkit-search-results-decoration {\n\t\tdisplay: none;\n\t}\n\tresize: none;\n\toverflow: hidden;\n\theight: 42px;\n\tpadding-left: 0;\n\tpadding-right: 0;\n\tborder-color: transparent;\n\n"])), function (props) {
  return input(props.searchBox);
}, function (_ref4) {
  var themePreset = _ref4.themePreset,
    theme = _ref4.theme;
  return themePreset === 'dark' && darkInput({
    theme: theme
  });
}, function (props) {
  return props.alert && alertBorder;
}, function (props) {
  return props.isOpen && "\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t";
});
var Actions = styled('div')(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n"])));

export { Actions as A, Input as I, TextArea as T, suggestions as a, searchboxSuggestions as b, noSuggestions as n, suggestionsContainer as s };