UNPKG

@mdsfe/mds-ui

Version:

A set of enterprise-class Vue UI components.

1,420 lines (1,255 loc) 40.6 kB
(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("./icon"), require("./_util/proptype"), require("./button"), require("./_mixin/emitter")); else if(typeof define === 'function' && define.amd) define(["./icon", "./_util/proptype", "./button", "./_mixin/emitter"], factory); else { var a = typeof exports === 'object' ? factory(require("./icon"), require("./_util/proptype"), require("./button"), require("./_mixin/emitter")) : factory(root["./icon"], root["./_util/proptype"], root["./button"], root["./_mixin/emitter"]); for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; } })(window, function(__WEBPACK_EXTERNAL_MODULE__7__, __WEBPACK_EXTERNAL_MODULE__8__, __WEBPACK_EXTERNAL_MODULE__13__, __WEBPACK_EXTERNAL_MODULE__14__) { return /******/ (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 = "/dist/"; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 110); /******/ }) /************************************************************************/ /******/ ({ /***/ 0: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; }); /* 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 } } /***/ }), /***/ 110: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // ESM COMPAT FLAG __webpack_require__.r(__webpack_exports__); // EXTERNAL MODULE: ./components/input/style/index.js var style = __webpack_require__(60); // EXTERNAL MODULE: external "babel-runtime/helpers/defineProperty" var defineProperty_ = __webpack_require__(3); var defineProperty_default = /*#__PURE__*/__webpack_require__.n(defineProperty_); // EXTERNAL MODULE: external "./_util/proptype" var proptype_ = __webpack_require__(8); // EXTERNAL MODULE: external "./icon" var external_icon_ = __webpack_require__(7); var external_icon_default = /*#__PURE__*/__webpack_require__.n(external_icon_); // EXTERNAL MODULE: external "./_mixin/emitter" var emitter_ = __webpack_require__(14); var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_); // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/input/input.vue?vue&type=script&lang=js& var SIZEMAP = { 'small': 'sm', 'large': 'lg', 'default': '', 'medium': 'md', 'mini': 'mni' }; /* harmony default export */ var inputvue_type_script_lang_js_ = ({ name: 'MdsInput', mixins: [emitter_default.a], props: { addonAfter: String, addonBefore: String, autocomplete: { type: String, default: 'off' }, autofocus: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, id: { type: String }, name: { type: String }, number: { type: Boolean, default: false }, placeholder: { type: String, default: '' }, prefix: String, prefixCls: { type: String, default: 'mds-input' }, bulefixCls: { type: String, default: '' }, readonly: { type: Boolean, default: false }, size: { type: String, validator: function validator(value) { return Object(proptype_["oneOf"])(value, ['small', 'large', 'default', 'mini', 'medium']); }, default: 'default' }, suffix: String, type: { type: String }, // 用于判定是否进行表单校验 role: String, width: String, value: null, showLimit: Boolean }, computed: { maxlength: function maxlength() { return this.$attrs.maxlength; }, minlength: function minlength() { return this.$attrs.minlength; }, inputClass: function inputClass() { var _ref; var size = this.size && SIZEMAP[this.size]; return [this.prefixCls, (_ref = {}, defineProperty_default()(_ref, this.prefixCls + '-' + size, !!size), defineProperty_default()(_ref, this.prefixCls + '-disabled', !!this.disabled), _ref)]; }, getInputVal: function getInputVal() { return this.value === null || this.value === undefined ? '' : String(this.value); }, showClear: function showClear() { return this.clearable && !this.disabled && !this.readonly && this.getInputVal && (this.focused || this.hovering); }, showAddonAfter: function showAddonAfter() { return this.addonAfter || this.$slots.addonAfter !== undefined; }, showAddonBefore: function showAddonBefore() { return this.addonBefore || this.$slots.addonBefore !== undefined; }, showPrefix: function showPrefix() { return this.prefix || this.$slots.prefix !== undefined; }, showSuffix: function showSuffix() { return this.suffix || this.$slots.suffix !== undefined || this.clearable || this.showLimitText; }, showLimitText: function showLimitText() { return this.maxlength && this.showLimit; } }, render: function render(h) { var _this = this; // bug hack from https://github.com/vuejs/vue/blob/dev/src/platforms/web/util/attrs.js#L10-L18 var basicInput = h('input', { attrs: { type: this.type, value: this.value, placeholder: this.placeholder, readonly: this.readonly, name: this.name, number: this.number, autofocus: this.autofocus, disabled: this.disabled, id: this.id, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength }, style: { width: this.width ? this.width : '' }, domProps: { value: this.value }, 'class': this.inputClass, 'ref': 'input', on: { blur: this.handleBlur, change: this.handleChange, click: this.handleClick, focus: this.handleFocus, input: this.updateValue, keypress: this.handleKeyDown, compositionstart: this.handleComposition, compositionupdate: this.handleComposition, compositionend: this.handleComposition } }); var clearBtn = h(external_icon_default.a, { props: { type: 'line-close-circle' }, 'class': this.prefixCls + '-clearable', key: this.prefixCls + '-clearable-key', nativeOn: { click: function click(e) { if (e.target.className.includes('search')) { return; } _this.clear(e); } } }); var renderLabeledInput = function renderLabeledInput(children) { if (!_this.showAddonBefore && !_this.showAddonAfter) { return children; } var wrapperClassName = _this.prefixCls + '-group'; var addonClassName = _this.bulefixCls === 'blue' ? wrapperClassName + '-blue-addon' : wrapperClassName + '-addon'; var addonBefore = h('span', { 'class': addonClassName }, [_this.$slots.addonBefore || _this.addonBefore]); var addonAfter = h('span', { 'class': addonClassName }, [_this.$slots.addonAfter || _this.addonAfter]); var className = [_this.prefixCls + '-wrapper', defineProperty_default()({}, wrapperClassName, addonBefore || addonAfter)]; if (_this.showAddonBefore || _this.showAddonAfter) { return h('span', { 'class': _this.prefixCls + '-group-wrapper' }, [h('span', { 'class': className }, [_this.showAddonBefore ? addonBefore : null, children, _this.showAddonAfter ? addonAfter : null])]); } return h('span', { 'class': className }, [children]); }; var renderLabeledIcon = function renderLabeledIcon(children) { if (!(_this.showSuffix || _this.showPrefix || _this.showClear)) { return children; } var limit = h('span', { 'class': _this.prefixCls + '-showLimit' }, [(_this.value ? _this.value.length : 0) + '/' + _this.maxlength]); var prefix = h('span', { 'class': _this.prefixCls + '-prefix' }, [_this.$slots.prefix || _this.prefix]); var suffix = h('span', { 'class': _this.prefixCls + '-suffix' }, [_this.showClear ? clearBtn : null, _this.showLimitText ? limit : null, _this.$slots.suffix || _this.suffix]); return h('span', { 'class': [_this.prefixCls + '-affix-wrapper'], on: { mouseenter: function mouseenter() { _this.hovering = true; }, mouseleave: function mouseleave() { _this.hovering = false; } } }, [_this.showPrefix ? prefix : null, children, _this.showSuffix ? suffix : null]); }; var renderInput = function renderInput() { return renderLabeledIcon(basicInput); }; return renderLabeledInput(renderInput()); }, data: function data() { return { focused: false, hovering: false, isOnComposition: false }; }, watch: { value: function value() { if (this.isOnComposition) return; this.dispatch('MdsFormItem', 'formItemChange'); } }, methods: { clear: function clear(e) { this.$emit('input', ''); this.$emit('change', ''); this.$emit('clear'); this.dispatch('MdsFormItem', 'formItemChange', e); }, getInput: function getInput() { return this.$refs.input; }, focus: function focus() { this.getInput().focus(); }, handleKeyDown: function handleKeyDown(e) { if (e.keyCode === 13) { this.$emit('press-enter', e); } this.$emit('keydown', e); }, handleComposition: function handleComposition(e) { var _this2 = this; if (e.type === 'compositionend') { this.isOnComposition = false; this.$nextTick(function (_) { return _this2.updateValue(e); }); } else { this.isOnComposition = true; } }, updateValue: function updateValue(e) { if (this.isOnComposition) return; this.$emit('input', e.target.value); this.dispatch('MdsFormItem', 'formItemChange', e); }, handleBlur: function handleBlur(e) { this.focused = false; this.$emit('blur', e); if (this.role !== 'picker') { this.dispatch('MdsFormItem', 'formItemBlur', e); } }, blur: function blur(e) { this.$refs.input.blur(); this.$emit('blur', e); }, handleFocus: function handleFocus(e) { this.focused = true; this.$emit('focus', e); }, handleClick: function handleClick(e) { this.$emit('click', e); }, handleChange: function handleChange(e) { this.$emit('change', e); } } }); // CONCATENATED MODULE: ./components/input/input.vue?vue&type=script&lang=js& /* harmony default export */ var input_inputvue_type_script_lang_js_ = (inputvue_type_script_lang_js_); // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js var componentNormalizer = __webpack_require__(0); // CONCATENATED MODULE: ./components/input/input.vue var input_render, staticRenderFns /* normalize component */ var component = Object(componentNormalizer["a" /* default */])( input_inputvue_type_script_lang_js_, input_render, staticRenderFns, false, null, null, null ) /* hot reload */ if (false) { var api; } component.options.__file = "components/input/input.vue" /* harmony default export */ var input = (component.exports); // EXTERNAL MODULE: external "./button" var external_button_ = __webpack_require__(13); var external_button_default = /*#__PURE__*/__webpack_require__.n(external_button_); // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/input/search.vue?vue&type=script&lang=js& // 兼容buttonsize var BUTTONSIZE = { 'small': 'small', 'large': 'large', 'mini': 'large-small' }; /* harmony default export */ var searchvue_type_script_lang_js_ = ({ name: 'MdsInputSearch', props: { addonAfter: String, addonBefore: String, autocomplete: { type: String, default: 'off' }, autofocus: { type: Boolean, default: false }, className: { type: String }, disabled: { type: Boolean, default: false }, clearable: { type: Boolean, default: false }, id: { type: String }, name: { type: String }, number: { type: Boolean, default: false }, enterButton: { type: Boolean, default: false }, enterButtonText: { type: String, default: '' }, placeholder: { type: String, default: '' }, prefix: String, prefixCls: { type: String, default: 'mds-input' }, readonly: { type: Boolean, default: false }, size: String, suffix: String, type: { type: String }, value: null }, render: function render(h) { var _this = this; var searchIcon = h(external_icon_default.a, { props: { type: 'line-search' }, 'class': 'mds-input-search-icon', slot: 'suffix', nativeOn: { click: function click() { _this.$emit('search', _this.value); } } }); var searchBtn = h(external_button_default.a, { props: { type: 'primary', icon: this.enterButtonText ? '' : 'line-search', size: BUTTONSIZE[this.size] }, slot: 'addonAfter', nativeOn: { click: function click() { _this.$emit('search', _this.value); } } }, this.enterButtonText); var renderArr = []; if (this.enterButton) { renderArr.push(searchBtn); } else { renderArr.push(searchIcon); } return h(input, { props: this.$props, attrs: this.$attrs, 'class': 'mds-input-search', on: { input: function input(value) { return _this.$emit('input', value); }, 'press-enter': function pressEnter() { return _this.$emit('search', _this.value); } } }, renderArr); } }); // CONCATENATED MODULE: ./components/input/search.vue?vue&type=script&lang=js& /* harmony default export */ var input_searchvue_type_script_lang_js_ = (searchvue_type_script_lang_js_); // CONCATENATED MODULE: ./components/input/search.vue var search_render, search_staticRenderFns /* normalize component */ var search_component = Object(componentNormalizer["a" /* default */])( input_searchvue_type_script_lang_js_, search_render, search_staticRenderFns, false, null, null, null ) /* hot reload */ if (false) { var search_api; } search_component.options.__file = "components/input/search.vue" /* harmony default export */ var search = (search_component.exports); // EXTERNAL MODULE: ./components/input/textarea.vue + 5 modules var input_textarea = __webpack_require__(45); // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/input/group.vue?vue&type=template&id=9e2c1de2& var groupvue_type_template_id_9e2c1de2_render = function () { var _vm = this var _h = _vm.$createElement var _c = _vm._self._c || _h return _c("span", { class: _vm.classes }, [_vm._t("default")], 2) } var groupvue_type_template_id_9e2c1de2_staticRenderFns = [] groupvue_type_template_id_9e2c1de2_render._withStripped = true // CONCATENATED MODULE: ./components/input/group.vue?vue&type=template&id=9e2c1de2& // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/input/group.vue?vue&type=script&lang=js& // // // // // // /* harmony default export */ var groupvue_type_script_lang_js_ = ({ name: 'MdsInputGroup', props: { compact: { type: Boolean, default: false }, conjoined: { type: Boolean, default: false }, prefixCls: { type: String, default: 'mds-input-group' }, size: { type: String, default: 'default', validator: function validator(value) { return Object(proptype_["oneOf"])(value, ['default', 'small', 'large']); } } }, computed: { classes: function classes() { var _ref; return [this.prefixCls, (_ref = {}, defineProperty_default()(_ref, this.prefixCls + '-lg', this.size === 'large'), defineProperty_default()(_ref, this.prefixCls + '-sm', this.size === 'small'), defineProperty_default()(_ref, this.prefixCls + '-compact', this.compact), defineProperty_default()(_ref, this.prefixCls + '-conjoined', this.conjoined), _ref)]; } } }); // CONCATENATED MODULE: ./components/input/group.vue?vue&type=script&lang=js& /* harmony default export */ var input_groupvue_type_script_lang_js_ = (groupvue_type_script_lang_js_); // CONCATENATED MODULE: ./components/input/group.vue /* normalize component */ var group_component = Object(componentNormalizer["a" /* default */])( input_groupvue_type_script_lang_js_, groupvue_type_template_id_9e2c1de2_render, groupvue_type_template_id_9e2c1de2_staticRenderFns, false, null, null, null ) /* hot reload */ if (false) { var group_api; } group_component.options.__file = "components/input/group.vue" /* harmony default export */ var group = (group_component.exports); // CONCATENATED MODULE: ./components/input/index.js input.Group = group; input.Search = search; input.TextArea = input_textarea["a" /* default */]; /* istanbul ignore next */ input.install = function (Vue) { Vue.component(input.name, input); Vue.component(search.name, search); Vue.component(group.name, group); Vue.component(input_textarea["a" /* default */].name, input_textarea["a" /* default */]); }; /* harmony default export */ var components_input = __webpack_exports__["default"] = (input); /***/ }), /***/ 13: /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__13__; /***/ }), /***/ 14: /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__14__; /***/ }), /***/ 142: /***/ (function(module, exports) { // removed by extract-text-webpack-plugin /***/ }), /***/ 186: /***/ (function(module, exports) { // removed by extract-text-webpack-plugin /***/ }), /***/ 3: /***/ (function(module, exports) { module.exports = require("babel-runtime/helpers/defineProperty"); /***/ }), /***/ 45: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/input/textarea.vue?vue&type=template&id=5786ca5a& var render = function () { var _vm = this var _h = _vm.$createElement var _c = _vm._self._c || _h return _c( "div", { class: _vm.prefixCls + "-content " + (_vm.disabled ? "disable" : "") }, [ _vm.showLimitPosition === "inside" ? _c("div", { staticClass: "mds-input-textarea-wrapper" }, [ _c("textarea", { directives: [ { name: "model", rawName: "v-model", value: _vm.valueData, expression: "valueData", }, ], ref: "textAreaRef", class: [ _vm.prefixCls + " " + _vm.prefixCls + "-textarea", _vm.disabled ? "mds-input-disabled" : "", ], style: _vm.textareaStyles, attrs: { maxlength: _vm.max_length, minlength: _vm.min_length, rows: _vm.rows, placeholder: _vm.placeholder, disabled: _vm.disabled, }, domProps: { value: _vm.valueData }, on: { input: [ function ($event) { if ($event.target.composing) { return } _vm.valueData = $event.target.value }, _vm.handleInput, ], keypress: _vm.handleKeyDown, change: _vm.handleChange, focus: _vm.handleFocus, blur: _vm.handleBlur, }, }), _vm.max_length ? _c( "span", { class: [ "mds-input-show-limit", "mds-input-show-limit--inside", ], }, [_vm._v(_vm._s(_vm.number) + "/" + _vm._s(_vm.max_length))] ) : _vm._e(), ]) : _vm.showLimitPosition === "outside" ? [ _c("textarea", { directives: [ { name: "model", rawName: "v-model", value: _vm.valueData, expression: "valueData", }, ], ref: "textAreaRef", class: [ _vm.prefixCls + " " + _vm.prefixCls + "-textarea", _vm.disabled ? "mds-input-disabled" : "", ], style: _vm.textareaStyles, attrs: { maxlength: _vm.max_length, minlength: _vm.min_length, rows: _vm.rows, placeholder: _vm.placeholder, disabled: _vm.disabled, }, domProps: { value: _vm.valueData }, on: { input: [ function ($event) { if ($event.target.composing) { return } _vm.valueData = $event.target.value }, _vm.handleInput, ], keypress: _vm.handleKeyDown, change: _vm.handleChange, focus: _vm.handleFocus, blur: _vm.handleBlur, }, }), _vm.max_length ? _c("span", { class: ["mds-input-show-limit"] }, [ _vm._v(_vm._s(_vm.number) + "/" + _vm._s(_vm.max_length)), ]) : _vm._e(), ] : [ _c("textarea", { directives: [ { name: "model", rawName: "v-model", value: _vm.valueData, expression: "valueData", }, ], ref: "textAreaRef", class: [ _vm.prefixCls + " " + _vm.prefixCls + "-textarea", _vm.disabled ? "mds-input-disabled" : "", ], style: _vm.textareaStyles, attrs: { maxlength: _vm.max_length, minlength: _vm.min_length, rows: _vm.rows, placeholder: _vm.placeholder, disabled: _vm.disabled, }, domProps: { value: _vm.valueData }, on: { input: [ function ($event) { if ($event.target.composing) { return } _vm.valueData = $event.target.value }, _vm.handleInput, ], keypress: _vm.handleKeyDown, change: _vm.handleChange, focus: _vm.handleFocus, blur: _vm.handleBlur, }, }), ], ], 2 ) } var staticRenderFns = [] render._withStripped = true // CONCATENATED MODULE: ./components/input/textarea.vue?vue&type=template&id=5786ca5a& // CONCATENATED MODULE: ./components/input/calculateNodeHeight.js // Thanks to https://github.com/andreypopp/react-textarea-autosize/ /** * calculateNodeHeight(uiTextNode, useCache = false) */ var HIDDEN_TEXTAREA_STYLE = '\n min-height:0 !important;\n max-height:none !important;\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important;\n'; var SIZING_STYLE = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing']; var computedStyleCache = {}; var hiddenTextarea = void 0; function calculateNodeStyling(node) { var useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var nodeRef = node.getAttribute('id') || node.getAttribute('data-reactid') || node.getAttribute('name'); if (useCache && computedStyleCache[nodeRef]) { return computedStyleCache[nodeRef]; } var style = window.getComputedStyle(node); var boxSizing = style.getPropertyValue('box-sizing') || style.getPropertyValue('-moz-box-sizing') || style.getPropertyValue('-webkit-box-sizing'); var paddingSize = parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-top')); var borderSize = parseFloat(style.getPropertyValue('border-bottom-width')) + parseFloat(style.getPropertyValue('border-top-width')); var sizingStyle = SIZING_STYLE.map(function (name) { return name + ':' + style.getPropertyValue(name); }).join(';'); var nodeInfo = { sizingStyle: sizingStyle, paddingSize: paddingSize, borderSize: borderSize, boxSizing: boxSizing }; if (useCache && nodeRef) { computedStyleCache[nodeRef] = nodeInfo; } return nodeInfo; } function calculateNodeHeight(uiTextNode) { var useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null; var maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null; if (!hiddenTextarea) { hiddenTextarea = document.createElement('textarea'); document.body.appendChild(hiddenTextarea); } // Fix wrap="off" issue // https://github.com/mds-design/mds-design/issues/6577 if (uiTextNode.getAttribute('wrap')) { hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap')); } else { hiddenTextarea.removeAttribute('wrap'); } // Copy all CSS properties that have an impact on the height of the content in // the textbox var _calculateNodeStyling = calculateNodeStyling(uiTextNode, useCache), paddingSize = _calculateNodeStyling.paddingSize, borderSize = _calculateNodeStyling.borderSize, boxSizing = _calculateNodeStyling.boxSizing, sizingStyle = _calculateNodeStyling.sizingStyle; // Need to have the overflow attribute to hide the scrollbar otherwise // text-lines will not calculated properly as the shadow will technically be // narrower for content hiddenTextarea.setAttribute('style', sizingStyle + ';' + HIDDEN_TEXTAREA_STYLE); hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || ''; var minHeight = -Infinity; var maxHeight = Infinity; var height = hiddenTextarea.scrollHeight; var overflowY = void 0; if (boxSizing === 'border-box') { // border-box: add border, since height = content + padding + border height = height + borderSize; } else if (boxSizing === 'content-box') { // remove padding, since height = content height = height - paddingSize; } if (minRows !== null || maxRows !== null) { // measure height of a textarea with a single row hiddenTextarea.value = ''; var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize; if (minRows !== null) { minHeight = singleRowHeight * minRows; if (boxSizing === 'border-box') { minHeight = minHeight + paddingSize + borderSize; } height = Math.max(minHeight, height); } if (maxRows !== null) { maxHeight = singleRowHeight * maxRows; if (boxSizing === 'border-box') { maxHeight = maxHeight + paddingSize + borderSize; } overflowY = height > maxHeight ? '' : 'hidden'; height = Math.min(maxHeight, height); } } // Remove scroll bar flash when autosize without maxRows if (!maxRows) { overflowY = 'hidden'; } return { height: height + 'px', minHeight: minHeight + 'px', maxHeight: maxHeight + 'px', overflowY: overflowY }; } // EXTERNAL MODULE: external "./_mixin/emitter" var emitter_ = __webpack_require__(14); var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_); // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/input/textarea.vue?vue&type=script&lang=js& // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // function onNextFrame(cb) { if (window.requestAnimationFrame) { return window.requestAnimationFrame(cb); } return window.setTimeout(cb, 1); } function clearNextFrameAction(nextFrameId) { if (window.cancelAnimationFrame) { window.cancelAnimationFrame(nextFrameId); } else { window.clearTimeout(nextFrameId); } } /* harmony default export */ var textareavue_type_script_lang_js_ = ({ name: 'MdsInputTextarea', mixins: [emitter_default.a], props: { autosize: { type: [Boolean, Object], default: false }, prefixCls: { type: String, default: 'mds-input' }, maxlength: { type: Number }, minlength: { type: Number }, rows: { type: Number, default: 4 }, showLimit: { type: [Boolean, String], default: undefined }, placeholder: { type: String, default: '' }, disabled: { type: Boolean, default: false }, value: null }, data: function data() { return { textareaStyles: {}, number: 0 }; }, computed: { valueData: { get: function get() { return this.value || ''; }, set: function set(value) { this.$emit('input', value); } }, max_length: function max_length() { return this.$attrs.maxlength || this.maxlength; }, min_length: function min_length() { return this.$attrs.minlength || this.minlength; }, showLimitPosition: function showLimitPosition() { if (this.showLimit === 'outside') return 'outside'; if (this.showLimit === true || this.showLimit === 'inside') return 'inside'; return null; // 不显示 } }, watch: { valueData: { immediate: true, handler: function handler(newVal) { var _this = this; this.$nextTick(function () { _this.resizeTextarea(); }); if (newVal.length > this.maxlength) { return false; } else { this.number = newVal.length; } } } }, created: function created() { this.number = this.valueData.length; }, methods: { handleChange: function handleChange(e) { this.$emit('change', e); }, handleInput: function handleInput(e) { if (this.nextFrameActionId) { clearNextFrameAction(this.nextFrameActionId); } this.nextFrameActionId = onNextFrame(this.resizeTextarea); this.$emit('input', e.target.value); this.dispatch('MdsFormItem', 'formItemChange', e.target.value); }, handleKeyDown: function handleKeyDown(e) { if (e.keyCode === 13) { this.$emit('press-enter', e); } this.$emit('keydown', e); }, resizeTextarea: function resizeTextarea() { if (!this.autosize) { return false; } var minRows = this.autosize ? this.autosize.minRows : null; var maxRows = this.autosize ? this.autosize.maxRows : null; this.textareaStyles = calculateNodeHeight(this.$refs.textAreaRef, false, minRows, maxRows); }, handleFocus: function handleFocus(e) { this.$emit('focus', e); }, handleBlur: function handleBlur(e) { this.$emit('blur', e); this.dispatch('MdsFormItem', 'formItemBlur', e); }, focus: function focus() { this.getInput().focus(); }, blur: function blur() { this.getInput().blur(); }, getInput: function getInput() { return this.$refs.textAreaRef; } }, mounted: function mounted() { this.resizeTextarea(); } }); // CONCATENATED MODULE: ./components/input/textarea.vue?vue&type=script&lang=js& /* harmony default export */ var input_textareavue_type_script_lang_js_ = (textareavue_type_script_lang_js_); // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js var componentNormalizer = __webpack_require__(0); // CONCATENATED MODULE: ./components/input/textarea.vue /* normalize component */ var component = Object(componentNormalizer["a" /* default */])( input_textareavue_type_script_lang_js_, render, staticRenderFns, false, null, null, null ) /* hot reload */ if (false) { var api; } component.options.__file = "components/input/textarea.vue" /* harmony default export */ var input_textarea = __webpack_exports__["a"] = (component.exports); /***/ }), /***/ 60: /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony import */ var _style_index_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(142); /* harmony import */ var _style_index_less__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_style_index_less__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(186); /* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_index_less__WEBPACK_IMPORTED_MODULE_1__); /***/ }), /***/ 7: /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__7__; /***/ }), /***/ 8: /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE__8__; /***/ }) /******/ }); });