`input_group()` support `cancelable` parameter

docs/spec.rst

@@ -58,6 +58,11 @@ input_group:
      - list
      - 输入项
 
+   * - cancelable
+     - False
+     - bool
+     - 表单是否可以取消。若 ``cancelable=True`` 则会在表单底部显示一个"取消"按钮，用户点击取消按钮后，触发 ``from_cancel`` 事件
+
 
 ``inputs`` 字段为输入项组成的列表，每一输入项为一个 ``dict``，字段如下：
 

pywebio/html/js/pywebio.js

@@ -415,14 +415,24 @@
                     <div class="ws-form-submit-btns">
                         <button type="submit" class="btn btn-primary">提交</button>
                         <button type="reset" class="btn btn-warning">重置</button>
+                        {{#cancelable}}<button type="button" class="pywebio_cancel_btn btn btn-danger">取消</button>{{/cancelable}}
                     </div>
                 </form>
             </div>
         </div>`;
+        var that = this;
 
-        const html = Mustache.render(tpl, {label: this.spec.label});
+        const html = Mustache.render(tpl, {label: this.spec.label, cancelable: this.spec.cancelable});
         this.element = $(html);
 
+        this.element.find('.pywebio_cancel_btn').on('click', function (e) {
+            that.webio_session.send_message({
+                event: "from_cancel",
+                task_id: that.task_id,
+                data: null
+            });
+        });
+
         // 如果表单最后一个输入元素为actions组件，则隐藏默认的"提交"/"重置"按钮
         if (this.spec.inputs.length && this.spec.inputs[this.spec.inputs.length - 1].type === 'actions')
             this.element.find('.ws-form-submit-btns').hide();
@@ -449,7 +459,6 @@
         }
 
         // 事件绑定
-        var that = this;
         this.element.on('submit', 'form', function (e) {
             e.preventDefault(); // avoid to execute the actual submit of the form.
             var data = {};

pywebio/input.py

@@ -356,7 +356,7 @@ def file_upload(label='', accept=None, name=None, placeholder='Choose file', req
     return single_input(item_spec, valid_func, read_file)
 
 
-def input_group(label='', inputs=None, valid_func=None):
+def input_group(label='', inputs=None, valid_func=None, cancelable=True):
     r"""输入组。向页面上展示一组输入
 
     :param str label: 输入组标签
@@ -378,7 +378,10 @@ def input_group(label='', inputs=None, valid_func=None):
 
             print(data['name'], data['age'])
 
-    :return: 返回一个 ``dict`` , 其键为输入项的 ``name`` 值，字典值为输入项的值
+    :param bool cancelable: 表单是否可以取消。若 ``cancelable=True`` 则会在表单底部显示一个"取消"按钮。
+       注意：若 ``inputs`` 中最后一项输入为 `actions()` ，则忽略 ``cancelable``
+
+    :return: 若用户取消表单，返回 ``None`` ,否则返回一个 ``dict`` , 其键为输入项的 ``name`` 值，字典值为输入项的值
     """
     assert inputs is not None, ValueError('Required `inputs` parameter in input_group()')
 
@@ -412,6 +415,6 @@ def input_group(label='', inputs=None, valid_func=None):
                 i['auto_focus'] = True
                 break
 
-    spec = dict(label=label, inputs=spec_inputs)
+    spec = dict(label=label, inputs=spec_inputs, cancelable=cancelable)
     return input_control(spec, preprocess_funcs=preprocess_funcs, item_valid_funcs=item_valid_funcs,
                          form_valid_funcs=valid_func)