feat: add number control #925

docs/en/guide/schema.md

@@ -90,7 +90,8 @@ interface IElement {
       SELECT = 'select',
       CHECKBOX = 'checkbox',
       RADIO = 'radio',
-      DATE = 'date'
+      DATE = 'date',
+      NUMBER = 'number'
     };
     value: IElement[] | null;
     placeholder?: string;

docs/guide/schema.md

@@ -90,7 +90,8 @@ interface IElement {
       SELECT = 'select',
       CHECKBOX = 'checkbox',
       RADIO = 'radio'
-      DATE = 'date'
+      DATE = 'date',
+      NUMBER = 'number'
     };
     value: IElement[] | null;
     placeholder?: string;

index.html

@@ -280,6 +280,7 @@
           <div class="options">
             <ul>
               <li data-control='text'>文本</li>
+              <li data-control="number">数值</li>
               <li data-control="select">列举</li>
               <li data-control="date">日期</li>
               <li data-control="checkbox">复选框</li>

src/editor/core/draw/control/Control.ts

@@ -48,6 +48,7 @@ import { ControlBorder } from './richtext/Border'
 import { SelectControl } from './select/SelectControl'
 import { TextControl } from './text/TextControl'
 import { DateControl } from './date/DateControl'
+import { NumberControl } from './number/NumberControl'
 import { MoveDirection } from '../../../dataset/enum/Observer'
 import {
   CONTROL_CONTEXT_ATTR,
@@ -383,6 +384,8 @@ export class Control {
       const dateControl = new DateControl(element, this)
       this.activeControl = dateControl
       dateControl.awake()
+    } else if (control.type === ControlType.NUMBER) {
+      this.activeControl = new NumberControl(element, this)
     }
     // 缓存控件数据
     this.updateActiveControlValue()
@@ -763,7 +766,9 @@ export class Control {
           const nextElement = elementList[j]
           if (nextElement.controlId !== element.controlId) break
           if (
-            (type === ControlType.TEXT || type === ControlType.DATE) &&
+            (type === ControlType.TEXT ||
+              type === ControlType.DATE ||
+              type === ControlType.NUMBER) &&
             nextElement.controlComponent === ControlComponent.VALUE
           ) {
             textControlValue += nextElement.value
@@ -773,7 +778,11 @@ export class Control {
           }
           j++
         }
-        if (type === ControlType.TEXT || type === ControlType.DATE) {
+        if (
+          type === ControlType.TEXT ||
+          type === ControlType.DATE ||
+          type === ControlType.NUMBER
+        ) {
           result.push({
             ...element.control,
             zone,
@@ -917,6 +926,19 @@ export class Control {
           } else {
             date.clearSelect(controlContext, controlRule)
           }
+        } else if (type === ControlType.NUMBER) {
+          const formatValue = Array.isArray(value) ? value : [{ value }]
+          formatElementList(formatValue, {
+            isHandleFirstElement: false,
+            editorOptions: this.options
+          })
+          const text = new NumberControl(element, this)
+          this.activeControl = text
+          if (value) {
+            text.setValue(formatValue, controlContext, controlRule)
+          } else {
+            text.clearValue(controlContext, controlRule)
+          }
         }
         // 模拟控件激活后销毁
         this.activeControl = null

src/editor/core/draw/control/number/NumberControl.ts

@@ -0,0 +1,3 @@
+import { TextControl } from '../text/TextControl'
+
+export class NumberControl extends TextControl {}

src/editor/dataset/enum/Control.ts

@@ -3,7 +3,8 @@ export enum ControlType {
   SELECT = 'select',
   CHECKBOX = 'checkbox',
   RADIO = 'radio',
-  DATE = 'date'
+  DATE = 'date',
+  NUMBER = 'number'
 }
 
 export enum ControlComponent {

src/main.ts

@@ -918,6 +918,48 @@ window.onload = function () {
           }
         })
         break
+      case ControlType.NUMBER:
+        new Dialog({
+          title: '数值控件',
+          data: [
+            {
+              type: 'text',
+              label: '占位符',
+              name: 'placeholder',
+              required: true,
+              placeholder: '请输入占位符'
+            },
+            {
+              type: 'text',
+              label: '默认值',
+              name: 'value',
+              placeholder: '请输入默认值'
+            }
+          ],
+          onConfirm: payload => {
+            const placeholder = payload.find(
+              p => p.name === 'placeholder'
+            )?.value
+            if (!placeholder) return
+            const value = payload.find(p => p.name === 'value')?.value || ''
+            instance.command.executeInsertControl({
+              type: ElementType.CONTROL,
+              value: '',
+              control: {
+                type,
+                value: value
+                  ? [
+                      {
+                        value
+                      }
+                    ]
+                  : null,
+                placeholder
+              }
+            })
+          }
+        })
+        break
       default:
         break
     }