zmp-vue/esm/components/searchbar.js

Build full featured iOS & Android apps using ZMP & Vue

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { renderSlot as _renderSlot, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx } from "vue";
var _hoisted_1 = {
  class: "searchbar-inner"
};
var _hoisted_2 = {
  class: "searchbar-input-wrap"
};

var _hoisted_3 = /*#__PURE__*/_createVNode("i", {
  class: "searchbar-icon"
}, null, -1);

function render(_ctx, _cache) {
  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
    ref: "elRef",
    class: _ctx.classes,
    onSubmit: _ctx.onSubmit
  }, {
    default: _withCtx(function () {
      return [_renderSlot(_ctx.$slots, "before-inner"), _createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "inner-start"), _createVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "input-wrap-start"), _createVNode("input", {
        value: _ctx.value,
        placeholder: _ctx.placeholder,
        spellcheck: _ctx.spellcheck,
        type: "search",
        onInput: _cache[1] || (_cache[1] = function () {
          return _ctx.onInput && _ctx.onInput.apply(_ctx, arguments);
        }),
        onChange: _cache[2] || (_cache[2] = function () {
          return _ctx.onChange && _ctx.onChange.apply(_ctx, arguments);
        }),
        onFocus: _cache[3] || (_cache[3] = function () {
          return _ctx.onFocus && _ctx.onFocus.apply(_ctx, arguments);
        }),
        onBlur: _cache[4] || (_cache[4] = function () {
          return _ctx.onBlur && _ctx.onBlur.apply(_ctx, arguments);
        })
      }, null, 40, ["value", "placeholder", "spellcheck"]), _hoisted_3, _ctx.clearButton ? (_openBlock(), _createBlock("span", {
        key: 0,
        class: "input-clear-button",
        onClick: _cache[5] || (_cache[5] = function () {
          return _ctx.onClearButtonClick && _ctx.onClearButtonClick.apply(_ctx, arguments);
        })
      })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "input-wrap-end")]), _ctx.disableButton ? (_openBlock(), _createBlock("span", {
        key: 0,
        class: "searchbar-disable-button",
        onClick: _cache[6] || (_cache[6] = function () {
          return _ctx.onDisableButtonClick && _ctx.onDisableButtonClick.apply(_ctx, arguments);
        })
      }, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "inner-end"), _renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "after-inner")];
    }),
    _: 3
  }, 8, ["class", "onSubmit"]);
}

import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import { classNames, noUndefinedProps } from '../shared/utils';
import { colorClasses, colorProps } from '../shared/mixins';
import { zmpready, zmp } from '../shared/zmp';
export default {
  name: 'zmp-searchbar',
  render: render,
  props: _extends({
    noShadow: Boolean,
    noHairline: Boolean,
    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: '.item-divider, .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
    },
    hideDividers: {
      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: function setup(props, _ref) {
    var emit = _ref.emit;
    var zmpSearchbar = null;
    var elRef = ref(null);

    var search = function search(query) {
      if (!zmpSearchbar) return undefined;
      return zmpSearchbar.search(query);
    };

    var enable = function enable() {
      if (!zmpSearchbar) return undefined;
      return zmpSearchbar.enable();
    };

    var disable = function disable() {
      if (!zmpSearchbar) return undefined;
      return zmpSearchbar.disable();
    };

    var toggle = function toggle() {
      if (!zmpSearchbar) return undefined;
      return zmpSearchbar.toggle();
    };

    var clear = function clear() {
      if (!zmpSearchbar) return undefined;
      return zmpSearchbar.clear();
    };

    var onChange = function onChange(event) {
      emit('change', event);
    };

    var onInput = function onInput(event) {
      emit('input', event);
      emit('update:value', event.target.value);
    };

    var onFocus = function onFocus(event) {
      emit('focus', event);
    };

    var onBlur = function onBlur(event) {
      emit('blur', event);
    };

    var onSubmit = function onSubmit(event) {
      emit('submit', event);
    };

    var onClearButtonClick = function onClearButtonClick(event) {
      emit('click:clear', event);
    };

    var onDisableButtonClick = function onDisableButtonClick(event) {
      emit('click:disable', event);
    };

    onMounted(function () {
      if (!props.init) return;
      zmpready(function () {
        var 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,
          hideDividers: props.hideDividers,
          hideGroups: props.hideGroups,
          expandable: props.expandable,
          inline: props.inline,
          on: {
            search: function search(searchbar, query, previousQuery) {
              emit('searchbar:search', searchbar, query, previousQuery);
            },
            clear: function clear(searchbar, previousQuery) {
              emit('searchbar:clear', searchbar, previousQuery);
            },
            enable: function enable(searchbar) {
              emit('searchbar:enable', searchbar);
            },
            disable: function disable(searchbar) {
              emit('searchbar:disable', searchbar);
            }
          }
        });
        Object.keys(params).forEach(function (key) {
          if (params[key] === '') {
            delete params[key];
          }
        });
        zmpSearchbar = zmp.searchbar.create(params);
      });
    });
    onBeforeUnmount(function () {
      if (zmpSearchbar && zmpSearchbar.destroy) zmpSearchbar.destroy();
      zmpSearchbar = null;
    });
    var classes = computed(function () {
      return classNames('searchbar', {
        'searchbar-inline': props.inline,
        'no-shadow': props.noShadow,
        'no-hairline': props.noHairline,
        'searchbar-expandable': props.expandable
      }, colorClasses(props));
    });
    var tag = computed(function () {
      return props.form ? 'form' : 'div';
    });
    return {
      elRef: elRef,
      tag: tag,
      classes: classes,
      search: search,
      enable: enable,
      disable: disable,
      toggle: toggle,
      clear: clear,
      onChange: onChange,
      onInput: onInput,
      onFocus: onFocus,
      onBlur: onBlur,
      onSubmit: onSubmit,
      onClearButtonClick: onClearButtonClick,
      onDisableButtonClick: onDisableButtonClick
    };
  }
};