vant/lib/search/index.js

A Vue.js 2.0 Mobile UI at YouZan

'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _utils = require('../utils');

var _clickoutside = require('../utils/clickoutside');

var _clickoutside2 = _interopRequireDefault(_clickoutside);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = (0, _utils.create)({
  render: function render() {
    var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { staticClass: "van-search", class: { 'van-search--show-action': _vm.showAction }, style: { 'background-color': _vm.background } }, [_c('div', { directives: [{ name: "clickoutside", rawName: "v-clickoutside", value: _vm.onClickoutside, expression: "onClickoutside" }], staticClass: "van-search__input-wrap" }, [_c('icon', { attrs: { "name": "search" } }), _c('input', _vm._g(_vm._b({ directives: [{ name: "refocus", rawName: "v-refocus", value: _vm.focusStatus, expression: "focusStatus" }], staticClass: "van-search__input", attrs: { "type": "search" }, domProps: { "value": _vm.value } }, 'input', _vm.$attrs, false), _vm.listeners)), _c('icon', { directives: [{ name: "show", rawName: "v-show", value: _vm.isFocus && _vm.value, expression: "isFocus && value" }], attrs: { "name": "clear" }, on: { "click": _vm.onClean } })], 1), _vm.showAction ? _c('div', { staticClass: "van-search__action" }, [_vm._t("action", [_c('div', { staticClass: "van-search__action-text", on: { "click": _vm.onBack } }, [_vm._v(_vm._s(_vm.$t('cancel')))])])], 2) : _vm._e()]);
  },

  name: 'search',

  inheritAttrs: false,

  props: {
    value: String,
    showAction: Boolean,
    background: {
      type: String,
      default: '#f2f2f2'
    }
  },

  data: function data() {
    return {
      isFocus: false,
      focusStatus: false
    };
  },


  directives: {
    Clickoutside: _clickoutside2.default,
    refocus: {
      update: function update(el, state) {
        if (state.value) {
          el.focus();
        }
      }
    }
  },

  computed: {
    listeners: function listeners() {
      return (0, _extends3.default)({}, this.$listeners, {
        focus: this.onFocus,
        input: this.onInput,
        keypress: this.onKeypress
      });
    }
  },

  methods: {
    onFocus: function onFocus() {
      this.isFocus = true;
      this.$emit('focus');
    },
    onInput: function onInput(event) {
      this.$emit('input', event.target.value);
    },
    onKeypress: function onKeypress(event) {
      // press enter
      if (event.keyCode === 13) {
        event.preventDefault();
        this.$emit('search', this.value);
      }
      this.$emit('keypress', event);
    },


    // refocus after click close icon
    onClean: function onClean() {
      var _this = this;

      this.$emit('input', '');
      this.focusStatus = true;

      // ensure refocus can work after click clean icon
      this.$nextTick(function () {
        _this.focusStatus = false;
      });
    },
    onBack: function onBack() {
      this.$emit('input', '');
      this.$emit('cancel');
    },
    onClickoutside: function onClickoutside() {
      this.isFocus = false;
      this.focusStatus = false;
    }
  }
});