ten-design-vue/lib/auto-complete/auto-complete.js

ten-vue

module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 5);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = require("../popup");

/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = require("../input");

/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = require("../render-cell");

/***/ }),
/* 3 */
/***/ (function(module, exports) {

module.exports = require("../cascader-panel/options");

/***/ }),
/* 4 */
/***/ (function(module, exports) {

module.exports = require("../cascader-panel/option");

/***/ }),
/* 5 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/components/auto-complete/auto-complete.vue?vue&type=template&id=f6053e88&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ten-popup',{attrs:{"trigger-type":"manual","direction":"bottom left","show":_vm.popupShow,"width":_vm.popupWidthHandler,"destroy":false},on:{"change":function($event){_vm.popupShow = false}},scopedSlots:_vm._u([{key:"trigger",fn:function(){return [_c('ten-input',_vm._g(_vm._b({staticClass:"ten-auto-complete",attrs:{"value":_vm.value,"get-input":_vm.getInput,"autocomplete":false},on:{"input":_vm.onInput,"focus":_vm.onFocus,"blur":_vm.onBlur,"click":function($event){$event.stopPropagation();return _vm.onTriggerClick.apply(null, arguments)}},scopedSlots:_vm._u([_vm._l((_vm.inputSlotName),function(name){return {key:name,fn:function(){return [_vm._t(name)]},proxy:true}})],null,true)},'ten-input',_vm.$attrs,false),_vm._listeners))]},proxy:true}])},[[_c('ten-options',{ref:"refOptions"},_vm._l((_vm.options),function(option,i){return _c('ten-option',{key:i,attrs:{"selected":_vm.value === option},on:{"optionClick":function($event){return _vm.onOptionClick(option)},"optionKeyCommand":function (c) { return _vm.onOptionKeyCommand(option, c); }}},[(_vm.renderOption)?[_c('render-cell',{attrs:{"render":_vm.renderOption,"option":option,"value":_vm.value}})]:[_vm._v("\n          "+_vm._s(option)+"\n        ")]],2)}),1)]],2)}
var staticRenderFns = []


// CONCATENATED MODULE: ./src/components/auto-complete/auto-complete.vue?vue&type=template&id=f6053e88&

// EXTERNAL MODULE: external "../popup"
var external_popup_ = __webpack_require__(0);
var external_popup_default = /*#__PURE__*/__webpack_require__.n(external_popup_);

// EXTERNAL MODULE: external "../input"
var external_input_ = __webpack_require__(1);
var external_input_default = /*#__PURE__*/__webpack_require__.n(external_input_);

// EXTERNAL MODULE: external "../render-cell"
var external_render_cell_ = __webpack_require__(2);
var external_render_cell_default = /*#__PURE__*/__webpack_require__.n(external_render_cell_);

// EXTERNAL MODULE: external "../cascader-panel/options"
var options_ = __webpack_require__(3);
var options_default = /*#__PURE__*/__webpack_require__.n(options_);

// EXTERNAL MODULE: external "../cascader-panel/option"
var option_ = __webpack_require__(4);
var option_default = /*#__PURE__*/__webpack_require__.n(option_);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/auto-complete/auto-complete.vue?vue&type=script&lang=js&
var _excluded = ["change", "input", "focus", "blur", "click", "select"];

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//





var auto_completevue_type_script_lang_js_name = 'ten-auto-complete';
/* harmony default export */ var auto_completevue_type_script_lang_js_ = ({
  name: auto_completevue_type_script_lang_js_name,
  components: {
    TenPopup: external_popup_default.a,
    TenInput: external_input_default.a,
    RenderCell: external_render_cell_default.a,
    TenOptions: options_default.a,
    TenOption: option_default.a
  },
  props: {
    /**
     * @model
     *
     * 值
     */
    value: {
      type: String
    },

    /**
     * 默认值
     */
    defaultValue: {
      type: String
    },

    /**
     * 自动填充数据源
     */
    dataSource: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * 当dataSource为对象数组时，指定选项数据的字段
     */
    optionValue: {
      type: String,
      default: 'value'
    },

    /**
     * 选项的render函数
     */
    renderOption: {
      type: Function
    }
  },
  data: function data() {
    return {
      popupShow: false,
      focused: false
    };
  },
  computed: {
    options: function options() {
      var _this = this;

      return this.dataSource.map(function (v) {
        if (v && _typeof(v) === 'object') {
          v = v[_this.optionValue];
        }

        return v;
      }).filter(function (v) {
        return !_this.value || _this.value && v.indexOf(_this.value) > -1;
      });
    },
    _listeners: function _listeners() {
      var _this$$listeners = this.$listeners,
          change = _this$$listeners.change,
          input = _this$$listeners.input,
          focus = _this$$listeners.focus,
          blur = _this$$listeners.blur,
          click = _this$$listeners.click,
          select = _this$$listeners.select,
          others = _objectWithoutProperties(_this$$listeners, _excluded);

      return others;
    },
    inputSlotName: function inputSlotName() {
      return Object.keys(this.$scopedSlots);
    }
  },
  watch: {
    value: {
      handler: function handler() {
        if (!this.options.length) {
          this.popupShow = false;
        } else if (!this.popupShow) {
          this.popupShow = true;
        }
      }
    },
    popupShow: {
      handler: function handler(value) {
        if (value) {
          this.$refs.refOptions && this.$refs.refOptions.focus();
        }
      }
    }
  },
  methods: {
    popupWidthHandler: function popupWidthHandler(input) {
      return input.offsetWidth;
    },
    onInput: function onInput(value) {
      /**
       * value值改变后触发的事件
       */
      this.$emit('change', value);
      /**
       * 输入触发的事件
       */

      this.$emit('search', value);
    },
    onFocus: function onFocus(e) {
      if (!this.focused) {
        /**
         * 聚焦事件
         */
        this.$emit('focus', e);
      }

      this.focused = true;
      this.isBluring = false;
    },
    onBlur: function onBlur(e) {
      var _this2 = this;

      this.isBluring = true;
      setTimeout(function () {
        if (_this2.isBluring) {
          _this2.focused = false;
          _this2.popupShow = false;
          /**
           * 失焦事件
           */

          _this2.$emit('blur', e);
        }
      }, 300);
    },
    onOptionClick: function onOptionClick(value) {
      var _this3 = this;

      setTimeout(function () {
        _this3.popupShow = false;
      });
      this.refInput && this.refInput.focus();

      if (this.value !== value) {
        setTimeout(function () {
          if (_this3.refInput && typeof _this3.refInput.value === 'string') {
            _this3.refInput.selectionEnd = _this3.refInput.value.length;
            _this3.refInput.selectionStart = _this3.refInput.value.length;
          }
        });
        this.$emit('change', value);
      }
      /**
       * 选择选项后触发的事件
       */


      this.$emit('select', value);
    },
    getInput: function getInput(input) {
      this.refInput = input;
    },
    onTriggerClick: function onTriggerClick() {
      if (this.options.length) this.popupShow = true;
    },
    onOptionKeyCommand: function onOptionKeyCommand(value, command) {
      if (command === 'enter') this.onOptionClick(value);
    }
  }
});
// CONCATENATED MODULE: ./src/components/auto-complete/auto-complete.vue?vue&type=script&lang=js&
 /* harmony default export */ var auto_complete_auto_completevue_type_script_lang_js_ = (auto_completevue_type_script_lang_js_); 
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */

// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.

function normalizeComponent (
  scriptExports,
  render,
  staticRenderFns,
  functionalTemplate,
  injectStyles,
  scopeId,
  moduleIdentifier, /* server only */
  shadowMode /* vue-cli only */
) {
  // Vue.extend constructor export interop
  var options = typeof scriptExports === 'function'
    ? scriptExports.options
    : scriptExports

  // render functions
  if (render) {
    options.render = render
    options.staticRenderFns = staticRenderFns
    options._compiled = true
  }

  // functional template
  if (functionalTemplate) {
    options.functional = true
  }

  // scopedId
  if (scopeId) {
    options._scopeId = 'data-v-' + scopeId
  }

  var hook
  if (moduleIdentifier) { // server build
    hook = function (context) {
      // 2.3 injection
      context =
        context || // cached call
        (this.$vnode && this.$vnode.ssrContext) || // stateful
        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__
      }
      // inject component styles
      if (injectStyles) {
        injectStyles.call(this, context)
      }
      // register component module identifier for async chunk inferrence
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier)
      }
    }
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook
  } else if (injectStyles) {
    hook = shadowMode
      ? function () {
        injectStyles.call(
          this,
          (options.functional ? this.parent : this).$root.$options.shadowRoot
        )
      }
      : injectStyles
  }

  if (hook) {
    if (options.functional) {
      // for template-only hot-reload because in that case the render fn doesn't
      // go through the normalizer
      options._injectStyles = hook
      // register for functional component in vue file
      var originalRender = options.render
      options.render = function renderWithStyleInjection (h, context) {
        hook.call(context)
        return originalRender(h, context)
      }
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate
      options.beforeCreate = existing
        ? [].concat(existing, hook)
        : [hook]
    }
  }

  return {
    exports: scriptExports,
    options: options
  }
}

// CONCATENATED MODULE: ./src/components/auto-complete/auto-complete.vue





/* normalize component */

var component = normalizeComponent(
  auto_complete_auto_completevue_type_script_lang_js_,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* harmony default export */ var auto_complete = __webpack_exports__["default"] = (component.exports);

/***/ })
/******/ ]);