tenghui-ui 1.5.2 → 1.5.3

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "tenghui-ui",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "vue 2x, tenghui-ui",
   "files": [
     "dist",
+    "packages",
     "types"
   ],
   "main": "./dist/tenghui-ui.umd.js",

package/packages/button/index.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import ComTemplate from './src/index.vue';
+
+type SFCWithInstall<T> = T & { install(app: typeof Vue): void }; // vue 安装
+
+// 安装
+ComTemplate.install = (app: typeof Vue) => {
+    app.component(ComTemplate.name, ComTemplate);
+};
+const InComTemplate: SFCWithInstall<typeof ComTemplate> = ComTemplate; // 增加类型
+export default InComTemplate;

package/packages/button/src/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="ui-template">
+        <h1>{{msg}}</h1>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ComTemplate",
+        data() {
+            return {
+                msg: '测试组件'
+            }
+        },
+        methods: {
+        }
+    }
+</script>
+
+<style scoped>
+</style>

package/packages/dialog/index.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import ComComponent from './src/index.vue';
+
+type SFCWithInstall<T> = T & { install(app: typeof Vue): void }; // vue 安装
+
+// 安装
+ComComponent.install = (app: typeof Vue) => {
+    app.component(ComComponent.name, ComComponent);
+};
+const InComComponent: SFCWithInstall<typeof ComComponent> = ComComponent; // 增加类型
+export default InComComponent;

package/packages/dialog/src/index.vue

@@ -0,0 +1,117 @@
+<template>
+    <el-dialog 
+        append-to-body 
+        :top="top" 
+        :title="title" 
+        :visible="visible"
+        :width="width" 
+        :close-on-click-modal="closeOnClickModal"
+        :before-close="beforeClose"
+        @close="handleClose">
+        <slot></slot>
+        <template v-slot:footer>
+            <slot name="footer">
+                <el-button v-if="showBtn" size="small" @click="$emit('update:visible', false)">取消</el-button>
+                <el-button v-if="showBtn" size="small" type="primary" @click="handleConfirm">确定</el-button>
+            </slot>
+        </template>
+    </el-dialog>
+</template>
+<script>
+export default {
+    name: 'ComDialog',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: '标题'
+        },
+        width: {
+            type: String,
+            default: '600px'
+        },
+        top: {
+            type: String,
+            default: '50px'
+        },
+        closeOnClickModal: {
+            type: Boolean,
+            default: false
+        },
+        beforeClose: {
+            type: Function,
+            default(done) {
+                done();
+            }
+        },
+        showBtn: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            show: false
+        }
+    },
+    methods: {
+        handleClose() {
+            this.$emit('close');
+            this.$emit('update:visible', false);
+        },
+
+        handleConfirm() {
+            this.$emit('confirm');
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .el-dialog__header {
+    border-bottom: 1px solid #ededed;
+
+    .el-dialog__title {
+        font-size: 16px;
+    }
+}
+
+/deep/ .el-dialog__footer {
+    border-top: 1px solid #ededed;
+}
+
+/deep/ .el-dialog__body {
+
+    .el-form {
+        .el-select {
+            width: 240px;
+        }
+
+        .el-input {
+            width: 240px;
+        }
+
+        .el-input-number {
+            width: 240px;
+
+            .el-input__inner {
+                text-align: left;
+            }
+        }
+
+        .ui-item__main {
+            width: 100%;
+        }
+
+        .el-form-item__label {
+            font-size: 12px;
+        }
+
+        .el-input--small .el-input__icon {
+            height: 32px;
+        }
+    }
+}
+</style>

package/packages/form-item/index.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import ComComponent from './src/index.vue';
+
+type SFCWithInstall<T> = T & { install(app: typeof Vue): void }; // vue 安装
+
+// 安装
+ComComponent.install = (app: typeof Vue) => {
+    app.component(ComComponent.name, ComComponent);
+};
+const InComComponent: SFCWithInstall<typeof ComComponent> = ComComponent; // 增加类型
+export default InComComponent;

package/packages/form-item/src/defaultAttrsConfig.js

@@ -0,0 +1,54 @@
+const datePickerCommonAttrs = {
+	'range-separator': '至',
+	'start-placeholder': '开始时间',
+	'end-placeholder': '结束时间',
+};
+const datetimerangeDefaultAttrs = {
+	...datePickerCommonAttrs,
+	type: 'datetimerange',
+	'default-time': ['00:00:00', '23:59:59'],
+	'value-format': 'yyyy-MM-dd HH:mm:ss',
+	format: 'yyyy-MM-dd HH:mm:ss',
+};
+const daterangeDefaultAttrs = {
+	...datePickerCommonAttrs,
+	type: 'daterange',
+	'value-format': 'yyyy-MM-dd',
+	format: 'yyyy-MM-dd',
+};
+const datetimeDefaultAttrs = {
+	type: 'datetime',
+	'default-time': '00:00:00',
+	format: 'yyyy-MM-dd HH:mm:ss',
+};
+const dateDefaultAttrs = {
+	type: 'date',
+	format: 'yyyy-MM-dd',
+};
+export const defaultAttrsMap = {
+	input: {
+		size: 'small',
+	},
+	select: {
+		size: 'small',
+		clearable: true,
+		placeholder: '请选择',
+	},
+	textarea: {
+		placeholder: '请输入',
+		size: 'small',
+		rows: 4,
+	},
+	'input-number': {
+		'controls-position': 'right',
+		size: 'small',
+	},
+	cascader: {
+		size: 'small',
+		clearable: true,
+	},
+	daterange: daterangeDefaultAttrs,
+	datetimerange: datetimerangeDefaultAttrs,
+	datetime: datetimeDefaultAttrs,
+	date: dateDefaultAttrs
+};

package/packages/form-item/src/index.vue

@@ -0,0 +1,384 @@
+<template>
+	<div class="ui-form__item" :class="`ui-form__item--${type}`">
+		<div>
+			<slot name="label">
+				<div class="ui-item__label" v-if="label">
+					<span>{{ label }}</span>
+				</div>
+			</slot>
+		</div>
+		<div class="ui-item__main" :class="inlineLabel ? 'inline_form' : ''">
+			<template v-if="type === 'input'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+
+				<el-input
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					v-bind="setDefaultAttrs(polyfillAttrs($attrs))"
+					v-on="$listeners"
+				>
+					<template v-for="(item, key) in getComponentSlots($slots)" v-slot:[key]>
+						<slot :name="key"></slot>
+					</template>
+				</el-input>
+			</template>
+			<template v-else-if="type === 'select'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-select
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					:multiple="multiple"
+					:collapseTags="collapseTags"
+					:filterable="filterable"
+					:remote="remote"
+					:reserve-keyword="reserveKeyword"
+					:remote-method="remoteMethod"
+					v-model="modelForm"
+					v-bind="setDefaultAttrs(polyfillAttrs($attrs))"
+					v-on="$listeners"
+				>
+					<el-option
+						v-for="item in selectOption"
+						:key="item.value"
+						:value="item.value.toString()"
+						:label="item.label"
+					></el-option>
+
+					<template v-for="(item, key) in getComponentSlots($slots)" v-slot:[key]>
+						<slot :name="key"></slot>
+					</template>
+				</el-select>
+			</template>
+			<template v-else-if="type === 'textarea'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-input
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					type="textarea"
+					v-on="$listeners"
+					v-bind="setDefaultAttrs(polyfillAttrs($attrs))"
+				></el-input>
+			</template>
+			<template v-else-if="type === 'input-number'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-input-number
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					v-bind="setDefaultAttrs($attrs)"
+					v-on="$listeners"
+				></el-input-number>
+			</template>
+			<template v-else-if="type === 'cascader'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-cascader
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					:options="options"
+					:props="props"
+					:filterable="filterable"
+					:collapseTags="collapseTags"
+					v-bind="setDefaultAttrs($attrs)"
+					v-on="$listeners"
+				></el-cascader>
+			</template>
+			<template v-else-if="type === 'daterange'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-date-picker
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					v-bind="setDefaultAttrs($attrs)"
+					v-on="$listeners"
+				>
+				</el-date-picker>
+			</template>
+			<template v-else-if="type === 'datetimerange'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-date-picker
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					v-bind="setDefaultAttrs($attrs)"
+					v-on="$listeners"
+				>
+				</el-date-picker>
+			</template>
+			<template v-else-if="type === 'datetime'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-date-picker
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					v-bind="setDefaultAttrs($attrs)"
+					v-on="$listeners"
+				>
+				</el-date-picker>
+			</template>
+			<template v-else-if="type === 'date'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<el-date-picker
+					:class="{ inline_content: inlineLabel }"
+					:ref="type"
+					v-model="modelForm"
+					v-bind="setDefaultAttrs($attrs)"
+					v-on="$listeners"
+				>
+				</el-date-picker>
+			</template>
+			<template v-else-if="type === 'inputrange'">
+				<span v-if="inlineLabel" class="inline_label" :style="{ width: labelWidth }">{{ inlineLabel }}</span>
+				<div class="ui-input__range" :class="{ inline_content: inlineLabel }">
+					<el-input style="width: 50%" v-model="modelForm[0]"></el-input>
+					<span style="color: #dcdfe6">-</span>
+					<el-input style="width: 50%" v-model="modelForm[1]"></el-input>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+<script>
+import { defaultAttrsMap } from './defaultAttrsConfig';
+
+export default {
+	name: 'ComFormItem',
+	model: {
+		prop: 'model',
+		event: 'changes',
+	},
+	props: {
+		model: undefined,
+
+		// 组件类型
+		type: {
+			type: String,
+			default: 'input',
+		},
+
+		// item name
+		label: {
+			type: String,
+			default: '',
+		},
+
+		// 使用属性透传代替了此props，但原来的使用方式一样有效果
+		// readonly: {
+		// 	type: Boolean,
+		// 	default: false,
+		// },
+
+		// 选项
+		options: {
+			type: [Object, Array],
+			default() {
+				return { 1: '选项一', 2: '选项二' };
+			},
+		},
+
+		// 选项映射
+		props: {
+			type: Object,
+			default() {
+				return { value: 'value', label: 'label' };
+			},
+		},
+		// 加载条
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+
+		collapseTags: {
+			type: Boolean,
+			default: true,
+		},
+
+		filterable: {
+			type: Boolean,
+			default: true,
+		},
+
+		remote: {
+			type: Boolean,
+			default: false,
+		},
+
+		reserveKeyword: {
+			type: Boolean,
+			default: false,
+		},
+    
+		remoteMethod: {
+			type: Function,
+			default() {},
+		},
+
+		// 行内显示标签
+		inlineLabel: {
+			type: String,
+			default: '',
+		},
+		// 行内标签宽度
+		labelWidth: {
+			type: String,
+			default: '120px',
+		},
+	},
+	data() {
+		return {
+			modelForm: this.model,
+		};
+	},
+	computed: {
+		selectOption() {
+			let tempArr = [];
+			if (Array.isArray(this.options) && this.options.length && this.options[0][this.props.label] === undefined) {
+				const { label, value } = this.props;
+				tempArr = this.options.map((item, index) => {
+					const obj = {
+						label: item,
+						value: index,
+					};
+					return {
+						label: obj[label],
+						value: obj[value],
+					};
+				});
+			} else if (!Array.isArray(this.options)) {
+				tempArr = Object.entries(this.options).map(([value, label]) => {
+					return {
+						label,
+						value,
+					};
+				});
+			} else {
+				let options = [];
+				options.push(...this.options);
+				tempArr = options.map((item) => {
+					return {
+						label: item[this.props.label],
+						value: item[this.props.value],
+					};
+				});
+			}
+			return tempArr;
+		},
+	},
+	methods: {
+		// 获取需要透传到element组件的插槽
+		getComponentSlots(slots) {
+			const excludeSlots = ['label'];
+			const slots_ = {};
+
+			Object.entries(slots).forEach(([key, value]) => {
+				if (!excludeSlots.includes(key)) {
+					slots_[key] = value;
+				}
+			});
+			return slots_;
+		},
+
+		// 获取当前element组件实例
+		getCurrentInstance() {
+			return this.$refs[this.type];
+		},
+
+		// 因使用属性透传而删除了以前定义的一些props，这里做一下兼容，让以前的使用方式不改变
+		polyfillAttrs(attrs) {
+			return {
+				...attrs,
+				disabled: attrs.readonly || attrs.disabled,
+			};
+		},
+
+		// 获取配置项
+		getformItemConfig() {
+			if (!this.$UICONFIG) return {};
+			const { formItemConfig } = this.$UICONFIG;
+			return formItemConfig || {};
+		},
+
+		// 设置elemenet组件默认属性
+		setDefaultAttrs(attrs) {
+			const { type } = this;
+			const formItemConfig = this.getformItemConfig();
+			const defaultAttrs = formItemConfig[type] || defaultAttrsMap[type] || {};
+			return {
+				...defaultAttrs,
+				...attrs,
+			};
+		},
+	},
+	watch: {
+		modelForm(val) {
+			this.$emit('changes', val);
+		},
+		model(val) {
+			this.modelForm = val;
+		},
+	},
+};
+</script>
+<style lang="less" scoped>
+.ui-form__item {
+	display: flex;
+	align-items: center;
+	margin-right: 15px;
+}
+
+.ui-item__label {
+	margin-right: 10px;
+	font-size: 12px;
+	width: 70px;
+	text-align: right;
+}
+// 使用远程搜索时箭头图标高亮显示
+::v-deep.el-select {
+	.el-select__caret:first-child::before {
+		content: '\e6e1';
+	}
+	.is-focus {
+		.el-select__caret:first-child {
+			transform: rotateZ(0deg);
+		}
+	}
+}
+
+.ui-input__range {
+	max-width: 240px;
+	display: flex;
+
+	& > span {
+		line-height: 28px;
+	}
+}
+
+.el-date-editor {
+	width: 100% !important;
+}
+
+.inline_form {
+	display: flex;
+	margin-bottom: 10px;
+}
+
+.inline_label {
+	display: inline-block;
+	height: 32px;
+	line-height: 32px;
+	font-size: 12px;
+	text-align: right;
+	padding-right: 10px;
+}
+.inline_content {
+	flex: 1;
+}
+</style>

package/packages/image/index.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import ComComponent from './src/index.vue';
+
+type SFCWithInstall<T> = T & { install(app: typeof Vue): void }; // vue 安装
+
+// 安装
+ComComponent.install = (app: typeof Vue) => {
+    app.component(ComComponent.name, ComComponent);
+};
+const InComComponent: SFCWithInstall<typeof ComComponent> = ComComponent; // 增加类型
+export default InComComponent;