kh-one-ui 2.0.0

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

@@ -0,0 +1,240 @@
+<template>
+	<el-form class="one-form" :ref="formName" :model="model" :label-position="getConfigValue('labelPosition', 'right')"
+		:label-width="(getConfigValue('labelWidth', 0) || 120) + 'px'"
+		:show-message="getConfigValue('showMessage', true)" :inline-message="getConfigValue('inlineMessage', false)"
+		:status-icon="getConfigValue('statusIcon', false)" :size="getConfigValue('size', 'mini')"
+		:style="getConfigValue('formStyle', '')">
+		<one-draggable style="height: 100%;" :draggable="getConfigValue('draggable', false)" :list="fieldConfig"
+			ghostClass="ghost" :swapThreshold="0.5" :animation="100" :sort="true" @add="evt => handleAdd(evt, 'card')"
+			@choose="evt => handleChoose(evt, 'card')">
+			<template v-for="(fieldItem, fieldIndex) in fieldConfig" v-if="cardShow(fieldItem.id, fieldItem.show)">
+				<el-card v-if="!fieldItem.isRepeat" :shadow="getValue(fieldItem, 'cardShadow', 'never')"
+					:class="getCardClass(fieldItem) + cardActiveId == fieldItem.id ? ' active' : ''"
+					:style="cardStyle(fieldItem)" :ref="fieldItem.id">
+					<div v-if="fieldItem.title && fieldItem.title.length > 0" slot="header" class="clearfix">
+						<span
+							:style="getValue(fieldItem, 'titleStyle', 'font-size:16px;font-weight:500')">{{ fieldItem.title }}</span>
+						<div v-if="fieldItem.button && fieldItem.button.length > 0"
+							style="float: right; padding: 3px 0">
+							<one-button v-for="(btnItem, btnIndex) in fieldItem.button"
+								:type="getValue(btnItem, 'type', 'text')" :style="getValue(btnItem, 'style', '')"
+								:key="btnIndex" @click="handleCardHeaderBtnClick(btnItem)">
+								{{ btnItem.name }}
+							</one-button>
+						</div>
+					</div>
+					<div :style="getValue(fieldItem, 'contentStyle')">
+						<one-draggable style="height: 100%;" :draggable="getConfigValue('draggable', false)"
+							:list="fieldItem.formField" :group="{ name: 'widgets', pull: 'clone' }" ghostClass="ghost"
+							:swapThreshold="0.5" :animation="100" :sort="true"
+							@add="evt => handleWidgetAdd(evt, 'field', fieldItem, fieldIndex)"
+							@choose="evt => handleChoose(evt, 'field', fieldItem, fieldIndex)">
+							<template v-for="(item, index) in fieldItem.formField"
+								v-if="item && !fieldIsNoVisible(item)">
+								<template v-if="item.lineFeed">
+									<br />
+								</template>
+								<template v-if="item.widget == 'text'">
+									<div :style="itemStyle(item)">
+										<slot :name="item.field + 'before'" :props="item"></slot>
+										<div v-if="item.isHtml" style="display: inline-block;vertical-align: top;"
+											v-html="item.value"></div>
+										<div v-else style="display: inline-block;vertical-align: top;">{{ item.value }}
+										</div>
+										<slot :name="item.field + 'after'" :props="item"></slot>
+									</div>
+								</template>
+								<template v-else-if="item.widget == 'imageFile'">
+									<slot :name="item.field + 'before'" :props="item"></slot>
+									<el-image v-if="item.value" :src="item.value" :style="itemStyle(item)"></el-image>
+									<slot :name="item.field + 'after'" :props="item"></slot>
+								</template>
+								<template v-else>
+									<el-form-item :key="index"
+										:class="itemClass(item) + (fieldActiveId == item.field ? ' active' : '')"
+										:required="fieldIsReadonly(item) ? false : item.required" :prop="item.field"
+										:style="itemStyle(item)"
+										:label-width="(getValue(item, 'labelWidth', 0) || (getConfigValue('labelWidth', 0) || 120)) + 'px'"
+										:rules="getItemRules(item)">
+										<template slot="label">
+											<div v-if="item.labelStyle" :style="item.labelStyle">
+												{{ itemLabel(item) }}
+												<el-tooltip v-if="item.tips && item.tips != ''" class="item"
+													effect="dark" placement="right">
+													<div slot="content" v-html="item.tips"></div>
+													<i class="el-icon-question" />
+												</el-tooltip>
+											</div>
+											<template v-else>
+												{{ itemLabel(item) }}
+												<el-tooltip v-if="item.tips && item.tips != ''" class="item"
+													effect="dark" placement="right">
+													<div slot="content" v-html="item.tips"></div>
+													<i class="el-icon-question" />
+												</el-tooltip>
+											</template>
+										</template>
+										<!--项前插槽-->
+										<slot :name="item.field + 'before'" :props="item"></slot>
+										<!--前置字符串-->
+										<slot :name="item.field + 'PreStr'" :props="item">
+										</slot>
+										<div v-if="item.preStr"
+											:style="getValue(item, 'preStyle', 'display: inline-block; vertical-align: top;')"
+											v-html="item.preStr"></div>
+										<!--文本框-->
+										<one-form-input v-if="item.widget == 'input'" v-model="model[item.field]"
+											:item="item" @click="inputClick" @clear="inputClear"
+											:globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-input>
+										<!--密码框-->
+										<one-form-password v-if="item.widget == 'password'" v-model="model[item.field]"
+											:item="item" @click="inputClick" :globalConfig="globalConfig"
+											:dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-password>
+										<!--文本域-->
+										<one-form-textarea v-if="item.widget == 'textarea'" v-model="model[item.field]"
+											:item="item" @click="inputClick" :globalConfig="globalConfig"
+											:dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-textarea>
+										<!--计数器-->
+										<one-form-input-number v-if="item.widget == 'inputNumber'"
+											v-model="model[item.field]" :item="item" @click="inputClick"
+											:globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-input-number>
+										<!--输入下拉组合-->
+										<one-form-input-select v-if="item.widget == 'inputSelect'"
+											v-model="model[item.field]" :item="item" :globalConfig="globalConfig"
+											:dynamicConfig="dynamicConfig"
+											@updateDynamicConfig="handleUpdateDynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-input-select>
+										<!--日期-->
+										<one-form-date v-if="item.widget == 'date'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-date>
+										<!--月份-->
+										<one-form-month v-if="item.widget == 'month'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-month>
+										<!--时间-->
+										<one-form-time v-if="item.widget == 'time'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-time>
+										<!--日期时间-->
+										<one-form-datetime v-if="item.widget == 'datetime'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)">
+										</one-form-datetime>
+										<!--单选-->
+										<one-form-radio v-if="item.widget == 'radio'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@updateDynamicConfig="handleUpdateDynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-radio>
+										<!--复选-->
+										<one-form-checkbox v-if="item.widget == 'checkbox'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@updateDynamicConfig="handleUpdateDynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-checkbox>
+										<!--下拉-->
+										<one-form-select v-if="item.widget == 'select'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@updateDynamicConfig="handleUpdateDynamicConfig"
+											@selectChanged="(field, valueModel) => $emit('selectChanged', field, valueModel)"
+											@field-change="val => handleFieldChange(item, val)"></one-form-select>
+										<!-- 表格 -->
+										<one-form-table v-if="item.widget == 'table'" v-model="model[item.field]"
+											:ref="'oneTableComponents_' + item.field" :item="item"
+											:globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@tableButtonAreaClick="(item, id) => $emit('tableButtonAreaClick', item, id)"
+											@tableAreaConfigOptClick="(item, optId, row, index) => $emit('tableAreaConfigOptClick', item, optId, row, index)"
+											@field-change="val => handleFieldChange(item, val)"></one-form-table>
+										<!--上传图片-->
+										<one-form-image v-if="item.widget == 'image'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-image>
+										<!--上传图片（base64） -->
+										<one-form-base64-image v-if="item.widget == 'base64Img'"
+											v-model="model[item.field]" :item="item" :globalConfig="globalConfig"
+											:dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-base64-image>
+										<!--上传文件-->
+										<one-form-file v-if="item.widget == 'file'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)">
+										</one-form-file>
+										<!--下拉（树形选项）-->
+										<one-form-select-tree v-if="item.widget == 'selectTree'"
+											v-model="model[item.field]" :item="item" :globalConfig="globalConfig"
+											:dynamicConfig="dynamicConfig"
+											@updateDynamicConfig="handleUpdateDynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-select-tree>
+										<!--级联选择框-->
+										<one-form-cascader v-if="item.widget == 'cascader'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@updateDynamicConfig="handleUpdateDynamicConfig"
+											@active-item-change="(val) => handleEvent('cascader', 'activeItemChange', item, val)"
+											@field-change="val => handleFieldChange(item, val)">
+										</one-form-cascader>
+										<!--级联选择框(铺开)-->
+										<one-form-cascader-one v-if="item.widget == 'cascaderOne'"
+											:ref="'refFormItem' + item.field" v-model="model[item.field]" :item="item"
+											:globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@updateDynamicConfig="handleUpdateDynamicConfig"
+											@field-change="val => handleFieldChange(item, val)">
+										</one-form-cascader-one>
+										<!-- 富文本(VueQuillEditor)-->
+										<one-form-vue-quill-editor v-if="item.widget == 'vueQuillEditor'"
+											v-model="model[item.field]" :item="item" :globalConfig="globalConfig"
+											:dynamicConfig="dynamicConfig"
+											@blur="(item, event) => $emit('vueQuillEditor', 'blur', item, event)"
+											@focus="(item, event) => $emit('vueQuillEditor', 'focus', item, event)"
+											@changed="(item, event) => $emit('vueQuillEditor', 'change', item, event)"
+											@field-change="val => handleFieldChange(item, val)" />
+										<!-- 树形 -->
+										<one-form-tree v-if="item.widget == 'tree'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)" />
+										<!--上传视频-->
+										<one-form-video v-if="item.widget == 'video'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-video>
+										<!--颜色选择-->
+										<one-form-color v-if="item.widget == 'color'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-color>
+										<!--评分-->
+										<one-form-rate v-if="item.widget == 'rate'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-rate>
+										<!--Switch开关-->
+										<one-form-switch v-if="item.widget == 'switch'" v-model="model[item.field]"
+											:item="item" :globalConfig="globalConfig" :dynamicConfig="dynamicConfig"
+											@field-change="val => handleFieldChange(item, val)"></one-form-switch>
+										<!-- 插槽 -->
+										<slot v-if="item.widget == 'slot'" :name="item.field" :props="item"></slot>
+
+										<!--后置字符串-->
+										<slot :name="item.field + 'EndStr'" :props="item">
+										</slot>
+										<div v-if="item.endStr"
+											:style="getValue(item, 'endStyle', 'display: inline-block; vertical-align: top;')"
+											v-html="item.endStr"></div>
+
+										<!--项后插槽-->
+										<slot :name="item.field + 'after'" :props="item"></slot>
+									</el-form-item>
+								</template>
+							</template>
+						</one-draggable>
+					</div>
+				</el-card>
+				<one-form-repeat-card v-else v-model="model[fieldItem.id]" :ref="'one-repeat-card' + fieldItem.id"
+					:cardItem="fieldItem"
+					:formGlobalConfig="globalConfig && globalConfig.repeatCard ? globalConfig.repeatCard[fieldItem.id] : {}"
+					:parent="self"></one-form-repeat-card>
+			</template>
+		</one-draggable>
+	</el-form>
+</template>
+
+<script type="text/javascript" src="./index.js"></script>

package/packages/one-icon/index.js

@@ -0,0 +1,8 @@
+import OneIcon from './src/index.vue';
+
+/* istanbul ignore next */
+OneIcon.install = function(Vue) {
+  Vue.component(OneIcon.name, OneIcon);
+};
+
+export default OneIcon;

package/packages/one-icon/src/index.css

@@ -0,0 +1,7 @@
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}

package/packages/one-icon/src/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'OneIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'one-icon ' + this.className
+      } else {
+        return 'one-icon'
+      }
+    }
+  }
+}
+</script>

package/packages/one-icon-text/index.js

@@ -0,0 +1,8 @@
+import OneIconText from './src/index.vue';
+
+/* istanbul ignore next */
+OneIconText.install = function(Vue) {
+  Vue.component(OneIconText.name, OneIconText);
+};
+
+export default OneIconText;

package/packages/one-icon-text/src/index.css

@@ -0,0 +1,25 @@
+.one-icon-text {
+	display: inline-block;
+}
+.one-icon-text .icon {
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	vertical-align: middle;
+	color: #fff;
+	font-size: 14px;
+	float: left;
+	border-radius: 50%;
+}
+
+.one-icon-text .icon-0 {
+	background-color: #108ee9;
+}
+
+.one-icon-text .icon-1 {
+	background-color: #f56a00;
+}
+
+.one-icon-text .icon-2 {
+	background-color: #f04134;
+}

package/packages/one-icon-text/src/index.vue

@@ -0,0 +1,71 @@
+<template>
+	<div class="one-icon-text" :style="{ width: size, height: size }" ref="refOneIconText">
+		<div :class="'icon icon-' + (index % 3)" :style="{ 'font-size': iconFontSize, 'line-height': size }">{{ getWord() }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'OneIconText',
+	props: {
+		text: String,
+		index: Number,
+		size: {
+			type: String,
+			default: '30px'
+		},
+		wordNumber: {
+			type: Number,
+			default: 1
+		}
+	},
+	data() {
+		return {
+			iconFontSize: '14px'
+		};
+	},
+	created() {},
+	components: {},
+	computed: {},
+	mounted() {
+		if (!this.$refs.refOneIconText) {
+			this.iconFontSize = '14px';
+		} else {
+			let width = this.$refs.refOneIconText.offsetWidth;
+			let word = this.getWord();
+
+			if (!word) {
+				this.iconFontSize = '14px';
+			} else {
+				let length = word.length;
+
+				if (length <= 1) {
+					length = 2;
+				}
+				this.iconFontSize = width / length + 'px';
+			}
+		}
+	},
+	methods: {
+		getWord() {
+			let text = this.text;
+			let wordNumber = this.wordNumber;
+
+			if (!text) {
+				return '';
+			}
+			// let width = this.$refs.refOneIconText.offsetWidth;
+			// let minNum = parseInt(width / 12);
+
+			let number = wordNumber && wordNumber >= 1 ? wordNumber : 1;
+			// number = number >= minNum ? minNum : number;
+
+			if (text.length <= number) {
+				return text;
+			}
+
+			return text.substring(text.length - number);
+		}
+	}
+};
+</script>

package/packages/one-input/index.js

@@ -0,0 +1,8 @@
+import OneInput from './src/index.vue';
+
+/* istanbul ignore next */
+OneInput.install = function(Vue) {
+  Vue.component(OneInput.name, OneInput);
+};
+
+export default OneInput;

package/packages/one-input/src/calcTextareaHeight.js

@@ -0,0 +1,104 @@
+let hiddenTextarea;
+
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important
+`;
+
+const CONTEXT_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'
+];
+
+function calculateNodeStyling(targetElement) {
+  const style = window.getComputedStyle(targetElement);
+
+  const boxSizing = style.getPropertyValue('box-sizing');
+
+  const paddingSize = (
+    parseFloat(style.getPropertyValue('padding-bottom')) +
+    parseFloat(style.getPropertyValue('padding-top'))
+  );
+
+  const borderSize = (
+    parseFloat(style.getPropertyValue('border-bottom-width')) +
+    parseFloat(style.getPropertyValue('border-top-width'))
+  );
+
+  const contextStyle = CONTEXT_STYLE
+    .map(name => `${name}:${style.getPropertyValue(name)}`)
+    .join(';');
+
+  return { contextStyle, paddingSize, borderSize, boxSizing };
+}
+
+export default function calcTextareaHeight(
+  targetElement,
+  minRows = 1,
+  maxRows = null
+) {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement('textarea');
+    document.body.appendChild(hiddenTextarea);
+  }
+
+  let {
+    paddingSize,
+    borderSize,
+    boxSizing,
+    contextStyle
+  } = calculateNodeStyling(targetElement);
+
+  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
+
+  let height = hiddenTextarea.scrollHeight;
+  const result = {};
+
+  if (boxSizing === 'border-box') {
+    height = height + borderSize;
+  } else if (boxSizing === 'content-box') {
+    height = height - paddingSize;
+  }
+
+  hiddenTextarea.value = '';
+  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+
+  if (minRows !== null) {
+    let minHeight = singleRowHeight * minRows;
+    if (boxSizing === 'border-box') {
+      minHeight = minHeight + paddingSize + borderSize;
+    }
+    height = Math.max(minHeight, height);
+    result.minHeight = `${ minHeight }px`;
+  }
+  if (maxRows !== null) {
+    let maxHeight = singleRowHeight * maxRows;
+    if (boxSizing === 'border-box') {
+      maxHeight = maxHeight + paddingSize + borderSize;
+    }
+    height = Math.min(maxHeight, height);
+  }
+  result.height = `${ height }px`;
+  hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
+  hiddenTextarea = null;
+  return result;
+};