# 组件结构定义

组件是页面的基本构成单元，它可以是一个文本、一个按钮、一个表单等。组件的定义包含了组件的属性、事件、插槽等信息。

# 组件结构描述

组件最顶层的结构如下：

title: {string} 组件中文名
description: {string} 组件描述
group: {string} 组件所属分组，用于在设计器里面进行组件分类
icon: {string} 组件图标
defType: {string} 组件固定是 component
designType: {string} 组件在设计时的组件
htmlAttrs: {string} 控制组件的html属性style、class等是否可用，可取["on", "off", {platform}的值], 默认为"on"
extends: {string} 组件继承的父schema
private: {bool} 定义组件的开放性，可取[true, false], 默认是false，true定义为内部私有组件
properties: {object} 组件所有属性定义
events: {object} 组件所有事件定义
slots: {object} 组件所有插槽区域定义

以下是一个组件结构示例：

{
  "title": "Text 文本",
  "description": "",
  "group": "基础/通用",
  "orderNo": 201,
  "icon": "",
  "defType": "component",
  "extends": "",
  "properties": {
    "text": {
      "type": "string",
      "inputType": {
        "type": "SingleLineText",
        "props": {
          "type": "textarea",
          "rows": 4
        }
      },
      "title": "文本",
      "titleMode":"block",
      "group": "基础配置",
      "orderNo": 0
    },
    "showTitle":{
      "type": "boolean",
      "title": "启用悬停标题",
      "description": "设计模式不生效",
      "group": "基础配置",
      "orderNo": 0,
      "mock": false
    },
    "maxLine":{
      "type": "number",
      "title": "最大行数",
      "group": "基础配置",
      "orderNo": 0,
      "default": 0
    }
  },
  "events": {
    "click": {
      "title": "点击文本时触发",
      "description": "",
      "group": "交互",
      "orderNo": 0
    },
    "click.stop": {
      "title": "单击事件（阻止事件冒泡）",
      "description": "",
      "group": "交互",
      "orderNo": 0
    }
  }
}

# 组件属性（properties）

# 属性结构描述

{
  "properties": {
    //组件的属性标志，如p1
    "p1": {
      "type": "", //属性类型
      "title": "", //属性中文名
      "description": "", //属性简要描述
      "default": null, //属性默认值
      //控制当前属性的编辑器模式：可取值 ["on"|"off"|"only"]
      // 默认"on"，支持表达式绑定
      // "only"标记当前属性仅支持表达式绑定
      // "off"标记当前属性不支持表达式绑定
      "expression": "on",
      "inputType": "", //属性编辑器对应的组件ID

      "sync": false, //控制属性是否需要双向同步，通常这种属性需要绑定为表达式，vue2会以.sync的模式渲染

      "nullable": false, //实验性属性：属性是否可以为空值
      "dataSource": false, //实验性属性：标记是否为数据源属性
      "private": false //实验性属性：来控制这个属性仅仅是内部用的，在属性设计器也不显示
    }
  }
}

# 属性类型（type）

建议实现如下属性类型及对应的基础属性编辑器：

{
  "properties": {
    //字符串：使用SingleLineText或MultilineText属性编辑器
    "p1": {
      "type": "string"
    },
    //布尔值：使用Boolean属性编辑器
    "p2": {
      "type": "boolean"
    },
    //数值：使用Number属性编辑器
    "p3": {
      "type": "number"
    },
    //普通对象：建议只允许绑定数据
    "p4": {
      "type": "object",
      "expression": "only"
    },
    //普通对象数组：建议只允许绑定数据
    "p5": {
      "type": "object[]",
      "expression": "only"
    },
    //自定义对象：使用ObjectEditor属性编辑器
    "p6": {
      "type": "CustomType"
    },
    //自定义对象数组：使用ArrayEditor属性编辑器
    "p7": {
      "type": "CustomType[]"
    },
    //自定义枚举类型：使用SingleSelect
    "p8": {
      "type": "CustomEnumType"
    }
  }
}

自定义枚举类型 CustomEnumType.json 格式定义：

{
  "classType": "Enum",
  "title": "输入类型",
  "values": [
    {
      "value": "text",
      "title": "单行文本"
    },
    {
      "value": "textarea",
      "title": "多行文本"
    },
    {
      "value": "password",
      "title": "密文"
    }
  ]
}

# 组件事件（events）

{
  "events": {
    //事件ID
    "click": {
      "title": "", //事件中文名
      "properties": {} //给事件回调函数提供的参数schema定义
    }
  }
}

# 组件插槽（slots）

# 插槽结构描述

{
  "slots": {
    //插槽ID
    "prepend": {
      "title": "", //插槽中文名
      "context": {
        "name": "slotProps", //默认插槽名
        "properties": {} //给当前所有动态slot区域提供的参数schema定义
      },
      "turnOn": true //标记当前slot区域是否开启，开启后此slot区域才可以设计
    }
  }
}

# 动态插槽（实验）

动态插槽使用场景：例如实现 Table 组件的某些列的自定义渲染

{
  "properties": {
    "columns": {
      "type": "TableColumn[]",
      "slot": "columns"
    }
  },
  "slots": {
    //标记columns属性可能产生的动态slot定义
    "columns": {
      "dynamic": true, //动态插槽此标记为true
      "context": {
        "name": "slotProps", //默认插槽名
        "properties": {} //给当前所有动态slot区域提供的参数schema定义
      },
      "mappingField": "slot" //TableColumn的slot属性控制是否产生动态slot区域
    }
  }
}

TableColumn 定义：

{
  "properties": {
    "field": {
      "type": "string",
      "title": "数据字段"
    },
    "name": {
      "type": "string",
      "title": "列标志名"
    },
    "label": {
      "type": "string",
      "title": "显示名称"
    },
    "align": {
      "type": "HorizontalAlignment",
      "title": "对齐方式"
    },
    "slot": {
      "type": "string",
      "title": "动态slot名称"
    }
  }
}