npm - @lambo-design/variant-form - Versions diffs - 2.2.9-beta.0 - Mend

@lambo-design/variant-form 2.2.9-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (293) hide show

package/src/utils/code-generator.js ADDED Viewed

@@ -0,0 +1,91 @@
+export const generateCode = function(formJson, codeType= 'vue') {
+  let formJsonStr = JSON.stringify(formJson)
+  if (codeType === 'html') {
+    return `<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+	<title>VForm Demo</title>
+	<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.7/theme-chalk/index.min.css">
+	<link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform2021/VFormRender.css?t=20210720">
+	<style type="text/css">
+	</style>
+</head>
+<body>
+  <div id="app">
+	  <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
+    </v-form-render>
+	  <el-button type="primary" @click="submitForm">Submit</el-button>
+  </div>
+<script type="text/javascript">
+  if (!!window.ActiveXObject || "ActiveXObject" in window) { //IE load polyfill.js for Promise
+    var scriptEle = document.createElement("script");
+    scriptEle.type = "text/javascript";
+    scriptEle.src = "https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"
+    document.body.appendChild(scriptEle)
+  }
+</script>
+<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
+<script src="https://cdn.staticfile.org/element-ui/2.15.7/index.min.js"></script>
+<script src="https://ks3-cn-beijing.ksyun.com/vform2021/VFormRender.umd.min.js?t=20210720"></script>
+<script>
+	new Vue({
+      el: '#app',
+      data: {
+        formJson: ${formJsonStr},
+        formData: {},
+        optionData: {}
+      },
+      methods: {
+        submitForm() {
+          this.$refs.vFormRef.getFormData().then( function(formData) {
+            // Form Validation OK
+            alert( JSON.stringify(formData) )
+          }).catch( function(error) {
+            // Form Validation Failed
+            alert(error)
+          })
+        }
+      }
+	});
+</script>
+</body>
+</html>`
+  } else {
+    return `<template>
+  <div>
+    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
+    </v-form-render>
+    <el-button type="primary" @click="submitForm">Submit</el-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formJson: ${formJsonStr},
+        formData: {},
+        optionData: {}
+      }
+    },
+    methods: {
+      submitForm() {
+        this.$refs.vFormRef.getFormData().then(formData => {
+          // Form Validation OK
+          alert( JSON.stringify(formData) )
+        }).catch(error => {
+          // Form Validation failed
+          this.$message.error(error)
+        })
+      }
+    }
+  }
+</script>`
+  }
+}

package/src/utils/config.js ADDED Viewed

@@ -0,0 +1,9 @@
+export const VARIANT_FORM_VERSION = '2.2.9'
+//export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
+export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'
+//export const ACE_BASE_PATH = 'public/lib/ace/src-min-noconflict'
+export const ACE_BASE_PATH = 'https://ks3-cn-beijing.ksyun.com/vform2021/ace-mini'
+export const BEAUTIFIER_PATH= 'https://ks3-cn-beijing.ksyun.com/vform2021/js-beautify/1.14.0/beautifier.min.js'

package/src/utils/debug-console.js ADDED Viewed

@@ -0,0 +1,7 @@
+console.log = (function(logFunc) {
+  return function () {
+    if (process.env.NODE_ENV === 'development') {
+      logFunc.call(console, ...arguments);
+    }
+  }
+})(console.log)

package/src/utils/directive.js ADDED Viewed

@@ -0,0 +1,74 @@
+import Vue from 'vue'
+// v-dialogDrag: 弹窗拖拽
+Vue.directive('dialogDrag', {
+  bind(el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cursor = 'move'
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
+      } else {
+        styL = +sty.left.replace(/px/g, '')
+        styT = +sty.top.replace(/px/g, '')
+      }
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        const t = e.clientY - disY
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})
+// v-dialogDragWidth: 弹窗宽度拖大 拖小
+Vue.directive('dialogDragWidth', {
+  bind(el, binding, vnode, oldVnode) {
+    const dragDom = binding.value.$el.querySelector('.el-dialog')
+    el.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - el.offsetLeft
+      document.onmousemove = function(e) {
+        e.preventDefault() // 移动时禁用默认事件
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        dragDom.style.width = `${l}px`
+      }
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})

package/src/utils/emitter.js ADDED Viewed

@@ -0,0 +1,34 @@
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach(child => {
+    var name = child.$options.componentName;
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params));
+      broadcast.apply(child, [componentName, eventName].concat([params]));  //继续遍历子节点！！
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat([params]));
+    }
+  });
+}
+export default {
+  methods: {
+    dispatch(componentName, eventName, params) {
+      var parent = this.$parent || this.$root;
+      var name = parent.$options.componentName;
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+        if (parent) {
+          name = parent.$options.componentName;
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params);
+    }
+  }
+};

package/src/utils/format.js ADDED Viewed

@@ -0,0 +1,214 @@
+export function formatDate1(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	let y = date.getFullYear();
+	let m = date.getMonth() + 1;
+	m = m < 10 ? '0' + m : m;
+	let d = date.getDate();
+	d = d < 10 ? ('0' + d) : d;
+	return y + '-' + m + '-' + d;
+}
+export function formatDate2(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	let y = date.getFullYear();
+	let m = date.getMonth() + 1;
+	m = m < 10 ? '0' + m : m;
+	let d = date.getDate();
+	d = d < 10 ? ('0' + d) : d;
+	return y + '/' + m + '/' + d;
+}
+export function formatDate3(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	let y = date.getFullYear();
+	let m = date.getMonth() + 1;
+	m = m < 10 ? '0' + m : m;
+	let d = date.getDate();
+	d = d < 10 ? ('0' + d) : d;
+	return y + '年' + m + '月' + d +'日';
+}
+export function formatDate4(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date"){
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	return date.toLocaleString()
+}
+export function formatDate5(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
+	return date.toLocaleString('chinese', { hour12: false })
+}
+// ###,###,###,##0.######
+export function formatNumber1(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+	let length = v.toString().split(".")[1].length;
+	switch(length){
+		case 0:
+				v = v.toFixed(0)
+				break;
+		case 1:
+				v = v.toFixed(1)
+				break;
+		case 2:
+				v = v.toFixed(2)
+				break;
+		case 3:
+				v = v.toFixed(3)
+				break;
+		case 4:
+				v = v.toFixed(4)
+				break;
+		case 5:
+				v = v.toFixed(5)
+				break;
+		default:
+				v = v.toFixed(6)
+	}
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+//###,###,###,##0.00####
+export function formatNumber2(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+	let length = v.toString().split(".")[1].length;
+	switch(length){
+		case 0:
+		case 1:
+		case 2:
+				v = v.toFixed(2)
+				break;
+		case 3:
+				v = v.toFixed(3)
+				break;
+		case 4:
+				v = v.toFixed(4)
+				break;
+		case 5:
+				v = v.toFixed(5)
+				break;
+		default:
+				v = v.toFixed(6)
+	}
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+// ###,###,###,##0.000000
+export function formatNumber3(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+	v = v.toFixed(6)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+// ###,###,###,##0.000
+export function formatNumber4(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+	v = v.toFixed(3)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+// ###,###,###,##0.00
+export function formatNumber5(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+	v = v.toFixed(2)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+// ###,###,###,##0
+export function formatNumber6(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+	v = v.toFixed(0)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+// ###,##0.00##%
+export function formatNumber7(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+	let length = v.toString().split(".")[1].length;
+	v = v*100
+	switch(length){
+		case 0:
+		case 1:
+		case 2:
+				v = v.toFixed(2)
+				break;
+		case 3:
+				v = v.toFixed(3)
+				break;
+		default:
+				v = v.toFixed(4)
+	}
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res+'%';
+}

package/src/utils/i18n.js ADDED Viewed

@@ -0,0 +1,95 @@
+import Vue from 'vue'
+import si18n from './smart-vue-i18n/index'
+import enLocaleElement from "element-ui/lib/locale/lang/en";
+import zhLocaleElement from "element-ui/lib/locale/lang/zh-CN";
+import locale from "element-ui/lib/locale"
+import enLocale from "@/lang/en-US";
+import zhLocale from "@/lang/zh-CN";
+import enLocale_render from "@/lang/en-US_render";
+import zhLocale_render from "@/lang/zh-CN_render";
+import enLocale_extension from "@/lang/en-US_extension";
+import zhLocale_extension from "@/lang/zh-CN_extension";
+const langResources = {
+  'en-US': {
+    something: {
+      //...
+    },
+    ...enLocaleElement,
+    ...enLocale,
+    ...enLocale_render,
+    ...enLocale_extension
+  },
+  'zh-CN': {
+    something: {
+      //...
+    },
+    ...zhLocaleElement,
+    ...zhLocale,
+    ...zhLocale_render,
+    ...zhLocale_extension
+  }
+}
+// *********************  下述代码参考element-ui/lib/locale/format.js begin  *****************//
+const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
+function hasOwn(obj, key) {
+  return Object.prototype.hasOwnProperty.call(obj, key);
+}
+const elLocalFormatter = function template(string, args) {
+  return string.replace(RE_NARGS, (match, prefix, i, index) => {
+    let result;
+    if (string[index - 1] === '{' &&
+        string[index + match.length] === '}') {
+      return i;
+    } else {
+      result = hasOwn(args, i) ? args[i] : null;
+      if (result === null || result === undefined) {
+        return '';
+      }
+      return result;
+    }
+  })
+}
+// *********************  下述代码参考element-ui/lib/locale/format.js end  ******************//
+Vue.use(si18n, {
+  lang: localStorage.getItem('v_form_locale') || 'zh-CN',
+  messages: langResources
+})
+locale.i18n((key, value) => {
+  let result = Vue.prototype.$st(key)
+  return elLocalFormatter(result, value)
+})
+export const changeLocale = function(langName) {
+  Vue.prototype.$si18n.setLang(langName)
+  localStorage.setItem('v_form_locale', langName)
+}
+export const translate = function(key) {
+  return Vue.prototype.$st(key)
+}
+export default {
+  methods: {
+    i18nt(key) {
+      return this.$st(key)
+    },
+    /* 如果key1不存在，则查找key2 */
+    i18n2t(key1, key2) {
+      return this.$st2(key1, key2)
+    },
+  }
+}