import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock } from "vue";
const _hoisted_1 = {
  class: "searchbar-inner"
};
const _hoisted_2 = {
  class: "searchbar-input-wrap"
};
const _hoisted_3 = ["value", "placeholder", "spellcheck"];
const _hoisted_4 = /*#__PURE__*/_createElementVNode("i", {
  class: "searchbar-icon"
}, null, -1);
function render(_ctx, _cache) {
  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes),
    onSubmit: _ctx.onSubmit
  }, {
    default: _withCtx(() => [_renderSlot(_ctx.$slots, "before-inner"), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "inner-start"), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "input-wrap-start"), _createElementVNode("input", {
      value: _ctx.value,
      placeholder: _ctx.placeholder,
      spellcheck: _ctx.spellcheck,
      type: "search",
      onInput: _cache[0] || (_cache[0] = function () {
        return _ctx.onInput && _ctx.onInput(...arguments);
      }),
      onChange: _cache[1] || (_cache[1] = function () {
        return _ctx.onChange && _ctx.onChange(...arguments);
      }),
      onFocus: _cache[2] || (_cache[2] = function () {
        return _ctx.onFocus && _ctx.onFocus(...arguments);
      }),
      onBlur: _cache[3] || (_cache[3] = function () {
        return _ctx.onBlur && _ctx.onBlur(...arguments);
      })
    }, null, 40, _hoisted_3), _hoisted_4, _ctx.clearButton ? (_openBlock(), _createElementBlock("span", {
      key: 0,
      class: "input-clear-button",
      onClick: _cache[4] || (_cache[4] = function () {
        return _ctx.onClearButtonClick && _ctx.onClearButtonClick(...arguments);
      })
    })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "input-wrap-end")]), _ctx.disableButton ? (_openBlock(), _createElementBlock("span", {
      key: 0,
      class: "searchbar-disable-button",
      onClick: _cache[5] || (_cache[5] = function () {
        return _ctx.onDisableButtonClick && _ctx.onDisableButtonClick(...arguments);
      })
    }, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "inner-end"), _renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "after-inner")]),
    _: 3
  }, 40, ["class", "onSubmit"]);
}
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import { classNames, noUndefinedProps } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import { f7ready, f7 } from '../shared/f7.js';
export default {
  name: 'f7-searchbar',
  render,
  props: {
    outline: {
      type: Boolean,
      default: true
    },
    form: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: 'Search'
    },
    spellcheck: {
      type: Boolean,
      default: undefined
    },
    disableButton: {
      type: Boolean,
      default: true
    },
    disableButtonText: {
      type: String,
      default: 'Cancel'
    },
    clearButton: {
      type: Boolean,
      default: true
    },
    // Input Value
    value: [String, Number, Array],
    // SB Params
    inputEvents: {
      type: String,
      default: 'change input compositionend'
    },
    expandable: Boolean,
    inline: Boolean,
    searchContainer: [String, Object],
    searchIn: {
      type: String,
      default: '.item-title'
    },
    searchItem: {
      type: String,
      default: 'li'
    },
    searchGroup: {
      type: String,
      default: '.list-group'
    },
    searchGroupTitle: {
      type: String,
      default: '.list-group-title'
    },
    foundEl: {
      type: [String, Object],
      default: '.searchbar-found'
    },
    notFoundEl: {
      type: [String, Object],
      default: '.searchbar-not-found'
    },
    backdrop: {
      type: Boolean,
      default: undefined
    },
    backdropEl: [String, Object],
    hideOnEnableEl: {
      type: [String, Object],
      default: '.searchbar-hide-on-enable'
    },
    hideOnSearchEl: {
      type: [String, Object],
      default: '.searchbar-hide-on-search'
    },
    ignore: {
      type: String,
      default: '.searchbar-ignore'
    },
    customSearch: {
      type: Boolean,
      default: false
    },
    removeDiacritics: {
      type: Boolean,
      default: false
    },
    hideGroupTitles: {
      type: Boolean,
      default: true
    },
    hideGroups: {
      type: Boolean,
      default: true
    },
    init: {
      type: Boolean,
      default: true
    },
    ...colorProps
  },
  emits: ['change', 'input', 'focus', 'blur', 'submit', 'click:clear', 'click:disable', 'searchbar:search', 'searchbar:clear', 'searchbar:enable', 'searchbar:disable', 'update:value'],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    let f7Searchbar = null;
    const elRef = ref(null);
    const search = query => {
      if (!f7Searchbar) return undefined;
      return f7Searchbar.search(query);
    };
    const enable = () => {
      if (!f7Searchbar) return undefined;
      return f7Searchbar.enable();
    };
    const disable = () => {
      if (!f7Searchbar) return undefined;
      return f7Searchbar.disable();
    };
    const toggle = () => {
      if (!f7Searchbar) return undefined;
      return f7Searchbar.toggle();
    };
    const clear = () => {
      if (!f7Searchbar) return undefined;
      return f7Searchbar.clear();
    };
    const onChange = event => {
      emit('change', event);
    };
    const onInput = event => {
      emit('input', event);
      emit('update:value', event.target.value);
    };
    const onFocus = event => {
      emit('focus', event);
    };
    const onBlur = event => {
      emit('blur', event);
    };
    const onSubmit = event => {
      emit('submit', event);
    };
    const onClearButtonClick = event => {
      emit('click:clear', event);
    };
    const onDisableButtonClick = event => {
      emit('click:disable', event);
    };
    onMounted(() => {
      if (!props.init) return;
      f7ready(() => {
        const params = noUndefinedProps({
          el: elRef.value,
          inputEvents: props.inputEvents,
          searchContainer: props.searchContainer,
          searchIn: props.searchIn,
          searchItem: props.searchItem,
          searchGroup: props.searchGroup,
          searchGroupTitle: props.searchGroupTitle,
          hideOnEnableEl: props.hideOnEnableEl,
          hideOnSearchEl: props.hideOnSearchEl,
          foundEl: props.foundEl,
          notFoundEl: props.notFoundEl,
          backdrop: props.backdrop,
          backdropEl: props.backdropEl,
          disableButton: props.disableButton,
          ignore: props.ignore,
          customSearch: props.customSearch,
          removeDiacritics: props.removeDiacritics,
          hideGroupTitles: props.hideGroupTitles,
          hideGroups: props.hideGroups,
          expandable: props.expandable,
          inline: props.inline,
          on: {
            search(searchbar, query, previousQuery) {
              emit('searchbar:search', searchbar, query, previousQuery);
            },
            clear(searchbar, previousQuery) {
              emit('searchbar:clear', searchbar, previousQuery);
            },
            enable(searchbar) {
              emit('searchbar:enable', searchbar);
            },
            disable(searchbar) {
              emit('searchbar:disable', searchbar);
            }
          }
        });
        Object.keys(params).forEach(key => {
          if (params[key] === '') {
            delete params[key];
          }
        });
        f7Searchbar = f7.searchbar.create(params);
      });
    });
    onBeforeUnmount(() => {
      if (f7Searchbar && f7Searchbar.destroy) f7Searchbar.destroy();
      f7Searchbar = null;
    });
    const classes = computed(() => classNames('searchbar', {
      'searchbar-inline': props.inline,
      'no-outline': !props.outline,
      'searchbar-expandable': props.expandable
    }, colorClasses(props)));
    const tag = computed(() => props.form ? 'form' : 'div');
    return {
      elRef,
      tag,
      classes,
      search,
      enable,
      disable,
      toggle,
      clear,
      onChange,
      onInput,
      onFocus,
      onBlur,
      onSubmit,
      onClearButtonClick,
      onDisableButtonClick
    };
  }
};