ten-design-vue
Version:
ten-vue
859 lines (739 loc) • 24.2 kB
JavaScript
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 = 8);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("../scripts/utils/helper");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("../scripts/utils/dom-helper");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("../button");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("../icon");
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("../render-cell");
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = require("../vnodes");
/***/ }),
/* 6 */
/***/ (function(module, exports) {
module.exports = require("../scripts/mixins/emitter");
/***/ }),
/* 7 */
/***/ (function(module, exports) {
module.exports = require("../config");
/***/ }),
/* 8 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
// 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/modal/modal.vue?vue&type=template&id=05831bb9&
var render = function () {
var _obj;
var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.realVisible || !_vm.destroy)?_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.realVisible),expression:"realVisible"}],class:_vm._wrapperClass,style:(_vm._wrapperStyle)},[(_vm.withMask)?[_c('transition',{attrs:{"name":"ten-fade-in","appear":""}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],ref:"mask",staticClass:"ten-modal__mask",on:{"click":_vm.onMaskClick}})])]:_vm._e(),_c('transition',{attrs:{"name":"ten-flow-in","appear":""}},[_c('div',_vm._b({directives:[{name:"show",rawName:"v-show",value:(_vm.visible),expression:"visible"}],ref:"modal",class:_vm._modalClass,style:(_vm._modalStyle)},'div',_vm.$attrs,false),[(_vm.title && !_vm.hideHeader)?_c('div',{staticClass:"ten-modal__header",style:(_vm._handleMoveStyle),on:{"mousedown":_vm.handeleMove}},[(_vm.type)?_c('ten-icon',{class:[
'ten-modal__header-icon',
( _obj = {}, _obj[("ten-modal__header-icon--" + _vm.type)] = _vm.type, _obj )
],attrs:{"icon":_vm._titleIconType}}):_vm._e(),_c('div',{staticClass:"ten-modal__header-title"},[_vm._t("title",function(){return [_vm._v("\n "+_vm._s(_vm.title)+"\n ")]})],2),_c('ten-icon',{staticClass:"ten-modal__header-close",attrs:{"icon":"clear"},on:{"click":_vm.onModalClose}})],1):_vm._e(),_c('div',{staticClass:"ten-modal__content"},[_vm._t("default",function(){return [(typeof _vm.content === 'string')?[_vm._v("\n "+_vm._s(_vm.content)+"\n ")]:_vm._e(),(_vm.content && typeof _vm.content === 'function')?[_c('render-cell',{attrs:{"render":_vm.content}})]:_vm._e(),(_vm.content && typeof _vm.content === 'object')?[_c('vnodes',{attrs:{"vnodes":_vm.content}})]:_vm._e()]})],2),(!_vm.hideFooter)?_c('div',{staticClass:"ten-modal__footer"},[_vm._t("footer",function(){return [(!_vm.cancelHidden)?_c('ten-button',_vm._b({staticClass:"ten-modal__footer-btn ten-modal__footer-btn--cancel",on:{"click":_vm.onModalCancel}},'ten-button',_vm.cancelBtnProps,false),[_vm._v("\n "+_vm._s(_vm.cancelText || _vm.t('cancel'))+"\n ")]):_vm._e(),_c('ten-button',_vm._b({staticClass:"ten-modal__footer-btn ten-modal__footer-btn--confirm",attrs:{"type":"primary"},on:{"click":_vm.onModalConfirm}},'ten-button',_vm.confirmBtnProps,false),[_vm._v("\n "+_vm._s(_vm.confirmText || _vm.t('confirm'))+"\n ")])]})],2):_vm._e()])])],2):_vm._e()}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/components/modal/modal.vue?vue&type=template&id=05831bb9&
// EXTERNAL MODULE: external "../button"
var external_button_ = __webpack_require__(2);
var external_button_default = /*#__PURE__*/__webpack_require__.n(external_button_);
// EXTERNAL MODULE: external "../icon"
var external_icon_ = __webpack_require__(3);
var external_icon_default = /*#__PURE__*/__webpack_require__.n(external_icon_);
// EXTERNAL MODULE: external "../render-cell"
var external_render_cell_ = __webpack_require__(4);
var external_render_cell_default = /*#__PURE__*/__webpack_require__.n(external_render_cell_);
// EXTERNAL MODULE: external "../vnodes"
var external_vnodes_ = __webpack_require__(5);
var external_vnodes_default = /*#__PURE__*/__webpack_require__.n(external_vnodes_);
// EXTERNAL MODULE: external "../scripts/mixins/emitter"
var emitter_ = __webpack_require__(6);
var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
// EXTERNAL MODULE: external "../scripts/utils/helper"
var helper_ = __webpack_require__(0);
// EXTERNAL MODULE: external "../scripts/utils/dom-helper"
var dom_helper_ = __webpack_require__(1);
var dom_helper_default = /*#__PURE__*/__webpack_require__.n(dom_helper_);
// EXTERNAL MODULE: external "../config"
var external_config_ = __webpack_require__(7);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/modal/modal.vue?vue&type=script&lang=js&
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var modalvue_type_script_lang_js_name = 'ten-modal';
var ICON_TYPE_MAP = {
error: 'circle_clear',
warning: 'circle_error',
info: 'circle_info',
success: 'circle_tick'
};
/* harmony default export */ var modalvue_type_script_lang_js_ = ({
name: modalvue_type_script_lang_js_name,
components: {
TenButton: external_button_default.a,
TenIcon: external_icon_default.a,
RenderCell: external_render_cell_default.a,
Vnodes: external_vnodes_default.a
},
mixins: [emitter_default.a, external_config_["localMixin"]],
model: {
prop: 'value',
event: 'change'
},
props: {
/**
* 是否显示Modal
*/
value: Boolean,
/**
* 标题
*/
title: String,
/**
* 对话框宽度
*/
width: [String, Number],
/**
* 对话框距离顶部的距离
*/
top: [String, Number],
/**
* 是否垂直居中显示对话框
*/
center: Boolean,
/**
* 类型 可选 success | error | warning | info
*/
type: {
type: String,
validator: function validator(v) {
return ['success', 'error', 'warning', 'info'].indexOf(v) > -1;
}
},
/**
* modal 内容，默认渲染 modal 的 default slot
*/
content: {
type: [String, Function, Object]
},
/**
* 确认按钮文字
*/
confirmText: String,
/**
* 取消按钮文字
*/
cancelText: String,
/**
* 确认按钮 props
*/
confirmBtnProps: Object,
/**
* 取消按钮 props
*/
cancelBtnProps: Object,
/**
* 自定义icon
* @member icon图标列表
*/
iconType: String,
/**
* 是否隐藏取消按钮
*/
cancelHidden: {
type: Boolean,
default: false
},
/**
* 是否显示遮罩层
*/
withMask: {
type: Boolean,
default: true
},
/**
* 点击遮罩层是否关闭modal
*/
maskClosable: {
type: Boolean,
default: true
},
/**
* 开启键盘监听 ESC 退出事件
*/
escClosable: {
type: Boolean,
default: false
},
/**
* 关闭modal是否销毁
*/
destroy: {
type: Boolean,
default: true
},
/**
* 确认按钮点击回调，返回 true 或 false 决定是否继续执行 confirm 操作并关闭 modal，也支持返回 promise 异步处理
*/
beforeConfirm: Function,
/**
* 取消按钮点击回调，返回 true 或 false 决定是否继续执行 cancel 操作并关闭 modal，也支持返回 promise 异步处理
*/
beforeCancel: Function,
/**
* 关闭按钮或 mask 点击触发的关闭回调，返回 true 或 false 决定是否关闭 modal，也支持返回 promise 异步处理
*/
beforeClose: Function,
/**
* 不显示头部
*/
hideHeader: Boolean,
/**
* 不显示尾部
*/
hideFooter: Boolean,
/**
* 点击确认或者取消是否关闭 modal
*/
closeAfterAction: {
type: Boolean,
default: true
},
/**
* 是否开启拖拽控制移动
*/
draggable: {
type: Boolean,
default: false
},
/**
* 自定义 modal 容器 class
*/
wrapperClass: [String, Array, Object]
},
data: function data() {
return {
visible: this.value,
realVisible: this.value
};
},
computed: {
_wrapperClass: function _wrapperClass() {
return ['ten-modal__wrapper', this.wrapperClass || ''];
},
_modalClass: function _modalClass() {
return ['ten-modal', {
'ten-modal--center': this.center
}];
},
_modalStyle: function _modalStyle() {
var width = dom_helper_default.a.getCssWidth(this.width);
var style = {
width: width
};
if (!this.center) {
style.top = dom_helper_default.a.getCssWidth(this.top);
}
return !this.withMask ? _objectSpread(_objectSpread({}, Object(helper_["removeUndefinedAttr"])(style)), {}, {
'pointer-events': 'initial'
}) : Object(helper_["removeUndefinedAttr"])(style);
},
_titleIconType: function _titleIconType() {
return this.iconType || ICON_TYPE_MAP[this.type];
},
_handleMoveStyle: function _handleMoveStyle() {
return this.draggable ? {
cursor: 'move'
} : '';
},
_wrapperStyle: function _wrapperStyle() {
return !this.withMask ? {
'pointer-events': 'none'
} : '';
}
},
watch: {
value: function value(_value) {
this.setVisible(_value, true);
}
},
mounted: function mounted() {
this.aniT = 0;
if (this.visible) {
this.appendToBody();
}
this.escClosable && document.addEventListener('keydown', this.onEscClose);
},
destroyed: function destroyed() {
try {
this.escClosable && document.removeEventListener('keydown', this.onEscClose);
this.$el && document.body.removeChild(this.$el);
} catch (e) {}
},
methods: {
onEscClose: function onEscClose(e) {
if (e.keyCode === 27 && !e.isComposing) {
this.setVisible(false);
}
},
appendToBody: function appendToBody() {
if (this.$el && this.$el.parentNode !== document.body) {
document.body.appendChild(this.$el);
}
},
setBodyCalcSize: function setBodyCalcSize(clear) {
var bodyIsScroll = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
if (!bodyIsScroll) {
return;
}
if (clear) {
document.body.style.position = '';
document.body.style.width = '';
return;
}
var calcSize = dom_helper_default.a.getBrowserScrollSize();
if (calcSize) {
document.body.style.position = 'relative';
document.body.style.width = "calc(100% - ".concat(calcSize, "px)");
}
},
onModalConfirm: function onModalConfirm() {
var _this = this;
Object(helper_["validateBeforeAction"])(this.beforeConfirm, function () {
/**
* @event confirm
* 点击确认回调函数
*/
_this.$emit('confirm');
if (_this.closeAfterAction) {
_this.close();
}
});
},
onModalCancel: function onModalCancel() {
var _this2 = this;
Object(helper_["validateBeforeAction"])(this.beforeCancel, function () {
/**
* @event cancel
* 点击取消回调函数
*/
_this2.$emit('cancel');
if (_this2.closeAfterAction) {
_this2.close();
}
});
},
onModalClose: function onModalClose() {
var _this3 = this;
Object(helper_["validateBeforeAction"])(this.beforeClose, function () {
_this3.close();
});
},
show: function show() {
this.setVisible(true);
},
close: function close() {
this.setVisible(false);
},
onMaskClick: function onMaskClick() {
this.maskClosable && this.onModalClose();
},
setVisible: function setVisible(value, initiative) {
var _this4 = this;
var isChanged = false;
if (!value && this.visible) {
/**
* 关闭回调函数
*/
this.$emit('close');
isChanged = true;
this.visible = value;
clearTimeout(this.aniT);
this.aniT = setTimeout(function () {
document.body.style.overflow = '';
_this4.setBodyCalcSize(true);
/**
* 关闭动画结束回调函数
*/
_this4.$emit('closed');
_this4.realVisible = false;
}, 300);
} else if (value && !this.visible) {
isChanged = true;
this.visible = value;
this.realVisible = value;
this.appendToBody();
this.setBodyCalcSize();
document.body.style.overflow = 'hidden';
/**
* 显示回调函数
*/
this.$emit('open');
clearTimeout(this.aniT);
this.aniT = setTimeout(function () {
/**
* 显示动画结束回调函数
*/
_this4.$emit('opened');
}, 300);
}
/**
* 状态改变回调函数
*/
if (isChanged && !initiative) {
this.$emit('change', value);
}
this.broadcastAll('do-layout');
},
handeleMove: function handeleMove(event) {
// ps： 整个坐标轴是 T 字形的，建议后期可以更改为了浏览器的坐标轴
if (!this.draggable) return; // 初始化 modal 的位置
var modalDom = this.$refs.modal;
var styleLeft = modalDom.style.left || '0';
styleLeft = parseInt(styleLeft.replace('px', ''), 10);
var _modalDom$getBounding = modalDom.getBoundingClientRect(),
top = _modalDom$getBounding.top,
left = _modalDom$getBounding.left,
right = _modalDom$getBounding.right;
modalDom.style.top = "".concat(top, "px");
modalDom.style.transform = 'none'; // 获取盒子的数据，方便限制移动
var clientHeight = document.body.clientHeight;
var modalHeight = modalDom.offsetHeight,
modalWidth = modalDom.offsetWidth;
var maxMoveHeight = clientHeight - modalHeight; // 鼠标初始位置
var startX = event.pageX,
startY = event.pageY; // 监听位置的变化，并计算长度
var stop = true;
var mousemoveFn = function mousemoveFn(_ref) {
var pageX = _ref.pageX,
pageY = _ref.pageY;
if (!stop) return false; // 控制x 轴方向的运动
var distanceX = styleLeft + pageX - startX;
if (distanceX > 0) {
if (distanceX >= right - modalWidth) distanceX = right - modalWidth;
} else {
if (distanceX <= -left) distanceX = -left;
}
modalDom.style.left = "".concat(distanceX, "px"); // 控制 y 轴方向的运动
var distanceY = top + pageY - startY;
if (distanceY > 0) {
if (distanceY >= maxMoveHeight) distanceY = maxMoveHeight;
} else {
distanceY = 0;
}
modalDom.style.top = "".concat(distanceY, "px");
};
var mouseupFn = function mouseupFn() {
stop = false;
document.removeEventListener('mousemove', mousemoveFn);
document.removeEventListener('mouseup', mouseupFn);
};
document.addEventListener('mousemove', mousemoveFn);
document.addEventListener('mouseup', mouseupFn);
}
}
});
// CONCATENATED MODULE: ./src/components/modal/modal.vue?vue&type=script&lang=js&
/* harmony default export */ var modal_modalvue_type_script_lang_js_ = (modalvue_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/modal/modal.vue
/* normalize component */
var component = normalizeComponent(
modal_modalvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var modal = __webpack_exports__["default"] = (component.exports);
/***/ })
/******/ ]);