cy-element-ui 1.0.28 → 1.0.30

package/packages/{treeselect → treeSelect}/src/main.vue

@@ -1,243 +1,246 @@
-<template>
-	<div class="cy-treeselect">
-		<el-popover v-model="popoverOpen" placement="bottom-start" width="300" trigger="click" :popper-class="popperClass" @show="popoverOpen = true" @hide="popoverOpen = false">
-			<div class="cy-treeselect-select-con">
-				<div v-if="showCheckStrictly" class="cy-treeselect-select-con-t">
-					<el-checkbox v-model="isCheckStrictly">父子节点联动</el-checkbox>
-				</div>
-				
-				<div class="cy-treeselect-select-con-c">
-					<el-tree
-						ref="tree"
-						:data="treeOptions"
-						:show-checkbox="multiple"
-						:node-key="defaultOptions.id"
-						:check-strictly="!isCheckStrictly"
-						:props="defaultOptions"
-						:expand-on-click-node="false"
-						:default-expand-all="defaultExpandAll"
-						@check="treeCheck"
-						@node-click="treeClick"
-					></el-tree>
-				</div>
-			</div>
-			
-			<div slot="reference" class="cy-treeselect-select" :class="size" :style="vStyle">
-				<div class="cy-treeselect-select-v">
-					<span v-if="checkedArr.length < 1" class="cy-treeselect-select-v-placeholder">{{ placeholder }}</span>
-					<span v-else>{{ checkedArr.map(item => item[defaultOptions.label]).join() }}</span>
-				</div>
-				
-				<div class="cy-treeselect-select-v-icon" @mouseenter="isClearIcon = true" @mouseleave="isClearIcon = false">
-					<i v-if="isClearIcon && clearable" class="el-icon-circle-close" @click.stop="handleClear"></i>
-					<i v-else class="el-icon-arrow-down cy-treeselect-select-v-arrow" :class="{ 'cy-treeselect-select-v-arrow-show': popoverOpen }"></i>
-				</div>
-			</div>
-		</el-popover>
-	</div>
-</template>
-
-<script>
-import ElCheckbox from 'element-ui/packages/checkbox';
-import ElPopover from 'element-ui/packages/popover';
-
-export default {
-	name: 'CyTreeselect',
-	mixins: [ElCheckbox, ElPopover],
-	model: {
-		prop: 'value',
-		event: 'change',
-	},
-	props: {
-		value: {
-			type: [String, Number, Array],
-			default: ''
-		},
-
-		options: {
-			type: Array,
-			default: []
-		},
-
-		placeholder: {
-			type: String,
-			default: ''
-		},
-
-		// 尺寸
-		size: {
-			type: String,
-		},
-
-		// 是否显示 父子节点是否联动 多选框
-		showCheckStrictly: {
-			type: Boolean,
-			default: true
-		},
-
-		// 父子节点是否联动
-		checkStrictly: {
-			type: Boolean,
-			default: true
-		},
-
-		// 是否显示清空按钮
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-
-		// 是否多选
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-
-		// 默认数据参数选项
-		defaultOptions: {
-			type: Object,
-			default: () => {
-				return {
-					children: 'children',
-					label: 'label',
-					id: 'id'
-				}
-			}
-		},
-
-		// 树数据区域的样式
-		vStyle: {
-			type: [Array, String, Object],
-			default: ''
-		},
-
-		// 树数据区域外层popover的class
-		popperClass: {
-			type: String,
-			default: ''
-		},
-
-		// 是否默认展开所有节点
-		defaultExpandAll: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			isCheckStrictly: true, // 父子节点是否联动
-			popoverOpen: false, // 显示状态
-			isClearIcon: false, // 清空按钮显示状态
-
-			treeOptions: [], // 部门树列表
-			treeArr: [], // 部门列表
-		}
-	},
-	computed: {
-		// 当前选中的数组
-		checkedArr() {
-			if (this.multiple) {
-				let arr = [];
-				this.value && this.value.forEach(id => {
-					let cItem = this.treeArr.filter(tItem => tItem[this.defaultOptions.id] === id)[0];
-					if (cItem) arr.push(cItem);
-				})
-				return arr
-			} else {
-				let cItem = this.treeArr.filter(tItem => tItem[this.defaultOptions.id] === Number(this.value))[0];
-				return cItem ? [cItem] : []
-			}
-		}
-	},
-	watch: {
-		checkStrictly: {
-			immediate: true,
-			handler() {
-				this.isCheckStrictly = this.checkStrictly;
-			}
-		},
-
-		value: {
-			immediate: true,
-			deep: true,
-			handler() {
-				this.$nextTick(() => {
-					this.init();
-				})
-			}
-		},
-
-		options: {
-			deep: true,
-			immediate: true,
-			handler() {
-				this.treeOptions = this.options;
-				this.treeArr = this.turnFormatTreeData([], this.treeOptions, 0);
-			}
-		}
-	},
-	created() {
-
-	},
-	methods: {
-		init() {
-			// 初始化是根据value，设置已选中项
-			let arr = [];
-			if (this.multiple) {
-				arr = this.value ? this.value : [];
-			} else {
-				arr = this.value ? [this.value] : []
-			}
-			this.$nextTick(() => {
-				this.$refs.tree.setCheckedKeys(arr);
-			})
-		},
-
-		/**
-		 * 树复选框点击
-		 */
-		treeCheck(value, { checkedKeys, checkedNodes }) {
-			let arr = [];
-			arr = checkedNodes;
-			let idArr = arr.map(item => item[this.defaultOptions.id]);
-			// 返回id数组
-			this.$emit('change', this.multiple ? idArr : idArr[0], this.multiple ? arr : arr[0]);
-		},
-
-		/**
-		 * 树节点点击
-		 */
-		treeClick(value, node, event) {
-			if (this.multiple) return;
-
-			this.$emit('change', value.id, value);
-			this.popoverOpen = false;
-		},
-
-		/**
-		 * 清空
-		 */
-		handleClear() {
-			this.$emit('change', this.multiple ? [] : '', this.multiple ? [] : null);
-			this.$refs.tree.setCheckedKeys([]);
-		},
-
-		/**
-		 * 部门树 格式化为 单例数组
-		 */
-		turnFormatTreeData(arr, data, pId) {
-			data.forEach(item => {
-				let cItem = JSON.parse(JSON.stringify(item));
-				delete cItem[this.defaultOptions.children];
-				cItem.pId = pId;
-				arr.push(cItem);
-
-				if (item[this.defaultOptions.children] && item[this.defaultOptions.children].length > 0) {
-					this.turnFormatTreeData(arr, item[this.defaultOptions.children], item[this.defaultOptions.id]);
-				}
-			})
-			return arr
-		},
-	}
-};
-</script>
+<template>
+	<div class="cy-tree-select">
+		<el-popover v-model="popoverOpen" placement="bottom-start" width="300" trigger="click" :popper-class="popperClass" @show="popoverOpen = true" @hide="popoverOpen = false">
+			<div class="cy-tree-select-select-con">
+				<div v-if="showCheckStrictly" class="cy-tree-select-select-con-t">
+					<el-checkbox v-model="isCheckStrictly">父子节点联动</el-checkbox>
+				</div>
+				
+				<div class="cy-tree-select-select-con-c">
+					<el-tree
+						ref="tree"
+						:data="treeOptions"
+						:show-checkbox="multiple"
+						:node-key="defaultOptions.id"
+						:check-strictly="!isCheckStrictly"
+						:props="defaultOptions"
+						:expand-on-click-node="false"
+						:default-expand-all="defaultExpandAll"
+						@check="treeCheck"
+						@node-click="treeClick"
+					></el-tree>
+				</div>
+			</div>
+			
+			<div slot="reference" class="cy-tree-select-select" :class="size" :style="vStyle">
+				<div class="cy-tree-select-select-v">
+					<span v-if="checkedArr.length < 1" class="cy-tree-select-select-v-placeholder">{{ placeholder }}</span>
+					<span v-else>{{ checkedArr.map(item => item[defaultOptions.label]).join() }}</span>
+				</div>
+				
+				<div class="cy-tree-select-select-v-icon" @mouseenter="isClearIcon = true" @mouseleave="isClearIcon = false">
+					<i v-if="isClearIcon && clearable" class="el-icon-circle-close" @click.stop="handleClear"></i>
+					<i v-else class="el-icon-arrow-down cy-tree-select-select-v-arrow" :class="{ 'cy-tree-select-select-v-arrow-show': popoverOpen }"></i>
+				</div>
+			</div>
+		</el-popover>
+	</div>
+</template>
+
+<script>
+import ElCheckbox from 'element-ui/packages/checkbox';
+import ElPopover from 'element-ui/packages/popover';
+
+export default {
+	name: 'CyTreeSelect',
+	components: [
+		ElCheckbox,
+		ElPopover
+	],
+	model: {
+		prop: 'value',
+		event: 'change',
+	},
+	props: {
+		value: {
+			type: [String, Number, Array],
+			default: ''
+		},
+
+		options: {
+			type: Array,
+			default: []
+		},
+
+		placeholder: {
+			type: String,
+			default: ''
+		},
+
+		// 尺寸
+		size: {
+			type: String,
+		},
+
+		// 是否显示 父子节点是否联动 多选框
+		showCheckStrictly: {
+			type: Boolean,
+			default: true
+		},
+
+		// 父子节点是否联动
+		checkStrictly: {
+			type: Boolean,
+			default: true
+		},
+
+		// 是否显示清空按钮
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+
+		// 是否多选
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+
+		// 默认数据参数选项
+		defaultOptions: {
+			type: Object,
+			default: () => {
+				return {
+					children: 'children',
+					label: 'label',
+					id: 'id'
+				}
+			}
+		},
+
+		// 显示的文本框样式
+		vStyle: {
+			type: [Array, String, Object],
+			default: ''
+		},
+
+		// 树数据区域外层popover的class
+		popperClass: {
+			type: String,
+			default: ''
+		},
+
+		// 是否默认展开所有节点
+		defaultExpandAll: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isCheckStrictly: true, // 父子节点是否联动
+			popoverOpen: false, // 显示状态
+			isClearIcon: false, // 清空按钮显示状态
+
+			treeOptions: [], // 部门树列表
+			treeArr: [], // 部门列表
+		}
+	},
+	computed: {
+		// 当前选中的数组
+		checkedArr() {
+			if (this.multiple) {
+				let arr = [];
+				this.value && this.value.forEach(id => {
+					let cItem = this.treeArr.filter(tItem => tItem[this.defaultOptions.id] === id)[0];
+					if (cItem) arr.push(cItem);
+				})
+				return arr
+			} else {
+				let cItem = this.treeArr.filter(tItem => tItem[this.defaultOptions.id] === Number(this.value))[0];
+				return cItem ? [cItem] : []
+			}
+		}
+	},
+	watch: {
+		checkStrictly: {
+			immediate: true,
+			handler() {
+				this.isCheckStrictly = this.checkStrictly;
+			}
+		},
+
+		value: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.$nextTick(() => {
+					this.init();
+				})
+			}
+		},
+
+		options: {
+			deep: true,
+			immediate: true,
+			handler() {
+				this.treeOptions = this.options;
+				this.treeArr = this.turnFormatTreeData([], this.treeOptions, 0);
+			}
+		}
+	},
+	created() {
+
+	},
+	methods: {
+		init() {
+			// 初始化是根据value，设置已选中项
+			let arr = [];
+			if (this.multiple) {
+				arr = this.value ? this.value : [];
+			} else {
+				arr = this.value ? [this.value] : []
+			}
+			this.$nextTick(() => {
+				this.$refs.tree.setCheckedKeys(arr);
+			})
+		},
+
+		/**
+   * 树复选框点击
+   */
+		treeCheck(value, { checkedKeys, checkedNodes }) {
+			let arr = [];
+			arr = checkedNodes;
+			let idArr = arr.map(item => item[this.defaultOptions.id]);
+			// 返回id数组
+			this.$emit('change', this.multiple ? idArr : idArr[0], this.multiple ? arr : arr[0]);
+		},
+
+		/**
+   * 树节点点击
+   */
+		treeClick(value, node, event) {
+			if (this.multiple) return;
+
+			this.$emit('change', value.id, value);
+			this.popoverOpen = false;
+		},
+
+		/**
+   * 清空
+   */
+		handleClear() {
+			this.$emit('change', this.multiple ? [] : '', this.multiple ? [] : null);
+			this.$refs.tree.setCheckedKeys([]);
+		},
+
+		/**
+   * 部门树 格式化为 单例数组
+   */
+		turnFormatTreeData(arr, data, pId) {
+			data.forEach(item => {
+				let cItem = JSON.parse(JSON.stringify(item));
+				delete cItem[this.defaultOptions.children];
+				cItem.pId = pId;
+				arr.push(cItem);
+
+				if (item[this.defaultOptions.children] && item[this.defaultOptions.children].length > 0) {
+					this.turnFormatTreeData(arr, item[this.defaultOptions.children], item[this.defaultOptions.id]);
+				}
+			})
+			return arr
+		},
+	}
+};
+</script>

package/packages/upload/src/ajax.js

@@ -1,11 +1,11 @@
 function getError(action, option, xhr) {
 	let msg;
 	if (xhr.response) {
-		msg = `${xhr.response.error || xhr.response}`;
+		msg = `${ xhr.response.error || xhr.response }`;
 	} else if (xhr.responseText) {
-		msg = `${xhr.responseText}`;
+		msg = `${ xhr.responseText }`;
 	} else {
-		msg = `fail to post ${action} ${xhr.status}`;
+		msg = `fail to post ${ action } ${ xhr.status }`;
 	}
 
 	const err = new Error(msg);

package/packages/upload/src/upload-list.vue

@@ -25,7 +25,7 @@
 					:src="file.url" alt=""
 				>
 				<a class="el-upload-list__item-name" @click="handleClick(file)">
-					<i class="el-icon-document"></i>{{file.name}}
+					<i class="el-icon-document"></i>{{ file.name }}
 				</a>
 				<label class="el-upload-list__item-status-label">
 					<i :class="{

package/packages/upload/src/upload.vue

@@ -195,7 +195,7 @@ export default {
 				keydown: handleKeydown
 			}
 		};
-		data.class[`el-upload--${listType}`] = true;
+		data.class[`el-upload--${ listType }`] = true;
 		return (
 			<div {...data} tabindex="0" >
 				{

package/src/index.js

@@ -89,7 +89,10 @@ import Empty from '../packages/empty/index.js';
 import Descriptions from '../packages/descriptions/index.js';
 import DescriptionsItem from '../packages/descriptions-item/index.js';
 import Result from '../packages/result/index.js';
-import Treeselect from '../packages/treeselect/index.js';
+import TreeSelect from '../packages/treeSelect/index.js';
+import SubTitle from '../packages/subTitle/index.js';
+import TabDialog from '../packages/tabDialog/index.js';
+import FileUpload from '../packages/fileUpload/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -178,7 +181,9 @@ const components = [
 	Descriptions,
 	DescriptionsItem,
 	Result,
-	Treeselect,
+	TreeSelect,
+	SubTitle,
+	FileUpload,
 	CollapseTransition
 ];
 
@@ -192,6 +197,7 @@ const install = function(Vue, opts = {}) {
 
 	Vue.use(InfiniteScroll);
 	Vue.use(Loading.directive);
+	Vue.use(TabDialog);
 
 	Vue.prototype.$ELEMENT = {
 		size: opts.size || '',
@@ -205,7 +211,6 @@ const install = function(Vue, opts = {}) {
 	Vue.prototype.$prompt = MessageBox.prompt;
 	Vue.prototype.$notify = Notification;
 	Vue.prototype.$message = Message;
-
 };
 
 /* istanbul ignore if */
@@ -214,7 +219,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-	version: '1.0.28',
+	version: '1.0.29',
 	locale: locale.use,
 	i18n: locale.i18n,
 	install,
@@ -308,5 +313,8 @@ export default {
 	Descriptions,
 	DescriptionsItem,
 	Result,
-	Treeselect
+	TreeSelect,
+	SubTitle,
+	TabDialog,
+	FileUpload
 };

package/src/locale/format.js

@@ -6,8 +6,7 @@ const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
  *  - Inspired:
  *    https://github.com/Matt-Esch/string-template/index.js
  */
-export default function(Vue) {
-
+export default function(Vue) {
 	/**
    * template
    *

package/src/mixins/migrating.js

@@ -32,14 +32,14 @@ export default {
 		for (let propName in definedProps) {
 			propName = kebabCase(propName); // compatible with camel case
 			if (props[propName]) {
-				console.warn(`[Element Migrating][${this.$options.name}][Attribute]: ${props[propName]}`);
+				console.warn(`[Element Migrating][${ this.$options.name }][Attribute]: ${ props[propName] }`);
 			}
 		}
 
 		for (let eventName in definedEvents) {
 			eventName = kebabCase(eventName); // compatible with camel case
 			if (events[eventName]) {
-				console.warn(`[Element Migrating][${this.$options.name}][Event]: ${events[eventName]}`);
+				console.warn(`[Element Migrating][${ this.$options.name }][Event]: ${ events[eventName] }`);
 			}
 		}
 	},

package/src/utils/types.js

@@ -31,7 +31,7 @@ export {
 	isFunction
 };
 
-export const isUndefined = (val)=> {
+export const isUndefined = (val) => {
 	return val === void 0;
 };
 

package/types/element-ui.d.ts

@@ -89,8 +89,12 @@ import { ElDescriptions } from './descriptions'
 import { ElDescriptionsItem } from './descriptions-item'
 import { ElResult } from './result'
 import { ElStatistic } from './statistic'
-
-
+
+import { CyTreeSelect } from './treeSelect'
+import { CySubTitle } from './subTitle'
+import { CyTabDialog } from './tabDialog'
+import { CyFileUpload } from './fileUpload'
+
 export interface InstallationOptions {
   locale: any,
   i18n: any,
@@ -381,6 +385,15 @@ export class Result extends ElResult {}
 
 /** Statistic Component */
 export class Statistic extends ElStatistic {}
-
-/** Treeselect Component */
-export class Treeselect extends CyTreeselect {}
+
+/** TreeSelect Component */
+export class TreeSelect extends CyTreeSelect {}
+
+/** SubTitle Component */
+export class SubTitle extends CySubTitle {}
+
+/** TabDialog Component */
+export class TabDialog extends CyTabDialog {}
+
+/** FileUpload Component */
+export class FileUpload extends CyFileUpload {}

package/types/fileUpload.d.ts

@@ -0,0 +1,5 @@
+import { CyUIComponent } from './component'
+
+/** FileUpload Component */
+export declare class CyFileUpload extends CyUIComponent {
+}