@grid-form/common - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

@@ -22,2 +22,5 @@ import { h, toRaw, unref } from 'vue'
         onSubmit:"",
+        onChange:"",
+        afterSubmit:"",
+        hides:[],                               //表单默认值（隐藏项），包含`id`、`value`两个属性
         items: [],
@@ -47,3 +50,4 @@ buttons:[]                              //额外按钮，Object类型，属性包含：text（显示文本）、type（事件类型，post、download、script）、theme（配色）、code（脚本）
     }
-    item._uuid = _widget.toLowerCase() + "_"+(`${1000 + ID_COUNTER++}`.substring(1))
+    if("_uuid" in item)
+        item._uuid = _widget.toLowerCase() + "_"+(`${1000 + ID_COUNTER++}`.substring(1))
     if("_text" in item){
@@ -59,2 +63,10 @@ if(!!widget.label) item._text = widget.label
 /**
+ * 新建额外按钮数据对象
+ * @returns
+ */
+export const createExtraButton = ()=>({text:"按钮", theme:"default", type:"post", code:""})
+
+export const createHideItem = (id="", value="")=>({ id, value})
+
+/**
  * 构建适配于 naive-ui 的下拉框选择内容，示例：[{label:"选项一",value:"01"}]
@@ -83,3 +95,3 @@ *
     else if(typeof(text) === 'string'){
-        options = text.replace(" ", "").split(",")
+        options = text.replace(/ /g, "").split(",")
     }
@@ -106,3 +118,2 @@ else if(typeof(text) === 'object'){
 
-const HAS_PREFIX = ["INPUT", "NUMBER"]
 /**
@@ -138,6 +149,2 @@ *
         return widget(_props, attrs)
-
-    if(HAS_PREFIX.includes(item._widget)){
-
-    }
     return h(widget, _props)
@@ -144,0 +151,0 @@ }

package.json

 {
   "name": "@grid-form/common",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/0604hx/grid-form",

render.mixin.js

@@ -1,4 +0,4 @@
-import { ref, reactive, toRaw, unref, onMounted, nextTick } from 'vue'
+import { ref, reactive, toRaw, unref, onMounted, nextTick, watch } from 'vue'
 
-import { triggerLoaded, triggerBeforeSubmit, triggerExtraButtonClick, formValueProvider } from './runtime'
+import { triggerLoaded, triggerBeforeSubmit, triggerChanged,  triggerExtraButtonClick, formValueProvider } from './runtime'
 
@@ -24,2 +24,3 @@ export const RenderProps = {
     const formRequired = {}
+    const watchFields  = new Set()
 
@@ -51,4 +52,4 @@ /**
      */
-    // watch(formData, v=>{
-    //     //track("表单数据更新", formData, v)
+    // watch(formData, (v, v2, v3)=>{
+    //     track("表单数据更新", formData, v)
     // })
@@ -96,34 +97,65 @@
 
+    const _computeValue = async (text, id)=>{
+        /**
+         * 对于符合 placeholder 的特定默认值（如 ${date}）
+         * 判断 valueProvider 是否具备其处理函数，若存在，则调用（支持 Promise 返回）并将返回值作为表单值
+         *
+         * 下方注释的代码是针对去除开始的 ${ 及结尾的 } 符号后的代码实现，如需可启用
+         */
+        if(RegExp(props.placeholder).test(text) && (text in props.valueProvider)){
+            // 支持 Promise 形式的返回，但是未作异常捕获
+            let computedVal = await props.valueProvider[text]()
+            if(props.debug) track(`[表单值计算 #${id}]`, text," > ", computedVal)
+
+            return computedVal
+        }
+
+        // let holder = RegExp(props.placeholder).exec(v._value)
+        // if(holder && !!holder[1] && (holder[1] in props.valueProvider)){
+        //     let computedVal = await props.valueProvider[holder[1]]()
+        //     if(props.debug) track(`[表单值计算 #${id}]`, v._value," > ", computedVal)
+
+        //     formData[id] = computedVal
+        // }
+        return text
+    }
+
+    const _setupWatchForChange = ()=>{
+        let { onChange } = props.form
+        if(watchFields.size && !onChange)       return props.debug && track(`<onChange> 尝试监听 ${watchFields.size} 个表单项变动事件，但未定义 onChange 回调代码...`)
+        if(watchFields.size == 0 && !!onChange) return props.debug && track(`<onChange> 已定义 onChange 回调代码，但未对任何表单项设置监听选项...`)
+
+        //开启监听
+        if(watchFields.size && onChange){
+            watchFields.forEach(key=>{
+                watch(()=> formData[key], (to, from)=>{
+                    if(props.debug) track(`<onChange> 触发表单项 ${key} 变动：${from} > ${to}`)
+                    triggerChanged(props.form.onChange, formData, {key, from, to}, props.form.items)
+                })
+            })
+        }
+    }
+
     const initForm = async ()=>{
-        let items = props.form.items
+        let { items, hides } = props.form
+
+        //处理默认值，add on 2023-02-02
+        if(Array.isArray(hides)){
+            for(let v of hides){
+                if(!!v.id) {
+                    formData[v.id] = await _computeValue(v.value, v.id)
+                }
+            }
+        }
+
         if(Array.isArray(items)){
             for (const v of items) {
-                let id = v._uuid
-                if(!!id){
-                    formData[id] = v._value
+                if(!!v._uuid){
+                    formData[v._uuid] = await _computeValue(v._value, v._uuid)
 
-                    /**
-                     * 对于符合 placeholder 的特定默认值（如 ${date}）
-                     * 判断 valueProvider 是否具备其处理函数，若存在，则调用（支持 Promise 返回）并将返回值作为表单值
-                     *
-                     * 下方注释的代码是针对去除开始的 ${ 及结尾的 } 符号后的代码实现，如需可启用
-                     */
-                    if(RegExp(props.placeholder).test(v._value) && (v._value in props.valueProvider)){
-                        // 支持 Promise 形式的返回，但是未作异常捕获
-                        let computedVal = await props.valueProvider[v._value]()
-                        if(props.debug) track(`[表单值计算 #${id}]`, v._value," > ", computedVal)
-
-                        formData[id] = computedVal
-                    }
-                    // let holder = RegExp(props.placeholder).exec(v._value)
-                    // if(holder && !!holder[1] && (holder[1] in props.valueProvider)){
-                    //     let computedVal = await props.valueProvider[holder[1]]()
-                    //     if(props.debug) track(`[表单值计算 #${id}]`, v._value," > ", computedVal)
-
-                    //     formData[id] = computedVal
-                    // }
-
                     if(v._required === true){
-                        formRequired[id] = { regex: v._regex, msg: v._message, label: v._text }
+                        formRequired[v._uuid] = { regex: v._regex, msg: v._message, label: v._text }
                     }
+                    if(v._watch === true)
+                        watchFields.add(v._uuid)
                 }
@@ -134,2 +166,5 @@ }
         if(props.debug) track("表单值", formData)
+
+        _setupWatchForChange()
+
         nextTick(()=>{
@@ -145,2 +180,3 @@ if(props.form.onLoad){
     }
+
     const onExtraBtn = btn=>{
@@ -147,0 +183,0 @@ let result = triggerExtraButtonClick(btn.code, formData)

runtime.js

 export const lifeCycles = [
     { name:"onLoad", text:"加载完成", summary:"表单加载完成后调用，参数格式为：function onLoad(form)", promise:false},
     { name:"onSubmit", text:"表单提交前", summary:"表单提交前触发，以 Promise 形式返回，当报错或者返回 false 时中断提交", promise:true},
-    // { name:"afterSubmit", text:"表单提交后", summary:"表单成功提交后触发，参数格式为：function afterSubmit(form)", promise:false}
+    { name:"onChange", text:"表单值变动时", summary:"表单值变动时出发，参数格式为：function onChange(form, agent, items)", promise: false },
+    { name:"afterSubmit", text:"表单提交后", summary:"表单成功提交后触发，参数格式为：function afterSubmit(form)", promise:false},
 ]
@@ -43,2 +44,13 @@
 /**
+ *
+ * @param {*} body
+ * @param {*} form
+ * @param {*} agent
+ * @returns
+ */
+export function triggerChanged(body, form, agent, items){
+    return _triggerWithoutPromise(body, "onChange", ["form","agent", "items"], [form, agent, items])
+}
+
+/**
  * 表单提交后触发
@@ -45,0 +57,0 @@ * @param {*} body

No alert changes

Improved metrics

Total package byte prevSize

16564

12.72%

Lines of code

395

13.18%

No dependency changes