---
order: 3
navTitle: package.json
---
# pacakge.json

`package.json`文件包含两部分信息：

- 扩展的基本信息，包含扩展名称、描述文字、作者、组件的npm依赖等。npm配置参考[npm package.json](https://docs.npmjs.com/cli/v6/configuring-npm/package-json)。
- 组件扩展点的配置，包括组件的类名、分组、模板等。

组件扩展点中包含[通用扩展点配置](../../references/extension-contributor.md)的所有属性，并额外增加了下面的属性。

```json
{
	"contributes": {
		"dataVisualization": [{
			"name": "<component type>",
			"main": "<main ts file>",
			"visualClassName": "...",
			"supportTypes": ["..."],
			"category": "...",
			"subCategory": "...",
			"subTypes": "...",
			"themeCategory": "...",
			"group": "...",
			"focusable": true|false,
			"accessableProperties": [{...}],
			"accessableMethods": [{...}],
			"conditionStyleTypes": ["..."],
			"effectStyleTypes": ["..."],
			"templates": [{...}]
		}]
	}
}
```

当创建一个组件扩展时，必须指定的配置包括：

```json
{
	"name": "<visual component name>",
	"supportTypes": ["..."],
	"group": "...",
	"visualClassName": "..."
}
```

## 组件扩展点配置选项{#dataVisualization}

下面是`dataVisualization`扩展点的配置选项。

#### name{#name}

组件扩展点的名称，也是组件的类型名称，用于唯一标识一个组件类型，全局唯一，如`barChart`。

#### main{#main}

组件依赖的主代码文件，不指定时，使用`main.ts`。

#### visualClassName{#component-class-name}

组件的类名，对应`main.ts`中的一个js类，该类继承自`IVisualComponent`接口，SuccApp 在初始化组件时会根据这里的配置对组件进行实例化。

#### supportTypes{#support-types}

扩展支持的模块类型。一个组件扩展可以同时支持多个模块，默认支持所有模块。如扩展一个输入框，可以在`报表`和`SuperPage`中使用，可配置为`["rpt", "spg"]`。

在属性栏配置中，通过[$global.objectType](../../references/component-ppteditor.md#objectType)可以获取到当前模块类型，可在属性栏属性配置的`visibleCondition`中控制在指定模块显示。

组件扩展中支持配置的模块包括：

- `dash`，仪表板
- `rpt`，报表
- `spg`，SuperPage
- `webform`，web表单
- `excelform`，excel表单

#### category{#category}

组件分类。一个模块中同一类别的组件可以相互转换。如果未指定则使用`name`，即一个组件一个分类。

组件分类并不代表组件在设计器组件面板中的位置。如文本组件在`SuperPage`中属于`常用`分组，而它的`category`是`text`。使用`group`指定组件在设计器组件面板中的位置。

系统中默认的分类包括：

- `visual`，可视化组件
- `container`，容器组件
- `input`，输入组件
- TODO

#### subCategory{#sub-category}

当组件是子组件时，设置子组件的分类，父组件通过这个分类查找子组件并显示在添加子项的列表中。子组件不显示在组件大纲中。

例如spg列表的列配置如下：

```json
{
	"name": "customcolumn",
	"subCategory": "list.column",
	"capabilities": "columnCapabilities.json",
	...
}
```

spg列表在初始化时会查找当前已经注册的组件扩展中所有类型为`list.column`的组件，并显示在列表子项面板的添加菜单中。

#### themeCategory{#theme-category}

主题的分类，同一个主题分类的组件公用一套组件风格，相同`themeCategory`的组件在风格选择面板中会显示相同的列表。

如果未指定则使用`category`，`category`也没指定则使用`name`。通常，只有非常相似的组件，如柱形图、折线图等，才指定相同的`themeCategory`，其它情况则无需指定。

#### group{#group}

组件分组。用于控制组件在设计器组件面板中显示的位置。
支持配置字符串或json，配置json，会按照不同模块指定的分组控制显示位置。组件显示在仪表板中时需要配置以`"@"`分隔的二级分组。

```json
{
	"group": "chart@6_kpi", //显示在图形分组的kpi子分组下。
}
或
{
	"group": { "dash": "chart@@6_kpi", "spg": "other" }, //仪表板模块显示在chart分组的kpi子分组下，SuperPage显示在other分组。
}
```

TODO 截图

#### focusable{#focusable}

组件是否可以被聚焦，默认为false。通常只有输入类组件才配置为true，如输入框。在对话框中打开时自动聚焦到`focusable`为`true`的组件。

#### accessableProperties{#accessable-properties}

`设置组件属性`交互可以访问的属性名称。系统核心组件库的组件支持的组件属性参考[设置组件属性](./component-accessability.md)。

此配置项的类型是一个`json数组`。数组中的一项代表一个组件属性的配置，组件属性支持以下配置项：

- `name`：属性的名称，必选。
- `desc`：属性的详细描述，可选，如果没有配置则取[国际化配置](TODO:)，国际化配置key为`ana.setComponentProperty.组件名.属性名`。

文本输入控件组件属性配置如下：

```json
{
	"name": "input",
	"accessableProperties":[
		{
			"name":"value",
			"desc":"输入组件的值" //如果缺省，取值为message("ana.setComponentProperty.input.value")
		},
		...
	],
 	...
}
```

#### accessableMethods{#accessable-methods}

`调用组件方法`交互可以访问的方法名称及相应的参数配置。系统核心组件库的组件支持的组件属性参考[调用组件方法](./component-accessability.md)。

此配置项的类型是一个`json数组`。数组中的一项代表一个组件方法的配置，组件方法支持以下配置项：

- `name`：方法名，可选。

- `desc`：方法描述，可选。如果没有配置则取[国际化配置](TODO:)，国际化配置key为`ana.invokeComponentMethod.组件名.方法名`。

- `params`：方法参数，可选，类型是`json数组`。数组中的一项代表一个参数的配置，支持以下属性：
  - `name`：参数名称，必选。
  - `desc`：参数描述，可选。如果没有配置则取[国际化配置](TODO:)，国际化配置key为`ana.invokeComponentMethod.组件名.params.参数名`。
  - `items`：可选的枚举值数组，可选。如果一个参数只能在一些枚举项中取值则需要配置。数组中每一项支持的配置项如下：
    - `value`：枚举项的值，必选。
    - `desc`：枚举项描述，可选。如果没有配置则取[国际化配置](TODO:)，国际化配置key为`ana.invokeComponentMethod.组件名.params.参数名.枚举值`。
  - `multiple`：是否可以多选，可选，类型为`boolean`。默认为false，一般配置了`items`项才需要配置是否可以多选。
  - `defaultValue`：默认值，可选。
  - `optional`：此参数是否可选，默认值为true。

- `funtion`,组件方法的函数名，可选，指定后会尝试在组件配置的`main`文件中查找该函数并调用，用于解决组件不显示就需要调用的逻辑。TODO:

嵌入报表组件方法属性配置如下：

```json
{
    name:"embedreport",
    "accessableMethods":[
        {
            "name":"print"
        },
        {
            "name":"export",
            "params":[
                {
                    "name":"fileName"
                },
                {
                    "name":"sheet",
                    "defaultValue":"current",
                    "multiple":false,
                    "items":[
                    	{
                            "value":"current"
                        },
                        {
                            "value":"all"
                        }
                    ]
                },
                *...*
            ]
        },
        ...
    ],
    ...
}
```

#### conditionStyleTypes{#condition-style-types}

组件允许添加的条件样式类型。

条件样式类型包括：

- `highlight`，突出显示
- `topn`，最前/最后。仅在报表和excel表单中可用。
- `dataBar`，数据条
- `iconBar`，图标条
- `colorGradation`，色阶
- `colorPalette`，色板
- `iconSet`，图标集

#### effectStyleTypes{#effect-style-types}

组件允许添加的状态样式类型。

状态样式类型包括：

- `hover`，悬停
- `active`，鼠标按下
- `selected`，选中
- `disabled`，禁用
- `busy`，忙碌
- `focus`，焦点

#### templates{#templates}

组件模板。一个组件类型可以配置多个组件模板，多个模板都会在组件列表中显示。

组件模板支持的配置：

##### name

模板名称，默认是组件的`name`。

##### displayName

模板显示的名称。

##### icon

模板图标。

##### group

模板分组，仪表板中需要配置以`"@"`分隔的二级分组。

##### after

当配置了`group`后，可以配置在分组中哪一个组件后面。

##### defaultContent

默认元数据。拖入组件时生成的元数据以该配置为基础。

##### deviceContents

组件在不同设备下的默认元数据。