@xenknight/framework7 0.0.6 → 0.0.7

package/components/searchbar-new/searchbar-new-class.js

@@ -0,0 +1,592 @@
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, nextTick, deleteProps } from '../../shared/utils.js';
+import FrameworkClass from '../../shared/class.js';
+import { getDevice } from '../../shared/get-device.js';
+import removeDiacritics from './remove-diacritics.js';
+class SearchbarNew extends FrameworkClass {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const sb = this;
+    const defaults = {
+      el: undefined,
+      inputEl: undefined,
+      inputEvents: 'change input compositionend',
+      disableButton: true,
+      disableButtonEl: undefined,
+      backdropEl: undefined,
+      searchContainer: undefined,
+      // container to search, HTMLElement or CSS selector
+      searchItem: 'li',
+      // single item selector, CSS selector
+      searchIn: undefined,
+      // where to search in item, CSS selector
+      searchGroup: '.list-group',
+      searchGroupTitle: '.list-group-title',
+      ignore: '.searchbar-new-ignore',
+      foundEl: '.searchbar-new-found',
+      notFoundEl: '.searchbar-new-not-found',
+      hideOnEnableEl: '.searchbar-new-hide-on-enable',
+      hideOnSearchEl: '.searchbar-new-hide-on-search',
+      backdrop: true,
+      removeDiacritics: true,
+      customSearch: false,
+      hideGroupTitles: true,
+      hideGroups: true,
+      disableOnBackdropClick: true,
+      expandable: false,
+      inline: false
+    };
+
+    // Extend defaults with modules params
+    sb.useModulesParams(defaults);
+    sb.params = extend(defaults, params);
+    const $el = $(sb.params.el);
+    if ($el.length === 0) return sb;
+    if ($el[0].f7SearchbarNew) return $el[0].f7SearchbarNew;
+    $el[0].f7SearchbarNew = sb;
+    let $pageEl;
+    const $navbarEl = $el.parents('.navbar-new');
+    if ($el.parents('.page').length > 0) {
+      $pageEl = $el.parents('.page');
+    } else if ($navbarEl.length > 0) {
+      $pageEl = $(app.navbarNew.getPageByEl($navbarEl[0]));
+      if (!$pageEl.length) {
+        const $currentPageEl = $el.parents('.view').find('.page-current');
+        if ($currentPageEl[0] && $currentPageEl[0].f7Page && $currentPageEl[0].f7Page.navbarNewEl === $navbarEl[0]) {
+          $pageEl = $currentPageEl;
+        }
+      }
+    }
+    let $foundEl;
+    if (params.foundEl) {
+      $foundEl = $(params.foundEl);
+    } else if (typeof sb.params.foundEl === 'string' && $pageEl) {
+      $foundEl = $pageEl.find(sb.params.foundEl);
+    }
+    let $notFoundEl;
+    if (params.notFoundEl) {
+      $notFoundEl = $(params.notFoundEl);
+    } else if (typeof sb.params.notFoundEl === 'string' && $pageEl) {
+      $notFoundEl = $pageEl.find(sb.params.notFoundEl);
+    }
+    let $hideOnEnableEl;
+    if (params.hideOnEnableEl) {
+      $hideOnEnableEl = $(params.hideOnEnableEl);
+    } else if (typeof sb.params.hideOnEnableEl === 'string' && $pageEl) {
+      $hideOnEnableEl = $pageEl.find(sb.params.hideOnEnableEl);
+    }
+    let $hideOnSearchEl;
+    if (params.hideOnSearchEl) {
+      $hideOnSearchEl = $(params.hideOnSearchEl);
+    } else if (typeof sb.params.hideOnSearchEl === 'string' && $pageEl) {
+      $hideOnSearchEl = $pageEl.find(sb.params.hideOnSearchEl);
+    }
+    const expandable = sb.params.expandable || $el.hasClass('searchbar-new-expandable');
+    const inline = sb.params.inline || $el.hasClass('searchbar-new-inline');
+    if (typeof sb.params.backdrop === 'undefined') {
+      sb.params.backdrop = !inline;
+    }
+    let $backdropEl;
+    if (sb.params.backdrop) {
+      if (sb.params.backdropEl) {
+        $backdropEl = $(sb.params.backdropEl);
+      } else if ($pageEl && $pageEl.length > 0) {
+        $backdropEl = $pageEl.find('.searchbar-new-backdrop');
+      } else {
+        $backdropEl = $el.siblings('.searchbar-new-backdrop');
+      }
+      if ($backdropEl.length === 0) {
+        $backdropEl = $('<div class="searchbar-new-backdrop"></div>');
+        if ($pageEl && $pageEl.length) {
+          if ($el.parents($pageEl).length > 0 && $navbarEl && $el.parents($navbarEl).length === 0) {
+            $backdropEl.insertBefore($el);
+          } else {
+            $backdropEl.insertBefore($pageEl.find('.page-content').eq(0));
+          }
+        } else {
+          $backdropEl.insertBefore($el);
+        }
+      }
+    }
+    let $searchContainer;
+    if (sb.params.searchContainer) {
+      $searchContainer = $(sb.params.searchContainer);
+    }
+    let $inputEl;
+    if (sb.params.inputEl) {
+      $inputEl = $(sb.params.inputEl);
+    } else {
+      $inputEl = $el.find('input[type="search"]').eq(0);
+    }
+    let $disableButtonEl;
+    if (sb.params.disableButton) {
+      if (sb.params.disableButtonEl) {
+        $disableButtonEl = $(sb.params.disableButtonEl);
+      } else {
+        $disableButtonEl = $el.find('.searchbar-new-disable-button');
+      }
+    }
+    extend(sb, {
+      app,
+      view: app.views.get($el.parents('.view')),
+      $el,
+      el: $el[0],
+      $backdropEl,
+      backdropEl: $backdropEl && $backdropEl[0],
+      $searchContainer,
+      searchContainer: $searchContainer && $searchContainer[0],
+      $inputEl,
+      inputEl: $inputEl[0],
+      $disableButtonEl,
+      disableButtonEl: $disableButtonEl && $disableButtonEl[0],
+      disableButtonHasMargin: false,
+      $pageEl,
+      pageEl: $pageEl && $pageEl[0],
+      $navbarEl,
+      navbarEl: $navbarEl && $navbarEl[0],
+      $foundEl,
+      foundEl: $foundEl && $foundEl[0],
+      $notFoundEl,
+      notFoundEl: $notFoundEl && $notFoundEl[0],
+      $hideOnEnableEl,
+      hideOnEnableEl: $hideOnEnableEl && $hideOnEnableEl[0],
+      $hideOnSearchEl,
+      hideOnSearchEl: $hideOnSearchEl && $hideOnSearchEl[0],
+      previousQuery: '',
+      query: '',
+      isVirtualList: $searchContainer && $searchContainer.hasClass('virtual-list'),
+      virtualList: undefined,
+      enabled: false,
+      expandable,
+      inline
+    });
+
+    // Events
+    function preventSubmit(e) {
+      e.preventDefault();
+    }
+    function onInputFocus(e) {
+      sb.enable(e);
+      sb.$el.addClass('searchbar-new-focused');
+    }
+    function onInputBlur() {
+      sb.$el.removeClass('searchbar-new-focused');
+    }
+    function onInputChange() {
+      const value = sb.$inputEl.val().trim();
+      if (sb.$searchContainer && sb.$searchContainer.length > 0 && (sb.params.searchIn || sb.isVirtualList || sb.params.searchIn === sb.params.searchItem) || sb.params.customSearch) {
+        sb.search(value, true);
+      }
+    }
+    function onInputClear(e, previousValue) {
+      sb.$el.trigger('searchbar-new:clear', previousValue);
+      sb.emit('local::clear searchbarNewClear', sb, previousValue);
+    }
+    function disableOnClick(e) {
+      sb.disable(e);
+    }
+    function onPageBeforeOut() {
+      if (!sb || sb && !sb.$el) return;
+      if (sb.enabled) {
+        sb.$el.removeClass('searchbar-new-enabled');
+        if (sb.expandable) {
+          sb.$el.parents('.navbar-new').removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition');
+        }
+      }
+    }
+    function onPageBeforeIn() {
+      if (!sb || sb && !sb.$el) return;
+      if (sb.enabled) {
+        sb.$el.addClass('searchbar-new-enabled');
+        if (sb.expandable) {
+          sb.$el.parents('.navbar-new').addClass('with-searchbar-new-expandable-enabled-no-transition');
+        }
+      }
+    }
+    sb.attachEvents = function attachEvents() {
+      $el.on('submit', preventSubmit);
+      if (sb.params.disableButton) {
+        sb.$disableButtonEl.on('click', disableOnClick);
+      }
+      if (sb.params.disableOnBackdropClick && sb.$backdropEl) {
+        sb.$backdropEl.on('click', disableOnClick);
+      }
+      if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) {
+        sb.$pageEl.on('page:beforeout', onPageBeforeOut);
+        sb.$pageEl.on('page:beforein', onPageBeforeIn);
+      }
+      sb.$inputEl.on('focus', onInputFocus);
+      sb.$inputEl.on('blur', onInputBlur);
+      sb.$inputEl.on(sb.params.inputEvents, onInputChange);
+      sb.$inputEl.on('input:clear', onInputClear);
+    };
+    sb.detachEvents = function detachEvents() {
+      $el.off('submit', preventSubmit);
+      if (sb.params.disableButton) {
+        sb.$disableButtonEl.off('click', disableOnClick);
+      }
+      if (sb.params.disableOnBackdropClick && sb.$backdropEl) {
+        sb.$backdropEl.off('click', disableOnClick);
+      }
+      if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) {
+        sb.$pageEl.off('page:beforeout', onPageBeforeOut);
+        sb.$pageEl.off('page:beforein', onPageBeforeIn);
+      }
+      sb.$inputEl.off('focus', onInputFocus);
+      sb.$inputEl.off('blur', onInputBlur);
+      sb.$inputEl.off(sb.params.inputEvents, onInputChange);
+      sb.$inputEl.off('input:clear', onInputClear);
+    };
+
+    // Install Modules
+    sb.useModules();
+
+    // Init
+    sb.init();
+    return sb;
+  }
+  clear(e) {
+    const sb = this;
+    if (!sb.query && e && $(e.target).hasClass('searchbar-new-clear')) {
+      sb.disable();
+      return sb;
+    }
+    const previousQuery = sb.value;
+    sb.$inputEl.val('').trigger('change').focus();
+    sb.$el.trigger('searchbar-new:clear', previousQuery);
+    sb.emit('local::clear searchbarNewClear', sb, previousQuery);
+    return sb;
+  }
+  setDisableButtonMargin() {
+    const sb = this;
+    if (sb.expandable) return;
+    const app = sb.app;
+    sb.$disableButtonEl.transition(0).show();
+    sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
+    /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
+    sb._clientLeft = sb.$disableButtonEl[0].clientLeft;
+    sb.$disableButtonEl.transition('');
+    sb.disableButtonHasMargin = true;
+  }
+  enable(setFocus) {
+    const sb = this;
+    if (sb.enabled) return sb;
+    const app = sb.app;
+    const document = getDocument();
+    const device = getDevice();
+    sb.enabled = true;
+    function enable() {
+      if (sb.$backdropEl && (sb.$searchContainer && sb.$searchContainer.length || sb.params.customSearch) && !sb.$el.hasClass('searchbar-new-enabled') && !sb.query) {
+        sb.backdropShow();
+      }
+      sb.$el.addClass('searchbar-new-enabled');
+      if (!sb.$disableButtonEl || sb.$disableButtonEl && sb.$disableButtonEl.length === 0) {
+        sb.$el.addClass('searchbar-new-enabled-no-disable-button');
+      }
+      if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') {
+        if (!sb.disableButtonHasMargin) {
+          sb.setDisableButtonMargin();
+        }
+        sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, '0px');
+      }
+      if (sb.expandable) {
+        const $navbarEl = sb.$el.parents('.navbar-new');
+        if ($navbarEl.hasClass('navbar-new-large') && sb.$pageEl) {
+          const $pageContentEl = sb.$pageEl.find('.page-content');
+          const $titleLargeEl = $navbarEl.find('.title-large');
+          $pageContentEl.addClass('with-searchbar-new-expandable-enabled');
+          if ($navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-large-collapsed') && $titleLargeEl.length && $pageContentEl.length) {
+            $pageContentEl.transition(0);
+            $pageContentEl[0].scrollTop -= $titleLargeEl[0].offsetHeight;
+            setTimeout(() => {
+              $pageContentEl.transition('');
+            }, 200);
+          }
+        }
+        if (app.theme === 'md' && $navbarEl.length) {
+          $navbarEl.addClass('with-searchbar-new-expandable-enabled');
+        } else {
+          $navbarEl.addClass('with-searchbar-new-expandable-enabled');
+          if ($navbarEl.hasClass('navbar-new-large')) {
+            $navbarEl.addClass('navbar-new-large-collapsed');
+          }
+        }
+      }
+      if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.addClass('hidden-by-searchbar-new');
+      sb.$el.trigger('searchbar-new:enable');
+      sb.emit('local::enable searchbarNewEnable', sb);
+    }
+    let needsFocus = false;
+    if (setFocus === true) {
+      if (document.activeElement !== sb.inputEl) {
+        needsFocus = true;
+      }
+    }
+    const isIos = device.ios && app.theme === 'ios';
+    if (isIos) {
+      if (sb.expandable) {
+        if (needsFocus) sb.$inputEl.focus();
+        enable();
+      } else {
+        if (needsFocus) sb.$inputEl.focus();
+        if (setFocus && (setFocus.type === 'focus' || setFocus === true)) {
+          nextTick(() => {
+            enable();
+          }, 400);
+        } else {
+          enable();
+        }
+      }
+    } else {
+      if (needsFocus) sb.$inputEl.focus();
+      if (app.theme === 'md' && sb.expandable) {
+        sb.$el.parents('.page, .view, .navbar-new-inner, .navbar-new').scrollLeft(app.rtl ? 100 : 0);
+      }
+      enable();
+    }
+    return sb;
+  }
+  disable() {
+    const sb = this;
+    if (!sb.enabled) return sb;
+    const app = sb.app;
+    sb.$inputEl.val('').trigger('change');
+    sb.$el.removeClass('searchbar-new-enabled searchbar-new-focused searchbar-new-enabled-no-disable-button');
+    if (sb.expandable) {
+      const $navbarEl = sb.$el.parents('.navbar-new');
+      const $pageContentEl = sb.$pageEl && sb.$pageEl.find('.page-content');
+      if ($navbarEl.hasClass('navbar-new-large') && $pageContentEl.length) {
+        const $titleLargeEl = $navbarEl.find('.title-large');
+        sb.$el.transitionEnd(() => {
+          $pageContentEl.removeClass('with-searchbar-new-expandable-closing');
+        });
+        if ($navbarEl.hasClass('navbar-new-large') && $navbarEl.hasClass('navbar-new-large-collapsed') && $titleLargeEl.length) {
+          const scrollTop = $pageContentEl[0].scrollTop;
+          const titleLargeHeight = $titleLargeEl[0].offsetHeight;
+          if (scrollTop > titleLargeHeight) {
+            $pageContentEl.transition(0);
+            $pageContentEl[0].scrollTop = scrollTop + titleLargeHeight;
+            setTimeout(() => {
+              $pageContentEl.transition('');
+            }, 200);
+          }
+        }
+        $pageContentEl.removeClass('with-searchbar-new-expandable-enabled').addClass('with-searchbar-new-expandable-closing');
+      }
+      if (app.theme === 'md' && $navbarEl.length) {
+        $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
+        sb.$el.transitionEnd(() => {
+          $navbarEl.removeClass('with-searchbar-new-expandable-closing');
+        });
+      } else {
+        $navbarEl.removeClass('with-searchbar-new-expandable-enabled with-searchbar-new-expandable-enabled-no-transition').addClass('with-searchbar-new-expandable-closing');
+        sb.$el.transitionEnd(() => {
+          $navbarEl.removeClass('with-searchbar-new-expandable-closing');
+        });
+        if (sb.$pageEl) {
+          sb.$pageEl.find('.page-content').trigger('scroll');
+        }
+      }
+    }
+    if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') {
+      sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
+    }
+    if (sb.$backdropEl && (sb.$searchContainer && sb.$searchContainer.length || sb.params.customSearch)) {
+      sb.backdropHide();
+    }
+    sb.enabled = false;
+    sb.$inputEl.blur();
+    if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.removeClass('hidden-by-searchbar-new');
+    sb.$el.trigger('searchbar-new:disable');
+    sb.emit('local::disable searchbarNewDisable', sb);
+    return sb;
+  }
+  toggle() {
+    const sb = this;
+    if (sb.enabled) sb.disable();else sb.enable(true);
+    return sb;
+  }
+  backdropShow() {
+    const sb = this;
+    if (sb.$backdropEl) {
+      sb.$backdropEl.addClass('searchbar-new-backdrop-in');
+    }
+    return sb;
+  }
+  backdropHide() {
+    const sb = this;
+    if (sb.$backdropEl) {
+      sb.$backdropEl.removeClass('searchbar-new-backdrop-in');
+    }
+    return sb;
+  }
+  search(query, internal) {
+    const sb = this;
+    sb.previousQuery = sb.query || '';
+    if (query === sb.previousQuery) return sb;
+    if (!internal) {
+      if (!sb.enabled) {
+        sb.enable();
+      }
+      sb.$inputEl.val(query);
+      sb.$inputEl.trigger('input');
+    }
+    sb.query = query;
+    sb.value = query;
+    const {
+      $searchContainer,
+      $el,
+      $foundEl,
+      $notFoundEl,
+      $hideOnSearchEl,
+      isVirtualList
+    } = sb;
+
+    // Hide on search element
+    if (query.length > 0 && $hideOnSearchEl) {
+      $hideOnSearchEl.addClass('hidden-by-searchbar-new');
+    } else if ($hideOnSearchEl) {
+      $hideOnSearchEl.removeClass('hidden-by-searchbar-new');
+    }
+    // Add active/inactive classes on overlay
+    if ($searchContainer && $searchContainer.length && $el.hasClass('searchbar-new-enabled') || sb.params.customSearch && $el.hasClass('searchbar-new-enabled')) {
+      if (query.length === 0) {
+        sb.backdropShow();
+      } else {
+        sb.backdropHide();
+      }
+    }
+    if (sb.params.customSearch) {
+      $el.trigger('searchbar-new:search', {
+        query,
+        previousQuery: sb.previousQuery
+      });
+      sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+      return sb;
+    }
+    let foundItems = [];
+    let vlQuery;
+    if (isVirtualList) {
+      sb.virtualList = $searchContainer[0].f7VirtualList;
+      if (query.trim() === '') {
+        sb.virtualList.resetFilter();
+        if ($notFoundEl) $notFoundEl.hide();
+        if ($foundEl) $foundEl.show();
+        $el.trigger('searchbar-new:search', {
+          query,
+          previousQuery: sb.previousQuery
+        });
+        sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery);
+        return sb;
+      }
+      vlQuery = sb.params.removeDiacritics ? removeDiacritics(query) : query;
+      if (sb.virtualList.params.searchAll) {
+        foundItems = sb.virtualList.params.searchAll(vlQuery, sb.virtualList.items) || [];
+      } else if (sb.virtualList.params.searchByItem) {
+        for (let i = 0; i < sb.virtualList.items.length; i += 1) {
+          if (sb.virtualList.params.searchByItem(vlQuery, sb.virtualList.items[i], i)) {
+            foundItems.push(i);
+          }
+        }
+      }
+    } else {
+      let values;
+      if (sb.params.removeDiacritics) values = removeDiacritics(query.trim().toLowerCase()).split(' ');else {
+        values = query.trim().toLowerCase().split(' ');
+      }
+      $searchContainer.find(sb.params.searchItem).removeClass('hidden-by-searchbar-new').each(itemEl => {
+        const $itemEl = $(itemEl);
+        let compareWithText = [];
+        let $searchIn = sb.params.searchIn ? $itemEl.find(sb.params.searchIn) : $itemEl;
+        if (sb.params.searchIn === sb.params.searchItem) {
+          $searchIn = $itemEl;
+        }
+        $searchIn.each(searchInEl => {
+          let itemText = $(searchInEl).text().trim().toLowerCase();
+          if (sb.params.removeDiacritics) itemText = removeDiacritics(itemText);
+          compareWithText.push(itemText);
+        });
+        compareWithText = compareWithText.join(' ');
+        let wordsMatch = 0;
+        for (let i = 0; i < values.length; i += 1) {
+          if (compareWithText.indexOf(values[i]) >= 0) wordsMatch += 1;
+        }
+        if (wordsMatch !== values.length && !(sb.params.ignore && $itemEl.is(sb.params.ignore))) {
+          $itemEl.addClass('hidden-by-searchbar-new');
+        } else {
+          foundItems.push($itemEl[0]);
+        }
+      });
+      if (sb.params.hideGroupTitles) {
+        $searchContainer.find(sb.params.searchGroupTitle).each(titleEl => {
+          const $titleEl = $(titleEl);
+          const $nextElements = $titleEl.nextAll(sb.params.searchItem);
+          let hide = true;
+          for (let i = 0; i < $nextElements.length; i += 1) {
+            const $nextEl = $nextElements.eq(i);
+            if ($nextEl.is(sb.params.searchGroupTitle)) break;
+            if (!$nextEl.hasClass('hidden-by-searchbar-new')) {
+              hide = false;
+            }
+          }
+          const ignore = sb.params.ignore && $titleEl.is(sb.params.ignore);
+          if (hide && !ignore) $titleEl.addClass('hidden-by-searchbar-new');else $titleEl.removeClass('hidden-by-searchbar-new');
+        });
+      }
+      if (sb.params.hideGroups) {
+        $searchContainer.find(sb.params.searchGroup).each(groupEl => {
+          const $groupEl = $(groupEl);
+          const ignore = sb.params.ignore && $groupEl.is(sb.params.ignore);
+          // eslint-disable-next-line
+          const notHidden = $groupEl.find(sb.params.searchItem).filter(el => {
+            return !$(el).hasClass('hidden-by-searchbar-new');
+          });
+          if (notHidden.length === 0 && !ignore) {
+            $groupEl.addClass('hidden-by-searchbar-new');
+          } else {
+            $groupEl.removeClass('hidden-by-searchbar-new');
+          }
+        });
+      }
+    }
+    if (foundItems.length === 0) {
+      if ($notFoundEl) $notFoundEl.show();
+      if ($foundEl) $foundEl.hide();
+    } else {
+      if ($notFoundEl) $notFoundEl.hide();
+      if ($foundEl) $foundEl.show();
+    }
+    if (isVirtualList && sb.virtualList) {
+      sb.virtualList.filterItems(foundItems);
+    }
+    $el.trigger('searchbar-new:search', {
+      query,
+      previousQuery: sb.previousQuery,
+      foundItems
+    });
+    sb.emit('local::search searchbarNewSearch', sb, query, sb.previousQuery, foundItems);
+    return sb;
+  }
+  init() {
+    const sb = this;
+    if (sb.expandable && sb.$el) sb.$el.addClass('searchbar-new-expandable');
+    if (sb.inline && sb.$el) sb.$el.addClass('searchbar-new-inline');
+    sb.attachEvents();
+  }
+  destroy() {
+    const sb = this;
+    sb.emit('local::beforeDestroy searchbarNewBeforeDestroy', sb);
+    sb.$el.trigger('searchbar-new:beforedestroy');
+    sb.detachEvents();
+    if (sb.$el[0]) {
+      sb.$el[0].f7SearchbarNew = null;
+      delete sb.$el[0].f7SearchbarNew;
+    }
+    deleteProps(sb);
+  }
+}
+export default SearchbarNew;

package/components/searchbar-new/searchbar-vars.less

@@ -0,0 +1,75 @@
+:root {
+  /*
+  --f7-searchbar-new-link-color: var(--f7-bars-link-color);
+  --f7-searchbar-new-inline-input-font-size: var(--f7-searchbar-new-input-font-size);
+  */
+  --f7-searchbar-new-input-border-width: 0px;
+  --f7-searchbar-new-input-border-color: transparent;
+}
+.ios-vars({
+  /*
+  --f7-searchbar-new-border-color: var(--f7-bars-border-color);
+  */
+  --f7-searchbar-new-bg-color: transparent;
+  --f7-searchbar-new-height: 44px;
+  --f7-searchbar-new-inner-padding-left: 0px;
+  --f7-searchbar-new-inner-padding-right: 0px;
+  --f7-searchbar-new-link-color: var(--f7-bars-text-color);
+  --f7-searchbar-new-input-font-size: 17px;
+  --f7-searchbar-new-input-border-radius: 44px;
+  --f7-searchbar-new-input-height: 44px;
+  --f7-searchbar-new-inline-input-height: 44px;
+  /*
+  --f7-searchbar-new-inline-input-border-radius: var(--f7-searchbar-new-input-border-radius);
+  */
+  --f7-searchbar-new-input-padding-horizontal: 44px;
+  /*
+  --f7-searchbar-new-inline-input-padding-horizontal: var(--f7-searchbar-new-input-padding-horizontal);
+  --f7-searchbar-new-input-clear-button-color: var(--f7-input-clear-button-color);
+  */
+  --f7-searchbar-new-backdrop-bg-color: rgba(0,0,0,0.4);
+  --f7-searchbar-new-in-page-content-margin: 16px;
+  --f7-searchbar-new-in-page-content-box-shadow: none;
+  --f7-searchbar-new-in-page-content-border-radius: 44px;
+  --f7-searchbar-new-in-page-content-input-border-radius: 44px;
+  --f7-searchbar-new-input-bg-color: var(--f7-glass-bg-color);
+  .light-vars({
+    --f7-searchbar-new-placeholder-color: rgba(0, 0, 0, 0.4);
+    --f7-searchbar-new-input-text-color: #000;
+    --f7-searchbar-new-search-icon-color: rgba(0, 0, 0, 0.4);
+    --f7-searchbar-new-bars-bg-color: #efeff4;
+  });
+  .dark-vars({
+    --f7-searchbar-new-placeholder-color: rgba(255, 255, 255, 0.4);
+    --f7-searchbar-new-input-text-color: #fff;
+    --f7-searchbar-new-search-icon-color: rgba(255, 255, 255, 0.4);
+    --f7-searchbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
+  });
+});
+.md-vars({
+  --f7-searchbar-new-border-color: transparent;
+  --f7-searchbar-new-height: 48px;
+  --f7-searchbar-new-inner-padding-left: 8px;
+  --f7-searchbar-new-inner-padding-right: 8px;
+  --f7-searchbar-new-input-font-size: 16px;
+  --f7-searchbar-new-input-border-radius: 24px;
+  --f7-searchbar-new-input-height: 48px;
+  --f7-searchbar-new-inline-input-height: 48px;
+  --f7-searchbar-new-inline-input-border-radius: 24px;
+  --f7-searchbar-new-input-padding-horizontal: 16px;
+  --f7-searchbar-new-inline-input-padding-horizontal: 16px;
+  --f7-searchbar-new-backdrop-bg-color: rgba(0,0,0,0.25);
+  --f7-searchbar-new-in-page-content-margin: 16px 0;
+  --f7-searchbar-new-in-page-content-box-shadow: none;
+  --f7-searchbar-new-in-page-content-border-radius: 24px;
+  --f7-searchbar-new-in-page-content-input-border-radius: 24px;
+  --f7-searchbar-new-bg-color: transparent;
+});
+.md-color-vars({
+  --f7-searchbar-new-link-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-search-icon-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-input-clear-button-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-placeholder-color: var(--f7-md-on-surface-variant);
+  --f7-searchbar-new-input-bg-color: var(--f7-md-secondary-container);
+  --f7-searchbar-new-input-text-color: var(--f7-md-on-surface);
+});