ten-design-vue
Version:
ten-vue
889 lines (762 loc) • 26.4 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 = 4);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
module.exports = require("lodash/cloneDeep");
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = require("./tree-model");
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = require("./tree-node");
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("../scripts/utils/helper");
/***/ }),
/* 4 */
/***/ (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/tree/tree.vue?vue&type=template&id=18e462c8&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g({directives:[{name:"show",rawName:"v-show",value:(_vm.inited),expression:"inited"}],ref:"tree",staticClass:"ten-tree"},_vm.$listeners),[_vm._t("default",function(){return _vm._l((_vm.treeData),function(item){return _c('ten-tree-node',{key:_vm.getKey(item),attrs:{"data":item,"selectable":_vm.selectable,"show-checkbox":_vm.multiple && _vm.multipleCheckbox,"level-index":_vm.levelIndex}})})})],2)}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/components/tree/tree.vue?vue&type=template&id=18e462c8&
// EXTERNAL MODULE: external "./tree-model"
var external_tree_model_ = __webpack_require__(1);
var external_tree_model_default = /*#__PURE__*/__webpack_require__.n(external_tree_model_);
// EXTERNAL MODULE: external "./tree-node"
var external_tree_node_ = __webpack_require__(2);
var external_tree_node_default = /*#__PURE__*/__webpack_require__.n(external_tree_node_);
// EXTERNAL MODULE: external "../scripts/utils/helper"
var helper_ = __webpack_require__(3);
// EXTERNAL MODULE: external "lodash/cloneDeep"
var cloneDeep_ = __webpack_require__(0);
var cloneDeep_default = /*#__PURE__*/__webpack_require__.n(cloneDeep_);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tree/tree.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 treevue_type_script_lang_js_name = 'ten-tree';
var LEVEL_INDEX = 0;
/* harmony default export */ var treevue_type_script_lang_js_ = ({
name: treevue_type_script_lang_js_name,
components: {
TenTreeNode: external_tree_node_default.a
},
mixins: [],
provide: function provide() {
return {
tree: this,
treeNodeParent: this
};
},
props: {
/**
* data 树形数据
*/
data: {
type: Array,
default: function _default() {
return [];
}
},
/**
* 是否可选
*/
selectable: Boolean,
/**
* @ignore
* 选择模式，设置为 independent 则各个节点独立可选
* @member default | independent
*/
selectMode: {
type: String,
default: 'default'
},
/**
* v-model 当前选中值，对应事件 selectedChange
*/
selected: [Number, String, Object, Array],
/**
* 当前选中值
*/
defaultSelected: [Number, String, Object, Array],
/**
* 当前展开节点的 keys，支持 .sync 修饰符，对应事件 update:expanded
*/
expanded: {
type: Array,
default: function _default() {
return [];
}
},
/**
* 是否自动展开父节点
*/
expandParent: {
type: Boolean,
default: true
},
/**
* 是否自动折叠兄弟菜单
*/
closeSiblings: Boolean,
/**
* 当前默认展开节点的 keys
*/
defaultExpanded: Array,
/**
* 默认展开所有节点
*/
defaultExpandAll: Boolean,
/**
* 选中值类型 key or node data（异步获取选项时适用）
* @member key | data
*/
selectedType: String,
/**
* 定义选中 keys 的形式，会决定 onChange 接受到的 selectedKeys 数组的形式<br>
* all: 选中数组包含所有选中的节点 <br>
* onlyLeaf: 选中数组包含所有叶子的节点 <br>
* parentFirst: 若节点被选中，则不包含该节点的子孙节点
* @member all | onlyLeaf | parentFirst
*/
selectedMode: {
type: String,
default: 'all'
},
/**
* 是否多选
*/
multiple: Boolean,
/**
* 多选模式下是否显示 checkbox
*/
multipleCheckbox: {
type: Boolean,
default: true
},
/**
* 节点 key(id) 在 nodeData 中对应的键名
*/
nodeKey: {
type: String,
default: 'key'
},
/**
* 节点文本在 nodeData 中对应的键名
*/
nodeText: {
type: String,
default: 'text'
},
/**
* 自定义渲染节点内容
* Function(h, nodeData)
*/
renderNodeContent: Function,
/**
* 节点 children 在 nodeData 中对应的键名
*/
nodeChildren: {
type: String,
default: 'children'
},
/**
* 加载子节点
*/
loadChildren: Function,
/**
* 是否可拖拽
*/
draggable: Boolean,
/**
* 拖拽放置钩子，在某节点之前插入节点，若返回 false 则阻止拖拽
* (sourceNodeData, targetNodeData)
*/
onNodeDropInsertBefore: Function,
/**
* 拖拽放置钩子，在某节点之后插入节点，若返回 false 则阻止拖拽
* (sourceNodeData, targetNodeData)
*/
onNodeDropInsertAfter: Function,
/**
* 拖拽放置钩子，在某节点之内加入节点，若返回 false 则阻止拖拽
* (sourceNodeData, targetNodeData)
*/
onNodeDropAppend: Function
},
data: function data() {
return {
treeData: this.$props.data,
inited: false,
levelIndex: LEVEL_INDEX
};
},
computed: {
_dataSelected: function _dataSelected() {
return this.transform(this.selected);
}
},
watch: {
_dataSelected: {
handler: function handler(v) {
this.nodeModel.setSelected(v);
this.nodeModel.applySelected();
this.updateDataKeyMap();
}
},
expanded: {
handler: function handler(v) {
this.nodeModel.setExpanded(this.expanded);
this.nodeModel.applyExpanded(v);
}
},
data: {
handler: function handler(v) {
this.treeData = cloneDeep_default()(v);
this.updateDataKeyMap();
},
immediate: true
},
treeData: function treeData() {
this.nodeModel.update();
}
},
beforeCreate: function beforeCreate() {
this.nodeModel = new external_tree_model_default.a();
},
created: function created() {
this.nodeModel.setConfig({
selectMode: this.selectMode,
expandParent: this.expandParent,
closeSiblings: this.closeSiblings
});
this.nodeModel.setSelected(this._dataSelected);
var expanded = this.expanded;
if (!('expanded' in this.$vnode.componentOptions.propsData) && this.defaultExpandAll) {
expanded = Object.keys(this.dataKeyMap);
}
this.nodeModel.setExpanded(expanded);
this.nodeModel.update();
this.draggingSourceModelId = null;
},
mounted: function mounted() {
var _this = this;
this.$refs.tree.classList.add('ten-tree--uninitialized');
setTimeout(function () {
_this.inited = true;
});
setTimeout(function () {
_this.$refs.tree.classList.remove('ten-tree--uninitialized');
}, 300);
},
methods: {
/**
* @public
* 获取当前数据，tree 会在内部维护一份 data 拷贝，在拖拽触发 data 变化之后，可以通过此方法获取当前的 data
*/
getCurrentData: function getCurrentData() {
return cloneDeep_default()(this.treeData);
},
transform: function transform(v) {
var _this2 = this;
var dataSelected;
if (!this.multiple) {
dataSelected = !Object(helper_["isEmpty"])(v) ? [v] : [];
} else {
dataSelected = Array.isArray(v) ? v : [];
}
if (this.selectedType === 'data') {
dataSelected = dataSelected.map(function (data) {
var key = _this2.getKey(data);
return key;
});
}
return dataSelected;
},
reverse: function reverse(v) {
var _this3 = this;
var propSelected = v;
if (this.selectedType === 'data') {
propSelected = v.map(function (key) {
return _this3.getDataByKey(key);
});
}
if (!this.multiple) {
propSelected = propSelected.length ? propSelected[0] : undefined;
}
return propSelected;
},
updateDataKeyMap: function updateDataKeyMap() {
var _this4 = this;
this.treeDataKeyMap = this.getDataKeyMap(this.treeData);
this.selectedDataKeyMap = {};
if (this.selectedType === 'data' && this.selected) {
var selected = this.multiple ? this.selected : [this.selected];
selected.forEach(function (node) {
var key = _this4.getKey(node);
_this4.selectedDataKeyMap[key] = node;
});
}
this.dataKeyMap = _objectSpread(_objectSpread({}, this.treeDataKeyMap), this.selectedDataKeyMap);
},
getDataKeyMap: function getDataKeyMap(data) {
var _this5 = this;
var keyMap = {};
this.walkData(data, function (node) {
var key = _this5.getKey(node);
keyMap[key] = node;
});
return keyMap;
},
getKey: function getKey(nodeData) {
return nodeData[this.nodeKey];
},
getText: function getText(nodeData) {
return nodeData[this.nodeText];
},
renderTreeNodeContent: function renderTreeNodeContent(h, nodeData) {
if (this.renderNodeContent) {
return this.renderNodeContent(h, {
data: nodeData
});
}
if (this.$scopedSlots.nodeContent) {
return this.$scopedSlots.nodeContent({
data: nodeData
});
}
return this._v("".concat(this.getText(nodeData)));
},
getChildren: function getChildren(nodeData) {
return nodeData[this.nodeChildren];
},
setChildren: function setChildren(nodeData, arr) {
var _this6 = this;
// eslint-disable-next-line
nodeData[this.nodeChildren] = arr;
this.$nextTick(function () {
_this6.nodeModel.setSelected(_this6._dataSelected);
_this6.nodeModel.applySelected();
});
this.updateDataKeyMap();
},
walkData: function walkData(data, fn) {
var _this7 = this;
if (Array.isArray(data)) {
data.forEach(function (item) {
return _this7.walkData(item, fn);
});
} else {
fn(data);
var children = this.getChildren(data);
if (children) {
this.walkData(children, fn);
}
}
},
getDataByKey: function getDataByKey(key) {
return this.dataKeyMap[key];
},
onNodeSelectChange: function onNodeSelectChange(key, selected) {
var _this8 = this;
var selectedKeys;
if (!this.multiple) {
selectedKeys = [key];
} else {
this.nodeModel.handleSelectedChange(key, selected);
var unSortedSelected = Array.prototype.concat.apply([], this.nodeModel.children.map(function (child) {
return child.getSelected(_this8.selectedMode);
})); // 排序
selectedKeys = [];
this._dataSelected.forEach(function (preSelectedKey) {
var index = unSortedSelected.indexOf(preSelectedKey);
if (index > -1) {
selectedKeys.push(preSelectedKey);
unSortedSelected.splice(index, 1);
}
if (_this8.selectedDataKeyMap[preSelectedKey] && !_this8.treeDataKeyMap[preSelectedKey]) {
selectedKeys.push(preSelectedKey);
}
});
selectedKeys = selectedKeys.concat(unSortedSelected);
}
/**
* 选中值变化事件
* @param selected 选中值
*/
this.$emit('selectedChange', this.reverse(selectedKeys));
},
onNodeExpandChange: function onNodeExpandChange(key, expanded) {
this.nodeModel.handleExpandedChange(key, expanded);
var expandedKeys = Array.prototype.concat.apply([], this.nodeModel.children.map(function (child) {
return child.getExpanded();
}));
/**
* 节点展开事件
* @param {Array} expandedKeys 展开节点 keys
*/
this.$emit('update:expanded', expandedKeys);
},
/* 节点拖拽 */
onNodeDragStart: function onNodeDragStart(sourceModelId, e) {
var sourceNode = this.nodeModel.getNodeById(sourceModelId);
/**
* 节点开始拖拽事件
* @param {Object} data 被拖拽的节点
* @param {Object} event 拖拽事件对象
*/
this.$emit('nodeDragStart', sourceNode.data, e);
},
onNodeDragEnter: function onNodeDragEnter(sourceModelId, targetModelId, e) {
var targetNode = this.nodeModel.getNodeById(targetModelId);
var sourceNode = this.nodeModel.getNodeById(sourceModelId);
/**
* 拖拽进入其他节点时触发的事件
* @param {Object} sourceData 被拖拽的节点
* @param {Object} targetData 目标节点
* @param {Object} event 拖拽事件对象
*/
this.$emit('nodeDragEnter', sourceNode.data, targetNode.data, e);
},
onNodeDragOver: function onNodeDragOver(sourceModelId, targetModelId, e) {
var targetNode = this.nodeModel.getNodeById(targetModelId);
var sourceNode = this.nodeModel.getNodeById(sourceModelId);
/**
* 拖拽节点悬浮于其他节点时触发的事件
* @param {Object} sourceData 被拖拽的节点
* @param {Object} targetData 目标节点
* @param {Object} event 拖拽事件对象
*/
this.$emit('nodeDragOver', sourceNode.data, targetNode.data, e);
},
onNodeDragLeave: function onNodeDragLeave(sourceModelId, targetModelId, e) {
var targetNode = this.nodeModel.getNodeById(targetModelId);
var sourceNode = this.nodeModel.getNodeById(sourceModelId);
/**
* 拖拽节点离开其他节点时触发的事件
* @param {Object} sourceData 被拖拽的节点
* @param {Object} targetData 目标节点
* @param {Object} event 拖拽事件对象
*/
this.$emit('nodeDragLeave', sourceNode.data, targetNode.data, e);
},
onNodeDragEnd: function onNodeDragEnd(sourceNode, e) {
/**
* 拖拽结束时触发的事件
* @param {Object} sourceData 被拖拽的节点
* @param {Object} event 拖拽事件对象
*/
this.$emit('nodeDragEnd', sourceNode.data, e);
},
onNodeDrop: function onNodeDrop(sourceModelId, targetModelId, e) {
var targetNode = this.nodeModel.getNodeById(targetModelId);
var sourceNode = this.nodeModel.getNodeById(sourceModelId);
/**
* 拖拽释放于其他节点时触发的事件
* @param {Object} sourceData 被拖拽的节点
* @param {Object} targetData 目标节点
* @param {Object} event 拖拽事件对象
*/
this.$emit('nodeDrop', sourceNode.data, targetNode.data, e);
},
insert: function insert() {
var beforeOrAfter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var sourceModelId = arguments.length > 1 ? arguments[1] : undefined;
var targetModelId = arguments.length > 2 ? arguments[2] : undefined;
var targetNode = this.nodeModel.getNodeById(targetModelId);
var sourceNode = this.nodeModel.getNodeById(sourceModelId);
if (!(sourceNode && targetNode)) {
return;
}
if (beforeOrAfter === 0 && this.onNodeDropInsertBefore) {
if (this.onNodeDropInsertBefore(sourceNode.data, targetNode.data) === false) {
return;
}
}
if (beforeOrAfter === 1 && this.onNodeDropInsertAfter) {
if (this.onNodeDropInsertAfter(sourceNode.data, targetNode.data) === false) {
return;
}
}
var treeData = this.treeData;
var dataArr; // delete
if (sourceNode.parent.isRoot) {
dataArr = treeData;
} else {
dataArr = this.getChildren(sourceNode.parent.data);
}
var index = dataArr.indexOf(sourceNode.data);
if (index > -1) {
dataArr.splice(index, 1);
} // insert
if (targetNode.parent.isRoot) {
dataArr = treeData;
} else {
dataArr = this.getChildren(targetNode.parent.data);
}
var index2 = dataArr.indexOf(targetNode.data);
if (index2 > -1) {
dataArr.splice(index2 + beforeOrAfter, 0, sourceNode.data);
}
var newTreeData = cloneDeep_default()(treeData);
this.treeData = newTreeData;
this.$emit('dataChange', newTreeData);
},
append: function append(sourceModelId, targetModelId) {
var targetNode = this.nodeModel.getNodeById(targetModelId);
var sourceNode = this.nodeModel.getNodeById(sourceModelId);
if (!(sourceNode && targetNode)) {
return;
}
if (this.onNodeDropAppend) {
if (this.onNodeDropAppend(sourceNode.data, targetNode.data) === false) {
return;
}
}
var treeData = this.treeData;
var dataArr; // delete
if (sourceNode.parent.isRoot) {
dataArr = treeData;
} else {
dataArr = this.getChildren(sourceNode.parent.data);
}
var index = dataArr.indexOf(sourceNode.data);
if (index > -1) {
dataArr.splice(index, 1);
} // append
var children = this.getChildren(targetNode.data);
if (!Array.isArray(children)) {
children = [];
targetNode.data[this.nodeChildren] = children;
}
children.push(sourceNode.data);
this.treeData = cloneDeep_default()(treeData);
var newTreeData = cloneDeep_default()(treeData);
this.treeData = newTreeData;
/**
* data 发生变化，一般发生在拖拽之后
* @param {Array} newTreeData
*/
this.$emit('dataChange', newTreeData);
}
}
});
// CONCATENATED MODULE: ./src/components/tree/tree.vue?vue&type=script&lang=js&
/* harmony default export */ var tree_treevue_type_script_lang_js_ = (treevue_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/tree/tree.vue
/* normalize component */
var component = normalizeComponent(
tree_treevue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var tree = __webpack_exports__["default"] = (component.exports);
/***/ })
/******/ ]);