- Optimize configuration ui

Author: github0null

res/html/builder_options/js/app.js

@@ -7,11 +7,23 @@ export interface SimpleUIConfig {
 
     iconName?: string;
 
+    btns?: {
+        'submit'?: SimpleUIBtnInfo;
+        'reset'?: SimpleUIBtnInfo;
+    };
+
     items: {
         [key: string]: SimpleUIConfigItem;
     };
 };
 
+export interface SimpleUIBtnInfo {
+
+    title: string; // title for button
+
+    disabled?: boolean; // button is disabled
+}
+
 export interface SimpleUIConfigData {
 
     value: any;
@@ -21,7 +33,7 @@ export interface SimpleUIConfigData {
 
 export interface SimpleUIConfigItem {
 
-    type: 'input' | 'options' | 'table' | 'text' | 'bool';
+    type: 'input' | 'options' | 'table' | 'text' | 'bool' | 'divider' | 'tag';
 
     attrs: { [key: string]: string | boolean | number };
 
@@ -34,9 +46,23 @@ export interface SimpleUIConfigItem {
           SimpleUIConfigData_options | 
           SimpleUIConfigData_table | 
           SimpleUIConfigData_text | 
-          SimpleUIConfigData_boolean;
+          SimpleUIConfigData_boolean |
+          SimpleUIConfigData_divider |
+          SimpleUIConfigData_tag;
 };
 
+// input box
+//
+// all attrs:
+//  - 'singleLine': [bool]      Make it as a single line input box.
+//  - 'size':       [number]    Sets the width of the element to a specified number of characters.
+//  - 'readonly':   [bool]      When true, the control will be immutable by any user interaction.
+//  - 'disabled':   [bool]      Prevents the user from interacting with the button––it cannot be pressed or focused.
+//
+// attrs only for multi-line input boxs:
+//  - 'rows':       [number]    Sizes the component vertically by a number of character rows.
+//  - 'resize':     [string]    The resize mode of the component. Options: 'none', 'vertical', 'horizontal', 'both'.
+//
 export interface SimpleUIConfigData_input extends SimpleUIConfigData {
 
     value: string;
@@ -46,6 +72,11 @@ export interface SimpleUIConfigData_input extends SimpleUIConfigData {
     placeHolder?: string;
 }
 
+// options box
+//
+// all attrs:
+//  - 'disabled': [bool]    Prevents the user from interacting with the button––it cannot be pressed or focused.
+//
 export interface SimpleUIConfigData_options extends SimpleUIConfigData {
 
     value: number; // index of enum
@@ -64,14 +95,43 @@ export interface SimpleUIConfigData_table extends SimpleUIConfigData {
     default: { [col: string]: string }[];
 }
 
+// text
+//
+// all attrs:
+//  - 'style':   [string]    CSS style for this element, like: 'font-size: 24px;'
+//
 export interface SimpleUIConfigData_text extends SimpleUIConfigData {
 
+    subType?: 'raw' | 'code';
+
     value: string;
 }
 
+// boolean
+//
+// all attrs:
+//  - 'readonly': [bool]      When true, the control will be immutable by user interaction.
+//  - 'disabled': [bool]      Prevents the user from interacting with the button––it cannot be pressed or focused.
+//
 export interface SimpleUIConfigData_boolean extends SimpleUIConfigData {
 
     value: boolean;
 
     default: boolean;
 }
+
+// divider line
+//
+// all attrs:
+//  - 'role': [string]      Indicates the semantic meaning of the divider.
+//                          The 'separator' option is the default value and indicates that the divider semantically separates content.
+//                          The 'presentation' option indicates that the divider has no semantic value and is for visual presentation only.
+//
+export interface SimpleUIConfigData_divider extends SimpleUIConfigData {
+    // divider not have content
+}
+
+export interface SimpleUIConfigData_tag extends SimpleUIConfigData {
+
+    value: string;
+}